@kep-platform/basic-component 0.0.12 → 0.0.14

package/dist/Table/Table.d.ts

@@ -1,13 +1,16 @@
 import React, { ReactNode } from 'react';
 type SorterDesc = Record<string, Sorter>;
 type FilterDesc = Record<string, string>;
+export type Scroll = {
+    y: number;
+};
 export type TableProps = {
     dataSource: Record<string, any>[];
     columns: ColumnType[];
     rowKey: string;
     actions?: ReactNode[];
     title?: ReactNode;
-    scroll?: boolean;
+    scroll?: Scroll;
     onChange?: (pagination?: Pagination, sorter?: SorterDesc, fitler?: FilterDesc) => void;
     headerRender?: (column: ColumnType) => ReactNode;
     groupBy?: string;

package/dist/Table/Table.js

@@ -15,7 +15,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import CaretDownOutlined from '@ant-design/icons/CaretDownOutlined';
 import CaretUpOutlined from '@ant-design/icons/CaretUpOutlined';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { BoxShadowBox } from "../BoxShadowBox";
 import { Column, Columns } from "../Columns";
 import { DefaultColumnWidth } from "../Columns/Columns";
@@ -38,7 +38,7 @@ var TableToolbar = styled.div.withConfig({
 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);& ", "{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);
+})(["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"
@@ -50,7 +50,12 @@ var TableBodyRow = styled(ListItem).withConfig({
 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);"]);
+})(["position:relative;overflow:auto;border-radius:var(--kep-platform-border-radius);box-shadow:var(--kep-platform-box-shadow-tertiary);", ""], 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);
+  }
+});
 var SortIconList = styled(List).withConfig({
   displayName: "SortIconList",
   componentId: "basic-component-347b__sc-12r61fm-7"
@@ -132,11 +137,7 @@ export default function Table(_ref3) {
     scroll = _ref3.scroll,
     _onChange2 = _ref3.onChange,
     headerRender = _ref3.headerRender,
-    _ref3$pagination = _ref3.pagination,
-    pagination = _ref3$pagination === void 0 ? {
-      current: 1,
-      pageSize: 10
-    } : _ref3$pagination;
+    pagination = _ref3.pagination;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     sorterController = _useState2[0],
@@ -177,15 +178,28 @@ export default function Table(_ref3) {
     }, 0);
   }, [columns]);
   var formatedDataSource = useMemo(function () {
+    var formatedDataSource;
+    /* 分页过滤 */
+    if (pagination && dataSource.length > (pagination.pageSize || 10)) {
+      var startIndex = ((pagination.current || 1) - 1) * (pagination.pageSize || 10);
+      var endIndex = startIndex + (pagination.pageSize || 10) - 1;
+      formatedDataSource = dataSource.filter(function (_, index) {
+        return index >= startIndex && index <= endIndex;
+      });
+    } else {
+      formatedDataSource = dataSource;
+    }
+    /* 排序 */
     if (sorterController && sorterController.sorterType !== undefined) {
       var sortedColumn = columns.find(function (column) {
         return column.key === sorterController.columnKey;
       });
       var sorterFunc = typeof (sortedColumn === null || sortedColumn === void 0 ? void 0 : sortedColumn.sorter) === 'function' ? sortedColumn.sorter : undefined;
-      return sortObjectsByProperty(dataSource, sorterController.columnKey, sorterController.sorterType, sorterFunc);
+      formatedDataSource = sortObjectsByProperty(formatedDataSource, sorterController.columnKey, sorterController.sorterType, sorterFunc);
     }
-    return dataSource;
-  }, [sorterController, dataSource, columns]);
+    /* 条件过滤 */
+    return formatedDataSource;
+  }, [sorterController, dataSource, columns, pagination]);
   return /*#__PURE__*/React.createElement(TableContainer, null, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
     span: 8
   }, /*#__PURE__*/React.createElement(TableTitle, null, title)), /*#__PURE__*/React.createElement(Col, {
@@ -209,8 +223,10 @@ export default function Table(_ref3) {
           boxShadowBox.current.style.opacity = '1';
         }
         boxShadowBox.current.style.left = tableContainer.scrollLeft + scrollLeftOffset + 'px';
+        boxShadowBox.current.style.top = tableContainer.scrollTop + 'px';
       }
-    }
+    },
+    scroll: scroll
   }, scroll && /*#__PURE__*/React.createElement(BoxShadowBox, {
     ref: boxShadowBox,
     width: "10px",
@@ -231,7 +247,7 @@ export default function Table(_ref3) {
       columns: columns,
       isFlex: !scroll
     }));
-  }))), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Pagination, _extends({}, pagination, {
+  }))), /*#__PURE__*/React.createElement("br", null), pagination && /*#__PURE__*/React.createElement(Pagination, _extends({}, pagination, {
     total: pagination.total || dataSource.length,
     justifyContent: "right",
     onChange: function onChange(current, pageSize) {

package/dist/Tree/BOMTree.js

@@ -4,9 +4,10 @@ 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; }
-import { GlobalStyles, Tree } from "./..";
+import { GlobalStyles } from "./..";
 import React, { useState } from 'react';
 import styled from 'styled-components';
+import Tree from "./Tree";
 var Title = styled.div.withConfig({
   displayName: "Title",
   componentId: "basic-component-347b__sc-klaw2r-0"
@@ -24,6 +25,7 @@ export default (function () {
     key: '1',
     title: 'jss',
     count: 1,
+    groupBy: 'count',
     children: [{
       key: '4',
       title: 'skjdfkljasklfjkljdsklajfkl就是要长一的点点滴滴的点点滴滴哒哒哒哒哒哒哒哒哒哒哒哒哒哒',
@@ -41,24 +43,25 @@ export default (function () {
     key: '2121212121212',
     title: '2',
     count: 1,
-    children: []
-  }, {
-    key: '3',
-    title: 'jss',
-    name: 'jss',
-    children: [],
-    count: 2
-  }, {
-    key: '10',
-    title: 'jss',
-    name: 'jss',
-    children: [],
-    count: 2
-  }, {
-    key: '20',
-    title: '3',
-    children: [],
-    count: 2
+    groupBy: 'count',
+    children: [{
+      key: '3',
+      title: 'jss',
+      name: 'jss',
+      children: [],
+      count: 2
+    }, {
+      key: '10',
+      title: 'jss',
+      name: 'jss',
+      children: [],
+      count: 2
+    }, {
+      key: '20',
+      title: '3',
+      children: [],
+      count: 2
+    }]
   }];
   var columns = [{
     key: 'key',
@@ -94,6 +97,7 @@ export default (function () {
     $css: []
   }), /*#__PURE__*/React.createElement(Tree, {
     title: /*#__PURE__*/React.createElement(Title, null, "\u6807\u8BC6"),
+    multiple: true,
     titleWidth: 400,
     contextMenuRender: contextMenuRender,
     treeData: treeData,
@@ -105,7 +109,6 @@ export default (function () {
     },
     onExpand: function onExpand(expandedKeys) {
       return setExpandedKeys(expandedKeys);
-    },
-    groupBy: "count"
+    }
   }));
 });

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 = {
@@ -8,5 +8,5 @@ type MainPropertyProps = {
     property?: ReactNode;
     isFlex: boolean;
 };
-export declare const MainProperty: React.FC<MainPropertyProps>;
+export declare const MainProperty: React.ForwardRefExoticComponent<MainPropertyProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/Tree/MainProperties.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import styled from 'styled-components';
 import { Flex, FlexItem } from "../Flex";
 export var MainArea = styled(FlexItem).withConfig({
@@ -10,14 +10,18 @@ var PropertiesArea = styled(FlexItem).withConfig({
   componentId: "basic-component-347b__sc-u1pspr-1"
 })([""]);
 /* 有属性就渲染属性，没有属性就不处理 */
-export var MainProperty = function MainProperty(_ref) {
+export var MainProperty = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var mainWidth = _ref.mainWidth,
     main = _ref.main,
     property = _ref.property,
     isFlex = _ref.isFlex;
-  if (property) return /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(MainArea, {
+  if (property) return /*#__PURE__*/React.createElement(Flex, {
+    ref: ref
+  }, /*#__PURE__*/React.createElement(MainArea, {
     width: mainWidth
   }, main), /*#__PURE__*/React.createElement(PropertiesArea, {
     flex: isFlex ? 1 : undefined
-  }, property));else return main;
-};
+  }, property));else return /*#__PURE__*/React.cloneElement(main, {
+    ref: ref
+  });
+});

package/dist/Tree/Tree.js

@@ -1,17 +1,15 @@
-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; }
-import React, { useMemo, useRef, useState } from 'react';
+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 _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 React, { useMemo, useRef } from 'react';
 import styled, { css } from 'styled-components';
 import { BoxShadowBox } from "../BoxShadowBox";
 import { Column, Columns } from "../Columns";
 import { DefaultColumnWidth } from "../Columns/Columns";
 import { List } from "../List";
-import { MainArea } from "./MainProperties";
-import { MainProperty, TreeNodeController } from "./TreeNode";
+import { MainArea, MainProperty } from "./MainProperties";
+import { TreeNodeController, nodeTypeMap } from "./TreeNode";
 var TreeContainer = styled.div.withConfig({
   displayName: "TreeContainer",
   componentId: "basic-component-347b__sc-n4lkq9-0"
@@ -33,35 +31,7 @@ var TreeHeader = styled.div.withConfig({
     return css(["width:", "px;"], props.width);
   }
 }, Column, MainArea);
-var rootLevel = 0;
-var TreeGroupNode = styled.div.withConfig({
-  displayName: "TreeGroupNode",
-  componentId: "basic-component-347b__sc-n4lkq9-3"
-})(["height:40px;line-height:40px;padding:0 16px;color:var(--kep-platform-color-primary);cursor:pointer;border:1px dotted var(--kep-platform-color-primary);"]);
-var TreeNodeGroup = function TreeNodeGroup(props) {
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    expanded = _useState2[0],
-    setExpanded = _useState2[1];
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TreeGroupNode, {
-    onClick: function onClick() {
-      return setExpanded(!expanded);
-    }
-  }, props.groupName, "\uFF1A", props.groupValue), expanded && props.children);
-};
-function groupTreeNodeByPropertyName(arr, propertyName, fieldNames) {
-  var grouped = arr.reduce(function (acc, obj) {
-    var key = obj[propertyName] || obj[fieldNames.key];
-    if (key) {
-      if (!acc[key]) {
-        acc[key] = [];
-      }
-      acc[key].push(obj);
-    } else {}
-    return acc;
-  }, {});
-  return grouped;
-}
+var rootLevel = -1;
 var Tree = function Tree(_ref) {
   var treeData = _ref.treeData,
     _ref$columns = _ref.columns,
@@ -90,15 +60,17 @@ var Tree = function Tree(_ref) {
     _ref$multiple = _ref.multiple,
     multiple = _ref$multiple === void 0 ? false : _ref$multiple,
     _ref$bordered = _ref.bordered,
-    bordered = _ref$bordered === void 0 ? false : _ref$bordered,
-    _ref$groupBy = _ref.groupBy,
-    groupBy = _ref$groupBy === void 0 ? null : _ref$groupBy;
+    bordered = _ref$bordered === void 0 ? false : _ref$bordered;
+  var rootNode = useMemo(function () {
+    return _defineProperty(_defineProperty(_defineProperty({}, fieldNames.key, 'root'), "nodeType", nodeTypeMap.virtual), "children", treeData);
+  }, [treeData]);
+
   /* 复用Columns组件显示行，构造一个类似表格头数据来适应Columns组件的数据结构 */
   var treeHeaderRowData = useMemo(function () {
     var data = {};
-    if (columns) columns.forEach(function (_ref2) {
-      var title = _ref2.title,
-        dataIndex = _ref2.dataIndex;
+    if (columns) columns.forEach(function (_ref3) {
+      var title = _ref3.title,
+        dataIndex = _ref3.dataIndex;
       data[dataIndex] = title;
     });
     return data;
@@ -143,15 +115,6 @@ var Tree = function Tree(_ref) {
     }
     return newColumns;
   }, [columns, fieldNames]);
-  var treeNodeGroup = useMemo(function () {
-    if (groupBy) return groupTreeNodeByPropertyName(treeData, groupBy, fieldNames);
-  }, [treeData, groupBy]);
-  var groupByTitle = useMemo(function () {
-    var _columns$find;
-    return (_columns$find = columns.find(function (column) {
-      return column.dataIndex === groupBy;
-    })) === null || _columns$find === void 0 ? void 0 : _columns$find.title;
-  }, [columns, groupBy]);
   var boxShadowBox = useRef(null);
   /* 树组件的结构其实比较简单，就是一个树标题（TableMode下），然后树节点形成的列表 */
   return /*#__PURE__*/React.createElement(TreeContainer, {
@@ -187,71 +150,23 @@ var Tree = function Tree(_ref) {
     isFlex: isFlex
   })), /*#__PURE__*/React.createElement(TreeBody, {
     direction: "column"
-  }, !treeNodeGroup && !groupBy && treeData.map(function (node) {
-    return /*#__PURE__*/React.createElement(TreeNodeController, {
-      key: node[fieldNames.key],
-      selectedKeys: selectedKeys,
-      onSelect: onSelect,
-      expandedKeys: expandedKeys,
-      onExpand: onExpand,
-      width: isTableMode && !isFlex ? rowWidth : undefined,
-      node: node,
-      fieldNames: fieldNames,
-      isFlex: isFlex,
-      isTableMode: !!isTableMode,
-      columns: columns,
-      multiple: multiple,
-      level: rootLevel,
-      mainWidth: titleWidth,
-      contextMenuRender: contextMenuRender,
-      titleRender: titleRender
-    });
-  }), treeNodeGroup && groupBy && Object.keys(treeNodeGroup).map(function (key) {
-    var group = treeNodeGroup[key];
-    if (group.length < 2) {
-      return /*#__PURE__*/React.createElement(TreeNodeController, {
-        key: group[0][fieldNames.key],
-        selectedKeys: selectedKeys,
-        onSelect: onSelect,
-        expandedKeys: expandedKeys,
-        onExpand: onExpand,
-        width: isTableMode && !isFlex ? rowWidth : undefined,
-        node: group[0],
-        fieldNames: fieldNames,
-        isFlex: isFlex,
-        isTableMode: !!isTableMode,
-        columns: columns,
-        multiple: multiple,
-        level: rootLevel,
-        mainWidth: titleWidth,
-        contextMenuRender: contextMenuRender,
-        titleRender: titleRender
-      });
-    }
-    return /*#__PURE__*/React.createElement(TreeNodeGroup, {
-      groupName: groupByTitle,
-      key: key,
-      groupValue: key
-    }, treeNodeGroup[key].map(function (node) {
-      return /*#__PURE__*/React.createElement(TreeNodeController, {
-        key: node[fieldNames.key],
-        selectedKeys: selectedKeys,
-        onSelect: onSelect,
-        expandedKeys: expandedKeys,
-        onExpand: onExpand,
-        width: isTableMode && !isFlex ? rowWidth : undefined,
-        node: node,
-        fieldNames: fieldNames,
-        isFlex: isFlex,
-        isTableMode: !!isTableMode,
-        columns: columns,
-        multiple: multiple,
-        level: rootLevel + 1,
-        mainWidth: titleWidth,
-        contextMenuRender: contextMenuRender,
-        titleRender: titleRender
-      });
-    }));
+  }, /*#__PURE__*/React.createElement(TreeNodeController, {
+    key: rootNode[fieldNames.key],
+    selectedKeys: selectedKeys,
+    onSelect: onSelect,
+    expandedKeys: expandedKeys,
+    onExpand: onExpand,
+    width: isTableMode && !isFlex ? rowWidth : undefined,
+    node: rootNode,
+    fieldNames: fieldNames,
+    isFlex: isFlex,
+    isTableMode: isTableMode,
+    columns: columns,
+    multiple: multiple,
+    level: rootLevel,
+    mainWidth: titleWidth,
+    contextMenuRender: contextMenuRender,
+    titleRender: titleRender
   })));
 };
 export default Tree;

package/dist/Tree/TreeNode.d.ts

@@ -1,5 +1,4 @@
 import React, { Key, ReactNode } from 'react';
-import { MainProperty } from './MainProperties';
 export type TreeNodeControllerProps = {
     node: TreeNodeType;
     selectedKeys: Key[];
@@ -17,5 +16,7 @@ export type TreeNodeControllerProps = {
     contextMenuRender?: (node: TreeNodeType) => MenuItem[];
     titleRender?: ((node: TreeNodeType) => ReactNode | null) | null | undefined;
 };
+export declare const nodeTypeMap: {
+    virtual: string;
+};
 export declare const TreeNodeController: React.FC<TreeNodeControllerProps>;
-export { MainProperty };

package/dist/Tree/TreeNode.js

@@ -1,5 +1,11 @@
+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; }
 import { CaretRightOutlined } from '@ant-design/icons';
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import styled, { css } from 'styled-components';
 import { Column, Columns } from "../Columns";
 import { Flex, FlexItem } from "../Flex";
@@ -27,6 +33,62 @@ var TreeNode = styled(ListItem).withConfig({
     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;}}"], Column, MainArea, MainArea, Flex);
   }
 });
+var TreeNodeGroupNode = styled.li.withConfig({
+  displayName: "TreeNodeGroupNode",
+  componentId: "basic-component-347b__sc-tzoomn-2"
+})(["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) {
+  if (props.width) {
+    return css(["width:", "px;"], props.width);
+  }
+});
+var TreeNodeGroup = function TreeNodeGroup(props) {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    expanded = _useState2[0],
+    setExpanded = _useState2[1];
+  if (React.Children.toArray(props.children).length > 1) return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TreeNodeGroupNode, {
+    width: props.width,
+    onClick: function onClick() {
+      return setExpanded(!expanded);
+    }
+  }, /*#__PURE__*/React.createElement(Flex, {
+    width: props.mainWidth,
+    style: {
+      position: 'sticky',
+      left: 0
+    }
+  }, /*#__PURE__*/React.createElement(FlexItem, null, /*#__PURE__*/React.createElement(Indent, {
+    level: props.level
+  })), /*#__PURE__*/React.createElement(FlexItem, {
+    width: 24,
+    align: "center",
+    cursor: "pointer"
+  }, /*#__PURE__*/React.createElement(ExpandedIcon, {
+    expanded: expanded
+  })), /*#__PURE__*/React.createElement(FlexItem, {
+    flex: 1
+  }, props.groupName, " : ", props.groupValue))), expanded && React.Children.map(props.children, function (child) {
+    return /*#__PURE__*/React.cloneElement(child, {
+      level: props.level + 1
+    });
+  }));else return props.children;
+};
+function groupTreeNodeByPropertyName(arr, propertyName, fieldNames) {
+  var grouped = arr.reduce(function (acc, obj) {
+    var key = obj[propertyName || fieldNames.key] || obj[fieldNames.key];
+    if (key) {
+      if (!acc[key]) {
+        acc[key] = [];
+      }
+      acc[key].push(obj);
+    } else {}
+    return acc;
+  }, {});
+  return grouped;
+}
+export var nodeTypeMap = {
+  virtual: 'virtual'
+};
 export var TreeNodeController = function TreeNodeController(_ref) {
   var node = _ref.node,
     _ref$selectedKeys = _ref.selectedKeys,
@@ -52,8 +114,17 @@ export var TreeNodeController = function TreeNodeController(_ref) {
     return selectedKeys.includes(node[fieldNames.key]);
   }, [selectedKeys, fieldNames, node]);
   var expanded = useMemo(function () {
-    return expandedKeys.includes(node[fieldNames.key]);
+    return expandedKeys.includes(node[fieldNames.key]) || node.nodeType === nodeTypeMap.virtual;
   }, [expandedKeys, fieldNames, node]);
+  var treeNodeGroup = useMemo(function () {
+    return groupTreeNodeByPropertyName(node.children || [], node.groupBy, fieldNames);
+  }, [node.children, node.groupBy]);
+  var groupTitle = useMemo(function () {
+    var _columns$find;
+    return (_columns$find = columns.find(function (column) {
+      return column.dataIndex === node.groupBy;
+    })) === null || _columns$find === void 0 ? void 0 : _columns$find.title;
+  }, [columns, node.groupBy]);
   var onClickNodeHandler = useCallback(function (e) {
     if (multiple) {
       if (selected) {
@@ -96,11 +167,7 @@ export var TreeNodeController = function TreeNodeController(_ref) {
       });
     }
   }, [expandedKeys, onExpand, expanded]);
-  var treeNode = /*#__PURE__*/React.createElement(TreeNode, {
-    selected: selectedKeys.includes(node[fieldNames.key]),
-    width: width,
-    onClick: onClickNodeHandler
-  }, /*#__PURE__*/React.createElement(MainProperty, {
+  var nodeEntity = /*#__PURE__*/React.createElement(MainProperty, {
     isFlex: isFlex,
     mainWidth: mainWidth,
     main: /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(FlexItem, null, /*#__PURE__*/React.createElement(Indent, {
@@ -121,29 +188,41 @@ export var TreeNodeController = function TreeNodeController(_ref) {
       rowData: node,
       isFlex: isFlex
     })
-  }));
-  return /*#__PURE__*/React.createElement(React.Fragment, null, contextMenuRender && /*#__PURE__*/React.createElement(Menu.Popup, {
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, node.nodeType !== nodeTypeMap.virtual && /*#__PURE__*/React.createElement(TreeNode, {
+    selected: selectedKeys.includes(node[fieldNames.key]),
+    width: width,
+    onClick: onClickNodeHandler
+  }, contextMenuRender ? /*#__PURE__*/React.createElement(Menu.Popup, {
     trigger: "contextmenu",
     items: contextMenuRender(node)
-  }, treeNode), !contextMenuRender && treeNode, expanded && node.children.map(function (childNode) {
-    return /*#__PURE__*/React.createElement(TreeNodeController, {
+  }, nodeEntity) : nodeEntity), expanded && treeNodeGroup && Object.keys(treeNodeGroup).map(function (groupKey) {
+    return /*#__PURE__*/React.createElement(TreeNodeGroup, {
       width: width,
-      selectedKeys: selectedKeys,
-      key: childNode[fieldNames.key],
-      node: childNode,
-      fieldNames: fieldNames,
-      isFlex: isFlex,
-      isTableMode: isTableMode,
-      columns: columns,
-      onSelect: onSelect,
-      multiple: multiple,
-      level: childLevel,
       mainWidth: mainWidth,
-      onExpand: onExpand,
-      expandedKeys: expandedKeys,
-      contextMenuRender: contextMenuRender,
-      titleRender: titleRender
-    });
+      key: groupKey,
+      groupValue: groupKey,
+      groupName: groupTitle,
+      level: childLevel
+    }, treeNodeGroup[groupKey].map(function (childNode) {
+      return /*#__PURE__*/React.createElement(TreeNodeController, {
+        width: width,
+        selectedKeys: selectedKeys,
+        key: childNode[fieldNames.key],
+        node: childNode,
+        fieldNames: fieldNames,
+        isFlex: isFlex,
+        isTableMode: isTableMode,
+        columns: columns,
+        onSelect: onSelect,
+        multiple: multiple,
+        level: childLevel,
+        mainWidth: mainWidth,
+        onExpand: onExpand,
+        expandedKeys: expandedKeys,
+        contextMenuRender: contextMenuRender,
+        titleRender: titleRender
+      });
+    }));
   }));
-};
-export { MainProperty };
+};

package/dist/__styles/GlobalStyles.js

@@ -1,6 +1,6 @@
 // GlobalStyles.js
 import { createGlobalStyle } from 'styled-components';
-var GlobalStyles = createGlobalStyle([":root{--kep-platform-black:#000000;--kep-platform-blue:#1677ff;--kep-platform-purple:#722ED1;--kep-platform-cyan:#13C2C2;--kep-platform-green:#52C41A;--kep-platform-magenta:#EB2F96;--kep-platform-pink:#eb2f96;--kep-platform-red:#F5222D;--kep-platform-orange:#FA8C16;--kep-platform-yellow:#FADB14;--kep-platform-volcano:#FA541C;--kep-platform-geekblue:#2F54EB;--kep-platform-gold:#FAAD14;--kep-platform-lime:#A0D911;--kep-platform-color-primary:#1677ff;--kep-platform-color-success:#52c41a;--kep-platform-color-warning:#faad14;--kep-platform-color-error:#ff4d4f;--kep-platform-color-info:#1677ff;--kep-platform-color-link:#1677ff;--kep-platform-color-text-base:#000;--kep-platform-color-bg-base:#fff;--kep-platform-blue-1:#e6f4ff;--kep-platform-blue-2:#bae0ff;--kep-platform-blue-3:#91caff;--kep-platform-blue-4:#69b1ff;--kep-platform-blue-5:#4096ff;--kep-platform-blue-6:#1677ff;--kep-platform-blue-7:#0958d9;--kep-platform-blue-8:#003eb3;--kep-platform-blue-9:#002c8c;--kep-platform-blue-10:#001d66;--kep-platform-purple-1:#f9f0ff;--kep-platform-purple-2:#efdbff;--kep-platform-purple-3:#d3adf7;--kep-platform-purple-4:#b37feb;--kep-platform-purple-5:#9254de;--kep-platform-purple-6:#722ed1;--kep-platform-purple-7:#531dab;--kep-platform-purple-8:#391085;--kep-platform-purple-9:#22075e;--kep-platform-purple-10:#120338;--kep-platform-cyan-1:#e6fffb;--kep-platform-cyan-2:#b5f5ec;--kep-platform-cyan-3:#87e8de;--kep-platform-cyan-4:#5cdbd3;--kep-platform-cyan-5:#36cfc9;--kep-platform-cyan-6:#13c2c2;--kep-platform-cyan-7:#08979c;--kep-platform-cyan-8:#006d75;--kep-platform-cyan-9:#00474f;--kep-platform-cyan-10:#002329;--kep-platform-green-1:#f6ffed;--kep-platform-green-2:#d9f7be;--kep-platform-green-3:#b7eb8f;--kep-platform-green-4:#95de64;--kep-platform-green-5:#73d13d;--kep-platform-green-6:#52c41a;--kep-platform-green-7:#389e0d;--kep-platform-green-8:#237804;--kep-platform-green-9:#135200;--kep-platform-green-10:#092b00;--kep-platform-magenta-1:#fff0f6;--kep-platform-magenta-2:#ffd6e7;--kep-platform-magenta-3:#ffadd2;--kep-platform-magenta-4:#ff85c0;--kep-platform-magenta-5:#f759ab;--kep-platform-magenta-6:#eb2f96;--kep-platform-magenta-7:#c41d7f;--kep-platform-magenta-8:#9e1068;--kep-platform-magenta-9:#780650;--kep-platform-magenta-10:#520339;--kep-platform-pink-1:#fff0f6;--kep-platform-pink-2:#ffd6e7;--kep-platform-pink-3:#ffadd2;--kep-platform-pink-4:#ff85c0;--kep-platform-pink-5:#f759ab;--kep-platform-pink-6:#eb2f96;--kep-platform-pink-7:#c41d7f;--kep-platform-pink-8:#9e1068;--kep-platform-pink-9:#780650;--kep-platform-pink-10:#520339;--kep-platform-red-1:#fff1f0;--kep-platform-red-2:#ffccc7;--kep-platform-red-3:#ffa39e;--kep-platform-red-4:#ff7875;--kep-platform-red-5:#ff4d4f;--kep-platform-red-6:#f5222d;--kep-platform-red-7:#cf1322;--kep-platform-red-8:#a8071a;--kep-platform-red-9:#820014;--kep-platform-red-10:#5c0011;--kep-platform-orange-1:#fff7e6;--kep-platform-orange-2:#ffe7ba;--kep-platform-orange-3:#ffd591;--kep-platform-orange-4:#ffc069;--kep-platform-orange-5:#ffa940;--kep-platform-orange-6:#fa8c16;--kep-platform-orange-7:#d46b08;--kep-platform-orange-8:#ad4e00;--kep-platform-orange-9:#873800;--kep-platform-orange-10:#612500;--kep-platform-yellow-1:#feffe6;--kep-platform-yellow-2:#ffffb8;--kep-platform-yellow-3:#fffb8f;--kep-platform-yellow-4:#fff566;--kep-platform-yellow-5:#ffec3d;--kep-platform-yellow-6:#fadb14;--kep-platform-yellow-7:#d4b106;--kep-platform-yellow-8:#ad8b00;--kep-platform-yellow-9:#876800;--kep-platform-yellow-10:#614700;--kep-platform-volcano-1:#fff2e8;--kep-platform-volcano-2:#ffd8bf;--kep-platform-volcano-3:#ffbb96;--kep-platform-volcano-4:#ff9c6e;--kep-platform-volcano-5:#ff7a45;--kep-platform-volcano-6:#fa541c;--kep-platform-volcano-7:#d4380d;--kep-platform-volcano-8:#ad2102;--kep-platform-volcano-9:#871400;--kep-platform-volcano-10:#610b00;--kep-platform-geekblue-1:#f0f5ff;--kep-platform-geekblue-2:#d6e4ff;--kep-platform-geekblue-3:#adc6ff;--kep-platform-geekblue-4:#85a5ff;--kep-platform-geekblue-5:#597ef7;--kep-platform-geekblue-6:#2f54eb;--kep-platform-geekblue-7:#1d39c4;--kep-platform-geekblue-8:#10239e;--kep-platform-geekblue-9:#061178;--kep-platform-geekblue-10:#030852;--kep-platform-gold-1:#fffbe6;--kep-platform-gold-2:#fff1b8;--kep-platform-gold-3:#ffe58f;--kep-platform-gold-4:#ffd666;--kep-platform-gold-5:#ffc53d;--kep-platform-gold-6:#faad14;--kep-platform-gold-7:#d48806;--kep-platform-gold-8:#ad6800;--kep-platform-gold-9:#874d00;--kep-platform-gold-10:#613400;--kep-platform-lime-1:#fcffe6;--kep-platform-lime-2:#f4ffb8;--kep-platform-lime-3:#eaff8f;--kep-platform-lime-4:#d3f261;--kep-platform-lime-5:#bae637;--kep-platform-lime-6:#a0d911;--kep-platform-lime-7:#7cb305;--kep-platform-lime-8:#5b8c00;--kep-platform-lime-9:#3f6600;--kep-platform-lime-10:#254000;--kep-platform-color-text:rgba(0,0,0,0.88);--kep-platform-color-text-active:var(--kep-platform-blue-6);--kep-platform-color-text-secondary:rgba(0,0,0,0.65);--kep-platform-color-text-tertiary:rgba(0,0,0,0.45);--kep-platform-color-text-quaternary:rgba(0,0,0,0.25);--kep-platform-color-fill:rgba(0,0,0,0.15);--kep-platform-color-fill-secondary:rgba(0,0,0,0.06);--kep-platform-color-fill-tertiary:rgba(0,0,0,0.04);--kep-platform-color-fill-quaternary:rgba(0,0,0,0.02);--kep-platform-color-bg-hover:#f7f7f7;--kep-platform-color-bg-layout:#f5f5f5;--kep-platform-color-bg-container:#ffffff;--kep-platform-color-bg-elevated:#ffffff;--kep-platform-color-bg-spotlight:rgba(0,0,0,0.85);--kep-platform-color-bg-blur:transparent;--kep-platform-color-border:#e4e9ec;--kep-platform-color-border-secondary:#f0f0f0;--kep-platform-color-primary-bg:#e6f4ff;--kep-platform-color-primary-bg-hover:#bae0ff;--kep-platform-color-primary-border:#91caff;--kep-platform-color-primary-border-hover:#69b1ff;--kep-platform-color-primary-hover:#4096ff;--kep-platform-color-primary-active:#0958d9;--kep-platform-color-primary-text-hover:#4096ff;--kep-platform-color-primary-text:#1677ff;--kep-platform-color-primary-text-active:#0958d9;--kep-platform-color-success-bg:#f6ffed;--kep-platform-color-success-bg-hover:#d9f7be;--kep-platform-color-success-border:#b7eb8f;--kep-platform-color-success-border-hover:#95de64;--kep-platform-color-success-hover:#95de64;--kep-platform-color-success-active:#389e0d;--kep-platform-color-success-text-hover:#73d13d;--kep-platform-color-success-text:#52c41a;--kep-platform-color-success-text-active:#389e0d;--kep-platform-color-error-bg:#fff2f0;--kep-platform-color-error-bg-hover:#fff1f0;--kep-platform-color-error-bg-active:#ffccc7;--kep-platform-color-error-border:#ffccc7;--kep-platform-color-error-border-hover:#ffa39e;--kep-platform-color-error-hover:#ff7875;--kep-platform-color-error-active:#d9363e;--kep-platform-color-error-text-hover:#ff7875;--kep-platform-color-error-text:#ff4d4f;--kep-platform-color-error-text-active:#d9363e;--kep-platform-color-warning-bg:#fffbe6;--kep-platform-color-warning-bg-hover:#fff1b8;--kep-platform-color-warning-border:#ffe58f;--kep-platform-color-warning-border-hover:#ffd666;--kep-platform-color-warning-hover:#ffd666;--kep-platform-color-warning-active:#d48806;--kep-platform-color-warning-text-hover:#ffc53d;--kep-platform-color-warning-text:#faad14;--kep-platform-color-warning-text-active:#d48806;--kep-platform-color-info-bg:#e6f4ff;--kep-platform-color-info-bg-hover:#bae0ff;--kep-platform-color-info-border:#91caff;--kep-platform-color-info-border-hover:#69b1ff;--kep-platform-color-info-hover:#69b1ff;--kep-platform-color-info-active:#0958d9;--kep-platform-color-info-text-hover:#4096ff;--kep-platform-color-info-text:#1677ff;--kep-platform-color-info-text-active:#0958d9;--kep-platform-color-link-hover:#69b1ff;--kep-platform-color-link-active:#0958d9;--kep-platform-color-bg-mask:rgba(0,0,0,0.45);--kep-platform-color-white:#fff;--kep-platform-color-fill-content:rgba(0,0,0,0.06);--kep-platform-color-fill-content-hover:rgba(0,0,0,0.15);--kep-platform-color-fill-alter:rgba(0,0,0,0.02);--kep-platform-color-bg-container-disabled:rgba(0,0,0,0.04);--kep-platform-color-border-bg:#ffffff;--kep-platform-color-scrollbar-thumb:var(--kep-platform-color-border);--kep-platform-color-scrollbar-thumb-hover:var(--kep-platform-color-primary-hover);--kep-platform-color-split:rgba(5,5,5,0.06);--kep-platform-color-table-border:#f0f0f0;--kep-platform-color-text-placeholder:rgba(0,0,0,0.25);--kep-platform-color-text-disabled:rgba(0,0,0,0.25);--kep-platform-color-text-heading:rgba(0,0,0,0.88);--kep-platform-color-text-label:rgba(0,0,0,0.65);--kep-platform-color-text-description:rgba(0,0,0,0.45);--kep-platform-color-text-light-solid:#fff;--kep-platform-color-highlight:#ff4d4f;--kep-platform-color-bg-text-hover:rgba(0,0,0,0.06);--kep-platform-color-bg-text-active:rgba(0,0,0,0.15);--kep-platform-color-icon:rgba(0,0,0,0.45);--kep-platform-color-icon-hover:rgba(0,0,0,0.88);--kep-platform-color-error-outline:rgba(255,38,5,0.06);--kep-platform-color-warning-outline:rgba(255,215,5,0.1);--kep-platform-control-item-bg-hover:rgba(0,0,0,0.04);--kep-platform-control-item-bg-active:#e6f4ff;--kep-platform-control-item-bg-active-hover:#bae0ff;--kep-platform-control-item-bg-active-disabled:rgba(0,0,0,0.15);--kep-platform-control-tmp-outline:rgba(0,0,0,0.02);--kep-platform-control-outline:rgba(5,145,255,0.1);--kep-platform-box-shadow:0 6px 16px 0 rgba(0,0,0,0.08),0 3px 6px -4px rgba(0,0,0,0.12),0 9px 28px 8px rgba(0,0,0,0.05);--kep-platform-box-shadow-inset:inset  10px 0 8px -8px rgba(0,0,0,0.08);--kep-platform-box-shadow-secondary:0 6px 16px 0 rgba(0,0,0,0.08),0 3px 6px -4px rgba(0,0,0,0.12),0 9px 28px 8px rgba(0,0,0,0.05);--kep-platform-box-shadow-tertiary:0 1px 2px 0 rgba(0,0,0,0.03),0 1px 6px -1px rgba(0,0,0,0.02),0 2px 4px 0 rgba(0,0,0,0.02);--kep-platform-box-shadow-popover-arrow:2px 2px 5px rgba(0,0,0,0.05);--kep-platform-box-shadow-card:0 1px 2px -2px rgba(0,0,0,0.16),0 3px 6px 0 rgba(0,0,0,0.12),0 5px 12px 4px rgba(0,0,0,0.09);--kep-platform-box-shadow-drawer-right:-6px 0 16px 0 rgba(0,0,0,0.08),-3px 0 6px -4px rgba(0,0,0,0.12),-9px 0 28px 8px rgba(0,0,0,0.05);--kep-platform-box-shadow-drawer-left:6px 0 16px 0 rgba(0,0,0,0.08),3px 0 6px -4px rgba(0,0,0,0.12),9px 0 28px 8px rgba(0,0,0,0.05);--kep-platform-box-shadow-drawer-up:0 6px 16px 0 rgba(0,0,0,0.08),0 3px 6px -4px rgba(0,0,0,0.12),0 9px 28px 8px rgba(0,0,0,0.05);--kep-platform-box-shadow-drawer-down:0 -6px 16px 0 rgba(0,0,0,0.08),0 -3px 6px -4px rgba(0,0,0,0.12),0 -9px 28px 8px rgba(0,0,0,0.05);--kep-platform-color-tree-node-hover:#fafafa;--kep-platform-color-bg-active:#e6f4ff;--kep-platform-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0,0,0,0.08);--kep-platform-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0,0,0,0.08);--kep-platform-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0,0,0,0.08);--kep-platform-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0,0,0,0.08);--kep-platform-header-bg:#fafafa;--kep-platform-color-scrollbar-track:#fafafa;--kep-platform-motion-ease-out-circ:cubic-bezier(0.08,0.82,0.17,1);--kep-platform-motion-ease-in-out-circ:cubic-bezier(0.78,0.14,0.15,0.86);--kep-platform-motion-ease-out:cubic-bezier(0.215,0.61,0.355,1);--kep-platform-motion-ease-in-out:cubic-bezier(0.645,0.045,0.355,1);--kep-platform-motion-ease-out-back:cubic-bezier(0.12,0.4,0.29,1.46);--kep-platform-motion-ease-in-back:cubic-bezier(0.71,-0.46,0.88,0.6);--kep-platform-motion-ease-in-quint:cubic-bezier(0.755,0.05,0.855,0.06);--kep-platform-motion-ease-out-quint:cubic-bezier(0.23,1,0.32,1);--kep-platform-motion-duration-fast:0.1s;--kep-platform-motion-duration-mid:0.2s;--kep-platform-motion-duration-slow:0.3s;--kep-platform-font-size:16px;--kep-platform-font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';--kep-platform-font-family-code:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,Courier,monospace;--kep-platform-font-size-sm:14px;--kep-platform-font-size-lg:18px;--kep-platform-font-size-xl:20px;--kep-platform-font-size-heading-1:38px;--kep-platform-font-size-heading-2:30px;--kep-platform-font-size-heading-3:24px;--kep-platform-font-size-heading-4:20px;--kep-platform-font-size-heading-5:16px;--kep-platform-font-height:22px;--kep-platform-font-height-lg:24px;--kep-platform-font-height-sm:20px;--kep-platform-font-weight-base:400;--kep-platform-font-weight-strong:600;--kep-platform-link-decoration:none;--kep-platform-link-hover-decoration:none;--kep-platform-link-focus-decoration:none;--kep-platform-line-width:1px;--kep-platform-line-type:solid;--kep-platform-line-height:1.5714285714285714;--kep-platform-line-height-lg:1.5;--kep-platform-line-height-sm:1.6666666666666667;--kep-platform-line-height-heading-1:1.2105263157894737;--kep-platform-line-height-heading-2:1.2666666666666666;--kep-platform-line-height-heading-3:1.3333333333333333;--kep-platform-line-height-heading-4:1.4;--kep-platform-line-height-heading-5:1.5;--kep-platform-line-width-bold:2px;--kep-platform-font-size-icon:12px;--kep-platform-font-size-code:12px;--kep-platform-text-align:left;--kep-platform-border-radius:6px;--kep-platform-border-radius-xs:2px;--kep-platform-border-radius-sm:4px;--kep-platform-border-radius-lg:8px;--kep-platform-border-radius-outer:4px;--kep-platform-z-index-base:0;--kep-platform-z-index-popup-base:1000;--kep-platform-z-index-fixed:10;--kep-platform-opacity-loading:0.65;--kep-platform-control-padding-horizontal:12px;--kep-platform-control-padding-horizontal-sm:8px;--kep-platform-padding-xxs:4px;--kep-platform-padding-xs:8px;--kep-platform-padding-sm:12px;--kep-platform-padding:16px;--kep-platform-padding-md:20px;--kep-platform-padding-lg:24px;--kep-platform-padding-xl:32px;--kep-platform-padding-block-sm:0;--kep-platform-padding-block:4px;--kep-platform-padding-block-lg:7px;--kep-platform-padding-inline-sm:7px;--kep-platform-padding-inline:15px;--kep-platform-padding-inline-lg:15px;--kep-platform-padding-content-horizontal-lg:24px;--kep-platform-padding-content-vertical-lg:16px;--kep-platform-padding-content-horizontal:16px;--kep-platform-padding-content-vertical:12px;--kep-platform-padding-content-horizontal-sm:16px;--kep-platform-padding-content-vertical-sm:8px;--kep-platform-margin-xxxs:2px;--kep-platform-margin-xxs:4px;--kep-platform-margin-xs:8px;--kep-platform-margin-sm:12px;--kep-platform-margin:16px;--kep-platform-margin-md:20px;--kep-platform-margin-lg:24px;--kep-platform-margin-xl:32px;--kep-platform-margin-xxl:48px;--kep-platform-width-scrollbar:8px;--kep-platform-height-scrollbar:8px;--kep-platform-menu-item-height:40px;--kep-platform-menu-item-line-height:40px;}*,*::before,*::after{box-sizing:border-box;}body{margin:0;font-family:var(--kep-platform-font-family);font-size:var(--kep-platform-font-size);font-weight:var(--kep-platform-font-weight-base);line-height:var(--kep-platform-line-height);color:var(--kep-platform-color-text);text-align:var(--kep-platform-text-align);background-color:var(--kep-platform-color-bg-base);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:var(--kep-platform-black);}[tabindex='-1']:focus:not(:focus-visible){outline:0 !important;}hr{margin:--kep-platform-margin-sm 0;height:var(--kep-platform-line-width);color:var(--kep-platform-color-border);background-color:currentColor;border:0;}hr:not([size]){height:var(--kep-platform-line-width);}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:0;font-family:var(--kep-platform-font-family);font-style:var(--kep-platform-link-decoration);font-weight:var(--kep-platform-font-weight-strong);line-height:var(--kep-platform-line-height);color:var(--kep-platform-color-text-secondary);}h1{font-size:var(--kep-platform-font-size-heading-1);}h2{font-size:var(--kep-platform-font-size-heading-2);}h3{font-size:var(--kep-platform-font-size-heading-3);}h4{font-size:var(--kep-platform-font-size-heading-4);}h5{font-size:var(--kep-platform-font-size-heading-5);}h6{font-size:var(--kep-platform-font-size-heading-6);}p{margin-top:0;margin-bottom:0 !important;}abbr[title],abbr[data-original-title]{text-decoration:underline;text-decoration:underline dotted;cursor:help;text-decoration-skip-ink:none;}address{margin-bottom:1rem;font-style:normal;line-height:inherit;}ol,ul{padding-left:0;list-style:none;}ol,ul,dl{margin-top:0;margin-bottom:0;}ol ol,ul ul,ol ul,ul ol{margin-bottom:0;}dt{font-weight:var(--kep-platform-font-weight-base);}dd{margin-bottom:0.5rem;margin-left:0;}blockquote{margin:0 0 1rem;}b,strong{font-weight:var(--kep-platform-font-weight-strong);}small{font-size:var(--kep-platform-font-size-sm);}sub,sup{position:relative;font-size:var(--kep-platform-font-size-sm);line-height:0;vertical-align:baseline;}sub{bottom:-0.25em;}sup{top:-0.5em;}a{color:var(--kep-platform-color-link);text-decoration:var(--kep-platform-link-decoration);cursor:pointer;&:hover{color:var(--kep-platform-color-link-hover);text-decoration:--kep-platform-link-hover-decoration}}pre,code,kbd,samp{font-family:var(--kep-platform-font-family-code);font-size:var(--kep-platform-font-size-code);}pre{display:block;margin-top:0;margin-bottom:var(--kep-platform-margin);overflow:auto;font-size:var(--kep-platform-font-size-code);color:var(--kep-platform-color-text-label);code{font-size:inherit;color:inherit;word-break:normal;}}code{font-size:var(--kep-platform-font-size-code);color:var(--kep-platform-color-text-quaternary);word-wrap:break-word;a > &{color:inherit;}}figure{margin:0 0 1rem;}img{vertical-align:middle;}svg{overflow:hidden;vertical-align:middle;}table{border-collapse:collapse;}caption{padding-top:0.5rem;padding-bottom:0.5rem;color:var(--kep-platform-color-text-secondary);text-align:left;caption-side:bottom;}th{text-align:inherit;}label{display:inline-block;margin-bottom:0.5rem;}button{border-radius:0;}input,button,select,optgroup,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit;}button,input{overflow:visible;}button,select{text-transform:none;}select{word-wrap:normal;}[list]::-webkit-calendar-picker-indicator{display:none;}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{appearance:button;&:not(:disabled){cursor:pointer;}}button:focus{outline:none;}input:focus{outline:none;}::-moz-focus-inner{padding:0;border-style:none;}input[type='date'],input[type='time'],input[type='datetime-local'],input[type='month']{appearance:textfield;}::-webkit-scrollbar{width:var(--kep-platform-width-scrollbar);height:var(--kep-platform-height-scrollbar);}::-webkit-scrollbar-track{border-radius:var(--kep-platform-border-radius);background-color:var(--kep-platform-color-scrollbar-track);}::-webkit-scrollbar-thumb{background-color:var(--kep-platform-color-scrollbar-thumb);border-radius:var(--kep-platform-border-radius);}::-webkit-scrollbar-thumb:hover{background-color:var(--kep-platform-color-scrollbar-thumb-hover);}textarea{overflow:auto;resize:vertical;}fieldset{min-width:0;padding:0;margin:0;border:0;}legend{float:left;width:100%;padding:0;margin-bottom:var(--kep-platform-margin);font-size:var(--kep-platform-font-size);font-weight:var(--kep-platform-font-weight-base);line-height:inherit;color:inherit;white-space:normal;}mark{padding:var(--kep-platform-padding-sm);background-color:var(--kep-platform-padding-sm);}progress{vertical-align:baseline;}::-webkit-datetime-edit{overflow:visible;line-height:0;}[type='search']{outline-offset:-2px;appearance:textfield;}::-webkit-search-decoration{-webkit-appearance:none;}::-webkit-color-swatch-wrapper{padding:0;}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button;}output{display:inline-block;}summary{display:list-item;cursor:pointer;}template{display:none;}main{display:block;}[hidden]{display:none !important;}", ""], function (props) {
+var GlobalStyles = createGlobalStyle([":root{--kep-platform-black:#000000;--kep-platform-blue:#1677ff;--kep-platform-purple:#722ED1;--kep-platform-cyan:#13C2C2;--kep-platform-green:#52C41A;--kep-platform-magenta:#EB2F96;--kep-platform-pink:#eb2f96;--kep-platform-red:#F5222D;--kep-platform-orange:#FA8C16;--kep-platform-yellow:#FADB14;--kep-platform-volcano:#FA541C;--kep-platform-geekblue:#2F54EB;--kep-platform-gold:#FAAD14;--kep-platform-lime:#A0D911;--kep-platform-color-primary:#1677ff;--kep-platform-color-success:#52c41a;--kep-platform-color-warning:#faad14;--kep-platform-color-error:#ff4d4f;--kep-platform-color-info:#1677ff;--kep-platform-color-link:#1677ff;--kep-platform-color-text-base:#000;--kep-platform-color-bg-base:#fff;--kep-platform-blue-1:#e6f4ff;--kep-platform-blue-2:#bae0ff;--kep-platform-blue-3:#91caff;--kep-platform-blue-4:#69b1ff;--kep-platform-blue-5:#4096ff;--kep-platform-blue-6:#1677ff;--kep-platform-blue-7:#0958d9;--kep-platform-blue-8:#003eb3;--kep-platform-blue-9:#002c8c;--kep-platform-blue-10:#001d66;--kep-platform-purple-1:#f9f0ff;--kep-platform-purple-2:#efdbff;--kep-platform-purple-3:#d3adf7;--kep-platform-purple-4:#b37feb;--kep-platform-purple-5:#9254de;--kep-platform-purple-6:#722ed1;--kep-platform-purple-7:#531dab;--kep-platform-purple-8:#391085;--kep-platform-purple-9:#22075e;--kep-platform-purple-10:#120338;--kep-platform-cyan-1:#e6fffb;--kep-platform-cyan-2:#b5f5ec;--kep-platform-cyan-3:#87e8de;--kep-platform-cyan-4:#5cdbd3;--kep-platform-cyan-5:#36cfc9;--kep-platform-cyan-6:#13c2c2;--kep-platform-cyan-7:#08979c;--kep-platform-cyan-8:#006d75;--kep-platform-cyan-9:#00474f;--kep-platform-cyan-10:#002329;--kep-platform-green-1:#f6ffed;--kep-platform-green-2:#d9f7be;--kep-platform-green-3:#b7eb8f;--kep-platform-green-4:#95de64;--kep-platform-green-5:#73d13d;--kep-platform-green-6:#52c41a;--kep-platform-green-7:#389e0d;--kep-platform-green-8:#237804;--kep-platform-green-9:#135200;--kep-platform-green-10:#092b00;--kep-platform-magenta-1:#fff0f6;--kep-platform-magenta-2:#ffd6e7;--kep-platform-magenta-3:#ffadd2;--kep-platform-magenta-4:#ff85c0;--kep-platform-magenta-5:#f759ab;--kep-platform-magenta-6:#eb2f96;--kep-platform-magenta-7:#c41d7f;--kep-platform-magenta-8:#9e1068;--kep-platform-magenta-9:#780650;--kep-platform-magenta-10:#520339;--kep-platform-pink-1:#fff0f6;--kep-platform-pink-2:#ffd6e7;--kep-platform-pink-3:#ffadd2;--kep-platform-pink-4:#ff85c0;--kep-platform-pink-5:#f759ab;--kep-platform-pink-6:#eb2f96;--kep-platform-pink-7:#c41d7f;--kep-platform-pink-8:#9e1068;--kep-platform-pink-9:#780650;--kep-platform-pink-10:#520339;--kep-platform-red-1:#fff1f0;--kep-platform-red-2:#ffccc7;--kep-platform-red-3:#ffa39e;--kep-platform-red-4:#ff7875;--kep-platform-red-5:#ff4d4f;--kep-platform-red-6:#f5222d;--kep-platform-red-7:#cf1322;--kep-platform-red-8:#a8071a;--kep-platform-red-9:#820014;--kep-platform-red-10:#5c0011;--kep-platform-orange-1:#fff7e6;--kep-platform-orange-2:#ffe7ba;--kep-platform-orange-3:#ffd591;--kep-platform-orange-4:#ffc069;--kep-platform-orange-5:#ffa940;--kep-platform-orange-6:#fa8c16;--kep-platform-orange-7:#d46b08;--kep-platform-orange-8:#ad4e00;--kep-platform-orange-9:#873800;--kep-platform-orange-10:#612500;--kep-platform-yellow-1:#feffe6;--kep-platform-yellow-2:#ffffb8;--kep-platform-yellow-3:#fffb8f;--kep-platform-yellow-4:#fff566;--kep-platform-yellow-5:#ffec3d;--kep-platform-yellow-6:#fadb14;--kep-platform-yellow-7:#d4b106;--kep-platform-yellow-8:#ad8b00;--kep-platform-yellow-9:#876800;--kep-platform-yellow-10:#614700;--kep-platform-volcano-1:#fff2e8;--kep-platform-volcano-2:#ffd8bf;--kep-platform-volcano-3:#ffbb96;--kep-platform-volcano-4:#ff9c6e;--kep-platform-volcano-5:#ff7a45;--kep-platform-volcano-6:#fa541c;--kep-platform-volcano-7:#d4380d;--kep-platform-volcano-8:#ad2102;--kep-platform-volcano-9:#871400;--kep-platform-volcano-10:#610b00;--kep-platform-geekblue-1:#f0f5ff;--kep-platform-geekblue-2:#d6e4ff;--kep-platform-geekblue-3:#adc6ff;--kep-platform-geekblue-4:#85a5ff;--kep-platform-geekblue-5:#597ef7;--kep-platform-geekblue-6:#2f54eb;--kep-platform-geekblue-7:#1d39c4;--kep-platform-geekblue-8:#10239e;--kep-platform-geekblue-9:#061178;--kep-platform-geekblue-10:#030852;--kep-platform-gold-1:#fffbe6;--kep-platform-gold-2:#fff1b8;--kep-platform-gold-3:#ffe58f;--kep-platform-gold-4:#ffd666;--kep-platform-gold-5:#ffc53d;--kep-platform-gold-6:#faad14;--kep-platform-gold-7:#d48806;--kep-platform-gold-8:#ad6800;--kep-platform-gold-9:#874d00;--kep-platform-gold-10:#613400;--kep-platform-lime-1:#fcffe6;--kep-platform-lime-2:#f4ffb8;--kep-platform-lime-3:#eaff8f;--kep-platform-lime-4:#d3f261;--kep-platform-lime-5:#bae637;--kep-platform-lime-6:#a0d911;--kep-platform-lime-7:#7cb305;--kep-platform-lime-8:#5b8c00;--kep-platform-lime-9:#3f6600;--kep-platform-lime-10:#254000;--kep-platform-color-text:rgba(0,0,0,0.88);--kep-platform-color-text-active:var(--kep-platform-blue-6);--kep-platform-color-text-secondary:rgba(0,0,0,0.65);--kep-platform-color-text-tertiary:rgba(0,0,0,0.45);--kep-platform-color-text-quaternary:rgba(0,0,0,0.25);--kep-platform-color-fill:rgba(0,0,0,0.15);--kep-platform-color-fill-secondary:rgba(0,0,0,0.06);--kep-platform-color-fill-tertiary:rgba(0,0,0,0.04);--kep-platform-color-fill-quaternary:rgba(0,0,0,0.02);--kep-platform-color-bg-hover:#f7f7f7;--kep-platform-color-bg-layout:#f5f5f5;--kep-platform-color-bg-container:#ffffff;--kep-platform-color-bg-elevated:#ffffff;--kep-platform-color-bg-spotlight:rgba(0,0,0,0.85);--kep-platform-color-bg-blur:transparent;--kep-platform-color-border:#e4e9ec;--kep-platform-color-border-secondary:#f0f0f0;--kep-platform-color-primary-bg:#e6f4ff;--kep-platform-color-primary-bg-hover:#bae0ff;--kep-platform-color-primary-border:#91caff;--kep-platform-color-primary-border-hover:#69b1ff;--kep-platform-color-primary-hover:#4096ff;--kep-platform-color-primary-active:#0958d9;--kep-platform-color-primary-text-hover:#4096ff;--kep-platform-color-primary-text:#1677ff;--kep-platform-color-primary-text-active:#0958d9;--kep-platform-color-success-bg:#f6ffed;--kep-platform-color-success-bg-hover:#d9f7be;--kep-platform-color-success-border:#b7eb8f;--kep-platform-color-success-border-hover:#95de64;--kep-platform-color-success-hover:#95de64;--kep-platform-color-success-active:#389e0d;--kep-platform-color-success-text-hover:#73d13d;--kep-platform-color-success-text:#52c41a;--kep-platform-color-success-text-active:#389e0d;--kep-platform-color-error-bg:#fff2f0;--kep-platform-color-error-bg-hover:#fff1f0;--kep-platform-color-error-bg-active:#ffccc7;--kep-platform-color-error-border:#ffccc7;--kep-platform-color-error-border-hover:#ffa39e;--kep-platform-color-error-hover:#ff7875;--kep-platform-color-error-active:#d9363e;--kep-platform-color-error-text-hover:#ff7875;--kep-platform-color-error-text:#ff4d4f;--kep-platform-color-error-text-active:#d9363e;--kep-platform-color-warning-bg:#fffbe6;--kep-platform-color-warning-bg-hover:#fff1b8;--kep-platform-color-warning-border:#ffe58f;--kep-platform-color-warning-border-hover:#ffd666;--kep-platform-color-warning-hover:#ffd666;--kep-platform-color-warning-active:#d48806;--kep-platform-color-warning-text-hover:#ffc53d;--kep-platform-color-warning-text:#faad14;--kep-platform-color-warning-text-active:#d48806;--kep-platform-color-info-bg:#e6f4ff;--kep-platform-color-info-bg-hover:#bae0ff;--kep-platform-color-info-border:#91caff;--kep-platform-color-info-border-hover:#69b1ff;--kep-platform-color-info-hover:#69b1ff;--kep-platform-color-info-active:#0958d9;--kep-platform-color-info-text-hover:#4096ff;--kep-platform-color-info-text:#1677ff;--kep-platform-color-info-text-active:#0958d9;--kep-platform-color-link-hover:#69b1ff;--kep-platform-color-link-active:#0958d9;--kep-platform-color-bg-mask:rgba(0,0,0,0.45);--kep-platform-color-white:#fff;--kep-platform-color-fill-content:rgba(0,0,0,0.06);--kep-platform-color-fill-content-hover:rgba(0,0,0,0.15);--kep-platform-color-fill-alter:rgba(0,0,0,0.02);--kep-platform-color-bg-container-disabled:rgba(0,0,0,0.04);--kep-platform-color-border-bg:#ffffff;--kep-platform-color-scrollbar-thumb:var(--kep-platform-color-border);--kep-platform-color-scrollbar-thumb-hover:var(--kep-platform-color-primary-hover);--kep-platform-color-split:rgba(5,5,5,0.06);--kep-platform-color-table-border:#f0f0f0;--kep-platform-color-text-placeholder:rgba(0,0,0,0.25);--kep-platform-color-text-disabled:rgba(0,0,0,0.25);--kep-platform-color-text-heading:rgba(0,0,0,0.88);--kep-platform-color-text-label:rgba(0,0,0,0.65);--kep-platform-color-text-description:rgba(0,0,0,0.45);--kep-platform-color-text-light-solid:#fff;--kep-platform-color-highlight:#ff4d4f;--kep-platform-color-bg-text-hover:rgba(0,0,0,0.06);--kep-platform-color-bg-text-active:rgba(0,0,0,0.15);--kep-platform-color-icon:rgba(0,0,0,0.45);--kep-platform-color-icon-hover:rgba(0,0,0,0.88);--kep-platform-color-error-outline:rgba(255,38,5,0.06);--kep-platform-color-warning-outline:rgba(255,215,5,0.1);--kep-platform-control-item-bg-hover:rgba(0,0,0,0.04);--kep-platform-control-item-bg-active:#e6f4ff;--kep-platform-control-item-bg-active-hover:#bae0ff;--kep-platform-control-item-bg-active-disabled:rgba(0,0,0,0.15);--kep-platform-control-tmp-outline:rgba(0,0,0,0.02);--kep-platform-control-outline:rgba(5,145,255,0.1);--kep-platform-box-shadow:0 6px 16px 0 rgba(0,0,0,0.08),0 3px 6px -4px rgba(0,0,0,0.12),0 9px 28px 8px rgba(0,0,0,0.05);--kep-platform-box-shadow-inset:inset  10px 0 8px -8px rgba(0,0,0,0.08);--kep-platform-box-shadow-secondary:0 6px 16px 0 rgba(0,0,0,0.08),0 3px 6px -4px rgba(0,0,0,0.12),0 9px 28px 8px rgba(0,0,0,0.05);--kep-platform-box-shadow-tertiary:0 1px 2px 0 rgba(0,0,0,0.03),0 1px 6px -1px rgba(0,0,0,0.02),0 2px 4px 0 rgba(0,0,0,0.02);--kep-platform-box-shadow-popover-arrow:2px 2px 5px rgba(0,0,0,0.05);--kep-platform-box-shadow-card:0 1px 2px -2px rgba(0,0,0,0.16),0 3px 6px 0 rgba(0,0,0,0.12),0 5px 12px 4px rgba(0,0,0,0.09);--kep-platform-box-shadow-drawer-right:-6px 0 16px 0 rgba(0,0,0,0.08),-3px 0 6px -4px rgba(0,0,0,0.12),-9px 0 28px 8px rgba(0,0,0,0.05);--kep-platform-box-shadow-drawer-left:6px 0 16px 0 rgba(0,0,0,0.08),3px 0 6px -4px rgba(0,0,0,0.12),9px 0 28px 8px rgba(0,0,0,0.05);--kep-platform-box-shadow-drawer-up:0 6px 16px 0 rgba(0,0,0,0.08),0 3px 6px -4px rgba(0,0,0,0.12),0 9px 28px 8px rgba(0,0,0,0.05);--kep-platform-box-shadow-drawer-down:0 -6px 16px 0 rgba(0,0,0,0.08),0 -3px 6px -4px rgba(0,0,0,0.12),0 -9px 28px 8px rgba(0,0,0,0.05);--kep-platform-color-tree-node-hover:#fafafa;--kep-platform-color-bg-active:#e6f4ff;--kep-platform-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0,0,0,0.08);--kep-platform-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0,0,0,0.08);--kep-platform-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0,0,0,0.08);--kep-platform-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0,0,0,0.08);--kep-platform-header-bg:#fafafa;--kep-platform-color-scrollbar-track:#fafafa;--kep-platform-motion-ease-out-circ:cubic-bezier(0.08,0.82,0.17,1);--kep-platform-motion-ease-in-out-circ:cubic-bezier(0.78,0.14,0.15,0.86);--kep-platform-motion-ease-out:cubic-bezier(0.215,0.61,0.355,1);--kep-platform-motion-ease-in-out:cubic-bezier(0.645,0.045,0.355,1);--kep-platform-motion-ease-out-back:cubic-bezier(0.12,0.4,0.29,1.46);--kep-platform-motion-ease-in-back:cubic-bezier(0.71,-0.46,0.88,0.6);--kep-platform-motion-ease-in-quint:cubic-bezier(0.755,0.05,0.855,0.06);--kep-platform-motion-ease-out-quint:cubic-bezier(0.23,1,0.32,1);--kep-platform-motion-duration-fast:0.1s;--kep-platform-motion-duration-mid:0.2s;--kep-platform-motion-duration-slow:0.3s;--kep-platform-font-size:16px;--kep-platform-font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';--kep-platform-font-family-code:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,Courier,monospace;--kep-platform-font-size-sm:14px;--kep-platform-font-size-lg:18px;--kep-platform-font-size-xl:20px;--kep-platform-font-size-heading-1:38px;--kep-platform-font-size-heading-2:30px;--kep-platform-font-size-heading-3:24px;--kep-platform-font-size-heading-4:20px;--kep-platform-font-size-heading-5:16px;--kep-platform-font-height:22px;--kep-platform-font-height-lg:24px;--kep-platform-font-height-sm:20px;--kep-platform-font-weight-base:400;--kep-platform-font-weight-strong:600;--kep-platform-link-decoration:none;--kep-platform-link-hover-decoration:none;--kep-platform-link-focus-decoration:none;--kep-platform-line-width:1px;--kep-platform-line-type:solid;--kep-platform-line-height:1.5714285714285714;--kep-platform-line-height-lg:1.5;--kep-platform-line-height-sm:1.6666666666666667;--kep-platform-line-height-heading-1:1.2105263157894737;--kep-platform-line-height-heading-2:1.2666666666666666;--kep-platform-line-height-heading-3:1.3333333333333333;--kep-platform-line-height-heading-4:1.4;--kep-platform-line-height-heading-5:1.5;--kep-platform-line-width-bold:2px;--kep-platform-font-size-icon:12px;--kep-platform-font-size-code:12px;--kep-platform-text-align:left;--kep-platform-border-radius:6px;--kep-platform-border-radius-xs:2px;--kep-platform-border-radius-sm:4px;--kep-platform-border-radius-lg:8px;--kep-platform-border-radius-outer:4px;--kep-platform-z-index-base:0;--kep-platform-z-index-popup-base:1000;--kep-platform-z-index-fixed:5;--kep-platform-opacity-loading:0.65;--kep-platform-control-padding-horizontal:12px;--kep-platform-control-padding-horizontal-sm:8px;--kep-platform-padding-xxs:4px;--kep-platform-padding-xs:8px;--kep-platform-padding-sm:12px;--kep-platform-padding:16px;--kep-platform-padding-md:20px;--kep-platform-padding-lg:24px;--kep-platform-padding-xl:32px;--kep-platform-padding-block-sm:0;--kep-platform-padding-block:4px;--kep-platform-padding-block-lg:7px;--kep-platform-padding-inline-sm:7px;--kep-platform-padding-inline:15px;--kep-platform-padding-inline-lg:15px;--kep-platform-padding-content-horizontal-lg:24px;--kep-platform-padding-content-vertical-lg:16px;--kep-platform-padding-content-horizontal:16px;--kep-platform-padding-content-vertical:12px;--kep-platform-padding-content-horizontal-sm:16px;--kep-platform-padding-content-vertical-sm:8px;--kep-platform-margin-xxxs:2px;--kep-platform-margin-xxs:4px;--kep-platform-margin-xs:8px;--kep-platform-margin-sm:12px;--kep-platform-margin:16px;--kep-platform-margin-md:20px;--kep-platform-margin-lg:24px;--kep-platform-margin-xl:32px;--kep-platform-margin-xxl:48px;--kep-platform-width-scrollbar:8px;--kep-platform-height-scrollbar:8px;--kep-platform-menu-item-height:40px;--kep-platform-menu-item-line-height:40px;}*,*::before,*::after{box-sizing:border-box;}body{margin:0;font-family:var(--kep-platform-font-family);font-size:var(--kep-platform-font-size);font-weight:var(--kep-platform-font-weight-base);line-height:var(--kep-platform-line-height);color:var(--kep-platform-color-text);text-align:var(--kep-platform-text-align);background-color:var(--kep-platform-color-bg-base);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:var(--kep-platform-black);}[tabindex='-1']:focus:not(:focus-visible){outline:0 !important;}hr{margin:--kep-platform-margin-sm 0;height:var(--kep-platform-line-width);color:var(--kep-platform-color-border);background-color:currentColor;border:0;}hr:not([size]){height:var(--kep-platform-line-width);}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:0;font-family:var(--kep-platform-font-family);font-style:var(--kep-platform-link-decoration);font-weight:var(--kep-platform-font-weight-strong);line-height:var(--kep-platform-line-height);color:var(--kep-platform-color-text-secondary);}h1{font-size:var(--kep-platform-font-size-heading-1);}h2{font-size:var(--kep-platform-font-size-heading-2);}h3{font-size:var(--kep-platform-font-size-heading-3);}h4{font-size:var(--kep-platform-font-size-heading-4);}h5{font-size:var(--kep-platform-font-size-heading-5);}h6{font-size:var(--kep-platform-font-size-heading-6);}p{margin-top:0;margin-bottom:0 !important;}abbr[title],abbr[data-original-title]{text-decoration:underline;text-decoration:underline dotted;cursor:help;text-decoration-skip-ink:none;}address{margin-bottom:1rem;font-style:normal;line-height:inherit;}ol,ul{padding-left:0;list-style:none;}ol,ul,dl{margin-top:0;margin-bottom:0;}ol ol,ul ul,ol ul,ul ol{margin-bottom:0;}dt{font-weight:var(--kep-platform-font-weight-base);}dd{margin-bottom:0.5rem;margin-left:0;}blockquote{margin:0 0 1rem;}b,strong{font-weight:var(--kep-platform-font-weight-strong);}small{font-size:var(--kep-platform-font-size-sm);}sub,sup{position:relative;font-size:var(--kep-platform-font-size-sm);line-height:0;vertical-align:baseline;}sub{bottom:-0.25em;}sup{top:-0.5em;}a{color:var(--kep-platform-color-link);text-decoration:var(--kep-platform-link-decoration);cursor:pointer;&:hover{color:var(--kep-platform-color-link-hover);text-decoration:--kep-platform-link-hover-decoration}}pre,code,kbd,samp{font-family:var(--kep-platform-font-family-code);font-size:var(--kep-platform-font-size-code);}pre{display:block;margin-top:0;margin-bottom:var(--kep-platform-margin);overflow:auto;font-size:var(--kep-platform-font-size-code);color:var(--kep-platform-color-text-label);code{font-size:inherit;color:inherit;word-break:normal;}}code{font-size:var(--kep-platform-font-size-code);color:var(--kep-platform-color-text-quaternary);word-wrap:break-word;a > &{color:inherit;}}figure{margin:0 0 1rem;}img{vertical-align:middle;}svg{overflow:hidden;vertical-align:middle;}table{border-collapse:collapse;}caption{padding-top:0.5rem;padding-bottom:0.5rem;color:var(--kep-platform-color-text-secondary);text-align:left;caption-side:bottom;}th{text-align:inherit;}label{display:inline-block;margin-bottom:0.5rem;}button{border-radius:0;}input,button,select,optgroup,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit;}button,input{overflow:visible;}button,select{text-transform:none;}select{word-wrap:normal;}[list]::-webkit-calendar-picker-indicator{display:none;}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{appearance:button;&:not(:disabled){cursor:pointer;}}button:focus{outline:none;}input:focus{outline:none;}::-moz-focus-inner{padding:0;border-style:none;}input[type='date'],input[type='time'],input[type='datetime-local'],input[type='month']{appearance:textfield;}::-webkit-scrollbar{width:var(--kep-platform-width-scrollbar);height:var(--kep-platform-height-scrollbar);}::-webkit-scrollbar-track{border-radius:var(--kep-platform-border-radius);background-color:var(--kep-platform-color-scrollbar-track);}::-webkit-scrollbar-thumb{background-color:var(--kep-platform-color-scrollbar-thumb);border-radius:var(--kep-platform-border-radius);}::-webkit-scrollbar-thumb:hover{background-color:var(--kep-platform-color-scrollbar-thumb-hover);}textarea{overflow:auto;resize:vertical;}fieldset{min-width:0;padding:0;margin:0;border:0;}legend{float:left;width:100%;padding:0;margin-bottom:var(--kep-platform-margin);font-size:var(--kep-platform-font-size);font-weight:var(--kep-platform-font-weight-base);line-height:inherit;color:inherit;white-space:normal;}mark{padding:var(--kep-platform-padding-sm);background-color:var(--kep-platform-padding-sm);}progress{vertical-align:baseline;}::-webkit-datetime-edit{overflow:visible;line-height:0;}[type='search']{outline-offset:-2px;appearance:textfield;}::-webkit-search-decoration{-webkit-appearance:none;}::-webkit-color-swatch-wrapper{padding:0;}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button;}output{display:inline-block;}summary{display:list-item;cursor:pointer;}template{display:none;}main{display:block;}[hidden]{display:none !important;}", ""], function (props) {
   return props.$css;
 });
 export default GlobalStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kep-platform/basic-component",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "description": "A react library developed with dumi",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -74,10 +74,10 @@
     "react-dom": "^18.0.0",
     "stylelint": "^14.9.1"
   },
-  "gitHead": "71de0ed584c07df7324218aee13985135c8572d0",
+  "gitHead": "b346fc9c989221248d4882e8c3f7833e53750e92",
   "dependencies": {
     "@ant-design/icons": "^5.3.7",
-    "@kep-platform/hooks": "^0.0.12",
+    "@kep-platform/hooks": "^0.0.14",
     "color": "^4.2.3",
     "rc-pagination": "^4.1.0",
     "styled-components": "^6.1.11"