diff --git a/napcat.webui/src/App.tsx b/napcat.webui/src/App.tsx
index 9db7243d..37a8f124 100644
--- a/napcat.webui/src/App.tsx
+++ b/napcat.webui/src/App.tsx
@@ -1,33 +1,33 @@
-import { Suspense, lazy, useEffect } from 'react'
-import { Provider } from 'react-redux'
-import { Route, Routes, useNavigate } from 'react-router-dom'
+import { Suspense, lazy, useEffect } from 'react';
+import { Provider } from 'react-redux';
+import { Route, Routes, useNavigate } from 'react-router-dom';
 
-import PageBackground from '@/components/page_background'
-import PageLoading from '@/components/page_loading'
-import Toaster from '@/components/toaster'
+import PageBackground from '@/components/page_background';
+import PageLoading from '@/components/page_loading';
+import Toaster from '@/components/toaster';
 
-import DialogProvider from '@/contexts/dialog'
-import AudioProvider from '@/contexts/songs'
+import DialogProvider from '@/contexts/dialog';
+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 IndexPage = lazy(() => import('@/pages/index'))
-const QQLoginPage = lazy(() => import('@/pages/qq_login'))
-const DashboardIndexPage = lazy(() => import('@/pages/dashboard'))
-const AboutPage = lazy(() => import('@/pages/dashboard/about'))
-const ConfigPage = lazy(() => import('@/pages/dashboard/config'))
-const DebugPage = lazy(() => import('@/pages/dashboard/debug'))
-const HttpDebug = lazy(() => import('@/pages/dashboard/debug/http'))
-const WSDebug = lazy(() => import('@/pages/dashboard/debug/websocket'))
-const FileManagerPage = lazy(() => import('@/pages/dashboard/file_manager'))
-const LogsPage = lazy(() => import('@/pages/dashboard/logs'))
-const NetworkPage = lazy(() => import('@/pages/dashboard/network'))
-const TerminalPage = lazy(() => import('@/pages/dashboard/terminal'))
+const WebLoginPage = lazy(() => import('@/pages/web_login'));
+const IndexPage = lazy(() => import('@/pages/index'));
+const QQLoginPage = lazy(() => import('@/pages/qq_login'));
+const DashboardIndexPage = lazy(() => import('@/pages/dashboard'));
+const AboutPage = lazy(() => import('@/pages/dashboard/about'));
+const ConfigPage = lazy(() => import('@/pages/dashboard/config'));
+const DebugPage = lazy(() => import('@/pages/dashboard/debug'));
+const HttpDebug = lazy(() => import('@/pages/dashboard/debug/http'));
+const WSDebug = lazy(() => import('@/pages/dashboard/debug/websocket'));
+const FileManagerPage = lazy(() => import('@/pages/dashboard/file_manager'));
+const LogsPage = lazy(() => import('@/pages/dashboard/logs'));
+const NetworkPage = lazy(() => import('@/pages/dashboard/network'));
+const TerminalPage = lazy(() => import('@/pages/dashboard/terminal'));
 
-function App() {
+function App () {
   return (
     <DialogProvider>
       <Provider store={store}>
@@ -42,49 +42,49 @@ function App() {
         </AudioProvider>
       </Provider>
     </DialogProvider>
-  )
+  );
 }
 
-function AuthChecker({ children }: { children: React.ReactNode }) {
-  const { isAuth } = useAuth()
-  const navigate = useNavigate()
+function AuthChecker ({ children }: { children: React.ReactNode }) {
+  const { isAuth } = useAuth();
+  const navigate = useNavigate();
 
   useEffect(() => {
     if (!isAuth) {
-      const search = new URLSearchParams(window.location.search)
-      const token = search.get('token')
-      let url = '/web_login'
+      const search = new URLSearchParams(window.location.search);
+      const token = search.get('token');
+      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="config" element={<ConfigPage />} />
-        <Route path="logs" element={<LogsPage />} />
-        <Route path="debug" element={<DebugPage />}>
-          <Route path="ws" element={<WSDebug />} />
-          <Route path="http" element={<HttpDebug />} />
+        <Route path='network' element={<NetworkPage />} />
+        <Route path='config' element={<ConfigPage />} />
+        <Route path='logs' element={<LogsPage />} />
+        <Route path='debug' element={<DebugPage />}>
+          <Route path='ws' element={<WSDebug />} />
+          <Route path='http' element={<HttpDebug />} />
         </Route>
-        <Route path="file_manager" element={<FileManagerPage />} />
-        <Route path="terminal" element={<TerminalPage />} />
-        <Route path="about" element={<AboutPage />} />
+        <Route path='file_manager' element={<FileManagerPage />} />
+        <Route path='terminal' element={<TerminalPage />} />
+        <Route path='about' element={<AboutPage />} />
       </Route>
-      <Route path="/qq_login" element={<QQLoginPage />} />
-      <Route path="/web_login" element={<WebLoginPage />} />
+      <Route path='/qq_login' element={<QQLoginPage />} />
+      <Route path='/web_login' element={<WebLoginPage />} />
     </Routes>
-  )
+  );
 }
 
-export default App
+export default App;
diff --git a/napcat.webui/src/components/ColorPicker.tsx b/napcat.webui/src/components/ColorPicker.tsx
index eb9f423a..481157bc 100644
--- a/napcat.webui/src/components/ColorPicker.tsx
+++ b/napcat.webui/src/components/ColorPicker.tsx
@@ -1,6 +1,6 @@
-import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover'
-import React from 'react'
-import { ColorResult, SketchPicker } from 'react-color'
+import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover';
+import React from 'react';
+import { ColorResult, SketchPicker } from 'react-color';
 
 // 假定 heroui 提供的 Popover组件
 
@@ -11,14 +11,14 @@ interface ColorPickerProps {
 
 const ColorPicker: React.FC<ColorPickerProps> = ({ color, onChange }) => {
   const handleChange = (colorResult: ColorResult) => {
-    onChange(colorResult)
-  }
+    onChange(colorResult);
+  };
 
   return (
     <Popover triggerScaleOnOpen={false}>
       <PopoverTrigger>
         <div
-          className="w-36 h-8 rounded-md cursor-pointer border border-content4"
+          className='w-36 h-8 rounded-md cursor-pointer border border-content4'
           style={{ background: color }}
         />
       </PopoverTrigger>
@@ -26,11 +26,11 @@ const ColorPicker: React.FC<ColorPickerProps> = ({ color, onChange }) => {
         <SketchPicker
           color={color}
           onChange={handleChange}
-          className="!bg-transparent !shadow-none"
+          className='!bg-transparent !shadow-none'
         />
       </PopoverContent>
     </Popover>
-  )
-}
+  );
+};
 
-export default ColorPicker
+export default ColorPicker;
diff --git a/napcat.webui/src/components/audio_player.tsx b/napcat.webui/src/components/audio_player.tsx
index f88b31af..b77f4d6b 100644
--- a/napcat.webui/src/components/audio_player.tsx
+++ b/napcat.webui/src/components/audio_player.tsx
@@ -1,30 +1,30 @@
-import { Button } from '@heroui/button'
-import { Card, CardBody, CardHeader } from '@heroui/card'
-import { Image } from '@heroui/image'
-import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover'
-import { Slider } from '@heroui/slider'
-import { Tooltip } from '@heroui/tooltip'
-import { useLocalStorage } from '@uidotdev/usehooks'
-import clsx from 'clsx'
-import { useEffect, useRef, useState } from 'react'
+import { Button } from '@heroui/button';
+import { Card, CardBody, CardHeader } from '@heroui/card';
+import { Image } from '@heroui/image';
+import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover';
+import { Slider } from '@heroui/slider';
+import { Tooltip } from '@heroui/tooltip';
+import { useLocalStorage } from '@uidotdev/usehooks';
+import clsx from 'clsx';
+import { useEffect, useRef, useState } from 'react';
 import {
   BiSolidSkipNextCircle,
-  BiSolidSkipPreviousCircle
-} from 'react-icons/bi'
+  BiSolidSkipPreviousCircle,
+} from 'react-icons/bi';
 import {
   FaPause,
   FaPlay,
   FaRegHandPointRight,
   FaRepeat,
-  FaShuffle
-} from 'react-icons/fa6'
-import { TbRepeatOnce } from 'react-icons/tb'
-import { useMediaQuery } from 'react-responsive'
+  FaShuffle,
+} from 'react-icons/fa6';
+import { TbRepeatOnce } from 'react-icons/tb';
+import { useMediaQuery } from 'react-responsive';
 
-import { PlayMode } from '@/const/enum'
-import key from '@/const/key'
+import { PlayMode } from '@/const/enum';
+import key from '@/const/key';
 
-import { VolumeHighIcon, VolumeLowIcon } from './icons'
+import { VolumeHighIcon, VolumeLowIcon } from './icons';
 
 export interface AudioPlayerProps
   extends React.AudioHTMLAttributes<HTMLAudioElement> {
@@ -39,7 +39,7 @@ export interface AudioPlayerProps
   mode?: PlayMode
 }
 
-export default function AudioPlayer(props: AudioPlayerProps) {
+export default function AudioPlayer (props: AudioPlayerProps) {
   const {
     src,
     pressNext,
@@ -56,116 +56,116 @@ export default function AudioPlayer(props: AudioPlayerProps) {
     autoPlay,
     mode = PlayMode.Loop,
     ...rest
-  } = props
+  } = props;
 
-  const [currentTime, setCurrentTime] = useState(0)
-  const [duration, setDuration] = useState(0)
-  const [isPlaying, setIsPlaying] = useState(false)
-  const [volume, setVolume] = useState(100)
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [volume, setVolume] = useState(100);
   const [isCollapsed, setIsCollapsed] = useLocalStorage(
     key.isCollapsedMusicPlayer,
     false
-  )
-  const audioRef = useRef<HTMLAudioElement>(null)
-  const cardRef = useRef<HTMLDivElement>(null)
-  const startY = useRef(0)
-  const startX = useRef(0)
-  const [translateY, setTranslateY] = useState(0)
-  const [translateX, setTranslateX] = useState(0)
-  const isSmallScreen = useMediaQuery({ maxWidth: 767 })
-  const isMediumUp = useMediaQuery({ minWidth: 768 })
-  const shouldAdd = useRef(false)
-  const currentProgress = (currentTime / duration) * 100
+  );
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const cardRef = useRef<HTMLDivElement>(null);
+  const startY = useRef(0);
+  const startX = useRef(0);
+  const [translateY, setTranslateY] = useState(0);
+  const [translateX, setTranslateX] = useState(0);
+  const isSmallScreen = useMediaQuery({ maxWidth: 767 });
+  const isMediumUp = useMediaQuery({ minWidth: 768 });
+  const shouldAdd = useRef(false);
+  const currentProgress = (currentTime / duration) * 100;
   const [storageAutoPlay, setStorageAutoPlay] = useLocalStorage(
     key.autoPlay,
     true
-  )
+  );
 
   const handleTimeUpdate = (event: React.SyntheticEvent<HTMLAudioElement>) => {
-    const audio = event.target as HTMLAudioElement
-    setCurrentTime(audio.currentTime)
-    onTimeUpdate?.(event)
-  }
+    const audio = event.target as HTMLAudioElement;
+    setCurrentTime(audio.currentTime);
+    onTimeUpdate?.(event);
+  };
 
   const handleLoadedData = (event: React.SyntheticEvent<HTMLAudioElement>) => {
-    const audio = event.target as HTMLAudioElement
-    setDuration(audio.duration)
-    onLoadedData?.(event)
-  }
+    const audio = event.target as HTMLAudioElement;
+    setDuration(audio.duration);
+    onLoadedData?.(event);
+  };
 
   const handlePlay = (e: React.SyntheticEvent<HTMLAudioElement>) => {
-    setIsPlaying(true)
-    setStorageAutoPlay(true)
-    onPlay?.(e)
-  }
+    setIsPlaying(true);
+    setStorageAutoPlay(true);
+    onPlay?.(e);
+  };
 
   const handlePause = (e: React.SyntheticEvent<HTMLAudioElement>) => {
-    setIsPlaying(false)
-    onPause?.(e)
-  }
+    setIsPlaying(false);
+    onPause?.(e);
+  };
 
   const changeMode = () => {
-    const modes = [PlayMode.Loop, PlayMode.Random, PlayMode.Single]
-    const currentIndex = modes.findIndex((_mode) => _mode === mode)
-    const nextIndex = currentIndex + 1
-    const nextMode = modes[nextIndex] || modes[0]
-    onChangeMode?.(nextMode)
-  }
+    const modes = [PlayMode.Loop, PlayMode.Random, PlayMode.Single];
+    const currentIndex = modes.findIndex((_mode) => _mode === mode);
+    const nextIndex = currentIndex + 1;
+    const nextMode = modes[nextIndex] || modes[0];
+    onChangeMode?.(nextMode);
+  };
 
   const volumeChange = (value: number) => {
-    setVolume(value)
-  }
+    setVolume(value);
+  };
 
   useEffect(() => {
-    const audio = audioRef.current
+    const audio = audioRef.current;
     if (audio) {
-      audio.volume = volume / 100
+      audio.volume = volume / 100;
     }
-  }, [volume])
+  }, [volume]);
 
   const handleTouchStart = (e: React.TouchEvent) => {
-    startY.current = e.touches[0].clientY
-    startX.current = e.touches[0].clientX
-  }
+    startY.current = e.touches[0].clientY;
+    startX.current = e.touches[0].clientX;
+  };
 
   const handleTouchMove = (e: React.TouchEvent) => {
-    const deltaY = e.touches[0].clientY - startY.current
-    const deltaX = e.touches[0].clientX - startX.current
-    const container = cardRef.current
-    const header = cardRef.current?.querySelector('[data-header]')
-    const headerHeight = header?.clientHeight || 20
-    const addHeight = (container?.clientHeight || headerHeight) - headerHeight
-    const _shouldAdd = isCollapsed && deltaY < 0
+    const deltaY = e.touches[0].clientY - startY.current;
+    const deltaX = e.touches[0].clientX - startX.current;
+    const container = cardRef.current;
+    const header = cardRef.current?.querySelector('[data-header]');
+    const headerHeight = header?.clientHeight || 20;
+    const addHeight = (container?.clientHeight || headerHeight) - headerHeight;
+    const _shouldAdd = isCollapsed && deltaY < 0;
     if (isSmallScreen) {
-      shouldAdd.current = _shouldAdd
-      setTranslateY(_shouldAdd ? deltaY + addHeight : deltaY)
+      shouldAdd.current = _shouldAdd;
+      setTranslateY(_shouldAdd ? deltaY + addHeight : deltaY);
     } else {
-      setTranslateX(deltaX)
+      setTranslateX(deltaX);
     }
-  }
+  };
 
   const handleTouchEnd = () => {
     if (isSmallScreen) {
-      const container = cardRef.current
-      const header = cardRef.current?.querySelector('[data-header]')
-      const headerHeight = header?.clientHeight || 20
-      const addHeight = (container?.clientHeight || headerHeight) - headerHeight
-      const _translateY = translateY - (shouldAdd.current ? addHeight : 0)
+      const container = cardRef.current;
+      const header = cardRef.current?.querySelector('[data-header]');
+      const headerHeight = header?.clientHeight || 20;
+      const addHeight = (container?.clientHeight || headerHeight) - headerHeight;
+      const _translateY = translateY - (shouldAdd.current ? addHeight : 0);
       if (_translateY > 100) {
-        setIsCollapsed(true)
+        setIsCollapsed(true);
       } else if (_translateY < -100) {
-        setIsCollapsed(false)
+        setIsCollapsed(false);
       }
-      setTranslateY(0)
+      setTranslateY(0);
     } else {
       if (translateX > 100) {
-        setIsCollapsed(true)
+        setIsCollapsed(true);
       } else if (translateX < -100) {
-        setIsCollapsed(false)
+        setIsCollapsed(false);
       }
-      setTranslateX(0)
+      setTranslateX(0);
     }
-  }
+  };
 
   const dragTranslate = isSmallScreen
     ? translateY
@@ -173,16 +173,16 @@ export default function AudioPlayer(props: AudioPlayerProps) {
       : ''
     : translateX
       ? `translateX(${translateX}px)`
-      : ''
+      : '';
   const collapsedTranslate = isCollapsed
     ? isSmallScreen
       ? 'translateY(90%)'
       : 'translateX(96%)'
-    : ''
+    : '';
 
-  const translateStyle = dragTranslate || collapsedTranslate
+  const translateStyle = dragTranslate || collapsedTranslate;
 
-  if (!src) return null
+  if (!src) return null;
 
   return (
     <div
@@ -192,7 +192,7 @@ export default function AudioPlayer(props: AudioPlayerProps) {
         isCollapsed && 'md:hover:!translate-x-80'
       )}
       style={{
-        transform: translateStyle
+        transform: translateStyle,
       }}
     >
       <audio
@@ -216,10 +216,10 @@ export default function AudioPlayer(props: AudioPlayerProps) {
           isSmallScreen ? 'rounded-t-3xl' : 'md:rounded-l-xl'
         )}
         classNames={{
-          body: 'p-0'
+          body: 'p-0',
         }}
-        shadow="sm"
-        radius="none"
+        shadow='sm'
+        radius='none'
       >
         {isMediumUp && (
           <Button
@@ -230,9 +230,9 @@ export default function AudioPlayer(props: AudioPlayerProps) {
                 ? 'top-0 left-0 w-full h-full rounded-xl bg-opacity-0 hover:bg-opacity-30'
                 : 'top-3 -left-8 rounded-l-full bg-opacity-50 backdrop-blur-md'
             )}
-            variant="solid"
-            color="primary"
-            size="sm"
+            variant='solid'
+            color='primary'
+            size='sm'
             onPress={() => setIsCollapsed(!isCollapsed)}
           >
             <FaRegHandPointRight />
@@ -241,65 +241,65 @@ export default function AudioPlayer(props: AudioPlayerProps) {
         {isSmallScreen && (
           <CardHeader
             data-header
-            className="flex-row justify-center pt-4"
+            className='flex-row justify-center pt-4'
             onTouchStart={handleTouchStart}
             onTouchMove={handleTouchMove}
             onTouchEnd={handleTouchEnd}
             onClick={() => setIsCollapsed(!isCollapsed)}
           >
-            <div className="w-24 h-2 rounded-full bg-content2-foreground shadow-sm"></div>
+            <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="relative col-span-6 md:col-span-4 flex justify-center">
+          <div className='grid grid-cols-6 md:grid-cols-12 gap-6 md:gap-4 items-center justify-center overflow-hidden p-6 md:p-2 m-0'>
+            <div className='relative col-span-6 md:col-span-4 flex justify-center'>
               <Image
-                alt="Album cover"
-                className="object-cover"
+                alt='Album cover'
+                className='object-cover'
                 classNames={{
                   wrapper: 'w-36 aspect-square md:w-24 flex',
-                  img: 'block w-full h-full'
+                  img: 'block w-full h-full',
                 }}
-                shadow="md"
+                shadow='md'
                 src={cover}
-                width="100%"
+                width='100%'
               />
             </div>
 
-            <div className="flex flex-col col-span-6 md:col-span-8">
-              <div className="flex flex-col gap-0">
-                <h1 className="font-medium truncate">{title}</h1>
-                <p className="text-xs text-foreground/80 truncate">{artist}</p>
+            <div className='flex flex-col col-span-6 md:col-span-8'>
+              <div className='flex flex-col gap-0'>
+                <h1 className='font-medium truncate'>{title}</h1>
+                <p className='text-xs text-foreground/80 truncate'>{artist}</p>
               </div>
 
-              <div className="flex flex-col">
+              <div className='flex flex-col'>
                 <Slider
-                  aria-label="Music progress"
+                  aria-label='Music progress'
                   classNames={{
                     track: 'bg-default-500/30 border-none',
                     thumb: 'w-2 h-2 after:w-1.5 after:h-1.5',
-                    filler: 'rounded-full'
+                    filler: 'rounded-full',
                   }}
-                  color="foreground"
+                  color='foreground'
                   value={currentProgress || 0}
                   defaultValue={0}
-                  size="sm"
+                  size='sm'
                   onChange={(value) => {
-                    value = Array.isArray(value) ? value[0] : value
-                    const audio = audioRef.current
+                    value = Array.isArray(value) ? value[0] : value;
+                    const audio = audioRef.current;
                     if (audio) {
-                      audio.currentTime = (value / 100) * duration
+                      audio.currentTime = (value / 100) * duration;
                     }
                   }}
                 />
-                <div className="flex justify-between h-3">
-                  <p className="text-xs">
+                <div className='flex justify-between h-3'>
+                  <p className='text-xs'>
                     {Math.floor(currentTime / 60)}:
                     {Math.floor(currentTime % 60)
                       .toString()
                       .padStart(2, '0')}
                   </p>
-                  <p className="text-xs text-foreground/50">
+                  <p className='text-xs text-foreground/50'>
                     {Math.floor(duration / 60)}:
                     {Math.floor(duration % 60)
                       .toString()
@@ -308,7 +308,7 @@ export default function AudioPlayer(props: AudioPlayerProps) {
                 </div>
               </div>
 
-              <div className="flex w-full items-center justify-center">
+              <div className='flex w-full items-center justify-center'>
                 <Tooltip
                   content={
                     mode === PlayMode.Loop
@@ -320,30 +320,30 @@ export default function AudioPlayer(props: AudioPlayerProps) {
                 >
                   <Button
                     isIconOnly
-                    className="data-[hover]:bg-foreground/10 text-lg md:text-medium"
-                    radius="full"
-                    variant="light"
-                    size="md"
+                    className='data-[hover]:bg-foreground/10 text-lg md:text-medium'
+                    radius='full'
+                    variant='light'
+                    size='md'
                     onPress={changeMode}
                   >
                     {mode === PlayMode.Loop && (
-                      <FaRepeat className="text-foreground/80" />
+                      <FaRepeat className='text-foreground/80' />
                     )}
                     {mode === PlayMode.Random && (
-                      <FaShuffle className="text-foreground/80" />
+                      <FaShuffle className='text-foreground/80' />
                     )}
                     {mode === PlayMode.Single && (
-                      <TbRepeatOnce className="text-foreground/80 text-xl" />
+                      <TbRepeatOnce className='text-foreground/80 text-xl' />
                     )}
                   </Button>
                 </Tooltip>
-                <Tooltip content="上一首">
+                <Tooltip content='上一首'>
                   <Button
                     isIconOnly
-                    className="data-[hover]:bg-foreground/10 text-2xl md:text-xl"
-                    radius="full"
-                    variant="light"
-                    size="md"
+                    className='data-[hover]:bg-foreground/10 text-2xl md:text-xl'
+                    radius='full'
+                    variant='light'
+                    size='md'
                     onPress={pressPrevious}
                   >
                     <BiSolidSkipPreviousCircle />
@@ -352,66 +352,66 @@ export default function AudioPlayer(props: AudioPlayerProps) {
                 <Tooltip content={isPlaying ? '暂停' : '播放'}>
                   <Button
                     isIconOnly
-                    className="data-[hover]:bg-foreground/10 text-3xl md:text-3xl"
-                    radius="full"
-                    variant="light"
-                    size="lg"
+                    className='data-[hover]:bg-foreground/10 text-3xl md:text-3xl'
+                    radius='full'
+                    variant='light'
+                    size='lg'
                     onPress={() => {
                       if (isPlaying) {
-                        audioRef.current?.pause()
-                        setStorageAutoPlay(false)
+                        audioRef.current?.pause();
+                        setStorageAutoPlay(false);
                       } else {
-                        audioRef.current?.play()
+                        audioRef.current?.play();
                       }
                     }}
                   >
-                    {isPlaying ? <FaPause /> : <FaPlay className="ml-1" />}
+                    {isPlaying ? <FaPause /> : <FaPlay className='ml-1' />}
                   </Button>
                 </Tooltip>
-                <Tooltip content="下一首">
+                <Tooltip content='下一首'>
                   <Button
                     isIconOnly
-                    className="data-[hover]:bg-foreground/10 text-2xl md:text-xl"
-                    radius="full"
-                    variant="light"
-                    size="md"
+                    className='data-[hover]:bg-foreground/10 text-2xl md:text-xl'
+                    radius='full'
+                    variant='light'
+                    size='md'
                     onPress={pressNext}
                   >
                     <BiSolidSkipNextCircle />
                   </Button>
                 </Tooltip>
                 <Popover
-                  placement="top"
+                  placement='top'
                   classNames={{
-                    content: 'bg-opacity-30 backdrop-blur-md'
+                    content: 'bg-opacity-30 backdrop-blur-md',
                   }}
                 >
                   <PopoverTrigger>
                     <Button
                       isIconOnly
-                      className="data-[hover]:bg-foreground/10 text-xl md:text-xl"
-                      radius="full"
-                      variant="light"
-                      size="md"
+                      className='data-[hover]:bg-foreground/10 text-xl md:text-xl'
+                      radius='full'
+                      variant='light'
+                      size='md'
                     >
                       <VolumeHighIcon />
                     </Button>
                   </PopoverTrigger>
                   <PopoverContent>
                     <Slider
-                      orientation="vertical"
+                      orientation='vertical'
                       showTooltip
-                      aria-label="Volume"
-                      className="h-40"
-                      color="primary"
+                      aria-label='Volume'
+                      className='h-40'
+                      color='primary'
                       defaultValue={volume}
                       onChange={(value) => {
-                        value = Array.isArray(value) ? value[0] : value
-                        volumeChange(value)
+                        value = Array.isArray(value) ? value[0] : value;
+                        volumeChange(value);
                       }}
-                      startContent={<VolumeHighIcon className="text-2xl" />}
-                      size="sm"
-                      endContent={<VolumeLowIcon className="text-2xl" />}
+                      startContent={<VolumeHighIcon className='text-2xl' />}
+                      size='sm'
+                      endContent={<VolumeLowIcon className='text-2xl' />}
                     />
                   </PopoverContent>
                 </Popover>
@@ -421,5 +421,5 @@ export default function AudioPlayer(props: AudioPlayerProps) {
         </CardBody>
       </Card>
     </div>
-  )
+  );
 }
diff --git a/napcat.webui/src/components/button/add_button.tsx b/napcat.webui/src/components/button/add_button.tsx
index 571766e7..3461cc5e 100644
--- a/napcat.webui/src/components/button/add_button.tsx
+++ b/napcat.webui/src/components/button/add_button.tsx
@@ -1,87 +1,87 @@
-import { Button } from '@heroui/button'
+import { Button } from '@heroui/button';
 import {
   Dropdown,
   DropdownItem,
   DropdownMenu,
-  DropdownTrigger
-} from '@heroui/dropdown'
-import { Tooltip } from '@heroui/tooltip'
-import { FaRegCircleQuestion } from 'react-icons/fa6'
-import { IoAddCircleOutline } from 'react-icons/io5'
+  DropdownTrigger,
+} from '@heroui/dropdown';
+import { Tooltip } from '@heroui/tooltip';
+import { FaRegCircleQuestion } from 'react-icons/fa6';
+import { IoAddCircleOutline } from 'react-icons/io5';
 
 import {
   HTTPClientIcon,
   HTTPServerIcon,
   PCIcon,
   PlusIcon,
-  WebsocketIcon
-} from '../icons'
+  WebsocketIcon,
+} from '../icons';
 
 export interface AddButtonProps {
   onOpen: (key: keyof OneBotConfig['network']) => void
 }
 
 const AddButton: React.FC<AddButtonProps> = (props) => {
-  const { onOpen } = props
+  const { onOpen } = props;
 
   return (
     <Dropdown
       classNames={{
-        content: 'bg-opacity-30 backdrop-blur-md'
+        content: 'bg-opacity-30 backdrop-blur-md',
       }}
-      placement="right"
+      placement='right'
     >
       <DropdownTrigger>
         <Button
-          color="primary"
-          startContent={<IoAddCircleOutline className="text-2xl" />}
+          color='primary'
+          startContent={<IoAddCircleOutline className='text-2xl' />}
         >
           新建
         </Button>
       </DropdownTrigger>
       <DropdownMenu
-        aria-label="Create Network Config"
-        color="primary"
-        variant="flat"
+        aria-label='Create Network Config'
+        color='primary'
+        variant='flat'
         onAction={(key) => {
-          onOpen(key as keyof OneBotConfig['network'])
+          onOpen(key as keyof OneBotConfig['network']);
         }}
       >
         <DropdownItem
-          key="title"
+          key='title'
           isReadOnly
-          className="cursor-default hover:!bg-transparent"
-          textValue="title"
+          className='cursor-default hover:!bg-transparent'
+          textValue='title'
         >
-          <div className="flex items-center gap-2 justify-center">
-            <div className="w-5 h-5 -ml-3">
+          <div className='flex items-center gap-2 justify-center'>
+            <div className='w-5 h-5 -ml-3'>
               <PlusIcon />
             </div>
-            <div className="text-primary-400">新建网络配置</div>
+            <div className='text-primary-400'>新建网络配置</div>
           </div>
         </DropdownItem>
         <DropdownItem
-          key="httpServers"
-          textValue="httpServers"
+          key='httpServers'
+          textValue='httpServers'
           startContent={
-            <div className="w-6 h-6">
+            <div className='w-6 h-6'>
               <HTTPServerIcon />
             </div>
           }
         >
-          <div className="flex gap-1 items-center">
+          <div className='flex gap-1 items-center'>
             HTTP服务器
             <Tooltip
-              content="「由NapCat建立」一个HTTP服务器，你可以「使用框架连接」此服务器或者「自己构造请求发送」至此服务器。NapCat会根据你配置的IP和端口等建立一个地址，你或者你的框架应该连接到这个地址。"
+              content='「由NapCat建立」一个HTTP服务器，你可以「使用框架连接」此服务器或者「自己构造请求发送」至此服务器。NapCat会根据你配置的IP和端口等建立一个地址，你或者你的框架应该连接到这个地址。'
               showArrow
-              className="max-w-64"
+              className='max-w-64'
             >
               <Button
                 isIconOnly
-                radius="full"
-                size="sm"
-                variant="light"
-                className="w-4 h-4 min-w-0"
+                radius='full'
+                size='sm'
+                variant='light'
+                className='w-4 h-4 min-w-0'
               >
                 <FaRegCircleQuestion />
               </Button>
@@ -89,27 +89,27 @@ const AddButton: React.FC<AddButtonProps> = (props) => {
           </div>
         </DropdownItem>
         <DropdownItem
-          key="httpSseServers"
-          textValue="httpSseServers"
+          key='httpSseServers'
+          textValue='httpSseServers'
           startContent={
-            <div className="w-6 h-6">
+            <div className='w-6 h-6'>
               <HTTPServerIcon />
             </div>
           }
         >
-          <div className="flex gap-1 items-center">
+          <div className='flex gap-1 items-center'>
             HTTP SSE服务器
             <Tooltip
-              content="「由NapCat建立」一个HTTP SSE服务器，你可以「使用框架连接」此服务器或者「自己构造请求发送」至此服务器。NapCat会根据你配置的IP和端口等建立一个地址，你或者你的框架应该连接到这个地址。"
+              content='「由NapCat建立」一个HTTP SSE服务器，你可以「使用框架连接」此服务器或者「自己构造请求发送」至此服务器。NapCat会根据你配置的IP和端口等建立一个地址，你或者你的框架应该连接到这个地址。'
               showArrow
-              className="max-w-64"
+              className='max-w-64'
             >
               <Button
                 isIconOnly
-                radius="full"
-                size="sm"
-                variant="light"
-                className="w-4 h-4 min-w-0"
+                radius='full'
+                size='sm'
+                variant='light'
+                className='w-4 h-4 min-w-0'
               >
                 <FaRegCircleQuestion />
               </Button>
@@ -117,27 +117,27 @@ const AddButton: React.FC<AddButtonProps> = (props) => {
           </div>
         </DropdownItem>
         <DropdownItem
-          key="httpClients"
-          textValue="httpClients"
+          key='httpClients'
+          textValue='httpClients'
           startContent={
-            <div className="w-6 h-6">
+            <div className='w-6 h-6'>
               <HTTPClientIcon />
             </div>
           }
         >
-          <div className="flex gap-1 items-center">
+          <div className='flex gap-1 items-center'>
             HTTP客户端
             <Tooltip
-              content="「由框架或者你自己建立」的一个用于「接收」NapCat向你发送请求的客户端，通常框架会提供一个HTTP地址。这个地址是你使用的框架提供的，NapCat会主动连接它。"
+              content='「由框架或者你自己建立」的一个用于「接收」NapCat向你发送请求的客户端，通常框架会提供一个HTTP地址。这个地址是你使用的框架提供的，NapCat会主动连接它。'
               showArrow
-              className="max-w-64"
+              className='max-w-64'
             >
               <Button
                 isIconOnly
-                radius="full"
-                size="sm"
-                variant="light"
-                className="w-4 h-4 min-w-0"
+                radius='full'
+                size='sm'
+                variant='light'
+                className='w-4 h-4 min-w-0'
               >
                 <FaRegCircleQuestion />
               </Button>
@@ -145,27 +145,27 @@ const AddButton: React.FC<AddButtonProps> = (props) => {
           </div>
         </DropdownItem>
         <DropdownItem
-          key="websocketServers"
-          textValue="websocketServers"
+          key='websocketServers'
+          textValue='websocketServers'
           startContent={
-            <div className="w-6 h-6">
+            <div className='w-6 h-6'>
               <WebsocketIcon />
             </div>
           }
         >
-          <div className="flex gap-1 items-center">
+          <div className='flex gap-1 items-center'>
             Websocket服务器
             <Tooltip
-              content="「由NapCat建立」一个WebSocket服务器，你的框架应该连接到此服务器。NapCat会根据你配置的IP和端口等建立一个WebSocket地址，你或者你的框架应该连接到这个地址。"
+              content='「由NapCat建立」一个WebSocket服务器，你的框架应该连接到此服务器。NapCat会根据你配置的IP和端口等建立一个WebSocket地址，你或者你的框架应该连接到这个地址。'
               showArrow
-              className="max-w-64"
+              className='max-w-64'
             >
               <Button
                 isIconOnly
-                radius="full"
-                size="sm"
-                variant="light"
-                className="w-4 h-4 min-w-0"
+                radius='full'
+                size='sm'
+                variant='light'
+                className='w-4 h-4 min-w-0'
               >
                 <FaRegCircleQuestion />
               </Button>
@@ -173,27 +173,27 @@ const AddButton: React.FC<AddButtonProps> = (props) => {
           </div>
         </DropdownItem>
         <DropdownItem
-          key="websocketClients"
-          textValue="websocketClients"
+          key='websocketClients'
+          textValue='websocketClients'
           startContent={
-            <div className="w-6 h-6">
+            <div className='w-6 h-6'>
               <PCIcon />
             </div>
           }
         >
-          <div className="flex gap-1 items-center">
+          <div className='flex gap-1 items-center'>
             Websocket客户端
             <Tooltip
-              content="「由框架或者你自己建立」的WebSocket，通常框架会「提供」一个ws地址，NapCat会主动连接它。"
+              content='「由框架或者你自己建立」的WebSocket，通常框架会「提供」一个ws地址，NapCat会主动连接它。'
               showArrow
-              className="max-w-64"
+              className='max-w-64'
             >
               <Button
                 isIconOnly
-                radius="full"
-                size="sm"
-                variant="light"
-                className="w-4 h-4 min-w-0"
+                radius='full'
+                size='sm'
+                variant='light'
+                className='w-4 h-4 min-w-0'
               >
                 <FaRegCircleQuestion />
               </Button>
@@ -202,7 +202,7 @@ const AddButton: React.FC<AddButtonProps> = (props) => {
         </DropdownItem>
       </DropdownMenu>
     </Dropdown>
-  )
-}
+  );
+};
 
-export default AddButton
+export default AddButton;
diff --git a/napcat.webui/src/components/button/save_buttons.tsx b/napcat.webui/src/components/button/save_buttons.tsx
index d943677a..ba00eaa5 100644
--- a/napcat.webui/src/components/button/save_buttons.tsx
+++ b/napcat.webui/src/components/button/save_buttons.tsx
@@ -1,7 +1,7 @@
-import { Button } from '@heroui/button'
-import clsx from 'clsx'
-import toast from 'react-hot-toast'
-import { IoMdRefresh } from 'react-icons/io'
+import { Button } from '@heroui/button';
+import clsx from 'clsx';
+import toast from 'react-hot-toast';
+import { IoMdRefresh } from 'react-icons/io';
 
 export interface SaveButtonsProps {
   onSubmit: () => void
@@ -16,7 +16,7 @@ const SaveButtons: React.FC<SaveButtonsProps> = ({
   reset,
   isSubmitting,
   refresh,
-  className
+  className,
 }) => (
   <div
     className={clsx(
@@ -24,18 +24,18 @@ const SaveButtons: React.FC<SaveButtonsProps> = ({
       className
     )}
   >
-    <div className="flex items-center justify-center gap-2 mt-5">
+    <div className='flex items-center justify-center gap-2 mt-5'>
       <Button
-        color="default"
+        color='default'
         onPress={() => {
-          reset()
-          toast.success('重置成功')
+          reset();
+          toast.success('重置成功');
         }}
       >
         取消更改
       </Button>
       <Button
-        color="primary"
+        color='primary'
         isLoading={isSubmitting}
         onPress={() => onSubmit()}
       >
@@ -44,9 +44,9 @@ const SaveButtons: React.FC<SaveButtonsProps> = ({
       {refresh && (
         <Button
           isIconOnly
-          color="secondary"
-          radius="full"
-          variant="flat"
+          color='secondary'
+          radius='full'
+          variant='flat'
           onPress={() => refresh()}
         >
           <IoMdRefresh size={24} />
@@ -54,6 +54,6 @@ const SaveButtons: React.FC<SaveButtonsProps> = ({
       )}
     </div>
   </div>
-)
+);
 
-export default SaveButtons
+export default SaveButtons;
diff --git a/napcat.webui/src/components/chat_input/components/audio_insert.tsx b/napcat.webui/src/components/chat_input/components/audio_insert.tsx
index d94ba2cf..7f8058df 100644
--- a/napcat.webui/src/components/chat_input/components/audio_insert.tsx
+++ b/napcat.webui/src/components/chat_input/components/audio_insert.tsx
@@ -1,170 +1,170 @@
-import { Button } from '@heroui/button'
-import { Input } from '@heroui/input'
-import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover'
-import { Tooltip } from '@heroui/tooltip'
-import clsx from 'clsx'
-import { useEffect, useRef, useState } from 'react'
-import toast from 'react-hot-toast'
-import { FaMicrophone } from 'react-icons/fa6'
-import { IoMic } from 'react-icons/io5'
-import { MdEdit, MdUpload } from 'react-icons/md'
+import { Button } from '@heroui/button';
+import { Input } from '@heroui/input';
+import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover';
+import { Tooltip } from '@heroui/tooltip';
+import clsx from 'clsx';
+import { useEffect, useRef, useState } from 'react';
+import toast from 'react-hot-toast';
+import { FaMicrophone } from 'react-icons/fa6';
+import { IoMic } from 'react-icons/io5';
+import { MdEdit, MdUpload } from 'react-icons/md';
 
-import useShowStructuredMessage from '@/hooks/use_show_strcuted_message'
+import 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 audioInputRef = useRef<HTMLInputElement>(null)
-  const showStructuredMessage = useShowStructuredMessage()
+  const [audioUrl, setAudioUrl] = useState<string>('');
+  const audioInputRef = useRef<HTMLInputElement>(null);
+  const showStructuredMessage = useShowStructuredMessage();
   const showAudioSegment = (file: string) => {
     const messages: OB11Segment[] = [
       {
         type: 'record',
         data: {
-          file: file
-        }
-      }
-    ]
-    showStructuredMessage(messages)
-  }
+          file,
+        },
+      },
+    ];
+    showStructuredMessage(messages);
+  };
 
-  const [isRecording, setIsRecording] = useState(false)
-  const mediaRecorderRef = useRef<MediaRecorder | null>(null)
-  const audioChunksRef = useRef<Blob[]>([])
-  const [audioPreview, setAudioPreview] = useState<string | null>(null)
-  const [showPreview, setShowPreview] = useState(false)
-  const streamRef = useRef<MediaStream | null>(null)
-  const [recordingTime, setRecordingTime] = useState(0)
-  const recordingIntervalRef = useRef<NodeJS.Timeout | null>(null)
+  const [isRecording, setIsRecording] = useState(false);
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
+  const audioChunksRef = useRef<Blob[]>([]);
+  const [audioPreview, setAudioPreview] = useState<string | null>(null);
+  const [showPreview, setShowPreview] = useState(false);
+  const streamRef = useRef<MediaStream | null>(null);
+  const [recordingTime, setRecordingTime] = useState(0);
+  const recordingIntervalRef = useRef<NodeJS.Timeout | null>(null);
 
   useEffect(() => {
     if (isRecording) {
       navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {
-        streamRef.current = stream
-        const recorder = new MediaRecorder(stream)
-        mediaRecorderRef.current = recorder
-        recorder.start()
+        streamRef.current = stream;
+        const recorder = new MediaRecorder(stream);
+        mediaRecorderRef.current = recorder;
+        recorder.start();
         recorder.ondataavailable = (event) => {
           if (event.data.size > 0) {
-            audioChunksRef.current.push(event.data)
+            audioChunksRef.current.push(event.data);
           }
-        }
+        };
         recorder.onstop = () => {
           if (audioChunksRef.current.length > 0) {
             const audioBlob = new Blob(audioChunksRef.current, {
-              type: 'audio/wav'
-            })
-            const reader = new FileReader()
-            reader.readAsDataURL(audioBlob)
+              type: 'audio/wav',
+            });
+            const reader = new FileReader();
+            reader.readAsDataURL(audioBlob);
             reader.onloadend = () => {
-              const base64Audio = reader.result as string
-              setAudioPreview(base64Audio)
-              setShowPreview(true)
-            }
-            audioChunksRef.current = []
+              const base64Audio = reader.result as string;
+              setAudioPreview(base64Audio);
+              setShowPreview(true);
+            };
+            audioChunksRef.current = [];
           }
-          stream.getTracks().forEach((track) => track.stop())
-        }
-      })
+          stream.getTracks().forEach((track) => track.stop());
+        };
+      });
       recordingIntervalRef.current = setInterval(() => {
-        setRecordingTime((prevTime) => prevTime + 1)
-      }, 1000)
+        setRecordingTime((prevTime) => prevTime + 1);
+      }, 1000);
     } else {
-      mediaRecorderRef.current?.stop()
+      mediaRecorderRef.current?.stop();
       if (recordingIntervalRef.current) {
-        clearInterval(recordingIntervalRef.current)
-        recordingIntervalRef.current = null
+        clearInterval(recordingIntervalRef.current);
+        recordingIntervalRef.current = null;
       }
     }
-  }, [isRecording])
+  }, [isRecording]);
 
   const startRecording = () => {
-    setAudioPreview(null)
-    setShowPreview(false)
-    setRecordingTime(0)
-    setIsRecording(true)
-  }
+    setAudioPreview(null);
+    setShowPreview(false);
+    setRecordingTime(0);
+    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 seconds = time % 60
-    return `${minutes}:${seconds.toString().padStart(2, '0')}`
-  }
+    const minutes = Math.floor(time / 60);
+    const seconds = time % 60;
+    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+  };
 
   return (
     <>
       <Popover>
-        <Tooltip content="发送音频">
-          <div className="max-w-fit">
+        <Tooltip content='发送音频'>
+          <div className='max-w-fit'>
             <PopoverTrigger>
-              <Button color="primary" variant="flat" isIconOnly radius="full">
-                <IoMic className="text-xl" />
+              <Button color='primary' variant='flat' isIconOnly radius='full'>
+                <IoMic className='text-xl' />
               </Button>
             </PopoverTrigger>
           </div>
         </Tooltip>
-        <PopoverContent className="flex-row gap-2 p-4">
-          <Tooltip content="上传音频">
+        <PopoverContent className='flex-row gap-2 p-4'>
+          <Tooltip content='上传音频'>
             <Button
-              className="text-lg"
-              color="primary"
+              className='text-lg'
+              color='primary'
               isIconOnly
-              variant="flat"
-              radius="full"
+              variant='flat'
+              radius='full'
               onPress={() => {
-                audioInputRef?.current?.click()
+                audioInputRef?.current?.click();
               }}
             >
               <MdUpload />
             </Button>
           </Tooltip>
           <Popover>
-            <Tooltip content="输入音频地址">
-              <div className="max-w-fit">
-                <PopoverTrigger tooltip="输入音频地址">
+            <Tooltip content='输入音频地址'>
+              <div className='max-w-fit'>
+                <PopoverTrigger tooltip='输入音频地址'>
                   <Button
-                    className="text-lg"
-                    color="primary"
+                    className='text-lg'
+                    color='primary'
                     isIconOnly
-                    variant="flat"
-                    radius="full"
+                    variant='flat'
+                    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"
-                variant="flat"
+                color='primary'
+                variant='flat'
                 isIconOnly
-                radius="full"
+                radius='full'
                 onPress={() => {
                   if (!isURI(audioUrl)) {
-                    toast.error('请输入正确的音频地址')
-                    return
+                    toast.error('请输入正确的音频地址');
+                    return;
                   }
-                  showAudioSegment(audioUrl)
-                  setAudioUrl('')
+                  showAudioSegment(audioUrl);
+                  setAudioUrl('');
                 }}
               >
                 <FaMicrophone />
@@ -172,34 +172,34 @@ const AudioInsert = () => {
             </PopoverContent>
           </Popover>
           <Popover>
-            <Tooltip content="录制音频">
-              <div className="max-w-fit">
+            <Tooltip content='录制音频'>
+              <div className='max-w-fit'>
                 <PopoverTrigger>
                   <Button
-                    className="text-lg"
-                    color="primary"
+                    className='text-lg'
+                    color='primary'
                     isIconOnly
-                    variant="flat"
-                    radius="full"
+                    variant='flat'
+                    radius='full'
                   >
                     <IoMic />
                   </Button>
                 </PopoverTrigger>
               </div>
             </Tooltip>
-            <PopoverContent className="flex-col gap-2 p-4">
-              <div className="flex gap-2">
+            <PopoverContent className='flex-col gap-2 p-4'>
+              <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"
-                    variant="flat"
+                    color='primary'
+                    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/*"
-        className="hidden"
+        accept='audio/*'
+        className='hidden'
         onChange={(e) => {
-          const file = e.target.files?.[0]
+          const file = e.target.files?.[0];
           if (!file) {
-            return
+            return;
           }
-          const reader = new FileReader()
-          reader.readAsDataURL(file)
+          const reader = new FileReader();
+          reader.readAsDataURL(file);
           reader.onload = (event) => {
-            const dataURL = event.target?.result
-            showAudioSegment(dataURL as string)
-            e.target.value = ''
-          }
+            const dataURL = event.target?.result;
+            showAudioSegment(dataURL as string);
+            e.target.value = '';
+          };
         }}
       />
     </>
-  )
-}
+  );
+};
 
-export default AudioInsert
+export default AudioInsert;
diff --git a/napcat.webui/src/components/chat_input/components/dice_insert.tsx b/napcat.webui/src/components/chat_input/components/dice_insert.tsx
index 23417558..57728d54 100644
--- a/napcat.webui/src/components/chat_input/components/dice_insert.tsx
+++ b/napcat.webui/src/components/chat_input/components/dice_insert.tsx
@@ -1,31 +1,31 @@
-import { Button } from '@heroui/button'
-import { Tooltip } from '@heroui/tooltip'
-import { BsDice3Fill } from 'react-icons/bs'
+import { Button } from '@heroui/button';
+import { Tooltip } from '@heroui/tooltip';
+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"
-        variant="flat"
+        color='primary'
+        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;
diff --git a/napcat.webui/src/components/chat_input/components/emoji_picker.tsx b/napcat.webui/src/components/chat_input/components/emoji_picker.tsx
index 5496bf07..c6a47db1 100644
--- a/napcat.webui/src/components/chat_input/components/emoji_picker.tsx
+++ b/napcat.webui/src/components/chat_input/components/emoji_picker.tsx
@@ -1,20 +1,20 @@
-import { Button } from '@heroui/button'
-import { Image } from '@heroui/image'
-import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover'
-import { Tooltip } from '@heroui/tooltip'
-import { data, getUrl } from 'qface'
-import { useEffect, useRef, useState } from 'react'
-import { MdEmojiEmotions } from 'react-icons/md'
+import { Button } from '@heroui/button';
+import { Image } from '@heroui/image';
+import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover';
+import { Tooltip } from '@heroui/tooltip';
+import { data, getUrl } from 'qface';
+import { useEffect, useRef, useState } from 'react';
+import { MdEmojiEmotions } from 'react-icons/md';
 
-import { EmojiValue } from '../formats/emoji_blot'
+import { EmojiValue } from '../formats/emoji_blot';
 
 const emojis = data.map((item) => {
   return {
     alt: item.QDes,
     src: getUrl(item.QSid),
-    id: item.QSid
-  } as EmojiValue
-})
+    id: item.QSid,
+  } as EmojiValue;
+});
 
 export interface EmojiPickerProps {
   onInsertEmoji: (emoji: EmojiValue) => void
@@ -22,62 +22,62 @@ export interface EmojiPickerProps {
 }
 
 const EmojiPicker = ({ onInsertEmoji, onOpenChange }: EmojiPickerProps) => {
-  const [visibleEmojis, setVisibleEmojis] = useState<EmojiValue[]>([])
-  const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false)
-  const containerRef = useRef<HTMLDivElement>(null)
+  const [visibleEmojis, setVisibleEmojis] = useState<EmojiValue[]>([]);
+  const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
+  const containerRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
     if (isPopoverOpen) {
-      setVisibleEmojis([]) // Reset visible emojis
-      requestAnimationFrame(() => loadEmojis()) // Start loading emojis
+      setVisibleEmojis([]); // Reset visible emojis
+      requestAnimationFrame(() => loadEmojis()); // Start loading emojis
     }
-  }, [isPopoverOpen])
+  }, [isPopoverOpen]);
 
   const loadEmojis = (index = 0, batchSize = 10) => {
     if (index < emojis.length) {
       setVisibleEmojis((prev) => [
         ...prev,
-        ...emojis.slice(index, index + batchSize)
-      ])
-      requestAnimationFrame(() => loadEmojis(index + batchSize, batchSize))
+        ...emojis.slice(index, index + batchSize),
+      ]);
+      requestAnimationFrame(() => loadEmojis(index + batchSize, batchSize));
     }
-  }
+  };
   return (
     <div ref={containerRef}>
       <Popover
         portalContainer={containerRef.current!}
         shouldCloseOnScroll={false}
-        placement="right-start"
+        placement='right-start'
         onOpenChange={(v) => {
-          onOpenChange(v)
-          setIsPopoverOpen(v)
+          onOpenChange(v);
+          setIsPopoverOpen(v);
         }}
       >
-        <Tooltip content="插入表情">
-          <div className="max-w-fit">
+        <Tooltip content='插入表情'>
+          <div className='max-w-fit'>
             <PopoverTrigger>
-              <Button color="primary" variant="flat" isIconOnly radius="full">
-                <MdEmojiEmotions className="text-xl" />
+              <Button color='primary' variant='flat' isIconOnly radius='full'>
+                <MdEmojiEmotions className='text-xl' />
               </Button>
             </PopoverTrigger>
           </div>
         </Tooltip>
-        <PopoverContent className="grid grid-cols-8 gap-1 flex-wrap justify-start items-start overflow-y-auto max-w-full max-h-96 p-2">
+        <PopoverContent className='grid grid-cols-8 gap-1 flex-wrap justify-start items-start overflow-y-auto max-w-full max-h-96 p-2'>
           {visibleEmojis.map((emoji) => (
             <Button
               key={emoji.id}
-              color="primary"
-              variant="flat"
+              color='primary'
+              variant='flat'
               isIconOnly
-              radius="full"
+              radius='full'
               onPress={() => onInsertEmoji(emoji)}
             >
-              <Image src={emoji.src} alt={emoji.alt} className="w-6 h-6" />
+              <Image src={emoji.src} alt={emoji.alt} className='w-6 h-6' />
             </Button>
           ))}
         </PopoverContent>
       </Popover>
     </div>
-  )
-}
+  );
+};
 
-export default EmojiPicker
+export default EmojiPicker;
diff --git a/napcat.webui/src/components/chat_input/components/file_insert.tsx b/napcat.webui/src/components/chat_input/components/file_insert.tsx
index ff46305f..d7d583ec 100644
--- a/napcat.webui/src/components/chat_input/components/file_insert.tsx
+++ b/napcat.webui/src/components/chat_input/components/file_insert.tsx
@@ -1,95 +1,95 @@
-import { Button } from '@heroui/button'
-import { Input } from '@heroui/input'
-import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover'
-import { Tooltip } from '@heroui/tooltip'
-import { useRef, useState } from 'react'
-import toast from 'react-hot-toast'
-import { FaFolder } from 'react-icons/fa6'
-import { LuFilePlus2 } from 'react-icons/lu'
-import { MdEdit, MdUpload } from 'react-icons/md'
+import { Button } from '@heroui/button';
+import { Input } from '@heroui/input';
+import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover';
+import { Tooltip } from '@heroui/tooltip';
+import { useRef, useState } from 'react';
+import toast from 'react-hot-toast';
+import { FaFolder } from 'react-icons/fa6';
+import { LuFilePlus2 } from 'react-icons/lu';
+import { MdEdit, MdUpload } from 'react-icons/md';
 
-import useShowStructuredMessage from '@/hooks/use_show_strcuted_message'
+import 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 fileInputRef = useRef<HTMLInputElement>(null)
-  const showStructuredMessage = useShowStructuredMessage()
+  const [fileUrl, setFileUrl] = useState<string>('');
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const showStructuredMessage = useShowStructuredMessage();
   const showFileSegment = (file: string) => {
     const messages: OB11Segment[] = [
       {
         type: 'file',
         data: {
-          file: file
-        }
-      }
-    ]
-    showStructuredMessage(messages)
-  }
+          file,
+        },
+      },
+    ];
+    showStructuredMessage(messages);
+  };
   return (
     <>
       <Popover>
-        <Tooltip content="发送文件">
-          <div className="max-w-fit">
+        <Tooltip content='发送文件'>
+          <div className='max-w-fit'>
             <PopoverTrigger>
-              <Button color="primary" variant="flat" isIconOnly radius="full">
-                <FaFolder className="text-lg" />
+              <Button color='primary' variant='flat' isIconOnly radius='full'>
+                <FaFolder className='text-lg' />
               </Button>
             </PopoverTrigger>
           </div>
         </Tooltip>
-        <PopoverContent className="flex-row gap-2 p-4">
-          <Tooltip content="上传文件">
+        <PopoverContent className='flex-row gap-2 p-4'>
+          <Tooltip content='上传文件'>
             <Button
-              className="text-lg"
-              color="primary"
+              className='text-lg'
+              color='primary'
               isIconOnly
-              variant="flat"
-              radius="full"
+              variant='flat'
+              radius='full'
               onPress={() => {
-                fileInputRef?.current?.click()
+                fileInputRef?.current?.click();
               }}
             >
               <MdUpload />
             </Button>
           </Tooltip>
           <Popover>
-            <Tooltip content="输入文件地址">
-              <div className="max-w-fit">
-                <PopoverTrigger tooltip="输入文件地址">
+            <Tooltip content='输入文件地址'>
+              <div className='max-w-fit'>
+                <PopoverTrigger tooltip='输入文件地址'>
                   <Button
-                    className="text-lg"
-                    color="primary"
+                    className='text-lg'
+                    color='primary'
                     isIconOnly
-                    variant="flat"
-                    radius="full"
+                    variant='flat'
+                    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"
-                variant="flat"
+                color='primary'
+                variant='flat'
                 isIconOnly
-                radius="full"
+                radius='full'
                 onPress={() => {
                   if (!isURI(fileUrl)) {
-                    toast.error('请输入正确的文件地址')
-                    return
+                    toast.error('请输入正确的文件地址');
+                    return;
                   }
-                  showFileSegment(fileUrl)
-                  setFileUrl('')
+                  showFileSegment(fileUrl);
+                  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()
-          reader.readAsDataURL(file)
+          const reader = new FileReader();
+          reader.readAsDataURL(file);
           reader.onload = (event) => {
-            const dataURL = event.target?.result
-            showFileSegment(dataURL as string)
-            e.target.value = ''
-          }
+            const dataURL = event.target?.result;
+            showFileSegment(dataURL as string);
+            e.target.value = '';
+          };
         }}
       />
     </>
-  )
-}
+  );
+};
 
-export default FileInsert
+export default FileInsert;
diff --git a/napcat.webui/src/components/chat_input/components/image_insert.tsx b/napcat.webui/src/components/chat_input/components/image_insert.tsx
index c193ef1b..344cb949 100644
--- a/napcat.webui/src/components/chat_input/components/image_insert.tsx
+++ b/napcat.webui/src/components/chat_input/components/image_insert.tsx
@@ -1,12 +1,12 @@
-import { Button } from '@heroui/button'
-import { Input } from '@heroui/input'
-import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover'
-import { Tooltip } from '@heroui/tooltip'
-import { useRef, useState } from 'react'
-import toast from 'react-hot-toast'
-import { MdAddPhotoAlternate, MdEdit, MdImage, MdUpload } from 'react-icons/md'
+import { Button } from '@heroui/button';
+import { Input } from '@heroui/input';
+import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover';
+import { Tooltip } from '@heroui/tooltip';
+import { useRef, useState } from 'react';
+import toast from 'react-hot-toast';
+import { MdAddPhotoAlternate, MdEdit, MdImage, MdUpload } from 'react-icons/md';
 
-import { isURI } from '@/utils/url'
+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 imageInputRef = useRef<HTMLInputElement>(null)
+  const [imgUrl, setImgUrl] = useState<string>('');
+  const imageInputRef = useRef<HTMLInputElement>(null);
 
   return (
     <>
       <Popover onOpenChange={onOpenChange}>
-        <Tooltip content="插入图片">
-          <div className="max-w-fit">
+        <Tooltip content='插入图片'>
+          <div className='max-w-fit'>
             <PopoverTrigger>
-              <Button color="primary" variant="flat" isIconOnly radius="full">
-                <MdImage className="text-xl" />
+              <Button color='primary' variant='flat' isIconOnly radius='full'>
+                <MdImage className='text-xl' />
               </Button>
             </PopoverTrigger>
           </div>
         </Tooltip>
-        <PopoverContent className="flex-row gap-2 p-4">
-          <Tooltip content="上传图片">
+        <PopoverContent className='flex-row gap-2 p-4'>
+          <Tooltip content='上传图片'>
             <Button
-              className="text-lg"
-              color="primary"
+              className='text-lg'
+              color='primary'
               isIconOnly
-              variant="flat"
-              radius="full"
+              variant='flat'
+              radius='full'
               onPress={() => {
-                imageInputRef?.current?.click()
+                imageInputRef?.current?.click();
               }}
             >
               <MdUpload />
             </Button>
           </Tooltip>
           <Popover>
-            <Tooltip content="输入图片地址">
-              <div className="max-w-fit">
-                <PopoverTrigger tooltip="输入图片地址">
+            <Tooltip content='输入图片地址'>
+              <div className='max-w-fit'>
+                <PopoverTrigger tooltip='输入图片地址'>
                   <Button
-                    className="text-lg"
-                    color="primary"
+                    className='text-lg'
+                    color='primary'
                     isIconOnly
-                    variant="flat"
-                    radius="full"
+                    variant='flat'
+                    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"
-                variant="flat"
+                color='primary'
+                variant='flat'
                 isIconOnly
-                radius="full"
+                radius='full'
                 onPress={() => {
                   if (!isURI(imgUrl)) {
-                    toast.error('请输入正确的图片地址')
-                    return
+                    toast.error('请输入正确的图片地址');
+                    return;
                   }
-                  insertImage(imgUrl)
-                  setImgUrl('')
+                  insertImage(imgUrl);
+                  setImgUrl('');
                 }}
               >
                 <MdAddPhotoAlternate />
@@ -88,27 +88,27 @@ const ImageInsert = ({ insertImage, onOpenChange }: ImageInsertProps) => {
       </Popover>
 
       <input
-        type="file"
+        type='file'
         ref={imageInputRef}
         hidden
-        accept="image/*"
-        className="hidden"
+        accept='image/*'
+        className='hidden'
         onChange={(e) => {
-          const file = e.target.files?.[0]
+          const file = e.target.files?.[0];
           if (!file) {
-            return
+            return;
           }
-          const reader = new FileReader()
-          reader.readAsDataURL(file)
+          const reader = new FileReader();
+          reader.readAsDataURL(file);
           reader.onload = (event) => {
-            const dataURL = event.target?.result
-            insertImage(dataURL as string)
-            e.target.value = ''
-          }
+            const dataURL = event.target?.result;
+            insertImage(dataURL as string);
+            e.target.value = '';
+          };
         }}
       />
     </>
-  )
-}
+  );
+};
 
-export default ImageInsert
+export default ImageInsert;
diff --git a/napcat.webui/src/components/chat_input/components/music_insert.tsx b/napcat.webui/src/components/chat_input/components/music_insert.tsx
index 4572912f..063c037c 100644
--- a/napcat.webui/src/components/chat_input/components/music_insert.tsx
+++ b/napcat.webui/src/components/chat_input/components/music_insert.tsx
@@ -1,35 +1,35 @@
-import { Button } from '@heroui/button'
-import { Form } from '@heroui/form'
-import { Input } from '@heroui/input'
-import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover'
-import { Select, SelectItem } from '@heroui/select'
-import type { SharedSelection } from '@heroui/system'
-import { Tab, Tabs } from '@heroui/tabs'
-import { Tooltip } from '@heroui/tooltip'
-import type { Key } from '@react-types/shared'
-import { useRef, useState } from 'react'
-import { Controller, useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
-import { IoMusicalNotes } from 'react-icons/io5'
-import { TbMusicPlus } from 'react-icons/tb'
+import { Button } from '@heroui/button';
+import { Form } from '@heroui/form';
+import { Input } from '@heroui/input';
+import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover';
+import { Select, SelectItem } from '@heroui/select';
+import type { SharedSelection } from '@heroui/system';
+import { Tab, Tabs } from '@heroui/tabs';
+import { Tooltip } from '@heroui/tooltip';
+import type { Key } from '@react-types/shared';
+import { useRef, useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import toast from 'react-hot-toast';
+import { IoMusicalNotes } from 'react-icons/io5';
+import { TbMusicPlus } from 'react-icons/tb';
 
-import useShowStructuredMessage from '@/hooks/use_show_strcuted_message'
+import useShowStructuredMessage from '@/hooks/use_show_strcuted_message';
 
-import { isURI } from '@/utils/url'
+import { isURI } from '@/utils/url';
 
 import type {
   CustomMusicSegment,
   MusicSegment,
-  OB11Segment
-} from '@/types/onebot'
+  OB11Segment,
+} from '@/types/onebot';
 
-type MusicData = CustomMusicSegment['data'] | MusicSegment['data']
+type MusicData = CustomMusicSegment['data'] | MusicSegment['data'];
 
 const MusicInsert = () => {
-  const [musicId, setMusicId] = useState<string>('')
-  const [musicType, setMusicType] = useState<SharedSelection>(new Set(['163']))
-  const [mode, setMode] = useState<Key>('default')
-  const containerRef = useRef<HTMLDivElement>(null)
+  const [musicId, setMusicId] = useState<string>('');
+  const [musicType, setMusicType] = useState<SharedSelection>(new Set(['163']));
+  const [mode, setMode] = useState<Key>('default');
+  const containerRef = useRef<HTMLDivElement>(null);
   const { control, handleSubmit, reset } = useForm<
     Omit<CustomMusicSegment['data'], 'type'>
   >({
@@ -38,84 +38,84 @@ const MusicInsert = () => {
       audio: '',
       title: '',
       image: '',
-      content: ''
-    }
-  })
-  const showStructuredMessage = useShowStructuredMessage()
+      content: '',
+    },
+  });
+  const showStructuredMessage = useShowStructuredMessage();
 
   const showMusicSegment = (data: MusicData) => {
-    const messages: OB11Segment[] = []
+    const messages: OB11Segment[] = [];
     if (data.type === 'custom') {
       messages.push({
         type: 'music',
         data: {
           ...data,
-          type: 'custom'
-        }
-      })
+          type: 'custom',
+        },
+      });
     } else {
       messages.push({
         type: 'music',
-        data
-      })
+        data,
+      });
     }
-    showStructuredMessage(messages)
-  }
+    showStructuredMessage(messages);
+  };
 
   const onSubmit = (data: Omit<CustomMusicSegment['data'], 'type'>) => {
     showMusicSegment({
       type: 'custom',
-      ...data
-    })
-    reset()
-  }
+      ...data,
+    });
+    reset();
+  };
 
   return (
-    <div ref={containerRef} className="overflow-visible">
+    <div ref={containerRef} className='overflow-visible'>
       <Popover
-        placement="right-start"
+        placement='right-start'
         shouldCloseOnScroll={false}
         portalContainer={containerRef.current!}
       >
-        <Tooltip content="发送音乐">
-          <div className="max-w-fit">
+        <Tooltip content='发送音乐'>
+          <div className='max-w-fit'>
             <PopoverTrigger>
-              <Button color="primary" variant="flat" isIconOnly radius="full">
-                <IoMusicalNotes className="text-xl" />
+              <Button color='primary' variant='flat' isIconOnly radius='full'>
+                <IoMusicalNotes className='text-xl' />
               </Button>
             </PopoverTrigger>
           </div>
         </Tooltip>
-        <PopoverContent className="gap-2 p-4">
+        <PopoverContent className='gap-2 p-4'>
           <Tabs
-            placement="top"
-            className="w-96"
+            placement='top'
+            className='w-96'
             fullWidth
             selectedKey={mode}
             onSelectionChange={(key) => {
-              if (key !== null) setMode(key)
+              if (key !== null) setMode(key);
             }}
           >
-            <Tab title="主流平台" key="default" className="flex flex-col gap-2">
+            <Tab title='主流平台' key='default' className='flex flex-col gap-2'>
               <Select
                 onClick={(e) => e.stopPropagation()}
-                aria-label="音乐平台"
+                aria-label='音乐平台'
                 selectedKeys={musicType}
-                label="音乐平台"
-                placeholder="请选择音乐平台"
+                label='音乐平台'
+                placeholder='请选择音乐平台'
                 items={[
                   {
                     name: 'QQ音乐',
-                    id: 'qq'
+                    id: 'qq',
                   },
                   {
                     name: '网易云音乐',
-                    id: '163'
+                    id: '163',
                   },
                   {
                     name: '虾米音乐',
-                    id: 'xm'
-                  }
+                    id: 'xm',
+                  },
                 ]}
                 onSelectionChange={setMusicType}
               >
@@ -128,27 +128,27 @@ const MusicInsert = () => {
               <Input
                 value={musicId}
                 onChange={(e) => setMusicId(e.target.value)}
-                placeholder="请输入音乐ID"
-                label="音乐ID"
+                placeholder='请输入音乐ID'
+                label='音乐ID'
               />
               <Button
                 fullWidth
-                size="lg"
-                color="primary"
-                variant="flat"
-                radius="full"
+                size='lg'
+                color='primary'
+                variant='flat'
+                radius='full'
                 onPress={() => {
                   if (!musicId) {
-                    toast.error('请输入音乐ID')
-                    return
+                    toast.error('请输入音乐ID');
+                    return;
                   }
                   showMusicSegment({
                     type: Array.from(
                       musicType
                     )[0] as MusicSegment['data']['type'],
-                    id: musicId
-                  })
-                  setMusicId('')
+                    id: musicId,
+                  });
+                  setMusicId('');
                 }}
                 startContent={<TbMusicPlus />}
               >
@@ -156,92 +156,92 @@ const MusicInsert = () => {
               </Button>
             </Tab>
             <Tab
-              title="自定义音乐"
-              key="custom"
-              className="flex flex-col gap-2"
+              title='自定义音乐'
+              key='custom'
+              className='flex flex-col gap-2'
             >
               <Form
                 onSubmit={handleSubmit(onSubmit)}
-                className="flex flex-col gap-2"
-                validationBehavior="native"
+                className='flex flex-col gap-2'
+                validationBehavior='native'
               >
                 <Controller
-                  name="url"
+                  name='url'
                   control={control}
                   render={({ field }) => (
                     <Input
                       {...field}
                       isRequired
                       validate={(v) => {
-                        return !isURI(v) ? '请输入正确的音乐URL' : null
+                        return !isURI(v) ? '请输入正确的音乐URL' : null;
                       }}
-                      size="sm"
-                      placeholder="请输入音乐URL"
-                      label="音乐URL"
+                      size='sm'
+                      placeholder='请输入音乐URL'
+                      label='音乐URL'
                     />
                   )}
                 />
                 <Controller
-                  name="audio"
+                  name='audio'
                   control={control}
                   render={({ field }) => (
                     <Input
                       {...field}
                       isRequired
                       validate={(v) => {
-                        return !isURI(v) ? '请输入正确的音频URL' : null
+                        return !isURI(v) ? '请输入正确的音频URL' : null;
                       }}
-                      size="sm"
-                      placeholder="请输入音频URL"
-                      label="音频URL"
+                      size='sm'
+                      placeholder='请输入音频URL'
+                      label='音频URL'
                     />
                   )}
                 />
                 <Controller
-                  name="title"
+                  name='title'
                   control={control}
                   render={({ field }) => (
                     <Input
                       {...field}
                       isRequired
-                      size="sm"
-                      errorMessage="请输入音乐标题"
-                      placeholder="请输入音乐标题"
-                      label="音乐标题"
+                      size='sm'
+                      errorMessage='请输入音乐标题'
+                      placeholder='请输入音乐标题'
+                      label='音乐标题'
                     />
                   )}
                 />
                 <Controller
-                  name="image"
+                  name='image'
                   control={control}
                   render={({ field }) => (
                     <Input
                       {...field}
-                      size="sm"
-                      placeholder="请输入封面图片URL"
-                      label="封面图片URL"
+                      size='sm'
+                      placeholder='请输入封面图片URL'
+                      label='封面图片URL'
                     />
                   )}
                 />
                 <Controller
-                  name="content"
+                  name='content'
                   control={control}
                   render={({ field }) => (
                     <Input
                       {...field}
-                      size="sm"
-                      placeholder="请输入音乐描述"
-                      label="音乐描述"
+                      size='sm'
+                      placeholder='请输入音乐描述'
+                      label='音乐描述'
                     />
                   )}
                 />
                 <Button
                   fullWidth
-                  size="lg"
-                  color="primary"
-                  variant="flat"
-                  radius="full"
-                  type="submit"
+                  size='lg'
+                  color='primary'
+                  variant='flat'
+                  radius='full'
+                  type='submit'
                   startContent={<TbMusicPlus />}
                 >
                   创建自定义音乐
@@ -252,7 +252,7 @@ const MusicInsert = () => {
         </PopoverContent>
       </Popover>
     </div>
-  )
-}
+  );
+};
 
-export default MusicInsert
+export default MusicInsert;
diff --git a/napcat.webui/src/components/chat_input/components/reply_insert.tsx b/napcat.webui/src/components/chat_input/components/reply_insert.tsx
index b626551b..f45d9a5b 100644
--- a/napcat.webui/src/components/chat_input/components/reply_insert.tsx
+++ b/napcat.webui/src/components/chat_input/components/reply_insert.tsx
@@ -1,50 +1,50 @@
-import { Button } from '@heroui/button'
-import { Input } from '@heroui/input'
-import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover'
-import { Tooltip } from '@heroui/tooltip'
-import { useState } from 'react'
-import { BsChatQuoteFill } from 'react-icons/bs'
-import { MdAdd } from 'react-icons/md'
+import { Button } from '@heroui/button';
+import { Input } from '@heroui/input';
+import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover';
+import { Tooltip } from '@heroui/tooltip';
+import { useState } from 'react';
+import { BsChatQuoteFill } from 'react-icons/bs';
+import { MdAdd } from 'react-icons/md';
 
 export interface ReplyInsertProps {
   insertReply: (messageId: string) => void
 }
 
 const ReplyInsert = ({ insertReply }: ReplyInsertProps) => {
-  const [replyId, setReplyId] = useState<string>('')
+  const [replyId, setReplyId] = useState<string>('');
 
   return (
     <>
       <Popover>
-        <Tooltip content="回复消息">
-          <div className="max-w-fit">
+        <Tooltip content='回复消息'>
+          <div className='max-w-fit'>
             <PopoverTrigger>
-              <Button color="primary" variant="flat" isIconOnly radius="full">
-                <BsChatQuoteFill className="text-lg" />
+              <Button color='primary' variant='flat' isIconOnly radius='full'>
+                <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 isNumberReg = /^(?:0|(?:-?[1-9]\d*))$/
+              const value = e.target.value;
+              const isNumberReg = /^(?:0|(?:-?[1-9]\d*))$/;
               if (isNumberReg.test(value)) {
-                setReplyId(value)
+                setReplyId(value);
               }
             }}
           />
           <Button
-            color="primary"
-            variant="flat"
-            radius="full"
+            color='primary'
+            variant='flat'
+            radius='full'
             isIconOnly
             onPress={() => {
-              insertReply(replyId)
-              setReplyId('')
+              insertReply(replyId);
+              setReplyId('');
             }}
           >
             <MdAdd />
@@ -52,7 +52,7 @@ const ReplyInsert = ({ insertReply }: ReplyInsertProps) => {
         </PopoverContent>
       </Popover>
     </>
-  )
-}
+  );
+};
 
-export default ReplyInsert
+export default ReplyInsert;
diff --git a/napcat.webui/src/components/chat_input/components/rps_insert.tsx b/napcat.webui/src/components/chat_input/components/rps_insert.tsx
index 9367593e..e8c15c14 100644
--- a/napcat.webui/src/components/chat_input/components/rps_insert.tsx
+++ b/napcat.webui/src/components/chat_input/components/rps_insert.tsx
@@ -1,31 +1,31 @@
-import { Button } from '@heroui/button'
-import { Tooltip } from '@heroui/tooltip'
-import { LiaHandScissors } from 'react-icons/lia'
+import { Button } from '@heroui/button';
+import { Tooltip } from '@heroui/tooltip';
+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"
-        variant="flat"
+        color='primary'
+        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;
diff --git a/napcat.webui/src/components/chat_input/components/show_structed_message.tsx b/napcat.webui/src/components/chat_input/components/show_structed_message.tsx
index b4153dc5..6dd63425 100644
--- a/napcat.webui/src/components/chat_input/components/show_structed_message.tsx
+++ b/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;
diff --git a/napcat.webui/src/components/chat_input/components/video_insert.tsx b/napcat.webui/src/components/chat_input/components/video_insert.tsx
index 044e68c8..9d58fb9c 100644
--- a/napcat.webui/src/components/chat_input/components/video_insert.tsx
+++ b/napcat.webui/src/components/chat_input/components/video_insert.tsx
@@ -1,95 +1,95 @@
-import { Button } from '@heroui/button'
-import { Input } from '@heroui/input'
-import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover'
-import { Tooltip } from '@heroui/tooltip'
-import { useRef, useState } from 'react'
-import toast from 'react-hot-toast'
-import { IoVideocam } from 'react-icons/io5'
-import { MdEdit, MdUpload } from 'react-icons/md'
-import { TbVideoPlus } from 'react-icons/tb'
+import { Button } from '@heroui/button';
+import { Input } from '@heroui/input';
+import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover';
+import { Tooltip } from '@heroui/tooltip';
+import { useRef, useState } from 'react';
+import toast from 'react-hot-toast';
+import { IoVideocam } from 'react-icons/io5';
+import { MdEdit, MdUpload } from 'react-icons/md';
+import { TbVideoPlus } from 'react-icons/tb';
 
-import useShowStructuredMessage from '@/hooks/use_show_strcuted_message'
+import 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 videoInputRef = useRef<HTMLInputElement>(null)
-  const showStructuredMessage = useShowStructuredMessage()
+  const [videoUrl, setVideoUrl] = useState<string>('');
+  const videoInputRef = useRef<HTMLInputElement>(null);
+  const showStructuredMessage = useShowStructuredMessage();
   const showVideoSegment = (file: string) => {
     const messages: OB11Segment[] = [
       {
         type: 'video',
         data: {
-          file: file
-        }
-      }
-    ]
-    showStructuredMessage(messages)
-  }
+          file,
+        },
+      },
+    ];
+    showStructuredMessage(messages);
+  };
   return (
     <>
       <Popover>
-        <Tooltip content="发送视频">
-          <div className="max-w-fit">
+        <Tooltip content='发送视频'>
+          <div className='max-w-fit'>
             <PopoverTrigger>
-              <Button color="primary" variant="flat" isIconOnly radius="full">
-                <IoVideocam className="text-xl" />
+              <Button color='primary' variant='flat' isIconOnly radius='full'>
+                <IoVideocam className='text-xl' />
               </Button>
             </PopoverTrigger>
           </div>
         </Tooltip>
-        <PopoverContent className="flex-row gap-2 p-4">
-          <Tooltip content="上传视频">
+        <PopoverContent className='flex-row gap-2 p-4'>
+          <Tooltip content='上传视频'>
             <Button
-              className="text-lg"
-              color="primary"
+              className='text-lg'
+              color='primary'
               isIconOnly
-              variant="flat"
-              radius="full"
+              variant='flat'
+              radius='full'
               onPress={() => {
-                videoInputRef?.current?.click()
+                videoInputRef?.current?.click();
               }}
             >
               <MdUpload />
             </Button>
           </Tooltip>
           <Popover>
-            <Tooltip content="输入视频地址">
-              <div className="max-w-fit">
-                <PopoverTrigger tooltip="输入视频地址">
+            <Tooltip content='输入视频地址'>
+              <div className='max-w-fit'>
+                <PopoverTrigger tooltip='输入视频地址'>
                   <Button
-                    className="text-lg"
-                    color="primary"
+                    className='text-lg'
+                    color='primary'
                     isIconOnly
-                    variant="flat"
-                    radius="full"
+                    variant='flat'
+                    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"
-                variant="flat"
+                color='primary'
+                variant='flat'
                 isIconOnly
-                radius="full"
+                radius='full'
                 onPress={() => {
                   if (!isURI(videoUrl)) {
-                    toast.error('请输入正确的视频地址')
-                    return
+                    toast.error('请输入正确的视频地址');
+                    return;
                   }
-                  showVideoSegment(videoUrl)
-                  setVideoUrl('')
+                  showVideoSegment(videoUrl);
+                  setVideoUrl('');
                 }}
               >
                 <TbVideoPlus />
@@ -100,27 +100,27 @@ const VideoInsert = () => {
       </Popover>
 
       <input
-        type="file"
+        type='file'
         ref={videoInputRef}
         hidden
-        accept="video/*"
-        className="hidden"
+        accept='video/*'
+        className='hidden'
         onChange={(e) => {
-          const file = e.target.files?.[0]
+          const file = e.target.files?.[0];
           if (!file) {
-            return
+            return;
           }
-          const reader = new FileReader()
-          reader.readAsDataURL(file)
+          const reader = new FileReader();
+          reader.readAsDataURL(file);
           reader.onload = (event) => {
-            const dataURL = event.target?.result
-            showVideoSegment(dataURL as string)
-            e.target.value = ''
-          }
+            const dataURL = event.target?.result;
+            showVideoSegment(dataURL as string);
+            e.target.value = '';
+          };
         }}
       />
     </>
-  )
-}
+  );
+};
 
-export default VideoInsert
+export default VideoInsert;
diff --git a/napcat.webui/src/components/chat_input/formats/emoji_blot.ts b/napcat.webui/src/components/chat_input/formats/emoji_blot.ts
index 47d12364..68e8f667 100644
--- a/napcat.webui/src/components/chat_input/formats/emoji_blot.ts
+++ b/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 tagName: string = 'img'
-  static classNames: string[] = ['w-6', 'h-6']
+  static blotName: string = 'emoji';
+  static tagName: string = 'img';
+  static classNames: string[] = ['w-6', 'h-6'];
 
-  static create(value: HTMLImageElement) {
-    const node = super.create(value)
-    node.setAttribute('alt', value.alt)
-    node.setAttribute('src', value.src)
-    node.setAttribute('data-id', value.id)
-    node.classList.add(...EmojiBlot.classNames)
-    return node
+  static create (value: HTMLImageElement) {
+    const node = super.create(value);
+    node.setAttribute('alt', value.alt);
+    node.setAttribute('src', value.src);
+    node.setAttribute('data-id', value.id);
+    node.classList.add(...EmojiBlot.classNames);
+    return node;
   }
 
-  static formats(node: HTMLImageElement): EmojiValue {
+  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;
diff --git a/napcat.webui/src/components/chat_input/formats/image_blot.ts b/napcat.webui/src/components/chat_input/formats/image_blot.ts
index 182727ad..f428e589 100644
--- a/napcat.webui/src/components/chat_input/formats/image_blot.ts
+++ b/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 tagName = 'img'
-  static classNames: string[] = ['max-w-48', 'max-h-48', 'align-bottom']
+  static blotName = 'image';
+  static tagName = 'img';
+  static classNames: string[] = ['max-w-48', 'max-h-48', 'align-bottom'];
 
-  static create(value: ImageValue) {
-    let node = super.create()
-    node.setAttribute('alt', value.alt)
-    node.setAttribute('src', value.src)
-    node.classList.add(...ImageBlot.classNames)
-    return node
+  static create (value: ImageValue) {
+    const node = super.create();
+    node.setAttribute('alt', value.alt);
+    node.setAttribute('src', value.src);
+    node.classList.add(...ImageBlot.classNames);
+    return node;
   }
 
-  static value(node: HTMLImageElement): ImageValue {
+  static value (node: HTMLImageElement): ImageValue {
     return {
       alt: node.getAttribute('alt') ?? '',
-      src: node.getAttribute('src') ?? ''
-    }
+      src: node.getAttribute('src') ?? '',
+    };
   }
 }
 
-export default ImageBlot
+export default ImageBlot;
diff --git a/napcat.webui/src/components/chat_input/formats/reply_blot.ts b/napcat.webui/src/components/chat_input/formats/reply_blot.ts
index 8cf15f1d..8740e117 100644
--- a/napcat.webui/src/components/chat_input/formats/reply_blot.ts
+++ b/napcat.webui/src/components/chat_input/formats/reply_blot.ts
@@ -1,4 +1,4 @@
-import Quill from 'quill'
+import Quill from 'quill';
 
 // eslint-disable-next-line
 const BlockEmbed = Quill.import('blots/block/embed') as any
@@ -6,38 +6,38 @@ export interface ReplyBlockValue {
   messageId: string
 }
 class ReplyBlock extends BlockEmbed {
-  static blotName = 'reply'
-  static tagName = 'div'
+  static blotName = 'reply';
+  static tagName = 'div';
   static classNames = [
     'p-2',
     'select-none',
     'bg-default-100',
     'rounded-md',
-    'pointer-events-none'
-  ]
+    'pointer-events-none',
+  ];
 
-  static create(value: ReplyBlockValue) {
-    const node = super.create()
-    node.setAttribute('data-message-id', value.messageId)
-    node.setAttribute('contenteditable', 'false')
-    node.classList.add(...ReplyBlock.classNames)
-    const innerDom = document.createElement('div')
-    innerDom.classList.add('text-sm', 'text-default-500', 'relative')
-    const svgContainer = document.createElement('div')
-    svgContainer.classList.add('w-3', 'h-3', 'absolute', 'top-0', 'right-0')
-    const svg = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M15.9082 12.3714H20.5982C20.5182 17.0414 19.5982 17.8114 16.7282 19.5114C16.3982 19.7114 16.2882 20.1314 16.4882 20.4714C16.6882 20.8014 17.1082 20.9114 17.4482 20.7114C20.8282 18.7114 22.0082 17.4914 22.0082 11.6714V6.28141C22.0082 4.57141 20.6182 3.19141 18.9182 3.19141H15.9182C14.1582 3.19141 12.8282 4.52141 12.8282 6.28141V9.28141C12.8182 11.0414 14.1482 12.3714 15.9082 12.3714Z" fill="#292D32"></path> <path d="M5.09 12.3714H9.78C9.7 17.0414 8.78 17.8114 5.91 19.5114C5.58 19.7114 5.47 20.1314 5.67 20.4714C5.87 20.8014 6.29 20.9114 6.63 20.7114C10.01 18.7114 11.19 17.4914 11.19 11.6714V6.28141C11.19 4.57141 9.8 3.19141 8.1 3.19141H5.1C3.33 3.19141 2 4.52141 2 6.28141V9.28141C2 11.0414 3.33 12.3714 5.09 12.3714Z" fill="#292D32"></path> </g></svg>`
-    svgContainer.innerHTML = svg
-    innerDom.innerHTML = `消息ID：${value.messageId}`
-    innerDom.appendChild(svgContainer)
-    node.appendChild(innerDom)
-    return node
+  static create (value: ReplyBlockValue) {
+    const node = super.create();
+    node.setAttribute('data-message-id', value.messageId);
+    node.setAttribute('contenteditable', 'false');
+    node.classList.add(...ReplyBlock.classNames);
+    const innerDom = document.createElement('div');
+    innerDom.classList.add('text-sm', 'text-default-500', 'relative');
+    const svgContainer = document.createElement('div');
+    svgContainer.classList.add('w-3', 'h-3', 'absolute', 'top-0', 'right-0');
+    const svg = '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M15.9082 12.3714H20.5982C20.5182 17.0414 19.5982 17.8114 16.7282 19.5114C16.3982 19.7114 16.2882 20.1314 16.4882 20.4714C16.6882 20.8014 17.1082 20.9114 17.4482 20.7114C20.8282 18.7114 22.0082 17.4914 22.0082 11.6714V6.28141C22.0082 4.57141 20.6182 3.19141 18.9182 3.19141H15.9182C14.1582 3.19141 12.8282 4.52141 12.8282 6.28141V9.28141C12.8182 11.0414 14.1482 12.3714 15.9082 12.3714Z" fill="#292D32"></path> <path d="M5.09 12.3714H9.78C9.7 17.0414 8.78 17.8114 5.91 19.5114C5.58 19.7114 5.47 20.1314 5.67 20.4714C5.87 20.8014 6.29 20.9114 6.63 20.7114C10.01 18.7114 11.19 17.4914 11.19 11.6714V6.28141C11.19 4.57141 9.8 3.19141 8.1 3.19141H5.1C3.33 3.19141 2 4.52141 2 6.28141V9.28141C2 11.0414 3.33 12.3714 5.09 12.3714Z" fill="#292D32"></path> </g></svg>';
+    svgContainer.innerHTML = svg;
+    innerDom.innerHTML = `消息ID：${value.messageId}`;
+    innerDom.appendChild(svgContainer);
+    node.appendChild(innerDom);
+    return node;
   }
 
-  static value(node: HTMLElement): ReplyBlockValue {
+  static value (node: HTMLElement): ReplyBlockValue {
     return {
-      messageId: node.getAttribute('data-message-id') || ''
-    }
+      messageId: node.getAttribute('data-message-id') || '',
+    };
   }
 }
 
-export default ReplyBlock
+export default ReplyBlock;
diff --git a/napcat.webui/src/components/chat_input/index.tsx b/napcat.webui/src/components/chat_input/index.tsx
index aa2a3148..1de7e52a 100644
--- a/napcat.webui/src/components/chat_input/index.tsx
+++ b/napcat.webui/src/components/chat_input/index.tsx
@@ -1,55 +1,55 @@
-import { Button } from '@heroui/button'
-import type { Range } from 'quill'
-import 'quill/dist/quill.core.css'
-import { useRef } from 'react'
-import toast from 'react-hot-toast'
+import { Button } from '@heroui/button';
+import type { Range } from 'quill';
+import 'quill/dist/quill.core.css';
+import { useRef } from 'react';
+import toast from 'react-hot-toast';
 
-import { useCustomQuill } from '@/hooks/use_custom_quill'
-import useShowStructuredMessage from '@/hooks/use_show_strcuted_message'
+import { useCustomQuill } from '@/hooks/use_custom_quill';
+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 DiceInsert from './components/dice_insert'
-import EmojiPicker from './components/emoji_picker'
-import FileInsert from './components/file_insert'
-import ImageInsert from './components/image_insert'
-import MusicInsert from './components/music_insert'
-import ReplyInsert from './components/reply_insert'
-import RPSInsert from './components/rps_insert'
-import VideoInsert from './components/video_insert'
-import EmojiBlot from './formats/emoji_blot'
-import type { EmojiValue } from './formats/emoji_blot'
-import ImageBlot from './formats/image_blot'
-import ReplyBlock from './formats/reply_blot'
+import AudioInsert from './components/audio_insert';
+import DiceInsert from './components/dice_insert';
+import EmojiPicker from './components/emoji_picker';
+import FileInsert from './components/file_insert';
+import ImageInsert from './components/image_insert';
+import MusicInsert from './components/music_insert';
+import ReplyInsert from './components/reply_insert';
+import RPSInsert from './components/rps_insert';
+import VideoInsert from './components/video_insert';
+import EmojiBlot from './formats/emoji_blot';
+import type { EmojiValue } from './formats/emoji_blot';
+import ImageBlot from './formats/image_blot';
+import ReplyBlock from './formats/reply_blot';
 
 const ChatInput = () => {
-  const memorizedRange = useRef<Range | null>(null)
+  const memorizedRange = useRef<Range | null>(null);
 
-  const showStructuredMessage = useShowStructuredMessage()
-  const formats: string[] = ['image', 'emoji', 'reply']
+  const showStructuredMessage = useShowStructuredMessage();
+  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/image', ImageBlot, true)
-    Quill.register('formats/reply', ReplyBlock)
+    Quill.register('formats/emoji', EmojiBlot);
+    Quill.register('formats/image', ImageBlot, true);
+    Quill.register('formats/reply', ReplyBlock);
   }
 
   if (quill) {
     quill.on('selection-change', (range) => {
       if (range) {
-        const editorContent = quill.getContents()
-        const firstOp = editorContent.ops[0]
+        const editorContent = quill.getContents();
+        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 firstOp = editorContent.ops[0]
+      const editorContent = quill.getContents();
+      const firstOp = editorContent.ops[0];
       if (
         firstOp &&
         typeof firstOp.insert !== 'string' &&
         firstOp.insert?.reply &&
         quill.getLength() === 1
       ) {
-        quill.insertText(1, '\n', Quill.sources.SILENT)
+        quill.insertText(1, '\n', Quill.sources.SILENT);
       }
-    })
+    });
 
     quill.on('editor-change', (eventName: string) => {
       if (eventName === 'text-change') {
-        const editorContent = quill.getContents()
-        const firstOp = editorContent.ops[0]
+        const editorContent = quill.getContents();
+        const firstOp = editorContent.ops[0];
         if (
           firstOp &&
           typeof firstOp.insert !== 'string' &&
           firstOp.insert?.reply &&
           quill.getLength() === 1
         ) {
-          quill.insertText(1, '\n', Quill.sources.SILENT)
+          quill.insertText(1, '\n', Quill.sources.SILENT);
         }
       }
-    })
+    });
 
     quill.root.addEventListener('compositionstart', () => {
-      const editorContent = quill.getContents()
-      const firstOp = editorContent.ops[0]
+      const editorContent = quill.getContents();
+      const firstOp = editorContent.ops[0];
       if (
         firstOp &&
         typeof firstOp.insert !== 'string' &&
         firstOp.insert?.reply &&
         quill.getLength() === 1
       ) {
-        quill.insertText(1, '\n', Quill.sources.SILENT)
+        quill.insertText(1, '\n', Quill.sources.SILENT);
       }
-    })
+    });
   }
 
   const onOpenChange = (open: boolean) => {
     if (open) {
-      const selection = quill?.getSelection()
-      if (selection) memorizedRange.current = selection
+      const selection = quill?.getSelection();
+      if (selection) memorizedRange.current = selection;
     }
-  }
+  };
 
   const insertImage = (url: string) => {
-    const selection = memorizedRange.current || quill?.getSelection()
-    quill?.deleteText(selection?.index || 0, selection?.length || 0)
+    const selection = memorizedRange.current || quill?.getSelection();
+    quill?.deleteText(selection?.index || 0, selection?.length || 0);
     quill?.insertEmbed(selection?.index || 0, 'image', {
       src: url,
-      alt: '图片'
-    })
-    quill?.setSelection((selection?.index || 0) + 1, 0)
-  }
-  function insertReplyBlock(messageId: string) {
-    const isNumberReg = /^(?:0|(?:-?[1-9]\d*))$/
+      alt: '图片',
+    });
+    quill?.setSelection((selection?.index || 0) + 1, 0);
+  };
+  function insertReplyBlock (messageId: string) {
+    const isNumberReg = /^(?:0|(?:-?[1-9]\d*))$/;
     if (!isNumberReg.test(messageId)) {
-      toast.error('请输入正确的消息ID')
-      return
+      toast.error('请输入正确的消息ID');
+      return;
     }
-    const editorContent = quill?.getContents()
-    const firstOp = editorContent?.ops[0]
-    const currentSelection = quill?.getSelection()
+    const editorContent = quill?.getContents();
+    const firstOp = editorContent?.ops[0];
+    const currentSelection = quill?.getSelection();
     if (
       firstOp &&
       typeof firstOp.insert !== 'string' &&
       firstOp.insert?.reply
     ) {
-      const delta = quill?.getContents()
+      const delta = quill?.getContents();
       if (delta) {
         delta.ops[0] = {
-          insert: { reply: { messageId } }
-        }
-        quill?.setContents(delta, Quill.sources.USER)
+          insert: { reply: { messageId } },
+        };
+        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?.blur()
+    quill?.setSelection((currentSelection?.index || 0) + 1, 0);
+    quill?.blur();
   }
   const onInsertEmoji = (emoji: EmojiValue) => {
-    const selection = memorizedRange.current || quill?.getSelection()
-    quill?.deleteText(selection?.index || 0, selection?.length || 0)
+    const selection = memorizedRange.current || quill?.getSelection();
+    quill?.deleteText(selection?.index || 0, selection?.length || 0);
     quill?.insertEmbed(selection?.index || 0, 'emoji', {
       alt: emoji.alt,
       src: emoji.src,
-      id: emoji.id
-    })
-    quill?.setSelection((selection?.index || 0) + 1, 0)
-  }
+      id: emoji.id,
+    });
+    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 messages
-  }
+      return quillToMessage(op);
+    });
+    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()
-            showStructuredMessage(messages)
+            const messages = getChatMessage();
+            showStructuredMessage(messages);
           }}
-          className="ml-auto"
+          className='ml-auto'
         >
           获取JSON格式
         </Button>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default ChatInput
+export default ChatInput;
diff --git a/napcat.webui/src/components/chat_input/modal.tsx b/napcat.webui/src/components/chat_input/modal.tsx
index 1aa686f1..841c9258 100644
--- a/napcat.webui/src/components/chat_input/modal.tsx
+++ b/napcat.webui/src/components/chat_input/modal.tsx
@@ -1,42 +1,42 @@
-import { Button } from '@heroui/button'
+import { Button } from '@heroui/button';
 import {
   Modal,
   ModalBody,
   ModalContent,
   ModalFooter,
   ModalHeader,
-  useDisclosure
-} from '@heroui/modal'
+  useDisclosure,
+} from '@heroui/modal';
 
-import ChatInput from '.'
+import ChatInput from '.';
 
-export default function ChatInputModal() {
-  const { isOpen, onOpen, onOpenChange } = useDisclosure()
+export default function ChatInputModal () {
+  const { isOpen, onOpen, onOpenChange } = useDisclosure();
 
   return (
     <>
-      <Button onPress={onOpen} color="primary" radius="full" variant="flat">
+      <Button onPress={onOpen} color='primary' radius='full' variant='flat'>
         构造聊天消息
       </Button>
       <Modal
-        size="4xl"
-        scrollBehavior="inside"
+        size='4xl'
+        scrollBehavior='inside'
         isOpen={isOpen}
         onOpenChange={onOpenChange}
       >
         <ModalContent>
           {(onClose) => (
             <>
-              <ModalHeader className="flex flex-col gap-1">
+              <ModalHeader className='flex flex-col gap-1'>
                 构造消息
               </ModalHeader>
-              <ModalBody className="overflow-y-auto">
-                <div className="overflow-y-auto">
+              <ModalBody className='overflow-y-auto'>
+                <div className='overflow-y-auto'>
                   <ChatInput />
                 </div>
               </ModalBody>
               <ModalFooter>
-                <Button color="primary" onPress={onClose} variant="flat">
+                <Button color='primary' onPress={onClose} variant='flat'>
                   关闭
                 </Button>
               </ModalFooter>
@@ -45,5 +45,5 @@ export default function ChatInputModal() {
         </ModalContent>
       </Modal>
     </>
-  )
+  );
 }
diff --git a/napcat.webui/src/components/code_editor.tsx b/napcat.webui/src/components/code_editor.tsx
index 43af156f..f7d034d3 100644
--- a/napcat.webui/src/components/code_editor.tsx
+++ b/napcat.webui/src/components/code_editor.tsx
@@ -1,46 +1,46 @@
-import Editor, { OnMount } from '@monaco-editor/react'
-import { loader } from '@monaco-editor/react'
-import React from 'react'
+import Editor, { OnMount, loader } from '@monaco-editor/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;
diff --git a/napcat.webui/src/components/display_card/common_card.tsx b/napcat.webui/src/components/display_card/common_card.tsx
index 74e29720..b920198d 100644
--- a/napcat.webui/src/components/display_card/common_card.tsx
+++ b/napcat.webui/src/components/display_card/common_card.tsx
@@ -1,13 +1,13 @@
-import { Button, ButtonGroup } from '@heroui/button'
-import { Switch } from '@heroui/switch'
-import { useState } from 'react'
-import { CgDebug } from 'react-icons/cg'
-import { FiEdit3 } from 'react-icons/fi'
-import { MdDeleteForever } from 'react-icons/md'
+import { Button, ButtonGroup } from '@heroui/button';
+import { Switch } from '@heroui/switch';
+import { useState } from 'react';
+import { CgDebug } from 'react-icons/cg';
+import { FiEdit3 } from 'react-icons/fi';
+import { MdDeleteForever } from 'react-icons/md';
 
-import DisplayCardContainer from './container'
+import DisplayCardContainer from './container';
 
-type NetworkType = OneBotConfig['network']
+type NetworkType = OneBotConfig['network'];
 
 export type NetworkDisplayCardFields<T extends keyof NetworkType> = Array<{
   label: string
@@ -15,7 +15,7 @@ export type NetworkDisplayCardFields<T extends keyof NetworkType> = Array<{
   render?: (
     value: NetworkType[T][0][keyof NetworkType[T][0]]
   ) => React.ReactNode
-}>
+}>;
 
 export interface NetworkDisplayCardProps<T extends keyof NetworkType> {
   data: NetworkType[T][0]
@@ -36,25 +36,25 @@ const NetworkDisplayCard = <T extends keyof NetworkType>({
   onEdit,
   onEnable,
   onDelete,
-  onEnableDebug
+  onEnableDebug,
 }: NetworkDisplayCardProps<T>) => {
-  const { name, enable, debug } = data
-  const [editing, setEditing] = useState(false)
+  const { name, enable, debug } = data;
+  const [editing, setEditing] = useState(false);
 
   const handleEnable = () => {
-    setEditing(true)
-    onEnable().finally(() => setEditing(false))
-  }
+    setEditing(true);
+    onEnable().finally(() => setEditing(false));
+  };
 
   const handleDelete = () => {
-    setEditing(true)
-    onDelete().finally(() => setEditing(false))
-  }
+    setEditing(true);
+    onDelete().finally(() => setEditing(false));
+  };
 
   const handleEnableDebug = () => {
-    setEditing(true)
-    onEnableDebug().finally(() => setEditing(false))
-  }
+    setEditing(true);
+    onEnableDebug().finally(() => setEditing(false));
+  };
 
   return (
     <DisplayCardContainer
@@ -62,12 +62,12 @@ const NetworkDisplayCard = <T extends keyof NetworkType>({
         <ButtonGroup
           fullWidth
           isDisabled={editing}
-          radius="sm"
-          size="sm"
-          variant="flat"
+          radius='sm'
+          size='sm'
+          variant='flat'
         >
           <Button
-            color="warning"
+            color='warning'
             startContent={<FiEdit3 size={16} />}
             onPress={onEdit}
           >
@@ -76,14 +76,14 @@ const NetworkDisplayCard = <T extends keyof NetworkType>({
 
           <Button
             color={debug ? 'secondary' : 'success'}
-            variant="flat"
+            variant='flat'
             startContent={
               <CgDebug
                 style={{
                   width: '16px',
                   height: '16px',
                   minWidth: '16px',
-                  minHeight: '16px'
+                  minHeight: '16px',
                 }}
               />
             }
@@ -92,8 +92,8 @@ const NetworkDisplayCard = <T extends keyof NetworkType>({
             {debug ? '关闭调试' : '开启调试'}
           </Button>
           <Button
-            className="bg-danger/20 text-danger hover:bg-danger/30 transition-colors"
-            variant="flat"
+            className='bg-danger/20 text-danger hover:bg-danger/30 transition-colors'
+            variant='flat'
             startContent={<MdDeleteForever size={16} />}
             onPress={handleDelete}
           >
@@ -111,7 +111,7 @@ const NetworkDisplayCard = <T extends keyof NetworkType>({
       tag={showType && typeLabel}
       title={name}
     >
-      <div className="grid grid-cols-2 gap-1">
+      <div className='grid grid-cols-2 gap-1'>
         {fields.map((field, index) => (
           <div
             key={index}
@@ -119,17 +119,19 @@ const NetworkDisplayCard = <T extends keyof NetworkType>({
               field.label === 'URL' ? 'col-span-2' : ''
             }`}
           >
-            <span className="text-default-400">{field.label}</span>
-            {field.render ? (
-              field.render(field.value)
-            ) : (
-              <span>{field.value}</span>
-            )}
+            <span className='text-default-400'>{field.label}</span>
+            {field.render
+              ? (
+                field.render(field.value)
+              )
+              : (
+                <span>{field.value}</span>
+              )}
           </div>
         ))}
       </div>
     </DisplayCardContainer>
-  )
-}
+  );
+};
 
-export default NetworkDisplayCard
+export default NetworkDisplayCard;
diff --git a/napcat.webui/src/components/display_card/container.tsx b/napcat.webui/src/components/display_card/container.tsx
index 047ba6cc..845759bc 100644
--- a/napcat.webui/src/components/display_card/container.tsx
+++ b/napcat.webui/src/components/display_card/container.tsx
@@ -1,7 +1,7 @@
-import { Card, CardBody, CardFooter, CardHeader } from '@heroui/card'
-import clsx from 'clsx'
+import { Card, CardBody, CardFooter, CardHeader } from '@heroui/card';
+import clsx from 'clsx';
 
-import { title } from '../primitives'
+import { title } from '../primitives';
 
 export interface ContainerProps {
   title: string
@@ -24,13 +24,13 @@ const DisplayCardContainer: React.FC<ContainerProps> = ({
   action,
   tag,
   enableSwitch,
-  children
+  children,
 }) => {
   return (
-    <Card className="bg-opacity-50 backdrop-blur-sm">
-      <CardHeader className={'pb-0 flex items-center'}>
+    <Card className='bg-opacity-50 backdrop-blur-sm'>
+      <CardHeader className='pb-0 flex items-center'>
         {tag && (
-          <div className="text-center text-default-400 mb-1 absolute top-0 left-1/2 -translate-x-1/2 text-sm pointer-events-none bg-warning-100 dark:bg-warning-50 px-2 rounded-b">
+          <div className='text-center text-default-400 mb-1 absolute top-0 left-1/2 -translate-x-1/2 text-sm pointer-events-none bg-warning-100 dark:bg-warning-50 px-2 rounded-b'>
             {tag}
           </div>
         )}
@@ -39,19 +39,19 @@ const DisplayCardContainer: React.FC<ContainerProps> = ({
             title({
               color: 'foreground',
               size: 'xs',
-              shadow: true
+              shadow: true,
             }),
             'truncate'
           )}
         >
           {_title}
         </h2>
-        <div className="ml-auto">{enableSwitch}</div>
+        <div className='ml-auto'>{enableSwitch}</div>
       </CardHeader>
-      <CardBody className="text-sm">{children}</CardBody>
+      <CardBody className='text-sm'>{children}</CardBody>
       <CardFooter>{action}</CardFooter>
     </Card>
-  )
-}
+  );
+};
 
-export default DisplayCardContainer
+export default DisplayCardContainer;
diff --git a/napcat.webui/src/components/display_card/http_client.tsx b/napcat.webui/src/components/display_card/http_client.tsx
index 24f56f89..9519f269 100644
--- a/napcat.webui/src/components/display_card/http_client.tsx
+++ b/napcat.webui/src/components/display_card/http_client.tsx
@@ -1,7 +1,7 @@
-import { Chip } from '@heroui/chip'
+import { Chip } from '@heroui/chip';
 
-import NetworkDisplayCard from './common_card'
-import type { NetworkDisplayCardFields } from './common_card'
+import NetworkDisplayCard from './common_card';
+import type { NetworkDisplayCardFields } from './common_card';
 
 interface HTTPClientDisplayCardProps {
   data: OneBotConfig['network']['httpClients'][0]
@@ -13,8 +13,8 @@ interface HTTPClientDisplayCardProps {
 }
 
 const HTTPClientDisplayCard: React.FC<HTTPClientDisplayCardProps> = (props) => {
-  const { data, showType, onEdit, onEnable, onDelete, onEnableDebug } = props
-  const { url, reportSelfMessage, messagePostFormat } = data
+  const { data, showType, onEdit, onEnable, onDelete, onEnableDebug } = props;
+  const { url, reportSelfMessage, messagePostFormat } = data;
 
   const fields: NetworkDisplayCardFields<'httpClients'> = [
     { label: 'URL', value: url },
@@ -23,25 +23,25 @@ const HTTPClientDisplayCard: React.FC<HTTPClientDisplayCardProps> = (props) => {
       label: '上报自身消息',
       value: reportSelfMessage,
       render: (value) => (
-        <Chip color={value ? 'success' : 'default'} size="sm" variant="flat">
+        <Chip color={value ? 'success' : 'default'} size='sm' variant='flat'>
           {value ? '是' : '否'}
         </Chip>
-      )
-    }
-  ]
+      ),
+    },
+  ];
 
   return (
     <NetworkDisplayCard
       data={data}
       showType={showType}
-      typeLabel="HTTP客户端"
+      typeLabel='HTTP客户端'
       fields={fields}
       onEdit={onEdit}
       onEnable={onEnable}
       onDelete={onDelete}
       onEnableDebug={onEnableDebug}
     />
-  )
-}
+  );
+};
 
-export default HTTPClientDisplayCard
+export default HTTPClientDisplayCard;
diff --git a/napcat.webui/src/components/display_card/http_server.tsx b/napcat.webui/src/components/display_card/http_server.tsx
index 259d498a..a72c4692 100644
--- a/napcat.webui/src/components/display_card/http_server.tsx
+++ b/napcat.webui/src/components/display_card/http_server.tsx
@@ -1,7 +1,7 @@
-import { Chip } from '@heroui/chip'
+import { Chip } from '@heroui/chip';
 
-import NetworkDisplayCard from './common_card'
-import type { NetworkDisplayCardFields } from './common_card'
+import NetworkDisplayCard from './common_card';
+import type { NetworkDisplayCardFields } from './common_card';
 
 interface HTTPServerDisplayCardProps {
   data: OneBotConfig['network']['httpServers'][0]
@@ -13,8 +13,8 @@ interface HTTPServerDisplayCardProps {
 }
 
 const HTTPServerDisplayCard: React.FC<HTTPServerDisplayCardProps> = (props) => {
-  const { data, showType, onEdit, onEnable, onDelete, onEnableDebug } = props
-  const { host, port, enableCors, enableWebsocket, messagePostFormat } = data
+  const { data, showType, onEdit, onEnable, onDelete, onEnableDebug } = props;
+  const { host, port, enableCors, enableWebsocket, messagePostFormat } = data;
 
   const fields: NetworkDisplayCardFields<'httpServers'> = [
     { label: '主机', value: host },
@@ -24,34 +24,34 @@ const HTTPServerDisplayCard: React.FC<HTTPServerDisplayCardProps> = (props) => {
       label: 'CORS',
       value: enableCors,
       render: (value) => (
-        <Chip color={value ? 'success' : 'default'} size="sm" variant="flat">
+        <Chip color={value ? 'success' : 'default'} size='sm' variant='flat'>
           {value ? '已启用' : '未启用'}
         </Chip>
-      )
+      ),
     },
     {
       label: 'WS',
       value: enableWebsocket,
       render: (value) => (
-        <Chip color={value ? 'success' : 'default'} size="sm" variant="flat">
+        <Chip color={value ? 'success' : 'default'} size='sm' variant='flat'>
           {value ? '已启用' : '未启用'}
         </Chip>
-      )
-    }
-  ]
+      ),
+    },
+  ];
 
   return (
     <NetworkDisplayCard
       data={data}
       showType={showType}
-      typeLabel="HTTP服务器"
+      typeLabel='HTTP服务器'
       fields={fields}
       onEdit={onEdit}
       onEnable={onEnable}
       onDelete={onDelete}
       onEnableDebug={onEnableDebug}
     />
-  )
-}
+  );
+};
 
-export default HTTPServerDisplayCard
+export default HTTPServerDisplayCard;
diff --git a/napcat.webui/src/components/display_card/http_sse_server.tsx b/napcat.webui/src/components/display_card/http_sse_server.tsx
index 0b3bbd6f..f6ea34f3 100644
--- a/napcat.webui/src/components/display_card/http_sse_server.tsx
+++ b/napcat.webui/src/components/display_card/http_sse_server.tsx
@@ -1,7 +1,7 @@
-import { Chip } from '@heroui/chip'
+import { Chip } from '@heroui/chip';
 
-import NetworkDisplayCard from './common_card'
-import type { NetworkDisplayCardFields } from './common_card'
+import NetworkDisplayCard from './common_card';
+import type { NetworkDisplayCardFields } from './common_card';
 
 interface HTTPSSEServerDisplayCardProps {
   data: OneBotConfig['network']['httpSseServers'][0]
@@ -15,8 +15,8 @@ interface HTTPSSEServerDisplayCardProps {
 const HTTPSSEServerDisplayCard: React.FC<HTTPSSEServerDisplayCardProps> = (
   props
 ) => {
-  const { data, showType, onEdit, onEnable, onDelete, onEnableDebug } = props
-  const { host, port, enableCors, enableWebsocket, messagePostFormat } = data
+  const { data, showType, onEdit, onEnable, onDelete, onEnableDebug } = props;
+  const { host, port, enableCors, enableWebsocket, messagePostFormat } = data;
 
   const fields: NetworkDisplayCardFields<'httpServers'> = [
     { label: '主机', value: host },
@@ -26,34 +26,34 @@ const HTTPSSEServerDisplayCard: React.FC<HTTPSSEServerDisplayCardProps> = (
       label: 'CORS',
       value: enableCors,
       render: (value) => (
-        <Chip color={value ? 'success' : 'default'} size="sm" variant="flat">
+        <Chip color={value ? 'success' : 'default'} size='sm' variant='flat'>
           {value ? '已启用' : '未启用'}
         </Chip>
-      )
+      ),
     },
     {
       label: 'WS',
       value: enableWebsocket,
       render: (value) => (
-        <Chip color={value ? 'success' : 'default'} size="sm" variant="flat">
+        <Chip color={value ? 'success' : 'default'} size='sm' variant='flat'>
           {value ? '已启用' : '未启用'}
         </Chip>
-      )
-    }
-  ]
+      ),
+    },
+  ];
 
   return (
     <NetworkDisplayCard
       data={data}
       showType={showType}
-      typeLabel="HTTP服务器"
+      typeLabel='HTTP服务器'
       fields={fields}
       onEdit={onEdit}
       onEnable={onEnable}
       onDelete={onDelete}
       onEnableDebug={onEnableDebug}
     />
-  )
-}
+  );
+};
 
-export default HTTPSSEServerDisplayCard
+export default HTTPSSEServerDisplayCard;
diff --git a/napcat.webui/src/components/display_card/ws_client.tsx b/napcat.webui/src/components/display_card/ws_client.tsx
index e91c52d2..deba3d30 100644
--- a/napcat.webui/src/components/display_card/ws_client.tsx
+++ b/napcat.webui/src/components/display_card/ws_client.tsx
@@ -1,7 +1,7 @@
-import { Chip } from '@heroui/chip'
+import { Chip } from '@heroui/chip';
 
-import NetworkDisplayCard from './common_card'
-import type { NetworkDisplayCardFields } from './common_card'
+import NetworkDisplayCard from './common_card';
+import type { NetworkDisplayCardFields } from './common_card';
 
 interface WebsocketClientDisplayCardProps {
   data: OneBotConfig['network']['websocketClients'][0]
@@ -15,14 +15,14 @@ interface WebsocketClientDisplayCardProps {
 const WebsocketClientDisplayCard: React.FC<WebsocketClientDisplayCardProps> = (
   props
 ) => {
-  const { data, showType, onEdit, onEnable, onDelete, onEnableDebug } = props
+  const { data, showType, onEdit, onEnable, onDelete, onEnableDebug } = props;
   const {
     url,
     heartInterval,
     reconnectInterval,
     messagePostFormat,
-    reportSelfMessage
-  } = data
+    reportSelfMessage,
+  } = data;
 
   const fields: NetworkDisplayCardFields<'websocketClients'> = [
     { label: 'URL', value: url },
@@ -33,25 +33,25 @@ const WebsocketClientDisplayCard: React.FC<WebsocketClientDisplayCardProps> = (
       label: '上报自身消息',
       value: reportSelfMessage,
       render: (value) => (
-        <Chip color={value ? 'success' : 'default'} size="sm" variant="flat">
+        <Chip color={value ? 'success' : 'default'} size='sm' variant='flat'>
           {value ? '是' : '否'}
         </Chip>
-      )
-    }
-  ]
+      ),
+    },
+  ];
 
   return (
     <NetworkDisplayCard
       data={data}
       showType={showType}
-      typeLabel="Websocket客户端"
+      typeLabel='Websocket客户端'
       fields={fields}
       onEdit={onEdit}
       onEnable={onEnable}
       onDelete={onDelete}
       onEnableDebug={onEnableDebug}
     />
-  )
-}
+  );
+};
 
-export default WebsocketClientDisplayCard
+export default WebsocketClientDisplayCard;
diff --git a/napcat.webui/src/components/display_card/ws_server.tsx b/napcat.webui/src/components/display_card/ws_server.tsx
index b973987d..1f1e9ece 100644
--- a/napcat.webui/src/components/display_card/ws_server.tsx
+++ b/napcat.webui/src/components/display_card/ws_server.tsx
@@ -1,7 +1,7 @@
-import { Chip } from '@heroui/chip'
+import { Chip } from '@heroui/chip';
 
-import NetworkDisplayCard from './common_card'
-import type { NetworkDisplayCardFields } from './common_card'
+import NetworkDisplayCard from './common_card';
+import type { NetworkDisplayCardFields } from './common_card';
 
 interface WebsocketServerDisplayCardProps {
   data: OneBotConfig['network']['websocketServers'][0]
@@ -15,15 +15,15 @@ interface WebsocketServerDisplayCardProps {
 const WebsocketServerDisplayCard: React.FC<WebsocketServerDisplayCardProps> = (
   props
 ) => {
-  const { data, showType, onEdit, onEnable, onDelete, onEnableDebug } = props
+  const { data, showType, onEdit, onEnable, onDelete, onEnableDebug } = props;
   const {
     host,
     port,
     heartInterval,
     messagePostFormat,
     reportSelfMessage,
-    enableForcePushEvent
-  } = data
+    enableForcePushEvent,
+  } = data;
 
   const fields: NetworkDisplayCardFields<'websocketServers'> = [
     { label: '主机', value: host },
@@ -34,34 +34,34 @@ const WebsocketServerDisplayCard: React.FC<WebsocketServerDisplayCardProps> = (
       label: '上报自身消息',
       value: reportSelfMessage,
       render: (value) => (
-        <Chip color={value ? 'success' : 'default'} size="sm" variant="flat">
+        <Chip color={value ? 'success' : 'default'} size='sm' variant='flat'>
           {value ? '是' : '否'}
         </Chip>
-      )
+      ),
     },
     {
       label: '强制推送事件',
       value: enableForcePushEvent,
       render: (value) => (
-        <Chip color={value ? 'success' : 'default'} size="sm" variant="flat">
+        <Chip color={value ? 'success' : 'default'} size='sm' variant='flat'>
           {value ? '是' : '否'}
         </Chip>
-      )
-    }
-  ]
+      ),
+    },
+  ];
 
   return (
     <NetworkDisplayCard
       data={data}
       showType={showType}
-      typeLabel="Websocket服务器"
+      typeLabel='Websocket服务器'
       fields={fields}
       onEdit={onEdit}
       onEnable={onEnable}
       onDelete={onDelete}
       onEnableDebug={onEnableDebug}
     />
-  )
-}
+  );
+};
 
-export default WebsocketServerDisplayCard
+export default WebsocketServerDisplayCard;
diff --git a/napcat.webui/src/components/display_network_item.tsx b/napcat.webui/src/components/display_network_item.tsx
index c943dbbd..39563b90 100644
--- a/napcat.webui/src/components/display_network_item.tsx
+++ b/napcat.webui/src/components/display_network_item.tsx
@@ -1,7 +1,7 @@
-import { Card, CardBody } from '@heroui/card'
-import clsx from 'clsx'
+import { Card, CardBody } from '@heroui/card';
+import clsx from 'clsx';
 
-import { title } from '@/components/primitives'
+import { title } from '@/components/primitives';
 
 export interface NetworkItemDisplayProps {
   count: number
@@ -12,7 +12,7 @@ export interface NetworkItemDisplayProps {
 const NetworkItemDisplay: React.FC<NetworkItemDisplayProps> = ({
   count,
   label,
-  size = 'md'
+  size = 'md',
 }) => {
   return (
     <Card
@@ -22,16 +22,16 @@ const NetworkItemDisplay: React.FC<NetworkItemDisplayProps> = ({
           ? 'col-span-8 md:col-span-2 bg-primary-50 shadow-primary-100'
           : 'col-span-2 md:col-span-1 bg-warning-100 shadow-warning-200'
       )}
-      shadow="sm"
+      shadow='sm'
     >
-      <CardBody className="items-center md:gap-1 p-1 md:p-2">
+      <CardBody className='items-center md:gap-1 p-1 md:p-2'>
         <div
           className={clsx(
             'flex-1',
             size === 'md' ? 'text-2xl md:text-3xl' : 'text-xl md:text-2xl',
             title({
               color: size === 'md' ? 'pink' : 'yellow',
-              size
+              size,
             })
           )}
         >
@@ -44,7 +44,7 @@ const NetworkItemDisplay: React.FC<NetworkItemDisplayProps> = ({
             title({
               color: size === 'md' ? 'pink' : 'yellow',
               shadow: true,
-              size: 'xxs'
+              size: 'xxs',
             })
           )}
         >
@@ -52,7 +52,7 @@ const NetworkItemDisplay: React.FC<NetworkItemDisplayProps> = ({
         </div>
       </CardBody>
     </Card>
-  )
-}
+  );
+};
 
-export default NetworkItemDisplay
+export default NetworkItemDisplay;
diff --git a/napcat.webui/src/components/effect_card.tsx b/napcat.webui/src/components/effect_card.tsx
index f61ec97b..e267033e 100644
--- a/napcat.webui/src/components/effect_card.tsx
+++ b/napcat.webui/src/components/effect_card.tsx
@@ -1,6 +1,6 @@
-import { Card, CardProps } from '@heroui/card'
-import clsx from 'clsx'
-import React from 'react'
+import { Card, CardProps } from '@heroui/card';
+import clsx from 'clsx';
+import React from 'react';
 
 export interface HoverEffectCardProps extends CardProps {
   children: React.ReactNode
@@ -18,15 +18,15 @@ const HoverEffectCard: React.FC<HoverEffectCardProps> = (props) => {
     className,
     style,
     lightClassName,
-    lightStyle
-  } = props
-  const cardRef = React.useRef<HTMLDivElement | null>(null)
-  const lightRef = React.useRef<HTMLDivElement | null>(null)
-  const [isShowLight, setIsShowLight] = React.useState(false)
+    lightStyle,
+  } = props;
+  const cardRef = React.useRef<HTMLDivElement | null>(null);
+  const lightRef = React.useRef<HTMLDivElement | null>(null);
+  const [isShowLight, setIsShowLight] = React.useState(false);
   const [pos, setPos] = React.useState({
     left: 0,
-    top: 0
-  })
+    top: 0,
+  });
 
   return (
     <Card
@@ -40,53 +40,53 @@ const HoverEffectCard: React.FC<HoverEffectCardProps> = (props) => {
         willChange: 'transform',
         transform:
           'perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)',
-        ...style
+        ...style,
       }}
       onMouseEnter={() => {
         if (cardRef.current) {
-          cardRef.current.style.transition = 'transform 0.3s ease-out'
+          cardRef.current.style.transition = 'transform 0.3s ease-out';
         }
       }}
       onMouseLeave={() => {
-        setIsShowLight(false)
+        setIsShowLight(false);
         if (cardRef.current) {
-          cardRef.current.style.transition = 'transform 0.5s'
+          cardRef.current.style.transition = 'transform 0.5s';
           cardRef.current.style.transform =
-            'perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)'
+            'perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)';
         }
       }}
       onMouseMove={(e: React.MouseEvent<HTMLDivElement>) => {
         if (cardRef.current) {
-          setIsShowLight(true)
+          setIsShowLight(true);
 
-          const { x, y } = cardRef.current.getBoundingClientRect()
-          const { clientX, clientY } = e
+          const { x, y } = cardRef.current.getBoundingClientRect();
+          const { clientX, clientY } = e;
 
-          const offsetX = clientX - x
-          const offsetY = clientY - y
+          const offsetX = clientX - x;
+          const offsetY = clientY - y;
 
-          const lightWidth = lightStyle?.width?.toString() || '100'
-          const lightHeight = lightStyle?.height?.toString() || '100'
-          const lightWidthNum = parseInt(lightWidth)
-          const lightHeightNum = parseInt(lightHeight)
+          const lightWidth = lightStyle?.width?.toString() || '100';
+          const lightHeight = lightStyle?.height?.toString() || '100';
+          const lightWidthNum = parseInt(lightWidth);
+          const lightHeightNum = parseInt(lightHeight);
 
-          const left = offsetX - lightWidthNum / 2
-          const top = offsetY - lightHeightNum / 2
+          const left = offsetX - lightWidthNum / 2;
+          const top = offsetY - lightHeightNum / 2;
 
           setPos({
             left,
-            top
-          })
+            top,
+          });
 
-          cardRef.current.style.transition = 'transform 0.1s'
+          cardRef.current.style.transition = 'transform 0.1s';
 
-          const rangeX = 400 / 2
-          const rangeY = 400 / 2
+          const rangeX = 400 / 2;
+          const rangeY = 400 / 2;
 
-          const rotateX = ((offsetY - rangeY) / rangeY) * maxXRotation
-          const rotateY = -1 * ((offsetX - rangeX) / rangeX) * maxYRotation
+          const rotateX = ((offsetY - rangeY) / rangeY) * maxXRotation;
+          const rotateY = -1 * ((offsetX - rangeX) / rangeX) * maxYRotation;
 
-          cardRef.current.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`
+          cardRef.current.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
         }
       }}
     >
@@ -98,12 +98,12 @@ const HoverEffectCard: React.FC<HoverEffectCardProps> = (props) => {
           lightClassName
         )}
         style={{
-          ...pos
+          ...pos,
         }}
       />
       {children}
     </Card>
-  )
-}
+  );
+};
 
-export default HoverEffectCard
+export default HoverEffectCard;
diff --git a/napcat.webui/src/components/error_fallback.tsx b/napcat.webui/src/components/error_fallback.tsx
index a96c9c76..f65e0f26 100644
--- a/napcat.webui/src/components/error_fallback.tsx
+++ b/napcat.webui/src/components/error_fallback.tsx
@@ -1,30 +1,30 @@
-import { Button } from '@heroui/button'
-import { Code } from '@heroui/code'
-import { MdError } from 'react-icons/md'
+import { Button } from '@heroui/button';
+import { Code } from '@heroui/code';
+import { MdError } from 'react-icons/md';
 
 export interface ErrorFallbackProps {
   error: Error
   resetErrorBoundary: () => void
 }
-function errorFallbackRender({
+function errorFallbackRender ({
   error,
-  resetErrorBoundary
+  resetErrorBoundary,
 }: ErrorFallbackProps) {
   return (
-    <div className="pt-32 flex flex-col justify-center items-center">
-      <div className="flex items-center">
-        <MdError className="mr-2" color="red" size={30} />
-        <h1 className="text-2xl">出错了</h1>
+    <div className='pt-32 flex flex-col justify-center items-center'>
+      <div className='flex items-center'>
+        <MdError className='mr-2' color='red' size={30} />
+        <h1 className='text-2xl'>出错了</h1>
       </div>
-      <div className="my-6 flex flex-col justify-center items-center">
-        <p className="mb-2">错误信息</p>
+      <div className='my-6 flex flex-col justify-center items-center'>
+        <p className='mb-2'>错误信息</p>
         <Code>{error.message}</Code>
       </div>
-      <Button color="primary" size="md" onPress={resetErrorBoundary}>
+      <Button color='primary' size='md' onPress={resetErrorBoundary}>
         重试
       </Button>
     </div>
-  )
+  );
 }
 
-export default errorFallbackRender
+export default errorFallbackRender;
diff --git a/napcat.webui/src/components/file_icon.tsx b/napcat.webui/src/components/file_icon.tsx
index 9327abe9..c955d921 100644
--- a/napcat.webui/src/components/file_icon.tsx
+++ b/napcat.webui/src/components/file_icon.tsx
@@ -11,8 +11,8 @@ import {
   FaFileVideo,
   FaFileWord,
   FaFileZipper,
-  FaFolderClosed
-} from 'react-icons/fa6'
+  FaFolderClosed,
+} from 'react-icons/fa6';
 
 export interface FileIconProps {
   name?: string
@@ -20,12 +20,12 @@ export interface FileIconProps {
 }
 
 const FileIcon = (props: FileIconProps) => {
-  const { name, isDirectory = false } = props
+  const { name, isDirectory = false } = props;
   if (isDirectory) {
-    return <FaFolderClosed className="text-yellow-500" />
+    return <FaFolderClosed className='text-yellow-500' />;
   }
 
-  const ext = name?.split('.').pop() || ''
+  const ext = name?.split('.').pop() || '';
   if (ext) {
     switch (ext.toLowerCase()) {
       case 'jpg':
@@ -50,20 +50,20 @@ const FileIcon = (props: FileIconProps) => {
       case 'fig':
       case 'xd':
       case 'svgz':
-        return <FaFileImage className="text-green-500" />
+        return <FaFileImage className='text-green-500' />;
       case 'pdf':
-        return <FaFilePdf className="text-red-500" />
+        return <FaFilePdf className='text-red-500' />;
       case 'doc':
       case 'docx':
-        return <FaFileWord className="text-blue-500" />
+        return <FaFileWord className='text-blue-500' />;
       case 'xls':
       case 'xlsx':
-        return <FaFileExcel className="text-green-500" />
+        return <FaFileExcel className='text-green-500' />;
       case 'csv':
-        return <FaFileCsv className="text-green-500" />
+        return <FaFileCsv className='text-green-500' />;
       case 'ppt':
       case 'pptx':
-        return <FaFilePowerpoint className="text-red-500" />
+        return <FaFilePowerpoint className='text-red-500' />;
       case 'zip':
       case 'rar':
       case '7z':
@@ -79,18 +79,18 @@ const FileIcon = (props: FileIconProps) => {
       case 'taz':
       case 'tz':
       case 'tzo':
-        return <FaFileZipper className="text-green-500" />
+        return <FaFileZipper className='text-green-500' />;
       case 'txt':
-        return <FaFileLines className="text-gray-500" />
+        return <FaFileLines className='text-gray-500' />;
       case 'mp3':
       case 'wav':
       case 'flac':
-        return <FaFileAudio className="text-green-500" />
+        return <FaFileAudio className='text-green-500' />;
       case 'mp4':
       case 'avi':
       case 'mov':
       case 'wmv':
-        return <FaFileVideo className="text-red-500" />
+        return <FaFileVideo className='text-red-500' />;
       case 'html':
       case 'css':
       case 'js':
@@ -154,13 +154,13 @@ const FileIcon = (props: FileIconProps) => {
       case 'userosscache':
       case 'sln.docstates':
       case 'dll':
-        return <FaFileCode className="text-blue-500" />
+        return <FaFileCode className='text-blue-500' />;
       default:
-        return <FaFile className="text-gray-500" />
+        return <FaFile className='text-gray-500' />;
     }
   }
 
-  return <FaFile className="text-gray-500" />
-}
+  return <FaFile className='text-gray-500' />;
+};
 
-export default FileIcon
+export default FileIcon;
diff --git a/napcat.webui/src/components/file_manage/create_file_modal.tsx b/napcat.webui/src/components/file_manage/create_file_modal.tsx
index 51b3a14c..d959a044 100644
--- a/napcat.webui/src/components/file_manage/create_file_modal.tsx
+++ b/napcat.webui/src/components/file_manage/create_file_modal.tsx
@@ -1,12 +1,12 @@
-import { Button, ButtonGroup } from '@heroui/button'
-import { Input } from '@heroui/input'
+import { Button, ButtonGroup } from '@heroui/button';
+import { Input } from '@heroui/input';
 import {
   Modal,
   ModalBody,
   ModalContent,
   ModalFooter,
-  ModalHeader
-} from '@heroui/modal'
+  ModalHeader,
+} from '@heroui/modal';
 
 interface CreateFileModalProps {
   isOpen: boolean
@@ -18,22 +18,22 @@ interface CreateFileModalProps {
   onCreate: () => void
 }
 
-export default function CreateFileModal({
+export default function CreateFileModal ({
   isOpen,
   fileType,
   newFileName,
   onTypeChange,
   onNameChange,
   onClose,
-  onCreate
+  onCreate,
 }: CreateFileModalProps) {
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
       <ModalContent>
         <ModalHeader>新建</ModalHeader>
         <ModalBody>
-          <div className="flex flex-col gap-4">
-            <ButtonGroup color="primary">
+          <div className='flex flex-col gap-4'>
+            <ButtonGroup color='primary'>
               <Button
                 variant={fileType === 'file' ? 'solid' : 'flat'}
                 onPress={() => onTypeChange('file')}
@@ -47,18 +47,18 @@ export default function CreateFileModal({
                 目录
               </Button>
             </ButtonGroup>
-            <Input label="名称" value={newFileName} onChange={onNameChange} />
+            <Input label='名称' value={newFileName} onChange={onNameChange} />
           </div>
         </ModalBody>
         <ModalFooter>
-          <Button color="primary" variant="flat" onPress={onClose}>
+          <Button color='primary' variant='flat' onPress={onClose}>
             取消
           </Button>
-          <Button color="primary" onPress={onCreate}>
+          <Button color='primary' onPress={onCreate}>
             创建
           </Button>
         </ModalFooter>
       </ModalContent>
     </Modal>
-  )
+  );
 }
diff --git a/napcat.webui/src/components/file_manage/file_edit_modal.tsx b/napcat.webui/src/components/file_manage/file_edit_modal.tsx
index cc906e63..309d8f78 100644
--- a/napcat.webui/src/components/file_manage/file_edit_modal.tsx
+++ b/napcat.webui/src/components/file_manage/file_edit_modal.tsx
@@ -1,14 +1,14 @@
-import { Button } from '@heroui/button'
-import { Code } from '@heroui/code'
+import { Button } from '@heroui/button';
+import { Code } from '@heroui/code';
 import {
   Modal,
   ModalBody,
   ModalContent,
   ModalFooter,
-  ModalHeader
-} from '@heroui/modal'
+  ModalHeader,
+} 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('.ts')) return 'typescript'
-    if (filePath.endsWith('.tsx')) return 'tsx'
-    if (filePath.endsWith('.jsx')) return 'jsx'
-    if (filePath.endsWith('.vue')) return 'vue'
-    if (filePath.endsWith('.svelte')) return 'svelte'
-    if (filePath.endsWith('.json')) return 'json'
-    if (filePath.endsWith('.html')) return 'html'
-    if (filePath.endsWith('.css')) return 'css'
-    if (filePath.endsWith('.scss')) return 'scss'
-    if (filePath.endsWith('.less')) return 'less'
-    if (filePath.endsWith('.md')) return 'markdown'
-    if (filePath.endsWith('.yaml') || filePath.endsWith('.yml')) return 'yaml'
-    if (filePath.endsWith('.xml')) return 'xml'
-    if (filePath.endsWith('.sql')) return 'sql'
-    if (filePath.endsWith('.sh')) return 'shell'
-    if (filePath.endsWith('.bat')) return 'bat'
-    if (filePath.endsWith('.php')) return 'php'
-    if (filePath.endsWith('.java')) return 'java'
-    if (filePath.endsWith('.c')) return 'c'
-    if (filePath.endsWith('.cpp')) return 'cpp'
-    if (filePath.endsWith('.h')) return 'h'
-    if (filePath.endsWith('.hpp')) return 'hpp'
-    if (filePath.endsWith('.go')) return 'go'
-    if (filePath.endsWith('.py')) return 'python'
-    if (filePath.endsWith('.rb')) return 'ruby'
-    if (filePath.endsWith('.cs')) return 'csharp'
-    if (filePath.endsWith('.swift')) return 'swift'
-    if (filePath.endsWith('.vb')) return 'vb'
-    if (filePath.endsWith('.lua')) return 'lua'
-    if (filePath.endsWith('.pl')) return 'perl'
-    if (filePath.endsWith('.r')) return 'r'
-    return 'plaintext'
-  }
+    if (filePath.endsWith('.js')) return 'javascript';
+    if (filePath.endsWith('.ts')) return 'typescript';
+    if (filePath.endsWith('.tsx')) return 'tsx';
+    if (filePath.endsWith('.jsx')) return 'jsx';
+    if (filePath.endsWith('.vue')) return 'vue';
+    if (filePath.endsWith('.svelte')) return 'svelte';
+    if (filePath.endsWith('.json')) return 'json';
+    if (filePath.endsWith('.html')) return 'html';
+    if (filePath.endsWith('.css')) return 'css';
+    if (filePath.endsWith('.scss')) return 'scss';
+    if (filePath.endsWith('.less')) return 'less';
+    if (filePath.endsWith('.md')) return 'markdown';
+    if (filePath.endsWith('.yaml') || filePath.endsWith('.yml')) return 'yaml';
+    if (filePath.endsWith('.xml')) return 'xml';
+    if (filePath.endsWith('.sql')) return 'sql';
+    if (filePath.endsWith('.sh')) return 'shell';
+    if (filePath.endsWith('.bat')) return 'bat';
+    if (filePath.endsWith('.php')) return 'php';
+    if (filePath.endsWith('.java')) return 'java';
+    if (filePath.endsWith('.c')) return 'c';
+    if (filePath.endsWith('.cpp')) return 'cpp';
+    if (filePath.endsWith('.h')) return 'h';
+    if (filePath.endsWith('.hpp')) return 'hpp';
+    if (filePath.endsWith('.go')) return 'go';
+    if (filePath.endsWith('.py')) return 'python';
+    if (filePath.endsWith('.rb')) return 'ruby';
+    if (filePath.endsWith('.cs')) return 'csharp';
+    if (filePath.endsWith('.swift')) return 'swift';
+    if (filePath.endsWith('.vb')) return 'vb';
+    if (filePath.endsWith('.lua')) return 'lua';
+    if (filePath.endsWith('.pl')) return 'perl';
+    if (filePath.endsWith('.r')) return 'r';
+    return 'plaintext';
+  };
 
   return (
-    <Modal size="full" isOpen={isOpen} onClose={onClose}>
+    <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">
-          <div className="h-full">
+        <ModalBody className='p-0'>
+          <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>
-  )
+  );
 }
diff --git a/napcat.webui/src/components/file_manage/file_preview_modal.tsx b/napcat.webui/src/components/file_manage/file_preview_modal.tsx
index e416eb48..c559875f 100644
--- a/napcat.webui/src/components/file_manage/file_preview_modal.tsx
+++ b/napcat.webui/src/components/file_manage/file_preview_modal.tsx
@@ -1,17 +1,17 @@
-import { Button } from '@heroui/button'
+import { Button } from '@heroui/button';
 import {
   Modal,
   ModalBody,
   ModalContent,
   ModalFooter,
-  ModalHeader
-} from '@heroui/modal'
-import { Spinner } from '@heroui/spinner'
-import { useRequest } from 'ahooks'
-import path from 'path-browserify'
-import { useEffect } from 'react'
+  ModalHeader,
+} from '@heroui/modal';
+import { Spinner } from '@heroui/spinner';
+import { useRequest } from 'ahooks';
+import path from 'path-browserify';
+import { useEffect } from 'react';
 
-import FileManager from '@/controllers/file_manager'
+import FileManager from '@/controllers/file_manager';
 
 interface FilePreviewModalProps {
   isOpen: boolean
@@ -19,74 +19,74 @@ interface FilePreviewModalProps {
   onClose: () => void
 }
 
-export const videoExts = ['.mp4', '.webm']
-export const audioExts = ['.mp3', '.wav']
+export const videoExts = ['.mp4', '.webm'];
+export const audioExts = ['.mp3', '.wav'];
 
-export const supportedPreviewExts = [...videoExts, ...audioExts]
+export const supportedPreviewExts = [...videoExts, ...audioExts];
 
-export default function FilePreviewModal({
+export default function FilePreviewModal ({
   isOpen,
   filePath,
-  onClose
+  onClose,
 }: FilePreviewModalProps) {
-  const ext = path.extname(filePath).toLowerCase()
+  const ext = path.extname(filePath).toLowerCase();
   const { data, loading, error, run } = useRequest(
     async () => FileManager.downloadToURL(filePath),
     {
       refreshDeps: [filePath],
       manual: true,
       refreshDepsAction: () => {
-        const ext = path.extname(filePath).toLowerCase()
+        const ext = path.extname(filePath).toLowerCase();
         if (!filePath || !supportedPreviewExts.includes(ext)) {
-          return
+          return;
         }
-        run()
-      }
+        run();
+      },
     }
-  )
+  );
 
   useEffect(() => {
     if (filePath) {
-      run()
+      run();
     }
-  }, [filePath])
+  }, [filePath]);
 
-  let contentElement = null
+  let contentElement = null;
   if (!supportedPreviewExts.includes(ext)) {
-    contentElement = <div>暂不支持预览此文件类型</div>
+    contentElement = <div>暂不支持预览此文件类型</div>;
   } else if (error) {
-    contentElement = <div>读取文件失败</div>
+    contentElement = <div>读取文件失败</div>;
   } else if (loading || !data) {
     contentElement = (
-      <div className="flex justify-center items-center h-full">
+      <div className='flex justify-center items-center h-full'>
         <Spinner />
       </div>
-    )
+    );
   } else if (videoExts.includes(ext)) {
-    contentElement = <video src={data} controls className="max-w-full" />
+    contentElement = <video src={data} controls className='max-w-full' />;
   } else if (audioExts.includes(ext)) {
-    contentElement = <audio src={data} controls className="w-full" />
+    contentElement = <audio src={data} controls className='w-full' />;
   } else {
     contentElement = (
-      <div className="flex justify-center items-center h-full">
+      <div className='flex justify-center items-center h-full'>
         <Spinner />
       </div>
-    )
+    );
   }
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose} scrollBehavior="inside" size="3xl">
+    <Modal isOpen={isOpen} onClose={onClose} scrollBehavior='inside' size='3xl'>
       <ModalContent>
         <ModalHeader>文件预览</ModalHeader>
-        <ModalBody className="flex justify-center items-center">
+        <ModalBody className='flex justify-center items-center'>
           {contentElement}
         </ModalBody>
         <ModalFooter>
-          <Button color="primary" variant="flat" onPress={onClose}>
+          <Button color='primary' variant='flat' onPress={onClose}>
             关闭
           </Button>
         </ModalFooter>
       </ModalContent>
     </Modal>
-  )
+  );
 }
diff --git a/napcat.webui/src/components/file_manage/file_table.tsx b/napcat.webui/src/components/file_manage/file_table.tsx
index 2cbda7b3..b0e0b2d2 100644
--- a/napcat.webui/src/components/file_manage/file_table.tsx
+++ b/napcat.webui/src/components/file_manage/file_table.tsx
@@ -1,6 +1,6 @@
-import { Button, ButtonGroup } from '@heroui/button'
-import { Pagination } from '@heroui/pagination'
-import { Spinner } from '@heroui/spinner'
+import { Button, ButtonGroup } from '@heroui/button';
+import { Pagination } from '@heroui/pagination';
+import { Spinner } from '@heroui/spinner';
 import {
   type Selection,
   type SortDescriptor,
@@ -9,20 +9,20 @@ import {
   TableCell,
   TableColumn,
   TableHeader,
-  TableRow
-} from '@heroui/table'
-import path from 'path-browserify'
-import { useCallback, useEffect, useState } from 'react'
-import { BiRename } from 'react-icons/bi'
-import { FiCopy, FiDownload, FiMove, FiTrash2 } from 'react-icons/fi'
-import { PhotoSlider } from 'react-photo-view'
+  TableRow,
+} from '@heroui/table';
+import path from 'path-browserify';
+import { useCallback, useEffect, useState } from 'react';
+import { BiRename } from 'react-icons/bi';
+import { FiCopy, FiDownload, FiMove, FiTrash2 } from 'react-icons/fi';
+import { PhotoSlider } from 'react-photo-view';
 
-import FileIcon from '@/components/file_icon'
+import FileIcon from '@/components/file_icon';
 
-import type { FileInfo } from '@/controllers/file_manager'
+import type { FileInfo } from '@/controllers/file_manager';
 
-import { supportedPreviewExts } from './file_preview_modal'
-import ImageNameButton, { PreviewImage, imageExts } from './image_name_button'
+import { supportedPreviewExts } from './file_preview_modal';
+import ImageNameButton, { PreviewImage, imageExts } from './image_name_button';
 
 export interface FileTableProps {
   files: FileInfo[]
@@ -42,9 +42,9 @@ export interface FileTableProps {
   onDownload: (filePath: string) => void
 }
 
-const PAGE_SIZE = 20
+const PAGE_SIZE = 20;
 
-export default function FileTable({
+export default function FileTable ({
   files,
   currentPath,
   loading,
@@ -59,40 +59,40 @@ export default function FileTable({
   onMoveRequest,
   onCopyPath,
   onDelete,
-  onDownload
+  onDownload,
 }: FileTableProps) {
-  const [page, setPage] = useState(1)
-  const pages = Math.ceil(files.length / PAGE_SIZE) || 1
-  const start = (page - 1) * PAGE_SIZE
-  const end = start + PAGE_SIZE
-  const displayFiles = files.slice(start, end)
-  const [showImage, setShowImage] = useState(false)
-  const [previewIndex, setPreviewIndex] = useState(0)
-  const [previewImages, setPreviewImages] = useState<PreviewImage[]>([])
+  const [page, setPage] = useState(1);
+  const pages = Math.ceil(files.length / PAGE_SIZE) || 1;
+  const start = (page - 1) * PAGE_SIZE;
+  const end = start + PAGE_SIZE;
+  const displayFiles = files.slice(start, end);
+  const [showImage, setShowImage] = useState(false);
+  const [previewIndex, setPreviewIndex] = useState(0);
+  const [previewImages, setPreviewImages] = useState<PreviewImage[]>([]);
 
   const addPreviewImage = useCallback((image: PreviewImage) => {
     setPreviewImages((prev) => {
-      const exists = prev.some((p) => p.key === image.key)
-      if (exists) return prev
-      return [...prev, image]
-    })
-  }, [])
+      const exists = prev.some((p) => p.key === image.key);
+      if (exists) return prev;
+      return [...prev, image];
+    });
+  }, []);
 
   useEffect(() => {
-    setPreviewImages([])
-    setPreviewIndex(0)
-    setShowImage(false)
-    setPage(1)
-  }, [currentPath])
+    setPreviewImages([]);
+    setPreviewIndex(0);
+    setShowImage(false);
+    setPage(1);
+  }, [currentPath]);
 
   const onPreviewImage = (name: string, images: PreviewImage[]) => {
-    const index = images.findIndex((image) => image.key === name)
+    const index = images.findIndex((image) => image.key === name);
     if (index === -1) {
-      return
+      return;
     }
-    setPreviewIndex(index)
-    setShowImage(true)
-  }
+    setPreviewIndex(index);
+    setShowImage(true);
+  };
 
   return (
     <>
@@ -104,20 +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 ext = path.extname(file.name).toLowerCase()
-            const previewable = supportedPreviewExts.includes(ext)
-            const images = previewImages
+            const filePath = path.join(currentPath, file.name);
+            const ext = path.extname(file.name).toLowerCase();
+            const previewable = supportedPreviewExts.includes(ext);
+            const images = previewImages;
             return (
               <TableRow key={file.name}>
                 <TableCell>
-                  {imageExts.includes(ext) ? (
-                    <ImageNameButton
-                      name={file.name}
-                      filePath={filePath}
-                      onPreview={() => onPreviewImage(file.name, images)}
-                      onAddPreview={addPreviewImage}
-                    />
-                  ) : (
-                    <Button
-                      variant="light"
-                      onPress={() =>
-                        file.isDirectory
-                          ? onDirectoryClick(file.name)
-                          : previewable
-                            ? onPreview(filePath)
-                            : onEdit(filePath)
+                  {imageExts.includes(ext)
+                    ? (
+                      <ImageNameButton
+                        name={file.name}
+                        filePath={filePath}
+                        onPreview={() => onPreviewImage(file.name, images)}
+                        onAddPreview={addPreviewImage}
+                      />
+                    )
+                    : (
+                      <Button
+                        variant='light'
+                        onPress={() =>
+                          file.isDirectory
+                            ? onDirectoryClick(file.name)
+                            : previewable
+                              ? onPreview(filePath)
+                              : onEdit(filePath)}
+                        className='text-left justify-start'
+                        startContent={
+                          <FileIcon
+                            name={file.name}
+                            isDirectory={file.isDirectory}
+                          />
                       }
-                      className="text-left justify-start"
-                      startContent={
-                        <FileIcon
-                          name={file.name}
-                          isDirectory={file.isDirectory}
-                        />
-                      }
-                    >
-                      {file.name}
-                    </Button>
-                  )}
+                      >
+                        {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"
-                      variant="flat"
+                      color='primary'
+                      variant='flat'
                       onPress={() => onRenameRequest(file.name)}
                     >
                       <BiRename />
                     </Button>
                     <Button
                       isIconOnly
-                      color="primary"
-                      variant="flat"
+                      color='primary'
+                      variant='flat'
                       onPress={() => onMoveRequest(file.name)}
                     >
                       <FiMove />
                     </Button>
                     <Button
                       isIconOnly
-                      color="primary"
-                      variant="flat"
+                      color='primary'
+                      variant='flat'
                       onPress={() => onCopyPath(file.name)}
                     >
                       <FiCopy />
                     </Button>
                     <Button
                       isIconOnly
-                      color="primary"
-                      variant="flat"
+                      color='primary'
+                      variant='flat'
                       onPress={() => onDownload(filePath)}
                     >
                       <FiDownload />
                     </Button>
                     <Button
                       isIconOnly
-                      color="primary"
-                      variant="flat"
+                      color='primary'
+                      variant='flat'
                       onPress={() => onDelete(filePath)}
                     >
                       <FiTrash2 />
@@ -237,10 +238,10 @@ export default function FileTable({
                   </ButtonGroup>
                 </TableCell>
               </TableRow>
-            )
+            );
           })}
         </TableBody>
       </Table>
     </>
-  )
+  );
 }
diff --git a/napcat.webui/src/components/file_manage/image_name_button.tsx b/napcat.webui/src/components/file_manage/image_name_button.tsx
index c1332f41..fc7da0a1 100644
--- a/napcat.webui/src/components/file_manage/image_name_button.tsx
+++ b/napcat.webui/src/components/file_manage/image_name_button.tsx
@@ -1,20 +1,20 @@
-import { Button } from '@heroui/button'
-import { Image } from '@heroui/image'
-import { Spinner } from '@heroui/spinner'
-import { useRequest } from 'ahooks'
-import path from 'path-browserify'
-import { useEffect } from 'react'
+import { Button } from '@heroui/button';
+import { Image } from '@heroui/image';
+import { Spinner } from '@heroui/spinner';
+import { useRequest } from 'ahooks';
+import path from 'path-browserify';
+import { useEffect } from 'react';
 
-import FileManager from '@/controllers/file_manager'
+import 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"
-      className="text-left justify-start"
+      variant='light'
+      className='text-left justify-start'
       onPress={onPreview}
       startContent={
-        error ? (
-          <FileIcon name={name} isDirectory={false} />
-        ) : loading || !data ? (
-          <Spinner size="sm" />
-        ) : (
-          <Image
-            src={data}
-            alt={name}
-            className="w-8 h-8 flex-shrink-0"
-            classNames={{
-              wrapper: 'w-8 h-8 flex-shrink-0'
-            }}
-            radius="sm"
-          />
-        )
+        error
+          ? (
+            <FileIcon name={name} isDirectory={false} />
+          )
+          : loading || !data
+            ? (
+              <Spinner size='sm' />
+            )
+            : (
+              <Image
+                src={data}
+                alt={name}
+                className='w-8 h-8 flex-shrink-0'
+                classNames={{
+                  wrapper: 'w-8 h-8 flex-shrink-0',
+                }}
+                radius='sm'
+              />
+            )
       }
     >
       {name}
     </Button>
-  )
+  );
 }
diff --git a/napcat.webui/src/components/file_manage/move_modal.tsx b/napcat.webui/src/components/file_manage/move_modal.tsx
index ab7a631a..1a424c66 100644
--- a/napcat.webui/src/components/file_manage/move_modal.tsx
+++ b/napcat.webui/src/components/file_manage/move_modal.tsx
@@ -1,18 +1,18 @@
-import { Button } from '@heroui/button'
+import { Button } from '@heroui/button';
 import {
   Modal,
   ModalBody,
   ModalContent,
   ModalFooter,
-  ModalHeader
-} from '@heroui/modal'
-import { Spinner } from '@heroui/spinner'
-import clsx from 'clsx'
-import path from 'path-browserify'
-import { useState } from 'react'
-import { IoAdd, IoRemove } from 'react-icons/io5'
+  ModalHeader,
+} from '@heroui/modal';
+import { Spinner } from '@heroui/spinner';
+import clsx from 'clsx';
+import path from 'path-browserify';
+import { useState } from 'react';
+import { IoAdd, IoRemove } from 'react-icons/io5';
 
-import FileManager from '@/controllers/file_manager'
+import FileManager from '@/controllers/file_manager';
 
 interface MoveModalProps {
   isOpen: boolean
@@ -25,68 +25,68 @@ interface MoveModalProps {
 
 // 将 DirectoryTree 改为递归组件
 // 新增 selectedPath 属性，用于标识当前选中的目录
-function DirectoryTree({
+function DirectoryTree ({
   basePath,
   onSelect,
-  selectedPath
+  selectedPath,
 }: {
   basePath: string
   onSelect: (dir: string) => void
   selectedPath?: string
 }) {
-  const [dirs, setDirs] = useState<string[]>([])
-  const [expanded, setExpanded] = useState(false)
+  const [dirs, setDirs] = useState<string[]>([]);
+  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)
-      setDirs(list.map((item) => item.name))
+      const list = await FileManager.listDirectories(basePath);
+      setDirs(list.map((item) => item.name));
     } catch (error) {
       // ...error handling...
     }
-  }
+  };
 
   const handleToggle = async () => {
     if (!expanded) {
-      setExpanded(true)
-      setLoading(true)
-      await fetchDirectories()
-      setLoading(false)
+      setExpanded(true);
+      setLoading(true);
+      await fetchDirectories();
+      setLoading(false);
     } else {
-      setExpanded(false)
+      setExpanded(false);
     }
-  }
+  };
 
   const handleClick = () => {
-    onSelect(basePath)
-    handleToggle()
-  }
+    onSelect(basePath);
+    handleToggle();
+  };
 
   // 计算显示的名称
   const getDisplayName = () => {
-    if (basePath === '/') return '/'
-    if (/^[A-Z]:$/i.test(basePath)) return basePath
-    return path.basename(basePath)
-  }
+    if (basePath === '/') return '/';
+    if (/^[A-Z]:$/i.test(basePath)) return 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"
-        size="sm"
-        color="primary"
+        className='py-1 px-2 text-left justify-start min-w-0 min-h-0 h-auto text-sm rounded-md'
+        size='sm'
+        color='primary'
         variant={variant}
         startContent={
           <div
@@ -103,66 +103,68 @@ function DirectoryTree({
       </Button>
       {expanded && (
         <div>
-          {loading ? (
-            <div className="flex py-1 px-8">
-              <Spinner size="sm" color="primary" />
-            </div>
-          ) : (
-            dirs.map((dirName) => {
-              const childPath =
+          {loading
+            ? (
+              <div className='flex py-1 px-8'>
+                <Spinner size='sm' color='primary' />
+              </div>
+            )
+            : (
+              dirs.map((dirName) => {
+                const childPath =
                 basePath === '/' && /^[A-Z]:$/i.test(dirName)
                   ? dirName
-                  : path.join(basePath, dirName)
-              return (
-                <DirectoryTree
-                  key={childPath}
-                  basePath={childPath}
-                  onSelect={onSelect}
-                  selectedPath={selectedPath}
-                />
-              )
-            })
-          )}
+                  : path.join(basePath, dirName);
+                return (
+                  <DirectoryTree
+                    key={childPath}
+                    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>
-  )
+  );
 }
diff --git a/napcat.webui/src/components/file_manage/rename_modal.tsx b/napcat.webui/src/components/file_manage/rename_modal.tsx
index 0ddf1dde..5d74aabc 100644
--- a/napcat.webui/src/components/file_manage/rename_modal.tsx
+++ b/napcat.webui/src/components/file_manage/rename_modal.tsx
@@ -1,12 +1,12 @@
-import { Button } from '@heroui/button'
-import { Input } from '@heroui/input'
+import { Button } from '@heroui/button';
+import { Input } from '@heroui/input';
 import {
   Modal,
   ModalBody,
   ModalContent,
   ModalFooter,
-  ModalHeader
-} from '@heroui/modal'
+  ModalHeader,
+} from '@heroui/modal';
 
 interface RenameModalProps {
   isOpen: boolean
@@ -16,29 +16,29 @@ interface RenameModalProps {
   onRename: () => void
 }
 
-export default function RenameModal({
+export default function RenameModal ({
   isOpen,
   newFileName,
   onNameChange,
   onClose,
-  onRename
+  onRename,
 }: RenameModalProps) {
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
       <ModalContent>
         <ModalHeader>重命名</ModalHeader>
         <ModalBody>
-          <Input label="新名称" value={newFileName} onChange={onNameChange} />
+          <Input label='新名称' value={newFileName} onChange={onNameChange} />
         </ModalBody>
         <ModalFooter>
-          <Button color="primary" variant="flat" onPress={onClose}>
+          <Button color='primary' variant='flat' onPress={onClose}>
             取消
           </Button>
-          <Button color="primary" onPress={onRename}>
+          <Button color='primary' onPress={onRename}>
             确定
           </Button>
         </ModalFooter>
       </ModalContent>
     </Modal>
-  )
+  );
 }
diff --git a/napcat.webui/src/components/github_info/icon_wrapper.tsx b/napcat.webui/src/components/github_info/icon_wrapper.tsx
index 2b5652bc..4ed35df9 100644
--- a/napcat.webui/src/components/github_info/icon_wrapper.tsx
+++ b/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;
diff --git a/napcat.webui/src/components/github_info/item_counter.tsx b/napcat.webui/src/components/github_info/item_counter.tsx
index bde66e44..33b9676f 100644
--- a/napcat.webui/src/components/github_info/item_counter.tsx
+++ b/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">
-    <span className="text-small">{number}</span>
-    <ChevronRightIcon className="text-xl" />
+  <div className='flex items-center gap-1 text-default-400'>
+    <span className='text-small'>{number}</span>
+    <ChevronRightIcon className='text-xl' />
   </div>
-)
+);
 
-export default ItemCounter
+export default ItemCounter;
diff --git a/napcat.webui/src/components/github_info/release.tsx b/napcat.webui/src/components/github_info/release.tsx
index 5c1a41a5..4c63a255 100644
--- a/napcat.webui/src/components/github_info/release.tsx
+++ b/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 [releaseTime, setReleaseTime] = useState<string | null>(null)
+  const { releaseData } = props;
+  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)
-      }, 1000)
+        setReleaseTime(time);
+      }, 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">
-        <span className="text-tiny text-default-600">{releaseData.name}</span>
-        <div className="flex gap-2 text-tiny">
-          <span className="text-default-500">{releaseTime}</span>
-          <span className="text-success">Latest</span>
+      <div className='px-2 py-1 rounded-small bg-default-100 bg-opacity-50 backdrop-blur-sm group-data-[hover=true]:bg-default-200'>
+        <span className='text-tiny text-default-600'>{releaseData.name}</span>
+        <div className='flex gap-2 text-tiny'>
+          <span className='text-default-500'>{releaseTime}</span>
+          <span className='text-success'>Latest</span>
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default GithubRelease
+export default GithubRelease;
diff --git a/napcat.webui/src/components/hitokoto.tsx b/napcat.webui/src/components/hitokoto.tsx
index e31c77d7..ef7f0b4f 100644
--- a/napcat.webui/src/components/hitokoto.tsx
+++ b/napcat.webui/src/components/hitokoto.tsx
@@ -1,76 +1,78 @@
-import { Button } from '@heroui/button'
-import { Tooltip } from '@heroui/tooltip'
-import { useRequest } from 'ahooks'
-import toast from 'react-hot-toast'
-import { IoCopy, IoRefresh } from 'react-icons/io5'
+import { Button } from '@heroui/button';
+import { Tooltip } from '@heroui/tooltip';
+import { useRequest } from 'ahooks';
+import toast from 'react-hot-toast';
+import { IoCopy, IoRefresh } from 'react-icons/io5';
 
-import { request } from '@/utils/request'
+import { 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
-  })
-  const data = dataOri?.data
+    throttleWait: 1000,
+  });
+  const data = dataOri?.data;
   const onCopy = () => {
     try {
-      const text = `${data?.hitokoto} —— ${data?.from} ${data?.from_who}`
-      navigator.clipboard.writeText(text)
-      toast.success('复制成功')
+      const text = `${data?.hitokoto} —— ${data?.from} ${data?.from_who}`;
+      navigator.clipboard.writeText(text);
+      toast.success('复制成功');
     } catch (error) {
-      toast.error('复制失败, 请手动复制')
+      toast.error('复制失败, 请手动复制');
     }
-  }
+  };
   return (
     <div>
-      <div className="relative">
+      <div className='relative'>
         {loading && <PageLoading />}
-        {error ? (
-          <div className="text-primary-400">一言加载失败：{error.message}</div>
-        ) : (
-          <>
-            <div>{data?.hitokoto}</div>
-            <div className="text-right">
-              —— <span className="text-default-400">{data?.from}</span>{' '}
-              {data?.from_who}
-            </div>
-          </>
-        )}
+        {error
+          ? (
+            <div className='text-primary-400'>一言加载失败：{error.message}</div>
+          )
+          : (
+            <>
+              <div>{data?.hitokoto}</div>
+              <div className='text-right'>
+                —— <span className='text-default-400'>{data?.from}</span>{' '}
+                {data?.from_who}
+              </div>
+            </>
+          )}
       </div>
-      <div className="flex gap-2">
-        <Tooltip content="刷新" placement="top">
+      <div className='flex gap-2'>
+        <Tooltip content='刷新' placement='top'>
           <Button
             onPress={run}
-            size="sm"
+            size='sm'
             isLoading={loading}
             isIconOnly
-            radius="full"
-            color="primary"
-            variant="flat"
+            radius='full'
+            color='primary'
+            variant='flat'
           >
             <IoRefresh />
           </Button>
         </Tooltip>
-        <Tooltip content="复制" placement="top">
+        <Tooltip content='复制' placement='top'>
           <Button
             onPress={onCopy}
-            size="sm"
+            size='sm'
             isIconOnly
-            radius="full"
-            color="success"
-            variant="flat"
+            radius='full'
+            color='success'
+            variant='flat'
           >
             <IoCopy />
           </Button>
         </Tooltip>
       </div>
     </div>
-  )
+  );
 }
diff --git a/napcat.webui/src/components/hover_titled_card.tsx b/napcat.webui/src/components/hover_titled_card.tsx
index 9f875a9e..a8e24b4a 100644
--- a/napcat.webui/src/components/hover_titled_card.tsx
+++ b/napcat.webui/src/components/hover_titled_card.tsx
@@ -1,11 +1,11 @@
-import { motion, useMotionValue, useSpring } from 'motion/react'
-import { useRef, useState } from 'react'
+import { motion, useMotionValue, useSpring } from 'motion/react';
+import { useRef, useState } from 'react';
 
 const springValues = {
   damping: 30,
   stiffness: 100,
-  mass: 2
-}
+  mass: 2,
+};
 
 export interface HoverTiltedCardProps {
   imageSrc: string
@@ -22,7 +22,7 @@ export interface HoverTiltedCardProps {
   displayOverlayContent?: boolean
 }
 
-export default function HoverTiltedCard({
+export default function HoverTiltedCard ({
   imageSrc,
   altText = 'NapCat',
   captionText = 'NapCat',
@@ -34,95 +34,95 @@ export default function HoverTiltedCard({
   rotateAmplitude = 14,
   showTooltip = false,
   overlayContent = (
-    <div className="text-center mt-6 px-4 py-0.5 shadow-lg rounded-full bg-primary-600 text-default-100 bg-opacity-80">
+    <div className='text-center mt-6 px-4 py-0.5 shadow-lg rounded-full bg-primary-600 text-default-100 bg-opacity-80'>
       NapCat
     </div>
   ),
-  displayOverlayContent = true
+  displayOverlayContent = true,
 }: HoverTiltedCardProps) {
-  const ref = useRef<HTMLDivElement>(null)
-  const x = useMotionValue(0)
-  const y = useMotionValue(0)
-  const rotateX = useSpring(useMotionValue(0), springValues)
-  const rotateY = useSpring(useMotionValue(0), springValues)
-  const scale = useSpring(1, springValues)
-  const opacity = useSpring(0)
+  const ref = useRef<HTMLDivElement>(null);
+  const x = useMotionValue(0);
+  const y = useMotionValue(0);
+  const rotateX = useSpring(useMotionValue(0), springValues);
+  const rotateY = useSpring(useMotionValue(0), springValues);
+  const scale = useSpring(1, springValues);
+  const opacity = useSpring(0);
   const rotateFigcaption = useSpring(0, {
     stiffness: 350,
     damping: 30,
-    mass: 1
-  })
+    mass: 1,
+  });
 
-  const [lastY, setLastY] = useState(0)
+  const [lastY, setLastY] = useState(0);
 
-  function handleMouse(e: React.MouseEvent) {
-    if (!ref.current) return
+  function handleMouse (e: React.MouseEvent) {
+    if (!ref.current) return;
 
-    const rect = ref.current.getBoundingClientRect()
-    const offsetX = e.clientX - rect.left - rect.width / 2
-    const offsetY = e.clientY - rect.top - rect.height / 2
+    const rect = ref.current.getBoundingClientRect();
+    const offsetX = e.clientX - rect.left - rect.width / 2;
+    const offsetY = e.clientY - rect.top - rect.height / 2;
 
-    const rotationX = (offsetY / (rect.height / 2)) * -rotateAmplitude
-    const rotationY = (offsetX / (rect.width / 2)) * rotateAmplitude
+    const rotationX = (offsetY / (rect.height / 2)) * -rotateAmplitude;
+    const rotationY = (offsetX / (rect.width / 2)) * rotateAmplitude;
 
-    rotateX.set(rotationX)
-    rotateY.set(rotationY)
+    rotateX.set(rotationX);
+    rotateY.set(rotationY);
 
-    x.set(e.clientX - rect.left)
-    y.set(e.clientY - rect.top)
+    x.set(e.clientX - rect.left);
+    y.set(e.clientY - rect.top);
 
-    const velocityY = offsetY - lastY
-    rotateFigcaption.set(-velocityY * 0.6)
-    setLastY(offsetY)
+    const velocityY = offsetY - lastY;
+    rotateFigcaption.set(-velocityY * 0.6);
+    setLastY(offsetY);
   }
 
-  function handleMouseEnter() {
-    scale.set(scaleOnHover)
-    opacity.set(1)
+  function handleMouseEnter () {
+    scale.set(scaleOnHover);
+    opacity.set(1);
   }
 
-  function handleMouseLeave() {
-    opacity.set(0)
-    scale.set(1)
-    rotateX.set(0)
-    rotateY.set(0)
-    rotateFigcaption.set(0)
+  function handleMouseLeave () {
+    opacity.set(0);
+    scale.set(1);
+    rotateX.set(0);
+    rotateY.set(0);
+    rotateFigcaption.set(0);
   }
 
   return (
     <figure
       ref={ref}
-      className="relative w-full h-full [perspective:800px] flex flex-col items-center justify-center"
+      className='relative w-full h-full [perspective:800px] flex flex-col items-center justify-center'
       style={{
         height: containerHeight,
-        width: containerWidth
+        width: containerWidth,
       }}
       onMouseMove={handleMouse}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
     >
       <motion.div
-        className="relative [transform-style:preserve-3d]"
+        className='relative [transform-style:preserve-3d]'
         style={{
           width: imageWidth,
           height: imageHeight,
           rotateX,
           rotateY,
-          scale
+          scale,
         }}
       >
         <motion.img
           src={imageSrc}
           alt={altText}
-          className="absolute top-0 left-0 object-cover rounded-md will-change-transform [transform:translateZ(0)] pointer-events-none select-none"
+          className='absolute top-0 left-0 object-cover rounded-md will-change-transform [transform:translateZ(0)] pointer-events-none select-none'
           style={{
             width: imageWidth,
-            height: imageHeight
+            height: imageHeight,
           }}
         />
 
         {displayOverlayContent && overlayContent && (
-          <motion.div className="absolute top-0 left-0 right-0 z-10 flex justify-center will-change-transform [transform:translateZ(30px)]">
+          <motion.div className='absolute top-0 left-0 right-0 z-10 flex justify-center will-change-transform [transform:translateZ(30px)]'>
             {overlayContent}
           </motion.div>
         )}
@@ -130,17 +130,17 @@ export default function HoverTiltedCard({
 
       {showTooltip && (
         <motion.figcaption
-          className="pointer-events-none absolute left-0 top-0 rounded-md bg-white px-2 py-1 text-sm text-default-900 opacity-0 z-10 hidden sm:block"
+          className='pointer-events-none absolute left-0 top-0 rounded-md bg-white px-2 py-1 text-sm text-default-900 opacity-0 z-10 hidden sm:block'
           style={{
             x,
             y,
             opacity,
-            rotate: rotateFigcaption
+            rotate: rotateFigcaption,
           }}
         >
           {captionText}
         </motion.figcaption>
       )}
     </figure>
-  )
+  );
 }
diff --git a/napcat.webui/src/components/icons.tsx b/napcat.webui/src/components/icons.tsx
index bea77422..6fc82da4 100644
--- a/napcat.webui/src/components/icons.tsx
+++ b/napcat.webui/src/components/icons.tsx
@@ -1,7 +1,7 @@
-import * as React from 'react'
+import * as React from 'react';
 
-import logo from '@/assets/images/logo.png'
-import { IconImageProps, IconSvgProps } from '@/types'
+import logo from '@/assets/images/logo.png';
+import { IconImageProps, IconSvgProps } from '@/types';
 
 export const Logo: React.FC<IconImageProps> = ({
   size = 36,
@@ -23,13 +23,13 @@ export const Logo: React.FC<IconImageProps> = ({
   //   />
   // </svg>
   <img
-    alt="Napcat"
+    alt='Napcat'
     height={size || height}
     src={logo}
     width={size || height}
     {...props}
   />
-)
+);
 
 export const DiscordIcon: React.FC<IconSvgProps> = ({
   size = 24,
@@ -40,17 +40,17 @@ export const DiscordIcon: React.FC<IconSvgProps> = ({
   return (
     <svg
       height={size || height}
-      viewBox="0 0 24 24"
+      viewBox='0 0 24 24'
       width={size || width}
       {...props}
     >
       <path
-        d="M14.82 4.26a10.14 10.14 0 0 0-.53 1.1 14.66 14.66 0 0 0-4.58 0 10.14 10.14 0 0 0-.53-1.1 16 16 0 0 0-4.13 1.3 17.33 17.33 0 0 0-3 11.59 16.6 16.6 0 0 0 5.07 2.59A12.89 12.89 0 0 0 8.23 18a9.65 9.65 0 0 1-1.71-.83 3.39 3.39 0 0 0 .42-.33 11.66 11.66 0 0 0 10.12 0q.21.18.42.33a10.84 10.84 0 0 1-1.71.84 12.41 12.41 0 0 0 1.08 1.78 16.44 16.44 0 0 0 5.06-2.59 17.22 17.22 0 0 0-3-11.59 16.09 16.09 0 0 0-4.09-1.35zM8.68 14.81a1.94 1.94 0 0 1-1.8-2 1.93 1.93 0 0 1 1.8-2 1.93 1.93 0 0 1 1.8 2 1.93 1.93 0 0 1-1.8 2zm6.64 0a1.94 1.94 0 0 1-1.8-2 1.93 1.93 0 0 1 1.8-2 1.92 1.92 0 0 1 1.8 2 1.92 1.92 0 0 1-1.8 2z"
-        fill="currentColor"
+        d='M14.82 4.26a10.14 10.14 0 0 0-.53 1.1 14.66 14.66 0 0 0-4.58 0 10.14 10.14 0 0 0-.53-1.1 16 16 0 0 0-4.13 1.3 17.33 17.33 0 0 0-3 11.59 16.6 16.6 0 0 0 5.07 2.59A12.89 12.89 0 0 0 8.23 18a9.65 9.65 0 0 1-1.71-.83 3.39 3.39 0 0 0 .42-.33 11.66 11.66 0 0 0 10.12 0q.21.18.42.33a10.84 10.84 0 0 1-1.71.84 12.41 12.41 0 0 0 1.08 1.78 16.44 16.44 0 0 0 5.06-2.59 17.22 17.22 0 0 0-3-11.59 16.09 16.09 0 0 0-4.09-1.35zM8.68 14.81a1.94 1.94 0 0 1-1.8-2 1.93 1.93 0 0 1 1.8-2 1.93 1.93 0 0 1 1.8 2 1.93 1.93 0 0 1-1.8 2zm6.64 0a1.94 1.94 0 0 1-1.8-2 1.93 1.93 0 0 1 1.8-2 1.92 1.92 0 0 1 1.8 2 1.92 1.92 0 0 1-1.8 2z'
+        fill='currentColor'
       />
     </svg>
-  )
-}
+  );
+};
 
 export const TwitterIcon: React.FC<IconSvgProps> = ({
   size = 24,
@@ -61,17 +61,17 @@ export const TwitterIcon: React.FC<IconSvgProps> = ({
   return (
     <svg
       height={size || height}
-      viewBox="0 0 24 24"
+      viewBox='0 0 24 24'
       width={size || width}
       {...props}
     >
       <path
-        d="M19.633 7.997c.013.175.013.349.013.523 0 5.325-4.053 11.461-11.46 11.461-2.282 0-4.402-.661-6.186-1.809.324.037.636.05.973.05a8.07 8.07 0 0 0 5.001-1.721 4.036 4.036 0 0 1-3.767-2.793c.249.037.499.062.761.062.361 0 .724-.05 1.061-.137a4.027 4.027 0 0 1-3.23-3.953v-.05c.537.299 1.16.486 1.82.511a4.022 4.022 0 0 1-1.796-3.354c0-.748.199-1.434.548-2.032a11.457 11.457 0 0 0 8.306 4.215c-.062-.3-.1-.611-.1-.923a4.026 4.026 0 0 1 4.028-4.028c1.16 0 2.207.486 2.943 1.272a7.957 7.957 0 0 0 2.556-.973 4.02 4.02 0 0 1-1.771 2.22 8.073 8.073 0 0 0 2.319-.624 8.645 8.645 0 0 1-2.019 2.083z"
-        fill="currentColor"
+        d='M19.633 7.997c.013.175.013.349.013.523 0 5.325-4.053 11.461-11.46 11.461-2.282 0-4.402-.661-6.186-1.809.324.037.636.05.973.05a8.07 8.07 0 0 0 5.001-1.721 4.036 4.036 0 0 1-3.767-2.793c.249.037.499.062.761.062.361 0 .724-.05 1.061-.137a4.027 4.027 0 0 1-3.23-3.953v-.05c.537.299 1.16.486 1.82.511a4.022 4.022 0 0 1-1.796-3.354c0-.748.199-1.434.548-2.032a11.457 11.457 0 0 0 8.306 4.215c-.062-.3-.1-.611-.1-.923a4.026 4.026 0 0 1 4.028-4.028c1.16 0 2.207.486 2.943 1.272a7.957 7.957 0 0 0 2.556-.973 4.02 4.02 0 0 1-1.771 2.22 8.073 8.073 0 0 0 2.319-.624 8.645 8.645 0 0 1-2.019 2.083z'
+        fill='currentColor'
       />
     </svg>
-  )
-}
+  );
+};
 
 export const GithubIcon: React.FC<IconSvgProps> = ({
   size = 24,
@@ -82,19 +82,19 @@ export const GithubIcon: React.FC<IconSvgProps> = ({
   return (
     <svg
       height={size || height}
-      viewBox="0 0 24 24"
+      viewBox='0 0 24 24'
       width={size || width}
       {...props}
     >
       <path
-        clipRule="evenodd"
-        d="M12.026 2c-5.509 0-9.974 4.465-9.974 9.974 0 4.406 2.857 8.145 6.821 9.465.499.09.679-.217.679-.481 0-.237-.008-.865-.011-1.696-2.775.602-3.361-1.338-3.361-1.338-.452-1.152-1.107-1.459-1.107-1.459-.905-.619.069-.605.069-.605 1.002.07 1.527 1.028 1.527 1.028.89 1.524 2.336 1.084 2.902.829.091-.645.351-1.085.635-1.334-2.214-.251-4.542-1.107-4.542-4.93 0-1.087.389-1.979 1.024-2.675-.101-.253-.446-1.268.099-2.64 0 0 .837-.269 2.742 1.021a9.582 9.582 0 0 1 2.496-.336 9.554 9.554 0 0 1 2.496.336c1.906-1.291 2.742-1.021 2.742-1.021.545 1.372.203 2.387.099 2.64.64.696 1.024 1.587 1.024 2.675 0 3.833-2.33 4.675-4.552 4.922.355.308.675.916.675 1.846 0 1.334-.012 2.41-.012 2.737 0 .267.178.577.687.479C19.146 20.115 22 16.379 22 11.974 22 6.465 17.535 2 12.026 2z"
-        fill="currentColor"
-        fillRule="evenodd"
+        clipRule='evenodd'
+        d='M12.026 2c-5.509 0-9.974 4.465-9.974 9.974 0 4.406 2.857 8.145 6.821 9.465.499.09.679-.217.679-.481 0-.237-.008-.865-.011-1.696-2.775.602-3.361-1.338-3.361-1.338-.452-1.152-1.107-1.459-1.107-1.459-.905-.619.069-.605.069-.605 1.002.07 1.527 1.028 1.527 1.028.89 1.524 2.336 1.084 2.902.829.091-.645.351-1.085.635-1.334-2.214-.251-4.542-1.107-4.542-4.93 0-1.087.389-1.979 1.024-2.675-.101-.253-.446-1.268.099-2.64 0 0 .837-.269 2.742 1.021a9.582 9.582 0 0 1 2.496-.336 9.554 9.554 0 0 1 2.496.336c1.906-1.291 2.742-1.021 2.742-1.021.545 1.372.203 2.387.099 2.64.64.696 1.024 1.587 1.024 2.675 0 3.833-2.33 4.675-4.552 4.922.355.308.675.916.675 1.846 0 1.334-.012 2.41-.012 2.737 0 .267.178.577.687.479C19.146 20.115 22 16.379 22 11.974 22 6.465 17.535 2 12.026 2z'
+        fill='currentColor'
+        fillRule='evenodd'
       />
     </svg>
-  )
-}
+  );
+};
 
 export const MoonFilledIcon = ({
   size = 24,
@@ -103,20 +103,20 @@ export const MoonFilledIcon = ({
   ...props
 }: IconSvgProps) => (
   <svg
-    aria-hidden="true"
-    focusable="false"
+    aria-hidden='true'
+    focusable='false'
     height={size || height}
-    role="presentation"
-    viewBox="0 0 24 24"
+    role='presentation'
+    viewBox='0 0 24 24'
     width={size || width}
     {...props}
   >
     <path
-      d="M21.53 15.93c-.16-.27-.61-.69-1.73-.49a8.46 8.46 0 01-1.88.13 8.409 8.409 0 01-5.91-2.82 8.068 8.068 0 01-1.44-8.66c.44-1.01.13-1.54-.09-1.76s-.77-.55-1.83-.11a10.318 10.318 0 00-6.32 10.21 10.475 10.475 0 007.04 8.99 10 10 0 002.89.55c.16.01.32.02.48.02a10.5 10.5 0 008.47-4.27c.67-.93.49-1.519.32-1.79z"
-      fill="currentColor"
+      d='M21.53 15.93c-.16-.27-.61-.69-1.73-.49a8.46 8.46 0 01-1.88.13 8.409 8.409 0 01-5.91-2.82 8.068 8.068 0 01-1.44-8.66c.44-1.01.13-1.54-.09-1.76s-.77-.55-1.83-.11a10.318 10.318 0 00-6.32 10.21 10.475 10.475 0 007.04 8.99 10 10 0 002.89.55c.16.01.32.02.48.02a10.5 10.5 0 008.47-4.27c.67-.93.49-1.519.32-1.79z'
+      fill='currentColor'
     />
   </svg>
-)
+);
 
 export const SunFilledIcon = ({
   size = 24,
@@ -125,20 +125,20 @@ export const SunFilledIcon = ({
   ...props
 }: IconSvgProps) => (
   <svg
-    aria-hidden="true"
-    focusable="false"
+    aria-hidden='true'
+    focusable='false'
     height={size || height}
-    role="presentation"
-    viewBox="0 0 24 24"
+    role='presentation'
+    viewBox='0 0 24 24'
     width={size || width}
     {...props}
   >
-    <g fill="currentColor">
-      <path d="M19 12a7 7 0 11-7-7 7 7 0 017 7z" />
-      <path d="M12 22.96a.969.969 0 01-1-.96v-.08a1 1 0 012 0 1.038 1.038 0 01-1 1.04zm7.14-2.82a1.024 1.024 0 01-.71-.29l-.13-.13a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.984.984 0 01-.7.29zm-14.28 0a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a1 1 0 01-.7.29zM22 13h-.08a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zM2.08 13H2a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zm16.93-7.01a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a.984.984 0 01-.7.29zm-14.02 0a1.024 1.024 0 01-.71-.29l-.13-.14a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.97.97 0 01-.7.3zM12 3.04a.969.969 0 01-1-.96V2a1 1 0 012 0 1.038 1.038 0 01-1 1.04z" />
+    <g fill='currentColor'>
+      <path d='M19 12a7 7 0 11-7-7 7 7 0 017 7z' />
+      <path d='M12 22.96a.969.969 0 01-1-.96v-.08a1 1 0 012 0 1.038 1.038 0 01-1 1.04zm7.14-2.82a1.024 1.024 0 01-.71-.29l-.13-.13a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.984.984 0 01-.7.29zm-14.28 0a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a1 1 0 01-.7.29zM22 13h-.08a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zM2.08 13H2a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zm16.93-7.01a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a.984.984 0 01-.7.29zm-14.02 0a1.024 1.024 0 01-.71-.29l-.13-.14a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.97.97 0 01-.7.3zM12 3.04a.969.969 0 01-1-.96V2a1 1 0 012 0 1.038 1.038 0 01-1 1.04z' />
     </g>
   </svg>
-)
+);
 
 export const HeartFilledIcon = ({
   size = 24,
@@ -147,1821 +147,1821 @@ export const HeartFilledIcon = ({
   ...props
 }: IconSvgProps) => (
   <svg
-    aria-hidden="true"
-    focusable="false"
+    aria-hidden='true'
+    focusable='false'
     height={size || height}
-    role="presentation"
-    viewBox="0 0 24 24"
+    role='presentation'
+    viewBox='0 0 24 24'
     width={size || width}
     {...props}
   >
     <path
-      d="M12.62 20.81c-.34.12-.9.12-1.24 0C8.48 19.82 2 15.69 2 8.69 2 5.6 4.49 3.1 7.56 3.1c1.82 0 3.43.88 4.44 2.24a5.53 5.53 0 0 1 4.44-2.24C19.51 3.1 22 5.6 22 8.69c0 7-6.48 11.13-9.38 12.12Z"
-      fill="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      d='M12.62 20.81c-.34.12-.9.12-1.24 0C8.48 19.82 2 15.69 2 8.69 2 5.6 4.49 3.1 7.56 3.1c1.82 0 3.43.88 4.44 2.24a5.53 5.53 0 0 1 4.44-2.24C19.51 3.1 22 5.6 22 8.69c0 7-6.48 11.13-9.38 12.12Z'
+      fill='currentColor'
+      strokeLinecap='round'
+      strokeLinejoin='round'
       strokeWidth={1.5}
     />
   </svg>
-)
+);
 
 export const SearchIcon = (props: IconSvgProps) => (
   <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
+    aria-hidden='true'
+    fill='none'
+    focusable='false'
+    height='1em'
+    role='presentation'
+    viewBox='0 0 24 24'
+    width='1em'
     {...props}
   >
     <path
-      d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
+      d='M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z'
+      stroke='currentColor'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      strokeWidth='2'
     />
     <path
-      d="M22 22L20 20"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
+      d='M22 22L20 20'
+      stroke='currentColor'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      strokeWidth='2'
     />
   </svg>
-)
+);
 
 export const NextUILogo: React.FC<IconSvgProps> = (props) => {
-  const { width, height = 40 } = props
+  const { width, height = 40 } = props;
 
   return (
     <svg
-      fill="none"
+      fill='none'
       height={height}
-      viewBox="0 0 161 32"
+      viewBox='0 0 161 32'
       width={width}
-      xmlns="http://www.w3.org/2000/svg"
+      xmlns='http://www.w3.org/2000/svg'
       {...props}
     >
       <path
-        className="fill-black dark:fill-white"
-        d="M55.6827 5V26.6275H53.7794L41.1235 8.51665H40.9563V26.6275H39V5H40.89L53.5911 23.1323H53.7555V5H55.6827ZM67.4831 26.9663C66.1109 27.0019 64.7581 26.6329 63.5903 25.9044C62.4852 25.185 61.6054 24.1633 61.0537 22.9582C60.4354 21.5961 60.1298 20.1106 60.1598 18.6126C60.132 17.1113 60.4375 15.6228 61.0537 14.2563C61.5954 13.0511 62.4525 12.0179 63.5326 11.268C64.6166 10.5379 65.8958 10.16 67.1986 10.1852C68.0611 10.1837 68.9162 10.3468 69.7187 10.666C70.5398 10.9946 71.2829 11.4948 71.8992 12.1337C72.5764 12.8435 73.0985 13.6889 73.4318 14.6152C73.8311 15.7483 74.0226 16.9455 73.9968 18.1479V19.0773H63.2262V17.4194H72.0935C72.1083 16.4456 71.8952 15.4821 71.4714 14.6072C71.083 13.803 70.4874 13.1191 69.7472 12.6272C68.9887 12.1348 68.1022 11.8812 67.2006 11.8987C66.2411 11.8807 65.3005 12.1689 64.5128 12.7223C63.7332 13.2783 63.1083 14.0275 62.6984 14.8978C62.2582 15.8199 62.0314 16.831 62.0352 17.8546V18.8476C62.009 20.0078 62.2354 21.1595 62.6984 22.2217C63.1005 23.1349 63.7564 23.9108 64.5864 24.4554C65.4554 24.9973 66.4621 25.2717 67.4831 25.2448C68.1676 25.2588 68.848 25.1368 69.4859 24.8859C70.0301 24.6666 70.5242 24.3376 70.9382 23.919C71.3183 23.5345 71.6217 23.0799 71.8322 22.5799L73.5995 23.1604C73.3388 23.8697 72.9304 24.5143 72.4019 25.0506C71.8132 25.6529 71.1086 26.1269 70.3314 26.4434C69.4258 26.8068 68.4575 26.9846 67.4831 26.9663V26.9663ZM78.8233 10.4075L82.9655 17.325L87.1076 10.4075H89.2683L84.1008 18.5175L89.2683 26.6275H87.103L82.9608 19.9317L78.8193 26.6275H76.6647L81.7711 18.5169L76.6647 10.4062L78.8233 10.4075ZM99.5142 10.4075V12.0447H91.8413V10.4075H99.5142ZM94.2427 6.52397H96.1148V22.3931C96.086 22.9446 96.2051 23.4938 96.4597 23.9827C96.6652 24.344 96.9805 24.629 97.3589 24.7955C97.7328 24.9548 98.1349 25.0357 98.5407 25.0332C98.7508 25.0359 98.9607 25.02 99.168 24.9857C99.3422 24.954 99.4956 24.9205 99.6283 24.8853L100.026 26.5853C99.8062 26.6672 99.5805 26.7327 99.3511 26.7815C99.0274 26.847 98.6977 26.8771 98.3676 26.8712C97.6854 26.871 97.0119 26.7156 96.3973 26.4166C95.7683 26.1156 95.2317 25.6485 94.8442 25.0647C94.4214 24.4018 94.2097 23.6242 94.2374 22.8363L94.2427 6.52397ZM118.398 5H120.354V19.3204C120.376 20.7052 120.022 22.0697 119.328 23.2649C118.644 24.4235 117.658 25.3698 116.477 26.0001C115.168 26.6879 113.708 27.0311 112.232 26.9978C110.759 27.029 109.302 26.6835 107.996 25.9934C106.815 25.362 105.827 24.4161 105.141 23.2582C104.447 22.0651 104.092 20.7022 104.115 19.319V5H106.08V19.1831C106.061 20.2559 106.324 21.3147 106.843 22.2511C107.349 23.1459 108.094 23.8795 108.992 24.3683C109.993 24.9011 111.111 25.1664 112.242 25.139C113.373 25.1656 114.493 24.9003 115.495 24.3683C116.395 23.8815 117.14 23.1475 117.644 22.2511C118.16 21.3136 118.421 20.2553 118.402 19.1831L118.398 5ZM128 5V26.6275H126.041V5H128Z"
+        className='fill-black dark:fill-white'
+        d='M55.6827 5V26.6275H53.7794L41.1235 8.51665H40.9563V26.6275H39V5H40.89L53.5911 23.1323H53.7555V5H55.6827ZM67.4831 26.9663C66.1109 27.0019 64.7581 26.6329 63.5903 25.9044C62.4852 25.185 61.6054 24.1633 61.0537 22.9582C60.4354 21.5961 60.1298 20.1106 60.1598 18.6126C60.132 17.1113 60.4375 15.6228 61.0537 14.2563C61.5954 13.0511 62.4525 12.0179 63.5326 11.268C64.6166 10.5379 65.8958 10.16 67.1986 10.1852C68.0611 10.1837 68.9162 10.3468 69.7187 10.666C70.5398 10.9946 71.2829 11.4948 71.8992 12.1337C72.5764 12.8435 73.0985 13.6889 73.4318 14.6152C73.8311 15.7483 74.0226 16.9455 73.9968 18.1479V19.0773H63.2262V17.4194H72.0935C72.1083 16.4456 71.8952 15.4821 71.4714 14.6072C71.083 13.803 70.4874 13.1191 69.7472 12.6272C68.9887 12.1348 68.1022 11.8812 67.2006 11.8987C66.2411 11.8807 65.3005 12.1689 64.5128 12.7223C63.7332 13.2783 63.1083 14.0275 62.6984 14.8978C62.2582 15.8199 62.0314 16.831 62.0352 17.8546V18.8476C62.009 20.0078 62.2354 21.1595 62.6984 22.2217C63.1005 23.1349 63.7564 23.9108 64.5864 24.4554C65.4554 24.9973 66.4621 25.2717 67.4831 25.2448C68.1676 25.2588 68.848 25.1368 69.4859 24.8859C70.0301 24.6666 70.5242 24.3376 70.9382 23.919C71.3183 23.5345 71.6217 23.0799 71.8322 22.5799L73.5995 23.1604C73.3388 23.8697 72.9304 24.5143 72.4019 25.0506C71.8132 25.6529 71.1086 26.1269 70.3314 26.4434C69.4258 26.8068 68.4575 26.9846 67.4831 26.9663V26.9663ZM78.8233 10.4075L82.9655 17.325L87.1076 10.4075H89.2683L84.1008 18.5175L89.2683 26.6275H87.103L82.9608 19.9317L78.8193 26.6275H76.6647L81.7711 18.5169L76.6647 10.4062L78.8233 10.4075ZM99.5142 10.4075V12.0447H91.8413V10.4075H99.5142ZM94.2427 6.52397H96.1148V22.3931C96.086 22.9446 96.2051 23.4938 96.4597 23.9827C96.6652 24.344 96.9805 24.629 97.3589 24.7955C97.7328 24.9548 98.1349 25.0357 98.5407 25.0332C98.7508 25.0359 98.9607 25.02 99.168 24.9857C99.3422 24.954 99.4956 24.9205 99.6283 24.8853L100.026 26.5853C99.8062 26.6672 99.5805 26.7327 99.3511 26.7815C99.0274 26.847 98.6977 26.8771 98.3676 26.8712C97.6854 26.871 97.0119 26.7156 96.3973 26.4166C95.7683 26.1156 95.2317 25.6485 94.8442 25.0647C94.4214 24.4018 94.2097 23.6242 94.2374 22.8363L94.2427 6.52397ZM118.398 5H120.354V19.3204C120.376 20.7052 120.022 22.0697 119.328 23.2649C118.644 24.4235 117.658 25.3698 116.477 26.0001C115.168 26.6879 113.708 27.0311 112.232 26.9978C110.759 27.029 109.302 26.6835 107.996 25.9934C106.815 25.362 105.827 24.4161 105.141 23.2582C104.447 22.0651 104.092 20.7022 104.115 19.319V5H106.08V19.1831C106.061 20.2559 106.324 21.3147 106.843 22.2511C107.349 23.1459 108.094 23.8795 108.992 24.3683C109.993 24.9011 111.111 25.1664 112.242 25.139C113.373 25.1656 114.493 24.9003 115.495 24.3683C116.395 23.8815 117.14 23.1475 117.644 22.2511C118.16 21.3136 118.421 20.2553 118.402 19.1831L118.398 5ZM128 5V26.6275H126.041V5H128Z'
       />
       <path
-        className="fill-black dark:fill-white"
-        d="M23.5294 0H8.47059C3.79241 0 0 3.79241 0 8.47059V23.5294C0 28.2076 3.79241 32 8.47059 32H23.5294C28.2076 32 32 28.2076 32 23.5294V8.47059C32 3.79241 28.2076 0 23.5294 0Z"
+        className='fill-black dark:fill-white'
+        d='M23.5294 0H8.47059C3.79241 0 0 3.79241 0 8.47059V23.5294C0 28.2076 3.79241 32 8.47059 32H23.5294C28.2076 32 32 28.2076 32 23.5294V8.47059C32 3.79241 28.2076 0 23.5294 0Z'
       />
       <path
-        className="fill-white dark:fill-black"
-        d="M17.5667 9.21729H18.8111V18.2403C18.8255 19.1128 18.6 19.9726 18.159 20.7256C17.7241 21.4555 17.0968 22.0518 16.3458 22.4491C15.5717 22.8683 14.6722 23.0779 13.6473 23.0779C12.627 23.0779 11.7286 22.8672 10.9521 22.4457C10.2007 22.0478 9.5727 21.4518 9.13602 20.7223C8.6948 19.9705 8.4692 19.1118 8.48396 18.2403V9.21729H9.72854V18.1538C9.71656 18.8298 9.88417 19.4968 10.2143 20.0868C10.5362 20.6506 11.0099 21.1129 11.5814 21.421C12.1689 21.7448 12.8576 21.9067 13.6475 21.9067C14.4374 21.9067 15.1272 21.7448 15.7169 21.421C16.2895 21.1142 16.7635 20.6516 17.0844 20.0868C17.4124 19.4961 17.5788 18.8293 17.5667 18.1538V9.21729ZM23.6753 9.21729V22.845H22.4309V9.21729H23.6753Z"
+        className='fill-white dark:fill-black'
+        d='M17.5667 9.21729H18.8111V18.2403C18.8255 19.1128 18.6 19.9726 18.159 20.7256C17.7241 21.4555 17.0968 22.0518 16.3458 22.4491C15.5717 22.8683 14.6722 23.0779 13.6473 23.0779C12.627 23.0779 11.7286 22.8672 10.9521 22.4457C10.2007 22.0478 9.5727 21.4518 9.13602 20.7223C8.6948 19.9705 8.4692 19.1118 8.48396 18.2403V9.21729H9.72854V18.1538C9.71656 18.8298 9.88417 19.4968 10.2143 20.0868C10.5362 20.6506 11.0099 21.1129 11.5814 21.421C12.1689 21.7448 12.8576 21.9067 13.6475 21.9067C14.4374 21.9067 15.1272 21.7448 15.7169 21.421C16.2895 21.1142 16.7635 20.6516 17.0844 20.0868C17.4124 19.4961 17.5788 18.8293 17.5667 18.1538V9.21729ZM23.6753 9.21729V22.845H22.4309V9.21729H23.6753Z'
       />
     </svg>
-  )
-}
+  );
+};
 
 export const RouteIcon = (props: IconSvgProps) => (
   <svg
-    fill="#000000"
-    id="Layer_1"
-    version="1.1"
-    viewBox="0 0 512.001 512.001"
-    xmlSpace="preserve"
-    xmlns="http://www.w3.org/2000/svg"
+    fill='#000000'
+    id='Layer_1'
+    version='1.1'
+    viewBox='0 0 512.001 512.001'
+    xmlSpace='preserve'
+    xmlns='http://www.w3.org/2000/svg'
     {...props}
   >
-    <g id="SVGRepo_bgCarrier" strokeWidth="0" />
+    <g id='SVGRepo_bgCarrier' strokeWidth='0' />
     <g
-      id="SVGRepo_tracerCarrier"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      id='SVGRepo_tracerCarrier'
+      strokeLinecap='round'
+      strokeLinejoin='round'
     />
-    <g id="SVGRepo_iconCarrier">
+    <g id='SVGRepo_iconCarrier'>
       <rect
-        height="250.203"
+        height='250.203'
         style={{ fill: '#FFB969' }}
-        width="85.716"
-        x="203.993"
-        y="209.443"
+        width='85.716'
+        x='203.993'
+        y='209.443'
       />
       <rect
-        height="47.627"
+        height='47.627'
         style={{
-          opacity: 0.1
+          opacity: 0.1,
         }}
-        width="85.716"
-        x="203.993"
-        y="209.443"
+        width='85.716'
+        x='203.993'
+        y='209.443'
       />
       <polygon
-        points="503.759,127.641 413.472,224.104 36.108,224.104 36.108,31.177 413.472,31.177 "
+        points='503.759,127.641 413.472,224.104 36.108,224.104 36.108,31.177 413.472,31.177 '
         style={{ fill: '#FFC17A' }}
       />
       <path
-        d="M192.161,194.777c17.474-3.12,33.484-19.622,27.849-51.187 c-5.635-31.564-28.645-53.205-45.935-50.119c-17.289,3.087-31.39,31.352-25.754,62.917 C153.956,187.953,174.687,197.896,192.161,194.777z"
+        d='M192.161,194.777c17.474-3.12,33.484-19.622,27.849-51.187 c-5.635-31.564-28.645-53.205-45.935-50.119c-17.289,3.087-31.39,31.352-25.754,62.917 C153.956,187.953,174.687,197.896,192.161,194.777z'
         style={{
-          fill: '#FFD77A'
+          fill: '#FFD77A',
         }}
       />
       <path
-        d="M294.957,194.777c-17.474-3.12-33.484-19.622-27.849-51.187s28.645-53.205,45.935-50.119 c17.289,3.087,31.39,31.352,25.754,62.917C333.162,187.953,312.431,197.896,294.957,194.777z"
+        d='M294.957,194.777c-17.474-3.12-33.484-19.622-27.849-51.187s28.645-53.205,45.935-50.119 c17.289,3.087,31.39,31.352,25.754,62.917C333.162,187.953,312.431,197.896,294.957,194.777z'
         style={{
-          fill: '#FFA0C1'
+          fill: '#FFA0C1',
         }}
       />
       <path
-        d="M243.559,196.676c17.75,0,36.412-13.432,36.412-45.495S261.122,93.77,243.559,93.77 s-36.412,25.348-36.412,57.411S225.809,196.676,243.559,196.676z"
+        d='M243.559,196.676c17.75,0,36.412-13.432,36.412-45.495S261.122,93.77,243.559,93.77 s-36.412,25.348-36.412,57.411S225.809,196.676,243.559,196.676z'
         style={{
-          fill: '#61CCFF'
+          fill: '#61CCFF',
         }}
       />
       <path
-        d="M468.901,480.823c1.578-20.514,16.57-56.019,16.57-56.019c-37.872-3.945-63.12,24.459-63.12,24.459 c3.156-16.57,22.881-55.23,22.881-55.23c-43.395-3.945-71.799,43.395-71.799,43.395c2.367-33.138,18.936-77.322,18.936-77.322 c-55.23,7.101-78.9,63.12-78.9,63.12c3.945-36.294,18.148-88.369,18.148-88.369c-75.744,13.413-84.759,97.047-84.759,97.047 s-9.014-83.635-84.759-97.047c0,0,14.202,52.075,18.148,88.369c0,0-23.67-56.019-78.9-63.12c0,0,16.57,44.184,18.936,77.322 c0,0-28.404-47.34-71.799-43.395c0,0,19.725,38.661,22.881,55.23c0,0-25.248-28.404-63.12-24.459c0,0,14.991,35.505,16.57,56.019 H468.901z"
+        d='M468.901,480.823c1.578-20.514,16.57-56.019,16.57-56.019c-37.872-3.945-63.12,24.459-63.12,24.459 c3.156-16.57,22.881-55.23,22.881-55.23c-43.395-3.945-71.799,43.395-71.799,43.395c2.367-33.138,18.936-77.322,18.936-77.322 c-55.23,7.101-78.9,63.12-78.9,63.12c3.945-36.294,18.148-88.369,18.148-88.369c-75.744,13.413-84.759,97.047-84.759,97.047 s-9.014-83.635-84.759-97.047c0,0,14.202,52.075,18.148,88.369c0,0-23.67-56.019-78.9-63.12c0,0,16.57,44.184,18.936,77.322 c0,0-28.404-47.34-71.799-43.395c0,0,19.725,38.661,22.881,55.23c0,0-25.248-28.404-63.12-24.459c0,0,14.991,35.505,16.57,56.019 H468.901z'
         style={{ fill: '#94D77F' }}
       />
-      <circle cx="243.555" cy="58.32" r="10.318" />
-      <path d="M16.593,481.455c0.331,4.295,3.911,7.61,8.218,7.61H468.9c4.307,0,7.887-3.315,8.218-7.609 c1.457-18.928,15.801-53.104,15.946-53.446c1.014-2.406,0.83-5.152-0.499-7.399s-3.643-3.733-6.241-4.004 c-2.678-0.278-5.392-0.42-8.068-0.42c-15.606,0-28.884,4.681-39.11,10.191c4.889-11.345,10.509-22.88,13.426-28.599 c1.243-2.437,1.197-5.332-0.125-7.727c-1.321-2.396-3.745-3.979-6.47-4.226c-1.951-0.178-3.93-0.267-5.881-0.267 c-22.684,0-41.049,11.794-53.781,23.652c5.5-23.985,13.656-45.904,13.771-46.212c1.014-2.706,0.536-5.746-1.258-8.011 c-1.795-2.266-4.657-3.423-7.51-3.056c-28.879,3.712-49.657,19.395-63.49,34.784c5.304-25.979,11.644-49.343,11.739-49.689 c0.744-2.724,0.04-5.64-1.864-7.725c-1.904-2.085-4.741-3.051-7.524-2.558c-11.629,2.059-22.407,5.807-32.219,11.147v-40.889 c0-4.552-3.69-8.242-8.242-8.242s-8.242,3.69-8.242,8.242v52.08c-4.965,4.157-9.543,8.824-13.672,13.812 c-0.023,0.027-0.046,0.055-0.069,0.083c-9.889,11.971-16.507,24.997-20.877,36.428c-4.372-11.433-10.99-24.463-20.883-36.435 c-0.019-0.022-0.036-0.044-0.055-0.066c-4.158-4.977-8.707-9.657-13.682-13.823V232.346h69.238v31.686 c0,4.552,3.69,8.242,8.242,8.242s8.242-3.69,8.242-8.242v-31.686H413.47c2.28,0,4.459-0.945,6.018-2.61l32.458-34.679 c3.111-3.323,2.939-8.54-0.386-11.65c-3.323-3.112-8.54-2.937-11.65,0.386l-30.015,32.068H289.717h-85.721H44.35V39.419h26.69 c4.552,0,8.242-3.69,8.242-8.242s-3.69-8.242-8.242-8.242H36.108c-4.552,0-8.242,3.69-8.242,8.242v192.927 c0,4.552,3.69,8.242,8.242,8.242h159.645v105.543c-9.812-5.34-20.59-9.088-32.218-11.147c-2.78-0.493-5.619,0.474-7.524,2.558 c-1.903,2.086-2.608,5.001-1.865,7.725c0.095,0.346,6.435,23.706,11.741,49.691c-13.834-15.388-34.613-31.073-63.491-34.785 c-2.867-0.369-5.717,0.791-7.51,3.056c-1.795,2.265-2.271,5.305-1.258,8.011c0.115,0.307,8.273,22.229,13.773,46.214 c-12.734-11.86-31.102-23.655-53.783-23.655c-1.951,0-3.929,0.09-5.881,0.267c-2.724,0.247-5.148,1.832-6.47,4.226 c-1.322,2.395-1.368,5.29-0.125,7.727c2.918,5.72,8.539,17.253,13.428,28.602c-10.225-5.511-23.505-10.194-39.111-10.194 c-2.677,0-5.391,0.142-8.068,0.42c-2.597,0.27-4.912,1.756-6.241,4.004c-1.329,2.247-1.513,4.992-0.499,7.399 C0.793,428.352,15.138,462.529,16.593,481.455z M65.202,454.738c2.464,2.77,6.475,3.556,9.8,1.919 c3.326-1.637,5.151-5.293,4.456-8.936c-2.182-11.457-11.262-31.793-17.517-44.95c30.658,5.364,51.058,38.544,51.271,38.897 c1.963,3.27,5.912,4.767,9.549,3.619c3.637-1.148,6.011-4.643,5.74-8.446c-1.611-22.551-9.357-49.473-14.578-65.544 c40.213,12.791,58.535,54.682,58.73,55.137c1.592,3.767,5.704,5.798,9.663,4.769c3.958-1.027,6.565-4.802,6.122-8.867 c-2.775-25.53-10.369-58.123-14.889-76.163c9.231,3,17.603,7.397,25.119,13.128c0.099,0.085,0.191,0.176,0.296,0.256 c34.116,26.301,39.648,72.781,39.699,73.234c0.026,0.245,0.066,0.486,0.113,0.724c0.003,0.015,0.004,0.031,0.008,0.046 c0.03,0.143,0.07,0.281,0.107,0.421c0.027,0.108,0.051,0.219,0.082,0.324c0.01,0.034,0.024,0.065,0.035,0.098 c1.065,3.354,4.196,5.731,7.839,5.737c0.004,0,0.009,0,0.013,0c3.08,0,5.796-1.708,7.209-4.263c0.031-0.057,0.067-0.11,0.098-0.167 c0.056-0.109,0.103-0.222,0.155-0.333c0.054-0.115,0.113-0.229,0.162-0.347c0.035-0.086,0.062-0.175,0.093-0.26 c0.056-0.151,0.114-0.299,0.162-0.453c0.021-0.069,0.035-0.141,0.054-0.21c0.049-0.177,0.099-0.353,0.136-0.533 c0.002-0.011,0.003-0.022,0.005-0.032c0.049-0.242,0.089-0.487,0.118-0.736c0.052-0.467,5.585-46.947,39.7-73.248 c0.102-0.079,0.193-0.169,0.291-0.253c7.518-5.731,15.892-10.13,25.125-13.13c-4.52,18.04-12.115,50.632-14.89,76.163 c-0.441,4.059,2.159,7.823,6.111,8.857c3.953,1.033,8.066-0.989,9.669-4.745c0.2-0.467,18.522-42.359,58.735-55.151 c-5.221,16.071-12.967,42.993-14.578,65.544c-0.271,3.8,2.099,7.285,5.73,8.438c3.631,1.154,7.581-0.339,9.551-3.598 c0.221-0.364,20.618-33.545,51.279-38.91c-6.255,13.159-15.335,33.493-17.517,44.951c-0.692,3.633,1.129,7.272,4.442,8.916 c3.311,1.643,7.322,0.87,9.798-1.879c0.188-0.208,18.061-19.727,44.935-21.893c-3.935,10.482-9.397,26.41-11.745,39.717H32.03 c-2.348-13.307-7.809-29.236-11.745-39.717C47.156,435.03,65.03,454.548,65.202,454.738z" />
-      <path d="M462.822,171.379c1.589,1.488,3.612,2.224,5.63,2.224c2.201,0,4.397-0.876,6.02-2.61l35.305-37.721 c2.966-3.169,2.966-8.096,0-11.264l-90.287-96.463c-1.558-1.665-3.736-2.61-6.018-2.61H117.663c-4.552,0-8.242,3.69-8.242,8.242 s3.69,8.242,8.242,8.242h292.234l82.574,88.221l-30.034,32.089C459.326,163.052,459.498,168.268,462.822,171.379z" />
-      <path d="M212.185,105.435c-9.864-12.763-22.6-20.497-34.747-20.497c-1.629,0-3.247,0.142-4.812,0.421 c-23.417,4.181-38.566,38.05-32.419,72.479c6.019,33.713,27.615,45.725,45.82,45.726h0.002c2.528,0,5.078-0.226,7.579-0.674 c7.739-1.381,14.74-4.763,20.448-9.767c8.241,7.997,18.89,11.795,29.502,11.795c10.611,0,21.261-3.798,29.502-11.795 c5.708,5.005,12.709,8.386,20.448,9.767c2.502,0.447,5.053,0.674,7.581,0.674h0.001c18.204,0,39.801-12.015,45.821-45.727 c6.145-34.43-9.005-68.298-32.42-72.479c-1.565-0.279-3.184-0.421-4.812-0.421c-12.146,0-24.883,7.734-34.746,20.498 c-8.201-12.152-19.418-19.908-31.374-19.908C231.603,85.528,220.386,93.283,212.185,105.435z M190.713,186.664 c-1.548,0.276-3.124,0.416-4.685,0.416c-14.938-0.001-26.002-12.017-29.594-32.14c-5.195-29.098,8.05-51.383,19.089-53.355 c0.611-0.11,1.256-0.164,1.915-0.164c7.119,0,18.074,6.592,26.31,20.987c-0.078,0.223-0.145,0.452-0.221,0.676 c-0.102,0.3-0.198,0.606-0.297,0.909c-4.048,12.34-5.353,25.562-3.562,38.437c0.024,0.175,0.048,0.349,0.075,0.524 c0.914,6.236,2.554,11.739,4.768,16.529C200.821,183.207,196.057,185.709,190.713,186.664z M288.173,147.681 c-0.32-8.067-1.787-16.101-4.301-23.738c-0.092-0.28-0.18-0.565-0.276-0.843c-0.078-0.229-0.146-0.464-0.226-0.691 c8.235-14.395,19.192-20.987,26.309-20.987c0.66,0,1.304,0.055,1.914,0.164c11.04,1.97,24.284,24.257,19.09,53.355 c-3.593,20.126-14.656,32.14-29.594,32.14c-1.56,0-3.136-0.141-4.686-0.416c-5.344-0.954-10.108-3.456-13.798-7.183 c2.214-4.789,3.854-10.293,4.768-16.529c0.025-0.174,0.049-0.348,0.075-0.523C288.135,157.557,288.369,152.613,288.173,147.681z M220.71,124.087c5.912-13.835,15.583-22.075,22.849-22.075s16.938,8.241,22.85,22.078c0.082,0.286,0.18,0.569,0.293,0.847 c3.757,9.175,5.435,19.284,4.951,29.184c-0.806,16.452-8.478,34.314-28.094,34.314s-27.288-17.862-28.094-34.313 c-0.484-9.88,1.206-20.027,4.951-29.183C220.53,124.658,220.628,124.375,220.71,124.087z" />
+      <circle cx='243.555' cy='58.32' r='10.318' />
+      <path d='M16.593,481.455c0.331,4.295,3.911,7.61,8.218,7.61H468.9c4.307,0,7.887-3.315,8.218-7.609 c1.457-18.928,15.801-53.104,15.946-53.446c1.014-2.406,0.83-5.152-0.499-7.399s-3.643-3.733-6.241-4.004 c-2.678-0.278-5.392-0.42-8.068-0.42c-15.606,0-28.884,4.681-39.11,10.191c4.889-11.345,10.509-22.88,13.426-28.599 c1.243-2.437,1.197-5.332-0.125-7.727c-1.321-2.396-3.745-3.979-6.47-4.226c-1.951-0.178-3.93-0.267-5.881-0.267 c-22.684,0-41.049,11.794-53.781,23.652c5.5-23.985,13.656-45.904,13.771-46.212c1.014-2.706,0.536-5.746-1.258-8.011 c-1.795-2.266-4.657-3.423-7.51-3.056c-28.879,3.712-49.657,19.395-63.49,34.784c5.304-25.979,11.644-49.343,11.739-49.689 c0.744-2.724,0.04-5.64-1.864-7.725c-1.904-2.085-4.741-3.051-7.524-2.558c-11.629,2.059-22.407,5.807-32.219,11.147v-40.889 c0-4.552-3.69-8.242-8.242-8.242s-8.242,3.69-8.242,8.242v52.08c-4.965,4.157-9.543,8.824-13.672,13.812 c-0.023,0.027-0.046,0.055-0.069,0.083c-9.889,11.971-16.507,24.997-20.877,36.428c-4.372-11.433-10.99-24.463-20.883-36.435 c-0.019-0.022-0.036-0.044-0.055-0.066c-4.158-4.977-8.707-9.657-13.682-13.823V232.346h69.238v31.686 c0,4.552,3.69,8.242,8.242,8.242s8.242-3.69,8.242-8.242v-31.686H413.47c2.28,0,4.459-0.945,6.018-2.61l32.458-34.679 c3.111-3.323,2.939-8.54-0.386-11.65c-3.323-3.112-8.54-2.937-11.65,0.386l-30.015,32.068H289.717h-85.721H44.35V39.419h26.69 c4.552,0,8.242-3.69,8.242-8.242s-3.69-8.242-8.242-8.242H36.108c-4.552,0-8.242,3.69-8.242,8.242v192.927 c0,4.552,3.69,8.242,8.242,8.242h159.645v105.543c-9.812-5.34-20.59-9.088-32.218-11.147c-2.78-0.493-5.619,0.474-7.524,2.558 c-1.903,2.086-2.608,5.001-1.865,7.725c0.095,0.346,6.435,23.706,11.741,49.691c-13.834-15.388-34.613-31.073-63.491-34.785 c-2.867-0.369-5.717,0.791-7.51,3.056c-1.795,2.265-2.271,5.305-1.258,8.011c0.115,0.307,8.273,22.229,13.773,46.214 c-12.734-11.86-31.102-23.655-53.783-23.655c-1.951,0-3.929,0.09-5.881,0.267c-2.724,0.247-5.148,1.832-6.47,4.226 c-1.322,2.395-1.368,5.29-0.125,7.727c2.918,5.72,8.539,17.253,13.428,28.602c-10.225-5.511-23.505-10.194-39.111-10.194 c-2.677,0-5.391,0.142-8.068,0.42c-2.597,0.27-4.912,1.756-6.241,4.004c-1.329,2.247-1.513,4.992-0.499,7.399 C0.793,428.352,15.138,462.529,16.593,481.455z M65.202,454.738c2.464,2.77,6.475,3.556,9.8,1.919 c3.326-1.637,5.151-5.293,4.456-8.936c-2.182-11.457-11.262-31.793-17.517-44.95c30.658,5.364,51.058,38.544,51.271,38.897 c1.963,3.27,5.912,4.767,9.549,3.619c3.637-1.148,6.011-4.643,5.74-8.446c-1.611-22.551-9.357-49.473-14.578-65.544 c40.213,12.791,58.535,54.682,58.73,55.137c1.592,3.767,5.704,5.798,9.663,4.769c3.958-1.027,6.565-4.802,6.122-8.867 c-2.775-25.53-10.369-58.123-14.889-76.163c9.231,3,17.603,7.397,25.119,13.128c0.099,0.085,0.191,0.176,0.296,0.256 c34.116,26.301,39.648,72.781,39.699,73.234c0.026,0.245,0.066,0.486,0.113,0.724c0.003,0.015,0.004,0.031,0.008,0.046 c0.03,0.143,0.07,0.281,0.107,0.421c0.027,0.108,0.051,0.219,0.082,0.324c0.01,0.034,0.024,0.065,0.035,0.098 c1.065,3.354,4.196,5.731,7.839,5.737c0.004,0,0.009,0,0.013,0c3.08,0,5.796-1.708,7.209-4.263c0.031-0.057,0.067-0.11,0.098-0.167 c0.056-0.109,0.103-0.222,0.155-0.333c0.054-0.115,0.113-0.229,0.162-0.347c0.035-0.086,0.062-0.175,0.093-0.26 c0.056-0.151,0.114-0.299,0.162-0.453c0.021-0.069,0.035-0.141,0.054-0.21c0.049-0.177,0.099-0.353,0.136-0.533 c0.002-0.011,0.003-0.022,0.005-0.032c0.049-0.242,0.089-0.487,0.118-0.736c0.052-0.467,5.585-46.947,39.7-73.248 c0.102-0.079,0.193-0.169,0.291-0.253c7.518-5.731,15.892-10.13,25.125-13.13c-4.52,18.04-12.115,50.632-14.89,76.163 c-0.441,4.059,2.159,7.823,6.111,8.857c3.953,1.033,8.066-0.989,9.669-4.745c0.2-0.467,18.522-42.359,58.735-55.151 c-5.221,16.071-12.967,42.993-14.578,65.544c-0.271,3.8,2.099,7.285,5.73,8.438c3.631,1.154,7.581-0.339,9.551-3.598 c0.221-0.364,20.618-33.545,51.279-38.91c-6.255,13.159-15.335,33.493-17.517,44.951c-0.692,3.633,1.129,7.272,4.442,8.916 c3.311,1.643,7.322,0.87,9.798-1.879c0.188-0.208,18.061-19.727,44.935-21.893c-3.935,10.482-9.397,26.41-11.745,39.717H32.03 c-2.348-13.307-7.809-29.236-11.745-39.717C47.156,435.03,65.03,454.548,65.202,454.738z' />
+      <path d='M462.822,171.379c1.589,1.488,3.612,2.224,5.63,2.224c2.201,0,4.397-0.876,6.02-2.61l35.305-37.721 c2.966-3.169,2.966-8.096,0-11.264l-90.287-96.463c-1.558-1.665-3.736-2.61-6.018-2.61H117.663c-4.552,0-8.242,3.69-8.242,8.242 s3.69,8.242,8.242,8.242h292.234l82.574,88.221l-30.034,32.089C459.326,163.052,459.498,168.268,462.822,171.379z' />
+      <path d='M212.185,105.435c-9.864-12.763-22.6-20.497-34.747-20.497c-1.629,0-3.247,0.142-4.812,0.421 c-23.417,4.181-38.566,38.05-32.419,72.479c6.019,33.713,27.615,45.725,45.82,45.726h0.002c2.528,0,5.078-0.226,7.579-0.674 c7.739-1.381,14.74-4.763,20.448-9.767c8.241,7.997,18.89,11.795,29.502,11.795c10.611,0,21.261-3.798,29.502-11.795 c5.708,5.005,12.709,8.386,20.448,9.767c2.502,0.447,5.053,0.674,7.581,0.674h0.001c18.204,0,39.801-12.015,45.821-45.727 c6.145-34.43-9.005-68.298-32.42-72.479c-1.565-0.279-3.184-0.421-4.812-0.421c-12.146,0-24.883,7.734-34.746,20.498 c-8.201-12.152-19.418-19.908-31.374-19.908C231.603,85.528,220.386,93.283,212.185,105.435z M190.713,186.664 c-1.548,0.276-3.124,0.416-4.685,0.416c-14.938-0.001-26.002-12.017-29.594-32.14c-5.195-29.098,8.05-51.383,19.089-53.355 c0.611-0.11,1.256-0.164,1.915-0.164c7.119,0,18.074,6.592,26.31,20.987c-0.078,0.223-0.145,0.452-0.221,0.676 c-0.102,0.3-0.198,0.606-0.297,0.909c-4.048,12.34-5.353,25.562-3.562,38.437c0.024,0.175,0.048,0.349,0.075,0.524 c0.914,6.236,2.554,11.739,4.768,16.529C200.821,183.207,196.057,185.709,190.713,186.664z M288.173,147.681 c-0.32-8.067-1.787-16.101-4.301-23.738c-0.092-0.28-0.18-0.565-0.276-0.843c-0.078-0.229-0.146-0.464-0.226-0.691 c8.235-14.395,19.192-20.987,26.309-20.987c0.66,0,1.304,0.055,1.914,0.164c11.04,1.97,24.284,24.257,19.09,53.355 c-3.593,20.126-14.656,32.14-29.594,32.14c-1.56,0-3.136-0.141-4.686-0.416c-5.344-0.954-10.108-3.456-13.798-7.183 c2.214-4.789,3.854-10.293,4.768-16.529c0.025-0.174,0.049-0.348,0.075-0.523C288.135,157.557,288.369,152.613,288.173,147.681z M220.71,124.087c5.912-13.835,15.583-22.075,22.849-22.075s16.938,8.241,22.85,22.078c0.082,0.286,0.18,0.569,0.293,0.847 c3.757,9.175,5.435,19.284,4.951,29.184c-0.806,16.452-8.478,34.314-28.094,34.314s-27.288-17.862-28.094-34.313 c-0.484-9.88,1.206-20.027,4.951-29.183C220.53,124.658,220.628,124.375,220.71,124.087z' />
     </g>
   </svg>
-)
+);
 
 export const InfoIcon = (props: IconSvgProps) => (
   <svg
-    className="icon flat-line"
-    data-name="Flat Line"
-    fill="#000000"
-    id="information-chat"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
+    className='icon flat-line'
+    data-name='Flat Line'
+    fill='#000000'
+    id='information-chat'
+    viewBox='0 0 24 24'
+    xmlns='http://www.w3.org/2000/svg'
     {...props}
   >
-    <g id="SVGRepo_bgCarrier" strokeWidth="0" />
+    <g id='SVGRepo_bgCarrier' strokeWidth='0' />
     <g
-      id="SVGRepo_tracerCarrier"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      id='SVGRepo_tracerCarrier'
+      strokeLinecap='round'
+      strokeLinejoin='round'
     />
-    <g id="SVGRepo_iconCarrier">
+    <g id='SVGRepo_iconCarrier'>
       <path
-        d="M10.54,3.11A9,9,0,0,0,4,16.11l-.7,3.41A1,1,0,0,0,4.48,20.7L7.87,20h0A9,9,0,1,0,10.54,3.11Z"
-        id="secondary"
+        d='M10.54,3.11A9,9,0,0,0,4,16.11l-.7,3.41A1,1,0,0,0,4.48,20.7L7.87,20h0A9,9,0,1,0,10.54,3.11Z'
+        id='secondary'
         style={{
           fill: '#2ca9bc',
-          strokeWidth: 2
+          strokeWidth: 2,
         }}
       />
       <line
-        id="primary-upstroke"
+        id='primary-upstroke'
         style={{
           fill: 'none',
           stroke: '#000000',
           strokeLinecap: 'round',
           strokeLinejoin: 'round',
-          strokeWidth: 2.5
+          strokeWidth: 2.5,
         }}
-        x1="12.05"
-        x2="11.95"
-        y1="8"
-        y2="8"
+        x1='12.05'
+        x2='11.95'
+        y1='8'
+        y2='8'
       />
       <path
-        d="M12,13v3M10.54,3.11A9,9,0,0,0,4,16.11l-.7,3.41A1,1,0,0,0,4.48,20.7L7.87,20h0A9,9,0,1,0,10.54,3.11Z"
-        id="primary"
+        d='M12,13v3M10.54,3.11A9,9,0,0,0,4,16.11l-.7,3.41A1,1,0,0,0,4.48,20.7L7.87,20h0A9,9,0,1,0,10.54,3.11Z'
+        id='primary'
         style={{
           fill: 'none',
           stroke: '#000000',
           strokeLinecap: 'round',
           strokeLinejoin: 'round',
-          strokeWidth: 2
+          strokeWidth: 2,
         }}
       />
     </g>
   </svg>
-)
+);
 
 export const SignalTowerIcon = (props: IconSvgProps) => (
   <svg
-    fill="#000000"
-    id="Layer_1"
-    version="1.1"
-    viewBox="0 0 392.436 392.436"
-    xmlSpace="preserve"
-    xmlns="http://www.w3.org/2000/svg"
+    fill='#000000'
+    id='Layer_1'
+    version='1.1'
+    viewBox='0 0 392.436 392.436'
+    xmlSpace='preserve'
+    xmlns='http://www.w3.org/2000/svg'
     {...props}
   >
-    <g id="SVGRepo_bgCarrier" strokeWidth="0" />
+    <g id='SVGRepo_bgCarrier' strokeWidth='0' />
     <g
-      id="SVGRepo_tracerCarrier"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      id='SVGRepo_tracerCarrier'
+      strokeLinecap='round'
+      strokeLinejoin='round'
     />
-    <g id="SVGRepo_iconCarrier">
+    <g id='SVGRepo_iconCarrier'>
       <polygon
-        points="149.543,370.909 249.616,370.909 199.515,214.465 "
+        points='149.543,370.909 249.616,370.909 199.515,214.465 '
         style={{
-          fill: '#FFC10D'
+          fill: '#FFC10D',
         }}
       />
       <g>
         <path
-          d="M128.404,212.008c4.008,4.396,12.024,3.879,15.451,0c4.267-4.267,4.267-11.119,0-15.451 c-14.61-14.61-22.626-33.939-22.626-54.562s8.016-40.016,22.626-54.562c4.267-4.267,4.267-11.119,0-15.451 c-4.267-4.267-11.119-4.267-15.451,0c-18.683,18.683-28.962,43.572-28.962,70.012S109.657,193.261,128.404,212.008z"
+          d='M128.404,212.008c4.008,4.396,12.024,3.879,15.451,0c4.267-4.267,4.267-11.119,0-15.451 c-14.61-14.61-22.626-33.939-22.626-54.562s8.016-40.016,22.626-54.562c4.267-4.267,4.267-11.119,0-15.451 c-4.267-4.267-11.119-4.267-15.451,0c-18.683,18.683-28.962,43.572-28.962,70.012S109.657,193.261,128.404,212.008z'
           style={{
-            fill: '#194F82'
+            fill: '#194F82',
           }}
         />
         <path
-          d="M104.679,50.457c4.267-4.267,4.267-11.119,0-15.451c-4.267-4.267-11.119-4.267-15.451,0 c-58.958,58.958-58.958,154.958,0,213.915c4.719,4.396,10.925,4.202,15.451,0c4.267-4.267,4.267-11.119,0-15.451 C54.19,183.111,54.19,100.945,104.679,50.457z"
+          d='M104.679,50.457c4.267-4.267,4.267-11.119,0-15.451c-4.267-4.267-11.119-4.267-15.451,0 c-58.958,58.958-58.958,154.958,0,213.915c4.719,4.396,10.925,4.202,15.451,0c4.267-4.267,4.267-11.119,0-15.451 C54.19,183.111,54.19,100.945,104.679,50.457z'
           style={{
-            fill: '#194F82'
+            fill: '#194F82',
           }}
         />
         <path
-          d="M72.808,18.651c4.267-4.267,4.267-11.119,0-15.451c-4.267-4.267-11.119-4.267-15.451,0 c-76.477,76.477-76.477,201.051,0,277.592c4.461,4.267,11.119,4.008,15.451,0c4.267-4.267,4.267-11.119,0-15.451 C4.8,197.398,4.8,86.659,72.808,18.651z"
+          d='M72.808,18.651c4.267-4.267,4.267-11.119,0-15.451c-4.267-4.267-11.119-4.267-15.451,0 c-76.477,76.477-76.477,201.051,0,277.592c4.461,4.267,11.119,4.008,15.451,0c4.267-4.267,4.267-11.119,0-15.451 C4.8,197.398,4.8,86.659,72.808,18.651z'
           style={{
-            fill: '#194F82'
+            fill: '#194F82',
           }}
         />
         <path
-          d="M271.273,141.996c0,20.622-8.016,40.016-22.626,54.562c-4.267,4.267-4.267,11.119,0,15.451 c3.426,3.879,11.442,4.396,15.451,0c18.683-18.683,28.962-43.572,28.962-70.012s-10.279-51.329-28.962-70.012 c-4.267-4.267-11.119-4.267-15.451,0c-4.267,4.267-4.267,11.119,0,15.451C263.192,102.044,271.273,121.438,271.273,141.996z"
+          d='M271.273,141.996c0,20.622-8.016,40.016-22.626,54.562c-4.267,4.267-4.267,11.119,0,15.451 c3.426,3.879,11.442,4.396,15.451,0c18.683-18.683,28.962-43.572,28.962-70.012s-10.279-51.329-28.962-70.012 c-4.267-4.267-11.119-4.267-15.451,0c-4.267,4.267-4.267,11.119,0,15.451C263.192,102.044,271.273,121.438,271.273,141.996z'
           style={{
-            fill: '#194F82'
+            fill: '#194F82',
           }}
         />
         <path
-          d="M303.273,35.006c-4.267-4.267-11.119-4.267-15.451,0c-4.267,4.267-4.267,11.119,0,15.451 c50.489,50.489,50.489,132.59,0,183.079c-4.267,4.267-4.267,11.119,0,15.451c4.59,4.202,10.667,4.396,15.451,0 C362.23,189.964,362.23,94.093,303.273,35.006z"
+          d='M303.273,35.006c-4.267-4.267-11.119-4.267-15.451,0c-4.267,4.267-4.267,11.119,0,15.451 c50.489,50.489,50.489,132.59,0,183.079c-4.267,4.267-4.267,11.119,0,15.451c4.59,4.202,10.667,4.396,15.451,0 C362.23,189.964,362.23,94.093,303.273,35.006z'
           style={{
-            fill: '#194F82'
+            fill: '#194F82',
           }}
         />
         <path
-          d="M335.079,3.2c-4.267-4.267-11.119-4.267-15.451,0c-4.267,4.267-4.267,11.119,0,15.451 c68.008,68.008,68.008,178.747,0,246.756c-4.267,4.267-4.267,11.119,0,15.451c4.331,4.008,10.99,4.267,15.451,0 C411.556,204.251,411.556,79.741,335.079,3.2z"
+          d='M335.079,3.2c-4.267-4.267-11.119-4.267-15.451,0c-4.267,4.267-4.267,11.119,0,15.451 c68.008,68.008,68.008,178.747,0,246.756c-4.267,4.267-4.267,11.119,0,15.451c4.331,4.008,10.99,4.267,15.451,0 C411.556,204.251,411.556,79.741,335.079,3.2z'
           style={{
-            fill: '#194F82'
+            fill: '#194F82',
           }}
         />
         <path
-          d="M213.737,186.925c18.683-6.4,32.129-24.113,32.129-44.994c0-26.246-21.333-47.58-47.58-47.58 s-47.58,21.333-47.58,47.58c0,21.721,14.545,39.952,34.457,45.64l-60.962,190.642c-2.457,6.206,2.78,14.222,10.343,14.222H264.42 c7.499,0,12.606-7.24,10.343-14.222L213.737,186.925z M172.558,141.996c0-14.222,11.507-25.794,25.794-25.794 c14.287,0,25.794,11.507,25.794,25.794c0,14.287-11.507,25.794-25.794,25.794C184.065,167.79,172.558,156.283,172.558,141.996z M149.608,370.78l6.012-18.747h26.828c6.012,0,10.925-4.848,10.925-10.925c0-6.012-4.848-10.925-10.925-10.925h-19.846 l6.982-21.786h34.715c6.012,0,10.925-4.848,10.925-10.925c0-6.012-4.848-10.925-10.925-10.925h-27.733l23.079-72.145 l49.972,156.444H149.608V370.78z"
+          d='M213.737,186.925c18.683-6.4,32.129-24.113,32.129-44.994c0-26.246-21.333-47.58-47.58-47.58 s-47.58,21.333-47.58,47.58c0,21.721,14.545,39.952,34.457,45.64l-60.962,190.642c-2.457,6.206,2.78,14.222,10.343,14.222H264.42 c7.499,0,12.606-7.24,10.343-14.222L213.737,186.925z M172.558,141.996c0-14.222,11.507-25.794,25.794-25.794 c14.287,0,25.794,11.507,25.794,25.794c0,14.287-11.507,25.794-25.794,25.794C184.065,167.79,172.558,156.283,172.558,141.996z M149.608,370.78l6.012-18.747h26.828c6.012,0,10.925-4.848,10.925-10.925c0-6.012-4.848-10.925-10.925-10.925h-19.846 l6.982-21.786h34.715c6.012,0,10.925-4.848,10.925-10.925c0-6.012-4.848-10.925-10.925-10.925h-27.733l23.079-72.145 l49.972,156.444H149.608V370.78z'
           style={{
-            fill: '#194F82'
+            fill: '#194F82',
           }}
         />
       </g>
       <circle
-        cx="198.352"
-        cy="141.996"
-        r="25.794"
+        cx='198.352'
+        cy='141.996'
+        r='25.794'
         style={{
-          fill: '#56ACE0'
+          fill: '#56ACE0',
         }}
       />
     </g>
   </svg>
-)
+);
 
 export const SettingsIcon = (props: IconSvgProps) => (
   <svg
-    fill="none"
-    viewBox="0 0 48 48"
-    xmlns="http://www.w3.org/2000/svg"
+    fill='none'
+    viewBox='0 0 48 48'
+    xmlns='http://www.w3.org/2000/svg'
     {...props}
   >
-    <g id="SVGRepo_bgCarrier" strokeWidth="0" />
+    <g id='SVGRepo_bgCarrier' strokeWidth='0' />
     <g
-      id="SVGRepo_tracerCarrier"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      id='SVGRepo_tracerCarrier'
+      strokeLinecap='round'
+      strokeLinejoin='round'
     />
-    <g id="SVGRepo_iconCarrier">
-      <rect fill="white" fillOpacity="0.01" height="48" width="48" />
+    <g id='SVGRepo_iconCarrier'>
+      <rect fill='white' fillOpacity='0.01' height='48' width='48' />
       <path
-        d="M18.2838 43.1712C14.9327 42.1735 11.9498 40.3212 9.58787 37.8669C10.469 36.8226 11 35.4733 11 34C11 30.6863 8.31371 28 5 28C4.79955 28 4.60139 28.0098 4.40599 28.029C4.13979 26.7276 4 25.3801 4 24C4 21.9094 4.32077 19.8937 4.91579 17.9994C4.94381 17.9998 4.97188 18 5 18C8.31371 18 11 15.3137 11 12C11 11.0487 10.7786 10.1491 10.3846 9.34999C12.6975 7.19937 15.5205 5.5899 18.6521 4.72302C19.6444 6.66807 21.6667 8.00001 24 8.00001C26.3333 8.00001 28.3556 6.66807 29.3479 4.72302C32.4795 5.5899 35.3025 7.19937 37.6154 9.34999C37.2214 10.1491 37 11.0487 37 12C37 15.3137 39.6863 18 43 18C43.0281 18 43.0562 17.9998 43.0842 17.9994C43.6792 19.8937 44 21.9094 44 24C44 25.3801 43.8602 26.7276 43.594 28.029C43.3986 28.0098 43.2005 28 43 28C39.6863 28 37 30.6863 37 34C37 35.4733 37.531 36.8226 38.4121 37.8669C36.0502 40.3212 33.0673 42.1735 29.7162 43.1712C28.9428 40.7518 26.676 39 24 39C21.324 39 19.0572 40.7518 18.2838 43.1712Z"
-        fill="#2F88FF"
-        stroke="#000000"
-        strokeLinejoin="round"
-        strokeWidth="4"
+        d='M18.2838 43.1712C14.9327 42.1735 11.9498 40.3212 9.58787 37.8669C10.469 36.8226 11 35.4733 11 34C11 30.6863 8.31371 28 5 28C4.79955 28 4.60139 28.0098 4.40599 28.029C4.13979 26.7276 4 25.3801 4 24C4 21.9094 4.32077 19.8937 4.91579 17.9994C4.94381 17.9998 4.97188 18 5 18C8.31371 18 11 15.3137 11 12C11 11.0487 10.7786 10.1491 10.3846 9.34999C12.6975 7.19937 15.5205 5.5899 18.6521 4.72302C19.6444 6.66807 21.6667 8.00001 24 8.00001C26.3333 8.00001 28.3556 6.66807 29.3479 4.72302C32.4795 5.5899 35.3025 7.19937 37.6154 9.34999C37.2214 10.1491 37 11.0487 37 12C37 15.3137 39.6863 18 43 18C43.0281 18 43.0562 17.9998 43.0842 17.9994C43.6792 19.8937 44 21.9094 44 24C44 25.3801 43.8602 26.7276 43.594 28.029C43.3986 28.0098 43.2005 28 43 28C39.6863 28 37 30.6863 37 34C37 35.4733 37.531 36.8226 38.4121 37.8669C36.0502 40.3212 33.0673 42.1735 29.7162 43.1712C28.9428 40.7518 26.676 39 24 39C21.324 39 19.0572 40.7518 18.2838 43.1712Z'
+        fill='#2F88FF'
+        stroke='#000000'
+        strokeLinejoin='round'
+        strokeWidth='4'
       />
       <path
-        d="M24 31C27.866 31 31 27.866 31 24C31 20.134 27.866 17 24 17C20.134 17 17 20.134 17 24C17 27.866 20.134 31 24 31Z"
-        fill="#43CCF8"
-        stroke="white"
-        strokeLinejoin="round"
-        strokeWidth="4"
+        d='M24 31C27.866 31 31 27.866 31 24C31 20.134 27.866 17 24 17C20.134 17 17 20.134 17 24C17 27.866 20.134 31 24 31Z'
+        fill='#43CCF8'
+        stroke='white'
+        strokeLinejoin='round'
+        strokeWidth='4'
       />
     </g>
   </svg>
-)
+);
 
 export const TerminalIcon = (props: IconSvgProps) => (
   <svg
-    fill="none"
-    viewBox="0 0 48 48"
-    xmlns="http://www.w3.org/2000/svg"
+    fill='none'
+    viewBox='0 0 48 48'
+    xmlns='http://www.w3.org/2000/svg'
     {...props}
   >
-    <g id="SVGRepo_bgCarrier" strokeWidth="0" />
+    <g id='SVGRepo_bgCarrier' strokeWidth='0' />
     <g
-      id="SVGRepo_tracerCarrier"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      id='SVGRepo_tracerCarrier'
+      strokeLinecap='round'
+      strokeLinejoin='round'
     />
-    <g id="SVGRepo_iconCarrier">
-      <rect fill="white" fillOpacity="0.01" height="48" width="48" />
+    <g id='SVGRepo_iconCarrier'>
+      <rect fill='white' fillOpacity='0.01' height='48' width='48' />
       <rect
-        fill="#2F88FF"
-        height="32"
-        rx="2"
-        stroke="#000000"
-        strokeLinejoin="round"
-        strokeWidth="4"
-        width="40"
-        x="4"
-        y="8"
+        fill='#2F88FF'
+        height='32'
+        rx='2'
+        stroke='#000000'
+        strokeLinejoin='round'
+        strokeWidth='4'
+        width='40'
+        x='4'
+        y='8'
       />
       <path
-        d="M12 18L19 24L12 30"
-        stroke="white"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="4"
+        d='M12 18L19 24L12 30'
+        stroke='white'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='4'
       />
       <path
-        d="M23 32H36"
-        stroke="white"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="4"
+        d='M23 32H36'
+        stroke='white'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='4'
       />
     </g>
   </svg>
-)
+);
 
 export const PlusIcon = (props: IconSvgProps) => (
   <svg
-    width="1em"
-    height="1em"
-    fill="#000000"
-    viewBox="0 0 48 48"
-    xmlns="http://www.w3.org/2000/svg"
+    width='1em'
+    height='1em'
+    fill='#000000'
+    viewBox='0 0 48 48'
+    xmlns='http://www.w3.org/2000/svg'
     {...props}
   >
-    <g id="SVGRepo_bgCarrier" strokeWidth="0" />
+    <g id='SVGRepo_bgCarrier' strokeWidth='0' />
     <g
-      id="SVGRepo_tracerCarrier"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      id='SVGRepo_tracerCarrier'
+      strokeLinecap='round'
+      strokeLinejoin='round'
     />
-    <g id="SVGRepo_iconCarrier">
+    <g id='SVGRepo_iconCarrier'>
       <rect
-        fill="#d7effa33"
-        height="42"
-        rx="10"
-        ry="10"
-        width="42"
-        x="3"
-        y="3"
+        fill='#d7effa33'
+        height='42'
+        rx='10'
+        ry='10'
+        width='42'
+        x='3'
+        y='3'
       />
       <path
-        d="M24,34.25a2,2,0,0,1-2-2V15.75a2,2,0,0,1,4,0v16.5A2,2,0,0,1,24,34.25Z"
-        fill="#38b1e7"
+        d='M24,34.25a2,2,0,0,1-2-2V15.75a2,2,0,0,1,4,0v16.5A2,2,0,0,1,24,34.25Z'
+        fill='#38b1e7'
       />
-      <path d="M32,26H16a2,2,0,0,1,0-4H32A2,2,0,0,1,32,26Z" fill="#38b1e7" />
+      <path d='M32,26H16a2,2,0,0,1,0-4H32A2,2,0,0,1,32,26Z' fill='#38b1e7' />
     </g>
   </svg>
-)
+);
 
 export const HTTPClientIcon = (props: IconSvgProps) => (
   <svg
-    fill="#000000"
-    id="Layer_1"
-    version="1.1"
-    viewBox="0 0 512 512"
-    xmlSpace="preserve"
-    xmlns="http://www.w3.org/2000/svg"
+    fill='#000000'
+    id='Layer_1'
+    version='1.1'
+    viewBox='0 0 512 512'
+    xmlSpace='preserve'
+    xmlns='http://www.w3.org/2000/svg'
     {...props}
   >
-    <g id="SVGRepo_bgCarrier" strokeWidth="0" />
+    <g id='SVGRepo_bgCarrier' strokeWidth='0' />
     <g
-      id="SVGRepo_tracerCarrier"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      id='SVGRepo_tracerCarrier'
+      strokeLinecap='round'
+      strokeLinejoin='round'
     />
-    <g id="SVGRepo_iconCarrier">
-      <g transform="translate(1 1)">
+    <g id='SVGRepo_iconCarrier'>
+      <g transform='translate(1 1)'>
         <path
-          d="M213.187,400.067c1.707,5.12,6.827,8.533,11.947,8.533H293.4c5.12,0,10.24-3.413,11.947-8.533H485.4 V101.4c0-14.507-11.093-25.6-25.6-25.6H50.2c-14.507,0-25.6,11.093-25.6,25.6v298.667H213.187z"
+          d='M213.187,400.067c1.707,5.12,6.827,8.533,11.947,8.533H293.4c5.12,0,10.24-3.413,11.947-8.533H485.4 V101.4c0-14.507-11.093-25.6-25.6-25.6H50.2c-14.507,0-25.6,11.093-25.6,25.6v298.667H213.187z'
           style={{
-            fill: '#54C9FD'
+            fill: '#54C9FD',
           }}
         />
         <path
-          d="M50.2,75.8h17.067c-14.507,0-25.6,11.093-25.6,25.6v298.667H24.6V101.4 C24.6,86.893,35.693,75.8,50.2,75.8"
+          d='M50.2,75.8h17.067c-14.507,0-25.6,11.093-25.6,25.6v298.667H24.6V101.4 C24.6,86.893,35.693,75.8,50.2,75.8'
           style={{
-            fill: '#FFFFFF'
+            fill: '#FFFFFF',
           }}
         />
         <path
-          d="M459.8,75.8h-17.067c14.507,0,25.6,11.093,25.6,25.6v298.667H485.4V101.4 C485.4,86.893,474.307,75.8,459.8,75.8"
+          d='M459.8,75.8h-17.067c14.507,0,25.6,11.093,25.6,25.6v298.667H485.4V101.4 C485.4,86.893,474.307,75.8,459.8,75.8'
           style={{
-            fill: '#33A9F8'
+            fill: '#33A9F8',
           }}
         />
         <path
-          d="M305.347,400.067c-1.707,5.12-6.827,8.533-11.947,8.533h-68.267c-5.12,0-10.24-3.413-11.947-8.533 H12.653c-2.56,0-5.12,2.56-5.12,5.12v23.893c0,2.56,2.56,5.12,5.12,5.12h484.693c2.56,0,5.12-2.56,5.12-5.12v-23.893 c0-2.56-2.56-5.12-5.12-5.12L305.347,400.067L305.347,400.067z"
+          d='M305.347,400.067c-1.707,5.12-6.827,8.533-11.947,8.533h-68.267c-5.12,0-10.24-3.413-11.947-8.533 H12.653c-2.56,0-5.12,2.56-5.12,5.12v23.893c0,2.56,2.56,5.12,5.12,5.12h484.693c2.56,0,5.12-2.56,5.12-5.12v-23.893 c0-2.56-2.56-5.12-5.12-5.12L305.347,400.067L305.347,400.067z'
           style={{
-            fill: '#54C9FD'
+            fill: '#54C9FD',
           }}
         />
         <path
-          d="M33.133,429.08v-23.893c0-2.56,2.56-5.12,5.12-5.12h-25.6c-2.56,0-5.12,2.56-5.12,5.12v23.893 c0,2.56,2.56,5.12,5.12,5.12h25.6C35.693,434.2,33.133,431.64,33.133,429.08"
+          d='M33.133,429.08v-23.893c0-2.56,2.56-5.12,5.12-5.12h-25.6c-2.56,0-5.12,2.56-5.12,5.12v23.893 c0,2.56,2.56,5.12,5.12,5.12h25.6C35.693,434.2,33.133,431.64,33.133,429.08'
           style={{
-            fill: '#FFFFFF'
+            fill: '#FFFFFF',
           }}
         />
         <path
-          d="M476.867,429.08v-23.893c0-2.56-2.56-5.12-5.12-5.12h25.6c2.56,0,5.12,2.56,5.12,5.12v23.893 c0,2.56-2.56,5.12-5.12,5.12h-25.6C474.307,434.2,476.867,431.64,476.867,429.08"
+          d='M476.867,429.08v-23.893c0-2.56-2.56-5.12-5.12-5.12h25.6c2.56,0,5.12,2.56,5.12,5.12v23.893 c0,2.56-2.56,5.12-5.12,5.12h-25.6C474.307,434.2,476.867,431.64,476.867,429.08'
           style={{
-            fill: '#33A9F8'
+            fill: '#33A9F8',
           }}
         />
         <polygon
-          points="58.733,365.933 451.267,365.933 451.267,109.933 58.733,109.933 "
+          points='58.733,365.933 451.267,365.933 451.267,109.933 58.733,109.933 '
           style={{
-            fill: '#FFDD09'
+            fill: '#FFDD09',
           }}
         />
         <polygon
-          points="425.667,365.933 451.267,365.933 451.267,109.933 425.667,109.933 "
+          points='425.667,365.933 451.267,365.933 451.267,109.933 425.667,109.933 '
           style={{
-            fill: '#FD9808'
+            fill: '#FD9808',
           }}
         />
-        <path d="M497.347,442.733H12.653C4.973,442.733-1,436.76-1,429.08v-23.893c0-7.68,5.973-13.653,13.653-13.653H219.16l1.707,5.973 c0.853,1.707,1.707,2.56,4.267,2.56H293.4c1.707,0,3.413-1.707,4.267-2.56l1.707-5.973h197.973c7.68,0,13.653,5.973,13.653,13.653 v23.893C511,436.76,505.027,442.733,497.347,442.733z M16.067,425.667h477.867V408.6H310.467c-4.267,5.12-10.24,8.533-17.067,8.533 h-68.267c-6.827,0-12.8-3.413-17.067-8.533h-192V425.667z" />
-        <path d="M293.4,417.133h-68.267c-6.827,0-12.8-3.413-17.067-8.533h-192V101.4c0-18.773,15.36-34.133,34.133-34.133h409.6 c18.773,0,34.133,15.36,34.133,34.133v307.2H310.467C306.2,413.72,300.227,417.133,293.4,417.133z M33.133,391.533H219.16 l1.707,5.973c0.853,1.707,1.707,2.56,4.267,2.56H293.4c1.707,0,3.413-1.707,4.267-2.56l1.707-5.973h177.493V101.4 c0-9.387-7.68-17.067-17.067-17.067H50.2c-9.387,0-17.067,7.68-17.067,17.067V391.533z" />
-        <path d="M451.267,374.467H58.733c-5.12,0-8.533-3.413-8.533-8.533v-256c0-5.12,3.413-8.533,8.533-8.533h392.533 c5.12,0,8.533,3.413,8.533,8.533v256C459.8,371.053,456.387,374.467,451.267,374.467z M67.267,357.4h375.467V118.467H67.267V357.4z " />
-        <path d="M109.933,280.6c-5.12,0-8.533-3.413-8.533-8.533V203.8c0-5.12,3.413-8.533,8.533-8.533s8.533,3.413,8.533,8.533v68.267 C118.467,277.187,115.053,280.6,109.933,280.6z" />
-        <path d="M161.133,280.6c-5.12,0-8.533-3.413-8.533-8.533V203.8c0-5.12,3.413-8.533,8.533-8.533c5.12,0,8.533,3.413,8.533,8.533 v68.267C169.667,277.187,166.253,280.6,161.133,280.6z" />
-        <path d="M220.867,280.6c-5.12,0-8.533-3.413-8.533-8.533V203.8c0-5.12,3.413-8.533,8.533-8.533c5.12,0,8.533,3.413,8.533,8.533 v68.267C229.4,277.187,225.987,280.6,220.867,280.6z" />
-        <path d="M161.133,246.467h-51.2c-5.12,0-8.533-3.413-8.533-8.533c0-5.12,3.413-8.533,8.533-8.533h51.2 c5.12,0,8.533,3.413,8.533,8.533C169.667,243.053,166.253,246.467,161.133,246.467z" />
-        <path d="M246.467,212.333h-51.2c-5.12,0-8.533-3.413-8.533-8.533c0-5.12,3.413-8.533,8.533-8.533h51.2 c5.12,0,8.533,3.413,8.533,8.533C255,208.92,251.587,212.333,246.467,212.333z" />
-        <path d="M306.2,280.6c-5.12,0-8.533-3.413-8.533-8.533V203.8c0-5.12,3.413-8.533,8.533-8.533s8.533,3.413,8.533,8.533v68.267 C314.733,277.187,311.32,280.6,306.2,280.6z" />
-        <path d="M331.8,212.333h-51.2c-5.12,0-8.533-3.413-8.533-8.533c0-5.12,3.413-8.533,8.533-8.533h51.2 c5.12,0,8.533,3.413,8.533,8.533C340.333,208.92,336.92,212.333,331.8,212.333z" />
-        <path d="M365.933,280.6c-5.12,0-8.533-3.413-8.533-8.533V203.8c0-5.12,3.413-8.533,8.533-8.533h18.773 c15.36,0,27.307,12.8,27.307,27.307c0,14.507-12.8,27.307-27.307,27.307h-10.24v22.187 C374.467,277.187,371.053,280.6,365.933,280.6z M374.467,233.667h10.24c5.973,0,10.24-5.12,10.24-10.24 c0-5.12-4.267-11.093-10.24-11.093h-10.24V233.667z" />
+        <path d='M497.347,442.733H12.653C4.973,442.733-1,436.76-1,429.08v-23.893c0-7.68,5.973-13.653,13.653-13.653H219.16l1.707,5.973 c0.853,1.707,1.707,2.56,4.267,2.56H293.4c1.707,0,3.413-1.707,4.267-2.56l1.707-5.973h197.973c7.68,0,13.653,5.973,13.653,13.653 v23.893C511,436.76,505.027,442.733,497.347,442.733z M16.067,425.667h477.867V408.6H310.467c-4.267,5.12-10.24,8.533-17.067,8.533 h-68.267c-6.827,0-12.8-3.413-17.067-8.533h-192V425.667z' />
+        <path d='M293.4,417.133h-68.267c-6.827,0-12.8-3.413-17.067-8.533h-192V101.4c0-18.773,15.36-34.133,34.133-34.133h409.6 c18.773,0,34.133,15.36,34.133,34.133v307.2H310.467C306.2,413.72,300.227,417.133,293.4,417.133z M33.133,391.533H219.16 l1.707,5.973c0.853,1.707,1.707,2.56,4.267,2.56H293.4c1.707,0,3.413-1.707,4.267-2.56l1.707-5.973h177.493V101.4 c0-9.387-7.68-17.067-17.067-17.067H50.2c-9.387,0-17.067,7.68-17.067,17.067V391.533z' />
+        <path d='M451.267,374.467H58.733c-5.12,0-8.533-3.413-8.533-8.533v-256c0-5.12,3.413-8.533,8.533-8.533h392.533 c5.12,0,8.533,3.413,8.533,8.533v256C459.8,371.053,456.387,374.467,451.267,374.467z M67.267,357.4h375.467V118.467H67.267V357.4z ' />
+        <path d='M109.933,280.6c-5.12,0-8.533-3.413-8.533-8.533V203.8c0-5.12,3.413-8.533,8.533-8.533s8.533,3.413,8.533,8.533v68.267 C118.467,277.187,115.053,280.6,109.933,280.6z' />
+        <path d='M161.133,280.6c-5.12,0-8.533-3.413-8.533-8.533V203.8c0-5.12,3.413-8.533,8.533-8.533c5.12,0,8.533,3.413,8.533,8.533 v68.267C169.667,277.187,166.253,280.6,161.133,280.6z' />
+        <path d='M220.867,280.6c-5.12,0-8.533-3.413-8.533-8.533V203.8c0-5.12,3.413-8.533,8.533-8.533c5.12,0,8.533,3.413,8.533,8.533 v68.267C229.4,277.187,225.987,280.6,220.867,280.6z' />
+        <path d='M161.133,246.467h-51.2c-5.12,0-8.533-3.413-8.533-8.533c0-5.12,3.413-8.533,8.533-8.533h51.2 c5.12,0,8.533,3.413,8.533,8.533C169.667,243.053,166.253,246.467,161.133,246.467z' />
+        <path d='M246.467,212.333h-51.2c-5.12,0-8.533-3.413-8.533-8.533c0-5.12,3.413-8.533,8.533-8.533h51.2 c5.12,0,8.533,3.413,8.533,8.533C255,208.92,251.587,212.333,246.467,212.333z' />
+        <path d='M306.2,280.6c-5.12,0-8.533-3.413-8.533-8.533V203.8c0-5.12,3.413-8.533,8.533-8.533s8.533,3.413,8.533,8.533v68.267 C314.733,277.187,311.32,280.6,306.2,280.6z' />
+        <path d='M331.8,212.333h-51.2c-5.12,0-8.533-3.413-8.533-8.533c0-5.12,3.413-8.533,8.533-8.533h51.2 c5.12,0,8.533,3.413,8.533,8.533C340.333,208.92,336.92,212.333,331.8,212.333z' />
+        <path d='M365.933,280.6c-5.12,0-8.533-3.413-8.533-8.533V203.8c0-5.12,3.413-8.533,8.533-8.533h18.773 c15.36,0,27.307,12.8,27.307,27.307c0,14.507-12.8,27.307-27.307,27.307h-10.24v22.187 C374.467,277.187,371.053,280.6,365.933,280.6z M374.467,233.667h10.24c5.973,0,10.24-5.12,10.24-10.24 c0-5.12-4.267-11.093-10.24-11.093h-10.24V233.667z' />
       </g>
     </g>
   </svg>
-)
+);
 
 export const HTTPServerIcon = (props: IconSvgProps) => (
   <svg
-    fill="#000000"
-    viewBox="0 0 32 32"
-    xmlns="http://www.w3.org/2000/svg"
+    fill='#000000'
+    viewBox='0 0 32 32'
+    xmlns='http://www.w3.org/2000/svg'
     {...props}
   >
-    <g id="SVGRepo_bgCarrier" strokeWidth="0" />
+    <g id='SVGRepo_bgCarrier' strokeWidth='0' />
     <g
-      id="SVGRepo_tracerCarrier"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      id='SVGRepo_tracerCarrier'
+      strokeLinecap='round'
+      strokeLinejoin='round'
     />
-    <g id="SVGRepo_iconCarrier">
+    <g id='SVGRepo_iconCarrier'>
       <path
-        d="M27.5,5.5H18.2L16.1,9.7H4.4V26.5H29.6V5.5Zm0,4.2H19.3l1.1-2.1h7.1Z"
+        d='M27.5,5.5H18.2L16.1,9.7H4.4V26.5H29.6V5.5Zm0,4.2H19.3l1.1-2.1h7.1Z'
         style={{
-          fill: '#55bf7b'
+          fill: '#55bf7b',
         }}
       />
       <path
-        d="M21.761,10h.048a7.814,7.814,0,0,1,.729.4q4.072,2.341,8.144,4.685a.594.594,0,0,1,.311.591c-.006,3.292,0,6.582,0,9.873a.61.61,0,0,1-.267.381l-8.66,4.983a.44.44,0,0,1-.493.028q-4.335-2.484-8.662-4.981a.522.522,0,0,1-.3-.5q0-4.936,0-9.872a.52.52,0,0,1,.29-.5q4.07-2.339,8.136-4.681c.242-.138.478-.284.731-.4"
+        d='M21.761,10h.048a7.814,7.814,0,0,1,.729.4q4.072,2.341,8.144,4.685a.594.594,0,0,1,.311.591c-.006,3.292,0,6.582,0,9.873a.61.61,0,0,1-.267.381l-8.66,4.983a.44.44,0,0,1-.493.028q-4.335-2.484-8.662-4.981a.522.522,0,0,1-.3-.5q0-4.936,0-9.872a.52.52,0,0,1,.29-.5q4.07-2.339,8.136-4.681c.242-.138.478-.284.731-.4'
         style={{
-          fill: '#019639'
+          fill: '#019639',
         }}
       />
       <path
-        d="M16.375,16.4q0,4.072,0,8.144a1.132,1.132,0,0,0,.321.815,1.235,1.235,0,0,0,1.545.155,1.173,1.173,0,0,0,.514-.97c0-1.965,0-3.93,0-5.9q2.688,3.218,5.386,6.426a2.124,2.124,0,0,0,1.954.587,1.171,1.171,0,0,0,.939-1.028q.006-4.156,0-8.311a1.186,1.186,0,0,0-2.364,0c0,2-.012,3.991,0,5.987-1.76-2.074-3.5-4.167-5.248-6.249a2.113,2.113,0,0,0-2-.789A1.184,1.184,0,0,0,16.375,16.4Z"
+        d='M16.375,16.4q0,4.072,0,8.144a1.132,1.132,0,0,0,.321.815,1.235,1.235,0,0,0,1.545.155,1.173,1.173,0,0,0,.514-.97c0-1.965,0-3.93,0-5.9q2.688,3.218,5.386,6.426a2.124,2.124,0,0,0,1.954.587,1.171,1.171,0,0,0,.939-1.028q.006-4.156,0-8.311a1.186,1.186,0,0,0-2.364,0c0,2-.012,3.991,0,5.987-1.76-2.074-3.5-4.167-5.248-6.249a2.113,2.113,0,0,0-2-.789A1.184,1.184,0,0,0,16.375,16.4Z'
         style={{
-          fill: '#fff'
+          fill: '#fff',
         }}
       />
     </g>
   </svg>
-)
+);
 
 export const WebsocketIcon = (props: IconSvgProps) => (
   <svg
-    fill="#f4ac10"
-    preserveAspectRatio="xMidYMid"
-    stroke="#f4ac10"
-    strokeWidth="8.192"
-    version="1.1"
-    viewBox="0 0 250 250"
-    xmlns="http://www.w3.org/2000/svg"
+    fill='#f4ac10'
+    preserveAspectRatio='xMidYMid'
+    stroke='#f4ac10'
+    strokeWidth='8.192'
+    version='1.1'
+    viewBox='0 0 250 250'
+    xmlns='http://www.w3.org/2000/svg'
     {...props}
   >
-    <g id="SVGRepo_bgCarrier" strokeWidth="0" />
+    <g id='SVGRepo_bgCarrier' strokeWidth='0' />
     <g
-      id="SVGRepo_tracerCarrier"
-      stroke="#CCCCCC"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="6.144"
+      id='SVGRepo_tracerCarrier'
+      stroke='#CCCCCC'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      strokeWidth='6.144'
     />
-    <g id="SVGRepo_iconCarrier">
+    <g id='SVGRepo_iconCarrier'>
       <g>
         <path
-          d="M192.440223,144.644612 L224.220111,144.644612 L224.220111,68.3393384 L188.415329,32.5345562 L165.943007,55.0068785 L192.440223,81.5040943 L192.440223,144.644612 L192.440223,144.644612 Z M224.303963,160.576482 L178.017688,160.576482 L113.451687,160.576482 L86.954471,134.079266 L98.1906322,122.843105 L120.075991,144.728464 L165.104487,144.728464 L120.746806,100.286931 L132.06682,88.9669178 L176.4245,133.324599 L176.4245,88.2961022 L154.622994,66.4945955 L165.775303,55.3422863 L110.684573,0 L56.3485097,0 L56.3485097,0 L0,0 L31.6960367,31.6960367 L31.6960367,31.7798886 L31.8637406,31.7798886 L97.4359646,31.7798886 L120.662954,55.0068785 L86.7029152,88.9669178 L63.4759253,65.7399279 L63.4759253,47.7117589 L31.6960367,47.7117589 L31.6960367,78.9046839 L86.7029152,133.911562 L64.3144448,156.300033 L100.119227,192.104815 L154.45529,192.104815 L256,192.104815 L256,192.104815 L224.303963,160.576482 L224.303963,160.576482 Z"
-          fill="#ff4775"
+          d='M192.440223,144.644612 L224.220111,144.644612 L224.220111,68.3393384 L188.415329,32.5345562 L165.943007,55.0068785 L192.440223,81.5040943 L192.440223,144.644612 L192.440223,144.644612 Z M224.303963,160.576482 L178.017688,160.576482 L113.451687,160.576482 L86.954471,134.079266 L98.1906322,122.843105 L120.075991,144.728464 L165.104487,144.728464 L120.746806,100.286931 L132.06682,88.9669178 L176.4245,133.324599 L176.4245,88.2961022 L154.622994,66.4945955 L165.775303,55.3422863 L110.684573,0 L56.3485097,0 L56.3485097,0 L0,0 L31.6960367,31.6960367 L31.6960367,31.7798886 L31.8637406,31.7798886 L97.4359646,31.7798886 L120.662954,55.0068785 L86.7029152,88.9669178 L63.4759253,65.7399279 L63.4759253,47.7117589 L31.6960367,47.7117589 L31.6960367,78.9046839 L86.7029152,133.911562 L64.3144448,156.300033 L100.119227,192.104815 L154.45529,192.104815 L256,192.104815 L256,192.104815 L224.303963,160.576482 L224.303963,160.576482 Z'
+          fill='#ff4775'
         />
       </g>
     </g>
   </svg>
-)
+);
 
 export const PCIcon = (props: IconSvgProps) => (
   <svg
-    fill="#000000"
-    id="Layer_1"
-    version="1.1"
-    viewBox="0 0 512 512"
-    xmlSpace="preserve"
-    xmlns="http://www.w3.org/2000/svg"
+    fill='#000000'
+    id='Layer_1'
+    version='1.1'
+    viewBox='0 0 512 512'
+    xmlSpace='preserve'
+    xmlns='http://www.w3.org/2000/svg'
     {...props}
   >
-    <g id="SVGRepo_bgCarrier" strokeWidth="0" />
+    <g id='SVGRepo_bgCarrier' strokeWidth='0' />
     <g
-      id="SVGRepo_tracerCarrier"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      id='SVGRepo_tracerCarrier'
+      strokeLinecap='round'
+      strokeLinejoin='round'
     />
-    <g id="SVGRepo_iconCarrier">
-      <g transform="translate(1 1)">
+    <g id='SVGRepo_iconCarrier'>
+      <g transform='translate(1 1)'>
         <path
-          d="M353.133,489.667H156.867c-6.827,0-12.8-5.973-12.8-12.8s5.973-12.8,12.8-12.8h196.267 c6.827,0,12.8,5.973,12.8,12.8S359.96,489.667,353.133,489.667"
+          d='M353.133,489.667H156.867c-6.827,0-12.8-5.973-12.8-12.8s5.973-12.8,12.8-12.8h196.267 c6.827,0,12.8,5.973,12.8,12.8S359.96,489.667,353.133,489.667'
           style={{ fill: '#FFE100' }}
         />
         <path
-          d="M347.16,464.067H162.84c-1.707,0-2.56-2.56-0.853-3.413l15.36-11.093 c16.213-11.947,24.747-33.28,19.627-53.76h116.053l0,0c-5.12,20.48,3.413,41.813,19.627,53.76l15.36,11.093 C349.72,461.507,348.867,464.067,347.16,464.067"
+          d='M347.16,464.067H162.84c-1.707,0-2.56-2.56-0.853-3.413l15.36-11.093 c16.213-11.947,24.747-33.28,19.627-53.76h116.053l0,0c-5.12,20.48,3.413,41.813,19.627,53.76l15.36,11.093 C349.72,461.507,348.867,464.067,347.16,464.067'
           style={{ fill: '#FDCC00' }}
         />
         <path
-          d="M351.427,460.653l-15.36-11.093c-16.213-11.947-24.747-33.28-19.627-53.76l0,0h-25.6l0,0 c-5.12,20.48,3.413,41.813,19.627,53.76l15.36,11.093c1.707,0.853,0.853,3.413-0.853,3.413h25.6 C352.28,464.067,353.133,461.507,351.427,460.653"
+          d='M351.427,460.653l-15.36-11.093c-16.213-11.947-24.747-33.28-19.627-53.76l0,0h-25.6l0,0 c-5.12,20.48,3.413,41.813,19.627,53.76l15.36,11.093c1.707,0.853,0.853,3.413-0.853,3.413h25.6 C352.28,464.067,353.133,461.507,351.427,460.653'
           style={{ fill: '#FFA800' }}
         />
         <path
-          d="M158.573,460.653l15.36-11.093c16.213-11.947,24.747-33.28,19.627-53.76l0,0h25.6l0,0 c5.12,20.48-3.413,41.813-19.627,53.76l-15.36,11.093c-1.707,0.853-0.853,3.413,0.853,3.413h-25.6 C157.72,464.067,156.867,461.507,158.573,460.653"
+          d='M158.573,460.653l15.36-11.093c16.213-11.947,24.747-33.28,19.627-53.76l0,0h25.6l0,0 c5.12,20.48-3.413,41.813-19.627,53.76l-15.36,11.093c-1.707,0.853-0.853,3.413,0.853,3.413h-25.6 C157.72,464.067,156.867,461.507,158.573,460.653'
           style={{ fill: '#FFFFFF' }}
         />
         <g>
           <path
-            d="M502.467,327.533H7.533V50.2c0-16.213,13.653-29.867,29.867-29.867h435.2 c16.213,0,29.867,13.653,29.867,29.867V327.533z"
+            d='M502.467,327.533H7.533V50.2c0-16.213,13.653-29.867,29.867-29.867h435.2 c16.213,0,29.867,13.653,29.867,29.867V327.533z'
             style={{ fill: '#FFE100' }}
           />
           <path
-            d="M7.533,365.933c0,16.213,13.653,29.867,29.867,29.867h435.2c16.213,0,29.867-13.653,29.867-29.867 v-38.4H7.533V365.933z"
+            d='M7.533,365.933c0,16.213,13.653,29.867,29.867,29.867h435.2c16.213,0,29.867-13.653,29.867-29.867 v-38.4H7.533V365.933z'
             style={{ fill: '#FFE100' }}
           />
         </g>
         <g>
           <path
-            d="M472.6,20.333H447c16.213,0,29.867,13.653,29.867,29.867v277.333h25.6V50.2 C502.467,33.987,488.813,20.333,472.6,20.333"
+            d='M472.6,20.333H447c16.213,0,29.867,13.653,29.867,29.867v277.333h25.6V50.2 C502.467,33.987,488.813,20.333,472.6,20.333'
             style={{ fill: '#FFA800' }}
           />
           <path
-            d="M476.867,327.533v38.4c0,16.213-13.653,29.867-29.867,29.867h25.6 c16.213,0,29.867-13.653,29.867-29.867v-38.4H476.867z"
+            d='M476.867,327.533v38.4c0,16.213-13.653,29.867-29.867,29.867h25.6 c16.213,0,29.867-13.653,29.867-29.867v-38.4H476.867z'
             style={{ fill: '#FFA800' }}
           />
         </g>
         <g>
           <path
-            d="M37.4,20.333H63c-16.213,0-29.867,13.653-29.867,29.867v277.333h-25.6V50.2 C7.533,33.987,21.187,20.333,37.4,20.333"
+            d='M37.4,20.333H63c-16.213,0-29.867,13.653-29.867,29.867v277.333h-25.6V50.2 C7.533,33.987,21.187,20.333,37.4,20.333'
             style={{ fill: '#FFFFFF' }}
           />
           <path
-            d="M33.133,327.533v38.4c0,16.213,13.653,29.867,29.867,29.867H37.4 c-16.213,0-29.867-13.653-29.867-29.867v-38.4H33.133z"
+            d='M33.133,327.533v38.4c0,16.213,13.653,29.867,29.867,29.867H37.4 c-16.213,0-29.867-13.653-29.867-29.867v-38.4H33.133z'
             style={{ fill: '#FFFFFF' }}
           />
         </g>
         <polygon
-          points="58.733,131.267 451.267,131.267 451.267,80.067 58.733,80.067 "
+          points='58.733,131.267 451.267,131.267 451.267,80.067 58.733,80.067 '
           style={{ fill: '#63D3FD' }}
         />
-        <path d="M347.16,472.6H162.84c-4.267,0-8.533-2.56-10.24-7.68c-1.707-4.267,0-9.387,4.267-11.947l15.36-11.093 c13.653-9.387,20.48-27.307,16.213-44.373l-2.56-10.24h137.387l-2.56,10.24c-4.267,17.067,2.56,34.987,16.213,44.373l15.36,11.093 c3.413,2.56,5.12,7.68,4.267,11.947C355.693,470.04,351.427,472.6,347.16,472.6z M183.32,455.533h142.507 c-15.36-11.947-24.747-31.573-23.04-51.2H206.36C208.067,423.96,199.533,443.587,183.32,455.533z" />
-        <path d="M511,336.067H-1V50.2c0-21.333,17.067-38.4,38.4-38.4h435.2c21.333,0,38.4,17.067,38.4,38.4V336.067z M16.067,319h477.867 V50.2c0-11.947-9.387-21.333-21.333-21.333H37.4c-11.947,0-21.333,9.387-21.333,21.333V319z" />
-        <path d="M353.133,498.2H156.867c-11.947,0-21.333-9.387-21.333-21.333s9.387-21.333,21.333-21.333h196.267 c11.947,0,21.333,9.387,21.333,21.333S365.08,498.2,353.133,498.2z M156.867,472.6c-2.56,0-4.267,1.707-4.267,4.267 s1.707,4.267,4.267,4.267h196.267c2.56,0,4.267-1.707,4.267-4.267s-1.707-4.267-4.267-4.267H156.867z" />
-        <path d="M472.6,404.333H37.4c-21.333,0-38.4-17.067-38.4-38.4V319h512v46.933C511,387.267,493.933,404.333,472.6,404.333z M16.067,336.067v29.867c0,11.947,9.387,21.333,21.333,21.333h435.2c11.947,0,21.333-9.387,21.333-21.333v-29.867H16.067z" />
-        <path d="M459.8,139.8H50.2V71.533h409.6V139.8z M67.267,122.733h375.467V88.6H67.267V122.733z" />
-        <path d="M101.4,191H58.733c-5.12,0-8.533-3.413-8.533-8.533c0-5.12,3.413-8.533,8.533-8.533H101.4c5.12,0,8.533,3.413,8.533,8.533 C109.933,187.587,106.52,191,101.4,191z" />
-        <path d="M229.4,191h-59.733c-5.12,0-8.533-3.413-8.533-8.533c0-5.12,3.413-8.533,8.533-8.533H229.4c5.12,0,8.533,3.413,8.533,8.533 C237.933,187.587,234.52,191,229.4,191z" />
-        <path d="M135.533,191c-2.56,0-4.267-0.853-5.973-2.56c-1.707-1.707-2.56-3.413-2.56-5.973s0.853-4.267,2.56-5.973 c3.413-3.413,9.387-3.413,11.947,0c1.707,1.707,2.56,3.413,2.56,5.973c0,2.56-0.853,4.267-2.56,5.973 C139.8,190.147,138.093,191,135.533,191" />
-        <path d="M263.533,191c-2.56,0-4.267-0.853-5.973-2.56c-0.853-0.853-1.707-1.707-1.707-2.56c0-0.853-0.853-2.56-0.853-3.413 c0-2.56,0.853-4.267,2.56-5.973c3.413-3.413,8.533-3.413,11.947,0c1.707,1.707,2.56,3.413,2.56,5.973 c0,2.56-0.853,4.267-2.56,5.973C267.8,190.147,266.093,191,263.533,191" />
-        <path d="M280.6,233.667h-42.667c-5.12,0-8.533-3.413-8.533-8.533c0-5.12,3.413-8.533,8.533-8.533H280.6 c5.12,0,8.533,3.413,8.533,8.533C289.133,230.253,285.72,233.667,280.6,233.667z" />
-        <path d="M169.667,233.667h-59.733c-5.12,0-8.533-3.413-8.533-8.533c0-5.12,3.413-8.533,8.533-8.533h59.733 c5.12,0,8.533,3.413,8.533,8.533C178.2,230.253,174.787,233.667,169.667,233.667z" />
-        <path d="M203.8,233.667c-2.56,0-4.267-0.853-5.973-2.56c-0.853-0.853-1.707-1.707-1.707-2.56c0-0.853-0.853-2.56-0.853-3.413 s0-2.56,0.853-3.413c0-0.853,0.853-1.707,1.707-2.56c3.413-3.413,8.533-3.413,11.947,0c0.853,0.853,1.707,1.707,1.707,2.56 c0.853,0.853,0.853,2.56,0.853,3.413c0,2.56-0.853,4.267-2.56,5.973c-0.853,0.853-1.707,1.707-2.56,1.707 C206.36,233.667,204.653,233.667,203.8,233.667" />
-        <path d="M75.8,233.667c-2.56,0-4.267-0.853-5.973-2.56c-0.853-0.853-1.707-1.707-1.707-2.56c-0.853-0.853-0.853-2.56-0.853-3.413 s0-2.56,0.853-3.413s0.853-1.707,1.707-2.56c2.56-2.56,5.973-3.413,9.387-1.707c0.853,0,1.707,0.853,2.56,1.707 c0.853,0.853,1.707,1.707,1.707,2.56c0.853,0.853,0.853,2.56,0.853,3.413c0,2.56-0.853,4.267-2.56,5.973 C80.067,232.813,78.36,233.667,75.8,233.667" />
-        <path d="M340.333,191h-42.667c-5.12,0-8.533-3.413-8.533-8.533c0-5.12,3.413-8.533,8.533-8.533h42.667 c5.12,0,8.533,3.413,8.533,8.533C348.867,187.587,345.453,191,340.333,191z" />
-        <path d="M451.267,191H408.6c-5.12,0-8.533-3.413-8.533-8.533c0-5.12,3.413-8.533,8.533-8.533h42.667 c5.12,0,8.533,3.413,8.533,8.533C459.8,187.587,456.387,191,451.267,191z" />
-        <path d="M374.467,191c-2.56,0-4.267-0.853-5.973-2.56c-1.707-1.707-2.56-3.413-2.56-5.973s0.853-4.267,2.56-5.973 c3.413-3.413,8.533-3.413,11.947,0c1.707,1.707,2.56,3.413,2.56,5.973c0,2.56-0.853,4.267-2.56,5.973 C378.733,190.147,377.027,191,374.467,191" />
-        <path d="M101.4,276.333H58.733c-5.12,0-8.533-3.413-8.533-8.533s3.413-8.533,8.533-8.533H101.4c5.12,0,8.533,3.413,8.533,8.533 S106.52,276.333,101.4,276.333z" />
-        <path d="M229.4,276.333h-59.733c-5.12,0-8.533-3.413-8.533-8.533s3.413-8.533,8.533-8.533H229.4c5.12,0,8.533,3.413,8.533,8.533 S234.52,276.333,229.4,276.333z" />
-        <path d="M135.533,276.333c-2.56,0-4.267-0.853-5.973-2.56c-1.707-1.707-2.56-3.413-2.56-5.973s0.853-4.267,2.56-5.973 c3.413-3.413,9.387-3.413,11.947,0c1.707,1.707,2.56,3.413,2.56,5.973c0,2.56-0.853,4.267-2.56,5.973 S138.093,276.333,135.533,276.333" />
-        <path d="M263.533,276.333c-2.56,0-4.267-0.853-5.973-2.56c-0.853-0.853-1.707-1.707-1.707-2.56S255,268.653,255,267.8 c0-2.56,0.853-4.267,2.56-5.973c3.413-3.413,8.533-3.413,11.947,0c1.707,1.707,2.56,3.413,2.56,5.973s-0.853,4.267-2.56,5.973 C267.8,275.48,266.093,276.333,263.533,276.333" />
-        <path d="M340.333,276.333h-42.667c-5.12,0-8.533-3.413-8.533-8.533s3.413-8.533,8.533-8.533h42.667c5.12,0,8.533,3.413,8.533,8.533 S345.453,276.333,340.333,276.333z" />
-        <path d="M451.267,276.333H408.6c-5.12,0-8.533-3.413-8.533-8.533s3.413-8.533,8.533-8.533h42.667c5.12,0,8.533,3.413,8.533,8.533 S456.387,276.333,451.267,276.333z" />
-        <path d="M374.467,276.333c-2.56,0-4.267-0.853-5.973-2.56s-2.56-3.413-2.56-5.973s0.853-4.267,2.56-5.973 c3.413-3.413,8.533-3.413,11.947,0c1.707,1.707,2.56,3.413,2.56,5.973c0,2.56-0.853,4.267-2.56,5.973 S377.027,276.333,374.467,276.333" />
-        <path d="M408.6,233.667h-59.733c-5.12,0-8.533-3.413-8.533-8.533c0-5.12,3.413-8.533,8.533-8.533H408.6 c5.12,0,8.533,3.413,8.533,8.533C417.133,230.253,413.72,233.667,408.6,233.667z" />
-        <path d="M442.733,233.667c-2.56,0-4.267-0.853-5.973-2.56c-0.853-0.853-1.707-1.707-1.707-2.56 c-0.853-0.853-0.853-2.56-0.853-3.413s0-2.56,0.853-3.413c0-0.853,0.853-1.707,1.707-2.56c3.413-3.413,8.533-3.413,11.947,0 c0.853,0.853,1.707,1.707,1.707,2.56c0.853,0.853,0.853,2.56,0.853,3.413c0,2.56-0.853,4.267-2.56,5.973 c-0.853,0.853-1.707,1.707-2.56,1.707C445.293,233.667,443.587,233.667,442.733,233.667" />
-        <path d="M314.733,233.667c-2.56,0-4.267-0.853-5.973-2.56c-0.853-0.853-1.707-1.707-1.707-2.56 c-0.853-0.853-0.853-2.56-0.853-3.413s0-2.56,0.853-3.413c0-0.853,0.853-1.707,1.707-2.56c2.56-2.56,5.973-3.413,9.387-1.707 c0.853,0,1.707,0.853,2.56,1.707c0.853,0.853,1.707,1.707,1.707,2.56c0.853,0.853,0.853,2.56,0.853,3.413 c0,2.56-0.853,4.267-2.56,5.973C319,232.813,317.293,233.667,314.733,233.667" />
+        <path d='M347.16,472.6H162.84c-4.267,0-8.533-2.56-10.24-7.68c-1.707-4.267,0-9.387,4.267-11.947l15.36-11.093 c13.653-9.387,20.48-27.307,16.213-44.373l-2.56-10.24h137.387l-2.56,10.24c-4.267,17.067,2.56,34.987,16.213,44.373l15.36,11.093 c3.413,2.56,5.12,7.68,4.267,11.947C355.693,470.04,351.427,472.6,347.16,472.6z M183.32,455.533h142.507 c-15.36-11.947-24.747-31.573-23.04-51.2H206.36C208.067,423.96,199.533,443.587,183.32,455.533z' />
+        <path d='M511,336.067H-1V50.2c0-21.333,17.067-38.4,38.4-38.4h435.2c21.333,0,38.4,17.067,38.4,38.4V336.067z M16.067,319h477.867 V50.2c0-11.947-9.387-21.333-21.333-21.333H37.4c-11.947,0-21.333,9.387-21.333,21.333V319z' />
+        <path d='M353.133,498.2H156.867c-11.947,0-21.333-9.387-21.333-21.333s9.387-21.333,21.333-21.333h196.267 c11.947,0,21.333,9.387,21.333,21.333S365.08,498.2,353.133,498.2z M156.867,472.6c-2.56,0-4.267,1.707-4.267,4.267 s1.707,4.267,4.267,4.267h196.267c2.56,0,4.267-1.707,4.267-4.267s-1.707-4.267-4.267-4.267H156.867z' />
+        <path d='M472.6,404.333H37.4c-21.333,0-38.4-17.067-38.4-38.4V319h512v46.933C511,387.267,493.933,404.333,472.6,404.333z M16.067,336.067v29.867c0,11.947,9.387,21.333,21.333,21.333h435.2c11.947,0,21.333-9.387,21.333-21.333v-29.867H16.067z' />
+        <path d='M459.8,139.8H50.2V71.533h409.6V139.8z M67.267,122.733h375.467V88.6H67.267V122.733z' />
+        <path d='M101.4,191H58.733c-5.12,0-8.533-3.413-8.533-8.533c0-5.12,3.413-8.533,8.533-8.533H101.4c5.12,0,8.533,3.413,8.533,8.533 C109.933,187.587,106.52,191,101.4,191z' />
+        <path d='M229.4,191h-59.733c-5.12,0-8.533-3.413-8.533-8.533c0-5.12,3.413-8.533,8.533-8.533H229.4c5.12,0,8.533,3.413,8.533,8.533 C237.933,187.587,234.52,191,229.4,191z' />
+        <path d='M135.533,191c-2.56,0-4.267-0.853-5.973-2.56c-1.707-1.707-2.56-3.413-2.56-5.973s0.853-4.267,2.56-5.973 c3.413-3.413,9.387-3.413,11.947,0c1.707,1.707,2.56,3.413,2.56,5.973c0,2.56-0.853,4.267-2.56,5.973 C139.8,190.147,138.093,191,135.533,191' />
+        <path d='M263.533,191c-2.56,0-4.267-0.853-5.973-2.56c-0.853-0.853-1.707-1.707-1.707-2.56c0-0.853-0.853-2.56-0.853-3.413 c0-2.56,0.853-4.267,2.56-5.973c3.413-3.413,8.533-3.413,11.947,0c1.707,1.707,2.56,3.413,2.56,5.973 c0,2.56-0.853,4.267-2.56,5.973C267.8,190.147,266.093,191,263.533,191' />
+        <path d='M280.6,233.667h-42.667c-5.12,0-8.533-3.413-8.533-8.533c0-5.12,3.413-8.533,8.533-8.533H280.6 c5.12,0,8.533,3.413,8.533,8.533C289.133,230.253,285.72,233.667,280.6,233.667z' />
+        <path d='M169.667,233.667h-59.733c-5.12,0-8.533-3.413-8.533-8.533c0-5.12,3.413-8.533,8.533-8.533h59.733 c5.12,0,8.533,3.413,8.533,8.533C178.2,230.253,174.787,233.667,169.667,233.667z' />
+        <path d='M203.8,233.667c-2.56,0-4.267-0.853-5.973-2.56c-0.853-0.853-1.707-1.707-1.707-2.56c0-0.853-0.853-2.56-0.853-3.413 s0-2.56,0.853-3.413c0-0.853,0.853-1.707,1.707-2.56c3.413-3.413,8.533-3.413,11.947,0c0.853,0.853,1.707,1.707,1.707,2.56 c0.853,0.853,0.853,2.56,0.853,3.413c0,2.56-0.853,4.267-2.56,5.973c-0.853,0.853-1.707,1.707-2.56,1.707 C206.36,233.667,204.653,233.667,203.8,233.667' />
+        <path d='M75.8,233.667c-2.56,0-4.267-0.853-5.973-2.56c-0.853-0.853-1.707-1.707-1.707-2.56c-0.853-0.853-0.853-2.56-0.853-3.413 s0-2.56,0.853-3.413s0.853-1.707,1.707-2.56c2.56-2.56,5.973-3.413,9.387-1.707c0.853,0,1.707,0.853,2.56,1.707 c0.853,0.853,1.707,1.707,1.707,2.56c0.853,0.853,0.853,2.56,0.853,3.413c0,2.56-0.853,4.267-2.56,5.973 C80.067,232.813,78.36,233.667,75.8,233.667' />
+        <path d='M340.333,191h-42.667c-5.12,0-8.533-3.413-8.533-8.533c0-5.12,3.413-8.533,8.533-8.533h42.667 c5.12,0,8.533,3.413,8.533,8.533C348.867,187.587,345.453,191,340.333,191z' />
+        <path d='M451.267,191H408.6c-5.12,0-8.533-3.413-8.533-8.533c0-5.12,3.413-8.533,8.533-8.533h42.667 c5.12,0,8.533,3.413,8.533,8.533C459.8,187.587,456.387,191,451.267,191z' />
+        <path d='M374.467,191c-2.56,0-4.267-0.853-5.973-2.56c-1.707-1.707-2.56-3.413-2.56-5.973s0.853-4.267,2.56-5.973 c3.413-3.413,8.533-3.413,11.947,0c1.707,1.707,2.56,3.413,2.56,5.973c0,2.56-0.853,4.267-2.56,5.973 C378.733,190.147,377.027,191,374.467,191' />
+        <path d='M101.4,276.333H58.733c-5.12,0-8.533-3.413-8.533-8.533s3.413-8.533,8.533-8.533H101.4c5.12,0,8.533,3.413,8.533,8.533 S106.52,276.333,101.4,276.333z' />
+        <path d='M229.4,276.333h-59.733c-5.12,0-8.533-3.413-8.533-8.533s3.413-8.533,8.533-8.533H229.4c5.12,0,8.533,3.413,8.533,8.533 S234.52,276.333,229.4,276.333z' />
+        <path d='M135.533,276.333c-2.56,0-4.267-0.853-5.973-2.56c-1.707-1.707-2.56-3.413-2.56-5.973s0.853-4.267,2.56-5.973 c3.413-3.413,9.387-3.413,11.947,0c1.707,1.707,2.56,3.413,2.56,5.973c0,2.56-0.853,4.267-2.56,5.973 S138.093,276.333,135.533,276.333' />
+        <path d='M263.533,276.333c-2.56,0-4.267-0.853-5.973-2.56c-0.853-0.853-1.707-1.707-1.707-2.56S255,268.653,255,267.8 c0-2.56,0.853-4.267,2.56-5.973c3.413-3.413,8.533-3.413,11.947,0c1.707,1.707,2.56,3.413,2.56,5.973s-0.853,4.267-2.56,5.973 C267.8,275.48,266.093,276.333,263.533,276.333' />
+        <path d='M340.333,276.333h-42.667c-5.12,0-8.533-3.413-8.533-8.533s3.413-8.533,8.533-8.533h42.667c5.12,0,8.533,3.413,8.533,8.533 S345.453,276.333,340.333,276.333z' />
+        <path d='M451.267,276.333H408.6c-5.12,0-8.533-3.413-8.533-8.533s3.413-8.533,8.533-8.533h42.667c5.12,0,8.533,3.413,8.533,8.533 S456.387,276.333,451.267,276.333z' />
+        <path d='M374.467,276.333c-2.56,0-4.267-0.853-5.973-2.56s-2.56-3.413-2.56-5.973s0.853-4.267,2.56-5.973 c3.413-3.413,8.533-3.413,11.947,0c1.707,1.707,2.56,3.413,2.56,5.973c0,2.56-0.853,4.267-2.56,5.973 S377.027,276.333,374.467,276.333' />
+        <path d='M408.6,233.667h-59.733c-5.12,0-8.533-3.413-8.533-8.533c0-5.12,3.413-8.533,8.533-8.533H408.6 c5.12,0,8.533,3.413,8.533,8.533C417.133,230.253,413.72,233.667,408.6,233.667z' />
+        <path d='M442.733,233.667c-2.56,0-4.267-0.853-5.973-2.56c-0.853-0.853-1.707-1.707-1.707-2.56 c-0.853-0.853-0.853-2.56-0.853-3.413s0-2.56,0.853-3.413c0-0.853,0.853-1.707,1.707-2.56c3.413-3.413,8.533-3.413,11.947,0 c0.853,0.853,1.707,1.707,1.707,2.56c0.853,0.853,0.853,2.56,0.853,3.413c0,2.56-0.853,4.267-2.56,5.973 c-0.853,0.853-1.707,1.707-2.56,1.707C445.293,233.667,443.587,233.667,442.733,233.667' />
+        <path d='M314.733,233.667c-2.56,0-4.267-0.853-5.973-2.56c-0.853-0.853-1.707-1.707-1.707-2.56 c-0.853-0.853-0.853-2.56-0.853-3.413s0-2.56,0.853-3.413c0-0.853,0.853-1.707,1.707-2.56c2.56-2.56,5.973-3.413,9.387-1.707 c0.853,0,1.707,0.853,2.56,1.707c0.853,0.853,1.707,1.707,1.707,2.56c0.853,0.853,0.853,2.56,0.853,3.413 c0,2.56-0.853,4.267-2.56,5.973C319,232.813,317.293,233.667,314.733,233.667' />
       </g>
     </g>
   </svg>
-)
+);
 
 export const BugIcon = (props: IconSvgProps) => (
   <svg
-    height="1em"
-    viewBox="0 0 24 24"
-    width="1em"
-    xmlns="http://www.w3.org/2000/svg"
+    height='1em'
+    viewBox='0 0 24 24'
+    width='1em'
+    xmlns='http://www.w3.org/2000/svg'
     {...props}
   >
     <path
-      d="M16.895,6.519l2.813-2.812l-1.414-1.414l-2.846,2.846c-0.233-0.166-0.473-0.321-0.723-0.454 c-1.723-0.91-3.726-0.911-5.45,0c-0.25,0.132-0.488,0.287-0.722,0.453L5.707,2.293L4.293,3.707l2.813,2.812 C6.53,7.242,6.08,8.079,5.756,9H2v2h2.307C4.242,11.495,4.2,11.997,4.2,12.5c0,0.507,0.042,1.013,0.107,1.511H2v2h2.753 c0.013,0.039,0.021,0.08,0.034,0.118c0.188,0.555,0.421,1.093,0.695,1.6c0.044,0.081,0.095,0.155,0.141,0.234l-2.33,2.33 l1.414,1.414l2.11-2.111c0.235,0.254,0.478,0.498,0.736,0.716c0.418,0.354,0.867,0.657,1.332,0.903 c0.479,0.253,0.982,0.449,1.496,0.58C10.911,21.931,11.455,22,12,22s1.089-0.069,1.618-0.204c0.514-0.131,1.017-0.327,1.496-0.58 c0.465-0.246,0.914-0.55,1.333-0.904c0.258-0.218,0.5-0.462,0.734-0.716l2.111,2.111l1.414-1.414l-2.33-2.33 c0.047-0.08,0.098-0.155,0.142-0.236c0.273-0.505,0.507-1.043,0.694-1.599c0.013-0.039,0.021-0.079,0.034-0.118H22v-2h-2.308 c0.065-0.499,0.107-1.004,0.107-1.511c0-0.503-0.042-1.005-0.106-1.5H22V9h-3.756C17.92,8.079,17.47,7.242,16.895,6.519z M8.681,7.748c0.445-0.558,0.96-0.993,1.528-1.294c1.141-0.603,2.442-0.602,3.581,0c0.569,0.301,1.084,0.736,1.53,1.295 c0.299,0.373,0.54,0.8,0.753,1.251H7.927C8.141,8.549,8.381,8.121,8.681,7.748z M17.8,12.5c0,0.522-0.042,1.044-0.126,1.553 c-0.079,0.49-0.199,0.973-0.355,1.436c-0.151,0.449-0.34,0.882-0.559,1.288c-0.217,0.399-0.463,0.772-0.733,1.11 c-0.267,0.333-0.56,0.636-0.869,0.898c-0.31,0.261-0.639,0.484-0.979,0.664s-0.695,0.317-1.057,0.41 c-0.04,0.01-0.082,0.014-0.122,0.023V14h-2v5.881c-0.04-0.009-0.082-0.013-0.122-0.023c-0.361-0.093-0.717-0.23-1.057-0.41 s-0.669-0.403-0.978-0.664c-0.311-0.263-0.604-0.565-0.871-0.899c-0.27-0.337-0.516-0.71-0.731-1.108 c-0.22-0.407-0.408-0.84-0.56-1.289c-0.156-0.463-0.276-0.946-0.356-1.438C6.242,13.544,6.2,13.022,6.2,12.5 c0-0.505,0.041-1.009,0.119-1.5h11.361C17.759,11.491,17.8,11.995,17.8,12.5z"
-      fill="currentColor"
+      d='M16.895,6.519l2.813-2.812l-1.414-1.414l-2.846,2.846c-0.233-0.166-0.473-0.321-0.723-0.454 c-1.723-0.91-3.726-0.911-5.45,0c-0.25,0.132-0.488,0.287-0.722,0.453L5.707,2.293L4.293,3.707l2.813,2.812 C6.53,7.242,6.08,8.079,5.756,9H2v2h2.307C4.242,11.495,4.2,11.997,4.2,12.5c0,0.507,0.042,1.013,0.107,1.511H2v2h2.753 c0.013,0.039,0.021,0.08,0.034,0.118c0.188,0.555,0.421,1.093,0.695,1.6c0.044,0.081,0.095,0.155,0.141,0.234l-2.33,2.33 l1.414,1.414l2.11-2.111c0.235,0.254,0.478,0.498,0.736,0.716c0.418,0.354,0.867,0.657,1.332,0.903 c0.479,0.253,0.982,0.449,1.496,0.58C10.911,21.931,11.455,22,12,22s1.089-0.069,1.618-0.204c0.514-0.131,1.017-0.327,1.496-0.58 c0.465-0.246,0.914-0.55,1.333-0.904c0.258-0.218,0.5-0.462,0.734-0.716l2.111,2.111l1.414-1.414l-2.33-2.33 c0.047-0.08,0.098-0.155,0.142-0.236c0.273-0.505,0.507-1.043,0.694-1.599c0.013-0.039,0.021-0.079,0.034-0.118H22v-2h-2.308 c0.065-0.499,0.107-1.004,0.107-1.511c0-0.503-0.042-1.005-0.106-1.5H22V9h-3.756C17.92,8.079,17.47,7.242,16.895,6.519z M8.681,7.748c0.445-0.558,0.96-0.993,1.528-1.294c1.141-0.603,2.442-0.602,3.581,0c0.569,0.301,1.084,0.736,1.53,1.295 c0.299,0.373,0.54,0.8,0.753,1.251H7.927C8.141,8.549,8.381,8.121,8.681,7.748z M17.8,12.5c0,0.522-0.042,1.044-0.126,1.553 c-0.079,0.49-0.199,0.973-0.355,1.436c-0.151,0.449-0.34,0.882-0.559,1.288c-0.217,0.399-0.463,0.772-0.733,1.11 c-0.267,0.333-0.56,0.636-0.869,0.898c-0.31,0.261-0.639,0.484-0.979,0.664s-0.695,0.317-1.057,0.41 c-0.04,0.01-0.082,0.014-0.122,0.023V14h-2v5.881c-0.04-0.009-0.082-0.013-0.122-0.023c-0.361-0.093-0.717-0.23-1.057-0.41 s-0.669-0.403-0.978-0.664c-0.311-0.263-0.604-0.565-0.871-0.899c-0.27-0.337-0.516-0.71-0.731-1.108 c-0.22-0.407-0.408-0.84-0.56-1.289c-0.156-0.463-0.276-0.946-0.356-1.438C6.242,13.544,6.2,13.022,6.2,12.5 c0-0.505,0.041-1.009,0.119-1.5h11.361C17.759,11.491,17.8,11.995,17.8,12.5z'
+      fill='currentColor'
     />
   </svg>
-)
+);
 
 export const PullRequestIcon = (props: IconSvgProps) => (
   <svg
-    height="1em"
-    viewBox="0 0 24 24"
-    width="1em"
-    xmlns="http://www.w3.org/2000/svg"
+    height='1em'
+    viewBox='0 0 24 24'
+    width='1em'
+    xmlns='http://www.w3.org/2000/svg'
     {...props}
   >
     <path
-      d="M19.01 15.163V7.997C19.005 6.391 17.933 4 15 4V2l-4 3 4 3V6c1.829 0 2.001 1.539 2.01 2v7.163c-1.44.434-2.5 1.757-2.5 3.337 0 1.93 1.57 3.5 3.5 3.5s3.5-1.57 3.5-3.5c0-1.58-1.06-2.903-2.5-3.337zm-1 4.837c-.827 0-1.5-.673-1.5-1.5s.673-1.5 1.5-1.5 1.5.673 1.5 1.5-.673 1.5-1.5 1.5zM9.5 5.5C9.5 3.57 7.93 2 6 2S2.5 3.57 2.5 5.5c0 1.58 1.06 2.903 2.5 3.337v6.326c-1.44.434-2.5 1.757-2.5 3.337C2.5 20.43 4.07 22 6 22s3.5-1.57 3.5-3.5c0-1.58-1.06-2.903-2.5-3.337V8.837C8.44 8.403 9.5 7.08 9.5 5.5zm-5 0C4.5 4.673 5.173 4 6 4s1.5.673 1.5 1.5S6.827 7 6 7s-1.5-.673-1.5-1.5zm3 13c0 .827-.673 1.5-1.5 1.5s-1.5-.673-1.5-1.5S5.173 17 6 17s1.5.673 1.5 1.5z"
-      fill="currentColor"
+      d='M19.01 15.163V7.997C19.005 6.391 17.933 4 15 4V2l-4 3 4 3V6c1.829 0 2.001 1.539 2.01 2v7.163c-1.44.434-2.5 1.757-2.5 3.337 0 1.93 1.57 3.5 3.5 3.5s3.5-1.57 3.5-3.5c0-1.58-1.06-2.903-2.5-3.337zm-1 4.837c-.827 0-1.5-.673-1.5-1.5s.673-1.5 1.5-1.5 1.5.673 1.5 1.5-.673 1.5-1.5 1.5zM9.5 5.5C9.5 3.57 7.93 2 6 2S2.5 3.57 2.5 5.5c0 1.58 1.06 2.903 2.5 3.337v6.326c-1.44.434-2.5 1.757-2.5 3.337C2.5 20.43 4.07 22 6 22s3.5-1.57 3.5-3.5c0-1.58-1.06-2.903-2.5-3.337V8.837C8.44 8.403 9.5 7.08 9.5 5.5zm-5 0C4.5 4.673 5.173 4 6 4s1.5.673 1.5 1.5S6.827 7 6 7s-1.5-.673-1.5-1.5zm3 13c0 .827-.673 1.5-1.5 1.5s-1.5-.673-1.5-1.5S5.173 17 6 17s1.5.673 1.5 1.5z'
+      fill='currentColor'
     />
   </svg>
-)
+);
 
 export const ChatIcon = (props: IconSvgProps) => (
   <svg
-    height="1em"
-    viewBox="0 0 24 24"
-    width="1em"
-    xmlns="http://www.w3.org/2000/svg"
+    height='1em'
+    viewBox='0 0 24 24'
+    width='1em'
+    xmlns='http://www.w3.org/2000/svg'
     {...props}
   >
     <path
-      d="M5 18v3.766l1.515-.909L11.277 18H16c1.103 0 2-.897 2-2V8c0-1.103-.897-2-2-2H4c-1.103 0-2 .897-2 2v8c0 1.103.897 2 2 2h1zM4 8h12v8h-5.277L7 18.234V16H4V8z"
-      fill="currentColor"
+      d='M5 18v3.766l1.515-.909L11.277 18H16c1.103 0 2-.897 2-2V8c0-1.103-.897-2-2-2H4c-1.103 0-2 .897-2 2v8c0 1.103.897 2 2 2h1zM4 8h12v8h-5.277L7 18.234V16H4V8z'
+      fill='currentColor'
     />
     <path
-      d="M20 2H8c-1.103 0-2 .897-2 2h12c1.103 0 2 .897 2 2v8c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2z"
-      fill="currentColor"
+      d='M20 2H8c-1.103 0-2 .897-2 2h12c1.103 0 2 .897 2 2v8c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2z'
+      fill='currentColor'
     />
   </svg>
-)
+);
 
 export const PlayCircleIcon = (props: IconSvgProps) => (
   <svg
-    height="1em"
-    viewBox="0 0 24 24"
-    width="1em"
-    xmlns="http://www.w3.org/2000/svg"
+    height='1em'
+    viewBox='0 0 24 24'
+    width='1em'
+    xmlns='http://www.w3.org/2000/svg'
     {...props}
   >
     <path
-      d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z"
-      fill="currentColor"
+      d='M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z'
+      fill='currentColor'
     />
-    <path d="m9 17 8-5-8-5z" fill="currentColor" />
+    <path d='m9 17 8-5-8-5z' fill='currentColor' />
   </svg>
-)
+);
 
 export const VolumeHighIcon = (props: IconSvgProps) => {
   return (
     <svg
-      aria-hidden="true"
-      fill="none"
-      focusable="false"
-      height="1em"
-      role="presentation"
-      viewBox="0 0 24 24"
-      width="1em"
+      aria-hidden='true'
+      fill='none'
+      focusable='false'
+      height='1em'
+      role='presentation'
+      viewBox='0 0 24 24'
+      width='1em'
       {...props}
     >
       <path
-        d="M18.0003 16.7503C17.8403 16.7503 17.6903 16.7003 17.5503 16.6003C17.2203 16.3503 17.1503 15.8803 17.4003 15.5503C18.9703 13.4603 18.9703 10.5403 17.4003 8.45027C17.1503 8.12027 17.2203 7.65027 17.5503 7.40027C17.8803 7.15027 18.3503 7.22027 18.6003 7.55027C20.5603 10.1703 20.5603 13.8303 18.6003 16.4503C18.4503 16.6503 18.2303 16.7503 18.0003 16.7503Z"
-        fill="currentColor"
+        d='M18.0003 16.7503C17.8403 16.7503 17.6903 16.7003 17.5503 16.6003C17.2203 16.3503 17.1503 15.8803 17.4003 15.5503C18.9703 13.4603 18.9703 10.5403 17.4003 8.45027C17.1503 8.12027 17.2203 7.65027 17.5503 7.40027C17.8803 7.15027 18.3503 7.22027 18.6003 7.55027C20.5603 10.1703 20.5603 13.8303 18.6003 16.4503C18.4503 16.6503 18.2303 16.7503 18.0003 16.7503Z'
+        fill='currentColor'
       />
       <path
-        d="M19.8284 19.2503C19.6684 19.2503 19.5184 19.2003 19.3784 19.1003C19.0484 18.8503 18.9784 18.3803 19.2284 18.0503C21.8984 14.4903 21.8984 9.51027 19.2284 5.95027C18.9784 5.62027 19.0484 5.15027 19.3784 4.90027C19.7084 4.65027 20.1784 4.72027 20.4284 5.05027C23.4984 9.14027 23.4984 14.8603 20.4284 18.9503C20.2884 19.1503 20.0584 19.2503 19.8284 19.2503Z"
-        fill="currentColor"
+        d='M19.8284 19.2503C19.6684 19.2503 19.5184 19.2003 19.3784 19.1003C19.0484 18.8503 18.9784 18.3803 19.2284 18.0503C21.8984 14.4903 21.8984 9.51027 19.2284 5.95027C18.9784 5.62027 19.0484 5.15027 19.3784 4.90027C19.7084 4.65027 20.1784 4.72027 20.4284 5.05027C23.4984 9.14027 23.4984 14.8603 20.4284 18.9503C20.2884 19.1503 20.0584 19.2503 19.8284 19.2503Z'
+        fill='currentColor'
       />
       <path
-        d="M14.02 3.78168C12.9 3.16168 11.47 3.32168 10.01 4.23168L7.09 6.06168C6.89 6.18168 6.66 6.25168 6.43 6.25168H5.5H5C2.58 6.25168 1.25 7.58168 1.25 10.0017V14.0017C1.25 16.4217 2.58 17.7517 5 17.7517H5.5H6.43C6.66 17.7517 6.89 17.8217 7.09 17.9417L10.01 19.7717C10.89 20.3217 11.75 20.5917 12.55 20.5917C13.07 20.5917 13.57 20.4717 14.02 20.2217C15.13 19.6017 15.75 18.3117 15.75 16.5917V7.41168C15.75 5.69168 15.13 4.40168 14.02 3.78168Z"
-        fill="currentColor"
+        d='M14.02 3.78168C12.9 3.16168 11.47 3.32168 10.01 4.23168L7.09 6.06168C6.89 6.18168 6.66 6.25168 6.43 6.25168H5.5H5C2.58 6.25168 1.25 7.58168 1.25 10.0017V14.0017C1.25 16.4217 2.58 17.7517 5 17.7517H5.5H6.43C6.66 17.7517 6.89 17.8217 7.09 17.9417L10.01 19.7717C10.89 20.3217 11.75 20.5917 12.55 20.5917C13.07 20.5917 13.57 20.4717 14.02 20.2217C15.13 19.6017 15.75 18.3117 15.75 16.5917V7.41168C15.75 5.69168 15.13 4.40168 14.02 3.78168Z'
+        fill='currentColor'
       />
     </svg>
-  )
-}
+  );
+};
 
 export const VolumeLowIcon = (props: IconSvgProps) => {
   return (
     <svg
-      aria-hidden="true"
-      fill="none"
-      focusable="false"
-      height="1em"
-      role="presentation"
-      viewBox="0 0 24 24"
-      width="1em"
+      aria-hidden='true'
+      fill='none'
+      focusable='false'
+      height='1em'
+      role='presentation'
+      viewBox='0 0 24 24'
+      width='1em'
       {...props}
     >
       <path
-        d="M19.3284 16.7503C19.1684 16.7503 19.0184 16.7003 18.8784 16.6003C18.5484 16.3503 18.4784 15.8803 18.7284 15.5503C20.2984 13.4603 20.2984 10.5403 18.7284 8.45027C18.4784 8.12027 18.5484 7.65027 18.8784 7.40027C19.2084 7.15027 19.6784 7.22027 19.9284 7.55027C21.8984 10.1703 21.8984 13.8303 19.9284 16.4503C19.7884 16.6503 19.5584 16.7503 19.3284 16.7503Z"
-        fill="currentColor"
+        d='M19.3284 16.7503C19.1684 16.7503 19.0184 16.7003 18.8784 16.6003C18.5484 16.3503 18.4784 15.8803 18.7284 15.5503C20.2984 13.4603 20.2984 10.5403 18.7284 8.45027C18.4784 8.12027 18.5484 7.65027 18.8784 7.40027C19.2084 7.15027 19.6784 7.22027 19.9284 7.55027C21.8984 10.1703 21.8984 13.8303 19.9284 16.4503C19.7884 16.6503 19.5584 16.7503 19.3284 16.7503Z'
+        fill='currentColor'
       />
       <path
-        d="M15.3481 3.78168C14.2281 3.16168 12.7981 3.32168 11.3381 4.23168L8.41813 6.06168C8.21813 6.18168 7.98813 6.25168 7.75813 6.25168H6.82812H6.32812C3.90812 6.25168 2.57812 7.58168 2.57812 10.0017V14.0017C2.57812 16.4217 3.90812 17.7517 6.32812 17.7517H6.82812H7.75813C7.98813 17.7517 8.21813 17.8217 8.41813 17.9417L11.3381 19.7717C12.2181 20.3217 13.0781 20.5917 13.8781 20.5917C14.3981 20.5917 14.8981 20.4717 15.3481 20.2217C16.4581 19.6017 17.0781 18.3117 17.0781 16.5917V7.41168C17.0781 5.69168 16.4581 4.40168 15.3481 3.78168Z"
-        fill="currentColor"
+        d='M15.3481 3.78168C14.2281 3.16168 12.7981 3.32168 11.3381 4.23168L8.41813 6.06168C8.21813 6.18168 7.98813 6.25168 7.75813 6.25168H6.82812H6.32812C3.90812 6.25168 2.57812 7.58168 2.57812 10.0017V14.0017C2.57812 16.4217 3.90812 17.7517 6.32812 17.7517H6.82812H7.75813C7.98813 17.7517 8.21813 17.8217 8.41813 17.9417L11.3381 19.7717C12.2181 20.3217 13.0781 20.5917 13.8781 20.5917C14.3981 20.5917 14.8981 20.4717 15.3481 20.2217C16.4581 19.6017 17.0781 18.3117 17.0781 16.5917V7.41168C17.0781 5.69168 16.4581 4.40168 15.3481 3.78168Z'
+        fill='currentColor'
       />
     </svg>
-  )
-}
+  );
+};
 
 export const LayoutIcon = (props: IconSvgProps) => (
   <svg
-    height="1em"
-    viewBox="0 0 24 24"
-    width="1em"
-    xmlns="http://www.w3.org/2000/svg"
+    height='1em'
+    viewBox='0 0 24 24'
+    width='1em'
+    xmlns='http://www.w3.org/2000/svg'
     {...props}
   >
     <path
-      d="M19 3H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2zm0 2 .001 4H5V5h14zM5 11h8v8H5v-8zm10 8v-8h4.001l.001 8H15z"
-      fill="currentColor"
+      d='M19 3H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2zm0 2 .001 4H5V5h14zM5 11h8v8H5v-8zm10 8v-8h4.001l.001 8H15z'
+      fill='currentColor'
     />
   </svg>
-)
+);
 
 export const TagIcon = (props: IconSvgProps) => (
   <svg
-    height="1em"
-    viewBox="0 0 24 24"
-    width="1em"
-    xmlns="http://www.w3.org/2000/svg"
+    height='1em'
+    viewBox='0 0 24 24'
+    width='1em'
+    xmlns='http://www.w3.org/2000/svg'
     {...props}
   >
     <path
-      d="M11.707 2.293A.997.997 0 0 0 11 2H6a.997.997 0 0 0-.707.293l-3 3A.996.996 0 0 0 2 6v5c0 .266.105.52.293.707l10 10a.997.997 0 0 0 1.414 0l8-8a.999.999 0 0 0 0-1.414l-10-10zM13 19.586l-9-9V6.414L6.414 4h4.172l9 9L13 19.586z"
-      fill="currentColor"
+      d='M11.707 2.293A.997.997 0 0 0 11 2H6a.997.997 0 0 0-.707.293l-3 3A.996.996 0 0 0 2 6v5c0 .266.105.52.293.707l10 10a.997.997 0 0 0 1.414 0l8-8a.999.999 0 0 0 0-1.414l-10-10zM13 19.586l-9-9V6.414L6.414 4h4.172l9 9L13 19.586z'
+      fill='currentColor'
     />
-    <circle cx="8.353" cy="8.353" fill="currentColor" r="1.647" />
+    <circle cx='8.353' cy='8.353' fill='currentColor' r='1.647' />
   </svg>
-)
+);
 
 export const UsersIcon = (props: IconSvgProps) => (
   <svg
-    height="1em"
-    viewBox="0 0 24 24"
-    width="1em"
-    xmlns="http://www.w3.org/2000/svg"
+    height='1em'
+    viewBox='0 0 24 24'
+    width='1em'
+    xmlns='http://www.w3.org/2000/svg'
     {...props}
   >
     <path
-      d="M16.604 11.048a5.67 5.67 0 0 0 .751-3.44c-.179-1.784-1.175-3.361-2.803-4.44l-1.105 1.666c1.119.742 1.8 1.799 1.918 2.974a3.693 3.693 0 0 1-1.072 2.986l-1.192 1.192 1.618.475C18.951 13.701 19 17.957 19 18h2c0-1.789-.956-5.285-4.396-6.952z"
-      fill="currentColor"
+      d='M16.604 11.048a5.67 5.67 0 0 0 .751-3.44c-.179-1.784-1.175-3.361-2.803-4.44l-1.105 1.666c1.119.742 1.8 1.799 1.918 2.974a3.693 3.693 0 0 1-1.072 2.986l-1.192 1.192 1.618.475C18.951 13.701 19 17.957 19 18h2c0-1.789-.956-5.285-4.396-6.952z'
+      fill='currentColor'
     />
     <path
-      d="M9.5 12c2.206 0 4-1.794 4-4s-1.794-4-4-4-4 1.794-4 4 1.794 4 4 4zm0-6c1.103 0 2 .897 2 2s-.897 2-2 2-2-.897-2-2 .897-2 2-2zm1.5 7H8c-3.309 0-6 2.691-6 6v1h2v-1c0-2.206 1.794-4 4-4h3c2.206 0 4 1.794 4 4v1h2v-1c0-3.309-2.691-6-6-6z"
-      fill="currentColor"
+      d='M9.5 12c2.206 0 4-1.794 4-4s-1.794-4-4-4-4 1.794-4 4 1.794 4 4 4zm0-6c1.103 0 2 .897 2 2s-.897 2-2 2-2-.897-2-2 .897-2 2-2zm1.5 7H8c-3.309 0-6 2.691-6 6v1h2v-1c0-2.206 1.794-4 4-4h3c2.206 0 4 1.794 4 4v1h2v-1c0-3.309-2.691-6-6-6z'
+      fill='currentColor'
     />
   </svg>
-)
+);
 
 export const WatchersIcon = (props: IconSvgProps) => (
   <svg
-    height="1em"
-    viewBox="0 0 24 24"
-    width="1em"
-    xmlns="http://www.w3.org/2000/svg"
+    height='1em'
+    viewBox='0 0 24 24'
+    width='1em'
+    xmlns='http://www.w3.org/2000/svg'
     {...props}
   >
     <path
-      d="m21.977 13.783-2-9A1.002 1.002 0 0 0 19 4h-3v2h2.198l.961 4.326A4.467 4.467 0 0 0 17.5 10c-1.953 0-3.603 1.258-4.224 3h-2.553c-.621-1.742-2.271-3-4.224-3-.587 0-1.145.121-1.659.326L5.802 6H8V4H5a1 1 0 0 0-.976.783l-2 9 .047.011A4.552 4.552 0 0 0 2 14.5C2 16.981 4.019 19 6.5 19c2.31 0 4.197-1.756 4.449-4h2.102c.252 2.244 2.139 4 4.449 4 2.481 0 4.5-2.019 4.5-4.5 0-.242-.034-.475-.071-.706l.048-.011zM6.5 17C5.122 17 4 15.878 4 14.5S5.122 12 6.5 12 9 13.122 9 14.5 7.878 17 6.5 17zm11 0c-1.379 0-2.5-1.122-2.5-2.5s1.121-2.5 2.5-2.5 2.5 1.122 2.5 2.5-1.121 2.5-2.5 2.5z"
-      fill="currentColor"
+      d='m21.977 13.783-2-9A1.002 1.002 0 0 0 19 4h-3v2h2.198l.961 4.326A4.467 4.467 0 0 0 17.5 10c-1.953 0-3.603 1.258-4.224 3h-2.553c-.621-1.742-2.271-3-4.224-3-.587 0-1.145.121-1.659.326L5.802 6H8V4H5a1 1 0 0 0-.976.783l-2 9 .047.011A4.552 4.552 0 0 0 2 14.5C2 16.981 4.019 19 6.5 19c2.31 0 4.197-1.756 4.449-4h2.102c.252 2.244 2.139 4 4.449 4 2.481 0 4.5-2.019 4.5-4.5 0-.242-.034-.475-.071-.706l.048-.011zM6.5 17C5.122 17 4 15.878 4 14.5S5.122 12 6.5 12 9 13.122 9 14.5 7.878 17 6.5 17zm11 0c-1.379 0-2.5-1.122-2.5-2.5s1.121-2.5 2.5-2.5 2.5 1.122 2.5 2.5-1.121 2.5-2.5 2.5z'
+      fill='currentColor'
     />
   </svg>
-)
+);
 
 export const BookIcon = (props: IconSvgProps) => (
   <svg
-    height="1em"
-    viewBox="0 0 24 24"
-    width="1em"
-    xmlns="http://www.w3.org/2000/svg"
+    height='1em'
+    viewBox='0 0 24 24'
+    width='1em'
+    xmlns='http://www.w3.org/2000/svg'
     {...props}
   >
     <path
-      d="M6 22h15v-2H6.012C5.55 19.988 5 19.805 5 19s.55-.988 1.012-1H21V4c0-1.103-.897-2-2-2H6c-1.206 0-3 .799-3 3v14c0 2.201 1.794 3 3 3zM5 8V5c0-.805.55-.988 1-1h13v12H5V8z"
-      fill="currentColor"
+      d='M6 22h15v-2H6.012C5.55 19.988 5 19.805 5 19s.55-.988 1.012-1H21V4c0-1.103-.897-2-2-2H6c-1.206 0-3 .799-3 3v14c0 2.201 1.794 3 3 3zM5 8V5c0-.805.55-.988 1-1h13v12H5V8z'
+      fill='currentColor'
     />
-    <path d="M8 6h9v2H8z" fill="currentColor" />
+    <path d='M8 6h9v2H8z' fill='currentColor' />
   </svg>
-)
+);
 
 export const ChevronRightIcon = (props: IconSvgProps) => (
   <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    stroke="currentColor"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    strokeWidth="1.5"
-    viewBox="0 0 24 24"
-    width="1em"
+    aria-hidden='true'
+    fill='none'
+    focusable='false'
+    height='1em'
+    role='presentation'
+    stroke='currentColor'
+    strokeLinecap='round'
+    strokeLinejoin='round'
+    strokeWidth='1.5'
+    viewBox='0 0 24 24'
+    width='1em'
     {...props}
   >
-    <path d="m9 18 6-6-6-6" />
+    <path d='m9 18 6-6-6-6' />
   </svg>
-)
+);
 
 export const StarIcon = (props: IconSvgProps) => (
   <svg
-    height="1em"
-    viewBox="0 0 24 24"
-    width="1em"
-    xmlns="http://www.w3.org/2000/svg"
+    height='1em'
+    viewBox='0 0 24 24'
+    width='1em'
+    xmlns='http://www.w3.org/2000/svg'
     {...props}
   >
     <path
-      d="M12 17.27l-5.18 3.68 1.64-6.14-5.47-4.73 6.42-.55L12 3l2.5 6.53 6.42.55-5.47 4.73 1.64 6.14z"
-      fill="#E4C663"
+      d='M12 17.27l-5.18 3.68 1.64-6.14-5.47-4.73 6.42-.55L12 3l2.5 6.53 6.42.55-5.47 4.73 1.64 6.14z'
+      fill='#E4C663'
     />
   </svg>
-)
+);
 
 export const BugIcon2 = (props: IconSvgProps) => (
   <svg
-    viewBox="0 0 64 64"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-hidden="true"
-    role="img"
-    preserveAspectRatio="xMidYMid meet"
+    viewBox='0 0 64 64'
+    xmlns='http://www.w3.org/2000/svg'
+    aria-hidden='true'
+    role='img'
+    preserveAspectRatio='xMidYMid meet'
     {...props}
   >
-    <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
+    <g id='SVGRepo_bgCarrier' strokeWidth='0' />
     <g
-      id="SVGRepo_tracerCarrier"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    ></g>
-    <g id="SVGRepo_iconCarrier">
-      <g fill="#3e4347">
-        <path d="M52.4 57.6c-1.5-1.5-.9-3.4.1-4.4c1-1 2.9-1.6 4.4-.1c1.5 1.5 2.1 4.5 1 5.5c-1 1.1-4 .5-5.5-1"></path>
-        <path d="M55.9 43.4c-1.5-1.5-.9-3.4.1-4.4c1-1 2.9-1.6 4.4-.1c1.5 1.5 2.1 4.5 1 5.6c-1 1-4 .4-5.5-1.1"></path>
+      id='SVGRepo_tracerCarrier'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+    <g id='SVGRepo_iconCarrier'>
+      <g fill='#3e4347'>
+        <path d='M52.4 57.6c-1.5-1.5-.9-3.4.1-4.4c1-1 2.9-1.6 4.4-.1c1.5 1.5 2.1 4.5 1 5.5c-1 1.1-4 .5-5.5-1' />
+        <path d='M55.9 43.4c-1.5-1.5-.9-3.4.1-4.4c1-1 2.9-1.6 4.4-.1c1.5 1.5 2.1 4.5 1 5.6c-1 1-4 .4-5.5-1.1' />
       </g>
       <path
-        d="M12.9 57.6C8.3 57.6 2 56.5 2 51.7c0-5.3 5.2-10.3 10.9-10.3v16.2z"
-        fill="#5b7f32"
-      ></path>
+        d='M12.9 57.6C8.3 57.6 2 56.5 2 51.7c0-5.3 5.2-10.3 10.9-10.3v16.2z'
+        fill='#5b7f32'
+      />
       <path
-        d="M23.9 47.9c0 9-6.3 9.8-10.9 9.8s-9.2-2.1-9.2-5.9c0-4.5 4.6-10.3 9.2-10.3c4.5 0 10.9 1.9 10.9 6.4"
-        fill="#94d82a"
-      ></path>
+        d='M23.9 47.9c0 9-6.3 9.8-10.9 9.8s-9.2-2.1-9.2-5.9c0-4.5 4.6-10.3 9.2-10.3c4.5 0 10.9 1.9 10.9 6.4'
+        fill='#94d82a'
+      />
       <path
-        d="M21.2 57.6c-15.9 0-16-19.1.3-19.1l-.3 19.1"
-        fill="#5b7f32"
-      ></path>
+        d='M21.2 57.6c-15.9 0-16-19.1.3-19.1l-.3 19.1'
+        fill='#5b7f32'
+      />
       <path
-        d="M31.1 46.1c0 10.6-5.6 11.6-10 11.6c-14.4 0-14-19.1.3-19.1c4.5-.1 9.7 2.2 9.7 7.5"
-        fill="#94d82a"
-      ></path>
-      <path d="M30.8 57.6c-17.1 0-16.4-20 0-20v20" fill="#5b7f32"></path>
+        d='M31.1 46.1c0 10.6-5.6 11.6-10 11.6c-14.4 0-14-19.1.3-19.1c4.5-.1 9.7 2.2 9.7 7.5'
+        fill='#94d82a'
+      />
+      <path d='M30.8 57.6c-17.1 0-16.4-20 0-20v20' fill='#5b7f32' />
       <path
-        d="M42.4 45.5c0 11.1-6.5 12.1-11.6 12.1c-14.1 0-14.1-20 0-20c5 0 11.6 2.4 11.6 7.9"
-        fill="#94d82a"
-      ></path>
-      <path d="M44.7 57.6c-21.4 0-19.4-23-1.5-23l1.5 23" fill="#5b7f32"></path>
+        d='M42.4 45.5c0 11.1-6.5 12.1-11.6 12.1c-14.1 0-14.1-20 0-20c5 0 11.6 2.4 11.6 7.9'
+        fill='#94d82a'
+      />
+      <path d='M44.7 57.6c-21.4 0-19.4-23-1.5-23l1.5 23' fill='#5b7f32' />
       <path
-        d="M57.7 45.2c0 11.1-7.1 12.5-13 12.5c-18 0-18-23.4 0-23.4c5.9-.1 13 5.3 13 10.9"
-        fill="#94d82a"
-      ></path>
+        d='M57.7 45.2c0 11.1-7.1 12.5-13 12.5c-18 0-18-23.4 0-23.4c5.9-.1 13 5.3 13 10.9'
+        fill='#94d82a'
+      />
       <path
-        d="M57.4 43.3s-3.6 4.4-9.1 5.1c-5.6.7-20-3.2-11-15.7l20.1 10.6"
-        fill="#5b7f32"
-      ></path>
+        d='M57.4 43.3s-3.6 4.4-9.1 5.1c-5.6.7-20-3.2-11-15.7l20.1 10.6'
+        fill='#5b7f32'
+      />
       <path
-        d="M59.7 38.2c0 5.7-6.6 8.2-12.1 8.2s-12.1-2.5-12.1-8.2c0-5.7 6.6-12.5 12.1-12.5c5.6 0 12.1 6.8 12.1 12.5"
-        fill="#94d82a"
-      ></path>
-      <g fill="#3e4347">
-        <path d="M31.9 54.8c2.1-2.1 4.2-1.8 5.3-.7c1 1 1.4 3.2-.7 5.3c-2.1 2.1-5.8 3.3-6.9 2.3c-1.1-1.1.2-4.8 2.3-6.9"></path>
-        <path d="M34 33.6c2.1 2.1 1.8 4.2.7 5.3c-1 1-3.2 1.4-5.3-.7s-3.3-5.8-2.3-6.8c1.1-1.1 4.8.1 6.9 2.2"></path>
-        <path d="M20.8 55.3c1.8-1.8 3.6-1.5 4.4-.6c.9.9 1.2 2.7-.6 4.4c-1.8 1.8-4.9 2.8-5.8 1.9c-.8-.8.2-4 2-5.7"></path>
-        <path d="M12 55.6c1.5-1.5 3-1.3 3.8-.5c.7.7 1 2.3-.5 3.8s-4.2 2.4-4.9 1.6c-.8-.7.1-3.4 1.6-4.9"></path>
+        d='M59.7 38.2c0 5.7-6.6 8.2-12.1 8.2s-12.1-2.5-12.1-8.2c0-5.7 6.6-12.5 12.1-12.5c5.6 0 12.1 6.8 12.1 12.5'
+        fill='#94d82a'
+      />
+      <g fill='#3e4347'>
+        <path d='M31.9 54.8c2.1-2.1 4.2-1.8 5.3-.7c1 1 1.4 3.2-.7 5.3c-2.1 2.1-5.8 3.3-6.9 2.3c-1.1-1.1.2-4.8 2.3-6.9' />
+        <path d='M34 33.6c2.1 2.1 1.8 4.2.7 5.3c-1 1-3.2 1.4-5.3-.7s-3.3-5.8-2.3-6.8c1.1-1.1 4.8.1 6.9 2.2' />
+        <path d='M20.8 55.3c1.8-1.8 3.6-1.5 4.4-.6c.9.9 1.2 2.7-.6 4.4c-1.8 1.8-4.9 2.8-5.8 1.9c-.8-.8.2-4 2-5.7' />
+        <path d='M12 55.6c1.5-1.5 3-1.3 3.8-.5c.7.7 1 2.3-.5 3.8s-4.2 2.4-4.9 1.6c-.8-.7.1-3.4 1.6-4.9' />
       </g>
-      <g fill="#5b7f32">
-        <path d="M28.4 40l-1 1l1 1l.9-1z"> </path>
-        <path d="M25.4 46.1l-.9 1l.9 1l1-1z"> </path>
-        <path d="M15.6 41l-1 1l1 .9l1-.9z"> </path>
-        <path d="M8.1 45.2l-.9.9l.9 1l1-1z"> </path>
-        <path d="M6.5 47.4l-1 1l1 1l1-1z"> </path>
-        <path d="M34.6 44.5l-1 1l1 1l1-1z"> </path>
-        <path d="M37.1 47.6l-1 1l1 .9l1-.9z"> </path>
-        <path d="M55 47.1l-1 1l1 .9l.9-.9z"> </path>
-        <path d="M54.3 39.1l-1 .9l1 1l.9-1z"> </path>
-        <path d="M40.3 36.3l-1 .9l1 1l.9-1z"> </path>
-        <path d="M24.5 40.5l-2 1.9l2 2l1.9-2z"> </path>
-        <path d="M56.2 34.3l-1.9 2l1.9 1.9l1.9-1.9z"> </path>
-        <path d="M14.6 43.7l-1.9 2l1.9 1.9l2-1.9z"> </path>
+      <g fill='#5b7f32'>
+        <path d='M28.4 40l-1 1l1 1l.9-1z'> </path>
+        <path d='M25.4 46.1l-.9 1l.9 1l1-1z'> </path>
+        <path d='M15.6 41l-1 1l1 .9l1-.9z'> </path>
+        <path d='M8.1 45.2l-.9.9l.9 1l1-1z'> </path>
+        <path d='M6.5 47.4l-1 1l1 1l1-1z'> </path>
+        <path d='M34.6 44.5l-1 1l1 1l1-1z'> </path>
+        <path d='M37.1 47.6l-1 1l1 .9l1-.9z'> </path>
+        <path d='M55 47.1l-1 1l1 .9l.9-.9z'> </path>
+        <path d='M54.3 39.1l-1 .9l1 1l.9-1z'> </path>
+        <path d='M40.3 36.3l-1 .9l1 1l.9-1z'> </path>
+        <path d='M24.5 40.5l-2 1.9l2 2l1.9-2z'> </path>
+        <path d='M56.2 34.3l-1.9 2l1.9 1.9l1.9-1.9z'> </path>
+        <path d='M14.6 43.7l-1.9 2l1.9 1.9l2-1.9z'> </path>
       </g>
-      <g fill="#3e4347">
-        <path d="M40.5 10.3l-.9-.1c.1-1.9-1.3-4.3-3.8-5l.2-.9c2.7.8 4.7 3.4 4.5 6"></path>
-        <path d="M37.6 3.4c.8.9.7 2.3-.2 3.1c-.9.8-2.3.7-3.1-.2c-.8-.9-.7-2.3.2-3.1c.9-.9 2.3-.8 3.1.2"></path>
-        <path d="M49.2 9.8l-.1-.9c1.9-.2 3.9-2.2 4.1-4.7l.9.1c-.2 2.7-2.4 5.2-4.9 5.5"></path>
-        <path d="M55.4 5.6c-.7 1-2.1 1.1-3.1.4c-1-.8-1.1-2.1-.4-3.1c.7-1 2.1-1.1 3.1-.4c.9.7 1.1 2.1.4 3.1"></path>
+      <g fill='#3e4347'>
+        <path d='M40.5 10.3l-.9-.1c.1-1.9-1.3-4.3-3.8-5l.2-.9c2.7.8 4.7 3.4 4.5 6' />
+        <path d='M37.6 3.4c.8.9.7 2.3-.2 3.1c-.9.8-2.3.7-3.1-.2c-.8-.9-.7-2.3.2-3.1c.9-.9 2.3-.8 3.1.2' />
+        <path d='M49.2 9.8l-.1-.9c1.9-.2 3.9-2.2 4.1-4.7l.9.1c-.2 2.7-2.4 5.2-4.9 5.5' />
+        <path d='M55.4 5.6c-.7 1-2.1 1.1-3.1.4c-1-.8-1.1-2.1-.4-3.1c.7-1 2.1-1.1 3.1-.4c.9.7 1.1 2.1.4 3.1' />
       </g>
       <path
-        d="M55.7 29.7c-2.4 7.5-16.4 7.9-18.3 3l18.3-3"
-        fill="#5b7f32"
-      ></path>
+        d='M55.7 29.7c-2.4 7.5-16.4 7.9-18.3 3l18.3-3'
+        fill='#5b7f32'
+      />
       <path
-        d="M59.2 22.4c.5 10.4-20.7 17.5-26.9 5.2C27.6 18.2 35 8.4 42.8 7.5C55.6 6 59 17.4 59.2 22.4z"
-        fill="#94d82a"
-      ></path>
-      <g fill="#3e4347">
-        <path d="M51.3 18.3c0 1.7-.9 3-2 3s-2-1.3-2-3s.9-3 2-3s2 1.4 2 3"></path>
-        <ellipse cx="37.4" cy="18.3" rx="2" ry="3"></ellipse>
-        <path d="M43.3 29.3c-2.4 0-4.5-.9-4.5-1.8c0-.1 0-.2.1-.3c.1-.1.2-.1.4-.1s.3.1.6.2c.6.2 1.7.7 3.5.7s2.9-.5 3.4-.7c.3-.1.4-.2.6-.2c.2 0 .4.1.4.4c0 .9-2.1 1.8-4.5 1.8"></path>
+        d='M59.2 22.4c.5 10.4-20.7 17.5-26.9 5.2C27.6 18.2 35 8.4 42.8 7.5C55.6 6 59 17.4 59.2 22.4z'
+        fill='#94d82a'
+      />
+      <g fill='#3e4347'>
+        <path d='M51.3 18.3c0 1.7-.9 3-2 3s-2-1.3-2-3s.9-3 2-3s2 1.4 2 3' />
+        <ellipse cx='37.4' cy='18.3' rx='2' ry='3' />
+        <path d='M43.3 29.3c-2.4 0-4.5-.9-4.5-1.8c0-.1 0-.2.1-.3c.1-.1.2-.1.4-.1s.3.1.6.2c.6.2 1.7.7 3.5.7s2.9-.5 3.4-.7c.3-.1.4-.2.6-.2c.2 0 .4.1.4.4c0 .9-2.1 1.8-4.5 1.8' />
       </g>
-      <g opacity=".7" fill="#ea83a3">
-        <ellipse cx="53.7" cy="23.8" rx="3.2" ry="2.5"></ellipse>
-        <ellipse cx="34.4" cy="23.7" rx="2.6" ry="1.8"></ellipse>
+      <g opacity='.7' fill='#ea83a3'>
+        <ellipse cx='53.7' cy='23.8' rx='3.2' ry='2.5' />
+        <ellipse cx='34.4' cy='23.7' rx='2.6' ry='1.8' />
       </g>
     </g>
   </svg>
-)
+);
 
 export const WebUIIcon = (props: IconSvgProps) => (
   <>
     <svg
-      width="63.9375"
-      height="64.56657608695652"
-      viewBox="0 0 63.9375 66.56657608695652"
-      xmlns="http://www.w3.org/2000/svg"
+      width='63.9375'
+      height='64.56657608695652'
+      viewBox='0 0 63.9375 66.56657608695652'
+      xmlns='http://www.w3.org/2000/svg'
       style={{ verticalAlign: 'text-top' }}
       {...props}
     >
       <g
-        id="svgGroup"
-        strokeLinecap="round"
-        stroke="#000"
-        fill="transparent"
+        id='svgGroup'
+        strokeLinecap='round'
+        stroke='#000'
+        fill='transparent'
         style={{
           fill: 'transparent',
           fillOpacity: 0,
           stroke: '#C5BEF6',
-          strokeWidth: '2px'
+          strokeWidth: '2px',
         }}
       >
         <path
-          d="M53.69 19.19L61.94 19.19L54.44 61.19Q54.19 62.44 53.31 63.34Q52.44 64.25 51.19 64.50L51.19 64.50Q49.91 64.72 48.77 64.22Q47.63 63.72 46.97 62.66L46.97 62.66L32.09 38.22L17.19 62.66Q16.66 63.56 15.73 64.06Q14.81 64.56 13.75 64.56L13.75 64.56Q12.28 64.56 11.16 63.63Q10.03 62.69 9.78 61.19L9.78 61.19L2.22 19.19L10.47 19.19L15.84 48.78L28.66 28.34Q29.19 27.44 30.11 26.94Q31.03 26.44 32.09 26.44L32.09 26.44Q33.16 26.44 34.06 26.94Q34.97 27.44 35.56 28.34L35.56 28.34L48.31 48.78L53.69 19.19Z"
+          d='M53.69 19.19L61.94 19.19L54.44 61.19Q54.19 62.44 53.31 63.34Q52.44 64.25 51.19 64.50L51.19 64.50Q49.91 64.72 48.77 64.22Q47.63 63.72 46.97 62.66L46.97 62.66L32.09 38.22L17.19 62.66Q16.66 63.56 15.73 64.06Q14.81 64.56 13.75 64.56L13.75 64.56Q12.28 64.56 11.16 63.63Q10.03 62.69 9.78 61.19L9.78 61.19L2.22 19.19L10.47 19.19L15.84 48.78L28.66 28.34Q29.19 27.44 30.11 26.94Q31.03 26.44 32.09 26.44L32.09 26.44Q33.16 26.44 34.06 26.94Q34.97 27.44 35.56 28.34L35.56 28.34L48.31 48.78L53.69 19.19Z'
           style={{
             strokeDasharray: '295, 297',
-            strokeDashoffset: 296
+            strokeDashoffset: 296,
           }}
         >
           <animate
-            attributeName="stroke-dashoffset"
-            to="0"
-            dur="800ms"
-            calcMode="linear"
-            repeatCount="1"
-            fill="freeze"
-            begin="0ms"
-          ></animate>
+            attributeName='stroke-dashoffset'
+            to='0'
+            dur='800ms'
+            calcMode='linear'
+            repeatCount='1'
+            fill='freeze'
+            begin='0ms'
+          />
           <animate
-            attributeName="fillOpacity"
-            to="1"
-            dur="800ms"
-            calcMode="linear"
-            repeatCount="1"
-            fill="freeze"
-            begin="0ms"
-          ></animate>
+            attributeName='fillOpacity'
+            to='1'
+            dur='800ms'
+            calcMode='linear'
+            repeatCount='1'
+            fill='freeze'
+            begin='0ms'
+          />
         </path>
       </g>
     </svg>
     <svg
-      width="42.15625"
-      height="64"
-      viewBox="0 0 42.15625 66"
-      xmlns="http://www.w3.org/2000/svg"
+      width='42.15625'
+      height='64'
+      viewBox='0 0 42.15625 66'
+      xmlns='http://www.w3.org/2000/svg'
       style={{ verticalAlign: 'text-top' }}
       {...props}
     >
       <g
-        id="svgGroup"
-        strokeLinecap="round"
-        stroke="#000"
-        fill="transparent"
+        id='svgGroup'
+        strokeLinecap='round'
+        stroke='#000'
+        fill='transparent'
         style={{
           fill: 'transparent',
           fillOpacity: 0,
           stroke: '#E5C5F7',
-          strokeWidth: '2px'
+          strokeWidth: '2px',
         }}
       >
         <path
-          d="M40.16 41.41L40.16 41.41Q40.16 43.09 39.56 45.05Q38.97 47 37.64 48.67Q36.31 50.34 34.17 51.47Q32.03 52.59 28.97 52.59L28.97 52.59L14.31 52.59L14.31 44.88L28.97 44.88Q30.63 44.88 31.53 43.86Q32.44 42.84 32.44 41.34L32.44 41.34Q32.44 39.75 31.42 38.84Q30.41 37.94 28.97 37.94L28.97 37.94L14.31 37.94Q12.66 37.94 11.75 38.95Q10.84 39.97 10.84 41.47L10.84 41.47L10.84 52.81Q10.84 54.44 11.86 55.34Q12.88 56.25 14.38 56.25L14.38 56.25L28.97 56.25L28.97 64L14.31 64Q12.63 64 10.67 63.41Q8.72 62.81 7.05 61.48Q5.38 60.16 4.25 58.02Q3.13 55.88 3.13 52.81L3.13 52.81L3.13 41.41Q3.13 39.72 3.72 37.77Q4.31 35.81 5.64 34.14Q6.97 32.47 9.11 31.34Q11.25 30.22 14.31 30.22L14.31 30.22L28.97 30.22Q30.66 30.22 32.61 30.81Q34.56 31.41 36.23 32.73Q37.91 34.06 39.03 36.20Q40.16 38.34 40.16 41.41Z"
+          d='M40.16 41.41L40.16 41.41Q40.16 43.09 39.56 45.05Q38.97 47 37.64 48.67Q36.31 50.34 34.17 51.47Q32.03 52.59 28.97 52.59L28.97 52.59L14.31 52.59L14.31 44.88L28.97 44.88Q30.63 44.88 31.53 43.86Q32.44 42.84 32.44 41.34L32.44 41.34Q32.44 39.75 31.42 38.84Q30.41 37.94 28.97 37.94L28.97 37.94L14.31 37.94Q12.66 37.94 11.75 38.95Q10.84 39.97 10.84 41.47L10.84 41.47L10.84 52.81Q10.84 54.44 11.86 55.34Q12.88 56.25 14.38 56.25L14.38 56.25L28.97 56.25L28.97 64L14.31 64Q12.63 64 10.67 63.41Q8.72 62.81 7.05 61.48Q5.38 60.16 4.25 58.02Q3.13 55.88 3.13 52.81L3.13 52.81L3.13 41.41Q3.13 39.72 3.72 37.77Q4.31 35.81 5.64 34.14Q6.97 32.47 9.11 31.34Q11.25 30.22 14.31 30.22L14.31 30.22L28.97 30.22Q30.66 30.22 32.61 30.81Q34.56 31.41 36.23 32.73Q37.91 34.06 39.03 36.20Q40.16 38.34 40.16 41.41Z'
           style={{ strokeDasharray: '219, 221', strokeDashoffset: 220 }}
         >
           <animate
-            attributeName="stroke-dashoffset"
-            to="0"
-            dur="800ms"
-            calcMode="linear"
-            repeatCount="1"
-            fill="freeze"
-            begin="800ms"
-          ></animate>
+            attributeName='stroke-dashoffset'
+            to='0'
+            dur='800ms'
+            calcMode='linear'
+            repeatCount='1'
+            fill='freeze'
+            begin='800ms'
+          />
           <animate
-            attributeName="fillOpacity"
-            to="1"
-            dur="800ms"
-            calcMode="linear"
-            repeatCount="1"
-            fill="freeze"
-            begin="800ms"
-          ></animate>
+            attributeName='fillOpacity'
+            to='1'
+            dur='800ms'
+            calcMode='linear'
+            repeatCount='1'
+            fill='freeze'
+            begin='800ms'
+          />
         </path>
       </g>
     </svg>
     <svg
-      width="43.0625"
-      height="64"
-      viewBox="0 0 43.0625 66"
-      xmlns="http://www.w3.org/2000/svg"
+      width='43.0625'
+      height='64'
+      viewBox='0 0 43.0625 66'
+      xmlns='http://www.w3.org/2000/svg'
       style={{
-        verticalAlign: 'text-top'
+        verticalAlign: 'text-top',
       }}
       {...props}
     >
       <g
-        id="svgGroup"
-        strokeLinecap="round"
-        stroke="#000"
-        fill="transparent"
+        id='svgGroup'
+        strokeLinecap='round'
+        stroke='#000'
+        fill='transparent'
         style={{
           fill: 'transparent',
           fillOpacity: 0,
           stroke: '#DDC6F7',
-          strokeWidth: '2px'
+          strokeWidth: '2px',
         }}
       >
         <path
-          d="M41.06 41.59L41.06 52.59Q41.06 53.75 40.80 55.03Q40.53 56.31 39.97 57.58Q39.41 58.84 38.52 60Q37.63 61.16 36.36 62.05Q35.09 62.94 33.44 63.47Q31.78 64 29.69 64L29.69 64L15.03 64Q13.88 64 12.59 63.73Q11.31 63.47 10.05 62.91Q8.78 62.34 7.63 61.45Q6.47 60.56 5.58 59.30Q4.69 58.03 4.16 56.36Q3.63 54.69 3.63 52.59L3.63 52.59L3.63 15.94L11.75 15.94L11.75 52.59Q11.75 54.09 12.69 54.98Q13.63 55.88 15.03 55.88L15.03 55.88L29.69 55.88Q31.22 55.88 32.08 54.97Q32.94 54.06 32.94 52.59L32.94 52.59L32.94 41.59Q32.94 40.06 32.03 39.20Q31.13 38.34 29.69 38.34L29.69 38.34L15.03 38.34L15.03 30.22L29.69 30.22Q30.84 30.22 32.13 30.48Q33.41 30.75 34.67 31.31Q35.94 31.88 37.09 32.77Q38.25 33.66 39.13 34.92Q40 36.19 40.53 37.84Q41.06 39.50 41.06 41.59L41.06 41.59Z"
+          d='M41.06 41.59L41.06 52.59Q41.06 53.75 40.80 55.03Q40.53 56.31 39.97 57.58Q39.41 58.84 38.52 60Q37.63 61.16 36.36 62.05Q35.09 62.94 33.44 63.47Q31.78 64 29.69 64L29.69 64L15.03 64Q13.88 64 12.59 63.73Q11.31 63.47 10.05 62.91Q8.78 62.34 7.63 61.45Q6.47 60.56 5.58 59.30Q4.69 58.03 4.16 56.36Q3.63 54.69 3.63 52.59L3.63 52.59L3.63 15.94L11.75 15.94L11.75 52.59Q11.75 54.09 12.69 54.98Q13.63 55.88 15.03 55.88L15.03 55.88L29.69 55.88Q31.22 55.88 32.08 54.97Q32.94 54.06 32.94 52.59L32.94 52.59L32.94 41.59Q32.94 40.06 32.03 39.20Q31.13 38.34 29.69 38.34L29.69 38.34L15.03 38.34L15.03 30.22L29.69 30.22Q30.84 30.22 32.13 30.48Q33.41 30.75 34.67 31.31Q35.94 31.88 37.09 32.77Q38.25 33.66 39.13 34.92Q40 36.19 40.53 37.84Q41.06 39.50 41.06 41.59L41.06 41.59Z'
           style={{
             strokeDasharray: '239, 241',
-            strokeDashoffset: 240
+            strokeDashoffset: 240,
           }}
         >
           <animate
-            attributeName="stroke-dashoffset"
-            to="0"
-            dur="800ms"
-            calcMode="linear"
-            repeatCount="1"
-            fill="freeze"
-            begin="1600ms"
-          ></animate>
+            attributeName='stroke-dashoffset'
+            to='0'
+            dur='800ms'
+            calcMode='linear'
+            repeatCount='1'
+            fill='freeze'
+            begin='1600ms'
+          />
           <animate
-            attributeName="fillOpacity"
-            to="1"
-            dur="800ms"
-            calcMode="linear"
-            repeatCount="1"
-            fill="freeze"
-            begin="1600ms"
-          ></animate>
+            attributeName='fillOpacity'
+            to='1'
+            dur='800ms'
+            calcMode='linear'
+            repeatCount='1'
+            fill='freeze'
+            begin='1600ms'
+          />
         </path>
       </g>
     </svg>
     <svg
-      width="50.625"
-      height="64"
-      viewBox="0 0 50.625 66"
-      xmlns="http://www.w3.org/2000/svg"
+      width='50.625'
+      height='64'
+      viewBox='0 0 50.625 66'
+      xmlns='http://www.w3.org/2000/svg'
       style={{
-        verticalAlign: 'text-top'
+        verticalAlign: 'text-top',
       }}
       {...props}
     >
       <g
-        id="svgGroup"
-        strokeLinecap="round"
-        stroke="#000"
-        fill="transparent"
+        id='svgGroup'
+        strokeLinecap='round'
+        stroke='#000'
+        fill='transparent'
         style={{
           fill: 'transparent',
           fillOpacity: 0,
           stroke: '#A5D1F7',
-          strokeWidth: '2px'
+          strokeWidth: '2px',
         }}
       >
         <path
-          d="M48.63 19.19L48.63 59.91Q48.63 60.78 48.31 61.53Q48 62.28 47.44 62.83Q46.88 63.38 46.13 63.69Q45.38 64 44.53 64L44.53 64L26.22 64Q23.63 64 20.97 63.44Q18.31 62.88 15.83 61.70Q13.34 60.53 11.16 58.72Q8.97 56.91 7.33 54.42Q5.69 51.94 4.75 48.73Q3.81 45.53 3.81 41.59L3.81 41.59L3.81 19.19L11.94 19.19L11.94 41.59Q11.94 45.03 12.89 47.41Q13.84 49.78 15.31 51.38Q16.78 52.97 18.53 53.88Q20.28 54.78 21.86 55.22Q23.44 55.66 24.64 55.77Q25.84 55.88 26.22 55.88L26.22 55.88L40.50 55.88L40.50 19.19L48.63 19.19Z"
+          d='M48.63 19.19L48.63 59.91Q48.63 60.78 48.31 61.53Q48 62.28 47.44 62.83Q46.88 63.38 46.13 63.69Q45.38 64 44.53 64L44.53 64L26.22 64Q23.63 64 20.97 63.44Q18.31 62.88 15.83 61.70Q13.34 60.53 11.16 58.72Q8.97 56.91 7.33 54.42Q5.69 51.94 4.75 48.73Q3.81 45.53 3.81 41.59L3.81 41.59L3.81 19.19L11.94 19.19L11.94 41.59Q11.94 45.03 12.89 47.41Q13.84 49.78 15.31 51.38Q16.78 52.97 18.53 53.88Q20.28 54.78 21.86 55.22Q23.44 55.66 24.64 55.77Q25.84 55.88 26.22 55.88L26.22 55.88L40.50 55.88L40.50 19.19L48.63 19.19Z'
           style={{
             strokeDasharray: '235, 237',
-            strokeDashoffset: 236
+            strokeDashoffset: 236,
           }}
         >
           <animate
-            attributeName="stroke-dashoffset"
-            to="0"
-            dur="800ms"
-            calcMode="linear"
-            repeatCount="1"
-            fill="freeze"
-            begin="2400ms"
-          ></animate>
+            attributeName='stroke-dashoffset'
+            to='0'
+            dur='800ms'
+            calcMode='linear'
+            repeatCount='1'
+            fill='freeze'
+            begin='2400ms'
+          />
           <animate
-            attributeName="fillOpacity"
-            to="1"
-            dur="800ms"
-            calcMode="linear"
-            repeatCount="1"
-            fill="freeze"
-            begin="2400ms"
-          ></animate>
+            attributeName='fillOpacity'
+            to='1'
+            dur='800ms'
+            calcMode='linear'
+            repeatCount='1'
+            fill='freeze'
+            begin='2400ms'
+          />
         </path>
       </g>
     </svg>
     <svg
-      width="14.90625"
-      height="64"
-      viewBox="0 0 14.90625 66"
-      xmlns="http://www.w3.org/2000/svg"
+      width='14.90625'
+      height='64'
+      viewBox='0 0 14.90625 66'
+      xmlns='http://www.w3.org/2000/svg'
       style={{
-        verticalAlign: 'text-top'
+        verticalAlign: 'text-top',
       }}
       {...props}
     >
       <g
-        id="svgGroup"
-        strokeLinecap="round"
-        stroke="#000"
-        fill="transparent"
+        id='svgGroup'
+        strokeLinecap='round'
+        stroke='#000'
+        fill='transparent'
         style={{
           fill: 'transparent',
           fillOpacity: 0,
           stroke: '#A5B7F7',
-          strokeWidth: '2px'
+          strokeWidth: '2px',
         }}
       >
         <path
-          d="M12.91 19.19L12.91 64L4.78 64L4.78 19.19L12.91 19.19Z"
+          d='M12.91 19.19L12.91 64L4.78 64L4.78 19.19L12.91 19.19Z'
           style={{ strokeDasharray: '105, 107', strokeDashoffset: 106 }}
         >
           <animate
-            attributeName="stroke-dashoffset"
-            to="0"
-            dur="800ms"
-            calcMode="linear"
-            repeatCount="1"
-            fill="freeze"
-            begin="3200ms"
-          ></animate>
+            attributeName='stroke-dashoffset'
+            to='0'
+            dur='800ms'
+            calcMode='linear'
+            repeatCount='1'
+            fill='freeze'
+            begin='3200ms'
+          />
           <animate
-            attributeName="fillOpacity"
-            to="1"
-            dur="800ms"
-            calcMode="linear"
-            repeatCount="1"
-            fill="freeze"
-            begin="3200ms"
-          ></animate>
+            attributeName='fillOpacity'
+            to='1'
+            dur='800ms'
+            calcMode='linear'
+            repeatCount='1'
+            fill='freeze'
+            begin='3200ms'
+          />
         </path>
       </g>
     </svg>
   </>
-)
+);
 
 export const BietiaopIcon = (props: IconSvgProps) => (
   <>
     <svg
-      width="24.688"
-      height="32"
-      viewBox="0 0 24.688 34"
-      xmlns="http://www.w3.org/2000/svg"
+      width='24.688'
+      height='32'
+      viewBox='0 0 24.688 34'
+      xmlns='http://www.w3.org/2000/svg'
       style={{
-        verticalAlign: 'text-top'
+        verticalAlign: 'text-top',
       }}
       {...props}
     >
       <g
-        id="svgGroup"
-        strokeLinecap="round"
-        stroke="#000"
-        fill="transparent"
+        id='svgGroup'
+        strokeLinecap='round'
+        stroke='#000'
+        fill='transparent'
         style={{
           fill: 'transparent',
           fillOpacity: 0,
           stroke: '#2B72FF',
-          strokeWidth: '2px'
+          strokeWidth: '2px',
         }}
       >
         <path
-          d="M6.40 32L1.76 32L1.76 9.12L6.40 9.12L6.40 32ZM13.60 32L2.56 32L2.56 28.32L13.60 28.32Q15.68 28.32 16.78 27.18Q17.89 26.05 17.89 23.78L17.89 23.78Q17.89 21.47 16.78 20.34Q15.68 19.20 13.60 19.20L13.60 19.20L2.88 19.20L2.88 15.52L13.60 15.52Q17.89 15.52 20.29 17.63Q22.69 19.74 22.69 23.78L22.69 23.78Q22.69 27.78 20.29 29.89Q17.89 32 13.60 32L13.60 32Z"
+          d='M6.40 32L1.76 32L1.76 9.12L6.40 9.12L6.40 32ZM13.60 32L2.56 32L2.56 28.32L13.60 28.32Q15.68 28.32 16.78 27.18Q17.89 26.05 17.89 23.78L17.89 23.78Q17.89 21.47 16.78 20.34Q15.68 19.20 13.60 19.20L13.60 19.20L2.88 19.20L2.88 15.52L13.60 15.52Q17.89 15.52 20.29 17.63Q22.69 19.74 22.69 23.78L22.69 23.78Q22.69 27.78 20.29 29.89Q17.89 32 13.60 32L13.60 32Z'
           style={{
             strokeDasharray: '148, 150',
-            strokeDashoffset: 149
+            strokeDashoffset: 149,
           }}
         >
           <animate
-            attributeName="stroke-dashoffset"
-            to="0"
-            dur="800ms"
-            calcMode="linear"
-            repeatCount="1"
-            fill="freeze"
-            begin="0ms"
-          ></animate>
+            attributeName='stroke-dashoffset'
+            to='0'
+            dur='800ms'
+            calcMode='linear'
+            repeatCount='1'
+            fill='freeze'
+            begin='0ms'
+          />
           <animate
-            attributeName="fillOpacity"
-            to="1"
-            dur="800ms"
-            calcMode="linear"
-            repeatCount="1"
-            fill="freeze"
-            begin="0ms"
-          ></animate>
+            attributeName='fillOpacity'
+            to='1'
+            dur='800ms'
+            calcMode='linear'
+            repeatCount='1'
+            fill='freeze'
+            begin='0ms'
+          />
         </path>
       </g>
     </svg>
     <svg
-      width="8.432"
-      height="32"
-      viewBox="0 0 8.432 34"
-      xmlns="http://www.w3.org/2000/svg"
+      width='8.432'
+      height='32'
+      viewBox='0 0 8.432 34'
+      xmlns='http://www.w3.org/2000/svg'
       style={{
-        verticalAlign: 'text-top'
+        verticalAlign: 'text-top',
       }}
       {...props}
     >
       <g
-        id="svgGroup"
-        strokeLinecap="round"
-        stroke="#000"
-        fill="transparent"
+        id='svgGroup'
+        strokeLinecap='round'
+        stroke='#000'
+        fill='transparent'
         style={{
           fill: 'transparent',
           fillOpacity: 0,
           stroke: '#2B72FF',
-          strokeWidth: '2px'
+          strokeWidth: '2px',
         }}
       >
         <path
-          d="M6.40 32L1.76 32L1.76 15.52L6.40 15.52L6.40 32ZM6.43 12.80L1.73 12.80L1.73 9.18L6.43 9.18L6.43 12.80Z"
+          d='M6.40 32L1.76 32L1.76 15.52L6.40 15.52L6.40 32ZM6.43 12.80L1.73 12.80L1.73 9.18L6.43 9.18L6.43 12.80Z'
           style={{ strokeDasharray: '58, 60', strokeDashoffset: 59 }}
         >
           <animate
-            attributeName="stroke-dashoffset"
-            to="0"
-            dur="800ms"
-            calcMode="linear"
-            repeatCount="1"
-            fill="freeze"
-            begin="600ms"
-          ></animate>
+            attributeName='stroke-dashoffset'
+            to='0'
+            dur='800ms'
+            calcMode='linear'
+            repeatCount='1'
+            fill='freeze'
+            begin='600ms'
+          />
           <animate
-            attributeName="fillOpacity"
-            to="1"
-            dur="800ms"
-            calcMode="linear"
-            repeatCount="1"
-            fill="freeze"
-            begin="600ms"
-          ></animate>
+            attributeName='fillOpacity'
+            to='1'
+            dur='800ms'
+            calcMode='linear'
+            repeatCount='1'
+            fill='freeze'
+            begin='600ms'
+          />
         </path>
       </g>
     </svg>
     <svg
-      width="26"
-      height="32.16"
-      viewBox="0 0 26 34.16"
-      xmlns="http://www.w3.org/2000/svg"
+      width='26'
+      height='32.16'
+      viewBox='0 0 26 34.16'
+      xmlns='http://www.w3.org/2000/svg'
       style={{
-        verticalAlign: 'text-top'
+        verticalAlign: 'text-top',
       }}
       {...props}
     >
       <g
-        id="svgGroup"
-        strokeLinecap="round"
-        stroke="#000"
-        fill="transparent"
+        id='svgGroup'
+        strokeLinecap='round'
+        stroke='#000'
+        fill='transparent'
         style={{
           fill: 'transparent',
           fillOpacity: 0,
           stroke: '#2B72FF',
-          strokeWidth: '2px'
+          strokeWidth: '2px',
         }}
       >
         <path
-          d="M23.17 32.16L10.21 32.16Q5.92 32.16 3.52 30.03Q1.12 27.90 1.12 23.78L1.12 23.78Q1.12 19.62 3.52 17.49Q5.92 15.36 10.21 15.36L10.21 15.36L18.21 15.36Q21.02 15.36 22.51 16.69Q24 18.02 24 20.48L24 20.48Q24 25.50 18.21 25.50L18.21 25.50L6.11 25.50Q6.78 28.48 10.21 28.48L10.21 28.48L23.17 28.48L23.17 32.16ZM17.98 19.04L10.21 19.04Q6.91 19.04 6.14 21.82L6.14 21.82L17.98 21.82Q18.62 21.82 18.99 21.44Q19.36 21.06 19.36 20.38L19.36 20.38Q19.36 19.04 17.98 19.04L17.98 19.04Z"
+          d='M23.17 32.16L10.21 32.16Q5.92 32.16 3.52 30.03Q1.12 27.90 1.12 23.78L1.12 23.78Q1.12 19.62 3.52 17.49Q5.92 15.36 10.21 15.36L10.21 15.36L18.21 15.36Q21.02 15.36 22.51 16.69Q24 18.02 24 20.48L24 20.48Q24 25.50 18.21 25.50L18.21 25.50L6.11 25.50Q6.78 28.48 10.21 28.48L10.21 28.48L23.17 28.48L23.17 32.16ZM17.98 19.04L10.21 19.04Q6.91 19.04 6.14 21.82L6.14 21.82L17.98 21.82Q18.62 21.82 18.99 21.44Q19.36 21.06 19.36 20.38L19.36 20.38Q19.36 19.04 17.98 19.04L17.98 19.04Z'
           style={{
             strokeDasharray: '130, 132',
-            strokeDashoffset: 131
+            strokeDashoffset: 131,
           }}
         >
           <animate
-            attributeName="stroke-dashoffset"
-            to="0"
-            dur="800ms"
-            calcMode="linear"
-            repeatCount="1"
-            fill="freeze"
-            begin="1200ms"
-          ></animate>
+            attributeName='stroke-dashoffset'
+            to='0'
+            dur='800ms'
+            calcMode='linear'
+            repeatCount='1'
+            fill='freeze'
+            begin='1200ms'
+          />
           <animate
-            attributeName="fillOpacity"
-            to="1"
-            dur="800ms"
-            calcMode="linear"
-            repeatCount="1"
-            fill="freeze"
-            begin="1200ms"
-          ></animate>
+            attributeName='fillOpacity'
+            to='1'
+            dur='800ms'
+            calcMode='linear'
+            repeatCount='1'
+            fill='freeze'
+            begin='1200ms'
+          />
         </path>
       </g>
     </svg>
     <svg
-      width="19.312"
-      height="32"
-      viewBox="0 0 19.312 34"
-      xmlns="http://www.w3.org/2000/svg"
+      width='19.312'
+      height='32'
+      viewBox='0 0 19.312 34'
+      xmlns='http://www.w3.org/2000/svg'
       style={{
-        verticalAlign: 'text-top'
+        verticalAlign: 'text-top',
       }}
       {...props}
     >
       <g
-        id="svgGroup"
-        strokeLinecap="round"
-        stroke="#000"
-        fill="transparent"
+        id='svgGroup'
+        strokeLinecap='round'
+        stroke='#000'
+        fill='transparent'
         style={{
           fill: 'transparent',
           fillOpacity: 0,
           stroke: '#2B72FF',
-          strokeWidth: '2px'
+          strokeWidth: '2px',
         }}
       >
         <path
-          d="M17.31 32L10.34 32Q7.55 32 6.24 30.61Q4.93 29.22 4.93 26.94L4.93 26.94L4.93 19.20L0.16 19.20L0.16 15.52L4.93 15.52L4.93 10.46L9.57 10.46L9.57 15.52L16.42 15.52L16.42 19.20L9.57 19.20L9.57 26.37Q9.57 28.32 11.49 28.32L11.49 28.32L17.31 28.32L17.31 32Z"
+          d='M17.31 32L10.34 32Q7.55 32 6.24 30.61Q4.93 29.22 4.93 26.94L4.93 26.94L4.93 19.20L0.16 19.20L0.16 15.52L4.93 15.52L4.93 10.46L9.57 10.46L9.57 15.52L16.42 15.52L16.42 19.20L9.57 19.20L9.57 26.37Q9.57 28.32 11.49 28.32L11.49 28.32L17.31 28.32L17.31 32Z'
           style={{ strokeDasharray: '88, 90', strokeDashoffset: 89 }}
         >
           <animate
-            attributeName="stroke-dashoffset"
-            to="0"
-            dur="800ms"
-            calcMode="linear"
-            repeatCount="1"
-            fill="freeze"
-            begin="1800ms"
-          ></animate>
+            attributeName='stroke-dashoffset'
+            to='0'
+            dur='800ms'
+            calcMode='linear'
+            repeatCount='1'
+            fill='freeze'
+            begin='1800ms'
+          />
           <animate
-            attributeName="fillOpacity"
-            to="1"
-            dur="800ms"
-            calcMode="linear"
-            repeatCount="1"
-            fill="freeze"
-            begin="1800ms"
-          ></animate>
+            attributeName='fillOpacity'
+            to='1'
+            dur='800ms'
+            calcMode='linear'
+            repeatCount='1'
+            fill='freeze'
+            begin='1800ms'
+          />
         </path>
       </g>
     </svg>
     <svg
-      width="8.432"
-      height="32"
-      viewBox="0 0 8.432 34"
-      xmlns="http://www.w3.org/2000/svg"
+      width='8.432'
+      height='32'
+      viewBox='0 0 8.432 34'
+      xmlns='http://www.w3.org/2000/svg'
       style={{
-        verticalAlign: 'text-top'
+        verticalAlign: 'text-top',
       }}
       {...props}
     >
       <g
-        id="svgGroup"
-        strokeLinecap="round"
-        stroke="#000"
-        fill="transparent"
+        id='svgGroup'
+        strokeLinecap='round'
+        stroke='#000'
+        fill='transparent'
         style={{
           fill: 'transparent',
           fillOpacity: 0,
           stroke: '#2B72FF',
-          strokeWidth: '2px'
+          strokeWidth: '2px',
         }}
       >
         <path
-          d="M6.40 32L1.76 32L1.76 15.52L6.40 15.52L6.40 32ZM6.43 12.80L1.73 12.80L1.73 9.18L6.43 9.18L6.43 12.80Z"
+          d='M6.40 32L1.76 32L1.76 15.52L6.40 15.52L6.40 32ZM6.43 12.80L1.73 12.80L1.73 9.18L6.43 9.18L6.43 12.80Z'
           style={{ strokeDasharray: '58, 60', strokeDashoffset: 59 }}
         >
           <animate
-            attributeName="stroke-dashoffset"
-            to="0"
-            dur="800ms"
-            calcMode="linear"
-            repeatCount="1"
-            fill="freeze"
-            begin="2400ms"
-          ></animate>
+            attributeName='stroke-dashoffset'
+            to='0'
+            dur='800ms'
+            calcMode='linear'
+            repeatCount='1'
+            fill='freeze'
+            begin='2400ms'
+          />
           <animate
-            attributeName="fillOpacity"
-            to="1"
-            dur="800ms"
-            calcMode="linear"
-            repeatCount="1"
-            fill="freeze"
-            begin="2400ms"
-          ></animate>
+            attributeName='fillOpacity'
+            to='1'
+            dur='800ms'
+            calcMode='linear'
+            repeatCount='1'
+            fill='freeze'
+            begin='2400ms'
+          />
         </path>
       </g>
     </svg>
     <svg
-      width="25.072"
-      height="32"
-      viewBox="0 0 25.072 34"
-      xmlns="http://www.w3.org/2000/svg"
+      width='25.072'
+      height='32'
+      viewBox='0 0 25.072 34'
+      xmlns='http://www.w3.org/2000/svg'
       style={{
-        verticalAlign: 'text-top'
+        verticalAlign: 'text-top',
       }}
       {...props}
     >
       <g
-        id="svgGroup"
-        strokeLinecap="round"
-        stroke="#000"
-        fill="transparent"
+        id='svgGroup'
+        strokeLinecap='round'
+        stroke='#000'
+        fill='transparent'
         style={{
           fill: 'transparent',
           fillOpacity: 0,
           stroke: '#2B72FF',
-          strokeWidth: '2px'
+          strokeWidth: '2px',
         }}
       >
         <path
-          d="M23.07 32L6.14 32Q3.55 32 2.18 30.69Q0.80 29.38 0.80 26.94L0.80 26.94Q0.80 24.54 2.18 23.23Q3.55 21.92 6.14 21.92L6.14 21.92L18.43 21.92L18.43 21.15Q18.43 19.20 16.51 19.20L16.51 19.20L2.94 19.20L2.94 15.52L17.73 15.52Q20.64 15.52 21.86 16.85Q23.07 18.18 23.07 20.58L23.07 20.58L23.07 32ZM6.98 28.32L6.98 28.32L18.43 28.32L18.43 25.60L6.98 25.60Q6.37 25.60 6.03 25.97Q5.70 26.34 5.70 26.94L5.70 26.94Q5.70 27.55 6.03 27.94Q6.37 28.32 6.98 28.32Z"
+          d='M23.07 32L6.14 32Q3.55 32 2.18 30.69Q0.80 29.38 0.80 26.94L0.80 26.94Q0.80 24.54 2.18 23.23Q3.55 21.92 6.14 21.92L6.14 21.92L18.43 21.92L18.43 21.15Q18.43 19.20 16.51 19.20L16.51 19.20L2.94 19.20L2.94 15.52L17.73 15.52Q20.64 15.52 21.86 16.85Q23.07 18.18 23.07 20.58L23.07 20.58L23.07 32ZM6.98 28.32L6.98 28.32L18.43 28.32L18.43 25.60L6.98 25.60Q6.37 25.60 6.03 25.97Q5.70 26.34 5.70 26.94L5.70 26.94Q5.70 27.55 6.03 27.94Q6.37 28.32 6.98 28.32Z'
           style={{ strokeDasharray: '131, 133', strokeDashoffset: 132 }}
         >
           <animate
-            attributeName="stroke-dashoffset"
-            to="0"
-            dur="800ms"
-            calcMode="linear"
-            repeatCount="1"
-            fill="freeze"
-            begin="3000ms"
-          ></animate>
+            attributeName='stroke-dashoffset'
+            to='0'
+            dur='800ms'
+            calcMode='linear'
+            repeatCount='1'
+            fill='freeze'
+            begin='3000ms'
+          />
           <animate
-            attributeName="fillOpacity"
-            to="1"
-            dur="800ms"
-            calcMode="linear"
-            repeatCount="1"
-            fill="freeze"
-            begin="3000ms"
-          ></animate>
+            attributeName='fillOpacity'
+            to='1'
+            dur='800ms'
+            calcMode='linear'
+            repeatCount='1'
+            fill='freeze'
+            begin='3000ms'
+          />
         </path>
       </g>
     </svg>
     <svg
-      width="27.216"
-      height="32.16"
-      viewBox="0 0 27.216 34.16"
-      xmlns="http://www.w3.org/2000/svg"
+      width='27.216'
+      height='32.16'
+      viewBox='0 0 27.216 34.16'
+      xmlns='http://www.w3.org/2000/svg'
       style={{
-        verticalAlign: 'text-top'
+        verticalAlign: 'text-top',
       }}
       {...props}
     >
       <g
-        id="svgGroup"
-        strokeLinecap="round"
-        stroke="#000"
-        fill="transparent"
+        id='svgGroup'
+        strokeLinecap='round'
+        stroke='#000'
+        fill='transparent'
         style={{
           fill: 'transparent',
           fillOpacity: 0,
           stroke: '#2B72FF',
-          strokeWidth: '2px'
+          strokeWidth: '2px',
         }}
       >
         <path
-          d="M16.13 32.16L10.21 32.16Q5.92 32.16 3.52 30.03Q1.12 27.90 1.12 23.78L1.12 23.78Q1.12 19.62 3.52 17.49Q5.92 15.36 10.21 15.36L10.21 15.36L16.13 15.36Q20.42 15.36 22.82 17.49Q25.22 19.62 25.22 23.78L25.22 23.78Q25.22 27.90 22.82 30.03Q20.42 32.16 16.13 32.16L16.13 32.16ZM10.21 28.48L10.21 28.48L16.13 28.48Q18.21 28.48 19.31 27.33Q20.42 26.18 20.42 23.78L20.42 23.78Q20.42 21.34 19.31 20.19Q18.21 19.04 16.13 19.04L16.13 19.04L10.21 19.04Q8.13 19.04 7.02 20.19Q5.92 21.34 5.92 23.78L5.92 23.78Q5.92 26.18 7.02 27.33Q8.13 28.48 10.21 28.48Z"
+          d='M16.13 32.16L10.21 32.16Q5.92 32.16 3.52 30.03Q1.12 27.90 1.12 23.78L1.12 23.78Q1.12 19.62 3.52 17.49Q5.92 15.36 10.21 15.36L10.21 15.36L16.13 15.36Q20.42 15.36 22.82 17.49Q25.22 19.62 25.22 23.78L25.22 23.78Q25.22 27.90 22.82 30.03Q20.42 32.16 16.13 32.16L16.13 32.16ZM10.21 28.48L10.21 28.48L16.13 28.48Q18.21 28.48 19.31 27.33Q20.42 26.18 20.42 23.78L20.42 23.78Q20.42 21.34 19.31 20.19Q18.21 19.04 16.13 19.04L16.13 19.04L10.21 19.04Q8.13 19.04 7.02 20.19Q5.92 21.34 5.92 23.78L5.92 23.78Q5.92 26.18 7.02 27.33Q8.13 28.48 10.21 28.48Z'
           style={{ strokeDasharray: '109, 111', strokeDashoffset: 110 }}
         >
           <animate
-            attributeName="stroke-dashoffset"
-            to="0"
-            dur="800ms"
-            calcMode="linear"
-            repeatCount="1"
-            fill="freeze"
-            begin="3600ms"
-          ></animate>
+            attributeName='stroke-dashoffset'
+            to='0'
+            dur='800ms'
+            calcMode='linear'
+            repeatCount='1'
+            fill='freeze'
+            begin='3600ms'
+          />
           <animate
-            attributeName="fillOpacity"
-            to="1"
-            dur="800ms"
-            calcMode="linear"
-            repeatCount="1"
-            fill="freeze"
-            begin="3600ms"
-          ></animate>
+            attributeName='fillOpacity'
+            to='1'
+            dur='800ms'
+            calcMode='linear'
+            repeatCount='1'
+            fill='freeze'
+            begin='3600ms'
+          />
         </path>
       </g>
     </svg>
     <svg
-      width="24.688"
-      height="39.2"
-      viewBox="0 0 24.688 41.2"
-      xmlns="http://www.w3.org/2000/svg"
+      width='24.688'
+      height='39.2'
+      viewBox='0 0 24.688 41.2'
+      xmlns='http://www.w3.org/2000/svg'
       style={{
-        verticalAlign: 'text-top'
+        verticalAlign: 'text-top',
       }}
       {...props}
     >
       <g
-        id="svgGroup"
-        strokeLinecap="round"
-        stroke="#000"
-        fill="transparent"
+        id='svgGroup'
+        strokeLinecap='round'
+        stroke='#000'
+        fill='transparent'
         style={{
           fill: 'transparent',
           fillOpacity: 0,
           stroke: '#2B72FF',
-          strokeWidth: '2px'
+          strokeWidth: '2px',
         }}
       >
         <path
-          d="M6.40 39.20L1.76 39.20L1.76 15.52L13.60 15.52Q17.89 15.52 20.29 17.63Q22.69 19.74 22.69 23.74L22.69 23.74Q22.69 27.78 20.29 29.89Q17.89 32 13.60 32L13.60 32L6.40 32L6.40 39.20ZM13.60 19.20L13.60 19.20L6.40 19.20L6.40 28.32L13.60 28.32Q15.68 28.32 16.78 27.18Q17.89 26.05 17.89 23.74L17.89 23.74Q17.89 21.47 16.78 20.34Q15.68 19.20 13.60 19.20Z"
+          d='M6.40 39.20L1.76 39.20L1.76 15.52L13.60 15.52Q17.89 15.52 20.29 17.63Q22.69 19.74 22.69 23.74L22.69 23.74Q22.69 27.78 20.29 29.89Q17.89 32 13.60 32L13.60 32L6.40 32L6.40 39.20ZM13.60 19.20L13.60 19.20L6.40 19.20L6.40 28.32L13.60 28.32Q15.68 28.32 16.78 27.18Q17.89 26.05 17.89 23.74L17.89 23.74Q17.89 21.47 16.78 20.34Q15.68 19.20 13.60 19.20Z'
           style={{ strokeDasharray: '120, 122', strokeDashoffset: 121 }}
         >
           <animate
-            attributeName="stroke-dashoffset"
-            to="0"
-            dur="800ms"
-            calcMode="linear"
-            repeatCount="1"
-            fill="freeze"
-            begin="4200ms"
-          ></animate>
+            attributeName='stroke-dashoffset'
+            to='0'
+            dur='800ms'
+            calcMode='linear'
+            repeatCount='1'
+            fill='freeze'
+            begin='4200ms'
+          />
           <animate
-            attributeName="fillOpacity"
-            to="1"
-            dur="800ms"
-            calcMode="linear"
-            repeatCount="1"
-            fill="freeze"
-            begin="4200ms"
-          ></animate>
+            attributeName='fillOpacity'
+            to='1'
+            dur='800ms'
+            calcMode='linear'
+            repeatCount='1'
+            fill='freeze'
+            begin='4200ms'
+          />
         </path>
       </g>
     </svg>
   </>
-)
+);
 
 export const FileIcon = (props: IconSvgProps) => (
   <svg
-    version="1.1"
-    id="_x36_"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink"
-    viewBox="0 0 512 512"
-    xmlSpace="preserve"
+    version='1.1'
+    id='_x36_'
+    xmlns='http://www.w3.org/2000/svg'
+    xmlnsXlink='http://www.w3.org/1999/xlink'
+    viewBox='0 0 512 512'
+    xmlSpace='preserve'
     {...props}
   >
-    <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
+    <g id='SVGRepo_bgCarrier' strokeWidth='0' />
     <g
-      id="SVGRepo_tracerCarrier"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    ></g>
-    <g id="SVGRepo_iconCarrier">
+      id='SVGRepo_tracerCarrier'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+    <g id='SVGRepo_iconCarrier'>
       <g>
         <path
           style={{ fill: '#D4B476' }}
-          d="M441.853,393.794H70.147C31.566,393.794,0,362.228,0,323.647V106.969 c0-38.581,31.566-70.147,70.147-70.147h371.706c38.581,0,70.147,31.566,70.147,70.147v216.678 C512,362.228,480.434,393.794,441.853,393.794z"
-        ></path>
+          d='M441.853,393.794H70.147C31.566,393.794,0,362.228,0,323.647V106.969 c0-38.581,31.566-70.147,70.147-70.147h371.706c38.581,0,70.147,31.566,70.147,70.147v216.678 C512,362.228,480.434,393.794,441.853,393.794z'
+        />
         <path
           style={{ fill: '#D4B476' }}
-          d="M199.884,249.574H70.147C31.566,249.574,0,218.008,0,179.427V70.147C0,31.566,31.566,0,70.147,0 h129.737c38.581,0,70.147,31.566,70.147,70.147v109.28C270.031,218.008,238.465,249.574,199.884,249.574z"
-        ></path>
+          d='M199.884,249.574H70.147C31.566,249.574,0,218.008,0,179.427V70.147C0,31.566,31.566,0,70.147,0 h129.737c38.581,0,70.147,31.566,70.147,70.147v109.28C270.031,218.008,238.465,249.574,199.884,249.574z'
+        />
         <polygon
           style={{ fill: '#F0EFEF' }}
-          points="485.439,329.388 87.357,347.774 78.653,130.095 476.734,111.709 "
-        ></polygon>
+          points='485.439,329.388 87.357,347.774 78.653,130.095 476.734,111.709 '
+        />
         <defs>
           <filter
-            id="Adobe_OpacityMaskFilter"
-            filterUnits="userSpaceOnUse"
-            x="34.381"
-            y="60.216"
-            width="416.68"
-            height="259.557"
+            id='Adobe_OpacityMaskFilter'
+            filterUnits='userSpaceOnUse'
+            x='34.381'
+            y='60.216'
+            width='416.68'
+            height='259.557'
           >
             <feFlood
               style={{
                 floodColor: 'white',
-                floodOpacity: 1
+                floodOpacity: 1,
               }}
-              result="back"
-            ></feFlood>
-            <feBlend in="SourceGraphic" in2="back" mode="normal"></feBlend>
+              result='back'
+            />
+            <feBlend in='SourceGraphic' in2='back' mode='normal' />
           </filter>
         </defs>
         <mask
-          maskUnits="userSpaceOnUse"
-          x="34.381"
-          y="60.216"
-          width="416.68"
-          height="259.557"
-          id="SVGID_1_"
+          maskUnits='userSpaceOnUse'
+          x='34.381'
+          y='60.216'
+          width='416.68'
+          height='259.557'
+          id='SVGID_1_'
         >
           <g style={{ filter: 'url(#Adobe_OpacityMaskFilter)' }}>
             <defs>
               <filter
-                id="Adobe_OpacityMaskFilter_1_"
-                filterUnits="userSpaceOnUse"
-                x="34.381"
-                y="60.216"
-                width="416.68"
-                height="259.557"
+                id='Adobe_OpacityMaskFilter_1_'
+                filterUnits='userSpaceOnUse'
+                x='34.381'
+                y='60.216'
+                width='416.68'
+                height='259.557'
               >
                 <feFlood
                   style={{ floodColor: 'white', floodOpacity: 1 }}
-                  result="back"
-                ></feFlood>
-                <feBlend in="SourceGraphic" in2="back" mode="normal"></feBlend>
+                  result='back'
+                />
+                <feBlend in='SourceGraphic' in2='back' mode='normal' />
               </filter>
             </defs>
             <mask
-              maskUnits="userSpaceOnUse"
-              x="34.381"
-              y="60.216"
-              width="416.68"
-              height="259.557"
-              id="SVGID_1_"
+              maskUnits='userSpaceOnUse'
+              x='34.381'
+              y='60.216'
+              width='416.68'
+              height='259.557'
+              id='SVGID_1_'
             >
               <g style={{ filter: 'url(#Adobe_OpacityMaskFilter_1_)' }}> </g>
             </mask>
             <linearGradient
-              id="SVGID_2_"
-              gradientUnits="userSpaceOnUse"
-              x1="34.3814"
-              y1="189.9944"
-              x2="451.061"
-              y2="189.9944"
+              id='SVGID_2_'
+              gradientUnits='userSpaceOnUse'
+              x1='34.3814'
+              y1='189.9944'
+              x2='451.061'
+              y2='189.9944'
             >
-              <stop offset="0.57" style={{ stopColor: '#F6F6F6' }}></stop>
-              <stop offset="0.6039" style={{ stopColor: '#F6F6F6' }}></stop>
+              <stop offset='0.57' style={{ stopColor: '#F6F6F6' }} />
+              <stop offset='0.6039' style={{ stopColor: '#F6F6F6' }} />
             </linearGradient>
             <polygon
               style={{ mask: 'url(#SVGID_1_)', fill: 'url(#SVGID_2_)' }}
-              points="451.061,277.073 54.598,319.773 34.381,102.916 430.845,60.216 "
-            ></polygon>
+              points='451.061,277.073 54.598,319.773 34.381,102.916 430.845,60.216 '
+            />
           </g>
         </mask>
         <linearGradient
-          id="SVGID_3_"
-          gradientUnits="userSpaceOnUse"
-          x1="34.3814"
-          y1="189.9944"
-          x2="451.061"
-          y2="189.9944"
+          id='SVGID_3_'
+          gradientUnits='userSpaceOnUse'
+          x1='34.3814'
+          y1='189.9944'
+          x2='451.061'
+          y2='189.9944'
         >
-          <stop offset="0.57" style={{ stopColor: '#FFFFFF' }}></stop>
-          <stop offset="0.6039" style={{ stopColor: '#F0F0F0' }}></stop>
+          <stop offset='0.57' style={{ stopColor: '#FFFFFF' }} />
+          <stop offset='0.6039' style={{ stopColor: '#F0F0F0' }} />
         </linearGradient>
         <polygon
           style={{ fill: 'url(#SVGID_3_)' }}
-          points="451.061,277.073 54.598,319.773 34.381,102.916 430.845,60.216 "
-        ></polygon>
+          points='451.061,277.073 54.598,319.773 34.381,102.916 430.845,60.216 '
+        />
         <path
           style={{ fill: '#69A092' }}
-          d="M441.853,417.32H70.147C31.566,417.32,0,385.754,0,347.173V168.515h512v178.658 C512,385.754,480.434,417.32,441.853,417.32z"
-        ></path>
+          d='M441.853,417.32H70.147C31.566,417.32,0,385.754,0,347.173V168.515h512v178.658 C512,385.754,480.434,417.32,441.853,417.32z'
+        />
         <path
           style={{ fill: '#D4B476' }}
-          d="M441.853,429.594H70.147C31.566,429.594,0,398.028,0,359.447V189.995h512v169.453 C512,398.028,480.434,429.594,441.853,429.594z"
-        ></path>
+          d='M441.853,429.594H70.147C31.566,429.594,0,398.028,0,359.447V189.995h512v169.453 C512,398.028,480.434,429.594,441.853,429.594z'
+        />
         <g>
           <g>
             <path
               style={{ fill: '#CBBC89' }}
-              d="M41.051,330.321h28.918h7.581c0.686,0,1.357,0,2.012,0c0.655,0,1.171,0.126,1.545,0.375 c0.499,0.312,0.795,0.764,0.889,1.357c0.094,0.594,0.141,1.296,0.141,2.106c0,0.312,0.014,0.608,0.047,0.888 c0.031,0.281-0.016,0.547-0.14,0.796c-0.25,0.998-0.796,1.543-1.638,1.638c-0.843,0.094-1.888,0.14-3.136,0.14h-9.733H53.778 c-0.998,0-2.058-0.015-3.182-0.047c-1.122-0.03-1.965,0.173-2.526,0.608c-0.563,0.375-0.858,1.03-0.89,1.965 c-0.032,0.937-0.047,1.873-0.047,2.808v9.265c0,0.5-0.015,1.123-0.046,1.872c-0.033,0.749,0.014,1.373,0.139,1.871v0.748 c0.125,0.375,0.235,0.735,0.328,1.077c0.093,0.344,0.295,0.608,0.608,0.796c0.562,0.374,1.436,0.547,2.621,0.514 c1.184-0.03,2.214-0.047,3.088-0.047h16.845c0.561,0,1.171-0.014,1.825-0.046c0.655-0.031,1.31-0.031,1.965,0 c0.655,0.032,1.248,0.109,1.779,0.234c0.529,0.126,0.889,0.344,1.076,0.655c0.311,0.375,0.467,0.843,0.467,1.404 c0,0.56,0,1.186,0,1.871c0,0.375,0,0.719,0,1.03c0,0.313-0.062,0.594-0.186,0.842c-0.25,0.625-0.595,0.969-1.03,1.03 c-0.25,0.125-0.485,0.186-0.702,0.186c-0.219,0-0.483,0.033-0.796,0.094c-0.25,0.063-0.514,0.079-0.796,0.047 c-0.281-0.03-0.546-0.047-0.794-0.047h-3.277H54.433c-0.999,0-2.168-0.014-3.51-0.047c-1.342-0.03-2.292,0.172-2.853,0.609 c-0.314,0.25-0.547,0.64-0.702,1.169c-0.156,0.531-0.25,1.14-0.281,1.825c-0.033,0.687-0.033,1.389,0,2.106 c0.03,0.717,0.046,1.357,0.046,1.918v16.096c0,1.062,0.032,2.217,0.094,3.463c0.062,1.249-0.156,2.185-0.655,2.807 c-0.186,0.25-0.469,0.391-0.842,0.422c-0.374,0.032-0.749,0.109-1.123,0.234h-1.779c-0.875,0-1.684-0.03-2.433-0.093 c-0.749-0.062-1.279-0.375-1.59-0.937c-0.25-0.374-0.375-0.888-0.375-1.543c0-0.656,0-1.326,0-2.013v-7.488v-39.119v-10.107 c0-0.686-0.016-1.45-0.047-2.292c-0.032-0.842,0.107-1.512,0.422-2.012c0.249-0.374,0.715-0.685,1.404-0.935 c0.124-0.062,0.264-0.077,0.42-0.047C40.785,330.4,40.925,330.383,41.051,330.321z"
-            ></path>
+              d='M41.051,330.321h28.918h7.581c0.686,0,1.357,0,2.012,0c0.655,0,1.171,0.126,1.545,0.375 c0.499,0.312,0.795,0.764,0.889,1.357c0.094,0.594,0.141,1.296,0.141,2.106c0,0.312,0.014,0.608,0.047,0.888 c0.031,0.281-0.016,0.547-0.14,0.796c-0.25,0.998-0.796,1.543-1.638,1.638c-0.843,0.094-1.888,0.14-3.136,0.14h-9.733H53.778 c-0.998,0-2.058-0.015-3.182-0.047c-1.122-0.03-1.965,0.173-2.526,0.608c-0.563,0.375-0.858,1.03-0.89,1.965 c-0.032,0.937-0.047,1.873-0.047,2.808v9.265c0,0.5-0.015,1.123-0.046,1.872c-0.033,0.749,0.014,1.373,0.139,1.871v0.748 c0.125,0.375,0.235,0.735,0.328,1.077c0.093,0.344,0.295,0.608,0.608,0.796c0.562,0.374,1.436,0.547,2.621,0.514 c1.184-0.03,2.214-0.047,3.088-0.047h16.845c0.561,0,1.171-0.014,1.825-0.046c0.655-0.031,1.31-0.031,1.965,0 c0.655,0.032,1.248,0.109,1.779,0.234c0.529,0.126,0.889,0.344,1.076,0.655c0.311,0.375,0.467,0.843,0.467,1.404 c0,0.56,0,1.186,0,1.871c0,0.375,0,0.719,0,1.03c0,0.313-0.062,0.594-0.186,0.842c-0.25,0.625-0.595,0.969-1.03,1.03 c-0.25,0.125-0.485,0.186-0.702,0.186c-0.219,0-0.483,0.033-0.796,0.094c-0.25,0.063-0.514,0.079-0.796,0.047 c-0.281-0.03-0.546-0.047-0.794-0.047h-3.277H54.433c-0.999,0-2.168-0.014-3.51-0.047c-1.342-0.03-2.292,0.172-2.853,0.609 c-0.314,0.25-0.547,0.64-0.702,1.169c-0.156,0.531-0.25,1.14-0.281,1.825c-0.033,0.687-0.033,1.389,0,2.106 c0.03,0.717,0.046,1.357,0.046,1.918v16.096c0,1.062,0.032,2.217,0.094,3.463c0.062,1.249-0.156,2.185-0.655,2.807 c-0.186,0.25-0.469,0.391-0.842,0.422c-0.374,0.032-0.749,0.109-1.123,0.234h-1.779c-0.875,0-1.684-0.03-2.433-0.093 c-0.749-0.062-1.279-0.375-1.59-0.937c-0.25-0.374-0.375-0.888-0.375-1.543c0-0.656,0-1.326,0-2.013v-7.488v-39.119v-10.107 c0-0.686-0.016-1.45-0.047-2.292c-0.032-0.842,0.107-1.512,0.422-2.012c0.249-0.374,0.715-0.685,1.404-0.935 c0.124-0.062,0.264-0.077,0.42-0.047C40.785,330.4,40.925,330.383,41.051,330.321z'
+            />
             <path
               style={{ fill: '#CBBC89' }}
-              d="M96.895,330.508c0.436,0,0.935-0.014,1.496-0.046c0.563-0.032,1.108-0.032,1.639,0 c0.529,0.032,1.013,0.109,1.45,0.234c0.437,0.125,0.749,0.312,0.937,0.561c0.374,0.438,0.576,1.046,0.608,1.825 c0.03,0.78,0.047,1.576,0.047,2.386v9.079v36.124v10.949c0,0.811,0,1.669,0,2.574c0,0.905-0.156,1.606-0.468,2.105 c-0.25,0.314-0.547,0.5-0.889,0.563c-0.344,0.062-0.765,0.156-1.264,0.28h-1.777c-0.874,0-1.684-0.034-2.433-0.094 c-0.749-0.061-1.28-0.374-1.592-0.935c-0.25-0.374-0.375-0.89-0.375-1.545c0-0.655,0-1.325,0-2.012v-7.487V345.95v-10.107 c0-0.686-0.015-1.451-0.045-2.292c-0.034-0.843,0.108-1.514,0.42-2.013c0.249-0.436,0.748-0.748,1.497-0.936 c0.125-0.061,0.25-0.077,0.375-0.047C96.645,330.587,96.769,330.571,96.895,330.508z"
-            ></path>
+              d='M96.895,330.508c0.436,0,0.935-0.014,1.496-0.046c0.563-0.032,1.108-0.032,1.639,0 c0.529,0.032,1.013,0.109,1.45,0.234c0.437,0.125,0.749,0.312,0.937,0.561c0.374,0.438,0.576,1.046,0.608,1.825 c0.03,0.78,0.047,1.576,0.047,2.386v9.079v36.124v10.949c0,0.811,0,1.669,0,2.574c0,0.905-0.156,1.606-0.468,2.105 c-0.25,0.314-0.547,0.5-0.889,0.563c-0.344,0.062-0.765,0.156-1.264,0.28h-1.777c-0.874,0-1.684-0.034-2.433-0.094 c-0.749-0.061-1.28-0.374-1.592-0.935c-0.25-0.374-0.375-0.89-0.375-1.545c0-0.655,0-1.325,0-2.012v-7.487V345.95v-10.107 c0-0.686-0.015-1.451-0.045-2.292c-0.034-0.843,0.108-1.514,0.42-2.013c0.249-0.436,0.748-0.748,1.497-0.936 c0.125-0.061,0.25-0.077,0.375-0.047C96.645,330.587,96.769,330.571,96.895,330.508z'
+            />
             <path
               style={{ fill: '#CBBC89' }}
-              d="M126.093,330.321c0.436,0,0.935-0.015,1.498-0.047c0.561-0.03,1.107-0.03,1.638,0 c0.529,0.032,1.012,0.109,1.451,0.234c0.436,0.125,0.748,0.313,0.936,0.562c0.374,0.5,0.56,1.155,0.56,1.965 c0,0.811,0,1.654,0,2.528v9.826v30.042v8.609c0,0.687,0,1.436,0,2.245c0,0.813,0.094,1.468,0.281,1.967 c0.188,0.436,0.529,0.811,1.03,1.122c0.313,0.125,0.717,0.203,1.217,0.235c0.499,0.032,0.998,0.046,1.498,0.046h4.772h16.845 h5.24c0.436,0,0.89-0.014,1.359-0.046c0.467-0.032,0.888,0.016,1.263,0.139c0.81,0.25,1.34,0.594,1.591,1.03 c0.062,0.188,0.124,0.5,0.188,0.937c0.061,0.436,0.107,0.889,0.139,1.357c0.03,0.467,0.015,0.935-0.047,1.402 c-0.062,0.469-0.126,0.829-0.187,1.077c-0.126,0.437-0.406,0.782-0.843,1.029c-0.313,0.25-0.765,0.375-1.357,0.375 c-0.593,0-1.169,0-1.731,0h-6.177H133.58h-6.083c-0.874,0-1.623-0.047-2.246-0.139c-0.624-0.094-1.092-0.39-1.404-0.89 c-0.25-0.374-0.373-0.857-0.373-1.451c0-0.591,0-1.168,0-1.729v-6.74v-25.549v-20.308v-5.802c0-0.561,0.014-1.122,0.045-1.684 c0.032-0.561,0.141-0.998,0.328-1.31c0.249-0.374,0.717-0.685,1.404-0.935c0.124-0.062,0.265-0.077,0.422-0.047 C125.827,330.4,125.968,330.383,126.093,330.321z"
-            ></path>
+              d='M126.093,330.321c0.436,0,0.935-0.015,1.498-0.047c0.561-0.03,1.107-0.03,1.638,0 c0.529,0.032,1.012,0.109,1.451,0.234c0.436,0.125,0.748,0.313,0.936,0.562c0.374,0.5,0.56,1.155,0.56,1.965 c0,0.811,0,1.654,0,2.528v9.826v30.042v8.609c0,0.687,0,1.436,0,2.245c0,0.813,0.094,1.468,0.281,1.967 c0.188,0.436,0.529,0.811,1.03,1.122c0.313,0.125,0.717,0.203,1.217,0.235c0.499,0.032,0.998,0.046,1.498,0.046h4.772h16.845 h5.24c0.436,0,0.89-0.014,1.359-0.046c0.467-0.032,0.888,0.016,1.263,0.139c0.81,0.25,1.34,0.594,1.591,1.03 c0.062,0.188,0.124,0.5,0.188,0.937c0.061,0.436,0.107,0.889,0.139,1.357c0.03,0.467,0.015,0.935-0.047,1.402 c-0.062,0.469-0.126,0.829-0.187,1.077c-0.126,0.437-0.406,0.782-0.843,1.029c-0.313,0.25-0.765,0.375-1.357,0.375 c-0.593,0-1.169,0-1.731,0h-6.177H133.58h-6.083c-0.874,0-1.623-0.047-2.246-0.139c-0.624-0.094-1.092-0.39-1.404-0.89 c-0.25-0.374-0.373-0.857-0.373-1.451c0-0.591,0-1.168,0-1.729v-6.74v-25.549v-20.308v-5.802c0-0.561,0.014-1.122,0.045-1.684 c0.032-0.561,0.141-0.998,0.328-1.31c0.249-0.374,0.717-0.685,1.404-0.935c0.124-0.062,0.265-0.077,0.422-0.047 C125.827,330.4,125.968,330.383,126.093,330.321z'
+            />
             <path
               style={{ fill: '#CBBC89' }}
-              d="M187.883,330.321h30.602h8.049c0.686,0,1.372-0.015,2.059-0.047 c0.685-0.03,1.248,0.109,1.684,0.422c0.188,0.125,0.343,0.281,0.468,0.467c0.124,0.188,0.249,0.375,0.374,0.563 c0.125,0.436,0.187,1.138,0.187,2.105c0,0.967-0.062,1.701-0.187,2.199c-0.25,0.874-0.78,1.357-1.592,1.451 c-0.811,0.094-1.777,0.14-2.9,0.14h-9.359h-15.722c-0.998,0-2.169-0.015-3.51-0.047c-1.343-0.03-2.325,0.139-2.949,0.514 c-0.624,0.374-0.951,1.03-0.982,1.966c-0.032,0.936-0.048,1.904-0.048,2.901v9.546c0,0.688-0.015,1.498-0.045,2.433 c-0.034,0.937,0.014,1.686,0.139,2.246c0.188,0.749,0.562,1.249,1.123,1.498c0.249,0.125,0.686,0.25,1.31,0.373h0.935 c0.249,0.063,0.515,0.08,0.796,0.047c0.281-0.03,0.577-0.047,0.89-0.047h3.181h18.343c0.561,0,1.184-0.014,1.872-0.046 c0.685-0.031,1.387-0.031,2.104,0c0.717,0.032,1.372,0.093,1.967,0.187c0.591,0.094,1.044,0.233,1.357,0.421 c0.186,0.126,0.341,0.407,0.467,0.842c0.125,0.438,0.218,0.905,0.282,1.404c0.061,0.5,0.077,1.016,0.045,1.545 c-0.031,0.531-0.109,0.983-0.233,1.357c-0.126,0.561-0.406,0.967-0.842,1.217c-0.127,0.126-0.297,0.203-0.515,0.235 c-0.22,0.032-0.422,0.079-0.608,0.139h-0.563c-0.312,0.063-0.623,0.079-0.935,0.047c-0.313-0.03-0.624-0.047-0.935-0.047h-3.463 h-19.747c-0.747,0-1.482-0.014-2.199-0.047c-0.719-0.03-1.39,0-2.012,0.094c-0.624,0.094-1.171,0.267-1.639,0.515 c-0.467,0.25-0.794,0.687-0.982,1.31c-0.126,0.375-0.173,0.811-0.139,1.31c0.03,0.5,0.045,0.999,0.045,1.498v5.239v8.892 c0,0.873,0.032,1.669,0.094,2.386c0.062,0.718,0.312,1.233,0.749,1.544c0.435,0.313,0.935,0.483,1.497,0.515 c0.561,0.032,1.185,0.046,1.871,0.046h5.99h17.314h5.334c0.499,0,0.998-0.014,1.497-0.046c0.498-0.032,0.936,0.016,1.31,0.139 c0.749,0.25,1.248,0.594,1.498,1.03c0.123,0.188,0.217,0.5,0.281,0.937c0.061,0.436,0.108,0.889,0.14,1.357 c0.03,0.467,0.015,0.935-0.047,1.402c-0.062,0.469-0.126,0.829-0.187,1.077c-0.25,0.5-0.531,0.842-0.842,1.029 c-0.375,0.25-0.858,0.375-1.45,0.375c-0.594,0-1.171,0-1.731,0h-6.552h-24.894h-6.551c-0.874,0-1.623-0.047-2.245-0.139 c-0.624-0.094-1.093-0.39-1.404-0.89c-0.25-0.374-0.374-0.857-0.374-1.451c0-0.591,0-1.168,0-1.729v-6.551v-25.082v-20.964 v-5.802c0-0.561,0-1.122,0-1.684c0-0.561,0.124-0.998,0.374-1.31c0.249-0.435,0.716-0.749,1.404-0.935 c0.125-0.062,0.248-0.077,0.375-0.047C187.632,330.4,187.756,330.383,187.883,330.321z"
-            ></path>
+              d='M187.883,330.321h30.602h8.049c0.686,0,1.372-0.015,2.059-0.047 c0.685-0.03,1.248,0.109,1.684,0.422c0.188,0.125,0.343,0.281,0.468,0.467c0.124,0.188,0.249,0.375,0.374,0.563 c0.125,0.436,0.187,1.138,0.187,2.105c0,0.967-0.062,1.701-0.187,2.199c-0.25,0.874-0.78,1.357-1.592,1.451 c-0.811,0.094-1.777,0.14-2.9,0.14h-9.359h-15.722c-0.998,0-2.169-0.015-3.51-0.047c-1.343-0.03-2.325,0.139-2.949,0.514 c-0.624,0.374-0.951,1.03-0.982,1.966c-0.032,0.936-0.048,1.904-0.048,2.901v9.546c0,0.688-0.015,1.498-0.045,2.433 c-0.034,0.937,0.014,1.686,0.139,2.246c0.188,0.749,0.562,1.249,1.123,1.498c0.249,0.125,0.686,0.25,1.31,0.373h0.935 c0.249,0.063,0.515,0.08,0.796,0.047c0.281-0.03,0.577-0.047,0.89-0.047h3.181h18.343c0.561,0,1.184-0.014,1.872-0.046 c0.685-0.031,1.387-0.031,2.104,0c0.717,0.032,1.372,0.093,1.967,0.187c0.591,0.094,1.044,0.233,1.357,0.421 c0.186,0.126,0.341,0.407,0.467,0.842c0.125,0.438,0.218,0.905,0.282,1.404c0.061,0.5,0.077,1.016,0.045,1.545 c-0.031,0.531-0.109,0.983-0.233,1.357c-0.126,0.561-0.406,0.967-0.842,1.217c-0.127,0.126-0.297,0.203-0.515,0.235 c-0.22,0.032-0.422,0.079-0.608,0.139h-0.563c-0.312,0.063-0.623,0.079-0.935,0.047c-0.313-0.03-0.624-0.047-0.935-0.047h-3.463 h-19.747c-0.747,0-1.482-0.014-2.199-0.047c-0.719-0.03-1.39,0-2.012,0.094c-0.624,0.094-1.171,0.267-1.639,0.515 c-0.467,0.25-0.794,0.687-0.982,1.31c-0.126,0.375-0.173,0.811-0.139,1.31c0.03,0.5,0.045,0.999,0.045,1.498v5.239v8.892 c0,0.873,0.032,1.669,0.094,2.386c0.062,0.718,0.312,1.233,0.749,1.544c0.435,0.313,0.935,0.483,1.497,0.515 c0.561,0.032,1.185,0.046,1.871,0.046h5.99h17.314h5.334c0.499,0,0.998-0.014,1.497-0.046c0.498-0.032,0.936,0.016,1.31,0.139 c0.749,0.25,1.248,0.594,1.498,1.03c0.123,0.188,0.217,0.5,0.281,0.937c0.061,0.436,0.108,0.889,0.14,1.357 c0.03,0.467,0.015,0.935-0.047,1.402c-0.062,0.469-0.126,0.829-0.187,1.077c-0.25,0.5-0.531,0.842-0.842,1.029 c-0.375,0.25-0.858,0.375-1.45,0.375c-0.594,0-1.171,0-1.731,0h-6.552h-24.894h-6.551c-0.874,0-1.623-0.047-2.245-0.139 c-0.624-0.094-1.093-0.39-1.404-0.89c-0.25-0.374-0.374-0.857-0.374-1.451c0-0.591,0-1.168,0-1.729v-6.551v-25.082v-20.964 v-5.802c0-0.561,0-1.122,0-1.684c0-0.561,0.124-0.998,0.374-1.31c0.249-0.435,0.716-0.749,1.404-0.935 c0.125-0.062,0.248-0.077,0.375-0.047C187.632,330.4,187.756,330.383,187.883,330.321z'
+            />
           </g>
           <g>
             <path
               style={{ fill: '#98806E' }}
-              d="M41.051,330.321h28.918h7.581c0.686,0,1.357,0,2.012,0c0.655,0,1.171,0.126,1.545,0.375 c0.499,0.312,0.795,0.764,0.889,1.357c0.094,0.594,0.141,1.296,0.141,2.106c0,0.312,0.014,0.608,0.047,0.888 c0.031,0.281-0.016,0.547-0.14,0.796c-0.25,0.998-0.796,1.543-1.638,1.638c-0.843,0.094-1.888,0.14-3.136,0.14h-9.733H53.778 c-0.998,0-2.058-0.015-3.182-0.047c-1.122-0.03-1.965,0.173-2.526,0.608c-0.563,0.375-0.858,1.03-0.89,1.965 c-0.032,0.937-0.047,1.873-0.047,2.808v9.265c0,0.5-0.015,1.123-0.046,1.872c-0.033,0.749,0.014,1.373,0.139,1.871v0.748 c0.125,0.375,0.235,0.735,0.328,1.077c0.093,0.344,0.295,0.608,0.608,0.796c0.562,0.374,1.436,0.547,2.621,0.514 c1.184-0.03,2.214-0.047,3.088-0.047h16.845c0.561,0,1.171-0.014,1.825-0.046c0.655-0.031,1.31-0.031,1.965,0 c0.655,0.032,1.248,0.109,1.779,0.234c0.529,0.126,0.889,0.344,1.076,0.655c0.311,0.375,0.467,0.843,0.467,1.404 c0,0.56,0,1.186,0,1.871c0,0.375,0,0.719,0,1.03c0,0.313-0.062,0.594-0.186,0.842c-0.25,0.625-0.595,0.969-1.03,1.03 c-0.25,0.125-0.485,0.186-0.702,0.186c-0.219,0-0.483,0.033-0.796,0.094c-0.25,0.063-0.514,0.079-0.796,0.047 c-0.281-0.03-0.546-0.047-0.794-0.047h-3.277H54.433c-0.999,0-2.168-0.014-3.51-0.047c-1.342-0.03-2.292,0.172-2.853,0.609 c-0.314,0.25-0.547,0.64-0.702,1.169c-0.156,0.531-0.25,1.14-0.281,1.825c-0.033,0.687-0.033,1.389,0,2.106 c0.03,0.717,0.046,1.357,0.046,1.918v16.096c0,1.062,0.032,2.217,0.094,3.463c0.062,1.249-0.156,2.185-0.655,2.807 c-0.186,0.25-0.469,0.391-0.842,0.422c-0.374,0.032-0.749,0.109-1.123,0.234h-1.779c-0.875,0-1.684-0.03-2.433-0.093 c-0.749-0.062-1.279-0.375-1.59-0.937c-0.25-0.374-0.375-0.888-0.375-1.543c0-0.656,0-1.326,0-2.013v-7.488v-39.119v-10.107 c0-0.686-0.016-1.45-0.047-2.292c-0.032-0.842,0.107-1.512,0.422-2.012c0.249-0.374,0.715-0.685,1.404-0.935 c0.124-0.062,0.264-0.077,0.42-0.047C40.785,330.4,40.925,330.383,41.051,330.321z"
-            ></path>
+              d='M41.051,330.321h28.918h7.581c0.686,0,1.357,0,2.012,0c0.655,0,1.171,0.126,1.545,0.375 c0.499,0.312,0.795,0.764,0.889,1.357c0.094,0.594,0.141,1.296,0.141,2.106c0,0.312,0.014,0.608,0.047,0.888 c0.031,0.281-0.016,0.547-0.14,0.796c-0.25,0.998-0.796,1.543-1.638,1.638c-0.843,0.094-1.888,0.14-3.136,0.14h-9.733H53.778 c-0.998,0-2.058-0.015-3.182-0.047c-1.122-0.03-1.965,0.173-2.526,0.608c-0.563,0.375-0.858,1.03-0.89,1.965 c-0.032,0.937-0.047,1.873-0.047,2.808v9.265c0,0.5-0.015,1.123-0.046,1.872c-0.033,0.749,0.014,1.373,0.139,1.871v0.748 c0.125,0.375,0.235,0.735,0.328,1.077c0.093,0.344,0.295,0.608,0.608,0.796c0.562,0.374,1.436,0.547,2.621,0.514 c1.184-0.03,2.214-0.047,3.088-0.047h16.845c0.561,0,1.171-0.014,1.825-0.046c0.655-0.031,1.31-0.031,1.965,0 c0.655,0.032,1.248,0.109,1.779,0.234c0.529,0.126,0.889,0.344,1.076,0.655c0.311,0.375,0.467,0.843,0.467,1.404 c0,0.56,0,1.186,0,1.871c0,0.375,0,0.719,0,1.03c0,0.313-0.062,0.594-0.186,0.842c-0.25,0.625-0.595,0.969-1.03,1.03 c-0.25,0.125-0.485,0.186-0.702,0.186c-0.219,0-0.483,0.033-0.796,0.094c-0.25,0.063-0.514,0.079-0.796,0.047 c-0.281-0.03-0.546-0.047-0.794-0.047h-3.277H54.433c-0.999,0-2.168-0.014-3.51-0.047c-1.342-0.03-2.292,0.172-2.853,0.609 c-0.314,0.25-0.547,0.64-0.702,1.169c-0.156,0.531-0.25,1.14-0.281,1.825c-0.033,0.687-0.033,1.389,0,2.106 c0.03,0.717,0.046,1.357,0.046,1.918v16.096c0,1.062,0.032,2.217,0.094,3.463c0.062,1.249-0.156,2.185-0.655,2.807 c-0.186,0.25-0.469,0.391-0.842,0.422c-0.374,0.032-0.749,0.109-1.123,0.234h-1.779c-0.875,0-1.684-0.03-2.433-0.093 c-0.749-0.062-1.279-0.375-1.59-0.937c-0.25-0.374-0.375-0.888-0.375-1.543c0-0.656,0-1.326,0-2.013v-7.488v-39.119v-10.107 c0-0.686-0.016-1.45-0.047-2.292c-0.032-0.842,0.107-1.512,0.422-2.012c0.249-0.374,0.715-0.685,1.404-0.935 c0.124-0.062,0.264-0.077,0.42-0.047C40.785,330.4,40.925,330.383,41.051,330.321z'
+            />
             <path
               style={{ fill: '#98806E' }}
-              d="M96.895,330.508c0.436,0,0.935-0.014,1.496-0.046c0.563-0.032,1.108-0.032,1.639,0 c0.529,0.032,1.013,0.109,1.45,0.234c0.437,0.125,0.749,0.312,0.937,0.561c0.374,0.438,0.576,1.046,0.608,1.825 c0.03,0.78,0.047,1.576,0.047,2.386v9.079v36.124v10.949c0,0.811,0,1.669,0,2.574c0,0.905-0.156,1.606-0.468,2.105 c-0.25,0.314-0.547,0.5-0.889,0.563c-0.344,0.062-0.765,0.156-1.264,0.28h-1.777c-0.874,0-1.684-0.034-2.433-0.094 c-0.749-0.061-1.28-0.374-1.592-0.935c-0.25-0.374-0.375-0.89-0.375-1.545c0-0.655,0-1.325,0-2.012v-7.487V345.95v-10.107 c0-0.686-0.015-1.451-0.045-2.292c-0.034-0.843,0.108-1.514,0.42-2.013c0.249-0.436,0.748-0.748,1.497-0.936 c0.125-0.061,0.25-0.077,0.375-0.047C96.645,330.587,96.769,330.571,96.895,330.508z"
-            ></path>
+              d='M96.895,330.508c0.436,0,0.935-0.014,1.496-0.046c0.563-0.032,1.108-0.032,1.639,0 c0.529,0.032,1.013,0.109,1.45,0.234c0.437,0.125,0.749,0.312,0.937,0.561c0.374,0.438,0.576,1.046,0.608,1.825 c0.03,0.78,0.047,1.576,0.047,2.386v9.079v36.124v10.949c0,0.811,0,1.669,0,2.574c0,0.905-0.156,1.606-0.468,2.105 c-0.25,0.314-0.547,0.5-0.889,0.563c-0.344,0.062-0.765,0.156-1.264,0.28h-1.777c-0.874,0-1.684-0.034-2.433-0.094 c-0.749-0.061-1.28-0.374-1.592-0.935c-0.25-0.374-0.375-0.89-0.375-1.545c0-0.655,0-1.325,0-2.012v-7.487V345.95v-10.107 c0-0.686-0.015-1.451-0.045-2.292c-0.034-0.843,0.108-1.514,0.42-2.013c0.249-0.436,0.748-0.748,1.497-0.936 c0.125-0.061,0.25-0.077,0.375-0.047C96.645,330.587,96.769,330.571,96.895,330.508z'
+            />
             <path
               style={{ fill: '#98806E' }}
-              d="M126.093,330.321c0.436,0,0.935-0.015,1.498-0.047c0.561-0.03,1.107-0.03,1.638,0 c0.529,0.032,1.012,0.109,1.451,0.234c0.436,0.125,0.748,0.313,0.936,0.562c0.374,0.5,0.56,1.155,0.56,1.965 c0,0.811,0,1.654,0,2.528v9.826v30.042v8.609c0,0.687,0,1.436,0,2.245c0,0.813,0.094,1.468,0.281,1.967 c0.188,0.436,0.529,0.811,1.03,1.122c0.313,0.125,0.717,0.203,1.217,0.235c0.499,0.032,0.998,0.046,1.498,0.046h4.772h16.845 h5.24c0.436,0,0.89-0.014,1.359-0.046c0.467-0.032,0.888,0.016,1.263,0.139c0.81,0.25,1.34,0.594,1.591,1.03 c0.062,0.188,0.124,0.5,0.188,0.937c0.061,0.436,0.107,0.889,0.139,1.357c0.03,0.467,0.015,0.935-0.047,1.402 c-0.062,0.469-0.126,0.829-0.187,1.077c-0.126,0.437-0.406,0.782-0.843,1.029c-0.313,0.25-0.765,0.375-1.357,0.375 c-0.593,0-1.169,0-1.731,0h-6.177H133.58h-6.083c-0.874,0-1.623-0.047-2.246-0.139c-0.624-0.094-1.092-0.39-1.404-0.89 c-0.25-0.374-0.373-0.857-0.373-1.451c0-0.591,0-1.168,0-1.729v-6.74v-25.549v-20.308v-5.802c0-0.561,0.014-1.122,0.045-1.684 c0.032-0.561,0.141-0.998,0.328-1.31c0.249-0.374,0.717-0.685,1.404-0.935c0.124-0.062,0.265-0.077,0.422-0.047 C125.827,330.4,125.968,330.383,126.093,330.321z"
-            ></path>
+              d='M126.093,330.321c0.436,0,0.935-0.015,1.498-0.047c0.561-0.03,1.107-0.03,1.638,0 c0.529,0.032,1.012,0.109,1.451,0.234c0.436,0.125,0.748,0.313,0.936,0.562c0.374,0.5,0.56,1.155,0.56,1.965 c0,0.811,0,1.654,0,2.528v9.826v30.042v8.609c0,0.687,0,1.436,0,2.245c0,0.813,0.094,1.468,0.281,1.967 c0.188,0.436,0.529,0.811,1.03,1.122c0.313,0.125,0.717,0.203,1.217,0.235c0.499,0.032,0.998,0.046,1.498,0.046h4.772h16.845 h5.24c0.436,0,0.89-0.014,1.359-0.046c0.467-0.032,0.888,0.016,1.263,0.139c0.81,0.25,1.34,0.594,1.591,1.03 c0.062,0.188,0.124,0.5,0.188,0.937c0.061,0.436,0.107,0.889,0.139,1.357c0.03,0.467,0.015,0.935-0.047,1.402 c-0.062,0.469-0.126,0.829-0.187,1.077c-0.126,0.437-0.406,0.782-0.843,1.029c-0.313,0.25-0.765,0.375-1.357,0.375 c-0.593,0-1.169,0-1.731,0h-6.177H133.58h-6.083c-0.874,0-1.623-0.047-2.246-0.139c-0.624-0.094-1.092-0.39-1.404-0.89 c-0.25-0.374-0.373-0.857-0.373-1.451c0-0.591,0-1.168,0-1.729v-6.74v-25.549v-20.308v-5.802c0-0.561,0.014-1.122,0.045-1.684 c0.032-0.561,0.141-0.998,0.328-1.31c0.249-0.374,0.717-0.685,1.404-0.935c0.124-0.062,0.265-0.077,0.422-0.047 C125.827,330.4,125.968,330.383,126.093,330.321z'
+            />
             <path
               style={{ fill: '#98806E' }}
-              d="M187.883,330.321h30.602h8.049c0.686,0,1.372-0.015,2.059-0.047 c0.685-0.03,1.248,0.109,1.684,0.422c0.188,0.125,0.343,0.281,0.468,0.467c0.124,0.188,0.249,0.375,0.374,0.563 c0.125,0.436,0.187,1.138,0.187,2.105c0,0.967-0.062,1.701-0.187,2.199c-0.25,0.874-0.78,1.357-1.592,1.451 c-0.811,0.094-1.777,0.14-2.9,0.14h-9.359h-15.722c-0.998,0-2.169-0.015-3.51-0.047c-1.343-0.03-2.325,0.139-2.949,0.514 c-0.624,0.374-0.951,1.03-0.982,1.966c-0.032,0.936-0.048,1.904-0.048,2.901v9.546c0,0.688-0.015,1.498-0.045,2.433 c-0.034,0.937,0.014,1.686,0.139,2.246c0.188,0.749,0.562,1.249,1.123,1.498c0.249,0.125,0.686,0.25,1.31,0.373h0.935 c0.249,0.063,0.515,0.08,0.796,0.047c0.281-0.03,0.577-0.047,0.89-0.047h3.181h18.343c0.561,0,1.184-0.014,1.872-0.046 c0.685-0.031,1.387-0.031,2.104,0c0.717,0.032,1.372,0.093,1.967,0.187c0.591,0.094,1.044,0.233,1.357,0.421 c0.186,0.126,0.341,0.407,0.467,0.842c0.125,0.438,0.218,0.905,0.282,1.404c0.061,0.5,0.077,1.016,0.045,1.545 c-0.031,0.531-0.109,0.983-0.233,1.357c-0.126,0.561-0.406,0.967-0.842,1.217c-0.127,0.126-0.297,0.203-0.515,0.235 c-0.22,0.032-0.422,0.079-0.608,0.139h-0.563c-0.312,0.063-0.623,0.079-0.935,0.047c-0.313-0.03-0.624-0.047-0.935-0.047h-3.463 h-19.747c-0.747,0-1.482-0.014-2.199-0.047c-0.719-0.03-1.39,0-2.012,0.094c-0.624,0.094-1.171,0.267-1.639,0.515 c-0.467,0.25-0.794,0.687-0.982,1.31c-0.126,0.375-0.173,0.811-0.139,1.31c0.03,0.5,0.045,0.999,0.045,1.498v5.239v8.892 c0,0.873,0.032,1.669,0.094,2.386c0.062,0.718,0.312,1.233,0.749,1.544c0.435,0.313,0.935,0.483,1.497,0.515 c0.561,0.032,1.185,0.046,1.871,0.046h5.99h17.314h5.334c0.499,0,0.998-0.014,1.497-0.046c0.498-0.032,0.936,0.016,1.31,0.139 c0.749,0.25,1.248,0.594,1.498,1.03c0.123,0.188,0.217,0.5,0.281,0.937c0.061,0.436,0.108,0.889,0.14,1.357 c0.03,0.467,0.015,0.935-0.047,1.402c-0.062,0.469-0.126,0.829-0.187,1.077c-0.25,0.5-0.531,0.842-0.842,1.029 c-0.375,0.25-0.858,0.375-1.45,0.375c-0.594,0-1.171,0-1.731,0h-6.552h-24.894h-6.551c-0.874,0-1.623-0.047-2.245-0.139 c-0.624-0.094-1.093-0.39-1.404-0.89c-0.25-0.374-0.374-0.857-0.374-1.451c0-0.591,0-1.168,0-1.729v-6.551v-25.082v-20.964 v-5.802c0-0.561,0-1.122,0-1.684c0-0.561,0.124-0.998,0.374-1.31c0.249-0.435,0.716-0.749,1.404-0.935 c0.125-0.062,0.248-0.077,0.375-0.047C187.632,330.4,187.756,330.383,187.883,330.321z"
-            ></path>
+              d='M187.883,330.321h30.602h8.049c0.686,0,1.372-0.015,2.059-0.047 c0.685-0.03,1.248,0.109,1.684,0.422c0.188,0.125,0.343,0.281,0.468,0.467c0.124,0.188,0.249,0.375,0.374,0.563 c0.125,0.436,0.187,1.138,0.187,2.105c0,0.967-0.062,1.701-0.187,2.199c-0.25,0.874-0.78,1.357-1.592,1.451 c-0.811,0.094-1.777,0.14-2.9,0.14h-9.359h-15.722c-0.998,0-2.169-0.015-3.51-0.047c-1.343-0.03-2.325,0.139-2.949,0.514 c-0.624,0.374-0.951,1.03-0.982,1.966c-0.032,0.936-0.048,1.904-0.048,2.901v9.546c0,0.688-0.015,1.498-0.045,2.433 c-0.034,0.937,0.014,1.686,0.139,2.246c0.188,0.749,0.562,1.249,1.123,1.498c0.249,0.125,0.686,0.25,1.31,0.373h0.935 c0.249,0.063,0.515,0.08,0.796,0.047c0.281-0.03,0.577-0.047,0.89-0.047h3.181h18.343c0.561,0,1.184-0.014,1.872-0.046 c0.685-0.031,1.387-0.031,2.104,0c0.717,0.032,1.372,0.093,1.967,0.187c0.591,0.094,1.044,0.233,1.357,0.421 c0.186,0.126,0.341,0.407,0.467,0.842c0.125,0.438,0.218,0.905,0.282,1.404c0.061,0.5,0.077,1.016,0.045,1.545 c-0.031,0.531-0.109,0.983-0.233,1.357c-0.126,0.561-0.406,0.967-0.842,1.217c-0.127,0.126-0.297,0.203-0.515,0.235 c-0.22,0.032-0.422,0.079-0.608,0.139h-0.563c-0.312,0.063-0.623,0.079-0.935,0.047c-0.313-0.03-0.624-0.047-0.935-0.047h-3.463 h-19.747c-0.747,0-1.482-0.014-2.199-0.047c-0.719-0.03-1.39,0-2.012,0.094c-0.624,0.094-1.171,0.267-1.639,0.515 c-0.467,0.25-0.794,0.687-0.982,1.31c-0.126,0.375-0.173,0.811-0.139,1.31c0.03,0.5,0.045,0.999,0.045,1.498v5.239v8.892 c0,0.873,0.032,1.669,0.094,2.386c0.062,0.718,0.312,1.233,0.749,1.544c0.435,0.313,0.935,0.483,1.497,0.515 c0.561,0.032,1.185,0.046,1.871,0.046h5.99h17.314h5.334c0.499,0,0.998-0.014,1.497-0.046c0.498-0.032,0.936,0.016,1.31,0.139 c0.749,0.25,1.248,0.594,1.498,1.03c0.123,0.188,0.217,0.5,0.281,0.937c0.061,0.436,0.108,0.889,0.14,1.357 c0.03,0.467,0.015,0.935-0.047,1.402c-0.062,0.469-0.126,0.829-0.187,1.077c-0.25,0.5-0.531,0.842-0.842,1.029 c-0.375,0.25-0.858,0.375-1.45,0.375c-0.594,0-1.171,0-1.731,0h-6.552h-24.894h-6.551c-0.874,0-1.623-0.047-2.245-0.139 c-0.624-0.094-1.093-0.39-1.404-0.89c-0.25-0.374-0.374-0.857-0.374-1.451c0-0.591,0-1.168,0-1.729v-6.551v-25.082v-20.964 v-5.802c0-0.561,0-1.122,0-1.684c0-0.561,0.124-0.998,0.374-1.31c0.249-0.435,0.716-0.749,1.404-0.935 c0.125-0.062,0.248-0.077,0.375-0.047C187.632,330.4,187.756,330.383,187.883,330.321z'
+            />
           </g>
         </g>
         <polygon
           style={{ fill: '#BBAF98' }}
-          points="276.167,208.741 0,302.069 0,186.053 512,186.053 512,302.069 "
-        ></polygon>
+          points='276.167,208.741 0,302.069 0,186.053 512,186.053 512,302.069 '
+        />
       </g>
     </g>
   </svg>
-)
+);
 
 export const LogIcon = (props: IconSvgProps) => (
   <svg
-    viewBox="0 0 48 48"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
+    viewBox='0 0 48 48'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
     {...props}
   >
-    <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
+    <g id='SVGRepo_bgCarrier' strokeWidth='0' />
     <g
-      id="SVGRepo_tracerCarrier"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    ></g>
-    <g id="SVGRepo_iconCarrier">
-      <rect width="48" height="48" fill="white" fillOpacity="0.01"></rect>
+      id='SVGRepo_tracerCarrier'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+    <g id='SVGRepo_iconCarrier'>
+      <rect width='48' height='48' fill='white' fillOpacity='0.01' />
       <rect
-        x="13"
-        y="10"
-        width="28"
-        height="34"
-        fill="#2F88FF"
-        stroke="#000000"
-        strokeWidth="4"
-        strokeLinejoin="round"
-      ></rect>
+        x='13'
+        y='10'
+        width='28'
+        height='34'
+        fill='#2F88FF'
+        stroke='#000000'
+        strokeWidth='4'
+        strokeLinejoin='round'
+      />
       <path
-        d="M35 10V4H8C7.44772 4 7 4.44772 7 5V38H13"
-        stroke="#000000"
-        strokeWidth="4"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      ></path>
+        d='M35 10V4H8C7.44772 4 7 4.44772 7 5V38H13'
+        stroke='#000000'
+        strokeWidth='4'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
       <path
-        d="M21 22H33"
-        stroke="white"
-        strokeWidth="4"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      ></path>
+        d='M21 22H33'
+        stroke='white'
+        strokeWidth='4'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
       <path
-        d="M21 30H33"
-        stroke="white"
-        strokeWidth="4"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      ></path>
+        d='M21 30H33'
+        stroke='white'
+        strokeWidth='4'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
     </g>
   </svg>
-)
+);
diff --git a/napcat.webui/src/components/input/file_input.tsx b/napcat.webui/src/components/input/file_input.tsx
index d1495ae3..382f10fd 100644
--- a/napcat.webui/src/components/input/file_input.tsx
+++ b/napcat.webui/src/components/input/file_input.tsx
@@ -1,6 +1,6 @@
-import { Button } from '@heroui/button'
-import { Input } from '@heroui/input'
-import { useRef, useState } from 'react'
+import { Button } from '@heroui/button';
+import { Input } from '@heroui/input';
+import { useRef, useState } from 'react';
 
 export interface FileInputProps {
   onChange: (file: File) => Promise<void> | void
@@ -13,32 +13,32 @@ const FileInput: React.FC<FileInputProps> = ({
   onChange,
   onDelete,
   label,
-  accept
+  accept,
 }) => {
-  const inputRef = useRef<HTMLInputElement>(null)
-  const [isLoading, setIsLoading] = useState(false)
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [isLoading, setIsLoading] = useState(false);
   return (
-    <div className="flex items-end gap-2">
-      <div className="flex-grow">
+    <div className='flex items-end gap-2'>
+      <div className='flex-grow'>
         <Input
           isDisabled={isLoading}
           ref={inputRef}
           label={label}
-          type="file"
-          placeholder="选择文件"
+          type='file'
+          placeholder='选择文件'
           accept={accept}
           onChange={async (e) => {
             try {
-              setIsLoading(true)
-              const file = e.target.files?.[0]
+              setIsLoading(true);
+              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)
-              if (inputRef.current) inputRef.current.value = ''
+              setIsLoading(false);
+              if (inputRef.current) inputRef.current.value = '';
             }
           }}
         />
@@ -47,23 +47,23 @@ const FileInput: React.FC<FileInputProps> = ({
         isDisabled={isLoading}
         onPress={async () => {
           try {
-            setIsLoading(true)
-            if (onDelete) await onDelete()
+            setIsLoading(true);
+            if (onDelete) await onDelete();
           } catch (error) {
-            console.error(error)
+            console.error(error);
           } finally {
-            setIsLoading(false)
-            if (inputRef.current) inputRef.current.value = ''
+            setIsLoading(false);
+            if (inputRef.current) inputRef.current.value = '';
           }
         }}
-        color="primary"
-        variant="flat"
-        size="sm"
+        color='primary'
+        variant='flat'
+        size='sm'
       >
         删除
       </Button>
     </div>
-  )
-}
+  );
+};
 
-export default FileInput
+export default FileInput;
diff --git a/napcat.webui/src/components/input/image_input.tsx b/napcat.webui/src/components/input/image_input.tsx
index 2d33e263..aa0bb5f2 100644
--- a/napcat.webui/src/components/input/image_input.tsx
+++ b/napcat.webui/src/components/input/image_input.tsx
@@ -1,7 +1,7 @@
-import { Button } from '@heroui/button'
-import { Image } from '@heroui/image'
-import { Input } from '@heroui/input'
-import { useRef } from 'react'
+import { Button } from '@heroui/button';
+import { Image } from '@heroui/image';
+import { Input } from '@heroui/input';
+import { useRef } from 'react';
 
 export interface ImageInputProps {
   onChange: (base64: string) => void
@@ -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="w-5 h-5 flex-shrink-0">
+    <div className='flex items-end gap-2'>
+      <div className='w-5 h-5 flex-shrink-0'>
         <Image
           src={value}
           alt={label}
-          className="w-5 h-5 flex-shrink-0 rounded-none"
+          className='w-5 h-5 flex-shrink-0 rounded-none'
         />
       </div>
       <Input
         ref={inputRef}
         label={label}
-        type="file"
-        placeholder="选择图片"
-        accept="image/*"
+        type='file'
+        placeholder='选择图片'
+        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
-              onChange(base64)
-            }
-            reader.readAsDataURL(file)
+              const base64 = reader.result as string;
+              onChange(base64);
+            };
+            reader.readAsDataURL(file);
           }
         }}
       />
       <Button
         onPress={() => {
-          onChange('')
-          if (inputRef.current) inputRef.current.value = ''
+          onChange('');
+          if (inputRef.current) inputRef.current.value = '';
         }}
-        color="primary"
-        variant="flat"
-        size="sm"
+        color='primary'
+        variant='flat'
+        size='sm'
       >
         删除
       </Button>
     </div>
-  )
-}
+  );
+};
 
-export default ImageInput
+export default ImageInput;
diff --git a/napcat.webui/src/components/log_com/history.tsx b/napcat.webui/src/components/log_com/history.tsx
index 40407379..69e54c0c 100644
--- a/napcat.webui/src/components/log_com/history.tsx
+++ b/napcat.webui/src/components/log_com/history.tsx
@@ -1,15 +1,15 @@
-import { Button } from '@heroui/button'
-import { Card, CardBody, CardHeader } from '@heroui/card'
-import { Select, SelectItem } from '@heroui/select'
-import type { Selection } from '@react-types/shared'
-import { useEffect, useRef, useState } from 'react'
+import { Button } from '@heroui/button';
+import { Card, CardBody, CardHeader } from '@heroui/card';
+import { Select, SelectItem } from '@heroui/select';
+import type { Selection } from '@react-types/shared';
+import { useEffect, useRef, useState } from 'react';
 
-import { colorizeLogLevel } from '@/utils/terminal'
+import { colorizeLogLevel } from '@/utils/terminal';
 
-import PageLoading from '../page_loading'
-import XTerm from '../xterm'
-import type { XTermRef } from '../xterm'
-import LogLevelSelect from './log_level_select'
+import PageLoading from '../page_loading';
+import XTerm from '../xterm';
+import type { XTermRef } from '../xterm';
+import LogLevelSelect from './log_level_select';
 
 export interface HistoryLogsProps {
   list: string[]
@@ -32,80 +32,80 @@ const HistoryLogs: React.FC<HistoryLogsProps> = (props) => {
     listLoading,
     logContent,
     listError,
-    logLoading
-  } = props
-  const Xterm = useRef<XTermRef>(null)
+    logLoading,
+  } = props;
+  const Xterm = useRef<XTermRef>(null);
 
   const [logLevel, setLogLevel] = useState<Selection>(
     new Set(['info', 'warn', 'error'])
-  )
+  );
 
   const logToColored = (log: string) => {
     const logs = log
       .split('\n')
       .map((line) => {
-        const colored = colorizeLogLevel(line)
-        return colored
+        const colored = colorizeLogLevel(line);
+        return colored;
       })
       .filter((log) => {
         if (logLevel === 'all') {
-          return true
+          return true;
         }
-        return logLevel.has(log.level)
+        return logLevel.has(log.level);
       })
       .map((log) => log.content)
-      .join('\r\n')
-    return logs
-  }
+      .join('\r\n');
+    return logs;
+  };
 
   const onDownloadLog = () => {
     if (!logContent) {
-      return
+      return;
     }
-    const blob = new Blob([logContent], { type: 'text/plain' })
-    const url = URL.createObjectURL(blob)
-    const a = document.createElement('a')
-    a.href = url
-    a.download = `${selectedLog}.log`
-    a.click()
-    URL.revokeObjectURL(url)
-  }
+    const blob = new Blob([logContent], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${selectedLog}.log`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
 
   useEffect(() => {
     if (!Xterm.current || !logContent) {
-      return
+      return;
     }
-    Xterm.current.clear()
-    const _logContent = logToColored(logContent)
-    Xterm.current.write(_logContent + '\r\nnapcat@webui:~$ ')
-  }, [logContent, logLevel])
+    Xterm.current.clear();
+    const _logContent = logToColored(logContent);
+    Xterm.current.write(_logContent + '\r\nnapcat@webui:~$ ');
+  }, [logContent, logLevel]);
 
   return (
     <>
       <title>历史日志 - NapCat WebUI</title>
-      <Card className="max-w-full h-full bg-opacity-50 backdrop-blur-sm">
-        <CardHeader className="flex-row justify-start gap-3">
+      <Card className='max-w-full h-full bg-opacity-50 backdrop-blur-sm'>
+        <CardHeader className='flex-row justify-start gap-3'>
           <Select
-            label="选择日志"
-            size="sm"
+            label='选择日志'
+            size='sm'
             isLoading={listLoading}
             errorMessage={listError?.message}
             classNames={{
               trigger:
-                'hover:!bg-content3 bg-opacity-50 backdrop-blur-sm hover:!bg-opacity-60'
+                'hover:!bg-content3 bg-opacity-50 backdrop-blur-sm hover:!bg-opacity-60',
             }}
-            placeholder="选择日志"
+            placeholder='选择日志'
             onChange={(e) => {
-              const value = e.target.value
+              const value = e.target.value;
               if (!value) {
-                return
+                return;
               }
-              onSelect(value)
+              onSelect(value);
             }}
             selectedKeys={[selectedLog || '']}
             items={list.map((name) => ({
               value: name,
-              label: name
+              label: name,
             }))}
           >
             {(item) => (
@@ -118,19 +118,19 @@ const HistoryLogs: React.FC<HistoryLogsProps> = (props) => {
             selectedKeys={logLevel}
             onSelectionChange={setLogLevel}
           />
-          <Button className="flex-shrink-0" onPress={onDownloadLog}>
+          <Button className='flex-shrink-0' onPress={onDownloadLog}>
             下载日志
           </Button>
           <Button onPress={refreshList}>刷新列表</Button>
           <Button onPress={refreshLog}>刷新日志</Button>
         </CardHeader>
-        <CardBody className="relative">
+        <CardBody className='relative'>
           <PageLoading loading={logLoading} />
-          <XTerm className="w-full h-full" ref={Xterm} />
+          <XTerm className='w-full h-full' ref={Xterm} />
         </CardBody>
       </Card>
     </>
-  )
-}
+  );
+};
 
-export default HistoryLogs
+export default HistoryLogs;
diff --git a/napcat.webui/src/components/log_com/log_level_select.tsx b/napcat.webui/src/components/log_com/log_level_select.tsx
index c6f72a08..b0f2fe03 100644
--- a/napcat.webui/src/components/log_com/log_level_select.tsx
+++ b/napcat.webui/src/components/log_com/log_level_select.tsx
@@ -1,9 +1,9 @@
-import { Chip } from '@heroui/chip'
-import { Select, SelectItem } from '@heroui/select'
-import { SharedSelection } from '@heroui/system'
-import type { Selection } from '@react-types/shared'
+import { Chip } from '@heroui/chip';
+import { Select, SelectItem } from '@heroui/select';
+import { SharedSelection } from '@heroui/system';
+import type { Selection } from '@react-types/shared';
 
-import { LogLevel } from '@/const/enum'
+import { LogLevel } from '@/const/enum';
 
 export interface LogLevelSelectProps {
   selectedKeys: Selection
@@ -22,57 +22,57 @@ const logLevelColor: {
   [LogLevel.INFO]: 'primary',
   [LogLevel.WARN]: 'warning',
   [LogLevel.ERROR]: 'primary',
-  [LogLevel.FATAL]: 'primary'
-}
+  [LogLevel.FATAL]: 'primary',
+};
 const LogLevelSelect = (props: LogLevelSelectProps) => {
-  const { selectedKeys, onSelectionChange } = props
+  const { selectedKeys, onSelectionChange } = props;
   return (
     <Select
       selectedKeys={selectedKeys}
       onSelectionChange={(selectedKeys) => {
         if (selectedKeys !== 'all' && selectedKeys?.size === 0) {
-          selectedKeys = 'all'
+          selectedKeys = 'all';
         }
-        onSelectionChange(selectedKeys)
+        onSelectionChange(selectedKeys);
       }}
-      label="日志级别"
-      selectionMode="multiple"
-      aria-label="Log Level"
+      label='日志级别'
+      selectionMode='multiple'
+      aria-label='Log Level'
       classNames={{
         label: 'mb-2',
         trigger: 'bg-opacity-50 backdrop-blur-sm hover:!bg-opacity-60',
-        popoverContent: 'bg-opacity-50 backdrop-blur-sm'
+        popoverContent: 'bg-opacity-50 backdrop-blur-sm',
       }}
-      size="sm"
+      size='sm'
       items={[
         { label: 'Debug', value: LogLevel.DEBUG },
         { label: 'Info', value: LogLevel.INFO },
         { label: 'Warn', value: LogLevel.WARN },
         { label: 'Error', value: LogLevel.ERROR },
-        { label: 'Fatal', value: LogLevel.FATAL }
+        { label: 'Fatal', value: LogLevel.FATAL },
       ]}
       renderValue={(value) => {
         if (value.length === 5) {
           return (
-            <Chip size="sm" color="primary" variant="flat">
+            <Chip size='sm' color='primary' variant='flat'>
               全部
             </Chip>
-          )
+          );
         }
         return (
-          <div className="flex gap-2">
+          <div className='flex gap-2'>
             {value.map((v) => (
               <Chip
-                size="sm"
+                size='sm'
                 key={v.key}
                 color={logLevelColor[v.data?.value as LogLevel]}
-                variant="flat"
+                variant='flat'
               >
                 {v.data?.label}
               </Chip>
             ))}
           </div>
-        )
+        );
       }}
     >
       {(item) => (
@@ -81,7 +81,7 @@ const LogLevelSelect = (props: LogLevelSelectProps) => {
         </SelectItem>
       )}
     </Select>
-  )
-}
+  );
+};
 
-export default LogLevelSelect
+export default LogLevelSelect;
diff --git a/napcat.webui/src/components/log_com/realtime.tsx b/napcat.webui/src/components/log_com/realtime.tsx
index ceab7c47..5d07c936 100644
--- a/napcat.webui/src/components/log_com/realtime.tsx
+++ b/napcat.webui/src/components/log_com/realtime.tsx
@@ -1,114 +1,114 @@
-import { Button } from '@heroui/button'
-import type { Selection } from '@react-types/shared'
-import { useEffect, useRef, useState } from 'react'
-import toast from 'react-hot-toast'
-import { IoDownloadOutline } from 'react-icons/io5'
+import { Button } from '@heroui/button';
+import type { Selection } from '@react-types/shared';
+import { useEffect, useRef, useState } from 'react';
+import toast from 'react-hot-toast';
+import { IoDownloadOutline } from 'react-icons/io5';
 
-import { colorizeLogLevelWithTag } from '@/utils/terminal'
+import { colorizeLogLevelWithTag } from '@/utils/terminal';
 
-import WebUIManager, { Log } from '@/controllers/webui_manager'
+import WebUIManager, { Log } from '@/controllers/webui_manager';
 
-import type { XTermRef } from '../xterm'
-import XTerm from '../xterm'
-import LogLevelSelect from './log_level_select'
+import type { XTermRef } from '../xterm';
+import XTerm from '../xterm';
+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')
-    const blob = new Blob([logContent], { type: 'text/plain' })
-    const url = URL.createObjectURL(blob)
-    const a = document.createElement('a')
-    a.href = url
-    a.download = 'napcat.log'
-    a.click()
-    URL.revokeObjectURL(url)
-  }
+      .join('\r\n');
+    const blob = new Blob([logContent], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'napcat.log';
+    a.click();
+    URL.revokeObjectURL(url);
+  };
 
   const writeStream = () => {
     try {
       const _data = dataArr
         .filter((log) => {
           if (logLevel === 'all') {
-            return true
+            return true;
           }
-          return logLevel.has(log.level)
+          return logLevel.has(log.level);
         })
         .map((log) => colorizeLogLevelWithTag(log.message, log.level))
-        .join('\r\n')
-      Xterm.current?.clear()
-      Xterm.current?.write(_data)
+        .join('\r\n');
+      Xterm.current?.clear();
+      Xterm.current?.write(_data);
     } catch (error) {
-      console.error(error)
-      toast.error('获取实时日志失败')
+      console.error(error);
+      toast.error('获取实时日志失败');
     }
-  }
+  };
 
   useEffect(() => {
-    writeStream()
-  }, [logLevel, dataArr])
+    writeStream();
+  }, [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) {
-        toast.error('获取实时日志失败')
+        toast.error('获取实时日志失败');
       }
-    }
+    };
 
-    const close = subscribeLogs()
+    const close = subscribeLogs();
     return () => {
-      console.log('close')
-      close?.()
-    }
-  }, [])
+      console.log('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;
diff --git a/napcat.webui/src/components/modal.tsx b/napcat.webui/src/components/modal.tsx
index a007d1f4..92bea277 100644
--- a/napcat.webui/src/components/modal.tsx
+++ b/napcat.webui/src/components/modal.tsx
@@ -1,13 +1,13 @@
-import { Button } from '@heroui/button'
+import { Button } from '@heroui/button';
 import {
   ModalBody,
   ModalContent,
   ModalFooter,
   ModalHeader,
   Modal as NextUIModal,
-  useDisclosure
-} from '@heroui/modal'
-import React from 'react'
+  useDisclosure,
+} from '@heroui/modal';
+import React from 'react';
 
 export interface ModalProps {
   content: React.ReactNode
@@ -37,8 +37,8 @@ const Modal: React.FC<ModalProps> = React.memo((props) => {
     onConfirm,
     onCancel,
     ...rest
-  } = props
-  const { onClose: onNativeClose } = useDisclosure()
+  } = props;
+  const { onClose: onNativeClose } = useDisclosure();
 
   return (
     <NextUIModal
@@ -46,12 +46,12 @@ const Modal: React.FC<ModalProps> = React.memo((props) => {
       backdrop={backdrop}
       isDismissable={dismissible}
       onClose={() => {
-        onClose?.()
-        onNativeClose()
+        onClose?.();
+        onNativeClose();
       }}
       classNames={{
         backdrop: 'z-[99]',
-        wrapper: 'z-[99]'
+        wrapper: 'z-[99]',
       }}
       {...rest}
     >
@@ -59,27 +59,27 @@ const Modal: React.FC<ModalProps> = React.memo((props) => {
         {(nativeClose) => (
           <>
             {title && (
-              <ModalHeader className="flex flex-col gap-1">{title}</ModalHeader>
+              <ModalHeader className='flex flex-col gap-1'>{title}</ModalHeader>
             )}
-            <ModalBody className="break-all">{content}</ModalBody>
+            <ModalBody className='break-all'>{content}</ModalBody>
             <ModalFooter>
               {showCancel && (
                 <Button
-                  color="primary"
-                  variant="light"
+                  color='primary'
+                  variant='light'
                   onPress={() => {
-                    onCancel?.()
-                    nativeClose()
+                    onCancel?.();
+                    nativeClose();
                   }}
                 >
                   {cancelText}
                 </Button>
               )}
               <Button
-                color="primary"
+                color='primary'
                 onPress={() => {
-                  onConfirm?.()
-                  nativeClose()
+                  onConfirm?.();
+                  nativeClose();
                 }}
               >
                 {confirmText}
@@ -89,9 +89,9 @@ const Modal: React.FC<ModalProps> = React.memo((props) => {
         )}
       </ModalContent>
     </NextUIModal>
-  )
-})
+  );
+});
 
-Modal.displayName = 'Modal'
+Modal.displayName = 'Modal';
 
-export default Modal
+export default Modal;
diff --git a/napcat.webui/src/components/napcat_repo_info.tsx b/napcat.webui/src/components/napcat_repo_info.tsx
index a75207b3..ec78c526 100644
--- a/napcat.webui/src/components/napcat_repo_info.tsx
+++ b/napcat.webui/src/components/napcat_repo_info.tsx
@@ -1,11 +1,11 @@
-import { Listbox, ListboxItem } from '@heroui/listbox'
-import { Spinner } from '@heroui/spinner'
-import { useRequest } from 'ahooks'
-import { MdError } from 'react-icons/md'
+import { Listbox, ListboxItem } from '@heroui/listbox';
+import { Spinner } from '@heroui/spinner';
+import { useRequest } from 'ahooks';
+import { MdError } from 'react-icons/md';
 
-import IconWrapper from '@/components/github_info/icon_wrapper'
-import ItemCounter from '@/components/github_info/item_counter'
-import GithubRelease from '@/components/github_info/release'
+import IconWrapper from '@/components/github_info/icon_wrapper';
+import ItemCounter from '@/components/github_info/item_counter';
+import GithubRelease from '@/components/github_info/release';
 import {
   BookIcon,
   BugIcon,
@@ -13,193 +13,197 @@ import {
   StarIcon,
   TagIcon,
   UsersIcon,
-  WatchersIcon
-} from '@/components/icons'
+  WatchersIcon,
+} from '@/components/icons';
 
-import { request } from '@/utils/request'
-import { openUrl } from '@/utils/url'
+import { request } from '@/utils/request';
+import { openUrl } from '@/utils/url';
 
 import type {
   GirhubRepo,
   GithubContributor,
   GithubPullRequest,
-  GithubRelease as GithubReleaseType
-} from '@/types/github'
+  GithubRelease as GithubReleaseType,
+} 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 releaseData = releaseOriData?.data?.[0]
-  const prCount = prData?.data?.length || 0
-  const contributorsCount = contributorsData?.data?.length || 0
+  const repoData = repoOriData?.data;
+  const releaseData = releaseOriData?.data?.[0];
+  const prCount = prData?.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"
-      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"
+      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'
       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)
-            break
+            openUrl('https://github.com/NapNeko/NapCatQQ/releases', true);
+            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)
-            break
+            openUrl('https://github.com/NapNeko/NapCatQQ/watchers', true);
+            break;
           case 'star':
-            openUrl('https://github.com/NapNeko/NapCatQQ/stargazers', true)
-            break
+            openUrl('https://github.com/NapNeko/NapCatQQ/stargazers', true);
+            break;
           case 'issues':
-            openUrl('https://github.com/NapNeko/NapCatQQ/issues', true)
-            break
+            openUrl('https://github.com/NapNeko/NapCatQQ/issues', true);
+            break;
           case 'pull_requests':
-            openUrl('https://github.com/NapNeko/NapCatQQ/pulls', true)
-            break
+            openUrl('https://github.com/NapNeko/NapCatQQ/pulls', true);
+            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">
-            <StarIcon className="text-lg" />
+          <IconWrapper className='bg-success/10 text-success'>
+            <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">
-            <BugIcon className="text-lg" />
+          <IconWrapper className='bg-success/10 text-success'>
+            <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">
-            <PullRequestIcon className="text-lg" />
+          <IconWrapper className='bg-primary/10 text-primary'>
+            <PullRequestIcon className='text-lg' />
           </IconWrapper>
         }
       >
         Pull Requests
       </ListboxItem>
       <ListboxItem
-        key="releases"
-        className="group h-auto py-3"
+        key='releases'
+        className='group h-auto py-3'
         endContent={
-          releaseError ? (
-            <MdError className="text-primary-400" />
-          ) : releaseLoading ? (
-            <Spinner size="sm" />
-          ) : (
-            <ItemCounter number={releaseCount} />
-          )
+          releaseError
+            ? (
+              <MdError className='text-primary-400' />
+            )
+            : releaseLoading
+              ? (
+                <Spinner size='sm' />
+              )
+              : (
+                <ItemCounter number={releaseCount} />
+              )
         }
         startContent={
-          <IconWrapper className="bg-primary/10 text-primary">
-            <TagIcon className="text-lg" />
+          <IconWrapper className='bg-primary/10 text-primary'>
+            <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>
-  )
+  );
 }
diff --git a/napcat.webui/src/components/network_edit/generic_form.tsx b/napcat.webui/src/components/network_edit/generic_form.tsx
index 46364415..6d21f144 100644
--- a/napcat.webui/src/components/network_edit/generic_form.tsx
+++ b/napcat.webui/src/components/network_edit/generic_form.tsx
@@ -1,87 +1,87 @@
-import { Button } from '@heroui/button'
-import { Input } from '@heroui/input'
-import { ModalBody, ModalFooter } from '@heroui/modal'
-import { Select, SelectItem } from '@heroui/select'
-import { ReactElement, useEffect } from 'react'
-import { Controller, useForm } from 'react-hook-form'
+import { Button } from '@heroui/button';
+import { Input } from '@heroui/input';
+import { ModalBody, ModalFooter } from '@heroui/modal';
+import { Select, SelectItem } from '@heroui/select';
+import { ReactElement, useEffect } from 'react';
+import { Controller, useForm } from 'react-hook-form';
 import type {
   DefaultValues,
   Path,
   PathValue,
-  SubmitHandler
-} from 'react-hook-form'
-import toast from 'react-hot-toast'
+  SubmitHandler,
+} from 'react-hook-form';
+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]
-  label: string
-  type: FieldTypes
-  options?: Array<{ key: string; value: string }>
-  placeholder?: string
-  isRequired?: boolean
-  isDisabled?: boolean
-  description?: string
-  colSpan?: 1 | 2
+  name: keyof NetworkConfigType[T][0];
+  label: string;
+  type: FieldTypes;
+  options?: Array<{ key: string; value: string; }>;
+  placeholder?: string;
+  isRequired?: boolean;
+  isDisabled?: boolean;
+  description?: string;
+  colSpan?: 1 | 2;
 }
 
 export interface GenericFormProps<T extends keyof NetworkConfigType> {
-  data?: NetworkConfigType[T][0]
-  defaultValues: DefaultValues<NetworkConfigType[T][0]>
-  onClose: () => void
-  onSubmit: (data: NetworkConfigType[T][0]) => Promise<void>
-  fields: Array<Field<T>>
+  data?: NetworkConfigType[T][0];
+  defaultValues: DefaultValues<NetworkConfigType[T][0]>;
+  onClose: () => void;
+  onSubmit: (data: NetworkConfigType[T][0]) => Promise<void>;
+  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)
-    onClose()
-  }
+    await onSubmit(data);
+    onClose();
+  };
 
   const _onSubmit = handleSubmit(submitAction, (e) => {
-    for (const error in e) {
-      toast.error(e[error]?.message as string)
-      return
+    const errors = Object.values(e);
+    if (errors.length > 0) {
+      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}`
-                      }
-                    : void 0
+                      required: `请填写${field.label}`,
+                    }
+                    : 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}
-                          onBlur={controllerField.onBlur}
+                          onValueChange={(value) => controllerField.onChange(value)}
                           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 function random_token(length: number) {
+export default GenericForm;
+export function random_token (length: number) {
   const chars =
-    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@#$%^&*()-_=+[]{}|;:,.<>?'
-  let result = ''
+    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@#$%^&*()-_=+[]{}|;:,.<>?';
+  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;
 }
diff --git a/napcat.webui/src/components/network_edit/http_client.tsx b/napcat.webui/src/components/network_edit/http_client.tsx
index 14b316c3..732184f8 100644
--- a/napcat.webui/src/components/network_edit/http_client.tsx
+++ b/napcat.webui/src/components/network_edit/http_client.tsx
@@ -1,5 +1,5 @@
-import GenericForm, { random_token } from './generic_form'
-import type { Field } from './generic_form'
+import GenericForm, { random_token } 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;
diff --git a/napcat.webui/src/components/network_edit/http_server.tsx b/napcat.webui/src/components/network_edit/http_server.tsx
index 8979d232..7fb74883 100644
--- a/napcat.webui/src/components/network_edit/http_server.tsx
+++ b/napcat.webui/src/components/network_edit/http_server.tsx
@@ -1,5 +1,5 @@
-import GenericForm, { random_token } from './generic_form'
-import type { Field } from './generic_form'
+import GenericForm, { random_token } 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;
diff --git a/napcat.webui/src/components/network_edit/http_sse.tsx b/napcat.webui/src/components/network_edit/http_sse.tsx
index 3549a406..06dbbf09 100644
--- a/napcat.webui/src/components/network_edit/http_sse.tsx
+++ b/napcat.webui/src/components/network_edit/http_sse.tsx
@@ -1,5 +1,5 @@
-import GenericForm, { random_token } from './generic_form'
-import type { Field } from './generic_form'
+import GenericForm, { random_token } 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;
diff --git a/napcat.webui/src/components/network_edit/modal.tsx b/napcat.webui/src/components/network_edit/modal.tsx
index 39e2567e..3139261b 100644
--- a/napcat.webui/src/components/network_edit/modal.tsx
+++ b/napcat.webui/src/components/network_edit/modal.tsx
@@ -1,21 +1,21 @@
-import { Modal, ModalContent, ModalHeader } from '@heroui/modal'
-import toast from 'react-hot-toast'
+import { Modal, ModalContent, ModalHeader } from '@heroui/modal';
+import toast from 'react-hot-toast';
 
-import useConfig from '@/hooks/use-config'
+import useConfig from '@/hooks/use-config';
 
-import HTTPClientForm from './http_client'
-import HTTPServerForm from './http_server'
-import HTTPServerSSEForm from './http_sse'
-import WebsocketClientForm from './ws_client'
-import WebsocketServerForm from './ws_server'
+import HTTPClientForm from './http_client';
+import HTTPServerForm from './http_server';
+import HTTPServerSSEForm from './http_sse';
+import WebsocketClientForm from './ws_client';
+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']
@@ -29,26 +29,26 @@ export interface NetworkFormModalProps<
 const NetworkFormModal = <T extends keyof OneBotConfig['network']>(
   props: NetworkFormModalProps<T>
 ) => {
-  const { isOpen, onOpenChange, field, data } = props
-  const { createNetworkConfig, updateNetworkConfig } = useConfig()
-  const isCreate = !data
+  const { isOpen, onOpenChange, field, data } = props;
+  const { createNetworkConfig, updateNetworkConfig } = useConfig();
+  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"
-      scrollBehavior="outside"
+      size='lg'
+      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;
diff --git a/napcat.webui/src/components/network_edit/ws_client.tsx b/napcat.webui/src/components/network_edit/ws_client.tsx
index 667fd8b1..03a08be3 100644
--- a/napcat.webui/src/components/network_edit/ws_client.tsx
+++ b/napcat.webui/src/components/network_edit/ws_client.tsx
@@ -1,5 +1,5 @@
-import GenericForm, { random_token } from './generic_form'
-import type { Field } from './generic_form'
+import GenericForm, { random_token } 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;
diff --git a/napcat.webui/src/components/network_edit/ws_server.tsx b/napcat.webui/src/components/network_edit/ws_server.tsx
index f89d0409..e3b2adc5 100644
--- a/napcat.webui/src/components/network_edit/ws_server.tsx
+++ b/napcat.webui/src/components/network_edit/ws_server.tsx
@@ -1,5 +1,5 @@
-import GenericForm, { random_token } from './generic_form'
-import type { Field } from './generic_form'
+import GenericForm, { random_token } 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;
diff --git a/napcat.webui/src/components/onebot/api/debug.tsx b/napcat.webui/src/components/onebot/api/debug.tsx
index f857bb9b..4139e617 100644
--- a/napcat.webui/src/components/onebot/api/debug.tsx
+++ b/napcat.webui/src/components/onebot/api/debug.tsx
@@ -1,26 +1,26 @@
-import { Button } from '@heroui/button'
-import { Card, CardBody, CardHeader } from '@heroui/card'
-import { Input } from '@heroui/input'
-import { Snippet } from '@heroui/snippet'
-import { useLocalStorage } from '@uidotdev/usehooks'
-import { motion } from 'motion/react'
-import { useEffect, useRef, useState } from 'react'
-import toast from 'react-hot-toast'
-import { IoLink, IoSend } from 'react-icons/io5'
-import { PiCatDuotone } from 'react-icons/pi'
+import { Button } from '@heroui/button';
+import { Card, CardBody, CardHeader } from '@heroui/card';
+import { Input } from '@heroui/input';
+import { Snippet } from '@heroui/snippet';
+import { useLocalStorage } from '@uidotdev/usehooks';
+import { motion } from 'motion/react';
+import { useEffect, useRef, useState } from 'react';
+import toast from 'react-hot-toast';
+import { IoLink, IoSend } from 'react-icons/io5';
+import { PiCatDuotone } from 'react-icons/pi';
 
-import key from '@/const/key'
-import { OneBotHttpApiContent, OneBotHttpApiPath } from '@/const/ob_api'
+import key from '@/const/key';
+import { OneBotHttpApiContent, OneBotHttpApiPath } from '@/const/ob_api';
 
-import ChatInputModal from '@/components/chat_input/modal'
-import CodeEditor from '@/components/code_editor'
-import PageLoading from '@/components/page_loading'
+import ChatInputModal from '@/components/chat_input/modal';
+import CodeEditor from '@/components/code_editor';
+import PageLoading from '@/components/page_loading';
 
-import { request } from '@/utils/request'
-import { parseAxiosResponse } from '@/utils/url'
-import { generateDefaultJson, parse } from '@/utils/zod'
+import { request } from '@/utils/request';
+import { parseAxiosResponse } from '@/utils/url';
+import { generateDefaultJson, parse } from '@/utils/zod';
 
-import DisplayStruct from './display_struct'
+import DisplayStruct from './display_struct';
 
 export interface OneBotApiDebugProps {
   path: OneBotHttpApiPath
@@ -28,106 +28,104 @@ export interface OneBotApiDebugProps {
 }
 
 const OneBotApiDebug: React.FC<OneBotApiDebugProps> = (props) => {
-  const { path, data } = props
-  const currentURL = new URL(window.location.origin)
-  currentURL.port = '3000'
-  const defaultHttpUrl = currentURL.href
+  const { path, data } = props;
+  const currentURL = new URL(window.location.origin);
+  currentURL.port = '3000';
+  const defaultHttpUrl = currentURL.href;
   const [httpConfig, setHttpConfig] = useLocalStorage(key.httpDebugConfig, {
     url: defaultHttpUrl,
-    token: ''
-  })
-  const [requestBody, setRequestBody] = useState('{}')
-  const [responseContent, setResponseContent] = useState('')
-  const [isCodeEditorOpen, setIsCodeEditorOpen] = useState(false)
-  const [isResponseOpen, setIsResponseOpen] = useState(false)
-  const [isFetching, setIsFetching] = useState(false)
-  const responseRef = useRef<HTMLDivElement>(null)
-  const parsedRequest = parse(data.request)
-  const parsedResponse = parse(data.response)
+    token: '',
+  });
+  const [requestBody, setRequestBody] = useState('{}');
+  const [responseContent, setResponseContent] = useState('');
+  const [isCodeEditorOpen, setIsCodeEditorOpen] = useState(false);
+  const [isResponseOpen, setIsResponseOpen] = useState(false);
+  const [isFetching, setIsFetching] = useState(false);
+  const responseRef = useRef<HTMLDivElement>(null);
+  const parsedRequest = parse(data.request);
+  const parsedResponse = parse(data.response);
 
   const sendRequest = async () => {
-    if (isFetching) return
-    setIsFetching(true)
-    const r = toast.loading('正在发送请求...')
+    if (isFetching) return;
+    setIsFetching(true);
+    const r = toast.loading('正在发送请求...');
     try {
-      const parsedRequestBody = JSON.parse(requestBody)
-      const requestURL = new URL(httpConfig.url)
-      requestURL.pathname = path
+      const parsedRequestBody = JSON.parse(requestBody);
+      const requestURL = new URL(httpConfig.url);
+      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))
-          toast.success('请求发送完成，请查看响应')
+          setResponseContent(parseAxiosResponse(res));
+          toast.success('请求发送完成，请查看响应');
         })
         .catch((err) => {
-          toast.error('请求发送失败：' + err.message)
-          setResponseContent(parseAxiosResponse(err.response))
+          toast.error('请求发送失败：' + err.message);
+          setResponseContent(parseAxiosResponse(err.response));
         })
         .finally(() => {
-          setIsFetching(false)
-          setIsResponseOpen(true)
+          setIsFetching(false);
+          setIsResponseOpen(true);
           responseRef.current?.scrollIntoView({
             behavior: 'smooth',
-            block: 'start'
-          })
-          toast.dismiss(r)
-        })
+            block: 'start',
+          });
+          toast.dismiss(r);
+        });
     } catch (error) {
-      toast.error('请求体 JSON 格式错误')
-      setIsFetching(false)
-      toast.dismiss(r)
+      toast.error('请求体 JSON 格式错误');
+      setIsFetching(false);
+      toast.dismiss(r);
     }
-  }
+  };
 
   useEffect(() => {
-    setRequestBody(generateDefaultJson(data.request))
-    setResponseContent('')
-  }, [path])
+    setRequestBody(generateDefaultJson(data.request));
+    setResponseContent('');
+  }, [path]);
 
   return (
-    <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">
+    <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'>
         <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"
-          symbol={<IoLink size={18} className="inline-block mr-1" />}
+          className='bg-default-50 bg-opacity-50 backdrop-blur-md'
+          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"
-          placeholder="输入 HTTP URL"
+          label='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"
-          placeholder="输入 Token"
+          label='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"
-          size="lg"
-          radius="full"
+          color='primary'
+          size='lg'
+          radius='full'
           isIconOnly
           isDisabled={isFetching}
         >
@@ -135,17 +133,17 @@ const OneBotApiDebug: React.FC<OneBotApiDebugProps> = (props) => {
         </Button>
       </div>
       <Card
-        shadow="sm"
-        className="my-4 bg-opacity-50 backdrop-blur-md overflow-visible"
+        shadow='sm'
+        className='my-4 bg-opacity-50 backdrop-blur-md overflow-visible'
       >
-        <CardHeader className="font-bold text-lg gap-1 pb-0">
-          <span className="mr-2">请求体</span>
+        <CardHeader className='font-bold text-lg gap-1 pb-0'>
+          <span className='mr-2'>请求体</span>
           <Button
-            color="warning"
-            variant="flat"
+            color='warning'
+            variant='flat'
             onPress={() => setIsCodeEditorOpen(!isCodeEditorOpen)}
-            size="sm"
-            radius="full"
+            size='sm'
+            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"
-              height="400px"
+              language='json'
+              height='400px'
             />
 
-            <div className="flex justify-end gap-1">
+            <div className='flex justify-end gap-1'>
               <ChatInputModal />
               <Button
-                color="primary"
-                variant="flat"
+                color='primary'
+                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"
-        className="my-4 relative bg-opacity-50 backdrop-blur-md"
+        shadow='sm'
+        className='my-4 relative bg-opacity-50 backdrop-blur-md'
       >
         <PageLoading loading={isFetching} />
-        <CardHeader className="font-bold text-lg gap-1 pb-0">
-          <span className="mr-2">响应</span>
+        <CardHeader className='font-bold text-lg gap-1 pb-0'>
+          <span className='mr-2'>响应</span>
           <Button
-            color="warning"
-            variant="flat"
+            color='warning'
+            variant='flat'
             onPress={() => setIsResponseOpen(!isResponseOpen)}
-            size="sm"
-            radius="full"
+            size='sm'
+            radius='full'
           >
             {isResponseOpen ? '收起' : '展开'}
           </Button>
           <Button
-            color="success"
-            variant="flat"
+            color='success'
+            variant='flat'
             onPress={() => {
-              navigator.clipboard.writeText(responseContent)
-              toast.success('响应内容已复制到剪贴板')
+              navigator.clipboard.writeText(responseContent);
+              toast.success('响应内容已复制到剪贴板');
             }}
-            size="sm"
-            radius="full"
+            size='sm'
+            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">
-        <h2 className="text-xl font-semibold mb-2">请求体结构</h2>
+      <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>
         <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;
diff --git a/napcat.webui/src/components/onebot/api/display_struct.tsx b/napcat.webui/src/components/onebot/api/display_struct.tsx
index 3826c8b8..1cb42064 100644
--- a/napcat.webui/src/components/onebot/api/display_struct.tsx
+++ b/napcat.webui/src/components/onebot/api/display_struct.tsx
@@ -1,11 +1,11 @@
-import { Chip } from '@heroui/chip'
-import { Tooltip } from '@heroui/tooltip'
-import { motion } from 'motion/react'
-import React, { useState } from 'react'
-import toast from 'react-hot-toast'
-import { TbSquareRoundedChevronRightFilled } from 'react-icons/tb'
+import { Chip } from '@heroui/chip';
+import { Tooltip } from '@heroui/tooltip';
+import { motion } from 'motion/react';
+import React, { useState } from 'react';
+import toast from 'react-hot-toast';
+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 = '联合类型'
-      break
+      name = '联合类型';
+      break;
     case 'value':
-      name = '固定值'
-      break
+      name = '固定值';
+      break;
   }
   let chipColor: 'primary' | 'success' | 'primary' | 'warning' | 'secondary' =
-    'primary'
+    'primary';
   switch (type) {
     case 'enum':
-      chipColor = 'warning'
-      break
+      chipColor = 'warning';
+      break;
     case 'union':
-      chipColor = 'secondary'
-      break
+      chipColor = 'secondary';
+      break;
     case 'array':
-      chipColor = 'primary'
-      break
+      chipColor = 'primary';
+      break;
     case 'object':
-      chipColor = 'success'
-      break
+      chipColor = 'success';
+      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) ? (
-      schema.type.map((type) => (
-        <SchemaType key={type} type={type} value={schema?.value} />
-      ))
-    ) : (
-      <SchemaType type={schema.type} value={schema?.value} />
-    )}
+    {Array.isArray(schema.type)
+      ? (
+        schema.type.map((type) => (
+          <SchemaType key={type} type={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()
-              navigator.clipboard.writeText(schema.name || '')
-              toast.success('已复制')
+              e.stopPropagation();
+              navigator.clipboard.writeText(schema.name || '');
+              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.map((child, i) => (
-            <RenderSchema key={child.name || i} schema={child} />
-          ))
-        ) : (
-          <div>{`{}`}</div>
-        )}
+        {schema.children && schema.children.length > 0
+          ? (
+            schema.children.map((child, i) => (
+              <RenderSchema key={child.name || i} schema={child} />
+            ))
+          )
+          : (
+            <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"
-              variant="flat"
-              color="success"
+              size='sm'
+              variant='flat'
+              color='success'
             >
               {value?.toString()}
             </Chip>
           ))}
         </div>
       </SchemaContainer>
-    )
+    );
   }
 
   return (
-    <div className="mb-2 flex items-center gap-1 pl-5">
-      <Tooltip content="点击复制" placement="top" showArrow>
+    <div className='mb-2 flex items-center gap-1 pl-5'>
+      <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()
-            navigator.clipboard.writeText(schema.name || '')
-            toast.success('已复制')
+            e.stopPropagation();
+            navigator.clipboard.writeText(schema.name || '');
+            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">
-      {Array.isArray(schema) ? (
-        schema.map((s, i) => <RenderSchema key={s.name || i} schema={s} />)
-      ) : (
-        <RenderSchema schema={schema} />
-      )}
+    <div className='p-4 bg-content2 rounded-lg bg-opacity-50'>
+      {Array.isArray(schema)
+        ? (
+          schema.map((s, i) => <RenderSchema key={s.name || i} schema={s} />)
+        )
+        : (
+          <RenderSchema schema={schema} />
+        )}
     </div>
-  )
-}
+  );
+};
 
-export default DisplayStruct
+export default DisplayStruct;
diff --git a/napcat.webui/src/components/onebot/api/nav_list.tsx b/napcat.webui/src/components/onebot/api/nav_list.tsx
index 1d06de40..f035a831 100644
--- a/napcat.webui/src/components/onebot/api/nav_list.tsx
+++ b/napcat.webui/src/components/onebot/api/nav_list.tsx
@@ -1,10 +1,10 @@
-import { Card, CardBody } from '@heroui/card'
-import { Input } from '@heroui/input'
-import clsx from 'clsx'
-import { motion } from 'motion/react'
-import { useState } from 'react'
+import { Card, CardBody } from '@heroui/card';
+import { Input } from '@heroui/input';
+import clsx from 'clsx';
+import { motion } from 'motion/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 [searchValue, setSearchValue] = useState('')
+  const { data, selectedApi, onSelect, openSideBar } = props;
+  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"
-          placeholder="搜索 API"
+          radius='full'
+          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;
diff --git a/napcat.webui/src/components/onebot/display_card/message.tsx b/napcat.webui/src/components/onebot/display_card/message.tsx
index a85686f6..ee548387 100644
--- a/napcat.webui/src/components/onebot/display_card/message.tsx
+++ b/napcat.webui/src/components/onebot/display_card/message.tsx
@@ -1,16 +1,16 @@
-import { Avatar } from '@heroui/avatar'
-import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover'
-import clsx from 'clsx'
+import { Avatar } from '@heroui/avatar';
+import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover';
+import clsx from 'clsx';
 
-import { isOB11GroupMessage } from '@/utils/onebot'
+import { isOB11GroupMessage } from '@/utils/onebot';
 
 import type {
   OB11GroupMessage,
   OB11Message,
-  OB11PrivateMessage
-} from '@/types/onebot'
+  OB11PrivateMessage,
+} 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="flex gap-2 items-center flex-shrink-0">
-        <div className="font-bold">
+    <div className='h-full flex flex-col overflow-hidden flex-1'>
+      <div className='flex gap-2 items-center flex-shrink-0'>
+        <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="absolute right-2 top-2 opacity-0 group-hover:opacity-100 text-default-300">
+          <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>
             {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="flex items-center p-1 flex-shrink-0">
+    <div className='h-full overflow-hidden flex flex-col w-full'>
+      <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="群头像"
-          size="sm"
-          className="flex-shrink-0 mr-2"
+          alt='群头像'
+          size='sm'
+          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="用户头像"
-          size="md"
-          className="flex-shrink-0 mr-2"
+          alt='用户头像'
+          size='md'
+          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="用户头像"
-        size="md"
-        className="flex-shrink-0 mr-2"
+        alt='用户头像'
+        size='md'
+        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;
diff --git a/napcat.webui/src/components/onebot/display_card/meta.tsx b/napcat.webui/src/components/onebot/display_card/meta.tsx
index 9585456b..e5c7faa3 100644
--- a/napcat.webui/src/components/onebot/display_card/meta.tsx
+++ b/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
-} from '@/types/onebot'
+  OneBot11Lifecycle,
+} 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;
diff --git a/napcat.webui/src/components/onebot/display_card/notice.tsx b/napcat.webui/src/components/onebot/display_card/notice.tsx
index 9949530f..0e8e8a53 100644
--- a/napcat.webui/src/components/onebot/display_card/notice.tsx
+++ b/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
-} from '@/types/onebot'
+  OneBot11Poke,
+} 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} />
-      break
+      NoticeComponent = <GroupUploadNotice data={data} />;
+      break;
     case OB11NoticeType.GroupAdmin:
-      NoticeComponent = <GroupAdminNotice data={data} />
-      break
+      NoticeComponent = <GroupAdminNotice data={data} />;
+      break;
     case OB11NoticeType.GroupDecrease:
-      NoticeComponent = <GroupDecreaseNotice data={data} />
-      break
+      NoticeComponent = <GroupDecreaseNotice data={data} />;
+      break;
     case OB11NoticeType.GroupIncrease:
       NoticeComponent = (
         <GroupIncreaseNotice data={data as OneBot11GroupIncrease} />
-      )
-      break
+      );
+      break;
     case OB11NoticeType.GroupBan:
-      NoticeComponent = <GroupBanNotice data={data} />
-      break
+      NoticeComponent = <GroupBanNotice data={data} />;
+      break;
     case OB11NoticeType.FriendAdd:
-      NoticeComponent = <FriendAddNotice data={data as OneBot11FriendAdd} />
-      break
+      NoticeComponent = <FriendAddNotice data={data as OneBot11FriendAdd} />;
+      break;
     case OB11NoticeType.GroupRecall:
-      NoticeComponent = <GroupRecallNotice data={data as OneBot11GroupRecall} />
-      break
+      NoticeComponent = <GroupRecallNotice data={data as OneBot11GroupRecall} />;
+      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} />
-          break
+          NoticeComponent = <PokeNotice data={data as OneBot11Poke} />;
+          break;
         case 'lucky_king':
-          NoticeComponent = <LuckyKingNotice data={data as OneBot11LuckyKing} />
-          break
+          NoticeComponent = <LuckyKingNotice data={data as OneBot11LuckyKing} />;
+          break;
         case 'honor':
-          NoticeComponent = <HonorNotice data={data as OneBot11Honor} />
-          break
+          NoticeComponent = <HonorNotice data={data as OneBot11Honor} />;
+          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} />
-      break
+      NoticeComponent = <GroupCardNotice data={data as OneBot11GroupCard} />;
+      break;
   }
 
   return (
-    <div className="flex gap-2 items-center">
-      <Chip color="warning" variant="flat">
+    <div className='flex gap-2 items-center'>
+      <Chip color='warning' variant='flat'>
         通知
       </Chip>
       <Chip>{getNoticeTypeName(data.notice_type)}</Chip>
       {NoticeComponent}
     </div>
-  )
-}
+  );
+};
 
-export default OneBotNotice
+export default OneBotNotice;
diff --git a/napcat.webui/src/components/onebot/display_card/render.tsx b/napcat.webui/src/components/onebot/display_card/render.tsx
index e6b6b52c..eb03ea71 100644
--- a/napcat.webui/src/components/onebot/display_card/render.tsx
+++ b/napcat.webui/src/components/onebot/display_card/render.tsx
@@ -1,24 +1,24 @@
-import { Button } from '@heroui/button'
-import { Card, CardBody, CardHeader } from '@heroui/card'
-import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover'
-import { Snippet } from '@heroui/snippet'
-import { motion } from 'motion/react'
-import { IoCode } from 'react-icons/io5'
+import { Button } from '@heroui/button';
+import { Card, CardBody, CardHeader } from '@heroui/card';
+import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover';
+import { Snippet } from '@heroui/snippet';
+import { motion } from 'motion/react';
+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 { timestampToDateString } from '@/utils/time'
+import { getEventName, isOB11Event } from '@/utils/onebot';
+import { timestampToDateString } from '@/utils/time';
 
 import type {
   AllOB11WsResponse,
   OB11AllEvent,
-  OB11Request
-} from '@/types/onebot'
+  OB11Request,
+} from '@/types/onebot';
 
-import OneBotMessage from './message'
-import OneBotNotice from './notice'
-import OneBotDisplayResponse from './response'
+import OneBotMessage from './message';
+import OneBotNotice from './notice';
+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 }) {
-  return <div>Request消息，暂未适配</div>
+function RequestComponent ({ data: _ }: { data: OB11Request }) {
+  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 isEvent = isOB11Event(msg)
+  const msg = data[index];
+  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"
-        animate="visible"
-        className="h-full px-2"
+        initial='hidden'
+        animate='visible'
+        className='h-full px-2'
       >
-        <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">
-            <div className="font-bold">
+        <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'>
+            <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"
-                    color="primary"
-                    variant="flat"
-                    radius="full"
+                    size='sm'
+                    color='primary'
+                    variant='flat'
+                    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;
diff --git a/napcat.webui/src/components/onebot/display_card/response.tsx b/napcat.webui/src/components/onebot/display_card/response.tsx
index a951d1d7..45f5afa5 100644
--- a/napcat.webui/src/components/onebot/display_card/response.tsx
+++ b/napcat.webui/src/components/onebot/display_card/response.tsx
@@ -1,39 +1,39 @@
-import { Button } from '@heroui/button'
-import { Chip } from '@heroui/chip'
-import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover'
-import { Snippet } from '@heroui/snippet'
+import { Button } from '@heroui/button';
+import { Chip } from '@heroui/chip';
+import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover';
+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">
-      <Chip color={getResponseStatusColor(data.status)} variant="flat">
+    <div className='flex gap-2 items-center'>
+      <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"
-              color="primary"
-              variant="flat"
-              radius="full"
-              className="text-medium"
+              size='sm'
+              color='primary'
+              variant='flat'
+              radius='full'
+              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 color="warning" size="sm" className="-ml-2 mr-1" variant="flat">
+        <Chip className='pl-0.5' 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;
diff --git a/napcat.webui/src/components/onebot/filter_message_type.tsx b/napcat.webui/src/components/onebot/filter_message_type.tsx
index 6c08160f..0c5fba0a 100644
--- a/napcat.webui/src/components/onebot/filter_message_type.tsx
+++ b/napcat.webui/src/components/onebot/filter_message_type.tsx
@@ -1,6 +1,6 @@
-import { Select, SelectItem } from '@heroui/select'
-import { SharedSelection } from '@heroui/system'
-import type { Selection } from '@react-types/shared'
+import { Select, SelectItem } from '@heroui/select';
+import { SharedSelection } from '@heroui/system';
+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="筛选消息类型"
-      selectionMode="multiple"
+      label='筛选消息类型'
+      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;
diff --git a/napcat.webui/src/components/onebot/message_list.tsx b/napcat.webui/src/components/onebot/message_list.tsx
index 016915c7..9af7428b 100644
--- a/napcat.webui/src/components/onebot/message_list.tsx
+++ b/napcat.webui/src/components/onebot/message_list.tsx
@@ -1,62 +1,62 @@
-import { useEffect, useRef, useState } from 'react'
-import { VariableSizeList } from 'react-window'
+import { useEffect, useRef, useState } from 'react';
+import { VariableSizeList } from 'react-window';
 
 import OneBotItemRender, {
-  getItemSize
-} from '@/components/onebot/display_card/render'
+  getItemSize,
+} 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 containerRef = useRef<HTMLDivElement>(null)
-  const listRef = useRef<VariableSizeList>(null)
-  const [containerHeight, setContainerHeight] = useState(400)
+  const { messages } = props;
+  const containerRef = useRef<HTMLDivElement>(null);
+  const listRef = useRef<VariableSizeList>(null);
+  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)
-            return size
+            const size = getItemSize(msg.post_type);
+            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;
diff --git a/napcat.webui/src/components/onebot/render_message.tsx b/napcat.webui/src/components/onebot/render_message.tsx
index 6cbb0879..99c59933 100644
--- a/napcat.webui/src/components/onebot/render_message.tsx
+++ b/napcat.webui/src/components/onebot/render_message.tsx
@@ -1,8 +1,8 @@
-import { Image } from '@heroui/image'
-import qface from 'qface'
-import { FaReply } from 'react-icons/fa6'
+import { Image } from '@heroui/image';
+import qface from 'qface';
+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"
-            referrerPolicy="no-referrer"
+            alt='image'
+            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' ? (
-              '所有人'
-            ) : (
-              <span>
-                {segment.data.name}({segment.data.qq})
-              </span>
-            )}
+            {segment.data.qq === 'all'
+              ? (
+                '所有人'
+              )
+              : (
+                <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"
-            rel="noopener noreferrer"
+            target='_blank'
+            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"
-              rel="noopener noreferrer"
+              target='_blank'
+              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"
-            rel="noopener noreferrer"
+            target='_blank'
+            rel='noopener noreferrer'
           >
             [文件]
           </a>
-        )
+        );
       default:
-        return <span key={index}>[不支持的消息类型]</span>
+        return <span key={index}>[不支持的消息类型]</span>;
     }
-  })
-}
+  });
+};
diff --git a/napcat.webui/src/components/onebot/send_modal.tsx b/napcat.webui/src/components/onebot/send_modal.tsx
index 50766890..0e28f2e8 100644
--- a/napcat.webui/src/components/onebot/send_modal.tsx
+++ b/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
-} from '@heroui/modal'
-import { useCallback, useRef } from 'react'
-import toast from 'react-hot-toast'
+  useDisclosure,
+} from '@heroui/modal';
+import { useCallback, useRef } from 'react';
+import toast from 'react-hot-toast';
 
-import ChatInputModal from '@/components/chat_input/modal'
-import CodeEditor from '@/components/code_editor'
-import type { CodeEditorRef } from '@/components/code_editor'
+import ChatInputModal from '@/components/chat_input/modal';
+import CodeEditor from '@/components/code_editor';
+import type { CodeEditorRef } from '@/components/code_editor';
 
 export interface OneBotSendModalProps {
   sendMessage: (msg: string) => void
 }
 
 const OneBotSendModal: React.FC<OneBotSendModalProps> = (props) => {
-  const { sendMessage } = props
-  const { isOpen, onOpen, onOpenChange } = useDisclosure()
-  const editorRef = useRef<CodeEditorRef | null>(null)
+  const { sendMessage } = props;
+  const { isOpen, onOpen, onOpenChange } = useDisclosure();
+  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('消息不能为空')
-        return
+        toast.error('消息不能为空');
+        return;
       }
       try {
-        sendMessage(msg)
-        toast.success('消息发送成功')
-        onClose()
+        sendMessage(msg);
+        toast.success('消息发送成功');
+        onClose();
       } 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"
-        size="5xl"
-        scrollBehavior="outside"
+        placement='top-center'
+        size='5xl'
+        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%"
-                    defaultLanguage="json"
+                    height='100%'
+                    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;
diff --git a/napcat.webui/src/components/onebot/ws_status.tsx b/napcat.webui/src/components/onebot/ws_status.tsx
index 68b55428..97ec5d6c 100644
--- a/napcat.webui/src/components/onebot/ws_status.tsx
+++ b/napcat.webui/src/components/onebot/ws_status.tsx
@@ -1,39 +1,39 @@
-import clsx from 'clsx'
-import { ReadyState } from 'react-use-websocket'
+import clsx from 'clsx';
+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 bgClassName = `bg-${color}`
+  const textClassName = `text-${color} text-sm`;
+  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={clsx('w-4 h-4 rounded-full', bgClassName)}></div>
+    <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 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;
 }
diff --git a/napcat.webui/src/components/page_background.tsx b/napcat.webui/src/components/page_background.tsx
index 24b76177..d3ffbf3b 100644
--- a/napcat.webui/src/components/page_background.tsx
+++ b/napcat.webui/src/components/page_background.tsx
@@ -1,25 +1,25 @@
-import { Image } from '@heroui/image'
-import React from 'react'
+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;
diff --git a/napcat.webui/src/components/page_loading.tsx b/napcat.webui/src/components/page_loading.tsx
index 143985ac..0d83f654 100644
--- a/napcat.webui/src/components/page_loading.tsx
+++ b/napcat.webui/src/components/page_loading.tsx
@@ -1,5 +1,5 @@
-import { Spinner } from '@heroui/spinner'
-import clsx from 'clsx'
+import { Spinner } from '@heroui/spinner';
+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;
diff --git a/napcat.webui/src/components/primitives.ts b/napcat.webui/src/components/primitives.ts
index 6def213b..39e10872 100644
--- a/napcat.webui/src/components/primitives.ts
+++ b/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,
+  },
+});
diff --git a/napcat.webui/src/components/qq_info_card.tsx b/napcat.webui/src/components/qq_info_card.tsx
index 8e44505d..36b35846 100644
--- a/napcat.webui/src/components/qq_info_card.tsx
+++ b/napcat.webui/src/components/qq_info_card.tsx
@@ -1,11 +1,11 @@
-import { Card, CardBody } from '@heroui/card'
-import { Image } from '@heroui/image'
-import clsx from 'clsx'
-import { BsTencentQq } from 'react-icons/bs'
+import { Card, CardBody } from '@heroui/card';
+import { Image } from '@heroui/image';
+import clsx from 'clsx';
+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"
-      shadow="none"
-      radius="lg"
+      className='relative bg-primary-100 bg-opacity-60 overflow-hidden flex-shrink-0 shadow-md shadow-primary-300 dark:shadow-primary-50'
+      shadow='none'
+      radius='lg'
     >
       <PageLoading loading={loading} />
-      {error ? (
-        <CardBody className="items-center gap-1 justify-center">
-          <div className="flex-1 text-content1-foreground">Error</div>
-          <div className="whitespace-nowrap text-nowrap flex-shrink-0">
-            {error.message}
-          </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 />
-          </div>
-          <div className="relative flex-shrink-0 z-10">
-            <Image
-              src={
+      {error
+        ? (
+          <CardBody className='items-center gap-1 justify-center'>
+            <div className='flex-1 text-content1-foreground'>Error</div>
+            <div className='whitespace-nowrap text-nowrap flex-shrink-0'>
+              {error.message}
+            </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 />
+            </div>
+            <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"
-            />
-            <div
-              className={clsx(
-                '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'
-              )}
-            ></div>
-          </div>
-          <div className="flex-col justify-center">
-            <div className="text-lg truncate">{data?.nick}</div>
-            <div className="text-primary-500 text-sm">{data?.uin}</div>
-          </div>
-        </CardBody>
-      )}
+                className='shadow-md rounded-full w-12 aspect-square'
+              />
+              <div
+                className={clsx(
+                  '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'
+                )}
+              />
+            </div>
+            <div className='flex-col justify-center'>
+              <div className='text-lg truncate'>{data?.nick}</div>
+              <div className='text-primary-500 text-sm'>{data?.uin}</div>
+            </div>
+          </CardBody>
+        )}
     </Card>
-  )
-}
+  );
+};
 
-export default QQInfoCard
+export default QQInfoCard;
diff --git a/napcat.webui/src/components/qr_code_login.tsx b/napcat.webui/src/components/qr_code_login.tsx
index f33bea46..495bf640 100644
--- a/napcat.webui/src/components/qr_code_login.tsx
+++ b/napcat.webui/src/components/qr_code_login.tsx
@@ -1,5 +1,5 @@
-import { Spinner } from '@heroui/spinner'
-import { QRCodeSVG } from 'qrcode.react'
+import { Spinner } from '@heroui/spinner';
+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="bg-white p-2 rounded-md w-fit mx-auto relative overflow-hidden">
+    <div className='flex flex-col items-center'>
+      <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">
-            <Spinner color="primary" />
+          <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' />
           </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;
diff --git a/napcat.webui/src/components/quick_login.tsx b/napcat.webui/src/components/quick_login.tsx
index c4dc3cfd..df4d1bdd 100644
--- a/napcat.webui/src/components/quick_login.tsx
+++ b/napcat.webui/src/components/quick_login.tsx
@@ -1,10 +1,10 @@
-import { Avatar } from '@heroui/avatar'
-import { Button } from '@heroui/button'
-import { Image } from '@heroui/image'
-import { Select, SelectItem } from '@heroui/select'
-import { IoMdRefresh } from 'react-icons/io'
+import { Avatar } from '@heroui/avatar';
+import { Button } from '@heroui/button';
+import { Image } from '@heroui/image';
+import { Select, SelectItem } from '@heroui/select';
+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 justify-center">
+    <div className='flex flex-col gap-8'>
+      <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"
-                  size="sm"
+                  className='flex-shrink-0'
+                  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"
-                  size="sm"
+                  className='flex-shrink-0'
+                  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"
-          color="secondary"
+          className='flex-grow-0 flex-shrink-0'
+          color='secondary'
           isLoading={refresh}
-          radius="full"
-          size="lg"
-          variant="light"
+          radius='full'
+          size='lg'
+          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"
-          color="primary"
+          className='w-64 max-w-full'
+          color='primary'
           isLoading={isLoading}
-          radius="full"
-          size="lg"
-          variant="shadow"
+          radius='full'
+          size='lg'
+          variant='shadow'
           onPress={onSubmit}
         >
           登录
         </Button>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default QuickLogin
+export default QuickLogin;
diff --git a/napcat.webui/src/components/rotating_text.tsx b/napcat.webui/src/components/rotating_text.tsx
index a50c35be..a9ea3d0c 100644
--- a/napcat.webui/src/components/rotating_text.tsx
+++ b/napcat.webui/src/components/rotating_text.tsx
@@ -3,19 +3,19 @@ import {
   HTMLMotionProps,
   TargetAndTransition,
   Transition,
-  motion
-} from 'motion/react'
+  motion,
+} from 'motion/react';
 import {
   forwardRef,
   useCallback,
   useEffect,
   useImperativeHandle,
   useMemo,
-  useState
-} from 'react'
+  useState,
+} from 'react';
 
-function cn(...classes: (string | undefined | null | boolean)[]): string {
-  return classes.filter(Boolean).join(' ')
+function cn (...classes: (string | undefined | null | boolean)[]): string {
+  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
-      }))
-    }, [texts, currentTextIndex, splitBy])
+        needsSpace: i !== arr.length - 1,
+      }));
+    }, [texts, currentTextIndex, splitBy]);
 
     const getStaggerDelay = useCallback(
       (index: number, totalChars: number): number => {
-        const total = totalChars
-        if (staggerFrom === 'first') return index * staggerDuration
-        if (staggerFrom === 'last') return (total - 1 - index) * staggerDuration
+        const total = totalChars;
+        if (staggerFrom === 'first') return index * staggerDuration;
+        if (staggerFrom === 'last') return (total - 1 - index) * staggerDuration;
         if (staggerFrom === 'center') {
-          const center = Math.floor(total / 2)
-          return Math.abs(center - index) * staggerDuration
+          const center = Math.floor(total / 2);
+          return Math.abs(center - index) * staggerDuration;
         }
         if (staggerFrom === 'random') {
-          const randomIndex = Math.floor(Math.random() * total)
-          return Math.abs(randomIndex - index) * staggerDuration
+          const randomIndex = Math.floor(Math.random() * total);
+          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)
-        if (onNext) onNext(newIndex)
+        setCurrentTextIndex(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
-      const intervalId = setInterval(next, rotationInterval)
-      return () => clearInterval(intervalId)
-    }, [next, rotationInterval, auto])
+      if (!auto) return;
+      const intervalId = setInterval(next, rotationInterval);
+      return () => clearInterval(intervalId);
+    }, [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'
-export default RotatingText
+RotatingText.displayName = 'RotatingText';
+export default RotatingText;
diff --git a/napcat.webui/src/components/sidebar/index.tsx b/napcat.webui/src/components/sidebar/index.tsx
index e797bc6f..daa46449 100644
--- a/napcat.webui/src/components/sidebar/index.tsx
+++ b/napcat.webui/src/components/sidebar/index.tsx
@@ -1,19 +1,19 @@
-import { Button } from '@heroui/button'
-import { Image } from '@heroui/image'
-import clsx from 'clsx'
-import { motion } from 'motion/react'
-import React from 'react'
-import { IoMdLogOut } from 'react-icons/io'
-import { MdDarkMode, MdLightMode } from 'react-icons/md'
+import { Button } from '@heroui/button';
+import { Image } from '@heroui/image';
+import clsx from 'clsx';
+import { motion } from 'motion/react';
+import React from 'react';
+import { IoMdLogOut } from 'react-icons/io';
+import { MdDarkMode, MdLightMode } from 'react-icons/md';
 
-import useAuth from '@/hooks/auth'
-import useDialog from '@/hooks/use-dialog'
-import { useTheme } from '@/hooks/use-theme'
+import useAuth from '@/hooks/auth';
+import useDialog from '@/hooks/use-dialog';
+import { useTheme } from '@/hooks/use-theme';
 
-import logo from '@/assets/images/logo.png'
-import type { MenuItem } from '@/config/site'
+import logo from '@/assets/images/logo.png';
+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 { toggleTheme, isDark } = useTheme()
-  const { revokeAuth } = useAuth()
-  const dialog = useDialog()
+  const { open, items } = props;
+  const { toggleTheme, isDark } = useTheme();
+  const { revokeAuth } = useAuth();
+  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">
-        <div className="flex justify-center items-center my-2 gap-2">
-          <Image radius="none" height={40} src={logo} className="mb-2" />
+      <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'>
+          <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"
-              color="primary"
-              radius="full"
-              variant="light"
+              className='w-full'
+              color='primary'
+              radius='full'
+              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"
-              color="primary"
-              radius="full"
-              variant="light"
+              className='w-full mb-2'
+              color='primary'
+              radius='full'
+              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;
diff --git a/napcat.webui/src/components/sidebar/menus.tsx b/napcat.webui/src/components/sidebar/menus.tsx
index 79f6b08e..db8fe0ed 100644
--- a/napcat.webui/src/components/sidebar/menus.tsx
+++ b/napcat.webui/src/components/sidebar/menus.tsx
@@ -1,50 +1,50 @@
-import { Button } from '@heroui/button'
-import { Image } from '@heroui/image'
-import { useLocalStorage } from '@uidotdev/usehooks'
-import clsx from 'clsx'
-import React from 'react'
-import { matchPath, useLocation, useNavigate } from 'react-router-dom'
+import { Button } from '@heroui/button';
+import { Image } from '@heroui/image';
+import { useLocalStorage } from '@uidotdev/usehooks';
+import clsx from 'clsx';
+import React from 'react';
+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 locate = useLocation()
-    const [open, setOpen] = React.useState(!!item.autoOpen)
+    const navigate = useNavigate();
+    const locate = useLocation();
+    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
-    }, [item.href, locate.pathname])
+      return false;
+    }, [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])
-    const panelRef = React.useRef<HTMLDivElement>(null)
+    }, [item.items, locate.pathname]);
+    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 ? (
-              <div
-                className={clsx(
-                  'ml-auto relative w-3 h-3 transition-transform',
-                  open && 'transform rotate-180',
-                  isActive
-                    ? 'text-primary-500'
-                    : 'text-primary-200 dark:text-white',
-                  'before:rounded-full',
-                  'before:content-[""]',
-                  'before:block',
-                  'before:absolute',
-                  'before:w-3',
-                  'before:h-[4.5px]',
-                  'before:bg-current',
-                  'before:top-1/2',
-                  'before:-left-[3px]',
-                  'before:transform',
-                  'before:-translate-y-1/2',
-                  'before:rotate-45',
-                  'after:rounded-full',
-                  'after:content-[""]',
-                  'after:block',
-                  'after:absolute',
-                  'after:w-3',
-                  'after:h-[4.5px]',
-                  'after:bg-current',
-                  'after:top-1/2',
-                  'after:left-[3px]',
-                  'after:transform',
-                  'after:-translate-y-1/2',
-                  'after:-rotate-45'
-                )}
-              />
-            ) : (
-              <div
-                className={clsx(
-                  'w-3 h-1.5 rounded-full ml-auto shadow-lg',
-                  isActive
-                    ? 'bg-primary-500 animate-spinner-ease-spin'
-                    : 'bg-primary-200 dark:bg-white'
-                )}
-              />
-            )
+            canOpen
+              ? (
+                <div
+                  className={clsx(
+                    'ml-auto relative w-3 h-3 transition-transform',
+                    open && 'transform rotate-180',
+                    isActive
+                      ? 'text-primary-500'
+                      : 'text-primary-200 dark:text-white',
+                    'before:rounded-full',
+                    'before:content-[""]',
+                    'before:block',
+                    'before:absolute',
+                    'before:w-3',
+                    'before:h-[4.5px]',
+                    'before:bg-current',
+                    'before:top-1/2',
+                    'before:-left-[3px]',
+                    'before:transform',
+                    'before:-translate-y-1/2',
+                    'before:rotate-45',
+                    'after:rounded-full',
+                    'after:content-[""]',
+                    'after:block',
+                    'after:absolute',
+                    'after:w-3',
+                    'after:h-[4.5px]',
+                    'after:bg-current',
+                    'after:top-1/2',
+                    'after:left-[3px]',
+                    'after:transform',
+                    'after:-translate-y-1/2',
+                    'after:-rotate-45'
+                  )}
+                />
+              )
+              : (
+                <div
+                  className={clsx(
+                    'w-3 h-1.5 rounded-full ml-auto shadow-lg',
+                    isActive
+                      ? 'bg-primary-500 animate-spinner-ease-spin'
+                      : 'bg-primary-200 dark:bg-white'
+                  )}
+                />
+              )
           }
-          radius="full"
+          radius='full'
           startContent={
-            customIcons[item.label] ? (
-              <Image
-                radius="none"
-                src={customIcons[item.label]}
-                alt={item.label}
-                className="w-5 h-5"
-              />
-            ) : (
-              item.icon
-            )
+            customIcons[item.label]
+              ? (
+                <Image
+                  radius='none'
+                  src={customIcons[item.label]}
+                  alt={item.label}
+                  className='w-5 h-5'
+                />
+              )
+              : (
+                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;
diff --git a/napcat.webui/src/components/switch_card.tsx b/napcat.webui/src/components/switch_card.tsx
index 0bce2e3f..ebc4ddb9 100644
--- a/napcat.webui/src/components/switch_card.tsx
+++ b/napcat.webui/src/components/switch_card.tsx
@@ -1,6 +1,6 @@
-import { Switch } from '@heroui/switch'
-import clsx from 'clsx'
-import React, { forwardRef } from 'react'
+import { Switch } from '@heroui/switch';
+import clsx from 'clsx';
+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 selectString = value ? 'true' : 'false'
+    const { label, description, value, onValueChange, disabled } = props;
+    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">
-          <p className="text-medium">{label}</p>
-          <p className="text-tiny text-default-400">{description}</p>
+        <div className='flex flex-col gap-1'>
+          <p className='text-medium'>{label}</p>
+          <p className='text-tiny text-default-400'>{description}</p>
         </div>
       </Switch>
-    )
+    );
   }
-)
+);
 
-SwitchCard.displayName = 'SwitchCard'
+SwitchCard.displayName = 'SwitchCard';
 
-export default SwitchCard
+export default SwitchCard;
diff --git a/napcat.webui/src/components/system_info.tsx b/napcat.webui/src/components/system_info.tsx
index 1a310e97..f63f7afc 100644
--- a/napcat.webui/src/components/system_info.tsx
+++ b/napcat.webui/src/components/system_info.tsx
@@ -1,24 +1,24 @@
-import { Button } from '@heroui/button'
-import { Card, CardBody, CardHeader } from '@heroui/card'
-import { Chip } from '@heroui/chip'
-import { Spinner } from '@heroui/spinner'
-import { Tooltip } from '@heroui/tooltip'
-import { useRequest } from 'ahooks'
-import { useEffect } from 'react'
-import { BsStars } from 'react-icons/bs'
-import { FaCircleInfo, FaInfo, FaQq } from 'react-icons/fa6'
-import { IoLogoChrome, IoLogoOctocat } from 'react-icons/io'
-import { RiMacFill } from 'react-icons/ri'
+import { Button } from '@heroui/button';
+import { Card, CardBody, CardHeader } from '@heroui/card';
+import { Chip } from '@heroui/chip';
+import { Spinner } from '@heroui/spinner';
+import { Tooltip } from '@heroui/tooltip';
+import { useRequest } from 'ahooks';
+import { useEffect } from 'react';
+import { BsStars } from 'react-icons/bs';
+import { FaCircleInfo, FaInfo, FaQq } from 'react-icons/fa6';
+import { IoLogoChrome, IoLogoOctocat } from 'react-icons/io';
+import { RiMacFill } from 'react-icons/ri';
 
-import useDialog from '@/hooks/use-dialog'
+import useDialog from '@/hooks/use-dialog';
 
-import { request } from '@/utils/request'
-import { compareVersion } from '@/utils/version'
+import { request } from '@/utils/request';
+import { compareVersion } from '@/utils/version';
 
-import WebUIManager from '@/controllers/webui_manager'
-import { GithubRelease } from '@/types/github'
+import WebUIManager from '@/controllers/webui_manager';
+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="text-primary-200">{value}</div>
-      <div className="ml-auto">{endContent}</div>
+      <div className='w-24'>{title}</div>
+      <div className='text-primary-200'>{value}</div>
+      <div className='ml-auto'>{endContent}</div>
     </div>
-  )
-}
+  );
+};
 
 export interface NewVersionTipProps {
   currentVersion?: string
 }
 
 const NewVersionTip = (props: NewVersionTipProps) => {
-  const { currentVersion } = props
-  const dialog = useDialog()
+  const { currentVersion } = props;
+  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"
-          color="primary"
-          variant="shadow"
-          className="!w-5 !h-5 !min-w-0 text-small shadow-md"
+          radius='full'
+          color='primary'
+          variant='shadow'
+          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)
-    }, [currentVersion, runAiSummary])
+      runAiSummary(currentVersion);
+    }, [currentVersion, runAiSummary]);
 
     if (aiSummaryLoading) {
       return (
-        <div className="flex justify-center py-1">
-          <Spinner size="sm" />
+        <div className='flex justify-center py-1'>
+          <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"
-        color="primary"
-        variant="shadow"
-        className="!w-5 !h-5 !min-w-0 text-small shadow-md"
+        radius='full'
+        color='primary'
+        variant='shadow'
+        className='!w-5 !h-5 !min-w-0 text-small shadow-md'
         onPress={() => {
           dialog.confirm({
             title: '有新版本可用',
             content: (
-              <div className="space-y-2">
-                <div className="text-sm space-x-2">
+              <div className='space-y-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="text-primary-400 font-bold flex items-center gap-1 mb-1">
+                <div className='p-2 rounded-md bg-content2 text-sm'>
+                  <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
-  } = useRequest(WebUIManager.getPackageInfo)
+    error: packageError,
+  } = useRequest(WebUIManager.getPackageInfo);
 
-  const currentVersion = packageData?.version
+  const currentVersion = packageData?.version;
 
   return (
     <SystemInfoItem
-      title="NapCat 版本"
-      icon={<IoLogoOctocat className="text-xl" />}
+      title='NapCat 版本'
+      icon={<IoLogoOctocat className='text-xl' />}
       value={
-        packageError ? (
+        packageError
+          ? (
           `错误：${packageError.message}`
-        ) : packageLoading ? (
-          <Spinner size="sm" />
-        ) : (
-          currentVersion
-        )
+          )
+          : packageLoading
+            ? (
+              <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
-  } = useRequest(WebUIManager.getQQVersion)
+    error: qqVersionError,
+  } = useRequest(WebUIManager.getQQVersion);
   return (
-    <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">
-        <FaCircleInfo className="text-lg" />
+    <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'>
+        <FaCircleInfo className='text-lg' />
         <span>系统信息</span>
       </CardHeader>
-      <CardBody className="flex-1">
-        <div className="flex flex-col justify-between h-full">
+      <CardBody className='flex-1'>
+        <div className='flex flex-col justify-between h-full'>
           <NapCatVersion />
           <SystemInfoItem
-            title="QQ 版本"
-            icon={<FaQq className="text-lg" />}
+            title='QQ 版本'
+            icon={<FaQq className='text-lg' />}
             value={
-              qqVersionError ? (
+              qqVersionError
+                ? (
                 `错误：${qqVersionError.message}`
-              ) : qqVersionLoading ? (
-                <Spinner size="sm" />
-              ) : (
-                qqVersionData
-              )
+                )
+                : qqVersionLoading
+                  ? (
+                    <Spinner size='sm' />
+                  )
+                  : (
+                    qqVersionData
+                  )
             }
           />
           <SystemInfoItem
-            title="WebUI 版本"
-            icon={<IoLogoChrome className="text-xl" />}
-            value="Next"
+            title='WebUI 版本'
+            icon={<IoLogoChrome className='text-xl' />}
+            value='Next'
           />
           <SystemInfoItem
-            title="系统版本"
-            icon={<RiMacFill className="text-xl" />}
+            title='系统版本'
+            icon={<RiMacFill className='text-xl' />}
             value={archInfo}
           />
         </div>
       </CardBody>
     </Card>
-  )
-}
+  );
+};
 
-export default SystemInfo
+export default SystemInfo;
diff --git a/napcat.webui/src/components/system_status_display.tsx b/napcat.webui/src/components/system_status_display.tsx
index 78ce5b6c..1f5d86c2 100644
--- a/napcat.webui/src/components/system_status_display.tsx
+++ b/napcat.webui/src/components/system_status_display.tsx
@@ -1,12 +1,12 @@
-import { Card, CardBody } from '@heroui/card'
-import { Image } from '@heroui/image'
-import clsx from 'clsx'
-import { BiSolidMemoryCard } from 'react-icons/bi'
-import { GiCpu } from 'react-icons/gi'
+import { Card, CardBody } from '@heroui/card';
+import { Image } from '@heroui/image';
+import clsx from 'clsx';
+import { BiSolidMemoryCard } from 'react-icons/bi';
+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="text-default-400">
+      <div className='w-24'>{title}</div>
+      <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 systemUsage = Number(data.memory.usage.system)
-    const qqUsage = Number(data.memory.usage.qq)
-    memoryUsage.system = (systemUsage / system) * 100
-    memoryUsage.qq = (qqUsage / system) * 100
+    const system = Number(data.memory.total) || 1;
+    const systemUsage = Number(data.memory.usage.system);
+    const qqUsage = Number(data.memory.usage.qq);
+    memoryUsage.system = (systemUsage / 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">
-      <div className="absolute h-full right-0 top-0">
+    <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'>
         <Image
           src={bkg}
-          alt="background"
-          className="select-none pointer-events-none !opacity-30 w-full h-full"
+          alt='background'
+          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">
-        <div className="flex-1 w-full md:max-w-96">
-          <h2 className="text-lg font-semibold flex items-center gap-1 text-primary-400">
-            <GiCpu className="text-xl" />
+      <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'>
+          <h2 className='text-lg font-semibold flex items-center gap-1 text-primary-400'>
+            <GiCpu className='text-xl' />
             <span>CPU</span>
           </h2>
-          <div className="grid grid-cols-2 gap-2">
-            <SystemStatusItem title="型号" value={data?.cpu.model} size="lg" />
-            <SystemStatusItem title="内核数" value={data?.cpu.core} />
-            <SystemStatusItem title="主频" value={data?.cpu.speed} unit="GHz" />
+          <div className='grid grid-cols-2 gap-2'>
+            <SystemStatusItem title='型号' value={data?.cpu.model} size='lg' />
+            <SystemStatusItem title='内核数' value={data?.cpu.core} />
+            <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">
-            <BiSolidMemoryCard className="text-xl" />
+          <h2 className='text-lg font-semibold flex items-center gap-1 text-primary-400 mt-2'>
+            <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"
-              unit="MB"
+              size='lg'
+              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;
diff --git a/napcat.webui/src/components/tabs/index.tsx b/napcat.webui/src/components/tabs/index.tsx
index bacdb5e2..0aab74b6 100644
--- a/napcat.webui/src/components/tabs/index.tsx
+++ b/napcat.webui/src/components/tabs/index.tsx
@@ -1,5 +1,5 @@
-import clsx from 'clsx'
-import { type ReactNode, createContext, forwardRef, useContext } from 'react'
+import clsx from 'clsx';
+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)
-      props.onClick?.(e)
-    }
+      onChange(value);
+      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) {
-  const { activeKey } = useContext(TabsContext)
+export function TabPanel ({ value, children, className }: TabPanelProps) {
+  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>;
 }
diff --git a/napcat.webui/src/components/tabs/sortable_tab.tsx b/napcat.webui/src/components/tabs/sortable_tab.tsx
index a5713a23..b98c2ed6 100644
--- a/napcat.webui/src/components/tabs/sortable_tab.tsx
+++ b/napcat.webui/src/components/tabs/sortable_tab.tsx
@@ -1,30 +1,30 @@
-import { useSortable } from '@dnd-kit/sortable'
-import { CSS } from '@dnd-kit/utilities'
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 
-import { Tab } from '@/components/tabs'
-import type { TabProps } from '@/components/tabs'
+import { Tab } 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
-  } = useSortable({ id })
+    isDragging,
+  } = 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}
     />
-  )
+  );
 }
diff --git a/napcat.webui/src/components/tailwind_markdown.tsx b/napcat.webui/src/components/tailwind_markdown.tsx
index 1233f49e..bd649f35 100644
--- a/napcat.webui/src/components/tailwind_markdown.tsx
+++ b/napcat.webui/src/components/tailwind_markdown.tsx
@@ -1,49 +1,49 @@
-import Markdown from 'react-markdown'
-import remarkGfm from 'remark-gfm'
+import Markdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 
 const TailwindMarkdown: React.FC<{ content: string }> = ({ content }) => {
   return (
     <Markdown
-      className="prose prose-sm sm:prose lg:prose-lg xl:prose-xl"
+      className='prose prose-sm sm:prose lg:prose-lg xl:prose-xl'
       remarkPlugins={[remarkGfm]}
       components={{
         h1: ({ node, ...props }) => (
-          <h1 className="text-2xl font-bold" {...props} />
+          <h1 className='text-2xl font-bold' {...props} />
         ),
         h2: ({ node, ...props }) => (
-          <h2 className="text-xl font-bold" {...props} />
+          <h2 className='text-xl font-bold' {...props} />
         ),
         h3: ({ node, ...props }) => (
-          <h3 className="text-lg font-bold" {...props} />
+          <h3 className='text-lg font-bold' {...props} />
         ),
-        p: ({ node, ...props }) => <p className="m-0" {...props} />,
+        p: ({ node, ...props }) => <p className='m-0' {...props} />,
         a: ({ node, ...props }) => (
           <a
-            className="text-primary-500 inline-block hover:underline"
-            target="_blank"
+            className='text-primary-500 inline-block hover:underline'
+            target='_blank'
             {...props}
           />
         ),
         ul: ({ node, ...props }) => (
-          <ul className="list-disc list-inside" {...props} />
+          <ul className='list-disc list-inside' {...props} />
         ),
         ol: ({ node, ...props }) => (
-          <ol className="list-decimal list-inside" {...props} />
+          <ol className='list-decimal list-inside' {...props} />
         ),
         blockquote: ({ node, ...props }) => (
           <blockquote
-            className="border-l-4 border-default-300 pl-4 italic"
+            className='border-l-4 border-default-300 pl-4 italic'
             {...props}
           />
         ),
         code: ({ node, ...props }) => (
-          <code className="bg-default-100 p-1 rounded text-xs" {...props} />
-        )
+          <code className='bg-default-100 p-1 rounded text-xs' {...props} />
+        ),
       }}
     >
       {content}
     </Markdown>
-  )
-}
+  );
+};
 
-export default TailwindMarkdown
+export default TailwindMarkdown;
diff --git a/napcat.webui/src/components/terminal/terminal-instance.tsx b/napcat.webui/src/components/terminal/terminal-instance.tsx
index 2c35bacc..aa5ee456 100644
--- a/napcat.webui/src/components/terminal/terminal-instance.tsx
+++ b/napcat.webui/src/components/terminal/terminal-instance.tsx
@@ -1,56 +1,56 @@
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef } from 'react';
 
-import TerminalManager from '@/controllers/terminal_manager'
+import TerminalManager from '@/controllers/terminal_manager';
 
-import XTerm, { XTermRef } from '../xterm'
+import XTerm, { XTermRef } from '../xterm';
 
 interface TerminalInstanceProps {
   id: string
 }
 
-export function TerminalInstance({ id }: TerminalInstanceProps) {
-  const termRef = useRef<XTermRef>(null)
-  const connected = useRef(false)
+export function TerminalInstance ({ id }: TerminalInstanceProps) {
+  const termRef = useRef<XTermRef>(null);
+  const connected = useRef(false);
 
   const handleData = (data: string) => {
     try {
-      const parsed = JSON.parse(data)
+      const parsed = JSON.parse(data);
       if (parsed.data) {
-        termRef.current?.write(parsed.data)
+        termRef.current?.write(parsed.data);
       }
     } catch (e) {
-      termRef.current?.write(data)
+      termRef.current?.write(data);
     }
-  }
+  };
 
   useEffect(() => {
     return () => {
       if (connected.current) {
-        TerminalManager.disconnectTerminal(id, handleData)
+        TerminalManager.disconnectTerminal(id, handleData);
       }
-    }
-  }, [id])
+    };
+  }, [id]);
 
   const handleInput = (data: string) => {
-    TerminalManager.sendInput(id, data)
-  }
+    TerminalManager.sendInput(id, data);
+  };
 
   const handleResize = (cols: number, rows: number) => {
     if (!connected.current) {
-      connected.current = true
-      console.log('instance', rows, cols)
-      TerminalManager.connectTerminal(id, handleData, { rows, cols })
+      connected.current = true;
+      console.log('instance', rows, cols);
+      TerminalManager.connectTerminal(id, handleData, { rows, cols });
     } else {
-      TerminalManager.sendResize(id, cols, rows)
+      TerminalManager.sendResize(id, cols, rows);
     }
-  }
+  };
 
   return (
     <XTerm
       ref={termRef}
       onInput={handleInput}
       onResize={handleResize} // 使用 fitAddon 改变后触发的 resize 回调
-      className="w-full h-full"
+      className='w-full h-full'
     />
-  )
+  );
 }
diff --git a/napcat.webui/src/components/theme-switch.tsx b/napcat.webui/src/components/theme-switch.tsx
index 2dfdcf06..0b891d82 100644
--- a/napcat.webui/src/components/theme-switch.tsx
+++ b/napcat.webui/src/components/theme-switch.tsx
@@ -1,11 +1,11 @@
-import { SwitchProps, useSwitch } from '@heroui/switch'
-import { VisuallyHidden } from '@react-aria/visually-hidden'
-import clsx from 'clsx'
-import { FC, useEffect, useState } from 'react'
+import { SwitchProps, useSwitch } from '@heroui/switch';
+import { VisuallyHidden } from '@react-aria/visually-hidden';
+import clsx from 'clsx';
+import { FC, useEffect, useState } from 'react';
 
-import { MoonFilledIcon, SunFilledIcon } from '@/components/icons'
+import { MoonFilledIcon, SunFilledIcon } from '@/components/icons';
 
-import { useTheme } from '@/hooks/use-theme'
+import { useTheme } from '@/hooks/use-theme';
 
 export interface ThemeSwitchProps {
   className?: string
@@ -14,13 +14,13 @@ export interface ThemeSwitchProps {
 
 export const ThemeSwitch: FC<ThemeSwitchProps> = ({
   className,
-  classNames
+  classNames,
 }) => {
-  const [isMounted, setIsMounted] = useState(false)
+  const [isMounted, setIsMounted] = useState(false);
 
-  const { theme, toggleTheme } = useTheme()
+  const { theme, toggleTheme } = useTheme();
 
-  const onChange = toggleTheme
+  const onChange = toggleTheme;
 
   const {
     Component,
@@ -28,18 +28,18 @@ export const ThemeSwitch: FC<ThemeSwitchProps> = ({
     isSelected,
     getBaseProps,
     getInputProps,
-    getWrapperProps
+    getWrapperProps,
   } = useSwitch({
     isSelected: theme === 'light',
-    onChange
-  })
+    onChange,
+  });
 
   useEffect(() => {
-    setIsMounted(true)
-  }, [isMounted])
+    setIsMounted(true);
+  }, [isMounted]);
 
   // Prevent Hydration Mismatch
-  if (!isMounted) return <div className="w-6 h-6" />
+  if (!isMounted) return <div className='w-6 h-6' />;
 
   return (
     <Component
@@ -49,7 +49,7 @@ export const ThemeSwitch: FC<ThemeSwitchProps> = ({
           'px-px transition-opacity hover:opacity-80 cursor-pointer',
           className,
           classNames?.base
-        )
+        ),
       })}
     >
       <VisuallyHidden>
@@ -68,18 +68,20 @@ export const ThemeSwitch: FC<ThemeSwitchProps> = ({
               '!text-default-500',
               'pt-px',
               'px-0',
-              'mx-0'
+              'mx-0',
             ],
             classNames?.wrapper
-          )
+          ),
         })}
       >
-        {isSelected ? (
-          <MoonFilledIcon size={22} />
-        ) : (
-          <SunFilledIcon size={22} />
-        )}
+        {isSelected
+          ? (
+            <MoonFilledIcon size={22} />
+          )
+          : (
+            <SunFilledIcon size={22} />
+          )}
       </div>
     </Component>
-  )
-}
+  );
+};
diff --git a/napcat.webui/src/components/toaster.tsx b/napcat.webui/src/components/toaster.tsx
index 805b1824..c8b71687 100644
--- a/napcat.webui/src/components/toaster.tsx
+++ b/napcat.webui/src/components/toaster.tsx
@@ -1,9 +1,9 @@
-import { Toaster as HotToaster } from 'react-hot-toast'
+import { Toaster as HotToaster } from 'react-hot-toast';
 
-import { useTheme } from '@/hooks/use-theme'
+import { useTheme } from '@/hooks/use-theme';
 
 export const Toaster = () => {
-  const { isDark } = useTheme()
+  const { isDark } = useTheme();
 
   return (
     <HotToaster
@@ -11,11 +11,11 @@ export const Toaster = () => {
         style: {
           borderRadius: '20px',
           background: isDark ? '#333' : '#fff',
-          color: isDark ? '#fff' : '#333'
-        }
+          color: isDark ? '#fff' : '#333',
+        },
       }}
     />
-  )
-}
+  );
+};
 
-export default Toaster
+export default Toaster;
diff --git a/napcat.webui/src/components/under_construction.tsx b/napcat.webui/src/components/under_construction.tsx
index 56097c26..083e12d7 100644
--- a/napcat.webui/src/components/under_construction.tsx
+++ b/napcat.webui/src/components/under_construction.tsx
@@ -1,12 +1,12 @@
-export default function UnderConstruction() {
+export default function UnderConstruction () {
   return (
-    <div className="flex flex-col items-center justify-center h-full pt-4">
-      <div className="flex flex-col items-center justify-center space-y-4">
-        <div className="text-6xl font-bold text-gray-500">🚧</div>
-        <div className="text-2xl font-bold text-gray-500">
+    <div className='flex flex-col items-center justify-center h-full pt-4'>
+      <div className='flex flex-col items-center justify-center space-y-4'>
+        <div className='text-6xl font-bold text-gray-500'>🚧</div>
+        <div className='text-2xl font-bold text-gray-500'>
           Under Construction
         </div>
       </div>
     </div>
-  )
+  );
 }
diff --git a/napcat.webui/src/components/usage_pie.tsx b/napcat.webui/src/components/usage_pie.tsx
index 13f82a9f..d8288c40 100644
--- a/napcat.webui/src/components/usage_pie.tsx
+++ b/napcat.webui/src/components/usage_pie.tsx
@@ -1,7 +1,7 @@
-import * as echarts from 'echarts'
-import React, { useEffect, useRef } from 'react'
+import * as echarts from 'echarts';
+import React, { useEffect, useRef } from 'react';
 
-import { useTheme } from '@/hooks/use-theme'
+import { useTheme } from '@/hooks/use-theme';
 
 interface UsagePieProps {
   systemUsage: number
@@ -14,7 +14,7 @@ const defaultOption: echarts.EChartsOption = {
     trigger: 'item',
     formatter: '<center>{b}<br/><b>{d}%</b></center>',
     borderRadius: 10,
-    extraCssText: 'backdrop-filter: blur(10px);'
+    extraCssText: 'backdrop-filter: blur(10px);',
   },
   series: [
     {
@@ -26,49 +26,49 @@ const defaultOption: echarts.EChartsOption = {
         show: true,
         position: 'center',
         formatter: '系统占用',
-        fontSize: 14
+        fontSize: 14,
       },
       itemStyle: {
         borderWidth: 1,
-        borderRadius: 10
+        borderRadius: 10,
       },
       labelLine: {
-        show: false
+        show: false,
       },
       data: [
         {
           value: 100,
-          name: '系统总量'
-        }
-      ]
-    }
-  ]
-}
+          name: '系统总量',
+        },
+      ],
+    },
+  ],
+};
 
 const UsagePie: React.FC<UsagePieProps> = ({
   systemUsage,
   processUsage,
-  title
+  title,
 }) => {
-  const chartRef = useRef<HTMLDivElement>(null)
-  const chartInstance = useRef<echarts.ECharts | null>(null)
-  const { theme } = useTheme()
+  const chartRef = useRef<HTMLDivElement>(null);
+  const chartInstance = useRef<echarts.ECharts | null>(null);
+  const { theme } = useTheme();
 
   useEffect(() => {
     if (chartRef.current) {
-      chartInstance.current = echarts.init(chartRef.current)
-      const option = defaultOption
-      chartInstance.current.setOption(option)
+      chartInstance.current = echarts.init(chartRef.current);
+      const option = defaultOption;
+      chartInstance.current.setOption(option);
       const observer = new ResizeObserver(() => {
-        chartInstance.current?.resize()
-      })
-      observer.observe(chartRef.current)
+        chartInstance.current?.resize();
+      });
+      observer.observe(chartRef.current);
       return () => {
-        chartInstance.current?.dispose()
-        observer.disconnect()
-      }
+        chartInstance.current?.dispose();
+        observer.disconnect();
+      };
     }
-  }, [])
+  }, []);
 
   useEffect(() => {
     if (chartInstance.current) {
@@ -76,13 +76,13 @@ const UsagePie: React.FC<UsagePieProps> = ({
         series: [
           {
             label: {
-              formatter: title
-            }
-          }
-        ]
-      })
+              formatter: title,
+            },
+          },
+        ],
+      });
     }
-  }, [title])
+  }, [title]);
 
   useEffect(() => {
     if (chartInstance.current) {
@@ -94,8 +94,8 @@ const UsagePie: React.FC<UsagePieProps> = ({
               ? 'rgba(0, 0, 0, 0.8)'
               : 'rgba(255, 255, 255, 0.8)',
           textStyle: {
-            color: theme === 'dark' ? '#fff' : '#333'
-          }
+            color: theme === 'dark' ? '#fff' : '#333',
+          },
         },
         color:
           theme === 'dark'
@@ -104,13 +104,13 @@ const UsagePie: React.FC<UsagePieProps> = ({
         series: [
           {
             itemStyle: {
-              borderColor: theme === 'dark' ? '#333' : '#F0A9A7'
-            }
-          }
-        ]
-      })
+              borderColor: theme === 'dark' ? '#333' : '#F0A9A7',
+            },
+          },
+        ],
+      });
     }
-  }, [theme])
+  }, [theme]);
 
   useEffect(() => {
     if (chartInstance.current) {
@@ -120,24 +120,24 @@ const UsagePie: React.FC<UsagePieProps> = ({
             data: [
               {
                 value: processUsage,
-                name: 'QQ占用'
+                name: 'QQ占用',
               },
               {
                 value: systemUsage - processUsage,
-                name: '其他进程占用'
+                name: '其他进程占用',
               },
               {
                 value: 100 - systemUsage,
-                name: '剩余系统总量'
-              }
-            ]
-          }
-        ]
-      })
+                name: '剩余系统总量',
+              },
+            ],
+          },
+        ],
+      });
     }
-  }, [systemUsage, processUsage])
+  }, [systemUsage, processUsage]);
 
-  return <div ref={chartRef} className="w-36 h-36 flex-shrink-0" />
-}
+  return <div ref={chartRef} className='w-36 h-36 flex-shrink-0' />;
+};
 
-export default UsagePie
+export default UsagePie;
diff --git a/napcat.webui/src/components/xterm.tsx b/napcat.webui/src/components/xterm.tsx
index 617a8838..6cb1b2fc 100644
--- a/napcat.webui/src/components/xterm.tsx
+++ b/napcat.webui/src/components/xterm.tsx
@@ -1,13 +1,13 @@
-import { CanvasAddon } from '@xterm/addon-canvas'
-import { FitAddon } from '@xterm/addon-fit'
-import { WebLinksAddon } from '@xterm/addon-web-links'
+import { CanvasAddon } from '@xterm/addon-canvas';
+import { FitAddon } from '@xterm/addon-fit';
+import { WebLinksAddon } from '@xterm/addon-web-links';
 // import { WebglAddon } from '@xterm/addon-webgl'
-import { Terminal } from '@xterm/xterm'
-import '@xterm/xterm/css/xterm.css'
-import clsx from 'clsx'
-import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'
+import { Terminal } from '@xterm/xterm';
+import '@xterm/xterm/css/xterm.css';
+import clsx from 'clsx';
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
 
-import { useTheme } from '@/hooks/use-theme'
+import { useTheme } from '@/hooks/use-theme';
 
 export type XTermRef = {
   write: (
@@ -20,7 +20,7 @@ export type XTermRef = {
   writelnAsync: (data: Parameters<Terminal['writeln']>[0]) => Promise<void>
   clear: () => void
   terminalRef: React.RefObject<Terminal | null>
-}
+};
 
 export interface XTermProps
   extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onInput' | 'onResize'> {
@@ -30,10 +30,10 @@ export interface XTermProps
 }
 
 const XTerm = forwardRef<XTermRef, XTermProps>((props, ref) => {
-  const domRef = useRef<HTMLDivElement>(null)
-  const terminalRef = useRef<Terminal | null>(null)
-  const { className, onInput, onKey, onResize, ...rest } = props
-  const { theme } = useTheme()
+  const domRef = useRef<HTMLDivElement>(null);
+  const terminalRef = useRef<Terminal | null>(null);
+  const { className, onInput, onKey, onResize, ...rest } = props;
+  const { theme } = useTheme();
   useEffect(() => {
     const terminal = new Terminal({
       allowTransparency: true,
@@ -42,57 +42,57 @@ const XTerm = forwardRef<XTermRef, XTermProps>((props, ref) => {
       cursorInactiveStyle: 'outline',
       drawBoldTextInBrightColors: false,
       fontSize: 14,
-      lineHeight: 1.2
-    })
-    terminalRef.current = terminal
-    const fitAddon = new FitAddon()
+      lineHeight: 1.2,
+    });
+    terminalRef.current = terminal;
+    const fitAddon = new FitAddon();
     terminal.loadAddon(
       new WebLinksAddon((event, uri) => {
         if (event.ctrlKey || event.metaKey) {
-          window.open(uri, '_blank')
+          window.open(uri, '_blank');
         }
       })
-    )
-    terminal.loadAddon(fitAddon)
-    terminal.open(domRef.current!)
+    );
+    terminal.loadAddon(fitAddon);
+    terminal.open(domRef.current!);
 
-    terminal.loadAddon(new CanvasAddon())
+    terminal.loadAddon(new CanvasAddon());
     terminal.onData((data) => {
       if (onInput) {
-        onInput(data)
+        onInput(data);
       }
-    })
+    });
 
     terminal.onKey((event) => {
       if (onKey) {
-        onKey(event.key, event.domEvent)
+        onKey(event.key, event.domEvent);
       }
-    })
+    });
 
     const resizeObserver = new ResizeObserver(() => {
-      fitAddon.fit()
+      fitAddon.fit();
       // 获取当前终端尺寸
-      const cols = terminal.cols
-      const rows = terminal.rows
+      const cols = terminal.cols;
+      const rows = terminal.rows;
       if (onResize) {
-        onResize(cols, rows)
+        onResize(cols, rows);
       }
-    })
+    });
 
     // 字体加载完成后重新调整终端大小
     document.fonts.ready.then(() => {
-      fitAddon.fit()
+      fitAddon.fit();
 
-      resizeObserver.observe(domRef.current!)
-    })
+      resizeObserver.observe(domRef.current!);
+    });
 
     return () => {
-      resizeObserver.disconnect()
+      resizeObserver.disconnect();
       setTimeout(() => {
-        terminal.dispose()
-      }, 0)
-    }
-  }, [])
+        terminal.dispose();
+      }, 0);
+    };
+  }, []);
 
   useEffect(() => {
     if (terminalRef.current) {
@@ -115,8 +115,8 @@ const XTerm = forwardRef<XTermRef, XTermProps>((props, ref) => {
           brightWhite: '#e5e5e5',
           foreground: '#cccccc',
           selectionBackground: '#3a3d41',
-          cursor: '#ffffff'
-        }
+          cursor: '#ffffff',
+        };
       } else {
         terminalRef.current.options.theme = {
           background: '#ffffff00',
@@ -136,38 +136,38 @@ const XTerm = forwardRef<XTermRef, XTermProps>((props, ref) => {
           brightWhite: '#b0b0b0',
           foreground: '#000000',
           selectionBackground: '#bfdbfe',
-          cursor: '#007acc'
-        }
+          cursor: '#007acc',
+        };
       }
     }
-  }, [theme])
+  }, [theme]);
 
   useImperativeHandle(
     ref,
     () => ({
       write: (...args) => {
-        return terminalRef.current?.write(...args)
+        return terminalRef.current?.write(...args);
       },
       writeAsync: async (data) => {
         return new Promise((resolve) => {
-          terminalRef.current?.write(data, resolve)
-        })
+          terminalRef.current?.write(data, resolve);
+        });
       },
       writeln: (...args) => {
-        return terminalRef.current?.writeln(...args)
+        return terminalRef.current?.writeln(...args);
       },
       writelnAsync: async (data) => {
         return new Promise((resolve) => {
-          terminalRef.current?.writeln(data, resolve)
-        })
+          terminalRef.current?.writeln(data, resolve);
+        });
       },
       clear: () => {
-        terminalRef.current?.clear()
+        terminalRef.current?.clear();
       },
-      terminalRef: terminalRef
+      terminalRef,
     }),
     []
-  )
+  );
 
   return (
     <div
@@ -181,12 +181,12 @@ const XTerm = forwardRef<XTermRef, XTermProps>((props, ref) => {
       <div
         style={{
           width: '100%',
-          height: '100%'
+          height: '100%',
         }}
         ref={domRef}
-      ></div>
+      />
     </div>
-  )
-})
+  );
+});
 
-export default XTerm
+export default XTerm;
diff --git a/napcat.webui/src/config/site.tsx b/napcat.webui/src/config/site.tsx
index 79bdc43f..76a9f714 100644
--- a/napcat.webui/src/config/site.tsx
+++ b/napcat.webui/src/config/site.tsx
@@ -6,10 +6,10 @@ import {
   RouteIcon,
   SettingsIcon,
   SignalTowerIcon,
-  TerminalIcon
-} from '@/components/icons'
+  TerminalIcon,
+} from '@/components/icons';
 
-export type SiteConfig = typeof siteConfig
+export type SiteConfig = typeof siteConfig;
 export interface MenuItem {
   label: string
   icon?: React.ReactNode
@@ -26,87 +26,87 @@ export const siteConfig = {
     {
       label: '基础信息',
       icon: (
-        <div className="w-5 h-5">
+        <div className='w-5 h-5'>
           <RouteIcon />
         </div>
       ),
-      href: '/'
+      href: '/',
     },
     {
       label: '网络配置',
       icon: (
-        <div className="w-5 h-5">
+        <div className='w-5 h-5'>
           <SignalTowerIcon />
         </div>
       ),
-      href: '/network'
+      href: '/network',
     },
     {
       label: '其他配置',
       icon: (
-        <div className="w-5 h-5">
+        <div className='w-5 h-5'>
           <SettingsIcon />
         </div>
       ),
-      href: '/config'
+      href: '/config',
     },
     {
       label: '猫猫日志',
       icon: (
-        <div className="w-5 h-5">
+        <div className='w-5 h-5'>
           <LogIcon />
         </div>
       ),
-      href: '/logs'
+      href: '/logs',
     },
     {
       label: '接口调试',
       icon: (
-        <div className="w-5 h-5">
+        <div className='w-5 h-5'>
           <BugIcon2 />
         </div>
       ),
       items: [
         {
           label: 'HTTP',
-          href: '/debug/http'
+          href: '/debug/http',
         },
         {
           label: 'Websocket',
-          href: '/debug/ws'
-        }
-      ]
+          href: '/debug/ws',
+        },
+      ],
     },
     {
       label: '文件管理',
       icon: (
-        <div className="w-5 h-5">
+        <div className='w-5 h-5'>
           <FileIcon />
         </div>
       ),
-      href: '/file_manager'
+      href: '/file_manager',
     },
     {
       label: '系统终端',
       icon: (
-        <div className="w-5 h-5">
+        <div className='w-5 h-5'>
           <TerminalIcon />
         </div>
       ),
-      href: '/terminal'
+      href: '/terminal',
     },
     {
       label: '关于我们',
       icon: (
-        <div className="w-5 h-5">
+        <div className='w-5 h-5'>
           <InfoIcon />
         </div>
       ),
-      href: '/about'
-    }
+      href: '/about',
+    },
   ] as MenuItem[],
   links: {
     github: 'https://github.com/NapNeko/NapCatQQ',
-    docs: 'https://napcat.napneko.icu/'
-  }
-}
+    docs: 'https://napcat.napneko.icu/',
+  },
+};
diff --git a/napcat.webui/src/const/enum.ts b/napcat.webui/src/const/enum.ts
index 2be905f2..3af5bfc0 100644
--- a/napcat.webui/src/const/enum.ts
+++ b/napcat.webui/src/const/enum.ts
@@ -3,11 +3,11 @@ export enum LogLevel {
   INFO = 'info',
   WARN = 'warn',
   ERROR = 'error',
-  FATAL = 'fatal'
+  FATAL = 'fatal',
 }
 
 export enum PlayMode {
   Loop = 'loop',
   Random = 'random',
-  Single = 'single'
+  Single = 'single',
 }
diff --git a/napcat.webui/src/const/key.ts b/napcat.webui/src/const/key.ts
index f6ada054..20f8d08b 100644
--- a/napcat.webui/src/const/key.ts
+++ b/napcat.webui/src/const/key.ts
@@ -9,7 +9,7 @@ enum key {
   isCollapsedMusicPlayer = 'is-collapsed-music-player',
   sideBarOpen = 'side-bar-open',
   httpDebugConfig = 'http-debug-config',
-  wsDebugConfig = 'ws-debug-config'
+  wsDebugConfig = 'ws-debug-config',
 }
 
-export default key
+export default key;
diff --git a/napcat.webui/src/const/ob_api/group.ts b/napcat.webui/src/const/ob_api/group.ts
index c1aac306..39d69fe0 100644
--- a/napcat.webui/src/const/ob_api/group.ts
+++ b/napcat.webui/src/const/ob_api/group.ts
@@ -1,7 +1,7 @@
-import { z } from 'zod'
+import { z } from 'zod';
 
-import messageNodeSchema from './message/node'
-import { baseResponseSchema, commonResponseDataSchema } from './response'
+import messageNodeSchema from './message/node';
+import { baseResponseSchema, commonResponseDataSchema } from './response';
 
 const oneBotHttpApiGroup = {
   '/set_group_kick': {
@@ -9,18 +9,18 @@ const oneBotHttpApiGroup = {
     request: z.object({
       group_id: z.union([z.string(), z.number()]).describe('群号'),
       user_id: z.union([z.string(), z.number()]).describe('QQ 号'),
-      reject_add_request: z.boolean().describe('拒绝此人的加群请求')
+      reject_add_request: z.boolean().describe('拒绝此人的加群请求'),
     }),
-    response: baseResponseSchema
+    response: baseResponseSchema,
   },
   '/set_group_ban': {
     description: '群禁言',
     request: z.object({
       group_id: z.union([z.string(), z.number()]).describe('群号'),
       user_id: z.union([z.string(), z.number()]).describe('QQ 号'),
-      duration: z.number()
+      duration: z.number(),
     }),
-    response: baseResponseSchema
+    response: baseResponseSchema,
   },
   '/get_group_system_msg': {
     description: '获取群系统消息',
@@ -38,7 +38,7 @@ const oneBotHttpApiGroup = {
                 message: z.string().describe('入群回答'),
                 group_name: z.string().describe('群名称'),
                 checked: z.boolean().describe('是否已处理'),
-                actor: z.string().describe('处理人 QQ 号')
+                actor: z.string().describe('处理人 QQ 号'),
               })
               .describe('邀请入群请求')
           )
@@ -52,16 +52,16 @@ const oneBotHttpApiGroup = {
             message: z.string().describe('入群回答'),
             group_name: z.string().describe('群名称'),
             checked: z.boolean().describe('是否已处理'),
-            actor: z.string().describe('处理人 QQ 号')
+            actor: z.string().describe('处理人 QQ 号'),
           })
-        )
-      })
-    })
+        ),
+      }),
+    }),
   },
   '/get_essence_msg_list': {
     description: '获取精华消息',
     request: z.object({
-      group_id: z.union([z.string(), z.number()]).describe('群号')
+      group_id: z.union([z.string(), z.number()]).describe('群号'),
     }),
     response: baseResponseSchema.extend({
       data: z
@@ -76,44 +76,44 @@ const oneBotHttpApiGroup = {
               operator_nick: z.string().describe('操作人昵称'),
               message_id: z.string().describe('消息 ID'),
               operator_time: z.string().describe('操作时间'),
-              content: z.array(messageNodeSchema)
+              content: z.array(messageNodeSchema),
             })
             .describe('精华消息')
         )
-        .describe('精华消息列表')
-    })
+        .describe('精华消息列表'),
+    }),
   },
   '/set_group_whole_ban': {
     description: '全员禁言',
     request: z.object({
       group_id: z.union([z.string(), z.number()]).describe('群号'),
-      enable: z.boolean().describe('是否开启')
+      enable: z.boolean().describe('是否开启'),
     }),
-    response: baseResponseSchema
+    response: baseResponseSchema,
   },
   '/set_group_portrait': {
     description: '设置群头像',
     request: z.object({
       group_id: z.union([z.string(), z.number()]).describe('群号'),
-      file: z.string().describe('图片文件路径，服务器本地路径或远程 URL')
+      file: z.string().describe('图片文件路径，服务器本地路径或远程 URL'),
     }),
     response: baseResponseSchema.extend({
-      data: commonResponseDataSchema
-    })
+      data: commonResponseDataSchema,
+    }),
   },
   '/set_group_admin': {
     description: '设置群管理',
     request: z.object({
       group_id: z.union([z.string(), z.number()]).describe('群号'),
       user_id: z.union([z.string(), z.number()]).describe('QQ 号'),
-      enable: z.boolean().describe('是否设置为管理员')
+      enable: z.boolean().describe('是否设置为管理员'),
     }),
-    response: baseResponseSchema
+    response: baseResponseSchema,
   },
   '/set_essence_msg': {
     description: '设置群精华消息',
     request: z.object({
-      message_id: z.union([z.string(), z.number()]).describe('消息 ID')
+      message_id: z.union([z.string(), z.number()]).describe('消息 ID'),
     }),
     response: baseResponseSchema.extend({
       data: z.object({
@@ -139,28 +139,28 @@ const oneBotHttpApiGroup = {
                 addDigestTime: z.number().describe('添加精华消息时间'),
                 startTime: z.number().describe('开始时间'),
                 latestMsgSeq: z.number().describe('最新消息序号'),
-                opType: z.number().describe('操作类型')
+                opType: z.number().describe('操作类型'),
               })
               .describe('消息内容'),
-            errorCode: z.number().describe('错误码')
+            errorCode: z.number().describe('错误码'),
           })
-          .describe('结果')
-      })
-    })
+          .describe('结果'),
+      }),
+    }),
   },
   '/set_group_card': {
     description: '设置群成员名片',
     request: z.object({
       group_id: z.union([z.string(), z.number()]).describe('群号'),
       user_id: z.union([z.string(), z.number()]).describe('QQ 号'),
-      card: z.string().describe('名片')
+      card: z.string().describe('名片'),
     }),
-    response: baseResponseSchema
+    response: baseResponseSchema,
   },
   '/delete_essence_msg': {
     description: '删除群精华消息',
     request: z.object({
-      message_id: z.union([z.string(), z.number()]).describe('消息 ID')
+      message_id: z.union([z.string(), z.number()]).describe('消息 ID'),
     }),
 
     response: baseResponseSchema.extend({
@@ -186,42 +186,42 @@ const oneBotHttpApiGroup = {
               addDigestTime: z.number().describe('添加精华消息时间'),
               startTime: z.number().describe('开始时间'),
               latestMsgSeq: z.number().describe('最新消息序号'),
-              opType: z.number().describe('操作类型')
+              opType: z.number().describe('操作类型'),
             }),
-            errorCode: z.number().describe('错误码')
+            errorCode: z.number().describe('错误码'),
           })
-          .describe('结果')
-      })
-    })
+          .describe('结果'),
+      }),
+    }),
   },
   '/set_group_name': {
     description: '设置群名称',
     request: z.object({
       group_id: z.union([z.string(), z.number()]).describe('群号'),
-      group_name: z.string().describe('群名称')
+      group_name: z.string().describe('群名称'),
     }),
-    response: baseResponseSchema
+    response: baseResponseSchema,
   },
   '/set_group_leave': {
     description: '退出群聊',
     request: z.object({
-      group_id: z.union([z.string(), z.number()]).describe('群号')
+      group_id: z.union([z.string(), z.number()]).describe('群号'),
     }),
-    response: baseResponseSchema
+    response: baseResponseSchema,
   },
   '/_send_group_notice': {
     description: '发送群公告',
     request: z.object({
       group_id: z.union([z.string(), z.number()]).describe('群号'),
       content: z.string().describe('公告内容'),
-      image: z.string().optional().describe('图片地址')
+      image: z.string().optional().describe('图片地址'),
     }),
-    response: baseResponseSchema
+    response: baseResponseSchema,
   },
   '/_get_group_notice': {
     description: '获取群公告',
     request: z.object({
-      group_id: z.union([z.string(), z.number()]).describe('群号')
+      group_id: z.union([z.string(), z.number()]).describe('群号'),
     }),
     response: baseResponseSchema.extend({
       data: z.array(
@@ -237,24 +237,24 @@ const oneBotHttpApiGroup = {
                   .object({
                     id: z.string().describe('图片 ID'),
                     height: z.string().describe('高度'),
-                    width: z.string().describe('宽度')
+                    width: z.string().describe('宽度'),
                   })
                   .describe('图片信息')
               )
-              .describe('图片内容列表')
-          })
+              .describe('图片内容列表'),
+          }),
         })
-      )
-    })
+      ),
+    }),
   },
   '/set_group_special_title': {
     description: '设置群成员专属头衔',
     request: z.object({
       group_id: z.union([z.string(), z.number()]).describe('群号'),
       user_id: z.union([z.string(), z.number()]).describe('QQ 号'),
-      special_title: z.string().describe('专属头衔内容')
+      special_title: z.string().describe('专属头衔内容'),
     }),
-    response: baseResponseSchema
+    response: baseResponseSchema,
   },
   '/upload_group_file': {
     description: '上传群文件',
@@ -262,34 +262,34 @@ const oneBotHttpApiGroup = {
       group_id: z.union([z.string(), z.number()]).describe('群号'),
       file: z.string().describe('文件路径'),
       name: z.string().describe('文件名'),
-      folder_id: z.string().describe('文件夹 ID')
+      folder_id: z.string().describe('文件夹 ID'),
     }),
     response: baseResponseSchema.extend({
-      data: commonResponseDataSchema
-    })
+      data: commonResponseDataSchema,
+    }),
   },
   '/set_group_add_request': {
     description: '处理加群请求',
     request: z.object({
       flag: z.string().describe('请求ID'),
       approve: z.boolean().describe('是否同意'),
-      reason: z.string().optional().describe('拒绝理由')
+      reason: z.string().optional().describe('拒绝理由'),
     }),
-    response: baseResponseSchema
+    response: baseResponseSchema,
   },
   '/get_group_info': {
     description: '获取群信息',
     request: z.object({
-      group_id: z.union([z.string(), z.number()]).describe('群号')
+      group_id: z.union([z.string(), z.number()]).describe('群号'),
     }),
     response: baseResponseSchema.extend({
-      data: z.object({})
-    })
+      data: z.object({}),
+    }),
   },
   '/get_group_info_ex': {
     description: '获取群信息扩展',
     request: z.object({
-      group_id: z.union([z.string(), z.number()]).describe('群号')
+      group_id: z.union([z.string(), z.number()]).describe('群号'),
     }),
     response: baseResponseSchema.extend({
       data: z
@@ -315,7 +315,7 @@ const oneBotHttpApiGroup = {
                 .object({
                   memberUin: z.string().describe('群主QQ号'),
                   memberUid: z.string().describe('群主ID'),
-                  memberQid: z.string().describe('群主QID')
+                  memberQid: z.string().describe('群主QID'),
                 })
                 .describe('群主信息'),
               essentialMsgPrivilege: z.number().describe('精华消息权限'),
@@ -327,7 +327,7 @@ const oneBotHttpApiGroup = {
               groupFlagPro1: z.string()?.describe('群标识1'),
               groupBindGuildIds: z
                 .object({
-                  guildIds: z.array(z.string())
+                  guildIds: z.array(z.string()),
                 })
                 .describe('绑定频道ID列表?'),
               viewedMsgDisappearTime: z.string().describe('消息消失时间'),
@@ -337,13 +337,13 @@ const oneBotHttpApiGroup = {
                 dayNums: z.array(z.number()).describe('天数列表'),
                 version: z.number().describe('版本号'),
                 updateTime: z.string().describe('更新时间'),
-                isDisplayDayNum: z.boolean().describe('是否显示天数')
+                isDisplayDayNum: z.boolean().describe('是否显示天数'),
               }),
               groupBindGuildSwitch: z.number().describe('绑定频道开关'),
               groupAioBindGuildId: z.string().describe('AIO绑定频道ID'),
               groupExcludeGuildIds: z
                 .object({
-                  guildIds: z.array(z.string()).describe('排除频道ID')
+                  guildIds: z.array(z.string()).describe('排除频道ID'),
                 })
                 .describe('排除频道ID列表?'),
               fullGroupExpansionSwitch: z.number().describe('全员群扩容开关'),
@@ -354,18 +354,18 @@ const oneBotHttpApiGroup = {
               inviteRobotMemberExamine: z
                 .number()
                 .describe('邀请机器人成员审核'),
-              groupSquareSwitch: z.number().describe('群广场开关')
+              groupSquareSwitch: z.number().describe('群广场开关'),
             })
-            .describe('扩展信息')
+            .describe('扩展信息'),
         })
-        .describe('结果')
-    })
+        .describe('结果'),
+    }),
   },
   '/create_group_file_folder': {
     description: '创建群文件夹',
     request: z.object({
       group_id: z.union([z.string(), z.number()]).describe('群号'),
-      folder_name: z.string().describe('文件夹名称')
+      folder_name: z.string().describe('文件夹名称'),
     }),
     response: baseResponseSchema.extend({
       data: z
@@ -374,7 +374,7 @@ const oneBotHttpApiGroup = {
             .object({
               retCode: z.number().describe('结果码'),
               retMsg: z.string().describe('结果信息'),
-              clientWording: z.string().describe('客户端提示')
+              clientWording: z.string().describe('客户端提示'),
             })
             .describe('结果'),
           groupItem: z
@@ -393,20 +393,20 @@ const oneBotHttpApiGroup = {
                   totalFileCount: z.string().describe('文件总数'),
                   modifyUin: z.string().describe('修改人 QQ 号'),
                   modifyName: z.string().describe('修改人昵称'),
-                  usedSpace: z.string().describe('已使用空间')
+                  usedSpace: z.string().describe('已使用空间'),
                 })
-                .describe('文件夹信息')
+                .describe('文件夹信息'),
             })
-            .describe('群文件夹信息')
+            .describe('群文件夹信息'),
         })
-        .describe('数据')
-    })
+        .describe('数据'),
+    }),
   },
   '/delete_group_file': {
     description: '删除群文件',
     request: z.object({
       group_id: z.union([z.string(), z.number()]).describe('群号'),
-      file_id: z.string().describe('文件 ID')
+      file_id: z.string().describe('文件 ID'),
     }),
     response: baseResponseSchema.extend({
       data: z
@@ -419,51 +419,51 @@ const oneBotHttpApiGroup = {
                 .object({
                   retCode: z.number().describe('结果码'),
                   retMsg: z.string().describe('结果信息'),
-                  clientWording: z.string().describe('客户端提示')
+                  clientWording: z.string().describe('客户端提示'),
                 })
                 .describe('结果'),
               successFileIdList: z
                 .array(z.string())
                 .describe('成功文件 ID 列表'),
-              failFileIdList: z.array(z.string()).describe('失败文件 ID 列表')
+              failFileIdList: z.array(z.string()).describe('失败文件 ID 列表'),
             })
-            .describe('删除群文件结果')
+            .describe('删除群文件结果'),
         })
-        .describe('结果')
-    })
+        .describe('结果'),
+    }),
   },
   '/delete_group_folder': {
     description: '删除群文件夹',
     request: z.object({
       group_id: z.union([z.string(), z.number()]).describe('群号'),
-      folder_id: z.string().describe('文件夹 ID')
+      folder_id: z.string().describe('文件夹 ID'),
     }),
     response: baseResponseSchema.extend({
       data: z.object({
         retCode: z.number().describe('结果码'),
         retMsg: z.string().describe('结果信息'),
-        clientWording: z.string().describe('客户端提示')
-      })
-    })
+        clientWording: z.string().describe('客户端提示'),
+      }),
+    }),
   },
   '/get_group_file_system_info': {
     description: '获取群文件系统信息',
     request: z.object({
-      group_id: z.union([z.string(), z.number()]).describe('群号')
+      group_id: z.union([z.string(), z.number()]).describe('群号'),
     }),
     response: baseResponseSchema.extend({
       data: z.object({
         file_count: z.number().describe('文件总数'),
         limit_count: z.number().describe('文件总数限制'),
         used_space: z.number().describe('已使用空间'),
-        total_space: z.number().describe('总空间')
-      })
-    })
+        total_space: z.number().describe('总空间'),
+      }),
+    }),
   },
   '/get_group_root_files': {
     description: '获取群根目录文件列表',
     request: z.object({
-      group_id: z.union([z.string(), z.number()]).describe('群号')
+      group_id: z.union([z.string(), z.number()]).describe('群号'),
     }),
     response: baseResponseSchema.extend({
       data: z.array(
@@ -482,7 +482,7 @@ const oneBotHttpApiGroup = {
                   modify_time: z.number().describe('修改时间'),
                   download_times: z.number().describe('下载次数'),
                   uploader: z.number().describe('上传人 QQ 号'),
-                  uploader_name: z.string().describe('上传人昵称')
+                  uploader_name: z.string().describe('上传人昵称'),
                 })
                 .describe('文件信息')
             )
@@ -498,21 +498,21 @@ const oneBotHttpApiGroup = {
                   create_time: z.string().describe('创建时间'),
                   creator: z.string().describe('创建人 QQ 号'),
                   creator_name: z.string().describe('创建人昵称'),
-                  total_file_count: z.string().describe('文件总数')
+                  total_file_count: z.string().describe('文件总数'),
                 })
                 .describe('文件夹信息')
             )
-            .describe('文件夹列表')
+            .describe('文件夹列表'),
         })
-      )
-    })
+      ),
+    }),
   },
   '/get_group_files_by_folder': {
     description: '获取群子目录文件列表',
     request: z.object({
       group_id: z.union([z.string(), z.number()]).describe('群号'),
       folder_id: z.string().describe('文件夹 ID'),
-      file_count: z.number().describe('文件数量')
+      file_count: z.number().describe('文件数量'),
     }),
     response: baseResponseSchema.extend({
       data: z.object({
@@ -530,7 +530,7 @@ const oneBotHttpApiGroup = {
                 modify_time: z.number().describe('修改时间'),
                 download_times: z.number().describe('下载次数'),
                 uploader: z.number().describe('上传人 QQ 号'),
-                uploader_name: z.string().describe('上传人昵称')
+                uploader_name: z.string().describe('上传人昵称'),
               })
               .describe('文件信息')
           )
@@ -546,60 +546,60 @@ const oneBotHttpApiGroup = {
                 create_time: z.string().describe('创建时间'),
                 creator: z.string().describe('创建人 QQ 号'),
                 creator_name: z.string().describe('创建人昵称'),
-                total_file_count: z.string().describe('文件总数')
+                total_file_count: z.string().describe('文件总数'),
               })
               .describe('文件夹信息')
           )
-          .describe('文件夹列表')
-      })
-    })
+          .describe('文件夹列表'),
+      }),
+    }),
   },
   '/get_group_file_url': {
     description: '获取群文件下载链接',
     request: z.object({
       group_id: z.union([z.string(), z.number()]).describe('群号'),
-      file_id: z.string().describe('文件 ID')
+      file_id: z.string().describe('文件 ID'),
     }),
     response: baseResponseSchema.extend({
       data: z.object({
-        url: z.string().describe('下载链接')
-      })
-    })
+        url: z.string().describe('下载链接'),
+      }),
+    }),
   },
   '/get_group_list': {
     description: '获取群列表',
     request: z.object({
-      next_token: z.string().optional().describe('下一页标识')
+      next_token: z.string().optional().describe('下一页标识'),
     }),
     response: baseResponseSchema.extend({
-      data: z.array(z.object({}))
-    })
+      data: z.array(z.object({})),
+    }),
   },
   '/get_group_member_info': {
     description: '获取群成员信息',
     request: z.object({
       group_id: z.union([z.string(), z.number()]).describe('群号'),
       user_id: z.union([z.string(), z.number()]).describe('QQ 号'),
-      no_cache: z.boolean().describe('是否不使用缓存')
+      no_cache: z.boolean().describe('是否不使用缓存'),
     }),
     response: baseResponseSchema.extend({
-      data: z.object({})
-    })
+      data: z.object({}),
+    }),
   },
   '/get_group_member_list': {
     description: '获取群成员列表',
     request: z.object({
       group_id: z.union([z.string(), z.number()]).describe('群号'),
-      no_cache: z.boolean().describe('是否不使用缓存')
+      no_cache: z.boolean().describe('是否不使用缓存'),
     }),
     response: baseResponseSchema.extend({
-      data: z.array(z.object({}))
-    })
+      data: z.array(z.object({})),
+    }),
   },
   '/get_group_honor_info': {
     description: '获取群荣誉',
     request: z.object({
-      group_id: z.union([z.string(), z.number()]).describe('群号')
+      group_id: z.union([z.string(), z.number()]).describe('群号'),
     }),
     response: baseResponseSchema.extend({
       data: z
@@ -611,7 +611,7 @@ const oneBotHttpApiGroup = {
               avatar: z.string().describe('头像 URL'),
               nickname: z.string().describe('昵称'),
               day_count: z.number().describe('天数'),
-              description: z.string().describe('描述')
+              description: z.string().describe('描述'),
             })
             .describe('当前龙王'),
           talkative_list: z
@@ -621,7 +621,7 @@ const oneBotHttpApiGroup = {
                 avatar: z.string().describe('头像 URL'),
                 nickname: z.string().describe('昵称'),
                 day_count: z.number().describe('天数'),
-                description: z.string().describe('描述')
+                description: z.string().describe('描述'),
               })
             )
             .describe('龙王榜'),
@@ -631,34 +631,34 @@ const oneBotHttpApiGroup = {
                 user_id: z.number().describe('QQ 号'),
                 avatar: z.string().describe('头像 URL'),
                 nickname: z.string().describe('昵称'),
-                description: z.string().describe('描述')
+                description: z.string().describe('描述'),
               })
             )
             .describe('?'),
           legend_list: z.array(z.string()).describe('?'),
           emotion_list: z.array(z.string()).describe('?'),
-          strong_newbie_list: z.array(z.string()).describe('?')
+          strong_newbie_list: z.array(z.string()).describe('?'),
         })
-        .describe('群荣誉信息')
-    })
+        .describe('群荣誉信息'),
+    }),
   },
   '/get_group_at_all_remain': {
     description: '获取群 @全体成员 剩余次数',
     request: z.object({
-      group_id: z.union([z.string(), z.number()]).describe('群号')
+      group_id: z.union([z.string(), z.number()]).describe('群号'),
     }),
     response: baseResponseSchema.extend({
       data: z.object({
         can_at_all: z.boolean().describe('是否可以 @全体成员'),
         remain_at_all_count_for_group: z.number().describe('剩余次数(group?)'),
-        remain_at_all_count_for_uin: z.number().describe('剩余次数(qq?)')
-      })
-    })
+        remain_at_all_count_for_uin: z.number().describe('剩余次数(qq?)'),
+      }),
+    }),
   },
   '/get_group_ignored_notifies': {
     description: '获取群过滤系统消息',
     request: z.object({
-      group_id: z.union([z.string(), z.number()]).describe('群号')
+      group_id: z.union([z.string(), z.number()]).describe('群号'),
     }),
     response: baseResponseSchema.extend({
       data: z.object({
@@ -671,32 +671,32 @@ const oneBotHttpApiGroup = {
               group_id: z.string().describe('群号'),
               group_name: z.string().describe('群名称'),
               checked: z.boolean().describe('是否已处理'),
-              actor: z.string().describe('处理人 QQ 号')
+              actor: z.string().describe('处理人 QQ 号'),
             })
           )
-          .describe('入群请求列表')
-      })
-    })
+          .describe('入群请求列表'),
+      }),
+    }),
   },
   '/set_group_sign': {
     description: '设置群打卡',
     request: z.object({
-      group_id: z.union([z.string(), z.number()]).describe('群号')
+      group_id: z.union([z.string(), z.number()]).describe('群号'),
     }),
-    response: baseResponseSchema
+    response: baseResponseSchema,
   },
   '/send_group_sign': {
     description: '发送群打卡',
     request: z.object({
-      group_id: z.union([z.string(), z.number()]).describe('群号')
+      group_id: z.union([z.string(), z.number()]).describe('群号'),
     }),
-    response: baseResponseSchema
+    response: baseResponseSchema,
   },
   '/get_ai_characters': {
     description: '获取AI语音人物',
     request: z.object({
       group_id: z.union([z.string(), z.number()]).describe('群号'),
-      chat_type: z.union([z.string(), z.number()]).describe('聊天类型')
+      chat_type: z.union([z.string(), z.number()]).describe('聊天类型'),
     }),
     response: baseResponseSchema.extend({
       data: z.array(
@@ -707,38 +707,38 @@ const oneBotHttpApiGroup = {
               .object({
                 character_id: z.string().describe('人物 ID'),
                 character_name: z.string().describe('人物名称'),
-                preview_url: z.string().describe('预览音频地址')
+                preview_url: z.string().describe('预览音频地址'),
               })
               .describe('人物信息')
-          )
+          ),
         })
-      )
-    })
+      ),
+    }),
   },
   '/send_group_ai_record': {
     description: '发送群AI语音',
     request: z.object({
       group_id: z.union([z.string(), z.number()]).describe('群号'),
       character: z.string().describe('人物ID'),
-      text: z.string().describe('文本内容')
+      text: z.string().describe('文本内容'),
     }),
     response: baseResponseSchema.extend({
       data: z.object({
-        message_id: z.string().describe('消息 ID')
-      })
-    })
+        message_id: z.string().describe('消息 ID'),
+      }),
+    }),
   },
   '/get_ai_record': {
     description: '获取AI语音',
     request: z.object({
       group_id: z.string().describe('群号'),
       character: z.string().describe('人物ID'),
-      text: z.string().describe('文本内容')
+      text: z.string().describe('文本内容'),
     }),
     response: baseResponseSchema.extend({
-      data: z.string()
-    })
-  }
-} as const
+      data: z.string(),
+    }),
+  },
+} as const;
 
-export default oneBotHttpApiGroup
+export default oneBotHttpApiGroup;
diff --git a/napcat.webui/src/const/ob_api/index.ts b/napcat.webui/src/const/ob_api/index.ts
index 751cf92a..ab075756 100644
--- a/napcat.webui/src/const/ob_api/index.ts
+++ b/napcat.webui/src/const/ob_api/index.ts
@@ -1,15 +1,15 @@
-import { ZodSchema } from 'zod'
+import { ZodSchema } from 'zod';
 
-import oneBotHttpApiGroup from './group'
-import oneBotHttpApiMessage from './message'
-import oneBotHttpApiSystem from './system'
-import oneBotHttpApiUser from './user'
+import oneBotHttpApiGroup from './group';
+import oneBotHttpApiMessage from './message';
+import oneBotHttpApiSystem from './system';
+import oneBotHttpApiUser from './user';
 
 type AllKey =
   | keyof typeof oneBotHttpApiUser
   | keyof typeof oneBotHttpApiMessage
   | keyof typeof oneBotHttpApiGroup
-  | keyof typeof oneBotHttpApiSystem
+  | keyof typeof oneBotHttpApiSystem;
 
 export type OneBotHttpApi = Record<
   AllKey,
@@ -18,17 +18,17 @@ export type OneBotHttpApi = Record<
     request: ZodSchema
     response: ZodSchema
   }
->
+>;
 
 const oneBotHttpApi: OneBotHttpApi = {
   ...oneBotHttpApiUser,
   ...oneBotHttpApiMessage,
   ...oneBotHttpApiGroup,
-  ...oneBotHttpApiSystem
-} as const
+  ...oneBotHttpApiSystem,
+} as const;
 
-export type OneBotHttpApiPath = keyof OneBotHttpApi
+export type OneBotHttpApiPath = keyof OneBotHttpApi;
 
-export type OneBotHttpApiContent = OneBotHttpApi[OneBotHttpApiPath]
+export type OneBotHttpApiContent = OneBotHttpApi[OneBotHttpApiPath];
 
-export default oneBotHttpApi
+export default oneBotHttpApi;
diff --git a/napcat.webui/src/const/ob_api/message/group.ts b/napcat.webui/src/const/ob_api/message/group.ts
index 7b94bb92..f5546e63 100644
--- a/napcat.webui/src/const/ob_api/message/group.ts
+++ b/napcat.webui/src/const/ob_api/message/group.ts
@@ -1,8 +1,8 @@
-import { z } from 'zod'
-import type { ZodSchema } from 'zod'
+import { z } from 'zod';
+import type { ZodSchema } from 'zod';
 
-import { baseResponseSchema, commonResponseDataSchema } from '../response'
-import messageNodeSchema, { nodeMessage } from './node'
+import { baseResponseSchema, commonResponseDataSchema } from '../response';
+import messageNodeSchema, { nodeMessage } from './node';
 
 const oneBotHttpApiMessageGroup: Record<
   string,
@@ -20,26 +20,26 @@ const oneBotHttpApiMessageGroup: Record<
           .union([z.string(), z.number()])
           .describe('群号')
           .describe('群号'),
-        message: z.array(messageNodeSchema).describe('消息内容')
+        message: z.array(messageNodeSchema).describe('消息内容'),
       })
       .refine(
         (data) => {
-          const hasReply = data.message.some((item) => item.type === 'reply')
+          const hasReply = data.message.some((item) => item.type === 'reply');
 
           if (hasReply) {
-            return data.message[0].type === 'reply'
+            return data.message[0].type === 'reply';
           }
 
-          return true
+          return true;
         },
         {
           message:
-            '如果 message 包含 reply 类型的消息，那么只能包含一个，而且排在最前面'
+            '如果 message 包含 reply 类型的消息，那么只能包含一个，而且排在最前面',
         }
       ),
     response: baseResponseSchema.extend({
-      data: commonResponseDataSchema
-    })
+      data: commonResponseDataSchema,
+    }),
   },
   '/send_group_forward_msg': {
     description: '发送群合并转发消息',
@@ -49,36 +49,36 @@ const oneBotHttpApiMessageGroup: Record<
       news: z
         .array(
           z.object({
-            text: z.string()
+            text: z.string(),
           })
         )
         .describe('?'),
       prompt: z.string().describe('外显'),
       summary: z.string().describe('底下文本'),
-      source: z.string().describe('内容')
+      source: z.string().describe('内容'),
     }),
     response: baseResponseSchema.extend({
-      data: commonResponseDataSchema
-    })
+      data: commonResponseDataSchema,
+    }),
   },
   '/forward_group_single_msg': {
     description: '消息转发到群',
     request: z.object({
       group_id: z.union([z.string(), z.number()]).describe('群号'),
-      message_id: z.union([z.string(), z.number()]).describe('消息 ID')
+      message_id: z.union([z.string(), z.number()]).describe('消息 ID'),
     }),
     response: baseResponseSchema.extend({
-      data: commonResponseDataSchema
-    })
+      data: commonResponseDataSchema,
+    }),
   },
   '/group_poke': {
     description: '发送戳一戳',
     request: z.object({
       group_id: z.union([z.string(), z.number()]).describe('群号'),
-      user_id: z.union([z.string(), z.number()]).describe('对方QQ号')
+      user_id: z.union([z.string(), z.number()]).describe('对方QQ号'),
     }),
-    response: baseResponseSchema
-  }
-}
+    response: baseResponseSchema,
+  },
+};
 
-export default oneBotHttpApiMessageGroup
+export default oneBotHttpApiMessageGroup;
diff --git a/napcat.webui/src/const/ob_api/message/index.ts b/napcat.webui/src/const/ob_api/message/index.ts
index d453994a..7a0235c9 100644
--- a/napcat.webui/src/const/ob_api/message/index.ts
+++ b/napcat.webui/src/const/ob_api/message/index.ts
@@ -1,9 +1,9 @@
-import { z } from 'zod'
+import { z } from 'zod';
 
-import { baseResponseSchema, commonResponseDataSchema } from '../response'
-import oneBotHttpApiMessageGroup from './group'
-import messageNodeSchema from './node'
-import oneBotHttpApiMessagePrivate from './private'
+import { baseResponseSchema, commonResponseDataSchema } from '../response';
+import oneBotHttpApiMessageGroup from './group';
+import messageNodeSchema from './node';
+import oneBotHttpApiMessagePrivate from './private';
 
 const fileSchema = z
   .object({
@@ -11,9 +11,9 @@ const fileSchema = z
     url: z.string().describe('路径或链接'),
     file_size: z.string().describe('文件大小'),
     file_name: z.string().describe('文件名'),
-    base64: z.string().describe('文件base64编码')
+    base64: z.string().describe('文件base64编码'),
   })
-  .describe('文件')
+  .describe('文件');
 const messageSchema = z
   .object({
     self_id: z.number().describe('自己QQ号'),
@@ -30,7 +30,7 @@ const messageSchema = z
         sex: z.enum(['male', 'female', 'unknown']).describe('性别'),
         age: z.number().describe('年龄'),
         card: z.string().describe('名片'),
-        role: z.enum(['owner', 'admin', 'member']).describe('角色')
+        role: z.enum(['owner', 'admin', 'member']).describe('角色'),
       })
       .describe('发送人信息'),
     raw_message: z.string().describe('原始消息'),
@@ -40,9 +40,9 @@ const messageSchema = z
     message_format: z.string().describe('消息格式'),
     post_type: z.string().describe('?'),
     message_sent_type: z.string().describe('消息发送类型'),
-    group_id: z.number().describe('群号')
+    group_id: z.number().describe('群号'),
   })
-  .describe('消息')
+  .describe('消息');
 
 const oneBotHttpApiMessage = {
   ...oneBotHttpApiMessagePrivate,
@@ -58,61 +58,61 @@ const oneBotHttpApiMessage = {
         user_id: z
           .union([z.string(), z.number()])
           .optional()
-          .describe('用户QQ号，与 group_id 二选一')
+          .describe('用户QQ号，与 group_id 二选一'),
       })
       .refine(
         (data) =>
           (data.group_id && !data.user_id) || (!data.group_id && data.user_id),
         {
           message: 'group_id 和 user_id 必须二选一，且不能同时存在或同时为空',
-          path: ['group_id', 'user_id']
+          path: ['group_id', 'user_id'],
         }
       ),
-    response: baseResponseSchema
+    response: baseResponseSchema,
   },
   '/mark_group_msg_as_read': {
     description: '标记群消息已读',
     request: z.object({
-      group_id: z.union([z.string(), z.number()]).describe('群号')
+      group_id: z.union([z.string(), z.number()]).describe('群号'),
     }),
-    response: baseResponseSchema
+    response: baseResponseSchema,
   },
   '/mark_private_msg_as_read': {
     description: '标记私聊消息已读',
     request: z.object({
-      user_id: z.union([z.string(), z.number()]).describe('用户QQ号')
+      user_id: z.union([z.string(), z.number()]).describe('用户QQ号'),
     }),
-    response: baseResponseSchema
+    response: baseResponseSchema,
   },
   '/_mark_all_as_read': {
     description: '标记所有消息已读',
     request: z.object({}),
-    response: baseResponseSchema
+    response: baseResponseSchema,
   },
   '/delete_msg': {
     description: '撤回消息',
     request: z.object({
-      message_id: z.union([z.string(), z.number()]).describe('消息ID')
+      message_id: z.union([z.string(), z.number()]).describe('消息ID'),
     }),
-    response: baseResponseSchema
+    response: baseResponseSchema,
   },
   '/get_msg': {
     description: '获取消息',
     request: z.object({
-      message_id: z.union([z.string(), z.number()]).describe('消息ID')
+      message_id: z.union([z.string(), z.number()]).describe('消息ID'),
     }),
     response: baseResponseSchema.extend({
-      data: z.object({})
-    })
+      data: z.object({}),
+    }),
   },
   '/get_image': {
     description: '获取图片',
     request: z.object({
-      file_id: z.string().describe('文件ID')
+      file_id: z.string().describe('文件ID'),
     }),
     response: baseResponseSchema.extend({
-      data: fileSchema
-    })
+      data: fileSchema,
+    }),
   },
   '/get_record': {
     description: '获取语音',
@@ -120,20 +120,20 @@ const oneBotHttpApiMessage = {
       file_id: z.string().describe('文件ID'),
       out_format: z
         .enum(['mp3', 'amr', 'wma', 'm4a', 'spx', 'ogg', 'wav', 'flac'])
-        .describe('输出格式')
+        .describe('输出格式'),
     }),
     response: baseResponseSchema.extend({
-      data: fileSchema
-    })
+      data: fileSchema,
+    }),
   },
   '/get_file': {
     description: '获取文件',
     request: z.object({
-      file_id: z.string().describe('文件ID')
+      file_id: z.string().describe('文件ID'),
     }),
     response: baseResponseSchema.extend({
-      data: fileSchema
-    })
+      data: fileSchema,
+    }),
   },
   '/get_group_msg_history': {
     description: '获取群消息历史',
@@ -141,24 +141,24 @@ const oneBotHttpApiMessage = {
       group_id: z.union([z.string(), z.number()]).describe('群号'),
       message_seq: z.union([z.string(), z.number()]).describe('消息序号'),
       count: z.number().int().positive().describe('获取数量'),
-      reverseOrder: z.boolean().describe('是否倒序')
+      reverseOrder: z.boolean().describe('是否倒序'),
     }),
     response: baseResponseSchema.extend({
       data: z.object({
-        messages: z.array(messageSchema).describe('消息列表')
-      })
-    })
+        messages: z.array(messageSchema).describe('消息列表'),
+      }),
+    }),
   },
   '/set_msg_emoji_like': {
     description: '贴表情',
     request: z.object({
       message_id: z.union([z.string(), z.number()]).describe('消息ID'),
       emoji_id: z.number().describe('表情ID'),
-      set: z.boolean().describe('?')
+      set: z.boolean().describe('?'),
     }),
     response: baseResponseSchema.extend({
-      data: commonResponseDataSchema
-    })
+      data: commonResponseDataSchema,
+    }),
   },
   '/get_friend_msg_history': {
     description: '获取好友消息历史',
@@ -166,18 +166,18 @@ const oneBotHttpApiMessage = {
       user_id: z.union([z.string(), z.number()]).describe('用户QQ号'),
       message_seq: z.union([z.string(), z.number()]).describe('消息序号'),
       count: z.number().int().positive().describe('获取数量'),
-      reverseOrder: z.boolean().describe('是否倒序')
+      reverseOrder: z.boolean().describe('是否倒序'),
     }),
     response: baseResponseSchema.extend({
       data: z.object({
-        messages: z.array(messageSchema)
-      })
-    })
+        messages: z.array(messageSchema),
+      }),
+    }),
   },
   '/get_recent_contact': {
     description: '最近消息列表',
     request: z.object({
-      count: z.number().int().positive().describe('获取数量')
+      count: z.number().int().positive().describe('获取数量'),
     }),
     response: baseResponseSchema.extend({
       data: z.array(
@@ -190,10 +190,10 @@ const oneBotHttpApiMessage = {
           msgId: z.string().describe('消息ID'),
           sendNickName: z.string().describe('发送人昵称'),
           sendMemberName: z.string().describe('发送人?昵称'),
-          peerName: z.string().describe('对方昵称')
+          peerName: z.string().describe('对方昵称'),
         })
-      )
-    })
+      ),
+    }),
   },
   '/fetch_emoji_like': {
     description: '获取贴表情详情',
@@ -206,7 +206,7 @@ const oneBotHttpApiMessage = {
         .union([z.string(), z.number()])
         .optional()
         .describe('用户QQ号'),
-      count: z.number().int().positive().optional().describe('获取数量')
+      count: z.number().int().positive().optional().describe('获取数量'),
     }),
     response: baseResponseSchema.extend({
       data: z.object({
@@ -218,25 +218,25 @@ const oneBotHttpApiMessage = {
               .object({
                 tinyId: z.string().describe('表情ID'),
                 nickName: z.string().describe('昵称?'),
-                headUrl: z.string().describe('头像?')
+                headUrl: z.string().describe('头像?'),
               })
               .describe('表情点赞列表')
           )
           .describe('表情点赞列表'),
         cookie: z.string().describe('cookie'),
         isLastPage: z.boolean().describe('是否最后一页'),
-        isFirstPage: z.boolean().describe('是否第一页')
-      })
-    })
+        isFirstPage: z.boolean().describe('是否第一页'),
+      }),
+    }),
   },
   '/get_forward_msg': {
     description: '获取合并转发消息',
     request: z.object({
-      message_id: z.union([z.string(), z.number()]).describe('消息ID')
+      message_id: z.union([z.string(), z.number()]).describe('消息ID'),
     }),
     response: baseResponseSchema.extend({
-      data: z.object({})
-    })
+      data: z.object({}),
+    }),
   },
   '/send_forward_msg': {
     description: '发送合并转发消息',
@@ -250,20 +250,20 @@ const oneBotHttpApiMessage = {
       news: z
         .array(
           z.object({
-            text: z.string()
+            text: z.string(),
           })
         )
         .describe('?'),
       prompt: z.string().describe('外显'),
       summary: z.string().describe('底下文字'),
-      source: z.string().describe('内容')
+      source: z.string().describe('内容'),
     }),
     response: baseResponseSchema.extend({
       data: commonResponseDataSchema.extend({
-        data: z.object({})
-      })
-    })
-  }
-} as const
+        data: z.object({}),
+      }),
+    }),
+  },
+} as const;
 
-export default oneBotHttpApiMessage
+export default oneBotHttpApiMessage;
diff --git a/napcat.webui/src/const/ob_api/message/node.ts b/napcat.webui/src/const/ob_api/message/node.ts
index c902f258..1cb4a50a 100644
--- a/napcat.webui/src/const/ob_api/message/node.ts
+++ b/napcat.webui/src/const/ob_api/message/node.ts
@@ -1,68 +1,68 @@
-import { z } from 'zod'
+import { z } from 'zod';
 
 const messageNode = z.union([
   z
     .object({
       type: z.literal('text'),
       data: z.object({
-        text: z.string()
-      })
+        text: z.string(),
+      }),
     })
     .describe('文本消息'),
   z
     .object({
       type: z.literal('at'),
       data: z.object({
-        qq: z.string()
-      })
+        qq: z.string(),
+      }),
     })
     .describe('@某人'),
   z
     .object({
       type: z.literal('image'),
       data: z.object({
-        file: z.string()
-      })
+        file: z.string(),
+      }),
     })
     .describe('图片消息'),
   z
     .object({
       type: z.literal('face'),
       data: z.object({
-        id: z.number()
-      })
+        id: z.number(),
+      }),
     })
     .describe('表情消息'),
   z
     .object({
       type: z.literal('json'),
       data: z.object({
-        data: z.string()
-      })
+        data: z.string(),
+      }),
     })
     .describe('json 卡片消息'),
   z
     .object({
       type: z.literal('record'),
       data: z.object({
-        file: z.string()
-      })
+        file: z.string(),
+      }),
     })
     .describe('语音消息'),
   z
     .object({
       type: z.literal('video'),
       data: z.object({
-        file: z.string()
-      })
+        file: z.string(),
+      }),
     })
     .describe('视频消息'),
   z
     .object({
       type: z.literal('reply'),
       data: z.object({
-        id: z.number()
-      })
+        id: z.number(),
+      }),
     })
     .describe('回复消息'),
   z
@@ -71,37 +71,37 @@ const messageNode = z.union([
       data: z.union([
         z.object({
           type: z.enum(['qq', '163']),
-          id: z.string()
+          id: z.string(),
         }),
         z.object({
           type: z.literal('custom'),
           url: z.string(),
           audio: z.string(),
           title: z.string(),
-          image: z.string()
-        })
-      ])
+          image: z.string(),
+        }),
+      ]),
     })
     .describe('音乐消息'),
   z
     .object({
-      type: z.literal('dice')
+      type: z.literal('dice'),
     })
     .describe('掷骰子'),
   z
     .object({
-      type: z.literal('rps')
+      type: z.literal('rps'),
     })
     .describe('猜拳'),
   z
     .object({
       type: z.literal('file'),
       data: z.object({
-        file: z.string().describe('文件路径，服务器本地或者网络文件均可')
-      })
+        file: z.string().describe('文件路径，服务器本地或者网络文件均可'),
+      }),
     })
-    .describe('发送消息')
-])
+    .describe('发送消息'),
+]);
 
 export const nodeMessage = z
   .object({
@@ -109,11 +109,11 @@ export const nodeMessage = z
     data: z.object({
       user_id: z.string(),
       nickname: z.string(),
-      content: z.array(messageNode)
-    })
+      content: z.array(messageNode),
+    }),
   })
-  .describe('消息节点')
+  .describe('消息节点');
 
-const messageNodeSchema = z.union([messageNode, nodeMessage])
+const messageNodeSchema = z.union([messageNode, nodeMessage]);
 
-export default messageNodeSchema
+export default messageNodeSchema;
diff --git a/napcat.webui/src/const/ob_api/message/private.ts b/napcat.webui/src/const/ob_api/message/private.ts
index c116796f..87ff7e11 100644
--- a/napcat.webui/src/const/ob_api/message/private.ts
+++ b/napcat.webui/src/const/ob_api/message/private.ts
@@ -1,8 +1,8 @@
-import { z } from 'zod'
-import type { ZodSchema } from 'zod'
+import { z } from 'zod';
+import type { ZodSchema } from 'zod';
 
-import { baseResponseSchema, commonResponseDataSchema } from '../response'
-import messageNodeSchema, { nodeMessage } from './node'
+import { baseResponseSchema, commonResponseDataSchema } from '../response';
+import messageNodeSchema, { nodeMessage } from './node';
 
 const oneBotHttpApiMessagePrivate: Record<
   string,
@@ -17,26 +17,26 @@ const oneBotHttpApiMessagePrivate: Record<
     request: z
       .object({
         user_id: z.union([z.string(), z.number()]).describe('对方QQ号'),
-        message: z.array(messageNodeSchema).describe('消息内容')
+        message: z.array(messageNodeSchema).describe('消息内容'),
       })
       .refine(
         (data) => {
-          const hasReply = data.message.some((item) => item.type === 'reply')
+          const hasReply = data.message.some((item) => item.type === 'reply');
 
           if (hasReply) {
-            return data.message[0].type === 'reply'
+            return data.message[0].type === 'reply';
           }
 
-          return true
+          return true;
         },
         {
           message:
-            '如果 message 包含 reply 类型的消息，那么只能包含一个，而且排在最前面'
+            '如果 message 包含 reply 类型的消息，那么只能包含一个，而且排在最前面',
         }
       ),
     response: baseResponseSchema.extend({
-      data: commonResponseDataSchema
-    })
+      data: commonResponseDataSchema,
+    }),
   },
   '/send_private_forward_msg': {
     description: '发送私聊合并转发消息',
@@ -46,35 +46,35 @@ const oneBotHttpApiMessagePrivate: Record<
       news: z
         .array(
           z.object({
-            text: z.string()
+            text: z.string(),
           })
         )
         .describe('?'),
       prompt: z.string().describe('外显'),
       summary: z.string().describe('底下文本'),
-      source: z.string().describe('内容')
+      source: z.string().describe('内容'),
     }),
     response: baseResponseSchema.extend({
-      data: commonResponseDataSchema
-    })
+      data: commonResponseDataSchema,
+    }),
   },
   '/forward_friend_single_msg': {
     description: '消息转发到私聊',
     request: z.object({
       user_id: z.union([z.string(), z.number()]).describe('对方QQ号'),
-      message_id: z.union([z.string(), z.number()]).describe('消息ID')
+      message_id: z.union([z.string(), z.number()]).describe('消息ID'),
     }),
     response: baseResponseSchema.extend({
-      data: commonResponseDataSchema
-    })
+      data: commonResponseDataSchema,
+    }),
   },
   '/group_poke': {
     description: '发送私聊戳一戳',
     request: z.object({
-      user_id: z.union([z.string(), z.number()]).describe('对方QQ号')
+      user_id: z.union([z.string(), z.number()]).describe('对方QQ号'),
     }),
-    response: baseResponseSchema
-  }
-}
+    response: baseResponseSchema,
+  },
+};
 
-export default oneBotHttpApiMessagePrivate
+export default oneBotHttpApiMessagePrivate;
diff --git a/napcat.webui/src/const/ob_api/online_status.ts b/napcat.webui/src/const/ob_api/online_status.ts
index 01854733..e1caaa7b 100644
--- a/napcat.webui/src/const/ob_api/online_status.ts
+++ b/napcat.webui/src/const/ob_api/online_status.ts
@@ -1,4 +1,4 @@
-import { z } from 'zod'
+import { z } from 'zod';
 
 // 定义 set_online_status 的 data 格式
 const onlineStatusDataSchema = z.union([
@@ -7,7 +7,7 @@ const onlineStatusDataSchema = z.union([
     .object({
       status: z.literal(10),
       ext_status: z.literal(0),
-      battery_status: z.literal(0)
+      battery_status: z.literal(0),
     })
     .describe('在线'),
   // Q我吧
@@ -15,7 +15,7 @@ const onlineStatusDataSchema = z.union([
     .object({
       status: z.literal(60),
       ext_status: z.literal(0),
-      battery_status: z.literal(0)
+      battery_status: z.literal(0),
     })
     .describe('Q我吧'),
   // 离开
@@ -23,7 +23,7 @@ const onlineStatusDataSchema = z.union([
     .object({
       status: z.literal(30),
       ext_status: z.literal(0),
-      battery_status: z.literal(0)
+      battery_status: z.literal(0),
     })
     .describe('离开'),
   // 忙碌
@@ -31,7 +31,7 @@ const onlineStatusDataSchema = z.union([
     .object({
       status: z.literal(50),
       ext_status: z.literal(0),
-      battery_status: z.literal(0)
+      battery_status: z.literal(0),
     })
     .describe('忙碌'),
   // 请勿打扰
@@ -39,7 +39,7 @@ const onlineStatusDataSchema = z.union([
     .object({
       status: z.literal(70),
       ext_status: z.literal(0),
-      battery_status: z.literal(0)
+      battery_status: z.literal(0),
     })
     .describe('请勿打扰'),
   // 隐身
@@ -47,7 +47,7 @@ const onlineStatusDataSchema = z.union([
     .object({
       status: z.literal(40),
       ext_status: z.literal(0),
-      battery_status: z.literal(0)
+      battery_status: z.literal(0),
     })
     .describe('隐身'),
   // 听歌中
@@ -55,7 +55,7 @@ const onlineStatusDataSchema = z.union([
     .object({
       status: z.literal(10),
       ext_status: z.literal(1028),
-      battery_status: z.literal(0)
+      battery_status: z.literal(0),
     })
     .describe('听歌中'),
   // 春日限定
@@ -63,7 +63,7 @@ const onlineStatusDataSchema = z.union([
     .object({
       status: z.literal(10),
       ext_status: z.literal(2037),
-      battery_status: z.literal(0)
+      battery_status: z.literal(0),
     })
     .describe('春日限定'),
   // 一起元梦
@@ -71,7 +71,7 @@ const onlineStatusDataSchema = z.union([
     .object({
       status: z.literal(10),
       ext_status: z.literal(2025),
-      battery_status: z.literal(0)
+      battery_status: z.literal(0),
     })
     .describe('一起元梦'),
   // 求星搭子
@@ -79,7 +79,7 @@ const onlineStatusDataSchema = z.union([
     .object({
       status: z.literal(10),
       ext_status: z.literal(2026),
-      battery_status: z.literal(0)
+      battery_status: z.literal(0),
     })
     .describe('求星搭子'),
   // 被掏空
@@ -87,7 +87,7 @@ const onlineStatusDataSchema = z.union([
     .object({
       status: z.literal(10),
       ext_status: z.literal(2014),
-      battery_status: z.literal(0)
+      battery_status: z.literal(0),
     })
     .describe('被掏空'),
   // 今日天气
@@ -95,7 +95,7 @@ const onlineStatusDataSchema = z.union([
     .object({
       status: z.literal(10),
       ext_status: z.literal(1030),
-      battery_status: z.literal(0)
+      battery_status: z.literal(0),
     })
     .describe('今日天气'),
   // 我crash了
@@ -103,7 +103,7 @@ const onlineStatusDataSchema = z.union([
     .object({
       status: z.literal(10),
       ext_status: z.literal(2019),
-      battery_status: z.literal(0)
+      battery_status: z.literal(0),
     })
     .describe('我crash了'),
   // 爱你
@@ -111,7 +111,7 @@ const onlineStatusDataSchema = z.union([
     .object({
       status: z.literal(10),
       ext_status: z.literal(2006),
-      battery_status: z.literal(0)
+      battery_status: z.literal(0),
     })
     .describe('爱你'),
   // 恋爱中
@@ -119,7 +119,7 @@ const onlineStatusDataSchema = z.union([
     .object({
       status: z.literal(10),
       ext_status: z.literal(1051),
-      battery_status: z.literal(0)
+      battery_status: z.literal(0),
     })
     .describe('恋爱中'),
   // 好运锦鲤
@@ -127,7 +127,7 @@ const onlineStatusDataSchema = z.union([
     .object({
       status: z.literal(10),
       ext_status: z.literal(1071),
-      battery_status: z.literal(0)
+      battery_status: z.literal(0),
     })
     .describe('好运锦鲤'),
   // 水逆退散
@@ -135,7 +135,7 @@ const onlineStatusDataSchema = z.union([
     .object({
       status: z.literal(10),
       ext_status: z.literal(1201),
-      battery_status: z.literal(0)
+      battery_status: z.literal(0),
     })
     .describe('水逆退散'),
   // 嗨到飞起
@@ -143,7 +143,7 @@ const onlineStatusDataSchema = z.union([
     .object({
       status: z.literal(10),
       ext_status: z.literal(1056),
-      battery_status: z.literal(0)
+      battery_status: z.literal(0),
     })
     .describe('嗨到飞起'),
   // 元气满满
@@ -151,7 +151,7 @@ const onlineStatusDataSchema = z.union([
     .object({
       status: z.literal(10),
       ext_status: z.literal(1058),
-      battery_status: z.literal(0)
+      battery_status: z.literal(0),
     })
     .describe('元气满满'),
   // 宝宝认证
@@ -159,7 +159,7 @@ const onlineStatusDataSchema = z.union([
     .object({
       status: z.literal(10),
       ext_status: z.literal(1070),
-      battery_status: z.literal(0)
+      battery_status: z.literal(0),
     })
     .describe('宝宝认证'),
   // 一言难尽
@@ -167,7 +167,7 @@ const onlineStatusDataSchema = z.union([
     .object({
       status: z.literal(10),
       ext_status: z.literal(1063),
-      battery_status: z.literal(0)
+      battery_status: z.literal(0),
     })
     .describe('一言难尽'),
   // 难得糊涂
@@ -175,7 +175,7 @@ const onlineStatusDataSchema = z.union([
     .object({
       status: z.literal(10),
       ext_status: z.literal(2001),
-      battery_status: z.literal(0)
+      battery_status: z.literal(0),
     })
     .describe('难得糊涂'),
   // emo中
@@ -183,7 +183,7 @@ const onlineStatusDataSchema = z.union([
     .object({
       status: z.literal(10),
       ext_status: z.literal(1401),
-      battery_status: z.literal(0)
+      battery_status: z.literal(0),
     })
     .describe('emo中'),
   // 我太难了
@@ -191,7 +191,7 @@ const onlineStatusDataSchema = z.union([
     .object({
       status: z.literal(10),
       ext_status: z.literal(1062),
-      battery_status: z.literal(0)
+      battery_status: z.literal(0),
     })
     .describe('我太难了'),
   // 我想开了
@@ -199,7 +199,7 @@ const onlineStatusDataSchema = z.union([
     .object({
       status: z.literal(10),
       ext_status: z.literal(2013),
-      battery_status: z.literal(0)
+      battery_status: z.literal(0),
     })
     .describe('我想开了'),
   // 我没事
@@ -207,7 +207,7 @@ const onlineStatusDataSchema = z.union([
     .object({
       status: z.literal(10),
       ext_status: z.literal(1052),
-      battery_status: z.literal(0)
+      battery_status: z.literal(0),
     })
     .describe('我没事'),
   // 想静静
@@ -215,7 +215,7 @@ const onlineStatusDataSchema = z.union([
     .object({
       status: z.literal(10),
       ext_status: z.literal(1061),
-      battery_status: z.literal(0)
+      battery_status: z.literal(0),
     })
     .describe('想静静'),
   // 悠哉哉
@@ -223,7 +223,7 @@ const onlineStatusDataSchema = z.union([
     .object({
       status: z.literal(10),
       ext_status: z.literal(1059),
-      battery_status: z.literal(0)
+      battery_status: z.literal(0),
     })
     .describe('悠哉哉'),
   // 去旅行
@@ -231,7 +231,7 @@ const onlineStatusDataSchema = z.union([
     .object({
       status: z.literal(10),
       ext_status: z.literal(2015),
-      battery_status: z.literal(0)
+      battery_status: z.literal(0),
     })
     .describe('去旅行'),
   // 信号弱
@@ -239,7 +239,7 @@ const onlineStatusDataSchema = z.union([
     .object({
       status: z.literal(10),
       ext_status: z.literal(1011),
-      battery_status: z.literal(0)
+      battery_status: z.literal(0),
     })
     .describe('信号弱'),
   // 出去浪
@@ -247,7 +247,7 @@ const onlineStatusDataSchema = z.union([
     .object({
       status: z.literal(10),
       ext_status: z.literal(2003),
-      battery_status: z.literal(0)
+      battery_status: z.literal(0),
     })
     .describe('出去浪'),
   // 肝作业
@@ -255,7 +255,7 @@ const onlineStatusDataSchema = z.union([
     .object({
       status: z.literal(10),
       ext_status: z.literal(2012),
-      battery_status: z.literal(0)
+      battery_status: z.literal(0),
     })
     .describe('肝作业'),
   // 学习中
@@ -263,7 +263,7 @@ const onlineStatusDataSchema = z.union([
     .object({
       status: z.literal(10),
       ext_status: z.literal(1018),
-      battery_status: z.literal(0)
+      battery_status: z.literal(0),
     })
     .describe('学习中'),
   // 搬砖中
@@ -271,7 +271,7 @@ const onlineStatusDataSchema = z.union([
     .object({
       status: z.literal(10),
       ext_status: z.literal(2023),
-      battery_status: z.literal(0)
+      battery_status: z.literal(0),
     })
     .describe('搬砖中'),
   // 摸鱼中
@@ -279,7 +279,7 @@ const onlineStatusDataSchema = z.union([
     .object({
       status: z.literal(10),
       ext_status: z.literal(1300),
-      battery_status: z.literal(0)
+      battery_status: z.literal(0),
     })
     .describe('摸鱼中'),
   // 无聊中
@@ -287,7 +287,7 @@ const onlineStatusDataSchema = z.union([
     .object({
       status: z.literal(10),
       ext_status: z.literal(1060),
-      battery_status: z.literal(0)
+      battery_status: z.literal(0),
     })
     .describe('无聊中'),
   // timi中
@@ -295,7 +295,7 @@ const onlineStatusDataSchema = z.union([
     .object({
       status: z.literal(10),
       ext_status: z.literal(1027),
-      battery_status: z.literal(0)
+      battery_status: z.literal(0),
     })
     .describe('timi中'),
   // 睡觉中
@@ -303,7 +303,7 @@ const onlineStatusDataSchema = z.union([
     .object({
       status: z.literal(10),
       ext_status: z.literal(1016),
-      battery_status: z.literal(0)
+      battery_status: z.literal(0),
     })
     .describe('睡觉中'),
   // 熬夜中
@@ -311,7 +311,7 @@ const onlineStatusDataSchema = z.union([
     .object({
       status: z.literal(10),
       ext_status: z.literal(1032),
-      battery_status: z.literal(0)
+      battery_status: z.literal(0),
     })
     .describe('熬夜中'),
   // 追剧中
@@ -319,7 +319,7 @@ const onlineStatusDataSchema = z.union([
     .object({
       status: z.literal(10),
       ext_status: z.literal(1021),
-      battery_status: z.literal(0)
+      battery_status: z.literal(0),
     })
     .describe('追剧中'),
   // 我的电量
@@ -327,9 +327,9 @@ const onlineStatusDataSchema = z.union([
     .object({
       status: z.literal(10),
       ext_status: z.literal(1000),
-      battery_status: z.literal(0)
+      battery_status: z.literal(0),
     })
-    .describe('我的电量')
-])
+    .describe('我的电量'),
+]);
 
-export default onlineStatusDataSchema
+export default onlineStatusDataSchema;
diff --git a/napcat.webui/src/const/ob_api/response.ts b/napcat.webui/src/const/ob_api/response.ts
index 0533f5df..7162b99a 100644
--- a/napcat.webui/src/const/ob_api/response.ts
+++ b/napcat.webui/src/const/ob_api/response.ts
@@ -1,4 +1,4 @@
-import { z } from 'zod'
+import { z } from 'zod';
 
 // 通用响应格式
 export const baseResponseSchema = z.object({
@@ -7,10 +7,10 @@ export const baseResponseSchema = z.object({
   data: z.null(),
   message: z.string().describe('提示信息'), // 提示信息
   wording: z.string().describe('提示信息（人性化）'), // 人性化提示
-  echo: z.string().describe('回显') // 请求回显内容
-})
+  echo: z.string().describe('回显'), // 请求回显内容
+});
 
 export const commonResponseDataSchema = z.object({
   result: z.number(),
-  errMsg: z.string()
-})
+  errMsg: z.string(),
+});
diff --git a/napcat.webui/src/const/ob_api/system.ts b/napcat.webui/src/const/ob_api/system.ts
index f2f3e6a1..36a53e34 100644
--- a/napcat.webui/src/const/ob_api/system.ts
+++ b/napcat.webui/src/const/ob_api/system.ts
@@ -1,18 +1,18 @@
-import { z } from 'zod'
+import { z } from 'zod';
 
-import { baseResponseSchema, commonResponseDataSchema } from './response'
+import { baseResponseSchema, commonResponseDataSchema } from './response';
 
 const oneBotHttpApiSystem = {
   '/get_online_clients': {
     description: '获取当前账号在线客户端列表',
     request: z.object({
-      no_cache: z.boolean().optional().describe('是否不使用缓存')
+      no_cache: z.boolean().optional().describe('是否不使用缓存'),
     }),
     response: baseResponseSchema.extend({
       data: z.object({
-        clients: z.object({})
-      })
-    })
+        clients: z.object({}),
+      }),
+    }),
   },
   '/get_robot_uin_range': {
     description: '获取机器人账号范围',
@@ -21,15 +21,15 @@ const oneBotHttpApiSystem = {
       data: z.array(
         z.object({
           minUin: z.string(),
-          maxUin: z.string()
+          maxUin: z.string(),
         })
-      )
-    })
+      ),
+    }),
   },
   '/ocr_image': {
     description: 'OCR图片识别',
     request: z.object({
-      image: z.string()
+      image: z.string(),
     }),
     response: baseResponseSchema.extend({
       data: z.array(
@@ -37,19 +37,19 @@ const oneBotHttpApiSystem = {
           text: z.string(),
           pt1: z.object({
             x: z.string(),
-            y: z.string()
+            y: z.string(),
           }),
           pt2: z.object({
             x: z.string(),
-            y: z.string()
+            y: z.string(),
           }),
           pt3: z.object({
             x: z.string(),
-            y: z.string()
+            y: z.string(),
           }),
           pt4: z.object({
             x: z.string(),
-            y: z.string()
+            y: z.string(),
           }),
           charBox: z.array(
             z.object({
@@ -57,33 +57,33 @@ const oneBotHttpApiSystem = {
               charBox: z.object({
                 pt1: z.object({
                   x: z.string(),
-                  y: z.string()
+                  y: z.string(),
                 }),
                 pt2: z.object({
                   x: z.string(),
-                  y: z.string()
+                  y: z.string(),
                 }),
                 pt3: z.object({
                   x: z.string(),
-                  y: z.string()
+                  y: z.string(),
                 }),
                 pt4: z.object({
                   x: z.string(),
-                  y: z.string()
-                })
-              })
+                  y: z.string(),
+                }),
+              }),
             })
           ),
-          score: z.string()
+          score: z.string(),
         })
-      )
-    })
+      ),
+    }),
   },
 
   '/.ocr_image': {
     description: '.OCR图片识别',
     request: z.object({
-      image: z.string()
+      image: z.string(),
     }),
     response: baseResponseSchema.extend({
       data: z.array(
@@ -91,19 +91,19 @@ const oneBotHttpApiSystem = {
           text: z.string(),
           pt1: z.object({
             x: z.string(),
-            y: z.string()
+            y: z.string(),
           }),
           pt2: z.object({
             x: z.string(),
-            y: z.string()
+            y: z.string(),
           }),
           pt3: z.object({
             x: z.string(),
-            y: z.string()
+            y: z.string(),
           }),
           pt4: z.object({
             x: z.string(),
-            y: z.string()
+            y: z.string(),
           }),
           charBox: z.array(
             z.object({
@@ -111,36 +111,36 @@ const oneBotHttpApiSystem = {
               charBox: z.object({
                 pt1: z.object({
                   x: z.string(),
-                  y: z.string()
+                  y: z.string(),
                 }),
                 pt2: z.object({
                   x: z.string(),
-                  y: z.string()
+                  y: z.string(),
                 }),
                 pt3: z.object({
                   x: z.string(),
-                  y: z.string()
+                  y: z.string(),
                 }),
                 pt4: z.object({
                   x: z.string(),
-                  y: z.string()
-                })
-              })
+                  y: z.string(),
+                }),
+              }),
             })
           ),
-          score: z.string()
+          score: z.string(),
         })
-      )
-    })
+      ),
+    }),
   },
   '/translate_en2zh': {
     description: '英文翻译为中文',
     request: z.object({
-      words: z.array(z.string())
+      words: z.array(z.string()),
     }),
     response: baseResponseSchema.extend({
-      data: z.array(z.string())
-    })
+      data: z.array(z.string()),
+    }),
   },
   '/get_login_info': {
     description: '获取登录号信息',
@@ -148,19 +148,19 @@ const oneBotHttpApiSystem = {
     response: baseResponseSchema.extend({
       data: z.object({
         user_id: z.number(),
-        nickname: z.string()
-      })
-    })
+        nickname: z.string(),
+      }),
+    }),
   },
   '/set_input_status': {
     description: '设置输入状态',
     request: z.object({
       eventType: z.union([z.literal(0), z.literal(1)]),
-      user_id: z.union([z.number(), z.string()])
+      user_id: z.union([z.number(), z.string()]),
     }),
     response: baseResponseSchema.extend({
-      data: commonResponseDataSchema
-    })
+      data: commonResponseDataSchema,
+    }),
   },
   '/download_file': {
     description: '下载文件到缓存目录',
@@ -170,112 +170,112 @@ const oneBotHttpApiSystem = {
         url: z.string().optional(),
         thread_count: z.number(),
         headers: z.union([z.string(), z.array(z.string())]),
-        name: z.string().optional()
+        name: z.string().optional(),
       })
       .refine(
         (data) => (data.base64 && !data.url) || (!data.base64 && data.url),
         {
           message: 'base64 和 url 必须二选一，且不能同时存在或同时为空',
-          path: ['base64', 'url']
+          path: ['base64', 'url'],
         }
       ),
     response: baseResponseSchema.extend({
       data: z.object({
-        file: z.string()
-      })
-    })
+        file: z.string(),
+      }),
+    }),
   },
   '/get_cookies': {
     description: '获取cookies',
     request: z.object({
-      domain: z.string()
+      domain: z.string(),
     }),
     response: baseResponseSchema.extend({
       data: z.object({
         cookies: z.string(),
-        bkn: z.string()
-      })
-    })
+        bkn: z.string(),
+      }),
+    }),
   },
   '/.handle_quick_operation': {
     description: '.对事件执行快速操作',
     request: z.object({
       context: z.object({}),
-      operation: z.object({})
+      operation: z.object({}),
     }),
-    response: baseResponseSchema
+    response: baseResponseSchema,
   },
   '/get_csrf_token': {
     description: '获取CSRF Token',
     request: z.object({}),
     response: baseResponseSchema.extend({
       data: z.object({
-        token: z.number()
-      })
-    })
+        token: z.number(),
+      }),
+    }),
   },
   '/_del_group_notice': {
     description: '_删除群公告',
     request: z.object({
       group_id: z.union([z.number(), z.string()]),
-      notice_id: z.number()
+      notice_id: z.number(),
     }),
-    response: baseResponseSchema
+    response: baseResponseSchema,
   },
   '/get_credentials': {
     description: '获取 QQ 相关接口凭证',
     request: z.object({
-      domain: z.string()
+      domain: z.string(),
     }),
     response: baseResponseSchema.extend({
       data: z.object({
         cookies: z.string(),
-        token: z.number()
-      })
-    })
+        token: z.number(),
+      }),
+    }),
   },
   '/_get_model_show': {
     description: '_获取在线机型',
     request: z.object({
-      model: z.string()
+      model: z.string(),
     }),
     response: baseResponseSchema.extend({
       data: z.array(
         z.object({
           variants: z.object({
             model_show: z.string(),
-            need_pay: z.boolean()
-          })
+            need_pay: z.boolean(),
+          }),
         })
-      )
-    })
+      ),
+    }),
   },
   '/_set_model_show': {
     description: '_设置在线机型',
     request: z.object({
       model: z.string(),
-      model_show: z.string()
+      model_show: z.string(),
     }),
-    response: baseResponseSchema
+    response: baseResponseSchema,
   },
   '/can_send_image': {
     description: '检查是否可以发送图片',
     request: z.object({}),
     response: baseResponseSchema.extend({
-      yes: z.boolean()
-    })
+      yes: z.boolean(),
+    }),
   },
   '/nc_get_packet_status': {
     description: '获取packet状态',
     request: z.object({}),
-    response: baseResponseSchema
+    response: baseResponseSchema,
   },
   '/can_send_record': {
     description: '检查是否可以发送语音',
     request: z.object({}),
     response: baseResponseSchema.extend({
-      yes: z.boolean()
-    })
+      yes: z.boolean(),
+    }),
   },
   '/get_status': {
     description: '获取状态',
@@ -284,9 +284,9 @@ const oneBotHttpApiSystem = {
       data: z.object({
         online: z.boolean(),
         good: z.boolean(),
-        stat: z.object({})
-      })
-    })
+        stat: z.object({}),
+      }),
+    }),
   },
   '/nc_get_rkey': {
     description: '获取rkey',
@@ -297,10 +297,10 @@ const oneBotHttpApiSystem = {
           rkey: z.string(),
           ttl: z.string(),
           time: z.number(),
-          type: z.number()
+          type: z.number(),
         })
-      )
-    })
+      ),
+    }),
   },
   '/get_version_info': {
     description: '获取版本信息',
@@ -309,14 +309,14 @@ const oneBotHttpApiSystem = {
       data: z.object({
         app_name: z.string(),
         protocol_version: z.string(),
-        app_version: z.string()
-      })
-    })
+        app_version: z.string(),
+      }),
+    }),
   },
   '/get_group_shut_list': {
     description: '获取群禁言列表',
     request: z.object({
-      group_id: z.union([z.number(), z.string()])
+      group_id: z.union([z.number(), z.string()]),
     }),
     response: baseResponseSchema.extend({
       data: z.object({
@@ -357,10 +357,10 @@ const oneBotHttpApiSystem = {
         memberMobileFlag: z.number(),
         memberFlagExt2: z.number(),
         isSpecialShielded: z.boolean(),
-        cardNameId: z.number()
-      })
-    })
-  }
-} as const
+        cardNameId: z.number(),
+      }),
+    }),
+  },
+} as const;
 
-export default oneBotHttpApiSystem
+export default oneBotHttpApiSystem;
diff --git a/napcat.webui/src/const/ob_api/user.ts b/napcat.webui/src/const/ob_api/user.ts
index 6fd8400e..7c31fc9a 100644
--- a/napcat.webui/src/const/ob_api/user.ts
+++ b/napcat.webui/src/const/ob_api/user.ts
@@ -1,7 +1,7 @@
-import { z } from 'zod'
+import { z } from 'zod';
 
-import onlineStatusDataSchema from './online_status'
-import { baseResponseSchema, commonResponseDataSchema } from './response'
+import onlineStatusDataSchema from './online_status';
+import { baseResponseSchema, commonResponseDataSchema } from './response';
 
 const oneBotHttpApiUser = {
   '/set_qq_profile': {
@@ -9,11 +9,11 @@ const oneBotHttpApiUser = {
     request: z.object({
       nickname: z.string().describe('昵称'),
       personal_note: z.string().describe('个性签名'),
-      sex: z.string().optional().describe('性别')
+      sex: z.string().optional().describe('性别'),
     }),
     response: baseResponseSchema.extend({
-      data: commonResponseDataSchema
-    })
+      data: commonResponseDataSchema,
+    }),
   },
   '/ArkSharePeer': {
     description: '获取推荐好友/群聊卡片',
@@ -27,39 +27,39 @@ const oneBotHttpApiUser = {
           .union([z.string(), z.number()])
           .optional()
           .describe('用户ID，与 group_id 二选一'),
-        phoneNumber: z.string().optional().describe('对方手机号码')
+        phoneNumber: z.string().optional().describe('对方手机号码'),
       })
       .refine(
         (data) =>
           (data.group_id && !data.user_id) || (!data.group_id && data.user_id),
         {
           message: 'group_id 和 user_id 必须二选一，且不能同时存在或同时为空',
-          path: ['group_id', 'user_id'] // 错误路径
+          path: ['group_id', 'user_id'], // 错误路径
         }
       ),
     response: baseResponseSchema.extend({
       data: z.object({
         errCode: z.number(),
         errMsg: z.string(),
-        arkJson: z.string()
-      })
-    })
+        arkJson: z.string(),
+      }),
+    }),
   },
   '/ArkShareGroup': {
     description: '获取推荐群聊卡片',
     request: z.object({
-      group_id: z.union([z.string(), z.number()]).describe('群聊ID')
+      group_id: z.union([z.string(), z.number()]).describe('群聊ID'),
     }),
     response: baseResponseSchema.extend({
-      data: z.string()
-    })
+      data: z.string(),
+    }),
   },
   '/set_online_status': {
     description: '设置在线状态',
     request: z.object({
-      data: onlineStatusDataSchema
+      data: onlineStatusDataSchema,
     }),
-    response: baseResponseSchema
+    response: baseResponseSchema,
   },
   '/get_friends_with_category': {
     description: '获取好友分组列表',
@@ -92,60 +92,60 @@ const oneBotHttpApiUser = {
               remark: z.string(),
               user_id: z.number(),
               nickname: z.string(),
-              level: z.number()
+              level: z.number(),
             })
-          )
+          ),
         })
-      )
-    })
+      ),
+    }),
   },
   '/set_qq_avatar': {
     description: '设置头像',
     request: z.object({
-      file: z.string().describe('图片文件路径（服务器本地或者远程均可）')
+      file: z.string().describe('图片文件路径（服务器本地或者远程均可）'),
     }),
-    response: baseResponseSchema
+    response: baseResponseSchema,
   },
   '/send_like': {
     description: '点赞',
     request: z.object({
       user_id: z.union([z.string(), z.number()]).describe('对方QQ号'),
-      times: z.number().describe('点赞次数')
+      times: z.number().describe('点赞次数'),
     }),
-    response: baseResponseSchema
+    response: baseResponseSchema,
   },
   '/create_collection': {
     description: '创建收藏',
     request: z.object({
       rawData: z.string().describe('收藏内容'),
-      brief: z.string().describe('收藏简介')
+      brief: z.string().describe('收藏简介'),
     }),
     response: baseResponseSchema.extend({
-      data: commonResponseDataSchema
-    })
+      data: commonResponseDataSchema,
+    }),
   },
   '/set_friend_add_request': {
     description: '处理好友请求',
     request: z.object({
       flag: z.string().describe('请求ID'),
       approve: z.boolean().describe('是否同意'),
-      remark: z.string().describe('好友备注')
+      remark: z.string().describe('好友备注'),
     }),
-    response: baseResponseSchema
+    response: baseResponseSchema,
   },
   '/set_self_longnick': {
     description: '设置个性签名',
     request: z.object({
-      longNick: z.string().describe('签名内容')
+      longNick: z.string().describe('签名内容'),
     }),
     response: baseResponseSchema.extend({
-      data: commonResponseDataSchema
-    })
+      data: commonResponseDataSchema,
+    }),
   },
   '/get_stranger_info': {
     description: '获取账号信息',
     request: z.object({
-      user_id: z.union([z.string(), z.number()]).describe('对方QQ号')
+      user_id: z.union([z.string(), z.number()]).describe('对方QQ号'),
     }),
     response: baseResponseSchema.extend({
       data: z.object({
@@ -164,14 +164,14 @@ const oneBotHttpApiUser = {
         vip_level: z.number(),
         remark: z.string(),
         status: z.number(),
-        login_days: z.number()
-      })
-    })
+        login_days: z.number(),
+      }),
+    }),
   },
   '/get_friend_list': {
     description: '获取好友列表',
     request: z.object({
-      no_cache: z.boolean().describe('是否不使用缓存')
+      no_cache: z.boolean().describe('是否不使用缓存'),
     }),
     response: baseResponseSchema.extend({
       data: z.array(
@@ -194,10 +194,10 @@ const oneBotHttpApiUser = {
           remark: z.string(),
           user_id: z.number(),
           nickname: z.string(),
-          level: z.number()
+          level: z.number(),
         })
-      )
-    })
+      ),
+    }),
   },
   '/get_profile_like': {
     description: '获取点赞列表',
@@ -225,29 +225,29 @@ const oneBotHttpApiUser = {
             isFriend: z.boolean(),
             isvip: z.boolean(),
             isSvip: z.boolean(),
-            uin: z.number()
+            uin: z.number(),
           })
-        )
-      })
-    })
+        ),
+      }),
+    }),
   },
   '/fetch_custom_face': {
     description: '获取收藏表情',
     request: z.object({
-      count: z.number().optional().describe('获取数量')
+      count: z.number().optional().describe('获取数量'),
     }),
     response: baseResponseSchema.extend({
-      data: z.array(z.string())
-    })
+      data: z.array(z.string()),
+    }),
   },
   '/upload_private_file': {
     description: '上传私聊文件',
     request: z.object({
       user_id: z.union([z.string(), z.number()]),
       file: z.string(),
-      name: z.string()
+      name: z.string(),
     }),
-    response: baseResponseSchema
+    response: baseResponseSchema,
   },
   '/delete_friend': {
     description: '删除好友',
@@ -255,24 +255,24 @@ const oneBotHttpApiUser = {
       user_id: z.union([z.string(), z.number()]).describe('自己QQ号？'),
       friend_id: z.union([z.string(), z.number()]).describe('好友QQ号'),
       temp_block: z.boolean().describe('是否加入黑名单'),
-      temp_both_del: z.boolean().describe('是否双向删除')
+      temp_both_del: z.boolean().describe('是否双向删除'),
     }),
     response: baseResponseSchema.extend({
-      data: commonResponseDataSchema
-    })
+      data: commonResponseDataSchema,
+    }),
   },
   '/nc_get_user_status': {
     description: '获取用户在线状态',
     request: z.object({
-      user_id: z.union([z.string(), z.number()]).describe('对方QQ号')
+      user_id: z.union([z.string(), z.number()]).describe('对方QQ号'),
     }),
     response: baseResponseSchema.extend({
       data: z.object({
         status: z.number(),
-        ext_status: z.number()
-      })
-    })
-  }
-} as const
+        ext_status: z.number(),
+      }),
+    }),
+  },
+} as const;
 
-export default oneBotHttpApiUser
+export default oneBotHttpApiUser;
diff --git a/napcat.webui/src/const/themes.ts b/napcat.webui/src/const/themes.ts
index fa518926..93c5324b 100644
--- a/napcat.webui/src/const/themes.ts
+++ b/napcat.webui/src/const/themes.ts
@@ -1,6 +1,6 @@
-import heroui from './themes/heroui'
-import nc_pink from './themes/nc_pink'
+import heroui from './themes/heroui';
+import nc_pink from './themes/nc_pink';
 
-const themes: ThemeInfo[] = [nc_pink, heroui]
+const themes: ThemeInfo[] = [nc_pink, heroui];
 
-export default themes
+export default themes;
diff --git a/napcat.webui/src/const/themes/heroui.ts b/napcat.webui/src/const/themes/heroui.ts
index b1411c00..f5a1cbf3 100644
--- a/napcat.webui/src/const/themes/heroui.ts
+++ b/napcat.webui/src/const/themes/heroui.ts
@@ -121,7 +121,7 @@ const theme: ThemeConfig = {
       '0px 0px 15px 0px rgba(0, 0, 0, .06), 0px 2px 30px 0px rgba(0, 0, 0, .22), inset 0px 0px 1px 0px hsla(0, 0%, 100%, .15)',
     '--heroui-box-shadow-large':
       '0px 0px 30px 0px rgba(0, 0, 0, .07), 0px 30px 60px 0px rgba(0, 0, 0, .26), inset 0px 0px 1px 0px hsla(0, 0%, 100%, .15)',
-    '--heroui-hover-opacity': '.9'
+    '--heroui-hover-opacity': '.9',
   },
   light: {
     '--heroui-background': '0 0% 100%',
@@ -245,12 +245,12 @@ const theme: ThemeConfig = {
       '0px 0px 15px 0px rgba(0, 0, 0, .03), 0px 2px 30px 0px rgba(0, 0, 0, .08), 0px 0px 1px 0px rgba(0, 0, 0, .3)',
     '--heroui-box-shadow-large':
       '0px 0px 30px 0px rgba(0, 0, 0, .04), 0px 30px 60px 0px rgba(0, 0, 0, .12), 0px 0px 1px 0px rgba(0, 0, 0, .3)',
-    '--heroui-hover-opacity': '.8'
-  }
-}
+    '--heroui-hover-opacity': '.8',
+  },
+};
 export default {
   theme,
   author: 'HeroUI',
   name: 'heroui',
-  description: 'HeroUI Default Theme'
-} satisfies ThemeInfo
+  description: 'HeroUI Default Theme',
+} satisfies ThemeInfo;
diff --git a/napcat.webui/src/const/themes/nc_pink.ts b/napcat.webui/src/const/themes/nc_pink.ts
index e9ea2823..bb2e8831 100644
--- a/napcat.webui/src/const/themes/nc_pink.ts
+++ b/napcat.webui/src/const/themes/nc_pink.ts
@@ -121,7 +121,7 @@ const theme: ThemeConfig = {
       '0px 0px 15px 0px rgba(0, 0, 0, .06), 0px 2px 30px 0px rgba(0, 0, 0, .22), inset 0px 0px 1px 0px hsla(0, 0%, 100%, .15)',
     '--heroui-box-shadow-large':
       '0px 0px 30px 0px rgba(0, 0, 0, .07), 0px 30px 60px 0px rgba(0, 0, 0, .26), inset 0px 0px 1px 0px hsla(0, 0%, 100%, .15)',
-    '--heroui-hover-opacity': '.9'
+    '--heroui-hover-opacity': '.9',
   },
   light: {
     '--heroui-background': '0 0% 100%',
@@ -245,12 +245,12 @@ const theme: ThemeConfig = {
       '0px 0px 15px 0px rgba(0, 0, 0, .03), 0px 2px 30px 0px rgba(0, 0, 0, .08), 0px 0px 1px 0px rgba(0, 0, 0, .3)',
     '--heroui-box-shadow-large':
       '0px 0px 30px 0px rgba(0, 0, 0, .04), 0px 30px 60px 0px rgba(0, 0, 0, .12), 0px 0px 1px 0px rgba(0, 0, 0, .3)',
-    '--heroui-hover-opacity': '.8'
-  }
-}
+    '--heroui-hover-opacity': '.8',
+  },
+};
 export default {
   theme,
   author: 'NapCat',
   name: 'nc_pink',
-  description: 'NapCat Pink Theme'
-} satisfies ThemeInfo
+  description: 'NapCat Pink Theme',
+} satisfies ThemeInfo;
diff --git a/napcat.webui/src/contexts/dialog.tsx b/napcat.webui/src/contexts/dialog.tsx
index 8720c025..1c7e7f0e 100644
--- a/napcat.webui/src/contexts/dialog.tsx
+++ b/napcat.webui/src/contexts/dialog.tsx
@@ -1,8 +1,8 @@
 // Dialog Context
-import React from 'react'
+import React from 'react';
 
-import Modal from '@/components/modal'
-import type { ModalProps } from '@/components/modal'
+import Modal from '@/components/modal';
+import type { ModalProps } from '@/components/modal';
 
 export interface AlertProps
   extends Omit<ModalProps, 'onCancel' | 'showCancel' | 'cancelText'> {
@@ -29,16 +29,16 @@ export interface DialogProviderProps {
 
 export const DialogContext = React.createContext<DialogContextProps>({
   alert: () => {},
-  confirm: () => {}
-})
+  confirm: () => {},
+});
 
 const DialogProvider: React.FC<DialogProviderProps> = ({ children }) => {
-  const [dialogs, setDialogs] = React.useState<ModalItem[]>([])
+  const [dialogs, setDialogs] = React.useState<ModalItem[]>([]);
   const alert = (config: AlertProps) => {
-    const { onConfirm, size = 'md', ...rest } = config
+    const { onConfirm, size = 'md', ...rest } = config;
 
     setDialogs((before) => {
-      const id = before[before.length - 1]?.id + 1 || 0
+      const id = before[before.length - 1]?.id + 1 || 0;
 
       return [
         ...before,
@@ -48,22 +48,22 @@ const DialogProvider: React.FC<DialogProviderProps> = ({ children }) => {
           backdrop: 'blur',
           showCancel: false,
           onConfirm: () => {
-            onConfirm?.()
+            onConfirm?.();
             setTimeout(() => {
-              setDialogs((before) => before.filter((item) => item.id !== id))
-            }, 300)
+              setDialogs((before) => before.filter((item) => item.id !== id));
+            }, 300);
           },
-          ...rest
-        }
-      ]
-    })
-  }
+          ...rest,
+        },
+      ];
+    });
+  };
 
   const confirm = (config: ConfirmProps) => {
-    const { onConfirm, onCancel, size = 'md', ...rest } = config
+    const { onConfirm, onCancel, size = 'md', ...rest } = config;
 
     setDialogs((before) => {
-      const id = before[before.length - 1]?.id + 1 || 0
+      const id = before[before.length - 1]?.id + 1 || 0;
 
       return [
         ...before,
@@ -73,34 +73,34 @@ const DialogProvider: React.FC<DialogProviderProps> = ({ children }) => {
           backdrop: 'blur',
           showCancel: true,
           onConfirm: () => {
-            onConfirm?.()
+            onConfirm?.();
             setTimeout(() => {
-              setDialogs((before) => before.filter((item) => item.id !== id))
-            }, 300)
+              setDialogs((before) => before.filter((item) => item.id !== id));
+            }, 300);
           },
           onCancel: () => {
-            onCancel?.()
+            onCancel?.();
             setTimeout(() => {
-              setDialogs((before) => before.filter((item) => item.id !== id))
-            }, 300)
+              setDialogs((before) => before.filter((item) => item.id !== id));
+            }, 300);
           },
-          ...rest
-        }
-      ]
-    })
-  }
+          ...rest,
+        },
+      ];
+    });
+  };
 
   return (
     <DialogContext.Provider
       value={{
         alert,
-        confirm
+        confirm,
       }}
     >
       {children}
       {dialogs?.map(({ id, ...props }) => <Modal key={id} {...props} />)}
     </DialogContext.Provider>
-  )
-}
+  );
+};
 
-export default DialogProvider
+export default DialogProvider;
diff --git a/napcat.webui/src/contexts/songs.tsx b/napcat.webui/src/contexts/songs.tsx
index fce67c5a..7348e7a4 100644
--- a/napcat.webui/src/contexts/songs.tsx
+++ b/napcat.webui/src/contexts/songs.tsx
@@ -1,15 +1,15 @@
 // Songs Context
-import { useLocalStorage } from '@uidotdev/usehooks'
-import { createContext, useEffect, useState } from 'react'
+import { useLocalStorage } from '@uidotdev/usehooks';
+import { createContext, useEffect, useState } from 'react';
 
-import { PlayMode } from '@/const/enum'
-import key from '@/const/key'
+import { PlayMode } from '@/const/enum';
+import key from '@/const/key';
 
-import AudioPlayer from '@/components/audio_player'
+import AudioPlayer from '@/components/audio_player';
 
-import { get163MusicListSongs, getNextMusic } from '@/utils/music'
+import { get163MusicListSongs, getNextMusic } from '@/utils/music';
 
-import type { FinalMusic } from '@/types/music'
+import type { FinalMusic } from '@/types/music';
 
 export interface MusicContextProps {
   setListId: (id: string) => void
@@ -26,50 +26,50 @@ export const AudioContext = createContext<MusicContextProps>({
   setListId: () => {},
   listId: '5438670983',
   onNext: () => {},
-  onPrevious: () => {}
-})
+  onPrevious: () => {},
+});
 
 const AudioProvider: React.FC<MusicProviderProps> = ({ children }) => {
-  const [listId, setListId] = useLocalStorage(key.musicID, '5438670983')
-  const [musicList, setMusicList] = useState<FinalMusic[]>([])
-  const [musicId, setMusicId] = useState<number>(0)
-  const [playMode, setPlayMode] = useState<PlayMode>(PlayMode.Loop)
-  const music = musicList.find((music) => music.id === musicId)
-  const [token] = useLocalStorage(key.token, '')
+  const [listId, setListId] = useLocalStorage(key.musicID, '5438670983');
+  const [musicList, setMusicList] = useState<FinalMusic[]>([]);
+  const [musicId, setMusicId] = useState<number>(0);
+  const [playMode, setPlayMode] = useState<PlayMode>(PlayMode.Loop);
+  const music = musicList.find((music) => music.id === musicId);
+  const [token] = useLocalStorage(key.token, '');
   const onNext = () => {
-    const nextID = getNextMusic(musicList, musicId, playMode)
-    setMusicId(nextID)
-  }
+    const nextID = getNextMusic(musicList, musicId, playMode);
+    setMusicId(nextID);
+  };
   const onPrevious = () => {
-    const index = musicList.findIndex((music) => music.id === musicId)
+    const index = musicList.findIndex((music) => music.id === musicId);
     if (index === 0) {
-      setMusicId(musicList[musicList.length - 1].id)
+      setMusicId(musicList[musicList.length - 1].id);
     } else {
-      setMusicId(musicList[index - 1].id)
+      setMusicId(musicList[index - 1].id);
     }
-  }
+  };
   const onPlayEnd = () => {
-    const nextID = getNextMusic(musicList, musicId, playMode)
-    setMusicId(nextID)
-  }
+    const nextID = getNextMusic(musicList, musicId, playMode);
+    setMusicId(nextID);
+  };
   const changeMode = (mode: PlayMode) => {
-    setPlayMode(mode)
-  }
+    setPlayMode(mode);
+  };
   const fetchMusicList = async (id: string) => {
-    const res = await get163MusicListSongs(id)
-    setMusicList(res)
-    setMusicId(res[0].id)
-  }
+    const res = await get163MusicListSongs(id);
+    setMusicList(res);
+    setMusicId(res[0].id);
+  };
   useEffect(() => {
-    if (listId && token) fetchMusicList(listId)
-  }, [listId, token])
+    if (listId && token) fetchMusicList(listId);
+  }, [listId, token]);
   return (
     <AudioContext.Provider
       value={{
         setListId,
         listId,
         onNext,
-        onPrevious
+        onPrevious,
       }}
     >
       <AudioPlayer
@@ -85,7 +85,7 @@ const AudioProvider: React.FC<MusicProviderProps> = ({ children }) => {
       />
       {children}
     </AudioContext.Provider>
-  )
-}
+  );
+};
 
-export default AudioProvider
+export default AudioProvider;
diff --git a/napcat.webui/src/controllers/file_manager.ts b/napcat.webui/src/controllers/file_manager.ts
index ad3d1d33..9650294f 100644
--- a/napcat.webui/src/controllers/file_manager.ts
+++ b/napcat.webui/src/controllers/file_manager.ts
@@ -1,6 +1,6 @@
-import toast from 'react-hot-toast'
+import toast from 'react-hot-toast';
 
-import { serverRequest } from '@/utils/request'
+import { serverRequest } from '@/utils/request';
 
 export interface FileInfo {
   name: string
@@ -10,132 +10,132 @@ export interface FileInfo {
 }
 
 export default class FileManager {
-  public static async listFiles(path: string = '/') {
+  public static async listFiles (path: string = '/') {
     const { data } = await serverRequest.get<ServerResponse<FileInfo[]>>(
       `/File/list?path=${encodeURIComponent(path)}`
-    )
-    return data.data
+    );
+    return data.data;
   }
 
   // 新增：按目录获取
-  public static async listDirectories(path: string = '/') {
+  public static async listDirectories (path: string = '/') {
     const { data } = await serverRequest.get<ServerResponse<FileInfo[]>>(
       `/File/list?path=${encodeURIComponent(path)}&onlyDirectory=true`
-    )
-    return data.data
+    );
+    return data.data;
   }
 
-  public static async createDirectory(path: string): Promise<boolean> {
+  public static async createDirectory (path: string): Promise<boolean> {
     const { data } = await serverRequest.post<ServerResponse<boolean>>(
       '/File/mkdir',
       { path }
-    )
-    return data.data
+    );
+    return data.data;
   }
 
-  public static async delete(path: string) {
+  public static async delete (path: string) {
     const { data } = await serverRequest.post<ServerResponse<boolean>>(
       '/File/delete',
       { path }
-    )
-    return data.data
+    );
+    return data.data;
   }
 
-  public static async readFile(path: string) {
+  public static async readFile (path: string) {
     const { data } = await serverRequest.get<ServerResponse<string>>(
       `/File/read?path=${encodeURIComponent(path)}`
-    )
-    return data.data
+    );
+    return data.data;
   }
 
-  public static async writeFile(path: string, content: string) {
+  public static async writeFile (path: string, content: string) {
     const { data } = await serverRequest.post<ServerResponse<boolean>>(
       '/File/write',
       { path, content }
-    )
-    return data.data
+    );
+    return data.data;
   }
 
-  public static async createFile(path: string): Promise<boolean> {
+  public static async createFile (path: string): Promise<boolean> {
     const { data } = await serverRequest.post<ServerResponse<boolean>>(
       '/File/create',
       { path }
-    )
-    return data.data
+    );
+    return data.data;
   }
 
-  public static async batchDelete(paths: string[]) {
+  public static async batchDelete (paths: string[]) {
     const { data } = await serverRequest.post<ServerResponse<boolean>>(
       '/File/batchDelete',
       { paths }
-    )
-    return data.data
+    );
+    return data.data;
   }
 
-  public static async rename(oldPath: string, newPath: string) {
+  public static async rename (oldPath: string, newPath: string) {
     const { data } = await serverRequest.post<ServerResponse<boolean>>(
       '/File/rename',
       { oldPath, newPath }
-    )
-    return data.data
+    );
+    return data.data;
   }
 
-  public static async move(sourcePath: string, targetPath: string) {
+  public static async move (sourcePath: string, targetPath: string) {
     const { data } = await serverRequest.post<ServerResponse<boolean>>(
       '/File/move',
       { sourcePath, targetPath }
-    )
-    return data.data
+    );
+    return data.data;
   }
 
-  public static async batchMove(
+  public static async batchMove (
     items: { sourcePath: string; targetPath: string }[]
   ) {
     const { data } = await serverRequest.post<ServerResponse<boolean>>(
       '/File/batchMove',
       { items }
-    )
-    return data.data
+    );
+    return data.data;
   }
 
-  public static download(path: string) {
-    const downloadUrl = `/File/download?path=${encodeURIComponent(path)}`
+  public static download (path: string) {
+    const downloadUrl = `/File/download?path=${encodeURIComponent(path)}`;
     toast
       .promise(
         serverRequest
-          .post(downloadUrl, void 0, {
-            responseType: 'blob'
+          .post(downloadUrl, undefined, {
+            responseType: 'blob',
           })
           .catch((e) => {
-            console.error(e)
-            throw new Error('下载失败')
+            console.error(e);
+            throw new Error('下载失败');
           }),
         {
           loading: '正在下载文件...',
           success: '下载成功',
-          error: '下载失败'
+          error: '下载失败',
         }
       )
       .then((response) => {
-        const url = window.URL.createObjectURL(new Blob([response.data]))
-        const link = document.createElement('a')
-        link.href = url
-        let fileName = path.split('/').pop() || ''
+        const url = window.URL.createObjectURL(new Blob([response.data]));
+        const link = document.createElement('a');
+        link.href = url;
+        let fileName = path.split('/').pop() || '';
         if (path.split('.').length === 1) {
-          fileName += '.zip'
+          fileName += '.zip';
         }
-        link.setAttribute('download', fileName)
-        document.body.appendChild(link)
-        link.click()
-        document.body.removeChild(link)
+        link.setAttribute('download', fileName);
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
       })
       .catch((e) => {
-        console.error(e)
-      })
+        console.error(e);
+      });
   }
 
-  public static async batchDownload(paths: string[]) {
-    const downloadUrl = `/File/batchDownload`
+  public static async batchDownload (paths: string[]) {
+    const downloadUrl = '/File/batchDownload';
     toast
       .promise(
         serverRequest
@@ -143,79 +143,79 @@ export default class FileManager {
             downloadUrl,
             { paths },
             {
-              responseType: 'blob'
+              responseType: 'blob',
             }
           )
           .catch((e) => {
-            console.error(e)
-            throw new Error('下载失败')
+            console.error(e);
+            throw new Error('下载失败');
           }),
         {
           loading: '正在下载文件...',
           success: '下载成功',
-          error: '下载失败'
+          error: '下载失败',
         }
       )
       .then((response) => {
-        const url = window.URL.createObjectURL(new Blob([response.data]))
-        const link = document.createElement('a')
-        link.href = url
-        const fileName = 'files.zip'
-        link.setAttribute('download', fileName)
-        document.body.appendChild(link)
-        link.click()
-        document.body.removeChild(link)
+        const url = window.URL.createObjectURL(new Blob([response.data]));
+        const link = document.createElement('a');
+        link.href = url;
+        const fileName = 'files.zip';
+        link.setAttribute('download', fileName);
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
       })
       .catch((e) => {
-        console.error(e)
-      })
+        console.error(e);
+      });
   }
 
-  public static async downloadToURL(path: string) {
-    const downloadUrl = `/File/download?path=${encodeURIComponent(path)}`
-    const response = await serverRequest.post(downloadUrl, void 0, {
-      responseType: 'blob'
-    })
-    return window.URL.createObjectURL(new Blob([response.data]))
+  public static async downloadToURL (path: string) {
+    const downloadUrl = `/File/download?path=${encodeURIComponent(path)}`;
+    const response = await serverRequest.post(downloadUrl, undefined, {
+      responseType: 'blob',
+    });
+    return window.URL.createObjectURL(new Blob([response.data]));
   }
 
-  public static async upload(path: string, files: File[]) {
-    const formData = new FormData()
+  public static async upload (path: string, files: File[]) {
+    const formData = new FormData();
     files.forEach((file) => {
-      formData.append('files', file)
-    })
+      formData.append('files', file);
+    });
 
     const { data } = await serverRequest.post<ServerResponse<boolean>>(
       `/File/upload?path=${encodeURIComponent(path)}`,
       formData,
       {
         headers: {
-          'Content-Type': 'multipart/form-data'
-        }
+          'Content-Type': 'multipart/form-data',
+        },
       }
-    )
-    return data.data
+    );
+    return data.data;
   }
 
-  public static async uploadWebUIFont(file: File) {
-    const formData = new FormData()
-    formData.append('file', file)
+  public static async uploadWebUIFont (file: File) {
+    const formData = new FormData();
+    formData.append('file', file);
     const { data } = await serverRequest.post<ServerResponse<boolean>>(
       '/File/font/upload/webui',
       formData,
       {
         headers: {
-          'Content-Type': 'multipart/form-data'
-        }
+          'Content-Type': 'multipart/form-data',
+        },
       }
-    )
-    return data.data
+    );
+    return data.data;
   }
 
-  public static async deleteWebUIFont() {
+  public static async deleteWebUIFont () {
     const { data } = await serverRequest.post<ServerResponse<boolean>>(
       '/File/font/delete/webui'
-    )
-    return data.data
+    );
+    return data.data;
   }
 }
diff --git a/napcat.webui/src/controllers/qq_manager.ts b/napcat.webui/src/controllers/qq_manager.ts
index 040eefb4..3174272f 100644
--- a/napcat.webui/src/controllers/qq_manager.ts
+++ b/napcat.webui/src/controllers/qq_manager.ts
@@ -1,89 +1,89 @@
-import { serverRequest } from '@/utils/request'
+import { serverRequest } from '@/utils/request';
 
-import { SelfInfo } from '@/types/user'
+import { SelfInfo } from '@/types/user';
 
 export default class QQManager {
-  public static async getOB11Config() {
+  public static async getOB11Config () {
     const data = await serverRequest.post<ServerResponse<OneBotConfig>>(
       '/OB11Config/GetConfig'
-    )
+    );
 
-    return data.data.data
+    return data.data.data;
   }
 
-  public static async setOB11Config(config: OneBotConfig) {
+  public static async setOB11Config (config: OneBotConfig) {
     await serverRequest.post<ServerResponse<null>>('/OB11Config/SetConfig', {
-      config: JSON.stringify(config)
-    })
+      config: JSON.stringify(config),
+    });
   }
 
-  public static async checkQQLoginStatus() {
+  public static async checkQQLoginStatus () {
     const data = await serverRequest.post<
       ServerResponse<{
         isLogin: string
         qrcodeurl: string
       }>
-    >('/QQLogin/CheckLoginStatus')
+    >('/QQLogin/CheckLoginStatus');
 
-    return data.data.data
+    return data.data.data;
   }
 
-  public static async checkQQLoginStatusWithQrcode() {
+  public static async checkQQLoginStatusWithQrcode () {
     const data = await serverRequest.post<
       ServerResponse<{ qrcodeurl: string; isLogin: string }>
-    >('/QQLogin/CheckLoginStatus')
+    >('/QQLogin/CheckLoginStatus');
 
-    return data.data.data
+    return data.data.data;
   }
 
-  public static async getQQLoginQrcode() {
+  public static async getQQLoginQrcode () {
     const data = await serverRequest.post<
       ServerResponse<{
         qrcode: string
       }>
-    >('/QQLogin/GetQQLoginQrcode')
+    >('/QQLogin/GetQQLoginQrcode');
 
-    return data.data.data.qrcode
+    return data.data.data.qrcode;
   }
 
-  public static async getQQQuickLoginList() {
+  public static async getQQQuickLoginList () {
     const data = await serverRequest.post<ServerResponse<string[]>>(
       '/QQLogin/GetQuickLoginList'
-    )
+    );
 
-    return data.data.data
+    return data.data.data;
   }
 
-  public static async getQQQuickLoginListNew() {
+  public static async getQQQuickLoginListNew () {
     const data = await serverRequest.post<ServerResponse<LoginListItem[]>>(
       '/QQLogin/GetQuickLoginListNew'
-    )
-    return data.data.data
+    );
+    return data.data.data;
   }
 
-  public static async setQuickLogin(uin: string) {
+  public static async setQuickLogin (uin: string) {
     await serverRequest.post<ServerResponse<null>>('/QQLogin/SetQuickLogin', {
-      uin
-    })
+      uin,
+    });
   }
 
-  public static async getQQLoginInfo() {
+  public static async getQQLoginInfo () {
     const data = await serverRequest.post<ServerResponse<SelfInfo>>(
       '/QQLogin/GetQQLoginInfo'
-    )
-    return data.data.data
+    );
+    return data.data.data;
   }
 
-  public static async getQuickLoginQQ() {
+  public static async getQuickLoginQQ () {
     const { data } = await serverRequest.post<ServerResponse<string>>(
       '/QQLogin/GetQuickLoginQQ'
-    )
-    return data.data
+    );
+    return data.data;
   }
 
-  public static async setQuickLoginQQ(uin: string) {
+  public static async setQuickLoginQQ (uin: string) {
     await serverRequest.post<ServerResponse<null>>('/QQLogin/SetQuickLoginQQ', {
-      uin
-    })
+      uin,
+    });
   }
 }
diff --git a/napcat.webui/src/controllers/terminal_manager.ts b/napcat.webui/src/controllers/terminal_manager.ts
index 2a0c375e..e5d103c7 100644
--- a/napcat.webui/src/controllers/terminal_manager.ts
+++ b/napcat.webui/src/controllers/terminal_manager.ts
@@ -1,6 +1,6 @@
-import { serverRequest } from '@/utils/request'
+import { serverRequest } from '@/utils/request';
 
-type TerminalCallback = (data: string) => void
+type TerminalCallback = (data: string) => void;
 
 interface TerminalConnection {
   ws: WebSocket
@@ -18,30 +18,30 @@ export interface TerminalInfo {
 }
 
 class TerminalManager {
-  private connections: Map<string, TerminalConnection> = new Map()
-  private readonly MAX_BUFFER_SIZE = 1000 // 限制缓存大小
+  private connections: Map<string, TerminalConnection> = new Map();
+  private readonly MAX_BUFFER_SIZE = 1000; // 限制缓存大小
 
-  async createTerminal(cols: number, rows: number): Promise<TerminalSession> {
+  async createTerminal (cols: number, rows: number): Promise<TerminalSession> {
     const { data } = await serverRequest.post<ServerResponse<TerminalSession>>(
       '/Log/terminal/create',
       { cols, rows }
-    )
-    return data.data
+    );
+    return data.data;
   }
 
-  async closeTerminal(id: string): Promise<void> {
-    await serverRequest.post(`/Log/terminal/${id}/close`)
+  async closeTerminal (id: string): Promise<void> {
+    await serverRequest.post(`/Log/terminal/${id}/close`);
   }
 
-  async getTerminalList(): Promise<TerminalInfo[]> {
+  async getTerminalList (): Promise<TerminalInfo[]> {
     const { data } =
       await serverRequest.get<ServerResponse<TerminalInfo[]>>(
         '/Log/terminal/list'
-      )
-    return data.data
+      );
+    return data.data;
   }
 
-  connectTerminal(
+  connectTerminal (
     id: string,
     callback: TerminalCallback,
     config?: {
@@ -49,85 +49,85 @@ class TerminalManager {
       rows?: number
     }
   ): WebSocket {
-    let conn = this.connections.get(id)
-    const { cols = 80, rows = 24 } = config || {}
+    let conn = this.connections.get(id);
+    const { cols = 80, rows = 24 } = config || {};
     if (!conn) {
-      const url = new URL(window.location.href)
-      url.protocol = url.protocol.replace('http', 'ws')
-      url.pathname = `/api/ws/terminal`
-      url.searchParams.set('id', id)
-      const token = JSON.parse(localStorage.getItem('token') || '')
+      const url = new URL(window.location.href);
+      url.protocol = url.protocol.replace('http', 'ws');
+      url.pathname = '/api/ws/terminal';
+      url.searchParams.set('id', id);
+      const token = JSON.parse(localStorage.getItem('token') || '');
       if (!token) {
-        throw new Error('No token found')
+        throw new Error('No token found');
       }
-      url.searchParams.set('token', token)
-      const ws = new WebSocket(url.toString())
+      url.searchParams.set('token', token);
+      const ws = new WebSocket(url.toString());
       conn = {
         ws,
         callbacks: new Set([callback]),
         isConnected: false,
-        buffer: [] // 初始化缓存
-      }
+        buffer: [], // 初始化缓存
+      };
 
       ws.onmessage = (event) => {
-        const data = event.data
+        const data = event.data;
         // 保存到缓存
-        conn?.buffer.push(data)
+        conn?.buffer.push(data);
         if ((conn?.buffer.length ?? 0) > this.MAX_BUFFER_SIZE) {
-          conn?.buffer.shift()
+          conn?.buffer.shift();
         }
-        conn?.callbacks.forEach((cb) => cb(data))
-      }
+        conn?.callbacks.forEach((cb) => cb(data));
+      };
 
       ws.onopen = () => {
-        if (conn) conn.isConnected = true
-        this.sendResize(id, cols, rows)
-      }
+        if (conn) conn.isConnected = true;
+        this.sendResize(id, cols, rows);
+      };
 
       ws.onclose = () => {
-        if (conn) conn.isConnected = false
-      }
+        if (conn) conn.isConnected = false;
+      };
 
-      this.connections.set(id, conn)
+      this.connections.set(id, conn);
     } else {
-      conn.callbacks.add(callback)
+      conn.callbacks.add(callback);
       // 恢复历史内容
-      conn.buffer.forEach((data) => callback(data))
+      conn.buffer.forEach((data) => callback(data));
     }
 
-    return conn.ws
+    return conn.ws;
   }
 
-  disconnectTerminal(id: string, callback: TerminalCallback) {
-    const conn = this.connections.get(id)
-    if (!conn) return
+  disconnectTerminal (id: string, callback: TerminalCallback) {
+    const conn = this.connections.get(id);
+    if (!conn) return;
 
-    conn.callbacks.delete(callback)
+    conn.callbacks.delete(callback);
   }
 
-  removeTerminal(id: string) {
-    const conn = this.connections.get(id)
+  removeTerminal (id: string) {
+    const conn = this.connections.get(id);
     if (conn?.ws.readyState === WebSocket.OPEN) {
-      conn.ws.close()
+      conn.ws.close();
     }
-    this.connections.delete(id)
+    this.connections.delete(id);
   }
 
-  sendInput(id: string, data: string) {
-    const conn = this.connections.get(id)
+  sendInput (id: string, data: string) {
+    const conn = this.connections.get(id);
     if (conn?.ws.readyState === WebSocket.OPEN) {
-      conn.ws.send(JSON.stringify({ type: 'input', data }))
+      conn.ws.send(JSON.stringify({ type: 'input', data }));
     }
   }
 
-  sendResize(id: string, cols: number, rows: number) {
-    const conn = this.connections.get(id)
+  sendResize (id: string, cols: number, rows: number) {
+    const conn = this.connections.get(id);
     if (conn?.ws.readyState === WebSocket.OPEN) {
-      conn.ws.send(JSON.stringify({ type: 'resize', cols, rows }))
+      conn.ws.send(JSON.stringify({ type: 'resize', cols, rows }));
     }
   }
 }
 
-const terminalManager = new TerminalManager()
+const terminalManager = new TerminalManager();
 
-export default terminalManager
+export default terminalManager;
diff --git a/napcat.webui/src/controllers/webui_manager.ts b/napcat.webui/src/controllers/webui_manager.ts
index a57706f3..8669ad13 100644
--- a/napcat.webui/src/controllers/webui_manager.ts
+++ b/napcat.webui/src/controllers/webui_manager.ts
@@ -1,9 +1,9 @@
-import CryptoJS from 'crypto-js'
-import { EventSourcePolyfill } from 'event-source-polyfill'
+import CryptoJS from 'crypto-js';
+import { EventSourcePolyfill } from 'event-source-polyfill';
 
-import { LogLevel } from '@/const/enum'
+import { LogLevel } from '@/const/enum';
 
-import { serverRequest } from '@/utils/request'
+import { serverRequest } from '@/utils/request';
 
 export interface Log {
   level: LogLevel
@@ -11,190 +11,190 @@ export interface Log {
 }
 
 export default class WebUIManager {
-  public static async checkWebUiLogined() {
+  public static async checkWebUiLogined () {
     const { data } =
-      await serverRequest.post<ServerResponse<boolean>>('/auth/check')
-    return data.data
+      await serverRequest.post<ServerResponse<boolean>>('/auth/check');
+    return data.data;
   }
 
-  public static async loginWithToken(token: string) {
-    const sha256 = CryptoJS.SHA256(token + '.napcat').toString()
+  public static async loginWithToken (token: string) {
+    const sha256 = CryptoJS.SHA256(token + '.napcat').toString();
     const { data } = await serverRequest.post<ServerResponse<AuthResponse>>(
       '/auth/login',
       { hash: sha256 }
-    )
-    return data.data.Credential
+    );
+    return data.data.Credential;
   }
 
-  public static async changePassword(oldToken: string, newToken: string) {
+  public static async changePassword (oldToken: string, newToken: string) {
     const { data } = await serverRequest.post<ServerResponse<boolean>>(
       '/auth/update_token',
       { oldToken, newToken }
-    )
-    return data.data
+    );
+    return data.data;
   }
 
   public static async proxy<T>(url = '') {
     const data = await serverRequest.get<ServerResponse<string>>(
       '/base/proxy?url=' + encodeURIComponent(url)
-    )
-    data.data.data = JSON.parse(data.data.data)
-    return data.data as ServerResponse<T>
+    );
+    data.data.data = JSON.parse(data.data.data);
+    return data.data as ServerResponse<T>;
   }
 
-  public static async getPackageInfo() {
+  public static async getPackageInfo () {
     const { data } =
-      await serverRequest.get<ServerResponse<PackageInfo>>('/base/PackageInfo')
-    return data.data
+      await serverRequest.get<ServerResponse<PackageInfo>>('/base/PackageInfo');
+    return data.data;
   }
 
-  public static async getQQVersion() {
+  public static async getQQVersion () {
     const { data } =
-      await serverRequest.get<ServerResponse<string>>('/base/QQVersion')
-    return data.data
+      await serverRequest.get<ServerResponse<string>>('/base/QQVersion');
+    return data.data;
   }
 
-  public static async getThemeConfig() {
+  public static async getThemeConfig () {
     const { data } =
-      await serverRequest.get<ServerResponse<ThemeConfig>>('/base/Theme')
-    return data.data
+      await serverRequest.get<ServerResponse<ThemeConfig>>('/base/Theme');
+    return data.data;
   }
 
-  public static async setThemeConfig(theme: ThemeConfig) {
+  public static async setThemeConfig (theme: ThemeConfig) {
     const { data } = await serverRequest.post<ServerResponse<boolean>>(
       '/base/SetTheme',
       { theme }
-    )
-    return data.data
+    );
+    return data.data;
   }
 
-  public static async getLogList() {
+  public static async getLogList () {
     const { data } =
-      await serverRequest.get<ServerResponse<string[]>>('/Log/GetLogList')
-    return data.data
+      await serverRequest.get<ServerResponse<string[]>>('/Log/GetLogList');
+    return data.data;
   }
 
-  public static async getLogContent(logName: string) {
+  public static async getLogContent (logName: string) {
     const { data } = await serverRequest.get<ServerResponse<string>>(
       `/Log/GetLog?id=${logName}`
-    )
-    return data.data
+    );
+    return data.data;
   }
 
-  public static getRealTimeLogs(writer: (data: Log[]) => void) {
-    const token = localStorage.getItem('token')
+  public static getRealTimeLogs (writer: (data: Log[]) => void) {
+    const token = localStorage.getItem('token');
     if (!token) {
-      throw new Error('未登录')
+      throw new Error('未登录');
     }
-    const _token = JSON.parse(token)
+    const _token = JSON.parse(token);
     const eventSource = new EventSourcePolyfill('/api/Log/GetLogRealTime', {
       headers: {
         Authorization: `Bearer ${_token}`,
-        Accept: 'text/event-stream'
+        Accept: 'text/event-stream',
       },
-      withCredentials: true
-    })
+      withCredentials: true,
+    });
 
     eventSource.onmessage = (event) => {
       try {
-        const data = JSON.parse(event.data)
-        data.message = data.message.replace(/\n/g, '\r\n')
-        writer([data])
+        const data = JSON.parse(event.data);
+        data.message = data.message.replace(/\n/g, '\r\n');
+        writer([data]);
       } catch (error) {
-        console.error(error)
+        console.error(error);
       }
-    }
+    };
 
     eventSource.onerror = (error) => {
-      console.error('SSE连接出错:', error)
-      eventSource.close()
-    }
+      console.error('SSE连接出错:', error);
+      eventSource.close();
+    };
 
-    return eventSource
+    return eventSource;
   }
 
-  public static getSystemStatus(writer: (data: SystemStatus) => void) {
-    const token = localStorage.getItem('token')
+  public static getSystemStatus (writer: (data: SystemStatus) => void) {
+    const token = localStorage.getItem('token');
     if (!token) {
-      throw new Error('未登录')
+      throw new Error('未登录');
     }
-    const _token = JSON.parse(token)
+    const _token = JSON.parse(token);
     const eventSource = new EventSourcePolyfill(
       '/api/base/GetSysStatusRealTime',
       {
         headers: {
           Authorization: `Bearer ${_token}`,
-          Accept: 'text/event-stream'
+          Accept: 'text/event-stream',
         },
-        withCredentials: true
+        withCredentials: true,
       }
-    )
+    );
 
     eventSource.onmessage = (event) => {
       try {
-        const data = JSON.parse(event.data) as SystemStatus
-        writer(data)
+        const data = JSON.parse(event.data) as SystemStatus;
+        writer(data);
       } catch (error) {
-        console.error(error)
+        console.error(error);
       }
-    }
+    };
 
     eventSource.onerror = (error) => {
-      console.error('SSE连接出错:', error)
-      eventSource.close()
-    }
+      console.error('SSE连接出错:', error);
+      eventSource.close();
+    };
 
-    return eventSource
+    return eventSource;
   }
 
   // 获取WebUI基础配置
-  public static async getWebUIConfig() {
+  public static async getWebUIConfig () {
     const { data } = await serverRequest.get<ServerResponse<WebUIConfig>>(
       '/WebUIConfig/GetConfig'
-    )
-    return data.data
+    );
+    return data.data;
   }
 
   // 更新WebUI基础配置
-  public static async updateWebUIConfig(config: Partial<WebUIConfig>) {
+  public static async updateWebUIConfig (config: Partial<WebUIConfig>) {
     const { data } = await serverRequest.post<ServerResponse<boolean>>(
       '/WebUIConfig/UpdateConfig',
       config
-    )
-    return data.data
+    );
+    return data.data;
   }
 
   // 获取是否禁用WebUI
-  public static async getDisableWebUI() {
+  public static async getDisableWebUI () {
     const { data } = await serverRequest.get<ServerResponse<boolean>>(
       '/WebUIConfig/GetDisableWebUI'
-    )
-    return data.data
+    );
+    return data.data;
   }
 
   // 更新是否禁用WebUI
-  public static async updateDisableWebUI(disable: boolean) {
+  public static async updateDisableWebUI (disable: boolean) {
     const { data } = await serverRequest.post<ServerResponse<boolean>>(
       '/WebUIConfig/UpdateDisableWebUI',
       { disable }
-    )
-    return data.data
+    );
+    return data.data;
   }
 
   // 获取是否禁用非局域网访问
-  public static async getDisableNonLANAccess() {
+  public static async getDisableNonLANAccess () {
     const { data } = await serverRequest.get<ServerResponse<boolean>>(
       '/WebUIConfig/GetDisableNonLANAccess'
-    )
-    return data.data
+    );
+    return data.data;
   }
 
   // 更新是否禁用非局域网访问
-  public static async updateDisableNonLANAccess(disable: boolean) {
+  public static async updateDisableNonLANAccess (disable: boolean) {
     const { data } = await serverRequest.post<ServerResponse<boolean>>(
       '/WebUIConfig/UpdateDisableNonLANAccess',
       { disable }
-    )
-    return data.data
+    );
+    return data.data;
   }
 }
diff --git a/napcat.webui/src/hooks/auth.ts b/napcat.webui/src/hooks/auth.ts
index 5f697366..0f50c3eb 100644
--- a/napcat.webui/src/hooks/auth.ts
+++ b/napcat.webui/src/hooks/auth.ts
@@ -1,15 +1,15 @@
-import { useLocalStorage } from '@uidotdev/usehooks'
+import { useLocalStorage } from '@uidotdev/usehooks';
 
-import key from '@/const/key'
+import key from '@/const/key';
 
 const useAuth = () => {
-  const [token, setToken] = useLocalStorage<string>(key.token, '')
+  const [token, setToken] = useLocalStorage<string>(key.token, '');
 
   return {
     token,
     isAuth: !!token,
-    revokeAuth: () => setToken('')
-  }
-}
+    revokeAuth: () => setToken(''),
+  };
+};
 
-export default useAuth
+export default useAuth;
diff --git a/napcat.webui/src/hooks/use-config.ts b/napcat.webui/src/hooks/use-config.ts
index 05f2ac35..4abc8fa7 100644
--- a/napcat.webui/src/hooks/use-config.ts
+++ b/napcat.webui/src/hooks/use-config.ts
@@ -1,99 +1,99 @@
-import { updateConfig as storeUpdateConfig } from '@/store/modules/config'
+import { updateConfig as storeUpdateConfig } from '@/store/modules/config';
 
-import { deepClone } from '@/utils/object'
+import { deepClone } from '@/utils/object';
 
-import QQManager from '@/controllers/qq_manager'
+import QQManager from '@/controllers/qq_manager';
 
-import { useAppDispatch, useAppSelector } from './use-store'
+import { useAppDispatch, useAppSelector } from './use-store';
 
 const useConfig = () => {
-  const config = useAppSelector((state) => state.config.value)
-  const dispatch = useAppDispatch()
+  const config = useAppSelector((state) => state.config.value);
+  const dispatch = useAppDispatch();
 
   const createNetworkConfig = async <T extends keyof OneBotConfig['network']>(
     key: T,
     value: OneBotConfig['network'][T][0]
   ) => {
     const allNetworkNames = Object.keys(config.network).reduce((acc, key) => {
-      const _key = key as keyof OneBotConfig['network']
-      return acc.concat(config.network[_key].map((item) => item.name))
-    }, [] as string[])
+      const _key = key as keyof OneBotConfig['network'];
+      return acc.concat(config.network[_key].map((item) => item.name));
+    }, [] as string[]);
 
     if (value.name && allNetworkNames.includes(value.name)) {
-      throw new Error('已经存在相同的配置项名')
+      throw new Error('已经存在相同的配置项名');
     }
 
     const newConfig = deepClone(config)
 
-    ;(newConfig.network[key] as (typeof value)[]).push(value)
+    ;(newConfig.network[key] as (typeof value)[]).push(value);
 
-    await QQManager.setOB11Config(newConfig)
+    await QQManager.setOB11Config(newConfig);
 
-    dispatch(storeUpdateConfig(newConfig))
+    dispatch(storeUpdateConfig(newConfig));
 
-    return newConfig
-  }
+    return newConfig;
+  };
 
   const updateNetworkConfig = async <T extends keyof OneBotConfig['network']>(
     key: T,
     value: OneBotConfig['network'][T][0]
   ) => {
-    const newConfig = deepClone(config)
-    const name = value.name
-    const index = newConfig.network[key].findIndex((item) => item.name === name)
+    const newConfig = deepClone(config);
+    const name = value.name;
+    const index = newConfig.network[key].findIndex((item) => item.name === name);
 
     if (index === -1) {
-      throw new Error('找不到对应的配置项')
+      throw new Error('找不到对应的配置项');
     }
 
-    newConfig.network[key][index] = value
+    newConfig.network[key][index] = value;
 
-    await QQManager.setOB11Config(newConfig)
+    await QQManager.setOB11Config(newConfig);
 
-    dispatch(storeUpdateConfig(newConfig))
+    dispatch(storeUpdateConfig(newConfig));
 
-    return newConfig
-  }
+    return newConfig;
+  };
 
   const deleteNetworkConfig = async <T extends keyof OneBotConfig['network']>(
     key: T,
     name: string
   ) => {
-    const newConfig = deepClone(config)
-    const index = newConfig.network[key].findIndex((item) => item.name === name)
+    const newConfig = deepClone(config);
+    const index = newConfig.network[key].findIndex((item) => item.name === name);
 
     if (index === -1) {
-      throw new Error('找不到对应的配置项')
+      throw new Error('找不到对应的配置项');
     }
 
-    newConfig.network[key].splice(index, 1)
+    newConfig.network[key].splice(index, 1);
 
-    await QQManager.setOB11Config(newConfig)
+    await QQManager.setOB11Config(newConfig);
 
-    dispatch(storeUpdateConfig(newConfig))
+    dispatch(storeUpdateConfig(newConfig));
 
-    return newConfig
-  }
+    return newConfig;
+  };
 
   const enableNetworkConfig = async <T extends keyof OneBotConfig['network']>(
     key: T,
     name: string
   ) => {
-    const newConfig = deepClone(config)
-    const index = newConfig.network[key].findIndex((item) => item.name === name)
+    const newConfig = deepClone(config);
+    const index = newConfig.network[key].findIndex((item) => item.name === name);
 
     if (index === -1) {
-      throw new Error('找不到对应的配置项')
+      throw new Error('找不到对应的配置项');
     }
 
-    newConfig.network[key][index].enable = !newConfig.network[key][index].enable
+    newConfig.network[key][index].enable = !newConfig.network[key][index].enable;
 
-    await QQManager.setOB11Config(newConfig)
+    await QQManager.setOB11Config(newConfig);
 
-    dispatch(storeUpdateConfig(newConfig))
+    dispatch(storeUpdateConfig(newConfig));
 
-    return newConfig
-  }
+    return newConfig;
+  };
 
   const enableDebugNetworkConfig = async <
     T extends keyof OneBotConfig['network']
@@ -101,75 +101,75 @@ const useConfig = () => {
     key: T,
     name: string
   ) => {
-    const newConfig = deepClone(config)
-    const index = newConfig.network[key].findIndex((item) => item.name === name)
+    const newConfig = deepClone(config);
+    const index = newConfig.network[key].findIndex((item) => item.name === name);
 
     if (index === -1) {
-      throw new Error('找不到对应的配置项')
+      throw new Error('找不到对应的配置项');
     }
 
-    newConfig.network[key][index].debug = !newConfig.network[key][index].debug
+    newConfig.network[key][index].debug = !newConfig.network[key][index].debug;
 
-    await QQManager.setOB11Config(newConfig)
+    await QQManager.setOB11Config(newConfig);
 
-    dispatch(storeUpdateConfig(newConfig))
+    dispatch(storeUpdateConfig(newConfig));
 
-    return newConfig
-  }
+    return newConfig;
+  };
 
   const updateSingleConfig = async <T extends keyof OneBotConfig>(
     key: T,
     value: OneBotConfig[T]
   ) => {
-    const newConfig = deepClone(config)
+    const newConfig = deepClone(config);
 
-    newConfig[key] = value
+    newConfig[key] = value;
 
-    await QQManager.setOB11Config(newConfig)
+    await QQManager.setOB11Config(newConfig);
 
-    dispatch(storeUpdateConfig(newConfig))
+    dispatch(storeUpdateConfig(newConfig));
 
-    return newConfig
-  }
+    return newConfig;
+  };
 
   const updateConfig = async (newConfig: OneBotConfig) => {
-    await QQManager.setOB11Config(newConfig)
+    await QQManager.setOB11Config(newConfig);
 
-    dispatch(storeUpdateConfig(newConfig))
+    dispatch(storeUpdateConfig(newConfig));
 
-    return newConfig
-  }
+    return newConfig;
+  };
 
   const refreshConfig = async () => {
-    const newConfig = await QQManager.getOB11Config()
+    const newConfig = await QQManager.getOB11Config();
 
     if (JSON.stringify(newConfig) === JSON.stringify(config)) {
-      return config
+      return config;
     }
 
-    dispatch(storeUpdateConfig(newConfig))
+    dispatch(storeUpdateConfig(newConfig));
 
-    return newConfig
-  }
+    return newConfig;
+  };
 
   const mergeConfig = async (newConfig: OneBotConfig) => {
-    const mergedConfig = deepClone(config)
+    const mergedConfig = deepClone(config);
 
-    Object.assign(mergedConfig, newConfig)
+    Object.assign(mergedConfig, newConfig);
 
-    await QQManager.setOB11Config(mergedConfig)
+    await QQManager.setOB11Config(mergedConfig);
 
-    dispatch(storeUpdateConfig(mergedConfig))
+    dispatch(storeUpdateConfig(mergedConfig));
 
-    return mergedConfig
-  }
+    return mergedConfig;
+  };
 
   const saveConfigWithoutNetwork = async (newConfig: OneBotConfig) => {
-    newConfig.network = config.network
-    await QQManager.setOB11Config(newConfig)
-    dispatch(storeUpdateConfig(newConfig))
-    return newConfig
-  }
+    newConfig.network = config.network;
+    await QQManager.setOB11Config(newConfig);
+    dispatch(storeUpdateConfig(newConfig));
+    return newConfig;
+  };
 
   return {
     config,
@@ -182,8 +182,8 @@ const useConfig = () => {
     enableNetworkConfig,
     enableDebugNetworkConfig,
     mergeConfig,
-    saveConfigWithoutNetwork
-  }
-}
+    saveConfigWithoutNetwork,
+  };
+};
 
-export default useConfig
+export default useConfig;
diff --git a/napcat.webui/src/hooks/use-dialog.ts b/napcat.webui/src/hooks/use-dialog.ts
index 1d6904f8..5cec51ca 100644
--- a/napcat.webui/src/hooks/use-dialog.ts
+++ b/napcat.webui/src/hooks/use-dialog.ts
@@ -1,11 +1,11 @@
-import React from 'react'
+import React from 'react';
 
-import { DialogContext } from '@/contexts/dialog'
+import { DialogContext } from '@/contexts/dialog';
 
 const useDialog = () => {
-  const dialog = React.useContext(DialogContext)
+  const dialog = React.useContext(DialogContext);
 
-  return dialog
-}
+  return dialog;
+};
 
-export default useDialog
+export default useDialog;
diff --git a/napcat.webui/src/hooks/use-music.ts b/napcat.webui/src/hooks/use-music.ts
index 6aec64ad..7c9f6f4e 100644
--- a/napcat.webui/src/hooks/use-music.ts
+++ b/napcat.webui/src/hooks/use-music.ts
@@ -1,11 +1,11 @@
-import React from 'react'
+import React from 'react';
 
-import { AudioContext } from '@/contexts/songs'
+import { AudioContext } from '@/contexts/songs';
 
 const useMusic = () => {
-  const music = React.useContext(AudioContext)
+  const music = React.useContext(AudioContext);
 
-  return music
-}
+  return music;
+};
 
-export default useMusic
+export default useMusic;
diff --git a/napcat.webui/src/hooks/use-store.ts b/napcat.webui/src/hooks/use-store.ts
index 81492540..be90aef6 100644
--- a/napcat.webui/src/hooks/use-store.ts
+++ b/napcat.webui/src/hooks/use-store.ts
@@ -1,6 +1,6 @@
-import { useDispatch, useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux';
 
-import type { AppDispatch, RootState } from '@/store'
+import type { AppDispatch, RootState } from '@/store';
 
-export const useAppDispatch = useDispatch.withTypes<AppDispatch>()
-export const useAppSelector = useSelector.withTypes<RootState>()
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
+export const useAppSelector = useSelector.withTypes<RootState>();
diff --git a/napcat.webui/src/hooks/use-theme.ts b/napcat.webui/src/hooks/use-theme.ts
index b5c78b8a..bea97636 100644
--- a/napcat.webui/src/hooks/use-theme.ts
+++ b/napcat.webui/src/hooks/use-theme.ts
@@ -1,42 +1,42 @@
 // originally written by @imoaazahmed
-import { useLocalStorage } from '@uidotdev/usehooks'
-import { useEffect, useMemo } from 'react'
+import { useLocalStorage } from '@uidotdev/usehooks';
+import { useEffect, useMemo } from 'react';
 
 const ThemeProps = {
   key: 'theme',
   light: 'light',
-  dark: 'dark'
-} as const
+  dark: 'dark',
+} as const;
 
-type Theme = typeof ThemeProps.light | typeof ThemeProps.dark
+type Theme = typeof ThemeProps.light | typeof ThemeProps.dark;
 
 export const useTheme = (defaultTheme?: Theme) => {
-  const [theme, setTheme] = useLocalStorage<Theme>(ThemeProps.key, defaultTheme)
+  const [theme, setTheme] = useLocalStorage<Theme>(ThemeProps.key, defaultTheme);
 
   const isDark = useMemo(() => {
-    return theme === ThemeProps.dark
-  }, [theme])
+    return theme === ThemeProps.dark;
+  }, [theme]);
 
   const isLight = useMemo(() => {
-    return theme === ThemeProps.light
-  }, [theme])
+    return theme === ThemeProps.light;
+  }, [theme]);
 
   const _setTheme = (theme: Theme) => {
-    setTheme(theme)
-    document.documentElement.classList.remove(ThemeProps.light, ThemeProps.dark)
-    document.documentElement.classList.add(theme)
-  }
+    setTheme(theme);
+    document.documentElement.classList.remove(ThemeProps.light, ThemeProps.dark);
+    document.documentElement.classList.add(theme);
+  };
 
-  const setLightTheme = () => _setTheme(ThemeProps.light)
+  const setLightTheme = () => _setTheme(ThemeProps.light);
 
-  const setDarkTheme = () => _setTheme(ThemeProps.dark)
+  const setDarkTheme = () => _setTheme(ThemeProps.dark);
 
   const toggleTheme = () =>
-    theme === ThemeProps.dark ? setLightTheme() : setDarkTheme()
+    theme === ThemeProps.dark ? setLightTheme() : setDarkTheme();
 
   useEffect(() => {
-    _setTheme(theme)
-  })
+    _setTheme(theme);
+  });
 
-  return { theme, isDark, isLight, setLightTheme, setDarkTheme, toggleTheme }
-}
+  return { theme, isDark, isLight, setLightTheme, setDarkTheme, toggleTheme };
+};
diff --git a/napcat.webui/src/hooks/use-websocket-debug.ts b/napcat.webui/src/hooks/use-websocket-debug.ts
index 386e8b99..9572380b 100644
--- a/napcat.webui/src/hooks/use-websocket-debug.ts
+++ b/napcat.webui/src/hooks/use-websocket-debug.ts
@@ -1,59 +1,59 @@
-import type { Selection } from '@react-types/shared'
-import { useReactive } from 'ahooks'
-import { useCallback, useState } from 'react'
-import toast from 'react-hot-toast'
-import useWebSocket from 'react-use-websocket'
-import { ReadyState } from 'react-use-websocket'
+import type { Selection } from '@react-types/shared';
+import { useReactive } from 'ahooks';
+import { useCallback, useState } from 'react';
+import toast from 'react-hot-toast';
+import useWebSocket, { ReadyState } from 'react-use-websocket';
 
-import { renderFilterMessageType } from '@/components/onebot/filter_message_type'
+import { renderFilterMessageType } from '@/components/onebot/filter_message_type';
 
-import { isOB11Event, isOB11RequestResponse } from '@/utils/onebot'
+import { isOB11Event, isOB11RequestResponse } from '@/utils/onebot';
 
-import type { AllOB11WsResponse } from '@/types/onebot'
+import type { AllOB11WsResponse } from '@/types/onebot';
 
-export { ReadyState } from 'react-use-websocket'
-export function useWebSocketDebug(url: string, token: string) {
-  const messageHistory = useReactive<AllOB11WsResponse[]>([])
-  const [filterTypes, setFilterTypes] = useState<Selection>('all')
+export { ReadyState } from 'react-use-websocket';
+export function useWebSocketDebug (url: string, token: string) {
+  const messageHistory = useReactive<AllOB11WsResponse[]>([]);
+  const [filterTypes, setFilterTypes] = useState<Selection>('all');
 
   const filteredMessages = messageHistory.filter((msg) => {
-    if (filterTypes === 'all' || filterTypes.size === 0) return true
-    if (isOB11Event(msg)) return filterTypes.has(msg.post_type)
-    if (isOB11RequestResponse(msg)) return filterTypes.has('request')
-  })
+    if (filterTypes === 'all' || filterTypes.size === 0) return true;
+    if (isOB11Event(msg)) return filterTypes.has(msg.post_type);
+    if (isOB11RequestResponse(msg)) return filterTypes.has('request');
+    return false;
+  });
 
   const { sendMessage, readyState } = useWebSocket(url, {
     onMessage: useCallback((event: WebSocketEventMap['message']) => {
       try {
-        const data = JSON.parse(event.data)
-        messageHistory.unshift(data)
+        const data = JSON.parse(event.data);
+        messageHistory.unshift(data);
       } catch (error) {
-        toast.error('WebSocket 消息解析失败')
+        toast.error('WebSocket 消息解析失败');
       }
     }, []),
     queryParams: {
-      access_token: token
+      access_token: token,
     },
     onError: (event) => {
-      toast.error('WebSocket 连接失败')
-      console.error('WebSocket error:', event)
+      toast.error('WebSocket 连接失败');
+      console.error('WebSocket error:', event);
     },
     onOpen: () => {
-      messageHistory.splice(0, messageHistory.length)
-    }
-  })
+      messageHistory.splice(0, messageHistory.length);
+    },
+  });
 
   const _sendMessage = (msg: string) => {
     if (readyState !== ReadyState.OPEN) {
-      throw new Error('WebSocket 连接未建立')
+      throw new Error('WebSocket 连接未建立');
     }
-    sendMessage(msg)
-  }
+    sendMessage(msg);
+  };
 
   const FilterMessagesType = renderFilterMessageType(
     filterTypes,
     setFilterTypes
-  )
+  );
 
   return {
     sendMessage: _sendMessage,
@@ -62,6 +62,6 @@ export function useWebSocketDebug(url: string, token: string) {
     filteredMessages,
     filterTypes,
     setFilterTypes,
-    FilterMessagesType
-  }
+    FilterMessagesType,
+  };
 }
diff --git a/napcat.webui/src/hooks/use_custom_quill.ts b/napcat.webui/src/hooks/use_custom_quill.ts
index 2dc381d0..daf2acec 100644
--- a/napcat.webui/src/hooks/use_custom_quill.ts
+++ b/napcat.webui/src/hooks/use_custom_quill.ts
@@ -1,6 +1,6 @@
-import Quill from 'quill'
-import 'quill/dist/quill.core.css'
-import { useEffect, useRef, useState } from 'react'
+import Quill from 'quill';
+import 'quill/dist/quill.core.css';
+import { useEffect, useRef, useState } from 'react';
 
 interface UseCustomQuillProps {
   modules: Record<string, unknown>
@@ -11,21 +11,21 @@ interface UseCustomQuillProps {
 export const useCustomQuill = ({
   modules,
   formats,
-  placeholder
+  placeholder,
 }: UseCustomQuillProps) => {
-  const quillRef = useRef<HTMLDivElement | null>(null)
-  const [quill, setQuill] = useState<Quill | null>(null)
+  const quillRef = useRef<HTMLDivElement | null>(null);
+  const [quill, setQuill] = useState<Quill | null>(null);
 
   useEffect(() => {
     if (quillRef.current) {
       const quillInstance = new Quill(quillRef.current, {
         modules,
         formats,
-        placeholder
-      })
-      setQuill(quillInstance)
+        placeholder,
+      });
+      setQuill(quillInstance);
     }
-  }, [])
+  }, []);
 
-  return { quillRef, quill, Quill }
-}
+  return { quillRef, quill, Quill };
+};
diff --git a/napcat.webui/src/layouts/default.tsx b/napcat.webui/src/layouts/default.tsx
index 9d95fc45..eb722e4e 100644
--- a/napcat.webui/src/layouts/default.tsx
+++ b/napcat.webui/src/layouts/default.tsx
@@ -1,88 +1,88 @@
-import { BreadcrumbItem, Breadcrumbs } from '@heroui/breadcrumbs'
-import { Button } from '@heroui/button'
-import { useLocalStorage } from '@uidotdev/usehooks'
-import clsx from 'clsx'
-import { AnimatePresence, motion } from 'motion/react'
-import { useEffect, useMemo, useRef } from 'react'
-import { ErrorBoundary } from 'react-error-boundary'
-import { MdMenu, MdMenuOpen } from 'react-icons/md'
-import { useLocation, useNavigate } from 'react-router-dom'
+import { BreadcrumbItem, Breadcrumbs } from '@heroui/breadcrumbs';
+import { Button } from '@heroui/button';
+import { useLocalStorage } from '@uidotdev/usehooks';
+import clsx from 'clsx';
+import { AnimatePresence, motion } from 'motion/react';
+import { useEffect, useMemo, useRef } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { MdMenu, MdMenuOpen } from 'react-icons/md';
+import { useLocation, useNavigate } from 'react-router-dom';
 
-import key from '@/const/key'
+import key from '@/const/key';
 
-import errorFallbackRender from '@/components/error_fallback'
+import errorFallbackRender from '@/components/error_fallback';
 // import PageLoading from "@/components/Loading/PageLoading";
-import SideBar from '@/components/sidebar'
+import SideBar from '@/components/sidebar';
 
-import useAuth from '@/hooks/auth'
+import useAuth from '@/hooks/auth';
 
-import type { MenuItem } from '@/config/site'
-import { siteConfig } from '@/config/site'
-import QQManager from '@/controllers/qq_manager'
+import type { MenuItem } from '@/config/site';
+import { siteConfig } from '@/config/site';
+import QQManager from '@/controllers/qq_manager';
 
-const menus: MenuItem[] = siteConfig.navItems
+const menus: MenuItem[] = siteConfig.navItems;
 
 const findTitle = (menus: MenuItem[], pathname: string): string[] => {
-  const paths: string[] = []
+  const paths: string[] = [];
 
   if (pathname) {
     for (const item of menus) {
       if (item.href === pathname) {
-        paths.push(item.label)
+        paths.push(item.label);
       } else if (item.items) {
-        const title = findTitle(item.items, pathname)
+        const title = findTitle(item.items, pathname);
 
         if (title.length > 0) {
-          paths.push(item.label)
-          paths.push(...title)
+          paths.push(item.label);
+          paths.push(...title);
         }
       }
     }
   }
 
-  return paths
-}
+  return paths;
+};
 const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const location = useLocation()
-  const contentRef = useRef<HTMLDivElement>(null)
-  const [openSideBar, setOpenSideBar] = useLocalStorage(key.sideBarOpen, true)
-  const [b64img] = useLocalStorage(key.backgroundImage, '')
-  const navigate = useNavigate()
-  const { isAuth } = useAuth()
+  const location = useLocation();
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [openSideBar, setOpenSideBar] = useLocalStorage(key.sideBarOpen, true);
+  const [b64img] = useLocalStorage(key.backgroundImage, '');
+  const navigate = useNavigate();
+  const { isAuth } = useAuth();
   const checkIsQQLogin = async () => {
     try {
-      const result = await QQManager.checkQQLoginStatus()
+      const result = await QQManager.checkQQLoginStatus();
       if (!result.isLogin) {
         if (isAuth) {
-          navigate('/qq_login', { replace: true })
+          navigate('/qq_login', { replace: true });
         } else {
-          navigate('/web_login', { replace: true })
+          navigate('/web_login', { replace: true });
         }
       }
     } catch (error) {
-      navigate('/web_login', { replace: true })
+      navigate('/web_login', { replace: true });
     }
-  }
+  };
   useEffect(() => {
     contentRef?.current?.scrollTo?.({
       top: 0,
-      behavior: 'smooth'
-    })
-  }, [location.pathname])
+      behavior: 'smooth',
+    });
+  }, [location.pathname]);
   useEffect(() => {
     if (isAuth) {
-      checkIsQQLogin()
+      checkIsQQLogin();
     }
-  }, [isAuth])
+  }, [isAuth]);
   const title = useMemo(() => {
-    return findTitle(menus, location.pathname)
-  }, [location.pathname])
+    return findTitle(menus, location.pathname);
+  }, [location.pathname]);
   return (
     <div
-      className="h-screen relative flex bg-primary-50 dark:bg-black items-stretch"
+      className='h-screen relative flex bg-primary-50 dark:bg-black items-stretch'
       style={{
         backgroundImage: `url(${b64img})`,
-        backgroundSize: 'cover'
+        backgroundSize: 'cover',
       }}
     >
       <SideBar items={menus} open={openSideBar} />
@@ -117,17 +117,17 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
           >
             <Button
               isIconOnly
-              radius="full"
-              variant="light"
+              radius='full'
+              variant='light'
               onPress={() => setOpenSideBar(!openSideBar)}
             >
               {openSideBar ? <MdMenuOpen size={24} /> : <MdMenu size={24} />}
             </Button>
           </motion.div>
-          <Breadcrumbs isDisabled size="lg">
+          <Breadcrumbs isDisabled size='lg'>
             {title?.map((item, index) => (
               <BreadcrumbItem key={index}>
-                <AnimatePresence mode="wait">
+                <AnimatePresence mode='wait'>
                   <motion.div
                     key={item}
                     initial={{ opacity: 0, y: -10 }}
@@ -147,7 +147,7 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
         </ErrorBoundary>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default Layout
+export default Layout;
diff --git a/napcat.webui/src/layouts/pure.tsx b/napcat.webui/src/layouts/pure.tsx
index 8f01c9ca..c8672c89 100644
--- a/napcat.webui/src/layouts/pure.tsx
+++ b/napcat.webui/src/layouts/pure.tsx
@@ -1,25 +1,25 @@
-import { Link } from '@heroui/link'
-import { Tooltip } from '@heroui/tooltip'
+import { Link } from '@heroui/link';
+import { Tooltip } from '@heroui/tooltip';
 
-import { GithubIcon } from '@/components/icons'
+import { GithubIcon } from '@/components/icons';
 
-export default function PureLayout({
-  children
+export default function PureLayout ({
+  children,
 }: {
   children: React.ReactNode
 }) {
   return (
-    <div className="relative flex flex-col h-screen">
-      <div className="absolute right-0 top-0 p-2">
-        <Tooltip content="查看WebUI源码" placement="left" showArrow>
-          <Link isExternal href="https://github.com/bietiaop/NextNapCatWebUI">
-            <GithubIcon className="text-default-900 hover:text-default-600 w-10 h-10 hover:drop-shadow-lg transition-all" />
+    <div className='relative flex flex-col h-screen'>
+      <div className='absolute right-0 top-0 p-2'>
+        <Tooltip content='查看WebUI源码' placement='left' showArrow>
+          <Link isExternal href='https://github.com/bietiaop/NextNapCatWebUI'>
+            <GithubIcon className='text-default-900 hover:text-default-600 w-10 h-10 hover:drop-shadow-lg transition-all' />
           </Link>
         </Tooltip>
       </div>
-      <main className="flex-grow w-full flex flex-col justify-center items-center">
+      <main className='flex-grow w-full flex flex-col justify-center items-center'>
         {children}
       </main>
     </div>
-  )
+  );
 }
diff --git a/napcat.webui/src/main.tsx b/napcat.webui/src/main.tsx
index 0b9c4f9c..4af74990 100644
--- a/napcat.webui/src/main.tsx
+++ b/napcat.webui/src/main.tsx
@@ -1,36 +1,36 @@
-import ReactDOM from 'react-dom/client'
-import 'react-photo-view/dist/react-photo-view.css'
-import { BrowserRouter } from 'react-router-dom'
+import ReactDOM from 'react-dom/client';
+import 'react-photo-view/dist/react-photo-view.css';
+import { BrowserRouter } from 'react-router-dom';
 
-import App from '@/App.tsx'
-import { Provider } from '@/provider.tsx'
-import '@/styles/globals.css'
+import App from '@/App.tsx';
+import { Provider } from '@/provider.tsx';
+import '@/styles/globals.css';
 
-import key from './const/key'
-import WebUIManager from './controllers/webui_manager'
-import { loadTheme } from './utils/theme'
+import key from './const/key';
+import WebUIManager from './controllers/webui_manager';
+import { loadTheme } from './utils/theme';
 
-WebUIManager.checkWebUiLogined()
+WebUIManager.checkWebUiLogined();
 
-const token = localStorage.getItem(key.token)
-const theme = localStorage.getItem(key.theme)
+const token = localStorage.getItem(key.token);
+const theme = localStorage.getItem(key.theme);
 
 // 兼容 useLocalStorage
 if (token && !token.startsWith('"')) {
-  localStorage.setItem(key.token, JSON.stringify(token))
+  localStorage.setItem(key.token, JSON.stringify(token));
 }
 if (theme && !theme.startsWith('"')) {
-  localStorage.setItem(key.theme, JSON.stringify(theme))
+  localStorage.setItem(key.theme, JSON.stringify(theme));
 }
 
-loadTheme()
+loadTheme();
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   // <React.StrictMode>
-  <BrowserRouter basename="/webui/">
+  <BrowserRouter basename='/webui/'>
     <Provider>
       <App />
     </Provider>
   </BrowserRouter>
   // </React.StrictMode>
-)
+);
diff --git a/napcat.webui/src/monaco.ts b/napcat.webui/src/monaco.ts
index 331adcdb..6532409f 100644
--- a/napcat.webui/src/monaco.ts
+++ b/napcat.webui/src/monaco.ts
@@ -1,28 +1,33 @@
-import * as monaco from 'monaco-editor'
-import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
-import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
-import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
-import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
-import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
+import * as monaco from 'monaco-editor';
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
+import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
+import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
+import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
 
 self.MonacoEnvironment = {
-  getWorker(_: unknown, label: string) {
+  getWorker (_: unknown, label: string) {
     if (label === 'json') {
-      return new jsonWorker()
+      // eslint-disable-next-line new-cap
+      return new jsonWorker();
     }
     if (label === 'css' || label === 'scss' || label === 'less') {
-      return new cssWorker()
+      // eslint-disable-next-line new-cap
+      return new cssWorker();
     }
     if (label === 'html' || label === 'handlebars' || label === 'razor') {
-      return new htmlWorker()
+      // eslint-disable-next-line new-cap
+      return new htmlWorker();
     }
     if (label === 'typescript' || label === 'javascript') {
-      return new tsWorker()
+      // eslint-disable-next-line new-cap
+      return new tsWorker();
     }
-    return new editorWorker()
-  }
-}
+    // eslint-disable-next-line new-cap
+    return new editorWorker();
+  },
+};
 
-monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true)
+monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true);
 
-export default monaco
+export default monaco;
diff --git a/napcat.webui/src/pages/dashboard/about.tsx b/napcat.webui/src/pages/dashboard/about.tsx
index 82657843..c4569185 100644
--- a/napcat.webui/src/pages/dashboard/about.tsx
+++ b/napcat.webui/src/pages/dashboard/about.tsx
@@ -1,116 +1,120 @@
-import { Card, CardBody } from '@heroui/card'
-import { Image } from '@heroui/image'
-import { Link } from '@heroui/link'
-import { Skeleton } from '@heroui/skeleton'
-import { Spinner } from '@heroui/spinner'
-import { useRequest } from 'ahooks'
-import { useMemo } from 'react'
-import { BsTelegram, BsTencentQq } from 'react-icons/bs'
-import { IoDocument } from 'react-icons/io5'
+import { Card, CardBody } from '@heroui/card';
+import { Image } from '@heroui/image';
+import { Link } from '@heroui/link';
+import { Skeleton } from '@heroui/skeleton';
+import { Spinner } from '@heroui/spinner';
+import { useRequest } from 'ahooks';
+import { useMemo } from 'react';
+import { BsTelegram, BsTencentQq } from 'react-icons/bs';
+import { IoDocument } from 'react-icons/io5';
 
-import HoverTiltedCard from '@/components/hover_titled_card'
-import NapCatRepoInfo from '@/components/napcat_repo_info'
-import RotatingText from '@/components/rotating_text'
+import HoverTiltedCard from '@/components/hover_titled_card';
+import NapCatRepoInfo from '@/components/napcat_repo_info';
+import RotatingText from '@/components/rotating_text';
 
-import { usePreloadImages } from '@/hooks/use-preload-images'
-import { useTheme } from '@/hooks/use-theme'
+import { usePreloadImages } from '@/hooks/use-preload-images';
+import { useTheme } from '@/hooks/use-theme';
 
-import logo from '@/assets/images/logo.png'
-import WebUIManager from '@/controllers/webui_manager'
+import logo from '@/assets/images/logo.png';
+import WebUIManager from '@/controllers/webui_manager';
 
-function VersionInfo() {
-  const { data, loading, error } = useRequest(WebUIManager.getPackageInfo)
+function VersionInfo () {
+  const { data, loading, error } = useRequest(WebUIManager.getPackageInfo);
   return (
-    <div className="flex items-center gap-2 text-2xl font-bold">
-      <div className="flex items-center gap-2">
-        <div className="text-primary-500 drop-shadow-md">NapCat</div>
-        {error ? (
-          error.message
-        ) : loading ? (
-          <Spinner size="sm" />
-        ) : (
-          <RotatingText
-            texts={['WebUI', data?.version ?? '']}
-            mainClassName="overflow-hidden flex items-center bg-primary-500 px-2 rounded-lg text-default-50 shadow-md"
-            staggerFrom={'last'}
-            initial={{ y: '100%' }}
-            animate={{ y: 0 }}
-            exit={{ y: '-120%' }}
-            staggerDuration={0.025}
-            splitLevelClassName="overflow-hidden"
-            transition={{ type: 'spring', damping: 30, stiffness: 400 }}
-            rotationInterval={2000}
-          />
-        )}
+    <div className='flex items-center gap-2 text-2xl font-bold'>
+      <div className='flex items-center gap-2'>
+        <div className='text-primary-500 drop-shadow-md'>NapCat</div>
+        {error
+          ? (
+            error.message
+          )
+          : loading
+            ? (
+              <Spinner size='sm' />
+            )
+            : (
+              <RotatingText
+                texts={['WebUI', data?.version ?? '']}
+                mainClassName='overflow-hidden flex items-center bg-primary-500 px-2 rounded-lg text-default-50 shadow-md'
+                staggerFrom='last'
+                initial={{ y: '100%' }}
+                animate={{ y: 0 }}
+                exit={{ y: '-120%' }}
+                staggerDuration={0.025}
+                splitLevelClassName='overflow-hidden'
+                transition={{ type: 'spring', damping: 30, stiffness: 400 }}
+                rotationInterval={2000}
+              />
+            )}
       </div>
     </div>
-  )
+  );
 }
 
-export default function AboutPage() {
-  const { isDark } = useTheme()
+export default function AboutPage () {
+  const { isDark } = useTheme();
 
   const imageUrls = useMemo(
     () => [
       'https://next.ossinsight.io/widgets/official/compose-recent-active-contributors/thumbnail.png?repo_id=777721566&limit=30&image_size=auto&color_scheme=light',
       'https://next.ossinsight.io/widgets/official/compose-recent-active-contributors/thumbnail.png?repo_id=777721566&limit=30&image_size=auto&color_scheme=dark',
       'https://next.ossinsight.io/widgets/official/compose-activity-trends/thumbnail.png?repo_id=41986369&image_size=auto&color_scheme=light',
-      'https://next.ossinsight.io/widgets/official/compose-activity-trends/thumbnail.png?repo_id=41986369&image_size=auto&color_scheme=dark'
+      'https://next.ossinsight.io/widgets/official/compose-activity-trends/thumbnail.png?repo_id=41986369&image_size=auto&color_scheme=dark',
     ],
     []
-  )
+  );
 
-  const { loadedUrls, isLoading } = usePreloadImages(imageUrls)
+  const { loadedUrls, isLoading } = usePreloadImages(imageUrls);
 
   const getImageUrl = useMemo(
     () => (baseUrl: string) => {
-      const theme = isDark ? 'dark' : 'light'
+      const theme = isDark ? 'dark' : 'light';
       const fullUrl = baseUrl.replace(
         /color_scheme=(?:light|dark)/,
         `color_scheme=${theme}`
-      )
-      return isLoading ? null : loadedUrls[fullUrl] ? fullUrl : null
+      );
+      return isLoading ? null : loadedUrls[fullUrl] ? fullUrl : null;
     },
     [isDark, isLoading, loadedUrls]
-  )
+  );
 
   const renderImage = useMemo(
     () => (baseUrl: string, alt: string) => {
-      const imageUrl = getImageUrl(baseUrl)
+      const imageUrl = getImageUrl(baseUrl);
 
       if (!imageUrl) {
-        return <Skeleton className="h-16 rounded-lg" />
+        return <Skeleton className='h-16 rounded-lg' />;
       }
 
       return (
         <Image
-          className="flex-1 pointer-events-none select-none rounded-none"
+          className='flex-1 pointer-events-none select-none rounded-none'
           src={imageUrl}
           alt={alt}
         />
-      )
+      );
     },
     [getImageUrl]
-  )
+  );
 
   return (
     <>
       <title>关于 NapCat WebUI</title>
-      <section className="max-w-7xl py-8 md:py-10 px-5 mx-auto space-y-10">
-        <div className="w-full flex flex-col md:flex-row gap-4">
-          <div className="flex flex-col md:flex-row items-center">
-            <HoverTiltedCard imageSrc={logo} overlayContent="" />
+      <section className='max-w-7xl py-8 md:py-10 px-5 mx-auto space-y-10'>
+        <div className='w-full flex flex-col md:flex-row gap-4'>
+          <div className='flex flex-col md:flex-row items-center'>
+            <HoverTiltedCard imageSrc={logo} overlayContent='' />
           </div>
-          <div className="flex-1 flex flex-col gap-2 py-2">
+          <div className='flex-1 flex flex-col gap-2 py-2'>
             <VersionInfo />
-            <div className="space-y-1">
-              <p className="font-bold text-primary-400">NapCat 是什么?</p>
-              <p className="text-default-800">
+            <div className='space-y-1'>
+              <p className='font-bold text-primary-400'>NapCat 是什么?</p>
+              <p className='text-default-800'>
                 基于TypeScript构建的Bot框架,通过相应的启动器或者框架,主动调用QQ
                 Node模块提供给客户端的接口,实现Bot的功能.
               </p>
-              <p className="font-bold text-primary-400">魔法版介绍</p>
-              <p className="text-default-800">
+              <p className='font-bold text-primary-400'>魔法版介绍</p>
+              <p className='text-default-800'>
                 猫猫框架通过魔法的手段获得了 QQ 的发送消息、接收消息等接口。
                 为了方便使用，猫猫框架将通过一种名为 OneBot 的约定将你的 HTTP /
                 WebSocket 请求按照规范读取，
@@ -119,16 +123,16 @@ export default function AboutPage() {
             </div>
           </div>
         </div>
-        <div className="flex flex-row gap-2 flex-wrap justify-around">
+        <div className='flex flex-row gap-2 flex-wrap justify-around'>
           <Card
             as={Link}
-            shadow="sm"
+            shadow='sm'
             isPressable
             isExternal
-            href="https://qm.qq.com/q/F9cgs1N3Mc"
+            href='https://qm.qq.com/q/F9cgs1N3Mc'
           >
-            <CardBody className="flex-row items-center gap-2">
-              <span className="p-2 rounded-small bg-primary-50 text-primary-500">
+            <CardBody className='flex-row items-center gap-2'>
+              <span className='p-2 rounded-small bg-primary-50 text-primary-500'>
                 <BsTencentQq size={16} />
               </span>
               <span>官方社群1</span>
@@ -137,13 +141,13 @@ export default function AboutPage() {
 
           <Card
             as={Link}
-            shadow="sm"
+            shadow='sm'
             isPressable
             isExternal
-            href="https://qm.qq.com/q/hSt0u9PVn"
+            href='https://qm.qq.com/q/hSt0u9PVn'
           >
-            <CardBody className="flex-row items-center gap-2">
-              <span className="p-2 rounded-small bg-primary-50 text-primary-500">
+            <CardBody className='flex-row items-center gap-2'>
+              <span className='p-2 rounded-small bg-primary-50 text-primary-500'>
                 <BsTencentQq size={16} />
               </span>
               <span>官方社群2</span>
@@ -152,13 +156,13 @@ export default function AboutPage() {
 
           <Card
             as={Link}
-            shadow="sm"
+            shadow='sm'
             isPressable
             isExternal
-            href="https://t.me/napcatqq"
+            href='https://t.me/napcatqq'
           >
-            <CardBody className="flex-row items-center gap-2">
-              <span className="p-2 rounded-small bg-primary-50 text-primary-500">
+            <CardBody className='flex-row items-center gap-2'>
+              <span className='p-2 rounded-small bg-primary-50 text-primary-500'>
                 <BsTelegram size={16} />
               </span>
               <span>Telegram</span>
@@ -167,21 +171,21 @@ export default function AboutPage() {
 
           <Card
             as={Link}
-            shadow="sm"
+            shadow='sm'
             isPressable
             isExternal
-            href="https://napcat.napneko.icu/"
+            href='https://napcat.napneko.icu/'
           >
-            <CardBody className="flex-row items-center gap-2">
-              <span className="p-2 rounded-small bg-primary-50 text-primary-500">
+            <CardBody className='flex-row items-center gap-2'>
+              <span className='p-2 rounded-small bg-primary-50 text-primary-500'>
                 <IoDocument size={16} />
               </span>
               <span>使用文档</span>
             </CardBody>
           </Card>
         </div>
-        <div className="flex flex-col md:flex-row md:items-start gap-4">
-          <div className="w-full flex flex-col gap-4">
+        <div className='flex flex-col md:flex-row md:items-start gap-4'>
+          <div className='w-full flex flex-col gap-4'>
             {renderImage(
               'https://next.ossinsight.io/widgets/official/compose-recent-active-contributors/thumbnail.png?repo_id=777721566&limit=30&image_size=auto&color_scheme=light',
               'Contributors'
@@ -196,5 +200,5 @@ export default function AboutPage() {
         </div>
       </section>
     </>
-  )
+  );
 }
diff --git a/napcat.webui/src/pages/dashboard/config/change_password.tsx b/napcat.webui/src/pages/dashboard/config/change_password.tsx
index d67ed01f..df6d2704 100644
--- a/napcat.webui/src/pages/dashboard/config/change_password.tsx
+++ b/napcat.webui/src/pages/dashboard/config/change_password.tsx
@@ -1,14 +1,14 @@
-import { Input } from '@heroui/input'
-import { useLocalStorage } from '@uidotdev/usehooks'
-import { Controller, useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
-import { useNavigate } from 'react-router-dom'
+import { Input } from '@heroui/input';
+import { useLocalStorage } from '@uidotdev/usehooks';
+import { Controller, useForm } from 'react-hook-form';
+import toast from 'react-hot-toast';
+import { useNavigate } from 'react-router-dom';
 
-import key from '@/const/key'
+import key from '@/const/key';
 
-import SaveButtons from '@/components/button/save_buttons'
+import SaveButtons from '@/components/button/save_buttons';
 
-import WebUIManager from '@/controllers/webui_manager'
+import WebUIManager from '@/controllers/webui_manager';
 
 const ChangePasswordCard = () => {
   const {
@@ -16,37 +16,37 @@ const ChangePasswordCard = () => {
     handleSubmit: handleWebuiSubmit,
     formState: { isSubmitting, errors },
     reset,
-    watch
+    watch,
   } = useForm<{
     oldToken: string
     newToken: string
   }>({
     defaultValues: {
       oldToken: '',
-      newToken: ''
-    }
-  })
+      newToken: '',
+    },
+  });
 
-  const navigate = useNavigate()
-  const [_, setToken] = useLocalStorage(key.token, '')
+  const navigate = useNavigate();
+  const [, setToken] = useLocalStorage(key.token, '');
 
   // 监听旧密码的值
-  const oldTokenValue = watch('oldToken')
+  const oldTokenValue = watch('oldToken');
 
   const onSubmit = handleWebuiSubmit(async (data) => {
     try {
       // 使用正常密码更新流程
-      await WebUIManager.changePassword(data.oldToken, data.newToken)
+      await WebUIManager.changePassword(data.oldToken, data.newToken);
 
-      toast.success('修改成功')
-      setToken('')
-      localStorage.removeItem(key.token)
-      navigate('/web_login')
+      toast.success('修改成功');
+      setToken('');
+      localStorage.removeItem(key.token);
+      navigate('/web_login');
     } catch (error) {
-      const msg = (error as Error).message
-      toast.error(`修改失败: ${msg}`)
+      const msg = (error as Error).message;
+      toast.error(`修改失败: ${msg}`);
     }
-  })
+  });
 
   return (
     <>
@@ -54,22 +54,22 @@ const ChangePasswordCard = () => {
 
       <Controller
         control={control}
-        name="oldToken"
+        name='oldToken'
         rules={{
           required: '旧密码不能为空',
           validate: (value) => {
             if (!value || value.trim().length === 0) {
-              return '旧密码不能为空'
+              return '旧密码不能为空';
             }
-            return true
-          }
+            return true;
+          },
         }}
         render={({ field }) => (
           <Input
             {...field}
-            label="旧密码"
-            placeholder="请输入旧密码"
-            type="password"
+            label='旧密码'
+            placeholder='请输入旧密码'
+            type='password'
             isRequired
             isInvalid={!!errors.oldToken}
             errorMessage={errors.oldToken?.message}
@@ -79,40 +79,40 @@ const ChangePasswordCard = () => {
 
       <Controller
         control={control}
-        name="newToken"
+        name='newToken'
         rules={{
           required: '新密码不能为空',
           minLength: {
             value: 6,
-            message: '新密码至少需要6个字符'
+            message: '新密码至少需要6个字符',
           },
           validate: (value) => {
             if (!value || value.trim().length === 0) {
-              return '新密码不能为空'
+              return '新密码不能为空';
             }
             if (value.trim().length !== value.length) {
-              return '新密码不能包含前后空格'
+              return '新密码不能包含前后空格';
             }
             if (value === oldTokenValue) {
-              return '新密码不能与旧密码相同'
+              return '新密码不能与旧密码相同';
             }
             // 检查是否包含字母
             if (!/[a-zA-Z]/.test(value)) {
-              return '新密码必须包含字母'
+              return '新密码必须包含字母';
             }
             // 检查是否包含数字
             if (!/[0-9]/.test(value)) {
-              return '新密码必须包含数字'
+              return '新密码必须包含数字';
             }
-            return true
-          }
+            return true;
+          },
         }}
         render={({ field }) => (
           <Input
             {...field}
-            label="新密码"
-            placeholder="至少6位，包含字母和数字"
-            type="password"
+            label='新密码'
+            placeholder='至少6位，包含字母和数字'
+            type='password'
             isRequired
             isInvalid={!!errors.newToken}
             errorMessage={errors.newToken?.message}
@@ -126,7 +126,7 @@ const ChangePasswordCard = () => {
         isSubmitting={isSubmitting}
       />
     </>
-  )
-}
+  );
+};
 
-export default ChangePasswordCard
+export default ChangePasswordCard;
diff --git a/napcat.webui/src/pages/dashboard/config/index.tsx b/napcat.webui/src/pages/dashboard/config/index.tsx
index 05b078e4..f7bed85a 100644
--- a/napcat.webui/src/pages/dashboard/config/index.tsx
+++ b/napcat.webui/src/pages/dashboard/config/index.tsx
@@ -1,15 +1,15 @@
-import { Card, CardBody } from '@heroui/card'
-import { Tab, Tabs } from '@heroui/tabs'
-import clsx from 'clsx'
-import { useMediaQuery } from 'react-responsive'
-import { useNavigate, useSearchParams } from 'react-router-dom'
+import { Card, CardBody } from '@heroui/card';
+import { Tab, Tabs } from '@heroui/tabs';
+import clsx from 'clsx';
+import { useMediaQuery } from 'react-responsive';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 
-import ChangePasswordCard from './change_password'
-import LoginConfigCard from './login'
-import OneBotConfigCard from './onebot'
-import ServerConfigCard from './server'
-import ThemeConfigCard from './theme'
-import WebUIConfigCard from './webui'
+import ChangePasswordCard from './change_password';
+import LoginConfigCard from './login';
+import OneBotConfigCard from './onebot';
+import ServerConfigCard from './server';
+import ThemeConfigCard from './theme';
+import WebUIConfigCard from './webui';
 
 export interface ConfigPageProps {
   children?: React.ReactNode
@@ -18,83 +18,83 @@ export interface ConfigPageProps {
 
 const ConfingPageItem: React.FC<ConfigPageProps> = ({
   children,
-  size = 'md'
+  size = 'md',
 }) => {
   return (
-    <Card className="bg-opacity-50 backdrop-blur-sm">
-      <CardBody className="items-center py-5">
+    <Card className='bg-opacity-50 backdrop-blur-sm'>
+      <CardBody className='items-center py-5'>
         <div
           className={clsx('max-w-full flex flex-col gap-2', {
             'w-72': size === 'sm',
             'w-96': size === 'md',
-            'w-[32rem]': size === 'lg'
+            'w-[32rem]': size === 'lg',
           })}
         >
           {children}
         </div>
       </CardBody>
     </Card>
-  )
-}
+  );
+};
 
-export default function ConfigPage() {
-  const isMediumUp = useMediaQuery({ minWidth: 768 })
-  const navigate = useNavigate()
+export default function ConfigPage () {
+  const isMediumUp = useMediaQuery({ minWidth: 768 });
+  const navigate = useNavigate();
   const search = useSearchParams({
-    tab: 'onebot'
-  })[0]
-  const tab = search.get('tab') ?? 'onebot'
+    tab: 'onebot',
+  })[0];
+  const tab = search.get('tab') ?? 'onebot';
 
   return (
-    <section className="w-[1000px] max-w-full md:mx-auto gap-4 py-8 px-2 md:py-10">
+    <section className='w-[1000px] max-w-full md:mx-auto gap-4 py-8 px-2 md:py-10'>
       <Tabs
-        aria-label="config tab"
+        aria-label='config tab'
         fullWidth
-        className="w-full"
+        className='w-full'
         isVertical={isMediumUp}
         selectedKey={tab}
         onSelectionChange={(key) => {
-          navigate(`/config?tab=${key}`)
+          navigate(`/config?tab=${key}`);
         }}
         classNames={{
           tabList: 'sticky flex top-14 bg-opacity-50 backdrop-blur-sm',
           panel: 'w-full relative',
           base: 'md:!w-auto flex-grow-0 flex-shrink-0 mr-0',
-          cursor: 'bg-opacity-60 backdrop-blur-sm'
+          cursor: 'bg-opacity-60 backdrop-blur-sm',
         }}
       >
-        <Tab title="OneBot配置" key="onebot">
+        <Tab title='OneBot配置' key='onebot'>
           <ConfingPageItem>
             <OneBotConfigCard />
           </ConfingPageItem>
         </Tab>
-        <Tab title="服务器配置" key="server">
+        <Tab title='服务器配置' key='server'>
           <ConfingPageItem>
             <ServerConfigCard />
           </ConfingPageItem>
         </Tab>
-        <Tab title="WebUI配置" key="webui">
+        <Tab title='WebUI配置' key='webui'>
           <ConfingPageItem>
             <WebUIConfigCard />
           </ConfingPageItem>
         </Tab>
-        <Tab title="登录配置" key="login">
+        <Tab title='登录配置' key='login'>
           <ConfingPageItem>
             <LoginConfigCard />
           </ConfingPageItem>
         </Tab>
-        <Tab title="修改密码" key="token">
+        <Tab title='修改密码' key='token'>
           <ConfingPageItem>
             <ChangePasswordCard />
           </ConfingPageItem>
         </Tab>
 
-        <Tab title="主题配置" key="theme">
-          <ConfingPageItem size="lg">
+        <Tab title='主题配置' key='theme'>
+          <ConfingPageItem size='lg'>
             <ThemeConfigCard />
           </ConfingPageItem>
         </Tab>
       </Tabs>
     </section>
-  )
+  );
 }
diff --git a/napcat.webui/src/pages/dashboard/config/login.tsx b/napcat.webui/src/pages/dashboard/config/login.tsx
index 0dc8e4a0..7c61466b 100644
--- a/napcat.webui/src/pages/dashboard/config/login.tsx
+++ b/napcat.webui/src/pages/dashboard/config/login.tsx
@@ -1,76 +1,76 @@
-import { Input } from '@heroui/input'
-import { useRequest } from 'ahooks'
-import { useEffect } from 'react'
-import { Controller, useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { Input } from '@heroui/input';
+import { useRequest } from 'ahooks';
+import { useEffect } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import toast from 'react-hot-toast';
 
-import SaveButtons from '@/components/button/save_buttons'
-import PageLoading from '@/components/page_loading'
+import SaveButtons from '@/components/button/save_buttons';
+import PageLoading from '@/components/page_loading';
 
-import QQManager from '@/controllers/qq_manager'
+import QQManager from '@/controllers/qq_manager';
 
 const LoginConfigCard = () => {
   const {
     data: quickLoginData,
     loading: quickLoginLoading,
     error: quickLoginError,
-    refreshAsync: refreshQuickLogin
-  } = useRequest(QQManager.getQuickLoginQQ)
+    refreshAsync: refreshQuickLogin,
+  } = useRequest(QQManager.getQuickLoginQQ);
   const {
     control,
     handleSubmit: handleOnebotSubmit,
     formState: { isSubmitting },
-    setValue: setOnebotValue
+    setValue: setOnebotValue,
   } = useForm<{
     quickLoginQQ: string
   }>({
     defaultValues: {
-      quickLoginQQ: ''
-    }
-  })
+      quickLoginQQ: '',
+    },
+  });
 
   const reset = () => {
-    setOnebotValue('quickLoginQQ', quickLoginData ?? '')
-  }
+    setOnebotValue('quickLoginQQ', quickLoginData ?? '');
+  };
 
   const onSubmit = handleOnebotSubmit(async (data) => {
     try {
-      await QQManager.setQuickLoginQQ(data.quickLoginQQ)
-      toast.success('保存成功')
+      await QQManager.setQuickLoginQQ(data.quickLoginQQ);
+      toast.success('保存成功');
     } catch (error) {
-      const msg = (error as Error).message
-      toast.error(`保存失败: ${msg}`)
+      const msg = (error as Error).message;
+      toast.error(`保存失败: ${msg}`);
     }
-  })
+  });
 
   const onRefresh = async () => {
     try {
-      await refreshQuickLogin()
-      toast.success('刷新成功')
+      await refreshQuickLogin();
+      toast.success('刷新成功');
     } catch (error) {
-      const msg = (error as Error).message
-      toast.error(`刷新失败: ${msg}`)
+      const msg = (error as Error).message;
+      toast.error(`刷新失败: ${msg}`);
     }
-  }
+  };
 
   useEffect(() => {
-    reset()
-  }, [quickLoginData])
+    reset();
+  }, [quickLoginData]);
 
-  if (quickLoginLoading) return <PageLoading loading={true} />
+  if (quickLoginLoading) return <PageLoading loading />;
 
   return (
     <>
       <title>OneBot配置 - NapCat WebUI</title>
-      <div className="flex-shrink-0 w-full">快速登录QQ</div>
+      <div className='flex-shrink-0 w-full'>快速登录QQ</div>
       <Controller
         control={control}
-        name="quickLoginQQ"
+        name='quickLoginQQ'
         render={({ field }) => (
           <Input
             {...field}
-            label="快速登录QQ"
-            placeholder="请输入QQ号"
+            label='快速登录QQ'
+            placeholder='请输入QQ号'
             isDisabled={!!quickLoginError}
             errorMessage={quickLoginError ? '获取快速登录QQ失败' : undefined}
           />
@@ -83,7 +83,7 @@ const LoginConfigCard = () => {
         refresh={onRefresh}
       />
     </>
-  )
-}
+  );
+};
 
-export default LoginConfigCard
+export default LoginConfigCard;
diff --git a/napcat.webui/src/pages/dashboard/config/onebot.tsx b/napcat.webui/src/pages/dashboard/config/onebot.tsx
index 8311b617..f6423fc2 100644
--- a/napcat.webui/src/pages/dashboard/config/onebot.tsx
+++ b/napcat.webui/src/pages/dashboard/config/onebot.tsx
@@ -1,101 +1,101 @@
-import { Input } from '@heroui/input'
-import { useEffect, useState } from 'react'
-import { Controller, useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { Input } from '@heroui/input';
+import { useEffect, useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import toast from 'react-hot-toast';
 
-import SaveButtons from '@/components/button/save_buttons'
-import PageLoading from '@/components/page_loading'
-import SwitchCard from '@/components/switch_card'
+import SaveButtons from '@/components/button/save_buttons';
+import PageLoading from '@/components/page_loading';
+import SwitchCard from '@/components/switch_card';
 
-import useConfig from '@/hooks/use-config'
+import useConfig from '@/hooks/use-config';
 
 const OneBotConfigCard = () => {
-  const { config, saveConfigWithoutNetwork, refreshConfig } = useConfig()
-  const [loading, setLoading] = useState(false)
+  const { config, saveConfigWithoutNetwork, refreshConfig } = useConfig();
+  const [loading, setLoading] = useState(false);
   const {
     control,
     handleSubmit: handleOnebotSubmit,
     formState: { isSubmitting },
-    setValue: setOnebotValue
+    setValue: setOnebotValue,
   } = useForm<IConfig['onebot']>({
     defaultValues: {
       musicSignUrl: '',
       enableLocalFile2Url: false,
-      parseMultMsg: false
-    }
-  })
+      parseMultMsg: false,
+    },
+  });
   const reset = () => {
-    setOnebotValue('musicSignUrl', config.musicSignUrl)
-    setOnebotValue('enableLocalFile2Url', config.enableLocalFile2Url)
-    setOnebotValue('parseMultMsg', config.parseMultMsg)
-  }
+    setOnebotValue('musicSignUrl', config.musicSignUrl);
+    setOnebotValue('enableLocalFile2Url', config.enableLocalFile2Url);
+    setOnebotValue('parseMultMsg', config.parseMultMsg);
+  };
 
   const onSubmit = handleOnebotSubmit(async (data) => {
     try {
-      await saveConfigWithoutNetwork(data)
-      toast.success('保存成功')
+      await saveConfigWithoutNetwork(data);
+      toast.success('保存成功');
     } catch (error) {
-      const msg = (error as Error).message
-      toast.error(`保存失败: ${msg}`)
+      const msg = (error as Error).message;
+      toast.error(`保存失败: ${msg}`);
     }
-  })
+  });
 
   const onRefresh = async (shotTip = true) => {
     try {
-      setLoading(true)
-      await refreshConfig()
-      if (shotTip) toast.success('刷新成功')
+      setLoading(true);
+      await refreshConfig();
+      if (shotTip) toast.success('刷新成功');
     } catch (error) {
-      const msg = (error as Error).message
-      toast.error(`刷新失败: ${msg}`)
+      const msg = (error as Error).message;
+      toast.error(`刷新失败: ${msg}`);
     } finally {
-      setLoading(false)
+      setLoading(false);
     }
-  }
+  };
 
   useEffect(() => {
-    reset()
-  }, [config])
+    reset();
+  }, [config]);
 
   useEffect(() => {
-    onRefresh(false)
-  }, [])
+    onRefresh(false);
+  }, []);
 
-  if (loading) return <PageLoading loading={true} />
+  if (loading) return <PageLoading loading />;
 
   return (
     <>
       <title>OneBot配置 - NapCat WebUI</title>
       <Controller
         control={control}
-        name="musicSignUrl"
+        name='musicSignUrl'
         render={({ field }) => (
           <Input
             {...field}
-            label="音乐签名地址"
-            placeholder="请输入音乐签名地址"
+            label='音乐签名地址'
+            placeholder='请输入音乐签名地址'
           />
         )}
       />
       <Controller
         control={control}
-        name="enableLocalFile2Url"
+        name='enableLocalFile2Url'
         render={({ field }) => (
           <SwitchCard
             {...field}
-            description="启用本地文件到URL"
-            label="启用本地文件到URL"
+            description='启用本地文件到URL'
+            label='启用本地文件到URL'
           />
         )}
       />
       <Controller
         control={control}
-        name="parseMultMsg"
+        name='parseMultMsg'
         render={({ field }) => (
           <SwitchCard
             {...field}
-            description="启用上报解析合并消息"
-            label="启用上报解析合并消息"
+            description='启用上报解析合并消息'
+            label='启用上报解析合并消息'
           />
         )}
       />
@@ -106,7 +106,7 @@ const OneBotConfigCard = () => {
         refresh={onRefresh}
       />
     </>
-  )
-}
+  );
+};
 
-export default OneBotConfigCard
+export default OneBotConfigCard;
diff --git a/napcat.webui/src/pages/dashboard/config/server.tsx b/napcat.webui/src/pages/dashboard/config/server.tsx
index d8a858db..bbe2bef5 100644
--- a/napcat.webui/src/pages/dashboard/config/server.tsx
+++ b/napcat.webui/src/pages/dashboard/config/server.tsx
@@ -1,28 +1,28 @@
-import { Input } from '@heroui/input'
-import { Switch } from '@heroui/switch'
-import { useRequest } from 'ahooks'
-import { useEffect } from 'react'
-import { Controller, useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { Input } from '@heroui/input';
+import { Switch } from '@heroui/switch';
+import { useRequest } from 'ahooks';
+import { useEffect } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import toast from 'react-hot-toast';
 
-import SaveButtons from '@/components/button/save_buttons'
-import PageLoading from '@/components/page_loading'
+import SaveButtons from '@/components/button/save_buttons';
+import PageLoading from '@/components/page_loading';
 
-import WebUIManager from '@/controllers/webui_manager'
+import WebUIManager from '@/controllers/webui_manager';
 
 const ServerConfigCard = () => {
   const {
     data: configData,
     loading: configLoading,
     error: configError,
-    refreshAsync: refreshConfig
-  } = useRequest(WebUIManager.getWebUIConfig)
+    refreshAsync: refreshConfig,
+  } = useRequest(WebUIManager.getWebUIConfig);
 
   const {
     control,
     handleSubmit: handleConfigSubmit,
     formState: { isSubmitting },
-    setValue: setConfigValue
+    setValue: setConfigValue,
   } = useForm<{
     host: string
     port: number
@@ -35,61 +35,61 @@ const ServerConfigCard = () => {
       port: 6099,
       loginRate: 10,
       disableWebUI: false,
-      disableNonLANAccess: false
-    }
-  })
+      disableNonLANAccess: false,
+    },
+  });
 
   const reset = () => {
     if (configData) {
-      setConfigValue('host', configData.host)
-      setConfigValue('port', configData.port)
-      setConfigValue('loginRate', configData.loginRate)
-      setConfigValue('disableWebUI', configData.disableWebUI)
-      setConfigValue('disableNonLANAccess', configData.disableNonLANAccess)
+      setConfigValue('host', configData.host);
+      setConfigValue('port', configData.port);
+      setConfigValue('loginRate', configData.loginRate);
+      setConfigValue('disableWebUI', configData.disableWebUI);
+      setConfigValue('disableNonLANAccess', configData.disableNonLANAccess);
     }
-  }
+  };
 
   const onSubmit = handleConfigSubmit(async (data) => {
     try {
-      await WebUIManager.updateWebUIConfig(data)
-      toast.success('保存成功')
+      await WebUIManager.updateWebUIConfig(data);
+      toast.success('保存成功');
     } catch (error) {
-      const msg = (error as Error).message
-      toast.error(`保存失败: ${msg}`)
+      const msg = (error as Error).message;
+      toast.error(`保存失败: ${msg}`);
     }
-  })
+  });
 
   const onRefresh = async () => {
     try {
-      await refreshConfig()
-      toast.success('刷新成功')
+      await refreshConfig();
+      toast.success('刷新成功');
     } catch (error) {
-      const msg = (error as Error).message
-      toast.error(`刷新失败: ${msg}`)
+      const msg = (error as Error).message;
+      toast.error(`刷新失败: ${msg}`);
     }
-  }
+  };
 
   useEffect(() => {
-    reset()
-  }, [configData])
+    reset();
+  }, [configData]);
 
-  if (configLoading) return <PageLoading loading={true} />
+  if (configLoading) return <PageLoading loading />;
 
   return (
     <>
       <title>服务器配置 - NapCat WebUI</title>
-      <div className="flex flex-col gap-4">
-        <div className="flex flex-col gap-2">
-          <div className="flex-shrink-0 w-full">服务器配置</div>
+      <div className='flex flex-col gap-4'>
+        <div className='flex flex-col gap-2'>
+          <div className='flex-shrink-0 w-full'>服务器配置</div>
           <Controller
             control={control}
-            name="host"
+            name='host'
             render={({ field }) => (
               <Input
                 {...field}
-                label="监听地址"
-                placeholder="请输入监听地址"
-                description="服务器监听的IP地址，0.0.0.0表示监听所有网卡"
+                label='监听地址'
+                placeholder='请输入监听地址'
+                description='服务器监听的IP地址，0.0.0.0表示监听所有网卡'
                 isDisabled={!!configError}
                 errorMessage={configError ? '获取配置失败' : undefined}
               />
@@ -97,15 +97,15 @@ const ServerConfigCard = () => {
           />
           <Controller
             control={control}
-            name="port"
+            name='port'
             render={({ field }) => (
               <Input
                 {...field}
-                type="number"
+                type='number'
                 value={field.value?.toString() || ''}
-                label="监听端口"
-                placeholder="请输入监听端口"
-                description="服务器监听的端口号，范围1-65535"
+                label='监听端口'
+                placeholder='请输入监听端口'
+                description='服务器监听的端口号，范围1-65535'
                 isDisabled={!!configError}
                 errorMessage={configError ? '获取配置失败' : undefined}
                 onChange={(e) => field.onChange(parseInt(e.target.value) || 0)}
@@ -114,15 +114,15 @@ const ServerConfigCard = () => {
           />
           <Controller
             control={control}
-            name="loginRate"
+            name='loginRate'
             render={({ field }) => (
               <Input
                 {...field}
-                type="number"
+                type='number'
                 value={field.value?.toString() || ''}
-                label="登录速率限制"
-                placeholder="请输入登录速率限制"
-                description="每小时允许的登录尝试次数"
+                label='登录速率限制'
+                placeholder='请输入登录速率限制'
+                description='每小时允许的登录尝试次数'
                 isDisabled={!!configError}
                 errorMessage={configError ? '获取配置失败' : undefined}
                 onChange={(e) => field.onChange(parseInt(e.target.value) || 0)}
@@ -131,20 +131,20 @@ const ServerConfigCard = () => {
           />
         </div>
 
-        <div className="flex flex-col gap-2">
-          <div className="flex-shrink-0 w-full">安全配置</div>
+        <div className='flex flex-col gap-2'>
+          <div className='flex-shrink-0 w-full'>安全配置</div>
           <Controller
             control={control}
-            name="disableWebUI"
+            name='disableWebUI'
             render={({ field }) => (
               <Switch
                 isSelected={field.value}
-                onValueChange={field.onChange}
+                onValueChange={(value) => field.onChange(value)}
                 isDisabled={!!configError}
               >
-                <div className="flex flex-col">
+                <div className='flex flex-col'>
                   <span>禁用WebUI</span>
-                  <span className="text-sm text-default-400">
+                  <span className='text-sm text-default-400'>
                     启用后将完全禁用WebUI服务，需要重启生效
                   </span>
                 </div>
@@ -153,16 +153,16 @@ const ServerConfigCard = () => {
           />
           <Controller
             control={control}
-            name="disableNonLANAccess"
+            name='disableNonLANAccess'
             render={({ field }) => (
               <Switch
                 isSelected={field.value}
-                onValueChange={field.onChange}
+                onValueChange={(value) => field.onChange(value)}
                 isDisabled={!!configError}
               >
-                <div className="flex flex-col">
+                <div className='flex flex-col'>
                   <span>禁用非局域网访问</span>
-                  <span className="text-sm text-default-400">
+                  <span className='text-sm text-default-400'>
                     启用后只允许局域网内的设备访问WebUI，提高安全性
                   </span>
                 </div>
@@ -179,7 +179,7 @@ const ServerConfigCard = () => {
         refresh={onRefresh}
       />
     </>
-  )
-}
+  );
+};
 
-export default ServerConfigCard
+export default ServerConfigCard;
diff --git a/napcat.webui/src/pages/dashboard/config/theme.tsx b/napcat.webui/src/pages/dashboard/config/theme.tsx
index ed171024..bb2bf80f 100644
--- a/napcat.webui/src/pages/dashboard/config/theme.tsx
+++ b/napcat.webui/src/pages/dashboard/config/theme.tsx
@@ -1,29 +1,29 @@
-import { Accordion, AccordionItem } from '@heroui/accordion'
-import { Card, CardBody, CardHeader } from '@heroui/card'
-import { useRequest } from 'ahooks'
-import clsx from 'clsx'
-import { useEffect, useRef } from 'react'
-import { Controller, useForm, useWatch } from 'react-hook-form'
-import toast from 'react-hot-toast'
-import { FaUserAstronaut } from 'react-icons/fa'
-import { FaPaintbrush } from 'react-icons/fa6'
-import { IoIosColorPalette } from 'react-icons/io'
-import { MdDarkMode, MdLightMode } from 'react-icons/md'
+import { Accordion, AccordionItem } from '@heroui/accordion';
+import { Card, CardBody, CardHeader } from '@heroui/card';
+import { useRequest } from 'ahooks';
+import clsx from 'clsx';
+import { useEffect, useRef } from 'react';
+import { Controller, useForm, useWatch } from 'react-hook-form';
+import toast from 'react-hot-toast';
+import { FaUserAstronaut } from 'react-icons/fa';
+import { FaPaintbrush } from 'react-icons/fa6';
+import { IoIosColorPalette } from 'react-icons/io';
+import { MdDarkMode, MdLightMode } from 'react-icons/md';
 
-import themes from '@/const/themes'
+import themes from '@/const/themes';
 
-import ColorPicker from '@/components/ColorPicker'
-import SaveButtons from '@/components/button/save_buttons'
-import PageLoading from '@/components/page_loading'
+import ColorPicker from '@/components/ColorPicker';
+import SaveButtons from '@/components/button/save_buttons';
+import PageLoading from '@/components/page_loading';
 
-import { colorKeys, generateTheme, loadTheme } from '@/utils/theme'
+import { colorKeys, generateTheme, loadTheme } from '@/utils/theme';
 
-import WebUIManager from '@/controllers/webui_manager'
+import WebUIManager from '@/controllers/webui_manager';
 
 export type PreviewThemeCardProps = {
   theme: ThemeInfo
   onPreview: () => void
-}
+};
 
 const values = [
   '',
@@ -36,51 +36,51 @@ const values = [
   '-600',
   '-700',
   '-800',
-  '-900'
-]
+  '-900',
+];
 const colors = [
   'primary',
   'secondary',
   'success',
   'danger',
   'warning',
-  'default'
-]
+  'default',
+];
 
-function PreviewThemeCard({ theme, onPreview }: PreviewThemeCardProps) {
-  const style = document.createElement('style')
-  style.innerHTML = generateTheme(theme.theme, theme.name)
-  const cardRef = useRef<HTMLDivElement>(null)
+function PreviewThemeCard ({ theme, onPreview }: PreviewThemeCardProps) {
+  const style = document.createElement('style');
+  style.innerHTML = generateTheme(theme.theme, theme.name);
+  const cardRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
-    document.head.appendChild(style)
+    document.head.appendChild(style);
     return () => {
-      document.head.removeChild(style)
-    }
-  }, [])
+      document.head.removeChild(style);
+    };
+  }, []);
   return (
     <Card
       ref={cardRef}
-      shadow="sm"
-      radius="sm"
+      shadow='sm'
+      radius='sm'
       isPressable
       onPress={onPreview}
       className={clsx('text-primary bg-primary-50', theme.name)}
     >
-      <CardHeader className="pb-0 flex flex-col items-start gap-1">
-        <div className="px-1 rounded-md bg-primary text-primary-foreground">
+      <CardHeader className='pb-0 flex flex-col items-start gap-1'>
+        <div className='px-1 rounded-md bg-primary text-primary-foreground'>
           {theme.name}
         </div>
-        <div className="text-xs flex items-center gap-1 text-primary-300">
+        <div className='text-xs flex items-center gap-1 text-primary-300'>
           <FaUserAstronaut />
           {theme.author ?? '未知'}
         </div>
-        <div className="text-xs text-primary-200">{theme.description}</div>
+        <div className='text-xs text-primary-200'>{theme.description}</div>
       </CardHeader>
       <CardBody>
-        <div className="flex flex-col gap-1">
+        <div className='flex flex-col gap-1'>
           {colors.map((color) => (
-            <div className="flex gap-1 items-center flex-wrap" key={color}>
-              <div className="text-xs w-4 text-right">
+            <div className='flex gap-1 items-center flex-wrap' key={color}>
+              <div className='text-xs w-4 text-right'>
                 {color[0].toUpperCase()}
               </div>
               {values.map((value) => (
@@ -90,95 +90,96 @@ function PreviewThemeCard({ theme, onPreview }: PreviewThemeCardProps) {
                     'w-2 h-2 rounded-full shadow-small',
                     `bg-${color}${value}`
                   )}
-                ></div>
+                />
               ))}
             </div>
           ))}
         </div>
       </CardBody>
     </Card>
-  )
+  );
 }
 
 const ThemeConfigCard = () => {
   const { data, loading, error, refreshAsync } = useRequest(
     WebUIManager.getThemeConfig
-  )
+  );
   const {
     control,
     handleSubmit: handleOnebotSubmit,
     formState: { isSubmitting },
-    setValue: setOnebotValue
+    setValue: setOnebotValue,
   } = useForm<{
     theme: ThemeConfig
   }>({
     defaultValues: {
       theme: {
         dark: {},
-        light: {}
-      }
-    }
-  })
+        light: {},
+      },
+    },
+  });
 
   // 使用 useRef 存储 style 标签引用
-  const styleTagRef = useRef<HTMLStyleElement | null>(null)
+  const styleTagRef = useRef<HTMLStyleElement | null>(null);
 
   // 在组件挂载时创建 style 标签，并在卸载时清理
   useEffect(() => {
-    const styleTag = document.createElement('style')
-    document.head.appendChild(styleTag)
-    styleTagRef.current = styleTag
+    const styleTag = document.createElement('style');
+    document.head.appendChild(styleTag);
+    styleTagRef.current = styleTag;
     return () => {
       if (styleTagRef.current) {
-        document.head.removeChild(styleTagRef.current)
+        document.head.removeChild(styleTagRef.current);
       }
-    }
-  }, [])
+    };
+  }, []);
 
-  const theme = useWatch({ control, name: 'theme' })
+  const theme = useWatch({ control, name: 'theme' });
 
   const reset = () => {
-    if (data) setOnebotValue('theme', data)
-  }
+    if (data) setOnebotValue('theme', data);
+  };
 
   const onSubmit = handleOnebotSubmit(async (data) => {
     try {
-      await WebUIManager.setThemeConfig(data.theme)
-      toast.success('保存成功')
-      loadTheme()
+      await WebUIManager.setThemeConfig(data.theme);
+      toast.success('保存成功');
+      loadTheme();
     } catch (error) {
-      const msg = (error as Error).message
-      toast.error(`保存失败: ${msg}`)
+      const msg = (error as Error).message;
+      toast.error(`保存失败: ${msg}`);
     }
-  })
+  });
 
   const onRefresh = async () => {
     try {
-      await refreshAsync()
-      toast.success('刷新成功')
+      await refreshAsync();
+      toast.success('刷新成功');
     } catch (error) {
-      const msg = (error as Error).message
-      toast.error(`刷新失败: ${msg}`)
+      const msg = (error as Error).message;
+      toast.error(`刷新失败: ${msg}`);
     }
-  }
+  };
 
   useEffect(() => {
-    reset()
-  }, [data])
+    reset();
+  }, [data]);
 
   useEffect(() => {
     if (theme && styleTagRef.current) {
-      const css = generateTheme(theme)
-      styleTagRef.current.innerHTML = css
+      const css = generateTheme(theme);
+      styleTagRef.current.innerHTML = css;
     }
-  }, [theme])
+  }, [theme]);
 
-  if (loading) return <PageLoading loading={true} />
+  if (loading) return <PageLoading loading />;
 
-  if (error)
+  if (error) {
     return (
-      <div className="py-24 text-danger-500 text-center">{error.message}</div>
-    )
+      <div className='py-24 text-danger-500 text-center'>{error.message}</div>
+    );
+  }
 
   return (
     <>
@@ -189,25 +190,25 @@ const ThemeConfigCard = () => {
         reset={reset}
         isSubmitting={isSubmitting}
         refresh={onRefresh}
-        className="items-end w-full p-4"
+        className='items-end w-full p-4'
       />
-      <div className="px-4 text-sm text-default-600">实时预览，记得保存！</div>
-      <Accordion variant="splitted" defaultExpandedKeys={['select']}>
+      <div className='px-4 text-sm text-default-600'>实时预览，记得保存！</div>
+      <Accordion variant='splitted' defaultExpandedKeys={['select']}>
         <AccordionItem
-          key="select"
-          aria-label="Pick Color"
-          title="选择主题"
-          subtitle="可以切换夜间/白昼模式查看对应颜色"
-          className="shadow-small"
+          key='select'
+          aria-label='Pick Color'
+          title='选择主题'
+          subtitle='可以切换夜间/白昼模式查看对应颜色'
+          className='shadow-small'
           startContent={<IoIosColorPalette />}
         >
-          <div className="flex flex-wrap gap-2">
+          <div className='flex flex-wrap gap-2'>
             {themes.map((theme) => (
               <PreviewThemeCard
                 key={theme.name}
                 theme={theme}
                 onPreview={() => {
-                  setOnebotValue('theme', theme.theme)
+                  setOnebotValue('theme', theme.theme);
                 }}
               />
             ))}
@@ -215,13 +216,13 @@ const ThemeConfigCard = () => {
         </AccordionItem>
 
         <AccordionItem
-          key="pick"
-          aria-label="Pick Color"
-          title="自定义配色"
-          className="shadow-small"
+          key='pick'
+          aria-label='Pick Color'
+          title='自定义配色'
+          className='shadow-small'
           startContent={<FaPaintbrush />}
         >
-          <div className="space-y-2">
+          <div className='space-y-2'>
             {(['dark', 'light'] as const).map((mode) => (
               <div
                 key={mode}
@@ -233,36 +234,38 @@ const ThemeConfigCard = () => {
                     : 'bg-content1 dark:bg-content1-foreground'
                 )}
               >
-                <h3 className="text-center p-2 rounded-md bg-content2 mb-2 text-default-800 flex items-center justify-center">
-                  {mode === 'dark' ? (
-                    <MdDarkMode size={24} />
-                  ) : (
-                    <MdLightMode size={24} />
-                  )}
+                <h3 className='text-center p-2 rounded-md bg-content2 mb-2 text-default-800 flex items-center justify-center'>
+                  {mode === 'dark'
+                    ? (
+                      <MdDarkMode size={24} />
+                    )
+                    : (
+                      <MdLightMode size={24} />
+                    )}
                   {mode === 'dark' ? '夜间模式主题' : '白昼模式主题'}
                 </h3>
                 {colorKeys.map((key) => (
                   <div
                     key={key}
-                    className="grid grid-cols-2 items-center mb-2 gap-2"
+                    className='grid grid-cols-2 items-center mb-2 gap-2'
                   >
-                    <label className="text-right">{key}</label>
+                    <label className='text-right'>{key}</label>
                     <Controller
                       control={control}
                       name={`theme.${mode}.${key}`}
                       render={({ field: { value, onChange } }) => {
-                        const hslArray = value?.split(' ') ?? [0, 0, 0]
-                        const color = `hsl(${hslArray[0]}, ${hslArray[1]}, ${hslArray[2]})`
+                        const hslArray = value?.split(' ') ?? [0, 0, 0];
+                        const color = `hsl(${hslArray[0]}, ${hslArray[1]}, ${hslArray[2]})`;
                         return (
                           <ColorPicker
                             color={color}
                             onChange={(result) => {
                               onChange(
                                 `${result.hsl.h} ${result.hsl.s * 100}% ${result.hsl.l * 100}%`
-                              )
+                              );
                             }}
                           />
-                        )
+                        );
                       }}
                     />
                   </div>
@@ -273,7 +276,7 @@ const ThemeConfigCard = () => {
         </AccordionItem>
       </Accordion>
     </>
-  )
-}
+  );
+};
 
-export default ThemeConfigCard
+export default ThemeConfigCard;
diff --git a/napcat.webui/src/pages/dashboard/config/webui.tsx b/napcat.webui/src/pages/dashboard/config/webui.tsx
index 9557580f..81d47da8 100644
--- a/napcat.webui/src/pages/dashboard/config/webui.tsx
+++ b/napcat.webui/src/pages/dashboard/config/webui.tsx
@@ -1,120 +1,120 @@
-import { Input } from '@heroui/input'
-import { useLocalStorage } from '@uidotdev/usehooks'
-import { useEffect } from 'react'
-import { Controller, useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { Input } from '@heroui/input';
+import { useLocalStorage } from '@uidotdev/usehooks';
+import { useEffect } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import toast from 'react-hot-toast';
 
-import key from '@/const/key'
+import key from '@/const/key';
 
-import SaveButtons from '@/components/button/save_buttons'
-import FileInput from '@/components/input/file_input'
-import ImageInput from '@/components/input/image_input'
+import SaveButtons from '@/components/button/save_buttons';
+import FileInput from '@/components/input/file_input';
+import ImageInput from '@/components/input/image_input';
 
-import useMusic from '@/hooks/use-music'
+import useMusic from '@/hooks/use-music';
 
-import { siteConfig } from '@/config/site'
-import FileManager from '@/controllers/file_manager'
+import { siteConfig } from '@/config/site';
+import FileManager from '@/controllers/file_manager';
 
 const WebUIConfigCard = () => {
   const {
     control,
     handleSubmit: handleWebuiSubmit,
     formState: { isSubmitting },
-    setValue: setWebuiValue
+    setValue: setWebuiValue,
   } = useForm<IConfig['webui']>({
     defaultValues: {
       background: '',
       musicListID: '',
-      customIcons: {}
-    }
-  })
+      customIcons: {},
+    },
+  });
 
-  const [b64img, setB64img] = useLocalStorage(key.backgroundImage, '')
+  const [b64img, setB64img] = useLocalStorage(key.backgroundImage, '');
   const [customIcons, setCustomIcons] = useLocalStorage<Record<string, string>>(
     key.customIcons,
     {}
-  )
-  const { setListId, listId } = useMusic()
+  );
+  const { setListId, listId } = useMusic();
 
   const reset = () => {
-    setWebuiValue('musicListID', listId)
-    setWebuiValue('customIcons', customIcons)
-    setWebuiValue('background', b64img)
-  }
+    setWebuiValue('musicListID', listId);
+    setWebuiValue('customIcons', customIcons);
+    setWebuiValue('background', b64img);
+  };
 
   const onSubmit = handleWebuiSubmit((data) => {
     try {
-      setListId(data.musicListID)
-      setCustomIcons(data.customIcons)
-      setB64img(data.background)
-      toast.success('保存成功')
+      setListId(data.musicListID);
+      setCustomIcons(data.customIcons);
+      setB64img(data.background);
+      toast.success('保存成功');
     } catch (error) {
-      const msg = (error as Error).message
-      toast.error(`保存失败: ${msg}`)
+      const msg = (error as Error).message;
+      toast.error(`保存失败: ${msg}`);
     }
-  })
+  });
 
   useEffect(() => {
-    reset()
-  }, [listId, customIcons, b64img])
+    reset();
+  }, [listId, customIcons, b64img]);
 
   return (
     <>
       <title>WebUI配置 - NapCat WebUI</title>
-      <div className="flex flex-col gap-2">
-        <div className="flex-shrink-0 w-full">WebUI字体</div>
-        <div className="text-sm text-default-400">
+      <div className='flex flex-col gap-2'>
+        <div className='flex-shrink-0 w-full'>WebUI字体</div>
+        <div className='text-sm text-default-400'>
           此项不需要手动保存，上传成功后需清空网页缓存并刷新
           <FileInput
-            label="中文字体"
+            label='中文字体'
             onChange={async (file) => {
               try {
-                await FileManager.uploadWebUIFont(file)
-                toast.success('上传成功')
+                await FileManager.uploadWebUIFont(file);
+                toast.success('上传成功');
                 setTimeout(() => {
-                  window.location.reload()
-                }, 1000)
+                  window.location.reload();
+                }, 1000);
               } catch (error) {
-                toast.error('上传失败: ' + (error as Error).message)
+                toast.error('上传失败: ' + (error as Error).message);
               }
             }}
             onDelete={async () => {
               try {
-                await FileManager.deleteWebUIFont()
-                toast.success('删除成功')
+                await FileManager.deleteWebUIFont();
+                toast.success('删除成功');
                 setTimeout(() => {
-                  window.location.reload()
-                }, 1000)
+                  window.location.reload();
+                }, 1000);
               } catch (error) {
-                toast.error('删除失败: ' + (error as Error).message)
+                toast.error('删除失败: ' + (error as Error).message);
               }
             }}
           />
         </div>
       </div>
-      <div className="flex flex-col gap-2">
-        <div className="flex-shrink-0 w-full">WebUI音乐播放器</div>
+      <div className='flex flex-col gap-2'>
+        <div className='flex-shrink-0 w-full'>WebUI音乐播放器</div>
         <Controller
           control={control}
-          name="musicListID"
+          name='musicListID'
           render={({ field }) => (
             <Input
               {...field}
-              label="网易云音乐歌单ID（网页内音乐播放器）"
-              placeholder="请输入歌单ID"
+              label='网易云音乐歌单ID（网页内音乐播放器）'
+              placeholder='请输入歌单ID'
             />
           )}
         />
       </div>
-      <div className="flex flex-col gap-2">
-        <div className="flex-shrink-0 w-full">背景图</div>
+      <div className='flex flex-col gap-2'>
+        <div className='flex-shrink-0 w-full'>背景图</div>
         <Controller
           control={control}
-          name="background"
+          name='background'
           render={({ field }) => <ImageInput {...field} />}
         />
       </div>
-      <div className="flex flex-col gap-2">
+      <div className='flex flex-col gap-2'>
         <div>自定义图标</div>
         {siteConfig.navItems.map((item) => (
           <Controller
@@ -131,7 +131,7 @@ const WebUIConfigCard = () => {
         isSubmitting={isSubmitting}
       />
     </>
-  )
-}
+  );
+};
 
-export default WebUIConfigCard
+export default WebUIConfigCard;
diff --git a/napcat.webui/src/pages/dashboard/debug/http/index.tsx b/napcat.webui/src/pages/dashboard/debug/http/index.tsx
index 6f71e35b..4163a97a 100644
--- a/napcat.webui/src/pages/dashboard/debug/http/index.tsx
+++ b/napcat.webui/src/pages/dashboard/debug/http/index.tsx
@@ -1,28 +1,28 @@
-import { Button } from '@heroui/button'
-import clsx from 'clsx'
-import { motion } from 'motion/react'
-import { useEffect, useRef, useState } from 'react'
-import { TbSquareRoundedChevronLeftFilled } from 'react-icons/tb'
+import { Button } from '@heroui/button';
+import clsx from 'clsx';
+import { motion } from 'motion/react';
+import { useEffect, useRef, useState } from 'react';
+import { TbSquareRoundedChevronLeftFilled } from 'react-icons/tb';
 
-import oneBotHttpApi from '@/const/ob_api'
-import type { OneBotHttpApi } from '@/const/ob_api'
+import oneBotHttpApi from '@/const/ob_api';
+import type { OneBotHttpApi } from '@/const/ob_api';
 
-import OneBotApiDebug from '@/components/onebot/api/debug'
-import OneBotApiNavList from '@/components/onebot/api/nav_list'
+import OneBotApiDebug from '@/components/onebot/api/debug';
+import OneBotApiNavList from '@/components/onebot/api/nav_list';
 
-export default function HttpDebug() {
+export default function HttpDebug () {
   const [selectedApi, setSelectedApi] =
-    useState<keyof OneBotHttpApi>('/set_qq_profile')
-  const data = oneBotHttpApi[selectedApi]
-  const contentRef = useRef<HTMLDivElement>(null)
-  const [openSideBar, setOpenSideBar] = useState(true)
+    useState<keyof OneBotHttpApi>('/set_qq_profile');
+  const data = oneBotHttpApi[selectedApi];
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [openSideBar, setOpenSideBar] = useState(true);
 
   useEffect(() => {
     contentRef?.current?.scrollTo?.({
       top: 0,
-      behavior: 'smooth'
-    })
-  }, [selectedApi])
+      behavior: 'smooth',
+    });
+  }, [selectedApi]);
 
   return (
     <>
@@ -33,18 +33,18 @@ export default function HttpDebug() {
         onSelect={setSelectedApi}
         openSideBar={openSideBar}
       />
-      <div ref={contentRef} className="flex-1 h-full overflow-x-hidden">
+      <div ref={contentRef} className='flex-1 h-full overflow-x-hidden'>
         <motion.div
-          className="absolute top-16 z-30 md:!ml-4"
+          className='absolute top-16 z-30 md:!ml-4'
           animate={{ marginLeft: openSideBar ? '16rem' : '1rem' }}
           transition={{ type: 'spring', stiffness: 150, damping: 15 }}
         >
           <Button
             isIconOnly
-            color="primary"
-            radius="md"
-            variant="shadow"
-            size="sm"
+            color='primary'
+            radius='md'
+            variant='shadow'
+            size='sm'
             onPress={() => setOpenSideBar(!openSideBar)}
           >
             <TbSquareRoundedChevronLeftFilled
@@ -59,5 +59,5 @@ export default function HttpDebug() {
         <OneBotApiDebug path={selectedApi} data={data} />
       </div>
     </>
-  )
+  );
 }
diff --git a/napcat.webui/src/pages/dashboard/debug/index.tsx b/napcat.webui/src/pages/dashboard/debug/index.tsx
index f0f081c4..5b3ec76f 100644
--- a/napcat.webui/src/pages/dashboard/debug/index.tsx
+++ b/napcat.webui/src/pages/dashboard/debug/index.tsx
@@ -1,5 +1,5 @@
-import { Outlet } from 'react-router-dom'
+import { Outlet } from 'react-router-dom';
 
-export default function DebugPage() {
-  return <Outlet />
+export default function DebugPage () {
+  return <Outlet />;
 }
diff --git a/napcat.webui/src/pages/dashboard/debug/websocket/index.tsx b/napcat.webui/src/pages/dashboard/debug/websocket/index.tsx
index 503148d7..a1bac1fb 100644
--- a/napcat.webui/src/pages/dashboard/debug/websocket/index.tsx
+++ b/napcat.webui/src/pages/dashboard/debug/websocket/index.tsx
@@ -1,83 +1,83 @@
-import { Button } from '@heroui/button'
-import { Card, CardBody } from '@heroui/card'
-import { Input } from '@heroui/input'
-import { useLocalStorage } from '@uidotdev/usehooks'
-import { useCallback, useState } from 'react'
-import toast from 'react-hot-toast'
+import { Button } from '@heroui/button';
+import { Card, CardBody } from '@heroui/card';
+import { Input } from '@heroui/input';
+import { useLocalStorage } from '@uidotdev/usehooks';
+import { useCallback, useState } from 'react';
+import toast from 'react-hot-toast';
 
-import key from '@/const/key'
+import key from '@/const/key';
 
-import OneBotMessageList from '@/components/onebot/message_list'
-import OneBotSendModal from '@/components/onebot/send_modal'
-import WSStatus from '@/components/onebot/ws_status'
+import OneBotMessageList from '@/components/onebot/message_list';
+import OneBotSendModal from '@/components/onebot/send_modal';
+import WSStatus from '@/components/onebot/ws_status';
 
-import { useWebSocketDebug } from '@/hooks/use-websocket-debug'
+import { useWebSocketDebug } from '@/hooks/use-websocket-debug';
 
-export default function WSDebug() {
-  const url = new URL(window.location.origin)
-  url.port = '3001'
-  url.protocol = 'ws:'
-  const defaultWsUrl = url.href
+export default function WSDebug () {
+  const url = new URL(window.location.origin);
+  url.port = '3001';
+  url.protocol = 'ws:';
+  const defaultWsUrl = url.href;
   const [socketConfig, setSocketConfig] = useLocalStorage(key.wsDebugConfig, {
     url: defaultWsUrl,
-    token: ''
-  })
-  const [inputUrl, setInputUrl] = useState(socketConfig.url)
-  const [inputToken, setInputToken] = useState(socketConfig.token)
+    token: '',
+  });
+  const [inputUrl, setInputUrl] = useState(socketConfig.url);
+  const [inputToken, setInputToken] = useState(socketConfig.token);
 
   const { sendMessage, readyState, FilterMessagesType, filteredMessages } =
-    useWebSocketDebug(socketConfig.url, socketConfig.token)
+    useWebSocketDebug(socketConfig.url, socketConfig.token);
 
   const handleConnect = useCallback(() => {
     if (!inputUrl.startsWith('ws://') && !inputUrl.startsWith('wss://')) {
-      toast.error('WebSocket URL 不合法')
-      return
+      toast.error('WebSocket URL 不合法');
+      return;
     }
     setSocketConfig({
       url: inputUrl,
-      token: inputToken
-    })
-  }, [inputUrl, inputToken])
+      token: inputToken,
+    });
+  }, [inputUrl, inputToken]);
 
   return (
     <>
       <title>Websocket调试 - NapCat WebUI</title>
-      <div className="h-[calc(100vh-4rem)] overflow-hidden flex flex-col">
-        <Card className="mx-2 mt-2 flex-shrink-0 bg-opacity-50 backdrop-blur-sm">
-          <CardBody className="gap-2">
-            <div className="grid gap-2 items-center md:grid-cols-5">
+      <div className='h-[calc(100vh-4rem)] overflow-hidden flex flex-col'>
+        <Card className='mx-2 mt-2 flex-shrink-0 bg-opacity-50 backdrop-blur-sm'>
+          <CardBody className='gap-2'>
+            <div className='grid gap-2 items-center md:grid-cols-5'>
               <Input
-                className="col-span-2"
-                label="WebSocket URL"
-                type="text"
+                className='col-span-2'
+                label='WebSocket URL'
+                type='text'
                 value={inputUrl}
                 onChange={(e) => setInputUrl(e.target.value)}
-                placeholder="输入 WebSocket URL"
+                placeholder='输入 WebSocket URL'
               />
               <Input
-                className="col-span-2"
-                label="Token"
-                type="text"
+                className='col-span-2'
+                label='Token'
+                type='text'
                 value={inputToken}
                 onChange={(e) => setInputToken(e.target.value)}
-                placeholder="输入 Token"
+                placeholder='输入 Token'
               />
-              <div className="flex-shrink-0 flex gap-2 col-span-2 md:col-span-1">
+              <div className='flex-shrink-0 flex gap-2 col-span-2 md:col-span-1'>
                 <Button
-                  color="primary"
+                  color='primary'
                   onPress={handleConnect}
-                  size="lg"
-                  radius="full"
-                  className="w-full md:w-auto"
+                  size='lg'
+                  radius='full'
+                  className='w-full md:w-auto'
                 >
                   连接
                 </Button>
               </div>
             </div>
-            <div className="p-2 border border-default-100 bg-content1 bg-opacity-50 rounded-md dark:bg-[rgb(30,30,30)]">
-              <div className="grid gap-2 md:grid-cols-5 items-center md:w-fit">
+            <div className='p-2 border border-default-100 bg-content1 bg-opacity-50 rounded-md dark:bg-[rgb(30,30,30)]'>
+              <div className='grid gap-2 md:grid-cols-5 items-center md:w-fit'>
                 <WSStatus state={readyState} />
-                <div className="md:w-64 max-w-full col-span-2">
+                <div className='md:w-64 max-w-full col-span-2'>
                   {FilterMessagesType}
                 </div>
                 <OneBotSendModal sendMessage={sendMessage} />
@@ -86,10 +86,10 @@ export default function WSDebug() {
           </CardBody>
         </Card>
 
-        <div className="flex-1 overflow-hidden">
+        <div className='flex-1 overflow-hidden'>
           <OneBotMessageList messages={filteredMessages} />
         </div>
       </div>
     </>
-  )
+  );
 }
diff --git a/napcat.webui/src/pages/dashboard/file_manager.tsx b/napcat.webui/src/pages/dashboard/file_manager.tsx
index fe166983..7358334f 100644
--- a/napcat.webui/src/pages/dashboard/file_manager.tsx
+++ b/napcat.webui/src/pages/dashboard/file_manager.tsx
@@ -1,144 +1,144 @@
-import { BreadcrumbItem, Breadcrumbs } from '@heroui/breadcrumbs'
-import { Button } from '@heroui/button'
-import { Input } from '@heroui/input'
-import type { Selection, SortDescriptor } from '@react-types/shared'
-import clsx from 'clsx'
-import { motion } from 'motion/react'
-import path from 'path-browserify'
-import { useEffect, useState } from 'react'
-import { useDropzone } from 'react-dropzone'
-import toast from 'react-hot-toast'
-import { FiDownload, FiMove, FiPlus, FiUpload } from 'react-icons/fi'
-import { MdRefresh } from 'react-icons/md'
-import { TbTrash } from 'react-icons/tb'
-import { TiArrowBack } from 'react-icons/ti'
-import { useLocation, useNavigate } from 'react-router-dom'
+import { BreadcrumbItem, Breadcrumbs } from '@heroui/breadcrumbs';
+import { Button } from '@heroui/button';
+import { Input } from '@heroui/input';
+import type { Selection, SortDescriptor } from '@react-types/shared';
+import clsx from 'clsx';
+import { motion } from 'motion/react';
+import path from 'path-browserify';
+import { useEffect, useState } from 'react';
+import { useDropzone } from 'react-dropzone';
+import toast from 'react-hot-toast';
+import { FiDownload, FiMove, FiPlus, FiUpload } from 'react-icons/fi';
+import { MdRefresh } from 'react-icons/md';
+import { TbTrash } from 'react-icons/tb';
+import { TiArrowBack } from 'react-icons/ti';
+import { useLocation, useNavigate } from 'react-router-dom';
 
-import CreateFileModal from '@/components/file_manage/create_file_modal'
-import FileEditModal from '@/components/file_manage/file_edit_modal'
-import FilePreviewModal from '@/components/file_manage/file_preview_modal'
-import FileTable from '@/components/file_manage/file_table'
-import MoveModal from '@/components/file_manage/move_modal'
-import RenameModal from '@/components/file_manage/rename_modal'
+import CreateFileModal from '@/components/file_manage/create_file_modal';
+import FileEditModal from '@/components/file_manage/file_edit_modal';
+import FilePreviewModal from '@/components/file_manage/file_preview_modal';
+import FileTable from '@/components/file_manage/file_table';
+import MoveModal from '@/components/file_manage/move_modal';
+import RenameModal from '@/components/file_manage/rename_modal';
 
-import useDialog from '@/hooks/use-dialog'
+import useDialog from '@/hooks/use-dialog';
 
-import FileManager, { FileInfo } from '@/controllers/file_manager'
+import FileManager, { FileInfo } from '@/controllers/file_manager';
 
-export default function FileManagerPage() {
-  const [files, setFiles] = useState<FileInfo[]>([])
-  const [loading, setLoading] = useState(false)
+export default function FileManagerPage () {
+  const [files, setFiles] = useState<FileInfo[]>([]);
+  const [loading, setLoading] = useState(false);
   const [sortDescriptor, setSortDescriptor] = useState<SortDescriptor>({
     column: 'name',
-    direction: 'ascending'
-  })
-  const dialog = useDialog()
-  const location = useLocation()
-  const navigate = useNavigate()
+    direction: 'ascending',
+  });
+  const dialog = useDialog();
+  const location = useLocation();
+  const navigate = useNavigate();
   // 修改 currentPath 初始化逻辑，去掉可能的前导斜杠
-  let currentPath = decodeURIComponent(location.hash.slice(1) || '/')
+  let currentPath = decodeURIComponent(location.hash.slice(1) || '/');
   if (/^\/[A-Z]:$/i.test(currentPath)) {
-    currentPath = currentPath.slice(1)
+    currentPath = currentPath.slice(1);
   }
   const [editingFile, setEditingFile] = useState<{
     path: string
     content: string
-  } | null>(null)
-  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false)
-  const [newFileName, setNewFileName] = useState('')
-  const [fileType, setFileType] = useState<'file' | 'directory'>('file')
-  const [selectedFiles, setSelectedFiles] = useState<Selection>(new Set())
-  const [isRenameModalOpen, setIsRenameModalOpen] = useState(false)
-  const [isMoveModalOpen, setIsMoveModalOpen] = useState(false)
-  const [renamingFile, setRenamingFile] = useState<string>('')
-  const [moveTargetPath, setMoveTargetPath] = useState('')
-  const [jumpPath, setJumpPath] = useState('')
-  const [previewFile, setPreviewFile] = useState<string>('')
-  const [showUpload, setShowUpload] = useState<boolean>(false)
+  } | null>(null);
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+  const [newFileName, setNewFileName] = useState('');
+  const [fileType, setFileType] = useState<'file' | 'directory'>('file');
+  const [selectedFiles, setSelectedFiles] = useState<Selection>(new Set());
+  const [isRenameModalOpen, setIsRenameModalOpen] = useState(false);
+  const [isMoveModalOpen, setIsMoveModalOpen] = useState(false);
+  const [renamingFile, setRenamingFile] = useState<string>('');
+  const [moveTargetPath, setMoveTargetPath] = useState('');
+  const [jumpPath, setJumpPath] = useState('');
+  const [previewFile, setPreviewFile] = useState<string>('');
+  const [showUpload, setShowUpload] = useState<boolean>(false);
 
   const sortFiles = (files: FileInfo[], descriptor: typeof sortDescriptor) => {
     return [...files].sort((a, b) => {
-      if (a.isDirectory !== b.isDirectory) return a.isDirectory ? -1 : 1
-      const direction = descriptor.direction === 'ascending' ? 1 : -1
+      if (a.isDirectory !== b.isDirectory) return a.isDirectory ? -1 : 1;
+      const direction = descriptor.direction === 'ascending' ? 1 : -1;
       switch (descriptor.column) {
         case 'name':
-          return direction * a.name.localeCompare(b.name)
+          return direction * a.name.localeCompare(b.name);
         case 'type': {
-          const aType = a.isDirectory ? '目录' : '文件'
-          const bType = a.isDirectory ? '目录' : '文件'
-          return direction * aType.localeCompare(bType)
+          const aType = a.isDirectory ? '目录' : '文件';
+          const bType = a.isDirectory ? '目录' : '文件';
+          return direction * aType.localeCompare(bType);
         }
         case 'size':
-          return direction * ((a.size || 0) - (b.size || 0))
+          return direction * ((a.size || 0) - (b.size || 0));
         case 'mtime':
           return (
             direction *
             (new Date(a.mtime).getTime() - new Date(b.mtime).getTime())
-          )
+          );
         default:
-          return 0
+          return 0;
       }
-    })
-  }
+    });
+  };
 
   const loadFiles = async () => {
-    setLoading(true)
+    setLoading(true);
     try {
-      const fileList = await FileManager.listFiles(currentPath)
-      setFiles(sortFiles(fileList, sortDescriptor))
+      const fileList = await FileManager.listFiles(currentPath);
+      setFiles(sortFiles(fileList, sortDescriptor));
     } catch (error) {
-      toast.error('加载文件列表失败')
-      setFiles([])
+      toast.error('加载文件列表失败');
+      setFiles([]);
     }
-    setLoading(false)
-  }
+    setLoading(false);
+  };
 
   useEffect(() => {
-    loadFiles()
-  }, [currentPath])
+    loadFiles();
+  }, [currentPath]);
 
   const handleSortChange = (descriptor: typeof sortDescriptor) => {
-    setSortDescriptor(descriptor)
-    setFiles((prev) => sortFiles(prev, descriptor))
-  }
+    setSortDescriptor(descriptor);
+    setFiles((prev) => sortFiles(prev, descriptor));
+  };
 
   const handleDirectoryClick = (dirPath: string) => {
     if (dirPath === '..') {
       if (/^[A-Z]:$/i.test(currentPath)) {
-        navigate('/file_manager#/')
-        return
+        navigate('/file_manager#/');
+        return;
       }
-      const parentPath = path.dirname(currentPath)
+      const parentPath = path.dirname(currentPath);
       navigate(
         `/file_manager#${encodeURIComponent(parentPath === currentPath ? '/' : parentPath)}`
-      )
-      return
+      );
+      return;
     }
     navigate(
       `/file_manager#${encodeURIComponent(path.join(currentPath, dirPath))}`
-    )
-  }
+    );
+  };
 
   const handleEdit = async (filePath: string) => {
     try {
-      const content = await FileManager.readFile(filePath)
-      setEditingFile({ path: filePath, content })
+      const content = await FileManager.readFile(filePath);
+      setEditingFile({ path: filePath, content });
     } catch (error) {
-      toast.error('打开文件失败')
+      toast.error('打开文件失败');
     }
-  }
+  };
 
   const handleSave = async () => {
-    if (!editingFile) return
+    if (!editingFile) return;
     try {
-      await FileManager.writeFile(editingFile.path, editingFile.content)
-      toast.success('保存成功')
-      setEditingFile(null)
-      loadFiles()
+      await FileManager.writeFile(editingFile.path, editingFile.content);
+      toast.success('保存成功');
+      setEditingFile(null);
+      loadFiles();
     } catch (error) {
-      toast.error('保存失败')
+      toast.error('保存失败');
     }
-  }
+  };
 
   const handleDelete = async (filePath: string) => {
     dialog.confirm({
@@ -146,46 +146,46 @@ export default function FileManagerPage() {
       content: <div>确定要删除文件 {filePath} 吗？</div>,
       onConfirm: async () => {
         try {
-          await FileManager.delete(filePath)
-          toast.success('删除成功')
-          loadFiles()
+          await FileManager.delete(filePath);
+          toast.success('删除成功');
+          loadFiles();
         } catch (error) {
-          toast.error('删除失败')
+          toast.error('删除失败');
         }
-      }
-    })
-  }
+      },
+    });
+  };
 
   const handleCreate = async () => {
-    if (!newFileName) return
-    const newPath = path.join(currentPath, newFileName)
+    if (!newFileName) return;
+    const newPath = path.join(currentPath, newFileName);
     try {
       if (fileType === 'directory') {
         if (!(await FileManager.createDirectory(newPath))) {
-          toast.error('目录已存在')
-          return
+          toast.error('目录已存在');
+          return;
         }
       } else {
         if (!(await FileManager.createFile(newPath))) {
-          toast.error('文件已存在')
-          return
+          toast.error('文件已存在');
+          return;
         }
       }
-      toast.success('创建成功')
-      setIsCreateModalOpen(false)
-      setNewFileName('')
-      loadFiles()
+      toast.success('创建成功');
+      setIsCreateModalOpen(false);
+      setNewFileName('');
+      loadFiles();
     } catch (error) {
-      toast.error((error as Error)?.message || '创建失败')
+      toast.error((error as Error)?.message || '创建失败');
     }
-  }
+  };
 
   const handleBatchDelete = async () => {
     const selectedArray =
       selectedFiles instanceof Set
         ? Array.from(selectedFiles)
-        : files.map((f) => f.name)
-    if (selectedArray.length === 0) return
+        : files.map((f) => f.name);
+    if (selectedArray.length === 0) return;
     dialog.confirm({
       title: '批量删除',
       content: <div>确定要删除选中的 {selectedArray.length} 个项目吗？</div>,
@@ -193,240 +193,240 @@ export default function FileManagerPage() {
         try {
           const paths = selectedArray.map((key) =>
             path.join(currentPath, key.toString())
-          )
-          await FileManager.batchDelete(paths)
-          toast.success('批量删除成功')
-          setSelectedFiles(new Set())
-          loadFiles()
+          );
+          await FileManager.batchDelete(paths);
+          toast.success('批量删除成功');
+          setSelectedFiles(new Set());
+          loadFiles();
         } catch (error) {
-          toast.error('批量删除失败')
+          toast.error('批量删除失败');
         }
-      }
-    })
-  }
+      },
+    });
+  };
 
   const handleRename = async () => {
-    if (!renamingFile || !newFileName) return
+    if (!renamingFile || !newFileName) return;
     try {
       await FileManager.rename(
         path.join(currentPath, renamingFile),
         path.join(currentPath, newFileName)
-      )
-      toast.success('重命名成功')
-      setIsRenameModalOpen(false)
-      setRenamingFile('')
-      setNewFileName('')
-      loadFiles()
+      );
+      toast.success('重命名成功');
+      setIsRenameModalOpen(false);
+      setRenamingFile('');
+      setNewFileName('');
+      loadFiles();
     } catch (error) {
-      toast.error('重命名失败')
+      toast.error('重命名失败');
     }
-  }
+  };
 
   const handleMove = async (sourceName: string) => {
-    if (!moveTargetPath) return
+    if (!moveTargetPath) return;
     try {
       await FileManager.move(
         path.join(currentPath, sourceName),
         path.join(moveTargetPath, sourceName)
-      )
-      toast.success('移动成功')
-      setIsMoveModalOpen(false)
-      setMoveTargetPath('')
-      loadFiles()
+      );
+      toast.success('移动成功');
+      setIsMoveModalOpen(false);
+      setMoveTargetPath('');
+      loadFiles();
     } catch (error) {
-      toast.error('移动失败')
+      toast.error('移动失败');
     }
-  }
+  };
 
   const handleBatchMove = async () => {
-    if (!moveTargetPath) return
+    if (!moveTargetPath) return;
     const selectedArray =
       selectedFiles instanceof Set
         ? Array.from(selectedFiles)
-        : files.map((f) => f.name)
-    if (selectedArray.length === 0) return
+        : files.map((f) => f.name);
+    if (selectedArray.length === 0) return;
     try {
       const items = selectedArray.map((name) => ({
         sourcePath: path.join(currentPath, name.toString()),
-        targetPath: path.join(moveTargetPath, name.toString())
-      }))
-      await FileManager.batchMove(items)
-      toast.success('批量移动成功')
-      setIsMoveModalOpen(false)
-      setMoveTargetPath('')
-      setSelectedFiles(new Set())
-      loadFiles()
+        targetPath: path.join(moveTargetPath, name.toString()),
+      }));
+      await FileManager.batchMove(items);
+      toast.success('批量移动成功');
+      setIsMoveModalOpen(false);
+      setMoveTargetPath('');
+      setSelectedFiles(new Set());
+      loadFiles();
     } catch (error) {
-      toast.error('批量移动失败')
+      toast.error('批量移动失败');
     }
-  }
+  };
 
   const handleCopyPath = (fileName: string) => {
-    navigator.clipboard.writeText(path.join(currentPath, fileName))
-    toast.success('路径已复制')
-  }
+    navigator.clipboard.writeText(path.join(currentPath, fileName));
+    toast.success('路径已复制');
+  };
 
   const handleMoveClick = (fileName: string) => {
-    setRenamingFile(fileName)
-    setMoveTargetPath('')
-    setIsMoveModalOpen(true)
-  }
+    setRenamingFile(fileName);
+    setMoveTargetPath('');
+    setIsMoveModalOpen(true);
+  };
 
   const handleDownload = (filePath: string) => {
-    FileManager.download(filePath)
-  }
+    FileManager.download(filePath);
+  };
 
   const handleBatchDownload = async () => {
     const selectedArray =
       selectedFiles instanceof Set
         ? Array.from(selectedFiles)
-        : files.map((f) => f.name)
-    if (selectedArray.length === 0) return
+        : files.map((f) => f.name);
+    if (selectedArray.length === 0) return;
     const paths = selectedArray.map((key) =>
       path.join(currentPath, key.toString())
-    )
-    await FileManager.batchDownload(paths)
-  }
+    );
+    await FileManager.batchDownload(paths);
+  };
 
   const handlePreview = (filePath: string) => {
-    setPreviewFile(filePath)
-  }
+    setPreviewFile(filePath);
+  };
 
   const onDrop = async (acceptedFiles: File[]) => {
     try {
       // 遍历处理文件，保持文件夹结构
       const processedFiles = acceptedFiles.map((file) => {
-        const relativePath = file.webkitRelativePath || file.name
+        const relativePath = file.webkitRelativePath || file.name;
         // 不需要额外的编码处理，浏览器会自动处理
         return new File([file], relativePath, {
           type: file.type,
-          lastModified: file.lastModified
-        })
-      })
+          lastModified: file.lastModified,
+        });
+      });
 
       toast
         .promise(FileManager.upload(currentPath, processedFiles), {
           loading: '正在上传文件...',
           success: '上传成功',
-          error: '上传失败'
+          error: '上传失败',
         })
         .then(() => {
-          loadFiles()
-        })
+          loadFiles();
+        });
     } catch (error) {
-      toast.error('上传失败')
+      toast.error('上传失败');
     }
-  }
+  };
 
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     onDrop,
     noClick: true,
     onDragOver: (e) => {
-      e.preventDefault()
-      e.stopPropagation()
+      e.preventDefault();
+      e.stopPropagation();
     },
-    useFsAccessApi: false // 添加此选项以避免某些浏览器的文件系统API问题
-  })
+    useFsAccessApi: false, // 添加此选项以避免某些浏览器的文件系统API问题
+  });
 
   return (
-    <div className="p-4">
-      <div className="mb-4 flex items-center gap-4 sticky top-14 z-10 bg-content1 py-1">
+    <div className='p-4'>
+      <div className='mb-4 flex items-center gap-4 sticky top-14 z-10 bg-content1 py-1'>
         <Button
-          color="primary"
-          size="sm"
+          color='primary'
+          size='sm'
           isIconOnly
-          variant="flat"
+          variant='flat'
           onPress={() => handleDirectoryClick('..')}
-          className="text-lg"
+          className='text-lg'
         >
           <TiArrowBack />
         </Button>
 
         <Button
-          color="primary"
-          size="sm"
+          color='primary'
+          size='sm'
           isIconOnly
-          variant="flat"
+          variant='flat'
           onPress={() => setIsCreateModalOpen(true)}
-          className="text-lg"
+          className='text-lg'
         >
           <FiPlus />
         </Button>
 
         <Button
-          color="primary"
+          color='primary'
           isLoading={loading}
-          size="sm"
+          size='sm'
           isIconOnly
-          variant="flat"
+          variant='flat'
           onPress={loadFiles}
-          className="text-lg"
+          className='text-lg'
         >
           <MdRefresh />
         </Button>
         <Button
-          color="primary"
-          size="sm"
+          color='primary'
+          size='sm'
           isIconOnly
-          variant="flat"
+          variant='flat'
           onPress={() => setShowUpload((prev) => !prev)}
-          className="text-lg"
+          className='text-lg'
         >
           <FiUpload />
         </Button>
 
         {((selectedFiles instanceof Set && selectedFiles.size > 0) ||
           selectedFiles === 'all') && (
-          <>
-            <Button
-              color="primary"
-              size="sm"
-              variant="flat"
-              onPress={handleBatchDelete}
-              className="text-sm"
-              startContent={<TbTrash className="text-lg" />}
-            >
-              (
-              {selectedFiles instanceof Set ? selectedFiles.size : files.length}
-              )
-            </Button>
-            <Button
-              color="primary"
-              size="sm"
-              variant="flat"
-              onPress={() => {
-                setMoveTargetPath('')
-                setIsMoveModalOpen(true)
-              }}
-              className="text-sm"
-              startContent={<FiMove className="text-lg" />}
-            >
-              (
-              {selectedFiles instanceof Set ? selectedFiles.size : files.length}
-              )
-            </Button>
-            <Button
-              color="primary"
-              size="sm"
-              variant="flat"
-              onPress={handleBatchDownload}
-              className="text-sm"
-              startContent={<FiDownload className="text-lg" />}
-            >
-              (
-              {selectedFiles instanceof Set ? selectedFiles.size : files.length}
-              )
-            </Button>
-          </>
+            <>
+              <Button
+                color='primary'
+                size='sm'
+                variant='flat'
+                onPress={handleBatchDelete}
+                className='text-sm'
+                startContent={<TbTrash className='text-lg' />}
+              >
+                (
+                {selectedFiles instanceof Set ? selectedFiles.size : files.length}
+                )
+              </Button>
+              <Button
+                color='primary'
+                size='sm'
+                variant='flat'
+                onPress={() => {
+                  setMoveTargetPath('');
+                  setIsMoveModalOpen(true);
+                }}
+                className='text-sm'
+                startContent={<FiMove className='text-lg' />}
+              >
+                (
+                {selectedFiles instanceof Set ? selectedFiles.size : files.length}
+                )
+              </Button>
+              <Button
+                color='primary'
+                size='sm'
+                variant='flat'
+                onPress={handleBatchDownload}
+                className='text-sm'
+                startContent={<FiDownload className='text-lg' />}
+              >
+                (
+                {selectedFiles instanceof Set ? selectedFiles.size : files.length}
+                )
+              </Button>
+            </>
         )}
-        <Breadcrumbs className="flex-1 shadow-small px-2 py-2 rounded-lg">
+        <Breadcrumbs className='flex-1 shadow-small px-2 py-2 rounded-lg'>
           {currentPath.split('/').map((part, index, parts) => (
             <BreadcrumbItem
               key={part}
               isCurrent={index === parts.length - 1}
               onPress={() => {
-                const newPath = parts.slice(0, index + 1).join('/')
-                navigate(`/file_manager#${encodeURIComponent(newPath)}`)
+                const newPath = parts.slice(0, index + 1).join('/');
+                navigate(`/file_manager#${encodeURIComponent(newPath)}`);
               }}
             >
               {part}
@@ -434,16 +434,16 @@ export default function FileManagerPage() {
           ))}
         </Breadcrumbs>
         <Input
-          type="text"
-          placeholder="输入跳转路径"
+          type='text'
+          placeholder='输入跳转路径'
           value={jumpPath}
           onChange={(e) => setJumpPath(e.target.value)}
           onKeyDown={(e) => {
             if (e.key === 'Enter' && jumpPath.trim() !== '') {
-              navigate(`/file_manager#${encodeURIComponent(jumpPath.trim())}`)
+              navigate(`/file_manager#${encodeURIComponent(jumpPath.trim())}`);
             }
           }}
-          className="ml-auto w-64"
+          className='ml-auto w-64'
         />
       </div>
 
@@ -457,11 +457,11 @@ export default function FileManagerPage() {
           showUpload ? 'mb-4 border-2' : 'border-none'
         )}
         onDragOver={(e) => {
-          e.preventDefault()
-          e.stopPropagation()
+          e.preventDefault();
+          e.stopPropagation();
         }}
       >
-        <div {...getRootProps()} className="w-full h-full p-4">
+        <div {...getRootProps()} className='w-full h-full p-4'>
           <input {...getInputProps()} multiple />
           <p>拖拽文件或文件夹到此处上传，或点击选择文件</p>
         </div>
@@ -479,9 +479,9 @@ export default function FileManagerPage() {
         onEdit={handleEdit}
         onPreview={handlePreview}
         onRenameRequest={(name) => {
-          setRenamingFile(name)
-          setNewFileName(name)
-          setIsRenameModalOpen(true)
+          setRenamingFile(name);
+          setNewFileName(name);
+          setIsRenameModalOpen(true);
         }}
         onMoveRequest={handleMoveClick}
         onCopyPath={handleCopyPath}
@@ -497,8 +497,7 @@ export default function FileManagerPage() {
         onContentChange={(newContent) =>
           setEditingFile((prev) =>
             prev ? { ...prev, content: newContent ?? '' } : null
-          )
-        }
+          )}
       />
 
       <FilePreviewModal
@@ -537,10 +536,9 @@ export default function FileManagerPage() {
         onMove={() =>
           selectedFiles instanceof Set && selectedFiles.size > 0
             ? handleBatchMove()
-            : handleMove(renamingFile)
-        }
+            : handleMove(renamingFile)}
         onSelect={(dir) => setMoveTargetPath(dir)} // 替换原有 onTargetChange
       />
     </div>
-  )
+  );
 }
diff --git a/napcat.webui/src/pages/dashboard/index.tsx b/napcat.webui/src/pages/dashboard/index.tsx
index e36ddf1e..42119a1e 100644
--- a/napcat.webui/src/pages/dashboard/index.tsx
+++ b/napcat.webui/src/pages/dashboard/index.tsx
@@ -1,118 +1,118 @@
-import { Card, CardBody } from '@heroui/card'
-import { useRequest } from 'ahooks'
-import { useCallback, useEffect, useState } from 'react'
-import { useRef } from 'react'
-import toast from 'react-hot-toast'
+import { Card, CardBody } from '@heroui/card';
+import { useRequest } from 'ahooks';
+import { useCallback, useEffect, useState, useRef } from 'react';
 
-import NetworkItemDisplay from '@/components/display_network_item'
-import Hitokoto from '@/components/hitokoto'
-import QQInfoCard from '@/components/qq_info_card'
-import SystemInfo from '@/components/system_info'
-import SystemStatusDisplay from '@/components/system_status_display'
+import toast from 'react-hot-toast';
 
-import useConfig from '@/hooks/use-config'
+import NetworkItemDisplay from '@/components/display_network_item';
+import Hitokoto from '@/components/hitokoto';
+import QQInfoCard from '@/components/qq_info_card';
+import SystemInfo from '@/components/system_info';
+import SystemStatusDisplay from '@/components/system_status_display';
 
-import QQManager from '@/controllers/qq_manager'
-import WebUIManager from '@/controllers/webui_manager'
+import useConfig from '@/hooks/use-config';
+
+import QQManager from '@/controllers/qq_manager';
+import WebUIManager from '@/controllers/webui_manager';
 
 const Networks: React.FC = () => {
-  const { config, refreshConfig } = useConfig()
+  const { config, refreshConfig } = useConfig();
   const allNetWorkConfigLength =
     config.network.httpClients.length +
     config.network.websocketClients.length +
     config.network.websocketServers.length +
-    config.network.httpServers.length
+    config.network.httpServers.length;
 
   useEffect(() => {
-    refreshConfig()
-  }, [])
+    refreshConfig();
+  }, []);
   return (
-    <div className="grid grid-cols-8 md:grid-cols-3 lg:grid-cols-6 gap-y-2 gap-x-1 md:gap-y-4 md:gap-x-4 py-5">
-      <NetworkItemDisplay count={allNetWorkConfigLength} label="网络配置" />
+    <div className='grid grid-cols-8 md:grid-cols-3 lg:grid-cols-6 gap-y-2 gap-x-1 md:gap-y-4 md:gap-x-4 py-5'>
+      <NetworkItemDisplay count={allNetWorkConfigLength} label='网络配置' />
       <NetworkItemDisplay
         count={config.network.httpServers.length}
-        label="HTTP服务器"
-        size="sm"
+        label='HTTP服务器'
+        size='sm'
       />
       <NetworkItemDisplay
         count={config.network.httpClients.length}
-        label="HTTP客户端"
-        size="sm"
+        label='HTTP客户端'
+        size='sm'
       />
       <NetworkItemDisplay
         count={config.network.websocketServers.length}
-        label="WS服务器"
-        size="sm"
+        label='WS服务器'
+        size='sm'
       />
       <NetworkItemDisplay
         count={config.network.websocketClients.length}
-        label="WS客户端"
-        size="sm"
+        label='WS客户端'
+        size='sm'
       />
     </div>
-  )
-}
+  );
+};
 
 const QQInfo: React.FC = () => {
-  const { data, loading, error } = useRequest(QQManager.getQQLoginInfo)
-  return <QQInfoCard data={data} error={error} loading={loading} />
-}
+  const { data, loading, error } = useRequest(QQManager.getQQLoginInfo);
+  return <QQInfoCard data={data} error={error} loading={loading} />;
+};
 
 export interface SystemStatusCardProps {
   setArchInfo: (arch: string | undefined) => void
 }
 const SystemStatusCard: React.FC<SystemStatusCardProps> = ({ setArchInfo }) => {
-  const [systemStatus, setSystemStatus] = useState<SystemStatus>()
-  const isSetted = useRef(false)
+  const [systemStatus, setSystemStatus] = useState<SystemStatus>();
+  const isSetted = useRef(false);
   const getStatus = useCallback(() => {
     try {
-      const event = WebUIManager.getSystemStatus(setSystemStatus)
-      return event
+      const event = WebUIManager.getSystemStatus(setSystemStatus);
+      return event;
     } catch (error) {
-      toast.error('获取系统状态失败')
+      toast.error('获取系统状态失败');
     }
-  }, [])
+  }, []);
 
   useEffect(() => {
-    const close = getStatus()
+    const close = getStatus();
     return () => {
-      close?.close()
-    }
-  }, [getStatus])
+      close?.close();
+    };
+  }, [getStatus]);
 
   useEffect(() => {
     if (systemStatus?.arch && !isSetted.current) {
-      setArchInfo(systemStatus.arch)
-      isSetted.current = true
+      setArchInfo(systemStatus.arch);
+      isSetted.current = true;
     }
-  }, [systemStatus, setArchInfo])
+  }, [systemStatus, setArchInfo]);
 
-  return <SystemStatusDisplay data={systemStatus} />
-}
+  return <SystemStatusDisplay data={systemStatus} />;
+};
 
 const DashboardIndexPage: React.FC = () => {
-  const [archInfo, setArchInfo] = useState<string>()
+  const [archInfo, setArchInfo] = useState<string>();
 
   return (
     <>
       <title>基础信息 - NapCat WebUI</title>
-      <section className="w-full p-2 md:p-4 md:max-w-[1000px] mx-auto">
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 items-stretch">
-          <div className="flex flex-col gap-2">
+      <section className='w-full p-2 md:p-4 md:max-w-[1000px] mx-auto'>
+        <div className='grid grid-cols-1 lg:grid-cols-3 gap-4 items-stretch'>
+          <div className='flex flex-col gap-2'>
             <QQInfo />
             <SystemInfo archInfo={archInfo} />
           </div>
           <SystemStatusCard setArchInfo={setArchInfo} />
         </div>
         <Networks />
-        <Card className="bg-opacity-60 shadow-sm shadow-primary-100">
+        <Card className='bg-opacity-60 shadow-sm shadow-primary-100'>
           <CardBody>
             <Hitokoto />
           </CardBody>
         </Card>
       </section>
     </>
-  )
-}
+  );
+};
 
-export default DashboardIndexPage
+export default DashboardIndexPage;
diff --git a/napcat.webui/src/pages/dashboard/logs.tsx b/napcat.webui/src/pages/dashboard/logs.tsx
index 4945c3cd..a6150483 100644
--- a/napcat.webui/src/pages/dashboard/logs.tsx
+++ b/napcat.webui/src/pages/dashboard/logs.tsx
@@ -1,66 +1,66 @@
-import { Tab, Tabs } from '@heroui/tabs'
-import { useRequest } from 'ahooks'
-import { useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
+import { Tab, Tabs } from '@heroui/tabs';
+import { useRequest } from 'ahooks';
+import { useEffect, useState } from 'react';
+import toast from 'react-hot-toast';
 
-import HistoryLogs from '@/components/log_com/history'
-import RealTimeLogs from '@/components/log_com/realtime'
+import HistoryLogs from '@/components/log_com/history';
+import RealTimeLogs from '@/components/log_com/realtime';
 
-import WebUIManager from '@/controllers/webui_manager'
+import WebUIManager from '@/controllers/webui_manager';
 
-export default function LogsPage() {
+export default function LogsPage () {
   const {
     data: logList,
     loading: logListLoading,
     error: logListError,
-    refresh: refreshLogList
-  } = useRequest(WebUIManager.getLogList)
-  const [selectedLog, setSelectedLog] = useState<string | null>(null)
-  const [logContent, setLogContent] = useState<string | null>(null)
-  const [logLoading, setLogLoading] = useState<boolean>(false)
+    refresh: refreshLogList,
+  } = useRequest(WebUIManager.getLogList);
+  const [selectedLog, setSelectedLog] = useState<string | null>(null);
+  const [logContent, setLogContent] = useState<string | null>(null);
+  const [logLoading, setLogLoading] = useState<boolean>(false);
   const onLogSelect = (name: string) => {
-    setSelectedLog(name)
-  }
+    setSelectedLog(name);
+  };
   const onLoadLog = async () => {
     if (!selectedLog) {
-      return
+      return;
     }
-    setLogLoading(true)
+    setLogLoading(true);
     try {
-      const result = await WebUIManager.getLogContent(selectedLog)
-      setLogContent(result)
+      const result = await WebUIManager.getLogContent(selectedLog);
+      setLogContent(result);
     } catch (error) {
-      const msg = (error as Error).message
-      toast.error(`加载日志失败: ${msg}`)
+      const msg = (error as Error).message;
+      toast.error(`加载日志失败: ${msg}`);
     } finally {
-      setLogLoading(false)
+      setLogLoading(false);
     }
-  }
+  };
   useEffect(() => {
     if (logList && logList.length > 0) {
-      setSelectedLog(logList[0])
+      setSelectedLog(logList[0]);
     }
-  }, [logList])
+  }, [logList]);
   useEffect(() => {
     if (selectedLog) {
-      onLoadLog()
+      onLoadLog();
     }
-  }, [selectedLog])
+  }, [selectedLog]);
   return (
-    <div className="h-[calc(100vh_-_8rem)] flex flex-col gap-4 items-center pt-4 px-2">
+    <div className='h-[calc(100vh_-_8rem)] flex flex-col gap-4 items-center pt-4 px-2'>
       <Tabs
-        aria-label="Logs"
+        aria-label='Logs'
         classNames={{
           panel: 'w-full flex-1 h-full py-0 flex flex-col gap-4',
           base: 'flex-shrink-0 !h-fit',
           tabList: 'bg-opacity-50 backdrop-blur-sm',
-          cursor: 'bg-opacity-60 backdrop-blur-sm'
+          cursor: 'bg-opacity-60 backdrop-blur-sm',
         }}
       >
-        <Tab title="实时日志">
+        <Tab title='实时日志'>
           <RealTimeLogs />
         </Tab>
-        <Tab title="历史日志">
+        <Tab title='历史日志'>
           <HistoryLogs
             list={logList || []}
             onSelect={onLogSelect}
@@ -75,5 +75,5 @@ export default function LogsPage() {
         </Tab>
       </Tabs>
     </div>
-  )
+  );
 }
diff --git a/napcat.webui/src/pages/dashboard/network.tsx b/napcat.webui/src/pages/dashboard/network.tsx
index 6fc0738d..b391fa13 100644
--- a/napcat.webui/src/pages/dashboard/network.tsx
+++ b/napcat.webui/src/pages/dashboard/network.tsx
@@ -1,22 +1,22 @@
-import { Button } from '@heroui/button'
-import { useDisclosure } from '@heroui/modal'
-import { Tab, Tabs } from '@heroui/tabs'
-import clsx from 'clsx'
-import { useEffect, useMemo, useState } from 'react'
-import toast from 'react-hot-toast'
-import { IoMdRefresh } from 'react-icons/io'
+import { Button } from '@heroui/button';
+import { useDisclosure } from '@heroui/modal';
+import { Tab, Tabs } from '@heroui/tabs';
+import clsx from 'clsx';
+import { useEffect, useMemo, useState } from 'react';
+import toast from 'react-hot-toast';
+import { IoMdRefresh } from 'react-icons/io';
 
-import AddButton from '@/components/button/add_button'
-import HTTPClientDisplayCard from '@/components/display_card/http_client'
-import HTTPServerDisplayCard from '@/components/display_card/http_server'
-import HTTPSSEServerDisplayCard from '@/components/display_card/http_sse_server'
-import WebsocketClientDisplayCard from '@/components/display_card/ws_client'
-import WebsocketServerDisplayCard from '@/components/display_card/ws_server'
-import NetworkFormModal from '@/components/network_edit/modal'
-import PageLoading from '@/components/page_loading'
+import AddButton from '@/components/button/add_button';
+import HTTPClientDisplayCard from '@/components/display_card/http_client';
+import HTTPServerDisplayCard from '@/components/display_card/http_server';
+import HTTPSSEServerDisplayCard from '@/components/display_card/http_sse_server';
+import WebsocketClientDisplayCard from '@/components/display_card/ws_client';
+import WebsocketServerDisplayCard from '@/components/display_card/ws_server';
+import NetworkFormModal from '@/components/network_edit/modal';
+import PageLoading from '@/components/page_loading';
 
-import useConfig from '@/hooks/use-config'
-import useDialog from '@/hooks/use-dialog'
+import useConfig from '@/hooks/use-config';
+import useDialog from '@/hooks/use-dialog';
 
 export interface SectionProps {
   title: string
@@ -40,64 +40,64 @@ const EmptySection: React.FC<EmptySectionProps> = ({ isEmpty }) => {
   return (
     <div
       className={clsx('text-default-400', {
-        hidden: !isEmpty
+        hidden: !isEmpty,
       })}
     >
       暂时还没有配置项哈
     </div>
-  )
-}
+  );
+};
 
-export default function NetworkPage() {
+export default function NetworkPage () {
   const {
     config,
     refreshConfig,
     deleteNetworkConfig,
     enableNetworkConfig,
-    enableDebugNetworkConfig
-  } = useConfig()
+    enableDebugNetworkConfig,
+  } = useConfig();
   const [activeField, setActiveField] =
-    useState<keyof OneBotConfig['network']>('httpServers')
-  const [activeName, setActiveName] = useState<string>('')
+    useState<keyof OneBotConfig['network']>('httpServers');
+  const [activeName, setActiveName] = useState<string>('');
   const {
     network: {
       httpServers,
       httpClients,
       httpSseServers,
       websocketServers,
-      websocketClients
-    }
-  } = config
-  const [loading, setLoading] = useState(false)
-  const { isOpen, onOpen, onOpenChange } = useDisclosure()
-  const dialog = useDialog()
+      websocketClients,
+    },
+  } = config;
+  const [loading, setLoading] = useState(false);
+  const { isOpen, onOpen, onOpenChange } = useDisclosure();
+  const dialog = useDialog();
   const activeData = useMemo(() => {
     const findData = config.network[activeField].find(
       (item) => item.name === activeName
-    )
+    );
 
-    return findData
-  }, [activeField, activeName, config])
+    return findData;
+  }, [activeField, activeName, config]);
 
   const refresh = async () => {
-    setLoading(true)
+    setLoading(true);
     try {
-      await refreshConfig()
-      setLoading(false)
+      await refreshConfig();
+      setLoading(false);
     } catch (error) {
-      const msg = (error as Error).message
+      const msg = (error as Error).message;
 
-      toast.error(`获取配置失败: ${msg}`)
+      toast.error(`获取配置失败: ${msg}`);
     } finally {
-      setLoading(false)
+      setLoading(false);
     }
-  }
+  };
 
   const handleClickCreate = (key: keyof OneBotConfig['network']) => {
-    setActiveField(key)
-    setActiveName('')
-    onOpen()
-  }
+    setActiveField(key);
+    setActiveName('');
+    onOpen();
+  };
 
   const onDelete = async (
     field: keyof OneBotConfig['network'],
@@ -109,61 +109,61 @@ export default function NetworkPage() {
         content: `确定要删除配置「${name}」吗?`,
         onConfirm: async () => {
           try {
-            await deleteNetworkConfig(field, name)
-            toast.success('删除配置成功')
-            resolve()
+            await deleteNetworkConfig(field, name);
+            toast.success('删除配置成功');
+            resolve();
           } catch (error) {
-            const msg = (error as Error).message
+            const msg = (error as Error).message;
 
-            toast.error(`删除配置失败: ${msg}`)
+            toast.error(`删除配置失败: ${msg}`);
 
-            reject(error)
+            reject(error);
           }
         },
         onCancel: () => {
-          resolve()
-        }
-      })
-    })
-  }
+          resolve();
+        },
+      });
+    });
+  };
 
   const onEnable = async (
     field: keyof OneBotConfig['network'],
     name: string
   ) => {
     try {
-      await enableNetworkConfig(field, name)
-      toast.success('更新配置成功')
+      await enableNetworkConfig(field, name);
+      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 onEnableDebug = async (
     field: keyof OneBotConfig['network'],
     name: string
   ) => {
     try {
-      await enableDebugNetworkConfig(field, name)
-      toast.success('更新配置成功')
+      await enableDebugNetworkConfig(field, name);
+      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 onEdit = (field: keyof OneBotConfig['network'], name: string) => {
-    setActiveField(field)
-    setActiveName(name)
-    onOpen()
-  }
+    setActiveField(field);
+    setActiveName(name);
+    onOpen();
+  };
 
   const renderCard = <T extends keyof OneBotConfig['network']>(
     type: T,
@@ -178,19 +178,19 @@ export default function NetworkPage() {
             showType={showType}
             data={item as OneBotConfig['network']['httpServers'][0]}
             onDelete={async () => {
-              await onDelete('httpServers', item.name)
+              await onDelete('httpServers', item.name);
             }}
             onEdit={() => {
-              onEdit('httpServers', item.name)
+              onEdit('httpServers', item.name);
             }}
             onEnable={async () => {
-              await onEnable('httpServers', item.name)
+              await onEnable('httpServers', item.name);
             }}
             onEnableDebug={async () => {
-              await onEnableDebug('httpServers', item.name)
+              await onEnableDebug('httpServers', item.name);
             }}
           />
-        )
+        );
       case 'httpClients':
         return (
           <HTTPClientDisplayCard
@@ -198,19 +198,19 @@ export default function NetworkPage() {
             showType={showType}
             data={item as OneBotConfig['network']['httpClients'][0]}
             onDelete={async () => {
-              await onDelete('httpClients', item.name)
+              await onDelete('httpClients', item.name);
             }}
             onEdit={() => {
-              onEdit('httpClients', item.name)
+              onEdit('httpClients', item.name);
             }}
             onEnable={async () => {
-              await onEnable('httpClients', item.name)
+              await onEnable('httpClients', item.name);
             }}
             onEnableDebug={async () => {
-              await onEnableDebug('httpClients', item.name)
+              await onEnableDebug('httpClients', item.name);
             }}
           />
-        )
+        );
       case 'httpSseServers':
         return (
           <HTTPSSEServerDisplayCard
@@ -218,19 +218,19 @@ export default function NetworkPage() {
             showType={showType}
             data={item as OneBotConfig['network']['httpSseServers'][0]}
             onDelete={async () => {
-              await onDelete('httpSseServers', item.name)
+              await onDelete('httpSseServers', item.name);
             }}
             onEdit={() => {
-              onEdit('httpSseServers', item.name)
+              onEdit('httpSseServers', item.name);
             }}
             onEnable={async () => {
-              await onEnable('httpSseServers', item.name)
+              await onEnable('httpSseServers', item.name);
             }}
             onEnableDebug={async () => {
-              await onEnableDebug('httpSseServers', item.name)
+              await onEnableDebug('httpSseServers', item.name);
             }}
           />
-        )
+        );
       case 'websocketServers':
         return (
           <WebsocketServerDisplayCard
@@ -238,19 +238,19 @@ export default function NetworkPage() {
             showType={showType}
             data={item as OneBotConfig['network']['websocketServers'][0]}
             onDelete={async () => {
-              await onDelete('websocketServers', item.name)
+              await onDelete('websocketServers', item.name);
             }}
             onEdit={() => {
-              onEdit('websocketServers', item.name)
+              onEdit('websocketServers', item.name);
             }}
             onEnable={async () => {
-              await onEnable('websocketServers', item.name)
+              await onEnable('websocketServers', item.name);
             }}
             onEnableDebug={async () => {
-              await onEnableDebug('websocketServers', item.name)
+              await onEnableDebug('websocketServers', item.name);
             }}
           />
-        )
+        );
       case 'websocketClients':
         return (
           <WebsocketClientDisplayCard
@@ -258,21 +258,21 @@ export default function NetworkPage() {
             showType={showType}
             data={item as OneBotConfig['network']['websocketClients'][0]}
             onDelete={async () => {
-              await onDelete('websocketClients', item.name)
+              await onDelete('websocketClients', item.name);
             }}
             onEdit={() => {
-              onEdit('websocketClients', item.name)
+              onEdit('websocketClients', item.name);
             }}
             onEnable={async () => {
-              await onEnable('websocketClients', item.name)
+              await onEnable('websocketClients', item.name);
             }}
             onEnableDebug={async () => {
-              await onEnableDebug('websocketClients', item.name)
+              await onEnableDebug('websocketClients', item.name);
             }}
           />
-        )
+        );
     }
-  }
+  };
 
   const tabs = [
     {
@@ -283,7 +283,7 @@ export default function NetworkPage() {
         ...httpClients,
         ...websocketServers,
         ...websocketClients,
-        ...httpSseServers
+        ...httpSseServers,
       ]
         .sort((a, b) => a.name.localeCompare(b.name))
         .map((item) => {
@@ -292,78 +292,78 @@ export default function NetworkPage() {
               'httpServers',
               item as OneBotConfig['network']['httpServers'][0],
               true
-            )
+            );
           }
           if (httpSseServers.find((i) => i.name === item.name)) {
             return renderCard(
               'httpSseServers',
               item as OneBotConfig['network']['httpSseServers'][0],
               true
-            )
+            );
           }
           if (httpClients.find((i) => i.name === item.name)) {
             return renderCard(
               'httpClients',
               item as OneBotConfig['network']['httpClients'][0],
               true
-            )
+            );
           }
           if (websocketServers.find((i) => i.name === item.name)) {
             return renderCard(
               'websocketServers',
               item as OneBotConfig['network']['websocketServers'][0],
               true
-            )
+            );
           }
           if (websocketClients.find((i) => i.name === item.name)) {
             return renderCard(
               'websocketClients',
               item as OneBotConfig['network']['websocketClients'][0],
               true
-            )
+            );
           }
-          return null
-        })
+          return null;
+        }),
     },
     {
       key: 'httpServers',
       title: 'HTTP服务器',
-      items: httpServers.map((item) => renderCard('httpServers', item))
+      items: httpServers.map((item) => renderCard('httpServers', item)),
     },
     {
       key: 'httpClients',
       title: 'HTTP客户端',
-      items: httpClients.map((item) => renderCard('httpClients', item))
+      items: httpClients.map((item) => renderCard('httpClients', item)),
     },
     {
       key: 'httpSseServers',
       title: 'HTTP SSE服务器',
-      items: httpSseServers.map((item) => renderCard('httpSseServers', item))
+      items: httpSseServers.map((item) => renderCard('httpSseServers', item)),
     },
     {
       key: 'websocketServers',
       title: 'Websocket服务器',
       items: websocketServers.map((item) =>
         renderCard('websocketServers', item)
-      )
+      ),
     },
     {
       key: 'websocketClients',
       title: 'Websocket客户端',
       items: websocketClients.map((item) =>
         renderCard('websocketClients', item)
-      )
-    }
-  ]
+      ),
+    },
+  ];
 
   useEffect(() => {
-    refresh()
-  }, [])
+    refresh();
+  }, []);
 
   return (
     <>
       <title>网络配置 - NapCat WebUI</title>
-      <div className="p-2 md:p-4 relative">
+      <div className='p-2 md:p-4 relative'>
         <NetworkFormModal
           data={activeData}
           field={activeField}
@@ -371,31 +371,31 @@ export default function NetworkPage() {
           onOpenChange={onOpenChange}
         />
         <PageLoading loading={loading} />
-        <div className="flex mb-6 items-center gap-4">
+        <div className='flex mb-6 items-center gap-4'>
           <AddButton onOpen={handleClickCreate} />
           <Button
             isIconOnly
-            color="primary"
-            radius="full"
-            variant="flat"
+            color='primary'
+            radius='full'
+            variant='flat'
             onPress={refresh}
           >
             <IoMdRefresh size={24} />
           </Button>
         </div>
         <Tabs
-          aria-label="Network Configs"
-          className="max-w-full"
+          aria-label='Network Configs'
+          className='max-w-full'
           items={tabs}
           classNames={{
             tabList: 'bg-opacity-50 backdrop-blur-sm',
-            cursor: 'bg-opacity-60 backdrop-blur-sm'
+            cursor: 'bg-opacity-60 backdrop-blur-sm',
           }}
         >
           {(item) => (
             <Tab key={item.key} title={item.title}>
               <EmptySection isEmpty={!item.items.length} />
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 justify-start items-stretch gap-x-2 gap-y-4">
+              <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 justify-start items-stretch gap-x-2 gap-y-4'>
                 {item.items}
               </div>
             </Tab>
@@ -403,5 +403,5 @@ export default function NetworkPage() {
         </Tabs>
       </div>
     </>
-  )
+  );
 }
diff --git a/napcat.webui/src/pages/dashboard/terminal.tsx b/napcat.webui/src/pages/dashboard/terminal.tsx
index 0328ed6b..273c7864 100644
--- a/napcat.webui/src/pages/dashboard/terminal.tsx
+++ b/napcat.webui/src/pages/dashboard/terminal.tsx
@@ -4,103 +4,103 @@ import {
   PointerSensor,
   closestCenter,
   useSensor,
-  useSensors
-} from '@dnd-kit/core'
+  useSensors,
+} from '@dnd-kit/core';
 import {
   SortableContext,
   arrayMove,
-  horizontalListSortingStrategy
-} from '@dnd-kit/sortable'
-import { Button } from '@heroui/button'
-import { useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
-import { IoAdd, IoClose } from 'react-icons/io5'
+  horizontalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { Button } from '@heroui/button';
+import { useEffect, useState } from 'react';
+import toast from 'react-hot-toast';
+import { IoAdd, IoClose } from 'react-icons/io5';
 
-import { TabList, TabPanel, Tabs } from '@/components/tabs'
-import { SortableTab } from '@/components/tabs/sortable_tab.tsx'
-import { TerminalInstance } from '@/components/terminal/terminal-instance'
+import { TabList, TabPanel, Tabs } from '@/components/tabs';
+import { SortableTab } from '@/components/tabs/sortable_tab.tsx';
+import { TerminalInstance } from '@/components/terminal/terminal-instance';
 
-import terminalManager from '@/controllers/terminal_manager'
+import terminalManager from '@/controllers/terminal_manager';
 
 interface TerminalTab {
   id: string
   title: string
 }
 
-export default function TerminalPage() {
-  const [tabs, setTabs] = useState<TerminalTab[]>([])
-  const [selectedTab, setSelectedTab] = useState<string>('')
+export default function TerminalPage () {
+  const [tabs, setTabs] = useState<TerminalTab[]>([]);
+  const [selectedTab, setSelectedTab] = useState<string>('');
 
   useEffect(() => {
     // 获取已存在的终端列表
     terminalManager.getTerminalList().then((terminals) => {
-      if (terminals.length === 0) return
+      if (terminals.length === 0) return;
 
       const newTabs = terminals.map((terminal) => ({
         id: terminal.id,
-        title: terminal.id
-      }))
+        title: terminal.id,
+      }));
 
-      setTabs(newTabs)
-      setSelectedTab(newTabs[0].id)
-    })
-  }, [])
+      setTabs(newTabs);
+      setSelectedTab(newTabs[0].id);
+    });
+  }, []);
 
   const createNewTerminal = async () => {
     try {
-      const { id } = await terminalManager.createTerminal(80, 24)
+      const { id } = await terminalManager.createTerminal(80, 24);
       const newTab = {
         id,
-        title: id
-      }
+        title: id,
+      };
 
-      setTabs((prev) => [...prev, newTab])
-      setSelectedTab(id)
+      setTabs((prev) => [...prev, newTab]);
+      setSelectedTab(id);
     } catch (error: unknown) {
-      console.error('Failed to create terminal:', error)
-      toast.error((error as Error).message)
+      console.error('Failed to create terminal:', error);
+      toast.error((error as Error).message);
     }
-  }
+  };
 
   const closeTerminal = async (id: string) => {
     try {
-      await terminalManager.closeTerminal(id)
-      terminalManager.removeTerminal(id)
+      await terminalManager.closeTerminal(id);
+      terminalManager.removeTerminal(id);
       if (selectedTab === id) {
-        const previousIndex = tabs.findIndex((tab) => tab.id === id) - 1
+        const previousIndex = tabs.findIndex((tab) => tab.id === id) - 1;
         if (previousIndex >= 0) {
-          setSelectedTab(tabs[previousIndex].id)
+          setSelectedTab(tabs[previousIndex].id);
         } else {
-          setSelectedTab(tabs[0]?.id || '')
+          setSelectedTab(tabs[0]?.id || '');
         }
       }
-      setTabs((prev) => prev.filter((tab) => tab.id !== id))
+      setTabs((prev) => prev.filter((tab) => tab.id !== id));
     } catch (error) {
-      toast.error('关闭终端失败')
+      toast.error('关闭终端失败');
     }
-  }
+  };
 
   const handleDragEnd = (event: DragEndEvent) => {
-    const { active, over } = event
+    const { active, over } = event;
     if (active.id !== over?.id) {
       setTabs((items) => {
-        const oldIndex = items.findIndex((item) => item.id === active.id)
-        const newIndex = items.findIndex((item) => item.id === over?.id)
-        return arrayMove(items, oldIndex, newIndex)
-      })
+        const oldIndex = items.findIndex((item) => item.id === active.id);
+        const newIndex = items.findIndex((item) => item.id === over?.id);
+        return arrayMove(items, oldIndex, newIndex);
+      });
     }
-  }
+  };
 
   const sensors = useSensors(
     useSensor(PointerSensor, {
       activationConstraint: {
-        distance: 8
-      }
+        distance: 8,
+      },
     })
-  )
+  );
 
   return (
-    <div className="flex flex-col gap-2 p-4 h-[calc(100vh-6rem)] md:h-[calc(100vh-4rem)]">
+    <div className='flex flex-col gap-2 p-4 h-[calc(100vh-6rem)] md:h-[calc(100vh-4rem)]'>
       <DndContext
         sensors={sensors}
         collisionDetection={closestCenter}
@@ -109,10 +109,10 @@ export default function TerminalPage() {
         <Tabs
           activeKey={selectedTab}
           onChange={setSelectedTab}
-          className="h-full overflow-hidden"
+          className='h-full overflow-hidden'
         >
-          <div className="flex items-center gap-2 flex-shrink-0 flex-grow-0">
-            <TabList className="flex-1 !overflow-x-auto w-full hide-scrollbar">
+          <div className='flex items-center gap-2 flex-shrink-0 flex-grow-0'>
+            <TabList className='flex-1 !overflow-x-auto w-full hide-scrollbar'>
               <SortableContext
                 items={tabs}
                 strategy={horizontalListSortingStrategy}
@@ -123,15 +123,15 @@ export default function TerminalPage() {
                     id={tab.id}
                     value={tab.id}
                     isSelected={selectedTab === tab.id}
-                    className="flex gap-2 items-center flex-shrink-0"
+                    className='flex gap-2 items-center flex-shrink-0'
                   >
                     {tab.title}
                     <Button
                       isIconOnly
-                      radius="full"
-                      variant="flat"
-                      size="sm"
-                      className="min-w-0 w-4 h-4 flex-shrink-0"
+                      radius='full'
+                      variant='flat'
+                      size='sm'
+                      className='min-w-0 w-4 h-4 flex-shrink-0'
                       onPress={() => closeTerminal(tab.id)}
                       color={selectedTab === tab.id ? 'primary' : 'default'}
                     >
@@ -143,23 +143,23 @@ export default function TerminalPage() {
             </TabList>
             <Button
               isIconOnly
-              color="primary"
-              size="sm"
-              variant="flat"
+              color='primary'
+              size='sm'
+              variant='flat'
               onPress={createNewTerminal}
               startContent={<IoAdd />}
-              className="text-xl"
+              className='text-xl'
             />
           </div>
-          <div className="flex-grow overflow-hidden">
+          <div className='flex-grow overflow-hidden'>
             {tabs.length === 0 && (
-              <div className="flex flex-col gap-2 items-center justify-center h-full text-gray-500 py-5">
-                <IoAdd className="text-4xl" />
-                <div className="text-sm">点击右上角按钮创建终端</div>
+              <div className='flex flex-col gap-2 items-center justify-center h-full text-gray-500 py-5'>
+                <IoAdd className='text-4xl' />
+                <div className='text-sm'>点击右上角按钮创建终端</div>
               </div>
             )}
             {tabs.map((tab) => (
-              <TabPanel key={tab.id} value={tab.id} className="h-full">
+              <TabPanel key={tab.id} value={tab.id} className='h-full'>
                 <TerminalInstance id={tab.id} />
               </TabPanel>
             ))}
@@ -167,5 +167,5 @@ export default function TerminalPage() {
         </Tabs>
       </DndContext>
     </div>
-  )
+  );
 }
diff --git a/napcat.webui/src/pages/index.tsx b/napcat.webui/src/pages/index.tsx
index ebe4cd66..c3c7b5ca 100644
--- a/napcat.webui/src/pages/index.tsx
+++ b/napcat.webui/src/pages/index.tsx
@@ -1,30 +1,30 @@
-import { Spinner } from '@heroui/spinner'
-import { AnimatePresence, motion } from 'motion/react'
-import { Suspense } from 'react'
-import { Outlet, useLocation } from 'react-router-dom'
+import { Spinner } from '@heroui/spinner';
+import { AnimatePresence, motion } from 'motion/react';
+import { Suspense } from 'react';
+import { Outlet, useLocation } from 'react-router-dom';
 
-import DefaultLayout from '@/layouts/default'
+import DefaultLayout from '@/layouts/default';
 
-export default function IndexPage() {
-  const location = useLocation()
+export default function IndexPage () {
+  const location = useLocation();
 
   return (
     <DefaultLayout>
       <Suspense
         fallback={
-          <div className="flex justify-center px-10">
+          <div className='flex justify-center px-10'>
             <Spinner />
           </div>
         }
       >
-        <AnimatePresence mode="wait">
+        <AnimatePresence mode='wait'>
           <motion.div
             key={location.pathname}
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{
               type: 'tween',
-              ease: 'easeInOut'
+              ease: 'easeInOut',
             }}
           >
             <Outlet />
@@ -32,5 +32,5 @@ export default function IndexPage() {
         </AnimatePresence>
       </Suspense>
     </DefaultLayout>
-  )
+  );
 }
diff --git a/napcat.webui/src/pages/qq_login.tsx b/napcat.webui/src/pages/qq_login.tsx
index 260c2bc7..709bd20d 100644
--- a/napcat.webui/src/pages/qq_login.tsx
+++ b/napcat.webui/src/pages/qq_login.tsx
@@ -1,126 +1,126 @@
-import { Button } from '@heroui/button'
-import { CardBody, CardHeader } from '@heroui/card'
-import { Image } from '@heroui/image'
-import { Tab, Tabs } from '@heroui/tabs'
-import { useEffect, useRef, useState } from 'react'
-import { toast } from 'react-hot-toast'
-import { useNavigate } from 'react-router-dom'
+import { Button } from '@heroui/button';
+import { CardBody, CardHeader } from '@heroui/card';
+import { Image } from '@heroui/image';
+import { Tab, Tabs } from '@heroui/tabs';
+import { useEffect, useRef, useState } from 'react';
+import { toast } from 'react-hot-toast';
+import { useNavigate } from 'react-router-dom';
 
-import HoverEffectCard from '@/components/effect_card'
-import { title } from '@/components/primitives'
-import QrCodeLogin from '@/components/qr_code_login'
-import QuickLogin from '@/components/quick_login'
-import type { QQItem } from '@/components/quick_login'
-import { ThemeSwitch } from '@/components/theme-switch'
+import HoverEffectCard from '@/components/effect_card';
+import { title } from '@/components/primitives';
+import QrCodeLogin from '@/components/qr_code_login';
+import QuickLogin from '@/components/quick_login';
+import type { QQItem } from '@/components/quick_login';
+import { ThemeSwitch } from '@/components/theme-switch';
 
-import logo from '@/assets/images/logo.png'
-import QQManager from '@/controllers/qq_manager'
-import PureLayout from '@/layouts/pure'
+import logo from '@/assets/images/logo.png';
+import QQManager from '@/controllers/qq_manager';
+import PureLayout from '@/layouts/pure';
 
-export default function QQLoginPage() {
-  const navigate = useNavigate()
-  const [uinValue, setUinValue] = useState<string>('')
-  const [isLoading, setIsLoading] = useState<boolean>(false)
-  const [qrcode, setQrcode] = useState<string>('')
-  const [qqList, setQQList] = useState<(QQItem | LoginListItem)[]>([])
-  const [refresh, setRefresh] = useState<boolean>(false)
-  const firstLoad = useRef<boolean>(true)
+export default function QQLoginPage () {
+  const navigate = useNavigate();
+  const [uinValue, setUinValue] = useState<string>('');
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [qrcode, setQrcode] = useState<string>('');
+  const [qqList, setQQList] = useState<(QQItem | LoginListItem)[]>([]);
+  const [refresh, setRefresh] = useState<boolean>(false);
+  const firstLoad = useRef<boolean>(true);
   const onSubmit = async () => {
     if (!uinValue) {
-      toast.error('请选择快捷登录的QQ')
+      toast.error('请选择快捷登录的QQ');
 
-      return
+      return;
     }
-    setIsLoading(true)
+    setIsLoading(true);
     try {
-      await QQManager.setQuickLogin(uinValue)
+      await QQManager.setQuickLogin(uinValue);
     } catch (error) {
-      const msg = (error as Error).message
+      const msg = (error as Error).message;
 
-      toast.error(`快速登录QQ失败: ${msg}`)
+      toast.error(`快速登录QQ失败: ${msg}`);
     } finally {
       setTimeout(() => {
-        setIsLoading(false)
-      }, 1000)
+        setIsLoading(false);
+      }, 1000);
     }
-  }
+  };
 
   const onUpdateQrCode = async () => {
-    if (firstLoad.current) setIsLoading(true)
+    if (firstLoad.current) setIsLoading(true);
     try {
-      const data = await QQManager.checkQQLoginStatusWithQrcode()
+      const data = await QQManager.checkQQLoginStatusWithQrcode();
 
       if (firstLoad.current) {
-        setIsLoading(false)
-        firstLoad.current = false
+        setIsLoading(false);
+        firstLoad.current = false;
       }
       if (data.isLogin) {
-        toast.success('QQ登录成功')
-        navigate('/', { replace: true })
+        toast.success('QQ登录成功');
+        navigate('/', { replace: true });
       } else {
-        setQrcode(data.qrcodeurl)
+        setQrcode(data.qrcodeurl);
       }
     } catch (error) {
-      const msg = (error as Error).message
+      const msg = (error as Error).message;
 
-      toast.error(`获取二维码失败: ${msg}`)
+      toast.error(`获取二维码失败: ${msg}`);
     }
-  }
+  };
 
   const onUpdateQQList = async () => {
-    setRefresh(true)
+    setRefresh(true);
     try {
-      const data = await QQManager.getQQQuickLoginListNew()
-      setQQList(data)
+      const data = await QQManager.getQQQuickLoginListNew();
+      setQQList(data);
     } catch (error) {
       try {
-        const data = await QQManager.getQQQuickLoginList()
+        const data = await QQManager.getQQQuickLoginList();
 
         const qqList = data.map((item) => ({
-          uin: item
-        }))
+          uin: item,
+        }));
 
-        setQQList(qqList)
+        setQQList(qqList);
       } catch (error) {
-        const msg = (error as Error).message
+        const msg = (error as Error).message;
 
-        toast.error(`获取QQ列表失败: ${msg}`)
+        toast.error(`获取QQ列表失败: ${msg}`);
       }
     } finally {
-      setRefresh(false)
+      setRefresh(false);
     }
-  }
+  };
 
   const handleSelectionChange: React.ChangeEventHandler<HTMLSelectElement> = (
     e
   ) => {
-    setUinValue(e.target.value)
-  }
+    setUinValue(e.target.value);
+  };
 
   useEffect(() => {
     const timer = setInterval(() => {
-      onUpdateQrCode()
-    }, 3000)
+      onUpdateQrCode();
+    }, 3000);
 
-    onUpdateQrCode()
-    onUpdateQQList()
+    onUpdateQrCode();
+    onUpdateQQList();
 
-    return () => clearInterval(timer)
-  }, [])
+    return () => clearInterval(timer);
+  }, []);
 
   return (
     <>
       <title>QQ登录 - NapCat WebUI</title>
       <PureLayout>
-        <div className="w-[608px] max-w-full py-8 px-2 md:px-8 overflow-hidden">
+        <div className='w-[608px] max-w-full py-8 px-2 md:px-8 overflow-hidden'>
           <HoverEffectCard
-            className="items-center gap-4 pt-0 pb-6 bg-default-50"
+            className='items-center gap-4 pt-0 pb-6 bg-default-50'
             maxXRotation={3}
             maxYRotation={3}
           >
-            <CardHeader className="inline-block max-w-lg text-center justify-center">
-              <div className="flex items-center justify-center w-full gap-2 pt-10">
-                <Image alt="logo" height="7em" src={logo} />
+            <CardHeader className='inline-block max-w-lg text-center justify-center'>
+              <div className='flex items-center justify-center w-full gap-2 pt-10'>
+                <Image alt='logo' height='7em' src={logo} />
                 <div>
                   <span className={title()}>Web&nbsp;</span>
                   <span className={title({ color: 'violet' })}>
@@ -128,19 +128,19 @@ export default function QQLoginPage() {
                   </span>
                 </div>
               </div>
-              <ThemeSwitch className="absolute right-4 top-4" />
+              <ThemeSwitch className='absolute right-4 top-4' />
             </CardHeader>
 
-            <CardBody className="flex gap-5 p-10 pt-0">
+            <CardBody className='flex gap-5 p-10 pt-0'>
               <Tabs
                 fullWidth
                 classNames={{
-                  tabList: 'shadow-sm dark:shadow-none'
+                  tabList: 'shadow-sm dark:shadow-none',
                 }}
                 isDisabled={isLoading}
-                size="lg"
+                size='lg'
               >
-                <Tab key="shortcut" title="快速登录">
+                <Tab key='shortcut' title='快速登录'>
                   <QuickLogin
                     handleSelectionChange={handleSelectionChange}
                     isLoading={isLoading}
@@ -151,18 +151,18 @@ export default function QQLoginPage() {
                     onUpdateQQList={onUpdateQQList}
                   />
                 </Tab>
-                <Tab key="qrcode" title="扫码登录">
+                <Tab key='qrcode' title='扫码登录'>
                   <QrCodeLogin qrcode={qrcode} />
                 </Tab>
               </Tabs>
               <Button
-                className="w-fit mx-auto"
-                variant="light"
-                color="primary"
+                className='w-fit mx-auto'
+                variant='light'
+                color='primary'
                 onPress={() => {
                   navigate('/web_login', {
-                    replace: true
-                  })
+                    replace: true,
+                  });
                 }}
               >
                 返回 Web Login
@@ -172,5 +172,5 @@ export default function QQLoginPage() {
         </div>
       </PureLayout>
     </>
-  )
+  );
 }
diff --git a/napcat.webui/src/pages/web_login.tsx b/napcat.webui/src/pages/web_login.tsx
index 5584f4e8..07786912 100644
--- a/napcat.webui/src/pages/web_login.tsx
+++ b/napcat.webui/src/pages/web_login.tsx
@@ -1,86 +1,86 @@
-import { Button } from '@heroui/button'
-import { CardBody, CardHeader } from '@heroui/card'
-import { Image } from '@heroui/image'
-import { Input } from '@heroui/input'
-import { useLocalStorage } from '@uidotdev/usehooks'
-import { useEffect, useState } from 'react'
-import { toast } from 'react-hot-toast'
-import { IoKeyOutline } from 'react-icons/io5'
-import { useNavigate } from 'react-router-dom'
+import { Button } from '@heroui/button';
+import { CardBody, CardHeader } from '@heroui/card';
+import { Image } from '@heroui/image';
+import { Input } from '@heroui/input';
+import { useLocalStorage } from '@uidotdev/usehooks';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-hot-toast';
+import { IoKeyOutline } from 'react-icons/io5';
+import { useNavigate } from 'react-router-dom';
 
-import key from '@/const/key'
+import key from '@/const/key';
 
-import HoverEffectCard from '@/components/effect_card'
-import { title } from '@/components/primitives'
-import { ThemeSwitch } from '@/components/theme-switch'
+import HoverEffectCard from '@/components/effect_card';
+import { title } from '@/components/primitives';
+import { ThemeSwitch } from '@/components/theme-switch';
 
-import logo from '@/assets/images/logo.png'
-import WebUIManager from '@/controllers/webui_manager'
-import PureLayout from '@/layouts/pure'
+import logo from '@/assets/images/logo.png';
+import WebUIManager from '@/controllers/webui_manager';
+import PureLayout from '@/layouts/pure';
 
-export default function WebLoginPage() {
-  const urlSearchParams = new URLSearchParams(window.location.search)
-  const token = urlSearchParams.get('token')
-  const navigate = useNavigate()
-  const [tokenValue, setTokenValue] = useState<string>(token || '')
-  const [isLoading, setIsLoading] = useState<boolean>(false)
-  const [, setLocalToken] = useLocalStorage<string>(key.token, '')
+export default function WebLoginPage () {
+  const urlSearchParams = new URLSearchParams(window.location.search);
+  const token = urlSearchParams.get('token');
+  const navigate = useNavigate();
+  const [tokenValue, setTokenValue] = useState<string>(token || '');
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [, setLocalToken] = useLocalStorage<string>(key.token, '');
   const onSubmit = async () => {
     if (!tokenValue) {
-      toast.error('请输入token')
+      toast.error('请输入token');
 
-      return
+      return;
     }
-    setIsLoading(true)
+    setIsLoading(true);
     try {
-      const data = await WebUIManager.loginWithToken(tokenValue)
+      const data = await WebUIManager.loginWithToken(tokenValue);
 
       if (data) {
-        setLocalToken(data)
-        navigate('/qq_login', { replace: true })
+        setLocalToken(data);
+        navigate('/qq_login', { replace: true });
       }
     } catch (error) {
-      toast.error((error as Error).message)
+      toast.error((error as Error).message);
     } finally {
-      setIsLoading(false)
+      setIsLoading(false);
     }
-  }
+  };
 
   // 处理全局键盘事件
   const handleKeyDown = (e: KeyboardEvent) => {
     if (e.key === 'Enter' && !isLoading) {
-      onSubmit()
+      onSubmit();
     }
-  }
+  };
 
   useEffect(() => {
-    document.addEventListener('keydown', handleKeyDown)
+    document.addEventListener('keydown', handleKeyDown);
 
     // 清理函数
     return () => {
-      document.removeEventListener('keydown', handleKeyDown)
-    }
-  }, [tokenValue, isLoading]) // 依赖项包含用于登录的状态
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [tokenValue, isLoading]); // 依赖项包含用于登录的状态
 
   useEffect(() => {
     if (token) {
-      onSubmit()
+      onSubmit();
     }
-  }, [])
+  }, []);
 
   return (
     <>
       <title>WebUI登录 - NapCat WebUI</title>
       <PureLayout>
-        <div className="w-[608px] max-w-full py-8 px-2 md:px-8 overflow-hidden">
+        <div className='w-[608px] max-w-full py-8 px-2 md:px-8 overflow-hidden'>
           <HoverEffectCard
-            className="items-center gap-4 pt-0 pb-6 bg-default-50"
+            className='items-center gap-4 pt-0 pb-6 bg-default-50'
             maxXRotation={3}
             maxYRotation={3}
           >
-            <CardHeader className="inline-block max-w-lg text-center justify-center">
-              <div className="flex items-center justify-center w-full gap-2 pt-10">
-                <Image alt="logo" height="7em" src={logo} />
+            <CardHeader className='inline-block max-w-lg text-center justify-center'>
+              <div className='flex items-center justify-center w-full gap-2 pt-10'>
+                <Image alt='logo' height='7em' src={logo} />
                 <div>
                   <span className={title()}>Web&nbsp;</span>
                   <span className={title({ color: 'violet' })}>
@@ -88,38 +88,38 @@ export default function WebLoginPage() {
                   </span>
                 </div>
               </div>
-              <ThemeSwitch className="absolute right-4 top-4" />
+              <ThemeSwitch className='absolute right-4 top-4' />
             </CardHeader>
 
-            <CardBody className="flex gap-5 py-5 px-5 md:px-10">
+            <CardBody className='flex gap-5 py-5 px-5 md:px-10'>
               <form
                 onSubmit={(e) => {
-                  e.preventDefault()
-                  onSubmit()
+                  e.preventDefault();
+                  onSubmit();
                 }}
               >
                 {/* 隐藏的用户名字段，帮助浏览器识别登录表单 */}
                 <input
-                  type="text"
-                  name="username"
-                  value="napcat-webui"
-                  autoComplete="username"
-                  className="absolute -left-[9999px] opacity-0 pointer-events-none"
+                  type='text'
+                  name='username'
+                  value='napcat-webui'
+                  autoComplete='username'
+                  className='absolute -left-[9999px] opacity-0 pointer-events-none'
                   readOnly
                   tabIndex={-1}
-                  aria-label="Username"
+                  aria-label='Username'
                 />
                 <Input
                   isClearable
-                  type="password"
-                  name="password"
-                  autoComplete="current-password"
+                  type='password'
+                  name='password'
+                  autoComplete='current-password'
                   classNames={{
                     label: 'text-black/50 dark:text-white/90',
                     input: [
                       'bg-transparent',
                       'text-black/90 dark:text-white/90',
-                      'placeholder:text-default-700/50 dark:placeholder:text-white/60'
+                      'placeholder:text-default-700/50 dark:placeholder:text-white/60',
                     ],
                     innerWrapper: 'bg-transparent',
                     inputWrapper: [
@@ -132,41 +132,41 @@ export default function WebLoginPage() {
                       'dark:hover:bg-default/70',
                       'group-data-[focus=true]:bg-default-100/50',
                       'dark:group-data-[focus=true]:bg-default/60',
-                      '!cursor-text'
-                    ]
+                      '!cursor-text',
+                    ],
                   }}
                   isDisabled={isLoading}
-                  label="Token"
-                  placeholder="请输入token"
-                  radius="lg"
-                  size="lg"
+                  label='Token'
+                  placeholder='请输入token'
+                  radius='lg'
+                  size='lg'
                   startContent={
-                    <IoKeyOutline className="text-black/50 mb-0.5 dark:text-white/90 text-slate-400 pointer-events-none flex-shrink-0" />
+                    <IoKeyOutline className='text-black/50 mb-0.5 dark:text-white/90 text-slate-400 pointer-events-none flex-shrink-0' />
                   }
                   value={tokenValue}
                   onChange={(e) => setTokenValue(e.target.value)}
                   onClear={() => setTokenValue('')}
                 />
               </form>
-              <div className="text-center text-small text-default-600 dark:text-default-400 px-2">
+              <div className='text-center text-small text-default-600 dark:text-default-400 px-2'>
                 💡 提示：请从 NapCat 启动日志中查看登录密钥
               </div>
               <Button
-                className="mx-10 mt-10 text-lg py-7"
-                color="primary"
+                className='mx-10 mt-10 text-lg py-7'
+                color='primary'
                 isLoading={isLoading}
-                radius="full"
-                size="lg"
-                variant="shadow"
+                radius='full'
+                size='lg'
+                variant='shadow'
                 onPress={onSubmit}
               >
                 {!isLoading && (
                   <Image
-                    alt="logo"
+                    alt='logo'
                     classNames={{
-                      wrapper: '-ml-8'
+                      wrapper: '-ml-8',
                     }}
-                    height="2em"
+                    height='2em'
                     src={logo}
                   />
                 )}
@@ -177,5 +177,5 @@ export default function WebLoginPage() {
         </div>
       </PureLayout>
     </>
-  )
+  );
 }
diff --git a/napcat.webui/src/provider.tsx b/napcat.webui/src/provider.tsx
index 8589bdb5..8d17399a 100644
--- a/napcat.webui/src/provider.tsx
+++ b/napcat.webui/src/provider.tsx
@@ -1,8 +1,8 @@
-import { HeroUIProvider } from '@heroui/system'
-import { useNavigate } from 'react-router-dom'
+import { HeroUIProvider } from '@heroui/system';
+import { useNavigate } from 'react-router-dom';
 
-export function Provider({ children }: { children: React.ReactNode }) {
-  const navigate = useNavigate()
+export function Provider ({ children }: { children: React.ReactNode }) {
+  const navigate = useNavigate();
 
-  return <HeroUIProvider navigate={navigate}>{children}</HeroUIProvider>
+  return <HeroUIProvider navigate={navigate}>{children}</HeroUIProvider>;
 }
diff --git a/napcat.webui/src/store/index.ts b/napcat.webui/src/store/index.ts
index 4528cbea..379ea2a4 100644
--- a/napcat.webui/src/store/index.ts
+++ b/napcat.webui/src/store/index.ts
@@ -1,16 +1,16 @@
-import { configureStore } from '@reduxjs/toolkit'
+import { configureStore } from '@reduxjs/toolkit';
 
-import configSlice from './modules/config'
+import configSlice from './modules/config';
 
 const store = configureStore({
   reducer: {
-    config: configSlice
-  }
-})
+    config: configSlice,
+  },
+});
 
-export default store
+export default store;
 
 // Infer the `RootState` and `AppDispatch` types from the store itself
-export type RootState = ReturnType<typeof store.getState>
+export type RootState = ReturnType<typeof store.getState>;
 // Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
-export type AppDispatch = typeof store.dispatch
+export type AppDispatch = typeof store.dispatch;
diff --git a/napcat.webui/src/store/modules/config.ts b/napcat.webui/src/store/modules/config.ts
index 2ff4eb6d..dd0db7c4 100644
--- a/napcat.webui/src/store/modules/config.ts
+++ b/napcat.webui/src/store/modules/config.ts
@@ -1,6 +1,6 @@
-import { PayloadAction, createSlice } from '@reduxjs/toolkit'
+import { PayloadAction, createSlice } from '@reduxjs/toolkit';
 
-import type { RootState } from '@/store'
+import type { RootState } from '@/store';
 
 interface ConfigState {
   value: OneBotConfig
@@ -13,26 +13,26 @@ const initialState: ConfigState = {
       httpClients: [],
       httpSseServers: [],
       websocketServers: [],
-      websocketClients: []
+      websocketClients: [],
     },
     musicSignUrl: '',
     enableLocalFile2Url: false,
-    parseMultMsg: true
-  }
-}
+    parseMultMsg: true,
+  },
+};
 
 export const configSlice = createSlice({
   name: 'config',
   initialState,
   reducers: {
     updateConfig: (state, action: PayloadAction<OneBotConfig>) => {
-      state.value = action.payload
-    }
-  }
-})
+      state.value = action.payload;
+    },
+  },
+});
 
-export const { updateConfig } = configSlice.actions
+export const { updateConfig } = configSlice.actions;
 
-export const selectCount = (state: RootState) => state.config.value
+export const selectCount = (state: RootState) => state.config.value;
 
-export default configSlice.reducer
+export default configSlice.reducer;
diff --git a/napcat.webui/src/types/hitokoto.d.ts b/napcat.webui/src/types/hitokoto.d.ts
index 3d5097ed..39af6110 100644
--- a/napcat.webui/src/types/hitokoto.d.ts
+++ b/napcat.webui/src/types/hitokoto.d.ts
@@ -10,7 +10,7 @@ type HitokitoType =
   | 'i' /** 诗词 */
   | 'j' /** 网易云 */
   | 'k' /** 哲学 */
-  | 'l' /** 抖机灵 */
+  | 'l'; /** 抖机灵 */
 
 interface IHitokoto {
   id: number
diff --git a/napcat.webui/src/types/index.ts b/napcat.webui/src/types/index.ts
index e752577f..37b9aa0b 100644
--- a/napcat.webui/src/types/index.ts
+++ b/napcat.webui/src/types/index.ts
@@ -1,9 +1,9 @@
-import { ImgHTMLAttributes, SVGProps } from 'react'
+import { ImgHTMLAttributes, SVGProps } from 'react';
 
 export type IconSvgProps = SVGProps<SVGSVGElement> & {
   size?: number
-}
+};
 
 export type IconImageProps = ImgHTMLAttributes<HTMLImageElement> & {
   size?: number
-}
+};
diff --git a/napcat.webui/src/types/onebot/api.ts b/napcat.webui/src/types/onebot/api.ts
index f2b86b49..ac056ac3 100644
--- a/napcat.webui/src/types/onebot/api.ts
+++ b/napcat.webui/src/types/onebot/api.ts
@@ -1,4 +1,4 @@
-import { OB11NodeSegment, OB11Segment } from './segment'
+import { OB11NodeSegment, OB11Segment } from './segment';
 
 export const enum Action {
   /** 发送私聊消息 */
@@ -100,7 +100,7 @@ export const enum Action {
   /** 设置精华消息 */
   setEssenceMsg = 'set_essence_msg',
   /** 删除精华消息 */
-  deleteEssenceMsg = 'delete_essence_msg'
+  deleteEssenceMsg = 'delete_essence_msg',
 }
 
 /** Api请求参数 */
diff --git a/napcat.webui/src/types/onebot/event.ts b/napcat.webui/src/types/onebot/event.ts
index 5b6ac5c4..057fa4e0 100644
--- a/napcat.webui/src/types/onebot/event.ts
+++ b/napcat.webui/src/types/onebot/event.ts
@@ -1,10 +1,10 @@
-import { OB11Segment } from './segment'
+import { OB11Segment } from './segment';
 
 /** 性别枚举 */
 export const enum OB11Sex {
   Male = 'male',
   Female = 'female',
-  Unknown = 'unknown'
+  Unknown = 'unknown',
 }
 
 /** OneBot11消息类型枚举 */
@@ -14,13 +14,13 @@ export const enum OB11Event {
   Request = 'request',
   MetaEvent = 'meta_event',
   /** go-cqhttp拓展 自身事件上报 */
-  MessageSent = 'message_sent'
+  MessageSent = 'message_sent',
 }
 
 /** 消息事件类型 */
 export const enum OB11MessageType {
   Private = 'private',
-  Group = 'group'
+  Group = 'group',
 }
 
 /** 消息子类型 */
@@ -30,7 +30,7 @@ export const enum OB11MessageSubType {
   Other = 'other',
   Normal = 'normal',
   Anonymous = 'anonymous',
-  Notice = 'notice'
+  Notice = 'notice',
 }
 
 /** 通知事件枚举 */
@@ -60,13 +60,13 @@ export const enum OB11NoticeType {
   /** 精华 */
   GroupEssence = 'essence',
   /** 群名片更新 */
-  GroupCard = 'group_card'
+  GroupCard = 'group_card',
 }
 
 /** 请求事件类型 */
 export const enum OB11RequestType {
   Friend = 'friend',
-  Group = 'group'
+  Group = 'group',
 }
 
 export interface FriendSender {
@@ -169,7 +169,7 @@ export interface OB11GroupMessage extends MessageBase {
 }
 
 /** 消息事件 */
-export type OB11Message = OB11PrivateMessage | OB11GroupMessage
+export type OB11Message = OB11PrivateMessage | OB11GroupMessage;
 
 /** 通知事件基类 */
 export interface NoticeBase extends OB11EventBase {
@@ -411,7 +411,7 @@ export type OB11Notice =
   | OneBot11GroupMessageReaction
   | OneBot11GroupMessageReactionLagrange
   | OneBot11GroupEssence
-  | OneBot11GroupCard
+  | OneBot11GroupCard;
 
 /** 请求事件基类 */
 export interface RequestBase extends OB11EventBase {
@@ -448,7 +448,7 @@ export interface OneBot11GroupRequest extends RequestBase {
 }
 
 /** 请求事件 */
-export type OB11Request = OneBot11FriendRequest | OneBot11GroupRequest
+export type OB11Request = OneBot11FriendRequest | OneBot11GroupRequest;
 
 /** 元事件基类 */
 export interface MetaEventBase extends OB11EventBase {
@@ -478,6 +478,6 @@ export interface OneBot11Heartbeat extends MetaEventBase {
 }
 
 /** 元事件 */
-export type OB11Meta = OneBot11Lifecycle | OneBot11Heartbeat
+export type OB11Meta = OneBot11Lifecycle | OneBot11Heartbeat;
 /** 全部事件 */
-export type OB11AllEvent = OB11Message | OB11Notice | OB11Request | OB11Meta
+export type OB11AllEvent = OB11Message | OB11Notice | OB11Request | OB11Meta;
diff --git a/napcat.webui/src/types/onebot/index.ts b/napcat.webui/src/types/onebot/index.ts
index ef17b2fb..c3dc023e 100644
--- a/napcat.webui/src/types/onebot/index.ts
+++ b/napcat.webui/src/types/onebot/index.ts
@@ -1,5 +1,5 @@
-import { Request } from './api'
-import { OB11AllEvent } from './event'
+import { Request } from './api';
+import { OB11AllEvent } from './event';
 
 /**
  * @file onebot协议相关类型定义
@@ -7,13 +7,13 @@ import { OB11AllEvent } from './event'
  * @description 与onebot协议相关的类型定义
  * 来源 KarinJS
  */
-export * from './api'
-export * from './segment'
-export * from './event'
+export * from './api';
+export * from './segment';
+export * from './event';
 
-export type AllOB11RequestKeys = keyof Request
+export type AllOB11RequestKeys = keyof Request;
 
-export type AllOBRequestValues = Request[AllOB11RequestKeys]
+export type AllOBRequestValues = Request[AllOB11RequestKeys];
 
 export interface RequestResponse<
   T extends AllOB11RequestKeys = AllOB11RequestKeys
@@ -26,4 +26,4 @@ export interface RequestResponse<
   echo: string
 }
 
-export type AllOB11WsResponse = OB11AllEvent | RequestResponse
+export type AllOB11WsResponse = OB11AllEvent | RequestResponse;
diff --git a/napcat.webui/src/types/onebot/segment.ts b/napcat.webui/src/types/onebot/segment.ts
index e050b936..ae61742b 100644
--- a/napcat.webui/src/types/onebot/segment.ts
+++ b/napcat.webui/src/types/onebot/segment.ts
@@ -21,7 +21,7 @@ export type OB11SegmentType =
   | 'node'
   | 'xml'
   | 'json'
-  | 'file'
+  | 'file';
 
 export interface Segment {
   type: OB11SegmentType
@@ -238,7 +238,7 @@ export type OB11SegmentBase =
   | ForwardSegment
   | XmlSegment
   | JsonSegment
-  | FileSegment
+  | FileSegment;
 
 /** 合并转发已有消息节点消息段 */
 export interface DirectNodeSegment extends Segment {
@@ -262,7 +262,7 @@ export interface CustomNodeSegments extends Segment {
 }
 
 /** 合并转发消息段 */
-export type OB11NodeSegment = DirectNodeSegment | CustomNodeSegments
+export type OB11NodeSegment = DirectNodeSegment | CustomNodeSegments;
 
 /** OneBot11消息段 */
-export type OB11Segment = OB11SegmentBase | OB11NodeSegment
+export type OB11Segment = OB11SegmentBase | OB11NodeSegment;
diff --git a/napcat.webui/src/types/onebot_conf.d.ts b/napcat.webui/src/types/onebot_conf.d.ts
index 0453f334..d945f696 100644
--- a/napcat.webui/src/types/onebot_conf.d.ts
+++ b/napcat.webui/src/types/onebot_conf.d.ts
@@ -9,7 +9,7 @@ interface AdapterConfig extends AdapterConfigInner {
   [key: string]: string | boolean | number
 }
 
-type MessageFormat = 'array' | 'string'
+type MessageFormat = 'array' | 'string';
 
 interface HttpServerConfig extends AdapterConfig {
   port: number
diff --git a/napcat.webui/src/types/user.d.ts b/napcat.webui/src/types/user.d.ts
index a5fcc293..95c9e1f9 100644
--- a/napcat.webui/src/types/user.d.ts
+++ b/napcat.webui/src/types/user.d.ts
@@ -3,7 +3,7 @@ export enum NTSex {
   GENDER_UNKOWN = 0,
   GENDER_MALE = 1,
   GENDER_FEMALE = 2,
-  GENDER_PRIVACY = 255
+  GENDER_PRIVACY = 255,
 }
 
 // 好友分类类型
@@ -171,7 +171,7 @@ interface CommonExt {
 // 好友列表请求类型枚举
 export enum BuddyListReqType {
   KNOMAL,
-  KLETTER
+  KLETTER,
 }
 
 // 图片信息
@@ -200,7 +200,7 @@ export interface SimpleInfo {
 }
 
 // 好友类型
-export type FriendV2 = SimpleInfo
+export type FriendV2 = SimpleInfo;
 
 // 自身状态信息
 export interface SelfStatusInfo {
@@ -322,12 +322,12 @@ export interface SelfInfo extends User {
 }
 
 // 好友类型
-export type Friend = User
+export type Friend = User;
 
 // 业务键枚举
 export enum BizKey {
   KPRIVILEGEICON = 0,
-  KPHOTOWALL = 1
+  KPHOTOWALL = 1,
 }
 
 // 根据UIN获取用户详细信息
@@ -346,7 +346,7 @@ export interface UserDetailInfoByUin {
 // 用户详细信息来源枚举
 export enum UserDetailSource {
   KDB,
-  KSERVER
+  KSERVER,
 }
 
 // 个人资料业务类型枚举
@@ -355,5 +355,5 @@ export enum ProfileBizType {
   KBASEEXTEND = 1,
   KVAS = 2,
   KQZONE = 3,
-  KOTHER = 4
+  KOTHER = 4,
 }
diff --git a/napcat.webui/src/utils/music.ts b/napcat.webui/src/utils/music.ts
index e207567b..6936b0d6 100644
--- a/napcat.webui/src/utils/music.ts
+++ b/napcat.webui/src/utils/music.ts
@@ -1,11 +1,11 @@
-import { PlayMode } from '@/const/enum'
+import { PlayMode } from '@/const/enum';
 
-import WebUIManager from '@/controllers/webui_manager'
+import WebUIManager from '@/controllers/webui_manager';
 import type {
   FinalMusic,
   Music163ListResponse,
-  Music163URLResponse
-} from '@/types/music'
+  Music163URLResponse,
+} from '@/types/music';
 
 /**
  * 获取网易云音乐歌单
@@ -13,17 +13,17 @@ import type {
  * @returns 歌单信息
  */
 export const get163MusicList = async (id: string) => {
-  let res = await WebUIManager.proxy<Music163ListResponse>(
+  const res = await WebUIManager.proxy<Music163ListResponse>(
     'https://wavesgame.top/playlist/track/all?id=' + id
-  )
+  );
   // const res = await request.get<Music163ListResponse>(
   //   `https://wavesgame.top/playlist/track/all?id=${id}`
   // )
   if (res?.data?.code !== 200) {
-    throw new Error('获取歌曲列表失败')
+    throw new Error('获取歌曲列表失败');
   }
-  return res.data
-}
+  return res.data;
+};
 
 /**
  * 获取歌曲地址
@@ -32,29 +32,29 @@ export const get163MusicList = async (id: string) => {
  */
 export const getSongsURL = async (ids: number[]) => {
   const _ids = ids.reduce((prev, cur, index) => {
-    const groupIndex = Math.floor(index / 10)
+    const groupIndex = Math.floor(index / 10);
     if (!prev[groupIndex]) {
-      prev[groupIndex] = []
+      prev[groupIndex] = [];
     }
-    prev[groupIndex].push(cur)
-    return prev
-  }, [] as number[][])
+    prev[groupIndex].push(cur);
+    return prev;
+  }, [] as number[][]);
   const res = await Promise.all(
     _ids.map(async (id) => {
       const res = await WebUIManager.proxy<Music163URLResponse>(
         `https://wavesgame.top/song/url?id=${id.join(',')}`
-      )
+      );
       if (res?.data?.code !== 200) {
-        throw new Error('获取歌曲地址失败')
+        throw new Error('获取歌曲地址失败');
       }
-      return res.data.data
+      return res.data.data;
     })
-  )
+  );
   const result = res.reduce((prev, cur) => {
-    return prev.concat(...cur)
-  }, [])
-  return result
-}
+    return prev.concat(...cur);
+  }, []);
+  return result;
+};
 
 /**
  * 获取网易云音乐歌单歌曲
@@ -62,26 +62,26 @@ export const getSongsURL = async (ids: number[]) => {
  * @returns 歌曲信息
  */
 export const get163MusicListSongs = async (id: string) => {
-  const listRes = await get163MusicList(id)
-  const songs = listRes.songs.map((song) => song.id)
-  const songsRes = await getSongsURL(songs)
-  const finalMusic: FinalMusic[] = []
+  const listRes = await get163MusicList(id);
+  const songs = listRes.songs.map((song) => song.id);
+  const songsRes = await getSongsURL(songs);
+  const finalMusic: FinalMusic[] = [];
   for (let i = 0; i < listRes.songs.length; i++) {
-    const song = listRes.songs[i]
-    const music = songsRes.find((s) => s.id === song.id)
-    const songURL = music?.url
+    const song = listRes.songs[i];
+    const music = songsRes.find((s) => s.id === song.id);
+    const songURL = music?.url;
     if (songURL) {
       finalMusic.push({
         id: song.id,
         url: songURL.replace(/http:\/\//, '//').replace(/https:\/\//, '//'),
         title: song.name,
         artist: song.ar.map((p) => p.name).join('/'),
-        cover: song.al.picUrl
-      })
+        cover: song.al.picUrl,
+      });
     }
   }
-  return finalMusic
-}
+  return finalMusic;
+};
 
 /**
  * 获取随机音乐
@@ -90,13 +90,13 @@ export const get163MusicListSongs = async (id: string) => {
  * @returns 随机音乐id
  */
 export const getRandomMusic = (ids: number[], currentId: number): number => {
-  const randomIndex = Math.floor(Math.random() * ids.length)
-  const randomId = ids[randomIndex]
+  const randomIndex = Math.floor(Math.random() * ids.length);
+  const randomId = ids[randomIndex];
   if (randomId === currentId) {
-    return getRandomMusic(ids, currentId)
+    return getRandomMusic(ids, currentId);
   }
-  return randomId
-}
+  return randomId;
+};
 
 /**
  * 获取下一首音乐id
@@ -109,14 +109,14 @@ export const getNextMusic = (
   currentId: number,
   mode: PlayMode
 ): number => {
-  const ids = musics.map((music) => music.id)
+  const ids = musics.map((music) => music.id);
   if (mode === PlayMode.Loop) {
-    const currentIndex = ids.findIndex((id) => id === currentId)
-    const nextIndex = currentIndex + 1
-    return ids[nextIndex] || ids[0]
+    const currentIndex = ids.findIndex((id) => id === currentId);
+    const nextIndex = currentIndex + 1;
+    return ids[nextIndex] || ids[0];
   }
   if (mode === PlayMode.Random) {
-    return getRandomMusic(ids, currentId)
+    return getRandomMusic(ids, currentId);
   }
-  return currentId
-}
+  return currentId;
+};
diff --git a/napcat.webui/src/utils/object.ts b/napcat.webui/src/utils/object.ts
index 1839a00d..0102c2f0 100644
--- a/napcat.webui/src/utils/object.ts
+++ b/napcat.webui/src/utils/object.ts
@@ -5,7 +5,7 @@
  */
 export const deepClone = <T>(obj: T): T => {
   // 我们这里只只用于配置项，所以直接使用字符串就行
-  const newObj = JSON.parse(JSON.stringify(obj))
+  const newObj = JSON.parse(JSON.stringify(obj));
 
-  return newObj
-}
+  return newObj;
+};
diff --git a/napcat.webui/src/utils/onebot.ts b/napcat.webui/src/utils/onebot.ts
index d09a4e5c..1503cbd3 100644
--- a/napcat.webui/src/utils/onebot.ts
+++ b/napcat.webui/src/utils/onebot.ts
@@ -1,8 +1,8 @@
-import type { Op } from 'quill'
+import type { Op } from 'quill';
 
-import type { EmojiValue } from '@/components/chat_input/formats/emoji_blot'
-import type { ImageValue } from '@/components/chat_input/formats/image_blot'
-import type { ReplyBlockValue } from '@/components/chat_input/formats/reply_blot'
+import type { EmojiValue } from '@/components/chat_input/formats/emoji_blot';
+import type { ImageValue } from '@/components/chat_input/formats/image_blot';
+import type { ReplyBlockValue } from '@/components/chat_input/formats/reply_blot';
 
 import {
   type AllOB11WsResponse,
@@ -14,8 +14,8 @@ import {
   type OB11PrivateMessage,
   type OB11Segment,
   type OneBot11Lifecycle,
-  type RequestResponse
-} from '../types/onebot'
+  type RequestResponse,
+} from '../types/onebot';
 
 /**
  * 获取事件名称
@@ -26,19 +26,19 @@ import {
 export const getEventName = (event: OB11AllEvent['post_type']): string => {
   switch (event) {
     case 'message':
-      return '消息'
+      return '消息';
     case 'notice':
-      return '通知'
+      return '通知';
     case 'request':
-      return '请求'
+      return '请求';
     case 'meta_event':
-      return '元事件'
+      return '元事件';
     case 'message_sent':
-      return '消息上报'
+      return '消息上报';
     default:
-      return '未知'
+      return '未知';
   }
-}
+};
 
 /**
  * 获取生命周期事件名称
@@ -51,15 +51,15 @@ export const getLifecycleName = (
 ): string => {
   switch (event) {
     case 'enable':
-      return '启用'
+      return '启用';
     case 'disable':
-      return '停用'
+      return '停用';
     case 'connect':
-      return '连接'
+      return '连接';
     default:
-      return '未知'
+      return '未知';
   }
-}
+};
 
 /**
  * 获取生命周期事件Chip颜色
@@ -72,15 +72,15 @@ export const getLifecycleColor = (
 ): 'success' | 'danger' | 'default' => {
   switch (event) {
     case 'enable':
-      return 'success'
+      return 'success';
     case 'disable':
-      return 'danger'
+      return 'danger';
     case 'connect':
-      return 'success'
+      return 'success';
     default:
-      return 'default'
+      return 'default';
   }
-}
+};
 
 /**
  * 判断 OneBot WS 返回值是否为事件
@@ -89,8 +89,8 @@ export const getLifecycleColor = (
  * @description 用于判断 OneBot WS 返回值是否为事件
  */
 export const isOB11Event = (data: AllOB11WsResponse): data is OB11AllEvent => {
-  return 'post_type' in data
-}
+  return 'post_type' in data;
+};
 
 /**
  * 判断 OneBot WS 返回值是否为请求响应
@@ -101,8 +101,8 @@ export const isOB11Event = (data: AllOB11WsResponse): data is OB11AllEvent => {
 export const isOB11RequestResponse = (
   data: AllOB11WsResponse
 ): data is RequestResponse => {
-  return 'status' in data && 'retcode' in data
-}
+  return 'status' in data && 'retcode' in data;
+};
 
 /**
  * 获取请求响应状态文本
@@ -115,15 +115,15 @@ export const getResponseStatusText = (
 ): string => {
   switch (status) {
     case 'ok':
-      return '成功'
+      return '成功';
     case 'failed':
-      return '失败'
+      return '失败';
     case 'async':
-      return '异步'
+      return '异步';
     default:
-      return '未知'
+      return '未知';
   }
-}
+};
 
 /**
  * 获取请求响应状态颜色
@@ -136,15 +136,15 @@ export const getResponseStatusColor = (
 ): 'success' | 'danger' | 'warning' | 'default' => {
   switch (status) {
     case 'ok':
-      return 'success'
+      return 'success';
     case 'failed':
-      return 'danger'
+      return 'danger';
     case 'async':
-      return 'warning'
+      return 'warning';
     default:
-      return 'default'
+      return 'default';
   }
-}
+};
 
 /**
  * 获取通知类型名称
@@ -155,33 +155,33 @@ export const getResponseStatusColor = (
 export const getNoticeTypeName = (type: OB11Notice['notice_type']): string => {
   switch (type) {
     case OB11NoticeType.GroupUpload:
-      return '群文件上传'
+      return '群文件上传';
     case OB11NoticeType.GroupAdmin:
-      return '群管理员变动'
+      return '群管理员变动';
     case OB11NoticeType.GroupDecrease:
-      return '群成员减少'
+      return '群成员减少';
     case OB11NoticeType.GroupIncrease:
-      return '群成员增加'
+      return '群成员增加';
     case OB11NoticeType.GroupBan:
-      return '群禁言'
+      return '群禁言';
     case OB11NoticeType.FriendAdd:
-      return '好友添加'
+      return '好友添加';
     case OB11NoticeType.GroupRecall:
-      return '群消息撤回'
+      return '群消息撤回';
     case OB11NoticeType.FriendRecall:
-      return '好友消息撤回'
+      return '好友消息撤回';
     case OB11NoticeType.Notify:
-      return '通知'
+      return '通知';
     case OB11NoticeType.GroupMsgEmojiLike:
-      return '群消息表情回应'
+      return '群消息表情回应';
     case OB11NoticeType.GroupEssence:
-      return '群消息精华'
+      return '群消息精华';
     case OB11NoticeType.GroupCard:
-      return '群名片更新'
+      return '群名片更新';
     default:
-      return '未知'
+      return '未知';
   }
-}
+};
 
 /**
  * 判断 OneBot 消息是否为私聊消息
@@ -192,8 +192,8 @@ export const getNoticeTypeName = (type: OB11Notice['notice_type']): string => {
 export const isOB11PrivateMessage = (
   data: OB11Message
 ): data is OB11PrivateMessage => {
-  return data.message_type === 'private'
-}
+  return data.message_type === 'private';
+};
 
 /**
  * 判断 OneBot 消息是否为群消息
@@ -204,8 +204,8 @@ export const isOB11PrivateMessage = (
 export const isOB11GroupMessage = (
   data: OB11Message
 ): data is OB11GroupMessage => {
-  return data.message_type === 'group'
-}
+  return data.message_type === 'group';
+};
 
 /**
  * 将 Quill Delta 转换为 OneBot 消息
@@ -217,32 +217,32 @@ export const quillToMessage = (op: Op) => {
   let message: OB11Segment = {
     type: 'text',
     data: {
-      text: op.insert as string
-    }
-  }
+      text: op.insert as string,
+    },
+  };
   if (typeof op.insert !== 'string') {
     if (op.insert?.image) {
       message = {
         type: 'image',
         data: {
-          file: (op.insert.image as ImageValue).src
-        }
-      }
+          file: (op.insert.image as ImageValue).src,
+        },
+      };
     } else if (op.insert?.emoji) {
       message = {
         type: 'face',
         data: {
-          id: (op.insert.emoji as EmojiValue).id
-        }
-      }
+          id: (op.insert.emoji as EmojiValue).id,
+        },
+      };
     } else if (op.insert?.reply) {
       message = {
         type: 'reply',
         data: {
-          id: (op.insert.reply as ReplyBlockValue).messageId
-        }
-      }
+          id: (op.insert.reply as ReplyBlockValue).messageId,
+        },
+      };
     }
   }
-  return message
-}
+  return message;
+};
diff --git a/napcat.webui/src/utils/qq.ts b/napcat.webui/src/utils/qq.ts
index 3fe882bf..b53e8131 100644
--- a/napcat.webui/src/utils/qq.ts
+++ b/napcat.webui/src/utils/qq.ts
@@ -1,4 +1,4 @@
-import type { QQItem } from '@/components/quick_login'
+import type { QQItem } from '@/components/quick_login';
 
 /**
  * 判断 QQ 快速登录列表项是否为 QQ 信息
@@ -9,5 +9,5 @@ import type { QQItem } from '@/components/quick_login'
 export const isQQQuickNewItem = (
   data?: QQItem | LoginListItem | null
 ): data is LoginListItem => {
-  return !!data && 'nickName' in data && 'faceUrl' in data
-}
+  return !!data && 'nickName' in data && 'faceUrl' in data;
+};
diff --git a/napcat.webui/src/utils/request.ts b/napcat.webui/src/utils/request.ts
index 89bd865f..7c5bf6fc 100644
--- a/napcat.webui/src/utils/request.ts
+++ b/napcat.webui/src/utils/request.ts
@@ -1,64 +1,64 @@
-import axios from 'axios'
+import axios from 'axios';
 
-import key from '@/const/key'
+import key from '@/const/key';
 
 export const serverRequest = axios.create({
-  timeout: 5000
-})
+  timeout: 5000,
+});
 
 export const request = axios.create({
-  timeout: 10000
-})
+  timeout: 10000,
+});
 
 export const requestServerWithFetch = async (
   url: string,
   options: RequestInit
 ) => {
-  const token = localStorage.getItem(key.token)
+  const token = localStorage.getItem(key.token);
 
   if (token) {
     options.headers = {
       ...options.headers,
-      Authorization: `Bearer ${JSON.parse(token)}`
-    }
+      Authorization: `Bearer ${JSON.parse(token)}`,
+    };
   }
 
-  const baseURL = '/api'
+  const baseURL = '/api';
 
-  const response = await fetch(baseURL + url, options)
+  const response = await fetch(baseURL + url, options);
 
-  return response
-}
+  return response;
+};
 
 serverRequest.interceptors.request.use((config) => {
-  const baseURL = '/api'
+  const baseURL = '/api';
 
-  config.baseURL = baseURL
+  config.baseURL = baseURL;
 
-  const token = localStorage.getItem(key.token)
+  const token = localStorage.getItem(key.token);
 
   if (token) {
-    config.headers['Authorization'] = `Bearer ${JSON.parse(token)}`
+    config.headers['Authorization'] = `Bearer ${JSON.parse(token)}`;
   }
 
-  return config
-})
+  return config;
+});
 
 serverRequest.interceptors.response.use((response) => {
   // 如果是流式传输的文件
   if (response.headers['content-type'] === 'application/octet-stream') {
-    return response
+    return response;
   }
   if (response.data.code !== 0) {
     if (response.data.message === 'Unauthorized') {
-      const token = localStorage.getItem(key.token)
+      const token = localStorage.getItem(key.token);
       if (token && JSON.parse(token)) {
-        localStorage.removeItem(key.token)
-        window.location.reload()
+        localStorage.removeItem(key.token);
+        window.location.reload();
       }
     }
-    throw new Error(response.data.message)
+    throw new Error(response.data.message);
   }
 
-  return response
-})
+  return response;
+});
diff --git a/napcat.webui/src/utils/terminal.ts b/napcat.webui/src/utils/terminal.ts
index b6b27471..048b220f 100644
--- a/napcat.webui/src/utils/terminal.ts
+++ b/napcat.webui/src/utils/terminal.ts
@@ -1,4 +1,4 @@
-import { LogLevel } from '@/const/enum'
+import { LogLevel } from '@/const/enum';
 
 export const gradientText = (
   text: string,
@@ -8,90 +8,90 @@ export const gradientText = (
   italic: boolean = false,
   underline: boolean = false
 ) => {
-  const steps = text.length
+  const steps = text.length;
   const colorStep = startColor.map(
     (start, index) => (endColor[index] - start) / steps
-  )
+  );
 
-  let coloredText = ''
+  let coloredText = '';
   for (let i = 0; i < steps; i++) {
     const color = startColor.map((start, index) =>
       Math.round(start + colorStep[index] * i)
-    )
-    coloredText += `\x1b[38;2;${color[0]};${color[1]};${color[2]}m${text[i]}`
+    );
+    coloredText += `\x1b[38;2;${color[0]};${color[1]};${color[2]}m${text[i]}`;
   }
 
   // 添加样式
   if (bold) {
-    coloredText = `\x1b[1m${coloredText}`
+    coloredText = `\x1b[1m${coloredText}`;
   }
   if (italic) {
-    coloredText = `\x1b[3m${coloredText}`
+    coloredText = `\x1b[3m${coloredText}`;
   }
   if (underline) {
-    coloredText = `\x1b[4m${coloredText}`
+    coloredText = `\x1b[4m${coloredText}`;
   }
 
-  return coloredText + '\x1b[0m' // 重置颜色和样式
-}
+  return coloredText + '\x1b[0m'; // 重置颜色和样式
+};
 
 export const logColor = {
   [LogLevel.DEBUG]: 'green',
   [LogLevel.INFO]: 'black',
   [LogLevel.WARN]: 'yellow',
   [LogLevel.ERROR]: 'red',
-  [LogLevel.FATAL]: 'red'
-} as const
+  [LogLevel.FATAL]: 'red',
+} as const;
 
 export const colorizeLogLevel = (content: string) => {
-  const logLevel = content.match(/\[[a-zA-Z]+\]/) || []
-  let _content = content
+  const logLevel = content.match(/\[[a-zA-Z]+\]/) || [];
+  let _content = content;
   const level =
     (logLevel?.[0]?.replace('[', '').replace(']', '') as LogLevel) ??
-    LogLevel.INFO
-  const color = logColor[level]
+    LogLevel.INFO;
+  const color = logColor[level];
   switch (color) {
     case 'green':
-      _content = `\x1b[32m${_content}\x1b[0m`
-      break
+      _content = `\x1b[32m${_content}\x1b[0m`;
+      break;
     case 'black':
-      _content = `\x1b[30m${_content}\x1b[0m`
-      break
+      _content = `\x1b[30m${_content}\x1b[0m`;
+      break;
     case 'yellow':
-      _content = `\x1b[33m${_content}\x1b[0m`
-      break
+      _content = `\x1b[33m${_content}\x1b[0m`;
+      break;
     case 'red':
-      _content = `\x1b[31m${_content}\x1b[0m`
-      break
+      _content = `\x1b[31m${_content}\x1b[0m`;
+      break;
     default:
-      _content = `\x1b[30m${_content}\x1b[0m`
+      _content = `\x1b[30m${_content}\x1b[0m`;
   }
   return {
     content: _content,
-    level
-  }
-}
+    level,
+  };
+};
 
 export const colorizeLogLevelWithTag = (content: string, level: LogLevel) => {
-  let _content = content
+  let _content = content;
   switch (level) {
     case LogLevel.DEBUG:
-      _content = `\x1b[32m[DEBUG] ${content}\x1b[0m`
-      break
+      _content = `\x1b[32m[DEBUG] ${content}\x1b[0m`;
+      break;
     case LogLevel.INFO:
-      _content = `\x1b[30m[INFO] ${content}\x1b[0m`
-      break
+      _content = `\x1b[30m[INFO] ${content}\x1b[0m`;
+      break;
     case LogLevel.WARN:
-      _content = `\x1b[33m[WARN] ${content}\x1b[0m`
-      break
+      _content = `\x1b[33m[WARN] ${content}\x1b[0m`;
+      break;
     case LogLevel.ERROR:
-      _content = `\x1b[31m[ERROR] ${content}\x1b[0m`
-      break
+      _content = `\x1b[31m[ERROR] ${content}\x1b[0m`;
+      break;
     case LogLevel.FATAL:
-      _content = `\x1b[31m[FATAL] ${content}\x1b[0m`
-      break
+      _content = `\x1b[31m[FATAL] ${content}\x1b[0m`;
+      break;
     default:
-      _content = `\x1b[30m${content}\x1b[0m`
+      _content = `\x1b[30m${content}\x1b[0m`;
   }
-  return _content
-}
+  return _content;
+};
diff --git a/napcat.webui/src/utils/theme.ts b/napcat.webui/src/utils/theme.ts
index 5f3c91eb..65303c4c 100644
--- a/napcat.webui/src/utils/theme.ts
+++ b/napcat.webui/src/utils/theme.ts
@@ -1,17 +1,17 @@
-import { request } from './request'
+import { request } from './request';
 
-const style = document.createElement('style')
-document.head.appendChild(style)
+const style = document.createElement('style');
+document.head.appendChild(style);
 
-export function loadTheme() {
+export function loadTheme () {
   request('/files/theme.css?_t=' + Date.now())
     .then((res) => res.data)
     .then((css) => {
-      style.innerHTML = css
+      style.innerHTML = css;
     })
     .catch(() => {
-      console.error('Failed to load theme.css')
-    })
+      console.error('Failed to load theme.css');
+    });
 }
 
 export const colorKeys = [
@@ -121,21 +121,21 @@ export const colorKeys = [
   '--heroui-divider',
   '--heroui-code-background',
   '--heroui-strong',
-  '--heroui-code-mdx'
-] as const
+  '--heroui-code-mdx',
+] as const;
 
 export const generateTheme = (theme: ThemeConfig, validField?: string) => {
-  let css = `:root ${validField ? `.${validField}` : ''}, .light ${validField ? `.${validField}` : ''}, [data-theme="light"] ${validField ? `.${validField}` : ''} {`
+  let css = `:root ${validField ? `.${validField}` : ''}, .light ${validField ? `.${validField}` : ''}, [data-theme="light"] ${validField ? `.${validField}` : ''} {`;
   for (const key in theme.light) {
-    const _key = key as keyof ThemeConfigItem
-    css += `${_key}: ${theme.light[_key]};`
+    const _key = key as keyof ThemeConfigItem;
+    css += `${_key}: ${theme.light[_key]};`;
   }
-  css += `}`
-  css += `.dark ${validField ? `.${validField}` : ''}, [data-theme="dark"] ${validField ? `.${validField}` : ''} {`
+  css += '}';
+  css += `.dark ${validField ? `.${validField}` : ''}, [data-theme="dark"] ${validField ? `.${validField}` : ''} {`;
   for (const key in theme.dark) {
-    const _key = key as keyof ThemeConfigItem
-    css += `${_key}: ${theme.dark[_key]};`
+    const _key = key as keyof ThemeConfigItem;
+    css += `${_key}: ${theme.dark[_key]};`;
   }
-  css += `}`
-  return css
-}
+  css += '}';
+  return css;
+};
diff --git a/napcat.webui/src/utils/time.ts b/napcat.webui/src/utils/time.ts
index aaf4a069..251b3874 100644
--- a/napcat.webui/src/utils/time.ts
+++ b/napcat.webui/src/utils/time.ts
@@ -4,7 +4,7 @@
  * @returns Promise<void>
  */
 export const sleep = (ms: number) =>
-  new Promise((resolve) => setTimeout(resolve, ms))
+  new Promise((resolve) => setTimeout(resolve, ms));
 
 /**
  * 获取距离当前时间的发布时间
@@ -13,26 +13,26 @@ export const sleep = (ms: number) =>
  * @example getReleaseTime("2021-10-10T10:10:10Z") => "1天前"
  */
 export const getReleaseTime = (time: string) => {
-  const releaseTime = new Date(time).getTime()
-  const nowTime = new Date().getTime()
-  const diffTime = nowTime - releaseTime
-  const diffDays = Math.floor(diffTime / (24 * 3600 * 1000))
-  const diffHours = Math.floor((diffTime % (24 * 3600 * 1000)) / (3600 * 1000))
-  const diffMinutes = Math.floor((diffTime % (3600 * 1000)) / (60 * 1000))
-  const diffSeconds = Math.floor((diffTime % (60 * 1000)) / 1000)
+  const releaseTime = new Date(time).getTime();
+  const nowTime = new Date().getTime();
+  const diffTime = nowTime - releaseTime;
+  const diffDays = Math.floor(diffTime / (24 * 3600 * 1000));
+  const diffHours = Math.floor((diffTime % (24 * 3600 * 1000)) / (3600 * 1000));
+  const diffMinutes = Math.floor((diffTime % (3600 * 1000)) / (60 * 1000));
+  const diffSeconds = Math.floor((diffTime % (60 * 1000)) / 1000);
 
   if (diffDays > 0) {
-    return `${diffDays}天前`
+    return `${diffDays}天前`;
   } else if (diffHours > 0) {
-    return `${diffHours}小时前`
+    return `${diffHours}小时前`;
   } else if (diffMinutes > 0) {
-    return `${diffMinutes}分钟前`
+    return `${diffMinutes}分钟前`;
   } else {
-    return `${diffSeconds}秒前`
+    return `${diffSeconds}秒前`;
   }
-}
+};
 
-const formatNumber = (n: number) => n.toString().padStart(2, '0')
+const formatNumber = (n: number) => n.toString().padStart(2, '0');
 /**
  * 将时间戳转换为日期字符串
  * @param timestamp 时间戳
@@ -40,13 +40,13 @@ const formatNumber = (n: number) => n.toString().padStart(2, '0')
  * @example timestampToDateString(163383301) => "2021-10-10 10:10:10"
  */
 export const timestampToDateString = (timestamp: number) => {
-  timestamp = timestamp * 1000
-  const date = new Date(timestamp)
-  const year = date.getFullYear()
-  const month = date.getMonth() + 1
-  const day = date.getDate()
-  const hour = date.getHours()
-  const minute = date.getMinutes()
-  const second = date.getSeconds()
-  return `${year}-${formatNumber(month)}-${formatNumber(day)} ${formatNumber(hour)}:${formatNumber(minute)}:${formatNumber(second)}`
-}
+  timestamp = timestamp * 1000;
+  const date = new Date(timestamp);
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  const hour = date.getHours();
+  const minute = date.getMinutes();
+  const second = date.getSeconds();
+  return `${year}-${formatNumber(month)}-${formatNumber(day)} ${formatNumber(hour)}:${formatNumber(minute)}:${formatNumber(second)}`;
+};
diff --git a/napcat.webui/src/utils/url.ts b/napcat.webui/src/utils/url.ts
index 697b71ac..b5912787 100644
--- a/napcat.webui/src/utils/url.ts
+++ b/napcat.webui/src/utils/url.ts
@@ -1,15 +1,15 @@
-import { AxiosResponse } from 'axios'
+import { AxiosResponse } from 'axios';
 
 /**
  * 打开链接
  * @param url 链接地址
  * @param newTab 是否在新标签页打开
  */
-export function openUrl(url: string, newTab = true) {
+export function openUrl (url: string, newTab = true) {
   if (newTab) {
-    window.open(url)
+    window.open(url);
   } else {
-    window.location.href = url
+    window.location.href = url;
   }
 }
 
@@ -18,21 +18,21 @@ export function openUrl(url: string, newTab = true) {
  * @param response Axios响应
  * @returns 标准的HTTP报文
  */
-export function parseAxiosResponse(
+export function parseAxiosResponse (
   response: AxiosResponse,
   http_version: string = 'HTTP/1.1'
 ) {
   if (!response?.status) {
-    return 'No response'
+    return 'No response';
   }
-  const statusLine = `${http_version} ${response.status} ${response.statusText}`
+  const statusLine = `${http_version} ${response.status} ${response.statusText}`;
   const headers = Object.entries(response.headers)
     .map(([key, value]) => `${key}: ${value}`)
-    .join('\r\n')
+    .join('\r\n');
   const body = response.data
     ? `\r\n\r\n${typeof response.data === 'string' ? JSON.stringify(JSON.parse(response.data), null, 2) : JSON.stringify(response.data, null, 2)}`
-    : ''
-  return `${statusLine}\r\n${headers}${body}`
+    : '';
+  return `${statusLine}\r\n${headers}${body}`;
 }
 
 /**
@@ -41,5 +41,5 @@ export function parseAxiosResponse(
  * @returns 是否为URI
  */
 export const isURI = (uri: string) => {
-  return /^(http|https|file):\/\/.*/.test(uri)
-}
+  return /^(http|https|file):\/\/.*/.test(uri);
+};
diff --git a/napcat.webui/src/utils/version.ts b/napcat.webui/src/utils/version.ts
index 9763f82c..4d53afeb 100644
--- a/napcat.webui/src/utils/version.ts
+++ b/napcat.webui/src/utils/version.ts
@@ -4,16 +4,16 @@
  * @returns 版本号数字
  */
 export const versionToNumber = (version: string): number => {
-  const finalVersionString = version.replace(/^v/, '')
+  const finalVersionString = version.replace(/^v/, '');
 
-  const versionArray = finalVersionString.split('.')
+  const versionArray = finalVersionString.split('.');
   const versionNumber =
     parseInt(versionArray[2]) +
     parseInt(versionArray[1]) * 100 +
-    parseInt(versionArray[0]) * 10000
+    parseInt(versionArray[0]) * 10000;
 
-  return versionNumber
-}
+  return versionNumber;
+};
 
 /**
  * 比较版本号
@@ -25,12 +25,12 @@ export const versionToNumber = (version: string): number => {
  * -1: version1 < version2
  */
 export const compareVersion = (version1: string, version2: string): number => {
-  const versionNumber1 = versionToNumber(version1)
-  const versionNumber2 = versionToNumber(version2)
+  const versionNumber1 = versionToNumber(version1);
+  const versionNumber2 = versionToNumber(version2);
 
   if (versionNumber1 === versionNumber2) {
-    return 0
+    return 0;
   }
 
-  return versionNumber1 > versionNumber2 ? 1 : -1
-}
+  return versionNumber1 > versionNumber2 ? 1 : -1;
+};
diff --git a/napcat.webui/src/utils/zod.ts b/napcat.webui/src/utils/zod.ts
index 1bfe1c98..afe7c087 100644
--- a/napcat.webui/src/utils/zod.ts
+++ b/napcat.webui/src/utils/zod.ts
@@ -19,10 +19,10 @@ import {
   ZodTuple,
   ZodTypeAny,
   ZodUnion,
-  ZodUnknown
-} from 'zod'
+  ZodUnknown,
+} from 'zod';
 
-export type LiteralValue = string | number | boolean | null
+export type LiteralValue = string | number | boolean | null;
 
 export type ParsedSchema = {
   name?: string
@@ -32,37 +32,37 @@ export type ParsedSchema = {
   enum?: LiteralValue[]
   children?: ParsedSchema[]
   description?: string
-}
+};
 
-export function parse(
+export function parse (
   schema: ZodTypeAny,
   name?: string,
   isRoot = true
 ): ParsedSchema | ParsedSchema[] {
-  const optional = schema.isOptional ? schema.isOptional() : false
-  const description = schema.description
+  const optional = schema.isOptional ? schema.isOptional() : false;
+  const description = schema.description;
   if (schema instanceof ZodString) {
-    return { name, type: 'string', optional, description }
+    return { name, type: 'string', optional, description };
   }
 
   if (schema instanceof ZodNumber) {
-    return { name, type: 'number', optional, description }
+    return { name, type: 'number', optional, description };
   }
 
   if (schema instanceof ZodBoolean) {
-    return { name, type: 'boolean', optional, description }
+    return { name, type: 'boolean', optional, description };
   }
 
   if (schema instanceof ZodBigInt) {
-    return { name, type: 'bigint', optional, description }
+    return { name, type: 'bigint', optional, description };
   }
 
   if (schema instanceof ZodDate) {
-    return { name, type: 'date', optional, description }
+    return { name, type: 'date', optional, description };
   }
 
   if (schema instanceof ZodUnknown) {
-    return { name, type: 'unknown', optional, description }
+    return { name, type: 'unknown', optional, description };
   }
 
   if (schema instanceof ZodLiteral) {
@@ -71,8 +71,8 @@ export function parse(
       type: 'value',
       optional,
       value: schema._def.value as LiteralValue,
-      description
-    }
+      description,
+    };
   }
 
   if (schema instanceof ZodEnum) {
@@ -81,16 +81,16 @@ export function parse(
       type: 'enum',
       optional,
       enum: schema._def.values as LiteralValue[],
-      description
-    }
-    return data
+      description,
+    };
+    return data;
   }
 
   if (schema instanceof ZodUnion) {
-    const options = schema._def.options
+    const options = schema._def.options;
     const parsedOptions = options.map(
       (option: ZodTypeAny) => parse(option, undefined, false) as ParsedSchema
-    )
+    );
 
     const basicTypes = [
       'string',
@@ -100,42 +100,42 @@ export function parse(
       'date',
       'unknown',
       'value',
-      'enum'
-    ]
+      'enum',
+    ];
     const optionTypes: (string | string[])[] = parsedOptions.map(
       (option: ParsedSchema) => option.type
-    )
+    );
     const isAllBasicTypes = optionTypes.every((type) =>
       basicTypes.includes(Array.isArray(type) ? type[0] : type)
-    )
+    );
 
     if (isAllBasicTypes) {
       const types = [
         ...new Set(
           optionTypes.flatMap((type) => (Array.isArray(type) ? type[0] : type))
-        )
-      ]
-      return { name, type: types, optional, description }
+        ),
+      ];
+      return { name, type: types, optional, description };
     } else {
       return {
         name,
         type: 'union',
         optional,
         children: parsedOptions,
-        description
-      }
+        description,
+      };
     }
   }
 
   if (schema instanceof ZodObject) {
-    const shape = schema._def.shape()
+    const shape = schema._def.shape();
     const children = Object.keys(shape).map((key) =>
       parse(shape[key], key, false)
-    ) as ParsedSchema[]
+    ) as ParsedSchema[];
     if (isRoot) {
-      return children
+      return children;
     } else {
-      return { name, type: 'object', optional, children, description }
+      return { name, type: 'object', optional, children, description };
     }
   }
 
@@ -144,120 +144,120 @@ export function parse(
       schema._def.type,
       undefined,
       false
-    ) as ParsedSchema
+    ) as ParsedSchema;
     return {
       name,
       type: 'array',
       optional,
       children: Array.isArray(childSchema) ? childSchema : [childSchema],
-      description
-    }
+      description,
+    };
   }
 
   if (schema instanceof ZodNullable || schema instanceof ZodDefault) {
-    return parse(schema._def.innerType, name)
+    return parse(schema._def.innerType, name);
   }
 
   if (schema instanceof ZodOptional) {
-    const data = parse(schema._def.innerType, name)
+    const data = parse(schema._def.innerType, name);
     if (Array.isArray(data)) {
       data.forEach((item) => {
-        item.optional = true
-        item.description = description
-      })
+        item.optional = true;
+        item.description = description;
+      });
     } else {
-      data.optional = true
-      data.description = description
+      data.optional = true;
+      data.description = description;
     }
-    return data
+    return data;
   }
 
   if (schema instanceof ZodRecord) {
-    const valueType = parse(schema._def.valueType) as ParsedSchema
+    const valueType = parse(schema._def.valueType) as ParsedSchema;
     return {
       name,
       type: 'record',
       optional,
       children: [valueType],
-      description
-    }
+      description,
+    };
   }
 
   if (schema instanceof ZodTuple) {
     const items: ParsedSchema[] = schema._def.items.map((item: ZodTypeAny) =>
       parse(item)
-    )
-    return { name, type: 'tuple', optional, children: items, description }
+    );
+    return { name, type: 'tuple', optional, children: items, description };
   }
 
   if (schema instanceof ZodNull) {
-    return { name, type: 'null', optional, description }
+    return { name, type: 'null', optional, description };
   }
 
   if (schema instanceof ZodLazy) {
-    return parse(schema._def.getter(), name)
+    return parse(schema._def.getter(), name);
   }
 
   if (schema instanceof ZodEffects) {
-    return parse(schema._def.schema, name)
+    return parse(schema._def.schema, name);
   }
 
-  return { name, type: 'unknown', optional, description }
+  return { name, type: 'unknown', optional, description };
 }
 
 const generateDefault = (schema: ZodSchema): unknown => {
   if (schema instanceof ZodObject) {
-    const obj: Record<string, unknown> = {}
+    const obj: Record<string, unknown> = {};
     for (const key in schema.shape) {
-      obj[key] = generateDefault(schema.shape[key])
+      obj[key] = generateDefault(schema.shape[key]);
     }
-    return obj
+    return obj;
   }
   if (schema instanceof ZodString) {
-    return 'textValue'
+    return 'textValue';
   }
   if (schema instanceof ZodNumber) {
-    return 0
+    return 0;
   }
   if (schema instanceof ZodBoolean) {
-    return false
+    return false;
   }
   if (schema instanceof ZodArray) {
-    return []
+    return [];
   }
   if (schema instanceof ZodUnion) {
-    return generateDefault(schema._def.options[0])
+    return generateDefault(schema._def.options[0]);
   }
   if (schema instanceof ZodEnum) {
-    return schema._def.values[0]
+    return schema._def.values[0];
   }
   if (schema instanceof ZodLiteral) {
-    return schema._def.value
+    return schema._def.value;
   }
   if (schema instanceof ZodNullable) {
-    return null
+    return null;
   }
   if (schema instanceof ZodOptional) {
-    return generateDefault(schema._def.innerType)
+    return generateDefault(schema._def.innerType);
   }
   if (schema instanceof ZodRecord) {
-    return {}
+    return {};
   }
   if (schema instanceof ZodTuple) {
-    return schema._def.items.map((item: ZodTypeAny) => generateDefault(item))
+    return schema._def.items.map((item: ZodTypeAny) => generateDefault(item));
   }
   if (schema instanceof ZodNull) {
-    return null
+    return null;
   }
   if (schema instanceof ZodLazy) {
-    return generateDefault(schema._def.getter())
+    return generateDefault(schema._def.getter());
   }
   if (schema instanceof ZodEffects) {
-    return generateDefault(schema._def.schema)
+    return generateDefault(schema._def.schema);
   }
-  return null
-}
+  return null;
+};
 
 export const generateDefaultJson = (schema: ZodSchema) => {
-  return JSON.stringify(generateDefault(schema), null, 2)
-}
+  return JSON.stringify(generateDefault(schema), null, 2);
+};