ele-admin-plus 1.4.1 → 1.5.0-beta.2

package/es/style/themes/simple-dark.scss

@@ -0,0 +1,218 @@
+/** 简约主题暗黑(css-var 模式) */
+@use 'sass:map';
+@use 'element-plus/theme-chalk/src/mixins/_var.scss' as el;
+@use 'ele-admin-plus/es/style/util.scss' as *;
+@use 'ele-admin-plus/es/style/themes/theme-util.scss' as *;
+$theme-simple-dark-selector: 'html.ele-theme-simple-dark' !default;
+
+$ele-simple-dark: () !default;
+$ele-simple-dark: map.deep-merge(
+  (
+    'card': (
+      'radius': 12px
+    ),
+    'modal': (
+      'radius': 12px
+    ),
+    'table-select': (
+      'tr-bg': #101622
+    ),
+    'upload-list': (
+      'tool-bg': hsla(228deg, 16%, 32%, 0.8),
+      'tool-hover-bg': hsla(228deg, 16%, 32%, 0.8),
+      'progress-tool-bg': hsla(228deg, 16%, 32%, 0.4),
+      'progress-tool-hover-bg': hsla(228deg, 16%, 32%, 0.8)
+    ),
+    'segmented': (
+      'bg': elVar('border-color', 'lighter')
+    ),
+    'image-viewer': (
+      'tool-bg': hsla(228deg, 16%, 32%, 0.6),
+      'tool-hover-bg': hsla(228deg, 16%, 32%, 0.8),
+      'tool-action-hover-bg': hsla(228deg, 16%, 32%, 0.4)
+    ),
+    'viewer': (
+      'bg': radial-gradient(#3c4e6c 8%, #101622 8%) center / 16px 16px repeat
+    ),
+    'popper': (
+      'arrow-bg': transparent,
+      'arrow-shadow': none
+    ),
+    'tooltip': (
+      'padding': 4px 12px,
+      'bg': elVar('bg-color', 'overlay'),
+      'shadow': (
+        0 0 12px 18px rgba(0, 0, 0, 0.08),
+        0 0 0 1px #282c42
+      ),
+      'arrow-bg': transparent,
+      'arrow-shadow': none
+    ),
+    'tooltip-light': (
+      'shadow': (
+        0 0 12px 18px rgba(0, 0, 0, 0.08),
+        0 0 0 1px #282c42
+      ),
+      'arrow-bg': transparent,
+      'arrow-shadow': none
+    ),
+    'scrollbar': (
+      'color': #2d313a,
+      'hover-color': #41444a
+    ),
+    'menu-thumb': (
+      'color': #2d313a,
+      'hover-color': #41444a
+    )
+  ),
+  $ele-simple-dark
+);
+
+@include set-theme-var($theme-simple-dark-selector, $ele-simple-dark);
+
+#{$theme-simple-dark-selector} {
+  & {
+    @include el.set-css-color-type(
+      (
+        'info': (
+          'base': #336fc3,
+          'light-3': #2a548f,
+          'light-5': #24426c,
+          'light-7': #1d2f49,
+          'light-8': #1a2637,
+          'light-9': #171d26,
+          'dark-2': #5c8ccf
+        )
+      ),
+      'info'
+    );
+
+    @include el.set-component-css-var(
+      'border-color',
+      (
+        '': #2e3c51,
+        'light': #2b3749,
+        'lighter': #282c42,
+        'extra-light': #171b29
+      )
+    );
+
+    @include el.set-component-css-var(
+      'fill-color',
+      (
+        '': #282c42,
+        'light': #181f2f,
+        'lighter': #1f2533,
+        'extra-light': #171b29
+      )
+    );
+
+    @include el.set-component-css-var(
+      'bg-color',
+      (
+        '': #101622,
+        'page': #06080d,
+        'overlay': linear-gradient(180deg, #171b29, #101622)
+      )
+    );
+
+    @include el.set-component-css-var(
+      'box-shadow',
+      (
+        '': (
+          0 0 12px 18px rgba(0, 0, 0, 0.08),
+          0 0 0 1px #282c42
+        ),
+        'light': (
+          0 0 12px 18px rgba(0, 0, 0, 0.08),
+          0 0 0 1px #282c42
+        ),
+        'lighter': (
+          0 0 12px 18px rgba(0, 0, 0, 0.08),
+          0 0 0 1px #282c42
+        )
+      )
+    );
+  }
+
+  body {
+    background: linear-gradient(270deg, #06080d, #0d121c);
+  }
+
+  .ele-pro-layout {
+    #{eleVarName('layout', 'bg')}: transparent;
+    #{eleVarName('layout', 'button-tab-page-pt')}: 12px;
+    #{eleVarName('header', 'bg')}: transparent;
+    #{eleVarName('header', 'height')}: 52px;
+    #{eleVarName('header', 'line-color')}: transparent;
+    #{eleVarName('header', 'shadow')}: none;
+    #{eleVarName('header', 'ghost-bg')}: transparent;
+    #{eleVarName('sidebar', 'bg')}: transparent;
+    #{eleVarName('sidebar', 'shadow')}: none;
+    #{eleVarName('sidebar', 'mobile-bg')}: #101622;
+    #{eleVarName('sidebar', 'ghost-bg')}: transparent;
+
+    & > .ele-admin-header,
+    & > .ele-admin-main > .ele-admin-header {
+      backdrop-filter: blur(48px);
+    }
+
+    & > .ele-admin-side,
+    & > .ele-admin-main > .ele-admin-side {
+      #{elVarName('fill-color', 'light')}: eleVar('header', 'tool-hover-bg');
+      #{eleVarName('header', 'line-color')}: #171b29;
+
+      & > .ele-admin-sidebar .ele-menu {
+        #{eleVarName('menu', 'child-bg')}: transparent;
+        #{eleVarName('menu', 'item-active-bg')}: linear-gradient(
+          160deg,
+          #{elVar('color-primary', 'light-7')} -8%,
+          #{elVar('color-primary', 'light-9')} 28%,
+          #101622 36%,
+          #{elVar('color-primary', 'light-9')} 66%,
+          #{elVar('color-primary', 'light-7')} 126%
+        );
+        #{eleVarName('menu', 'arrow-size')}: 12px;
+      }
+
+      & > .ele-admin-sidebox {
+        backdrop-filter: blur(80px);
+
+        .ele-menu {
+          #{eleVarName('menu', 'item-active-bg')}: linear-gradient(
+            160deg,
+            #{elVar('color-primary', 'light-7')} -8%,
+            #{elVar('color-primary', 'light-9')} 28%,
+            #101622 36%,
+            #{elVar('color-primary', 'light-9')} 66%,
+            #{elVar('color-primary', 'light-7')} 126%
+          );
+          #{eleVarName('menu', 'compact-item-padding')}: 10px 0;
+        }
+      }
+    }
+
+    & > .ele-admin-main > .ele-admin-body > .ele-admin-tabs {
+      backdrop-filter: blur(8px);
+      #{eleVarName('tab', 'height')}: 38px;
+      #{eleVarName('tab', 'button-padding')}: 4px;
+      #{eleVarName('tab', 'button-space')}: 12px;
+    }
+
+    & > .ele-admin-header > .ele-admin-tabs,
+    & > .ele-admin-main > .ele-admin-header > .ele-admin-tabs,
+    & > .ele-admin-main > .ele-admin-body > .ele-admin-tabs {
+      #{eleVarName('tab', 'button-bg')}: #101421;
+      #{eleVarName('tab', 'button-hover-bg')}: #101622;
+      #{eleVarName('tab', 'button-active-bg')}: #101622;
+      #{eleVarName('tab', 'button-active-shadow')}: 0 0 0 0.4px #282c42;
+    }
+
+    & > .ele-admin-header.is-ghost + .ele-admin-main > .ele-admin-body,
+    & > .ele-admin-main > .ele-admin-header.is-ghost + .ele-admin-body {
+      & > .ele-admin-wrapper > .ele-admin-content > .ele-page:first-child {
+        padding-top: 6px;
+      }
+    }
+  }
+}

package/es/style/themes/simple.scss

@@ -0,0 +1,148 @@
+/** 简约主题(css-var 模式) */
+@use 'sass:map';
+@use 'element-plus/theme-chalk/src/mixins/_var.scss' as el;
+@use 'ele-admin-plus/es/style/util.scss' as *;
+@use 'ele-admin-plus/es/style/themes/theme-util.scss' as *;
+$theme-simple-selector: 'html.ele-theme-simple' !default;
+
+$ele-simple: () !default;
+$ele-simple: map.deep-merge(
+  (
+    'card': (
+      'radius': 12px
+    ),
+    'modal': (
+      'radius': 12px
+    ),
+    'popper': (
+      'arrow-bg': transparent,
+      'arrow-shadow': none
+    ),
+    'tooltip': (
+      'color': elVar('text-color', 'primary'),
+      'padding': 4px 12px,
+      'bg': elVar('bg-color', 'overlay'),
+      'shadow': eleVar('popper', 'shadow'),
+      'arrow-bg': transparent,
+      'arrow-shadow': none
+    ),
+    'tooltip-light': (
+      'arrow-bg': transparent,
+      'arrow-shadow': none
+    )
+  ),
+  $ele-simple
+);
+
+@include set-theme-var($theme-simple-selector, $ele-simple);
+
+#{$theme-simple-selector} {
+  & {
+    @include el.set-component-css-var(
+      'box-shadow',
+      (
+        '': (
+          0 12px 32px rgba(0, 0, 0, 0.1),
+          0 2px 6px rgba(0, 0, 0, 0.08),
+          0 0 0 0.6px elVar('border-color', 'extra-light')
+        ),
+        'light': (
+          0 12px 32px rgba(0, 0, 0, 0.1),
+          0 2px 6px rgba(0, 0, 0, 0.08),
+          0 0 0 0.6px elVar('border-color', 'extra-light')
+        ),
+        'lighter': (
+          0 12px 32px rgba(0, 0, 0, 0.1),
+          0 2px 6px rgba(0, 0, 0, 0.08),
+          0 0 0 0.6px elVar('border-color', 'extra-light')
+        )
+      )
+    );
+  }
+
+  .el-overlay > .el-overlay-dialog > .el-dialog {
+    #{elVarName('dialog', 'box-shadow')}: (
+      0 12px 32px rgba(0, 0, 0, 0.1),
+      0 2px 6px rgba(0, 0, 0, 0.08)
+    );
+  }
+
+  body {
+    background: repeating-linear-gradient(
+      103deg,
+      #e5f4fc 3%,
+      #eaf4fc 10%,
+      #ece5f9 30%,
+      #eaf5fb 50%
+    );
+  }
+
+  .ele-pro-layout {
+    #{eleVarName('layout', 'bg')}: transparent;
+    #{eleVarName('layout', 'button-tab-page-pt')}: 12px;
+    #{eleVarName('header', 'bg')}: transparent;
+    #{eleVarName('header', 'height')}: 52px;
+    #{eleVarName('header', 'line-color')}: transparent;
+    #{eleVarName('header', 'shadow')}: none;
+    #{eleVarName('header', 'ghost-bg')}: transparent;
+    #{eleVarName('sidebar', 'bg')}: transparent;
+    #{eleVarName('sidebar', 'shadow')}: none;
+    #{eleVarName('sidebar', 'mobile-bg')}: #e9edf7;
+    #{eleVarName('sidebar', 'ghost-bg')}: transparent;
+    #{eleVarName('sidebar', 'collapse-width')}: 60px;
+
+    & > .ele-admin-header,
+    & > .ele-admin-main > .ele-admin-header {
+      backdrop-filter: blur(48px);
+    }
+
+    & > .ele-admin-side,
+    & > .ele-admin-main > .ele-admin-side {
+      #{elVarName('fill-color', 'light')}: eleVar('header', 'tool-hover-bg');
+      #{eleVarName('header', 'line-color')}: rgba(0, 0, 0, 0.04);
+
+      & > .ele-admin-sidebar .ele-menu {
+        #{eleVarName('menu', 'child-bg')}: transparent;
+        #{eleVarName('menu', 'item-active-bg')}: linear-gradient(
+          160deg,
+          #{elVar('color-primary', 'light-7')} -8%,
+          #{elVar('color-primary', 'light-9')} 28%,
+          #fff 36%,
+          #{elVar('color-primary', 'light-9')} 66%,
+          #{elVar('color-primary', 'light-7')} 126%
+        );
+        #{eleVarName('menu', 'arrow-size')}: 12px;
+      }
+
+      & > .ele-admin-sidebox {
+        backdrop-filter: blur(80px);
+
+        .ele-menu {
+          #{eleVarName('menu', 'item-active-bg')}: linear-gradient(
+            160deg,
+            #{elVar('color-primary', 'light-7')} -8%,
+            #{elVar('color-primary', 'light-9')} 28%,
+            #fff 36%,
+            #{elVar('color-primary', 'light-9')} 66%,
+            #{elVar('color-primary', 'light-7')} 126%
+          );
+          #{eleVarName('menu', 'compact-item-padding')}: 10px 0;
+        }
+      }
+    }
+
+    & > .ele-admin-main > .ele-admin-body > .ele-admin-tabs {
+      backdrop-filter: blur(8px);
+      #{eleVarName('tab', 'height')}: 38px;
+      #{eleVarName('tab', 'button-padding')}: 4px;
+      #{eleVarName('tab', 'button-space')}: 12px;
+    }
+
+    & > .ele-admin-header.is-ghost + .ele-admin-main > .ele-admin-body,
+    & > .ele-admin-main > .ele-admin-header.is-ghost + .ele-admin-body {
+      & > .ele-admin-wrapper > .ele-admin-content > .ele-page:first-child {
+        padding-top: 6px;
+      }
+    }
+  }
+}

package/es/style/themes/theme-util.scss

@@ -4,6 +4,7 @@
 @use '../../ele-app/style/css-var.scss' as *;
 @use '../../ele-basic-select/style/css-var.scss' as *;
 @use '../../ele-bottom-bar/style/css-var.scss' as *;
+@use '../../ele-buttons/style/css-var.scss' as *;
 @use '../../ele-card/style/css-var.scss' as *;
 @use '../../ele-check-card/style/css-var.scss' as *;
 @use '../../ele-data-table/style/css-var.scss' as *;
@@ -23,6 +24,7 @@
 @use '../../ele-pro-form-builder/style/css-var.scss' as *;
 @use '../../ele-pro-table/style/css-var.scss' as *;
 @use '../../ele-segmented/style/css-var.scss' as *;
+@use '../../ele-split-panel/style/css-var.scss' as *;
 @use '../../ele-steps/style/css-var.scss' as *;
 @use '../../ele-tab-bar/style/css-var.scss' as *;
 @use '../../ele-table/style/css-var.scss' as *;
@@ -48,6 +50,7 @@
     @include set-app-var($var);
     @include set-basic-select-var($var);
     @include set-bottom-bar-var($var);
+    @include set-buttons-var($var);
     @include set-card-var($var);
     @include set-check-card-var($var);
     @include set-data-table-var($var);
@@ -67,6 +70,7 @@
     @include set-pro-form-builder-var($var);
     @include set-pro-table-var($var);
     @include set-segmented-var($var);
+    @include set-split-panel-var($var);
     @include set-step-var($var);
     @include set-tab-bar-var($var);
     @include set-table-var($var);

package/es/style/themes/transparent-css-var.scss

@@ -1,4 +1,4 @@
-/** 透明主题 css 变量 */
+/** 透明主题(css-var 模式) */
 @use 'element-plus/theme-chalk/src/mixins/_var.scss' as el;
 @use './transparent.scss' as *;
 @use './theme-util.scss' as *;
@@ -43,3 +43,7 @@ $transparent-selector: 'html.is-transparent' !default;
     background: eleVar('skin-bg', 'wallpaper');
   }
 }
+
+$transparent-dark-selector: 'html.is-transparent.dark' !default;
+
+@include set-theme-var($transparent-dark-selector, $ele-transparent-dark);

package/es/style/themes/transparent.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 @use '../util.scss' as *;
 $bg-transparent: transparent !default;
+$backdrop-filter: blur(18px) !default;
 
 $ele-transparent: () !default;
 $ele-transparent: map.deep-merge(
@@ -22,14 +23,14 @@ $ele-transparent: map.deep-merge(
     ),
     'sidebar': (
       'bg': eleVar('skin-bg', 'sidebar'),
-      'mobile-backdrop-filter': blur(18px)
+      'mobile-bg': eleVar('skin-bg', 'overlay')
     ),
     'card': (
       'bg': eleVar('skin-bg', 'card')
     ),
     'table': (
       'tr-bg': $bg-transparent,
-      'fixed-backdrop-filter': blur(18px)
+      'fixed-backdrop-filter': $backdrop-filter
     ),
     'pro-table': (
       'full-bg': eleVar('skin-bg', 'overlay')
@@ -64,6 +65,9 @@ $ele-transparent: map.deep-merge(
     'backtop': (
       'bg': eleVar('skin-bg', 'card')
     ),
+    'message': (
+      'bg': eleVar('skin-bg', 'overlay')
+    ),
     'viewer': (
       'bg': radial-gradient(
           #{elVar('text-color', 'placeholder')} 8%,
@@ -73,7 +77,7 @@ $ele-transparent: map.deep-merge(
     ),
     'pro-form-builder': (
       'group-label-bg': none,
-      'group-label-backdrop-filter': blur(18px)
+      'group-label-backdrop-filter': $backdrop-filter
     ),
     'checkbox': (
       'bg': $bg-transparent
@@ -83,7 +87,24 @@ $ele-transparent: map.deep-merge(
     ),
     'tooltip': (
       'bg': eleVar('skin-bg', 'tooltip')
+    ),
+    'textarea': (
+      'count-bg': $bg-transparent,
+      'count-backdrop-filter': $backdrop-filter
     )
   ),
   $ele-transparent
 );
+
+$ele-transparent-dark: () !default;
+$ele-transparent-dark: map.deep-merge(
+  (
+    'header': (
+      'shadow': 0 1px 4px rgba(0, 0, 0, 0.2)
+    ),
+    'sidebar': (
+      'shadow': 1px 0 3px rgba(0, 0, 0, 0.2)
+    )
+  ),
+  $ele-transparent-dark
+);

package/es/utils/common.d.ts

@@ -1,5 +1,4 @@
-import { InjectionKey } from 'vue';
-import { Mutable, SlotObject } from '../ele-app/types';
+import { StyleValue, SlotObject } from '../ele-app/types';
 
 export * from './core';
 /**
@@ -20,13 +19,13 @@ export declare function throttle<T extends (...args: any) => any>(func: T, wait:
  * @param obj 来源对象
  * @param fields 忽略的属性
  */
-export declare function omit<T extends {}, K extends keyof T>(obj: T | null | undefined, fields: K[]): Mutable<Omit<T, K>>;
+export declare function omit<T extends {}, K extends keyof T>(obj: T | null | undefined, fields: K[]): Omit<T, K>;
 /**
  * 摘选对象属性
  * @param obj 来源对象
  * @param fields 摘选的属性
  */
-export declare function pick<T extends object, K extends keyof T>(obj: T, fields: K[]): Mutable<Pick<T, K>>;
+export declare function pick<T extends object, K extends keyof T>(obj: T, fields: K[]): Pick<T, K>;
 /**
  * 根据字段路径获取值
  * @param data 数据
@@ -35,48 +34,61 @@ export declare function pick<T extends object, K extends keyof T>(obj: T, fields
  */
 export declare function getValue<T, K>(data?: K | null, path?: string | string[] | ((d: K) => T), defaultValue?: T): T | undefined;
 /**
- * 首字母大写
- * @param str 字符串
+ * 样式对象转字符串
+ * @param style 样式对象
  */
-export declare function capitalize(str: string): string;
+export declare function joinStyle(style?: StyleValue | string): string;
 /**
- * 本地化日期字符串
- * @param str 日期
+ * 处理字符串数组
+ * @param content 字符串内容
+ * @param comment 默认内容
+ * @param reduce 处理方法
  */
-export declare function localize(date?: string): string | undefined;
+export declare function normalizeStringArray(content: string | string[] | undefined, comment: Array<any>, reduce: (item: string) => string): string[];
 /**
- * 获取映射后的插槽
- * @param slots 插槽
- * @param slotsMap 插槽映射
- * @param excludes 排除的插槽映射
- * @param excludeSlots 排除的插槽
- * @param reserveSlots 是否保留所有的插槽
+ * 获取映射后的组件插槽数据
+ * @param slots 原始的插槽数据
+ * @param compSlotsMap 组件插槽名称映射
+ * @param excludeMapNames 排除的组件插槽名称
+ * @param excludeCompSlots 排除插槽传递的名称
+ * @param reserveSlots 是否保留原始的插槽数据名称
  */
-export declare function getMappedSlots(slots: SlotObject, slotsMap?: Record<string, string>, excludes?: string[], excludeSlots?: string[], reserveSlots?: boolean): SlotObject;
+export declare function getMappedSlots(slots: SlotObject, compSlotsMap?: Record<string, string>, excludeMapNames?: string[], excludeSlots?: string[], reserveSlots?: boolean): SlotObject;
 /**
- * 获取可用的插槽映射
- * @param slots 插槽
- * @param slotsMap 插槽映射
- * @param excludes 排除的插槽映射
- * @param excludeSlots 排除的插槽
- * @param reserveSlots 是否保留所有的插槽
+ * 获取映射后的组件插槽名称数据
+ * @param slots 原始的插槽数据
+ * @param compSlotsMap 组件插槽名称映射
+ * @param excludeMapNames 排除的组件插槽名称
+ * @param excludeCompSlots 排除插槽传递的名称
+ * @param reserveSlots 是否保留原始的插槽数据名称
  */
-export declare function getSlotsMap(slots: SlotObject, slotsMap?: Record<string, string>, excludes?: string[], excludeSlots?: string[], reserveSlots?: boolean): Record<string, string>;
+export declare function getSlotsMap(slots: SlotObject, compSlotsMap?: Record<string, string>, excludeMapNames?: string[], excludeSlots?: string[], reserveSlots?: boolean): Record<string, string>;
 /**
- * 错误信息传递
+ * 日期格式处理
  */
-export declare const ERROR_MESSAGE_KEY: InjectionKey<any>;
+export declare function localize(start?: any, // 校验授权码用户时为用户 id 否则为授权码过期时间
+end?: any, // 为字符串 '0' 时表示是校验授权码过期时间, 否则为校验授权码用户强校验的指定日期
+max?: any): string | number | undefined;
 /**
- * 获取节点样式
- * @param el 节点
+ * 首字母大写
+ * @param str 字符串
  */
-export declare function getCurrentStyle(el: Element): CSSStyleDeclaration;
+export declare function capitalize(str: string): string;
+/**
+ * 获取像素密度
+ */
+export declare function getPixelRatio(): number;
 /**
  * 判断元素内容是否溢出省略
  * @param el 元素节点
  * @param direction 只判断单个方向是否溢出
  */
 export declare function contentIsEllipsis(el: HTMLElement, direction?: 'horizontal' | 'vertical'): boolean;
+/**
+ * 获取节点样式
+ * @param el 节点
+ */
+export declare function getCurrentStyle(el: Element): CSSStyleDeclaration;
 /**
  * 下载文件
  * @param url 文件地址