@kep-platform/basic-component 0.0.43 → 0.0.45

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.d.ts

@@ -9,7 +9,6 @@ type ViewPortProps = {
 declare function ViewPort(props: ViewPortProps): React.JSX.Element;
 declare namespace ViewPort {
     var Window: React.FunctionComponent<import("../Window/Window").WindowProps & {
-        viewPortStore: ViewPortStore;
         window: import("./ViewPortWindow").ViewPortWindowStore;
     }>;
 }

package/dist/ViewPort/ViewPort.js

@@ -1,22 +1,18 @@
 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 { observer } from 'mobx-react-lite';
 import React, { 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,

package/dist/ViewPort/ViewPortStore.d.ts

@@ -37,6 +37,13 @@ export declare class ViewPortStore {
         height: number;
         scale: number;
     };
+    posInViewPort(left: number, top: number, width: number, height: number): {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        scale: number;
+    };
     get containerStyle(): CSSProperties;
     get info(): string;
 }

package/dist/ViewPort/ViewPortStore.js

@@ -131,20 +131,25 @@ export var ViewPortStore = /*#__PURE__*/function () {
         width: this.width * this.ratio + 'px',
         height: this.height * this.ratio + 'px',
         transformOrigin: 'left top',
-        transition: this.isMoving ? 'none' : 'all 0.5s',
+        transition: this.isMoving ? 'none' : 'all 1s ease-in-out',
         background: '#188fff67',
         cursor: this.isMoving ? 'grab' : 'default'
       };
     }
-    /* 计算得到实际显示区域的偏移量 */
   }, {
     key: "viewPortRect",
     get: function get() {
+      return this.posInViewPort(0, 0, this.width, this.height);
+    }
+    /* 这个函数比较重要，因为你想要让content中的元素在视窗相对位置显示，这个函数会帮你计算偏移量和缩放量，直接得出你的元素应该在content中的偏移量 */
+  }, {
+    key: "posInViewPort",
+    value: function posInViewPort(left, top, width, height) {
       return {
-        left: -this.transform.left + this.offsetLeft,
-        top: -this.transform.top + this.offsetTop,
-        width: this.width,
-        height: this.height,
+        left: (-this.transform.left + this.offsetLeft + left) / this.scale,
+        top: (-this.transform.top + this.offsetTop + top) / this.scale,
+        width: width / this.scale,
+        height: height / this.scale,
         scale: this.scale
       };
     }

package/dist/ViewPort/ViewPortWindow.d.ts

@@ -5,7 +5,7 @@ import { WindowProps } from '../Window/Window';
 import { WindowControllerType } from '../Window/WindowController';
 import { ViewPortStore } from './ViewPortStore';
 export declare class ViewPortWindowStore extends WindowStore {
-    scale: number;
+    viewPortStore: ViewPortStore;
     get style(): {
         left: string;
         top: string;
@@ -13,17 +13,8 @@ export declare class ViewPortWindowStore extends WindowStore {
         height: string;
         zIndex: number;
         transform: string;
+        transformOrigin: string;
         transition: string;
-        transformOrigin?: undefined;
-    } | {
-        left: string;
-        top: string;
-        width: number;
-        height: number;
-        zIndex: number;
-        transform: string;
-        transition: string;
-        transformOrigin?: undefined;
     } | {
         left: string;
         top: string;
@@ -31,17 +22,19 @@ export declare class ViewPortWindowStore extends WindowStore {
         height: string;
         zIndex: number;
         transform: string;
-        transformOrigin: string;
         transition: string;
+        transformOrigin?: undefined;
     };
+    focus(): void;
     calculateTransform(transform: Transform): {
         x: number;
         y: number;
     };
     controll(transform: Transform, type: WindowControllerType): void;
-    constructor(id: string, onClosedHandler?: (id: string) => void);
+    centerDisplay(): void;
+    fullscreenWindow(func?: () => void): void;
+    constructor(id: string, viewPort: ViewPortStore, onClosedHandler?: (id: string) => void);
 }
 export declare const ViewPortWindow: React.FunctionComponent<WindowProps & {
-    viewPortStore: ViewPortStore;
     window: ViewPortWindowStore;
 }>;

package/dist/ViewPort/ViewPortWindow.js

@@ -1,4 +1,4 @@
-var _excluded = ["viewPortStore", "window"];
+var _excluded = ["window"];
 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 _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; }
@@ -16,7 +16,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 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); }
-import { makeObservable, observable, override, runInAction } from 'mobx';
+import { action, makeObservable, override } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import React, { useEffect } from 'react';
 import { WindowStore } from "../Window";
@@ -24,15 +24,17 @@ import { default as Window } from "../Window/Window";
 export var ViewPortWindowStore = /*#__PURE__*/function (_WindowStore) {
   _inherits(ViewPortWindowStore, _WindowStore);
   var _super = _createSuper(ViewPortWindowStore);
-  function ViewPortWindowStore(id, onClosedHandler) {
+  function ViewPortWindowStore(id, viewPort, onClosedHandler) {
     var _this;
     _classCallCheck(this, ViewPortWindowStore);
     _this = _super.call(this, id, onClosedHandler);
-    _defineProperty(_assertThisInitialized(_this), "scale", 1);
+    _defineProperty(_assertThisInitialized(_this), "viewPortStore", void 0);
+    _this.viewPortStore = viewPort;
     makeObservable(_assertThisInitialized(_this), {
       style: override,
-      scale: observable,
-      controll: override
+      controll: override,
+      focus: override,
+      centerDisplay: action
     });
     return _this;
   }
@@ -47,6 +49,7 @@ export var ViewPortWindowStore = /*#__PURE__*/function (_WindowStore) {
           height: this.height + 'px',
           zIndex: this.zIndex,
           transform: 'scale(0)',
+          transformOrigin: 'center center',
           transition: 'all 0.5s ease-out'
         };
       }
@@ -54,21 +57,22 @@ export var ViewPortWindowStore = /*#__PURE__*/function (_WindowStore) {
         return {
           left: this.minimizePos.left + 'px',
           top: this.minimizePos.top + 'px',
-          width: 0,
-          height: 0,
+          width: this.width + 'px',
+          height: this.height + 'px',
           zIndex: this.zIndex,
           transform: 'scale(0)',
-          transition: 'all 0.5s ease-out'
+          transformOrigin: 'left top',
+          transition: "all ".concat(0.5 + this.viewPortStore.scale, "s ease-out")
         };
       }
       if (this.fullscreen) {
         return {
-          left: this.fullscreenPos.left / this.scale + 'px',
-          top: this.fullscreenPos.top / this.scale + 'px',
-          width: this.fullscreenPos.width + 'px',
-          height: this.fullscreenPos.height + 'px',
+          left: this.fullscreenPos.left + 'px',
+          top: this.fullscreenPos.top + 'px',
+          width: this.fullscreenPos.width * this.viewPortStore.scale + 'px',
+          height: this.fullscreenPos.height * this.viewPortStore.scale + 'px',
           zIndex: this.zIndex,
-          transform: "scale(".concat(1 / this.scale, ") "),
+          transform: "scale(".concat(1 / this.viewPortStore.scale, ")"),
           transformOrigin: 'left top',
           transition: 'width height 0.5s ease-out'
         };
@@ -94,13 +98,18 @@ export var ViewPortWindowStore = /*#__PURE__*/function (_WindowStore) {
         transition: 'all 0.5s ease-out'
       };
     }
+  }, {
+    key: "focus",
+    value: function focus() {
+      this.zIndex = ++this.viewPortStore.maxZIndex;
+    }
   }, {
     key: "calculateTransform",
     value: function calculateTransform(transform) {
       var _this$transform, _this$transform2;
       return {
-        x: (transform.x - (((_this$transform = this.transform) === null || _this$transform === void 0 ? void 0 : _this$transform.x) || 0)) / this.scale,
-        y: (transform.y - (((_this$transform2 = this.transform) === null || _this$transform2 === void 0 ? void 0 : _this$transform2.y) || 0)) / this.scale
+        x: (transform.x - (((_this$transform = this.transform) === null || _this$transform === void 0 ? void 0 : _this$transform.x) || 0)) / this.viewPortStore.scale,
+        y: (transform.y - (((_this$transform2 = this.transform) === null || _this$transform2 === void 0 ? void 0 : _this$transform2.y) || 0)) / this.viewPortStore.scale
       };
     }
   }, {
@@ -134,33 +143,32 @@ export var ViewPortWindowStore = /*#__PURE__*/function (_WindowStore) {
       }
       this.transform = transform;
     }
+  }, {
+    key: "centerDisplay",
+    value: function centerDisplay() {
+      this.focus();
+      var rect = this.viewPortStore.viewPortRect;
+      this.left = rect.left + Math.max(0, rect.width - this.width) / 2;
+      this.top = rect.top + Math.max(0, rect.height - this.height) / 2;
+    }
+  }, {
+    key: "fullscreenWindow",
+    value: function fullscreenWindow(func) {
+      this.resetState();
+      this.fullscreen = true;
+      func === null || func === void 0 || func();
+      this.fullscreenPos = this.viewPortStore.viewPortRect;
+    }
   }]);
   return ViewPortWindowStore;
 }(WindowStore);
 export var ViewPortWindow = observer(function ViewPortWindow(props) {
-  var viewPortStore = props.viewPortStore,
-    window = props.window,
+  var window = props.window,
     rest = _objectWithoutProperties(props, _excluded);
   useEffect(function () {
-    runInAction(function () {
-      var rect = viewPortStore.viewPortRect;
-      window.fullscreenPos = rect;
-      window.scale = rect.scale;
-    });
-  }, [viewPortStore.viewPortRect]);
-  useEffect(function () {
-    var rect = viewPortStore.viewPortRect;
-    /* rect.width/rect.scale就是实际上显示区域内容区的宽度 */
-    window.left = rect.left + Math.max(0, rect.width / rect.scale - window.width) / 2;
-    window.top = rect.top + Math.max(0, rect.height / rect.scale - window.height) / 2;
-    window.zIndex = ++viewPortStore.maxZIndex;
+    window.centerDisplay();
   }, []);
   return /*#__PURE__*/React.createElement(Window, _extends({
     window: window
-  }, rest, {
-    onFocusHandler: function onFocusHandler() {
-      viewPortStore.maxZIndex++;
-      window.zIndex = viewPortStore.maxZIndex;
-    }
-  }));
+  }, rest));
 });