Refactor UI for network cards and improve theming

Redesigned network display cards and related components for a more modern, consistent look, including improved button styles, card layouts, and responsive design. Added support for background images and dynamic theming across cards, tables, and log views. Enhanced input and select components with unified styling. Improved file table responsiveness and log display usability. Refactored OneBot API debug and navigation UI for better usability and mobile support.

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

@@ -1,10 +1,13 @@
 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';
@@ -19,7 +22,15 @@ export default function Hitokoto () {
     pollingInterval: 10000,
     throttleWait: 1000,
   });
-  const data = dataOri?.data;
+  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}`;
@@ -32,28 +43,39 @@ export default function Hitokoto () {
   return (
     <div>
       <div className='relative flex flex-col items-center justify-center p-6 min-h-[120px]'>
-        {loading && <PageLoading />}
-        {error
-          ? (
-            <div className='text-danger'>一言加载失败：{error.message}</div>
-          )
-          : (
-            <>
-              <IoMdQuote className="text-4xl text-primary/20 mb-4" />
-              <div className="text-xl font-medium text-default-700 dark:text-gray-200 tracking-wide leading-relaxed italic">
-                “ {data?.hitokoto} ”
-              </div>
-              <div className='mt-4 flex flex-col items-center text-sm'>
-                <span className='font-bold text-primary-500/80'>—— {data?.from}</span>
-                {data?.from_who && <span className="text-default-400 text-xs mt-1">{data?.from_who}</span>}
-              </div>
-            </>
-          )}
+        {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="text-default-400 hover:text-primary transition-colors"
+            className={clsx(
+              "transition-colors",
+              hasBackground ? "text-white/60 hover:text-white" : "text-default-400 hover:text-primary"
+            )}
             onPress={run}
             size='sm'
             isLoading={loading}
@@ -66,7 +88,10 @@ export default function Hitokoto () {
         </Tooltip>
         <Tooltip content='复制' placement='top'>
           <Button
-            className="text-default-400 hover:text-success transition-colors"
+            className={clsx(
+              "transition-colors",
+              hasBackground ? "text-white/60 hover:text-white" : "text-default-400 hover:text-success"
+            )}
             onPress={onCopy}
             size='sm'
             isIconOnly