ele-admin-plus 1.0.2 → 1.1.0

package/lib/style/themes/default.scss

@@ -1,51 +1,6 @@
 /** 默认主题 */
-@use 'element-plus/theme-chalk/src/mixins/function.scss' as *;
 @use 'sass:map';
-
-// 生成 css 变量名
-@function eleJoinVar($list) {
-  $name: '--ele';
-  @each $item in $list {
-    @if $item != '' {
-      $name: $name + '-' + $item;
-    }
-  }
-  @return $name;
-}
-
-// 获取 css 变量值
-@function eleVar($arg1, $arg2: '', $arg3: '') {
-  $args: $arg1, $arg2;
-  @if $arg3 != '' {
-    @return var(#{eleJoinVar($args)}, $arg3);
-  } @else {
-    @return var(#{eleJoinVar($args)});
-  }
-}
-
-// 获取 css 变量名
-@function eleVarName($args...) {
-  @return eleJoinVar($args);
-}
-
-// 生成组件 css 变量
-@mixin set-ele-var($name, $variables) {
-  @if map.has-key($variables, $name) {
-    @each $attribute, $value in map.get($variables, $name) {
-      #{eleVarName($name, $attribute)}: #{$value};
-    }
-  }
-}
-
-// 获取 element 的 css 变量值
-@function elVar($args...) {
-  @return getCssVar($args...);
-}
-
-// 获取 element 的 css 变量名
-@function elVarName($args...) {
-  @return getCssVarName($args...);
-}
+@use '../util.scss' as *;
 
 // 过渡动画
 $ele-transition: 0.2s !default;
@@ -56,14 +11,12 @@ $ele: map.deep-merge(
   (
     'scrollbar': (
       // 滚动条
-      'size': 12px,
+      'size': 10px,
       'radius': 6px,
       'padding': 2px,
       'color': #cfcfcf,
       'hover-color': #b6b6b6,
-      'bg': transparent,
-      'mini-size': 8px,
-      'mini-radius': 4px
+      'bg': transparent
     ),
     'layout': (
       // 布局
@@ -77,13 +30,23 @@ $ele: map.deep-merge(
       'height': 54px,
       'bg': elVar('bg-color'),
       'shadow': 0 1px 4px rgba(0, 21, 41, 0.08),
-      'line-color': elVar('border-color', 'extra-light')
+      'line-color': elVar('border-color', 'extra-light'),
+      'menu-height': 54px,
+      'tool-height': 100%,
+      'tool-radius': 0,
+      'tool-hover-bg': rgba(0, 0, 0, 0.025),
+      'dark-tool-hover-bg': rgba(255, 255, 255, 0.05)
     ),
     'header-dark': (
       // 暗色顶栏
       'bg': #001529,
       'shadow': 0 1px 4px rgba(0, 0, 0, 0.1)
     ),
+    'header-primary': (
+      // 主色顶栏
+      'hover-bg': transparent,
+      'active-bg': transparent
+    ),
     'logo': (
       // Logo
       'color': elVar('text-color', 'primary'),
@@ -101,52 +64,79 @@ $ele: map.deep-merge(
       'shadow': 1px 3px 3px rgba(0, 21, 41, 0.08),
       'dark-shadow': 0 4px 4px rgba(0, 0, 0, 0.35),
       'transition': (width $ele-transition, left $ele-transition),
-      'tool-hover-bg': rgba(0, 0, 0, 0.025),
-      'dark-tool-hover-bg': rgba(255, 255, 255, 0.05)
+      'tool-height': 40px
     ),
     'sidebox': (
       // 双侧栏一级
       'width': 80px,
-      'padding': 0 8px,
-      'collapse-padding': 0 4px,
+      'padding': 8px,
+      'collapse-padding': 4px,
       'font-size': 12px,
       'icon-font-size': 18px,
       'title-margin': 6px,
       'item-padding': 12px 0,
       'collapse-item-padding': 12px 0,
-      'item-margin': 8px,
-      'collapse-item-margin': 8px,
-      'item-radius': 2px,
-      'popup-margin': 8px
+      'item-radius': elVar('border-radius', 'base')
+    ),
+    'menu-thumb': (
+      // 菜单滚动条
+      'size': 8px,
+      'radius': 4px,
+      'padding': 2px,
+      'color': #cfcfcf,
+      'hover-color': #b6b6b6
+    ),
+    'menu-dark-thumb': (
+      // 菜单暗色主题滚动条
+      'color': #4d5b69,
+      'hover-color': #66737f
     ),
     'alert': (
       // 警告提示
       'color': elVar('text-color', 'regular'),
       'size': elVar('font-size', 'small'),
+      'padding': 6px 12px,
+      'radius': elVar('border-radius', 'base'),
       'title-color': elVar('text-color', 'primary'),
       'title-size': elVar('font-size', 'base'),
       'title-line-height': 24px,
       'icon-size': elVar('font-size', 'medium'),
-      'rich-icon-size': 26px,
-      'close-size': elVar('font-size', 'base'),
+      'icon-margin': 0 8px 0 0,
+      'close-size': 18px,
+      'close-margin': 0 -4px 0 4px,
+      'close-radius': elVar('border-radius', 'small'),
+      'close-font-size': elVar('font-size', 'base'),
       'close-color': elVar('text-color', 'placeholder'),
       'close-hover-color': elVar('text-color', 'primary'),
-      'padding': 6px 12px,
+      'close-hover-bg': transparent,
       'rich-padding': 12px 14px,
-      'radius': elVar('border-radius', 'base')
+      'rich-icon-size': 26px
     ),
     'alert-dark': (
       // 警告提示 dark 主题
-      'color': rgba(255, 255, 255, 0.8),
+      'color': rgba(255, 255, 255, 0.88),
       'title-color': #fff,
-      'close-color': rgba(255, 255, 255, 0.5),
-      'close-hover-color': rgba(255, 255, 255, 0.8)
+      'close-color': rgba(255, 255, 255, 0.88),
+      'close-hover-color': #fff,
+      'close-hover-bg': transparent
     ),
-    'message-plain': (
-      // 消息提示简约风格
+    'message': (
+      // 消息提示
       'color': elVar('text-color', 'regular'),
+      'size': elVar('font-size', 'base'),
+      'padding': 12px 14px,
+      'radius': elVar('border-radius', 'base'),
       'shadow': elVar('box-shadow', 'light'),
-      'bg': elVar('bg-color')
+      'icon-size': elVar('font-size', 'large'),
+      'icon-margin': 0 8px 0 0,
+      'close-size': 18px,
+      'close-margin': 0 -4px 0 8px,
+      'close-radius': elVar('border-radius', 'small'),
+      'close-font-size': elVar('font-size', 'base'),
+      'close-color': elVar('text-color', 'placeholder'),
+      'close-hover-color': elVar('text-color', 'primary'),
+      'close-hover-bg': transparent,
+      'plain-bg': elVar('bg-color', 'overlay')
     ),
     'message-mask': (
       // 消息提示遮罩层
@@ -157,155 +147,292 @@ $ele: map.deep-merge(
       // 底部工具栏
       'padding': 8px 16px,
       'bg': elVar('bg-color', 'overlay'),
-      'shadow': 0 -1px 2px rgba(0, 0, 0, 0.03)
+      'shadow': 0 -1px 5px rgba(0, 0, 0, 0.08)
     ),
-    'card-header': (
+    'card': (
       // 卡片标题
-      'padding': 14px 24px,
-      'font-size': elVar('font-size', 'medium'),
-      'line-height': calc(#{eleVar('card-header', 'font-size')} + 8px)
-    ),
-    'drawer-header': (
-      // 抽屉标题
-      'color': elVar('text-color', 'regular'),
-      'padding': 14px 16px,
-      'border': 1px solid elVar('border-color', 'lighter'),
-      'font-size': elVar('font-size', 'medium'),
-      'line-height': calc(#{eleVar('drawer-header', 'font-size')} + 8px)
-    ),
-    'drawer-icon': (
-      // 抽屉图标按钮
-      'color': elVar('text-color', 'secondary'),
-      'hover-color': elVar('text-color', 'primary'),
-      'font-size': elVar('font-size', 'large')
-    ),
-    'drawer-footer': (
-      // 抽屉底部
-      'padding': 14px 16px,
-      'border': 1px solid elVar('border-color', 'lighter')
-    ),
-    'file-list': (
+      'bg': elVar('bg-color'),
+      'radius': elVar('border-radius', 'base'),
+      'shadow': elVar('box-shadow', 'lighter'),
+      'hover-shadow': (
+        0 1px 2px -2px rgba(0, 0, 0, 0.16),
+        0 3px 6px 0 rgba(0, 0, 0, 0.12),
+        0 5px 12px 4px rgba(0, 0, 0, 0.09)
+      ),
+      'header-padding': 14px 24px,
+      'header-color': elVar('text-color', 'primary'),
+      'header-font-size': elVar('font-size', 'medium'),
+      'header-line-height': 24px,
+      'header-font-weight': normal,
+      'header-border': 1px solid elVar('border-color', 'light')
+    ),
+    'check-card': (
+      // 可选卡片
+      'radius': elVar('border-radius', 'base'),
+      'border-color': elVar('border-color', 'light'),
+      'hover-border-color': elVar('color-primary'),
+      'hover-bg': transparent,
+      'active-border-color': elVar('color-primary'),
+      'active-bg': elVar('color-primary', 'light-9'),
+      'disabled-border-color': elVar('disabled', 'border-color'),
+      'disabled-bg': elVar('disabled', 'bg-color'),
+      'disabled-opacity': 0.75,
+      'arrow-color': elVar('color-primary'),
+      'arrow-size': 6px,
+      'arrow-radius': elVar('border-radius', 'small'),
+      'arrow-disabled-color': elVar('disabled', 'text-color')
+    ),
+    'drawer': (
+      // 抽屉
+      'bg': elVar('bg-color', 'overlay'),
+      'header-color': elVar('text-color', 'primary'),
+      'header-font-size': elVar('font-size', 'medium'),
+      'header-font-weight': normal,
+      'header-line-height': 24px,
+      'header-padding': 14px 16px,
+      'header-border': 1px solid elVar('border-color', 'light'),
+      'icon-size': 22px,
+      'icon-font-size': 18px,
+      'icon-color': elVar('text-color', 'secondary'),
+      'icon-hover-color': elVar('text-color', 'primary'),
+      'icon-hover-bg': transparent,
+      'icon-radius': elVar('border-radius', 'small'),
+      'body-padding': 20px,
+      'footer-padding': 10px 16px,
+      'footer-border': 1px solid elVar('border-color', 'light')
+    ),
+    'dropdown': (
+      // 下拉菜单
+      'padding': 6px 0,
+      'item-height': 32px,
+      'item-margin': 0,
+      'item-padding': 0 16px,
+      'item-radius': 0,
+      'item-font-size': elVar('font-size', 'base'),
+      'item-color': elVar('text-color', 'regular'),
+      'item-hover-color': elVar('text-color', 'primary'),
+      'item-hover-bg': elVar('fill-color', 'light'),
+      'item-active-color': elVar('color-primary'),
+      'item-active-bg': elVar('color-primary', 'light-9'),
+      'item-active-font-weight': bold,
+      'item-danger-color': elVar('color-danger'),
+      'item-danger-bg': elVar('color-danger', 'light-9'),
+      'icon-size': 16px,
+      'icon-margin': 0 8px 0 -2px,
+      'sm-padding': 3px 0,
+      'sm-item-height': 24px,
+      'sm-item-padding': 0 12px,
+      'sm-item-font-size': elVar('font-size', 'extra-small'),
+      'lg-padding': 8px 0,
+      'lg-item-height': 36px,
+      'lg-item-padding': 0 20px,
+      'lg-item-font-size': elVar('font-size', 'base')
+    ),
+    'file': (
       // 文件列表
       'selector-index': 999,
-      'selector-border': 1px solid #0078d7,
+      'selector-border': 1px solid #1677ff,
       'selector-bg': rgba(0, 120, 215, 0.2),
+      'header-height': 38px,
+      'header-padding': 16px,
       'item-width': 110px,
       'item-space': 14px,
-      'item-radius': 6px,
+      'item-radius': elVar('border-radius', 'base'),
+      'item-padding': 6px 4px,
       'item-border': 1px solid transparent,
       'item-active-border-color': elVar('color-primary', 'light-8'),
       'item-active-bg': elVar('color-primary', 'light-9'),
-      'table-sort-color': hsla(0, 0%, 60%, 0.6),
-      'table-sort-active-color': elVar('color-primary')
+      'icon-height': 84px,
+      'icon-size': 56px,
+      'image-size': 84px,
+      'image-radius': elVar('border-radius', 'base'),
+      'title-margin': 4px,
+      'td-height': 44px,
+      'td-padding': 0 10px,
+      'td-icon-szie': 24px,
+      'td-icon-margin': 10px,
+      'td-image-radius': elVar('border-radius', 'small'),
+      'sort-color': hsla(0, 0%, 60%, 0.6),
+      'sort-active-color': elVar('color-primary')
+    ),
+    'icon': (
+      // 图标选择器
+      'header-padding': 0 12px,
+      'search-width': 120px,
+      'search-padding': 8px 0,
+      'tab-height': 42px,
+      'tab-space': 16px,
+      'tab-padding': 0 2px,
+      'tab-radius': 0,
+      'tab-font-size': elVar('font-size', 'base'),
+      'tab-color': elVar('text-color', 'regular'),
+      'tab-hover-color': elVar('color-primary'),
+      'tab-hover-bg': transparent,
+      'tab-active-color': elVar('color-primary'),
+      'tab-active-bg': transparent,
+      'tab-active-font-weight': normal,
+      'tab-active-line': 2px,
+      'menus-width': 120px,
+      'menus-padding': 12px 0,
+      'menu-height': 34px,
+      'menu-space': 2px,
+      'menu-padding': 0 12px,
+      'menu-radius': 0,
+      'menu-font-size': elVar('font-size', 'base'),
+      'menu-color': elVar('text-color', 'regular'),
+      'menu-hover-color': elVar('color-primary'),
+      'menu-hover-bg': transparent,
+      'menu-active-color': elVar('color-primary'),
+      'menu-active-bg': elVar('color-primary', 'light-9'),
+      'menu-active-font-weight': normal,
+      'menu-active-line': 2.5px,
+      'body-padding': 12px,
+      'radius': elVar('border-radius', 'base'),
+      'border': 1px solid elVar('border-color', 'light'),
+      'font-size': 20px,
+      'color': elVar('text-color', 'regular'),
+      'hover-color': elVar('color-primary'),
+      'hover-bg': elVar('color-primary', 'light-9'),
+      'hover-border': 1px solid elVar('color-primary', 'light-8'),
+      'active-color': elVar('color-primary'),
+      'active-bg': elVar('color-primary', 'light-9'),
+      'active-border': 2px solid elVar('color-primary')
+    ),
+    'map': (
+      // 地图位置选择
+      'header-padding': 8px 14px
     ),
     'menu': (
-      // 垂直菜单
-      'icon-size': 16px,
-      'collapse-icon-size': 18px,
-      'icon-margin': 8px,
+      // 菜单
+      'disabled-opacity': 0.46,
+      'badge-margin': 0 -2px 0 6px,
+      'icon-font-size': 16px,
+      'icon-margin': 0 8px 0 0,
       'arrow-size': 17px,
+      'arrow-margin': 0 -4px 0 6px,
+      'bg': elVar('bg-color'),
+      'border-color': elVar('border-color', 'light'),
+      'padding': 2px 0,
+      'base-level': 16px,
       'child-bg': rgba(0, 0, 0, 0.02),
-      'collapse-width': 58px
-    ),
-    'menu-item': (
-      // 菜单项
-      'height': 40px,
-      'line-height': eleVar('menu-item', 'height'),
-      'margin': 8px,
-      'active-bg': elVar('color-primary', 'light-9'),
-      'active-line': 3px
+      'collapse-width': 58px,
+      'collapse-icon-size': 18px,
+      'item-height': 40px,
+      'item-margin': 8px,
+      'item-padding': 0,
+      'item-radius': 0,
+      'item-color': elVar('text-color', 'primary'),
+      'item-hover-color': elVar('color', 'primary'),
+      'item-hover-bg': transparent,
+      'item-active-color': elVar('color-primary'),
+      'item-active-bg': elVar('color-primary', 'light-9'),
+      'item-active-line': 3px
     ),
     'menu-popup': (
       // 气泡菜单
       'min-width': 160px,
-      'item-padding': 16px,
+      'max-width': 320px,
+      'max-height': calc(100vh - 10px),
+      'bg': elVar('bg-color', 'overlay'),
+      'radius': elVar('border-radius', 'base'),
       'shadow': elVar('box-shadow', 'light'),
+      'item-padding': 16px,
+      'item-radius': eleVar('menu', 'item-radius'),
+      'dark-bg': elVar('menu', 'bg-color'),
       'dark-shadow': elVar('box-shadow', 'dark')
     ),
     'menu-horizontal': (
       // 水平菜单
+      'padding': 0,
+      'height': 56px,
       'item-padding': 16px,
-      'item-margin': 0
+      'item-margin': 0,
+      'item-radius': 0,
+      'hover-bg': transparent,
+      'active-bg': transparent,
+      'arrow-margin': 0 -2px 0 6px,
+      'line-margin': 14px,
+      'line-size': 2px,
+      'dark-hover-bg': transparent,
+      'dark-active-bg': transparent,
+      'popup-margin': 0px
     ),
     'menu-group': (
       // 分组菜单
-      'color': elVar('text-color', 'placeholder'),
-      'size': 12px,
-      'weight': bold,
-      'icon-size': 12px,
-      'padding-top': 6px,
+      'color': elVar('text-color', 'secondary'),
+      'font-size': 13px,
+      'font-weight': normal,
+      'icon-font-size': 12px,
+      'padding-top': 4px,
       'padding-bottom': 2px,
       'padding-right': elVar('menu', 'base-level-padding'),
       'dark-color': rgba(255, 255, 255, 0.6)
     ),
     'menu-dark': (
-      // 菜单暗色主题
+      // 暗色菜单
       'bg': #001529,
       'child-bg': #000c17,
       'color': rgba(255, 255, 255, 0.8),
+      'hover-color': #fff,
+      'hover-bg': transparent,
       'active-color': #fff,
       'active-bg': elVar('color-primary')
     ),
     'menu-colorful': (
       // 菜单彩色图标
-      'icon-width': 24px,
-      'icon-size': 16px,
+      'icon-radius': 50%,
+      'icon-size': 24px,
       'icon-color': #fff,
+      'icon-font-size': 16px,
       'dot-size': 8px,
       'dot-margin': 0 8px 0 0,
       'dot-color': #d9d9d9,
       'dot-hover-color': elVar('color-primary'),
-      'dark-dot-color': rgba(255, 255, 255, 0.65),
+      'dark-dot-color': rgba(255, 255, 255, 0.4),
       'dark-dot-hover-color': #fff,
-      'color-1': #61b2fc,
-      'color-2': #7dd733,
-      'color-3': #32a2d4,
-      'color-4': #7383cf,
-      'color-5': #f5686f,
-      'color-6': #2bccce,
-      'color-7': #7dd733,
-      'color-8': #faad14
-    ),
-    'menu-scrollbar': (
-      // 菜单滚动条
-      'size': 8px,
-      'radius': 4px,
-      'padding': 2px,
-      'color': #cfcfcf,
-      'hover-color': #b6b6b6,
-      'bg': transparent
-    ),
-    'menu-dark-scrollbar': (
-      // 菜单暗色主题滚动条
-      'color': #4d5b69,
-      'hover-color': #66737f,
-      'bg': transparent
+      'bg-1': #61b2fc,
+      'bg-2': #7dd733,
+      'bg-3': #32a2d4,
+      'bg-4': #7383cf,
+      'bg-5': #f5686f,
+      'bg-6': #2bccce,
+      'bg-7': #7dd733,
+      'bg-8': #faad14
     ),
     'modal': (
       // 弹窗
+      'bg': elVar('bg-color', 'overlay'),
+      'radius': elVar('border-radius', 'base'),
+      'header-color': elVar('text-color', 'primary'),
+      'header-font-size': elVar('font-size', 'medium'),
+      'header-font-weight': normal,
+      'header-line-height': 24px,
       'header-padding': 14px 20px,
-      'header-border': 1px solid elVar('border-color', 'lighter'),
-      'footer-padding': 10px 20px,
-      'footer-border': 1px solid elVar('border-color', 'lighter'),
-      'body-padding': 24px 20px,
-      'form-body-padding': 24px 20px 12px 20px,
+      'header-border': 1px solid elVar('border-color', 'light'),
+      'icon-size': 22px,
+      'icon-font-size': 18px,
       'icon-color': elVar('text-color', 'secondary'),
-      'icon-hover-color': elVar('text-color', 'regular'),
-      'icon-font-size': 16px,
-      'icon-space': 16px,
+      'icon-hover-color': elVar('text-color', 'primary'),
+      'icon-hover-bg': transparent,
+      'icon-radius': elVar('border-radius', 'small'),
+      'icon-space': 8px,
+      'body-padding': 24px 22px,
+      'form-body-padding': 24px 22px 12px 20px,
+      'footer-padding': 10px 20px,
+      'footer-border': 1px solid elVar('border-color', 'light'),
       'resize-bg':
         linear-gradient(
           135deg,
           transparent 45%,
-          hsla(0, 0%, 60%, 0.8) 0,
-          hsla(0, 0%, 60%, 0.8) 55%,
+          hsla(0, 0%, 60%, 0.88) 0,
+          hsla(0, 0%, 60%, 0.88) 55%,
           transparent 0,
           transparent 75%,
-          hsla(0, 0%, 60%, 0.8) 0,
-          hsla(0, 0%, 60%, 0.8) 85%,
+          hsla(0, 0%, 60%, 0.88) 0,
+          hsla(0, 0%, 60%, 0.88) 85%,
           transparent 0
         ),
-      'fullscreen-border': 1px solid elVar('border-color', 'lighter'),
+      'fullscreen-border': 1px solid elVar('border-color', 'light'),
       'mobile-space': 16px,
       'index': elVar('index', 'popper')
     ),
@@ -314,11 +441,42 @@ $ele: map.deep-merge(
       'padding': 16px,
       'max-width': 1120px
     ),
+    'pagination': (
+      // 分页
+      'height': 32px,
+      'padding': 0 6px,
+      'radius': 32px,
+      'space': 6px,
+      'gap': 8px 12px,
+      'color': elVar('text-color', 'regular'),
+      'font-size': 14px,
+      'bg': none,
+      'border': none,
+      'hover-color': elVar('text-color', 'primary'),
+      'hover-bg': elVar('fill-color', 'light'),
+      'hover-border': none,
+      'active-color': #fff,
+      'active-bg': elVar('color', 'primary'),
+      'active-border': none,
+      'active-font-weight': normal,
+      'disabled-color': elVar('text-color', 'placeholder'),
+      'disabled-bg': none,
+      'disabled-border': none,
+      'disabled-active-color': elVar('text-color', 'secondary'),
+      'disabled-active-bg': elVar('fill-color'),
+      'disabled-active-border': none,
+      'sm-height': 24px,
+      'sm-padding': 0 4px,
+      'sm-radius': 24px,
+      'sm-space': 4px,
+      'sm-gap': 8px,
+      'sm-font-size': 14px
+    ),
     'segmented': (
       // 分段器
       'padding': 3px,
       'bg': elVar('fill-color', 'light'),
-      'radius': elVar('border-radius', 'base'),
+      'radius': 2px,
       'height': 28px,
       'font-size': 14px,
       'item-padding': 12px,
@@ -332,7 +490,7 @@ $ele: map.deep-merge(
     'segmented-large': (
       // 分段器大号
       'padding': 4px,
-      'radius': 6px,
+      'radius': 4px,
       'height': 36px,
       'font-size': 16px,
       'item-padding': 16px
@@ -340,73 +498,165 @@ $ele: map.deep-merge(
     'segmented-small': (
       // 分段器小号
       'padding': 2px,
-      'radius': elVar('border-radius', 'small'),
+      'radius': 2px,
       'height': 20px,
       'font-size': 13px,
       'item-padding': 7px
     ),
-    'tool-column': (
-      // 表格列配置
-      'width': 220px,
-      'max-height': 480px,
+    'step': (
+      // 步骤条
+      'bg': elVar('bg-color'),
+      'line-size': 1px,
       'line-color': elVar('border-color', 'light'),
-      'header-padding': 6px 16px 4px 16px,
-      'body-padding': 6px 0,
-      'item-padding': 16px,
-      'item-height': 28px
+      'line-space': 8px,
+      'icon-size': 32px,
+      'icon-color': elVar('text-color', 'secondary'),
+      'icon-font-size': elVar('font-size', 'base'),
+      'icon-font-weight': normal,
+      'icon-bg': elVar('bg-color'),
+      'icon-border': 1px solid elVar('border-color'),
+      'color': elVar('text-color', 'placeholder'),
+      'font-size': elVar('font-size', 'medium'),
+      'font-weight': normal,
+      'line-height': 32px,
+      'margin': 8px,
+      'text-color': elVar('text-color', 'placeholder'),
+      'text-font-size': elVar('font-size', 'base'),
+      'text-line-height': 22px,
+      'text-margin': 2px,
+      'active-icon-color': #fff,
+      'active-icon-bg': elVar('color-primary'),
+      'active-icon-border': 1px solid elVar('color-primary'),
+      'active-color': elVar('text-color', 'primary'),
+      'active-text-color': elVar('text-color', 'regular'),
+      'finish-icon-color': elVar('color-primary'),
+      'finish-icon-font-size': elVar('font-size', 'large'),
+      'finish-icon-bg': elVar('bg-color'),
+      'finish-icon-border': 1px solid elVar('color-primary'),
+      'finish-color': elVar('text-color', 'regular'),
+      'finish-text-color': elVar('text-color', 'secondary'),
+      'finish-line-color': elVar('color-primary'),
+      'vertical-margin': 16px
     ),
     'tab': (
       // 标签页
+      'bg': elVar('bg-color'),
+      'header-bg': elVar('fill-color', 'lighter'),
       'line-color': elVar('border-color', 'light'),
       'height': 40px,
-      'padding': 16px
-    ),
-    'tab-small': (
+      'padding': 16px,
+      'color': elVar('text-color', 'regular'),
+      'font-size': elVar('font-size', 'base'),
+      'hover-color': elVar('color-primary'),
+      'active-color': elVar('color-primary'),
+      'close-size': elVar('font-size', 'base'),
+      'close-color': elVar('text-color', 'secondary'),
+      'close-font-size': elVar('font-size', 'base'),
+      'close-radius': 50%,
+      'close-hover-color': #fff,
+      'close-hover-bg': elVar('color-error'),
+      'tool-color': elVar('text-color', 'secondary'),
+      'tool-font-size': elVar('font-size', 'base'),
+      'tool-hover-color': elVar('text-color', 'primary'),
+      'hover-index': 2,
+      'active-index': 3
+    ),
+    'tab-sm': (
       // 标签页小型尺寸
       'height': 32px,
-      'padding': 12px
+      'padding': 12px,
+      'font-size': elVar('font-size', 'small'),
+      'close-size': elVar('font-size', 'small'),
+      'close-font-size': elVar('font-size', 'small'),
+      'tool-font-size': elVar('font-size', 'small')
     ),
-    'tab-large': (
+    'tab-lg': (
       // 标签页大型尺寸
       'height': 52px,
-      'padding': 22px
+      'padding': 22px,
+      'font-size': elVar('font-size', 'medium'),
+      'close-size': elVar('font-size', 'medium'),
+      'close-font-size': elVar('font-size', 'medium'),
+      'tool-font-size': elVar('font-size', 'medium')
     ),
     'tab-simple': (
       // 标签页简约风格
-      'active': elVar('color-primary', 'light-9'),
-      'hover': rgba(0, 0, 0, 0.025)
+      'radius': 0,
+      'hover-color': elVar('text-color', 'primary'),
+      'hover-bg': rgba(0, 0, 0, 0.025),
+      'active-color': elVar('color-primary'),
+      'active-bg': elVar('color-primary', 'light-9'),
+      'active-weight': normal,
+      'active-line': 2px,
+      'line-display': block,
+      'angle-size': 0px,
+      'angle-display': none
     ),
     'tab-indicator': (
       // 标签页指示器风格
       'size': 8px,
       'color': #d9d9d9,
+      'hover-color': #d9d9d9,
       'margin': 6px
     ),
     'tab-button': (
       // 标签页按钮风格
       'space': 8px,
       'radius': 4px,
-      'bg': elVar('bg-color', 'overlay')
+      'bg': elVar('bg-color'),
+      'active-weight': bold
     ),
     'table': (
       // 表格
-      'bg': elVar('bg-color', 'overlay'),
+      'radius': 0,
+      'bg': elVar('bg-color'),
       'color': elVar('text-color', 'regular'),
       'border-color': elVar('border-color', 'light'),
       'font-szie': elVar('font-size', 'base'),
-      'line-height': 23px,
+      'line-height': 24px,
       'padding': 9px 12px,
       'th-color': elVar('text-color', 'primary'),
       'th-font-weight': normal,
-      'th-bg': elVar('fill-color', 'light'),
-      'tr-bg': elVar('bg-color', 'overlay'),
+      'th-bg': elVar('fill-color', 'lighter'),
+      'tr-bg': elVar('bg-color'),
       'tr-hover-bg': elVar('fill-color', 'light'),
       'tr-active-bg': elVar('color-primary', 'light-9'),
+      'tr-active-hover-bg': elVar('color-primary', 'light-8'),
+      'even-bg': elVar('fill-color', 'lighter'),
+      'icon-color': elVar('text-color', 'disabled'),
+      'filter-size': elVar('font-size', 'base'),
+      'filter-padding': 4px 2px,
+      'filter-hover-bg': rgba(0, 0, 0, 0.04),
+      'filter-radius': elVar('border-radius', 'small'),
+      'filter-margin': 0 -6px 0 6px,
       'lg-size': elVar('font-size', 'base'),
       'lg-padding': 13px 16px,
+      'lg-radius': 0,
       'sm-size': elVar('font-size', 'extra-small'),
       'sm-padding': 4px 8px,
-      'sticky-top': 0
+      'sm-radius': 0,
+      'sticky-top': 0,
+      'fixed-header-sticky-top': 94px,
+      'maximized-sticky-top': 40px
+    ),
+    'table-select': (
+      'padding': 10px,
+      'th-bg': elVar('fill-color', 'light'),
+      'tr-bg': elVar('bg-color', 'overlay'),
+      'even-bg': elVar('fill-color', 'light'),
+      'mobile-space': 16px
+    ),
+    'tool-column': (
+      // 表格列配置
+      'width': 220px,
+      'max-height': 480px,
+      'header-padding': 6px 16px 4px 16px,
+      'header-border': 1px solid elVar('border-color', 'light'),
+      'body-padding': 6px 0,
+      'item-padding': 16px,
+      'item-height': 28px,
+      'item-hover-bg': elVar('color-primary', 'light-9'),
+      'item-radius': 0
     ),
     'text-size': (
       // 文本
@@ -416,7 +666,7 @@ $ele: map.deep-merge(
     'toolbar': (
       // 工具栏
       'padding': 0 16px,
-      'bg': elVar('fill-color', 'light'),
+      'bg': elVar('fill-color', 'lighter'),
       'border': 1px solid elVar('border-color', 'light'),
       'radius': 0,
       'space': 8px
@@ -437,29 +687,282 @@ $ele: map.deep-merge(
       // 工具栏按钮朴素风格
       'font-size': 16px
     ),
+    'popper': (
+      // 气泡通用
+      'bg': elVar('bg-color', 'overlay'),
+      'border': none,
+      'radius': elVar('border-radius', 'base'),
+      'shadow': elVar('box-shadow', 'light'),
+      'arrow-bg': eleVar('popper', 'bg'),
+      'arrow-size': 8px,
+      'arrow-offset': -4px,
+      'arrow-shadow': 0 0 8px 0 rgba(0, 0, 0, 0.06)
+    ),
     'tooltip': (
       // 文字提示
-      'line-height': '22px',
-      'font-size': elVar('font-size', 'extra-small'),
-      'radius': elVar('border-radius', 'base'),
-      'padding': '6px 10px',
       'color': '#fff',
+      'font-size': elVar('font-size', 'extra-small'),
+      'line-height': '22px',
+      'padding': '6px 12px',
       'bg': '#000',
-      'arrow-bg': eleVar('tooltip', 'bg'),
       'border': none,
-      'arrow-size': '8px',
-      'arrow-offset': '-4px'
+      'radius': elVar('border-radius', 'base'),
+      'shadow': 0 0 8px 0 rgba(0, 0, 0, 0.06),
+      'arrow-bg': eleVar('tooltip', 'bg'),
+      'arrow-shadow': 0 0 8px 0 rgba(0, 0, 0, 0.06)
     ),
     'tooltip-light': (
       // 文字提示亮色风格
       'color': elVar('text-color', 'primary'),
       'bg': elVar('bg-color', 'overlay'),
+      'border': none,
+      'shadow': eleVar('popper', 'shadow'),
       'arrow-bg': eleVar('tooltip-light', 'bg'),
-      'border': 1px solid elVar('border-color')
+      'arrow-shadow': eleVar('popper', 'arrow-shadow')
+    ),
+    'popover': (
+      // 气泡卡片
+      'color': elVar('text-color', 'regular'),
+      'font-size': elVar('font-size', 'base'),
+      'padding': 12px 16px,
+      'title-color': elVar('text-color', 'primary'),
+      'title-font-size': elVar('font-size', 'base'),
+      'title-font-weight': bold,
+      'title-padding': 8px 16px,
+      'title-border': 1px solid elVar('border-color', 'light')
+    ),
+    'popconfirm': (
+      // 气泡确认框
+      'padding': 14px 12px,
+      'title-color': elVar('text-color', 'primary'),
+      'title-font-size': elVar('font-size', 'base'),
+      'title-font-weight': bold,
+      'title-margin': 6px,
+      'icon-font-size': 17px,
+      'icon-margin': 2px 8px 0 0,
+      'action-margin': 10px,
+      'action-space': 8px
+    ),
+    'select': (
+      // 下拉框
+      'padding': 6px 0,
+      'item-height': 32px,
+      'item-margin': 0,
+      'item-padding': 0 16px,
+      'item-radius': 0,
+      'item-active-bg': elVar('color-primary', 'light-9'),
+      'item-active-font-weight': bold,
+      'icon-size': 16px,
+      'icon-margin': 0 -4px 0 4px
+    ),
+    'autocomplete': (
+      // 自动补全输入框
+      'padding': 6px 0,
+      'item-height': 32px,
+      'item-margin': 0,
+      'item-padding': 0 16px,
+      'item-radius': 0
+    ),
+    'cascader': (
+      // 级联选择器
+      'menu-padding': 6px 0,
+      'item-height': 32px,
+      'item-margin': 0,
+      'item-padding': 0 16px,
+      'item-radius': 0,
+      'item-active-bg': elVar('color-primary', 'light-9'),
+      'item-active-font-weight': bold
+    ),
+    'table-filter': (
+      // 表格筛选框
+      'padding': 6px 0,
+      'item-height': 32px,
+      'item-margin': 0,
+      'item-padding': 0 16px,
+      'item-radius': 0,
+      'item-color': elVar('text-color', 'regular'),
+      'item-hover-color': elVar('text-color', 'primary'),
+      'item-hover-bg': elVar('fill-color', 'light'),
+      'item-active-color': elVar('color-primary'),
+      'item-active-bg': elVar('color-primary', 'light-9'),
+      'item-active-font-weight': bold
+    ),
+    'message-box': (
+      // 消息弹出框
+      'width': 380px,
+      'radius': elVar('border-radius', 'base'),
+      'header-color': elVar('text-color', 'primary'),
+      'header-font-size': elVar('font-size', 'large'),
+      'header-font-weight': normal,
+      'header-line-height': 24px,
+      'header-padding': 18px 20px 8px 20px,
+      'header-border': none,
+      'icon-size': 22px,
+      'icon-font-size': 18px,
+      'icon-color': elVar('text-color', 'secondary'),
+      'icon-hover-color': elVar('text-color', 'primary'),
+      'icon-hover-bg': transparent,
+      'icon-radius': elVar('border-radius', 'small'),
+      'body-padding': 12px 20px,
+      'footer-padding': 8px 20px 18px 20px,
+      'footer-border': none,
+      'mobile-space': 16px
+    ),
+    'radio': (
+      // 单选框
+      'color': elVar('text-color', 'regular'),
+      'font-size': elVar('font-size', 'base'),
+      'size': 15px,
+      'radius': 50%,
+      'bg': elVar('bg-color'),
+      'border': 1px solid elVar('border-color'),
+      'hover-border': 1px solid elVar('color-primary'),
+      'active-color': elVar('text-color', 'regular'),
+      'active-bg': elVar('color-primary'),
+      'active-border': 1px solid elVar('color-primary'),
+      'dot-size': 7px,
+      'dot-color': #fff,
+      'dot-radius': 50%,
+      'disabled-color': elVar('disabled', 'text-color'),
+      'disabled-bg': elVar('disabled', 'bg-color'),
+      'disabled-border': 1px solid elVar('disabled', 'border-color'),
+      'disabled-dot-color': elVar('disabled', 'text-color'),
+      'sm-font-size': elVar('font-size', 'extra-small'),
+      'sm-size': 13px,
+      'sm-radius': 50%,
+      'sm-dot-size': 5px,
+      'sm-dot-radius': 50%,
+      'lg-font-size': elVar('font-size', 'base'),
+      'lg-size': 16px,
+      'lg-radius': 50%,
+      'lg-dot-size': 8px,
+      'lg-dot-radius': 50%
+    ),
+    'checkbox': (
+      // 多选框
+      'color': elVar('text-color', 'regular'),
+      'font-size': elVar('font-size', 'base'),
+      'size': 16px,
+      'radius': elVar('border-radius', 'small'),
+      'bg': elVar('bg-color'),
+      'border': 1px solid elVar('border-color'),
+      'hover-border': 1px solid elVar('color-primary'),
+      'active-color': elVar('text-color', 'regular'),
+      'icon-width': 5.7142857142857135px,
+      'icon-height': 9.142857142857142px,
+      'icon-left': 21.5%,
+      'disabled-color': elVar('disabled', 'text-color'),
+      'disabled-bg': elVar('disabled', 'bg-color'),
+      'disabled-border': 1px solid elVar('disabled', 'border-color'),
+      'sm-font-size': elVar('font-size', 'extra-small'),
+      'sm-size': 14px,
+      'sm-radius': elVar('border-radius', 'small'),
+      'sm-icon-width': 4.5px,
+      'sm-icon-height': 7px,
+      'sm-icon-left': 24.5%,
+      'lg-font-size': eleVar('checkbox', 'font-size'),
+      'lg-size': eleVar('checkbox', 'size'),
+      'lg-radius': eleVar('checkbox', 'radius'),
+      'lg-icon-width': eleVar('checkbox', 'icon-width'),
+      'lg-icon-height': eleVar('checkbox', 'icon-height'),
+      'lg-icon-left': eleVar('checkbox', 'icon-left')
     ),
     'image-viewer': (
       // 图片预览
-      'tool-bg': 'rgba(0, 0, 0, 0.88)'
+      'tool-bg': hsla(0, 0%, 28%, 0.6)
+    ),
+    'descriptions': (
+      // 描述列表
+      'radius': 0,
+      'border-color': elVar('border-color', 'light'),
+      'bg': elVar('fill-color', 'lighter')
+    ),
+    'datepicker': (
+      // 日期选择器
+      'header-height': 42px,
+      'header-padding': 0 12px,
+      'header-border': 1px solid elVar('border-color', 'light'),
+      'label-size': 15px,
+      'label-weight': bold,
+      'label-color': elVar('text-color', 'regular'),
+      'label-hover-color': elVar('color', 'primary'),
+      'label-space': 8px,
+      'icon-size': 15px,
+      'icon-color': elVar('text-color', 'secondary'),
+      'icon-hover-color': elVar('text-color', 'primary'),
+      'icon-disabled-color': elVar('disabled', 'text-color'),
+      'icon-space': 8px,
+      'body-width': 288px,
+      'body-padding': 8px 12px,
+      'color': elVar('text-color', 'regular'),
+      'font-size': elVar('font-size', 'base'),
+      'off-color': elVar('text-color', 'placeholder'),
+      'hover-color': elVar('text-color', 'primary'),
+      'hover-bg': elVar('fill-color', 'light'),
+      'cell-radius': 14px,
+      'today-color': inherit,
+      'today-border': 1px solid elVar('color-primary'),
+      'today-weight': normal,
+      'active-color': #fff,
+      'active-bg': elVar('color-primary'),
+      'disabled-color': elVar('disabled', 'text-color'),
+      'disabled-bg': elVar('disabled', 'bg-color'),
+      'year-width': 58px,
+      'year-height': 26px,
+      'year-radius': 16px,
+      'year-padding': 26px 0,
+      'month-padding': 22px 0,
+      'month-space': 4px 0,
+      'end-margin': 3.5px,
+      'footer-padding': 8px 12px,
+      'footer-border': 1px solid elVar('border-color', 'light'),
+      'inrange-bg': elVar('color-primary', 'light-9'),
+      'inrange-hover-bg': elVar('color-primary', 'light-8'),
+      'inner-border': elVar('border-color', 'light'),
+      'sidebar-width': 120px,
+      'sidebar-padding': 8px 0,
+      'sidebar-border': 1px solid elVar('border-color', 'light'),
+      'shortcut-height': 32px,
+      'shortcut-size': elVar('font-size', 'base'),
+      'shortcut-color': elVar('text-color', 'regular'),
+      'shortcut-padding': 0 14px,
+      'shortcut-margin': 0,
+      'shortcut-radius': 0,
+      'shortcut-hover-color': elVar('text-color', 'primary'),
+      'shortcut-hover-bg': elVar('fill-color', 'light'),
+      'range-icon-color': elVar('text-color', 'secondary'),
+      'range-icon-size': elVar('font-size', 'base')
+    ),
+    'timepicker': (
+      // 时间选择器
+      'width': 180px,
+      'height': 220px,
+      'padding': 8px 0,
+      'item-size': elVar('font-size', 'base'),
+      'item-color': elVar('text-color', 'regular'),
+      'item-height': 32px,
+      'item-radius': 0,
+      'item-hover-bg': elVar('fill-color', 'light'),
+      'item-hover-color': elVar('text-color', 'primary'),
+      'item-active-bg': transparent,
+      'item-active-color': elVar('color-primary'),
+      'item-disabled-color': elVar('disabled', 'text-color'),
+      'item-disabled-bg': transparent,
+      'line': 1px solid elVar('border-color', 'light'),
+      'line-padding': 0px,
+      'line-margin': 8px,
+      'arrow-color': elVar('text-color', 'secondary'),
+      'arrow-size': elVar('font-size', 'base'),
+      'footer-padding': 6px 10px,
+      'button-height': 24px,
+      'button-padding': 0 10px,
+      'button-radius': elVar('border-radius', 'small'),
+      'button-size': 12px,
+      'button-space': 8px,
+      'header-height': 42px,
+      'header-border': 1px solid elVar('border-color', 'light'),
+      'header-size': 14px,
+      'range-space': 6px
     )
   ),
   $ele