fix: 优化图表组件样式和渲染逻辑，提升用户交互体验

Author: chenshuai2144

src/MarkdownEditor/editor/components/ActionIconBox/style.ts

@@ -1,7 +1,6 @@
 import {
   ChatTokenType,
   GenerateStyle,
-  resetComponent,
   useEditorStyleRegister,
 } from '../../utils/useStyle';
 
@@ -14,7 +13,7 @@ const genStyle: GenerateStyle<ChatTokenType> = (
       minWidth: 14,
       minHeight: 14,
       maxHeight: 24,
-      lineHeight: '1.5',
+      lineHeight: 1,
       display: 'flex',
       cursor: 'pointer',
       padding: 4,
@@ -29,7 +28,6 @@ const genStyle: GenerateStyle<ChatTokenType> = (
         padding: 0,
       },
       '&:hover': {
-        color: token.colorPrimary,
         background: token.colorBgTextHover,
       },
       '&-standalone': {
@@ -94,6 +92,6 @@ export function useStyle(prefixCls: string, style: React.CSSProperties) {
       componentCls: `.${prefixCls}`,
     };
 
-    return [genStyle(proChatToken, style), resetComponent(proChatToken)];
+    return [genStyle(proChatToken, style)];
   });
 }

src/plugins/chart/ChartAttrToolBar/ChartAttrToolBarStyle.ts

@@ -22,9 +22,6 @@ const genStyle: GenerateStyle<ChatTokenType> = (token) => {
         padding: '4px',
         borderRadius: '12px',
         cursor: 'pointer',
-        '&:hover': {
-          backgroundColor: 'rgb(209 213 219 / 0.4)',
-        },
       },
     },
   };

src/plugins/chart/ChartMark/Column.tsx

@@ -41,7 +41,7 @@ export const Column: React.FC<ChartProps> = (props) => {
         tickCount: 5,
       })
       .style({
-        maxWidth: 10, // 圆角样式
+        maxWidth: 20, // 圆角样式
         radiusTopLeft: 4,
         fillOpacity: 0.85,
         radiusTopRight: 4,

src/plugins/chart/ChartMark/Pie.tsx

@@ -36,7 +36,10 @@ export const Pie: React.FC<ChartProps> = (props) => {
       });
 
     chartRef.current = chart;
-    chart.render();
+
+    setTimeout(() => {
+      chart.render();
+    }, 16);
 
     return () => {
       if (!chart) return;

src/plugins/chart/ChartRender.tsx

@@ -1,9 +1,14 @@
-import { DownOutlined, SettingOutlined } from '@ant-design/icons';
+import {
+  DownOutlined,
+  ReloadOutlined,
+  SettingOutlined,
+} from '@ant-design/icons';
 import { ProForm, ProFormSelect } from '@ant-design/pro-components';
 import { Chart } from '@antv/g2';
 import { ConfigProvider, Descriptions, Dropdown, Popover, Table } from 'antd';
 import { DescriptionsItemType } from 'antd/es/descriptions';
 import React, { useMemo, useRef, useState } from 'react';
+import { ActionIconBox } from '../../MarkdownEditor/editor/components';
 import { ChartAttrToolBar } from './ChartAttrToolBar';
 import { Area, Bar, Column, Line, Pie } from './ChartMark';
 
@@ -249,13 +254,12 @@ export const ChartRender: React.FC<{
           </ConfigProvider>
         }
       >
-        <span
-          style={{
-            padding: '4px 8px',
-          }}
+        <ActionIconBox
+          title="配置图表"
+          onClick={() => chartRef.current?.render()}
         >
           <SettingOutlined />
-        </span>
+        </ActionIconBox>
       </Popover>,
     ].filter((item) => !!item) as JSX.Element[];
 
@@ -435,6 +439,17 @@ export const ChartRender: React.FC<{
               style: { padding: 0 },
               icon: toolBar.at(2),
             },
+            {
+              style: { padding: 0 },
+              icon: (
+                <ActionIconBox
+                  title="重新渲染"
+                  onClick={() => chartRef.current?.render()}
+                >
+                  <ReloadOutlined />
+                </ActionIconBox>
+              ),
+            },
           ]}
         />
       </div>