style: area chart

src/components/charts/area.tsx

@@ -0,0 +1,79 @@
+import { Area } from '@ant-design/plots';
+import EmptyData from './empty-data';
+
+interface LineChartProps {
+  title?: string;
+  height?: number;
+  data: any[];
+  color?: string[];
+  xField?: string;
+  yField?: string;
+  locale?: string;
+  labelFormatter?: (v: any) => string;
+  slider?: any;
+}
+const LineChart: React.FC<LineChartProps> = (props) => {
+  const {
+    data,
+    title,
+    color,
+    xField,
+    locale,
+    yField,
+    slider,
+    height,
+    labelFormatter
+  } = props;
+  const config = {
+    title,
+    height,
+    xField: xField || 'time',
+    yField: yField || 'value',
+    autoFit: true,
+    slider,
+    shapeField: 'smooth',
+    axis: {
+      x: {
+        textStyle: {
+          autoRoate: true
+        }
+      },
+      y: {
+        tick: false,
+        // size: 14,
+        // title: '%',
+        titlePosition: 'top',
+        titleFontSize: 12,
+        labelFormatter
+      }
+    },
+    style: {
+      fill: 'rgba(84, 204, 152,0.8)'
+    },
+    legend: {
+      color: {
+        layout: { justifyContent: 'center' }
+      },
+
+      size: {
+        itemLabelFontSize: 14,
+        itemLabelFontWeight: 500
+      }
+    },
+    tooltip: {
+      title: 'time',
+      items: [{ channel: 'y' }]
+    }
+  };
+  return (
+    <>
+      {data.length === 0 ? (
+        <EmptyData height={height} title={title} />
+      ) : (
+        <Area data={data} {...config} />
+      )}
+    </>
+  );
+};
+
+export default LineChart;

src/components/charts/empty-data.tsx

@@ -2,8 +2,8 @@ import { Empty } from 'antd';
 import React from 'react';
 
 const EmptyData: React.FC<{
-  height: string | number;
-  title: React.ReactNode;
+  height?: string | number;
+  title?: React.ReactNode;
 }> = ({ height, title }) => {
   return (
     <div
@@ -13,12 +13,14 @@ const EmptyData: React.FC<{
       }}
       className="flex-center  flex-column "
     >
-      <h3
-        className="justify-center"
-        style={{ padding: '16px 0', marginBottom: 0 }}
-      >
-        {title}
-      </h3>
+      {title && (
+        <h3
+          className="justify-center"
+          style={{ padding: '16px 0', marginBottom: 0 }}
+        >
+          {title}
+        </h3>
+      )}
       <div
         className="flex-center justify-center flex-column"
         style={{ height: '100%' }}

src/components/charts/line-chart.tsx

@@ -1,4 +1,5 @@
 import { Line } from '@ant-design/plots';
+import EmptyData from './empty-data';
 
 interface LineChartProps {
   title?: string;
@@ -7,7 +8,7 @@ interface LineChartProps {
   color?: string[];
   xField?: string;
   yField?: string;
-  locale: string;
+  locale?: string;
   labelFormatter?: (v: any) => string;
   slider?: any;
 }
@@ -79,7 +80,11 @@ const LineChart: React.FC<LineChartProps> = (props) => {
   };
   return (
     <>
-      <Line data={data} {...config} />
+      {data.length === 0 ? (
+        <EmptyData height={height} title={title} />
+      ) : (
+        <Line data={data} {...config} />
+      )}
     </>
   );
 };

src/components/seal-form/input-number.tsx

@@ -39,6 +39,7 @@ const SealInputNumber: React.FC<InputNumberProps & SealFormItemProps> = (
   };
 
   const handleChange = (e: any) => {
+    e.target.value = e.target.value?.trim?.();
     props.onChange?.(e);
   };
 
@@ -48,6 +49,7 @@ const SealInputNumber: React.FC<InputNumberProps & SealFormItemProps> = (
   };
 
   const handleOnBlur = (e: any) => {
+    e.target.value = e.target.value?.trim?.();
     if (!inputRef.current?.value) {
       setIsFocus(false);
       props.onBlur?.(e);

src/components/seal-form/password.tsx

@@ -37,6 +37,7 @@ const SealPassword: React.FC<InputProps & SealFormItemProps> = (props) => {
   };
 
   const handleChange = (e: any) => {
+    e.target.value = e.target.value?.trim?.();
     props.onChange?.(e);
   };
 
@@ -46,6 +47,7 @@ const SealPassword: React.FC<InputProps & SealFormItemProps> = (props) => {
   };
 
   const handleOnBlur = (e: any) => {
+    e.target.value = e.target.value?.trim?.();
     if (!inputRef.current?.input?.value) {
       setIsFocus(false);
       props.onBlur?.(e);

src/components/seal-form/seal-input.tsx

@@ -42,6 +42,7 @@ const SealInput: React.FC<InputProps & SealFormItemProps> = (props) => {
   };
 
   const handleChange = (e: any) => {
+    e.target.value = e.target.value?.trim?.();
     props.onChange?.(e);
   };
 
@@ -51,6 +52,7 @@ const SealInput: React.FC<InputProps & SealFormItemProps> = (props) => {
   };
 
   const handleOnBlur = (e: any) => {
+    e.target.value = e.target.value?.trim?.();
     if (!inputRef.current?.input?.value) {
       setIsFocus(false);
       props.onBlur?.(e);

src/components/seal-table/components/row-children.tsx

@@ -3,6 +3,7 @@ import '../styles/row-children.less';
 
 const RowChildren = (props: any) => {
   const { children } = props;
+
   return <div className="row-children">{children}</div>;
 };
 

src/components/seal-table/components/table-row.tsx

@@ -33,6 +33,7 @@ const TableRow: React.FC<
   const [loading, setLoading] = useState(false);
   const pollTimer = useRef<any>(null);
   const chunkRequestRef = useRef<any>(null);
+  const childrenRendered = useRef<any>(null);
 
   const { updateChunkedList } = useUpdateChunkedList(childrenData, {
     setDataList: setChildrenData
@@ -58,6 +59,10 @@ const TableRow: React.FC<
     };
   }, []);
 
+  const renderChildrenData = () => {
+    return renderChildren?.(childrenData);
+  };
+
   const handlePolling = async () => {
     if (pollingChildren) {
       try {
@@ -110,12 +115,12 @@ const TableRow: React.FC<
     setExpanded(!expanded);
     onExpand?.(!expanded, record);
 
+    chunkRequestRef.current?.current?.cancel?.();
     if (pollTimer.current) {
       clearInterval(pollTimer.current);
     }
 
     if (expanded) {
-      chunkRequestRef.current?.current?.cancel?.();
       return;
     }
 
@@ -124,9 +129,6 @@ const TableRow: React.FC<
       pollTimer.current = setInterval(() => {
         handlePolling();
       }, 1000);
-    } else if (watchChildren) {
-      await handleLoadChildren();
-      createChunkRequest();
     } else {
       handleLoadChildren();
     }
@@ -146,6 +148,12 @@ const TableRow: React.FC<
     }
   };
 
+  useEffect(() => {
+    if (childrenData.length) {
+      createChunkRequest();
+    }
+  }, [childrenData]);
+
   const renderRowPrefix = () => {
     if (expandable && rowSelection) {
       return (
@@ -220,11 +228,7 @@ const TableRow: React.FC<
         {expanded && (
           <div className="expanded-row">
             <Spin spinning={loading}>
-              {childrenData.length ? (
-                renderChildren?.(childrenData)
-              ) : (
-                <Empty></Empty>
-              )}
+              {childrenData.length ? renderChildrenData() : <Empty></Empty>}
             </Spin>
           </div>
         )}

src/components/seal-table/index.tsx

@@ -118,7 +118,11 @@ const SealTable: React.FC<SealTableProps> = (props) => {
 
   const renderContent = () => {
     if (!props.dataSource.length) {
-      return <Empty></Empty>;
+      return (
+        <div className="empty-wrapper">
+          <Empty></Empty>
+        </div>
+      );
     }
     return (
       <div className="seal-table-content">

src/components/seal-table/styles/index.less

@@ -74,4 +74,11 @@
     margin-top: 20px;
     min-height: 100px;
   }
+
+  .empty-wrapper {
+    display: flex;
+    min-height: 160px;
+    justify-content: center;
+    align-items: center;
+  }
 }