From a6ad49dba09652e1773ecf2b130bfcd5a7dd5ed0 Mon Sep 17 00:00:00 2001
From: t0ng7u <dev@aiass.cc>
Date: Sun, 17 Aug 2025 10:49:09 +0800
Subject: [PATCH] =?UTF-8?q?Revert=20"=E2=9A=A1=EF=B8=8F=20perf:=20Defer=20?=
 =?UTF-8?q?Visactor=20chart=20libs=20to=20dashboard;=20minimize=20home=20b?=
 =?UTF-8?q?undle"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit b67a42e0a8643c9209601585d1d371ef7102bfb3.
---
 web/src/components/dashboard/ChartsPanel.jsx  | 46 ++++++++-----------
 web/src/components/dashboard/StatsCards.jsx   | 17 +++----
 .../personal/cards/AccountManagement.js       |  2 +-
 .../personal/cards/NotificationSettings.js    |  2 +-
 .../personal/components/UserInfoHeader.js     | 22 ++++++---
 web/src/hooks/dashboard/useDashboardCharts.js | 17 ++-----
 6 files changed, 46 insertions(+), 60 deletions(-)

diff --git a/web/src/components/dashboard/ChartsPanel.jsx b/web/src/components/dashboard/ChartsPanel.jsx
index 26a43b63..595e2e02 100644
--- a/web/src/components/dashboard/ChartsPanel.jsx
+++ b/web/src/components/dashboard/ChartsPanel.jsx
@@ -17,7 +17,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { Suspense } from 'react';
+import React from 'react';
 import { Card, Tabs, TabPane } from '@douyinfe/semi-ui';
 import { PieChart } from 'lucide-react';
 import {
@@ -25,9 +25,7 @@ import {
   IconPulse,
   IconPieChart2Stroked
 } from '@douyinfe/semi-icons';
-const LazyVChart = React.lazy(() =>
-  import('@visactor/react-vchart').then(m => ({ default: m.VChart }))
-);
+import { VChart } from '@visactor/react-vchart';
 
 const ChartsPanel = ({
   activeChartTab,
@@ -88,36 +86,28 @@ const ChartsPanel = ({
     >
       <div className="h-96 p-2">
         {activeChartTab === '1' && (
-          <Suspense fallback={null}>
-            <LazyVChart
-              spec={spec_line}
-              option={CHART_CONFIG}
-            />
-          </Suspense>
+          <VChart
+            spec={spec_line}
+            option={CHART_CONFIG}
+          />
         )}
         {activeChartTab === '2' && (
-          <Suspense fallback={null}>
-            <LazyVChart
-              spec={spec_model_line}
-              option={CHART_CONFIG}
-            />
-          </Suspense>
+          <VChart
+            spec={spec_model_line}
+            option={CHART_CONFIG}
+          />
         )}
         {activeChartTab === '3' && (
-          <Suspense fallback={null}>
-            <LazyVChart
-              spec={spec_pie}
-              option={CHART_CONFIG}
-            />
-          </Suspense>
+          <VChart
+            spec={spec_pie}
+            option={CHART_CONFIG}
+          />
         )}
         {activeChartTab === '4' && (
-          <Suspense fallback={null}>
-            <LazyVChart
-              spec={spec_rank_bar}
-              option={CHART_CONFIG}
-            />
-          </Suspense>
+          <VChart
+            spec={spec_rank_bar}
+            option={CHART_CONFIG}
+          />
         )}
       </div>
     </Card>
diff --git a/web/src/components/dashboard/StatsCards.jsx b/web/src/components/dashboard/StatsCards.jsx
index cfbcdea3..ae614eb5 100644
--- a/web/src/components/dashboard/StatsCards.jsx
+++ b/web/src/components/dashboard/StatsCards.jsx
@@ -17,12 +17,9 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { Suspense } from 'react';
+import React from 'react';
 import { Card, Avatar, Skeleton } from '@douyinfe/semi-ui';
-
-const LazyVChart = React.lazy(() =>
-  import('@visactor/react-vchart').then(m => ({ default: m.VChart }))
-);
+import { VChart } from '@visactor/react-vchart';
 
 const StatsCards = ({
   groupedStatsData,
@@ -77,12 +74,10 @@ const StatsCards = ({
                   </div>
                   {(loading || (item.trendData && item.trendData.length > 0)) && (
                     <div className="w-24 h-10">
-                      <Suspense fallback={null}>
-                        <LazyVChart
-                          spec={getTrendSpec(item.trendData, item.trendColor)}
-                          option={CHART_CONFIG}
-                        />
-                      </Suspense>
+                      <VChart
+                        spec={getTrendSpec(item.trendData, item.trendColor)}
+                        option={CHART_CONFIG}
+                      />
                     </div>
                   )}
                 </div>
diff --git a/web/src/components/settings/personal/cards/AccountManagement.js b/web/src/components/settings/personal/cards/AccountManagement.js
index 59f53cb8..b2c9017e 100644
--- a/web/src/components/settings/personal/cards/AccountManagement.js
+++ b/web/src/components/settings/personal/cards/AccountManagement.js
@@ -71,7 +71,7 @@ const AccountManagement = ({
         </div>
       </div>
 
-      <Tabs type="card" defaultActiveKey="binding">
+      <Tabs type="line" defaultActiveKey="binding">
         {/* 账户绑定 Tab */}
         <TabPane
           tab={
diff --git a/web/src/components/settings/personal/cards/NotificationSettings.js b/web/src/components/settings/personal/cards/NotificationSettings.js
index 1b1c692e..dfa37e1b 100644
--- a/web/src/components/settings/personal/cards/NotificationSettings.js
+++ b/web/src/components/settings/personal/cards/NotificationSettings.js
@@ -106,7 +106,7 @@ const NotificationSettings = ({
         onSubmit={handleSubmit}
       >
         {() => (
-          <Tabs type="card" defaultActiveKey="notification">
+          <Tabs type="line" defaultActiveKey="notification">
             {/* 通知配置 Tab */}
             <TabPane
               tab={
diff --git a/web/src/components/settings/personal/components/UserInfoHeader.js b/web/src/components/settings/personal/components/UserInfoHeader.js
index f128d7d1..d4f232f1 100644
--- a/web/src/components/settings/personal/components/UserInfoHeader.js
+++ b/web/src/components/settings/personal/components/UserInfoHeader.js
@@ -19,10 +19,12 @@ For commercial licensing, please contact support@quantumnous.com
 
 import React from 'react';
 import { Avatar, Card, Tag, Divider, Typography } from '@douyinfe/semi-ui';
-import { isRoot, isAdmin, renderQuota, stringToColor } from '../../../../helpers';
+import { isRoot, isAdmin, renderQuota } from '../../../../helpers';
+import { useTheme } from '../../../../context/Theme';
 import { Coins, BarChart2, Users } from 'lucide-react';
 
 const UserInfoHeader = ({ t, userState }) => {
+  const theme = useTheme();
 
   const getUsername = () => {
     if (userState.user) {
@@ -42,7 +44,16 @@ const UserInfoHeader = ({ t, userState }) => {
   };
 
   return (
-    <Card className="!rounded-2xl">
+    <Card
+      className="!rounded-2xl !border-0"
+      style={{
+        background: theme === 'dark'
+          ? 'linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%)'
+          : 'linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%)',
+        position: 'relative'
+      }}
+      bodyStyle={{ padding: 0 }}
+    >
       {/* 装饰性背景元素 */}
       <div className="absolute inset-0 overflow-hidden">
         <div className="absolute -top-10 -right-10 w-40 h-40 bg-slate-400 dark:bg-slate-500 opacity-5 rounded-full"></div>
@@ -50,13 +61,12 @@ const UserInfoHeader = ({ t, userState }) => {
         <div className="absolute top-1/2 right-1/4 w-24 h-24 bg-slate-400 dark:bg-slate-500 opacity-6 rounded-full"></div>
       </div>
 
-      <div className="relative text-gray-600 dark:text-gray-300">
+      <div className="relative p-4 sm:p-6 md:p-8 text-gray-600 dark:text-gray-300">
         <div className="flex justify-between items-start mb-4 sm:mb-6">
           <div className="flex items-center flex-1 min-w-0">
             <Avatar
               size='large'
-              className="mr-3 sm:mr-4 shadow-md flex-shrink-0"
-              color={stringToColor(getUsername())}
+              className="mr-3 sm:mr-4 shadow-md flex-shrink-0 bg-slate-500 dark:bg-slate-400"
             >
               {getAvatarText()}
             </Avatar>
@@ -103,7 +113,7 @@ const UserInfoHeader = ({ t, userState }) => {
 
           {/* 右上角统计信息（Semi UI 卡片） */}
           <div className="hidden sm:block flex-shrink-0 ml-2">
-            <Card size="small" className="!rounded-xl shadow-sm" bodyStyle={{ padding: '8px 12px' }}>
+            <Card size="small" className="!rounded-xl !border-0 shadow-sm" bodyStyle={{ padding: '8px 12px' }}>
               <div className="flex items-center gap-3 lg:gap-4">
                 <div className="flex items-center justify-end gap-2">
                   <Coins size={16} className="text-slate-600 dark:text-slate-300" />
diff --git a/web/src/hooks/dashboard/useDashboardCharts.js b/web/src/hooks/dashboard/useDashboardCharts.js
index ec99f3aa..a5ce0b19 100644
--- a/web/src/hooks/dashboard/useDashboardCharts.js
+++ b/web/src/hooks/dashboard/useDashboardCharts.js
@@ -18,6 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import { useState, useCallback, useEffect } from 'react';
+import { initVChartSemiTheme } from '@visactor/vchart-semi-theme';
 import {
   modelColorMap,
   renderNumber,
@@ -417,19 +418,9 @@ export const useDashboardCharts = (
 
   // ========== 初始化图表主题 ==========
   useEffect(() => {
-    // 动态加载 visactor 主题，避免首页首屏加载
-    let canceled = false;
-    (async () => {
-      try {
-        const mod = await import('@visactor/vchart-semi-theme');
-        if (!canceled && mod?.initVChartSemiTheme) {
-          mod.initVChartSemiTheme({ isWatchingThemeSwitch: true });
-        }
-      } catch (e) {
-        // 忽略加载失败，图表页再尝试
-      }
-    })();
-    return () => { canceled = true; };
+    initVChartSemiTheme({
+      isWatchingThemeSwitch: true,
+    });
   }, []);
 
   return {