fix: do not init meta data when switch tab

src/components/icon-font/index.tsx

@@ -2,7 +2,7 @@ import { createFromIconfontCN } from '@ant-design/icons';
 // import './iconfont/iconfont.js';
 
 const IconFont = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/c/font_4613488_pr3u3llgke.js'
+  scriptUrl: '//at.alicdn.com/t/c/font_4613488_y6wf3nguxjl.js'
 });
 
 export default IconFont;

src/components/image-editor/index.tsx

@@ -78,8 +78,8 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
   const mouseDownState = useRef<boolean>(false);
 
   const disabled = useMemo(() => {
-    return isDisabled || invertMask;
-  }, [isDisabled, invertMask]);
+    return isDisabled || invertMask || !!maskUpload?.length;
+  }, [isDisabled, invertMask, maskUpload]);
 
   const getTransformedPoint = useCallback(
     (offsetX: number, offsetY: number) => {
@@ -465,6 +465,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
     clearOverlayCanvas();
     setStrokes([]);
     currentStroke.current = [];
+    saveImage();
     console.log('Resetting strokes', currentStroke.current);
   }, []);
 
@@ -577,8 +578,9 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
           1
         );
 
-        canvas!.width = img.width * baseScale.current;
-        canvas!.height = img.height * baseScale.current;
+        // if need to fit the image to the container, show * baseScale.current
+        canvas!.width = img.width;
+        canvas!.height = img.height;
 
         // fit the image to the container
         autoScale.current = autoScale.current || 1;
@@ -721,6 +723,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
   };
 
   const handleOnWheel = (event: any) => {
+    // stop
     handleZoom(event);
     updateCursorSize();
     updateCursorPosOnZoom(event);
@@ -874,7 +877,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
                   <Checkbox
                     onChange={handleOnChangeMask}
                     className="flex-center"
-                    value={negativeMaskRef.current}
+                    value={invertMask}
                   >
                     <span className="font-size-12">
                       {intl.formatMessage({

src/components/progress-bar/index.tsx

@@ -7,8 +7,17 @@ const RenderProgress = memo(
     steps?: number;
     download?: boolean;
     label?: React.ReactNode;
+    successPercent?: number;
+    successColor?: string;
   }) => {
-    const { percent, steps = 5, download, label } = props;
+    const {
+      percent,
+      steps = 5,
+      download,
+      label,
+      successPercent,
+      successColor
+    } = props;
 
     const strokeColor = useMemo(() => {
       if (download) {
@@ -24,47 +33,38 @@ const RenderProgress = memo(
       return 'var(--ant-color-error)';
     }, [percent]);
 
+    const renderProgress = useMemo(() => {
+      return (
+        <Progress
+          percentPosition={{ align: 'center', type: 'inner' }}
+          size={[undefined, 16]}
+          format={() => {
+            return (
+              <span
+                style={{
+                  color: '#fff'
+                }}
+              >
+                {percent}%
+              </span>
+            );
+          }}
+          percent={percent}
+          success={{
+            percent: successPercent,
+            strokeColor: 'var(--ant-geekblue-3)'
+          }}
+          strokeColor={strokeColor}
+        ></Progress>
+      );
+    }, [percent, successPercent, strokeColor]);
+
     return (
       <>
         {label ? (
-          <Tooltip title={label}>
-            <Progress
-              percentPosition={{ align: 'center', type: 'inner' }}
-              size={[undefined, 16]}
-              format={() => {
-                return (
-                  <span
-                    style={{
-                      color: '#fff'
-                    }}
-                  >
-                    {percent}%
-                  </span>
-                );
-              }}
-              percent={percent}
-              strokeColor={strokeColor}
-            ></Progress>
-          </Tooltip>
+          <Tooltip title={label}>{renderProgress}</Tooltip>
         ) : (
-          <Progress
-            type="line"
-            percentPosition={{ align: 'center', type: 'inner' }}
-            size={[undefined, 16]}
-            format={() => {
-              return (
-                <span
-                  style={{
-                    color: '#fff'
-                  }}
-                >
-                  {percent}%
-                </span>
-              );
-            }}
-            percent={percent}
-            strokeColor={strokeColor}
-          ></Progress>
+          renderProgress
         )}
       </>
     );

src/components/seal-table/components/header-prefix.tsx

@@ -1,4 +1,5 @@
-import { DownOutlined, RightOutlined } from '@ant-design/icons';
+import IconFont from '@/components/icon-font';
+import { RightOutlined } from '@ant-design/icons';
 import { Button, Checkbox } from 'antd';
 import _ from 'lodash';
 import React from 'react';
@@ -39,7 +40,17 @@ const HeaderPrefix: React.FC<HeaderPrefixProps> = (props) => {
         <span style={{ marginRight: 5 }}>
           {_.isBoolean(expandable) ? (
             <Button type="text" size="small" onClick={handleToggleExpand}>
-              {expandAll ? <DownOutlined /> : <RightOutlined />}
+              {expandAll ? (
+                <IconFont
+                  type="icon-collapse_all"
+                  className="font-size-16"
+                ></IconFont>
+              ) : (
+                <IconFont
+                  type="icon-uncollapse_all"
+                  className="font-size-16"
+                ></IconFont>
+              )}
             </Button>
           ) : (
             expandable

src/components/seal-table/index.tsx

@@ -53,6 +53,9 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
   }, [columns, children]);
 
   const expandAll = useMemo(() => {
+    if (expandedRowKeys?.length === 0) {
+      return false;
+    }
     const allKeys = new Set(expandedRowKeys);
     const currentDataKeys = props.dataSource.map((record) => record[rowKey]);
     return currentDataKeys.every((key) => allKeys.has(key));