ele-admin-plus 1.2.0-beta.1 → 1.2.0-beta.2

package/lib/utils/core.d.ts

@@ -1,4 +1,3 @@
-/** 常用工具方法 */
 /**
  * toTree 方法参数
  */
@@ -12,13 +11,13 @@ export interface ToTreeOption<T> {
     /** 生成的 children 字段名称 */
     childrenField?: string | null;
     /** 最顶级的 parentId 值 */
-    parentId?: number | string | Array<number | string> | null;
+    parentId?: number | string | (number | string)[] | null;
     /** 是否添加包含所有父级 id 的字段 */
     addParentIds?: boolean | null;
     /** 包含所有父级 id 字段的名称 */
     parentIdsField?: string | null;
     /** 所有父级的 id */
-    parentIds?: Array<number | string> | null;
+    parentIds?: (number | string)[] | null;
 }
 /**
  * parentId 形式数据转 children 形式
@@ -26,20 +25,20 @@ export interface ToTreeOption<T> {
  */
 export declare function toTree<T>(option: ToTreeOption<T>): T[];
 /**
- * 遍历树形形式数据
- * @param data 需要遍历的数据
+ * 遍历 children 形式数据
+ * @param data 数据
  * @param callback 回调
  * @param childrenField children 字段名
  */
 export declare function eachTree<T>(data?: T[], callback?: (item: T, index: number, parent?: T) => void | boolean, childrenField?: string, parent?: T): void;
 /**
- * 格式化树形数据
- * @param data 需要格式化的数据
+ * 格式化 children 形式数据
+ * @param data 数据
  * @param formatter 格式器
  * @param childrenField children 字段名
- * @param resultChildrenField 格式化后的 children 字段名
+ * @param resultChildrenField 返回后的 children 字段名
  */
-export declare function mapTree<T, U>(data: T[] | undefined | null, formatter: (item: T, index?: number, parent?: U) => U | void | undefined, childrenField?: string, resultChildrenField?: string, parent?: U): U[];
+export declare function mapTree<T, K>(data: T[] | undefined | null, formatter: (item: T, index?: number, parent?: K) => K | void | undefined, childrenField?: string, resultChildrenField?: string, parent?: K): K[];
 /**
  * 查找树形数据
  * @param data 数据
@@ -47,18 +46,18 @@ export declare function mapTree<T, U>(data: T[] | undefined | null, formatter: (
  * @param childrenField children 字段名
  */
 export declare function findTree<T>(data: T[] | undefined, predicate: (value: T, index: number) => unknown, childrenField?: string): T | undefined;
+/**
+ * 生成 m 到 n 的随机数
+ * @param m 最小值(包含)
+ * @param n 最大值(不包含)
+ */
+export declare function random(m: number, n: number): number;
 /**
  * 生成随机字符串
  * @param length 长度
  * @param radix 基数
  */
 export declare function uuid(length?: number, radix?: number): string;
-/**
- * 生成 m 到 n 的随机数
- * @param m 最小值, 包含
- * @param n 最大值, 不包含
- */
-export declare function random(m: number, n: number): number;
 /**
  * 数字千分位
  * @param num 数字
@@ -70,20 +69,42 @@ export declare function formatNumber(num?: number | null): string;
  * @param source 源对象
  * @param excludes 排除的字段
  */
-export declare function assignObject<T extends {}>(target: T, source: Record<string, any>, excludes?: string[]): T;
+export declare function assignObject<T extends {}, K extends {}>(target: T, source: K, excludes?: string[]): T;
 /**
- * 全屏
- * @param el HTMLElement
+ * 判断是否是外链
+ * @param url 地址
  */
-export declare function requestFullscreen(el?: HTMLElement): void;
+export declare function isExternalLink(url?: string | null): boolean;
 /**
- * 退出全屏
+ * 查找直接子元素
+ * @param parentEl 父元素
+ * @param className 类名
+ * @param attr 属性
  */
-export declare function exitFullscreen(): void;
+export declare function queryChild(parentEl?: Element, className?: string, attr?: string[]): Element | undefined;
+/**
+ * 获取节点样式
+ * @param el 节点
+ */
+export declare function getCurrentStyle(el: Element): CSSStyleDeclaration;
+/**
+ * 判断元素内容是否溢出省略
+ * @param el 元素节点
+ */
+export declare function contentIsEllipsis(el: HTMLElement, direction?: 'horizontal' | 'vertical'): boolean;
 /**
  * 检查是否全屏
  */
 export declare function checkFullscreen(): boolean;
+/**
+ * 退出全屏
+ */
+export declare function exitFullscreen(): void;
+/**
+ * 全屏
+ * @param el HTMLElement
+ */
+export declare function requestFullscreen(el?: HTMLElement): void;
 /**
  * 经纬度坐标
  */
@@ -103,16 +124,15 @@ export declare function bd09ToGcj02(point: Point): Point;
  * @param point 坐标
  */
 export declare function gcj02ToBd09(point: Point): Point;
+/** 复制字符串 */
+export declare function copyText(text: string): Promise<undefined>;
 /**
- * 判断是否是外链
- * @param url 地址
- */
-export declare function isExternalLink(url?: string | null): boolean;
-/**
- * 获取节点样式
- * @param el 节点
+ * 根据字段路径获取值
+ * @param data 数据
+ * @param path 字段路径
+ * @param defaultValue 默认值
  */
-export declare function getCurrentStyle(el: Element): CSSStyleDeclaration;
+export declare function getValue<T, K>(data?: K | null, path?: string | string[] | ((d: K) => T), defaultValue?: T): T | undefined;
 /**
  * 防抖函数
  * @param func 函数
@@ -123,29 +143,18 @@ export declare function debounce<T extends (...args: any) => any>(func: T, wait:
  * 节流函数
  * @param func 函数
  * @param wait 等待时间
+ * @param trailing 是否在节流结束后调用
  */
-export declare function throttle<T extends (...args: any) => any>(func: T, wait: number): (this: any) => void;
+export declare function throttle<T extends (...args: any) => any>(func: T, wait: number, trailing?: boolean): (this: any) => void;
 /**
  * 忽略对象属性
  * @param obj 来源对象
  * @param fields 忽略的属性
  */
-export declare function omit<T extends object, K extends keyof T>(obj: T | null | undefined, fields: Array<K>): 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: Array<K>): Pick<T, K>;
-/**
- * 判断元素内容是否溢出省略
- * @param el 元素节点
- */
-export declare function contentIsEllipsis(el: HTMLElement, direction?: 'horizontal' | 'vertical'): boolean;
-/**
- * 查找子元素
- * @param parentEl 父元素
- * @param className 类名
- * @param attr 属性
- */
-export declare function queryChild(parentEl: Element, className?: string, attr?: string[]): Element | undefined;
+export declare function pick<T extends object, K extends keyof T>(obj: T, fields: K[]): Pick<T, K>;

package/lib/utils/hook.cjs

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+function useTimer(ms, cb) {
+  let timer = null;
+  const stopTimer = () => {
+    if (timer != null) {
+      clearTimeout(timer);
+      timer = null;
+    }
+  };
+  const startTimer = (callback, timeout) => {
+    stopTimer();
+    timer = setTimeout(
+      callback ?? cb,
+      timeout ?? (typeof ms === "function" ? ms() : ms)
+    );
+  };
+  vue.onBeforeUnmount(() => {
+    stopTimer();
+  });
+  return [startTimer, stopTimer];
+}
+function useMediaQuery(query, onChange) {
+  const mediaQuery = window.matchMedia(query);
+  const handleChange = () => {
+    onChange && onChange();
+  };
+  const startWatch = () => {
+    stopWatch();
+    mediaQuery.addEventListener("change", handleChange);
+  };
+  const stopWatch = () => {
+    mediaQuery.removeEventListener("change", handleChange);
+    handleChange();
+  };
+  vue.onBeforeUnmount(() => {
+    stopWatch();
+  });
+  return [mediaQuery, startWatch, stopWatch];
+}
+function useWindowListener(event, listener) {
+  const eventName = typeof event === "string" ? event : "resize";
+  const callback = typeof event === "function" ? event : listener;
+  if (callback != null) {
+    window.addEventListener(eventName, callback);
+  }
+  vue.onBeforeUnmount(() => {
+    if (callback != null) {
+      window.removeEventListener(eventName, callback);
+    }
+  });
+}
+function useCollapseAnim() {
+  let enterHeight = 0;
+  const getHeight = (el, isEnter) => {
+    if (!isEnter) {
+      return Math.max(el.offsetHeight, el.scrollHeight);
+    }
+    return Math.max(el.offsetHeight, el.scrollHeight, enterHeight);
+  };
+  const handleEnter = (el) => {
+    el.style.maxHeight = `${getHeight(el, true)}px`;
+  };
+  const handleAfterEnter = (el) => {
+    el.style.maxHeight = "";
+  };
+  const handleBeforeLeave = (el) => {
+    enterHeight = getHeight(el);
+    el.style.maxHeight = `${enterHeight}px`;
+  };
+  const handleAfterLeave = (el) => {
+    el.style.maxHeight = "";
+  };
+  return {
+    handleEnter,
+    handleAfterEnter,
+    handleBeforeLeave,
+    handleAfterLeave
+  };
+}
+exports.useCollapseAnim = useCollapseAnim;
+exports.useMediaQuery = useMediaQuery;
+exports.useTimer = useTimer;
+exports.useWindowListener = useWindowListener;

package/lib/utils/hook.d.ts

@@ -0,0 +1,38 @@
+/**
+ * useTimer返回结果
+ */
+export type UseTimerResult = [
+    (callback: () => void, timeout?: number) => void,
+    () => void
+];
+/**
+ * 定时器
+ * @param ms 等待时间
+ * @param cb 执行方法
+ */
+export declare function useTimer(ms?: number | (() => number), cb?: () => void): UseTimerResult;
+/**
+ * useMediaQuery返回结果
+ */
+export type UseMediaQueryResult = [MediaQueryList, () => void, () => void];
+/**
+ * 媒体查询
+ * @param query 媒体查询字符串
+ * @param onChange 改变回调
+ */
+export declare function useMediaQuery(query: string, onChange?: () => void): UseMediaQueryResult;
+/**
+ * 窗口事件监听
+ * @param event 事件
+ * @param listener 回调
+ */
+export declare function useWindowListener(event: string | EventListenerOrEventListenerObject, listener?: EventListenerOrEventListenerObject): void;
+/**
+ * 折叠展开动画
+ */
+export declare function useCollapseAnim(): {
+    handleEnter: (el: HTMLElement) => void;
+    handleAfterEnter: (el: HTMLElement) => void;
+    handleBeforeLeave: (el: HTMLElement) => void;
+    handleAfterLeave: (el: HTMLElement) => void;
+};

package/lib/utils/menu-util.cjs

@@ -1,21 +1,14 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const vue = require("vue");
-const receiver = require("../ele-config-provider/receiver");
+const util = require("../ele-pro-layout/util");
 const core = require("./core");
 function camelCase(str) {
   const val = str.replace(/[-|/](\w)/g, (_, c) => c ? c.toUpperCase() : "");
   return val.charAt(0).toUpperCase() + val.slice(1);
 }
 function pathIsAdd(path, data) {
-  let isAdd = false;
-  core.eachTree(data, (item) => {
-    if (path === item.path) {
-      isAdd = true;
-      return false;
-    }
-  });
-  return isAdd;
+  return core.findTree(data, (d) => path === d.path) != null;
 }
 function getRoutePath(path) {
   if (!path || !path.includes("?")) {
@@ -34,8 +27,8 @@ function getRouteComponent(menu, name, func) {
         var _a;
         const src = menu.component;
         const isAlive = ((_a = menu.meta) == null ? void 0 : _a.keepAlive) !== false;
-        const layoutProvide = receiver.useLayoutState();
-        const keepAlive = vue.computed(() => !!layoutProvide.keepAlive);
+        const proLayoutState = util.useProLayoutState();
+        const keepAlive = vue.computed(() => !!proLayoutState.keepAlive);
         return () => {
           if (!isAlive || !keepAlive.value) {
             return vue.h("iframe", { src, class: "ele-admin-iframe" });

package/lib/utils/message-box.cjs

@@ -3,14 +3,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const vue = require("vue");
 const elementPlus = require("element-plus");
 const receiver = require("../ele-config-provider/receiver");
+const util = require("../ele-pro-layout/util");
 const core = require("./core");
 function getWrapEl(bodyEl) {
   const parent = bodyEl || document.body;
   const className = "ele-message-box-wrapper";
-  const el = core.queryChild(parent, className);
-  if (el != null) {
-    return el;
-  }
   const elem = document.createElement("div");
   elem.classList.add(className);
   parent.appendChild(elem);
@@ -18,7 +15,7 @@ function getWrapEl(bodyEl) {
 }
 function useMessageBox(globalOpt) {
   var _a, _b;
-  const layoutState = receiver.useLayoutState();
+  const layoutState = util.useLayoutState();
   const globalProps = receiver.useGlobalProps("messageBox");
   const appContext = (_b = (_a = vue.getCurrentInstance) == null ? void 0 : _a.call(vue)) == null ? void 0 : _b.appContext;
   const state = { wrapEl: null, isActivated: true };

package/lib/utils/message.cjs

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const vue = require("vue");
 const elementPlus = require("element-plus");
 const receiver = require("../ele-config-provider/receiver");
+const util = require("../ele-pro-layout/util");
 const MessageBody = require("../ele-app/components/message-body");
 const core = require("./core");
 function blurCurrentFocus() {
@@ -158,7 +159,7 @@ EleMessage.closeAll = function(type) {
 const MESSAGE_KEY = Symbol("message");
 function useMessage(globalOpt) {
   var _a, _b;
-  const layoutState = receiver.useLayoutState();
+  const layoutState = util.useLayoutState();
   const globalProps = receiver.useGlobalProps("message");
   const appContext = (_b = (_a = vue.getCurrentInstance) == null ? void 0 : _a.call(vue)) == null ? void 0 : _b.appContext;
   const groupKey = (globalOpt == null ? void 0 : globalOpt.groupKey) || getDefaultGroupKey();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ele-admin-plus",
-  "version": "1.2.0-beta.1",
+  "version": "1.2.0-beta.2",
   "type": "module",
   "scripts": {
     "dev": "vite --host --config vite.global.ts",
@@ -13,8 +13,8 @@
     "test": "esno scripts/test.ts"
   },
   "peerDependencies": {
-    "vue": ">=3.1.0",
-    "element-plus": ">=2.3.0"
+    "element-plus": ">=2.7.0",
+    "vue": ">=3.1.0"
   },
   "devDependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
@@ -32,6 +32,7 @@
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "@vue/compiler-sfc": "^3.4.23",
+    "@vueuse/core": "^10.9.0",
     "axios": "^1.6.8",
     "bytemd": "^1.21.0",
     "chalk": "^5.3.0",
@@ -46,10 +47,12 @@
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-vue": "^9.25.0",
     "esno": "^4.7.0",
+    "exceljs": "^4.4.0",
     "execa": "^8.0.1",
     "github-markdown-css": "^5.5.1",
     "highlight.js": "^11.9.0",
     "jsbarcode": "^3.11.6",
+    "lodash-es": "^4.17.21",
     "nprogress": "^0.2.0",
     "p-limit": "^5.0.0",
     "pinia": "^2.1.7",
@@ -72,8 +75,7 @@
     "vuedraggable": "^4.1.0",
     "xgplayer": "^3.0.16",
     "xgplayer-hls": "^3.0.16",
-    "xgplayer-music": "^3.0.16",
-    "xlsx": "^0.18.5"
+    "xgplayer-music": "^3.0.16"
   },
   "main": "lib/index.cjs",
   "module": "es/index.js",

package/typings/global.d.ts

@@ -1,9 +1,11 @@
 /* eslint-disable @typescript-eslint/consistent-type-imports */
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    EleAdminLayout: (typeof import('ele-admin-plus'))['EleAdminLayout'];
     EleAlert: (typeof import('ele-admin-plus'))['EleAlert'];
     EleApp: (typeof import('ele-admin-plus'))['EleApp'];
     EleAvatarGroup: (typeof import('ele-admin-plus'))['EleAvatarGroup'];
+    EleBacktop: (typeof import('ele-admin-plus'))['EleBacktop'];
     EleBarCode: (typeof import('ele-admin-plus'))['EleBarCode'];
     EleBasicSelect: (typeof import('ele-admin-plus'))['EleBasicSelect'];
     EleBottomBar: (typeof import('ele-admin-plus'))['EleBottomBar'];

package/es/ele-app/style/overwrite/table-filter/css-var.scss

@@ -1,8 +0,0 @@
-@use '../../../../style/util.scss' as *;
-
-/* TableFilter 主题变量 */
-@mixin set-el-table-filter-var($var) {
-  .el-table-filter {
-    @include set-ele-var('table-filter', $var);
-  }
-}

package/es/ele-app/style/overwrite/table-filter/index.js

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

package/es/ele-app/style/overwrite/table-filter/index.scss

@@ -1,98 +0,0 @@
-@use '../../../../style/themes/default.scss' as *;
-@use '../../../../style/util.scss' as *;
-@use '../../../../ele-virtual-table/style/css-var.scss' as *;
-@use './css-var.scss' as *;
-
-@include set-el-table-filter-var($ele);
-
-/* TableFilter */
-.el-table-filter {
-  .el-table-filter__list {
-    padding: eleVar('table-filter', 'padding');
-    max-height: eleVar('table-filter', 'max-height');
-    box-sizing: border-box;
-    overflow: auto;
-  }
-
-  .el-table-filter__list-item {
-    color: eleVar('table-filter', 'item-color');
-    height: eleVar('table-filter', 'item-height');
-    line-height: eleVar('table-filter', 'item-height');
-    padding: eleVar('table-filter', 'item-padding');
-    border-radius: eleVar('table-filter', 'item-radius');
-    transition: (color $ele-transition, background-color $ele-transition);
-    box-sizing: border-box;
-
-    & + .el-table-filter__list-item {
-      margin-top: eleVar('table-filter', 'item-margin');
-    }
-
-    &:hover {
-      color: eleVar('table-filter', 'item-hover-color');
-      background: eleVar('table-filter', 'item-hover-bg');
-    }
-
-    &.is-active {
-      color: eleVar('table-filter', 'item-active-color');
-      background: eleVar('table-filter', 'item-active-bg');
-      font-weight: eleVar('table-filter', 'item-active-font-weight');
-
-      &:hover {
-        background: eleVar('table-filter', 'item-active-hover-bg');
-      }
-    }
-  }
-
-  .el-table-filter__wrap {
-    max-height: eleVar('table-filter', 'max-height');
-  }
-
-  @include filter-checkbox-style($ele-transition);
-
-  .el-table-filter__bottom {
-    padding: eleVar('table-filter', 'footer-padding');
-    border-top: eleVar('table-filter', 'footer-border');
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-
-    & > button {
-      height: 24px;
-      line-height: 24px;
-      padding: 0 11px;
-      font-size: 12px;
-      color: elVar('text-color', 'regular');
-      border-radius: calc(#{elVar('border-radius', 'base')} - 1px);
-      transition: (color $ele-transition, background-color $ele-transition);
-      box-sizing: border-box;
-
-      &:hover {
-        background: elVar('fill-color', 'light');
-      }
-
-      &:active {
-        background: elVar('fill-color');
-      }
-
-      &:first-child {
-        order: 2;
-        color: #fff;
-        background: elVar('color-primary');
-        margin-left: 4px;
-
-        &:hover {
-          background: elVar('color-primary', 'light-3');
-        }
-
-        &:active {
-          background: elVar('color-primary', 'dark-2');
-        }
-
-        &.is-disabled {
-          background: elVar('color-primary', 'light-5');
-        }
-      }
-    }
-  }
-}