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/autoChart/index.tsx

@@ -1,19 +1,21 @@
 import { Empty, Row, Col, Select, Tooltip } from 'antd';
 import { Advice, Advisor } from '@antv/ava';
 import { Chart } from '@berryv/g2-react';
-import { DownOutlined } from '@ant-design/icons';
 import i18n from '@/app/i18n';
 import { customizeAdvisor, getVisAdvices } from './advisor/pipeline';
-import { useEffect, useMemo, useState } from 'react';
+import { useContext, useEffect, useMemo, useState } from 'react';
 import { defaultAdvicesFilter } from './advisor/utils';
 import { AutoChartProps, ChartType, CustomAdvisorConfig, CustomChart, Specification } from './types';
 import { customCharts } from './charts';
+import { ChatContext } from '@/app/chat-context';
 
 const { Option } = Select;
 
 export const AutoChart = (props: AutoChartProps) => {
   const { data, chartType, scopeOfCharts, ruleConfig } = props;
 
+  const { mode } = useContext(ChatContext);
+
   const [advisor, setAdvisor] = useState<Advisor>();
   const [advices, setAdvices] = useState<Advice[]>([]);
   const [renderChartType, setRenderChartType] = useState<ChartType>();
@@ -54,7 +56,15 @@ export const AutoChart = (props: AutoChartProps) => {
       const chartTypeInput = renderChartType ?? advices[0].type;
       const spec: Specification = advices?.find((item: Advice) => item.type === chartTypeInput)?.spec ?? undefined;
       if (spec) {
-        return <Chart key={chartTypeInput} options={spec} />;
+        return (
+          <Chart
+            key={chartTypeInput}
+            options={{
+              ...spec,
+              theme: mode,
+            }}
+          />
+        );
       }
     }
   }, [advices, renderChartType]);
@@ -62,13 +72,13 @@ export const AutoChart = (props: AutoChartProps) => {
   if (renderChartType) {
     return (
       <div>
-        <Row justify="start">
+        <Row justify="start" className="mb-2">
           <Col>{i18n.t('Advices')}</Col>
           <Col style={{ marginLeft: 24 }}>
             <Select
+              className="w-52"
               value={renderChartType}
               placeholder={'Chart Switcher'}
-              style={{ width: '180px' }}
               onChange={(value) => setRenderChartType(value)}
               size={'small'}
             >
@@ -78,10 +88,7 @@ export const AutoChart = (props: AutoChartProps) => {
                 return (
                   <Option key={item.type} value={item.type}>
                     <Tooltip title={name} placement={'right'}>
-                      <div style={{ display: 'flex', alignItems: 'center' }}>
-                        <DownOutlined />
-                        <div style={{ marginLeft: '2px' }}>{name}</div>
-                      </div>
+                      <div>{name}</div>
                     </Tooltip>
                   </Option>
                 );