@alicloud/console-base-rc-side-panel 1.1.13 → 1.1.15

package/build/cjs/model/const/index.js

@@ -3,8 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DEFAULT_CONTEXT_STATE = exports.BODY_CLASS_WITH_SIDE_PANEL = void 0;
+exports.QUICK_TOP_VISIBLE_OFFSET = exports.DEFAULT_CONTEXT_STATE = exports.BODY_CLASS_WITH_SIDE_PANEL = void 0;
 var BODY_CLASS_WITH_SIDE_PANEL = exports.BODY_CLASS_WITH_SIDE_PANEL = 'with-side-panel';
+var QUICK_TOP_VISIBLE_OFFSET = exports.QUICK_TOP_VISIBLE_OFFSET = 200;
 var DEFAULT_CONTEXT_STATE = exports.DEFAULT_CONTEXT_STATE = {
-  collapsed: true
+  collapsed: true,
+  quickTopVisible: false
 };

package/build/cjs/model/enum/index.js

@@ -6,5 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.EAction = void 0;
 var EAction = exports.EAction = /*#__PURE__*/function (EAction) {
   EAction[EAction["SET_COLLAPSED"] = 0] = "SET_COLLAPSED";
+  EAction[EAction["SET_QUICK_TOP_VISIBLE"] = 1] = "SET_QUICK_TOP_VISIBLE";
   return EAction;
 }({});

package/build/cjs/model/hook/index.js

@@ -22,6 +22,12 @@ Object.defineProperty(exports, "useHandleCollapsedChange", {
     return _useHandleCollapsedChange.default;
   }
 });
+Object.defineProperty(exports, "useHandleGoTop", {
+  enumerable: true,
+  get: function get() {
+    return _useHandleGoTop.default;
+  }
+});
 Object.defineProperty(exports, "useItemsBottom", {
   enumerable: true,
   get: function get() {
@@ -40,6 +46,12 @@ Object.defineProperty(exports, "useProps", {
     return _useModelProps.default;
   }
 });
+Object.defineProperty(exports, "useQuickTop", {
+  enumerable: true,
+  get: function get() {
+    return _useQuickTop.default;
+  }
+});
 Object.defineProperty(exports, "useVisible", {
   enumerable: true,
   get: function get() {
@@ -52,4 +64,6 @@ var _useVisible = _interopRequireDefault(require("./use-visible"));
 var _useCollapsed = _interopRequireDefault(require("./use-collapsed"));
 var _useItemsTop = _interopRequireDefault(require("./use-items-top"));
 var _useItemsBottom = _interopRequireDefault(require("./use-items-bottom"));
-var _useHandleCollapsedChange = _interopRequireDefault(require("./use-handle-collapsed-change"));
+var _useQuickTop = _interopRequireDefault(require("./use-quick-top"));
+var _useHandleCollapsedChange = _interopRequireDefault(require("./use-handle-collapsed-change"));
+var _useHandleGoTop = _interopRequireDefault(require("./use-handle-go-top"));

package/build/cjs/model/hook/use-dispatch-set-quick-top-visible.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useDispatchSetQuickTopVisible;
+var _react = require("react");
+var _enum = require("../enum");
+var _useModelDispatch = _interopRequireDefault(require("./_use-model-dispatch"));
+function useDispatchSetQuickTopVisible() {
+  var dispatch = (0, _useModelDispatch.default)();
+  return (0, _react.useCallback)(function (payload) {
+    return dispatch({
+      type: _enum.EAction.SET_QUICK_TOP_VISIBLE,
+      payload: payload
+    });
+  }, [dispatch]);
+}

package/build/cjs/model/hook/use-effect-quick-top.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useEffectQuickTop;
+var _react = require("react");
+var _const = require("../const");
+var _useModelProps2 = _interopRequireDefault(require("./_use-model-props"));
+var _useVisible = _interopRequireDefault(require("./use-visible"));
+var _useCollapsed = _interopRequireDefault(require("./use-collapsed"));
+var _useHandleSetQuickTopVisible = _interopRequireDefault(require("./use-handle-set-quick-top-visible"));
+function useEffectQuickTop() {
+  var _useModelProps = (0, _useModelProps2.default)(),
+    quickTopContainer = _useModelProps.quickTopContainer;
+  var visible = (0, _useVisible.default)();
+  var collapsed = (0, _useCollapsed.default)();
+  var handleSetQuickTopVisible = (0, _useHandleSetQuickTopVisible.default)();
+  var handleToggleVisible = (0, _react.useCallback)(function () {
+    if (!quickTopContainer) {
+      return;
+    }
+    handleSetQuickTopVisible((quickTopContainer.scrollY || quickTopContainer.scrollTop) > _const.QUICK_TOP_VISIBLE_OFFSET);
+  }, [quickTopContainer, handleSetQuickTopVisible]);
+
+  // container 变化导致 handleToggleVisible 变化，此时需要执行一次
+  (0, _react.useEffect)(handleToggleVisible, [handleToggleVisible]);
+
+  // 对 container 进行 scroll 的事件绑定
+  (0, _react.useEffect)(function () {
+    if (!quickTopContainer || !visible || collapsed) {
+      return;
+    }
+    quickTopContainer.addEventListener('scroll', handleToggleVisible);
+    return function () {
+      return quickTopContainer.removeEventListener('scroll', handleToggleVisible);
+    };
+  }, [visible, collapsed, quickTopContainer, handleToggleVisible]);
+}

package/build/cjs/model/hook/use-effects.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = useEffects;
 var _useEffectToggleBodyClass = _interopRequireDefault(require("./use-effect-toggle-body-class"));
+var _useEffectQuickTop = _interopRequireDefault(require("./use-effect-quick-top"));
 function useEffects() {
   (0, _useEffectToggleBodyClass.default)();
+  (0, _useEffectQuickTop.default)();
 }

package/build/cjs/model/hook/use-handle-go-top.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useHandleGoTop;
+var _react = require("react");
+var _mereDom = require("@alicloud/mere-dom");
+var _useQuickTop2 = _interopRequireDefault(require("./use-quick-top"));
+function useHandleGoTop() {
+  var _useQuickTop = (0, _useQuickTop2.default)(),
+    container = _useQuickTop.container;
+  return (0, _react.useCallback)(function () {
+    if (!container) {
+      return;
+    }
+    (0, _mereDom.scrollTo)(container, {
+      top: 0
+    });
+  }, [container]);
+}

package/build/cjs/model/hook/use-handle-set-quick-top-visible.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useHandleSetQuickTopVisible;
+var _react = require("react");
+var _useDispatchSetQuickTopVisible = _interopRequireDefault(require("./use-dispatch-set-quick-top-visible"));
+var _useModelProps2 = _interopRequireDefault(require("./_use-model-props"));
+function useHandleSetQuickTopVisible() {
+  var _useModelProps = (0, _useModelProps2.default)(),
+    onQuickTopVisibleChange = _useModelProps.onQuickTopVisibleChange;
+  var dispatchSetQuickTopVisible = (0, _useDispatchSetQuickTopVisible.default)();
+  return (0, _react.useCallback)(function (visible) {
+    dispatchSetQuickTopVisible(visible);
+    onQuickTopVisibleChange === null || onQuickTopVisibleChange === void 0 ? void 0 : onQuickTopVisibleChange(visible);
+  }, [dispatchSetQuickTopVisible, onQuickTopVisibleChange]);
+}

package/build/cjs/model/hook/use-quick-top.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useQuickTop;
+var _useModelProps2 = _interopRequireDefault(require("./_use-model-props"));
+var _useModelState2 = _interopRequireDefault(require("./_use-model-state"));
+function useQuickTop() {
+  var _useModelProps = (0, _useModelProps2.default)(),
+    quickTopContainer = _useModelProps.quickTopContainer;
+  var _useModelState = (0, _useModelState2.default)(),
+    quickTopVisible = _useModelState.quickTopVisible;
+  return {
+    container: quickTopContainer,
+    visible: quickTopVisible
+  };
+}

package/build/cjs/model/reducer/index.js

@@ -7,10 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = reducer;
 var _enum = require("../enum");
 var _reduceSetCollapsed = _interopRequireDefault(require("./reduce-set-collapsed"));
+var _reduceSetQuickTopVisible = _interopRequireDefault(require("./reduce-set-quick-top-visible"));
 function reducer(state, action) {
   switch (action.type) {
     case _enum.EAction.SET_COLLAPSED:
       return (0, _reduceSetCollapsed.default)(state, action.payload);
+    case _enum.EAction.SET_QUICK_TOP_VISIBLE:
+      return (0, _reduceSetQuickTopVisible.default)(state, action.payload);
     default:
       return state;
   }

package/build/cjs/model/reducer/reduce-set-quick-top-visible.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = reduceSetQuickTopVisible;
+var _immutabilityHelper = _interopRequireDefault(require("immutability-helper"));
+function reduceSetQuickTopVisible(state, payload) {
+  return (0, _immutabilityHelper.default)(state, {
+    quickTopVisible: {
+      $set: payload
+    }
+  });
+}

package/build/cjs/ui/index.js

@@ -18,7 +18,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var ScAside = _styledComponents.default.aside.withConfig({
   componentId: "sc-1ok6knf-0"
-})(["z-index:", ";position:fixed;top:0;right:0;bottom:0;display:flex;flex-direction:column;padding:", "px 0 ", "px 0;width:", "px;transition:transform ease-in-out 250ms;box-shadow:none;", " ", " ", " .hasTopbar &{top:", "px;}"], _consoleBaseTheme.Z_INDEX.SIDE_PANEL, _const.SPACING_Y * 1.5, _const.SIZE_BUTTON_WRAP_HEIGHT + _const.SPACING_Y, _consoleBaseTheme.SIZE.WIDTH_SIDE_PANEL, _consoleBaseTheme.mixinBgPrimary, _consoleBaseTheme.mixinBorderTertiaryLeft, function (_ref) {
+})(["z-index:", ";position:fixed;top:0;right:0;bottom:0;display:flex;flex-direction:column;padding:", "px 0 ", "px 0;width:", "px;transition:transform 250ms ease-in-out 0ms;box-shadow:none;", " ", " ", " .hasTopbar &{top:", "px;}"], _consoleBaseTheme.Z_INDEX.SIDE_PANEL, _const.SPACING_Y * 1.5, _const.SIZE_BUTTON_WRAP_HEIGHT + _const.SPACING_Y, _consoleBaseTheme.SIZE.WIDTH_SIDE_PANEL, _consoleBaseTheme.mixinBgPrimary, _consoleBaseTheme.mixinBorderTertiaryLeft, function (_ref) {
   var $collapsed = _ref.$collapsed;
   return $collapsed ? (0, _styledComponents.css)(["transform:translateX(101%);border:none !important;"]) : _consoleBaseTheme.mixinBorderTertiaryLeft;
 }, _consoleBaseTheme.SIZE.HEIGHT_TOP_NAV);

package/build/cjs/ui/rc-container/collapse-toggle/styles.js

@@ -15,11 +15,11 @@ var ScCollapseToggleWrap = exports.ScCollapseToggleWrap = _styledComponents.defa
   componentId: "sc-xm41v7-0"
 })(["position:absolute;right:0;bottom:", "px;"], _const.SPACING_Y);
 var cssToggleNone = (0, _styledComponents.css)(["transform:translateX(0);"]);
-var cssToggleIn = (0, _styledComponents.css)(["transform:translateX(-100%);"]);
+var cssToggleIn = (0, _styledComponents.css)(["transform:translateX(-101%);"]);
 var cssToggleOut = (0, _styledComponents.css)(["transform:translateX(-50%);"]);
 var ScCollapseToggle = exports.ScCollapseToggle = (0, _styledComponents.default)(_rc.SidePanelItemWrap).withConfig({
   componentId: "sc-xm41v7-1"
-})(["transition:transform 250ms ease-in-out 0s;", ""], function (_ref) {
+})(["transition:transform 250ms ease-in-out 0ms;", ""], function (_ref) {
   var $collapsed = _ref.$collapsed,
     $isSimpleCN = _ref.$isSimpleCN,
     $hovered = _ref.$hovered;

package/build/cjs/ui/rc-container/item/index.js

@@ -15,7 +15,7 @@ var _consoleBaseRcTooltip = require("@alicloud/console-base-rc-tooltip");
 var _consoleBaseRcHtmlTrusted = _interopRequireDefault(require("@alicloud/console-base-rc-html-trusted"));
 var _model = require("../../../model");
 var _rc = require("../../rc");
-var _excluded = ["title", "unread", "mark", "tooltip", "tooltipAsHtml", "tooltipDefaultOpen", "tooltipDefaultOpenDelay", "tooltipDefaultOpenDuration", "tooltipOptions", "active", "onActiveChange", "onClick", "id", "className", "style"];
+var _excluded = ["title", "unread", "mark", "tooltip", "tooltipAsHtml", "tooltipDefaultOpen", "tooltipDefaultOpenDelay", "tooltipDefaultOpenDuration", "tooltipOptions", "active", "onActiveChange", "onClick", "id", "className", "icon", "iconHovered"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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; }
@@ -39,7 +39,8 @@ var Item = function Item(_ref) {
     onClick = _ref.onClick,
     id = _ref.id,
     className = _ref.className,
-    style = _ref.style,
+    icon = _ref.icon,
+    iconHovered = _ref.iconHovered,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var openTimerRef = (0, _react.useRef)(null);
   var defaultOpenTimerRef = (0, _react.useRef)(null);
@@ -96,11 +97,11 @@ var Item = function Item(_ref) {
     onOpenChange: setOpen
   }), /*#__PURE__*/_react.default.createElement(_rc.SidePanelItemWrap, {
     id: id,
-    className: className,
-    style: style
+    className: className
   }, /*#__PURE__*/_react.default.createElement(_rc.SidePanelItemButton, (0, _extends2.default)({
     title: title,
     active: active,
+    icon: open && iconHovered ? iconHovered : icon,
     onClick: handleClick
   }, rest)), /*#__PURE__*/_react.default.createElement(_rc.SidePanelItemBadge, {
     unread: unread,

package/build/cjs/ui/rc-container/items/index.js

@@ -14,6 +14,7 @@ var _consoleBaseThemeScBase = require("@alicloud/console-base-theme-sc-base");
 var _model = require("../../../model");
 var _const = require("../../const");
 var _item = _interopRequireDefault(require("../item"));
+var _quickTop = _interopRequireDefault(require("../quick-top"));
 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) { (0, _defineProperty2.default)(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 Items(_ref) {
@@ -35,11 +36,12 @@ var ScHr = (0, _styledComponents.default)(_consoleBaseThemeScBase.HrBase).withCo
   componentId: "sc-1h5t3jq-0"
 })(["margin:", "px 4px;"], _const.SPACING_Y);
 function ItemsBottom() {
+  var quickTop = (0, _model.useQuickTop)();
   var children = (0, _model.useChildren)();
   var items = (0, _model.useItemsBottom)();
   return /*#__PURE__*/_react.default.createElement(_consoleBaseRcFlex.default, {
     vertical: true
-  }, children || items.length ? /*#__PURE__*/_react.default.createElement(ScHr, null) : null, children || /*#__PURE__*/_react.default.createElement(Items, {
+  }, quickTop.container && quickTop.visible ? /*#__PURE__*/_react.default.createElement(_quickTop.default, null) : null, children || items.length ? /*#__PURE__*/_react.default.createElement(ScHr, null) : null, children || /*#__PURE__*/_react.default.createElement(Items, {
     items: items
   }));
 }

package/build/cjs/ui/rc-container/quick-top/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = QuickTop;
+var _react = _interopRequireDefault(require("react"));
+var _consoleBaseRcIcon = _interopRequireDefault(require("@alicloud/console-base-rc-icon"));
+var _consoleBaseRcTooltip = require("@alicloud/console-base-rc-tooltip");
+var _model = require("../../../model");
+var _rc = require("../../rc");
+var _intl = _interopRequireDefault(require("../../intl"));
+function QuickTop() {
+  var handleGoTop = (0, _model.useHandleGoTop)();
+  var title = (0, _intl.default)('op:back_to_top');
+  return /*#__PURE__*/_react.default.createElement(_consoleBaseRcTooltip.TooltipV1, {
+    title: title,
+    destroyTooltipOnHide: true,
+    placement: "left",
+    fixed: true,
+    overlayStyle: {
+      marginLeft: '8px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_rc.SidePanelItemWrap, null, /*#__PURE__*/_react.default.createElement(_rc.SidePanelItemButton, {
+    title: title,
+    icon: /*#__PURE__*/_react.default.createElement(_consoleBaseRcIcon.default, {
+      type: "go-top"
+    }),
+    onClick: handleGoTop
+  })));
+}

package/build/esm/model/const/index.js

@@ -1,4 +1,6 @@
 export var BODY_CLASS_WITH_SIDE_PANEL = 'with-side-panel';
+export var QUICK_TOP_VISIBLE_OFFSET = 200;
 export var DEFAULT_CONTEXT_STATE = {
-  collapsed: true
+  collapsed: true,
+  quickTopVisible: false
 };

package/build/esm/model/enum/index.js

@@ -1,4 +1,5 @@
 export var EAction = /*#__PURE__*/function (EAction) {
   EAction[EAction["SET_COLLAPSED"] = 0] = "SET_COLLAPSED";
+  EAction[EAction["SET_QUICK_TOP_VISIBLE"] = 1] = "SET_QUICK_TOP_VISIBLE";
   return EAction;
 }({});

package/build/esm/model/hook/index.js

@@ -4,6 +4,8 @@ export { default as useVisible } from './use-visible';
 export { default as useCollapsed } from './use-collapsed';
 export { default as useItemsTop } from './use-items-top';
 export { default as useItemsBottom } from './use-items-bottom';
+export { default as useQuickTop } from './use-quick-top';
 
 // handlers
-export { default as useHandleCollapsedChange } from './use-handle-collapsed-change';
+export { default as useHandleCollapsedChange } from './use-handle-collapsed-change';
+export { default as useHandleGoTop } from './use-handle-go-top';

package/build/esm/model/hook/use-dispatch-set-quick-top-visible.js

@@ -0,0 +1,12 @@
+import { useCallback } from 'react';
+import { EAction } from '../enum';
+import useModelDispatch from './_use-model-dispatch';
+export default function useDispatchSetQuickTopVisible() {
+  var dispatch = useModelDispatch();
+  return useCallback(function (payload) {
+    return dispatch({
+      type: EAction.SET_QUICK_TOP_VISIBLE,
+      payload: payload
+    });
+  }, [dispatch]);
+}

package/build/esm/model/hook/use-effect-quick-top.js

@@ -0,0 +1,33 @@
+import { useCallback, useEffect } from 'react';
+import { QUICK_TOP_VISIBLE_OFFSET } from '../const';
+import useModelProps from './_use-model-props';
+import useVisible from './use-visible';
+import useCollapsed from './use-collapsed';
+import useHandleSetQuickTopVisible from './use-handle-set-quick-top-visible';
+export default function useEffectQuickTop() {
+  var _useModelProps = useModelProps(),
+    quickTopContainer = _useModelProps.quickTopContainer;
+  var visible = useVisible();
+  var collapsed = useCollapsed();
+  var handleSetQuickTopVisible = useHandleSetQuickTopVisible();
+  var handleToggleVisible = useCallback(function () {
+    if (!quickTopContainer) {
+      return;
+    }
+    handleSetQuickTopVisible((quickTopContainer.scrollY || quickTopContainer.scrollTop) > QUICK_TOP_VISIBLE_OFFSET);
+  }, [quickTopContainer, handleSetQuickTopVisible]);
+
+  // container 变化导致 handleToggleVisible 变化，此时需要执行一次
+  useEffect(handleToggleVisible, [handleToggleVisible]);
+
+  // 对 container 进行 scroll 的事件绑定
+  useEffect(function () {
+    if (!quickTopContainer || !visible || collapsed) {
+      return;
+    }
+    quickTopContainer.addEventListener('scroll', handleToggleVisible);
+    return function () {
+      return quickTopContainer.removeEventListener('scroll', handleToggleVisible);
+    };
+  }, [visible, collapsed, quickTopContainer, handleToggleVisible]);
+}

package/build/esm/model/hook/use-effects.js

@@ -1,4 +1,6 @@
 import useEffectToggleBodyClass from './use-effect-toggle-body-class';
+import useEffectQuickTop from './use-effect-quick-top';
 export default function useEffects() {
   useEffectToggleBodyClass();
+  useEffectQuickTop();
 }

package/build/esm/model/hook/use-handle-go-top.js

@@ -0,0 +1,15 @@
+import { useCallback } from 'react';
+import { scrollTo } from '@alicloud/mere-dom';
+import useQuickTop from './use-quick-top';
+export default function useHandleGoTop() {
+  var _useQuickTop = useQuickTop(),
+    container = _useQuickTop.container;
+  return useCallback(function () {
+    if (!container) {
+      return;
+    }
+    scrollTo(container, {
+      top: 0
+    });
+  }, [container]);
+}

package/build/esm/model/hook/use-handle-set-quick-top-visible.js

@@ -0,0 +1,12 @@
+import { useCallback } from 'react';
+import useDispatchSetQuickTopVisible from './use-dispatch-set-quick-top-visible';
+import useModelProps from './_use-model-props';
+export default function useHandleSetQuickTopVisible() {
+  var _useModelProps = useModelProps(),
+    onQuickTopVisibleChange = _useModelProps.onQuickTopVisibleChange;
+  var dispatchSetQuickTopVisible = useDispatchSetQuickTopVisible();
+  return useCallback(function (visible) {
+    dispatchSetQuickTopVisible(visible);
+    onQuickTopVisibleChange === null || onQuickTopVisibleChange === void 0 ? void 0 : onQuickTopVisibleChange(visible);
+  }, [dispatchSetQuickTopVisible, onQuickTopVisibleChange]);
+}

package/build/esm/model/hook/use-quick-top.js

@@ -0,0 +1,12 @@
+import useModelProps from './_use-model-props';
+import useModelState from './_use-model-state';
+export default function useQuickTop() {
+  var _useModelProps = useModelProps(),
+    quickTopContainer = _useModelProps.quickTopContainer;
+  var _useModelState = useModelState(),
+    quickTopVisible = _useModelState.quickTopVisible;
+  return {
+    container: quickTopContainer,
+    visible: quickTopVisible
+  };
+}

package/build/esm/model/reducer/index.js

@@ -1,9 +1,12 @@
 import { EAction } from '../enum';
 import reduceSetCollapsed from './reduce-set-collapsed';
+import reduceSetQuickTopVisible from './reduce-set-quick-top-visible';
 export default function reducer(state, action) {
   switch (action.type) {
     case EAction.SET_COLLAPSED:
       return reduceSetCollapsed(state, action.payload);
+    case EAction.SET_QUICK_TOP_VISIBLE:
+      return reduceSetQuickTopVisible(state, action.payload);
     default:
       return state;
   }

package/build/esm/model/reducer/reduce-set-quick-top-visible.js

@@ -0,0 +1,8 @@
+import update from 'immutability-helper';
+export default function reduceSetQuickTopVisible(state, payload) {
+  return update(state, {
+    quickTopVisible: {
+      $set: payload
+    }
+  });
+}

package/build/esm/ui/index.js

@@ -8,7 +8,7 @@ import { GlobalStyleOnBody } from './rc';
 import { ItemsTop, ItemsBottom, CollapseToggle, CollapseAside } from './rc-container';
 var ScAside = styled.aside.withConfig({
   componentId: "sc-1ok6knf-0"
-})(["z-index:", ";position:fixed;top:0;right:0;bottom:0;display:flex;flex-direction:column;padding:", "px 0 ", "px 0;width:", "px;transition:transform ease-in-out 250ms;box-shadow:none;", " ", " ", " .hasTopbar &{top:", "px;}"], Z_INDEX.SIDE_PANEL, SPACING_Y * 1.5, SIZE_BUTTON_WRAP_HEIGHT + SPACING_Y, SIZE.WIDTH_SIDE_PANEL, mixinBgPrimary, mixinBorderTertiaryLeft, function (_ref) {
+})(["z-index:", ";position:fixed;top:0;right:0;bottom:0;display:flex;flex-direction:column;padding:", "px 0 ", "px 0;width:", "px;transition:transform 250ms ease-in-out 0ms;box-shadow:none;", " ", " ", " .hasTopbar &{top:", "px;}"], Z_INDEX.SIDE_PANEL, SPACING_Y * 1.5, SIZE_BUTTON_WRAP_HEIGHT + SPACING_Y, SIZE.WIDTH_SIDE_PANEL, mixinBgPrimary, mixinBorderTertiaryLeft, function (_ref) {
   var $collapsed = _ref.$collapsed;
   return $collapsed ? css(["transform:translateX(101%);border:none !important;"]) : mixinBorderTertiaryLeft;
 }, SIZE.HEIGHT_TOP_NAV);

package/build/esm/ui/rc-container/collapse-toggle/styles.js

@@ -6,11 +6,11 @@ export var ScCollapseToggleWrap = styled.div.withConfig({
   componentId: "sc-xm41v7-0"
 })(["position:absolute;right:0;bottom:", "px;"], SPACING_Y);
 var cssToggleNone = css(["transform:translateX(0);"]);
-var cssToggleIn = css(["transform:translateX(-100%);"]);
+var cssToggleIn = css(["transform:translateX(-101%);"]);
 var cssToggleOut = css(["transform:translateX(-50%);"]);
 export var ScCollapseToggle = styled(SidePanelItemWrap).withConfig({
   componentId: "sc-xm41v7-1"
-})(["transition:transform 250ms ease-in-out 0s;", ""], function (_ref) {
+})(["transition:transform 250ms ease-in-out 0ms;", ""], function (_ref) {
   var $collapsed = _ref.$collapsed,
     $isSimpleCN = _ref.$isSimpleCN,
     $hovered = _ref.$hovered;

package/build/esm/ui/rc-container/item/index.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["title", "unread", "mark", "tooltip", "tooltipAsHtml", "tooltipDefaultOpen", "tooltipDefaultOpenDelay", "tooltipDefaultOpenDuration", "tooltipOptions", "active", "onActiveChange", "onClick", "id", "className", "style"];
+var _excluded = ["title", "unread", "mark", "tooltip", "tooltipAsHtml", "tooltipDefaultOpen", "tooltipDefaultOpenDelay", "tooltipDefaultOpenDuration", "tooltipOptions", "active", "onActiveChange", "onClick", "id", "className", "icon", "iconHovered"];
 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; }
 import React, { useCallback, useEffect, useRef, useState } from 'react';
@@ -29,7 +29,8 @@ var Item = function Item(_ref) {
     onClick = _ref.onClick,
     id = _ref.id,
     className = _ref.className,
-    style = _ref.style,
+    icon = _ref.icon,
+    iconHovered = _ref.iconHovered,
     rest = _objectWithoutProperties(_ref, _excluded);
   var openTimerRef = useRef(null);
   var defaultOpenTimerRef = useRef(null);
@@ -86,11 +87,11 @@ var Item = function Item(_ref) {
     onOpenChange: setOpen
   }), /*#__PURE__*/React.createElement(SidePanelItemWrap, {
     id: id,
-    className: className,
-    style: style
+    className: className
   }, /*#__PURE__*/React.createElement(SidePanelItemButton, _extends({
     title: title,
     active: active,
+    icon: open && iconHovered ? iconHovered : icon,
     onClick: handleClick
   }, rest)), /*#__PURE__*/React.createElement(SidePanelItemBadge, {
     unread: unread,

package/build/esm/ui/rc-container/items/index.js

@@ -5,9 +5,10 @@ import React from 'react';
 import styled from 'styled-components';
 import Flex from '@alicloud/console-base-rc-flex';
 import { HrBase } from '@alicloud/console-base-theme-sc-base';
-import { useChildren, useItemsTop, useItemsBottom } from '../../../model';
+import { useChildren, useItemsTop, useItemsBottom, useQuickTop } from '../../../model';
 import { DATA_KEY_SIDE_PANEL_ITEM, SPACING_Y } from '../../const';
 import PanelItem from '../item';
+import QuickTop from '../quick-top';
 function Items(_ref) {
   var items = _ref.items;
   return /*#__PURE__*/React.createElement(React.Fragment, null, items.map(function (v) {
@@ -27,11 +28,12 @@ var ScHr = styled(HrBase).withConfig({
   componentId: "sc-1h5t3jq-0"
 })(["margin:", "px 4px;"], SPACING_Y);
 export function ItemsBottom() {
+  var quickTop = useQuickTop();
   var children = useChildren();
   var items = useItemsBottom();
   return /*#__PURE__*/React.createElement(Flex, {
     vertical: true
-  }, children || items.length ? /*#__PURE__*/React.createElement(ScHr, null) : null, children || /*#__PURE__*/React.createElement(Items, {
+  }, quickTop.container && quickTop.visible ? /*#__PURE__*/React.createElement(QuickTop, null) : null, children || items.length ? /*#__PURE__*/React.createElement(ScHr, null) : null, children || /*#__PURE__*/React.createElement(Items, {
     items: items
   }));
 }

package/build/esm/ui/rc-container/quick-top/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import Icon from '@alicloud/console-base-rc-icon';
+import { TooltipV1 } from '@alicloud/console-base-rc-tooltip';
+import { useHandleGoTop } from '../../../model';
+import { SidePanelItemWrap, SidePanelItemButton } from '../../rc';
+import intl from '../../intl';
+export default function QuickTop() {
+  var handleGoTop = useHandleGoTop();
+  var title = intl('op:back_to_top');
+  return /*#__PURE__*/React.createElement(TooltipV1, {
+    title: title,
+    destroyTooltipOnHide: true,
+    placement: "left",
+    fixed: true,
+    overlayStyle: {
+      marginLeft: '8px'
+    }
+  }, /*#__PURE__*/React.createElement(SidePanelItemWrap, null, /*#__PURE__*/React.createElement(SidePanelItemButton, {
+    title: title,
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      type: "go-top"
+    }),
+    onClick: handleGoTop
+  })));
+}

package/build/types/model/const/index.d.ts

@@ -1,3 +1,4 @@
 import { IModelState } from '../types';
 export declare const BODY_CLASS_WITH_SIDE_PANEL = "with-side-panel";
+export declare const QUICK_TOP_VISIBLE_OFFSET = 200;
 export declare const DEFAULT_CONTEXT_STATE: IModelState;

package/build/types/model/enum/index.d.ts

@@ -1,3 +1,4 @@
 export declare enum EAction {
-    SET_COLLAPSED = 0
+    SET_COLLAPSED = 0,
+    SET_QUICK_TOP_VISIBLE = 1
 }

package/build/types/model/hook/index.d.ts

@@ -4,4 +4,6 @@ export { default as useVisible } from './use-visible';
 export { default as useCollapsed } from './use-collapsed';
 export { default as useItemsTop } from './use-items-top';
 export { default as useItemsBottom } from './use-items-bottom';
+export { default as useQuickTop } from './use-quick-top';
 export { default as useHandleCollapsedChange } from './use-handle-collapsed-change';
+export { default as useHandleGoTop } from './use-handle-go-top';

package/build/types/model/hook/use-dispatch-set-quick-top-visible.d.ts

@@ -0,0 +1 @@
+export default function useDispatchSetQuickTopVisible(): (payload: boolean) => void;

package/build/types/model/hook/use-effect-quick-top.d.ts

@@ -0,0 +1 @@
+export default function useEffectQuickTop(): void;

package/build/types/model/hook/use-handle-go-top.d.ts

@@ -0,0 +1 @@
+export default function useHandleGoTop(): () => void;

package/build/types/model/hook/use-handle-set-quick-top-visible.d.ts

@@ -0,0 +1 @@
+export default function useHandleSetQuickTopVisible(): (visible: boolean) => void;

package/build/types/model/hook/use-quick-top.d.ts

@@ -0,0 +1,6 @@
+interface IQuickTop {
+    container?: Window | HTMLElement | null;
+    visible: boolean;
+}
+export default function useQuickTop(): IQuickTop;
+export {};

package/build/types/model/reducer/reduce-set-quick-top-visible.d.ts

@@ -0,0 +1,2 @@
+import { IModelState } from '../types';
+export default function reduceSetQuickTopVisible(state: IModelState, payload: boolean): IModelState;

package/build/types/model/types/action.d.ts

@@ -1,7 +1,7 @@
 import { Dispatch } from 'react';
 import { EAction } from '../enum';
 export type TModelAction = {
-    type: EAction.SET_COLLAPSED;
+    type: EAction.SET_COLLAPSED | EAction.SET_QUICK_TOP_VISIBLE;
     payload: boolean;
 };
 export type TModelDispatch = Dispatch<TModelAction>;

package/build/types/model/types/common.d.ts

@@ -9,6 +9,10 @@ export interface SidePanelItemButtonProps {
      * 入口图标，如果是组件则直接用，当它是字符串的时候，会智能判断
      */
     icon: EasyIconValue;
+    /**
+     * 入口图标，鼠标 hover 时的展示，不传则回退到 icon
+     */
+    iconHovered?: EasyIconValue;
     /**
      * 入口仅显示图标，不需要背景
      */
@@ -30,7 +34,7 @@ export interface SidePanelItemButtonProps {
      */
     [dataName: `data-${string}`]: unknown;
     /**
-     * 按钮点击后的回调函数
+     * 入口按钮点击后的回调函数
      */
     onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     /**
@@ -83,10 +87,6 @@ export interface ISidePanelItemProps extends SidePanelItemButtonProps {
      * 入口 ClassName
      */
     className?: string;
-    /**
-     * 入口自定义样式
-     */
-    style?: React.CSSProperties;
 }
 export interface ISidePanelItemPropsWithKey extends ISidePanelItemProps {
     key: string;

package/build/types/model/types/props.d.ts

@@ -26,6 +26,14 @@ export interface IModelProps {
      * 位于折叠点【推入按钮】上部的内容，将会跟随推入按钮做出入运动，嵌入 sidePanel 后，它将会隐藏
      */
     collapsedAside?: JSX.Element | null;
+    /**
+     * 给一个 DOM 节点，组件会监测它的滚动情况，并判断是否展示快速置顶按钮
+     */
+    quickTopContainer?: Window | HTMLElement | null;
+    /**
+     * QuickTop 显隐变化时的回调，可用于日志
+     */
+    onQuickTopVisibleChange?(visible: boolean): void;
     /**
      * 是否展示推入按钮
      */

package/build/types/model/types/state.d.ts

@@ -1,3 +1,4 @@
 export interface IModelState {
     collapsed: boolean;
+    quickTopVisible: boolean;
 }

package/build/types/ui/rc-container/quick-top/index.d.ts

@@ -0,0 +1 @@
+export default function QuickTop(): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alicloud/console-base-rc-side-panel",
-  "version": "1.1.13",
+  "version": "1.1.15",
   "description": "ConsoleBase 组件 - 右侧边栏",
   "license": "MIT",
   "sideEffects": false,
@@ -43,7 +43,7 @@
     "@alicloud/console-base-rc-html-trusted": "^1.0.5",
     "@alicloud/console-base-rc-icon": "^1.10.6",
     "@alicloud/console-base-rc-marks": "^1.8.3",
-    "@alicloud/console-base-rc-tooltip": "^1.1.19",
+    "@alicloud/console-base-rc-tooltip": "^1.1.20",
     "@alicloud/console-base-theme": "^1.9.7",
     "@alicloud/console-base-theme-sc-base": "^1.6.4",
     "@alicloud/mere-dom": "^1.8.0",

package/build/cjs/ui/util/get-value-by-status.js

@@ -1,23 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = getValueByStatus;
-function getValueByStatus(values, hovered, active) {
-  var valueNormal = values.valueNormal,
-    valueHovered = values.valueHovered,
-    valueActive = values.valueActive,
-    valueActiveHovered = values.valueActiveHovered;
-  if (hovered && active) {
-    var _ref;
-    return (_ref = valueActiveHovered !== null && valueActiveHovered !== void 0 ? valueActiveHovered : valueActive) !== null && _ref !== void 0 ? _ref : valueNormal;
-  }
-  if (active) {
-    return valueActive !== null && valueActive !== void 0 ? valueActive : valueNormal;
-  }
-  if (hovered) {
-    return valueHovered !== null && valueHovered !== void 0 ? valueHovered : valueNormal;
-  }
-  return valueNormal;
-}

package/build/cjs/ui/util/index.js

@@ -1,13 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "getValueByStatus", {
-  enumerable: true,
-  get: function get() {
-    return _getValueByStatus.default;
-  }
-});
-var _getValueByStatus = _interopRequireDefault(require("./get-value-by-status"));

package/build/esm/ui/util/get-value-by-status.js

@@ -1,17 +0,0 @@
-export default function getValueByStatus(values, hovered, active) {
-  var valueNormal = values.valueNormal,
-    valueHovered = values.valueHovered,
-    valueActive = values.valueActive,
-    valueActiveHovered = values.valueActiveHovered;
-  if (hovered && active) {
-    var _ref;
-    return (_ref = valueActiveHovered !== null && valueActiveHovered !== void 0 ? valueActiveHovered : valueActive) !== null && _ref !== void 0 ? _ref : valueNormal;
-  }
-  if (active) {
-    return valueActive !== null && valueActive !== void 0 ? valueActive : valueNormal;
-  }
-  if (hovered) {
-    return valueHovered !== null && valueHovered !== void 0 ? valueHovered : valueNormal;
-  }
-  return valueNormal;
-}

package/build/esm/ui/util/index.js

@@ -1 +0,0 @@
-export { default as getValueByStatus } from './get-value-by-status';

package/build/types/ui/util/get-value-by-status.d.ts

@@ -1,8 +0,0 @@
-interface IValues<T> {
-    valueNormal: T;
-    valueHovered?: T;
-    valueActive?: T;
-    valueActiveHovered?: T;
-}
-export default function getValueByStatus<T>(values: IValues<T>, hovered?: boolean, active?: boolean): T;
-export {};

package/build/types/ui/util/index.d.ts

@@ -1 +0,0 @@
-export { default as getValueByStatus } from './get-value-by-status';