NapCatQQ source snapshot

packages/napcat-webui-frontend/src/App.tsx

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

packages/napcat-webui-frontend/src/components/ColorPicker.tsx

@@ -0,0 +1,410 @@
+import { Input } from '@heroui/input';
+import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover';
+import React, { useCallback, useEffect, useRef, useState, memo } from 'react';
+
+interface ColorPickerProps {
+  color: string;
+  onChange: (color: string) => void;
+}
+
+// 转换 HSL 字符串到对象
+const parseHsl = (hslStr: string) => {
+  const match = hslStr.match(/hsl\((\d+(?:\.\d+)?),\s*(\d+(?:\.\d+)?)%,\s*(\d+(?:\.\d+)?)%\)/);
+  if (match) {
+    return { h: parseFloat(match[1]), s: parseFloat(match[2]), l: parseFloat(match[3]) };
+  }
+  return { h: 0, s: 0, l: 0 };
+};
+
+// 转换 HEX 到 HSL
+const hexToHsl = (hex: string) => {
+  let r = 0; let g = 0; let b = 0;
+  if (hex.length === 4) {
+    r = parseInt('0x' + hex[1] + hex[1]);
+    g = parseInt('0x' + hex[2] + hex[2]);
+    b = parseInt('0x' + hex[3] + hex[3]);
+  } else if (hex.length === 7) {
+    r = parseInt('0x' + hex[1] + hex[2]);
+    g = parseInt('0x' + hex[3] + hex[4]);
+    b = parseInt('0x' + hex[5] + hex[6]);
+  }
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  const cmin = Math.min(r, g, b);
+  const cmax = Math.max(r, g, b);
+  const delta = cmax - cmin;
+  let h = 0;
+  let s = 0;
+  let l = 0;
+
+  if (delta === 0) h = 0;
+  else if (cmax === r) h = ((g - b) / delta) % 6;
+  else if (cmax === g) h = (b - r) / delta + 2;
+  else h = (r - g) / delta + 4;
+
+  h = Math.round(h * 60);
+  if (h < 0) h += 360;
+
+  l = (cmax + cmin) / 2;
+  s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
+  s = +(s * 100).toFixed(1);
+  l = +(l * 100).toFixed(1);
+
+  return { h, s, l };
+};
+
+// 转换 HSL 到 HEX
+const hslToHex = (h: number, s: number, l: number) => {
+  s /= 100;
+  l /= 100;
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+  const m = l - c / 2;
+  let r = 0; let g = 0; let b = 0;
+
+  if (h >= 0 && h < 60) {
+    r = c; g = x; b = 0;
+  } else if (h >= 60 && h < 120) {
+    r = x; g = c; b = 0;
+  } else if (h >= 120 && h < 180) {
+    r = 0; g = c; b = x;
+  } else if (h >= 180 && h < 240) {
+    r = 0; g = x; b = c;
+  } else if (h >= 240 && h < 300) {
+    r = x; g = 0; b = c;
+  } else if (h >= 300 && h < 360) {
+    r = c; g = 0; b = x;
+  }
+  r = Math.round((r + m) * 255);
+  g = Math.round((g + m) * 255);
+  b = Math.round((b + m) * 255);
+
+  const toHex = (n: number) => {
+    const hex = n.toString(16);
+    return hex.length === 1 ? '0' + hex : hex;
+  };
+  return '#' + toHex(r) + toHex(g) + toHex(b);
+};
+
+interface PanelProps {
+  hsl: { h: number, s: number, l: number; };
+  onChange: (newHsl: { h: number, s: number, l: number; }) => void;
+}
+
+// 饱和度/亮度面板
+const SatLightPanel = memo(({ hsl, onChange }: PanelProps) => {
+  const panelRef = useRef<HTMLDivElement>(null);
+  const [isDragging, setIsDragging] = useState(false);
+
+  const hslRef = useRef(hsl);
+  useEffect(() => { hslRef.current = hsl; }, [hsl]);
+
+  const updateColor = useCallback((clientX: number, clientY: number) => {
+    if (!panelRef.current) return;
+    const rect = panelRef.current.getBoundingClientRect();
+    const x = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+    const y = Math.max(0, Math.min(1, (clientY - rect.top) / rect.height));
+
+    const s_hsv = x;
+    const v_hsv = 1 - y;
+
+    const l_hsl = v_hsv * (1 - s_hsv / 2);
+    let s_hsl = 0;
+    if (l_hsl === 0 || l_hsl === 1) {
+      s_hsl = 0;
+    } else {
+      s_hsl = (v_hsv - l_hsl) / Math.min(l_hsl, 1 - l_hsl);
+    }
+
+    onChange({ h: hslRef.current.h, s: s_hsl * 100, l: l_hsl * 100 });
+  }, [onChange]);
+
+  const handleStart = (clientX: number, clientY: number) => {
+    setIsDragging(true);
+    updateColor(clientX, clientY);
+  };
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    e.preventDefault();
+    handleStart(e.clientX, e.clientY);
+  };
+
+  const handleTouchStart = (e: React.TouchEvent) => {
+    e.preventDefault();
+    const touch = e.touches[0];
+    handleStart(touch.clientX, touch.clientY);
+  };
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (isDragging) {
+        e.preventDefault();
+        updateColor(e.clientX, e.clientY);
+      }
+    };
+
+    const handleTouchMove = (e: TouchEvent) => {
+      if (isDragging) {
+        e.preventDefault();
+        const touch = e.touches[0];
+        updateColor(touch.clientX, touch.clientY);
+      }
+    };
+
+    const handleEnd = () => {
+      setIsDragging(false);
+    };
+
+    if (isDragging) {
+      window.addEventListener('mousemove', handleMouseMove);
+      window.addEventListener('mouseup', handleEnd);
+      window.addEventListener('touchmove', handleTouchMove, { passive: false });
+      window.addEventListener('touchend', handleEnd);
+    }
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleEnd);
+      window.removeEventListener('touchmove', handleTouchMove);
+      window.removeEventListener('touchend', handleEnd);
+    };
+  }, [isDragging, updateColor]);
+
+  const l_val = hsl.l / 100;
+  const s_val = hsl.s / 100;
+  const v_hsv = l_val + s_val * Math.min(l_val, 1 - l_val);
+  const s_hsv = v_hsv === 0 ? 0 : 2 * (1 - l_val / v_hsv);
+
+  const markerX = s_hsv * 100;
+  const markerY = (1 - v_hsv) * 100;
+
+  return (
+    <div
+      ref={panelRef}
+      className='w-full h-40 rounded-lg relative cursor-crosshair overflow-hidden shadow-inner touch-none'
+      style={{
+        backgroundColor: 'hsl(' + hsl.h + ', 100%, 50%)',
+        backgroundImage: 'linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent)',
+      }}
+      onMouseDown={handleMouseDown}
+      onTouchStart={handleTouchStart}
+    >
+      <div
+        className='w-4 h-4 rounded-full border-2 border-white shadow-md absolute transform -translate-x-1/2 -translate-y-1/2 pointer-events-none'
+        style={{
+          left: markerX + '%',
+          top: markerY + '%',
+          backgroundColor: 'hsl(' + hsl.h + ', ' + hsl.s + '%, ' + hsl.l + '%)',
+        }}
+      />
+    </div>
+  );
+});
+
+SatLightPanel.displayName = 'SatLightPanel';
+
+const HueSlider = memo(({ hsl, onChange }: PanelProps) => {
+  const sliderRef = useRef<HTMLDivElement>(null);
+  const [isDragging, setIsDragging] = useState(false);
+
+  const hslRef = useRef(hsl);
+  useEffect(() => { hslRef.current = hsl; }, [hsl]);
+
+  const updateHue = useCallback((clientX: number) => {
+    if (!sliderRef.current) return;
+    const rect = sliderRef.current.getBoundingClientRect();
+    let x = (clientX - rect.left) / rect.width;
+    x = Math.max(0, Math.min(1, x));
+    onChange({ ...hslRef.current, h: x * 360 });
+  }, [onChange]);
+
+  const handleStart = (clientX: number) => {
+    setIsDragging(true);
+    updateHue(clientX);
+  };
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    e.preventDefault();
+    handleStart(e.clientX);
+  };
+
+  const handleTouchStart = (e: React.TouchEvent) => {
+    e.preventDefault();
+    const touch = e.touches[0];
+    handleStart(touch.clientX);
+  };
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (isDragging) {
+        e.preventDefault();
+        updateHue(e.clientX);
+      }
+    };
+
+    const handleTouchMove = (e: TouchEvent) => {
+      if (isDragging) {
+        e.preventDefault();
+        const touch = e.touches[0];
+        updateHue(touch.clientX);
+      }
+    };
+
+    const handleEnd = () => {
+      setIsDragging(false);
+    };
+
+    if (isDragging) {
+      window.addEventListener('mousemove', handleMouseMove);
+      window.addEventListener('mouseup', handleEnd);
+      window.addEventListener('touchmove', handleTouchMove, { passive: false });
+      window.addEventListener('touchend', handleEnd);
+    }
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleEnd);
+      window.removeEventListener('touchmove', handleTouchMove);
+      window.removeEventListener('touchend', handleEnd);
+    };
+  }, [isDragging, updateHue]);
+
+  return (
+    <div
+      ref={sliderRef}
+      className='w-full h-4 rounded-full relative cursor-pointer mt-3 shadow-inner touch-none'
+      style={{
+        background: 'linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)',
+      }}
+      onMouseDown={handleMouseDown}
+      onTouchStart={handleTouchStart}
+    >
+      <div
+        className='w-4 h-4 rounded-full border-2 border-white shadow-md absolute top-0 transform -translate-x-1/2 pointer-events-none bg-white'
+        style={{ left: (hsl.h / 360) * 100 + '%' }}
+      />
+    </div>
+  );
+});
+
+HueSlider.displayName = 'HueSlider';
+
+const ColorPicker: React.FC<ColorPickerProps> = ({ color, onChange }) => {
+  const [hsl, setHsl] = useState(parseHsl(color));
+  const [hex, setHex] = useState(hslToHex(hsl.h, hsl.s, hsl.l));
+  const isDraggingRef = useRef(false);
+
+  useEffect(() => {
+    if (isDraggingRef.current) return;
+    const newHsl = parseHsl(color);
+    if (Math.abs(newHsl.h - hsl.h) > 0.1 || Math.abs(newHsl.s - hsl.s) > 0.1 || Math.abs(newHsl.l - hsl.l) > 0.1) {
+      setHsl(newHsl);
+      setHex(hslToHex(newHsl.h, newHsl.s, newHsl.l));
+    }
+  }, [color]);
+
+  const handleHslChange = useCallback((newHsl: { h: number, s: number, l: number; }) => {
+    setHsl(newHsl);
+    setHex(hslToHex(newHsl.h, newHsl.s, newHsl.l));
+    onChange('hsl(' + Math.round(newHsl.h) + ', ' + Math.round(newHsl.s) + '%, ' + Math.round(newHsl.l) + '%)');
+  }, [onChange]);
+
+  const handleHexChange = (value: string) => {
+    setHex(value);
+    if (/^#[0-9A-Fa-f]{6}$/.test(value)) {
+      const newHsl = hexToHsl(value);
+      handleHslChange(newHsl);
+    }
+  };
+
+  return (
+    <Popover triggerScaleOnOpen={false} placement='bottom'>
+      <PopoverTrigger>
+        <div className='flex items-center gap-2 cursor-pointer group'>
+          <div
+            className='w-10 h-10 rounded-lg shadow-sm border-2 border-default-200 transition-transform group-hover:scale-105'
+            style={{ background: color }}
+          />
+          <div className='flex flex-col'>
+            <span className='text-xs font-mono text-default-500'>{hex}</span>
+            <span className='text-xs font-mono text-default-400'>HSL({Math.round(hsl.h)}, {Math.round(hsl.s)}%, {Math.round(hsl.l)}%)</span>
+          </div>
+        </div>
+      </PopoverTrigger>
+      <PopoverContent
+        className='w-72 p-4 bg-background/80 backdrop-blur-xl border border-default-200 shadow-2xl rounded-2xl'
+        onMouseDownCapture={() => { isDraggingRef.current = true; }}
+        onMouseUpCapture={() => { isDraggingRef.current = false; }}
+        onTouchStartCapture={() => { isDraggingRef.current = true; }}
+        onTouchEndCapture={() => { isDraggingRef.current = false; }}
+      >
+        <div className='flex flex-col w-full gap-2'>
+          <div className='flex justify-between items-center mb-2'>
+            <span className='text-sm font-bold text-default-700'>选择颜色</span>
+            <div
+              className='w-6 h-6 rounded-full border border-default-200 shadow-sm'
+              style={{ background: color }}
+            />
+          </div>
+
+          <SatLightPanel hsl={hsl} onChange={handleHslChange} />
+          <HueSlider hsl={hsl} onChange={handleHslChange} />
+
+          <div className='grid grid-cols-4 gap-2 mt-2 items-center'>
+            <span className='text-xs text-default-500 col-span-1'>HEX</span>
+            <Input
+              size='sm'
+              variant='flat'
+              value={hex}
+              onChange={(e) => handleHexChange(e.target.value)}
+              className='col-span-3 font-mono'
+              classNames={{
+                input: 'text-xs uppercase',
+                inputWrapper: 'h-8 min-h-8',
+              }}
+            />
+          </div>
+
+          <div className='grid grid-cols-4 gap-2 items-center'>
+            <span className='text-xs text-default-500 col-span-1'>HSL</span>
+            <div className='col-span-3 flex gap-1'>
+              <Input
+                size='sm' variant='flat' type='number'
+                value={Math.round(hsl.h).toString()}
+                onChange={(e) => handleHslChange({ ...hsl, h: Number(e.target.value) })}
+                endContent={<span className='text-xs text-default-400'>H</span>}
+                classNames={{ input: 'text-xs', inputWrapper: 'h-8 min-h-8 px-1' }}
+              />
+              <Input
+                size='sm' variant='flat' type='number'
+                value={Math.round(hsl.s).toString()}
+                onChange={(e) => handleHslChange({ ...hsl, s: Number(e.target.value) })}
+                endContent={<span className='text-xs text-default-400'>S</span>}
+                classNames={{ input: 'text-xs', inputWrapper: 'h-8 min-h-8 px-1' }}
+              />
+              <Input
+                size='sm' variant='flat' type='number'
+                value={Math.round(hsl.l).toString()}
+                onChange={(e) => handleHslChange({ ...hsl, l: Number(e.target.value) })}
+                endContent={<span className='text-xs text-default-400'>L</span>}
+                classNames={{ input: 'text-xs', inputWrapper: 'h-8 min-h-8 px-1' }}
+              />
+            </div>
+          </div>
+
+          <div className='flex gap-1 mt-2 flex-wrap justify-between'>
+            {['#006FEE', '#17C964', '#F5A524', '#F31260', '#7828C8', '#000000', '#FFFFFF'].map((c) => (
+              <button
+                key={c}
+                className='w-6 h-6 rounded-full border border-default-200 shadow-sm transition-transform hover:scale-110 active:scale-95'
+                style={{ backgroundColor: c }}
+                onClick={() => handleHexChange(c)}
+              />
+            ))}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default ColorPicker;

packages/napcat-webui-frontend/src/components/button/add_button.tsx

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

packages/napcat-webui-frontend/src/components/button/save_buttons.tsx

@@ -0,0 +1,63 @@
+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;
+  reset: () => void;
+  refresh?: () => void;
+  isSubmitting: boolean;
+  className?: string;
+}
+
+const SaveButtons: React.FC<SaveButtonsProps> = ({
+  onSubmit,
+  reset,
+  isSubmitting,
+  refresh,
+  className,
+}) => (
+  <div
+    className={clsx(
+      'w-full flex flex-col justify-center gap-3',
+      className
+    )}
+  >
+    <div className='flex items-center justify-center gap-2 mt-5'>
+      <Button
+        radius='full'
+        variant='flat'
+        className='font-medium bg-default-100 text-default-600 dark:bg-default-50/50'
+        onPress={() => {
+          reset();
+          toast.success('重置成功');
+        }}
+      >
+        取消更改
+      </Button>
+      <Button
+        color='primary'
+        radius='full'
+        className='font-medium shadow-md shadow-primary/20'
+        isLoading={isSubmitting}
+        onPress={() => onSubmit()}
+      >
+        保存
+      </Button>
+      {refresh && (
+        <Button
+          isIconOnly
+          radius='full'
+          variant='flat'
+          className='text-default-500 bg-default-100 dark:bg-default-50/50'
+          onPress={() => refresh()}
+        >
+          <IoMdRefresh size={20} />
+        </Button>
+      )}
+    </div>
+  </div>
+);
+
+export default SaveButtons;

packages/napcat-webui-frontend/src/components/chat_input/components/audio_insert.tsx

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

packages/napcat-webui-frontend/src/components/chat_input/components/dice_insert.tsx

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

packages/napcat-webui-frontend/src/components/chat_input/components/emoji_picker.tsx

@@ -0,0 +1,83 @@
+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';
+
+const emojis = data.map((item) => {
+  return {
+    alt: item.QDes,
+    src: getUrl(item.QSid),
+    id: item.QSid,
+  } as EmojiValue;
+});
+
+export interface EmojiPickerProps {
+  onInsertEmoji: (emoji: EmojiValue) => void
+  onOpenChange: (open: boolean) => void
+}
+
+const EmojiPicker = ({ onInsertEmoji, onOpenChange }: EmojiPickerProps) => {
+  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
+    }
+  }, [isPopoverOpen]);
+
+  const loadEmojis = (index = 0, batchSize = 10) => {
+    if (index < emojis.length) {
+      setVisibleEmojis((prev) => [
+        ...prev,
+        ...emojis.slice(index, index + batchSize),
+      ]);
+      requestAnimationFrame(() => loadEmojis(index + batchSize, batchSize));
+    }
+  };
+  return (
+    <div ref={containerRef}>
+      <Popover
+        portalContainer={containerRef.current!}
+        shouldCloseOnScroll={false}
+        placement='right-start'
+        onOpenChange={(v) => {
+          onOpenChange(v);
+          setIsPopoverOpen(v);
+        }}
+      >
+        <Tooltip content='插入表情'>
+          <div className='max-w-fit'>
+            <PopoverTrigger>
+              <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'>
+          {visibleEmojis.map((emoji) => (
+            <Button
+              key={emoji.id}
+              color='primary'
+              variant='flat'
+              isIconOnly
+              radius='full'
+              onPress={() => onInsertEmoji(emoji)}
+            >
+              <Image src={emoji.src} alt={emoji.alt} className='w-6 h-6' />
+            </Button>
+          ))}
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+};
+
+export default EmojiPicker;

packages/napcat-webui-frontend/src/components/chat_input/components/file_insert.tsx

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

packages/napcat-webui-frontend/src/components/chat_input/components/image_insert.tsx

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

packages/napcat-webui-frontend/src/components/chat_input/components/music_insert.tsx

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

packages/napcat-webui-frontend/src/components/chat_input/components/reply_insert.tsx

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

packages/napcat-webui-frontend/src/components/chat_input/components/rps_insert.tsx

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

packages/napcat-webui-frontend/src/components/chat_input/components/show_structed_message.tsx

@@ -0,0 +1,33 @@
+import { Snippet } from '@heroui/snippet';
+
+import { OB11Segment } from '@/types/onebot';
+
+export interface ShowStructedMessageProps {
+  messages: OB11Segment[]
+}
+
+const ShowStructedMessage = ({ messages }: ShowStructedMessageProps) => {
+  return (
+    <Snippet
+      hideSymbol
+      codeString={JSON.stringify(messages, null, 2)}
+      tooltipProps={{
+        content: '点击复制',
+      }}
+      classNames={{
+        copyButton: 'self-start sticky top-0 right-0',
+      }}
+      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'>
+            {line}
+          </span>
+        ))}
+    </Snippet>
+  );
+};
+
+export default ShowStructedMessage;

packages/napcat-webui-frontend/src/components/chat_input/components/video_insert.tsx

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

packages/napcat-webui-frontend/src/components/chat_input/formats/emoji_blot.ts

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

packages/napcat-webui-frontend/src/components/chat_input/formats/image_blot.ts

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

packages/napcat-webui-frontend/src/components/chat_input/formats/reply_blot.ts

@@ -0,0 +1,43 @@
+import Quill from 'quill';
+
+// eslint-disable-next-line
+const BlockEmbed = Quill.import('blots/block/embed') as any
+export interface ReplyBlockValue {
+  messageId: string
+}
+class ReplyBlock extends BlockEmbed {
+  static blotName = 'reply';
+  static tagName = 'div';
+  static classNames = [
+    'p-2',
+    'select-none',
+    'bg-default-100',
+    'rounded-md',
+    '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 value (node: HTMLElement): ReplyBlockValue {
+    return {
+      messageId: node.getAttribute('data-message-id') || '',
+    };
+  }
+}
+
+export default ReplyBlock;

packages/napcat-webui-frontend/src/components/chat_input/index.tsx

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

packages/napcat-webui-frontend/src/components/chat_input/modal.tsx

@@ -0,0 +1,64 @@
+import { Button } from '@heroui/button';
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  useDisclosure,
+} from '@heroui/modal';
+
+import ChatInput from '.';
+
+interface ChatInputModalProps {
+  children?: (onOpen: () => void) => React.ReactNode;
+}
+
+export default function ChatInputModal ({ children }: ChatInputModalProps) {
+  const { isOpen, onOpen, onOpenChange } = useDisclosure();
+
+  return (
+    <>
+      {children
+        ? children(onOpen)
+        : (
+          <Button
+            onPress={onOpen}
+            color='primary'
+            radius='full'
+            variant='flat'
+            size='sm'
+            className='bg-primary/10 text-primary'
+          >
+            构造消息
+          </Button>
+        )}
+      <Modal
+        size='4xl'
+        scrollBehavior='inside'
+        isOpen={isOpen}
+        onOpenChange={onOpenChange}
+      >
+        <ModalContent>
+          {(onClose) => (
+            <>
+              <ModalHeader className='flex flex-col gap-1'>
+                构造消息
+              </ModalHeader>
+              <ModalBody className='overflow-y-auto'>
+                <div className='overflow-y-auto'>
+                  <ChatInput />
+                </div>
+              </ModalBody>
+              <ModalFooter>
+                <Button color='primary' onPress={onClose} variant='flat'>
+                  关闭
+                </Button>
+              </ModalFooter>
+            </>
+          )}
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}

packages/napcat-webui-frontend/src/components/code_editor.tsx

@@ -0,0 +1,160 @@
+import React, { useImperativeHandle, useEffect, useState } from 'react';
+import CodeMirror, { ReactCodeMirrorRef } from '@uiw/react-codemirror';
+import { json } from '@codemirror/lang-json';
+import { oneDark } from '@codemirror/theme-one-dark';
+import { useTheme } from '@/hooks/use-theme';
+import { EditorView } from '@codemirror/view';
+import clsx from 'clsx';
+
+const getLanguageExtension = (lang?: string) => {
+  switch (lang) {
+    case 'json': return json();
+    default: return [];
+  }
+};
+
+export interface CodeEditorProps {
+  value?: string;
+  defaultValue?: string;
+  language?: string;
+  defaultLanguage?: string;
+  onChange?: (value: string | undefined) => void;
+  height?: string;
+  options?: any;
+  onMount?: any;
+}
+
+export interface CodeEditorRef {
+  getValue: () => string;
+}
+
+const CodeEditor = React.forwardRef<CodeEditorRef, CodeEditorProps>((props, ref) => {
+  const { isDark } = useTheme();
+  const chromeless = !!props.options?.chromeless;
+
+  const [val, setVal] = useState(props.value || props.defaultValue || '');
+  const internalRef = React.useRef<ReactCodeMirrorRef>(null);
+
+  useEffect(() => {
+    if (props.value !== undefined) {
+      setVal(props.value);
+    }
+  }, [props.value]);
+
+  useImperativeHandle(ref, () => ({
+    getValue: () => {
+      // Prefer getting dynamic value from view, fallback to state
+      return internalRef.current?.view?.state.doc.toString() || val;
+    },
+  }));
+
+  const customTheme = EditorView.theme({
+    '&': {
+      fontSize: '14px',
+      height: '100% !important',
+      backgroundColor: 'transparent !important',
+    },
+    '&.cm-editor': {
+      backgroundColor: 'transparent !important',
+    },
+    '.cm-scroller': {
+      fontFamily: "var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace)",
+      lineHeight: '1.6',
+      overflow: 'auto !important',
+      height: '100% !important',
+      backgroundColor: 'transparent !important',
+    },
+    '.cm-gutters': {
+      backgroundColor: 'transparent !important',
+      borderRight: 'none',
+      color: isDark
+        ? 'hsl(var(--heroui-foreground-500) / 0.75)'
+        : 'hsl(var(--heroui-foreground-500) / 0.65)',
+    },
+    '.cm-gutterElement': {
+      paddingLeft: '12px',
+      paddingRight: '12px',
+    },
+    '.cm-activeLineGutter': {
+      backgroundColor: 'transparent !important',
+      color: isDark
+        ? 'hsl(var(--heroui-foreground) / 0.9) !important'
+        : 'hsl(var(--heroui-foreground) / 0.8) !important',
+    },
+    '.cm-content': {
+      color: 'hsl(var(--heroui-foreground) / 0.9)',
+      caretColor: 'hsl(var(--heroui-foreground) / 0.9)',
+      paddingTop: '12px',
+      paddingBottom: '12px',
+      backgroundColor: 'transparent !important',
+    },
+    '.cm-activeLine': {
+      backgroundColor: isDark
+        ? 'hsl(var(--heroui-foreground) / 0.08)'
+        : 'hsl(var(--heroui-foreground) / 0.06)',
+    },
+    '.cm-selectionMatch': {
+      backgroundColor: isDark
+        ? 'hsl(var(--heroui-foreground) / 0.16)'
+        : 'hsl(var(--heroui-foreground) / 0.12)',
+    },
+    // Syntax highlighting overrides for better readability
+    '.ͼo': {
+      // JSON property names - use a softer primary color
+      color: isDark
+        ? 'hsl(var(--heroui-primary) / 0.85)'
+        : 'hsl(var(--heroui-primary) / 0.75)',
+    },
+    '.ͼd': {
+      // Strings - softer green
+      color: isDark ? '#98c379cc' : '#50a14fcc',
+    },
+    '.ͼc': {
+      // Numbers - softer orange
+      color: isDark ? '#d19a66cc' : '#c18401cc',
+    },
+  });
+
+  const extensions = [
+    customTheme,
+    getLanguageExtension(props.language || props.defaultLanguage),
+    props.options?.wordWrap === 'on' ? EditorView.lineWrapping : [],
+    props.options?.readOnly ? EditorView.editable.of(false) : [],
+  ].flat();
+
+  return (
+    <div
+      style={{ fontSize: props.options?.fontSize || 14, height: props.height || '100%', display: 'flex', flexDirection: 'column' }}
+      className={clsx(
+        chromeless
+          ? 'overflow-hidden transition-colors bg-transparent'
+          : 'rounded-xl border overflow-hidden transition-colors backdrop-blur-sm',
+        !chromeless && (isDark
+          ? 'border-white/10 bg-white/5 text-default-100'
+          : 'border-white/40 dark:border-white/10 bg-white/60 dark:bg-black/20 text-default-700')
+      )}
+    >
+      <CodeMirror
+        ref={internalRef}
+        value={props.value ?? props.defaultValue}
+        height='100%'
+        className='h-full w-full [&_.cm-editor]:!bg-transparent [&_.cm-scroller]:!bg-transparent'
+        style={{ backgroundColor: 'transparent' }}
+        theme={isDark ? oneDark : 'light'}
+        extensions={extensions}
+        onChange={(value) => {
+          setVal(value);
+          props.onChange?.(value);
+        }}
+        readOnly={props.options?.readOnly}
+        basicSetup={{
+          lineNumbers: props.options?.lineNumbers !== 'off',
+          foldGutter: props.options?.folding !== false,
+          highlightActiveLine: props.options?.renderLineHighlight !== 'none',
+        }}
+      />
+    </div>
+  );
+});
+
+export default CodeEditor;

packages/napcat-webui-frontend/src/components/command_palette.tsx

@@ -0,0 +1,231 @@
+import { Button } from '@heroui/button';
+import { Input } from '@heroui/input';
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+} from '@heroui/modal';
+import clsx from 'clsx';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { TbCornerDownLeft, TbSearch } from 'react-icons/tb';
+
+export type CommandPaletteCommand = {
+  id: string;
+  title: string;
+  subtitle?: string;
+  group?: string;
+};
+
+export type CommandPaletteExecuteMode = 'open' | 'send';
+
+export interface CommandPaletteProps {
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  commands: CommandPaletteCommand[];
+  onExecute: (commandId: string, mode: CommandPaletteExecuteMode) => void;
+}
+
+const isMobileByViewport = () => {
+  try {
+    return window.innerWidth < 768;
+  } catch {
+    return false;
+  }
+};
+
+export default function CommandPalette (props: CommandPaletteProps) {
+  const { isOpen, onOpenChange, commands, onExecute } = props;
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const [query, setQuery] = useState('');
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [mobile, setMobile] = useState(false);
+
+  useEffect(() => {
+    const update = () => setMobile(isMobileByViewport());
+    update();
+    window.addEventListener('resize', update);
+    return () => window.removeEventListener('resize', update);
+  }, []);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    setQuery('');
+    setActiveIndex(0);
+    // 等 Modal 动画挂载后再 focus
+    const t = window.setTimeout(() => inputRef.current?.focus(), 50);
+    return () => window.clearTimeout(t);
+  }, [isOpen]);
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    const list = !q
+      ? commands
+      : commands.filter((c) => {
+        const hay = `${c.id} ${c.title} ${c.subtitle ?? ''} ${c.group ?? ''}`.toLowerCase();
+        return hay.includes(q);
+      });
+
+    // 简单：优先 path 前缀命中
+    if (!q) return list;
+    const starts = list.filter((c) => c.id.toLowerCase().startsWith(q));
+    const rest = list.filter((c) => !c.id.toLowerCase().startsWith(q));
+    return [...starts, ...rest];
+  }, [commands, query]);
+
+  useEffect(() => {
+    if (activeIndex >= filtered.length) setActiveIndex(0);
+  }, [filtered.length, activeIndex]);
+
+  const active = filtered[activeIndex];
+
+  const exec = (mode: CommandPaletteExecuteMode) => {
+    if (!active) return;
+    onExecute(active.id, mode);
+    onOpenChange(false);
+  };
+
+  const onKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setActiveIndex((i) => Math.min(i + 1, Math.max(0, filtered.length - 1)));
+      return;
+    }
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setActiveIndex((i) => Math.max(i - 1, 0));
+      return;
+    }
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      // Shift+Enter 仅打开；Enter 打开并发送
+      exec(e.shiftKey ? 'open' : 'send');
+      return;
+    }
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      onOpenChange(false);
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onOpenChange={onOpenChange}
+      size={mobile ? 'full' : '2xl'}
+      radius={mobile ? 'none' : 'lg'}
+      scrollBehavior='inside'
+      backdrop='blur'
+    >
+      <ModalContent>
+        {() => (
+          <>
+            <ModalHeader className={clsx(
+              'flex items-center gap-2',
+              mobile ? 'border-b border-default-200/50' : ''
+            )}
+            >
+              <span className='text-sm font-semibold'>命令面板</span>
+              <span className='text-xs text-default-400 font-normal hidden md:inline'>Ctrl/Cmd + K</span>
+            </ModalHeader>
+            <ModalBody className={clsx('gap-3', mobile ? 'p-3' : 'p-4')}>
+              <Input
+                ref={inputRef as any}
+                autoFocus
+                value={query}
+                onValueChange={setQuery}
+                onKeyDown={onKeyDown}
+                placeholder='输入 /set_xxx 或 描述…  Enter：打开并发送，Shift+Enter：仅打开'
+                startContent={<TbSearch className='opacity-40' size={16} />}
+                radius='lg'
+                variant='flat'
+                classNames={{
+                  inputWrapper: 'bg-content2/50 border border-default-200/50 dark:border-default-100/20',
+                  input: 'text-sm',
+                }}
+              />
+
+              <div className={clsx(
+                'rounded-xl border border-default-200/50 dark:border-default-100/20 overflow-hidden',
+                mobile ? 'flex-1 min-h-0' : 'max-h-[420px]'
+              )}
+              >
+                <div className={clsx(
+                  'divide-y divide-default-200/50 dark:divide-default-100/20 overflow-y-auto no-scrollbar',
+                  mobile ? 'h-full' : 'max-h-[420px]'
+                )}
+                >
+                  {filtered.length === 0 && (
+                    <div className='p-6 text-sm text-default-400'>没有匹配的接口</div>
+                  )}
+                  {filtered.map((c, idx) => (
+                    <button
+                      key={c.id}
+                      type='button'
+                      className={clsx(
+                        'w-full text-left px-4 py-3 transition-colors flex items-center gap-3',
+                        idx === activeIndex
+                          ? 'bg-primary/10'
+                          : 'hover:bg-default-100/50 dark:hover:bg-default-50/10'
+                      )}
+                      onMouseEnter={() => setActiveIndex(idx)}
+                      onClick={() => {
+                        setActiveIndex(idx);
+                        exec('open');
+                      }}
+                    >
+                      <div className='min-w-0 flex-1'>
+                        <div className='flex items-center gap-2 min-w-0'>
+                          <span className='text-xs font-mono text-default-500 truncate'>{c.id}</span>
+                          {c.group && (
+                            <span className='text-[10px] px-2 py-0.5 rounded-full bg-default-100/60 dark:bg-default-50/20 text-default-500'>
+                              {c.group}
+                            </span>
+                          )}
+                        </div>
+                        <div className='text-sm text-default-700 dark:text-default-200 truncate'>{c.title}</div>
+                        {c.subtitle && (
+                          <div className='text-xs text-default-400 truncate'>{c.subtitle}</div>
+                        )}
+                      </div>
+                      <div className='flex items-center gap-2 flex-shrink-0'>
+                        <span className='hidden md:inline text-[10px] text-default-400'>Enter</span>
+                        <TbCornerDownLeft className='opacity-40' size={16} />
+                      </div>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </ModalBody>
+            {mobile && (
+              <ModalFooter className='border-t border-default-200/50'>
+                <Button radius='full' variant='flat' onPress={() => onOpenChange(false)}>
+                  取消
+                </Button>
+                <Button
+                  radius='full'
+                  variant='flat'
+                  color='primary'
+                  isDisabled={!active}
+                  onPress={() => exec('open')}
+                >
+                  打开
+                </Button>
+                <Button
+                  radius='full'
+                  color='primary'
+                  isDisabled={!active}
+                  onPress={() => exec('send')}
+                >
+                  打开并发送
+                </Button>
+              </ModalFooter>
+            )}
+          </>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+}

packages/napcat-webui-frontend/src/components/display_card/common_card.tsx

@@ -0,0 +1,208 @@
+import { Button } from '@heroui/button';
+import { Switch } from '@heroui/switch';
+import clsx from 'clsx';
+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';
+
+type NetworkType = OneBotConfig['network'];
+
+export type NetworkDisplayCardFields<T extends keyof NetworkType> = Array<{
+  label: string;
+  value: NetworkType[T][0][keyof NetworkType[T][0]];
+  render?: (
+    value: NetworkType[T][0][keyof NetworkType[T][0]]
+  ) => React.ReactNode;
+}>;
+
+export interface NetworkDisplayCardProps<T extends keyof NetworkType> {
+  data: NetworkType[T][0];
+  typeLabel: string;
+  fields: NetworkDisplayCardFields<T>;
+  onEdit: () => void;
+  onEnable: () => Promise<void>;
+  onDelete: () => Promise<void>;
+  onEnableDebug: () => Promise<void>;
+  showType?: boolean;
+}
+
+const NetworkDisplayCard = <T extends keyof NetworkType> ({
+  data,
+  typeLabel,
+  fields,
+  onEdit,
+  onEnable,
+  onDelete,
+  onEnableDebug,
+  showType,
+}: NetworkDisplayCardProps<T>) => {
+  const { name, enable, debug } = data;
+  const [editing, setEditing] = useState(false);
+
+  const handleEnable = () => {
+    setEditing(true);
+    onEnable().finally(() => setEditing(false));
+  };
+
+  const handleDelete = () => {
+    setEditing(true);
+    onDelete().finally(() => setEditing(false));
+  };
+
+  const handleEnableDebug = () => {
+    setEditing(true);
+    onEnableDebug().finally(() => setEditing(false));
+  };
+
+  const isFullWidthField = (label: string) => ['URL', 'Token', 'AccessToken'].includes(label);
+
+  return (
+    <DisplayCardContainer
+      className='w-full max-w-[420px]'
+      tag={showType ? typeLabel : undefined}
+      action={
+        <div className='flex gap-2 w-full'>
+          <Button
+            fullWidth
+            radius='full'
+            size='sm'
+            variant='flat'
+            className='flex-1 bg-default-100 dark:bg-default-50 text-default-600 font-medium hover:bg-warning/20 hover:text-warning transition-colors'
+            startContent={<FiEdit3 size={16} />}
+            onPress={onEdit}
+            isDisabled={editing}
+          >
+            编辑
+          </Button>
+
+          <Button
+            fullWidth
+            radius='full'
+            size='sm'
+            variant='flat'
+            className={clsx(
+              'flex-1 bg-default-100 dark:bg-default-50 text-default-600 font-medium transition-colors',
+              debug
+                ? 'hover:bg-secondary/20 hover:text-secondary data-[hover=true]:text-secondary'
+                : 'hover:bg-success/20 hover:text-success data-[hover=true]:text-success'
+            )}
+            startContent={<CgDebug size={16} />}
+            onPress={handleEnableDebug}
+            isDisabled={editing}
+          >
+            {debug ? '默认' : '调试'}
+          </Button>
+          <Button
+            fullWidth
+            radius='full'
+            size='sm'
+            variant='flat'
+            className='flex-1 bg-default-100 dark:bg-default-50 text-default-600 font-medium hover:bg-danger/20 hover:text-danger transition-colors'
+            startContent={<MdDeleteForever size={16} />}
+            onPress={handleDelete}
+            isDisabled={editing}
+          >
+            删除
+          </Button>
+        </div>
+      }
+      enableSwitch={
+        <Switch
+          isDisabled={editing}
+          isSelected={enable}
+          onChange={handleEnable}
+          classNames={{
+            wrapper: 'group-data-[selected=true]:bg-primary-400',
+          }}
+        />
+      }
+      title={name}
+    >
+      <div className='grid grid-cols-2 gap-3'>
+        {(() => {
+          const targetFullField = fields.find(f => isFullWidthField(f.label));
+
+          if (targetFullField) {
+            // 模式1：存在全宽字段（如URL），布局为：
+            // Row 1: 类型 (全宽)
+            // Row 2: 全宽字段 (全宽)
+            return (
+              <>
+                <div
+                  className='flex flex-col gap-1 p-3 bg-default-100/50 dark:bg-white/10 rounded-xl border border-transparent hover:border-default-200 transition-colors col-span-2'
+                >
+                  <span className='text-xs text-default-500 dark:text-white/50 font-medium tracking-wide'>类型</span>
+                  <div className='text-sm font-medium text-default-700 dark:text-white/90 truncate'>
+                    {typeLabel}
+                  </div>
+                </div>
+                <div
+                  className='flex flex-col gap-1 p-3 bg-default-100/50 dark:bg-white/10 rounded-xl border border-transparent hover:border-default-200 transition-colors col-span-2'
+                >
+                  <span className='text-xs text-default-500 dark:text-white/50 font-medium tracking-wide'>{targetFullField.label}</span>
+                  <div className='text-sm font-medium text-default-700 dark:text-white/90 truncate'>
+                    {targetFullField.render
+                      ? targetFullField.render(targetFullField.value)
+                      : (
+                        <span className={clsx(
+                          typeof targetFullField.value === 'string' && (targetFullField.value.startsWith('http') || targetFullField.value.includes('.') || targetFullField.value.includes(':')) ? 'font-mono' : ''
+                        )}
+                        >
+                          {String(targetFullField.value)}
+                        </span>
+                      )}
+                  </div>
+                </div>
+              </>
+            );
+          } else {
+            // 模式2：无全宽字段，布局为 4 个小块 (2行 x 2列)
+            // Row 1: 类型 | Field 0
+            // Row 2: Field 1 | Field 2
+            const displayFields = fields.slice(0, 3);
+            return (
+              <>
+                <div
+                  className='flex flex-col gap-1 p-3 bg-default-100/50 dark:bg-white/10 rounded-xl border border-transparent hover:border-default-200 transition-colors'
+                >
+                  <span className='text-xs text-default-500 dark:text-white/50 font-medium tracking-wide'>类型</span>
+                  <div className='text-sm font-medium text-default-700 dark:text-white/90 truncate'>
+                    {typeLabel}
+                  </div>
+                </div>
+                {displayFields.map((field, index) => (
+                  <div
+                    key={index}
+                    className='flex flex-col gap-1 p-3 bg-default-100/50 dark:bg-white/10 rounded-xl border border-transparent hover:border-default-200 transition-colors'
+                  >
+                    <span className='text-xs text-default-500 dark:text-white/50 font-medium tracking-wide'>{field.label}</span>
+                    <div className='text-sm font-medium text-default-700 dark:text-white/90 truncate'>
+                      {field.render
+                        ? (
+                          field.render(field.value)
+                        )
+                        : (
+                          <span className={clsx(
+                            typeof field.value === 'string' && (field.value.startsWith('http') || field.value.includes('.') || field.value.includes(':')) ? 'font-mono' : ''
+                          )}
+                          >
+                            {String(field.value)}
+                          </span>
+                        )}
+                    </div>
+                  </div>
+                ))}
+                {/* 如果字段不足3个，可以补充空白块占位吗？或者是让它空着？用户说要高度一致。只要是grid，通常高度会被撑开。目前这样应该能保证最多2行。 */}
+              </>
+            );
+          }
+        })()}
+      </div>
+    </DisplayCardContainer>
+  );
+};
+
+export default NetworkDisplayCard;

packages/napcat-webui-frontend/src/components/display_card/container.tsx

@@ -0,0 +1,56 @@
+import { Card, CardBody, CardFooter, CardHeader } from '@heroui/card';
+import { useLocalStorage } from '@uidotdev/usehooks';
+import clsx from 'clsx';
+import key from '@/const/key';
+
+export interface ContainerProps {
+  title: React.ReactNode;
+  tag?: React.ReactNode;
+  action: React.ReactNode;
+  enableSwitch: React.ReactNode;
+  children: React.ReactNode;
+  className?: string; // Add className prop
+}
+
+export interface DisplayCardProps {
+  showType?: boolean;
+  onEdit: () => void;
+  onEnable: () => Promise<void>;
+  onDelete: () => Promise<void>;
+  onEnableDebug: () => Promise<void>;
+}
+
+const DisplayCardContainer: React.FC<ContainerProps> = ({
+  title: _title,
+  action,
+  enableSwitch,
+  children,
+  className,
+}) => {
+  const [backgroundImage] = useLocalStorage<string>(key.backgroundImage, '');
+  const hasBackground = !!backgroundImage;
+
+  return (
+    <Card className={clsx(
+      'backdrop-blur-sm border border-white/40 dark:border-white/10 shadow-sm rounded-2xl overflow-hidden transition-all',
+      hasBackground ? 'bg-white/20 dark:bg-black/10' : 'bg-white/60 dark:bg-black/40',
+      className
+    )}
+    >
+      <CardHeader className='p-4 pb-2 flex items-center justify-between gap-3'>
+        <div className='flex-1 min-w-0 mr-2'>
+          <div className='inline-flex items-center px-3 py-1 rounded-lg bg-default-100/50 dark:bg-white/10 border border-transparent dark:border-white/5'>
+            <span className='font-bold text-default-600 dark:text-white/90 text-sm truncate select-text'>
+              {_title}
+            </span>
+          </div>
+        </div>
+        <div className='flex-shrink-0'>{enableSwitch}</div>
+      </CardHeader>
+      <CardBody className='px-4 py-2 text-sm text-default-600'>{children}</CardBody>
+      <CardFooter className='px-4 pb-4 pt-2'>{action}</CardFooter>
+    </Card>
+  );
+};
+
+export default DisplayCardContainer;

packages/napcat-webui-frontend/src/components/display_card/http_client.tsx

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

packages/napcat-webui-frontend/src/components/display_card/http_server.tsx

@@ -0,0 +1,57 @@
+import { Chip } from '@heroui/chip';
+
+import NetworkDisplayCard from './common_card';
+import type { NetworkDisplayCardFields } from './common_card';
+
+interface HTTPServerDisplayCardProps {
+  data: OneBotConfig['network']['httpServers'][0];
+  showType?: boolean;
+  onEdit: () => void;
+  onEnable: () => Promise<void>;
+  onDelete: () => Promise<void>;
+  onEnableDebug: () => Promise<void>;
+}
+
+const HTTPServerDisplayCard: React.FC<HTTPServerDisplayCardProps> = (props) => {
+  const { data, showType, onEdit, onEnable, onDelete, onEnableDebug } = props;
+  const { host, port, enableCors, enableWebsocket, messagePostFormat } = data;
+
+  const fields: NetworkDisplayCardFields<'httpServers'> = [
+    { label: '主机', value: host },
+    { label: '端口', value: port },
+    { label: '消息格式', value: messagePostFormat },
+    {
+      label: 'CORS',
+      value: enableCors,
+      render: (value) => (
+        <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'>
+          {value ? '已启用' : '未启用'}
+        </Chip>
+      ),
+    },
+  ];
+
+  return (
+    <NetworkDisplayCard
+      data={data}
+      showType={showType}
+      typeLabel='HTTP服务器'
+      fields={fields}
+      onEdit={onEdit}
+      onEnable={onEnable}
+      onDelete={onDelete}
+      onEnableDebug={onEnableDebug}
+    />
+  );
+};
+
+export default HTTPServerDisplayCard;

packages/napcat-webui-frontend/src/components/display_card/http_sse_server.tsx

@@ -0,0 +1,59 @@
+import { Chip } from '@heroui/chip';
+
+import NetworkDisplayCard from './common_card';
+import type { NetworkDisplayCardFields } from './common_card';
+
+interface HTTPSSEServerDisplayCardProps {
+  data: OneBotConfig['network']['httpSseServers'][0];
+  showType?: boolean;
+  onEdit: () => void;
+  onEnable: () => Promise<void>;
+  onDelete: () => Promise<void>;
+  onEnableDebug: () => Promise<void>;
+}
+
+const HTTPSSEServerDisplayCard: React.FC<HTTPSSEServerDisplayCardProps> = (
+  props
+) => {
+  const { data, showType, onEdit, onEnable, onDelete, onEnableDebug } = props;
+  const { host, port, enableCors, enableWebsocket, messagePostFormat } = data;
+
+  const fields: NetworkDisplayCardFields<'httpServers'> = [
+    { label: '主机', value: host },
+    { label: '端口', value: port },
+    { label: '消息格式', value: messagePostFormat },
+    {
+      label: 'CORS',
+      value: enableCors,
+      render: (value) => (
+        <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'>
+          {value ? '已启用' : '未启用'}
+        </Chip>
+      ),
+    },
+  ];
+
+  return (
+    <NetworkDisplayCard
+      data={data}
+      showType={showType}
+      typeLabel='HTTP服务器'
+      fields={fields}
+      onEdit={onEdit}
+      onEnable={onEnable}
+      onDelete={onDelete}
+      onEnableDebug={onEnableDebug}
+    />
+  );
+};
+
+export default HTTPSSEServerDisplayCard;

packages/napcat-webui-frontend/src/components/display_card/plugin_card.tsx

@@ -0,0 +1,194 @@
+import { Avatar } from '@heroui/avatar';
+import { Button } from '@heroui/button';
+import { Card, CardBody, CardFooter } from '@heroui/card';
+import { Chip } from '@heroui/chip';
+import { Switch } from '@heroui/switch';
+import { Tooltip } from '@heroui/tooltip';
+import { MdDeleteForever, MdSettings } from 'react-icons/md';
+import clsx from 'clsx';
+import { useLocalStorage } from '@uidotdev/usehooks';
+import { useState } from 'react';
+
+import key from '@/const/key';
+import { PluginItem } from '@/controllers/plugin_manager';
+
+function getPluginIconUrl (iconPath?: string): string | undefined {
+  if (!iconPath) return undefined;
+  try {
+    const raw = localStorage.getItem(key.token);
+    if (!raw) return iconPath;
+    const token = JSON.parse(raw);
+    const url = new URL(iconPath, window.location.origin);
+    url.searchParams.set('webui_token', token);
+    return url.pathname + url.search;
+  } catch {
+    return iconPath;
+  }
+}
+
+export interface PluginDisplayCardProps {
+  data: PluginItem;
+  onToggleStatus: () => Promise<void>;
+  onUninstall: () => Promise<void>;
+  onConfig?: () => void;
+  hasConfig?: boolean;
+}
+
+const PluginDisplayCard: React.FC<PluginDisplayCardProps> = ({
+  data,
+  onToggleStatus,
+  onUninstall,
+  onConfig,
+  hasConfig = false,
+}) => {
+  const { name, version, author, description, status, icon } = data;
+  const isEnabled = status === 'active';
+  const [processing, setProcessing] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [backgroundImage] = useLocalStorage<string>(key.backgroundImage, '');
+  const hasBackground = !!backgroundImage;
+
+  // 后端已处理 icon，前端只需拼接 token；无 icon 时兜底 Vercel 风格头像
+  const avatarUrl = getPluginIconUrl(icon) || `https://avatar.vercel.sh/${encodeURIComponent(name)}`;
+
+  const handleToggle = () => {
+    setProcessing(true);
+    onToggleStatus().finally(() => setProcessing(false));
+  };
+
+  const handleUninstall = () => {
+    setProcessing(true);
+    onUninstall().finally(() => setProcessing(false));
+  };
+
+  return (
+    <Card
+      className={clsx(
+        'group w-full backdrop-blur-md rounded-2xl overflow-hidden transition-all duration-300',
+        'hover:shadow-xl hover:-translate-y-1',
+        'border border-white/50 dark:border-white/10 hover:border-primary/50 dark:hover:border-primary/50',
+        hasBackground ? 'bg-white/20 dark:bg-black/10' : 'bg-white/60 dark:bg-black/30'
+      )}
+      shadow='sm'
+    >
+      <CardBody className='p-4 flex flex-col gap-3'>
+        {/* Header */}
+        <div className='flex items-start justify-between gap-3'>
+          <div className='flex items-center gap-3 min-w-0'>
+            <Avatar
+              src={avatarUrl}
+              name={author || '?'}
+              className='flex-shrink-0'
+              size='md'
+              isBordered
+              radius='full'
+              color='default'
+            />
+            <div className='min-w-0'>
+              <h3 className='text-base font-bold text-default-900 truncate' title={name}>
+                {name}
+              </h3>
+              <p className='text-xs text-default-500 mt-0.5 truncate'>
+                by <span className='font-medium'>{author || '未知'}</span>
+              </p>
+            </div>
+          </div>
+
+          <Chip
+            size='sm'
+            variant='flat'
+            color={status === 'active' ? 'success' : status === 'stopped' ? 'warning' : 'default'}
+            className='flex-shrink-0 font-medium h-6 px-1'
+          >
+            {status === 'active' ? '运行中' : status === 'stopped' ? '已停止' : '已禁用'}
+          </Chip>
+        </div>
+
+        {/* Description */}
+        <div
+          className='relative min-h-[2.5rem] cursor-pointer group/desc'
+          onClick={() => setIsExpanded(!isExpanded)}
+        >
+          <Tooltip
+            content={description}
+            isDisabled={!description || description.length < 50 || isExpanded}
+            placement='bottom'
+            className='max-w-[280px]'
+            delay={500}
+          >
+            <p className={clsx(
+              'text-sm text-default-600 dark:text-default-400 leading-relaxed transition-all duration-300',
+              isExpanded ? 'line-clamp-none' : 'line-clamp-2'
+            )}
+            >
+              {description || '暂无描述'}
+            </p>
+          </Tooltip>
+        </div>
+
+        {/* Version Badge */}
+        <div>
+          <Chip
+            size='sm'
+            variant='flat'
+            color='primary'
+            className='h-5 text-xs font-semibold px-0.5'
+            classNames={{ content: 'px-1' }}
+          >
+            v{version}
+          </Chip>
+        </div>
+      </CardBody>
+
+      <CardFooter className='px-4 pb-4 pt-0 gap-3'>
+        <Switch
+          isDisabled={processing}
+          isSelected={isEnabled}
+          onValueChange={handleToggle}
+          size='sm'
+          color='success'
+          classNames={{
+            wrapper: 'group-data-[selected=true]:bg-success',
+          }}
+        >
+          <span className='text-xs font-medium text-default-600'>
+            {isEnabled ? '已启用' : '已禁用'}
+          </span>
+        </Switch>
+
+        <div className='flex-1' />
+
+        {hasConfig && (
+          <Tooltip content='插件配置'>
+            <Button
+              isIconOnly
+              radius='full'
+              size='sm'
+              variant='light'
+              color='primary'
+              onPress={onConfig}
+            >
+              <MdSettings size={20} />
+            </Button>
+          </Tooltip>
+        )}
+
+        <Tooltip content='卸载插件' color='danger'>
+          <Button
+            isIconOnly
+            radius='full'
+            size='sm'
+            variant='light'
+            color='danger'
+            onPress={handleUninstall}
+            isDisabled={processing}
+          >
+            <MdDeleteForever size={20} />
+          </Button>
+        </Tooltip>
+      </CardFooter>
+    </Card>
+  );
+};
+
+export default PluginDisplayCard;

packages/napcat-webui-frontend/src/components/display_card/plugin_store_card.tsx

@@ -0,0 +1,293 @@
+/* eslint-disable @stylistic/indent */
+import { Avatar } from '@heroui/avatar';
+import { Button } from '@heroui/button';
+import { Card, CardBody, CardFooter } from '@heroui/card';
+import { Chip } from '@heroui/chip';
+import { Tooltip } from '@heroui/tooltip';
+import { IoMdCheckmarkCircle } from 'react-icons/io';
+import { MdUpdate, MdOutlineGetApp } from 'react-icons/md';
+import clsx from 'clsx';
+import { useLocalStorage } from '@uidotdev/usehooks';
+import { useState } from 'react';
+
+import key from '@/const/key';
+import { PluginStoreItem } from '@/types/plugin-store';
+
+export type InstallStatus = 'not-installed' | 'installed' | 'update-available';
+
+/** 提取作者头像 URL */
+function getAuthorAvatar (homepage?: string, downloadUrl?: string): string | undefined {
+  // 1. 尝试从 downloadUrl 提取 GitHub 用户名 (通常是最准确的源码仓库所有者)
+  if (downloadUrl) {
+    try {
+      const url = new URL(downloadUrl);
+      if (url.hostname === 'github.com' || url.hostname === 'www.github.com') {
+        const parts = url.pathname.split('/').filter(Boolean);
+        if (parts.length >= 1) {
+          return `https://github.com/${parts[0]}.png`;
+        }
+      }
+    } catch {
+      // 忽略解析错误
+    }
+  }
+
+  // 2. 尝试从 homepage 提取
+  if (homepage) {
+    try {
+      const url = new URL(homepage);
+      if (url.hostname === 'github.com' || url.hostname === 'www.github.com') {
+        const parts = url.pathname.split('/').filter(Boolean);
+        if (parts.length >= 1) {
+          return `https://github.com/${parts[0]}.png`;
+        }
+      } else {
+        // 如果是自定义域名，尝试获取 favicon。使用主流的镜像服务以保证国内访问速度
+        return `https://api.iowen.cn/favicon/${url.hostname}.png`;
+      }
+    } catch {
+      // 忽略解析错误
+    }
+  }
+  return undefined;
+}
+
+export interface PluginStoreCardProps {
+  data: PluginStoreItem;
+  onInstall: () => void;
+  onViewDetail?: () => void;
+  installStatus?: InstallStatus;
+  installedVersion?: string;
+}
+
+const PluginStoreCard: React.FC<PluginStoreCardProps> = ({
+  data,
+  onInstall,
+  onViewDetail,
+  installStatus = 'not-installed',
+  installedVersion,
+}) => {
+  const { name, version, author, description, tags, homepage, downloadUrl } = data;
+  const [backgroundImage] = useLocalStorage<string>(key.backgroundImage, '');
+  const [isExpanded, setIsExpanded] = useState(false);
+  const hasBackground = !!backgroundImage;
+
+  // 综合尝试提取头像，最后兜底使用 Vercel 风格头像
+  const avatarUrl = getAuthorAvatar(homepage, downloadUrl) || `https://avatar.vercel.sh/${encodeURIComponent(name)}`;
+
+  // 作者链接组件
+  const AuthorComponent = (
+    <span className={clsx('font-medium transition-colors', homepage ? 'hover:text-primary hover:underline cursor-pointer' : '')}>
+      {author || '未知作者'}
+    </span>
+  );
+
+  return (
+    <Card
+      className={clsx(
+        'group w-full backdrop-blur-md rounded-2xl overflow-hidden transition-all duration-300',
+        'hover:shadow-xl hover:-translate-y-1',
+        // 降低边框粗细
+        'border border-white/50 dark:border-white/10 hover:border-primary/50 dark:hover:border-primary/50',
+        hasBackground ? 'bg-white/20 dark:bg-black/10' : 'bg-white/60 dark:bg-black/30'
+      )}
+      shadow='sm'
+    >
+      <CardBody
+        className={clsx('p-4 flex flex-col gap-3', onViewDetail && 'cursor-pointer')}
+        onClick={onViewDetail}
+      >
+        {/* Header: Avatar + Name + Author */}
+        <div className='flex items-start gap-3'>
+          <Avatar
+            src={avatarUrl}
+            name={author || '?'}
+            size='md'
+            isBordered
+            color='default'
+            radius='full' // 圆形头像
+            className='flex-shrink-0 transition-transform group-hover:scale-105'
+          />
+          <div className='flex-1 min-w-0'>
+            <div className='flex items-center justify-between'>
+              <div className='flex items-center gap-1.5 min-w-0'>
+                {homepage
+                  ? (
+                    <Tooltip content='访问项目主页' placement='top' delay={500}>
+                      <a
+                        href={homepage}
+                        target='_blank'
+                        rel='noreferrer'
+                        className='text-base font-bold text-default-900 hover:text-primary transition-colors truncate'
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        {name}
+                      </a>
+                    </Tooltip>
+                  )
+                  : (
+                    <h3 className='text-base font-bold text-default-900 truncate' title={name}>
+                      {name}
+                    </h3>
+                  )}
+              </div>
+            </div>
+
+            {/* 可点击的作者名称 */}
+            <div className='text-xs text-default-500 mt-0.5 truncate'>
+              by {homepage
+                ? (
+                  <a
+                    href={homepage}
+                    target='_blank'
+                    rel='noreferrer'
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    {AuthorComponent}
+                  </a>
+                )
+                : AuthorComponent}
+            </div>
+          </div>
+        </div>
+
+        {/* Description */}
+        <div
+          className='relative min-h-[2.5rem] cursor-pointer group/desc'
+          onClick={() => setIsExpanded(!isExpanded)}
+        >
+          <Tooltip
+            content={description}
+            isDisabled={!description || description.length < 50 || isExpanded}
+            placement='bottom'
+            className='max-w-[280px]'
+            delay={500}
+          >
+            <p className={clsx(
+              'text-sm text-default-600 dark:text-default-400 leading-relaxed transition-all duration-300',
+              isExpanded ? 'line-clamp-none' : 'line-clamp-2'
+            )}
+            >
+              {description || '暂无描述'}
+            </p>
+          </Tooltip>
+        </div>
+
+        {/* Tags & Version */}
+        <div className='flex items-center gap-1.5 flex-wrap'>
+          <Chip
+            size='sm'
+            variant='flat'
+            color='primary'
+            className='h-5 text-xs font-semibold px-0.5'
+            classNames={{ content: 'px-1' }}
+          >
+            v{version}
+          </Chip>
+
+          {/* Tags with proper truncation and hover */}
+          {tags?.slice(0, 2).map((tag) => (
+            <Chip
+              key={tag}
+              size='sm'
+              variant='flat'
+              className='h-5 text-xs px-0.5 bg-default-100 dark:bg-default-50/50 text-default-600'
+              classNames={{ content: 'px-1' }}
+            >
+              {tag}
+            </Chip>
+          ))}
+
+          {tags && tags.length > 2 && (
+            <Tooltip
+              content={
+                <div className='flex flex-wrap gap-1 max-w-[200px] p-1'>
+                  {tags.map(t => (
+                    <span key={t} className='text-xs bg-white/10 px-1.5 py-0.5 rounded-md border border-white/10'>
+                      {t}
+                    </span>
+                  ))}
+                </div>
+              }
+              delay={0}
+              closeDelay={0}
+            >
+              <Chip
+                size='sm'
+                variant='flat'
+                className='h-5 text-xs px-0.5 cursor-pointer hover:bg-default-200 transition-colors'
+                classNames={{ content: 'px-1' }}
+              >
+                +{tags.length - 2}
+              </Chip>
+            </Tooltip>
+          )}
+
+          {installStatus === 'update-available' && installedVersion && (
+            <Chip
+              size='sm'
+              variant='shadow'
+              color='warning'
+              className='h-5 text-xs font-semibold px-0.5 ml-auto animate-pulse'
+              classNames={{ content: 'px-1' }}
+            >
+              新版本
+            </Chip>
+          )}
+        </div>
+      </CardBody>
+
+      <CardFooter
+        className='px-4 pb-4 pt-0'
+        onClick={(e) => e.stopPropagation()}
+      >
+        {installStatus === 'installed'
+          ? (
+            <Button
+              fullWidth
+              radius='full'
+              size='sm'
+              color='success'
+              variant='flat'
+              startContent={<IoMdCheckmarkCircle size={18} />}
+              className='font-medium bg-success/20 text-success dark:bg-success/20 cursor-default'
+              isDisabled
+            >
+              已安装
+            </Button>
+          )
+          : installStatus === 'update-available'
+            ? (
+              <Button
+                fullWidth
+                radius='full'
+                size='sm'
+                color='warning'
+                variant='shadow'
+                className='font-medium text-white shadow-warning/30 hover:shadow-warning/50 transition-shadow'
+                startContent={<MdUpdate size={18} />}
+                onPress={onInstall}
+              >
+                更新到 v{version}
+              </Button>
+            )
+            : (
+              <Button
+                fullWidth
+                radius='full'
+                size='sm'
+                color='primary'
+                variant='bordered'
+                className='font-medium bg-white dark:bg-zinc-900 border hover:bg-primary hover:text-white transition-all shadow-sm group/btn'
+                startContent={<MdOutlineGetApp size={20} className='transition-transform group-hover/btn:translate-y-0.5' />}
+                onPress={onInstall}
+              >
+                立即安装
+              </Button>
+            )}
+      </CardFooter>
+    </Card>
+  );
+};
+
+export default PluginStoreCard;

packages/napcat-webui-frontend/src/components/display_card/ws_client.tsx

@@ -0,0 +1,57 @@
+import { Chip } from '@heroui/chip';
+
+import NetworkDisplayCard from './common_card';
+import type { NetworkDisplayCardFields } from './common_card';
+
+interface WebsocketClientDisplayCardProps {
+  data: OneBotConfig['network']['websocketClients'][0];
+  showType?: boolean;
+  onEdit: () => void;
+  onEnable: () => Promise<void>;
+  onDelete: () => Promise<void>;
+  onEnableDebug: () => Promise<void>;
+}
+
+const WebsocketClientDisplayCard: React.FC<WebsocketClientDisplayCardProps> = (
+  props
+) => {
+  const { data, showType, onEdit, onEnable, onDelete, onEnableDebug } = props;
+  const {
+    url,
+    heartInterval,
+    reconnectInterval,
+    messagePostFormat,
+    reportSelfMessage,
+  } = data;
+
+  const fields: NetworkDisplayCardFields<'websocketClients'> = [
+    { label: 'URL', value: url },
+    { label: '重连间隔', value: `${reconnectInterval}ms` },
+    { label: '心跳间隔', value: `${heartInterval}ms` },
+    { label: '消息格式', value: messagePostFormat },
+    {
+      label: '上报自身消息',
+      value: reportSelfMessage,
+      render: (value) => (
+        <Chip color={value ? 'success' : 'default'} size='sm' variant='flat'>
+          {value ? '是' : '否'}
+        </Chip>
+      ),
+    },
+  ];
+
+  return (
+    <NetworkDisplayCard
+      data={data}
+      showType={showType}
+      typeLabel='Websocket客户端'
+      fields={fields}
+      onEdit={onEdit}
+      onEnable={onEnable}
+      onDelete={onDelete}
+      onEnableDebug={onEnableDebug}
+    />
+  );
+};
+
+export default WebsocketClientDisplayCard;

packages/napcat-webui-frontend/src/components/display_card/ws_server.tsx

@@ -0,0 +1,67 @@
+import { Chip } from '@heroui/chip';
+
+import NetworkDisplayCard from './common_card';
+import type { NetworkDisplayCardFields } from './common_card';
+
+interface WebsocketServerDisplayCardProps {
+  data: OneBotConfig['network']['websocketServers'][0];
+  showType?: boolean;
+  onEdit: () => void;
+  onEnable: () => Promise<void>;
+  onDelete: () => Promise<void>;
+  onEnableDebug: () => Promise<void>;
+}
+
+const WebsocketServerDisplayCard: React.FC<WebsocketServerDisplayCardProps> = (
+  props
+) => {
+  const { data, showType, onEdit, onEnable, onDelete, onEnableDebug } = props;
+  const {
+    host,
+    port,
+    heartInterval,
+    messagePostFormat,
+    reportSelfMessage,
+    enableForcePushEvent,
+  } = data;
+
+  const fields: NetworkDisplayCardFields<'websocketServers'> = [
+    { label: '主机', value: host },
+    { label: '端口', value: port },
+    { label: '心跳间隔', value: `${heartInterval}ms` },
+    { label: '消息格式', value: messagePostFormat },
+    {
+      label: '上报自身消息',
+      value: reportSelfMessage,
+      render: (value) => (
+        <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'>
+          {value ? '是' : '否'}
+        </Chip>
+      ),
+    },
+  ];
+
+  return (
+    <NetworkDisplayCard
+      data={data}
+      showType={showType}
+      typeLabel='Websocket服务器'
+      fields={fields}
+      onEdit={onEdit}
+      onEnable={onEnable}
+      onDelete={onDelete}
+      onEnableDebug={onEnableDebug}
+    />
+  );
+};
+
+export default WebsocketServerDisplayCard;

packages/napcat-webui-frontend/src/components/display_network_item.tsx

@@ -0,0 +1,57 @@
+import { Card, CardBody } from '@heroui/card';
+import { useLocalStorage } from '@uidotdev/usehooks';
+import clsx from 'clsx';
+import key from '@/const/key';
+
+export interface NetworkItemDisplayProps {
+  count: number;
+  label: string;
+  size?: 'sm' | 'md';
+}
+
+const NetworkItemDisplay: React.FC<NetworkItemDisplayProps> = ({
+  count,
+  label,
+  size = 'md',
+}) => {
+  const [backgroundImage] = useLocalStorage<string>(key.backgroundImage, '');
+  const hasBackground = !!backgroundImage;
+
+  return (
+    <Card
+      className={clsx(
+        'backdrop-blur-sm border border-white/40 dark:border-white/10 shadow-sm transition-all',
+        hasBackground
+          ? 'bg-white/10 dark:bg-black/10 hover:bg-white/20 dark:hover:bg-black/20'
+          : 'bg-white/60 dark:bg-black/40 hover:bg-white/70 dark:hover:bg-black/30',
+        size === 'md'
+          ? 'col-span-8 md:col-span-2'
+          : 'col-span-2 md:col-span-1'
+      )}
+      shadow='none'
+    >
+      <CardBody className='items-center md:gap-1 p-1 md:p-2'>
+        <div
+          className={clsx(
+            'flex-1 font-mono font-bold',
+            size === 'md' ? 'text-4xl md:text-5xl' : 'text-2xl md:text-3xl',
+            hasBackground ? 'text-white drop-shadow-sm' : 'text-default-700 dark:text-gray-200'
+          )}
+        >
+          {count}
+        </div>
+        <div
+          className={clsx(
+            'whitespace-nowrap text-nowrap flex-shrink-0 font-medium',
+            size === 'md' ? 'text-sm' : 'text-xs',
+            hasBackground ? 'text-white/80' : 'text-default-500'
+          )}
+        >
+          {label}
+        </div>
+      </CardBody>
+    </Card>
+  );
+};
+
+export default NetworkItemDisplay;

packages/napcat-webui-frontend/src/components/effect_card.tsx

@@ -0,0 +1,119 @@
+import { Card, CardProps } from '@heroui/card';
+import clsx from 'clsx';
+import React from 'react';
+
+// Firefox 里 backdrop-filter 和 3D transform 作用在同一个元素上时，卡片内容会画不出来
+// （#2083，macOS 上的 Firefox 157 复现），所以 Firefox 下不做倾斜，只保留光晕。
+const tiltEnabled = !/firefox/i.test(navigator.userAgent);
+
+export interface HoverEffectCardProps extends CardProps {
+  children: React.ReactNode
+  maxXRotation?: number
+  maxYRotation?: number
+  lightClassName?: string
+  lightStyle?: React.CSSProperties
+}
+
+const HoverEffectCard: React.FC<HoverEffectCardProps> = (props) => {
+  const {
+    children,
+    maxXRotation = 5,
+    maxYRotation = 5,
+    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);
+  const [pos, setPos] = React.useState({
+    left: 0,
+    top: 0,
+  });
+
+  return (
+    <Card
+      {...props}
+      ref={cardRef}
+      className={clsx(
+        'relative overflow-hidden bg-opacity-50 backdrop-blur-lg',
+        className
+      )}
+      style={tiltEnabled
+        ? {
+          willChange: 'transform',
+          transform:
+              'perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)',
+          ...style,
+        }
+        : style}
+      onMouseEnter={() => {
+        if (tiltEnabled && cardRef.current) {
+          cardRef.current.style.transition = 'transform 0.3s ease-out';
+        }
+      }}
+      onMouseLeave={() => {
+        setIsShowLight(false);
+        if (tiltEnabled && cardRef.current) {
+          cardRef.current.style.transition = 'transform 0.5s';
+          cardRef.current.style.transform =
+            'perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)';
+        }
+      }}
+      onMouseMove={(e: React.MouseEvent<HTMLDivElement>) => {
+        if (cardRef.current) {
+          setIsShowLight(true);
+
+          const { x, y } = cardRef.current.getBoundingClientRect();
+          const { clientX, clientY } = e;
+
+          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 left = offsetX - lightWidthNum / 2;
+          const top = offsetY - lightHeightNum / 2;
+
+          setPos({
+            left,
+            top,
+          });
+
+          if (!tiltEnabled) {
+            return;
+          }
+
+          cardRef.current.style.transition = 'transform 0.1s';
+
+          const rangeX = 400 / 2;
+          const rangeY = 400 / 2;
+
+          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)`;
+        }
+      }}
+    >
+      <div
+        ref={lightRef}
+        className={clsx(
+          isShowLight ? 'opacity-100' : 'opacity-0',
+          'absolute rounded-full blur-[100px] filter transition-opacity duration-300 bg-gradient-to-r from-primary-400 to-secondary-400 w-[150px] h-[150px]',
+          lightClassName
+        )}
+        style={{
+          ...pos,
+        }}
+      />
+      {children}
+    </Card>
+  );
+};
+
+export default HoverEffectCard;

packages/napcat-webui-frontend/src/components/error_fallback.tsx

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

packages/napcat-webui-frontend/src/components/file_icon.tsx

@@ -0,0 +1,166 @@
+import {
+  FaFile,
+  FaFileAudio,
+  FaFileCode,
+  FaFileCsv,
+  FaFileExcel,
+  FaFileImage,
+  FaFileLines,
+  FaFilePdf,
+  FaFilePowerpoint,
+  FaFileVideo,
+  FaFileWord,
+  FaFileZipper,
+  FaFolderClosed,
+} from 'react-icons/fa6';
+
+export interface FileIconProps {
+  name?: string
+  isDirectory?: boolean
+}
+
+const FileIcon = (props: FileIconProps) => {
+  const { name, isDirectory = false } = props;
+  if (isDirectory) {
+    return <FaFolderClosed className='text-yellow-500' />;
+  }
+
+  const ext = name?.split('.').pop() || '';
+  if (ext) {
+    switch (ext.toLowerCase()) {
+      case 'jpg':
+      case 'jpeg':
+      case 'png':
+      case 'gif':
+      case 'svg':
+      case 'bmp':
+      case 'ico':
+      case 'webp':
+      case 'tiff':
+      case 'tif':
+      case 'heic':
+      case 'heif':
+      case 'avif':
+      case 'apng':
+      case 'flif':
+      case 'ai':
+      case 'psd':
+      case 'xcf':
+      case 'sketch':
+      case 'fig':
+      case 'xd':
+      case 'svgz':
+        return <FaFileImage className='text-green-500' />;
+      case 'pdf':
+        return <FaFilePdf className='text-red-500' />;
+      case 'doc':
+      case 'docx':
+        return <FaFileWord className='text-blue-500' />;
+      case 'xls':
+      case 'xlsx':
+        return <FaFileExcel className='text-green-500' />;
+      case 'csv':
+        return <FaFileCsv className='text-green-500' />;
+      case 'ppt':
+      case 'pptx':
+        return <FaFilePowerpoint className='text-red-500' />;
+      case 'zip':
+      case 'rar':
+      case '7z':
+      case 'tar':
+      case 'gz':
+      case 'bz2':
+      case 'xz':
+      case 'lz':
+      case 'lzma':
+      case 'zst':
+      case 'zstd':
+      case 'z':
+      case 'taz':
+      case 'tz':
+      case 'tzo':
+        return <FaFileZipper className='text-green-500' />;
+      case 'txt':
+        return <FaFileLines className='text-gray-500' />;
+      case 'mp3':
+      case 'wav':
+      case 'flac':
+        return <FaFileAudio className='text-green-500' />;
+      case 'mp4':
+      case 'avi':
+      case 'mov':
+      case 'wmv':
+        return <FaFileVideo className='text-red-500' />;
+      case 'html':
+      case 'css':
+      case 'js':
+      case 'ts':
+      case 'jsx':
+      case 'tsx':
+      case 'json':
+      case 'xml':
+      case 'yaml':
+      case 'yml':
+      case 'md':
+      case 'sh':
+      case 'py':
+      case 'java':
+      case 'c':
+      case 'cpp':
+      case 'cs':
+      case 'go':
+      case 'php':
+      case 'rb':
+      case 'pl':
+      case 'swift':
+      case 'kt':
+      case 'rs':
+      case 'sql':
+      case 'r':
+      case 'scala':
+      case 'groovy':
+      case 'dart':
+      case 'lua':
+      case 'perl':
+      case 'h':
+      case 'm':
+      case 'mm':
+      case 'makefile':
+      case 'cmake':
+      case 'dockerfile':
+      case 'gradle':
+      case 'properties':
+      case 'ini':
+      case 'conf':
+      case 'env':
+      case 'bat':
+      case 'cmd':
+      case 'ps1':
+      case 'psm1':
+      case 'psd1':
+      case 'ps1xml':
+      case 'psc1':
+      case 'pssc':
+      case 'nuspec':
+      case 'resx':
+      case 'resw':
+      case 'csproj':
+      case 'vbproj':
+      case 'vcxproj':
+      case 'fsproj':
+      case 'sln':
+      case 'suo':
+      case 'user':
+      case 'userosscache':
+      case 'sln.docstates':
+      case 'dll':
+        return <FaFileCode className='text-blue-500' />;
+      default:
+        return <FaFile className='text-gray-500' />;
+    }
+  }
+
+  return <FaFile className='text-gray-500' />;
+};
+
+export default FileIcon;

packages/napcat-webui-frontend/src/components/file_manage/create_file_modal.tsx

@@ -0,0 +1,64 @@
+import { Button, ButtonGroup } from '@heroui/button';
+import { Input } from '@heroui/input';
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+} from '@heroui/modal';
+
+interface CreateFileModalProps {
+  isOpen: boolean;
+  fileType: 'file' | 'directory';
+  newFileName: string;
+  onTypeChange: (type: 'file' | 'directory') => void;
+  onNameChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onClose: () => void;
+  onCreate: () => void;
+}
+
+export default function CreateFileModal ({
+  isOpen,
+  fileType,
+  newFileName,
+  onTypeChange,
+  onNameChange,
+  onClose,
+  onCreate,
+}: CreateFileModalProps) {
+  return (
+    <Modal radius='sm' isOpen={isOpen} onClose={onClose}>
+      <ModalContent>
+        <ModalHeader>新建</ModalHeader>
+        <ModalBody>
+          <div className='flex flex-col gap-4'>
+            <ButtonGroup radius='sm' color='primary'>
+              <Button
+                variant={fileType === 'file' ? 'solid' : 'flat'}
+                onPress={() => onTypeChange('file')}
+              >
+                文件
+              </Button>
+              <Button
+                variant={fileType === 'directory' ? 'solid' : 'flat'}
+                onPress={() => onTypeChange('directory')}
+              >
+                目录
+              </Button>
+            </ButtonGroup>
+            <Input radius='sm' label='名称' value={newFileName} onChange={onNameChange} />
+          </div>
+        </ModalBody>
+        <ModalFooter>
+          <Button radius='sm' color='primary' variant='flat' onPress={onClose}>
+            取消
+          </Button>
+          <Button radius='sm' color='primary' onPress={onCreate}>
+            创建
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}

packages/napcat-webui-frontend/src/components/file_manage/file_edit_modal.tsx

@@ -0,0 +1,104 @@
+import { Button } from '@heroui/button';
+import { Code } from '@heroui/code';
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+} from '@heroui/modal';
+
+import CodeEditor from '@/components/code_editor';
+
+interface FileEditModalProps {
+  isOpen: boolean;
+  file: { path: string; content: string; } | null;
+  onClose: () => void;
+  onSave: () => void;
+  onContentChange: (newContent?: string) => void;
+}
+
+export default function FileEditModal ({
+  isOpen,
+  file,
+  onClose,
+  onSave,
+  onContentChange,
+}: FileEditModalProps) {
+  // 根据文件后缀返回对应语言
+  const getLanguage = (filePath: string) => {
+    if (filePath.endsWith('.js')) return 'javascript';
+    if (filePath.endsWith('.ts')) return 'typescript';
+    if (filePath.endsWith('.tsx')) return 'tsx';
+    if (filePath.endsWith('.jsx')) return 'jsx';
+    if (filePath.endsWith('.vue')) return 'vue';
+    if (filePath.endsWith('.svelte')) return 'svelte';
+    if (filePath.endsWith('.json')) return 'json';
+    if (filePath.endsWith('.html')) return 'html';
+    if (filePath.endsWith('.css')) return 'css';
+    if (filePath.endsWith('.scss')) return 'scss';
+    if (filePath.endsWith('.less')) return 'less';
+    if (filePath.endsWith('.md')) return 'markdown';
+    if (filePath.endsWith('.yaml') || filePath.endsWith('.yml')) return 'yaml';
+    if (filePath.endsWith('.xml')) return 'xml';
+    if (filePath.endsWith('.sql')) return 'sql';
+    if (filePath.endsWith('.sh')) return 'shell';
+    if (filePath.endsWith('.bat')) return 'bat';
+    if (filePath.endsWith('.php')) return 'php';
+    if (filePath.endsWith('.java')) return 'java';
+    if (filePath.endsWith('.c')) return 'c';
+    if (filePath.endsWith('.cpp')) return 'cpp';
+    if (filePath.endsWith('.h')) return 'h';
+    if (filePath.endsWith('.hpp')) return 'hpp';
+    if (filePath.endsWith('.go')) return 'go';
+    if (filePath.endsWith('.py')) return 'python';
+    if (filePath.endsWith('.rb')) return 'ruby';
+    if (filePath.endsWith('.cs')) return 'csharp';
+    if (filePath.endsWith('.swift')) return 'swift';
+    if (filePath.endsWith('.vb')) return 'vb';
+    if (filePath.endsWith('.lua')) return 'lua';
+    if (filePath.endsWith('.pl')) return 'perl';
+    if (filePath.endsWith('.r')) return 'r';
+    return 'plaintext';
+  };
+
+  return (
+    <Modal radius='sm' size='full' isOpen={isOpen} onClose={onClose} scrollBehavior='inside'>
+      <ModalContent className='flex flex-col h-full max-h-[100dvh]'>
+        <ModalHeader className='flex items-center gap-2 border-b border-default-200/50 flex-shrink-0'>
+          <span>编辑文件</span>
+          <Code radius='sm' className='text-xs'>{file?.path}</Code>
+          <div className='ml-auto text-xs text-default-400 font-normal px-2'>
+            按 <span className='px-1 py-0.5 rounded border border-default-300 bg-default-100'>Ctrl/Cmd + S</span> 保存
+          </div>
+        </ModalHeader>
+        <ModalBody className='p-4 bg-content2/50 flex-1 min-h-0 overflow-hidden'>
+          <div
+            className='h-full w-full overflow-auto' onKeyDown={(e) => {
+              if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+                e.preventDefault();
+                onSave();
+              }
+            }}
+          >
+            <CodeEditor
+              height='100%'
+              value={file?.content || ''}
+              onChange={onContentChange}
+              options={{ wordWrap: 'on' }}
+              language={file?.path ? getLanguage(file.path) : 'plaintext'}
+            />
+          </div>
+        </ModalBody>
+        <ModalFooter className='border-t border-default-200/50 flex-shrink-0'>
+          <Button radius='sm' color='primary' variant='flat' onPress={onClose}>
+            取消
+          </Button>
+          <Button radius='sm' color='primary' onPress={onSave}>
+            保存
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}

packages/napcat-webui-frontend/src/components/file_manage/file_preview_modal.tsx

@@ -0,0 +1,92 @@
+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';
+
+import FileManager from '@/controllers/file_manager';
+
+interface FilePreviewModalProps {
+  isOpen: boolean;
+  filePath: string;
+  onClose: () => void;
+}
+
+export const videoExts = ['.mp4', '.webm'];
+export const audioExts = ['.mp3', '.wav'];
+
+export const supportedPreviewExts = [...videoExts, ...audioExts];
+
+export default function FilePreviewModal ({
+  isOpen,
+  filePath,
+  onClose,
+}: FilePreviewModalProps) {
+  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();
+        if (!filePath || !supportedPreviewExts.includes(ext)) {
+          return;
+        }
+        run();
+      },
+    }
+  );
+
+  useEffect(() => {
+    if (filePath) {
+      run();
+    }
+  }, [filePath]);
+
+  let contentElement = null;
+  if (!supportedPreviewExts.includes(ext)) {
+    contentElement = <div>暂不支持预览此文件类型</div>;
+  } else if (error) {
+    contentElement = <div>读取文件失败</div>;
+  } else if (loading || !data) {
+    contentElement = (
+      <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' />;
+  } else if (audioExts.includes(ext)) {
+    contentElement = <audio src={data} controls className='w-full' />;
+  } else {
+    contentElement = (
+      <div className='flex justify-center items-center h-full'>
+        <Spinner />
+      </div>
+    );
+  }
+
+  return (
+    <Modal radius='sm' isOpen={isOpen} onClose={onClose} scrollBehavior='inside' size='3xl'>
+      <ModalContent>
+        <ModalHeader>文件预览</ModalHeader>
+        <ModalBody className='flex justify-center items-center'>
+          {contentElement}
+        </ModalBody>
+        <ModalFooter>
+          <Button radius='sm' color='primary' variant='flat' onPress={onClose}>
+            关闭
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}

packages/napcat-webui-frontend/src/components/file_manage/file_table.tsx

@@ -0,0 +1,257 @@
+import { Button, ButtonGroup } from '@heroui/button';
+import { Pagination } from '@heroui/pagination';
+import { Spinner } from '@heroui/spinner';
+import {
+  type Selection,
+  type SortDescriptor,
+  Table,
+  TableBody,
+  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';
+
+import FileIcon from '@/components/file_icon';
+
+import type { FileInfo } from '@/controllers/file_manager';
+
+import { supportedPreviewExts } from './file_preview_modal';
+import ImageNameButton, { PreviewImage, imageExts } from './image_name_button';
+
+export interface FileTableProps {
+  files: FileInfo[];
+  currentPath: string;
+  loading: boolean;
+  sortDescriptor: SortDescriptor;
+  onSortChange: (descriptor: SortDescriptor) => void;
+  selectedFiles: Selection;
+  onSelectionChange: (selected: Selection) => void;
+  onDirectoryClick: (dirPath: string) => void;
+  onEdit: (filePath: string) => void;
+  onPreview: (filePath: string) => void;
+  onRenameRequest: (name: string) => void;
+  onMoveRequest: (name: string) => void;
+  onCopyPath: (fileName: string) => void;
+  onDelete: (filePath: string) => void;
+  onDownload: (filePath: string) => void;
+}
+
+const PAGE_SIZE = 20;
+
+export default function FileTable ({
+  files,
+  currentPath,
+  loading,
+  sortDescriptor,
+  onSortChange,
+  selectedFiles,
+  onSelectionChange,
+  onDirectoryClick,
+  onEdit,
+  onPreview,
+  onRenameRequest,
+  onMoveRequest,
+  onCopyPath,
+  onDelete,
+  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 addPreviewImage = useCallback((image: PreviewImage) => {
+    setPreviewImages((prev) => {
+      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]);
+
+  const onPreviewImage = (name: string, images: PreviewImage[]) => {
+    const index = images.findIndex((image) => image.key === name);
+    if (index === -1) {
+      return;
+    }
+    setPreviewIndex(index);
+    setShowImage(true);
+  };
+
+  return (
+    <>
+      <PhotoSlider
+        images={previewImages}
+        visible={showImage}
+        onClose={() => setShowImage(false)}
+        index={previewIndex}
+        onIndexChange={setPreviewIndex}
+      />
+      <Table
+        aria-label='文件列表'
+        radius='sm'
+        sortDescriptor={sortDescriptor}
+        onSortChange={onSortChange}
+        onSelectionChange={onSelectionChange}
+        defaultSelectedKeys={[]}
+        selectedKeys={selectedFiles}
+        selectionMode='multiple'
+        bottomContent={
+          <div className='flex w-full justify-center p-2 border-t border-white/10'>
+            <Pagination
+              isCompact
+              showControls
+              showShadow
+              color='primary'
+              page={page}
+              total={pages}
+              onChange={(page) => setPage(page)}
+              classNames={{
+                cursor: 'bg-primary shadow-lg',
+              }}
+            />
+          </div>
+        }
+        classNames={{
+          wrapper: 'bg-white/60 dark:bg-black/40 backdrop-blur-xl border border-white/40 dark:border-white/10 shadow-sm p-0',
+          th: 'bg-white/40 dark:bg-white/5 backdrop-blur-md text-default-600',
+          td: 'group-data-[first=true]:first:before:rounded-none group-data-[first=true]:last:before:rounded-none',
+        }}
+      >
+        <TableHeader>
+          <TableColumn key='name' allowsSorting>
+            名称
+          </TableColumn>
+          <TableColumn key='type' allowsSorting className='hidden md:table-cell'>
+            类型
+          </TableColumn>
+          <TableColumn key='size' allowsSorting className='hidden md:table-cell'>
+            大小
+          </TableColumn>
+          <TableColumn key='mtime' allowsSorting className='hidden md:table-cell'>
+            修改时间
+          </TableColumn>
+          <TableColumn key='actions'>操作</TableColumn>
+        </TableHeader>
+        <TableBody
+          isLoading={loading}
+          loadingContent={
+            <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;
+            return (
+              <TableRow key={file.name}>
+                <TableCell>
+                  {imageExts.includes(ext)
+                    ? (
+                      <ImageNameButton
+                        name={file.name}
+                        filePath={filePath}
+                        onPreview={() => onPreviewImage(file.name, images)}
+                        onAddPreview={addPreviewImage}
+                      />
+                    )
+                    : (
+                      <Button
+                        radius='sm'
+                        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}
+                          />
+                        }
+                      >
+                        {file.name}
+                      </Button>
+                    )}
+                </TableCell>
+                <TableCell className='hidden md:table-cell'>{file.isDirectory ? '目录' : '文件'}</TableCell>
+                <TableCell className='hidden md:table-cell'>
+                  {isNaN(file.size) || file.isDirectory
+                    ? '-'
+                    : `${file.size} 字节`}
+                </TableCell>
+                <TableCell className='hidden md:table-cell'>{new Date(file.mtime).toLocaleString()}</TableCell>
+                <TableCell>
+                  <ButtonGroup radius='sm' size='sm' variant='light'>
+                    <Button
+                      isIconOnly
+                      color='default'
+                      className='text-default-500 hover:text-primary'
+                      onPress={() => onRenameRequest(file.name)}
+                    >
+                      <BiRename />
+                    </Button>
+                    <Button
+                      isIconOnly
+                      color='default'
+                      className='text-default-500 hover:text-primary'
+                      onPress={() => onMoveRequest(file.name)}
+                    >
+                      <FiMove />
+                    </Button>
+                    <Button
+                      isIconOnly
+                      color='default'
+                      className='text-default-500 hover:text-primary'
+                      onPress={() => onCopyPath(file.name)}
+                    >
+                      <FiCopy />
+                    </Button>
+                    <Button
+                      isIconOnly
+                      color='default'
+                      className='text-default-500 hover:text-primary'
+                      onPress={() => onDownload(filePath)}
+                    >
+                      <FiDownload />
+                    </Button>
+                    <Button
+                      isIconOnly
+                      color='danger'
+                      className='text-danger hover:bg-danger/10'
+                      onPress={() => onDelete(filePath)}
+                    >
+                      <FiTrash2 />
+                    </Button>
+                  </ButtonGroup>
+                </TableCell>
+              </TableRow>
+            );
+          })}
+        </TableBody>
+      </Table>
+    </>
+  );
+}

packages/napcat-webui-frontend/src/components/file_manage/image_name_button.tsx

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

packages/napcat-webui-frontend/src/components/file_manage/move_modal.tsx

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

packages/napcat-webui-frontend/src/components/file_manage/rename_modal.tsx

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

packages/napcat-webui-frontend/src/components/github_info/icon_wrapper.tsx

@@ -0,0 +1,19 @@
+import clsx from 'clsx';
+
+export interface IconWrapperProps {
+  children?: React.ReactNode
+  className?: string
+}
+
+const IconWrapper = ({ children, className }: IconWrapperProps) => (
+  <div
+    className={clsx(
+      className,
+      'flex items-center rounded-small justify-center w-7 h-7'
+    )}
+  >
+    {children}
+  </div>
+);
+
+export default IconWrapper;

packages/napcat-webui-frontend/src/components/github_info/item_counter.tsx

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

packages/napcat-webui-frontend/src/components/github_info/release.tsx

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

packages/napcat-webui-frontend/src/components/hitokoto.tsx

@@ -0,0 +1,114 @@
+/* eslint-disable @stylistic/jsx-closing-bracket-location */
+/* eslint-disable @stylistic/jsx-closing-tag-location */
+import { Button } from '@heroui/button';
+import { Tooltip } from '@heroui/tooltip';
+import { useLocalStorage } from '@uidotdev/usehooks';
+import { useRequest } from 'ahooks';
+import clsx from 'clsx';
+import toast from 'react-hot-toast';
+import { IoMdQuote } from 'react-icons/io';
+import { IoCopy, IoRefresh } from 'react-icons/io5';
+
+import key from '@/const/key';
+import { request } from '@/utils/request';
+
+import PageLoading from './page_loading';
+
+export default function Hitokoto () {
+  const {
+    data: dataOri,
+    error,
+    loading,
+    run,
+  } = useRequest(() => request.get<IHitokoto>('https://hi.logacg.com/'), {
+    throttleWait: 1000,
+  });
+  const backupData = {
+    hitokoto: '凡是过往，皆为序章。',
+    from: '暴风雨',
+    from_who: '莎士比亚',
+  };
+  const data = dataOri?.data || (error ? backupData : undefined);
+  const [backgroundImage] = useLocalStorage<string>(key.backgroundImage, '');
+  const hasBackground = !!backgroundImage;
+
+  const onCopy = () => {
+    try {
+      const text = `${data?.hitokoto} —— ${data?.from} ${data?.from_who}`;
+      navigator.clipboard.writeText(text);
+      toast.success('复制成功');
+    } catch (_error) {
+      toast.error('复制失败, 请手动复制');
+    }
+  };
+  return (
+    <div className='overflow-hidden'>
+      <div className='relative flex flex-col items-center justify-center p-4 md:p-6'>
+        {loading && !data && <PageLoading />}
+        {data && (
+          <>
+            <IoMdQuote className={clsx(
+              'text-4xl mb-4',
+              hasBackground ? 'text-white/30' : 'text-primary/20'
+            )}
+            />
+            <div className={clsx(
+              'text-xl font-medium tracking-wide leading-relaxed italic',
+              hasBackground ? 'text-white drop-shadow-sm' : 'text-default-700 dark:text-gray-200'
+            )}
+            >
+              " {data?.hitokoto} "
+            </div>
+            <div className='mt-4 flex flex-col items-center text-sm'>
+              <span className={clsx(
+                'font-bold',
+                hasBackground ? 'text-white/90' : 'text-primary-500/80'
+              )}
+              >—— {data?.from}
+              </span>
+              {data?.from_who && <span className={clsx(
+                'text-xs mt-1',
+                hasBackground ? 'text-white/70' : 'text-default-400'
+              )}
+              >                {data?.from_who}
+              </span>}
+            </div>
+          </>
+        )}
+      </div>
+      <div className='flex gap-2'>
+        <Tooltip content='刷新' placement='top'>
+          <Button
+            className={clsx(
+              'transition-colors',
+              hasBackground ? 'text-white/60 hover:text-white' : 'text-default-400 hover:text-primary'
+            )}
+            onPress={run}
+            size='sm'
+            isLoading={loading}
+            isIconOnly
+            radius='full'
+            variant='light'
+          >
+            <IoRefresh />
+          </Button>
+        </Tooltip>
+        <Tooltip content='复制' placement='top'>
+          <Button
+            className={clsx(
+              'transition-colors',
+              hasBackground ? 'text-white/60 hover:text-white' : 'text-default-400 hover:text-success'
+            )}
+            onPress={onCopy}
+            size='sm'
+            isIconOnly
+            radius='full'
+            variant='light'
+          >
+            <IoCopy />
+          </Button>
+        </Tooltip>
+      </div>
+    </div>
+  );
+}

packages/napcat-webui-frontend/src/components/hover_titled_card.tsx

@@ -0,0 +1,146 @@
+import { motion, useMotionValue, useSpring } from 'motion/react';
+import { useRef, useState } from 'react';
+
+const springValues = {
+  damping: 30,
+  stiffness: 100,
+  mass: 2,
+};
+
+export interface HoverTiltedCardProps {
+  imageSrc: string
+  altText?: string
+  captionText?: string
+  containerHeight?: string
+  containerWidth?: string
+  imageHeight?: string
+  imageWidth?: string
+  scaleOnHover?: number
+  rotateAmplitude?: number
+  showTooltip?: boolean
+  overlayContent?: React.ReactNode
+  displayOverlayContent?: boolean
+}
+
+export default function HoverTiltedCard ({
+  imageSrc,
+  altText = 'NapCat',
+  captionText = 'NapCat',
+  containerHeight = '200px',
+  containerWidth = '100%',
+  imageHeight = '200px',
+  imageWidth = '200px',
+  scaleOnHover = 1.1,
+  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'>
+      NapCat
+    </div>
+  ),
+  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 rotateFigcaption = useSpring(0, {
+    stiffness: 350,
+    damping: 30,
+    mass: 1,
+  });
+
+  const [lastY, setLastY] = useState(0);
+
+  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 rotationX = (offsetY / (rect.height / 2)) * -rotateAmplitude;
+    const rotationY = (offsetX / (rect.width / 2)) * rotateAmplitude;
+
+    rotateX.set(rotationX);
+    rotateY.set(rotationY);
+
+    x.set(e.clientX - rect.left);
+    y.set(e.clientY - rect.top);
+
+    const velocityY = offsetY - lastY;
+    rotateFigcaption.set(-velocityY * 0.6);
+    setLastY(offsetY);
+  }
+
+  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);
+  }
+
+  return (
+    <figure
+      ref={ref}
+      className='relative w-full h-full [perspective:800px] flex flex-col items-center justify-center'
+      style={{
+        height: containerHeight,
+        width: containerWidth,
+      }}
+      onMouseMove={handleMouse}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <motion.div
+        className='relative [transform-style:preserve-3d]'
+        style={{
+          width: imageWidth,
+          height: imageHeight,
+          rotateX,
+          rotateY,
+          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'
+          style={{
+            width: imageWidth,
+            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)]'>
+            {overlayContent}
+          </motion.div>
+        )}
+      </motion.div>
+
+      {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'
+          style={{
+            x,
+            y,
+            opacity,
+            rotate: rotateFigcaption,
+          }}
+        >
+          {captionText}
+        </motion.figcaption>
+      )}
+    </figure>
+  );
+}

packages/napcat-webui-frontend/src/components/input/file_input.tsx

@@ -0,0 +1,76 @@
+import { Button } from '@heroui/button';
+import { Input } from '@heroui/input';
+import { useRef, useState } from 'react';
+
+export interface FileInputProps {
+  onChange: (file: File) => Promise<void> | void;
+  onDelete?: () => Promise<void> | void;
+  label?: string;
+  accept?: string;
+  placeholder?: string;
+}
+
+const FileInput: React.FC<FileInputProps> = ({
+  onChange,
+  onDelete,
+  label,
+  accept,
+  placeholder,
+}) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  return (
+    <div className='flex items-end gap-2'>
+      <div className='flex-grow'>
+        <Input
+          isDisabled={isLoading}
+          ref={inputRef}
+          label={label}
+          type='file'
+          placeholder={placeholder || '选择文件'}
+          accept={accept}
+          classNames={{
+            inputWrapper:
+              'bg-default-100/50 dark:bg-white/5 backdrop-blur-md border border-transparent hover:bg-default-200/50 dark:hover:bg-white/10 transition-all shadow-sm data-[hover=true]:border-default-300',
+            input: 'bg-transparent text-default-700 placeholder:text-default-400',
+          }}
+          onChange={async (e) => {
+            try {
+              setIsLoading(true);
+              const file = e.target.files?.[0];
+              if (file) {
+                await onChange(file);
+              }
+            } catch (error) {
+              console.error(error);
+            } finally {
+              setIsLoading(false);
+              if (inputRef.current) inputRef.current.value = '';
+            }
+          }}
+        />
+      </div>
+      <Button
+        isDisabled={isLoading}
+        onPress={async () => {
+          try {
+            setIsLoading(true);
+            if (onDelete) await onDelete();
+          } catch (error) {
+            console.error(error);
+          } finally {
+            setIsLoading(false);
+            if (inputRef.current) inputRef.current.value = '';
+          }
+        }}
+        color='primary'
+        variant='flat'
+        size='sm'
+      >
+        删除
+      </Button>
+    </div>
+  );
+};
+
+export default FileInput;

packages/napcat-webui-frontend/src/components/input/image_input.tsx

@@ -0,0 +1,61 @@
+import { Button } from '@heroui/button';
+import { Image } from '@heroui/image';
+import { Input } from '@heroui/input';
+import { useRef } from 'react';
+
+export interface ImageInputProps {
+  onChange: (base64: string) => void;
+  value: string;
+  label?: string;
+}
+
+const ImageInput: React.FC<ImageInputProps> = ({ onChange, value, label }) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  return (
+    <div className='flex items-end gap-2'>
+      <div className='w-5 h-5 flex-shrink-0'>
+        <Image
+          src={value}
+          alt={label}
+          className='w-5 h-5 flex-shrink-0 rounded-none'
+        />
+      </div>
+      <Input
+        ref={inputRef}
+        label={label}
+        type='file'
+        placeholder='选择图片'
+        accept='image/*'
+        classNames={{
+          inputWrapper:
+            'bg-default-100/50 dark:bg-white/5 backdrop-blur-md border border-transparent hover:bg-default-200/50 dark:hover:bg-white/10 transition-all shadow-sm data-[hover=true]:border-default-300',
+          input: 'bg-transparent text-default-700 placeholder:text-default-400',
+        }}
+        onChange={async (e) => {
+          const file = e.target.files?.[0];
+          if (file) {
+            const reader = new FileReader();
+            reader.onload = async () => {
+              const base64 = reader.result as string;
+              onChange(base64);
+            };
+            reader.readAsDataURL(file);
+          }
+        }}
+      />
+      <Button
+        onPress={() => {
+          onChange('');
+          if (inputRef.current) inputRef.current.value = '';
+        }}
+        color='primary'
+        variant='flat'
+        size='sm'
+      >
+        删除
+      </Button>
+    </div>
+  );
+};
+
+export default ImageInput;

packages/napcat-webui-frontend/src/components/log_com/history.tsx

@@ -0,0 +1,147 @@
+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 { useLocalStorage } from '@uidotdev/usehooks';
+import clsx from 'clsx';
+import { useEffect, useRef, useState } from 'react';
+
+import key from '@/const/key';
+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';
+
+export interface HistoryLogsProps {
+  list: string[];
+  onSelect: (name: string) => void;
+  selectedLog?: string;
+  refreshList: () => void;
+  refreshLog: () => void;
+  listLoading?: boolean;
+  logLoading?: boolean;
+  listError?: Error;
+  logContent?: string;
+}
+const HistoryLogs: React.FC<HistoryLogsProps> = (props) => {
+  const {
+    list,
+    onSelect,
+    selectedLog,
+    refreshList,
+    refreshLog,
+    listLoading,
+    logContent,
+    listError,
+    logLoading,
+  } = props;
+  const Xterm = useRef<XTermRef>(null);
+
+  const [logLevel, setLogLevel] = useState<Selection>(
+    new Set(['info', 'warn', 'error'])
+  );
+  const [backgroundImage] = useLocalStorage<string>(key.backgroundImage, '');
+  const hasBackground = !!backgroundImage;
+
+  const logToColored = (log: string) => {
+    const logs = log
+      .split('\n')
+      .map((line) => {
+        const colored = colorizeLogLevel(line);
+        return colored;
+      })
+      .filter((log) => {
+        if (logLevel === 'all') {
+          return true;
+        }
+        return logLevel.has(log.level);
+      })
+      .map((log) => log.content)
+      .join('\r\n');
+    return logs;
+  };
+
+  const onDownloadLog = () => {
+    if (!logContent) {
+      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);
+  };
+
+  useEffect(() => {
+    if (!Xterm.current || !logContent) {
+      return;
+    }
+    Xterm.current.clear();
+    const _logContent = logToColored(logContent);
+    Xterm.current.write(_logContent + '\r\nnapcat@webui:~$ ');
+  }, [logContent, logLevel]);
+
+  return (
+    <>
+      <title>历史日志 - NapCat WebUI</title>
+      <Card className={clsx(
+        'max-w-full h-full backdrop-blur-sm border border-white/40 dark:border-white/10 shadow-sm',
+        hasBackground ? 'bg-white/20 dark:bg-black/10' : 'bg-white/60 dark:bg-black/40'
+      )}
+      >
+        <CardHeader className='flex-row justify-start gap-3'>
+          <Select
+            label='选择日志'
+            size='sm'
+            isLoading={listLoading}
+            errorMessage={listError?.message}
+            classNames={{
+              trigger:
+                'bg-default-100/50 backdrop-blur-sm hover:!bg-default-200/50',
+            }}
+            placeholder='选择日志'
+            onChange={(e) => {
+              const value = e.target.value;
+              if (!value) {
+                return;
+              }
+              onSelect(value);
+            }}
+            selectedKeys={[selectedLog || '']}
+            items={list.map((name) => ({
+              value: name,
+              label: name,
+            }))}
+          >
+            {(item) => (
+              <SelectItem key={item.value} value={item.value}>
+                {item.label}
+              </SelectItem>
+            )}
+          </Select>
+          <LogLevelSelect
+            selectedKeys={logLevel}
+            onSelectionChange={setLogLevel}
+          />
+          <div className='flex gap-2 ml-auto'>
+            <Button className='flex-shrink-0' onPress={onDownloadLog} size='sm' variant='flat' color='primary'>
+              下载日志
+            </Button>
+            <Button onPress={refreshList} size='sm' variant='flat'>刷新列表</Button>
+            <Button onPress={refreshLog} size='sm' variant='flat'>刷新日志</Button>
+          </div>
+        </CardHeader>
+        <CardBody className='relative'>
+          <PageLoading loading={logLoading} />
+          <XTerm className='w-full h-full' ref={Xterm} />
+        </CardBody>
+      </Card>
+    </>
+  );
+};
+
+export default HistoryLogs;

packages/napcat-webui-frontend/src/components/log_com/log_level_select.tsx

@@ -0,0 +1,87 @@
+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';
+
+export interface LogLevelSelectProps {
+  selectedKeys: Selection;
+  onSelectionChange: (keys: SharedSelection) => void;
+}
+const logLevelColor: {
+  [key in LogLevel]:
+  | 'default'
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'warning'
+  | 'primary'
+} = {
+  [LogLevel.DEBUG]: 'default',
+  [LogLevel.INFO]: 'primary',
+  [LogLevel.WARN]: 'warning',
+  [LogLevel.ERROR]: 'primary',
+  [LogLevel.FATAL]: 'primary',
+};
+const LogLevelSelect = (props: LogLevelSelectProps) => {
+  const { selectedKeys, onSelectionChange } = props;
+  return (
+    <Select
+      selectedKeys={selectedKeys}
+      onSelectionChange={(selectedKeys) => {
+        if (selectedKeys !== 'all' && selectedKeys?.size === 0) {
+          selectedKeys = 'all';
+        }
+        onSelectionChange(selectedKeys);
+      }}
+      label='日志级别'
+      selectionMode='multiple'
+      aria-label='Log Level'
+      classNames={{
+        label: 'mb-2',
+        trigger: 'bg-default-100/50 backdrop-blur-sm hover:!bg-default-200/50',
+        popoverContent: 'bg-opacity-50 backdrop-blur-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 },
+      ]}
+      renderValue={(value) => {
+        if (value.length === 5) {
+          return (
+            <Chip size='sm' color='primary' variant='flat'>
+              全部
+            </Chip>
+          );
+        }
+        return (
+          <div className='flex gap-2'>
+            {value.map((v) => (
+              <Chip
+                size='sm'
+                key={v.key}
+                color={logLevelColor[v.data?.value as LogLevel]}
+                variant='flat'
+              >
+                {v.data?.label}
+              </Chip>
+            ))}
+          </div>
+        );
+      }}
+    >
+      {(item) => (
+        <SelectItem key={item.value} value={item.value}>
+          {item.label}
+        </SelectItem>
+      )}
+    </Select>
+  );
+};
+
+export default LogLevelSelect;

packages/napcat-webui-frontend/src/components/log_com/realtime.tsx

@@ -0,0 +1,125 @@
+import { Button } from '@heroui/button';
+import type { Selection } from '@react-types/shared';
+import { useLocalStorage } from '@uidotdev/usehooks';
+import clsx from 'clsx';
+import { useEffect, useRef, useState } from 'react';
+import toast from 'react-hot-toast';
+import { IoDownloadOutline } from 'react-icons/io5';
+
+import key from '@/const/key';
+import { colorizeLogLevelWithTag } from '@/utils/terminal';
+
+import WebUIManager, { Log } from '@/controllers/webui_manager';
+
+import type { XTermRef } from '../xterm';
+import XTerm from '../xterm';
+import LogLevelSelect from './log_level_select';
+
+const RealTimeLogs = () => {
+  const Xterm = useRef<XTermRef>(null);
+  const [logLevel, setLogLevel] = useState<Selection>(
+    new Set(['info', 'warn', 'error'])
+  );
+  const [dataArr, setDataArr] = useState<Log[]>([]);
+  const [backgroundImage] = useLocalStorage<string>(key.backgroundImage, '');
+  const hasBackground = !!backgroundImage;
+
+  const onDownloadLog = () => {
+    const logContent = dataArr
+      .filter((log) => {
+        if (logLevel === 'all') {
+          return true;
+        }
+        return logLevel.has(log.level);
+      })
+      .map((log) => colorizeLogLevelWithTag(log.message, log.level))
+      .join('\r\n');
+    const blob = new Blob([logContent], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'napcat.log';
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const writeStream = () => {
+    try {
+      const _data = dataArr
+        .filter((log) => {
+          if (logLevel === 'all') {
+            return true;
+          }
+          return logLevel.has(log.level);
+        })
+        .map((log) => colorizeLogLevelWithTag(log.message, log.level))
+        .join('\r\n');
+      Xterm.current?.clear();
+      Xterm.current?.write(_data);
+    } catch (error) {
+      console.error(error);
+      toast.error('获取实时日志失败');
+    }
+  };
+
+  useEffect(() => {
+    writeStream();
+  }, [logLevel, dataArr]);
+
+  useEffect(() => {
+    const subscribeLogs = () => {
+      try {
+        const source = WebUIManager.getRealTimeLogs((data) => {
+          setDataArr((prev) => {
+            const newData = [...prev, ...data];
+            if (newData.length > 1000) {
+              newData.splice(0, newData.length - 1000);
+            }
+            return newData;
+          });
+        });
+        return () => {
+          source.close();
+        };
+      } catch (_error) {
+        toast.error('获取实时日志失败');
+      }
+    };
+
+    const close = subscribeLogs();
+    return () => {
+      console.log('close');
+      close?.();
+    };
+  }, []);
+
+  return (
+    <>
+      <title>实时日志 - NapCat WebUI</title>
+      <div className={clsx(
+        'flex items-center gap-2 p-2 rounded-2xl border backdrop-blur-sm transition-all shadow-sm mb-4',
+        hasBackground ? 'bg-white/20 dark:bg-black/10 border-white/40 dark:border-white/10' : 'bg-white/60 dark:bg-black/40 border-white/40 dark:border-white/10'
+      )}
+      >
+        <LogLevelSelect
+          selectedKeys={logLevel}
+          onSelectionChange={setLogLevel}
+        />
+        <Button
+          className='flex-shrink-0'
+          onPress={onDownloadLog}
+          startContent={<IoDownloadOutline className='text-lg' />}
+          color='primary'
+          variant='flat'
+        >
+          下载日志
+        </Button>
+      </div>
+      <div className='flex-1 h-full overflow-hidden'>
+        <XTerm ref={Xterm} />
+      </div>
+    </>
+  );
+};
+
+export default RealTimeLogs;

packages/napcat-webui-frontend/src/components/mirror_selector_modal.tsx

@@ -0,0 +1,283 @@
+import { useState, useEffect } from 'react';
+import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter } from '@heroui/modal';
+import { Button } from '@heroui/button';
+import { Chip } from '@heroui/chip';
+import { Tooltip } from '@heroui/tooltip';
+import { IoMdFlash, IoMdCheckmark, IoMdClose } from 'react-icons/io';
+import clsx from 'clsx';
+
+import MirrorManager, { MirrorTestResult } from '@/controllers/mirror_manager';
+
+interface MirrorSelectorModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSelect: (mirror: string | undefined) => void;
+  currentMirror?: string;
+  type?: 'file' | 'raw';
+}
+
+export default function MirrorSelectorModal ({
+  isOpen,
+  onClose,
+  onSelect,
+  currentMirror,
+  type = 'file',
+}: MirrorSelectorModalProps) {
+  const [mirrors, setMirrors] = useState<string[]>([]);
+  const [selectedMirror, setSelectedMirror] = useState<string>(currentMirror || 'auto');
+  const [testResults, setTestResults] = useState<Map<string, MirrorTestResult>>(new Map());
+  const [isTesting, setIsTesting] = useState(false);
+  const [testProgress, setTestProgress] = useState(0);
+  const [testMessage, setTestMessage] = useState('');
+  const [fastestMirror, setFastestMirror] = useState<string | null>(null);
+
+  // 加载镜像列表
+  useEffect(() => {
+    if (isOpen) {
+      loadMirrors();
+    }
+  }, [isOpen]);
+
+  const loadMirrors = async () => {
+    try {
+      const data = await MirrorManager.getMirrorList();
+      const mirrorList = type === 'raw' ? data.rawMirrors : data.fileMirrors;
+      setMirrors(mirrorList);
+      if (data.customMirror) {
+        setSelectedMirror(data.customMirror);
+      }
+    } catch (e) {
+      console.error('Failed to load mirrors:', e);
+    }
+  };
+
+  const startSpeedTest = () => {
+    setIsTesting(true);
+    setTestProgress(0);
+    setTestResults(new Map());
+    setFastestMirror(null);
+    setTestMessage('准备测速...');
+
+    MirrorManager.testMirrorsSSE(type, {
+      onStart: (data) => {
+        setTestMessage(data.message);
+      },
+      onTesting: (data) => {
+        setTestProgress((data.index / data.total) * 100);
+        setTestMessage(data.message);
+      },
+      onResult: (data) => {
+        setTestResults((prev) => {
+          const newMap = new Map(prev);
+          newMap.set(data.result.mirror, data.result);
+          return newMap;
+        });
+        setTestProgress(((data.index + 1) / data.total) * 100);
+      },
+      onComplete: (data) => {
+        setIsTesting(false);
+        setTestProgress(100);
+        setTestMessage(data.message);
+        if (data.fastest) {
+          setFastestMirror(data.fastest.mirror);
+        }
+      },
+      onError: (error) => {
+        setIsTesting(false);
+        setTestMessage(`测速失败: ${error}`);
+      },
+    });
+  };
+
+  const handleConfirm = () => {
+    const mirror = selectedMirror === 'auto' ? undefined : selectedMirror;
+    onSelect(mirror);
+    onClose();
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      size='2xl'
+      scrollBehavior='inside'
+      classNames={{
+        backdrop: 'z-[200]',
+        wrapper: 'z-[200]',
+      }}
+    >
+      <ModalContent>
+        <ModalHeader className='flex flex-col gap-1'>
+          <div className='flex items-center justify-between pr-8'>
+            <span>选择镜像源</span>
+            <Button
+              size='sm'
+              color='primary'
+              variant='flat'
+              startContent={!isTesting && <IoMdFlash />}
+              onPress={startSpeedTest}
+              isLoading={isTesting}
+            >
+              {isTesting ? '测速中...' : '一键测速'}
+            </Button>
+          </div>
+          {isTesting && (
+            <div className='mt-2'>
+              <div className='w-full bg-default-200 rounded-full h-2'>
+                <div
+                  className='bg-primary h-2 rounded-full transition-all duration-300'
+                  style={{ width: `${testProgress}%` }}
+                />
+              </div>
+              <p className='text-xs text-default-500 mt-1'>{testMessage}</p>
+            </div>
+          )}
+        </ModalHeader>
+        <ModalBody>
+          <div className='flex flex-col gap-2'>
+            {/* 自动选择选项 */}
+            <MirrorOption
+              value='auto'
+              label='自动选择'
+              description='系统自动选择最快的镜像源'
+              isSelected={selectedMirror === 'auto'}
+              onSelect={() => setSelectedMirror('auto')}
+              badge={<Chip size='sm' color='primary' variant='flat'>推荐</Chip>}
+            />
+
+            {/* 原始 GitHub */}
+            <MirrorOption
+              value='https://github.com'
+              label='GitHub 原始'
+              description='直连 GitHub（可能较慢）'
+              isSelected={selectedMirror === 'https://github.com'}
+              onSelect={() => setSelectedMirror('https://github.com')}
+              testResult={testResults.get('https://github.com (原始)')}
+              isFastest={fastestMirror === 'https://github.com (原始)'}
+            />
+
+            {/* 镜像列表 */}
+            {mirrors.map((mirror) => {
+              if (!mirror) return null;
+              const result = testResults.get(mirror);
+              const isFastest = fastestMirror === mirror;
+
+              let hostname = mirror;
+              try {
+                hostname = new URL(mirror).hostname;
+              } catch { }
+
+              return (
+                <MirrorOption
+                  key={mirror}
+                  value={mirror}
+                  label={hostname}
+                  description={mirror}
+                  isSelected={selectedMirror === mirror}
+                  onSelect={() => setSelectedMirror(mirror)}
+                  testResult={result}
+                  isFastest={isFastest}
+                />
+              );
+            })}
+          </div>
+        </ModalBody>
+        <ModalFooter>
+          <Button variant='light' onPress={onClose}>
+            取消
+          </Button>
+          <Button color='primary' onPress={handleConfirm}>
+            确认选择
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}
+
+// 镜像选项组件
+interface MirrorOptionProps {
+  value: string;
+  label: string;
+  description: string;
+  isSelected: boolean;
+  onSelect: () => void;
+  testResult?: MirrorTestResult;
+  isFastest?: boolean;
+  badge?: React.ReactNode;
+}
+
+function MirrorOption ({
+  label,
+  description,
+  isSelected,
+  onSelect,
+  testResult,
+  isFastest,
+  badge,
+}: MirrorOptionProps) {
+  return (
+    <div
+      className={clsx(
+        'flex items-center justify-between p-3 rounded-lg cursor-pointer transition-all',
+        'bg-content1 hover:bg-content2 border-2',
+        isSelected ? 'border-primary' : 'border-transparent',
+        isFastest && 'ring-2 ring-success'
+      )}
+      onClick={onSelect}
+    >
+      <div className='flex-1 min-w-0'>
+        <p className='font-medium'>{label}</p>
+        <p className='text-xs text-default-500 truncate'>{description}</p>
+      </div>
+      <div className='flex items-center gap-2 ml-2'>
+        {badge}
+        {isFastest && !badge && (
+          <Chip size='sm' color='success' variant='flat'>最快</Chip>
+        )}
+        {testResult && <MirrorStatus result={testResult} />}
+      </div>
+    </div>
+  );
+}
+
+// 镜像状态显示组件
+function MirrorStatus ({ result }: { result: MirrorTestResult; }) {
+  const formatLatency = (latency: number) => {
+    if (latency >= 5000) return '>5s';
+    if (latency >= 1000) return `${(latency / 1000).toFixed(1)}s`;
+    return `${latency}ms`;
+  };
+
+  if (!result.success) {
+    return (
+      <Tooltip content={result.error || '连接失败'}>
+        <Chip
+          size='sm'
+          color='danger'
+          variant='flat'
+          startContent={<IoMdClose size={14} />}
+        >
+          失败
+        </Chip>
+      </Tooltip>
+    );
+  }
+
+  const getColor = (): 'success' | 'warning' | 'danger' => {
+    if (result.latency < 300) return 'success';
+    if (result.latency < 1000) return 'warning';
+    return 'danger';
+  };
+
+  return (
+    <Chip
+      size='sm'
+      color={getColor()}
+      variant='flat'
+      startContent={<IoMdCheckmark size={14} />}
+    >
+      {formatLatency(result.latency)}
+    </Chip>
+  );
+}

packages/napcat-webui-frontend/src/components/modal.tsx

@@ -0,0 +1,101 @@
+import { Button } from '@heroui/button';
+import {
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  Modal as NextUIModal,
+  useDisclosure,
+} from '@heroui/modal';
+import React from 'react';
+
+export interface ModalProps {
+  content: React.ReactNode;
+  title?: React.ReactNode;
+  size?: React.ComponentProps<typeof NextUIModal>['size'];
+  scrollBehavior?: React.ComponentProps<typeof NextUIModal>['scrollBehavior'];
+  onClose?: () => void;
+  onConfirm?: () => void;
+  onCancel?: () => void;
+  backdrop?: 'opaque' | 'blur' | 'transparent';
+  showCancel?: boolean;
+  dismissible?: boolean;
+  confirmText?: string;
+  cancelText?: string;
+  hideFooter?: boolean;
+}
+
+const Modal: React.FC<ModalProps> = React.memo((props) => {
+  const {
+    backdrop = 'blur',
+    title,
+    content,
+    showCancel = true,
+    dismissible,
+    confirmText = '确定',
+    cancelText = '取消',
+    hideFooter = false,
+    onClose,
+    onConfirm,
+    onCancel,
+    ...rest
+  } = props;
+  const { onClose: onNativeClose } = useDisclosure();
+
+  return (
+    <NextUIModal
+      defaultOpen
+      backdrop={backdrop}
+      isDismissable={dismissible}
+      onClose={() => {
+        onClose?.();
+        onNativeClose();
+      }}
+      classNames={{
+        backdrop: 'z-[99] backdrop-blur-sm',
+        wrapper: 'z-[99]',
+      }}
+      {...rest}
+    >
+      <ModalContent>
+        {(nativeClose) => (
+          <>
+            {title && (
+              <ModalHeader className='flex flex-col gap-1'>{title}</ModalHeader>
+            )}
+            <ModalBody className='break-all'>{content}</ModalBody>
+            {!hideFooter && (
+              <ModalFooter>
+                {showCancel && (
+                  <Button
+                    color='primary'
+                    variant='light'
+                    onPress={() => {
+                      onCancel?.();
+                      nativeClose();
+                    }}
+                  >
+                    {cancelText}
+                  </Button>
+                )}
+                <Button
+                  color='primary'
+                  onPress={() => {
+                    onConfirm?.();
+                    nativeClose();
+                  }}
+                >
+                  {confirmText}
+                </Button>
+              </ModalFooter>
+            )}
+          </>
+        )}
+      </ModalContent>
+    </NextUIModal>
+  );
+});
+
+Modal.displayName = 'Modal';
+
+export default Modal;

packages/napcat-webui-frontend/src/components/napcat_repo_info.tsx

@@ -0,0 +1,245 @@
+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 {
+  BookIcon,
+  BugIcon,
+  PullRequestIcon,
+  StarIcon,
+  TagIcon,
+  UsersIcon,
+  WatchersIcon,
+} from '@/components/icons';
+
+import { request } from '@/utils/request';
+import { openUrl } from '@/utils/url';
+
+import type {
+  GirhubRepo,
+  GithubContributor,
+  GithubPullRequest,
+  GithubRelease as GithubReleaseType,
+} from '@/types/github';
+
+function displayData (data: number, loading: boolean, error?: Error) {
+  if (error) {
+    return <MdError className='text-primary-400' />;
+  }
+
+  if (loading) {
+    return <Spinner size='sm' />;
+  }
+
+  return <ItemCounter number={data} />;
+}
+
+export default function NapCatRepoInfo () {
+  // repo info
+  const {
+    data: repoOriData,
+    error: repoError,
+    loading: repoLoading,
+  } = useRequest(() =>
+    request.get<GirhubRepo>('https://api.github.com/repos/NapNeko/NapCatQQ')
+  );
+
+  // release info
+  const {
+    data: releaseOriData,
+    error: releaseError,
+    loading: releaseLoading,
+  } = useRequest(() =>
+    request.get<GithubReleaseType[]>(
+      'https://api.github.com/repos/NapNeko/NapCatQQ/releases'
+    )
+  );
+
+  // pr info
+  const {
+    data: prData,
+    error: prError,
+    loading: prLoading,
+  } = useRequest(() =>
+    request.get<GithubPullRequest[]>(
+      'https://api.github.com/repos/NapNeko/NapCatQQ/pulls'
+    )
+  );
+
+  // contributors info
+  const {
+    data: contributorsData,
+    error: contributorsError,
+    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 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'
+      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',
+      }}
+      onAction={(key: React.Key) => {
+        switch (key) {
+          case 'releases':
+            openUrl('https://github.com/NapNeko/NapCatQQ/releases', true);
+            break;
+          case 'contributors':
+            openUrl(
+              'https://github.com/NapNeko/NapCatQQ/graphs/contributors',
+              true
+            );
+            break;
+          case 'license':
+            openUrl(
+              'https://github.com/NapNeko/NapCatQQ/blob/main/LICENSE',
+              true
+            );
+            break;
+          case 'watchers':
+            openUrl('https://github.com/NapNeko/NapCatQQ/watchers', true);
+            break;
+          case 'star':
+            openUrl('https://github.com/NapNeko/NapCatQQ/stargazers', true);
+            break;
+          case 'issues':
+            openUrl('https://github.com/NapNeko/NapCatQQ/issues', true);
+            break;
+          case 'pull_requests':
+            openUrl('https://github.com/NapNeko/NapCatQQ/pulls', true);
+            break;
+          default:
+            openUrl('https://github.com/NapNeko/NapCatQQ', true);
+        }
+      }}
+    >
+      <ListboxItem
+        key='star'
+        endContent={displayData(
+          repoData?.stargazers_count ?? 0,
+          false,
+          repoError
+        )}
+        startContent={
+          <IconWrapper className='bg-success/10 text-success'>
+            <StarIcon className='text-lg' />
+          </IconWrapper>
+        }
+      >
+        Star
+      </ListboxItem>
+      <ListboxItem
+        key='issues'
+        endContent={displayData(
+          repoData?.open_issues_count ?? 0,
+          false,
+          repoError
+        )}
+        startContent={
+          <IconWrapper className='bg-success/10 text-success'>
+            <BugIcon className='text-lg' />
+          </IconWrapper>
+        }
+      >
+        Issues
+      </ListboxItem>
+      <ListboxItem
+        key='pull_requests'
+        endContent={displayData(prCount, prLoading, prError)}
+        startContent={
+          <IconWrapper className='bg-primary/10 text-primary'>
+            <PullRequestIcon className='text-lg' />
+          </IconWrapper>
+        }
+      >
+        Pull Requests
+      </ListboxItem>
+      <ListboxItem
+        key='releases'
+        className='group h-auto py-3'
+        endContent={
+          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>
+        }
+        textValue='Releases'
+      >
+        {releaseData && <GithubRelease releaseData={releaseData} />}
+      </ListboxItem>
+      <ListboxItem
+        key='contributors'
+        endContent={displayData(
+          contributorsCount,
+          contributorsLoading,
+          contributorsError
+        )}
+        startContent={
+          <IconWrapper className='bg-warning/10 text-warning'>
+            <UsersIcon />
+          </IconWrapper>
+        }
+      >
+        Contributors
+      </ListboxItem>
+      <ListboxItem
+        key='watchers'
+        endContent={displayData(
+          repoData?.watchers_count ?? 0,
+          repoLoading,
+          repoError
+        )}
+        startContent={
+          <IconWrapper className='bg-default/50 text-foreground'>
+            <WatchersIcon />
+          </IconWrapper>
+        }
+      >
+        Watchers
+      </ListboxItem>
+      <ListboxItem
+        key='license'
+        endContent={
+          <span className='text-small text-default-400'>
+            {repoData?.license?.name ?? 'unknown'}
+          </span>
+        }
+        startContent={
+          <IconWrapper className='bg-primary/10 text-primary dark:text-primary-500'>
+            <BookIcon />
+          </IconWrapper>
+        }
+      >
+        License
+      </ListboxItem>
+    </Listbox>
+  );
+}

packages/napcat-webui-frontend/src/components/network_edit/generic_form.tsx

@@ -0,0 +1,189 @@
+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';
+
+import SwitchCard from '../switch_card';
+
+export type FieldTypes = 'input' | 'select' | 'switch';
+
+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;
+}
+
+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>>;
+}
+
+const GenericForm = <T extends keyof NetworkConfigType> ({
+  data,
+  defaultValues,
+  onClose,
+  onSubmit,
+  fields,
+}: GenericFormProps<T>): ReactElement => {
+  const { control, handleSubmit, formState, setValue, reset } = useForm<
+    NetworkConfigType[T][0]
+  >({
+    defaultValues,
+  });
+
+  const submitAction: SubmitHandler<NetworkConfigType[T][0]> = async (data) => {
+    await onSubmit(data);
+    onClose();
+  };
+
+  const _onSubmit = handleSubmit(submitAction, (e) => {
+    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]>[];
+      for (const key of keys) {
+        const value = data[key] as PathValue<
+          NetworkConfig[T][0],
+          Path<NetworkConfig[T][0]>
+        >;
+        setValue(key, value);
+      }
+    } else {
+      reset();
+    }
+  }, [data, reset, setValue]);
+
+  return (
+    <>
+      <ModalBody>
+        <div className='grid grid-cols-2 gap-y-4 gap-x-2 w-full'>
+          {fields.map((field) => (
+            <div
+              key={field.name as string}
+              className={field.colSpan === 1 ? 'col-span-1' : 'col-span-2'}
+            >
+              <Controller
+                control={control}
+                name={field.name as Path<NetworkConfig[T][0]>}
+                rules={
+                  field.isRequired
+                    ? {
+                      required: `请填写${field.label}`,
+                    }
+                    : undefined
+                }
+                render={({ field: controllerField }) => {
+                  switch (field.type) {
+                    case 'input':
+                      return (
+                        <Input
+                          value={controllerField.value as string}
+                          onValueChange={(value) => controllerField.onChange(value)}
+                          ref={controllerField.ref}
+                          isRequired={field.isRequired}
+                          isDisabled={field.isDisabled}
+                          label={field.label}
+                          placeholder={field.placeholder}
+                          classNames={{
+                            inputWrapper:
+                              'bg-default-100/50 dark:bg-white/5 backdrop-blur-md border border-transparent hover:bg-default-200/50 dark:hover:bg-white/10 transition-all shadow-sm data-[hover=true]:border-default-300',
+                            input: 'bg-transparent text-default-700 placeholder:text-default-400',
+                          }}
+                        />
+                      );
+                    case 'select':
+                      return (
+                        <Select
+                          {...controllerField}
+                          ref={controllerField.ref}
+                          isRequired={field.isRequired}
+                          label={field.label}
+                          placeholder={field.placeholder}
+                          selectedKeys={[controllerField.value as string]}
+                          value={controllerField.value.toString()}
+                          classNames={{
+                            trigger: 'bg-default-100/50 dark:bg-white/5 backdrop-blur-md border border-transparent hover:bg-default-200/50 dark:hover:bg-white/10 transition-all shadow-sm data-[hover=true]:border-default-300',
+                            value: 'text-default-700',
+                          }}
+                        >
+                          {field.options?.map((option) => (
+                            <SelectItem key={option.key} value={option.value}>
+                              {option.value}
+                            </SelectItem>
+                          )) || <></>}
+                        </Select>
+                      );
+                    case 'switch':
+                      return (
+                        <SwitchCard
+                          {...controllerField}
+                          value={controllerField.value as boolean}
+                          description={field.description}
+                          label={field.label}
+                        />
+                      );
+                    default:
+                      return <></>;
+                  }
+                }}
+              />
+            </div>
+          ))}
+        </div>
+      </ModalBody>
+      <ModalFooter>
+        <Button
+          color='primary'
+          isDisabled={formState.isSubmitting}
+          variant='light'
+          onPress={onClose}
+        >
+          关闭
+        </Button>
+        <Button
+          color='primary'
+          isLoading={formState.isSubmitting}
+          onPress={() => _onSubmit()}
+        >
+          保存
+        </Button>
+      </ModalFooter>
+    </>
+  );
+};
+
+export default GenericForm;
+export function random_token (length: number) {
+  const chars =
+    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_.~';
+  let result = '';
+  for (let i = 0; i < length; i++) {
+    result += chars.charAt(Math.floor(Math.random() * chars.length));
+  }
+  return result;
+}

packages/napcat-webui-frontend/src/components/network_edit/http_client.tsx

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

packages/napcat-webui-frontend/src/components/network_edit/http_server.tsx

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

packages/napcat-webui-frontend/src/components/network_edit/http_sse.tsx

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

packages/napcat-webui-frontend/src/components/network_edit/modal.tsx

@@ -0,0 +1,158 @@
+import { Modal, ModalContent, ModalHeader } from '@heroui/modal';
+import toast from 'react-hot-toast';
+
+import useConfig from '@/hooks/use-config';
+import useDialog from '@/hooks/use-dialog';
+
+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',
+};
+
+export interface NetworkFormModalProps<
+  T extends keyof OneBotConfig['network']
+> {
+  isOpen: boolean;
+  field: T;
+  data?: OneBotConfig['network'][T][0];
+  onOpenChange: (isOpen: boolean) => void;
+}
+
+const NetworkFormModal = <T extends keyof OneBotConfig['network']> (
+  props: NetworkFormModalProps<T>
+) => {
+  const { isOpen, onOpenChange, field, data } = props;
+  const { createNetworkConfig, updateNetworkConfig } = useConfig();
+  const dialog = useDialog();
+  const isCreate = !data;
+
+  const onSubmit = async (data: OneBotConfig['network'][typeof field][0]) => {
+    const saveData = async (dataToSave: OneBotConfig['network'][typeof field][0]) => {
+      try {
+        if (isCreate) {
+          await createNetworkConfig(field, dataToSave);
+        } else {
+          await updateNetworkConfig(field, dataToSave);
+        }
+        toast.success('保存配置成功');
+      } catch (error) {
+        const msg = (error as Error).message;
+
+        toast.error(`保存配置失败: ${msg}`);
+
+        throw error;
+      }
+    };
+
+    if (['httpServers', 'httpSseServers', 'websocketServers'].includes(field)) {
+      const serverData = data as any;
+      if (!serverData.token && serverData.host !== '127.0.0.1') {
+        await new Promise<void>((resolve, reject) => {
+          dialog.confirm({
+            title: '安全警告',
+            content: (
+              <div>
+                <p>检测到未配置Token，这可能导致安全风险。确认要继续吗？</p>
+                <p className='text-sm text-gray-500 mt-2'>(未配置Token时，Host将被强制限制为 127.0.0.1)</p>
+              </div>
+            ),
+            onConfirm: async () => {
+              serverData.host = '127.0.0.1';
+              try {
+                await saveData(serverData);
+                resolve();
+              } catch (e) {
+                reject(e);
+              }
+            },
+            onCancel: () => {
+              reject(new Error('Cancelled'));
+            },
+          });
+        });
+        return;
+      }
+    }
+    await saveData(data);
+  };
+
+  const renderFormComponent = (onClose: () => void) => {
+    switch (field) {
+      case 'httpServers':
+        return (
+          <HTTPServerForm
+            data={data as OneBotConfig['network']['httpServers'][0]}
+            onClose={onClose}
+            onSubmit={onSubmit}
+          />
+        );
+      case 'httpClients':
+        return (
+          <HTTPClientForm
+            data={data as OneBotConfig['network']['httpClients'][0]}
+            onClose={onClose}
+            onSubmit={onSubmit}
+          />
+        );
+      case 'websocketServers':
+        return (
+          <WebsocketServerForm
+            data={data as OneBotConfig['network']['websocketServers'][0]}
+            onClose={onClose}
+            onSubmit={onSubmit}
+          />
+        );
+      case 'websocketClients':
+        return (
+          <WebsocketClientForm
+            data={data as OneBotConfig['network']['websocketClients'][0]}
+            onClose={onClose}
+            onSubmit={onSubmit}
+          />
+        );
+      case 'httpSseServers':
+        return (
+          <HTTPServerSSEForm
+            data={data as OneBotConfig['network']['httpSseServers'][0]}
+            onClose={onClose}
+            onSubmit={onSubmit}
+          />
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <Modal
+      backdrop='blur'
+      isDismissable={false}
+      isOpen={isOpen}
+      size='lg'
+      scrollBehavior='outside'
+      onOpenChange={onOpenChange}
+    >
+      <ModalContent>
+        {(onClose) => (
+          <>
+            <ModalHeader className='flex flex-col gap-1'>
+              {modalTitle[field]}
+            </ModalHeader>
+            {renderFormComponent(onClose)}
+          </>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default NetworkFormModal;

packages/napcat-webui-frontend/src/components/network_edit/ws_client.tsx

@@ -0,0 +1,123 @@
+import GenericForm, { random_token } from './generic_form';
+import type { Field } from './generic_form';
+
+export interface WebsocketClientFormProps {
+  data?: OneBotConfig['network']['websocketClients'][0];
+  onClose: () => void;
+  onSubmit: (
+    data: OneBotConfig['network']['websocketClients'][0]
+  ) => Promise<void>;
+}
+
+type WebsocketClientFormType = OneBotConfig['network']['websocketClients'];
+
+const WebsocketClientForm: React.FC<WebsocketClientFormProps> = ({
+  data,
+  onClose,
+  onSubmit,
+}) => {
+  const defaultValues: WebsocketClientFormType[0] = {
+    enable: false,
+    name: '',
+    url: 'ws://localhost:8082',
+    reportSelfMessage: false,
+    messagePostFormat: 'array',
+    token: random_token(16),
+    debug: false,
+    heartInterval: 30000,
+    reconnectInterval: 30000,
+    verifyCertificate: true,
+  };
+
+  const fields: Field<'websocketClients'>[] = [
+    {
+      name: 'enable',
+      label: '启用',
+      type: 'switch',
+      description: '保存后启用此配置',
+      colSpan: 1,
+    },
+    {
+      name: 'debug',
+      label: '开启Debug',
+      type: 'switch',
+      description: '是否开启调试模式',
+      colSpan: 1,
+    },
+    {
+      name: 'name',
+      label: '名称',
+      type: 'input',
+      placeholder: '请输入名称',
+      isRequired: true,
+      isDisabled: !!data,
+    },
+    {
+      name: 'url',
+      label: 'URL',
+      type: 'input',
+      placeholder: '请输入URL',
+      isRequired: true,
+    },
+    {
+      name: 'reportSelfMessage',
+      label: '上报自身消息',
+      type: 'switch',
+      description: '是否上报自身消息',
+      colSpan: 1,
+    },
+    {
+      name: 'messagePostFormat',
+      label: '消息格式',
+      type: 'select',
+      placeholder: '请选择消息格式',
+      isRequired: true,
+      options: [
+        { key: 'array', value: 'Array' },
+        { key: 'string', value: 'String' },
+      ],
+      colSpan: 1,
+    },
+    {
+      name: 'token',
+      label: 'Token',
+      type: 'input',
+      placeholder: '请输入Token',
+    },
+    {
+      name: 'heartInterval',
+      label: '心跳间隔',
+      type: 'input',
+      placeholder: '请输入心跳间隔',
+      isRequired: true,
+      colSpan: 1,
+    },
+    {
+      name: 'reconnectInterval',
+      label: '重连间隔',
+      type: 'input',
+      placeholder: '请输入重连间隔',
+      isRequired: true,
+      colSpan: 1,
+    },
+    {
+      name: 'verifyCertificate',
+      label: 'SSL证书验证',
+      type: 'switch',
+      description: '是否验证SSL证书（wss连接）。关闭后可连接自签名证书的服务器，但会降低安全性',
+      colSpan: 2,
+    },
+  ];
+
+  return (
+    <GenericForm
+      data={data}
+      defaultValues={defaultValues}
+      onClose={onClose}
+      onSubmit={onSubmit}
+      fields={fields}
+    />
+  );
+};
+
+export default WebsocketClientForm;

packages/napcat-webui-frontend/src/components/network_edit/ws_server.tsx

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

packages/napcat-webui-frontend/src/components/new_device_verify.tsx

@@ -0,0 +1,162 @@
+import { useEffect, useRef, useState, useCallback } from 'react';
+import { Button } from '@heroui/button';
+import { Spinner } from '@heroui/spinner';
+import { QRCodeSVG } from 'qrcode.react';
+
+import QQManager from '@/controllers/qq_manager';
+
+interface NewDeviceVerifyProps {
+  /** jumpUrl from loginErrorInfo */
+  jumpUrl: string;
+  /** QQ uin for OIDB requests */
+  uin: string;
+  /** Called when QR verification is confirmed, passes str_nt_succ_token */
+  onVerified: (token: string) => void;
+  /** Called when user cancels */
+  onCancel?: () => void;
+}
+
+type QRStatus = 'loading' | 'waiting' | 'scanned' | 'confirmed' | 'error';
+
+const NewDeviceVerify: React.FC<NewDeviceVerifyProps> = ({
+  jumpUrl,
+  uin,
+  onVerified,
+  onCancel,
+}) => {
+  const [qrUrl, setQrUrl] = useState<string>('');
+  const [status, setStatus] = useState<QRStatus>('loading');
+  const [errorMsg, setErrorMsg] = useState<string>('');
+  const pollTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const mountedRef = useRef(true);
+
+  const stopPolling = useCallback(() => {
+    if (pollTimerRef.current) {
+      clearInterval(pollTimerRef.current);
+      pollTimerRef.current = null;
+    }
+  }, []);
+
+  const startPolling = useCallback((token: string) => {
+    stopPolling();
+    pollTimerRef.current = setInterval(async () => {
+      if (!mountedRef.current) return;
+      try {
+        const result = await QQManager.pollNewDeviceQR(uin, token);
+        if (!mountedRef.current) return;
+        const s = result?.uint32_guarantee_status;
+        if (s === 3) {
+          setStatus('scanned');
+        } else if (s === 1) {
+          stopPolling();
+          setStatus('confirmed');
+          const ntToken = result?.str_nt_succ_token || '';
+          onVerified(ntToken);
+        }
+        // s === 0 means still waiting, do nothing
+      } catch {
+        // Ignore poll errors, keep polling
+      }
+    }, 2500);
+  }, [uin, onVerified, stopPolling]);
+
+  const fetchQRCode = useCallback(async () => {
+    setStatus('loading');
+    setErrorMsg('');
+    try {
+      const result = await QQManager.getNewDeviceQRCode(uin, jumpUrl);
+      if (!mountedRef.current) return;
+      if (result?.str_url) {
+        setQrUrl(result.str_url);
+        setStatus('waiting');
+        // bytes_token 用于轮询，如果 OIDB 未返回则用空字符串
+        startPolling(result.bytes_token || '');
+      } else {
+        setStatus('error');
+        setErrorMsg('获取二维码失败，请重试');
+      }
+    } catch (e) {
+      if (!mountedRef.current) return;
+      setStatus('error');
+      setErrorMsg((e as Error).message || '获取二维码失败');
+    }
+  }, [uin, jumpUrl, startPolling]);
+
+  useEffect(() => {
+    mountedRef.current = true;
+    fetchQRCode();
+    return () => {
+      mountedRef.current = false;
+      stopPolling();
+    };
+  }, [fetchQRCode, stopPolling]);
+
+  const statusText: Record<QRStatus, string> = {
+    loading: '正在获取二维码...',
+    waiting: '请使用手机QQ扫描二维码完成验证',
+    scanned: '已扫描，请在手机上确认',
+    confirmed: '验证成功，正在登录...',
+    error: errorMsg || '获取二维码失败',
+  };
+
+  const statusColor: Record<QRStatus, string> = {
+    loading: 'text-default-500',
+    waiting: 'text-warning',
+    scanned: 'text-primary',
+    confirmed: 'text-success',
+    error: 'text-danger',
+  };
+
+  return (
+    <div className='flex flex-col gap-4 items-center'>
+      <p className='text-warning text-sm'>
+        检测到新设备登录，请使用手机QQ扫描下方二维码完成验证
+      </p>
+
+      <div className='flex flex-col items-center gap-3' style={{ minHeight: 280 }}>
+        {status === 'loading'
+          ? (
+            <div className='flex items-center justify-center' style={{ height: 240 }}>
+              <Spinner size='lg' />
+            </div>
+          )
+          : status === 'error'
+            ? (
+              <div className='flex flex-col items-center justify-center gap-3' style={{ height: 240 }}>
+                <p className='text-danger text-sm'>{errorMsg}</p>
+                <Button color='primary' variant='flat' onPress={fetchQRCode}>
+                  重新获取
+                </Button>
+              </div>
+            )
+            : (
+              <div className='p-3 bg-white rounded-lg'>
+                <QRCodeSVG value={qrUrl} size={220} />
+              </div>
+            )}
+
+        <p className={`text-sm ${statusColor[status]}`}>
+          {statusText[status]}
+        </p>
+      </div>
+
+      <div className='flex gap-3'>
+        {status === 'waiting' && (
+          <Button color='default' variant='flat' size='sm' onPress={fetchQRCode}>
+            刷新二维码
+          </Button>
+        )}
+        <Button
+          variant='light'
+          color='danger'
+          size='sm'
+          onPress={onCancel}
+        >
+          取消验证
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default NewDeviceVerify;

packages/napcat-webui-frontend/src/components/onebot/api/debug.tsx

@@ -0,0 +1,477 @@
+import { Button } from '@heroui/button';
+
+import { Input } from '@heroui/input';
+import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover';
+import { Tooltip } from '@heroui/tooltip';
+import { Tab, Tabs } from '@heroui/tabs';
+import { Chip } from '@heroui/chip';
+import { useLocalStorage } from '@uidotdev/usehooks';
+import clsx from 'clsx';
+import { forwardRef, useEffect, useImperativeHandle, useState, useCallback, useMemo } from 'react';
+import toast from 'react-hot-toast';
+import { IoChevronDown, IoSend, IoSettingsSharp, IoCopy } from 'react-icons/io5';
+import { TbCode, TbMessageCode } from 'react-icons/tb';
+
+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 { request } from '@/utils/request';
+
+import { BaseResponseSchema, parseTypeBox, generateDefaultFromTypeBox } from '@/utils/typebox';
+import { Type } from '@sinclair/typebox';
+
+import DisplayStruct from './display_struct';
+
+export interface OneBotApiDebugProps {
+  path: OneBotHttpApiPath;
+  data: OneBotHttpApiContent;
+  adapterName?: string;
+}
+
+export interface OneBotApiDebugRef {
+  setRequestBody: (value: string) => void;
+  sendWithBody: (value: string) => void;
+  focusRequestEditor: () => void;
+}
+
+const OneBotApiDebug = forwardRef<OneBotApiDebugRef, OneBotApiDebugProps>((props, ref) => {
+  const { path, data, adapterName } = props;
+  const currentURL = new URL(window.location.origin);
+  currentURL.port = '3000';
+  const defaultHttpUrl = currentURL.href;
+  const defaultToken = localStorage.getItem('token') || '';
+  const [httpConfig, setHttpConfig] = useLocalStorage(key.httpDebugConfig, {
+    url: defaultHttpUrl,
+    token: defaultToken,
+  });
+
+  const [requestBody, setRequestBody] = useState('{}');
+  const [responseContent, setResponseContent] = useState('');
+  const [isFetching, setIsFetching] = useState(false);
+  const [activeTab, setActiveTab] = useState<any>('request');
+  const [responseExpanded, setResponseExpanded] = useState(true);
+  const [responseStatus, setResponseStatus] = useState<{ code: number; text: string; } | null>(null);
+  // Height Resizing Logic
+  const [responseHeight, setResponseHeight] = useState(240);
+  const [storedHeight, setStoredHeight] = useLocalStorage('napcat_debug_response_height', 240);
+
+  // 使用 useMemo 缓存解析结果，避免每次渲染都重新解析
+  const parsedRequest = useMemo(() => {
+    try {
+      return parseTypeBox(data?.payload);
+    } catch (e) {
+      console.error('Error parsing request schema:', e);
+      return [];
+    }
+  }, [data?.payload]);
+
+  // 将返回值的 data 结构包装进 BaseResponseSchema 进行展示
+  // 使用解构属性的方式重新构建对象，确保 parseTypeBox 能够识别为 object 类型
+  const parsedResponse = useMemo(() => {
+    try {
+      const wrappedResponseSchema = Type.Object({
+        ...BaseResponseSchema.properties,
+        data: data?.response || Type.Any({ description: '数据' }),
+      });
+      return parseTypeBox(wrappedResponseSchema);
+    } catch (e) {
+      console.error('Error parsing response schema:', e);
+      return [];
+    }
+  }, [data?.response]);
+  const [backgroundImage] = useLocalStorage<string>(key.backgroundImage, '');
+  const hasBackground = !!backgroundImage;
+
+  const sendRequest = async (bodyOverride?: string) => {
+    if (isFetching) return;
+    setIsFetching(true);
+    setResponseStatus(null);
+    const r = toast.loading('正在发送请求...');
+
+    try {
+      const parsedRequestBody = JSON.parse(bodyOverride ?? requestBody);
+
+      // 如果有 adapterName，走后端转发
+      if (adapterName) {
+        request.post(`/api/Debug/call/${adapterName}`, {
+          action: path,
+          params: parsedRequestBody,
+        }, {
+          headers: {
+            Authorization: `Bearer ${localStorage.getItem('token')}`,
+          },
+        }).then((res) => {
+          if (res.data.code === 0) {
+            setResponseContent(JSON.stringify(res.data.data, null, 2));
+            setResponseStatus({ code: 200, text: 'OK' });
+          } else {
+            setResponseContent(JSON.stringify(res.data, null, 2));
+            setResponseStatus({ code: 500, text: res.data.message });
+          }
+          setResponseExpanded(true);
+          toast.success('请求成功');
+        }).catch((err) => {
+          toast.error('请求失败：' + err.message);
+          setResponseContent(JSON.stringify({ error: err.message }, null, 2));
+          setResponseStatus({ code: 500, text: 'Error' });
+          setResponseExpanded(true);
+        }).finally(() => {
+          setIsFetching(false);
+          toast.dismiss(r);
+        });
+        return;
+      }
+
+      // 回退到旧逻辑 (直接请求)
+      const requestURL = new URL(httpConfig.url);
+      requestURL.pathname = path;
+      request
+        .post(requestURL.href, parsedRequestBody, {
+          headers: {
+            Authorization: `Bearer ${httpConfig.token}`,
+          },
+        }) // 移除 responseType: 'text'，以便 axios 自动解析 JSON
+        .then((res) => {
+          setResponseContent(JSON.stringify(res.data, null, 2));
+          setResponseStatus({ code: res.status, text: res.statusText });
+          setResponseExpanded(true);
+          toast.success('请求成功');
+        })
+        .catch((err) => {
+          toast.error('请求失败：' + err.message);
+          setResponseContent(JSON.stringify(err.response?.data || { error: err.message }, null, 2));
+          if (err.response) {
+            setResponseStatus({ code: err.response.status, text: err.response.statusText });
+          }
+          setResponseExpanded(true);
+        })
+        .finally(() => {
+          setIsFetching(false);
+          toast.dismiss(r);
+        });
+    } catch (_error) {
+      toast.error('请求体 JSON 格式错误');
+      setIsFetching(false);
+      toast.dismiss(r);
+    }
+  };
+
+  useImperativeHandle(ref, () => ({
+    setRequestBody: (value: string) => {
+      setActiveTab('request');
+      setRequestBody(value);
+    },
+    sendWithBody: (value: string) => {
+      setActiveTab('request');
+      setRequestBody(value);
+      // 直接用 override 发送，避免 setState 异步导致拿到旧值
+      sendRequest(value);
+    },
+    focusRequestEditor: () => {
+      setActiveTab('request');
+    },
+  }));
+
+  useEffect(() => {
+    if (data?.payloadExample) {
+      setRequestBody(JSON.stringify(data.payloadExample, null, 2));
+    } else {
+      try {
+        setRequestBody(JSON.stringify(generateDefaultFromTypeBox(data?.payload), null, 2));
+      } catch (e) {
+        console.error('Error generating default:', e);
+        setRequestBody('{}');
+      }
+    }
+    setResponseContent('');
+    setResponseStatus(null);
+  }, [path]);
+
+  // Sync from storage on mount
+  useEffect(() => {
+    setResponseHeight(storedHeight);
+  }, []);
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    const startY = e.clientY;
+    const startHeight = responseHeight;
+    let currentH = startHeight;
+    let frameId: number;
+
+    const handleMouseMove = (mv: MouseEvent) => {
+      if (frameId) cancelAnimationFrame(frameId);
+      frameId = requestAnimationFrame(() => {
+        const delta = startY - mv.clientY;
+        currentH = Math.max(100, Math.min(window.innerHeight - 200, startHeight + delta));
+        setResponseHeight(currentH);
+      });
+    };
+
+    const handleMouseUp = () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+      if (frameId) cancelAnimationFrame(frameId);
+      setStoredHeight(currentH);
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+  }, [responseHeight, setStoredHeight]);
+
+  const handleTouchStart = useCallback((e: React.TouchEvent) => {
+    const touch = e.touches[0];
+    const startY = touch.clientY;
+    const startHeight = responseHeight;
+    let currentH = startHeight;
+    let frameId: number;
+
+    const handleTouchMove = (mv: TouchEvent) => {
+      if (frameId) cancelAnimationFrame(frameId);
+      frameId = requestAnimationFrame(() => {
+        const mvTouch = mv.touches[0];
+        const delta = startY - mvTouch.clientY;
+        currentH = Math.max(100, Math.min(window.innerHeight - 200, startHeight + delta));
+        setResponseHeight(currentH);
+      });
+    };
+
+    const handleTouchEnd = () => {
+      document.removeEventListener('touchmove', handleTouchMove);
+      document.removeEventListener('touchend', handleTouchEnd);
+      if (frameId) cancelAnimationFrame(frameId);
+      setStoredHeight(currentH);
+    };
+
+    document.addEventListener('touchmove', handleTouchMove);
+    document.addEventListener('touchend', handleTouchEnd);
+  }, [responseHeight, setStoredHeight]);
+
+  return (
+
+    <div className='flex flex-col h-full w-full relative overflow-hidden'>
+      {/* 1. Top Toolbar: URL & Actions */}
+      <div className={clsx(
+        'flex items-center gap-4 px-4 py-2 border-b flex-shrink-0 z-10',
+        hasBackground ? 'border-white/10 bg-white/5' : 'border-black/5 dark:border-white/10 bg-white/40 dark:bg-black/20'
+      )}
+      >
+        {/* Method & Path */}
+        {/* Method & Path */}
+        {/* Method & Path */}
+        <div className='flex items-center gap-3 flex-1 min-w-0 pl-1'>
+          <div className={clsx(
+            'text-sm font-mono truncate select-all px-2 py-1 rounded-md transition-colors',
+            hasBackground ? 'text-white/90 bg-black/10' : 'text-foreground dark:text-white/90 bg-default-100/50'
+          )}
+          >
+            {path}
+          </div>
+        </div>
+
+        {/* Actions */}
+        <div className='flex items-center gap-2'>
+          <Popover placement='bottom-end' backdrop='transparent'>
+            <PopoverTrigger>
+              <Button size='sm' variant='light' radius='sm' isIconOnly className='opacity-60 hover:opacity-100'>
+                <IoSettingsSharp className='text-lg' />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className='w-[260px] p-3 rounded-md border border-white/10 shadow-2xl bg-white/80 dark:bg-black/80 backdrop-blur-xl'>
+              <div className='flex flex-col gap-2'>
+                <p className='text-[10px] font-bold opacity-30 uppercase tracking-widest'>Debug Setup</p>
+                <Input label='Base URL' labelPlacement='outside' placeholder='http://...' value={httpConfig.url} onChange={(e) => setHttpConfig({ ...httpConfig, url: e.target.value })} size='sm' variant='bordered' />
+                <Input label='Token' labelPlacement='outside' placeholder='access_token' value={httpConfig.token} onChange={(e) => setHttpConfig({ ...httpConfig, token: e.target.value })} size='sm' variant='bordered' />
+              </div>
+            </PopoverContent>
+          </Popover>
+
+          <Button
+            onPress={() => sendRequest()}
+            color='primary'
+            radius='sm'
+            size='sm'
+            className='font-bold shadow-sm px-4'
+            isLoading={isFetching}
+            startContent={!isFetching && <IoSend className='text-xs' />}
+          >
+            发送
+          </Button>
+        </div>
+      </div>
+
+      {/* 2. Main Workspace (Request) - Flexible Height */}
+      <div className='flex-1 min-h-0 flex flex-col relative'>
+        <div className='flex-1 flex flex-col overflow-hidden relative'>
+          {/* Request Toolbar */}
+          <div className={clsx(
+            'px-4 flex items-center justify-between h-10 flex-shrink-0 border-b',
+            hasBackground ? 'border-white/10' : 'border-default-100 dark:border-white/10'
+          )}
+          >
+            <Tabs
+              aria-label='Request Options'
+              size='sm'
+              variant='underlined'
+              selectedKey={activeTab}
+              onSelectionChange={setActiveTab}
+              classNames={{
+                tabList: 'p-0 gap-6 bg-transparent',
+                cursor: 'w-full bg-foreground dark:bg-white h-[2px]',
+                tab: 'px-0 h-full',
+                tabContent: 'text-xs font-medium text-default-500 dark:text-white/50 group-data-[selected=true]:text-foreground dark:group-data-[selected=true]:text-white',
+              }}
+            >
+              <Tab key='request' title='请求体' />
+              <Tab key='docs' title='接口文档' />
+            </Tabs>
+
+            <div className='flex items-center gap-1 opacity-70'>
+              <ChatInputModal>
+                {(onOpen) => (
+                  <Tooltip content='构造 CQ 码' closeDelay={0}>
+                    <Button isIconOnly size='sm' variant='light' radius='sm' className='w-8 h-8' onPress={onOpen}>
+                      <TbMessageCode size={16} />
+                    </Button>
+                  </Tooltip>
+                )}
+              </ChatInputModal>
+              <Tooltip content='生成示例' closeDelay={0}>
+                <Button
+                  isIconOnly size='sm' variant='light' radius='sm' className='w-8 h-8' onPress={() => {
+                    try {
+                      setRequestBody(JSON.stringify(generateDefaultFromTypeBox(data?.payload), null, 2));
+                    } catch (e) {
+                      console.error('Error generating default:', e);
+                      toast.error('生成示例失败');
+                    }
+                  }}
+                >
+                  <TbCode size={16} />
+                </Button>
+              </Tooltip>
+            </div>
+          </div>
+
+          {/* Content Area */}
+          <div className='flex-1 relative overflow-hidden'>
+            {activeTab === 'request'
+              ? (
+                <div className='absolute inset-0'>
+                  <CodeEditor
+                    value={requestBody}
+                    onChange={(value) => setRequestBody(value ?? '')}
+                    language='json'
+                    options={{
+                      minimap: { enabled: false },
+                      fontSize: 13,
+                      fontFamily: 'JetBrains Mono, monospace',
+                      scrollBeyondLastLine: false,
+                      wordWrap: 'on',
+                      padding: { top: 16, bottom: 16 },
+                      lineNumbersMinChars: 3,
+                      chromeless: true,
+                      backgroundColor: 'transparent',
+                    }}
+                  />
+                </div>
+              )
+              : (
+                <div className='p-6 space-y-8 overflow-y-auto h-full scrollbar-hide'>
+                  <section>
+                    <h3 className='text-[10px] font-bold text-default-700 dark:text-default-50 uppercase tracking-widest mb-4'>Request Params</h3>
+                    <DisplayStruct schema={parsedRequest} />
+                  </section>
+                  <div className='h-px bg-white/10 w-full' />
+                  <section>
+                    <h3 className='text-[10px] font-bold text-default-700 dark:text-default-50 uppercase tracking-widest mb-4'>Response Data</h3>
+                    <DisplayStruct schema={parsedResponse} />
+                  </section>
+                </div>
+              )}
+          </div>
+        </div>
+      </div>
+
+      {/* 3. Response Panel (Bottom) */}
+      <div
+        className='flex-shrink-0 flex flex-col overflow-hidden relative'
+        style={{ height: responseExpanded ? undefined : 'auto' }}
+      >
+        {/* Resize Handle / Header */}
+        <div
+          className={clsx(
+            'flex items-center justify-between px-4 py-1.5 cursor-pointer hover:bg-black/5 dark:hover:bg-white/5 transition-colors select-none group relative border-t',
+            hasBackground ? 'border-white/10' : 'border-default-100 dark:border-white/10'
+          )}
+          onClick={() => setResponseExpanded(!responseExpanded)}
+        >
+          {/* Invisible Draggable Area */}
+          {responseExpanded && (
+            <div
+              className='absolute -top-1.5 left-0 w-full h-4 cursor-ns-resize z-20'
+              onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e); }}
+              onTouchStart={(e) => { e.stopPropagation(); handleTouchStart(e); }}
+              onClick={(e) => e.stopPropagation()}
+            />
+          )}
+
+          <div className='flex items-center gap-2'>
+            <div className={clsx('transition-transform duration-200', !responseExpanded && '-rotate-90')}>
+              <IoChevronDown size={14} className='opacity-50' />
+            </div>
+            <span className={clsx(
+              'text-[10px] font-bold tracking-widest uppercase',
+              hasBackground ? 'text-white' : 'text-foreground dark:text-white'
+            )}
+            >Response
+            </span>
+            {responseStatus && (
+              <Chip size='sm' variant='dot' color={responseStatus.code >= 200 && responseStatus.code < 300 ? 'success' : 'danger'} className='h-5 text-[10px] font-mono border-none bg-transparent pl-0'>
+                {responseStatus.code} {responseStatus.text}
+              </Chip>
+            )}
+          </div>
+
+          <Button size='sm' variant='light' isIconOnly radius='sm' className='h-6 w-6 opacity-40 hover:opacity-100' onClick={(e) => { e.stopPropagation(); navigator.clipboard.writeText(responseContent); toast.success('已复制'); }}>
+            <IoCopy size={12} />
+          </Button>
+        </div>
+
+        {/* Response Editor */}
+        {responseExpanded && (
+          <div style={{ height: responseHeight }} className='relative bg-transparent'>
+            <PageLoading loading={isFetching} />
+            <div className='absolute inset-0'>
+              <CodeEditor
+                value={responseContent || '// Waiting for response...'}
+                language='json'
+                options={{
+                  minimap: { enabled: false },
+                  fontSize: 12,
+                  fontFamily: 'JetBrains Mono, monospace',
+                  lineNumbers: 'off',
+                  scrollBeyondLastLine: false,
+                  wordWrap: 'on',
+                  readOnly: true,
+                  folding: true,
+                  padding: { top: 12, bottom: 12 },
+                  renderLineHighlight: 'none',
+                  chromeless: true,
+                  backgroundColor: 'transparent',
+                }}
+              />
+            </div>
+          </div>
+        )}
+      </div>
+
+    </div>
+  );
+});
+
+export default OneBotApiDebug;

packages/napcat-webui-frontend/src/components/onebot/api/display_struct.tsx

@@ -0,0 +1,222 @@
+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';
+
+interface DisplayStructProps {
+  schema: ParsedSchema | ParsedSchema[];
+}
+
+const SchemaType = ({
+  type,
+  value,
+}: {
+  type: string;
+  value?: LiteralValue;
+}) => {
+  let name = type;
+  switch (type) {
+    case 'union':
+      name = '联合类型';
+      break;
+    case 'value':
+      name = '固定值';
+      break;
+  }
+  let chipColor: 'primary' | 'success' | 'primary' | 'warning' | 'secondary' =
+    'primary';
+  switch (type) {
+    case 'enum':
+      chipColor = 'warning';
+      break;
+    case 'union':
+      chipColor = 'secondary';
+      break;
+    case 'array':
+      chipColor = 'primary';
+      break;
+    case 'object':
+      chipColor = 'success';
+      break;
+  }
+
+  return (
+    <Chip size='sm' color={chipColor} variant='flat'>
+      {name}
+      {type === 'value' && (
+        <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} />
+      )}
+    {schema.optional && (
+      <Chip size='sm' color='default' variant='flat'>
+        可选
+      </Chip>
+    )}
+    {schema.description && (
+      <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 toggleExpand = () => setExpanded(!expanded);
+
+  return (
+    <div className='mb-2'>
+      <div
+        onClick={toggleExpand}
+        className='md:cursor-pointer flex items-center gap-1'
+      >
+        <motion.div
+          initial={{ rotate: 0 }}
+          animate={{ rotate: expanded ? 90 : 0 }}
+        >
+          <TbSquareRoundedChevronRightFilled />
+        </motion.div>
+        <Tooltip content='点击复制' placement='top' showArrow>
+          <span
+            className='border-b border-transparent border-dashed hover:border-primary-400'
+            onClick={(e) => {
+              e.stopPropagation();
+              navigator.clipboard.writeText(schema.name || '');
+              toast.success('已复制');
+            }}
+          >
+            {schema.name}
+          </span>
+        </Tooltip>
+        <SchemaLabel schema={schema} />
+      </div>
+      <motion.div
+        className='ml-5 overflow-hidden'
+        initial={{ opacity: 0, height: 0 }}
+        animate={{ opacity: expanded ? 1 : 0, height: expanded ? 'auto' : 0 }}
+      >
+        <div className='h-2' />
+        {children}
+      </motion.div>
+    </div>
+  );
+};
+
+const RenderSchema: React.FC<{ schema: ParsedSchema; }> = ({ schema }) => {
+  // 处理循环引用和截断的情况，直接显示提示而不继续递归
+  if (schema.isCircularRef || schema.isTruncated) {
+    return (
+      <div className='mb-2 flex items-center gap-1 pl-5'>
+        {schema.name && (
+          <span className='text-default-400'>{schema.name}</span>
+        )}
+        <Chip size='sm' color='default' variant='flat'>
+          {schema.description || '...'}
+        </Chip>
+      </div>
+    );
+  }
+
+  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>
+          )}
+      </SchemaContainer>
+    );
+  }
+
+  if (schema.type === 'array' || schema.type === 'union') {
+    return (
+      <SchemaContainer schema={schema}>
+        {schema.children?.map((child, i) => (
+          <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'>
+          {schema.enum?.map((value, i) => (
+            <Chip
+              key={value?.toString() || i}
+              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>
+        <span
+          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('已复制');
+          }}
+        >
+          {schema.name}
+        </span>
+      </Tooltip>
+      <SchemaLabel schema={schema} />
+    </div>
+  );
+};
+
+const DisplayStruct: React.FC<DisplayStructProps> = ({ schema }) => {
+  return (
+    <div className=''>
+      {Array.isArray(schema)
+        ? (
+          schema.map((s, i) => <RenderSchema key={s.name || i} schema={s} />)
+        )
+        : (
+          <RenderSchema schema={schema} />
+        )}
+    </div>
+  );
+};
+
+export default DisplayStruct;

packages/napcat-webui-frontend/src/components/onebot/display_card/message.tsx

@@ -0,0 +1,122 @@
+import { Avatar } from '@heroui/avatar';
+import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover';
+import clsx from 'clsx';
+
+import { isOB11GroupMessage } from '@/utils/onebot';
+
+import type {
+  OB11GroupMessage,
+  OB11Message,
+  OB11PrivateMessage,
+} from '@/types/onebot';
+
+import { renderMessageContent } from '../render_message';
+
+export interface OneBotMessageProps {
+  data: OB11Message;
+}
+
+export interface OneBotMessageGroupProps {
+  data: OB11GroupMessage;
+}
+
+export interface OneBotMessagePrivateProps {
+  data: OB11PrivateMessage;
+}
+
+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'>
+          {isOB11GroupMessage(data) && data.sender.card && (
+            <span className='mr-1'>{data.sender.card}</span>
+          )}
+          <span
+            className={clsx(
+              isOB11GroupMessage(data) &&
+              data.sender.card &&
+              'text-default-400 font-normal'
+            )}
+          >
+            {data.sender.nickname}
+          </span>
+        </div>
+        <div>({data.sender.user_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>
+            {Array.isArray(data.message)
+              ? renderMessageContent(data.message, true)
+              : data.raw_message}
+          </div>
+        </PopoverTrigger>
+        <PopoverContent>
+          <div className='p-2'>
+            {Array.isArray(data.message)
+              ? renderMessageContent(data.message)
+              : data.raw_message}
+          </div>
+        </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'>
+        <Avatar
+          src={`https://p.qlogo.cn/gh/${data.group_id}/${data.group_id}/0/`}
+          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'>
+        <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'
+        />
+        <MessageContent data={data} />
+      </div>
+    </div>
+  );
+};
+
+const OneBotMessagePrivate: React.FC<OneBotMessagePrivateProps> = ({
+  data,
+}) => {
+  return (
+    <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'
+      />
+      <MessageContent data={data} />
+    </div>
+  );
+};
+
+const OneBotMessage: React.FC<OneBotMessageProps> = ({ data }) => {
+  if (data.message_type === 'group') {
+    return <OneBotMessageGroup data={data} />;
+  } else if (data.message_type === 'private') {
+    return <OneBotMessagePrivate data={data} />;
+  } else {
+    return <div>未知消息类型</div>;
+  }
+};
+
+export default OneBotMessage;

packages/napcat-webui-frontend/src/components/onebot/display_card/meta.tsx

@@ -0,0 +1,60 @@
+import { Chip } from '@heroui/chip';
+
+import { getLifecycleColor, getLifecycleName } from '@/utils/onebot';
+
+import type {
+  OB11Meta,
+  OneBot11Heartbeat,
+  OneBot11Lifecycle,
+} from '@/types/onebot';
+
+export interface OneBotDisplayMetaProps {
+  data: OB11Meta
+}
+
+export interface OneBotDisplayMetaHeartbeatProps {
+  data: OneBot11Heartbeat
+}
+
+export interface OneBotDisplayMetaLifecycleProps {
+  data: OneBot11Lifecycle
+}
+
+const OneBotDisplayMetaHeartbeat: React.FC<OneBotDisplayMetaHeartbeatProps> = ({
+  data,
+}) => {
+  return (
+    <div className='flex gap-2'>
+      <Chip>心跳</Chip>
+      <Chip>间隔 {data.status.interval}ms</Chip>
+    </div>
+  );
+};
+
+const OneBotDisplayMetaLifecycle: React.FC<OneBotDisplayMetaLifecycleProps> = ({
+  data,
+}) => {
+  return (
+    <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'>
+      {data.meta_event_type === 'lifecycle' && (
+        <OneBotDisplayMetaLifecycle data={data} />
+      )}
+      {data.meta_event_type === 'heartbeat' && (
+        <OneBotDisplayMetaHeartbeat data={data} />
+      )}
+    </div>
+  );
+};
+
+export default OneBotDisplayMeta;

packages/napcat-webui-frontend/src/components/onebot/display_card/notice.tsx

@@ -0,0 +1,292 @@
+import { Chip } from '@heroui/chip';
+
+import { getNoticeTypeName } from '@/utils/onebot';
+
+import {
+  OB11Notice,
+  OB11NoticeType,
+  OneBot11FriendAdd,
+  OneBot11FriendRecall,
+  OneBot11GroupAdmin,
+  OneBot11GroupBan,
+  OneBot11GroupCard,
+  OneBot11GroupDecrease,
+  OneBot11GroupEssence,
+  OneBot11GroupIncrease,
+  OneBot11GroupMessageReaction,
+  OneBot11GroupRecall,
+  OneBot11GroupUpload,
+  OneBot11Honor,
+  OneBot11LuckyKing,
+  OneBot11Poke,
+} from '@/types/onebot';
+
+export interface OneBotNoticeProps {
+  data: OB11Notice
+}
+
+export interface NoticeProps<T> {
+  data: T
+}
+
+const GroupUploadNotice: React.FC<NoticeProps<OneBot11GroupUpload>> = ({
+  data,
+}) => {
+  const { group_id, user_id, file } = data;
+  return (
+    <>
+      <div>群号: {group_id}</div>
+      <div>用户ID: {user_id}</div>
+      <div>文件名: {file.name}</div>
+      <div>文件大小: {file.size} 字节</div>
+    </>
+  );
+};
+
+const GroupAdminNotice: React.FC<NoticeProps<OneBot11GroupAdmin>> = ({
+  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,
+}) => {
+  const { group_id, operator_id, user_id, sub_type } = data;
+  return (
+    <>
+      <div>群号: {group_id}</div>
+      <div>操作者ID: {operator_id}</div>
+      <div>用户ID: {user_id}</div>
+      <div>原因: {sub_type}</div>
+    </>
+  );
+};
+
+const GroupIncreaseNotice: React.FC<NoticeProps<OneBot11GroupIncrease>> = ({
+  data,
+}) => {
+  const { group_id, operator_id, user_id, sub_type } = data;
+  return (
+    <>
+      <div>群号: {group_id}</div>
+      <div>操作者ID: {operator_id}</div>
+      <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;
+  return (
+    <>
+      <div>群号: {group_id}</div>
+      <div>操作者ID: {operator_id}</div>
+      <div>用户ID: {user_id}</div>
+      <div>禁言类型: {sub_type}</div>
+      <div>禁言时长: {duration} 秒</div>
+    </>
+  );
+};
+
+const FriendAddNotice: React.FC<NoticeProps<OneBot11FriendAdd>> = ({
+  data,
+}) => {
+  const { user_id } = data;
+  return (
+    <>
+      <div>用户ID: {user_id}</div>
+    </>
+  );
+};
+
+const GroupRecallNotice: React.FC<NoticeProps<OneBot11GroupRecall>> = ({
+  data,
+}) => {
+  const { group_id, user_id, operator_id, message_id } = data;
+  return (
+    <>
+      <div>群号: {group_id}</div>
+      <div>用户ID: {user_id}</div>
+      <div>操作者ID: {operator_id}</div>
+      <div>消息ID: {message_id}</div>
+    </>
+  );
+};
+
+const FriendRecallNotice: React.FC<NoticeProps<OneBot11FriendRecall>> = ({
+  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;
+  return (
+    <>
+      <div>群号: {group_id}</div>
+      <div>用户ID: {user_id}</div>
+      <div>目标ID: {target_id}</div>
+    </>
+  );
+};
+
+const LuckyKingNotice: React.FC<NoticeProps<OneBot11LuckyKing>> = ({
+  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;
+  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;
+  return (
+    <>
+      <div>群号: {group_id}</div>
+      <div>用户ID: {user_id}</div>
+      <div>消息ID: {message_id}</div>
+      <div>
+        表情回应:
+        {likes
+          .map((like) => `表情ID: ${like.emoji_id}, 数量: ${like.count}`)
+          .join(', ')}
+      </div>
+    </>
+  );
+};
+
+const GroupEssenceNotice: React.FC<NoticeProps<OneBot11GroupEssence>> = ({
+  data,
+}) => {
+  const { group_id, message_id, sender_id, operator_id, sub_type } = data;
+  return (
+    <>
+      <div>群号: {group_id}</div>
+      <div>消息ID: {message_id}</div>
+      <div>发送者ID: {sender_id}</div>
+      <div>操作者ID: {operator_id}</div>
+      <div>操作类型: {sub_type}</div>
+    </>
+  );
+};
+
+const GroupCardNotice: React.FC<NoticeProps<OneBot11GroupCard>> = ({
+  data,
+}) => {
+  const { group_id, user_id, card_new, card_old } = data;
+  return (
+    <>
+      <div>群号: {group_id}</div>
+      <div>用户ID: {user_id}</div>
+      <div>新名片: {card_new}</div>
+      <div>旧名片: {card_old}</div>
+    </>
+  );
+};
+
+const OneBotNotice: React.FC<OneBotNoticeProps> = ({ data }) => {
+  let NoticeComponent: React.ReactNode;
+  switch (data.notice_type) {
+    case OB11NoticeType.GroupUpload:
+      NoticeComponent = <GroupUploadNotice data={data} />;
+      break;
+    case OB11NoticeType.GroupAdmin:
+      NoticeComponent = <GroupAdminNotice data={data} />;
+      break;
+    case OB11NoticeType.GroupDecrease:
+      NoticeComponent = <GroupDecreaseNotice data={data} />;
+      break;
+    case OB11NoticeType.GroupIncrease:
+      NoticeComponent = (
+        <GroupIncreaseNotice data={data as OneBot11GroupIncrease} />
+      );
+      break;
+    case OB11NoticeType.GroupBan:
+      NoticeComponent = <GroupBanNotice data={data} />;
+      break;
+    case OB11NoticeType.FriendAdd:
+      NoticeComponent = <FriendAddNotice data={data as OneBot11FriendAdd} />;
+      break;
+    case OB11NoticeType.GroupRecall:
+      NoticeComponent = <GroupRecallNotice data={data as OneBot11GroupRecall} />;
+      break;
+    case OB11NoticeType.FriendRecall:
+      NoticeComponent = (
+        <FriendRecallNotice data={data as OneBot11FriendRecall} />
+      );
+      break;
+    case OB11NoticeType.Notify:
+      switch (data.sub_type) {
+        case 'poke':
+          NoticeComponent = <PokeNotice data={data as OneBot11Poke} />;
+          break;
+        case 'lucky_king':
+          NoticeComponent = <LuckyKingNotice data={data as OneBot11LuckyKing} />;
+          break;
+        case 'honor':
+          NoticeComponent = <HonorNotice data={data as OneBot11Honor} />;
+          break;
+      }
+      break;
+    case OB11NoticeType.GroupMsgEmojiLike:
+      NoticeComponent = (
+        <GroupMessageReactionNotice
+          data={data as OneBot11GroupMessageReaction}
+        />
+      );
+      break;
+    case OB11NoticeType.GroupEssence:
+      NoticeComponent = (
+        <GroupEssenceNotice data={data as OneBot11GroupEssence} />
+      );
+      break;
+    case OB11NoticeType.GroupCard:
+      NoticeComponent = <GroupCardNotice data={data as OneBot11GroupCard} />;
+      break;
+  }
+
+  return (
+    <div className='flex gap-2 items-center'>
+      <Chip color='warning' variant='flat'>
+        通知
+      </Chip>
+      <Chip>{getNoticeTypeName(data.notice_type)}</Chip>
+      {NoticeComponent}
+    </div>
+  );
+};
+
+export default OneBotNotice;

packages/napcat-webui-frontend/src/components/onebot/display_card/render.tsx

@@ -0,0 +1,152 @@
+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 { getEventName, isOB11Event } from '@/utils/onebot';
+import { timestampToDateString } from '@/utils/time';
+
+import type {
+  AllOB11WsResponse,
+  OB11AllEvent,
+  OB11Request,
+} from '@/types/onebot';
+
+import OneBotMessage from './message';
+import OneBotNotice from './notice';
+import OneBotDisplayResponse from './response';
+
+const itemVariants = {
+  hidden: { opacity: 0, scale: 0.8, y: 50 },
+  visible: {
+    opacity: 1,
+    scale: 1,
+    y: 0,
+    transition: { type: 'spring' as const, stiffness: 300, damping: 20 },
+  },
+};
+
+function RequestComponent ({ data: _ }: { data: OB11Request; }) {
+  return <div>Request消息，暂未适配</div>;
+}
+
+export interface OneBotItemRenderProps {
+  data: AllOB11WsResponse[];
+  index: number;
+  style: React.CSSProperties;
+}
+
+export const getItemSize = (event: OB11AllEvent['post_type']) => {
+  if (event === 'meta_event') {
+    return 100;
+  }
+  if (event === 'message') {
+    return 180;
+  }
+  if (event === 'request') {
+    return 100;
+  }
+  if (event === 'notice') {
+    return 100;
+  }
+  if (event === 'message_sent') {
+    return 250;
+  }
+  return 100;
+};
+
+const renderDetail = (data: AllOB11WsResponse) => {
+  if (isOB11Event(data)) {
+    switch (data.post_type) {
+      case 'meta_event':
+        return <OneBotDisplayMeta data={data} />;
+      case 'message':
+        return <OneBotMessage data={data} />;
+      case 'request':
+        return <RequestComponent data={data} />;
+      case 'notice':
+        return <OneBotNotice data={data} />;
+      case 'message_sent':
+        return <OneBotMessage data={data} />;
+      default:
+        return <div>未知类型的消息</div>;
+    }
+  }
+  return <OneBotDisplayResponse data={data} />;
+};
+
+const OneBotItemRender = ({ data, index, style }: OneBotItemRenderProps) => {
+  const msg = data[index];
+  const isEvent = isOB11Event(msg);
+  return (
+    <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'
+      >
+        <Card className='w-full h-full py-2 bg-white/60 dark:bg-black/40 backdrop-blur-xl border border-white/40 dark:border-white/10 shadow-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'>
+              {isEvent && timestampToDateString(msg.time)}
+            </div>
+            <div className='ml-auto'>
+              <Popover
+                placement='left'
+                showArrow
+                classNames={{
+                  content: 'max-h-96 max-w-96 overflow-hidden p-0',
+                }}
+              >
+                <PopoverTrigger>
+                  <Button
+                    size='sm'
+                    color='primary'
+                    variant='flat'
+                    radius='full'
+                    isIconOnly
+                    className='text-medium'
+                  >
+                    <IoCode />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent>
+                  <Snippet
+                    hideSymbol
+                    codeString={JSON.stringify(msg, null, 2)}
+                    tooltipProps={{
+                      content: '点击复制',
+                    }}
+                    classNames={{
+                      copyButton: 'self-start sticky top-0 right-0',
+                    }}
+                    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'>
+                          {line}
+                        </span>
+                      ))}
+                  </Snippet>
+                </PopoverContent>
+              </Popover>
+            </div>
+          </CardHeader>
+          <CardBody className='py-0'>{renderDetail(msg)}</CardBody>
+        </Card>
+      </motion.div>
+    </div>
+  );
+};
+
+export default OneBotItemRender;

packages/napcat-webui-frontend/src/components/onebot/display_card/response.tsx

@@ -0,0 +1,76 @@
+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 { RequestResponse } from '@/types/onebot';
+
+export interface OneBotDisplayResponseProps {
+  data: RequestResponse
+}
+
+const OneBotDisplayResponse: React.FC<OneBotDisplayResponseProps> = ({
+  data,
+}) => {
+  return (
+    <div className='flex gap-2 items-center'>
+      <Chip color={getResponseStatusColor(data.status)} variant='flat'>
+        {getResponseStatusText(data.status)}
+      </Chip>
+      {data.data && (
+        <Popover
+          placement='right'
+          showArrow
+          classNames={{
+            content: 'max-h-96 max-w-96 overflow-hidden p-0',
+          }}
+        >
+          <PopoverTrigger>
+            <Button
+              size='sm'
+              color='primary'
+              variant='flat'
+              radius='full'
+              className='text-medium'
+            >
+              查看数据
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent>
+            <Snippet
+              hideSymbol
+              codeString={JSON.stringify(data.data, null, 2)}
+              tooltipProps={{
+                content: '点击复制',
+              }}
+              classNames={{
+                copyButton: 'self-start sticky top-0 right-0',
+              }}
+              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'>
+                    {line}
+                  </span>
+                ))}
+            </Snippet>
+          </PopoverContent>
+        </Popover>
+      )}
+      {data.message && (
+        <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;

packages/napcat-webui-frontend/src/components/onebot/filter_message_type.tsx

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

packages/napcat-webui-frontend/src/components/onebot/message_list.tsx

@@ -0,0 +1,72 @@
+import { useEffect, useRef, useState } from 'react';
+import { VariableSizeList } from 'react-window';
+
+import OneBotItemRender, {
+  getItemSize,
+} from '@/components/onebot/display_card/render';
+
+import { isOB11Event } from '@/utils/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);
+
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver(() => {
+      if (containerRef.current) {
+        setContainerHeight(containerRef.current.offsetHeight);
+      }
+    });
+
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (listRef.current) {
+      listRef.current.resetAfterIndex(0, true);
+    }
+  }, [messages]);
+
+  return (
+    <div className='w-full h-full overflow-hidden' ref={containerRef}>
+      <VariableSizeList
+        ref={listRef}
+        itemCount={messages.length}
+        width='100%'
+        style={{
+          overflowX: 'hidden',
+        }}
+        itemSize={(idx) => {
+          const msg = messages[idx];
+          if (isOB11Event(msg)) {
+            const size = getItemSize(msg.post_type);
+            return size;
+          } else {
+            return 100;
+          }
+        }}
+        height={containerHeight}
+        itemData={messages}
+        itemKey={(index) => messages.length - index - 1}
+      >
+        {OneBotItemRender}
+      </VariableSizeList>
+    </div>
+  );
+};
+
+export default OneBotMessageList;

packages/napcat-webui-frontend/src/components/onebot/render_message.tsx

@@ -0,0 +1,166 @@
+import { Image } from '@heroui/image';
+import qface from 'qface';
+import { FaReply } from 'react-icons/fa6';
+
+import { OB11Segment } from '@/types/onebot';
+
+export const renderMessageContent = (
+  segments: OB11Segment[],
+  small = false
+): React.ReactElement[] => {
+  return segments.map((segment, index) => {
+    switch (segment.type) {
+      case 'text':
+        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',
+            }}
+            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',
+            }}
+            radius='sm'
+            className={
+              small
+                ? 'max-h-16 object-cover'
+                : 'max-w-64 max-h-96 h-auto object-cover'
+            }
+            key={index}
+            src={segment.data.url || segment.data.file}
+            alt='image'
+            referrerPolicy='no-referrer'
+          />
+        );
+      case 'record':
+        return (
+          <audio
+            key={index}
+            controls
+            src={segment.data.url || segment.data.file}
+          />
+        );
+      case 'video':
+        return (
+          <video
+            key={index}
+            controls
+            src={segment.data.url || segment.data.file}
+          />
+        );
+      case 'at':
+        return (
+          <span key={index} className='text-blue-500'>
+            @
+            {segment.data.qq === 'all'
+              ? (
+                '所有人'
+              )
+              : (
+                <span>
+                  {segment.data.name}({segment.data.qq})
+                </span>
+              )}
+          </span>
+        );
+      case 'rps':
+        return <span key={index}>[猜拳]</span>;
+      case 'dice':
+        return <span key={index}>[掷骰子]</span>;
+      case 'shake':
+        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>;
+      case 'share':
+        return (
+          <a
+            key={index}
+            href={segment.data.url}
+            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>;
+      case 'music':
+        if (segment.data.type === 'custom') {
+          return (
+            <a
+              key={index}
+              href={segment.data.url}
+              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'
+          >
+            <FaReply className='text-default-500' />
+            回复消息ID: {segment.data.id}
+          </div>
+        );
+      case 'forward':
+        return <span key={index}>[合并转发: {segment.data.id}]</span>;
+      case 'node':
+        return <span key={index}>[消息节点]</span>;
+      case 'xml':
+        return <pre key={index}>{segment.data.data}</pre>;
+      case 'json':
+        return (
+          <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'
+          >
+            [文件]
+          </a>
+        );
+      default:
+        return <span key={index}>[不支持的消息类型]</span>;
+    }
+  });
+};

packages/napcat-webui-frontend/src/components/onebot/send_modal.tsx

@@ -0,0 +1,95 @@
+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';
+
+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 handleSendMessage = useCallback(
+    (onClose: () => void) => {
+      const msg = editorRef.current?.getValue();
+      if (!msg) {
+        toast.error('消息不能为空');
+        return;
+      }
+      try {
+        sendMessage(msg);
+        toast.success('消息发送成功');
+        onClose();
+      } catch (_error) {
+        toast.error('消息发送失败');
+      }
+    },
+    [sendMessage]
+  );
+
+  return (
+    <>
+      <Button onPress={onOpen} color='primary' radius='full' variant='flat' size='sm' className='font-medium'>
+        构造请求
+      </Button>
+      <Modal
+        isOpen={isOpen}
+        onOpenChange={onOpenChange}
+        placement='top-center'
+        size='5xl'
+        scrollBehavior='outside'
+        isDismissable={false}
+      >
+        <ModalContent>
+          {(onClose) => (
+            <>
+              <ModalHeader className='flex flex-col gap-1'>
+                构造请求
+              </ModalHeader>
+              <ModalBody>
+                <div className='h-96'>
+                  <CodeEditor
+                    height='100%'
+                    defaultLanguage='json'
+                    defaultValue={`{
+  "action": "get_group_list"
+}`}
+                    ref={editorRef}
+                  />
+                </div>
+              </ModalBody>
+              <ModalFooter>
+                <ChatInputModal />
+
+                <Button color='primary' variant='flat' onPress={onClose}>
+                  取消
+                </Button>
+                <Button
+                  color='primary'
+                  onPress={() => handleSendMessage(onClose)}
+                >
+                  发送
+                </Button>
+              </ModalFooter>
+            </>
+          )}
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
+export default OneBotSendModal;

packages/napcat-webui-frontend/src/components/onebot/ws_status.tsx

@@ -0,0 +1,39 @@
+import clsx from 'clsx';
+import { ReadyState } from 'react-use-websocket';
+
+export interface WSStatusProps {
+  state: ReadyState
+}
+
+function StatusTag ({
+  title,
+  color,
+}: {
+  title: string
+  color: 'success' | 'primary' | 'warning'
+}) {
+  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 className={textClassName}>{title}</div>
+    </div>
+  );
+}
+
+export default function WSStatus ({ state }: WSStatusProps) {
+  if (state === ReadyState.OPEN) {
+    return <StatusTag title='已连接' color='success' />;
+  }
+  if (state === ReadyState.CLOSED) {
+    return <StatusTag title='已关闭' color='primary' />;
+  }
+  if (state === ReadyState.CONNECTING) {
+    return <StatusTag title='连接中' color='warning' />;
+  }
+  if (state === ReadyState.CLOSING) {
+    return <StatusTag title='关闭中' color='warning' />;
+  }
+  return null;
+}

packages/napcat-webui-frontend/src/components/page_background.tsx

@@ -0,0 +1,18 @@
+const PageBackground = () => {
+  return (
+    <div className='fixed inset-0 w-full h-full -z-10 overflow-hidden bg-gradient-to-br from-indigo-50 via-white to-pink-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900'>
+      {/* 静态光斑 - ACG风格 */}
+      <div
+        className='absolute top-[-10%] left-[-10%] w-[500px] h-[500px] rounded-full bg-primary-200/40 blur-[100px]'
+      />
+      <div
+        className='absolute top-[20%] right-[-10%] w-[400px] h-[400px] rounded-full bg-secondary-200/40 blur-[90px]'
+      />
+      <div
+        className='absolute bottom-[-10%] left-[20%] w-[600px] h-[600px] rounded-full bg-pink-200/30 blur-[110px]'
+      />
+    </div>
+  );
+};
+
+export default PageBackground;

packages/napcat-webui-frontend/src/components/page_loading.tsx

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

packages/napcat-webui-frontend/src/components/password_login.tsx

@@ -0,0 +1,189 @@
+import { Avatar } from '@heroui/avatar';
+import { Button } from '@heroui/button';
+import { Dropdown, DropdownItem, DropdownMenu, DropdownTrigger } from '@heroui/dropdown';
+import { Image } from '@heroui/image';
+import { Input } from '@heroui/input';
+import { useState } from 'react';
+import { toast } from 'react-hot-toast';
+import { IoChevronDown } from 'react-icons/io5';
+import { Spinner } from '@heroui/spinner';
+
+import type { QQItem } from '@/components/quick_login';
+import { isQQQuickNewItem } from '@/utils/qq';
+import TencentCaptchaModal from '@/components/tencent_captcha';
+import type { CaptchaCallbackData } from '@/components/tencent_captcha';
+import NewDeviceVerify from '@/components/new_device_verify';
+
+interface PasswordLoginProps {
+  onSubmit: (uin: string, password: string) => void;
+  onCaptchaSubmit?: (uin: string, password: string, captchaData: CaptchaCallbackData) => void;
+  onNewDeviceVerified?: (token: string) => void;
+  isLoading: boolean;
+  qqList: (QQItem | LoginListItem)[];
+  captchaState?: {
+    needCaptcha: boolean;
+    proofWaterUrl: string;
+    uin: string;
+    password: string;
+  } | null;
+  captchaVerifying?: boolean;
+  newDeviceState?: {
+    needNewDevice: boolean;
+    jumpUrl: string;
+    uin: string;
+  } | null;
+  onCaptchaCancel?: () => void;
+  onNewDeviceCancel?: () => void;
+}
+
+const PasswordLogin: React.FC<PasswordLoginProps> = ({ onSubmit, onCaptchaSubmit, onNewDeviceVerified, isLoading, qqList, captchaState, captchaVerifying, newDeviceState, onCaptchaCancel, onNewDeviceCancel }) => {
+  const [uin, setUin] = useState('');
+  const [password, setPassword] = useState('');
+
+  const handleSubmit = () => {
+    if (!uin) {
+      toast.error('请输入QQ号');
+      return;
+    }
+    if (!password) {
+      toast.error('请输入密码');
+      return;
+    }
+    onSubmit(uin, password);
+  };
+
+  return (
+    <div className='flex flex-col gap-8'>
+      {captchaState?.needCaptcha && captchaState.proofWaterUrl
+        ? (
+          <div className='flex flex-col gap-4 items-center'>
+            {captchaVerifying
+              ? (
+                <>
+                  <p className='text-primary text-sm'>验证码已提交，正在等待服务器验证结果...</p>
+                  <div className='flex items-center justify-center py-8 gap-3'>
+                    <Spinner size='lg' />
+                  </div>
+                </>
+              )
+              : (
+                <>
+                  <p className='text-warning text-sm'>登录需要安全验证，请完成验证码</p>
+                  <TencentCaptchaModal
+                    proofWaterUrl={captchaState.proofWaterUrl}
+                    onSuccess={(data) => {
+                      onCaptchaSubmit?.(captchaState.uin, captchaState.password, data);
+                    }}
+                    onCancel={onCaptchaCancel}
+                  />
+                </>
+              )}
+            <Button
+              variant='light'
+              color='danger'
+              size='sm'
+              onPress={onCaptchaCancel}
+            >
+              取消验证
+            </Button>
+          </div>
+        )
+        : newDeviceState?.needNewDevice && newDeviceState.jumpUrl
+          ? (
+            <NewDeviceVerify
+              jumpUrl={newDeviceState.jumpUrl}
+              uin={newDeviceState.uin}
+              onVerified={(token) => onNewDeviceVerified?.(token)}
+              onCancel={onNewDeviceCancel}
+            />
+          )
+          : (
+            <>
+              <div className='flex justify-center'>
+                <Image
+                  className='shadow-lg'
+                  height={100}
+                  radius='full'
+                  src={`https://q1.qlogo.cn/g?b=qq&nk=${uin || '0'}&s=100`}
+                  width={100}
+                  alt='QQ Avatar'
+                />
+              </div>
+              <div className='flex flex-col gap-4'>
+                <Input
+                  type='text'
+                  label='QQ账号'
+                  placeholder='请输入QQ号'
+                  value={uin}
+                  onValueChange={setUin}
+                  variant='bordered'
+                  size='lg'
+                  autoComplete='off'
+                  endContent={
+                    <Dropdown>
+                      <DropdownTrigger>
+                        <Button isIconOnly variant='light' size='sm' radius='full'>
+                          <IoChevronDown size={16} />
+                        </Button>
+                      </DropdownTrigger>
+                      <DropdownMenu
+                        aria-label='QQ Login History'
+                        items={qqList}
+                        onAction={(key) => setUin(key.toString())}
+                      >
+                        {(item) => (
+                          <DropdownItem key={item.uin} textValue={item.uin}>
+                            <div className='flex items-center gap-2'>
+                              <Avatar
+                                alt={item.uin}
+                                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'>
+                                {isQQQuickNewItem(item)
+                                  ? `${item.nickName}(${item.uin})`
+                                  : item.uin}
+                              </div>
+                            </div>
+                          </DropdownItem>
+                        )}
+                      </DropdownMenu>
+                    </Dropdown>
+              }
+                />
+                <Input
+                  type='password'
+                  label='密码'
+                  placeholder='请输入密码'
+                  value={password}
+                  onValueChange={setPassword}
+                  variant='bordered'
+                  size='lg'
+                  autoComplete='new-password'
+                />
+              </div>
+              <div className='flex justify-center mt-5'>
+                <Button
+                  className='w-64 max-w-full'
+                  color='primary'
+                  isLoading={isLoading}
+                  radius='full'
+                  size='lg'
+                  variant='shadow'
+                  onPress={handleSubmit}
+                >
+                  登录
+                </Button>
+              </div>
+            </>
+          )}
+    </div>
+  );
+};
+
+export default PasswordLogin;

packages/napcat-webui-frontend/src/components/primitives.ts

@@ -0,0 +1,58 @@
+import { tv } from 'tailwind-variants';
+
+export const title = tv({
+  base: 'tracking-tight inline font-semibold',
+  variants: {
+    color: {
+      violet: 'from-[#FF1CF7] to-[#b249f8]',
+      yellow: 'from-[#FF705B] to-[#FFB457]',
+      blue: 'from-[#5EA2EF] to-[#0072F5]',
+      cyan: 'from-[#00b7fa] to-[#01cfea]',
+      green: 'from-[#6FEE8D] to-[#17c964]',
+      pink: 'from-[#FF72E1] to-[#F54C7A]',
+      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',
+    },
+    fullWidth: {
+      true: 'w-full block',
+    },
+    shadow: {
+      true: 'drop-shadow-md',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+  compoundVariants: [
+    {
+      color: [
+        'violet',
+        'yellow',
+        'blue',
+        'cyan',
+        'green',
+        'pink',
+        'foreground',
+      ],
+      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',
+    },
+  },
+  defaultVariants: {
+    fullWidth: true,
+  },
+});

packages/napcat-webui-frontend/src/components/qq_info_card.tsx

@@ -0,0 +1,84 @@
+import { Card, CardBody } from '@heroui/card';
+import { Image } from '@heroui/image';
+import { useLocalStorage } from '@uidotdev/usehooks';
+import clsx from 'clsx';
+import { BsTencentQq } from 'react-icons/bs';
+
+import key from '@/const/key';
+import { SelfInfo } from '@/types/user';
+
+import PageLoading from './page_loading';
+
+export interface QQInfoCardProps {
+  data?: SelfInfo;
+  error?: Error;
+  loading?: boolean;
+}
+
+const QQInfoCard: React.FC<QQInfoCardProps> = ({ data, error, loading }) => {
+  const [backgroundImage] = useLocalStorage<string>(key.backgroundImage, '');
+  const hasBackground = !!backgroundImage;
+  return (
+    <Card
+      className={clsx(
+        'relative backdrop-blur-sm border border-white/40 dark:border-white/10 overflow-hidden flex-shrink-0 shadow-sm',
+        hasBackground ? 'bg-white/10 dark:bg-black/10' : 'bg-white/60 dark:bg-black/40'
+      )}
+      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-4 overflow-hidden relative p-4'>
+            {!hasBackground && (
+              <div className='absolute right-[-10px] bottom-[-10px] text-7xl text-default-400/10 rotate-12 pointer-events-none dark:hidden'>
+                <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=0`
+                }
+                className='shadow-sm rounded-full w-14 aspect-square ring-2 ring-white/50 dark:ring-white/10'
+              />
+              <div
+                className={clsx(
+                  'w-3.5 h-3.5 rounded-full absolute right-0.5 bottom-0.5 border-2 border-white dark:border-zinc-900 z-10',
+                  data?.online ? 'bg-success-500' : 'bg-default-400'
+                )}
+              />
+            </div>
+            <div className='flex-col justify-center z-10'>
+              <div className={clsx(
+                'text-xl font-bold truncate mb-0.5',
+                hasBackground ? 'text-white drop-shadow-sm' : 'text-default-800 dark:text-gray-100'
+              )}
+              >
+                {data?.nick || '未知用户'}
+              </div>
+              <div className={clsx(
+                'font-mono text-xs tracking-wider',
+                hasBackground ? 'text-white/80' : 'text-default-500 opacity-80'
+              )}
+              >
+                {data?.uin || 'Unknown'}
+              </div>
+            </div>
+          </CardBody>
+        )}
+    </Card>
+  );
+};
+
+export default QQInfoCard;

packages/napcat-webui-frontend/src/components/qr_code_login.tsx

@@ -0,0 +1,102 @@
+import { Button } from '@heroui/button';
+import { Spinner } from '@heroui/spinner';
+import { QRCodeSVG } from 'qrcode.react';
+import { IoAlertCircle, IoRefresh } from 'react-icons/io5';
+
+interface QrCodeLoginProps {
+  qrcode: string;
+  loginError?: string;
+  onRefresh?: () => void;
+  isRefreshing?: boolean;
+  loginPhase?: string;
+  isRecoveringLoginService?: boolean;
+}
+
+const QrCodeLogin: React.FC<QrCodeLoginProps> = ({ qrcode, loginError, onRefresh, isRefreshing = false, loginPhase, isRecoveringLoginService = false }) => {
+  const transitionMessage = loginPhase === 'qrcode_scanned'
+    ? '二维码已扫描，等待手机确认…'
+    : loginPhase === 'initializing'
+      ? 'QQ 登录成功，正在启动 NapCat…'
+      : loginPhase === 'reconnecting' || isRecoveringLoginService
+        ? '正在重新连接 QQ 登录服务…'
+        : undefined;
+  return (
+    <div className='flex flex-col items-center'>
+      {(isRefreshing || transitionMessage) && (
+        <div className='fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm'>
+          <div className='flex flex-col items-center gap-4 rounded-xl bg-content1 px-10 py-8 shadow-xl'>
+            <Spinner color='primary' size='lg' />
+            <div className='text-lg font-medium'>{transitionMessage || '正在刷新二维码…'}</div>
+            <div className='text-sm text-default-500'>
+              {transitionMessage ? '请不要关闭此页面，最长可能需要 3 分钟' : '正在等待新的二维码，最长 10 秒'}
+            </div>
+          </div>
+        </div>
+      )}
+      {loginError && !qrcode && !isRecoveringLoginService
+        ? (
+          <div className='flex flex-col items-center py-4'>
+            <div className='w-full flex justify-center mb-6'>
+              <div className='p-4 bg-danger-50 rounded-full'>
+                <IoAlertCircle className='text-danger' size={64} />
+              </div>
+            </div>
+            <div className='text-center space-y-2 px-4'>
+              <div className='text-xl font-bold text-danger'>登录失败</div>
+              <div className='text-default-600 text-sm leading-relaxed max-w-[300px]'>
+                {loginError}
+              </div>
+            </div>
+            {onRefresh && (
+              <Button
+                className='mt-8 min-w-[160px]'
+                variant='solid'
+                color='primary'
+                size='lg'
+                startContent={<IoRefresh />}
+                onPress={onRefresh}
+                isLoading={isRefreshing}
+                isDisabled={isRefreshing}
+              >
+                重新获取二维码
+              </Button>
+            )}
+          </div>
+        )
+        : (
+          <>
+            {loginError && (
+              <div className='mb-4 w-full max-w-[360px] rounded-lg bg-warning-50 px-4 py-3 text-center text-sm text-warning-700 dark:bg-warning-50/20 dark:text-warning-300'>
+                {loginError}
+              </div>
+            )}
+            <div className='bg-white p-2 rounded-md w-fit mx-auto relative overflow-hidden'>
+              {!qrcode && (
+                <div className='absolute left-0 top-0 right-0 bottom-0 bg-white dark:bg-zinc-900 bg-opacity-90 backdrop-blur-sm flex items-center justify-center z-10'>
+                  <Spinner color='primary' />
+                </div>
+              )}
+              <QRCodeSVG key={qrcode} size={180} value={qrcode || ' '} />
+            </div>
+            <div className='mt-5 text-center text-default-500 text-sm'>请使用QQ或者TIM扫描上方二维码</div>
+            {onRefresh && qrcode && (
+              <Button
+                className='mt-4'
+                variant='flat'
+                color='primary'
+                size='sm'
+                startContent={<IoRefresh />}
+                onPress={onRefresh}
+                isLoading={isRefreshing}
+                isDisabled={isRefreshing}
+              >
+                刷新二维码
+              </Button>
+            )}
+          </>
+        )}
+    </div>
+  );
+};
+
+export default QrCodeLogin;

packages/napcat-webui-frontend/src/components/quick_login.tsx

@@ -0,0 +1,129 @@
+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';
+
+export interface QQItem {
+  uin: string;
+}
+
+interface QuickLoginProps {
+  qqList: (QQItem | LoginListItem)[];
+  refresh: boolean;
+  isLoading: boolean;
+  selectedQQ: string;
+  onUpdateQQList: () => void;
+  handleSelectionChange: React.ChangeEventHandler<HTMLSelectElement>;
+  onSubmit: () => void;
+}
+
+const QuickLogin: React.FC<QuickLoginProps> = ({
+  qqList,
+  refresh,
+  isLoading,
+  selectedQQ,
+  onUpdateQQList,
+  handleSelectionChange,
+  onSubmit,
+}) => {
+  return (
+    <div className='flex flex-col gap-8'>
+      <div className='flex justify-center'>
+        <Image
+          className='shadow-lg'
+          height={100}
+          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'>
+        <Select
+          classNames={{
+            popoverContent: 'bg-opacity-50 backdrop-blur',
+          }}
+          aria-label='QQ Login'
+          isDisabled={refresh}
+          items={qqList}
+          placeholder='请选择QQ'
+          renderValue={(items) => {
+            return items.map((item) => (
+              <div key={item.key} className='flex items-center gap-2'>
+                <Avatar
+                  alt={item.key?.toString()}
+                  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'>
+                  {isQQQuickNewItem(item.data)
+                    ? `${item.data.nickName}(${item.key?.toString()})`
+                    : item.key?.toString()}
+                </div>
+              </div>
+            ));
+          }}
+          selectedKeys={[selectedQQ]}
+          size='lg'
+          onChange={handleSelectionChange}
+        >
+          {(item) => (
+            <SelectItem key={item.uin} textValue={item.uin}>
+              <div className='flex items-center gap-2'>
+                <Avatar
+                  alt={item.uin}
+                  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'>
+                  {isQQQuickNewItem(item)
+                    ? `${item.nickName}(${item.uin})`
+                    : item.uin}
+                </div>
+              </div>
+            </SelectItem>
+          )}
+        </Select>
+        <Button
+          isIconOnly
+          className='flex-grow-0 flex-shrink-0'
+          color='secondary'
+          isLoading={refresh}
+          radius='full'
+          size='lg'
+          variant='light'
+          onPress={onUpdateQQList}
+        >
+          <IoMdRefresh size={24} />
+        </Button>
+      </div>
+      <div className='flex justify-center mt-5'>
+        <Button
+          className='w-64 max-w-full'
+          color='primary'
+          isLoading={isLoading}
+          radius='full'
+          size='lg'
+          variant='shadow'
+          onPress={onSubmit}
+        >
+          登录
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default QuickLogin;

packages/napcat-webui-frontend/src/components/rotating_text.tsx

@@ -0,0 +1,265 @@
+import {
+  AnimatePresence,
+  HTMLMotionProps,
+  TargetAndTransition,
+  Transition,
+  motion,
+} from 'motion/react';
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from 'react';
+
+function cn (...classes: (string | undefined | null | boolean)[]): string {
+  return classes.filter(Boolean).join(' ');
+}
+
+export interface RotatingTextRef {
+  next: () => void
+  previous: () => void
+  jumpTo: (index: number) => void
+  reset: () => void
+}
+
+export interface RotatingTextProps
+  extends Omit<
+    HTMLMotionProps<'span'>,
+    'children' | 'transition' | 'initial' | 'animate' | 'exit'
+  > {
+  texts: string[]
+  transition?: Transition
+  initial?: TargetAndTransition
+  animate?: TargetAndTransition
+  exit?: TargetAndTransition
+  animatePresenceMode?: 'sync' | 'wait'
+  animatePresenceInitial?: boolean
+  rotationInterval?: number
+  staggerDuration?: number
+  staggerFrom?: 'first' | 'last' | 'center' | 'random' | number
+  loop?: boolean
+  auto?: boolean
+  splitBy?: string
+  onNext?: (index: number) => void
+  mainClassName?: string
+  splitLevelClassName?: string
+  elementLevelClassName?: string
+}
+
+const RotatingText = forwardRef<RotatingTextRef, RotatingTextProps>(
+  (
+    {
+      texts,
+      transition = { type: 'spring', damping: 25, stiffness: 300 },
+      initial = { y: '100%', opacity: 0 },
+      animate = { y: 0, opacity: 1 },
+      exit = { y: '-120%', opacity: 0 },
+      animatePresenceMode = 'wait',
+      animatePresenceInitial = false,
+      rotationInterval = 2000,
+      staggerDuration = 0,
+      staggerFrom = 'first',
+      loop = true,
+      auto = true,
+      splitBy = 'characters',
+      onNext,
+      mainClassName,
+      splitLevelClassName,
+      elementLevelClassName,
+      ...rest
+    },
+    ref
+  ) => {
+    const [currentTextIndex, setCurrentTextIndex] = useState<number>(0);
+
+    const splitIntoCharacters = (text: string): string[] => {
+      return Array.from(text);
+    };
+
+    const elements = useMemo(() => {
+      const currentText: string = texts[currentTextIndex];
+      if (splitBy === 'characters') {
+        const words = currentText.split(' ');
+        return words.map((word, i) => ({
+          characters: splitIntoCharacters(word),
+          needsSpace: i !== words.length - 1,
+        }));
+      }
+      if (splitBy === 'words') {
+        return currentText.split(' ').map((word, i, arr) => ({
+          characters: [word],
+          needsSpace: i !== arr.length - 1,
+        }));
+      }
+      if (splitBy === 'lines') {
+        return currentText.split('\n').map((line, i, arr) => ({
+          characters: [line],
+          needsSpace: i !== arr.length - 1,
+        }));
+      }
+
+      return currentText.split(splitBy).map((part, i, arr) => ({
+        characters: [part],
+        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;
+        if (staggerFrom === 'center') {
+          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;
+        }
+        return Math.abs((staggerFrom as number) - index) * staggerDuration;
+      },
+      [staggerFrom, staggerDuration]
+    );
+
+    const handleIndexChange = useCallback(
+      (newIndex: number) => {
+        setCurrentTextIndex(newIndex);
+        if (onNext) onNext(newIndex);
+      },
+      [onNext]
+    );
+
+    const next = useCallback(() => {
+      const nextIndex =
+        currentTextIndex === texts.length - 1
+          ? loop
+            ? 0
+            : currentTextIndex
+          : currentTextIndex + 1;
+      if (nextIndex !== currentTextIndex) {
+        handleIndexChange(nextIndex);
+      }
+    }, [currentTextIndex, texts.length, loop, handleIndexChange]);
+
+    const previous = useCallback(() => {
+      const prevIndex =
+        currentTextIndex === 0
+          ? loop
+            ? texts.length - 1
+            : currentTextIndex
+          : currentTextIndex - 1;
+      if (prevIndex !== currentTextIndex) {
+        handleIndexChange(prevIndex);
+      }
+    }, [currentTextIndex, texts.length, loop, handleIndexChange]);
+
+    const jumpTo = useCallback(
+      (index: number) => {
+        const validIndex = Math.max(0, Math.min(index, texts.length - 1));
+        if (validIndex !== currentTextIndex) {
+          handleIndexChange(validIndex);
+        }
+      },
+      [texts.length, currentTextIndex, handleIndexChange]
+    );
+
+    const reset = useCallback(() => {
+      if (currentTextIndex !== 0) {
+        handleIndexChange(0);
+      }
+    }, [currentTextIndex, handleIndexChange]);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        next,
+        previous,
+        jumpTo,
+        reset,
+      }),
+      [next, previous, jumpTo, reset]
+    );
+
+    useEffect(() => {
+      if (!auto) return;
+      const intervalId = setInterval(next, rotationInterval);
+      return () => clearInterval(intervalId);
+    }, [next, rotationInterval, auto]);
+
+    return (
+      <motion.span
+        className={cn(
+          'flex flex-wrap whitespace-pre-wrap relative',
+          mainClassName
+        )}
+        {...rest}
+        layout
+        transition={transition}
+      >
+        <span className='sr-only'>{texts[currentTextIndex]}</span>
+        <AnimatePresence
+          mode={animatePresenceMode}
+          initial={animatePresenceInitial}
+        >
+          <motion.div
+            key={currentTextIndex}
+            className={cn(
+              splitBy === 'lines'
+                ? 'flex flex-col w-full'
+                : 'flex flex-wrap whitespace-pre-wrap relative'
+            )}
+            layout
+            aria-hidden='true'
+            initial={initial as HTMLMotionProps<'div'>['initial']}
+            animate={animate as HTMLMotionProps<'div'>['animate']}
+            exit={exit as HTMLMotionProps<'div'>['exit']}
+          >
+            {elements.map((wordObj, wordIndex, array) => {
+              const previousCharsCount = array
+                .slice(0, wordIndex)
+                .reduce((sum, word) => sum + word.characters.length, 0);
+              return (
+                <span
+                  key={wordIndex}
+                  className={cn('inline-flex', splitLevelClassName)}
+                >
+                  {wordObj.characters.map((char, charIndex) => (
+                    <motion.span
+                      key={charIndex}
+                      initial={initial as HTMLMotionProps<'span'>['initial']}
+                      animate={animate as HTMLMotionProps<'span'>['animate']}
+                      exit={exit as HTMLMotionProps<'span'>['exit']}
+                      transition={{
+                        ...transition,
+                        delay: getStaggerDelay(
+                          previousCharsCount + charIndex,
+                          array.reduce(
+                            (sum, word) => sum + word.characters.length,
+                            0
+                          )
+                        ),
+                      }}
+                      className={cn('inline-block', elementLevelClassName)}
+                    >
+                      {char}
+                    </motion.span>
+                  ))}
+                  {wordObj.needsSpace && (
+                    <span className='whitespace-pre'> </span>
+                  )}
+                </span>
+              );
+            })}
+          </motion.div>
+        </AnimatePresence>
+      </motion.span>
+    );
+  }
+);
+
+RotatingText.displayName = 'RotatingText';
+export default RotatingText;

packages/napcat-webui-frontend/src/components/sidebar/index.tsx

@@ -0,0 +1,112 @@
+import { Button } from '@heroui/button';
+import { useLocalStorage } from '@uidotdev/usehooks';
+import clsx from 'clsx';
+import { AnimatePresence, motion } from 'motion/react';
+import React from 'react';
+import { IoMdLogOut } from 'react-icons/io';
+import { MdDarkMode, MdLightMode } from 'react-icons/md';
+
+import key from '@/const/key';
+import useAuth from '@/hooks/auth';
+import useDialog from '@/hooks/use-dialog';
+import { useTheme } from '@/hooks/use-theme';
+import type { MenuItem } from '@/config/site';
+
+import Menus from './menus';
+
+interface SideBarProps {
+  open: boolean;
+  items: MenuItem[];
+  onClose?: () => void;
+}
+
+const SideBar: React.FC<SideBarProps> = (props) => {
+  const { open, items, onClose } = props;
+  const { toggleTheme, isDark } = useTheme();
+  const { revokeAuth } = useAuth();
+  const dialog = useDialog();
+  const [backgroundImage] = useLocalStorage<string>(key.backgroundImage, '');
+  const hasBackground = !!backgroundImage;
+
+  const onRevokeAuth = () => {
+    dialog.confirm({
+      title: '退出登录',
+      content: '确定要退出登录吗？',
+      onConfirm: revokeAuth,
+    });
+  };
+  return (
+    <>
+      <AnimatePresence initial={false}>
+        {open && (
+          <motion.div
+            className='fixed inset-y-0 left-64 right-0 bg-black/20 backdrop-blur-[1px] z-40 md:hidden'
+            aria-hidden='true'
+            onClick={onClose}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0, transition: { duration: 0.15 } }}
+            transition={{ duration: 0.2, delay: 0.15 }}
+          />
+        )}
+      </AnimatePresence>
+      <motion.div
+        className={clsx(
+          'overflow-hidden fixed top-0 left-0 h-full z-50 md:static md:shadow-none rounded-r-2xl md:rounded-none',
+          hasBackground
+            ? 'bg-transparent backdrop-blur-md'
+            : 'bg-content1/70 backdrop-blur-xl backdrop-saturate-150 shadow-xl',
+          'md:bg-transparent md:backdrop-blur-none md:backdrop-saturate-100 md:shadow-none'
+        )}
+        initial={{ width: 0 }}
+        animate={{ width: open ? '16rem' : 0 }}
+        transition={{
+          type: open ? 'spring' : 'tween',
+          stiffness: 150,
+          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 p-4'>
+          <div className='flex items-center justify-start gap-3 px-2 my-8 ml-2'>
+            <div className='h-5 w-1 bg-primary rounded-full shadow-sm' />
+            <div className={clsx(
+              'text-xl font-bold tracking-wide select-none',
+              hasBackground ? 'text-white' : 'text-default-900 dark:text-white'
+            )}
+            >
+              NapCat
+            </div>
+          </div>
+          <div className='overflow-y-auto flex flex-col flex-1 px-2'>
+            <Menus items={items} />
+            <div className='mt-auto mb-10 md:mb-0 space-y-3 px-2'>
+              <Button
+                className='w-full bg-primary-50/50 hover:bg-primary-100/80 text-primary-600 font-medium shadow-sm hover:shadow-md transition-all duration-300 backdrop-blur-sm'
+                radius='full'
+                variant='flat'
+                onPress={toggleTheme}
+                startContent={
+                  !isDark ? <MdLightMode size={18} /> : <MdDarkMode size={18} />
+                }
+              >
+                切换主题
+              </Button>
+              <Button
+                className='w-full mb-2 bg-danger-50/50 hover:bg-danger-100/80 text-danger-500 font-medium shadow-sm hover:shadow-md transition-all duration-300 backdrop-blur-sm'
+                radius='full'
+                variant='flat'
+                onPress={onRevokeAuth}
+                startContent={<IoMdLogOut size={18} />}
+              >
+                退出登录
+              </Button>
+            </div>
+          </div>
+        </motion.div>
+      </motion.div>
+    </>
+  );
+};
+
+export default SideBar;

packages/napcat-webui-frontend/src/components/sidebar/menus.tsx

@@ -0,0 +1,163 @@
+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 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 canOpen = React.useMemo(
+      () => item.items && item.items.length > 0,
+      [item.items]
+    );
+    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 false;
+    }, [item.href, locate.pathname]);
+
+    const goTo = (href: string) => {
+      navigate(href);
+    };
+
+    React.useEffect(() => {
+      if (item.items) {
+        const shouldOpen = item.items.some(
+          (item) => item?.href && !!matchPath(item.href, locate.pathname)
+        );
+
+        if (shouldOpen) setOpen(true);
+      }
+    }, [item.items, locate.pathname]);
+    const panelRef = React.useRef<HTMLDivElement>(null);
+
+    return (
+      <div key={item.href + item.label}>
+        <Button
+          className={clsx(
+            'flex items-center w-full text-left justify-start dark:text-white transition-all duration-300',
+            isActive
+              ? 'bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-400 shadow-none font-semibold translate-x-1'
+              : 'hover:bg-default-100 hover:translate-x-1',
+            b64img && 'backdrop-blur-md text-white dark:text-white'
+          )}
+          color={isActive ? 'primary' : 'default'}
+          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',
+                    isActive
+                      ? 'bg-primary-500 animate-nav-spin'
+                      : 'bg-primary-200 dark:bg-white shadow-lg'
+                  )}
+                  aria-hidden='true'
+                />
+              )
+          }
+          startContent={
+            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);
+              }
+            } else if (canOpen) {
+              setOpen(!open);
+            }
+          }}
+        >
+          {item.label}
+        </Button>
+        <div
+          ref={panelRef}
+          className='ml-4 overflow-hidden transition-all duration-300'
+          style={{
+            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;
+
+  return (
+    <div className='flex flex-col justify-content-center flex-1 gap-2'>
+      {renderItems(items)}
+    </div>
+  );
+};
+
+export default Menus;

packages/napcat-webui-frontend/src/components/switch_card.tsx

@@ -0,0 +1,48 @@
+import { Switch } from '@heroui/switch';
+import clsx from 'clsx';
+import React, { forwardRef } from 'react';
+
+export interface SwitchCardProps {
+  label?: string;
+  description?: string;
+  value?: boolean;
+  onValueChange?: (value: boolean) => void;
+  name?: string;
+  onBlur?: React.FocusEventHandler;
+  disabled?: boolean;
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+}
+
+const SwitchCard = forwardRef<HTMLInputElement, SwitchCardProps>(
+  (props, ref) => {
+    const { label, description, value, onValueChange, disabled } = props;
+    const selectString = value ? 'true' : 'false';
+
+    return (
+      <Switch
+        classNames={{
+          base: clsx(
+            'inline-flex flex-row-reverse w-full max-w-full bg-default-100/50 dark:bg-white/5 hover:bg-default-200/50 dark:hover:bg-white/10 items-center',
+            'justify-between cursor-pointer rounded-xl gap-2 p-4 border border-transparent transition-all duration-200',
+            'data-[selected=true]:border-primary/50 data-[selected=true]:bg-primary/5 backdrop-blur-md'
+          ),
+        }}
+        {...props}
+        ref={ref}
+        isDisabled={disabled}
+        isSelected={value}
+        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>
+      </Switch>
+    );
+  }
+);
+
+SwitchCard.displayName = 'SwitchCard';
+
+export default SwitchCard;

packages/napcat-webui-frontend/src/components/system_info.tsx

@@ -0,0 +1,941 @@
+import { Card, CardBody, CardHeader } from '@heroui/card';
+
+import { Chip } from '@heroui/chip';
+import { Spinner } from '@heroui/spinner';
+import { Tooltip } from '@heroui/tooltip';
+import { Select, SelectItem } from '@heroui/select';
+import { Switch } from '@heroui/switch';
+import { Pagination } from '@heroui/pagination';
+import { Tabs, Tab } from '@heroui/tabs';
+import { Input } from '@heroui/input';
+import { Button } from '@heroui/button';
+import { useLocalStorage, useDebounce } from '@uidotdev/usehooks';
+import { useRequest } from 'ahooks';
+import clsx from 'clsx';
+import { FaCircleInfo, FaQq } from 'react-icons/fa6';
+import { IoLogoChrome, IoLogoOctocat, IoSearch } from 'react-icons/io5';
+import { IoMdFlash, IoMdCheckmark, IoMdSettings } from 'react-icons/io';
+import { RiMacFill } from 'react-icons/ri';
+import { useState, useCallback } from 'react';
+
+import key from '@/const/key';
+import WebUIManager from '@/controllers/webui_manager';
+import MirrorManager from '@/controllers/mirror_manager';
+import useDialog from '@/hooks/use-dialog';
+import Modal from '@/components/modal';
+import MirrorSelectorModal from '@/components/mirror_selector_modal';
+import { hasNewVersion, compareVersion } from '@/utils/version';
+
+export interface SystemInfoItemProps {
+  title: string;
+  icon?: React.ReactNode;
+  value?: React.ReactNode;
+  endContent?: React.ReactNode;
+  hasBackground?: boolean;
+  onClick?: () => void;
+  clickable?: boolean;
+}
+
+const SystemInfoItem: React.FC<SystemInfoItemProps> = ({
+  title,
+  value = '--',
+  icon,
+  endContent,
+  hasBackground = false,
+  onClick,
+  clickable = false,
+}) => {
+  return (
+    <div
+      className={clsx(
+        'flex text-sm gap-3 py-2 items-baseline transition-colors',
+        hasBackground
+          ? 'text-white/90'
+          : 'text-default-600 dark:text-gray-300',
+        clickable && 'cursor-pointer hover:bg-default-100/50 dark:hover:bg-default-800/30 rounded-lg -mx-2 px-2'
+      )}
+      onClick={onClick}
+    >
+      <div className='text-lg opacity-70 self-center'>{icon}</div>
+      <div className='w-24 font-medium'>{title}</div>
+      <div className={clsx(
+        'text-xs font-mono flex-1',
+        hasBackground ? 'text-white/80' : 'text-default-500'
+      )}
+      >{value}
+      </div>
+      <div className='self-center'>{endContent}</div>
+    </div>
+  );
+};
+
+export interface NewVersionTipProps {
+  currentVersion?: string;
+}
+
+// 更新状态类型
+type UpdateStatus = 'idle' | 'updating' | 'success' | 'error';
+
+// 更新对话框内容组件
+const UpdateDialogContent: React.FC<{
+  currentVersion: string;
+  latestVersion: string;
+  status: UpdateStatus;
+  errorMessage?: string;
+}> = ({ currentVersion, latestVersion, status, errorMessage }) => {
+  return (
+    <div className='space-y-6'>
+      {/* 版本对比 */}
+      <div className='flex flex-col sm:flex-row items-center justify-between gap-4 px-6 py-8 bg-default-50 dark:bg-default-100/5 rounded-xl border border-default-100 dark:border-default-100/10'>
+        <div className='flex flex-col items-center gap-2 min-w-0 w-full sm:w-auto'>
+          <span className='text-xs text-default-500 font-medium uppercase tracking-wider'>当前版本</span>
+          <Tooltip content={`v${currentVersion}`}>
+            <Chip size='md' variant='flat' color='default' classNames={{ content: 'font-mono font-bold text-sm truncate max-w-[120px] sm:max-w-[160px]' }}>
+              v{currentVersion}
+            </Chip>
+          </Tooltip>
+        </div>
+
+        <div className='flex flex-col items-center text-primary-500 px-4 shrink-0'>
+          <div className='p-2 rounded-full bg-primary-50 dark:bg-primary-900/20'>
+            <svg className='w-6 h-6 animate-pulse rotate-90 sm:rotate-0' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
+              <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M17 8l4 4m0 0l-4 4m4-4H3' />
+            </svg>
+          </div>
+        </div>
+
+        <div className='flex flex-col items-center gap-2 min-w-0 w-full sm:w-auto'>
+          <span className='text-xs text-primary-500 font-medium uppercase tracking-wider'>最新版本</span>
+          <Tooltip content={`v${latestVersion}`}>
+            <Chip size='md' color='primary' variant='shadow' classNames={{ content: 'font-mono font-bold text-sm truncate max-w-[120px] sm:max-w-[160px]' }}>
+              v{latestVersion}
+            </Chip>
+          </Tooltip>
+        </div>
+      </div>
+
+      {/* 更新状态显示 */}
+      {status === 'updating' && (
+        <div className='flex flex-col items-center justify-center gap-3 py-4 px-4 rounded-lg bg-primary-50/50 dark:bg-primary-900/20 border border-primary-200/50 dark:border-primary-700/30'>
+          <Spinner size='md' color='primary' />
+          <div className='text-center'>
+            <p className='text-sm font-medium text-primary-600 dark:text-primary-400'>
+              正在更新中...
+            </p>
+            <p className='text-xs text-default-500 mt-1'>
+              请耐心等待，更新可能需要几分钟
+            </p>
+          </div>
+        </div>
+      )}
+
+      {status === 'success' && (
+        <div className='flex flex-col items-center justify-center gap-3 py-4 px-4 rounded-lg bg-success-50/50 dark:bg-success-900/20 border border-success-200/50 dark:border-success-700/30'>
+          <div className='w-12 h-12 rounded-full bg-success-100 dark:bg-success-900/40 flex items-center justify-center'>
+            <svg className='w-6 h-6 text-success-600 dark:text-success-400' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
+              <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M5 13l4 4L19 7' />
+            </svg>
+          </div>
+          <div className='text-center'>
+            <p className='text-sm font-medium text-success-600 dark:text-success-400'>
+              更新完成
+            </p>
+            <p className='text-xs text-default-500 mt-1'>
+              请重启 NapCat 以应用新版本
+            </p>
+          </div>
+          <div className='mt-2 p-3 rounded-lg bg-warning-50/50 dark:bg-warning-900/20 border border-warning-200/50 dark:border-warning-700/30'>
+            <p className='text-xs text-warning-700 dark:text-warning-400 flex items-center gap-1 justify-center'>
+              <svg className='w-4 h-4' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
+                <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z' />
+              </svg>
+              <span>重启 NapCat 生效</span>
+            </p>
+          </div>
+          <div className='flex gap-3 justify-center mt-2 w-full'>
+            <button
+              className='px-4 py-2 text-sm rounded-lg bg-primary-500 hover:bg-primary-600 text-white shadow-sm transition-colors shadow-primary-500/20 w-full'
+              onClick={() => WebUIManager.restart()}
+            >
+              立即重启
+            </button>
+          </div>
+        </div>
+      )}
+
+      {status === 'error' && (
+        <div className='flex flex-col items-center justify-center gap-3 py-4 px-4 rounded-lg bg-danger-50/50 dark:bg-danger-900/20 border border-danger-200/50 dark:border-danger-700/30'>
+          <div className='w-12 h-12 rounded-full bg-danger-100 dark:bg-danger-900/40 flex items-center justify-center'>
+            <svg className='w-6 h-6 text-danger-600 dark:text-danger-400' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
+              <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M6 18L18 6M6 6l12 12' />
+            </svg>
+          </div>
+          <div className='text-center'>
+            <p className='text-sm font-medium text-danger-600 dark:text-danger-400'>
+              更新失败
+            </p>
+            <p className='text-xs text-default-500 mt-1'>
+              {errorMessage || '请稍后重试或手动更新'}
+            </p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+const NewVersionTip = (props: NewVersionTipProps) => {
+  const { currentVersion } = props;
+  const dialog = useDialog();
+  const { data: latestVersion, error } = useRequest(WebUIManager.getLatestTag, {
+    cacheKey: 'napcat-latest-tag',
+    staleTime: 10 * 60 * 1000,
+    cacheTime: 30 * 60 * 1000,
+  });
+  const [updateStatus, setUpdateStatus] = useState<UpdateStatus>('idle');
+
+  // 使用 SemVer 规范比较版本号
+  if (error || !latestVersion || !currentVersion || !hasNewVersion(currentVersion, latestVersion)) {
+    return null;
+  }
+
+  const handleUpdate = async () => {
+    setUpdateStatus('updating');
+
+    try {
+      await WebUIManager.UpdateNapCat();
+      setUpdateStatus('success');
+      // 显示更新成功对话框
+      dialog.alert({
+        title: '更新完成',
+        content: (
+          <UpdateDialogContent
+            currentVersion={currentVersion}
+            latestVersion={latestVersion}
+            status='success'
+          />
+        ),
+        confirmText: '我知道了',
+        size: 'md',
+      });
+    } catch (err) {
+      console.error('Update failed:', err);
+      const errMessage = err instanceof Error ? err.message : '未知错误';
+      setUpdateStatus('error');
+      // 显示更新失败对话框
+      dialog.alert({
+        title: '更新失败',
+        content: (
+          <UpdateDialogContent
+            currentVersion={currentVersion}
+            latestVersion={latestVersion}
+            status='error'
+            errorMessage={errMessage}
+          />
+        ),
+        confirmText: '确定',
+        size: 'md',
+      });
+    }
+  };
+
+  const showUpdateDialog = () => {
+    dialog.confirm({
+      title: '发现新版本',
+      content: (
+        <UpdateDialogContent
+          currentVersion={currentVersion}
+          latestVersion={latestVersion}
+          status='idle'
+        />
+      ),
+      confirmText: '立即更新',
+      cancelText: '稍后更新',
+      size: 'md',
+      onConfirm: handleUpdate,
+    });
+  };
+
+  return (
+    <Tooltip content='有新版本可用'>
+      <div className='cursor-pointer flex items-center justify-center' onClick={updateStatus === 'updating' ? undefined : showUpdateDialog}>
+        <Chip
+          size='sm'
+          color='primary'
+          variant='flat'
+          classNames={{
+            content: 'font-bold text-[10px] px-1 flex items-center justify-center',
+            base: 'h-5 min-h-5 min-w-[42px]',
+          }}
+        >
+          {updateStatus === 'updating' ? <Spinner size='sm' color='primary' classNames={{ wrapper: 'w-3 h-3' }} /> : 'New'}
+        </Chip>
+      </div>
+    </Tooltip>
+  );
+};
+
+// 版本信息类型
+interface VersionInfo {
+  tag: string;
+  type: 'release' | 'prerelease' | 'action';
+  artifactId?: number;
+  artifactName?: string;
+  createdAt?: string;
+  expiresAt?: string;
+  size?: number;
+  workflowRunId?: number;
+  headSha?: string;
+  workflowTitle?: string;
+}
+
+// 版本选择对话框内容
+interface VersionSelectDialogProps {
+  currentVersion: string;
+  onClose: () => void;
+}
+
+const VersionSelectDialogContent: React.FC<VersionSelectDialogProps> = ({
+  currentVersion,
+  onClose,
+}) => {
+  const dialog = useDialog();
+  const [selectedVersion, setSelectedVersion] = useState<VersionInfo | null>(null);
+  const [forceUpdate, setForceUpdate] = useState(false);
+  const [updateStatus, setUpdateStatus] = useState<UpdateStatus>('idle');
+  const [errorMessage, setErrorMessage] = useState<string>('');
+  const [currentPage, setCurrentPage] = useState(1);
+  const [activeTab, setActiveTab] = useState<'release' | 'action'>('release');
+  const [searchQuery, setSearchQuery] = useState('');
+  const debouncedSearch = useDebounce(searchQuery, 300);
+
+  // 镜像相关状态
+  const [selectedMirror, setSelectedMirror] = useState<string | undefined>(undefined);
+  const [mirrorLatency, setMirrorLatency] = useState<number | null>(null);
+  const [mirrorTesting, setMirrorTesting] = useState(false);
+  const [mirrorModalOpen, setMirrorModalOpen] = useState(false);
+
+  // 测试当前镜像速度
+  const testCurrentMirror = async () => {
+    setMirrorTesting(true);
+    try {
+      const result = await MirrorManager.testSingleMirror(selectedMirror || '', 'file');
+      if (result.success) {
+        setMirrorLatency(result.latency);
+      } else {
+        setMirrorLatency(null);
+      }
+    } catch (_e) {
+      setMirrorLatency(null);
+    } finally {
+      setMirrorTesting(false);
+    }
+  };
+
+  const formatLatency = (latency: number) => {
+    if (latency >= 5000) return '>5s';
+    if (latency >= 1000) return `${(latency / 1000).toFixed(1)}s`;
+    return `${latency}ms`;
+  };
+
+  const getLatencyColor = (latency: number | null): 'success' | 'warning' | 'danger' | 'default' => {
+    if (latency === null) return 'default';
+    if (latency < 300) return 'success';
+    if (latency < 1000) return 'warning';
+    return 'danger';
+  };
+
+  const getMirrorDisplayName = () => {
+    if (!selectedMirror) return '自动选择';
+    try {
+      return new URL(selectedMirror).hostname;
+    } catch {
+      return selectedMirror;
+    }
+  };
+
+  // 获取所有可用版本（带分页、过滤和搜索）
+  // 懒加载：根据 activeTab 只获取对应类型的版本
+  const pageSize = 15;
+  const { data: releasesData, loading: releasesLoading, error: releasesError } = useRequest(
+    () => WebUIManager.getAllReleases({
+      page: currentPage,
+      pageSize,
+      type: activeTab,
+      search: debouncedSearch,
+      mirror: selectedMirror,
+    }),
+    {
+      refreshDeps: [currentPage, activeTab, debouncedSearch, selectedMirror],
+    }
+  );
+
+  // 版本列表已在后端过滤，直接使用
+  const filteredVersions = (releasesData?.versions || []) as VersionInfo[];
+
+  // 检查是否是降级（使用语义化版本比较）
+  const isDowngrade = useCallback((targetTag: string): boolean => {
+    if (!currentVersion || !targetTag) return false;
+    // Action 版本不算降级
+    if (targetTag.startsWith('action-')) return false;
+    return compareVersion(targetTag, currentVersion) < 0;
+  }, [currentVersion]);
+
+  const selectedVersionTag = selectedVersion?.tag || '';
+  const isSelectedDowngrade = isDowngrade(selectedVersionTag);
+
+  const performUpdate = async (force: boolean) => {
+    if (!selectedVersion) return;
+    setUpdateStatus('updating');
+    setErrorMessage('');
+
+    try {
+      await WebUIManager.UpdateNapCatToVersion(selectedVersionTag, force, selectedMirror);
+      setUpdateStatus('success');
+    } catch (err) {
+      console.error('Update failed:', err);
+      const errMsg = err instanceof Error ? err.message : '未知错误';
+      setErrorMessage(errMsg);
+      setUpdateStatus('error');
+    }
+  };
+
+  const handleUpdate = async () => {
+    if (!selectedVersion) return;
+
+    if (isSelectedDowngrade && !forceUpdate) {
+      dialog.confirm({
+        title: '确认降级',
+        content: (
+          <div className='space-y-2'>
+            <p className='text-warning-600'>
+              您正在尝试从 <strong>v{currentVersion}</strong> 降级到 <strong>{selectedVersionTag}</strong>
+            </p>
+            <p className='text-sm text-default-500'>
+              降级可能导致配置不兼容或功能丢失，请确认您了解相关风险。
+            </p>
+          </div>
+        ),
+        confirmText: '确认降级',
+        cancelText: '取消',
+        onConfirm: () => performUpdate(true),
+      });
+      return;
+    }
+
+    await performUpdate(forceUpdate);
+  };
+
+  // 处理分页变化
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+
+  if (updateStatus === 'success') {
+    return (
+      <div className='flex flex-col items-center justify-center gap-3 py-4'>
+        <div className='w-12 h-12 rounded-full bg-success-100 dark:bg-success-900/40 flex items-center justify-center'>
+          <svg className='w-6 h-6 text-success-600 dark:text-success-400' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
+            <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M5 13l4 4L19 7' />
+          </svg>
+        </div>
+        <div className='text-center w-full'>
+          <p className='text-sm font-medium text-success-600 dark:text-success-400'>
+            更新到 {selectedVersionTag} 完成
+          </p>
+          <p className='text-xs text-default-500 mt-1 mb-6'>
+            请重启 NapCat 以应用新版本
+          </p>
+          <div className='flex gap-3 justify-center'>
+            <button
+              className='px-4 py-2 text-sm rounded-lg bg-default-100 hover:bg-default-200 transition-colors text-default-700'
+              onClick={onClose}
+            >
+              稍后重启
+            </button>
+            <button
+              className='px-4 py-2 text-sm rounded-lg bg-primary-500 hover:bg-primary-600 text-white shadow-sm transition-colors shadow-primary-500/20'
+              onClick={async () => {
+                await WebUIManager.restart();
+                onClose();
+              }}
+            >
+              立即重启
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (updateStatus === 'error') {
+    return (
+      <div className='flex flex-col items-center justify-center gap-3 py-4'>
+        <div className='w-12 h-12 rounded-full bg-danger-100 dark:bg-danger-900/40 flex items-center justify-center'>
+          <svg className='w-6 h-6 text-danger-600 dark:text-danger-400' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
+            <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M6 18L18 6M6 6l12 12' />
+          </svg>
+        </div>
+        <div className='text-center'>
+          <p className='text-sm font-medium text-danger-600 dark:text-danger-400'>
+            更新失败
+          </p>
+          <p className='text-xs text-default-500 mt-1'>
+            {errorMessage || '请稍后重试'}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (updateStatus === 'updating') {
+    return (
+      <div className='flex flex-col items-center justify-center gap-3 py-6'>
+        <Spinner size='lg' color='primary' />
+        <div className='text-center'>
+          <p className='text-sm font-medium text-primary-600 dark:text-primary-400'>
+            正在更新到 {selectedVersionTag}...
+          </p>
+          <p className='text-xs text-default-500 mt-1'>
+            请耐心等待，更新可能需要几分钟
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  const pagination = releasesData?.pagination;
+
+  return (
+    <div className='space-y-4'>
+      {/* 当前版本 */}
+      <div className='flex items-center justify-between'>
+        <div className='flex items-center gap-2'>
+          <span className='text-sm text-default-600'>当前版本:</span>
+          <Chip color='primary' variant='flat' size='sm'>
+            v{currentVersion}
+          </Chip>
+        </div>
+        {releasesData?.mirror && (
+          <div className='text-xs text-default-400 flex items-center gap-1'>
+            <span className='w-2 h-2 rounded-full bg-success-500' />
+            镜像: {releasesData.mirror}
+          </div>
+        )}
+      </div>
+
+      {/* 版本类型切换 */}
+      <Tabs
+        selectedKey={activeTab}
+        onSelectionChange={(key) => {
+          setActiveTab(key as 'release' | 'action');
+          setCurrentPage(1);
+          setSelectedVersion(null);
+          setSearchQuery('');
+        }}
+        size='sm'
+        color='primary'
+        variant='underlined'
+        classNames={{
+          tabList: 'gap-4',
+        }}
+      >
+        <Tab key='release' title='正式版本' />
+        <Tab key='action' title='临时版本 (Action)' />
+      </Tabs>
+
+      {/* 下载镜像状态卡片 */}
+      <Card className='bg-default-100/50 shadow-sm'>
+        <CardBody className='py-2 px-3'>
+          <div className='flex items-center justify-between'>
+            <div className='flex items-center gap-2'>
+              <span className='text-xs text-default-500'>镜像源:</span>
+              <span className='text-sm font-medium'>{getMirrorDisplayName()}</span>
+              {mirrorLatency !== null && (
+                <Chip
+                  size='sm'
+                  color={getLatencyColor(mirrorLatency)}
+                  variant='flat'
+                  startContent={<IoMdCheckmark size={12} />}
+                >
+                  {formatLatency(mirrorLatency)}
+                </Chip>
+              )}
+              {mirrorLatency === null && !mirrorTesting && (
+                <Chip size='sm' color='default' variant='flat'>
+                  未测试
+                </Chip>
+              )}
+              {mirrorTesting && (
+                <Chip size='sm' color='primary' variant='flat'>
+                  测速中...
+                </Chip>
+              )}
+            </div>
+            <div className='flex items-center gap-1'>
+              <Tooltip content='测速'>
+                <Button
+                  isIconOnly
+                  size='sm'
+                  variant='light'
+                  onPress={testCurrentMirror}
+                  isLoading={mirrorTesting}
+                >
+                  <IoMdFlash size={16} />
+                </Button>
+              </Tooltip>
+              <Tooltip content='切换镜像'>
+                <Button
+                  isIconOnly
+                  size='sm'
+                  variant='light'
+                  onPress={() => setMirrorModalOpen(true)}
+                >
+                  <IoMdSettings size={16} />
+                </Button>
+              </Tooltip>
+            </div>
+          </div>
+        </CardBody>
+      </Card>
+
+      {/* 搜索框 */}
+      <Input
+        placeholder='搜索版本号...'
+        size='sm'
+        value={searchQuery}
+        onValueChange={(value) => {
+          setSearchQuery(value);
+          setCurrentPage(1);
+          setSelectedVersion(null);
+        }}
+        startContent={<IoSearch className='text-default-400' />}
+        isClearable
+        onClear={() => setSearchQuery('')}
+        classNames={{
+          inputWrapper: 'h-9',
+        }}
+      />
+
+      {/* 版本选择 */}
+      <div className='space-y-2'>
+        <div className='flex items-center justify-between'>
+          <label className='text-sm font-medium text-default-700'>选择目标版本</label>
+          {releasesData?.pagination && (
+            <span className='text-xs text-default-400'>
+              共 {releasesData.pagination.total} 个版本
+            </span>
+          )}
+        </div>
+        {releasesLoading
+          ? (
+            <div className='flex items-center gap-2 py-2'>
+              <Spinner size='sm' />
+              <span className='text-sm text-default-500'>加载版本列表...</span>
+            </div>
+          )
+          : releasesError
+            ? (
+              <div className='text-sm text-danger-500'>
+                加载版本列表失败: {releasesError.message}
+              </div>
+            )
+            : filteredVersions.length === 0
+              ? (
+                <div className='text-sm text-default-500 py-4 text-center'>
+                  {searchQuery ? `未找到匹配 "${searchQuery}" 的版本` : '暂无可用版本'}
+                </div>
+              )
+              : (
+                <Select
+                  label='选择版本'
+                  placeholder='请选择要更新的版本'
+                  selectedKeys={selectedVersion ? [selectedVersionTag] : []}
+                  onSelectionChange={(keys) => {
+                    const selectedTag = Array.from(keys)[0] as string;
+                    const version = filteredVersions.find(v => v.tag === selectedTag);
+                    setSelectedVersion(version || null);
+                  }}
+                  classNames={{
+                    trigger: 'h-auto min-h-10',
+                  }}
+                >
+                  {filteredVersions.map((version) => {
+                    const isCurrent = version.tag.replace(/^v/, '') === currentVersion;
+                    const downgrade = isDowngrade(version.tag);
+                    return (
+                      <SelectItem
+                        key={version.tag}
+                        textValue={version.tag}
+                      >
+                        <div className='flex flex-col gap-0.5'>
+                          <div className='flex items-center gap-2'>
+                            <span className='truncate max-w-[300px]'>
+                              {version.type === 'action'
+                                ? (version.workflowTitle || version.artifactName || version.tag)
+                                : version.tag}
+                            </span>
+                            {version.type === 'prerelease' && (
+                              <Chip size='sm' color='secondary' variant='flat'>预发布</Chip>
+                            )}
+                            {version.type === 'action' && (
+                              <Chip size='sm' color='default' variant='flat'>临时</Chip>
+                            )}
+                            {isCurrent && (
+                              <Chip size='sm' color='success' variant='flat'>当前</Chip>
+                            )}
+                            {downgrade && !isCurrent && version.type !== 'action' && (
+                              <Chip size='sm' color='warning' variant='flat'>降级</Chip>
+                            )}
+                          </div>
+                          {version.type === 'action' && (
+                            <div className='text-xs text-default-400 flex items-center gap-2'>
+                              <span className='font-mono bg-default-100 dark:bg-default-100/10 px-1 rounded'>{version.tag}</span>
+                              {version.headSha && <span className='font-mono' title={version.headSha}>{version.headSha.slice(0, 7)}</span>}
+                              {version.createdAt && <span>{new Date(version.createdAt).toLocaleString()}</span>}
+                              {version.size && <span>{(version.size / 1024 / 1024).toFixed(1)} MB</span>}
+                            </div>
+                          )}
+                        </div>
+                      </SelectItem>
+                    );
+                  })}
+                </Select>
+              )}
+      </div>
+
+      {/* Action 版本提示 */}
+      {activeTab === 'action' && (
+        <div className='p-3 rounded-lg bg-default-50 dark:bg-default-100/10 border border-default-200/50'>
+          <p className='text-xs text-default-500'>
+            临时版本来自 GitHub Actions 构建，可能不稳定，适合测试新功能。
+            {selectedVersion?.expiresAt && (
+              <span className='block mt-1 text-warning-600'>
+                此版本将于 {new Date(selectedVersion.expiresAt).toLocaleDateString()} 过期
+              </span>
+            )}
+          </p>
+
+        </div>
+      )}
+
+      {/* 降级警告 */}
+      {selectedVersion && isSelectedDowngrade && (
+        <div className='p-3 rounded-lg bg-warning-50/50 dark:bg-warning-900/20 border border-warning-200/50 dark:border-warning-700/30'>
+          <div className='flex items-start gap-2'>
+            <svg className='w-5 h-5 text-warning-600 dark:text-warning-400 flex-shrink-0 mt-0.5' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
+              <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z' />
+            </svg>
+            <div>
+              <p className='text-sm font-medium text-warning-700 dark:text-warning-400'>
+                版本降级警告
+              </p>
+              <p className='text-xs text-warning-600/80 dark:text-warning-500 mt-1'>
+                降级到旧版本可能导致配置不兼容或功能丢失
+              </p>
+            </div>
+          </div>
+          <div className='mt-3 flex items-center gap-2'>
+            <Switch
+              size='sm'
+              isSelected={forceUpdate}
+              onValueChange={setForceUpdate}
+            />
+            <span className='text-xs text-warning-700 dark:text-warning-400'>
+              我了解风险，确认降级
+            </span>
+          </div>
+        </div>
+      )}
+
+      {/* 分页 */}
+      {pagination && pagination.totalPages > 1 && (
+        <div className='flex justify-center'>
+          <Pagination
+            total={pagination.totalPages}
+            page={currentPage}
+            onChange={handlePageChange}
+            size='sm'
+            showControls
+          />
+        </div>
+      )}
+
+      {/* 操作按钮 */}
+      <div className='flex justify-end gap-2 pt-4 border-t border-default-100 dark:border-default-100/10'>
+        <button
+          className='px-4 py-2 text-sm rounded-lg bg-default-100 hover:bg-default-200 transition-colors'
+          onClick={onClose}
+        >
+          关闭
+        </button>
+        <button
+          className={clsx(
+            'px-4 py-2 text-sm rounded-lg transition-colors text-white shadow-sm',
+            selectedVersion && (!isSelectedDowngrade || forceUpdate)
+              ? 'bg-primary-500 hover:bg-primary-600 shadow-primary-500/20'
+              : 'bg-default-300 cursor-not-allowed'
+          )}
+          disabled={!selectedVersion || (isSelectedDowngrade && !forceUpdate)}
+          onClick={handleUpdate}
+        >
+          {isSelectedDowngrade ? '确认降级更新' : '更新到此版本'}
+        </button>
+      </div>
+
+      {/* 镜像选择弹窗 */}
+      <MirrorSelectorModal
+        isOpen={mirrorModalOpen}
+        onClose={() => setMirrorModalOpen(false)}
+        currentMirror={selectedMirror}
+        onSelect={(mirror) => {
+          setSelectedMirror(mirror || undefined);
+          setMirrorLatency(null);
+        }}
+        type='file'
+      />
+    </div>
+  );
+};
+
+interface NapCatVersionProps {
+  hasBackground?: boolean;
+}
+
+const NapCatVersion: React.FC<NapCatVersionProps> = ({ hasBackground = false }) => {
+  const [isVersionModalOpen, setIsVersionModalOpen] = useState(false);
+  const {
+    data: packageData,
+    loading: packageLoading,
+    error: packageError,
+  } = useRequest(WebUIManager.GetNapCatVersion, {
+    cacheKey: 'napcat-version',
+    staleTime: 60 * 60 * 1000,
+    cacheTime: 24 * 60 * 60 * 1000,
+  });
+
+  const currentVersion = packageData?.version;
+
+  // 点击版本号时显示版本选择对话框
+  const handleVersionClick = useCallback(() => {
+    if (!currentVersion) return;
+    setIsVersionModalOpen(true);
+  }, [currentVersion]);
+
+  return (
+    <>
+      <SystemInfoItem
+        title='NapCat 版本'
+        icon={<IoLogoOctocat className='text-xl' />}
+        hasBackground={hasBackground}
+        value={
+          packageError
+            ? (
+              `错误：${packageError.message}`
+            )
+            : packageLoading
+              ? (
+                <Spinner size='sm' />
+              )
+              : (
+                <Tooltip content='点击管理版本'>
+                  <span
+                    className='cursor-pointer hover:text-primary-500 transition-colors underline decoration-dashed underline-offset-2'
+                    onClick={handleVersionClick}
+                  >
+                    {currentVersion}
+                  </span>
+                </Tooltip>
+              )
+        }
+        endContent={<NewVersionTip currentVersion={currentVersion} />}
+      />
+      {isVersionModalOpen && (
+        <Modal
+          title='版本管理'
+          size='lg'
+          hideFooter
+          onClose={() => setIsVersionModalOpen(false)}
+          content={
+            <VersionSelectDialogContent
+              currentVersion={currentVersion || ''}
+              onClose={() => setIsVersionModalOpen(false)}
+            />
+          }
+        />
+      )}
+    </>
+  );
+};
+
+export interface SystemInfoProps {
+  archInfo?: string;
+}
+const SystemInfo: React.FC<SystemInfoProps> = (props) => {
+  const { archInfo } = props;
+  const {
+    data: qqVersionData,
+    loading: qqVersionLoading,
+    error: qqVersionError,
+  } = useRequest(WebUIManager.getQQVersion, {
+    cacheKey: 'qq-version',
+    staleTime: 60 * 60 * 1000,
+    cacheTime: 24 * 60 * 60 * 1000,
+  });
+  const [backgroundImage] = useLocalStorage<string>(key.backgroundImage, '');
+  const hasBackground = !!backgroundImage;
+
+  return (
+    <Card className={clsx(
+      'backdrop-blur-sm border border-white/40 dark:border-white/10 shadow-sm overflow-visible flex-1',
+      hasBackground ? 'bg-white/10 dark:bg-black/10' : 'bg-white/60 dark:bg-black/40'
+    )}
+    >
+      <CardHeader className={clsx(
+        'pb-0 items-center gap-2 font-bold px-4 pt-4',
+        hasBackground ? 'text-white drop-shadow-sm' : 'text-default-700 dark:text-white'
+      )}
+      >
+        <FaCircleInfo className='text-lg opacity-80' />
+        <span>系统信息</span>
+      </CardHeader>
+      <CardBody className='flex-1'>
+        <div className='flex flex-col gap-2 justify-between h-full'>
+          <NapCatVersion hasBackground={hasBackground} />
+          <SystemInfoItem
+            title='QQ 版本'
+            icon={<FaQq className='text-lg' />}
+            hasBackground={hasBackground}
+            value={
+              qqVersionError
+                ? (
+                  `错误：${qqVersionError.message}`
+                )
+                : qqVersionLoading
+                  ? (
+                    <Spinner size='sm' />
+                  )
+                  : (
+                    qqVersionData
+                  )
+            }
+          />
+          <SystemInfoItem
+            title='WebUI 版本'
+            icon={<IoLogoChrome className='text-xl' />}
+            value='Next'
+            hasBackground={hasBackground}
+          />
+          <SystemInfoItem
+            title='系统版本'
+            icon={<RiMacFill className='text-xl' />}
+            value={archInfo}
+            hasBackground={hasBackground}
+          />
+        </div>
+      </CardBody>
+    </Card>
+  );
+};
+
+export default SystemInfo;

packages/napcat-webui-frontend/src/components/system_status_display.tsx

@@ -0,0 +1,164 @@
+import { Card, CardBody } from '@heroui/card';
+import { Image } from '@heroui/image';
+import { useLocalStorage } from '@uidotdev/usehooks';
+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 key from '@/const/key';
+
+import UsagePie from './usage_pie';
+
+export interface SystemStatusItemProps {
+  title: string;
+  value?: string | number;
+  size?: 'md' | 'lg';
+  unit?: string;
+  hasBackground?: boolean;
+}
+
+const SystemStatusItem: React.FC<SystemStatusItemProps> = ({
+  title,
+  value = '-',
+  size = 'md',
+  unit,
+  hasBackground = false,
+}) => {
+  return (
+    <div
+      className={clsx(
+        'py-1.5 text-sm transition-colors',
+        size === 'lg' ? 'col-span-2' : 'col-span-1 flex justify-between items-center'
+      )}
+    >
+      <div className={clsx(
+        'w-24 font-medium',
+        hasBackground ? 'text-white/90' : 'text-default-600 dark:text-gray-300'
+      )}
+      >{title}
+      </div>
+      <div className={clsx(
+        'font-mono text-xs',
+        hasBackground ? 'text-white/80' : 'text-default-500'
+      )}
+      >
+        {value}
+        {unit && <span className='ml-0.5 opacity-70'>{unit}</span>}
+      </div>
+    </div>
+  );
+};
+
+export interface SystemStatusDisplayProps {
+  data?: SystemStatus;
+}
+
+const SystemStatusDisplay: React.FC<SystemStatusDisplayProps> = ({ data }) => {
+  const memoryUsage = {
+    system: 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 [backgroundImage] = useLocalStorage<string>(key.backgroundImage, '');
+  const hasBackground = !!backgroundImage;
+
+  return (
+    <Card className={clsx(
+      'backdrop-blur-sm border border-white/40 dark:border-white/10 shadow-sm col-span-1 lg:col-span-2 relative overflow-hidden',
+      hasBackground ? 'bg-white/10 dark:bg-black/10' : 'bg-white/60 dark:bg-black/40'
+    )}
+    >
+      <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'
+          classNames={{
+            wrapper: '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={clsx(
+            'text-lg font-semibold flex items-center gap-2 mb-2',
+            hasBackground ? 'text-white drop-shadow-sm' : 'text-default-700 dark:text-gray-200'
+          )}
+          >
+            <GiCpu className='text-xl opacity-80' />
+            <span>CPU</span>
+          </h2>
+          <div className='grid grid-cols-2 gap-2'>
+            <SystemStatusItem title='型号' value={data?.cpu.model} size='lg' hasBackground={hasBackground} />
+            <SystemStatusItem title='内核数' value={data?.cpu.core} hasBackground={hasBackground} />
+            <SystemStatusItem title='主频' value={data?.cpu.speed} unit='GHz' hasBackground={hasBackground} />
+            <SystemStatusItem
+              title='使用率'
+              value={data?.cpu.usage.system}
+              unit='%'
+              hasBackground={hasBackground}
+            />
+            <SystemStatusItem
+              title='QQ主线程'
+              value={data?.cpu.usage.qq}
+              unit='%'
+              hasBackground={hasBackground}
+            />
+          </div>
+          <h2 className={clsx(
+            'text-lg font-semibold flex items-center gap-2 mb-2 mt-4',
+            hasBackground ? 'text-white drop-shadow-sm' : 'text-default-700 dark:text-gray-200'
+          )}
+          >
+            <BiSolidMemoryCard className='text-xl opacity-80' />
+            <span>内存</span>
+          </h2>
+          <div className='grid grid-cols-2 gap-2'>
+            <SystemStatusItem
+              title='总量'
+              value={data?.memory.total}
+              size='lg'
+              unit='MB'
+              hasBackground={hasBackground}
+            />
+            <SystemStatusItem
+              title='使用量'
+              value={data?.memory.usage.system}
+              unit='MB'
+              hasBackground={hasBackground}
+            />
+            <SystemStatusItem
+              title='QQ主线程'
+              value={data?.memory.usage.qq}
+              unit='MB'
+              hasBackground={hasBackground}
+            />
+          </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'>
+          <UsagePie
+            systemUsage={Number(data?.cpu.usage.system) || 0}
+            processUsage={Number(data?.cpu.usage.qq) || 0}
+            title='CPU占用'
+            hasBackground={hasBackground}
+          />
+          <UsagePie
+            systemUsage={memoryUsage.system}
+            processUsage={memoryUsage.qq}
+            title='内存占用'
+            hasBackground={hasBackground}
+          />
+        </div>
+      </CardBody>
+    </Card>
+  );
+};
+export default SystemStatusDisplay;

packages/napcat-webui-frontend/src/components/tabs/index.tsx

@@ -0,0 +1,89 @@
+import clsx from 'clsx';
+import { type ReactNode, createContext, forwardRef, useContext } from 'react';
+
+export interface TabsContextValue {
+  activeKey: string
+  onChange: (key: string) => void
+}
+
+const TabsContext = createContext<TabsContextValue>({
+  activeKey: '',
+  onChange: () => {},
+});
+
+export interface TabsProps {
+  activeKey: string
+  onChange: (key: string) => void
+  children: ReactNode
+  className?: string
+}
+
+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 {
+  children: ReactNode
+  className?: string
+}
+
+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> {
+  value: string
+  className?: string
+  children: ReactNode
+  isSelected?: boolean
+}
+
+export const Tab = forwardRef<HTMLDivElement, TabProps>(
+  ({ className, isSelected, value, ...props }, ref) => {
+    const { onChange } = useContext(TabsContext);
+
+    const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+      onChange(value);
+      props.onClick?.(e);
+    };
+
+    return (
+      <div
+        ref={ref}
+        role='tab'
+        aria-selected={isSelected}
+        onClick={handleClick}
+        className={clsx(
+          'px-2 py-1 flex items-center gap-1 text-sm font-medium border-b-2 transition-colors',
+          isSelected
+            ? 'border-primary text-primary'
+            : 'border-transparent hover:border-default',
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+
+Tab.displayName = 'Tab';
+
+export interface TabPanelProps {
+  value: string
+  children: ReactNode
+  className?: string
+}
+
+export function TabPanel ({ value, children, className }: TabPanelProps) {
+  const { activeKey } = useContext(TabsContext);
+
+  if (value !== activeKey) return null;
+
+  return <div className={clsx('flex-1', className)}>{children}</div>;
+}

packages/napcat-webui-frontend/src/components/tabs/sortable_tab.tsx

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

packages/napcat-webui-frontend/src/components/tailwind_markdown.tsx

@@ -0,0 +1,181 @@
+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 max-w-none'
+      remarkPlugins={[remarkGfm]}
+      components={{
+        h1: ({ node: _node, ...props }) => (
+          <h1
+            className='text-3xl font-bold mt-6 mb-4 pb-2 border-b-2 border-primary/20 text-default-900 first:mt-0'
+            {...props}
+          />
+        ),
+        h2: ({ node: _node, ...props }) => (
+          <h2
+            className='text-2xl font-bold mt-6 mb-3 pb-2 border-b border-default-200 text-default-800'
+            {...props}
+          />
+        ),
+        h3: ({ node: _node, ...props }) => (
+          <h3
+            className='text-xl font-semibold mt-5 mb-2 text-default-800'
+            {...props}
+          />
+        ),
+        h4: ({ node: _node, ...props }) => (
+          <h4
+            className='text-lg font-semibold mt-4 mb-2 text-default-700'
+            {...props}
+          />
+        ),
+        h5: ({ node: _node, ...props }) => (
+          <h5
+            className='text-base font-semibold mt-3 mb-2 text-default-700'
+            {...props}
+          />
+        ),
+        h6: ({ node: _node, ...props }) => (
+          <h6
+            className='text-sm font-semibold mt-3 mb-2 text-default-600'
+            {...props}
+          />
+        ),
+        p: ({ node: _node, ...props }) => (
+          <p
+            className='my-3 leading-7 text-default-700 first:mt-0 last:mb-0'
+            {...props}
+          />
+        ),
+        a: ({ node: _node, ...props }) => (
+          <a
+            className='text-primary font-medium hover:text-primary-600 underline decoration-primary/30 hover:decoration-primary transition-colors'
+            target='_blank'
+            rel='noopener noreferrer'
+            {...props}
+          />
+        ),
+        ul: ({ node: _node, ...props }) => (
+          <ul
+            className='my-3 ml-6 space-y-2 list-disc marker:text-primary'
+            {...props}
+          />
+        ),
+        ol: ({ node: _node, ...props }) => (
+          <ol
+            className='my-3 ml-6 space-y-2 list-decimal marker:text-primary marker:font-semibold'
+            {...props}
+          />
+        ),
+        li: ({ node: _node, ...props }) => (
+          <li
+            className='leading-7 text-default-700 pl-2'
+            {...props}
+          />
+        ),
+        blockquote: ({ node: _node, ...props }) => (
+          <blockquote
+            className='my-4 pl-4 pr-4 py-2 border-l-4 border-primary/50 bg-primary/5 rounded-r-lg italic text-default-600'
+            {...props}
+          />
+        ),
+        pre: ({ node: _node, ...props }) => (
+          <pre
+            className='my-4 p-4 bg-default-100 dark:bg-default-50 rounded-xl overflow-x-auto text-sm border border-default-200 shadow-sm'
+            {...props}
+          />
+        ),
+        code: ({ node: _node, inline, ...props }: any) => {
+          if (inline) {
+            return (
+              <code
+                className='px-1.5 py-0.5 mx-0.5 bg-primary/10 text-primary-700 dark:text-primary-600 rounded text-sm font-mono border border-primary/20'
+                {...props}
+              />
+            );
+          }
+          return (
+            <code
+              className='text-sm font-mono text-default-800'
+              {...props}
+            />
+          );
+        },
+        img: ({ node: _node, ...props }) => (
+          <img
+            className='max-w-full h-auto rounded-lg my-4 shadow-md hover:shadow-xl transition-shadow border border-default-200'
+            {...props}
+          />
+        ),
+        hr: ({ node: _node, ...props }) => (
+          <hr
+            className='my-8 border-0 h-px bg-gradient-to-r from-transparent via-default-300 to-transparent'
+            {...props}
+          />
+        ),
+        table: ({ node: _node, ...props }) => (
+          <div className='my-4 overflow-x-auto rounded-lg border border-default-200 shadow-sm'>
+            <table
+              className='min-w-full divide-y divide-default-200'
+              {...props}
+            />
+          </div>
+        ),
+        thead: ({ node: _node, ...props }) => (
+          <thead
+            className='bg-default-100'
+            {...props}
+          />
+        ),
+        tbody: ({ node: _node, ...props }) => (
+          <tbody
+            className='divide-y divide-default-200 bg-white dark:bg-default-50'
+            {...props}
+          />
+        ),
+        tr: ({ node: _node, ...props }) => (
+          <tr
+            className='hover:bg-default-50 transition-colors'
+            {...props}
+          />
+        ),
+        th: ({ node: _node, ...props }) => (
+          <th
+            className='px-4 py-3 text-left text-xs font-semibold text-default-700 uppercase tracking-wider'
+            {...props}
+          />
+        ),
+        td: ({ node: _node, ...props }) => (
+          <td
+            className='px-4 py-3 text-sm text-default-700'
+            {...props}
+          />
+        ),
+        strong: ({ node: _node, ...props }) => (
+          <strong
+            className='font-bold text-default-900'
+            {...props}
+          />
+        ),
+        em: ({ node: _node, ...props }) => (
+          <em
+            className='italic text-default-700'
+            {...props}
+          />
+        ),
+        del: ({ node: _node, ...props }) => (
+          <del
+            className='line-through text-default-500'
+            {...props}
+          />
+        ),
+      }}
+    >
+      {content}
+    </Markdown>
+  );
+};
+
+export default TailwindMarkdown;

packages/napcat-webui-frontend/src/components/tencent_captcha.tsx

@@ -0,0 +1,166 @@
+import { useEffect, useRef, useCallback } from 'react';
+import { Spinner } from '@heroui/spinner';
+
+declare global {
+  interface Window {
+    TencentCaptcha: new (
+      appid: string,
+      callback: (res: TencentCaptchaResult) => void,
+      options?: Record<string, unknown>
+    ) => { show: () => void; destroy: () => void; };
+  }
+}
+
+export interface TencentCaptchaResult {
+  ret: number;
+  appid?: string;
+  ticket?: string;
+  randstr?: string;
+  errorCode?: number;
+  errorMessage?: string;
+}
+
+export interface CaptchaCallbackData {
+  ticket: string;
+  randstr: string;
+  appid: string;
+  sid: string;
+}
+
+interface TencentCaptchaProps {
+  /** proofWaterUrl returned from login error, contains uin/sid/aid params */
+  proofWaterUrl: string;
+  /** Called when captcha verification succeeds */
+  onSuccess: (data: CaptchaCallbackData) => void;
+  /** Called when captcha is cancelled or fails */
+  onCancel?: () => void;
+}
+
+function parseUrlParams (url: string): Record<string, string> {
+  const params: Record<string, string> = {};
+  try {
+    const u = new URL(url);
+    u.searchParams.forEach((v, k) => { params[k] = v; });
+  } catch {
+    const match = url.match(/[?&]([^#]+)/);
+    if (match) {
+      match[1].split('&').forEach(pair => {
+        const [k, v] = pair.split('=');
+        if (k) params[k] = decodeURIComponent(v || '');
+      });
+    }
+  }
+  return params;
+}
+
+function loadScript (src: string): Promise<void> {
+  return new Promise((resolve, reject) => {
+    if (window.TencentCaptcha) {
+      resolve();
+      return;
+    }
+    const tag = document.createElement('script');
+    tag.src = src;
+    tag.onload = () => resolve();
+    tag.onerror = () => reject(new Error(`Failed to load ${src}`));
+    document.head.appendChild(tag);
+  });
+}
+
+const TencentCaptchaModal: React.FC<TencentCaptchaProps> = ({
+  proofWaterUrl,
+  onSuccess,
+  onCancel,
+}) => {
+  const captchaRef = useRef<{ destroy: () => void; } | null>(null);
+  const mountedRef = useRef(true);
+
+  const handleResult = useCallback((res: TencentCaptchaResult, sid: string) => {
+    if (!mountedRef.current) return;
+    if (res.ret === 0 && res.ticket && res.randstr) {
+      onSuccess({
+        ticket: res.ticket,
+        randstr: res.randstr,
+        appid: res.appid || '',
+        sid,
+      });
+    } else {
+      onCancel?.();
+    }
+  }, [onSuccess, onCancel]);
+
+  useEffect(() => {
+    mountedRef.current = true;
+    const params = parseUrlParams(proofWaterUrl);
+    const appid = params.aid || '2081081773';
+    const sid = params.sid || '';
+
+    const init = async () => {
+      try {
+        await loadScript('https://captcha.gtimg.com/TCaptcha.js');
+      } catch {
+        try {
+          await loadScript('https://ssl.captcha.qq.com/TCaptcha.js');
+        } catch {
+          // Both CDN failed, generate fallback ticket
+          if (mountedRef.current) {
+            handleResult({
+              ret: 0,
+              ticket: `terror_1001_${appid}_${Math.floor(Date.now() / 1000)}`,
+              randstr: '@' + Math.random().toString(36).substring(2),
+              errorCode: 1001,
+              errorMessage: 'jsload_error',
+            }, sid);
+          }
+          return;
+        }
+      }
+
+      if (!mountedRef.current) return;
+
+      try {
+        const captcha = new window.TencentCaptcha(
+          appid,
+          (res) => handleResult(res, sid),
+          {
+            type: 'popup',
+            showHeader: false,
+            login_appid: params.login_appid,
+            uin: params.uin,
+            sid: params.sid,
+            enableAged: true,
+          }
+        );
+        captchaRef.current = captcha;
+        captcha.show();
+      } catch {
+        if (mountedRef.current) {
+          handleResult({
+            ret: 0,
+            ticket: `terror_1001_${appid}_${Math.floor(Date.now() / 1000)}`,
+            randstr: '@' + Math.random().toString(36).substring(2),
+            errorCode: 1001,
+            errorMessage: 'init_error',
+          }, sid);
+        }
+      }
+    };
+
+    init();
+
+    return () => {
+      mountedRef.current = false;
+      captchaRef.current?.destroy();
+      captchaRef.current = null;
+    };
+  }, [proofWaterUrl, handleResult]);
+
+  return (
+    <div className='flex items-center justify-center py-8 gap-3'>
+      <Spinner size='lg' />
+      <span className='text-default-500'>正在加载验证码...</span>
+    </div>
+  );
+};
+
+export default TencentCaptchaModal;

packages/napcat-webui-frontend/src/components/terminal/terminal-instance.tsx

@@ -0,0 +1,56 @@
+import { useEffect, useRef } from 'react';
+
+import TerminalManager from '@/controllers/terminal_manager';
+
+import XTerm, { XTermRef } from '../xterm';
+
+interface TerminalInstanceProps {
+  id: string
+}
+
+export function TerminalInstance ({ id }: TerminalInstanceProps) {
+  const termRef = useRef<XTermRef>(null);
+  const connected = useRef(false);
+
+  const handleData = (data: string) => {
+    try {
+      const parsed = JSON.parse(data);
+      if (parsed.data) {
+        termRef.current?.write(parsed.data);
+      }
+    } catch (_e) {
+      termRef.current?.write(data);
+    }
+  };
+
+  useEffect(() => {
+    return () => {
+      if (connected.current) {
+        TerminalManager.disconnectTerminal(id, handleData);
+      }
+    };
+  }, [id]);
+
+  const handleInput = (data: string) => {
+    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 });
+    } else {
+      TerminalManager.sendResize(id, cols, rows);
+    }
+  };
+
+  return (
+    <XTerm
+      ref={termRef}
+      onInput={handleInput}
+      onResize={handleResize} // 使用 fitAddon 改变后触发的 resize 回调
+      className='w-full h-full'
+    />
+  );
+}