Refactor UI styles for improved consistency and clarity

Unified card backgrounds, borders, and shadows across components for a more consistent look. Enhanced table, tab, and button styles for clarity and accessibility. Improved layout and modal structure in OneBot API debug, added modal for struct display, and optimized WebSocket debug connection logic. Updated file manager, logs, network, and terminal pages for visual consistency. Refactored interface definitions for stricter typing and readability.

packages/napcat-webui-frontend/src/pages/dashboard/debug/websocket/index.tsx

@@ -24,9 +24,10 @@ export default function WSDebug () {
   });
   const [inputUrl, setInputUrl] = useState(socketConfig.url);
   const [inputToken, setInputToken] = useState(socketConfig.token);
+  const [shouldConnect, setShouldConnect] = useState(false);
 
-  const { sendMessage, readyState, FilterMessagesType, filteredMessages } =
-    useWebSocketDebug(socketConfig.url, socketConfig.token);
+  const { sendMessage, readyState, FilterMessagesType, filteredMessages, clearMessages } =
+    useWebSocketDebug(socketConfig.url, socketConfig.token, shouldConnect);
 
   const handleConnect = useCallback(() => {
     if (!inputUrl.startsWith('ws://') && !inputUrl.startsWith('wss://')) {
@@ -37,13 +38,18 @@ export default function WSDebug () {
       url: inputUrl,
       token: inputToken,
     });
-  }, [inputUrl, inputToken]);
+    setShouldConnect(true);
+  }, [inputUrl, inputToken, setSocketConfig]);
+
+  const handleDisconnect = useCallback(() => {
+    setShouldConnect(false);
+  }, []);
 
   return (
     <>
       <title>Websocket调试 - NapCat WebUI</title>
       <div className='h-[calc(100vh-4rem)] overflow-hidden flex flex-col'>
-        <Card className='mx-2 mt-2 flex-shrink-0 bg-opacity-50 backdrop-blur-sm'>
+        <Card className='mx-2 mt-2 flex-shrink-0 bg-white/60 dark:bg-black/40 backdrop-blur-xl border border-white/40 dark:border-white/10 shadow-sm'>
           <CardBody className='gap-2'>
             <div className='grid gap-2 items-center md:grid-cols-5'>
               <Input
@@ -64,23 +70,33 @@ export default function WSDebug () {
               />
               <div className='flex-shrink-0 flex gap-2 col-span-2 md:col-span-1'>
                 <Button
-                  color='primary'
-                  onPress={handleConnect}
+                  onPress={shouldConnect ? handleDisconnect : handleConnect}
                   size='lg'
                   radius='full'
+                  color={shouldConnect ? 'danger' : 'primary'}
                   className='w-full md:w-auto'
                 >
-                  连接
+                  {shouldConnect ? '断开' : '连接'}
                 </Button>
               </div>
             </div>
-            <div className='p-2 border border-default-100 bg-content1 bg-opacity-50 rounded-md dark:bg-[rgb(30,30,30)]'>
+            <div className='p-2 rounded-lg bg-white/50 dark:bg-white/5 border border-white/20 transition-colors'>
               <div className='grid gap-2 md:grid-cols-5 items-center md:w-fit'>
                 <WSStatus state={readyState} />
                 <div className='md:w-64 max-w-full col-span-2'>
                   {FilterMessagesType}
                 </div>
-                <OneBotSendModal sendMessage={sendMessage} />
+                <div className='flex gap-2 justify-end col-span-2 md:col-span-2'>
+                  <Button
+                    size='sm'
+                    color='danger'
+                    variant='flat'
+                    onPress={clearMessages}
+                  >
+                    清空日志
+                  </Button>
+                  <OneBotSendModal sendMessage={sendMessage} />
+                </div>
               </div>
             </div>
           </CardBody>

packages/napcat-webui-frontend/src/pages/dashboard/file_manager.tsx

@@ -329,8 +329,8 @@ export default function FileManagerPage () {
   });
 
   return (
-    <div className='p-4'>
-      <div className='mb-4 flex items-center gap-4 sticky top-14 z-10 bg-content1 py-1'>
+    <div className='h-full flex flex-col relative gap-4 w-full p-4'>
+      <div className='mb-4 flex items-center gap-4 sticky top-14 z-10 bg-white/60 dark:bg-black/40 backdrop-blur-xl border border-white/40 dark:border-white/10 shadow-sm py-2 px-4 rounded-xl'>
         <Button
           color='primary'
           size='sm'
@@ -418,8 +418,8 @@ export default function FileManagerPage () {
                 )
               </Button>
             </>
-        )}
-        <Breadcrumbs className='flex-1 shadow-small px-2 py-2 rounded-lg'>
+          )}
+        <Breadcrumbs className='flex-1 bg-white/40 dark:bg-black/20 backdrop-blur-md shadow-sm border border-white/20 px-2 py-2 rounded-lg'>
           {currentPath.split('/').map((part, index, parts) => (
             <BreadcrumbItem
               key={part}

packages/napcat-webui-frontend/src/pages/dashboard/index.tsx

@@ -105,7 +105,7 @@ const DashboardIndexPage: React.FC = () => {
           <SystemStatusCard setArchInfo={setArchInfo} />
         </div>
         <Networks />
-        <Card className='bg-opacity-60 shadow-sm shadow-primary-100'>
+        <Card className='bg-white/60 dark:bg-black/40 backdrop-blur-xl border border-white/40 dark:border-white/10 shadow-sm'>
           <CardBody>
             <Hitokoto />
           </CardBody>

packages/napcat-webui-frontend/src/pages/dashboard/logs.tsx

@@ -53,8 +53,8 @@ export default function LogsPage () {
         classNames={{
           panel: 'w-full flex-1 h-full py-0 flex flex-col gap-4',
           base: 'flex-shrink-0 !h-fit',
-          tabList: 'bg-opacity-50 backdrop-blur-sm',
-          cursor: 'bg-opacity-60 backdrop-blur-sm',
+          tabList: 'bg-white/40 dark:bg-black/20 backdrop-blur-md',
+          cursor: 'bg-white/80 dark:bg-white/10 backdrop-blur-md shadow-sm',
         }}
       >
         <Tab title='实时日志'>

packages/napcat-webui-frontend/src/pages/dashboard/network.tsx

@@ -388,8 +388,8 @@ export default function NetworkPage () {
           className='max-w-full'
           items={tabs}
           classNames={{
-            tabList: 'bg-opacity-50 backdrop-blur-sm',
-            cursor: 'bg-opacity-60 backdrop-blur-sm',
+            tabList: 'bg-white/40 dark:bg-black/20 backdrop-blur-md',
+            cursor: 'bg-white/80 dark:bg-white/10 backdrop-blur-md shadow-sm',
           }}
         >
           {(item) => (

packages/napcat-webui-frontend/src/pages/dashboard/terminal.tsx

@@ -112,7 +112,7 @@ export default function TerminalPage () {
           className='h-full overflow-hidden'
         >
           <div className='flex items-center gap-2 flex-shrink-0 flex-grow-0'>
-            <TabList className='flex-1 !overflow-x-auto w-full hide-scrollbar'>
+            <TabList className='flex-1 !overflow-x-auto w-full hide-scrollbar bg-white/40 dark:bg-black/20 backdrop-blur-md p-1 rounded-lg border border-white/20'>
               <SortableContext
                 items={tabs}
                 strategy={horizontalListSortingStrategy}