@kep-platform/basic-component 0.0.44 → 0.0.46

package/dist/Table/Table.js

@@ -1,5 +1,6 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["render"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -18,6 +19,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import CaretDownOutlined from '@ant-design/icons/CaretDownOutlined';
 import CaretUpOutlined from '@ant-design/icons/CaretUpOutlined';
 import FilterOutlined from '@ant-design/icons/FilterOutlined';
@@ -32,59 +34,32 @@ import { List, ListItem } from "../List";
 import { Pagination } from "../Pagination";
 import { Popup } from "../PopupBox";
 import { Space } from "../Space";
-var TableContainer = styled.div.withConfig({
-  displayName: "TableContainer",
-  componentId: "basic-component-347b__sc-12r61fm-0"
-})([""]);
-var TableTitle = styled.h5.withConfig({
-  displayName: "TableTitle",
-  componentId: "basic-component-347b__sc-12r61fm-1"
-})(["font-weight:600;padding:var(--kep-platform-padding-sm);"]);
-var TableToolbar = styled.div.withConfig({
-  displayName: "TableToolbar",
-  componentId: "basic-component-347b__sc-12r61fm-2"
-})(["text-align:right;padding:var(--kep-platform-padding-sm);"]);
-var TableHeaderRow = styled(Columns).withConfig({
-  displayName: "TableHeaderRow",
-  componentId: "basic-component-347b__sc-12r61fm-3"
-})(["border-bottom:var(--kep-platform-line-width) solid var(--kep-platform-color-table-border);position:sticky;top:0;left:0;z-index:calc(var(--kep-platform-z-index-fixed) + 5);& ", "{background-color:var(--kep-platform-header-bg);font-weight:600;position:sticky;&:not(:last-child):after{content:'';width:1px;height:calc(100% - 2 * var(--kep-platform-padding-xs));position:absolute;top:var(--kep-platform-padding-xs);right:0;background-color:var(--kep-platform-color-border-secondary);}}"], Column);
-var TableBody = styled(List).withConfig({
-  displayName: "TableBody",
-  componentId: "basic-component-347b__sc-12r61fm-4"
-})([""]);
+var TableContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));
+var TableTitle = styled.h5(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    font-weight: 600;\n    padding: var(--kep-platform-padding-sm);\n"])));
+var TableToolbar = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    text-align: right;\n    padding: var(--kep-platform-padding-sm);\n"])));
+var TableHeaderRow = styled(Columns)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    border-bottom: var(--kep-platform-line-width) solid var(--kep-platform-color-table-border);\n    position: sticky;\n    top: 0;\n    left: 0;\n    z-index: calc(var(--kep-platform-z-index-fixed) + 5);\n    & ", " {\n        background-color: var(--kep-platform-header-bg);\n        font-weight: 600;\n        position: sticky;\n        &:not(:last-child):after {\n            content: '';\n            width: 1px;\n            height: calc(100% - 2 * var(--kep-platform-padding-xs));\n            position: absolute;\n            top: var(--kep-platform-padding-xs);\n            right: 0;\n            background-color: var(--kep-platform-color-border-secondary);\n        }\n    }\n"])), Column);
+var TableBody = styled(List)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([""])));
 var TableBodyRow = styled(ListItem).withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !['isActive'].includes(prop);
   }
-}).withConfig({
-  displayName: "TableBodyRow",
-  componentId: "basic-component-347b__sc-12r61fm-5"
-})(["& ", "{", "}"], Column, function (props) {
+})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    & ", " {\n        ", "\n    }\n"])), Column, function (props) {
   if (props.isActive) {
-    return css(["background-color:var(--kep-platform-color-bg-active) !important;"]);
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n                    background-color: var(--kep-platform-color-bg-active) !important;\n                "])));
   }
 });
-var TableContent = styled.div.withConfig({
-  displayName: "TableContent",
-  componentId: "basic-component-347b__sc-12r61fm-6"
-})(["position:relative;overflow:auto;border-radius:var(--kep-platform-border-radius);box-shadow:var(--kep-platform-box-shadow-tertiary);", ""], function (props) {
+var TableContent = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    position: relative;\n    overflow: auto;\n    border-radius: var(--kep-platform-border-radius);\n    box-shadow: var(--kep-platform-box-shadow-tertiary);\n    ", "\n"])), function (props) {
   var _props$scroll;
   if ((_props$scroll = props.scroll) !== null && _props$scroll !== void 0 && _props$scroll.y) {
-    return css(["height:", "px;"], props.scroll.y);
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n                height: ", "px;\n            "])), props.scroll.y);
   }
 });
-var SortIconList = styled(List).withConfig({
-  displayName: "SortIconList",
-  componentId: "basic-component-347b__sc-12r61fm-7"
-})([""]);
+var SortIconList = styled(List)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral([""])));
 var SortIconListItem = styled(ListItem).withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !['active'].includes(prop);
   }
-}).withConfig({
-  displayName: "SortIconListItem",
-  componentId: "basic-component-347b__sc-12r61fm-8"
-})(["height:10px;line-height:10px;font-size:10px;cursor:pointer;user-select:none;color:", ";"], function (props) {
+})(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    height: 10px;\n    line-height: 10px;\n    font-size: 10px;\n    cursor: pointer;\n    user-select: none;\n    color: ", ";\n"])), function (props) {
   return props.active ? 'var(--kep-platform-color-primary)' : 'currentColor';
 });
 var SortIconGroup = function SortIconGroup(_ref) {
@@ -115,14 +90,8 @@ var SortIconGroup = function SortIconGroup(_ref) {
     active: sorter === 'desc'
   }, /*#__PURE__*/React.createElement(CaretDownOutlined, null)));
 };
-var ColumnTitle = styled.div.withConfig({
-  displayName: "ColumnTitle",
-  componentId: "basic-component-347b__sc-12r61fm-9"
-})([""]);
-var FilterValue = styled.span.withConfig({
-  displayName: "FilterValue",
-  componentId: "basic-component-347b__sc-12r61fm-10"
-})(["color:var(--kep-platform-color-primary);cursor:pointer;padding:var(--kep-platform-padding-xxs);border-radius:var(--kep-platform-border-radius-sm);&:hover{background-color:var(--kep-platform-color-bg-active);}"]);
+var ColumnTitle = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral([""])));
+var FilterValue = styled.span(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    color: var(--kep-platform-color-primary);\n    cursor: pointer;\n    padding: var(--kep-platform-padding-xxs);\n    border-radius: var(--kep-platform-border-radius-sm);\n    &:hover {\n        background-color: var(--kep-platform-color-bg-active);\n    }\n"])));
 var ColumnTitleController = function ColumnTitleController(_ref2) {
   var onSorterChange = _ref2.onSorterChange,
     title = _ref2.title,

package/dist/Tag/Tag.js

@@ -1,13 +1,12 @@
 var _excluded = ["children"];
+var _templateObject;
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import React from 'react';
 import styled from 'styled-components';
 import theme from "../__consts/theme";
-var StyledTag = styled.span.withConfig({
-  displayName: "StyledTag",
-  componentId: "basic-component-347b__sc-14fuyeq-0"
-})(["background-color:", ";color:1px soild ", ";"], theme.defaultTagBackgroundColor, theme.defaultTagColor);
+var StyledTag = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  color: 1px soild ", ";\n"])), theme.defaultTagBackgroundColor, theme.defaultTagColor);
 var Tag = function Tag(_ref) {
   var children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);

package/dist/Tree/MainProperties.js

@@ -1,14 +1,10 @@
+var _templateObject, _templateObject2;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import React, { forwardRef } from 'react';
 import styled from 'styled-components';
 import { Flex, FlexItem } from "../Flex";
-export var MainArea = styled(FlexItem).withConfig({
-  displayName: "MainArea",
-  componentId: "basic-component-347b__sc-u1pspr-0"
-})(["overflow:hidden;position:sticky;left:0;z-index:20;align-self:stretch;display:flex;align-items:center;border-right:var(--kep-platform-line-width) var(--kep-platform-line-type) var(--kep-platform-color-border-secondary);border-bottom:var(--kep-platform-line-width) var(--kep-platform-line-type) var(--kep-platform-color-border-secondary);"]);
-var PropertiesArea = styled(FlexItem).withConfig({
-  displayName: "PropertiesArea",
-  componentId: "basic-component-347b__sc-u1pspr-1"
-})([""]);
+export var MainArea = styled(FlexItem)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    overflow: hidden;\n    position: sticky;\n    left: 0;\n    z-index: 20;\n    align-self: stretch;\n    display: flex;\n    align-items: center;\n    border-right: var(--kep-platform-line-width) var(--kep-platform-line-type)\n        var(--kep-platform-color-border-secondary);\n    border-bottom: var(--kep-platform-line-width) var(--kep-platform-line-type)\n        var(--kep-platform-color-border-secondary);\n"])));
+var PropertiesArea = styled(FlexItem)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
 /* 有属性就渲染属性，没有属性就不处理 */
 export var MainProperty = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var mainWidth = _ref.mainWidth,

package/dist/Tree/Tree.js

@@ -1,7 +1,9 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { observer } from 'mobx-react-lite';
 import React, { useCallback, useMemo, useRef } from 'react';
 import styled, { css } from 'styled-components';
@@ -15,29 +17,20 @@ var TreeContainer = styled('div').withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !['bordered'].includes(prop);
   }
-}).withConfig({
-  displayName: "TreeContainer",
-  componentId: "basic-component-347b__sc-n4lkq9-0"
-})(["position:relative;overflow-x:auto;border:1px solid var(--kep-platform-color-border-secondary);border-width:", ";"], function (props) {
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n    overflow-x: auto;\n    border: 1px solid var(--kep-platform-color-border-secondary);\n    border-width: ", ";\n"])), function (props) {
   return props.bordered ? '1px' : 0;
 });
-var TreeBody = styled(List).withConfig({
-  displayName: "TreeBody",
-  componentId: "basic-component-347b__sc-n4lkq9-1"
-})([""]);
+var TreeBody = styled(List)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
 var TreeHeader = styled('div').withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !['width', 'isFlex'].includes(prop);
   }
-}).withConfig({
-  displayName: "TreeHeader",
-  componentId: "basic-component-347b__sc-n4lkq9-2"
-})(["", " background-color:var(--kep-platform-header-bg);& ", ",& ", "{background-color:var(--kep-platform-header-bg);font-weight:600;position:sticky;}"], function (props) {
+})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    ", "\n    background-color: var(--kep-platform-header-bg);\n    & ", ",& ", " {\n        background-color: var(--kep-platform-header-bg);\n        font-weight: 600;\n        position: sticky;\n    }\n"])), function (props) {
   if (props.isFlex) {
-    return css(["width:100%;"]);
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n                width: 100%;\n            "])));
   }
   if (props.width) {
-    return css(["width:", "px;"], props.width);
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n                width: ", "px;\n            "])), props.width);
   }
 }, Column, MainArea);
 var rootLevel = -1;

package/dist/Tree/TreeNode.js

@@ -1,9 +1,11 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { CaretRightOutlined } from '@ant-design/icons';
 import { observer } from 'mobx-react-lite';
 import React, { useCallback, useMemo, useState } from 'react';
@@ -18,36 +20,24 @@ var ExpandedIcon = styled(CaretRightOutlined).withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !['expanded'].includes(prop);
   }
-}).withConfig({
-  displayName: "ExpandedIcon",
-  componentId: "basic-component-347b__sc-tzoomn-0"
-})(["transition:transform 0.5s;display:block;user-select:none;", ";font-size:var(--kep-platform-font-size-sm);&:hover{color:var(--kep-platform-color-primary);}"], function (props) {
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    transition: transform 0.5s;\n    display: block;\n    user-select: none;\n    ", ";\n    font-size: var(--kep-platform-font-size-sm);\n    &:hover {\n        color: var(--kep-platform-color-primary);\n    }\n"])), function (props) {
   if (props.expanded) {
-    return css(["transform:rotate(90deg);"]);
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n                transform: rotate(90deg);\n            "])));
   }
 });
-var TitleArea = styled(FlexItem).withConfig({
-  displayName: "TitleArea",
-  componentId: "basic-component-347b__sc-tzoomn-1"
-})([""]);
-var TreeNode = styled(ListItem).withConfig({
-  displayName: "TreeNode",
-  componentId: "basic-component-347b__sc-tzoomn-2"
-})(["", " & ", ",& ", "{background-color:var(--kep-platform-color-bg-base);}&:hover{background-color:var(--kep-platform-color-bg-hover);& ", ",& ", "{background-color:var(--kep-platform-color-bg-hover);}& ", "{overflow-x:auto;& > ", "{width:auto;}}& ", "{overflow-x:auto;}}", ""], function (props) {
+var TitleArea = styled(FlexItem)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([""])));
+var TreeNode = styled(ListItem)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    ", "\n    & ", ",& ", " {\n        background-color: var(--kep-platform-color-bg-base);\n    }\n    /* \u5904\u7406\u9F20\u6807\u79FB\u5165 */\n    &:hover {\n        background-color: var(--kep-platform-color-bg-hover);\n        & ", ", & ", " {\n            background-color: var(--kep-platform-color-bg-hover);\n        }\n        & ", " {\n            overflow-x: auto;\n            & > ", " {\n                width: auto;\n            }\n        }\n        & ", " {\n            overflow-x: auto;\n        }\n    }\n    /* \u5904\u7406\u8282\u70B9\u9009\u4E2D */\n    ", "\n"])), function (props) {
   if (props.width) {
-    return css(["width:", "px;"], props.width);
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n                width: ", "px;\n            "])), props.width);
   }
 }, Column, MainArea, Column, MainArea, MainArea, Flex, TitleArea, function (props) {
   if (props.selected) {
-    return css(["background-color:var(--kep-platform-color-bg-active) !important;color:var(--kep-platform-color-text-active) !important;& ", ",& ", "{background-color:var(--kep-platform-color-bg-active) !important;color:var(--kep-platform-color-text-active) !important;}& ", "{overflow-x:auto;& > ", "{width:auto;}}& ", "{overflow-x:auto;}"], Column, MainArea, MainArea, Flex, TitleArea);
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n                background-color: var(--kep-platform-color-bg-active) !important;\n                color: var(--kep-platform-color-text-active) !important;\n                & ", ", & ", " {\n                    background-color: var(--kep-platform-color-bg-active) !important;\n                    color: var(--kep-platform-color-text-active) !important;\n                }\n                & ", " {\n                    overflow-x: auto;\n                    & > ", " {\n                        width: auto;\n                    }\n                }\n                & ", " {\n                    overflow-x: auto;\n                }\n            "])), Column, MainArea, MainArea, Flex, TitleArea);
   }
 });
-var TreeNodeGroupNode = styled.li.withConfig({
-  displayName: "TreeNodeGroupNode",
-  componentId: "basic-component-347b__sc-tzoomn-3"
-})(["height:40px;line-height:40px;background-color:var(--kep-platform-color-primary);color:var(--kep-platform-color-white);& span{color:var(--kep-platform-color-white) !important;}cursor:pointer;", ""], function (props) {
+var TreeNodeGroupNode = styled.li(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    height: 40px;\n    line-height: 40px;\n    background-color: var(--kep-platform-color-primary);\n    color: var(--kep-platform-color-white);\n    & span {\n        color: var(--kep-platform-color-white) !important;\n    }\n    cursor: pointer;\n    ", "\n"])), function (props) {
   if (props.width) {
-    return css(["width:", "px;"], props.width);
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n                width: ", "px;\n            "])), props.width);
   }
 });
 var TreeNodeGroup = function TreeNodeGroup(props) {

package/dist/Tree/test.js

@@ -1,3 +1,4 @@
+var _templateObject;
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -5,6 +6,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
@@ -110,10 +112,7 @@ var mystore = new MyStore([{
     count: 2
   }]
 }]);
-var Title = styled.div.withConfig({
-  displayName: "Title",
-  componentId: "basic-component-347b__sc-bc9b32-0"
-})(["width:100%;text-align:center;"]);
+var Title = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: 100%;\n    text-align: center;\n"])));
 export default (function () {
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),

package/dist/ViewPort/Ripple.js

@@ -1,18 +1,17 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _templateObject, _templateObject2;
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { makeAutoObservable } from 'mobx';
 import React from 'react';
 import styled, { keyframes } from 'styled-components';
-var rippleAnimation = keyframes(["from{transform:scale(1);}to{transform:scale(4);opacity:0;}"]);
-export var Ripple = styled.div.withConfig({
-  displayName: "Ripple",
-  componentId: "basic-component-347b__sc-zqrqyo-0"
-})(["position:absolute;border-radius:50%;width:10px;height:10px;background-color:#fff0;& > div{position:absolute;left:0;top:0;width:10px;height:10px;background-color:#fff;border-radius:50%;margin-left:-5px;margin-top:-5px;transform:scale(0);animation:", " 500ms linear;}& .first{}& .second{animation-delay:150ms;}"], rippleAnimation);
+var rippleAnimation = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    from {\n        transform: scale(1);\n    }\n    to {\n\n        transform: scale(4);\n        opacity: 0;\n    }\n"])));
+export var Ripple = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: absolute;\n    border-radius: 50%;\n    width: 10px;\n    height: 10px;\n    background-color: #fff0;\n    & > div {\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 10px;\n        height: 10px;\n        background-color: #fff;\n        border-radius: 50%;\n        margin-left: -5px;\n        margin-top: -5px;\n        transform: scale(0);\n        animation: ", " 500ms linear;\n    }\n    & .first {\n    }\n    & .second {\n        animation-delay: 150ms;\n    }\n"])), rippleAnimation);
 export var RippleManagerStore = /*#__PURE__*/function () {
   function RippleManagerStore() {
     _classCallCheck(this, RippleManagerStore);

package/dist/ViewPort/ViewPort.js

@@ -1,22 +1,20 @@
 var _excluded = ["children", "viewPortStore", "onScroll", "onScale"],
   _excluded2 = ["children", "viewPortStore"];
+var _templateObject, _templateObject2;
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { DndContext, useDraggable } from '@dnd-kit/core';
+import { useDebounce } from '@kep-platform/hooks';
+import { runInAction } from 'mobx';
 import { observer } from 'mobx-react-lite';
-import React, { useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import { RippleManagerStore } from "./Ripple";
 import { ViewPortWindow } from "./ViewPortWindow";
-var Container = styled.div.withConfig({
-  displayName: "Container",
-  componentId: "basic-component-347b__sc-1qpmpop-0"
-})(["position:relative;border:1px solid #eee;box-shadow:0 0 7px 0 inset #fefefe;"]);
-var Content = styled.div.withConfig({
-  displayName: "Content",
-  componentId: "basic-component-347b__sc-1qpmpop-1"
-})(["position:absolute;"]);
+var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n    border: 1px solid #eee;\n    box-shadow: 0 0 7px 0 inset #fefefe;\n"])));
+var Content = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: absolute;\n"])));
 var rippleManagerStore = new RippleManagerStore();
 var ViewPortEntity = observer(function (props) {
   var children = props.children,
@@ -25,18 +23,23 @@ var ViewPortEntity = observer(function (props) {
     onScale = props.onScale,
     rest = _objectWithoutProperties(props, _excluded);
   var _useDraggable = useDraggable({
-      id: 'ViewPortEntity'
+      id: 'ViewPortEntity',
+      disabled: viewPortStore.isTransition
     }),
     setNodeRef = _useDraggable.setNodeRef,
     attributes = _useDraggable.attributes,
     listeners = _useDraggable.listeners,
     setActivatorNodeRef = _useDraggable.setActivatorNodeRef,
     transform = _useDraggable.transform;
-  var _ref = useRef(null);
+  var contentRef = useRef(null);
+  var containerRef = useRef(null);
+  var pointerDownTimer = useRef();
   var createRipple = function createRipple(event) {
+    var _containerRef$current;
     event.preventDefault();
     event.stopPropagation();
-    var rect = event.currentTarget.getBoundingClientRect();
+    var rect = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.getBoundingClientRect();
+    if (!rect) return;
     var left = event.clientX - rect.left;
     var top = event.clientY - rect.top;
     rippleManagerStore.addRipple(left, top);
@@ -53,7 +56,7 @@ var ViewPortEntity = observer(function (props) {
     }
   }, [transform]);
   useEffect(function () {
-    var _ref$current;
+    var _contentRef$current;
     function scaleHandler(e) {
       e.stopPropagation();
       e.preventDefault();
@@ -64,35 +67,69 @@ var ViewPortEntity = observer(function (props) {
       }
       onScale === null || onScale === void 0 || onScale(viewPortStore.transform.left, viewPortStore.transform.top, viewPortStore.scale, viewPortStore.ratio);
     }
-    (_ref$current = _ref.current) === null || _ref$current === void 0 || _ref$current.addEventListener('wheel', scaleHandler, {
+    (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 || _contentRef$current.addEventListener('wheel', scaleHandler, {
       passive: false
     });
     return function () {
-      var _ref$current2;
-      (_ref$current2 = _ref.current) === null || _ref$current2 === void 0 || _ref$current2.removeEventListener('wheel', scaleHandler);
+      var _contentRef$current2;
+      (_contentRef$current2 = contentRef.current) === null || _contentRef$current2 === void 0 || _contentRef$current2.removeEventListener('wheel', scaleHandler);
     };
   }, []);
+  var debounceDoubleClick = useDebounce(function (e) {
+    //在transition期间禁止操作
+    if (viewPortStore.isTransition) {
+      return;
+    }
+    //双击的时候取消pointerDown的触发事件
+    if (pointerDownTimer.current) clearTimeout(pointerDownTimer.current);
+    pointerDownTimer.current = null;
+    createRipple(e);
+    var container = containerRef.current;
+    var _container$getBoundin = container.getBoundingClientRect(),
+      left = _container$getBoundin.left,
+      top = _container$getBoundin.top;
+    var offsetLeft = e.clientX - left;
+    var offsetTop = e.clientY - top;
+    if (viewPortStore.scale === 1) {
+      viewPortStore.unfocus();
+    } else viewPortStore.focus(offsetLeft, offsetTop);
+  }, 100);
+  var onContainerDoubleClickHandler = function onContainerDoubleClickHandler(e) {
+    debounceDoubleClick(e);
+  };
+  var onContainerTransitionEnd = useCallback(function () {
+    runInAction(function () {
+      viewPortStore.isTransition = false;
+    });
+  }, []);
+  var onContentPointerDownHandler = useCallback(function (e) {
+    if (viewPortStore.isTransition) return;
+    //鼠标点击的时候，先清除定时器，然后再异步触发pointerDown操作，这样保证doubleClick的优先级高于pointerDown
+    if (pointerDownTimer.current) clearTimeout(pointerDownTimer.current);
+    pointerDownTimer.current = setTimeout(function () {
+      var _onPointerDown, _ref;
+      listeners === null || listeners === void 0 || (_onPointerDown = (_ref = listeners).onPointerDown) === null || _onPointerDown === void 0 || _onPointerDown.call(_ref, e);
+    }, 0);
+  }, [listeners]);
+  var onContentPointerUpHandler = useCallback(function (e) {
+    var _onPointerUp, _ref2;
+    if (viewPortStore.isTransition) return;
+    listeners === null || listeners === void 0 || (_onPointerUp = (_ref2 = listeners).onPointerUp) === null || _onPointerUp === void 0 || _onPointerUp.call(_ref2, e);
+  }, [listeners]);
   return /*#__PURE__*/React.createElement(Container, _extends({
     style: viewPortStore.containerStyle,
-    onPointerDown: createRipple,
-    onDoubleClick: function onDoubleClick(e) {
-      var container = e.currentTarget;
-      var _container$getBoundin = container.getBoundingClientRect(),
-        left = _container$getBoundin.left,
-        top = _container$getBoundin.top;
-      var offsetLeft = e.clientX - left;
-      var offsetTop = e.clientY - top;
-      if (viewPortStore.scale === 1) {
-        viewPortStore.unfocus();
-      } else viewPortStore.focus(offsetLeft, offsetTop);
-    }
+    onDoubleClick: onContainerDoubleClickHandler,
+    onTransitionEnd: onContainerTransitionEnd,
+    ref: containerRef
   }, rest), rippleManagerStore.rippleInfo, /*#__PURE__*/React.createElement(Content, _extends({
     ref: function ref(dom) {
-      _ref.current = dom;
-      setNodeRef(_ref.current);
-      setActivatorNodeRef(_ref.current);
+      contentRef.current = dom;
+      setNodeRef(contentRef.current);
+      setActivatorNodeRef(contentRef.current);
     }
-  }, attributes, listeners, {
+  }, attributes, {
+    onPointerDown: onContentPointerDownHandler,
+    onPointerUp: onContentPointerUpHandler,
     style: viewPortStore.contentStyle
   }), children));
 });

package/dist/ViewPort/ViewPortStore.d.ts

@@ -15,6 +15,7 @@ export declare class ViewPortStore {
     ratio: number;
     isMoving: boolean;
     maxZIndex: number;
+    isTransition: boolean;
     constructor(width?: number, height?: number, ratio?: number);
     get scaleStep(): number;
     increaseScale(): void;

package/dist/ViewPort/ViewPortStore.js

@@ -7,6 +7,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { makeAutoObservable } from 'mobx';
 export var ViewPortStore = /*#__PURE__*/function () {
+  //在动画执行期间，禁止任何鼠标操作
   function ViewPortStore(width, height, ratio) {
     _classCallCheck(this, ViewPortStore);
     _defineProperty(this, "transform", {
@@ -24,6 +25,7 @@ export var ViewPortStore = /*#__PURE__*/function () {
     //缩放比例
     _defineProperty(this, "isMoving", false);
     _defineProperty(this, "maxZIndex", 1);
+    _defineProperty(this, "isTransition", false);
     if (ratio) this.ratio = ratio;
     if (width) this.width = width;
     if (height) this.height = height;
@@ -39,12 +41,14 @@ export var ViewPortStore = /*#__PURE__*/function () {
     value: function increaseScale() {
       this.setScale(this.scale + this.scaleStep);
       this.setTransform(this.transform.left, this.transform.top);
+      this.isTransition = true;
     }
   }, {
     key: "decreaseScale",
     value: function decreaseScale() {
       this.setScale(this.scale - this.scaleStep);
       this.setTransform(this.transform.left, this.transform.top);
+      this.isTransition = true;
     }
   }, {
     key: "validScale",
@@ -97,12 +101,14 @@ export var ViewPortStore = /*#__PURE__*/function () {
     value: function focus(left, top) {
       this.setScale(1);
       this.setTransform((1 - this.ratio) * left + this.offsetLeft, (1 - this.ratio) * top + this.offsetTop);
+      this.isTransition = true;
     }
   }, {
     key: "unfocus",
     value: function unfocus() {
       this.setScale(1 / this.ratio);
       this.setTransform(0, 0);
+      this.isTransition = true;
     }
   }, {
     key: "move",
@@ -141,6 +147,7 @@ export var ViewPortStore = /*#__PURE__*/function () {
     get: function get() {
       return this.posInViewPort(0, 0, this.width, this.height);
     }
+
     /* 这个函数比较重要，因为你想要让content中的元素在视窗相对位置显示，这个函数会帮你计算偏移量和缩放量，直接得出你的元素应该在content中的偏移量 */
   }, {
     key: "posInViewPort",

package/dist/ViewPort/ViewPortWindow.d.ts

@@ -34,6 +34,7 @@ export declare class ViewPortWindowStore extends WindowStore {
     centerDisplay(): void;
     fullscreenWindow(func?: () => void): void;
     constructor(id: string, viewPort: ViewPortStore, onClosedHandler?: (id: string) => void);
+    get disabled(): boolean;
 }
 export declare const ViewPortWindow: React.FunctionComponent<WindowProps & {
     window: ViewPortWindowStore;

package/dist/ViewPort/ViewPortWindow.js

@@ -34,7 +34,8 @@ export var ViewPortWindowStore = /*#__PURE__*/function (_WindowStore) {
       style: override,
       controll: override,
       focus: override,
-      centerDisplay: action
+      centerDisplay: action,
+      disabled: override
     });
     return _this;
   }
@@ -159,6 +160,11 @@ export var ViewPortWindowStore = /*#__PURE__*/function (_WindowStore) {
       func === null || func === void 0 || func();
       this.fullscreenPos = this.viewPortStore.viewPortRect;
     }
+  }, {
+    key: "disabled",
+    get: function get() {
+      return this.viewPortStore.isTransition || this.isTransition;
+    }
   }]);
   return ViewPortWindowStore;
 }(WindowStore);

package/dist/ViewPort/test.js

@@ -1,4 +1,6 @@
+var _templateObject;
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
@@ -43,10 +45,7 @@ var WindowManager = /*#__PURE__*/function () {
   return WindowManager;
 }();
 var windowManager = new WindowManager();
-var StyledViewPort = styled(ViewPort).withConfig({
-  displayName: "StyledViewPort",
-  componentId: "basic-component-347b__sc-1b1xrkc-0"
-})(["border:1px solid #eee;"]);
+var StyledViewPort = styled(ViewPort)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    border: 1px solid #eee;\n"])));
 export default observer(function Test() {
   useEffect(function () {
     function setWidthHeight() {