@jetlinks-web/components 2.4.12 → 2.4.14

package/es/AMap/Map.js

@@ -17,8 +17,10 @@
   "MapProps": "setup-maybe-ref",
   "MAPConfig": "setup-maybe-ref",
   "Empty": "setup-maybe-ref",
+  "useLocaleReceiver": "setup-maybe-ref",
   "emit": "setup-const",
   "props": "setup-reactive-const",
+  "contextLocale": "setup-maybe-ref",
   "config": "setup-maybe-ref",
   "_mapStyle": "setup-ref",
   "hasAMapKey": "setup-ref",
@@ -37,6 +39,7 @@ import { MapProps } from './util';
 import { MAPConfig } from "../utils/constants";
 import Empty from '../Empty';
 import '@vuemap/vue-amap/dist/style.css';
+import { useLocaleReceiver } from "../LocaleReciver/index";
 const __sfc_main__ = _defineComponent({
     ...{
         name: 'JAMap'
@@ -61,6 +64,7 @@ const __sfc_main__ = _defineComponent({
     setup(__props, { emit: __emit }) {
         const emit = __emit;
         const props = __props;
+        const [contextLocale] = useLocaleReceiver('AMap');
         const config = inject(MAPConfig);
         const _mapStyle = computed(() => {
             if (props.mapStyle) {
@@ -119,9 +123,9 @@ const __sfc_main__ = _defineComponent({
                     }, 16 /* FULL_PROPS */, ["map-style"]))
                     : (_openBlock(), _createBlock(_unref(Empty), {
                         key: 1,
-                        description: "请配置高德地图key",
+                        description: _unref(contextLocale).description,
                         style: { "padding": "20%" }
-                    }))
+                    }, null, 8 /* PROPS */, ["description"]))
             ], 6 /* CLASS, STYLE */));
         };
     }

package/es/ConfigProvider/context.js

@@ -16,6 +16,9 @@ export var configProps = function configProps() {
     },
     FullPageConfig: {
       reduceHeight: Number
+    },
+    componentsLocale: {
+      type: Object
     }
   });
 };

package/es/ConfigProvider/index.js

@@ -4,6 +4,7 @@ import { defineComponent, provide, reactive, h } from 'vue';
 import { configProps } from './context';
 import { ComponentsEnum, MAPConfig, PermissionButtonConfig, SearchConfig, FullPageConfig } from '../utils/constants';
 import { ConfigProvider } from 'ant-design-vue';
+import LocaleProvider from '../LocaleProvider/index.js';
 import { omit } from 'lodash-es';
 import Empty from '../Empty';
 var JConfigProvider = defineComponent({
@@ -23,13 +24,15 @@ var JConfigProvider = defineComponent({
     provide(PermissionButtonConfig, _PermissionButtonConfig); // 权限组件
     provide(FullPageConfig, _FullPageConfig); // 权限组件
     return function () {
-      return h(ConfigProvider, _objectSpread({}, omit(props, ['IconConfig', 'MapConfig', 'SearchConfig'])), {
+      return h(ConfigProvider, _objectSpread({}, omit(props, ['IconConfig', 'MapConfig', 'SearchConfig'])), [h(LocaleProvider, {
+        locale: props.componentsLocale
+      }, {
         default: slots.default,
         renderEmpty: function renderEmpty() {
           var _slots$renderEmpty;
           return ((_slots$renderEmpty = slots.renderEmpty) === null || _slots$renderEmpty === void 0 ? void 0 : _slots$renderEmpty.call(slots)) || _createVNode(Empty, null, null);
         }
-      });
+      })]);
     };
   }
 });

package/es/DragModal/DragModal.js

@@ -28,9 +28,11 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "onMounted": "setup-const",
   "watch": "setup-const",
   "Button": "setup-maybe-ref",
+  "useLocaleReceiver": "setup-maybe-ref",
   "props": "setup-reactive-const",
   "emits": "setup-const",
   "slots": "setup-maybe-ref",
+  "contextLocale": "setup-maybe-ref",
   "ele": "setup-maybe-ref",
   "dialog": "setup-ref",
   "header": "setup-ref",
@@ -47,7 +49,7 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "onOk": "setup-const"
 } */
 import { defineComponent as _defineComponent } from 'vue';
-import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, withModifiers as _withModifiers, withCtx as _withCtx, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, normalizeStyle as _normalizeStyle, createTextVNode as _createTextVNode, unref as _unref, Transition as _Transition } from "vue";
+import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, withModifiers as _withModifiers, withCtx as _withCtx, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, normalizeStyle as _normalizeStyle, unref as _unref, createTextVNode as _createTextVNode, Transition as _Transition } from "vue";
 const _hoisted_1 = {
     key: 0,
     class: "header"
@@ -58,6 +60,7 @@ const _hoisted_2 = {
 };
 import { ref, useSlots, computed, onMounted, watch } from 'vue';
 import { Button } from 'ant-design-vue';
+import { useLocaleReceiver } from "../LocaleReciver/index";
 const __sfc_main__ = _defineComponent({
     ...{
         name: 'JDragModal'
@@ -93,6 +96,7 @@ const __sfc_main__ = _defineComponent({
         const props = __props;
         const emits = __emit;
         const slots = useSlots();
+        const [contextLocale] = useLocaleReceiver('Search');
         const ele = document.body;
         const dialog = ref();
         const header = ref();
@@ -276,7 +280,7 @@ const __sfc_main__ = _defineComponent({
                                             onClick: _withModifiers(onCancel, ["stop"])
                                         }, {
                                             default: _withCtx(() => [
-                                                _createTextVNode("取消")
+                                                _createTextVNode(_toDisplayString(_unref(contextLocale).DragModal.cancel), 1 /* TEXT */)
                                             ]),
                                             _: 1 /* STABLE */
                                         }),
@@ -285,7 +289,7 @@ const __sfc_main__ = _defineComponent({
                                             onClick: _withModifiers(onOk, ["stop"])
                                         }, {
                                             default: _withCtx(() => [
-                                                _createTextVNode("确认")
+                                                _createTextVNode(_toDisplayString(_unref(contextLocale).DragModal.confirm), 1 /* TEXT */)
                                             ]),
                                             _: 1 /* STABLE */
                                         })

package/es/EditTable/FormItem.js

@@ -48,7 +48,7 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "onFieldChange": "setup-const"
 } */
 import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode, renderSlot as _renderSlot, normalizeClass as _normalizeClass, Fragment as _Fragment, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-const _withScopeId = n => (_pushScopeId("data-v-1734950759258"), n = n(), _popScopeId(), n);
+const _withScopeId = n => (_pushScopeId("data-v-1735798898669"), n = n(), _popScopeId(), n);
 const _hoisted_1 = { style: { "color": "#1d2129" } };
 const _hoisted_2 = {
     key: 0,

package/es/Empty/Empty.js

@@ -6,17 +6,22 @@
   "useSlots": "setup-const",
   "NoData": "setup-maybe-ref",
   "omit": "setup-maybe-ref",
+  "useLocaleReceiver": "setup-maybe-ref",
+  "LocaleProvider": "setup-const",
   "slots": "setup-maybe-ref",
   "renderArr": "setup-maybe-ref",
+  "contextLocale": "setup-maybe-ref",
   "props": "setup-reactive-const",
   "baseProps": "setup-maybe-ref"
 } */
 import { defineComponent as _defineComponent } from 'vue';
-import { unref as _unref, renderSlot as _renderSlot, normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, withCtx as _withCtx, renderList as _renderList, createSlots as _createSlots, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+import { unref as _unref, renderSlot as _renderSlot, normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, withCtx as _withCtx, renderList as _renderList, createSlots as _createSlots, createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from "vue";
 import { Empty } from 'ant-design-vue';
 import { useSlots } from 'vue';
 import NoData from './image';
 import { omit } from 'lodash-es';
+import { useLocaleReceiver } from "../LocaleReciver/index";
+import LocaleProvider from "../LocaleProvider/index.js";
 const __sfc_main__ = _defineComponent({
     ...{
         name: 'JEmpty'
@@ -24,7 +29,6 @@ const __sfc_main__ = _defineComponent({
     props: {
         description: {
             type: String,
-            default: '暂无数据',
         },
         image: {
             type: String,
@@ -40,19 +44,25 @@ const __sfc_main__ = _defineComponent({
     setup(__props) {
         const slots = useSlots();
         const renderArr = Object.keys(slots);
+        const [contextLocale] = useLocaleReceiver('Empty');
         const props = __props;
-        const baseProps = omit(props, ...renderArr);
+        const baseProps = omit({ ...props, description: props.description || contextLocale.value.description }, ...renderArr);
         return (_ctx, _cache) => {
-            return (_openBlock(), _createBlock(_unref(Empty), _normalizeProps(_guardReactiveProps(_unref(baseProps))), _createSlots({ _: 2 /* DYNAMIC */ }, [
-                _renderList(_unref(renderArr), (item) => {
-                    return {
-                        name: item,
-                        fn: _withCtx((scope) => [
-                            _renderSlot(_ctx.$slots, item, { scope: scope })
-                        ])
-                    };
-                })
-            ]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */));
+            return (_openBlock(), _createBlock(LocaleProvider, null, {
+                default: _withCtx(() => [
+                    _createVNode(_unref(Empty), _normalizeProps(_guardReactiveProps(_unref(baseProps))), _createSlots({ _: 2 /* DYNAMIC */ }, [
+                        _renderList(_unref(renderArr), (item) => {
+                            return {
+                                name: item,
+                                fn: _withCtx((scope) => [
+                                    _renderSlot(_ctx.$slots, item, { scope: scope })
+                                ])
+                            };
+                        })
+                    ]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */)
+                ]),
+                _: 3 /* FORWARDED */
+            }));
         };
     }
 });

package/es/FullPage/FullPage.js

@@ -9,7 +9,7 @@
 } */
 import { defineComponent as _defineComponent } from 'vue';
 import { unref as _unref, renderSlot as _renderSlot, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-const _withScopeId = n => (_pushScopeId("data-v-1734950761220"), n = n(), _popScopeId(), n);
+const _withScopeId = n => (_pushScopeId("data-v-1735798899369"), n = n(), _popScopeId(), n);
 const _hoisted_1 = { class: "full-page-warp-content" };
 import { ref, inject } from 'vue';
 import { useElementBounding } from '@vueuse/core';

package/es/LocaleProvider/index.js

@@ -0,0 +1,33 @@
+/* Analyzed bindings: {
+  "locale": "props",
+  "provide": "setup-const",
+  "reactive": "setup-const",
+  "defaultLocal": "setup-maybe-ref",
+  "props": "setup-reactive-const",
+  "state": "setup-reactive-const"
+} */
+import { defineComponent as _defineComponent } from 'vue';
+import { renderSlot as _renderSlot } from "vue";
+import { provide, reactive } from "vue";
+import defaultLocal from '../locale/zh-CN';
+const __sfc_main__ = _defineComponent({
+    props: {
+        locale: {
+            type: Object,
+        }
+    },
+    setup(__props) {
+        const props = __props;
+        const state = reactive({
+            antLocale: {
+                ...props.locale || defaultLocal || {},
+                exist: true,
+            },
+        });
+        provide('componentLocaleData', state);
+        return (_ctx, _cache) => {
+            return _renderSlot(_ctx.$slots, "default");
+        };
+    }
+});
+export default __sfc_main__;

package/es/LocaleReciver/index.js

@@ -0,0 +1,12 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { computed, inject, unref } from 'vue';
+export function useLocaleReceiver(componentName, defaultLocale, propsLocale) {
+  var localeData = inject('componentLocaleData', {});
+  var componentLocale = computed(function () {
+    var antLocale = localeData.antLocale;
+    var locale = unref(defaultLocale) || [componentName || 'global'];
+    var localeFromContext = componentName && antLocale ? antLocale[componentName] : {};
+    return _objectSpread(_objectSpread(_objectSpread({}, typeof locale === 'function' ? locale() : locale), localeFromContext || {}), unref(propsLocale) || {});
+  });
+  return [componentLocale];
+}

package/es/ProLayout/PageContainer/index.js

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment } from "vue";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { createTextVNode as _createTextVNode } from "vue";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import { createVNode as _createVNode, isVNode as _isVNode } from "vue";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
@@ -14,6 +14,7 @@ import { getSlotVNode } from '../util';
 import 'ant-design-vue/es/_util/type';
 import 'ant-design-vue/es/_util/vue-types';
 import { LayoutType } from "../defaultSettings";
+import { useLocaleReceiver } from "../../LocaleReciver";
 function _isSlot(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
 }
@@ -209,6 +210,9 @@ var ProPageHeader = function ProPageHeader(props) {
     showBack = props.showBack,
     restProps = _objectWithoutProperties(props, _excluded);
   var value = useRouteContext();
+  var _useLocaleReceiver = useLocaleReceiver('ProTable'),
+    _useLocaleReceiver2 = _slicedToArray(_useLocaleReceiver, 1),
+    contextLocale = _useLocaleReceiver2[0];
   if (pageHeaderRender === false) {
     return null;
   }
@@ -229,7 +233,7 @@ var ProPageHeader = function ProPageHeader(props) {
     // @ts-ignore
     backProps.backIcon = _createVNode(Button, null, {
       default: function _default() {
-        return [_createTextVNode("\u8FD4\u56DE")];
+        return [contextLocale.value.pageContainer.back];
       }
     });
     backProps.onBack = function () {

package/es/ProTable/Alert.js

@@ -19,17 +19,20 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "Button": "setup-maybe-ref",
   "computed": "setup-const",
   "_alertProps": "setup-maybe-ref",
+  "useLocaleReceiver": "setup-maybe-ref",
+  "contextLocale": "setup-maybe-ref",
   "props": "setup-reactive-const",
   "emits": "setup-const",
   "_message": "setup-ref",
   "onClose": "setup-const"
 } */
 import { defineComponent as _defineComponent } from 'vue';
-import { renderSlot as _renderSlot, createTextVNode as _createTextVNode, unref as _unref, withCtx as _withCtx, createVNode as _createVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+import { renderSlot as _renderSlot, unref as _unref, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withCtx as _withCtx, createVNode as _createVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
 const _hoisted_1 = { class: "jtable-alert" };
 import { Alert, Button } from 'ant-design-vue';
 import { computed } from "vue";
 import { _alertProps } from "./setting";
+import { useLocaleReceiver } from "../LocaleReciver/index";
 const __sfc_main__ = _defineComponent({
     ...{
         name: 'Alert'
@@ -37,10 +40,15 @@ const __sfc_main__ = _defineComponent({
     props: { ..._alertProps },
     emits: ['close'],
     setup(__props, { emit: __emit }) {
+        const [contextLocale] = useLocaleReceiver('ProTable');
         const props = __props;
         const emits = __emit;
         const _message = computed(() => {
-            return '已选择' + (_optionalChain([props, 'access', _2 => _2.rowSelection, 'optionalAccess', _3 => _3.selectedRowKeys, 'optionalAccess', _4 => _4.length]) || 0) + '项';
+            let locale = contextLocale.value.alert.selectItem;
+            [_optionalChain([props, 'access', _2 => _2.rowSelection, 'optionalAccess', _3 => _3.selectedRowKeys, 'optionalAccess', _4 => _4.length]) || 0].forEach((item, index) => {
+                locale = locale.replace(`{${index}}`, item);
+            });
+            return locale;
         });
         const onClose = () => {
             emits('close');
@@ -58,7 +66,7 @@ const __sfc_main__ = _defineComponent({
                                 onClick: onClose
                             }, {
                                 default: _withCtx(() => [
-                                    _createTextVNode("取消选择")
+                                    _createTextVNode(_toDisplayString(_unref(contextLocale).alert.cancelChoose), 1 /* TEXT */)
                                 ]),
                                 _: 1 /* STABLE */
                             })

package/es/ProTable/Pagination.js

@@ -2,8 +2,10 @@
   "Pagination": "setup-maybe-ref",
   "_paginationProps": "setup-maybe-ref",
   "computed": "setup-const",
+  "useLocaleReceiver": "setup-maybe-ref",
   "props": "setup-reactive-const",
   "emits": "setup-const",
+  "contextLocale": "setup-maybe-ref",
   "className": "setup-ref",
   "_showTotal": "setup-const",
   "onChange": "setup-const"
@@ -14,6 +16,7 @@ const _hoisted_1 = { class: "jtable-pagination" };
 import { Pagination } from 'ant-design-vue';
 import { _paginationProps } from "./setting";
 import { computed } from 'vue';
+import { useLocaleReceiver } from "../LocaleReciver/index";
 const __sfc_main__ = _defineComponent({
     ...{
         name: 'Pagination'
@@ -23,6 +26,7 @@ const __sfc_main__ = _defineComponent({
     setup(__props, { emit: __emit }) {
         const props = __props;
         const emits = __emit;
+        const [contextLocale] = useLocaleReceiver('ProTable');
         const className = computed(() => {
             return {
                 'show-content': !props.isShowContent,
@@ -31,7 +35,12 @@ const __sfc_main__ = _defineComponent({
         const _showTotal = (num) => {
             const minSize = props.pageIndex * props.pageSize + 1;
             const MaxSize = (props.pageIndex + 1) * props.pageSize;
-            return `第 ${minSize} - ${MaxSize > num ? num : MaxSize} 条/总共 ${num} 条`;
+            // return `第 ${minSize} - ${ MaxSize > num ? num : MaxSize } 条/总共 ${num} 条`
+            let locale = contextLocale.value.pagination.total;
+            [minSize, MaxSize > num ? num : MaxSize, num].forEach((item, index) => {
+                locale = locale.replace(`{${index}}`, item);
+            });
+            return locale;
         };
         const onChange = (page, size) => {
             emits('change', page, size);

package/es/ProTable/ProTable.js

@@ -149,14 +149,6 @@ const __sfc_main__ = _defineComponent({
             }
         };
         const _debounceFn = debounce(handleSearch, 300);
-        watch(() => props.params, (newValue) => {
-            _debounceFn(newValue || {});
-        }, { deep: true, immediate: true });
-        watch(() => props.dataSource, (newVal) => {
-            if (newVal && !props.request) {
-                handleSearch(props.params);
-            }
-        }, { deep: true, immediate: true });
         const onPageChange = (_page, size) => {
             handleSearch({
                 ...props.params,
@@ -218,6 +210,14 @@ const __sfc_main__ = _defineComponent({
                 }
             }
         };
+        watch(() => props.params, (newValue) => {
+            _debounceFn(newValue || {});
+        }, { deep: true, immediate: true });
+        watch(() => props.dataSource, (newVal) => {
+            if (newVal && !props.request) {
+                handleSearch(props.params);
+            }
+        }, { deep: true, immediate: true });
         onMounted(() => {
             windowChange(); // 初始化
             window.onresize = () => {

package/es/ProTable/setting.js

@@ -3,6 +3,7 @@ import { tableProps } from "ant-design-vue/es/table/Table";
 import "vue";
 import "ant-design-vue/es/table";
 import { paginationProps } from 'ant-design-vue/es/pagination/Pagination';
+import { omit } from 'lodash-es';
 export var _headerProps = {
   mode: {
     type: [String, undefined],
@@ -57,7 +58,7 @@ export var _contentProps = _objectSpread(_objectSpread(_objectSpread({}, tablePr
     default: 'id'
   }
 });
-export var _paginationProps = _objectSpread(_objectSpread({}, paginationProps()), {}, {
+export var _paginationProps = _objectSpread(_objectSpread({}, omit(paginationProps(), ['onChange'])), {}, {
   total: {
     type: Number,
     default: 0

package/es/RadioButton/RadioButton.js

@@ -10,7 +10,7 @@
   "onClick": "setup-const"
 } */
 import { unref as _unref, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-const _withScopeId = n => (_pushScopeId("data-v-1734950766709"), n = n(), _popScopeId(), n);
+const _withScopeId = n => (_pushScopeId("data-v-1735798900601"), n = n(), _popScopeId(), n);
 const _hoisted_1 = ["onClick"];
 const __sfc_main__ = Object.assign({
     name: 'JRadioButton',

package/es/Scrollbar/style/index.css

@@ -0,0 +1,61 @@
+.j-scrollbar {
+  overflow: hidden;
+  position: relative;
+  height: 100%;
+}
+.j-scrollbar__wrap {
+  overflow: auto;
+  height: 100%;
+}
+.j-scrollbar__wrap--hidden-default {
+  scrollbar-width: none;
+}
+.j-scrollbar__wrap--hidden-default::-webkit-scrollbar {
+  display: none;
+}
+.j-scrollbar__thumb {
+  position: relative;
+  display: block;
+  width: 0;
+  height: 0;
+  cursor: pointer;
+  border-radius: inherit;
+  background-color: #909399;
+  transition: 0.3s background-color;
+  opacity: 0.3;
+}
+.j-scrollbar__thumb:hover {
+  background-color: #909399;
+  opacity: 0.5;
+}
+.j-scrollbar__bar {
+  position: absolute;
+  right: 2px;
+  bottom: 2px;
+  z-index: 1;
+  border-radius: 4px;
+}
+.j-scrollbar__bar--vertical {
+  width: 6px;
+  top: 2px;
+}
+.j-scrollbar__bar--vertical > div {
+  width: 100%;
+}
+.j-scrollbar__bar--horizontal {
+  height: 6px;
+  left: 2px;
+}
+.j-scrollbar__bar--horizontal > div {
+  height: 100%;
+}
+.j-scrollbar-fade-enter-active {
+  transition: opacity 340ms ease-out;
+}
+.j-scrollbar-fade-leave-active {
+  transition: opacity 120ms ease-out;
+}
+.j-scrollbar-fade-enter-from,
+.j-scrollbar-fade-leave-active {
+  opacity: 0;
+}

package/es/Scrollbar/style/index.js

@@ -0,0 +1 @@
+import './index.less';

package/es/Scrollbar/style/index.less

@@ -0,0 +1,82 @@
+@scrollbar-bg-color: #909399;
+@scrollbar-hover-bg-color: #909399;
+@scrollbar-hover-opacity: 0.5;
+@scrollbar-opacity: 0.3;
+@transition-duration: 0.3s;
+
+.j-scrollbar {
+  overflow: hidden;
+  position: relative;
+  height: 100%;
+
+  &__wrap {
+    overflow: auto;
+    height: 100%;
+
+    &--hidden-default {
+      scrollbar-width: none;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+  }
+
+  &__thumb {
+    position: relative;
+    display: block;
+    width: 0;
+    height: 0;
+    cursor: pointer;
+    border-radius: inherit;
+    background-color: @scrollbar-bg-color;
+    transition: @transition-duration background-color;
+    opacity: @scrollbar-opacity;
+
+    &:hover {
+      background-color: @scrollbar-hover-bg-color;
+      opacity: @scrollbar-hover-opacity;
+    }
+  }
+
+  &__bar {
+    position: absolute;
+    right: 2px;
+    bottom: 2px;
+    z-index: 1;
+    border-radius: 4px;
+
+    &--vertical {
+      width: 6px;
+      top: 2px;
+
+      > div {
+        width: 100%;
+      }
+    }
+
+    &--horizontal {
+      height: 6px;
+      left: 2px;
+
+      > div {
+        height: 100%;
+      }
+    }
+  }
+}
+
+.j-scrollbar-fade {
+  &-enter-active {
+    transition: opacity 340ms ease-out;
+  }
+
+  &-leave-active {
+    transition: opacity 120ms ease-out;
+  }
+
+  &-enter-from,
+  &-leave-active {
+    opacity: 0;
+  }
+}