refactor: update scroll modal

src/components/alert-info/index.tsx

@@ -28,6 +28,8 @@ const AlertInfo: React.FC<AlertInfoProps> = (props) => {
                 }
           }
           style={{
+            fontWeight: 400,
+            whiteSpace: 'pre-line',
             textAlign: 'center',
             padding: '2px 5px',
             borderRadius: 'var(--border-radius-base)',

src/components/echarts/config.ts

@@ -151,7 +151,7 @@ export default function useChartConfig() {
     progress: {
       show: true,
       roundCap: false,
-      width: 12
+      width: 10
     },
     pointer: {
       length: '80%',
@@ -163,7 +163,7 @@ export default function useChartConfig() {
     axisLine: {
       roundCap: false,
       lineStyle: {
-        width: 12,
+        width: 10,
         color: [
           [0.5, 'rgba(84, 204, 152, 80%)'],
           [0.8, 'rgba(250, 173, 20, 80%)'],

src/components/echarts/gauge.tsx

@@ -22,13 +22,18 @@ const GaugeChart: React.FC<Omit<ChartProps, 'seriesData' | 'xAxisData'>> = (
     title: titleConfig,
     chartColorMap
   } = useChartConfig();
-  const { value, height, width, labelFormatter, title, color } = props;
+  const { value, height, width, labelFormatter, title, color, gaugeConfig } =
+    props;
   if (!value && value !== 0) {
     return <EmptyData height={height} title={title}></EmptyData>;
   }
 
   const setDataOptions = () => {
     const colorValue = color || strokeColorFunc(value);
+    const combineGaugeConfig = {
+      ...gaugeItemConfig,
+      ...gaugeConfig
+    };
     return {
       title: {
         ...titleConfig,
@@ -38,11 +43,11 @@ const GaugeChart: React.FC<Omit<ChartProps, 'seriesData' | 'xAxisData'>> = (
       },
       series: [
         {
-          ...gaugeItemConfig,
+          ...combineGaugeConfig,
           axisLine: {
-            ...gaugeItemConfig.axisLine,
+            ...combineGaugeConfig.axisLine,
             lineStyle: {
-              ...gaugeItemConfig.axisLine.lineStyle,
+              ...combineGaugeConfig.axisLine.lineStyle,
               color: [
                 [value / 100, colorValue],
                 [1, chartColorMap.gaugeBgColor]

src/components/echarts/types.ts

@@ -13,6 +13,12 @@ export interface ChartProps {
   smooth?: boolean;
   color?: string;
   yAxisName?: string;
+  gaugeConfig?: {
+    radius?: string;
+    center?: string[];
+    startAngle?: number;
+    endAngle?: number;
+  };
 }
 
 export interface AreaChartItemProps {

src/components/scroller-modal/index.tsx

@@ -1,8 +1,9 @@
+import OverlayScroller from '@/components/overlay-scroller';
 import useBodyScroll from '@/hooks/use-body-scroll';
 import { Modal, type ModalProps } from 'antd';
 import React from 'react';
 
-const ScrollerModal = (props: ModalProps) => {
+const ScrollerModal = (props: ModalProps & { maxContentHeight?: number }) => {
   const { saveScrollHeight, restoreScrollHeight } = useBodyScroll();
 
   React.useEffect(() => {
@@ -13,7 +14,34 @@ const ScrollerModal = (props: ModalProps) => {
     }
   }, [props.open]);
 
-  return <Modal {...props} />;
+  return (
+    <Modal
+      {...props}
+      styles={{
+        content: {
+          padding: 0
+        },
+        header: {
+          padding: 'var(--ant-modal-content-padding)',
+          paddingBottom: '0'
+        },
+        body: {
+          padding: '0'
+        },
+        footer: {
+          padding: '12px 24px 24px',
+          margin: '0'
+        }
+      }}
+    >
+      <OverlayScroller
+        style={{ paddingInline: 24, paddingBlockEnd: props.footer ? 0 : 32 }}
+        maxHeight={props.maxContentHeight || 500}
+      >
+        {props.children}
+      </OverlayScroller>
+    </Modal>
+  );
 };
 
 export default ScrollerModal;