@kep-platform/basic-component 1.0.9 → 1.0.11

package/dist/Button/Button.d.ts

@@ -6,7 +6,7 @@ export type ButtonProps = {
     children: ReactNode;
 } & HtmlHTMLAttributes<HTMLButtonElement>;
 declare const Button: React.ForwardRefExoticComponent<{
-    type?: "default" | "primary" | "danger" | undefined;
+    type?: "default" | "danger" | "primary" | undefined;
     size?: SizeType | undefined;
     children: ReactNode;
 } & React.HtmlHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;

package/dist/Tree/MainProperties.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-export declare const MainArea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("../Flex").FlexItemProps | keyof React.HtmlHTMLAttributes<HTMLDivElement>> & import("../Flex").FlexItemProps & React.HtmlHTMLAttributes<HTMLDivElement>, "ref"> & {
+export declare const MainArea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HtmlHTMLAttributes<HTMLDivElement> | keyof import("../Flex").FlexItemProps> & import("../Flex").FlexItemProps & React.HtmlHTMLAttributes<HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
 }, never>> & string;
 type MainPropertyProps = {

package/dist/Tree/Tree.d.ts

@@ -18,8 +18,9 @@ export type TreeProps = {
     bordered?: boolean;
     hideColumns?: boolean;
     loadData?: (node: TreeNodeType) => Promise<any>;
+    loadedKeys?: Key[];
 };
-declare const Tree: (({ treeData, columns, fieldNames, title: treeTitle, titleWidth, titleRender, selectedKeys, expandedKeys, isFlex, onSelect, onExpand, contextMenuRender, onContextMenuItemSelect, loadData, multiple, bordered, hideColumns, }: TreeProps) => React.JSX.Element) & {
+declare const Tree: (({ treeData, columns, fieldNames, title: treeTitle, titleWidth, titleRender, selectedKeys, expandedKeys, isFlex, onSelect, onExpand, contextMenuRender, onContextMenuItemSelect, loadData, loadedKeys: loadedKeysProps, multiple, bordered, hideColumns, }: TreeProps) => React.JSX.Element) & {
     displayName: string;
 };
 export default Tree;

package/dist/Tree/Tree.js

@@ -11,7 +11,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); }
 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, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 import { BoxShadowBox } from "../BoxShadowBox";
 import { Column, Columns } from "../Columns";
@@ -68,6 +68,8 @@ var Tree = observer(function (_ref) {
     contextMenuRender = _ref.contextMenuRender,
     onContextMenuItemSelect = _ref.onContextMenuItemSelect,
     loadData = _ref.loadData,
+    _ref$loadedKeys = _ref.loadedKeys,
+    loadedKeysProps = _ref$loadedKeys === void 0 ? [] : _ref$loadedKeys,
     _ref$multiple = _ref.multiple,
     multiple = _ref$multiple === void 0 ? false : _ref$multiple,
     _ref$bordered = _ref.bordered,
@@ -140,10 +142,13 @@ var Tree = observer(function (_ref) {
       boxShadowBox.current.style.left = treeContainer.scrollLeft + titleWidth + 'px';
     }
   }, [titleWidth]);
-  var _useState = useState([]),
+  var _useState = useState(loadedKeysProps),
     _useState2 = _slicedToArray(_useState, 2),
     loadedKeys = _useState2[0],
     setLoadedKeys = _useState2[1];
+  useEffect(function () {
+    if (loadedKeysProps) setLoadedKeys(loadedKeysProps);
+  }, [loadedKeysProps]);
 
   /* 树组件的结构其实比较简单，就是一个树标题（TableMode下），然后树节点形成的列表 */
   return /*#__PURE__*/React.createElement(TreeContainer, {

package/dist/Tree/test.js

@@ -90,7 +90,7 @@ var mystore = new MyStore([{
     children: []
   }]
 }, {
-  key: '2121212121212',
+  key: '2',
   title: '2',
   count: 1,
   groupBy: [{
@@ -193,6 +193,7 @@ export default (function () {
       dataIndex: 'count',
       align: 'center'
     }],
+    loadedKeys: ['2'],
     hideColumns: true,
     selectedKeys: selectedKeys,
     expandedKeys: expandedKeys,

package/dist/ViewPort/ViewPort.js

@@ -11,8 +11,8 @@ import React, { useCallback, useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import { RippleManagerStore } from "./Ripple";
 import { ViewPortWindow } from "./ViewPortWindow";
-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 Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tposition: relative;\n\tborder: 1px solid #eee;\n\tbox-shadow: 0 0 7px 0 inset #fefefe;\n"])));
+var Content = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\tposition: absolute;\n"])));
 var Overlay = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([""])));
 var rippleManagerStore = new RippleManagerStore();
 var ViewPortComponent = observer(function (props) {
@@ -32,19 +32,6 @@ var ViewPortComponent = observer(function (props) {
   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 = (_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);
-    setTimeout(function () {
-      rippleManagerStore.clearList();
-    }, 30000);
-  };
   useEffect(function () {
     if (transform) {
       viewPortStore.move(transform);
@@ -54,7 +41,7 @@ var ViewPortComponent = observer(function (props) {
     }
   }, [transform]);
   useEffect(function () {
-    var _contentRef$current;
+    var _contentRef$current, _contentRef$current2, _contentRef$current3;
     function scaleHandler(e) {
       e.stopPropagation();
       e.preventDefault();
@@ -65,21 +52,30 @@ var ViewPortComponent = observer(function (props) {
       }
       onScale === null || onScale === void 0 || onScale(viewPortStore.transform.left, viewPortStore.transform.top, viewPortStore.scale, viewPortStore.ratio);
     }
+    function onContentTransitionEnd(e) {
+      if (e.target === contentRef.current) {
+        runInAction(function () {
+          viewPortStore.isTransition = false;
+        });
+      }
+    }
+    function onContentTransitionStart(e) {
+      if (e.target === contentRef.current) {
+        runInAction(function () {
+          viewPortStore.isTransition = true;
+        });
+      }
+    }
     (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 || _contentRef$current.addEventListener('wheel', scaleHandler, {
       passive: false
     });
+    (_contentRef$current2 = contentRef.current) === null || _contentRef$current2 === void 0 || _contentRef$current2.addEventListener('transitionend', onContentTransitionEnd);
+    (_contentRef$current3 = contentRef.current) === null || _contentRef$current3 === void 0 || _contentRef$current3.addEventListener('transitionstart', onContentTransitionStart);
     return function () {
-      var _contentRef$current2;
-      (_contentRef$current2 = contentRef.current) === null || _contentRef$current2 === void 0 || _contentRef$current2.removeEventListener('wheel', scaleHandler);
+      var _contentRef$current4;
+      (_contentRef$current4 = contentRef.current) === null || _contentRef$current4 === void 0 || _contentRef$current4.removeEventListener('wheel', scaleHandler);
     };
   }, []);
-  var onContentTransitionEnd = useCallback(function (e) {
-    if (e.target === contentRef.current) {
-      runInAction(function () {
-        viewPortStore.isTransition = false;
-      });
-    }
-  }, []);
   var onContentPointerDownHandler = useCallback(function (e) {
     if (viewPortStore.isTransition) return;
     //鼠标点击的时候，先清除定时器，然后再异步触发pointerDown操作，这样保证doubleClick的优先级高于pointerDown
@@ -108,7 +104,15 @@ var ViewPortComponent = observer(function (props) {
   }, attributes, {
     onPointerDown: onContentPointerDownHandler,
     onPointerUp: onContentPointerUpHandler,
-    onTransitionEnd: onContentTransitionEnd,
+    onDoubleClick: function onDoubleClick(e) {
+      if (viewPortStore.scale !== 1 / viewPortStore.ratio) {
+        viewPortStore.unfocus();
+        return;
+      }
+      var target = e.target;
+      var rect = target.getBoundingClientRect();
+      viewPortStore.focus(e.clientX - rect.left, e.clientY - rect.top);
+    },
     style: viewPortStore.contentStyle
   }), children));
 });

package/dist/ViewPort/ViewPortStore.js

@@ -127,14 +127,12 @@ 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",

package/dist/ViewPort/ViewPortWindow.d.ts

@@ -26,6 +26,7 @@ export declare class ViewPortWindowStore extends WindowStore {
         transformOrigin?: undefined;
     };
     focus(): void;
+    get isActive(): boolean;
     calculateTransform(transform: Transform): {
         x: number;
         y: number;
@@ -33,6 +34,7 @@ export declare class ViewPortWindowStore extends WindowStore {
     controll(transform: Transform, type: WindowControllerType): void;
     centerDisplay(): void;
     fullscreenWindow(func?: () => void): void;
+    toggleWindow(): void;
     constructor(id: string, viewPort: ViewPortStore, onClosedHandler?: (id: string) => void);
     get disabled(): boolean;
 }

package/dist/ViewPort/ViewPortWindow.js

@@ -42,68 +42,75 @@ export var ViewPortWindowStore = /*#__PURE__*/function (_WindowStore) {
   _createClass(ViewPortWindowStore, [{
     key: "style",
     get: function get() {
-      if (this.isClosed) {
-        return {
-          left: this.left + 'px',
-          top: this.top + 'px',
-          width: this.width + 'px',
-          height: this.height + 'px',
-          zIndex: this.zIndex,
-          transform: 'scale(0)',
-          transformOrigin: 'center center',
-          transition: 'all 0.3s ease-out'
-        };
+      switch (this.status) {
+        case 'closed':
+          return {
+            left: this.left + 'px',
+            top: this.top + 'px',
+            width: this.width + 'px',
+            height: this.height + 'px',
+            zIndex: this.zIndex,
+            transform: 'scale(0)',
+            transformOrigin: 'center center',
+            transition: 'all 0.3s ease-out'
+          };
+        case 'minimize':
+          return {
+            left: this.minimizePos.left + 'px',
+            top: this.minimizePos.top + 'px',
+            width: this.width + 'px',
+            height: this.height + 'px',
+            zIndex: this.zIndex,
+            transform: 'scale(0)',
+            transformOrigin: 'left top',
+            transition: "all ".concat(0.5 + this.viewPortStore.scale, "s ease-out")
+          };
+        case 'fullscreen':
+          return {
+            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',
+            transform: "scale(".concat(1 / this.viewPortStore.scale, ")"),
+            zIndex: this.zIndex,
+            transformOrigin: 'left top',
+            transition: 'width height 0.5s ease-out'
+          };
+        case 'normal':
+        default:
+          if (this.isMoving || this.isResizing) {
+            return {
+              left: this.left + 'px',
+              top: this.top + 'px',
+              width: this.width + 'px',
+              height: this.height + 'px',
+              zIndex: this.zIndex,
+              transform: 'none',
+              transition: 'none'
+            };
+          } else {
+            return {
+              left: this.left + 'px',
+              top: this.top + 'px',
+              width: this.width + 'px',
+              height: this.height + 'px',
+              zIndex: this.zIndex,
+              transform: 'none',
+              transition: 'all 0.3s ease-out'
+            };
+          }
       }
-      if (this.isMinimize && this.minimizePos) {
-        return {
-          left: this.minimizePos.left + 'px',
-          top: this.minimizePos.top + 'px',
-          width: this.width + 'px',
-          height: this.height + 'px',
-          zIndex: this.zIndex,
-          transform: 'scale(0)',
-          transformOrigin: 'left top',
-          transition: "all ".concat(0.5 + this.viewPortStore.scale, "s ease-out")
-        };
-      }
-      if (this.fullscreen) {
-        return {
-          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',
-          transform: "scale(".concat(1 / this.viewPortStore.scale, ")"),
-          zIndex: this.zIndex,
-          transformOrigin: 'left top',
-          transition: 'width height 0.5s ease-out'
-        };
-      }
-      if (this.isMoving || this.isResizing) {
-        return {
-          left: this.left + 'px',
-          top: this.top + 'px',
-          width: this.width + 'px',
-          height: this.height + 'px',
-          zIndex: this.zIndex,
-          transform: 'none',
-          transition: 'none'
-        };
-      }
-      return {
-        left: this.left + 'px',
-        top: this.top + 'px',
-        width: this.width + 'px',
-        height: this.height + 'px',
-        zIndex: this.zIndex,
-        transform: 'none',
-        transition: 'all 0.3s ease-out'
-      };
     }
   }, {
     key: "focus",
     value: function focus() {
       this.zIndex = ++this.viewPortStore.maxZIndex;
     }
+  }, {
+    key: "isActive",
+    get: function get() {
+      return this.zIndex === this.viewPortStore.maxZIndex;
+    }
   }, {
     key: "calculateTransform",
     value: function calculateTransform(transform) {
@@ -160,6 +167,29 @@ export var ViewPortWindowStore = /*#__PURE__*/function (_WindowStore) {
       func === null || func === void 0 || func();
       this.fullscreenPos = this.viewPortStore.viewPortRect;
     }
+  }, {
+    key: "toggleWindow",
+    value: function toggleWindow() {
+      switch (this.status) {
+        case 'normal':
+          if (this.isActive) {
+            this.minimizeWindow();
+          } else {
+            this.normalizeWindow();
+          }
+          break;
+        case 'minimize':
+          this.normalizeWindow();
+          break;
+        case 'fullscreen':
+          if (!this.isActive) {
+            this.normalizeWindow();
+          } else this.minimizeWindow();
+          break;
+        default:
+          break;
+      }
+    }
   }, {
     key: "disabled",
     get: function get() {

package/dist/ViewPort/test.js

@@ -16,7 +16,7 @@ import { Button, GlobalStyles } from '..';
 import ViewPort from "./ViewPort";
 import { ViewPortStore } from "./ViewPortStore";
 import { ViewPortWindowStore } from "./ViewPortWindow";
-var viewPortStore = new ViewPortStore(600, 600, 5);
+var viewPortStore = new ViewPortStore(600, 600, 1);
 var WindowManager = /*#__PURE__*/function () {
   function WindowManager() {
     _classCallCheck(this, WindowManager);
@@ -35,6 +35,16 @@ var WindowManager = /*#__PURE__*/function () {
         return window.id !== id;
       });
     }
+  }, {
+    key: "toggleWindowIdIsJss",
+    value: function toggleWindowIdIsJss() {
+      var window = this.windows.find(function (window) {
+        return window.id === 'jss';
+      });
+      if (window) {
+        window.toggleWindow();
+      }
+    }
   }, {
     key: "report",
     get: function get() {
@@ -46,7 +56,7 @@ var WindowManager = /*#__PURE__*/function () {
   return WindowManager;
 }();
 var windowManager = new WindowManager();
-var StyledViewPort = styled(ViewPort)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    border: 1px solid #eee;\n"])));
+var StyledViewPort = styled(ViewPort)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tborder: 1px solid #eee;\n"])));
 export default observer(function Test() {
   useEffect(function () {
     function setWidthHeight() {
@@ -67,13 +77,17 @@ export default observer(function Test() {
     onClick: function onClick() {
       windowManager.createWindow();
     }
-  }, "\u65B0\u589E"), /*#__PURE__*/React.createElement(DndContext, null, /*#__PURE__*/React.createElement(StyledViewPort, {
+  }, "\u65B0\u589E"), /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      windowManager.toggleWindowIdIsJss();
+    }
+  }, "\u5207\u6362"), /*#__PURE__*/React.createElement(DndContext, null, /*#__PURE__*/React.createElement(StyledViewPort, {
     viewPortStore: viewPortStore
   }, windowManager.windows.map(function (windowStore) {
     return /*#__PURE__*/React.createElement(ViewPort.Window, {
       window: windowStore,
       key: windowStore.id,
-      title: 'xixi'
+      title: windowStore.id
     }, /*#__PURE__*/React.createElement("div", {
       style: {
         height: '2000px',

package/dist/Window/Window.d.ts

@@ -6,6 +6,7 @@ export type WindowProps = {
     title: ReactNode;
     onFullscreenHandler?: () => void;
     onFocusHandler?: () => void;
+    onShareWindow?: () => void;
 };
 declare const Window: ((props: WindowProps) => React.JSX.Element) & {
     displayName: string;

package/dist/Window/Window.js

@@ -1,6 +1,6 @@
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-import { BorderOutlined, CloseOutlined, CompressOutlined, MinusOutlined } from '@ant-design/icons';
+import { BorderOutlined, CloseOutlined, CompressOutlined, MinusOutlined, ShareAltOutlined } from '@ant-design/icons';
 import { runInAction } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import React, { useEffect, useRef } from 'react';
@@ -11,45 +11,74 @@ var WindowContainer = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !['isMinimize'].includes(prop);
   }
-})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    box-shadow: ", ";\n    position: absolute;\n    padding: 0px;\n    border-radius: ", ";\n    background-color: #fff;\n    overflow: hidden;\n    border: 1px solid rgba(50, 58, 67, 0.15);\n"])), function (props) {
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tbox-shadow: ", ";\n\tposition: absolute;\n\tpadding: 0px;\n\tborder-radius: ", ";\n\tbackground-color: #fff;\n\toverflow: hidden;\n\tborder: 1px solid rgba(50, 58, 67, 0.15);\n"])), function (props) {
   return props.isFullscreen ? 'none' : 'var(--kep-platform-box-shadow)';
 }, function (props) {
   return props.isFullscreen ? '4px' : '12px';
 });
-var WindowEntity = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n"])));
+var WindowEntity = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\twidth: 100%;\n\theight: 100%;\n\tdisplay: flex;\n\tflex-direction: column;\n"])));
 var WindowHeader = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !['isDragging'].includes(prop);
   }
-})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    height: 40px;\n    padding: 6px 12px;\n    line-height: 26px;\n    font-size: 16px;\n    background-color: var(--kep-platform-color-bg-layout-header);\n    transition: margin 0.35s, opacity 0.7s, box-shadow 0.7s;\n    position: relative;\n    color: #000;\n    cursor: move;\n    & > h5 {\n        color: #000;\n    }\n"])));
-var WindowHeaderOptions = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    position: absolute;\n    right: 0;\n    top: 0;\n    height: 100%;\n    display: flex;\n    z-index: 3;\n"])));
-var WindowBody = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    overflow: auto;\n    padding: 12px;\n    flex: 1;\n"])));
-var WindowControllerLeft = styled(WindowController)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    position: absolute;\n    width: 6px;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    cursor: e-resize;\n    z-index: 2;\n"])));
-var WindowControllerRight = styled(WindowController)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    position: absolute;\n    width: 6px;\n    height: 100%;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    cursor: e-resize;\n    z-index: 2;\n"])));
-var WindowControllerTop = styled(WindowController)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    position: absolute;\n    width: 100%;\n    height: 6px;\n    left: 0;\n    right: 0;\n    top: 0;\n    cursor: n-resize;\n    z-index: 2;\n"])));
-var WindowControllerBottom = styled(WindowController)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    position: absolute;\n    width: 100%;\n    height: 6px;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    cursor: n-resize;\n    z-index: 2;\n"])));
-var WindowControllerLeftTop = styled(WindowController)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    position: absolute;\n    width: 6px;\n    height: 6px;\n    left: 0;\n    top: 0;\n    cursor: nwse-resize;\n    z-index: 2;\n"])));
-var WindowControllerLeftBottom = styled(WindowController)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    position: absolute;\n    width: 6px;\n    height: 6px;\n    left: 0;\n    bottom: 0;\n    cursor: nesw-resize;\n    z-index: 2;\n"])));
-var WindowControllerRightTop = styled(WindowController)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    position: absolute;\n    width: 6px;\n    height: 6px;\n    right: 0;\n    top: 0;\n    cursor: nesw-resize;\n    z-index: 2;\n"])));
-var WindowControllerRightBottom = styled(WindowController)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    position: absolute;\n    width: 6px;\n    height: 6px;\n    right: 0;\n    bottom: 0;\n    cursor: nwse-resize;\n    z-index: 2;\n"])));
+})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\theight: 40px;\n\tpadding: 6px 12px;\n\tline-height: 26px;\n\tfont-size: 16px;\n\tbackground-color: var(--kep-platform-color-bg-layout-header);\n\ttransition: margin 0.35s, opacity 0.7s, box-shadow 0.7s;\n\tposition: relative;\n\tcolor: #000;\n\tcursor: move;\n\t& > h5 {\n\t\tcolor: #000;\n\t}\n"])));
+var WindowHeaderOptions = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n\theight: 100%;\n\tdisplay: flex;\n\tz-index: 3;\n"])));
+var WindowBody = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\toverflow: auto;\n\tpadding: 12px;\n\tflex: 1;\n"])));
+var WindowControllerLeft = styled(WindowController)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\tposition: absolute;\n\twidth: 6px;\n\tleft: 0;\n\ttop: 0;\n\tbottom: 0;\n\tcursor: e-resize;\n\tz-index: 2;\n"])));
+var WindowControllerRight = styled(WindowController)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n\tposition: absolute;\n\twidth: 6px;\n\theight: 100%;\n\tright: 0;\n\ttop: 0;\n\tbottom: 0;\n\tcursor: e-resize;\n\tz-index: 2;\n"])));
+var WindowControllerTop = styled(WindowController)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\tposition: absolute;\n\twidth: 100%;\n\theight: 6px;\n\tleft: 0;\n\tright: 0;\n\ttop: 0;\n\tcursor: n-resize;\n\tz-index: 2;\n"])));
+var WindowControllerBottom = styled(WindowController)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\tposition: absolute;\n\twidth: 100%;\n\theight: 6px;\n\tleft: 0;\n\tright: 0;\n\tbottom: 0;\n\tcursor: n-resize;\n\tz-index: 2;\n"])));
+var WindowControllerLeftTop = styled(WindowController)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n\tposition: absolute;\n\twidth: 6px;\n\theight: 6px;\n\tleft: 0;\n\ttop: 0;\n\tcursor: nwse-resize;\n\tz-index: 2;\n"])));
+var WindowControllerLeftBottom = styled(WindowController)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n\tposition: absolute;\n\twidth: 6px;\n\theight: 6px;\n\tleft: 0;\n\tbottom: 0;\n\tcursor: nesw-resize;\n\tz-index: 2;\n"])));
+var WindowControllerRightTop = styled(WindowController)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n\tposition: absolute;\n\twidth: 6px;\n\theight: 6px;\n\tright: 0;\n\ttop: 0;\n\tcursor: nesw-resize;\n\tz-index: 2;\n"])));
+var WindowControllerRightBottom = styled(WindowController)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n\tposition: absolute;\n\twidth: 6px;\n\theight: 6px;\n\tright: 0;\n\tbottom: 0;\n\tcursor: nwse-resize;\n\tz-index: 2;\n"])));
 var Window = observer(function (props) {
   var window = props.window,
     title = props.title,
     children = props.children,
     onFullscreenHandler = props.onFullscreenHandler,
-    onFocusHandler = props.onFocusHandler;
+    onFocusHandler = props.onFocusHandler,
+    onShareWindow = props.onShareWindow;
   var windowContainerRef = useRef(null);
   useEffect(function () {
-    var _windowContainerRef$c;
+    var _windowContainerRef$c, _windowContainerRef$c2, _windowContainerRef$c3;
     function stopWheel(e) {
       e.stopPropagation();
     }
+    function startTransition(e) {
+      e.stopPropagation();
+      if (e.target === e.currentTarget) {
+        runInAction(function () {
+          window.isTransition = true;
+        });
+      }
+    }
+    function stopTransition(e) {
+      e.stopPropagation();
+      if (e.target === e.currentTarget) {
+        runInAction(function () {
+          window.isTransition = false;
+        });
+      }
+      if (e.target === e.currentTarget && window.isClosed && e.propertyName === 'transform') {
+        var _window$onClosedHandl;
+        (_window$onClosedHandl = window.onClosedHandler) === null || _window$onClosedHandl === void 0 || _window$onClosedHandl.call(window, window.id);
+      }
+    }
     (_windowContainerRef$c = windowContainerRef.current) === null || _windowContainerRef$c === void 0 || _windowContainerRef$c.addEventListener('wheel', stopWheel, {
       passive: false
     });
+    (_windowContainerRef$c2 = windowContainerRef.current) === null || _windowContainerRef$c2 === void 0 || _windowContainerRef$c2.addEventListener('transitionstart', startTransition, {
+      passive: false
+    });
+    (_windowContainerRef$c3 = windowContainerRef.current) === null || _windowContainerRef$c3 === void 0 || _windowContainerRef$c3.addEventListener('transitionend', stopTransition, {
+      passive: false
+    });
     return function () {
-      var _windowContainerRef$c2;
-      (_windowContainerRef$c2 = windowContainerRef.current) === null || _windowContainerRef$c2 === void 0 || _windowContainerRef$c2.removeEventListener('wheel', stopWheel);
+      var _windowContainerRef$c4, _windowContainerRef$c5, _windowContainerRef$c6;
+      (_windowContainerRef$c4 = windowContainerRef.current) === null || _windowContainerRef$c4 === void 0 || _windowContainerRef$c4.removeEventListener('wheel', stopWheel);
+      (_windowContainerRef$c5 = windowContainerRef.current) === null || _windowContainerRef$c5 === void 0 || _windowContainerRef$c5.removeEventListener('transitionstart', startTransition);
+      (_windowContainerRef$c6 = windowContainerRef.current) === null || _windowContainerRef$c6 === void 0 || _windowContainerRef$c6.removeEventListener('transitionend', stopTransition);
     };
   }, []);
 
@@ -59,18 +88,6 @@ var Window = observer(function (props) {
     style: window.style,
     isMinimize: !!window.isMinimize,
     isFullscreen: !!window.fullscreen,
-    onTransitionEnd: function onTransitionEnd(e) {
-      e.stopPropagation();
-      if (e.target === e.currentTarget) {
-        runInAction(function () {
-          window.isTransition = false;
-        });
-      }
-      if (e.target === e.currentTarget && window.isClosed && e.nativeEvent.propertyName === 'transform') {
-        var _window$onClosedHandl;
-        (_window$onClosedHandl = window.onClosedHandler) === null || _window$onClosedHandl === void 0 || _window$onClosedHandl.call(window, window.id);
-      }
-    },
     onDoubleClick: function onDoubleClick(e) {
       e.stopPropagation();
     },
@@ -126,6 +143,9 @@ var Window = observer(function (props) {
       e.stopPropagation();
     }
   }, /*#__PURE__*/React.createElement(WindowOption, {
+    icon: /*#__PURE__*/React.createElement(ShareAltOutlined, null),
+    onClick: onShareWindow
+  }), /*#__PURE__*/React.createElement(WindowOption, {
     icon: /*#__PURE__*/React.createElement(MinusOutlined, null),
     onClick: function onClick() {
       if (window.disabled) return;

package/dist/Window/WindowStore.d.ts

@@ -1,6 +1,7 @@
 import { Transform } from '@dnd-kit/utilities';
 import { CSSProperties } from 'react';
 import { WindowControllerType } from './WindowController';
+type WindowStatus = 'normal' | 'minimize' | 'fullscreen' | 'closed';
 export default class WindowStore {
     width: number;
     height: number;
@@ -42,8 +43,11 @@ export default class WindowStore {
     endControll(): void;
     minimizeWindow(): void;
     normalizeWindow(): void;
+    restoreWindow(): void;
     closeWindow(): void;
     focus(): void;
+    get status(): WindowStatus;
     get style(): CSSProperties;
     get info(): string;
 }
+export {};

package/dist/Window/WindowStore.js

@@ -55,6 +55,7 @@ var WindowStore = /*#__PURE__*/function () {
       fullscreenPos: observable.struct,
       minimizeWindow: action,
       normalizeWindow: action,
+      restoreWindow: action,
       closeWindow: action,
       resetState: action,
       focus: action,
@@ -69,14 +70,13 @@ var WindowStore = /*#__PURE__*/function () {
     value: function fullscreenWindow(func) {
       this.resetState();
       this.fullscreen = true;
-      this.isTransition = true;
+      this.focus();
       func === null || func === void 0 || func();
     }
   }, {
     key: "fullscreenExitWindow",
     value: function fullscreenExitWindow() {
       this.resetState();
-      this.isTransition = true;
       this.fullscreen = false;
     }
   }, {
@@ -140,23 +140,27 @@ var WindowStore = /*#__PURE__*/function () {
     key: "minimizeWindow",
     value: function minimizeWindow() {
       this.isMinimize = true;
-      this.fullscreen = false;
-      this.isTransition = true;
       this.resetState();
     }
   }, {
     key: "normalizeWindow",
     value: function normalizeWindow() {
+      this.isMinimize = false;
+      this.resetState();
+      this.focus();
+    }
+  }, {
+    key: "restoreWindow",
+    value: function restoreWindow() {
       this.isMinimize = false;
       this.fullscreen = false;
-      this.isTransition = true;
       this.resetState();
+      this.focus();
     }
   }, {
     key: "closeWindow",
     value: function closeWindow() {
       this.isClosed = true;
-      this.isTransition = true;
       this.resetState();
     }
   }, {
@@ -165,63 +169,79 @@ var WindowStore = /*#__PURE__*/function () {
       this.zIndex++;
     }
   }, {
-    key: "style",
+    key: "status",
     get: function get() {
       if (this.isClosed) {
-        return {
-          left: this.left + 'px',
-          top: this.top + 'px',
-          width: this.width + 'px',
-          height: this.height + 'px',
-          zIndex: this.zIndex,
-          transform: 'scale(0)',
-          transformOrigin: 'center center',
-          transition: 'all 0.3s ease-in-out'
-        };
+        return 'closed';
       }
       if (this.isMinimize && this.minimizePos) {
-        return {
-          left: this.minimizePos.left + 'px',
-          top: this.minimizePos.top + 'px',
-          width: this.width + 'px',
-          height: this.width + 'px',
-          zIndex: this.zIndex,
-          transform: 'scale(0)',
-          transformOrigin: 'left top',
-          transition: 'all 0.3s ease-in-out'
-        };
+        return 'minimize';
       }
       if (this.fullscreen) {
-        return {
-          left: this.fullscreenPos.left + 'px',
-          top: this.fullscreenPos.top + 'px',
-          width: this.fullscreenPos.width + 'px',
-          height: this.fullscreenPos.height + 'px',
-          zIndex: this.zIndex,
-          transform: 'none',
-          transition: 'all 0.3s ease-in-out'
-        };
+        return 'fullscreen';
       }
-      if (this.isMoving || this.isResizing) {
-        return {
-          left: this.left + 'px',
-          top: this.top + 'px',
-          width: this.width + 'px',
-          height: this.height + 'px',
-          zIndex: this.zIndex,
-          transform: 'none',
-          transition: 'none'
-        };
+      return 'normal';
+    }
+  }, {
+    key: "style",
+    get: function get() {
+      switch (this.status) {
+        case 'closed':
+          return {
+            left: this.left + 'px',
+            top: this.top + 'px',
+            width: this.width + 'px',
+            height: this.height + 'px',
+            zIndex: this.zIndex,
+            transform: 'scale(0)',
+            transformOrigin: 'center center',
+            transition: 'all 0.3s ease-in-out'
+          };
+        case 'minimize':
+          return {
+            left: this.minimizePos.left + 'px',
+            top: this.minimizePos.top + 'px',
+            width: this.width + 'px',
+            height: this.width + 'px',
+            zIndex: this.zIndex,
+            transform: 'scale(0)',
+            transformOrigin: 'left top',
+            transition: 'all 0.3s ease-in-out'
+          };
+        case 'fullscreen':
+          return {
+            left: this.fullscreenPos.left + 'px',
+            top: this.fullscreenPos.top + 'px',
+            width: this.fullscreenPos.width + 'px',
+            height: this.fullscreenPos.height + 'px',
+            zIndex: this.zIndex,
+            transform: 'none',
+            transition: 'all 0.3s ease-in-out'
+          };
+        case 'normal':
+        default:
+          if (this.isMoving || this.isResizing) {
+            return {
+              left: this.left + 'px',
+              top: this.top + 'px',
+              width: this.width + 'px',
+              height: this.height + 'px',
+              zIndex: this.zIndex,
+              transform: 'none',
+              transition: 'none'
+            };
+          } else {
+            return {
+              left: this.left + 'px',
+              top: this.top + 'px',
+              width: this.width + 'px',
+              height: this.height + 'px',
+              zIndex: this.zIndex,
+              transform: 'none',
+              transition: 'all 0.3s ease-in-out'
+            };
+          }
       }
-      return {
-        left: this.left + 'px',
-        top: this.top + 'px',
-        width: this.width + 'px',
-        height: this.height + 'px',
-        zIndex: this.zIndex,
-        transform: 'none',
-        transition: 'all 0.3s ease-in-out'
-      };
     }
   }, {
     key: "info",

package/dist/Window/test.js

@@ -4,6 +4,7 @@ import React from 'react';
 import { GlobalStyles } from "../__styles";
 import Window from "./Window";
 import { WindowStore } from "./index";
+import { Button } from "../Button";
 export default observer(function Test() {
   var windowStore = useLocalObservable(function () {
     return new WindowStore('jss');
@@ -15,7 +16,11 @@ export default observer(function Test() {
       position: 'relative',
       height: '1000px'
     }
-  }, /*#__PURE__*/React.createElement(Window, {
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      windowStore.normalizeWindow();
+    }
+  }, "\u6B63\u5E38\u5316"), /*#__PURE__*/React.createElement(Window, {
     window: windowStore,
     key: windowStore.id,
     title: 'xixi'
@@ -24,5 +29,5 @@ export default observer(function Test() {
       backgroundColor: 'pink',
       width: '1000px'
     }
-  }, "121asdjklfjikasdhujikfh awkldjnfhb qweuijfklasdbnhuifwoqnf jkhweuof jkhwuifhqwdh jknwjkd klfhwdujih fuoqwjn klnfkmsdhnajikfh jklasdkl jdklajkl jfklasdjkl jkldjiof1huihfklnsdjklf2", /*#__PURE__*/React.createElement("br", null), "asdjklfjasdklj kljasdkldjf iawhjio jkldjnsajhnfujihnfffffffffffffffffffffffffffffffffffffffffffffffffklasdnmkdlf djkafljkdlfjkl;asdf fjklasdjkl;fjdaskl;jfk;asdf asdjfkasdjkf;f asjfiko;djaskl;fjas fjikasdjfk;asd", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "djklasdjkl;jaksdjkl; askdjkl jaksdjk l;asd"))));
+  }, "\u7A97\u4F53\u72B6\u6001\uFF1A", windowStore.status, /*#__PURE__*/React.createElement("br", null), "\u7A97\u4F53\u662F\u5426\u7981\u64CD\u4F5C\uFF1A", windowStore.disabled ? 'disabled' : 'enabled', /*#__PURE__*/React.createElement("br", null), "121asdjklfjikasdhujikfh awkldjnfhb qweuijfklasdbnhuifwoqnf jkhweuof jkhwuifhqwdh jknwjkd klfhwdujih fuoqwjn klnfkmsdhnajikfh jklasdkl jdklajkl jfklasdjkl jkldjiof1huihfklnsdjklf2", /*#__PURE__*/React.createElement("br", null), "asdjklfjasdklj kljasdkldjf iawhjio jkldjnsajhnfujihnfffffffffffffffffffffffffffffffffffffffffffffffffklasdnmkdlf djkafljkdlfjkl;asdf fjklasdjkl;fjdaskl;jfk;asdf asdjfkasdjkf;f asjfiko;djaskl;fjas fjikasdjfk;asd", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "djklasdjkl;jaksdjkl; askdjkl jaksdjk l;asd"))));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kep-platform/basic-component",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "description": "A react library developed with dumi",
   "license": "MIT",
   "module": "dist/index.js",
@@ -86,5 +86,5 @@
   "authors": [
     "less-step-jss 1599925910@qq.com"
   ],
-  "gitHead": "ce7e7adcdcf7ef892a49c26794c1be61da0f18dd"
+  "gitHead": "24bd8f4141e73bce455a993625a05cb91b10fc25"
 }