@para-ui/core 4.0.0-rc.3 → 4.0.0-rc.5

package/CollapseLayout/index.js

@@ -1,60 +1,62 @@
-import { _ as _defineProperty } from '../_verture/defineProperty-1d116156.js';
-import { _ as _slicedToArray } from '../_verture/slicedToArray-a8206399.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useState, useEffect } from 'react';
-import DoubleLeft from '@para-ui/icons/DoubleLeft';
-import DoubleRight from '@para-ui/icons/DoubleRight';
-import { $ as $prefixCls } from '../_verture/constant-0d9802f7.js';
+import LeftTriangleF from '@para-ui/icons/LeftTriangleF';
+import RightTriangleF from '@para-ui/icons/RightTriangleF';
+import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
 import clsx from 'clsx';
-import { a as getAutoHeightDuration } from '../_verture/util-7e1fb1e2.js';
+import { a as getAutoHeightDuration } from '../_verture/util-82646c4f.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
-import '../_verture/typeof-adeedc13.js';
-import '../_verture/unsupportedIterableToArray-cb478f24.js';
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-collapse-layout {\n  height: 100%;\n  width: 100%;\n  position: relative;\n  overflow: hidden;\n}\n.paraui-v4-collapse-layout .collapse-layout-icon-transform-top {\n  transform: rotate(90deg);\n}\n.paraui-v4-collapse-layout .collapse-layout-icon-transform-bottom {\n  transform: rotate(-90deg);\n}\n.paraui-v4-collapse-layout .collapse-layout-icon-transform-right {\n  transform: rotate(180deg);\n}\n.paraui-v4-collapse-layout .collapse-layout-display {\n  overflow: hidden;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left .collapse-layout-click, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right .collapse-layout-click, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-top .collapse-layout-click, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom .collapse-layout-click {\n  position: absolute;\n  z-index: 1;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left .collapse-layout-click span, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right .collapse-layout-click span, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-top .collapse-layout-click span, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom .collapse-layout-click span {\n  font-size: 12px;\n  font-weight: 400;\n  text-align: center;\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left .collapse-layout-click .switch-btn, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right .collapse-layout-click .switch-btn, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-top .collapse-layout-click .switch-btn, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom .collapse-layout-click .switch-btn {\n  z-index: 11;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left .collapse-layout-click .switch-btn svg, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right .collapse-layout-click .switch-btn svg, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-top .collapse-layout-click .switch-btn svg, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom .collapse-layout-click .switch-btn svg {\n  font-size: 14px;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left .collapse-layout-click .drag-line, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right .collapse-layout-click .drag-line, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-top .collapse-layout-click .drag-line, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom .collapse-layout-click .drag-line {\n  display: none;\n  cursor: no-drop;\n  z-index: 10;\n  position: absolute;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left .collapse-layout-click .drag-line:after, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right .collapse-layout-click .drag-line:after, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-top .collapse-layout-click .drag-line:after, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom .collapse-layout-click .drag-line:after {\n  position: absolute;\n  content: \"\";\n  background: rgb(234, 236, 241);\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left.paraui-v4-collapse-layout-move, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right.paraui-v4-collapse-layout-move, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-top.paraui-v4-collapse-layout-move, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom.paraui-v4-collapse-layout-move {\n  user-select: none !important;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left.paraui-v4-collapse-layout-move .collapse-layout-click, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right.paraui-v4-collapse-layout-move .collapse-layout-click, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-top.paraui-v4-collapse-layout-move .collapse-layout-click, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom.paraui-v4-collapse-layout-move .collapse-layout-click {\n  transition: none !important;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left.paraui-v4-collapse-layout-move .collapse-layout-click .switch-btn, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right.paraui-v4-collapse-layout-move .collapse-layout-click .switch-btn, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-top.paraui-v4-collapse-layout-move .collapse-layout-click .switch-btn, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom.paraui-v4-collapse-layout-move .collapse-layout-click .switch-btn {\n  transition: none !important;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left.paraui-v4-collapse-layout-move .collapse-layout-click .drag-line:after, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right.paraui-v4-collapse-layout-move .collapse-layout-click .drag-line:after, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-top.paraui-v4-collapse-layout-move .collapse-layout-click .drag-line:after, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom.paraui-v4-collapse-layout-move .collapse-layout-click .drag-line:after {\n  background: rgb(87, 131, 235);\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left.paraui-v4-collapse-layout-move .collapse-layout-display, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right.paraui-v4-collapse-layout-move .collapse-layout-display, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-top.paraui-v4-collapse-layout-move .collapse-layout-display, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom.paraui-v4-collapse-layout-move .collapse-layout-display {\n  transition: none !important;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left.paraui-v4-collapse-layout-move .collapse-layout-display .collapse-layout-display-shadow, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right.paraui-v4-collapse-layout-move .collapse-layout-display .collapse-layout-display-shadow, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-top.paraui-v4-collapse-layout-move .collapse-layout-display .collapse-layout-display-shadow, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom.paraui-v4-collapse-layout-move .collapse-layout-display .collapse-layout-display-shadow {\n  transition: none !important;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left.paraui-v4-collapse-layout-move .collapse-layout-default, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right.paraui-v4-collapse-layout-move .collapse-layout-default, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-top.paraui-v4-collapse-layout-move .collapse-layout-default, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom.paraui-v4-collapse-layout-move .collapse-layout-default {\n  transition: none !important;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left.paraui-v4-collapse-layout-true .collapse-layout-click .drag-line, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right.paraui-v4-collapse-layout-true .collapse-layout-click .drag-line, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-top.paraui-v4-collapse-layout-true .collapse-layout-click .drag-line, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom.paraui-v4-collapse-layout-true .collapse-layout-click .drag-line {\n  display: inline-block;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left.paraui-v4-collapse-layout-true.paraui-v4-collapse-layout-right .collapse-layout-click .switch-btn, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right.paraui-v4-collapse-layout-true.paraui-v4-collapse-layout-right .collapse-layout-click .switch-btn, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-top.paraui-v4-collapse-layout-true.paraui-v4-collapse-layout-right .collapse-layout-click .switch-btn, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom.paraui-v4-collapse-layout-true.paraui-v4-collapse-layout-right .collapse-layout-click .switch-btn {\n  right: -1px;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left.paraui-v4-collapse-layout-true.paraui-v4-collapse-layout-bottom .collapse-layout-click .switch-btn, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right.paraui-v4-collapse-layout-true.paraui-v4-collapse-layout-bottom .collapse-layout-click .switch-btn, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-top.paraui-v4-collapse-layout-true.paraui-v4-collapse-layout-bottom .collapse-layout-click .switch-btn, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom.paraui-v4-collapse-layout-true.paraui-v4-collapse-layout-bottom .collapse-layout-click .switch-btn {\n  bottom: -1px;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-right .collapse-layout-click .switch-btn {\n  right: 0px;\n  position: absolute;\n  top: 50%;\n  left: \"\";\n  width: 20px;\n  height: 70px;\n  background: rgb(247, 248, 250);\n  text-align: center;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition-property: right;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-delay: 0ms;\n  border-radius: 4px 0 0 4px;\n  border-right: 1px solid rgb(46, 101, 230);\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-right .collapse-layout-click .switch-btn:hover {\n  border-color: rgb(87, 131, 235);\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-right .collapse-layout-display-shadow {\n  transition-property: margin-right;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-delay: 0ms;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left .collapse-layout-click .switch-btn {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 20px;\n  height: 70px;\n  background: rgb(247, 248, 250);\n  text-align: center;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition-property: left;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-delay: 0ms;\n  border-left: 1px solid rgb(46, 101, 230);\n  border-radius: 0 4px 4px 0;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left .collapse-layout-click .switch-btn:hover {\n  border-color: rgb(87, 131, 235);\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left .collapse-layout-display-shadow {\n  transition-property: margin-left;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-delay: 0ms;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left > div, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right > div {\n  display: inline-block;\n  vertical-align: middle;\n  height: 100%;\n  position: relative;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left .collapse-layout-display-shadow, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right .collapse-layout-display-shadow {\n  height: 100%;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left .collapse-layout-display,\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left .collapse-layout-default, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right .collapse-layout-display,\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-right .collapse-layout-default {\n  transition: width;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left .collapse-layout-click, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right .collapse-layout-click {\n  flex-direction: column;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left .collapse-layout-click .switch-btn, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right .collapse-layout-click .switch-btn {\n  transform: translateY(-50%);\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left .collapse-layout-click .drag-line, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right .collapse-layout-click .drag-line {\n  width: 10px;\n  height: 100%;\n  left: 100%;\n  top: 0;\n  transform: translateX(-50%);\n  cursor: col-resize;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left .collapse-layout-click .drag-line:after, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right .collapse-layout-click .drag-line:after {\n  left: 5px;\n  width: 1px;\n  height: 100%;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-top .collapse-layout-click .switch-btn {\n  position: absolute;\n  top: 0;\n  left: 50%;\n  width: 70px;\n  height: 20px;\n  background: rgb(247, 248, 250);\n  text-align: center;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition-property: top;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-delay: 0ms;\n  border-top: 1px solid rgb(46, 101, 230);\n  border-radius: 0 0 4px 4px;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-top .collapse-layout-click .switch-btn:hover {\n  border-color: rgb(87, 131, 235);\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-top .collapse-layout-display-shadow {\n  transition-property: margin-top;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom .collapse-layout-click .switch-btn {\n  position: absolute;\n  top: \"\";\n  left: 50%;\n  width: 70px;\n  height: 20px;\n  background: rgb(247, 248, 250);\n  text-align: center;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition-property: bottom;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-delay: 0ms;\n  bottom: 0px;\n  border-bottom: 1px solid rgb(46, 101, 230);\n  border-radius: 4px 4px 0 0;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom .collapse-layout-click .switch-btn:hover {\n  border-color: rgb(87, 131, 235);\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom .collapse-layout-display-shadow {\n  transition-property: margin-bottom;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-delay: 0ms;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-top > div, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom > div {\n  display: block;\n  width: 100%;\n  position: relative;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-top .collapse-layout-display,\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-top .collapse-layout-default, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom .collapse-layout-display,\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom .collapse-layout-default {\n  transition-property: height;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-delay: 0ms;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-top .collapse-layout-display-shadow, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom .collapse-layout-display-shadow {\n  width: 100%;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-top .collapse-layout-click .switch-btn, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom .collapse-layout-click .switch-btn {\n  transform: translateX(-50%);\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-top .collapse-layout-click .drag-line, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom .collapse-layout-click .drag-line {\n  width: 100%;\n  height: 10px;\n  left: 0;\n  top: 100%;\n  transform: translateY(-50%);\n  cursor: row-resize;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-top .collapse-layout-click .drag-line:after, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom .collapse-layout-click .drag-line:after {\n  top: 5px;\n  height: 1px;\n  width: 100%;\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-collapse-layout {\n  height: 100%;\n  width: 100%;\n  position: relative;\n  overflow: hidden;\n}\n.paraui-v4-collapse-layout .collapse-layout-icon-transform-top {\n  transform: rotate(90deg);\n}\n.paraui-v4-collapse-layout .collapse-layout-icon-transform-bottom {\n  transform: rotate(-90deg);\n}\n.paraui-v4-collapse-layout .collapse-layout-icon-transform-right {\n  transform: rotate(180deg);\n}\n.paraui-v4-collapse-layout .collapse-layout-display {\n  overflow: hidden;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left .collapse-layout-click, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right .collapse-layout-click, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-top .collapse-layout-click, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom .collapse-layout-click {\n  position: absolute;\n  z-index: 1;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left .collapse-layout-click span, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right .collapse-layout-click span, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-top .collapse-layout-click span, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom .collapse-layout-click span {\n  font-size: 12px;\n  font-weight: 400;\n  text-align: center;\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left .collapse-layout-click .switch-btn, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right .collapse-layout-click .switch-btn, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-top .collapse-layout-click .switch-btn, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom .collapse-layout-click .switch-btn {\n  z-index: 9;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left .collapse-layout-click .switch-btn:hover > .bg-svg svg, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right .collapse-layout-click .switch-btn:hover > .bg-svg svg, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-top .collapse-layout-click .switch-btn:hover > .bg-svg svg, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom .collapse-layout-click .switch-btn:hover > .bg-svg svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left .collapse-layout-click .switch-btn:hover svg, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right .collapse-layout-click .switch-btn:hover svg, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-top .collapse-layout-click .switch-btn:hover svg, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom .collapse-layout-click .switch-btn:hover svg {\n  color: rgb(255, 255, 255);\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left .collapse-layout-click .switch-btn > .bg-svg, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right .collapse-layout-click .switch-btn > .bg-svg, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-top .collapse-layout-click .switch-btn > .bg-svg, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom .collapse-layout-click .switch-btn > .bg-svg {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  z-index: -1;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left .collapse-layout-click .switch-btn > .bg-svg svg, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right .collapse-layout-click .switch-btn > .bg-svg svg, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-top .collapse-layout-click .switch-btn > .bg-svg svg, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom .collapse-layout-click .switch-btn > .bg-svg svg {\n  fill: currentColor;\n  color: rgb(234, 236, 241);\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left .collapse-layout-click .switch-btn svg, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right .collapse-layout-click .switch-btn svg, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-top .collapse-layout-click .switch-btn svg, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom .collapse-layout-click .switch-btn svg {\n  font-size: 14px;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left .collapse-layout-click .drag-line, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right .collapse-layout-click .drag-line, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-top .collapse-layout-click .drag-line, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom .collapse-layout-click .drag-line {\n  display: none;\n  cursor: no-drop;\n  z-index: 10;\n  position: absolute;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left .collapse-layout-click .drag-line:after, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right .collapse-layout-click .drag-line:after, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-top .collapse-layout-click .drag-line:after, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom .collapse-layout-click .drag-line:after {\n  position: absolute;\n  content: \"\";\n  background: rgb(234, 236, 241);\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left.paraui-v4-collapse-layout-move, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right.paraui-v4-collapse-layout-move, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-top.paraui-v4-collapse-layout-move, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom.paraui-v4-collapse-layout-move {\n  user-select: none !important;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left.paraui-v4-collapse-layout-move .collapse-layout-click, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right.paraui-v4-collapse-layout-move .collapse-layout-click, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-top.paraui-v4-collapse-layout-move .collapse-layout-click, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom.paraui-v4-collapse-layout-move .collapse-layout-click {\n  transition: none !important;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left.paraui-v4-collapse-layout-move .collapse-layout-click .switch-btn, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right.paraui-v4-collapse-layout-move .collapse-layout-click .switch-btn, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-top.paraui-v4-collapse-layout-move .collapse-layout-click .switch-btn, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom.paraui-v4-collapse-layout-move .collapse-layout-click .switch-btn {\n  transition: none !important;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left.paraui-v4-collapse-layout-move .collapse-layout-click .drag-line:after, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right.paraui-v4-collapse-layout-move .collapse-layout-click .drag-line:after, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-top.paraui-v4-collapse-layout-move .collapse-layout-click .drag-line:after, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom.paraui-v4-collapse-layout-move .collapse-layout-click .drag-line:after {\n  background: rgb(87, 131, 235);\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left.paraui-v4-collapse-layout-move .collapse-layout-display, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right.paraui-v4-collapse-layout-move .collapse-layout-display, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-top.paraui-v4-collapse-layout-move .collapse-layout-display, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom.paraui-v4-collapse-layout-move .collapse-layout-display {\n  transition: none !important;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left.paraui-v4-collapse-layout-move .collapse-layout-display .collapse-layout-display-shadow, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right.paraui-v4-collapse-layout-move .collapse-layout-display .collapse-layout-display-shadow, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-top.paraui-v4-collapse-layout-move .collapse-layout-display .collapse-layout-display-shadow, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom.paraui-v4-collapse-layout-move .collapse-layout-display .collapse-layout-display-shadow {\n  transition: none !important;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left.paraui-v4-collapse-layout-move .collapse-layout-default, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right.paraui-v4-collapse-layout-move .collapse-layout-default, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-top.paraui-v4-collapse-layout-move .collapse-layout-default, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom.paraui-v4-collapse-layout-move .collapse-layout-default {\n  transition: none !important;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left.paraui-v4-collapse-layout-true .collapse-layout-click .drag-line, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right.paraui-v4-collapse-layout-true .collapse-layout-click .drag-line, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-top.paraui-v4-collapse-layout-true .collapse-layout-click .drag-line, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom.paraui-v4-collapse-layout-true .collapse-layout-click .drag-line {\n  display: inline-block;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-right .collapse-layout-click .switch-btn {\n  right: 0px;\n  position: absolute;\n  top: 50%;\n  left: \"\";\n  width: 20px;\n  height: 80px;\n  text-align: center;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition-property: right;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-delay: 0ms;\n  border-radius: 4px 0 0 4px;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-right .collapse-layout-click .switch-btn:hover {\n  border-color: rgb(87, 131, 235);\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-right .collapse-layout-click .switch-btn > .bg-svg {\n  transform: rotate(180deg);\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-right .collapse-layout-display-shadow {\n  transition-property: margin-right;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-delay: 0ms;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left .collapse-layout-click .switch-btn {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 20px;\n  height: 80px;\n  text-align: center;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition-property: left;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-delay: 0ms;\n  border-radius: 0 4px 4px 0;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left .collapse-layout-click .switch-btn:hover {\n  border-color: rgb(87, 131, 235);\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left .collapse-layout-display-shadow {\n  transition-property: margin-left;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-delay: 0ms;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left > div, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right > div {\n  display: inline-block;\n  vertical-align: middle;\n  height: 100%;\n  position: relative;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left .collapse-layout-display-shadow, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right .collapse-layout-display-shadow {\n  height: 100%;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left .collapse-layout-display,\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left .collapse-layout-default, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right .collapse-layout-display,\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-right .collapse-layout-default {\n  transition: width;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left .collapse-layout-click, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right .collapse-layout-click {\n  flex-direction: column;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left .collapse-layout-click .switch-btn, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right .collapse-layout-click .switch-btn {\n  transform: translateY(-50%);\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left .collapse-layout-click .drag-line, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right .collapse-layout-click .drag-line {\n  width: 10px;\n  height: 100%;\n  left: 100%;\n  top: 0;\n  transform: translateX(-50%);\n  cursor: col-resize;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-left .collapse-layout-click .drag-line:after, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-right .collapse-layout-click .drag-line:after {\n  left: 5px;\n  width: 1px;\n  height: 100%;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-top .collapse-layout-click .switch-btn {\n  position: absolute;\n  top: 0;\n  left: 50%;\n  width: 80px;\n  height: 20px;\n  text-align: center;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition-property: top;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-delay: 0ms;\n  border-radius: 0 0 4px 4px;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-top .collapse-layout-click .switch-btn:hover {\n  border-color: rgb(87, 131, 235);\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-top .collapse-layout-click .switch-btn > .bg-svg {\n  transform: rotate(90deg);\n  left: 30px;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-top .collapse-layout-display-shadow {\n  transition-property: margin-top;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom .collapse-layout-click .switch-btn {\n  position: absolute;\n  top: \"\";\n  left: 50%;\n  width: 80px;\n  height: 20px;\n  text-align: center;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition-property: bottom;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-delay: 0ms;\n  bottom: 0px;\n  border-radius: 4px 4px 0 0;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom .collapse-layout-click .switch-btn > .bg-svg {\n  transform: rotate(270deg);\n  left: -30px;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom .collapse-layout-click .switch-btn:hover {\n  border-color: rgb(87, 131, 235);\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom .collapse-layout-display-shadow {\n  transition-property: margin-bottom;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-delay: 0ms;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-top > div, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom > div {\n  display: block;\n  width: 100%;\n  position: relative;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-top .collapse-layout-display,\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-top .collapse-layout-default, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom .collapse-layout-display,\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom .collapse-layout-default {\n  transition-property: height;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-delay: 0ms;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-top .collapse-layout-display-shadow, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom .collapse-layout-display-shadow {\n  width: 100%;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-top .collapse-layout-click .switch-btn, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom .collapse-layout-click .switch-btn {\n  transform: translateX(-50%);\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-top .collapse-layout-click .drag-line, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom .collapse-layout-click .drag-line {\n  width: 100%;\n  height: 10px;\n  left: 0;\n  top: 100%;\n  transform: translateY(-50%);\n  cursor: row-resize;\n}\n.paraui-v4-collapse-layout.paraui-v4-collapse-layout-top .collapse-layout-click .drag-line:after, .paraui-v4-collapse-layout.paraui-v4-collapse-layout-bottom .collapse-layout-click .drag-line:after {\n  top: 5px;\n  height: 1px;\n  width: 100%;\n}";
 styleInject(css_248z);
 
+const SvgDrag = () => jsx("svg", Object.assign({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "20",
+  height: "80",
+  viewBox: "0 0 20 80"
+}, {
+  children: jsx("path", {
+    id: "bg",
+    d: "M14.472,72.764,0,80V0L14.472,7.236A10,10,0,0,1,20,16.18V63.82a10,10,0,0,1-5.528,8.944"
+  })
+}));
 /**
  * @author zhanzl
  * @date 2022/08/09
  */
-var CollapseLayout = function CollapseLayout(props) {
-  var _props$type = props.type,
-    type = _props$type === void 0 ? 'left' : _props$type,
-    showLabel = props.showLabel,
-    _props$open = props.open,
-    open = _props$open === void 0 ? false : _props$open,
-    hideLabel = props.hideLabel,
-    _props$spacing = props.spacing,
-    spacing = _props$spacing === void 0 ? 20 : _props$spacing,
-    _props$zoomLength = props.zoomLength,
-    zoomLength = _props$zoomLength === void 0 ? 0 : _props$zoomLength,
-    _props$minDragLength = props.minDragLength,
-    minDragLength = _props$minDragLength === void 0 ? 100 : _props$minDragLength,
-    _props$unit = props.unit,
-    unit = _props$unit === void 0 ? 'px' : _props$unit,
-    style = props.style,
-    _props$className = props.className,
-    className = _props$className === void 0 ? '' : _props$className,
-    onClickBtn = props.onClickBtn;
-  var constData = useRef({
+const CollapseLayout = props => {
+  const {
+    type = 'left',
+    showLabel,
+    open = false,
+    hideLabel,
+    spacing = 20,
+    zoomLength = 0,
+    minDragLength = 100,
+    unit = 'px',
+    style,
+    className = '',
+    onClickBtn
+  } = props;
+  const constData = useRef({
     zoomLength: zoomLength || 0,
     downPos: {}
   });
-  var comRef = useRef(null);
-  var displayRefOutside = useRef(null);
-  var displayRef = useRef(null);
-  var defaultRef = useRef(null);
-  var btnRef = useRef(null);
+  const comRef = useRef(null);
+  const displayRefOutside = useRef(null);
+  const displayRef = useRef(null);
+  const defaultRef = useRef(null);
+  const btnRef = useRef(null);
   /**
    * 处理动画时间
    * */
-  var handTime = function handTime() {
-    var displayRefDom = displayRef.current;
-    var defaultRefDom = defaultRef.current;
+  const handTime = () => {
+    const displayRefDom = displayRef.current;
+    const defaultRefDom = defaultRef.current;
     if (!displayRefDom || !defaultRefDom) return 0;
-    var dom = null;
-    var direction = '';
+    let dom = null;
+    let direction = '';
     switch (type) {
       case 'left':
         dom = displayRefDom;
@@ -73,20 +75,17 @@ var CollapseLayout = function CollapseLayout(props) {
         direction = 'tb';
         break;
     }
-    var rect = dom.getBoundingClientRect();
-    var durationHand = getAutoHeightDuration(direction === 'lr' ? rect.width : rect.height);
+    const rect = dom.getBoundingClientRect();
+    const durationHand = getAutoHeightDuration(direction === 'lr' ? rect.width : rect.height);
     return durationHand;
   };
-  var duration = handTime(); // 动画时间
+  const duration = handTime(); // 动画时间
   /**
    * 当前为收起还是展开
    */
-  var _useState = useState(),
-    _useState2 = _slicedToArray(_useState, 2),
-    showBox = _useState2[0],
-    setShowBox = _useState2[1];
+  const [showBox, setShowBox] = useState();
   // 渲染配置
-  var typeConfig = {
+  const typeConfig = {
     layout: {
       left: ['display', 'default'],
       right: ['default', 'display'],
@@ -95,51 +94,51 @@ var CollapseLayout = function CollapseLayout(props) {
     }
   };
   // 首字母大写
-  var formatterType = function formatterType(str) {
-    var newStr = str.slice(0, 1).toUpperCase() + str.slice(1);
+  const formatterType = str => {
+    const newStr = str.slice(0, 1).toUpperCase() + str.slice(1);
     return newStr;
   };
   // 计算方位
-  var hangWH = function hangWH() {
-    var wH = 'width';
+  const hangWH = () => {
+    let wH = 'width';
     if (type === 'top' || type === 'bottom') {
       wH = 'height';
     }
     return wH;
   };
   // 收缩容器的样式
-  var handDisplayStyle = function handDisplayStyle() {
-    var json = {};
-    var collapseL = (showBox ? constData.current.zoomLength : 0) + unit; // 收缩长度
-    var wH = hangWH();
+  const handDisplayStyle = () => {
+    const json = {};
+    const collapseL = (showBox ? constData.current.zoomLength : 0) + unit; // 收缩长度
+    const wH = hangWH();
     json[wH] = collapseL;
     json['transitionDuration'] = "".concat(duration, "ms");
     return json;
   };
   // 收缩容器的样式,里面的样式
-  var handDisplayShowStyle = function handDisplayShowStyle() {
-    var json = {};
-    var direction = "margin".concat(formatterType(type));
-    var wH = hangWH();
+  const handDisplayShowStyle = () => {
+    const json = {};
+    const direction = "margin".concat(formatterType(type));
+    const wH = hangWH();
     json[wH] = constData.current.zoomLength + unit;
     json[direction] = (showBox ? 0 : constData.current.zoomLength) + unit;
     json['transitionDuration'] = "".concat(duration, "ms");
     return json;
   };
   // 自适应容器的样式
-  var handDefaultStyle = function handDefaultStyle() {
-    var json = {};
-    var wH = hangWH();
-    var collapseL = showBox ? constData.current.zoomLength : 0; // 收缩长度
+  const handDefaultStyle = () => {
+    const json = {};
+    const wH = hangWH();
+    const collapseL = showBox ? constData.current.zoomLength : 0; // 收缩长度
     json[wH] = "calc(100% - ".concat(collapseL + spacing).concat(unit);
-    var direction = "margin".concat(formatterType(type));
+    const direction = "margin".concat(formatterType(type));
     json[direction] = spacing + unit;
     json['transitionDuration'] = "".concat(duration, "ms");
     return json;
   };
   // 布局
-  var Layout = function Layout() {
-    return typeConfig.layout[type].map(function (key, idx) {
+  const Layout = () => {
+    return typeConfig.layout[type].map((key, idx) => {
       switch (key) {
         case 'display':
           // 可收缩的
@@ -168,23 +167,23 @@ var CollapseLayout = function CollapseLayout(props) {
     });
   };
   /** 点击切换按钮 */
-  var clickBtn = function clickBtn() {
+  const clickBtn = () => {
     setShowBox(!showBox);
     onClickBtn && onClickBtn(!showBox);
   };
   /** 鼠标按下事件 */
-  var onmousedown = function onmousedown(e) {
+  const onmousedown = e => {
     constData.current.downPos.pageX = e.pageX;
     constData.current.downPos.pageY = e.pageY;
-    var displayRefOutsideDom = displayRefOutside.current;
-    var displayRefDom = displayRef.current;
-    var btnRefDom = btnRef.current;
-    var comRefDom = comRef.current;
+    const displayRefOutsideDom = displayRefOutside.current;
+    const displayRefDom = displayRef.current;
+    const btnRefDom = btnRef.current;
+    const comRefDom = comRef.current;
     if (!displayRefDom || !displayRefOutsideDom || !btnRefDom || !comRefDom) return;
-    var displayRefOutsideDomRect = displayRefOutsideDom.getBoundingClientRect();
-    var displayRefDomRect = displayRefDom.getBoundingClientRect();
-    var btnRefDomRect = btnRefDom.getBoundingClientRect();
-    var comRefDomRect = comRefDom.getBoundingClientRect();
+    const displayRefOutsideDomRect = displayRefOutsideDom.getBoundingClientRect();
+    const displayRefDomRect = displayRefDom.getBoundingClientRect();
+    const btnRefDomRect = btnRefDom.getBoundingClientRect();
+    const comRefDomRect = comRefDom.getBoundingClientRect();
     constData.current.displayRefOutsideDomRect = displayRefOutsideDomRect;
     constData.current.displayRefDomRect = displayRefDomRect;
     constData.current.btnRefDomRect = btnRefDomRect;
@@ -194,18 +193,18 @@ var CollapseLayout = function CollapseLayout(props) {
     window.addEventListener('mouseup', onmouseup);
   };
   /** 鼠标移动 */
-  var onmousemove = function onmousemove(e) {
-    var displayRefOutsideDom = displayRefOutside.current;
-    var displayRefDom = displayRef.current;
-    var defaultRefDom = defaultRef.current;
-    var btnRefDom = btnRef.current;
+  const onmousemove = e => {
+    const displayRefOutsideDom = displayRefOutside.current;
+    const displayRefDom = displayRef.current;
+    const defaultRefDom = defaultRef.current;
+    const btnRefDom = btnRef.current;
     if (!displayRefDom || !displayRefOutsideDom || !btnRefDom || !defaultRefDom) return;
-    var displayRefOutsideDomRect = constData.current.displayRefOutsideDomRect;
-    var comRefDomRect = constData.current.comRefDomRect;
+    const displayRefOutsideDomRect = constData.current.displayRefOutsideDomRect;
+    const comRefDomRect = constData.current.comRefDomRect;
     switch (type) {
       case 'left':
-        var moveX = e.pageX - constData.current.downPos.pageX;
-        var widthHand = displayRefOutsideDomRect.width + moveX;
+        const moveX = e.pageX - constData.current.downPos.pageX;
+        const widthHand = displayRefOutsideDomRect.width + moveX;
         if (comRefDomRect.width - widthHand < minDragLength || widthHand < minDragLength) return;
         displayRefOutsideDom.style.width = "".concat(widthHand, "px");
         displayRefDom.style.width = "".concat(widthHand, "px");
@@ -214,8 +213,8 @@ var CollapseLayout = function CollapseLayout(props) {
         constData.current.zoomLength = widthHand;
         break;
       case 'right':
-        var moveXR = e.pageX - constData.current.downPos.pageX;
-        var widthHandR = displayRefOutsideDomRect.width - moveXR;
+        const moveXR = e.pageX - constData.current.downPos.pageX;
+        const widthHandR = displayRefOutsideDomRect.width - moveXR;
         if (comRefDomRect.width - widthHandR < minDragLength || widthHandR < minDragLength) return;
         displayRefOutsideDom.style.width = "".concat(widthHandR, "px");
         displayRefDom.style.width = "".concat(widthHandR, "px");
@@ -224,8 +223,8 @@ var CollapseLayout = function CollapseLayout(props) {
         constData.current.zoomLength = widthHandR;
         break;
       case 'top':
-        var moveY = e.pageY - constData.current.downPos.pageY;
-        var heightHand = displayRefOutsideDomRect.height + moveY;
+        const moveY = e.pageY - constData.current.downPos.pageY;
+        const heightHand = displayRefOutsideDomRect.height + moveY;
         if (comRefDomRect.height - heightHand < minDragLength || heightHand < minDragLength) return;
         displayRefOutsideDom.style.height = "".concat(heightHand, "px");
         displayRefDom.style.height = "".concat(heightHand, "px");
@@ -234,8 +233,8 @@ var CollapseLayout = function CollapseLayout(props) {
         constData.current.zoomLength = heightHand;
         break;
       case 'bottom':
-        var moveYB = e.pageY - constData.current.downPos.pageY;
-        var heightHandB = displayRefOutsideDomRect.height - moveYB;
+        const moveYB = e.pageY - constData.current.downPos.pageY;
+        const heightHandB = displayRefOutsideDomRect.height - moveYB;
         if (comRefDomRect.height - heightHandB < minDragLength || heightHandB < minDragLength) return;
         displayRefOutsideDom.style.height = "".concat(heightHandB, "px");
         displayRefDom.style.height = "".concat(heightHandB, "px");
@@ -246,8 +245,8 @@ var CollapseLayout = function CollapseLayout(props) {
     }
   };
   /** 鼠标抬起 */
-  var onmouseup = function onmouseup() {
-    var comRefDom = comRef.current;
+  const onmouseup = () => {
+    const comRefDom = comRef.current;
     comRefDom.classList.remove("".concat($prefixCls, "-collapse-layout-move"));
     window.removeEventListener('mousemove', onmousemove);
     window.removeEventListener('mouseup', onmouseup);
@@ -255,15 +254,17 @@ var CollapseLayout = function CollapseLayout(props) {
   /**
    * 展开收起按钮
    * */
-  var handBtn = function handBtn() {
-    var _style;
+  const handBtn = () => {
     /**
      * 计算后的展示文字
      */
-    var computeLabel = showBox ? showLabel : hideLabel;
+    const computeLabel = showBox ? showLabel : hideLabel;
     return jsxs("div", Object.assign({
       className: "collapse-layout-click collapse-layout-click-label-".concat(!!computeLabel),
-      style: (_style = {}, _defineProperty(_style, type, "".concat(showBox ? constData.current.zoomLength : 0).concat(unit)), _defineProperty(_style, "transitionDuration", "".concat(duration, "ms")), _style),
+      style: {
+        [type]: "".concat(showBox ? constData.current.zoomLength : 0).concat(unit),
+        transitionDuration: "".concat(duration, "ms")
+      },
       ref: btnRef
     }, {
       children: [jsxs("div", Object.assign({
@@ -272,18 +273,22 @@ var CollapseLayout = function CollapseLayout(props) {
       }, {
         children: [computeLabel && jsx("span", {
           children: computeLabel
-        }), showBox ? jsx(DoubleLeft, {
+        }), showBox ? jsx(LeftTriangleF, {
           className: "collapse-layout-icon-transform-".concat(type)
-        }) : jsx(DoubleRight, {
+        }) : jsx(RightTriangleF, {
           className: "collapse-layout-icon-transform-".concat(type)
-        })]
+        }), jsx("span", Object.assign({
+          className: 'bg-svg'
+        }, {
+          children: jsx(SvgDrag, {})
+        }))]
       })), jsx("div", {
         className: 'drag-line',
         onMouseDown: onmousedown
       })]
     }));
   };
-  useEffect(function () {
+  useEffect(() => {
     setShowBox(open);
   }, [open]);
   return jsxs("div", Object.assign({

package/ColorPicker/index.js

@@ -1,8 +1,8 @@
-import { S as SketchPicker } from '../_verture/index-024bbc9b.js';
-export { C as ChromePicker, a as CompactPicker, b as SwatchesPicker, S as default } from '../_verture/index-024bbc9b.js';
+import { S as SketchPicker } from '../_verture/index-775ad32d.js';
+export { C as ChromePicker, a as CompactPicker, b as SwatchesPicker, S as default } from '../_verture/index-775ad32d.js';
 import 'react/jsx-runtime';
 import 'react-color';
 import 'clsx';
-import '../_verture/constant-0d9802f7.js';
+import '../_verture/constant-5317fc89.js';
 import '../_verture/style-inject.es-300983ab.js';
 import 'react';