ele-admin-plus 1.0.2 → 1.1.0

package/es/ele-cropper/index.d.ts

@@ -2,7 +2,7 @@ import type { Ref } from 'vue';
 import type { CropperOptions } from './types';
 import type PreviewType from "./components/cropper-preview";
 export type PreviewInstance = InstanceType<typeof PreviewType> | null;
-declare const _sfc_main: import("vue").DefineComponent<{
+declare const _default: import("vue").DefineComponent<{
     height: StringConstructor;
     src: StringConstructor;
     imageType: {
@@ -32,7 +32,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    tooltipProps: import("vue").PropType<Partial<import("element-plus").ElTooltipProps>>;
+    tooltipProps: import("vue").PropType<import("../ele-avatar-group/types").EleTooltipProps>;
     responsive: {
         type: BooleanConstructor;
         default: null;
@@ -40,7 +40,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
     locale: import("vue").PropType<import("./types").CropperLocale>;
 }, {
     imageRef: Ref<HTMLImageElement | null>;
-    previewRef: Ref<any>;
+    previewRef: Ref<PreviewInstance>;
     isResponsive: import("vue").ComputedRef<boolean>;
     onZoomIn: () => void;
     onZoomOut: () => void;
@@ -90,7 +90,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    tooltipProps: import("vue").PropType<Partial<import("element-plus").ElTooltipProps>>;
+    tooltipProps: import("vue").PropType<import("../ele-avatar-group/types").EleTooltipProps>;
     responsive: {
         type: BooleanConstructor;
         default: null;
@@ -99,13 +99,13 @@ declare const _sfc_main: import("vue").DefineComponent<{
 }>> & {
     onDone?: ((_result?: string | Blob | null | undefined) => any) | undefined;
 }, {
-    preview: boolean;
-    responsive: boolean;
     tooltip: boolean;
-    imageType: string;
-    accept: string;
     tools: string;
+    responsive: boolean;
     previewWidth: number;
+    accept: string;
+    preview: boolean;
+    imageType: string;
     toBlob: boolean;
 }, {}>;
-export default _sfc_main;
+export default _default;

package/es/ele-cropper/props.d.ts

@@ -1,5 +1,5 @@
 import type { PropType, ExtractPropTypes } from 'vue';
-import type { ElTooltipProps } from 'element-plus';
+import type { EleTooltipProps } from '../ele-avatar-group/types';
 import type { CropperOptions, CroppedOptions, CropperLocale } from './types';
 /**
  * 属性
@@ -34,7 +34,7 @@ export declare const cropperProps: {
         type: BooleanConstructor;
         default: boolean;
     };
-    tooltipProps: PropType<Partial<ElTooltipProps>>;
+    tooltipProps: PropType<EleTooltipProps>;
     responsive: {
         type: BooleanConstructor;
         default: null;

package/es/ele-cropper/style/index.js

@@ -1,6 +1,6 @@
 import 'element-plus/es/components/button-group/style/index';
 import 'element-plus/es/components/button/style/index';
 import 'element-plus/es/components/upload/style/index';
-import 'element-plus/es/components/tooltip/style/index';
 import 'cropperjs/dist/cropper.min.css';
+import '../../ele-tooltip/style/index';
 import './index.scss';

package/es/ele-cropper/style/index.scss

@@ -1,4 +1,5 @@
 @use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
 
 .ele-cropper {
   .ele-cropper-main {
@@ -32,7 +33,7 @@
     margin-top: 16px;
     display: inline-block;
     box-sizing: border-box;
-    border: 1px solid elVar('border-color', 'lighter');
+    border: 1px solid elVar('border-color', 'light');
     vertical-align: top;
     overflow: hidden;
 

package/es/ele-cropper-modal/index.d.ts

@@ -1,5 +1,5 @@
 import type { CropperLocale } from '../ele-cropper/types';
-declare const _sfc_main: import("vue").DefineComponent<{
+declare const _default: import("vue").DefineComponent<{
     modelValue: BooleanConstructor;
     modalProps: import("vue").PropType<Partial<Omit<import("../ele-modal/props").ModalProps, "modelValue">>>;
     height: StringConstructor;
@@ -31,7 +31,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    tooltipProps: import("vue").PropType<Partial<import("element-plus").ElTooltipProps>>;
+    tooltipProps: import("vue").PropType<import("../ele-avatar-group/types").EleTooltipProps>;
     responsive: {
         type: BooleanConstructor;
         default: null;
@@ -76,24 +76,24 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    tooltipProps: import("vue").PropType<Partial<import("element-plus").ElTooltipProps>>;
+    tooltipProps: import("vue").PropType<import("../ele-avatar-group/types").EleTooltipProps>;
     responsive: {
         type: BooleanConstructor;
         default: null;
     };
     locale: import("vue").PropType<CropperLocale>;
 }>> & {
-    onDone?: ((_result: string | Blob | null) => any) | undefined;
     "onUpdate:modelValue"?: ((_value: boolean) => any) | undefined;
+    onDone?: ((_result: string | Blob | null) => any) | undefined;
 }, {
-    preview: boolean;
-    responsive: boolean;
-    tooltip: boolean;
     modelValue: boolean;
-    imageType: string;
-    accept: string;
+    tooltip: boolean;
     tools: string;
+    responsive: boolean;
     previewWidth: number;
+    accept: string;
+    preview: boolean;
+    imageType: string;
     toBlob: boolean;
 }, {}>;
-export default _sfc_main;
+export default _default;

package/es/ele-cropper-modal/props.d.ts

@@ -35,7 +35,7 @@ export declare const cropperModalProps: {
         type: BooleanConstructor;
         default: boolean;
     };
-    tooltipProps: PropType<Partial<import("element-plus").ElTooltipProps>>;
+    tooltipProps: PropType<import("../ele-avatar-group/types").EleTooltipProps>;
     responsive: {
         type: BooleanConstructor;
         default: null;

package/es/ele-dashboard/index.d.ts

@@ -1,16 +1,16 @@
-import type { CSSProperties } from 'vue';
-declare const _sfc_main: import("vue").DefineComponent<{
+import type { StyleValue } from '../ele-app/types';
+declare const _default: import("vue").DefineComponent<{
     type: import("vue").PropType<import("./types").DashboardType>;
     color: StringConstructor;
     size: (StringConstructor | NumberConstructor)[];
     space: (StringConstructor | NumberConstructor)[];
 }, {
     authenticated: import("vue").Ref<boolean>;
-    rootStyle: import("vue").ComputedRef<CSSProperties>;
+    rootStyle: import("vue").ComputedRef<StyleValue>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     type: import("vue").PropType<import("./types").DashboardType>;
     color: StringConstructor;
     size: (StringConstructor | NumberConstructor)[];
     space: (StringConstructor | NumberConstructor)[];
 }>>, {}, {}>;
-export default _sfc_main;
+export default _default;

package/es/ele-dashboard/style/index.scss

@@ -1,4 +1,5 @@
 @use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
 
 .ele-dashboard {
   --ele-dashboard-space: 18px;
@@ -27,7 +28,7 @@
   width: 100%;
   height: 100%;
   color: var(--ele-dashboard-color);
-  background: elVar('bg-color', 'overlay');
+  background: elVar('bg-color');
   border-radius: 50%;
   display: flex;
   align-items: center;

package/es/ele-dot/index.d.ts

@@ -1,4 +1,4 @@
-declare const _sfc_main: import("vue").DefineComponent<{
+declare const _default: import("vue").DefineComponent<{
     type: import("vue").PropType<import("./types").DotType>;
     color: StringConstructor;
     ripple: {
@@ -10,7 +10,9 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
-}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {
+    authenticated: import("vue").Ref<boolean>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     type: import("vue").PropType<import("./types").DotType>;
     color: StringConstructor;
     ripple: {
@@ -23,7 +25,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
         default: string;
     };
 }>>, {
-    ripple: boolean;
     size: string;
+    ripple: boolean;
 }, {}>;
-export default _sfc_main;
+export default _default;

package/es/ele-dot/index.js

@@ -1,8 +1,13 @@
-import { defineComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, toDisplayString, createCommentVNode } from "vue";
+import { defineComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, createCommentVNode, toDisplayString } from "vue";
+import { useLicense } from "../ele-config-provider/receiver";
 import { dotProps } from "./props";
 const _sfc_main = defineComponent({
   name: "EleDot",
-  props: dotProps
+  props: dotProps,
+  setup() {
+    const { authenticated } = useLicense();
+    return { authenticated };
+  }
 });
 const _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;
@@ -30,10 +35,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       class: "ele-dot-status",
       style: normalizeStyle({ width: _ctx.size, height: _ctx.size, background: _ctx.color })
     }, [
-      createElementVNode("span", {
+      _ctx.authenticated ? (openBlock(), createElementBlock("span", {
+        key: 0,
         class: "ele-dot-ripple",
         style: normalizeStyle({ width: _ctx.size, height: _ctx.size, background: _ctx.color })
-      }, null, 4)
+      }, null, 4)) : createCommentVNode("", true)
     ], 4),
     _ctx.text ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(_ctx.text), 1)) : createCommentVNode("", true)
   ], 2);

package/es/ele-dot/style/index.scss

@@ -1,4 +1,5 @@
 @use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
 
 .ele-dot {
   display: inline-flex;

package/es/ele-drawer/index.d.ts

@@ -1,9 +1,10 @@
 import type { ElDrawerInstance } from '../ele-app/types';
-declare const _sfc_main: import("vue").DefineComponent<{
-    headerStyle: import("vue").PropType<import("vue").CSSProperties>;
-    bodyStyle: import("vue").PropType<import("vue").CSSProperties>;
-    footerStyle: import("vue").PropType<import("vue").CSSProperties>;
-    closeBtnStyle: import("vue").PropType<import("vue").CSSProperties>;
+declare const _default: import("vue").DefineComponent<{
+    headerStyle: import("vue").PropType<import("../ele-app/types").StyleValue>;
+    titleStyle: import("vue").PropType<import("../ele-app/types").StyleValue>;
+    bodyStyle: import("vue").PropType<import("../ele-app/types").StyleValue>;
+    footerStyle: import("vue").PropType<import("../ele-app/types").StyleValue>;
+    closeBtnStyle: import("vue").PropType<import("../ele-app/types").StyleValue>;
     direction: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "ltr" | "rtl" | "ttb" | "btt", unknown, "rtl", boolean>;
     size: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "30%", boolean>;
     withHeader: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
@@ -73,10 +74,11 @@ declare const _sfc_main: import("vue").DefineComponent<{
     openAutoFocus: () => boolean;
     closeAutoFocus: () => boolean;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    headerStyle: import("vue").PropType<import("vue").CSSProperties>;
-    bodyStyle: import("vue").PropType<import("vue").CSSProperties>;
-    footerStyle: import("vue").PropType<import("vue").CSSProperties>;
-    closeBtnStyle: import("vue").PropType<import("vue").CSSProperties>;
+    headerStyle: import("vue").PropType<import("../ele-app/types").StyleValue>;
+    titleStyle: import("vue").PropType<import("../ele-app/types").StyleValue>;
+    bodyStyle: import("vue").PropType<import("../ele-app/types").StyleValue>;
+    footerStyle: import("vue").PropType<import("../ele-app/types").StyleValue>;
+    closeBtnStyle: import("vue").PropType<import("../ele-app/types").StyleValue>;
     direction: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "ltr" | "rtl" | "ttb" | "btt", unknown, "rtl", boolean>;
     size: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "30%", boolean>;
     withHeader: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
@@ -130,18 +132,18 @@ declare const _sfc_main: import("vue").DefineComponent<{
     showClose: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
     title: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
 }>> & {
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onClose?: (() => any) | undefined;
     onOpen?: (() => any) | undefined;
     onOpened?: (() => any) | undefined;
-    onClose?: (() => any) | undefined;
     onClosed?: (() => any) | undefined;
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onOpenAutoFocus?: (() => any) | undefined;
     onCloseAutoFocus?: (() => any) | undefined;
 }, {
-    direction: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "ltr" | "rtl" | "ttb" | "btt", unknown>;
     size: import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
-    withHeader: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
-    modalFade: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
+    center: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
+    modelValue: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
+    title: string;
     appendToBody: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     destroyOnClose: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     closeOnClickModal: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
@@ -150,14 +152,14 @@ declare const _sfc_main: import("vue").DefineComponent<{
     modal: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     openDelay: number;
     closeDelay: number;
-    modelValue: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     trapFocus: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
-    center: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     alignCenter: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     customClass: string;
     draggable: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     fullscreen: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     showClose: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
-    title: string;
+    direction: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "ltr" | "rtl" | "ttb" | "btt", unknown>;
+    withHeader: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
+    modalFade: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
 }, {}>;
-export default _sfc_main;
+export default _default;

package/es/ele-drawer/index.js

@@ -1,6 +1,7 @@
 import { defineComponent, ref, resolveComponent, openBlock, createBlock, createSlots, withCtx, createElementVNode, normalizeStyle, renderSlot, createTextVNode, toDisplayString, createElementBlock, createVNode, createCommentVNode } from "vue";
 import { Close } from "@element-plus/icons-vue";
 import { ElDrawer, ElIcon, drawerEmits } from "element-plus";
+import { useLicense } from "../ele-config-provider/receiver";
 import { drawerProps } from "./props";
 const _sfc_main = defineComponent({
   name: "EleDrawer",
@@ -8,6 +9,7 @@ const _sfc_main = defineComponent({
   props: drawerProps,
   emits: drawerEmits,
   setup(_props, { emit }) {
+    const { authenticated } = useLicense();
     const drawerRef = ref(null);
     const handleClose = () => {
       if (drawerRef.value && drawerRef.value.handleClose) {
@@ -15,7 +17,9 @@ const _sfc_main = defineComponent({
       }
     };
     const updateModelValue = (value) => {
-      emit("update:modelValue", value);
+      if (authenticated.value) {
+        emit("update:modelValue", value);
+      }
     };
     const onOpen = () => {
       emit("open");
@@ -47,11 +51,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _hoisted_1 = {
-  role: "heading",
-  class: "ele-drawer-title"
-};
-const _hoisted_2 = ["onClick"];
+const _hoisted_1 = ["onClick"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Close = resolveComponent("Close");
   const _component_ElIcon = resolveComponent("ElIcon");
@@ -87,11 +87,15 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         class: "ele-drawer-header",
         style: normalizeStyle(_ctx.headerStyle)
       }, [
-        createElementVNode("div", _hoisted_1, [
+        createElementVNode("div", {
+          role: "heading",
+          class: "ele-drawer-title",
+          style: normalizeStyle(_ctx.titleStyle)
+        }, [
           renderSlot(_ctx.$slots, "header", {}, () => [
             createTextVNode(toDisplayString(_ctx.title), 1)
           ])
-        ]),
+        ], 4),
         _ctx.showClose ? (openBlock(), createElementBlock("div", {
           key: 0,
           class: "ele-drawer-close",
@@ -106,7 +110,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               _: 1
             })
           ])
-        ], 12, _hoisted_2)) : createCommentVNode("", true)
+        ], 12, _hoisted_1)) : createCommentVNode("", true)
       ], 4)
     ]),
     default: withCtx(() => [

package/es/ele-drawer/props.d.ts

@@ -1,12 +1,14 @@
-import type { PropType, ExtractPropTypes, CSSProperties } from 'vue';
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { StyleValue } from '../ele-app/types';
 /**
  * 属性
  */
 export declare const drawerProps: {
-    headerStyle: PropType<CSSProperties>;
-    bodyStyle: PropType<CSSProperties>;
-    footerStyle: PropType<CSSProperties>;
-    closeBtnStyle: PropType<CSSProperties>;
+    headerStyle: PropType<StyleValue>;
+    titleStyle: PropType<StyleValue>;
+    bodyStyle: PropType<StyleValue>;
+    footerStyle: PropType<StyleValue>;
+    closeBtnStyle: PropType<StyleValue>;
     direction: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "ltr" | "rtl" | "ttb" | "btt", unknown, "rtl", boolean>;
     size: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "30%", boolean>;
     withHeader: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;

package/es/ele-drawer/props.js

@@ -3,6 +3,8 @@ const drawerProps = {
   ...drawerProps$1,
   // 自定义标题样式
   headerStyle: Object,
+  // 标题样式
+  titleStyle: Object,
   // 自定义主体样式
   bodyStyle: Object,
   // 自定义底部样式

package/es/ele-drawer/style/css-var.scss

@@ -1,12 +1,7 @@
-@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
 
 @mixin set-drawer-var($var) {
-  .ele-drawer-header {
-    @include set-ele-var('drawer-header', $var);
-    @include set-ele-var('drawer-icon', $var);
-  }
-
-  .ele-drawer-footer {
-    @include set-ele-var('drawer-footer', $var);
+  .ele-drawer {
+    @include set-ele-var('drawer', $var);
   }
 }

package/es/ele-drawer/style/index.scss

@@ -1,61 +1,80 @@
 @use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
 @use './css-var.scss' as *;
 
 @include set-drawer-var($ele);
 
 /* 抽屉 */
 .ele-drawer {
-  .el-drawer__header {
+  &.el-drawer {
+    background: eleVar('drawer', 'bg');
+  }
+
+  & > .el-drawer__header {
     margin: 0;
     padding: 0;
     color: inherit;
     display: block;
     flex-shrink: 0;
+    border: none;
+  }
+
+  & > .el-drawer__body {
+    padding: 0;
+  }
+
+  & > .el-drawer__footer {
+    padding: 0;
+    flex-shrink: 0;
+    border: none;
   }
 
   .ele-drawer-header {
     display: flex;
     align-items: center;
-    padding: eleVar('drawer-header', 'padding');
-    border-bottom: eleVar('drawer-header', 'border');
+    padding: eleVar('drawer', 'header-padding');
+    border-bottom: eleVar('drawer', 'header-border');
+    box-sizing: border-box;
   }
 
   .ele-drawer-title {
     flex: 1;
-    color: eleVar('drawer-header', 'color');
-    font-size: eleVar('drawer-header', 'font-size');
-    line-height: eleVar('drawer-header', 'line-height');
+    color: eleVar('drawer', 'header-color');
+    font-size: eleVar('drawer', 'header-font-size');
+    line-height: eleVar('drawer', 'header-line-height');
+    font-weight: eleVar('drawer', 'header-font-weight');
+    box-sizing: border-box;
   }
 
   .ele-drawer-close {
+    flex-shrink: 0;
     display: flex;
-    color: eleVar('drawer-icon', 'color');
-    font-size: eleVar('drawer-icon', 'font-size');
-    transition: color 0.3s, background-color 0.3s;
+    align-items: center;
+    justify-content: center;
+    width: eleVar('drawer', 'icon-size');
+    height: eleVar('drawer', 'icon-size');
+    line-height: eleVar('drawer', 'icon-size');
+    color: eleVar('drawer', 'icon-color');
+    font-size: eleVar('drawer', 'icon-font-size');
+    border-radius: eleVar('drawer', 'icon-radius');
+    transition: color $ele-transition, background-color $ele-transition;
+    box-sizing: border-box;
     cursor: pointer;
 
     &:hover {
-      color: eleVar('drawer-icon', 'hover-color');
+      color: eleVar('drawer', 'icon-hover-color');
+      background: eleVar('drawer', 'icon-hover-bg');
     }
   }
 
-  .el-drawer__body {
-    padding: 0;
-  }
-
   .ele-drawer-body {
-    padding: elVar('drawer', 'padding-primary');
+    padding: eleVar('drawer', 'body-padding');
     box-sizing: border-box;
   }
 
-  .el-drawer__footer {
-    padding: 0;
-    flex-shrink: 0;
-  }
-
   .ele-drawer-footer {
+    padding: eleVar('drawer', 'footer-padding');
+    border-top: eleVar('drawer', 'footer-border');
     box-sizing: border-box;
-    padding: eleVar('drawer-footer', 'padding');
-    border-top: eleVar('drawer-footer', 'border');
   }
 }