feat(web): 🎨 Unified color theme, AntV light/dark theme switching, Antd first-screen style loading. (#1020)

Co-authored-by: 黄振洪 <hzh01509324@alibaba-inc.com>
Co-authored-by: Aralhi <xiaoping0501@gmail.com>

web/components/chart/bar-chart.tsx

@@ -1,36 +1,34 @@
+import { ChatContext } from '@/app/chat-context';
 import { ChartData } from '@/types/chat';
 import { Chart } from '@berryv/g2-react';
-import { Card, CardContent, Typography } from '@mui/joy';
+import { useContext } from 'react';
 
 export default function BarChart({ chart }: { key: string; chart: ChartData }) {
+  const { mode } = useContext(ChatContext);
+
   return (
-    <div className="flex-1 min-w-0">
-      <Card className="h-full" sx={{ background: 'transparent' }}>
-        <CardContent className="h-full">
-          <Typography gutterBottom component="div">
-            {chart.chart_name}
-          </Typography>
-          <Typography gutterBottom level="body3">
-            {chart.chart_desc}
-          </Typography>
-          <div className="h-[300px]">
-            <Chart
-              style={{ height: '100%' }}
-              options={{
-                autoFit: true,
-                type: 'interval',
-                data: chart.values,
-                encode: { x: 'name', y: 'value', color: 'type' },
-                axis: {
-                  x: {
-                    labelAutoRotate: false,
-                  },
+    <div className="flex-1 min-w-0 p-4 bg-white dark:bg-theme-dark-container rounded">
+      <div className="h-full">
+        <div className="mb-2">{chart.chart_name}</div>
+        <div className="opacity-80 text-sm mb-2">{chart.chart_desc}</div>
+        <div className="h-[300px]">
+          <Chart
+            style={{ height: '100%' }}
+            options={{
+              autoFit: true,
+              theme: mode,
+              type: 'interval',
+              data: chart.values,
+              encode: { x: 'name', y: 'value', color: 'type' },
+              axis: {
+                x: {
+                  labelAutoRotate: false,
                 },
-              }}
-            />
-          </div>
-        </CardContent>
-      </Card>
+              },
+            }}
+          />
+        </div>
+      </div>
     </div>
   );
 }