From fa3a229827274cfc841b35a2f8431e6030868ab4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=89=8B=E7=93=9C=E4=B8=80=E5=8D=81=E9=9B=AA?=
 <nanaeonn@outlook.com>
Date: Wed, 24 Dec 2025 13:56:34 +0800
Subject: [PATCH] Refactor dashboard and components, remove echarts

Replaces echarts-based usage pie chart with a custom SVG implementation, removing the echarts dependency. Improves caching for version and system info requests, simplifies page background to static elements, and switches dashboard state to use localStorage for persistence. Also removes polling from hitokoto and updates button styling in system info.
---
 packages/napcat-webui-frontend/package.json   |   3 +-
 .../src/components/hitokoto.tsx               |   1 -
 .../src/components/page_background.tsx        |  27 +--
 .../src/components/system_info.tsx            |  22 +-
 .../src/components/usage_pie.tsx              | 212 ++++++++----------
 .../src/pages/dashboard/index.tsx             |   6 +-
 6 files changed, 113 insertions(+), 158 deletions(-)

diff --git a/packages/napcat-webui-frontend/package.json b/packages/napcat-webui-frontend/package.json
index 273a6d1a..3d6f512f 100644
--- a/packages/napcat-webui-frontend/package.json
+++ b/packages/napcat-webui-frontend/package.json
@@ -59,7 +59,6 @@
     "axios": "^1.7.9",
     "clsx": "^2.1.1",
     "crypto-js": "^4.2.0",
-    "echarts": "^5.5.1",
     "event-source-polyfill": "^1.0.31",
     "framer-motion": "^12.0.6",
     "monaco-editor": "^0.52.2",
@@ -124,4 +123,4 @@
       "react-dom": "$react-dom"
     }
   }
-}
+}
\ No newline at end of file
diff --git a/packages/napcat-webui-frontend/src/components/hitokoto.tsx b/packages/napcat-webui-frontend/src/components/hitokoto.tsx
index d4e2d080..9cd1742d 100644
--- a/packages/napcat-webui-frontend/src/components/hitokoto.tsx
+++ b/packages/napcat-webui-frontend/src/components/hitokoto.tsx
@@ -19,7 +19,6 @@ export default function Hitokoto () {
     loading,
     run,
   } = useRequest(() => request.get<IHitokoto>('https://hitokoto.152710.xyz/'), {
-    pollingInterval: 10000,
     throttleWait: 1000,
   });
   const backupData = {
diff --git a/packages/napcat-webui-frontend/src/components/page_background.tsx b/packages/napcat-webui-frontend/src/components/page_background.tsx
index a6b03417..f1106ddc 100644
--- a/packages/napcat-webui-frontend/src/components/page_background.tsx
+++ b/packages/napcat-webui-frontend/src/components/page_background.tsx
@@ -1,34 +1,15 @@
-import { motion } from 'motion/react';
 
 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风格 */}
-      <motion.div
-        animate={{
-          scale: [1, 1.2, 1],
-          rotate: [0, 90, 0],
-          opacity: [0.3, 0.5, 0.3]
-        }}
-        transition={{ duration: 15, repeat: Infinity, ease: "easeInOut" }}
+      {/* 静态光斑 - ACG风格 */}
+      <div
         className='absolute top-[-10%] left-[-10%] w-[500px] h-[500px] rounded-full bg-primary-200/40 blur-[100px]'
       />
-      <motion.div
-        animate={{
-          scale: [1, 1.3, 1],
-          x: [0, 100, 0],
-          opacity: [0.3, 0.6, 0.3]
-        }}
-        transition={{ duration: 18, repeat: Infinity, ease: "easeInOut", delay: 2 }}
+      <div
         className='absolute top-[20%] right-[-10%] w-[400px] h-[400px] rounded-full bg-secondary-200/40 blur-[90px]'
       />
-      <motion.div
-        animate={{
-          scale: [1, 1.1, 1],
-          y: [0, -50, 0],
-          opacity: [0.2, 0.4, 0.2]
-        }}
-        transition={{ duration: 12, repeat: Infinity, ease: "easeInOut", delay: 5 }}
+      <div
         className='absolute bottom-[-10%] left-[20%] w-[600px] h-[600px] rounded-full bg-pink-200/30 blur-[110px]'
       />
     </div>
diff --git a/packages/napcat-webui-frontend/src/components/system_info.tsx b/packages/napcat-webui-frontend/src/components/system_info.tsx
index 0d408f74..cd638ff7 100644
--- a/packages/napcat-webui-frontend/src/components/system_info.tsx
+++ b/packages/napcat-webui-frontend/src/components/system_info.tsx
@@ -293,7 +293,11 @@ const UpdateDialogContent: React.FC<{
 const NewVersionTip = (props: NewVersionTipProps) => {
   const { currentVersion } = props;
   const dialog = useDialog();
-  const { data: latestVersion, error } = useRequest(WebUIManager.getLatestTag);
+  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');
 
   if (error || !latestVersion || !currentVersion || latestVersion === currentVersion) {
@@ -362,9 +366,7 @@ const NewVersionTip = (props: NewVersionTipProps) => {
       <Button
         isIconOnly
         radius='full'
-        color='primary'
-        variant='shadow'
-        className='!w-5 !h-5 !min-w-0 text-small shadow-md'
+        className='!w-5 !h-5 !min-w-0 text-[10px] shadow-lg shadow-pink-500/40 bg-gradient-to-tr from-[#D33FF0] to-[#FF709F] text-white'
         isLoading={updateStatus === 'updating'}
         onPress={showUpdateDialog}
       >
@@ -383,7 +385,11 @@ const NapCatVersion: React.FC<NapCatVersionProps> = ({ hasBackground = false })
     data: packageData,
     loading: packageLoading,
     error: packageError,
-  } = useRequest(WebUIManager.GetNapCatVersion);
+  } = useRequest(WebUIManager.GetNapCatVersion, {
+    cacheKey: 'napcat-version',
+    staleTime: 60 * 60 * 1000,
+    cacheTime: 24 * 60 * 60 * 1000,
+  });
 
   const currentVersion = packageData?.version;
 
@@ -419,7 +425,11 @@ const SystemInfo: React.FC<SystemInfoProps> = (props) => {
     data: qqVersionData,
     loading: qqVersionLoading,
     error: qqVersionError,
-  } = useRequest(WebUIManager.getQQVersion);
+  } = useRequest(WebUIManager.getQQVersion, {
+    cacheKey: 'qq-version',
+    staleTime: 60 * 60 * 1000,
+    cacheTime: 24 * 60 * 60 * 1000,
+  });
   const [backgroundImage] = useLocalStorage<string>(key.backgroundImage, '');
   const hasBackground = !!backgroundImage;
 
diff --git a/packages/napcat-webui-frontend/src/components/usage_pie.tsx b/packages/napcat-webui-frontend/src/components/usage_pie.tsx
index d8288c40..97b71c0a 100644
--- a/packages/napcat-webui-frontend/src/components/usage_pie.tsx
+++ b/packages/napcat-webui-frontend/src/components/usage_pie.tsx
@@ -1,143 +1,109 @@
-import * as echarts from 'echarts';
-import React, { useEffect, useRef } from 'react';
+import React, { useMemo } from 'react';
 
 import { useTheme } from '@/hooks/use-theme';
 
 interface UsagePieProps {
-  systemUsage: number
-  processUsage: number
-  title?: string
+  systemUsage: number;
+  processUsage: number;
+  title?: string;
 }
 
-const defaultOption: echarts.EChartsOption = {
-  tooltip: {
-    trigger: 'item',
-    formatter: '<center>{b}<br/><b>{d}%</b></center>',
-    borderRadius: 10,
-    extraCssText: 'backdrop-filter: blur(10px);',
-  },
-  series: [
-    {
-      name: '系统占用',
-      type: 'pie',
-      radius: ['70%', '90%'],
-      avoidLabelOverlap: false,
-      label: {
-        show: true,
-        position: 'center',
-        formatter: '系统占用',
-        fontSize: 14,
-      },
-      itemStyle: {
-        borderWidth: 1,
-        borderRadius: 10,
-      },
-      labelLine: {
-        show: false,
-      },
-      data: [
-        {
-          value: 100,
-          name: '系统总量',
-        },
-      ],
-    },
-  ],
-};
-
 const UsagePie: React.FC<UsagePieProps> = ({
   systemUsage,
   processUsage,
   title,
 }) => {
-  const chartRef = useRef<HTMLDivElement>(null);
-  const chartInstance = useRef<echarts.ECharts | null>(null);
   const { theme } = useTheme();
 
-  useEffect(() => {
-    if (chartRef.current) {
-      chartInstance.current = echarts.init(chartRef.current);
-      const option = defaultOption;
-      chartInstance.current.setOption(option);
-      const observer = new ResizeObserver(() => {
-        chartInstance.current?.resize();
-      });
-      observer.observe(chartRef.current);
-      return () => {
-        chartInstance.current?.dispose();
-        observer.disconnect();
-      };
-    }
-  }, []);
+  // Ensure values are clean
+  const cleanSystem = Math.min(Math.max(systemUsage || 0, 0), 100);
+  const cleanProcess = Math.min(Math.max(processUsage || 0, 0), cleanSystem);
 
-  useEffect(() => {
-    if (chartInstance.current) {
-      chartInstance.current.setOption({
-        series: [
-          {
-            label: {
-              formatter: title,
-            },
-          },
-        ],
-      });
-    }
-  }, [title]);
+  // SVG Config
+  const size = 100;
+  const strokeWidth = 10;
+  const radius = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const center = size / 2;
 
-  useEffect(() => {
-    if (chartInstance.current) {
-      chartInstance.current.setOption({
-        darkMode: theme === 'dark',
-        tooltip: {
-          backgroundColor:
-            theme === 'dark'
-              ? 'rgba(0, 0, 0, 0.8)'
-              : 'rgba(255, 255, 255, 0.8)',
-          textStyle: {
-            color: theme === 'dark' ? '#fff' : '#333',
-          },
-        },
-        color:
-          theme === 'dark'
-            ? ['#D33FF0', '#EF8664', '#E25180']
-            : ['#D33FF0', '#EA7D9B', '#FFC107'],
-        series: [
-          {
-            itemStyle: {
-              borderColor: theme === 'dark' ? '#333' : '#F0A9A7',
-            },
-          },
-        ],
-      });
-    }
-  }, [theme]);
+  // Colors
+  const colors = {
+    qq: '#D33FF0',
+    other: theme === 'dark' ? '#EF8664' : '#EA7D9B',
+    track: theme === 'dark' ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.05)',
+  };
 
-  useEffect(() => {
-    if (chartInstance.current) {
-      chartInstance.current.setOption({
-        series: [
-          {
-            data: [
-              {
-                value: processUsage,
-                name: 'QQ占用',
-              },
-              {
-                value: systemUsage - processUsage,
-                name: '其他进程占用',
-              },
-              {
-                value: 100 - systemUsage,
-                name: '剩余系统总量',
-              },
-            ],
-          },
-        ],
-      });
-    }
-  }, [systemUsage, processUsage]);
+  // Dash Arrays
+  // 1. Total System Usage (QQ + Others)
+  const systemDash = useMemo(() => {
+    return `${(cleanSystem / 100) * circumference} ${circumference}`;
+  }, [cleanSystem, circumference]);
 
-  return <div ref={chartRef} className='w-36 h-36 flex-shrink-0' />;
+  // 2. QQ Usage (Subset of System)
+  const processDash = useMemo(() => {
+    return `${(cleanProcess / 100) * circumference} ${circumference}`;
+  }, [cleanProcess, circumference]);
+
+  return (
+    <div className="relative w-36 h-36 flex items-center justify-center">
+      <svg
+        className="w-full h-full -rotate-90"
+        viewBox={`0 0 ${size} ${size}`}
+      >
+        {/* Track / Free Space */}
+        <circle
+          cx={center}
+          cy={center}
+          r={radius}
+          fill="none"
+          stroke={colors.track}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+        />
+
+        {/* System Usage (Background for QQ) - effectively "Others" + "QQ" */}
+        <circle
+          cx={center}
+          cy={center}
+          r={radius}
+          fill="none"
+          stroke={colors.other}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeDasharray={systemDash}
+          className="transition-all duration-700 ease-out"
+        />
+
+        {/* QQ Usage - Layered on top */}
+        <circle
+          cx={center}
+          cy={center}
+          r={radius}
+          fill="none"
+          stroke={colors.qq}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeDasharray={processDash}
+          className="transition-all duration-700 ease-out"
+        />
+      </svg>
+
+      {/* Center Content */}
+      <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none select-none">
+        {title && (
+          <span className="text-[10px] text-default-500 font-medium mb-0.5 opacity-80 uppercase tracking-widest scale-90">
+            {title}
+          </span>
+        )}
+        <div className="flex items-baseline gap-0.5">
+          <span className="text-2xl font-bold font-mono tracking-tight text-default-900 dark:text-gray-100">
+            {Math.round(cleanSystem)}
+          </span>
+          <span className="text-xs text-default-400 font-bold">%</span>
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export default UsagePie;
diff --git a/packages/napcat-webui-frontend/src/pages/dashboard/index.tsx b/packages/napcat-webui-frontend/src/pages/dashboard/index.tsx
index a95ae617..0a198780 100644
--- a/packages/napcat-webui-frontend/src/pages/dashboard/index.tsx
+++ b/packages/napcat-webui-frontend/src/pages/dashboard/index.tsx
@@ -2,7 +2,7 @@ import { Card, CardBody } from '@heroui/card';
 import { useLocalStorage } from '@uidotdev/usehooks';
 import { useRequest } from 'ahooks';
 import clsx from 'clsx';
-import { useCallback, useEffect, useState, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import key from '@/const/key';
 
 import toast from 'react-hot-toast';
@@ -65,7 +65,7 @@ export interface SystemStatusCardProps {
   setArchInfo: (arch: string | undefined) => void;
 }
 const SystemStatusCard: React.FC<SystemStatusCardProps> = ({ setArchInfo }) => {
-  const [systemStatus, setSystemStatus] = useState<SystemStatus>();
+  const [systemStatus, setSystemStatus] = useLocalStorage<SystemStatus | undefined>('napcat_system_status_cache', undefined);
   const isSetted = useRef(false);
   const getStatus = useCallback(() => {
     try {
@@ -94,7 +94,7 @@ const SystemStatusCard: React.FC<SystemStatusCardProps> = ({ setArchInfo }) => {
 };
 
 const DashboardIndexPage: React.FC = () => {
-  const [archInfo, setArchInfo] = useState<string>();
+  const [archInfo, setArchInfo] = useLocalStorage<string | undefined>('napcat_arch_info_cache', undefined);
   // @ts-ignore
   const [backgroundImage] = useLocalStorage<string>(key.backgroundImage, '');
   const hasBackground = !!backgroundImage;