Browse Source

fix: fix collapsible keepDOM

代强 1 year ago
parent
commit
51cb12fea7

+ 14 - 13
content/show/collapse/index-en-US.md

@@ -172,19 +172,20 @@ import { IconCopy } from '@douyinfe/semi-icons';
 ### Collapse
 ### Collapse
 
 
 | Properties | Instructions | type | Default | version |
 | Properties | Instructions | type | Default | version |
-| --- | --- | --- | --- | --- |
-| accordion | Accordion mode | boolean | `false` | - |
-| activeKey | Controlled property, key of the currently expanded panel | string \| string[] | - | - |
-| className | className of Collapse | string | '' | - |
-| clickHeaderToExpand | Click Header to expand and collapse, otherwise only respond to click arrow | boolean | true | 2.32.0 |
-| collapseIcon | Custom collapsing icons | ReactNode | `<IconChevronDown />` | - |
-| defaultActiveKey | Key of the expanded panel when initialized | string \| string[] | - | - |
-| expandIcon | Custom expanding icon | ReactNode | `<IconChevronUp />` | - |
-| keepDOM | Whether to keep the hidden panel in DOM tree, destroyed by default | boolean | `false` | 0.25.0 |
-| motion | Toggle whether to have animation | boolean | `true` | 1.4.0 |
-| expandIconPosition | Expand icon position | `left`, `right` | `right` | 1.12.0 |
-| style | Inline CSS style | CSSProperties | {} | - |
-| onChange | Callback function when switching panel | function(activeKey: string \| string[], e: event) | - | - |
+| --- | --- | --- | --- |---------|
+| accordion | Accordion mode | boolean | `false` | -       |
+| activeKey | Controlled property, key of the currently expanded panel | string \| string[] | - | -       |
+| className | className of Collapse | string | '' | -       |
+| clickHeaderToExpand | Click Header to expand and collapse, otherwise only respond to click arrow | boolean | true | 2.32.0  |
+| collapseIcon | Custom collapsing icons | ReactNode | `<IconChevronDown />` | -       |
+| defaultActiveKey | Key of the expanded panel when initialized | string \| string[] | - | -       |
+| expandIcon | Custom expanding icon | ReactNode | `<IconChevronUp />` | -       |
+| keepDOM | Whether to keep the hidden panel in DOM tree, destroyed by default | boolean | `false` | 0.25.0  |
+| motion | Toggle whether to have animation | boolean | `true` | 1.4.0   |
+| expandIconPosition | Expand icon position | `left`, `right` | `right` | 1.12.0  |
+| lazyRender | Used with keepDOM, when true, the component will not be rendered when mounting                                         | boolean | `false` | 2.25.1  |
+| style | Inline CSS style | CSSProperties | {} | -       |
+| onChange | Callback function when switching panel | function(activeKey: string \| string[], e: event) | - | -       |
 
 
 ### Collapse.Panel
 ### Collapse.Panel
 | Properties | Instructions                                                                                                            | type | Default | version       |
 | Properties | Instructions                                                                                                            | type | Default | version       |

+ 12 - 11
content/show/collapse/index.md

@@ -170,20 +170,21 @@ import { IconCopy } from '@douyinfe/semi-icons';
 
 
 ### Collapse
 ### Collapse
 
 
-| 属性 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| accordion | 手风琴模式 | boolean | `false` | - |
-| activeKey | 受控属性, 当前展开的面板的 key | string \| string[] | 无 | - |
-| className | 样式类名 | string | '' | - |
+| 属性 | 说明 | 类型 | 默认值 | 版本     |
+| --- | --- | --- | --- |--------|
+| accordion | 手风琴模式 | boolean | `false` | -      |
+| activeKey | 受控属性, 当前展开的面板的 key | string \| string[] | 无 | -      |
+| className | 样式类名 | string | '' | -      |
 | clickHeaderToExpand | 点击 Header 展开收起,否则只响应点击箭头 | boolean | true | 2.32.0 |
 | clickHeaderToExpand | 点击 Header 展开收起,否则只响应点击箭头 | boolean | true | 2.32.0 |
-| collapseIcon | 自定义折叠图标 | ReactNode | `<IconChevronDown />` | - |
-| defaultActiveKey | 初始化选中面板的 key | string \| string[] | 无 | - |
-| expandIcon | 自定义展开图标 | ReactNode | `<IconChevronUp />` | - |
+| collapseIcon | 自定义折叠图标 | ReactNode | `<IconChevronDown />` | -      |
+| defaultActiveKey | 初始化选中面板的 key | string \| string[] | 无 | -      |
+| expandIcon | 自定义展开图标 | ReactNode | `<IconChevronUp />` | -      |
 | expandIconPosition | 展开图标位置 | `left`, `right` | `right` | 1.12.0 |
 | expandIconPosition | 展开图标位置 | `left`, `right` | `right` | 1.12.0 |
 | keepDOM | 是否保留隐藏的面板 DOM 树,默认销毁 | bool | `false` | 0.25.0 |
 | keepDOM | 是否保留隐藏的面板 DOM 树,默认销毁 | bool | `false` | 0.25.0 |
-| motion | 是否开启动画 | boolean | `true` | 1.4.0 |
-| style | 内联 CSS 样式 | CSSProperties | {} | - |
-| onChange | 切换面板的回调 | function(activeKey: string \| string[], e: event) | 无 | - |
+| motion | 是否开启动画 | boolean | `true` | 1.4.0  |
+| lazyRender | 配合 keepDOM 使用,为 true 时挂载时不会渲染组件 | boolean | `false` | 2.25.1 |
+| style | 内联 CSS 样式 | CSSProperties | {} | -      |
+| onChange | 切换面板的回调 | function(activeKey: string \| string[], e: event) | 无 | -      |
 
 
 ### Collapse.Panel
 ### Collapse.Panel
 
 

+ 10 - 10
content/show/collapsible/index-en-US.md

@@ -178,18 +178,18 @@ import { Collapsible, Button } from '@douyinfe/semi-ui';
 ## API reference
 ## API reference
 
 
 | Properties | Instructions                                                                                               | type | Default | version |
 | Properties | Instructions                                                                                               | type | Default | version |
-| --- |------------------------------------------------------------------------------------------------------------| --- | --- | --- |
-| className | Class name                                                                                                 | string | - | 0.34.0 |
-| collapseHeight | Collapse height                                                                                            | number | 0 | 1.0.0 |
-| duration | Time of animation execution                                                                                | number | 250 | - |
+| --- |------------------------------------------------------------------------------------------------------------| --- |---------| --- |
+| className | Class name                                                                                                 | string | -       | 0.34.0 |
+| collapseHeight | Collapse height                                                                                            | number | 0       | 1.0.0 |
+| duration | Time of animation execution                                                                                | number | 250     | - |
 | isOpen | Toggle whether to expand the content area                                                                  | boolean | `false` | - |
 | isOpen | Toggle whether to expand the content area                                                                  | boolean | `false` | - |
 | keepDOM | Whether to keep the hidden panel in DOM tree, destroyed by default                                         | boolean | `false` | 0.25.0 |
 | keepDOM | Whether to keep the hidden panel in DOM tree, destroyed by default                                         | boolean | `false` | 0.25.0 |
-| lazyRender | Used with keepDOM, when true, the component will not be rendered when mounting                                         | boolean | `true` | 2.24 |
-| motion | Toggle whether to turn on animation                                                                        | Motion | `true` | - |
-| onMotionEnd | Animation end callback                                                                                     | () => void | - | - |
-| reCalcKey | When reCalcKey changes, the height of children will be reset. Used for optimize dynamic content rendering. | number \| string | - | 1.5.0 |
-| style | Style object                                                                                               | CSSProperties | - | 0.34.0 |
-| aria-controls | [aria-controls](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)  | string |-| 2.3.0|
+| lazyRender | Used with keepDOM, when true, the component will not be rendered when mounting                                         | boolean | `false` | 2.24 |
+| motion | Toggle whether to turn on animation                                                                        | Motion | `true`  | - |
+| onMotionEnd | Animation end callback                                                                                     | () => void | -       | - |
+| reCalcKey | When reCalcKey changes, the height of children will be reset. Used for optimize dynamic content rendering. | number \| string | -       | 1.5.0 |
+| style | Style object                                                                                               | CSSProperties | -       | 0.34.0 |
+| aria-controls | [aria-controls](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)  | string | -       | 2.3.0|
 
 
 ## Accessibility
 ## Accessibility
 
 

+ 12 - 12
content/show/collapsible/index.md

@@ -208,20 +208,20 @@ import { Collapsible, Button } from '@douyinfe/semi-ui';
 
 
 ## API 参考
 ## API 参考
 
 
-| 属性 | 说明 | 类型 | 默认值 | 版本 |
-| -- | --- | --- | --- | --- |
-| className | 类名 | string | - | 0.34.0 |
-| collapseHeight | 折叠高度 | number | 0 | 1.0.0 |
-| duration | 动画执行的时间 | number | 250 | - |
-| fade | 是否开启淡入淡出 | boolean | false | 2.21.0 |
+| 属性 | 说明 | 类型 | 默认值     | 版本 |
+| -- | --- | --- |---------| --- |
+| className | 类名 | string | -       | 0.34.0 |
+| collapseHeight | 折叠高度 | number | 0       | 1.0.0 |
+| duration | 动画执行的时间 | number | 250     | - |
+| fade | 是否开启淡入淡出 | boolean | false   | 2.21.0 |
 | isOpen | 是否展开内容区域 | boolean | `false` | - |
 | isOpen | 是否展开内容区域 | boolean | `false` | - |
 | keepDOM | 是否保留隐藏的面板 DOM 树,默认销毁 | boolean | `false` | 0.25.0 |
 | keepDOM | 是否保留隐藏的面板 DOM 树,默认销毁 | boolean | `false` | 0.25.0 |
-| lazyRender | 配合 keepDOM 使用,为 true 时挂载时不会渲染组件 | boolean | `true` | 2.24 |
-| motion | 是否开启动画 | boolean | `true` | - |
-| onMotionEnd | 动画结束的回调 | () => void | - | - |
-| reCalcKey | 当 reCalcKey 改变时,将重新计算子节点的高度,用于优化动态渲染时的计算 | number \| string | - | 1.5.0 |
-| style | 样式 | CSSProperties | - | 0.34.0 |
-| id | id | html id string type | - | 2.3.0 |
+| lazyRender | 配合 keepDOM 使用,为 true 时挂载时不会渲染组件 | boolean | `false` | 2.24 |
+| motion | 是否开启动画 | boolean | `true`  | - |
+| onMotionEnd | 动画结束的回调 | () => void | -       | - |
+| reCalcKey | 当 reCalcKey 改变时,将重新计算子节点的高度,用于优化动态渲染时的计算 | number \| string | -       | 1.5.0 |
+| style | 样式 | CSSProperties | -       | 0.34.0 |
+| id | id | html id string type | -       | 2.3.0 |
 ## Accessibility
 ## Accessibility
 
 
 ### ARIA
 ### ARIA

+ 3 - 2
packages/semi-ui/collapse/collapse-context.tsx

@@ -9,10 +9,11 @@ export interface CollapseContextType{
     keepDOM: boolean;
     keepDOM: boolean;
     expandIconPosition: 'left' | 'right';
     expandIconPosition: 'left' | 'right';
     onClick: (activeKey: string, e: React.MouseEvent) => void;
     onClick: (activeKey: string, e: React.MouseEvent) => void;
-    motion: boolean
+    motion: boolean;
+    lazyRender: boolean
 }
 }
 
 
 
 
 const CollapseContext = React.createContext<CollapseContextType>({} as CollapseContextType);
 const CollapseContext = React.createContext<CollapseContextType>({} as CollapseContextType);
 
 
-export default CollapseContext;
+export default CollapseContext;

+ 29 - 11
packages/semi-ui/collapse/index.tsx

@@ -6,7 +6,7 @@ import CollapseFoundation, {
     ArgsType,
     ArgsType,
     CollapseAdapter,
     CollapseAdapter,
     CollapseProps,
     CollapseProps,
-    CollapseState
+    CollapseState,
 } from '@douyinfe/semi-foundation/collapse/foundation';
 } from '@douyinfe/semi-foundation/collapse/foundation';
 import BaseComponent from '../_base/baseComponent';
 import BaseComponent from '../_base/baseComponent';
 import CollapsePanel from './item';
 import CollapsePanel from './item';
@@ -14,16 +14,17 @@ import '@douyinfe/semi-foundation/collapse/collapse.scss';
 import { noop } from '@douyinfe/semi-foundation/utils/function';
 import { noop } from '@douyinfe/semi-foundation/utils/function';
 import { isEqual } from 'lodash';
 import { isEqual } from 'lodash';
 import CollapseContext from './collapse-context';
 import CollapseContext from './collapse-context';
-import { getDefaultPropsFromGlobalConfig } from "../_utils";
+import { getDefaultPropsFromGlobalConfig } from '../_utils';
 
 
 export type { CollapsePanelProps } from './item';
 export type { CollapsePanelProps } from './item';
 
 
-export interface CollapseReactProps extends CollapseProps{
+export interface CollapseReactProps extends CollapseProps {
     expandIcon?: React.ReactNode;
     expandIcon?: React.ReactNode;
     collapseIcon?: React.ReactNode;
     collapseIcon?: React.ReactNode;
     children?: React.ReactNode;
     children?: React.ReactNode;
     style?: CSSProperties;
     style?: CSSProperties;
-    onChange?: (activeKey: CollapseProps['activeKey'], e: React.MouseEvent) => void
+    onChange?: (activeKey: CollapseProps['activeKey'], e: React.MouseEvent) => void;
+    lazyRender?: boolean
 }
 }
 
 
 
 
@@ -44,24 +45,26 @@ class Collapse extends BaseComponent<CollapseReactProps, CollapseState> {
         className: PropTypes.string,
         className: PropTypes.string,
         keepDOM: PropTypes.bool,
         keepDOM: PropTypes.bool,
         motion: PropTypes.oneOfType([PropTypes.bool, PropTypes.func, PropTypes.object]),
         motion: PropTypes.oneOfType([PropTypes.bool, PropTypes.func, PropTypes.object]),
-        expandIconPosition: PropTypes.oneOf(strings.iconPosition)
+        expandIconPosition: PropTypes.oneOf(strings.iconPosition),
+        lazyRender: PropTypes.bool,
     };
     };
 
 
-    static __SemiComponentName__ = "Collapse";
+    static __SemiComponentName__ = 'Collapse';
 
 
     static defaultProps = getDefaultPropsFromGlobalConfig(Collapse.__SemiComponentName__, {
     static defaultProps = getDefaultPropsFromGlobalConfig(Collapse.__SemiComponentName__, {
         defaultActiveKey: '',
         defaultActiveKey: '',
         clickHeaderToExpand: true,
         clickHeaderToExpand: true,
         onChange: noop,
         onChange: noop,
-        expandIconPosition: 'right'
-    })
+        expandIconPosition: 'right',
+        lazyRender: false,
+    });
 
 
     constructor(props: CollapseReactProps) {
     constructor(props: CollapseReactProps) {
         super(props);
         super(props);
         this.foundation = new CollapseFoundation(this.adapter);
         this.foundation = new CollapseFoundation(this.adapter);
         const initKeys = this.foundation.initActiveKey();
         const initKeys = this.foundation.initActiveKey();
         this.state = {
         this.state = {
-            activeSet: new Set(initKeys)
+            activeSet: new Set(initKeys),
         };
         };
         this.onChange = this.onChange.bind(this);
         this.onChange = this.onChange.bind(this);
     }
     }
@@ -98,7 +101,21 @@ class Collapse extends BaseComponent<CollapseReactProps, CollapseState> {
     };
     };
 
 
     render() {
     render() {
-        const { defaultActiveKey, accordion, style, motion, className, keepDOM, expandIconPosition, expandIcon, collapseIcon, children, clickHeaderToExpand, ...rest } = this.props;
+        const {
+            defaultActiveKey,
+            lazyRender,
+            accordion,
+            style,
+            motion,
+            className,
+            keepDOM,
+            expandIconPosition,
+            expandIcon,
+            collapseIcon,
+            children,
+            clickHeaderToExpand,
+            ...rest
+        } = this.props;
         const clsPrefix = cls(cssClasses.PREFIX, className);
         const clsPrefix = cls(cssClasses.PREFIX, className);
         const { activeSet } = this.state;
         const { activeSet } = this.state;
         return (
         return (
@@ -112,7 +129,8 @@ class Collapse extends BaseComponent<CollapseReactProps, CollapseState> {
                         keepDOM,
                         keepDOM,
                         expandIconPosition,
                         expandIconPosition,
                         onClick: this.onChange,
                         onClick: this.onChange,
-                        motion
+                        motion,
+                        lazyRender,
                     }}
                     }}
                 >
                 >
                     {children}
                     {children}

+ 2 - 0
packages/semi-ui/collapse/item.tsx

@@ -123,6 +123,7 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
             expandIconPosition,
             expandIconPosition,
             activeSet,
             activeSet,
             motion,
             motion,
+            lazyRender
         } = this.context;
         } = this.context;
         const active = activeSet.has(itemKey);
         const active = activeSet.has(itemKey);
         const itemCls = cls(className, {
         const itemCls = cls(className, {
@@ -155,6 +156,7 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
                 {
                 {
                     children && (
                     children && (
                         <Collapsible
                         <Collapsible
+                            lazyRender={lazyRender}
                             isOpen={active} keepDOM={keepDOM} motion={motion}
                             isOpen={active} keepDOM={keepDOM} motion={motion}
                             onMotionEnd={this.props.onMotionEnd}
                             onMotionEnd={this.props.onMotionEnd}
                             reCalcKey={reCalcKey}>
                             reCalcKey={reCalcKey}>

+ 8 - 2
packages/semi-ui/collapsible/index.tsx

@@ -43,13 +43,14 @@ class Collapsible extends BaseComponent<CollapsibleProps, CollapsibleState> {
         duration: 250,
         duration: 250,
         motion: true,
         motion: true,
         keepDOM: false,
         keepDOM: false,
-        lazyRender: true,
+        lazyRender: false,
         collapseHeight: 0,
         collapseHeight: 0,
         fade: false
         fade: false
     }) 
     }) 
     public foundation: CollapsibleFoundation;
     public foundation: CollapsibleFoundation;
     private domRef = React.createRef<HTMLDivElement>();
     private domRef = React.createRef<HTMLDivElement>();
     private resizeObserver: ResizeObserver | null;
     private resizeObserver: ResizeObserver | null;
+    private hasRendered: boolean = false;
 
 
     constructor(props: CollapsibleProps) {
     constructor(props: CollapsibleProps) {
         super(props);
         super(props);
@@ -175,7 +176,12 @@ class Collapsible extends BaseComponent<CollapsibleProps, CollapsibleState> {
             [`${cssClasses.PREFIX}-transition`]: this.props.motion && this.state.isTransitioning
             [`${cssClasses.PREFIX}-transition`]: this.props.motion && this.state.isTransitioning
         }, this.props.className);
         }, this.props.className);
 
 
-        const shouldRender = (this.props.keepDOM && !this.props.lazyRender) || this.props.collapseHeight !== 0 || this.state.visible || this.props.isOpen;
+        const shouldRender = (this.props.keepDOM && (this.props.lazyRender ? this.hasRendered : true)) || this.props.collapseHeight !== 0 || this.state.visible || this.props.isOpen;
+
+        if (shouldRender && !this.hasRendered) {
+            this.hasRendered = true;
+        }
+
 
 
         return (
         return (
             <div
             <div

+ 3 - 115
yarn.lock

@@ -1519,25 +1519,11 @@
     "@douyinfe/semi-animation-styled" "2.23.2"
     "@douyinfe/semi-animation-styled" "2.23.2"
     classnames "^2.2.6"
     classnames "^2.2.6"
 
 
-"@douyinfe/[email protected]":
-  version "2.54.1"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-animation-react/-/semi-animation-react-2.54.1.tgz#0bd3b3d980eeb5c958d98180a10908c02fe0e1f7"
-  integrity sha512-xLVK8Tu75p90oduD16Nhftk77REgo+Z608irWOumuYdfsAiSNjLq5xn/OqHGfmtn4iFYCkJglQDorH6cyckJBQ==
-  dependencies:
-    "@douyinfe/semi-animation" "2.54.1"
-    "@douyinfe/semi-animation-styled" "2.54.1"
-    classnames "^2.2.6"
-
 "@douyinfe/[email protected]":
 "@douyinfe/[email protected]":
   version "2.23.2"
   version "2.23.2"
   resolved "https://registry.npmjs.org/@douyinfe/semi-animation-styled/-/semi-animation-styled-2.23.2.tgz#f18bc074515441c297cc636ed98521e249d093c9"
   resolved "https://registry.npmjs.org/@douyinfe/semi-animation-styled/-/semi-animation-styled-2.23.2.tgz#f18bc074515441c297cc636ed98521e249d093c9"
   integrity sha512-cKaA1yGHPF76Rx7EZDZicj+1oX1su2wnqb/UGFOTquAwqWmkTfgQ+EKxCd/N704WH+RtmGf4xbrJKpBvvcEdSQ==
   integrity sha512-cKaA1yGHPF76Rx7EZDZicj+1oX1su2wnqb/UGFOTquAwqWmkTfgQ+EKxCd/N704WH+RtmGf4xbrJKpBvvcEdSQ==
 
 
-"@douyinfe/[email protected]":
-  version "2.54.1"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-animation-styled/-/semi-animation-styled-2.54.1.tgz#b491fa6356e7ee97e875d779bb80ba34a9dcdd2e"
-  integrity sha512-Y/DCtb6UyCenNY6aG8oQGE/Sy2s6+D6ghrjJ0HdcXutoLGuWmk7xMw6RDx+aZUxthQE3dqfc7EbuZ8rYqQRpYg==
-
 "@douyinfe/[email protected]":
 "@douyinfe/[email protected]":
   version "2.12.0"
   version "2.12.0"
   resolved "https://registry.npmjs.org/@douyinfe/semi-animation/-/semi-animation-2.12.0.tgz#51fe52d3911c2591a80a6e9fe96e6809c1511f13"
   resolved "https://registry.npmjs.org/@douyinfe/semi-animation/-/semi-animation-2.12.0.tgz#51fe52d3911c2591a80a6e9fe96e6809c1511f13"
@@ -1553,13 +1539,6 @@
   dependencies:
   dependencies:
     bezier-easing "^2.1.0"
     bezier-easing "^2.1.0"
 
 
-"@douyinfe/[email protected]":
-  version "2.54.1"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-animation/-/semi-animation-2.54.1.tgz#1d5334a5c89291c8dfac9408ca8017eea0f048ca"
-  integrity sha512-Bj/RUTIeSXi5IZqK02UC4bTMD1O9JCzaomtQ7v8dyp9SF3MIpeKNppNw7/wa3vHv5iW+QbJdF2wsxTGgJtCnrQ==
-  dependencies:
-    bezier-easing "^2.1.0"
-
 "@douyinfe/[email protected]":
 "@douyinfe/[email protected]":
   version "2.33.1"
   version "2.33.1"
   resolved "https://registry.npmjs.org/@douyinfe/semi-foundation/-/semi-foundation-2.33.1.tgz#1dfe6233e35a4ed768cb580b0c9a677d1c34ffba"
   resolved "https://registry.npmjs.org/@douyinfe/semi-foundation/-/semi-foundation-2.33.1.tgz#1dfe6233e35a4ed768cb580b0c9a677d1c34ffba"
@@ -1574,21 +1553,6 @@
     memoize-one "^5.2.1"
     memoize-one "^5.2.1"
     scroll-into-view-if-needed "^2.2.24"
     scroll-into-view-if-needed "^2.2.24"
 
 
-"@douyinfe/[email protected]":
-  version "2.54.1"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-foundation/-/semi-foundation-2.54.1.tgz#d46dca2749fe3c6dd506e41ed2c18dbfbb0e0b67"
-  integrity sha512-RaeTfCb/0AsqJrDWRI6zRsQcie0IogddkVuYFiQfuMhHFrjUG8O5IPNvv6d5+8O0L9zkdIxQ95LE6BcEhZe+dg==
-  dependencies:
-    "@douyinfe/semi-animation" "2.54.1"
-    async-validator "^3.5.0"
-    classnames "^2.2.6"
-    date-fns "^2.29.3"
-    date-fns-tz "^1.3.8"
-    fast-copy "^3.0.1 "
-    lodash "^4.17.21"
-    memoize-one "^5.2.1"
-    scroll-into-view-if-needed "^2.2.24"
-
 "@douyinfe/[email protected]", "@douyinfe/semi-icons@latest":
 "@douyinfe/[email protected]", "@douyinfe/semi-icons@latest":
   version "2.33.1"
   version "2.33.1"
   resolved "https://registry.yarnpkg.com/@douyinfe/semi-icons/-/semi-icons-2.33.1.tgz#8e2871d9bc0ab7e12df74e3c71802d53d69b7425"
   resolved "https://registry.yarnpkg.com/@douyinfe/semi-icons/-/semi-icons-2.33.1.tgz#8e2871d9bc0ab7e12df74e3c71802d53d69b7425"
@@ -1596,23 +1560,11 @@
   dependencies:
   dependencies:
     classnames "^2.2.6"
     classnames "^2.2.6"
 
 
-"@douyinfe/[email protected]", "@douyinfe/semi-icons@^2.0.0":
-  version "2.54.1"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-icons/-/semi-icons-2.54.1.tgz#ff3ea6601eabae741dc85de0b8e496b311696352"
-  integrity sha512-cykK857iXU4nkGqk8sm/ZgFD8A48NVk9yr1ThLS0E6PzYwBU/KpavYWGHciNdeFOpFMsiUvMPYVH96jRglpkJw==
-  dependencies:
-    classnames "^2.2.6"
-
 "@douyinfe/[email protected]":
 "@douyinfe/[email protected]":
   version "2.33.1"
   version "2.33.1"
   resolved "https://registry.npmjs.org/@douyinfe/semi-illustrations/-/semi-illustrations-2.33.1.tgz#530ab851f4dc32a52221c4067c778c800b9b55d7"
   resolved "https://registry.npmjs.org/@douyinfe/semi-illustrations/-/semi-illustrations-2.33.1.tgz#530ab851f4dc32a52221c4067c778c800b9b55d7"
   integrity sha512-tTTUN8QwnQiF++sk4VBNzfkG87aYZ4iUeqk2ys8/ymVUmCZQ7y46ys020GO1MfPHRR47OMFPI82FVcH1WQtE3g==
   integrity sha512-tTTUN8QwnQiF++sk4VBNzfkG87aYZ4iUeqk2ys8/ymVUmCZQ7y46ys020GO1MfPHRR47OMFPI82FVcH1WQtE3g==
 
 
-"@douyinfe/[email protected]":
-  version "2.54.1"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-illustrations/-/semi-illustrations-2.54.1.tgz#006d79568856942442ad7e8da9d5b841397bcf7b"
-  integrity sha512-8Vg0Ty6OdQRHVpu5OBFpw5b92Z4eRx1ArQtygsOfYnVeKVOc7IytrS5eQZxijMx1ScFshrlk3qISe40D3HVS6g==
-
 "@douyinfe/[email protected]":
 "@douyinfe/[email protected]":
   version "2.23.2"
   version "2.23.2"
   resolved "https://registry.npmjs.org/@douyinfe/semi-scss-compile/-/semi-scss-compile-2.23.2.tgz#30884bb194ee9ae1e81877985e5663c3297c1ced"
   resolved "https://registry.npmjs.org/@douyinfe/semi-scss-compile/-/semi-scss-compile-2.23.2.tgz#30884bb194ee9ae1e81877985e5663c3297c1ced"
@@ -1686,40 +1638,6 @@
   dependencies:
   dependencies:
     glob "^7.1.6"
     glob "^7.1.6"
 
 
-"@douyinfe/[email protected]":
-  version "2.54.1"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-theme-default/-/semi-theme-default-2.54.1.tgz#86e403a1ebb4f25ae44242701a0c5616406ea7ca"
-  integrity sha512-LispAQ9H0MjgO3WcoM2lLFvtMUMAyqontOrdoIq37s2iaC8ZP7nHH50wvlOprzWmz7zH7F7ls6DiWLw0Nd6/UA==
-  dependencies:
-    glob "^7.1.6"
-
-"@douyinfe/semi-ui@^2.0.0":
-  version "2.54.1"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-ui/-/semi-ui-2.54.1.tgz#ccba9779daee6584a80382f82aa595b1ceda89c3"
-  integrity sha512-rgABgQO038Q/pdsuz1kUTpaliZmhIj64yOmuoNBG3zVEhRJ+WpkWuwn1kGXHR+sCKDZ+4EydEFhwpLaRV96+sQ==
-  dependencies:
-    "@dnd-kit/core" "^6.0.8"
-    "@dnd-kit/sortable" "^7.0.2"
-    "@dnd-kit/utilities" "^3.2.1"
-    "@douyinfe/semi-animation" "2.54.1"
-    "@douyinfe/semi-animation-react" "2.54.1"
-    "@douyinfe/semi-foundation" "2.54.1"
-    "@douyinfe/semi-icons" "2.54.1"
-    "@douyinfe/semi-illustrations" "2.54.1"
-    "@douyinfe/semi-theme-default" "2.54.1"
-    async-validator "^3.5.0"
-    classnames "^2.2.6"
-    copy-text-to-clipboard "^2.1.1"
-    date-fns "^2.29.3"
-    date-fns-tz "^1.3.8"
-    fast-copy "^3.0.1 "
-    lodash "^4.17.21"
-    prop-types "^15.7.2"
-    react-resizable "^3.0.5"
-    react-window "^1.8.2"
-    scroll-into-view-if-needed "^2.2.24"
-    utility-types "^3.10.0"
-
 "@douyinfe/semi-ui@latest":
 "@douyinfe/semi-ui@latest":
   version "2.33.1"
   version "2.33.1"
   resolved "https://registry.yarnpkg.com/@douyinfe/semi-ui/-/semi-ui-2.33.1.tgz#3234ca96eb3560b8299bc9750fbe59446522d9bb"
   resolved "https://registry.yarnpkg.com/@douyinfe/semi-ui/-/semi-ui-2.33.1.tgz#3234ca96eb3560b8299bc9750fbe59446522d9bb"
@@ -11693,11 +11611,6 @@ eslint-plugin-react@^7.20.6, eslint-plugin-react@^7.24.0:
     semver "^6.3.0"
     semver "^6.3.0"
     string.prototype.matchall "^4.0.8"
     string.prototype.matchall "^4.0.8"
 
 
-eslint-plugin-semi-design@^2.33.0:
-  version "2.54.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-semi-design/-/eslint-plugin-semi-design-2.54.1.tgz#0dd381b8a897e4e5236705e813fd04d221dffdce"
-  integrity sha512-B3vRUJElJ4A469wLmPvJYRUnooa0oFuHfIksEC39EZuk+cOjE7GHukWJUHb6fUJDKstn+6VNbA3CwZL+8KNdzA==
-
 eslint-rule-composer@^0.3.0:
 eslint-rule-composer@^0.3.0:
   version "0.3.0"
   version "0.3.0"
   resolved "https://registry.npmjs.org/eslint-rule-composer/-/eslint-rule-composer-0.3.0.tgz#79320c927b0c5c0d3d3d2b76c8b4a488f25bbaf9"
   resolved "https://registry.npmjs.org/eslint-rule-composer/-/eslint-rule-composer-0.3.0.tgz#79320c927b0c5c0d3d3d2b76c8b4a488f25bbaf9"
@@ -24212,7 +24125,7 @@ string-similarity@^1.2.2:
     lodash.map "^4.6.0"
     lodash.map "^4.6.0"
     lodash.maxby "^4.6.0"
     lodash.maxby "^4.6.0"
 
 
-"string-width-cjs@npm:string-width@^4.2.0":
+"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
   version "4.2.3"
   version "4.2.3"
   resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -24230,15 +24143,6 @@ string-width@^1.0.1, string-width@^1.0.2:
     is-fullwidth-code-point "^1.0.0"
     is-fullwidth-code-point "^1.0.0"
     strip-ansi "^3.0.0"
     strip-ansi "^3.0.0"
 
 
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
-  version "4.2.3"
-  resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
 string-width@^2.0.0, string-width@^2.1.0:
 string-width@^2.0.0, string-width@^2.1.0:
   version "2.1.1"
   version "2.1.1"
   resolved "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
   resolved "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
@@ -24361,7 +24265,7 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
     is-regexp "^1.0.0"
 
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   version "6.0.1"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -24389,13 +24293,6 @@ strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
   dependencies:
   dependencies:
     ansi-regex "^4.1.0"
     ansi-regex "^4.1.0"
 
 
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.0.1:
 strip-ansi@^7.0.1:
   version "7.0.1"
   version "7.0.1"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.0.1.tgz#61740a08ce36b61e50e65653f07060d000975fb2"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.0.1.tgz#61740a08ce36b61e50e65653f07060d000975fb2"
@@ -26843,7 +26740,7 @@ worker-farm@^1.7.0:
   dependencies:
   dependencies:
     errno "~0.1.7"
     errno "~0.1.7"
 
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   version "7.0.0"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -26878,15 +26775,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
     strip-ansi "^6.0.0"
 
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
 wrap-ansi@^8.1.0:
   version "8.1.0"
   version "8.1.0"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"