@chaoswise/ui 3.0.6 → 3.0.7

package/lib/AbreastLayout/CollapsedBtn.js

@@ -0,0 +1,45 @@
+import React from "react";
+import classnames from "classnames";
+import { LeftOutlined } from "@ant-design/icons";
+import CollapsedIcon from "./CollapsedIcon";
+import useConfigContext from "../useConfigContext";
+function CollapsedBtn(_ref) {
+  var collapsed = _ref.collapsed,
+    position = _ref.position,
+    _ref$onClick = _ref.onClick,
+    onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
+    showCollapsedBtn = _ref.showCollapsedBtn,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? {} : _ref$style;
+  var _useConfigContext = useConfigContext(),
+    getPrefixCls = _useConfigContext.getPrefixCls;
+  var prefixCls = getPrefixCls("abreast-layout");
+  if (!showCollapsedBtn) {
+    return null;
+  }
+  var getIconType = function getIconType() {
+    if (position === "left") {
+      if (collapsed) {
+        return "right";
+      }
+      return "left";
+    }
+    if (position === "right") {
+      if (collapsed) {
+        return "right";
+      }
+      return "left";
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    onClick: onClick,
+    className: classnames("".concat(prefixCls, "-sider-collopse-btn"), "".concat(prefixCls, "-sider-collopse-btn-").concat(position)),
+    style: style
+  }, /*#__PURE__*/React.createElement(CollapsedIcon, {
+    className: "".concat(prefixCls, "-sider-collopse-btn-bg-icon")
+  }), /*#__PURE__*/React.createElement(LeftOutlined, {
+    className: "".concat(prefixCls, "-sider-collopse-btn-bg-arrow"),
+    rotate: getIconType() === "left" ? 0 : 180
+  }));
+}
+export default CollapsedBtn;

package/lib/AbreastLayout/CollapsedIcon.js

@@ -0,0 +1,14 @@
+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 SvgIcon = function SvgIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: 12,
+    height: 40,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M12 31.693c0 4.503-5.702 5.955-7.853 6.712A75.396 75.396 0 0 0 0 40V0c1.33.558 2.713 1.09 4.147 1.595C6.298 2.352 12 3.804 12 8.307Z",
+    fill: "currentColor",
+    fillRule: "evenodd"
+  }));
+};
+export default SvgIcon;

package/lib/AbreastLayout/NavTreeContainer.js

@@ -0,0 +1,26 @@
+import _Layout from "@chaoswise/ui/lib/Layout";
+import React from "react";
+function TreeContainer(_ref) {
+  var header = _ref.header,
+    children = _ref.children,
+    footer = _ref.footer;
+  return /*#__PURE__*/React.createElement(_Layout, {
+    style: {
+      height: "100%",
+      background: "none"
+    }
+  }, header && /*#__PURE__*/React.createElement(_Layout.Header, {
+    style: {
+      background: "none",
+      padding: "12px 16px",
+      height: "auto",
+      lineHeight: 1.5
+    }
+  }, header), /*#__PURE__*/React.createElement(_Layout.Content, null, children), footer && /*#__PURE__*/React.createElement(_Layout.Footer, {
+    style: {
+      padding: "16px",
+      background: "none"
+    }
+  }, footer));
+}
+export default TreeContainer;

package/lib/AbreastLayout/assets/icon.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="40px" viewBox="0 0 12 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>形状结合</title>
+    <g id="----3.2--列表页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.06">
+        <g id="典型页面-列表页备份-4" transform="translate(-436.000000, -678.000000)" fill="#000000">
+            <g id="编组-8" transform="translate(435.000000, 678.000000)">
+                <path d="M13.000061,31.6927367 C13.000061,36.1959691 7.29833963,37.6478641 5.14697251,38.4051211 C3.71272777,38.909959 2.3304036,39.4415853 1,40 L1,40 L1,0 C2.3304036,0.55841467 3.71272777,1.09004099 5.14697251,1.59487895 C7.29833963,2.35213589 13.000061,3.80403093 13.000061,8.30726328 Z" id="形状结合"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/lib/AbreastLayout/assets/icon1.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13px" height="40px" viewBox="0 0 13 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 8</title>
+    <g id="----3.2--列表页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="典型页面-列表页备份-4" transform="translate(-435.000000, -678.000000)" fill="#000000">
+            <g id="编组-8" transform="translate(435.000000, 678.000000)">
+                <path d="M13.000061,31.6927367 C13.000061,36.1959691 7.29833963,37.6478641 5.14697251,38.4051211 C3.71272777,38.909959 2.3304036,39.4415853 1,40 L1,40 L1,0 C2.3304036,0.55841467 3.71272777,1.09004099 5.14697251,1.59487895 C7.29833963,2.35213589 13.000061,3.80403093 13.000061,8.30726328 Z" id="形状结合" fill-opacity="0.06"></path>
+                <g id="通用/Icon图标/Line/Down" transform="translate(0.000000, 14.000000)">
+                    <g id="minus-square" fill-rule="nonzero" opacity="0">
+                        <rect id="矩形" x="0" y="0" width="12" height="12"></rect>
+                    </g>
+                    <g id="left" transform="translate(6.000000, 6.000000) rotate(-90.000000) translate(-6.000000, -6.000000) translate(-0.000000, 0.000000)">
+                        <rect id="矩形" fill-rule="nonzero" opacity="0" x="0" y="0" width="12" height="12"></rect>
+                        <path d="M5.63710907,8.4728667 L1.77287982,4.18120533 C1.59272389,3.9811219 1.60887832,3.67287699 1.80896175,3.49272105 C2.00904518,3.31256512 2.31729009,3.32871955 2.49744602,3.52880299 L6.01565876,7.4355 L9.53551296,3.52880299 C9.69565157,3.35095105 9.95699628,3.31842572 10.1536208,3.43992285 L10.2239972,3.49272105 C10.4240807,3.67287699 10.4402351,3.9811219 10.2600792,4.18120533 L10.2600792,4.18120533 L6.39584991,8.4728667 C6.29576328,8.58402416 6.15614302,8.63841341 6.01749846,8.63391145 C5.87681596,8.63841341 5.7371957,8.58402416 5.63710907,8.4728667 Z" id="形状结合" fill-opacity="0.65" transform="translate(6.016479, 6.000840) scale(1, -1) translate(-6.016479, -6.000840) "></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/lib/AbreastLayout/index.js

@@ -0,0 +1,215 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["children", "type", "Siderbar", "SiderWidth", "ResizeBarWidth", "resizeBarColor", "showCollapsedBtn", "onCollapse", "contentStyle", "siderStyle"];
+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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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); }
+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, { useState, useLayoutEffect } from "react";
+import { Resizable } from "re-resizable";
+import PropTypes from "prop-types";
+import { useDidCache, useDidRecover } from "react-router-cache-route";
+import NavTreeContainer from "./NavTreeContainer";
+import useConfigContext from "../useConfigContext";
+import classnames from "classnames";
+import CollapsedBtn from "./CollapsedBtn";
+import { eventManager } from "../utils";
+import useStyle from "./index.style";
+
+/**
+ *
+ * 左右水平布局，分为左侧可拖拽，左侧固定宽，右侧可拖拽，右侧固定宽四种样式
+ */
+function AbreastLayout(_ref) {
+  var children = _ref.children,
+    type = _ref.type,
+    Siderbar = _ref.Siderbar,
+    SiderWidth = _ref.SiderWidth,
+    ResizeBarWidth = _ref.ResizeBarWidth,
+    resizeBarColor = _ref.resizeBarColor,
+    showCollapsedBtn = _ref.showCollapsedBtn,
+    _onCollapse = _ref.onCollapse,
+    _ref$contentStyle = _ref.contentStyle,
+    contentStyle = _ref$contentStyle === void 0 ? {} : _ref$contentStyle,
+    _ref$siderStyle = _ref.siderStyle,
+    siderStyle = _ref$siderStyle === void 0 ? {} : _ref$siderStyle,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useConfigContext = useConfigContext(),
+    getPrefixCls = _useConfigContext.getPrefixCls;
+  var prefixCls = getPrefixCls("abreast-layout");
+  var _useStyle = useStyle("".concat(prefixCls, "-cw-abreast-layout")),
+    _useStyle2 = _slicedToArray(_useStyle, 3),
+    wrapCSSVar = _useStyle2[0],
+    hashId = _useStyle2[1],
+    cssVarCls = _useStyle2[2];
+  var _useState = useState(SiderWidth),
+    _useState2 = _slicedToArray(_useState, 2),
+    leftNavigationWidth = _useState2[0],
+    setLeftNavigationWidth = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    collapsed = _useState4[0],
+    setCollapsed = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    resizableBoolean = _useState6[0],
+    setResizable = _useState6[1];
+  var isLeft = type === "rightNavigation" || type === "rightOperationArea";
+  var isRight = type === "leftNavigation" || type === "leftOperationArea";
+  var finalCollapsed = rest.collapsed !== undefined ? rest.collapsed : collapsed;
+  var onCollapse = function onCollapse() {
+    setCollapsed(function (pre) {
+      return !pre;
+    });
+    if (_onCollapse) _onCollapse(!finalCollapsed);
+  };
+  useLayoutEffect(function () {
+    eventManager.emit("abreastLayoutLoaded");
+    return function () {
+      eventManager.emit("abreastLayoutUnmount");
+    };
+  }, []);
+  useDidCache(function () {
+    eventManager.emit("abreastLayoutUnmount");
+  });
+  useDidRecover(function () {
+    eventManager.emit("abreastLayoutLoaded");
+  });
+  return wrapCSSVar( /*#__PURE__*/React.createElement("div", {
+    className: classnames(hashId, cssVarCls, "".concat(prefixCls, "-cw-abreast-layout"))
+  }, isLeft && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-content")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-content-wrapper"),
+    style: contentStyle
+  }, children), /*#__PURE__*/React.createElement(CollapsedBtn, {
+    showCollapsedBtn: showCollapsedBtn,
+    collapsed: finalCollapsed,
+    position: "left",
+    onClick: onCollapse
+  })), /*#__PURE__*/React.createElement(Resizable, _extends({
+    boundsByDirection: type === "rightNavigation",
+    bounds: "parent"
+  }, rest, {
+    className: classnames(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-sider"), true), "".concat(prefixCls, "-left-navigation"), isRight), "".concat(prefixCls, "-operation-area-right"), isLeft), rest.className),
+    style: _objectSpread({
+      display: !finalCollapsed ? "block" : "none",
+      borderRight: type === "leftNavigation" && resizableBoolean ? "1px solid ".concat(resizeBarColor) : "",
+      borderLeft: type === "rightNavigation" && resizableBoolean ? "1px solid ".concat(resizeBarColor) : ""
+    }, rest.style || {}),
+    handleWrapperStyle: _objectSpread({
+      color: "#fcc"
+    }, rest.handleWrapperStyle || {}),
+    size: _objectSpread({
+      width: leftNavigationWidth,
+      height: "100%"
+    }, rest.size || {}),
+    onResizeStart: function onResizeStart() {
+      var _rest$onResizeStart;
+      setResizable(true);
+      rest === null || rest === void 0 || (_rest$onResizeStart = rest.onResizeStart) === null || _rest$onResizeStart === void 0 || _rest$onResizeStart.call(rest);
+    },
+    onResizeStop: function onResizeStop(e, direction, ref, d) {
+      var _rest$onResizeStop;
+      setLeftNavigationWidth(Number.parseInt(leftNavigationWidth) + d.width);
+      setResizable(false);
+      rest === null || rest === void 0 || (_rest$onResizeStop = rest.onResizeStop) === null || _rest$onResizeStop === void 0 || _rest$onResizeStop.call(rest);
+    },
+    enable: _objectSpread({
+      top: false,
+      bottom: false,
+      topRight: false,
+      bottomRight: false,
+      bottomLeft: false,
+      topLeft: false,
+      right: type === "leftNavigation",
+      left: type === "rightNavigation"
+    }, rest.enable || {})
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-sider-content"),
+    style: siderStyle
+  }, Siderbar)), isRight && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-content")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-content-wrapper"),
+    style: contentStyle
+  }, children), /*#__PURE__*/React.createElement(CollapsedBtn, {
+    showCollapsedBtn: showCollapsedBtn,
+    collapsed: finalCollapsed,
+    position: "right",
+    onClick: onCollapse
+  }))));
+}
+AbreastLayout.defaultProps = {
+  SiderWidth: 232,
+  // 侧边栏默认宽度
+  ResizeBarWidth: 5,
+  resizeBarColor: "#40A9FF",
+  minWidth: 208,
+  // 侧边栏拖拽最小宽度
+  maxWidth: 440,
+  // 侧边栏拖拽最大宽度
+  showCollapsedBtn: true,
+  type: "leftNavigation"
+};
+AbreastLayout.propTypes = {
+  /**
+   * 顶部导航的类型，分为左侧可拖拽(leftNavigation)，左侧固定宽(leftOperationArea)，右侧可拖拽(rightNavigation),右侧固定宽(rightOperationArea)四种样式
+   */
+  type: PropTypes.oneOf(["leftNavigation", "rightNavigation", "leftOperationArea", "rightOperationArea"]),
+  /**
+   * 侧边栏内容
+   */
+  Siderbar: PropTypes.element,
+  /**
+   * 侧边栏的宽度
+   */
+  SiderWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /**
+   * 侧边栏拖拽最小宽度，适用于可拖拽布局
+   */
+  minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /**
+   * 侧边栏拖拽最大宽度，适用于可拖拽布局
+   */
+  maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /**
+   * 侧边栏拖拽条的宽度
+   */
+  ResizeBarWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /**
+   * 侧边栏拖拽条的颜色
+   */
+  resizeBarColor: PropTypes.string,
+  /**
+   * 是否显示展开折叠按钮
+   */
+  showCollapsedBtn: PropTypes.bool,
+  /**
+   * 侧边栏是否收起
+   */
+  collapsed: PropTypes.bool,
+  /**
+   * 侧边栏样式
+   */
+  siderStyle: PropTypes.object,
+  /**
+   * 内容区样式
+   */
+  contentStyle: PropTypes.object,
+  /**
+   * 折叠展开的callback，onCollapse = (collapsed)=>{}
+   */
+  onCollapse: PropTypes.func
+};
+AbreastLayout.NavTreeContainer = NavTreeContainer;
+export default AbreastLayout;

package/lib/AbreastLayout/index.style.js

@@ -0,0 +1,91 @@
+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";
+var prepareComponentToken = function prepareComponentToken(token) {
+  return {
+    abreastLayoutContentPadding: token.AbreastLayout.abreastLayoutContentPadding,
+    siderCollapseBtnBg: token.AbreastLayout.siderCollapseBtnBg
+  };
+};
+var genCustomAbreastLayoutStyle = function genCustomAbreastLayoutStyle(token) {
+  var _$concat3;
+  var prefixCls = token.antCls;
+  var abreastLayoutPrefix = "".concat(prefixCls, "-abreast-layout");
+  return _defineProperty({}, "".concat(abreastLayoutPrefix, "-cw-abreast-layout"), (_$concat3 = {
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    backgroundColor: token.colorBgContainer,
+    position: "relative"
+  }, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_$concat3, "".concat(abreastLayoutPrefix, "-sider"), _defineProperty({
+    position: "relative"
+  }, "".concat(abreastLayoutPrefix, "-sider-content"), {
+    height: "100%",
+    background: token.colorFillQuaternary,
+    borderRadius: token.borderRadius
+  })), "".concat(abreastLayoutPrefix, "-left-navigation"), {
+    paddingLeft: "20px"
+  }), "".concat(abreastLayoutPrefix, "-operation-area"), {
+    width: "128px",
+    height: "100%",
+    paddingRight: "20px"
+  }), "".concat(abreastLayoutPrefix, "-operation-area-right"), {
+    borderRight: "none",
+    paddingRight: "20px"
+  }), "".concat(abreastLayoutPrefix, "-content"), _defineProperty({
+    flex: 1,
+    height: "100%",
+    backgroundColor: token.colorBgContainer,
+    position: "relative",
+    overflow: "auto"
+  }, "".concat(abreastLayoutPrefix, "-content-wrapper"), {
+    height: "100%",
+    padding: token.abreastLayoutContentPadding,
+    overflow: "auto"
+  })), "".concat(abreastLayoutPrefix, "-sider-collopse-btn"), {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    position: "absolute",
+    width: "12px",
+    height: "40px",
+    cursor: "pointer",
+    bottom: "23px",
+    color: token.colorTextSecondary
+  }), "".concat(abreastLayoutPrefix, "-sider-collopse-btn-bg-icon"), {
+    position: "absolute",
+    color: token.siderCollapseBtnBg,
+    zIndex: "1",
+    left: "0",
+    top: "0"
+  }), "".concat(abreastLayoutPrefix, "-sider-collopse-btn-bg-arrow"), {
+    position: "relative",
+    zIndex: "2"
+  }), "".concat(abreastLayoutPrefix, "-sider-collopse-btn-left"), {
+    borderRadius: "2px 0 0 2px",
+    right: "0",
+    transform: "rotate(180deg)"
+  }), "".concat(abreastLayoutPrefix, "-sider-collopse-btn-right"), {
+    left: "0",
+    borderRadius: "0 2px 2px 0",
+    borderLeft: "none"
+  }), _defineProperty(_defineProperty(_defineProperty(_$concat3, ".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"), {
+    transition: "none",
+    // fixed 高亮条闪烁
+    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"), {
+    transition: "none",
+    // fixed 高亮条闪烁
+    borderRight: "3px ".concat(token.lineType, " ").concat(token.colorPrimary)
+  })));
+};
+// ============================== Export ==============================
+export default genStyleHooks("AbreastLayout", function (token) {
+  return [
+  //
+  genCustomAbreastLayoutStyle(token)];
+}, prepareComponentToken);