@chaoswise/ui 3.0.6 → 3.0.7

package/lib/LayoutWrapper/Header.js

@@ -0,0 +1,59 @@
+var _excluded = ["title", "fixed", "showBack", "hasHeader", "className", "extra", "goBack", "noBorder"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+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(r) { if (Array.isArray(r)) return r; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from "react";
+import LeftArrow from "./LeftArrow";
+import classnames from "classnames";
+import useStyle from "./style/header";
+var Header = function Header(_ref) {
+  var title = _ref.title,
+    _ref$fixed = _ref.fixed,
+    fixed = _ref$fixed === void 0 ? false : _ref$fixed,
+    _ref$showBack = _ref.showBack,
+    showBack = _ref$showBack === void 0 ? false : _ref$showBack,
+    hasHeader = _ref.hasHeader,
+    className = _ref.className,
+    extra = _ref.extra,
+    _ref$goBack = _ref.goBack,
+    goBack = _ref$goBack === void 0 ? function () {} : _ref$goBack,
+    _ref$noBorder = _ref.noBorder,
+    noBorder = _ref$noBorder === void 0 ? false : _ref$noBorder,
+    resP = _objectWithoutProperties(_ref, _excluded);
+  var _useStyle = useStyle("cw-layout-wrapper-header"),
+    _useStyle2 = _slicedToArray(_useStyle, 3),
+    wrapCSSVar = _useStyle2[0],
+    hashId = _useStyle2[1],
+    cssVarCls = _useStyle2[2];
+  if (!hasHeader) {
+    return null;
+  }
+  return wrapCSSVar( /*#__PURE__*/React.createElement("div", _extends({
+    className: classnames(hashId, cssVarCls, "cw-layout-wrapper-header", className, {
+      "cw-layout-wrapper-header-fixed": fixed
+    })
+  }, resP), /*#__PURE__*/React.createElement("div", {
+    className: classnames("cw-layout-wrapper-header-wrapper", {
+      "cw-layout-wrapper-header-wrapper-with-back": showBack && !noBorder
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "cw-layout-wrapper-header-title"
+  }, showBack && /*#__PURE__*/React.createElement("div", {
+    style: {
+      paddingRight: 16,
+      cursor: "pointer",
+      display: "flex",
+      alignItems: "center"
+    },
+    onClick: goBack
+  }, /*#__PURE__*/React.createElement(LeftArrow, null)), title), /*#__PURE__*/React.createElement("div", {
+    className: "cw-layout-wrapper-header-extra"
+  }, extra))));
+};
+export default Header;

package/lib/LayoutWrapper/LeftArrow.js

@@ -0,0 +1,17 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from "react";
+var SvgLeftArrow = function SvgLeftArrow(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: 16,
+    height: 16,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    fill: "currentColor",
+    fillRule: "nonzero"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M1.934 8.907V7.093H15.08c.25 0 .454.203.454.453v.908c0 .25-.203.453-.454.453H1.934Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "m.354 7.646 4.27-4.27a.454.454 0 0 1 .64 0l.64.64a.452.452 0 0 1 0 .64L2.565 8l3.34 3.34a.452.452 0 0 1 0 .64l-.64.64a.452.452 0 0 1-.643.003l-4.27-4.27a.5.5 0 0 1 0-.707Z"
+  })));
+};
+export default SvgLeftArrow;

package/lib/LayoutWrapper/assets/left-arrow.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>左箭头</title>
+    <g id="----3.3--创建页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="创建页布局" transform="translate(-354.000000, -1515.000000)" fill-rule="nonzero">
+            <g id="编组-2" transform="translate(120.000000, 1417.000000)">
+                <g id="编组-12" transform="translate(30.000000, 30.000000)">
+                    <g id="内容区-标题" transform="translate(184.000000, 48.000000)">
+                        <g id="编组-10" transform="translate(20.000000, 14.000000)">
+                            <g id="左箭头" transform="translate(0.000000, 6.000000)">
+                                <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect>
+                                <path d="M1.9336,8.9072 L1.9336,7.0928 L15.08,7.0928 C15.3305164,7.0928 15.5336,7.29588364 15.5336,7.5464 L15.5336,8.4536 C15.5336,8.70411636 15.3305164,8.9072 15.08,8.9072 L1.9336,8.9072 Z" id="路径" fill="#2C2C2C"></path>
+                                <path d="M0.353553391,7.64644661 L4.6232,3.3768 L4.6232,3.3768 C4.80017036,3.2006474 5.08622964,3.2006474 5.2632,3.3768 L5.9032,4.0168 C5.98820389,4.10159777 6.03597594,4.21673201 6.03597594,4.3368 C6.03597594,4.45686799 5.98820389,4.57200223 5.9032,4.6568 L2.5656,8 L5.9056,11.3408 C5.99060389,11.4255978 6.03837594,11.540732 6.03837594,11.6608 C6.03837594,11.780868 5.99060389,11.8960022 5.9056,11.9808 L5.2656,12.6208 C5.18102856,12.7068599 5.0655589,12.7555339 4.94490057,12.755991 C4.82424223,12.7564355 4.70841211,12.7086256 4.6232,12.6232 L0.353553391,8.35355339 C0.158291245,8.15829124 0.158291245,7.84170876 0.353553391,7.64644661 Z" id="路径" fill="#2C2C2C"></path>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/lib/LayoutWrapper/index.js

@@ -0,0 +1,196 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+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(r) { if (Array.isArray(r)) return r; }
+import React, { useRef, useEffect, useState } from 'react';
+import Footer from './Footer';
+import Header from './Header';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import { useHistory } from 'react-router-dom';
+import { eventManager } from '../utils';
+// import './index.less';
+import useStyle from './style/index';
+function LayoutWrapper(_ref) {
+  var _ref$header = _ref.header,
+    header = _ref$header === void 0 ? {} : _ref$header,
+    children = _ref.children,
+    className = _ref.className,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? {} : _ref$style,
+    _ref$clearBackground = _ref.clearBackground,
+    clearBackground = _ref$clearBackground === void 0 ? false : _ref$clearBackground,
+    _ref$contentStyle = _ref.contentStyle,
+    contentStyle = _ref$contentStyle === void 0 ? {} : _ref$contentStyle,
+    _ref$footer = _ref.footer,
+    footer = _ref$footer === void 0 ? {} : _ref$footer,
+    _ref$autoScrollToTop = _ref.autoScrollToTop,
+    autoScrollToTop = _ref$autoScrollToTop === void 0 ? true : _ref$autoScrollToTop;
+  var _useStyle = useStyle("cw-layout-wrapper-box"),
+    _useStyle2 = _slicedToArray(_useStyle, 3),
+    wrapCSSVar = _useStyle2[0],
+    hashId = _useStyle2[1],
+    cssVarCls = _useStyle2[2];
+  var history = useHistory();
+  var hasFooter = footer.content && footer.isShow !== false;
+  var hasHeader = (header.title || header.showBack) && header.isShow !== false;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    hasAbreastLayout = _useState2[0],
+    setHasAbreastLayout = _useState2[1];
+  var wrapperDom = useRef(null);
+  var contentDom = useRef(null);
+  var isWatchAbreastLayout = useRef(false);
+  var onAbreastLayoutLoaded = function onAbreastLayoutLoaded() {
+    setHasAbreastLayout(true);
+  };
+  var onAbreastLayoutUnmount = function onAbreastLayoutUnmount() {
+    setHasAbreastLayout(false);
+  };
+  if (!isWatchAbreastLayout.current) {
+    isWatchAbreastLayout.current = true;
+    eventManager.on('abreastLayoutLoaded', onAbreastLayoutLoaded);
+  }
+  useEffect(function () {
+    eventManager.on('abreastLayoutUnmount', onAbreastLayoutUnmount);
+    return function () {
+      eventManager.off('abreastLayoutUnmount', onAbreastLayoutUnmount);
+      eventManager.off('abreastLayoutLoaded', onAbreastLayoutLoaded);
+    };
+  }, []);
+  useEffect(function () {
+    if (!autoScrollToTop) {
+      return;
+    }
+
+    // TODO
+    // const unlisten = history.listen(() => {
+    //   if(contentDom.current && contentDom.current.scrollTop !== 0) {
+    //     contentDom.current.scrollTop = 0;
+    //   }
+    //   if(wrapperDom.current && wrapperDom.current.scrollTop !== 0) {
+    //     wrapperDom.current.scrollTop = 0;
+    //   }
+    // })
+    // return () => {
+    //   unlisten();
+    // }
+  }, [autoScrollToTop]);
+  return wrapCSSVar( /*#__PURE__*/React.createElement("div", {
+    className: classnames(hashId, cssVarCls, 'cw-layout-wrapper-box', className, {
+      'cw-layout-wrapper-box-hasfooter': hasFooter,
+      'cw-layout-wrapper-box-fixedHeader': hasHeader && header.isFixed,
+      'cw-layout-wrapper-box-no-background': clearBackground,
+      'cw-layout-wrapper-box-noHeader': !hasHeader
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      style: style
+    },
+    className: classnames('cw-layout-wrapper', {
+      'cw-layout-wrapper-with-header-fixed': header === null || header === void 0 ? void 0 : header.fixed
+    }),
+    ref: wrapperDom
+  }, /*#__PURE__*/React.createElement(Header, _extends({
+    hasHeader: hasHeader
+  }, header)), /*#__PURE__*/React.createElement("div", {
+    className: classnames('cw-layout-wrapper-content', {
+      'cw-layout-wrapper-content-with-back': header.showBack && !header.noBorder,
+      'cw-layout-wrapper-content-with-header': hasHeader && !header.fixed,
+      'cw-layout-wrapper-content-scroll': hasHeader && header.fixed,
+      'cw-layout-wrapper-content-scroll-with-abreastLayout': hasAbreastLayout
+    }),
+    style: contentStyle,
+    ref: contentDom
+  }, children)), /*#__PURE__*/React.createElement(Footer, _extends({
+    hasFooter: hasFooter
+  }, footer))));
+}
+LayoutWrapper.propTypes = {
+  /**
+   * 头部显示配置
+   */
+  header: PropTypes.shape({
+    title: PropTypes.string,
+    // 文字标题
+    fixed: PropTypes.bool,
+    // 头部是否固定
+    showBack: PropTypes.bool,
+    // 是否显示返回按钮
+    goBack: PropTypes.func,
+    // 返回按钮的回调
+    hasHeader: PropTypes.bool,
+    // 是否显示头部
+    className: PropTypes.string,
+    // 头部容器的类名
+    extra: PropTypes.node,
+    // 头部右侧标题内容区域放置的内容
+    noBorder: PropTypes.bool // 是否有下边框和间距
+  }),
+  /**
+   * 是否清除内容容器的背景色
+   */
+  clearBackground: PropTypes.bool,
+  /**
+   * 整体容器类名
+   */
+  className: PropTypes.string,
+  /**
+   * 整体容器样式
+   */
+  style: PropTypes.object,
+  /**
+   * 内容区样式
+   */
+  contentStyle: PropTypes.object,
+  /**
+   * footer相关配置
+   */
+  footer: PropTypes.shape({
+    isShow: PropTypes.bool,
+    // 是否显示footer
+    content: PropTypes.node,
+    // footer显示内容
+    className: PropTypes.string // footer容器类名
+  }),
+  autoScrollToTop: PropTypes.bool // 切换路由后是否将scrollTop置0
+};
+LayoutWrapper.defaultProps = {
+  header: {
+    title: '',
+    // 默认为空字符串
+    fixed: false,
+    // 默认为false
+    showBack: false,
+    // 默认为false
+    goBack: function goBack() {},
+    // 默认为空函数
+    hasHeader: true,
+    // 默认为true
+    className: '',
+    // 默认为空字符串
+    extra: null,
+    // 默认为null
+    noBorder: false // 默认为false
+  },
+  clearBackground: false,
+  // 默认为false
+  className: '',
+  // 默认为空字符串
+  style: {},
+  // 默认为空对象
+  contentStyle: {},
+  // 默认为空对象
+  footer: {
+    isShow: true,
+    // 默认为true
+    content: '',
+    // 默认为空字符串
+    className: '' // 默认为空字符串
+  },
+  autoScrollToTop: true // 默认为true
+};
+export default LayoutWrapper;

package/lib/LayoutWrapper/style/footer.js

@@ -0,0 +1,25 @@
+import { genStyleHooks } from "../../Antd5/theme/internal";
+var genCustomLayoutWrapperFooterStyle = function genCustomLayoutWrapperFooterStyle(token) {
+  var prefixCls = token.antCls;
+  return {
+    ".cw-layout-wrapper-footer": {
+      position: "absolute",
+      bottom: "0",
+      left: "0",
+      width: "100%",
+      height: "52px",
+      boxShadow: "0 -1px 2px 0 rgba(0, 0, 0, 0.15)",
+      // @shadow-color;
+      padding: "0 20px",
+      display: "flex",
+      backgroundColor: token.colorBgContainer,
+      alignItems: "center"
+    }
+  };
+};
+// ============================== Export ==============================
+export default genStyleHooks(["LayoutWrapper", "Footer"], function (token) {
+  return [
+  //
+  genCustomLayoutWrapperFooterStyle(token)];
+});

package/lib/LayoutWrapper/style/header.js

@@ -0,0 +1,46 @@
+import { genStyleHooks } from "../../Antd5/theme/internal";
+var genCustomLayoutWrapperHeaderStyle = function genCustomLayoutWrapperHeaderStyle(token) {
+  var prefixCls = token.antCls;
+  return {
+    ".cw-layout-wrapper-header": {
+      fontSize: "20px",
+      fontWeight: "500",
+      color: token.colorText,
+      height: "58px",
+      padding: "0 20px 2px",
+      display: "flex",
+      alignItems: "center",
+      ".cw-layout-wrapper-header-wrapper": {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between"
+      },
+      ".cw-layout-wrapper-header-title": {
+        display: "flex",
+        alignItems: "center",
+        lineHeight: "28px"
+      },
+      ".cw-layout-wrapper-header-extra": {
+        display: "flex",
+        alignItems: "center"
+      },
+      ".cw-layout-wrapper-header-wrapper-with-back": {
+        borderBottom: "1px solid rgba(0, 0, 0, 0.09)"
+      }
+    },
+    ".cw-layout-wrapper-header-fixed": {
+      position: "absolute",
+      width: "100%",
+      left: "0",
+      top: "0"
+    }
+  };
+};
+// ============================== Export ==============================
+export default genStyleHooks(["LayoutWrapper", "Header"], function (token) {
+  return [
+  //
+  genCustomLayoutWrapperHeaderStyle(token)];
+});

package/lib/LayoutWrapper/style/index.js

@@ -0,0 +1,58 @@
+import { genStyleHooks } from "../../Antd5/theme/internal";
+var genCustomLayoutWrapperStyle = function genCustomLayoutWrapperStyle(token) {
+  var prefixCls = token.antCls;
+  return {
+    ".cw-layout-wrapper-box": {
+      position: "relative",
+      background: token.colorBgContainer,
+      height: "100%",
+      overflow: "hidden",
+      paddingBottom: "20px",
+      // 内容去包裹
+      ".cw-layout-wrapper": {
+        height: "100%",
+        overflow: "auto",
+        // 内容区
+        ".cw-layout-wrapper-content": {
+          height: "100%",
+          padding: "0 20px"
+        },
+        ".cw-layout-wrapper-content-with-back": {
+          paddingTop: "24px"
+        },
+        ".cw-layout-wrapper-content-with-header": {
+          height: "calc(100% - 58px)"
+        },
+        ".cw-layout-wrapper-content-scroll": {
+          overflow: "auto"
+        },
+        ".cw-layout-wrapper-content-scroll-with-abreastLayout": {
+          padding: "0"
+        }
+      },
+      ".cw-layout-wrapper-with-header-fixed": {
+        height: "100%",
+        paddingTop: "58px",
+        overflow: "hidden"
+      }
+    },
+    ".cw-layout-wrapper-box-no-background": {
+      background: token.colorBgContainer
+    },
+    ".cw-layout-wrapper-box-hasfooter": {
+      paddingBottom: "52px"
+    },
+    ".cw-layout-wrapper-box-fixedHeader": {
+      paddingTop: "58px"
+    },
+    ".cw-layout-wrapper-box-noHeader": {
+      paddingTop: "20px"
+    }
+  };
+};
+// ============================== Export ==============================
+export default genStyleHooks("LayoutWrapper", function (token) {
+  return [
+  //
+  genCustomLayoutWrapperStyle(token)];
+});

package/lib/LeftNavigation/index.js

@@ -0,0 +1,80 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+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(r) { if (Array.isArray(r)) return r; }
+import React, { Fragment } from "react";
+import classnames from "classnames";
+import PropTypes from "prop-types";
+import useConfigContext from "../useConfigContext";
+import useStyle from "./index.style";
+
+/**
+ *
+ * 适用于页面左侧内容区域布局，内容区直接使用组件包裹即可，当传入组件为Tree时增加了选中效果
+ *
+ * *** @0.0.111版本后不再进行维护，参考具体Abreastlayout的demo ***
+ */
+
+var LeftNavigation = function LeftNavigation(_ref) {
+  var header = _ref.header,
+    headerStyle = _ref.headerStyle,
+    headerClassName = _ref.headerClassName,
+    footer = _ref.footer,
+    footerStyle = _ref.footerStyle,
+    footerClassName = _ref.footerClassName,
+    style = _ref.style,
+    children = _ref.children;
+  var _useConfigContext = useConfigContext(),
+    getPrefixCls = _useConfigContext.getPrefixCls;
+  var prefixCls = getPrefixCls("left-navigation");
+  var _useStyle = useStyle("".concat(prefixCls, "-container")),
+    _useStyle2 = _slicedToArray(_useStyle, 3),
+    wrapCSSVar = _useStyle2[0],
+    hashId = _useStyle2[1],
+    cssVarCls = _useStyle2[2];
+  return wrapCSSVar( /*#__PURE__*/React.createElement("div", {
+    className: classnames(hashId, cssVarCls, "".concat(prefixCls, "-container")),
+    style: style && style
+  }, header && /*#__PURE__*/React.createElement("div", {
+    className: classnames("".concat(prefixCls, "-header"), headerClassName),
+    style: headerStyle && headerStyle
+  }, header), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-main")
+  }, children && /*#__PURE__*/React.createElement(Fragment, null, children)), footer && /*#__PURE__*/React.createElement("div", {
+    className: classnames("".concat(prefixCls, "-footer"), footerClassName),
+    style: footerStyle && footerStyle
+  }, footer)));
+};
+LeftNavigation.propTypes = {
+  /**
+   * 导航头部自定义区域，默认无头部
+   */
+  header: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /**
+   * 头部区域自定义classname
+   */
+  headerClassName: PropTypes.string,
+  /**
+   * 头部区域自定义样式
+   */
+  headerStyle: PropTypes.object,
+  /**
+   * 导航底部自定义区域，默认无底部
+   */
+  footer: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /**
+   * 底部区域自定义classname
+   */
+  footerClassName: PropTypes.string,
+  /**
+   * 底部区域自定义样式
+   */
+  footerStyle: PropTypes.object,
+  /**
+   * 最外层容器的样式,可自定义宽度等
+   */
+  style: PropTypes.object
+};
+export default LeftNavigation;

package/lib/LeftNavigation/index.style.js

@@ -0,0 +1,34 @@
+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(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : 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 { genStyleHooks } from "../Antd5/theme/internal";
+import { unit } from "@ant-design/cssinjs";
+var genCustomLeftNavigationStyle = function genCustomLeftNavigationStyle(token) {
+  var prefixCls = token.antCls,
+    componentCls = token.componentCls;
+  var leftNavigationPrefix = "".concat(prefixCls, "-left-navigation");
+  return _defineProperty({}, "".concat(leftNavigationPrefix, "-container"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
+    borderRight: "".concat(unit(token.lineWidth), " ").concat(token.lineType, " #e9e9e9"),
+    width: "228px",
+    backgroundColor: token.colorBgContainer
+  }, "".concat(leftNavigationPrefix, "-main"), {
+    flexGrow: 1,
+    overflow: "auto"
+  }), ".cw-tree-location-box .cw-tree-box .cw-tree .cw-tree-treenode ".concat(prefixCls, "-tree-node-content-wrapper ").concat(prefixCls, "-tree-title .cw-tree-treenode-extend .cw-tree-treenode-extend-dropdown"), {
+    marginRight: "4px"
+  }), ".cw-tree-location-box .cw-tree-box .cw-tree".concat(prefixCls, "-tree-directory > li").concat(prefixCls, "-tree-treenode-selected > span").concat(prefixCls, "-tree-node-content-wrapper::before"), {
+    borderRight: "3px ".concat(token.lineType, " ").concat(token.colorPrimary)
+  }), ".cw-tree-location-box .cw-tree-box .cw-tree".concat(prefixCls, "-tree-directory ").concat(prefixCls, "-tree-child-tree > li").concat(prefixCls, "-tree-treenode-selected > span").concat(prefixCls, "-tree-node-content-wrapper::before"), {
+    borderRight: "3px ".concat(token.lineType, " ").concat(token.colorPrimary)
+  }));
+};
+// ============================== Export ==============================
+export default genStyleHooks("LeftNavigation", function (token) {
+  return [
+  //
+  genCustomLeftNavigationStyle(token)];
+});

package/lib/List/index.js

@@ -0,0 +1,2 @@
+import List from '../Antd5/list';
+export default List;

package/lib/Mentions/index.js

@@ -0,0 +1,2 @@
+import Mentions from '../Antd5/mentions';
+export default Mentions;

package/lib/Menu/index.js

@@ -0,0 +1,2 @@
+import Menu from '../Antd5/menu';
+export default Menu;