create-meadminjs 1.0.0

package/template/meadmin/view/admin/src/utils/helper.ts

@@ -0,0 +1,315 @@
+import dayjs from 'dayjs';
+import { clone, cloneDeep } from 'lodash-es';
+import { VxeTableDefines } from 'vxe-table';
+import { SearchTreeOptions, default as XEUtils } from 'xe-utils';
+
+/**
+ * 对象中的每个可便利元素按序执行一个由您提供的 reducer 函数，
+ * 每一次运行 reducer 会将先前元素的计算结果作为参数传入，
+ * 最后将其结果汇总为单个返回值。
+ * @param object 用户遍历的对象
+ * @param callbackfn  “reducer” 函数，包含四个参数：
+ *  previousValue：上一次调用 callbackFn 时的返回值。在第一次调用时，其值则为 initialValue。
+ *  currentValue：数组中正在处理的元素。
+ *  currentKey：数组中正在处理的元素的key。
+ *  object：用于遍历的d对象。
+ * @param initialValue  作为第一次调用 callback 函数时参数 previousValue 的值
+ * @returns
+ */
+export function objectRreduce<T, P extends Record<string, any> = Record<string, any>>(
+  object: P,
+  callbackfn: (previousValue: T, currentValue: P[keyof P], currentKey: string, object: P) => T,
+  initialValue: T,
+): T {
+  for (const i in object) {
+    if (Object.hasOwn(object, i)) {
+      initialValue = callbackfn(initialValue, object[i], i, object);
+    }
+  }
+  return initialValue;
+}
+
+/**
+ * 合并对象的value（value必须为数组）
+ * @param object
+ * @returns
+ */
+export function concatObjectValue<T, P extends Record<string, T[]> = Record<string, T[]>>(object: P) {
+  return objectRreduce(
+    object,
+    (currentValue, previousValue) => {
+      return currentValue.concat(previousValue || []);
+    },
+    [] as T[],
+  );
+}
+
+/**
+ * 文件名转驼峰
+ * @param fileName
+ * @param nameTemplate
+ * @returns
+ */
+export const fileToHump = function (fileName: string): string {
+  const index = fileName.lastIndexOf('.');
+  if (index > 0) {
+    fileName = fileName.slice(0, index);
+  }
+  const fileNameArr = fileName.replace(/\\/g, '/').split('/');
+  if (fileNameArr[fileNameArr.length - 1] === 'index' || fileNameArr[fileNameArr.length - 1] === 'Index') {
+    fileNameArr.pop();
+  }
+  for (let i = 1, len = fileNameArr.length; i < len; i++) {
+    fileNameArr[i] = fileNameArr[i].slice(0, 1).toUpperCase() + fileNameArr[i].slice(1);
+  }
+  return fileNameArr.join('');
+};
+
+/**
+ * 混色
+ * @param color1  16进制颜色1
+ * @param color2  16进制颜色2
+ * @param opacity 透明度0-1
+ * @returns
+ */
+export const mixColor = function (color1: string, color2: string, opacity: number) {
+  let red1 = parseInt(color1.slice(1, 3), 16);
+  let green1 = parseInt(color1.slice(3, 5), 16);
+  let blue1 = parseInt(color1.slice(5, 7), 16);
+  if (opacity === 0) {
+    return [red1, green1, blue1].toString();
+  }
+  const red2 = parseInt(color2.slice(1, 3), 16);
+  const green2 = parseInt(color2.slice(3, 5), 16);
+  const blue2 = parseInt(color2.slice(5, 7), 16);
+  red1 += Math.round(opacity * (red2 - red1));
+  green1 += Math.round(opacity * (green2 - green1));
+  blue1 += Math.round(opacity * (blue2 - blue1));
+  return '#' + red1.toString(16) + green1.toString(16) + blue1.toString(16);
+};
+
+/**
+ * 获取灰阶值 越小颜色越深
+ * @param color
+ * @returns
+ */
+export const getColorLuma = function (color: string) {
+  const red = parseInt(color.slice(1, 3), 16);
+  const green = parseInt(color.slice(3, 5), 16);
+  const blue = parseInt(color.slice(5, 7), 16);
+  return red * 0.299 + green * 0.587 + blue * 0.114;
+};
+
+/**
+ * 树形结构搜索
+ */
+type TreeData<Key extends string[]> = {
+  [k in Key[number]]: string | number;
+} & { [k: string]: any };
+export const searchTreeTable = function <Key extends string[], T extends TreeData<Key>>(
+  searchText: number | string,
+  searchProps: Key,
+  data: T[],
+  options: SearchTreeOptions = { children: 'children' },
+  formatStr = (str: string, filterRE: RegExp) => str.replace(filterRE, (match) => `<span class="keyword-lighten">${match}</span>`),
+) {
+  const search = XEUtils.toValueString(searchText).trim().toLowerCase();
+  if (search) {
+    const filterRE = new RegExp(search, 'gi');
+    const rest = XEUtils.searchTree(data, (item) => searchProps.some((key) => XEUtils.toValueString(item[key]).toLowerCase().indexOf(search) > -1), options);
+    XEUtils.eachTree(
+      rest,
+      (item) => {
+        searchProps.forEach((key: Key[number]) => {
+          item[key] = formatStr(XEUtils.toValueString(item[key]), filterRE) as T[Key[number]];
+        });
+      },
+      options,
+    );
+    return rest;
+  }
+  return cloneDeep(data);
+};
+
+/**
+ * 递归代理对象/数组,响应后触发update方法
+ * @param value
+ * @param update
+ * @returns
+ */
+export const proxyValue = <T extends Record<string | number, any> | any[]>(value: T, update: () => void): T => {
+  return new Proxy<T>(value, {
+    get: function (obj, prop) {
+      if (obj[prop as keyof T] && typeof obj[prop as keyof T] === 'object') {
+        return proxyValue(obj[prop as keyof T] as T, update);
+      }
+      return obj[prop as keyof T];
+    },
+    set: function (obj, prop, value) {
+      const oldV = obj[prop as keyof T];
+      obj[prop as keyof T] = value;
+      update();
+      setTimeout(() => (obj[prop as keyof T] = oldV));
+      return true;
+    },
+  });
+};
+
+export type TreeArrayItem<T, C extends string | number> = { [K in C]: TreeArrayItem<T, C>[] } & T;
+/**
+ * 数组转为树结构
+ * @param arr
+ * @param key
+ * @param parentKey
+ * @param childrenKey
+ * @returns
+ */
+export const listToTree = <T extends Record<string, any>>(arr: T[], key: keyof T = 'id' as const, parentKey: keyof T = 'parentId' as const, childrenKey = 'children' as const) => {
+  const treeNode = new Map();
+  const newArr = clone(arr);
+  newArr.forEach((item) => {
+    (item as any)[childrenKey] = [];
+    treeNode.set(item[key], item);
+  });
+  const rootArr = [] as Array<TreeArrayItem<T, typeof childrenKey>>;
+  arr.forEach((item) => {
+    const parentNode = treeNode.get(item[parentKey]);
+    if (parentNode) {
+      parentNode[childrenKey].push(item);
+    } else {
+      rootArr.push(treeNode.get(item[key]));
+    }
+  });
+  return rootArr;
+};
+
+/**
+ * 状态转boolean
+ * @param status
+ * @returns
+ */
+export const statusToBoolean = (status?: 0 | 1 | '0' | '1') => {
+  if (status === undefined) {
+    return undefined;
+  }
+
+  return status == '1';
+};
+
+/**
+ * 重置对象值，会改变原对象
+ * @param obj
+ * @param fromObj
+ * @returns
+ */
+export const resetObj = <T extends Record<any, any>>(obj: Record<any, any>, fromObj: T) => {
+  Object.keys(obj).forEach((key) => (obj[key] = undefined));
+  Object.assign(obj, fromObj);
+  return obj as T;
+};
+
+/**
+ * 递归去除数组/对象的空值值
+ * @param obj
+ * @returns
+ */
+export function clearEmptyParam<T extends Record<any, any> | any[]>(obj: T, emptyArr = [null, undefined]) {
+  if (Array.isArray(obj)) {
+    const newObj = [] as any[];
+    obj.forEach((item) => {
+      if (emptyArr.includes(item)) {
+        return;
+      } else if (Array.isArray(item)) {
+        newObj.push(clearEmptyParam(item));
+      } else if (typeof item === 'object') {
+        newObj.push(clearEmptyParam(item));
+      } else {
+        newObj.push(item);
+      }
+    });
+    return newObj;
+  } else {
+    const newObj = {} as Record<any, any>;
+    Object.keys(obj).forEach((key) => {
+      if (emptyArr.includes(obj[key])) {
+        return;
+      } else if (Array.isArray(obj[key])) {
+        newObj[key] = clearEmptyParam(obj[key]);
+      } else if (typeof obj[key] === 'object') {
+        newObj[key] = clearEmptyParam(obj[key]);
+      } else {
+        newObj[key] = obj[key];
+      }
+    });
+    return newObj;
+  }
+}
+
+//格式化字符串数据执行
+export function formatterStrExec<T = string | null | undefined>(str: T) {
+  return [undefined, null, ''].includes(str as any) ? '--' : str!;
+}
+
+//格式化字典数据执行
+export function formatterDictExec<D extends Record<string, { value: string | number; label: string }[]>, T = string | null | undefined>(dict: D, field: string, value: T) {
+  return formatterStrExec(dict[field]?.find((item) => item.value == value)?.label);
+}
+
+//格式化时间数据执行
+export function formatterAtExec(str: string | null | undefined | Date, formatStr = 'YYYY-MM-DD HH:mm:ss') {
+  return str ? dayjs(str).format(formatStr) : formatterStrExec(str);
+}
+
+//格式化表格数据
+export function formatterStr<T>({ cellValue }: { cellValue: T }) {
+  return formatterStrExec<T>(cellValue);
+}
+
+//格式化表格时间数据
+export function formatterAt({ cellValue }: { cellValue: string | null | undefined | Date }, formatStr = 'YYYY-MM-DD HH:mm:ss') {
+  return cellValue ? dayjs(cellValue).format(formatStr) : formatterStr({ cellValue });
+}
+
+//格式化表格字典数据函数
+export function createformatterDictFn<T>(dict: Record<string, { value: string | number; label: string }[]>) {
+  //因为ts类型判定不得不断言dict
+  return (data: { cellValue: any; column: VxeTableDefines.ColumnInfo<T> }) => {
+    return formatterDictExec(dict, data.column.field, data.cellValue);
+  };
+}
+
+//创建格式化vxe表格对象函数
+export function formatterObjectFn(field: string | ((data: Record<string, any>) => string)) {
+  return (data: { cellValue: any }) => {
+    return data.cellValue ? formatterStrExec(typeof field === 'string' ? data.cellValue[field] : field(data.cellValue)) : formatterStrExec('');
+  };
+}
+
+//创建格式化对象函数
+export function formatterObjectExecFn(field: string | ((data: Record<string, any>) => string)) {
+  return (data?: Record<string, any> | null) => {
+    return data ? formatterStrExec(typeof field === 'string' ? data?.[field] : field(data ?? {})) : formatterStrExec('');
+  };
+}
+
+//创建格式化数组函数
+export function formatterArrFn(field?: string | ((data: Record<string, any>) => string), delimiter = '、') {
+  return (data: { cellValue: any }) => {
+    return data.cellValue.map((v: any) => (field ? formatterStrExec(typeof field === 'string' ? v[field] : field(v)) : v)).join(delimiter);
+  };
+}
+
+//创建格式化数组函数
+export function formatterArrExecFn(field?: string | ((data: Record<string, any>) => string), delimiter = '、') {
+  return (data?: any[]) => {
+    return (data ?? []).map((v: any) => (field ? formatterStrExec(typeof field === 'string' ? v[field] : field(v)) : v)).join(delimiter);
+  };
+}
+
+//根据文件名判断是否是图片
+export function isImage(filename?: string) {
+  if (!filename) return false;
+  const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
+  const fileExtension = filename.split('.').pop()?.toLowerCase();
+  return fileExtension ? imageExtensions.includes(fileExtension) : false;
+}

package/template/meadmin/view/admin/src/utils/loading.ts

@@ -0,0 +1,63 @@
+import { LoadingOptions } from 'element-plus';
+import { throttle } from 'lodash-es';
+const loadingInstance: Record<string, ReturnType<typeof ElLoading.service>> = {};
+class Loading {
+  constructor(private execLoading: (options?: LoadingOptions) => void, private execClose: () => void) {
+    this.execLoading = execLoading;
+    this.execClose = execClose;
+  }
+  public number = 0;
+  public loading(options?: LoadingOptions, number = 1) {
+    this.number += number;
+    this.execLoading(options);
+  }
+  public throttleClose = throttle(
+    function (this: Loading) {
+      if (this.number <= 0) {
+        this.execClose();
+        this.number = 0;
+      }
+    },
+    220,
+    { leading: false },
+  );
+  public close(number = 1) {
+    if (this.number > 0) {
+      this.number -= Math.min(this.number, number);
+      this.throttleClose();
+    } else {
+      this.forceClose();
+    }
+  }
+  public forceClose() {
+    this.number = 0;
+    this.execClose();
+    this.throttleClose.cancel();
+  }
+}
+
+export const loadingObject = {
+  global: new Loading(
+    (options?: LoadingOptions) => (loadingInstance.global = ElLoading.service(options)),
+    () => loadingInstance.global?.close(),
+  ),
+  layout: new Loading(
+    (options?: LoadingOptions) => (loadingInstance.layout = ElLoading.service(Object.assign({ target: '#me-main-scroll' }, options))),
+    () => loadingInstance.layout?.close(),
+  ),
+};
+
+export function loading(options?: LoadingOptions, number = 1, mode: keyof typeof loadingObject = 'global') {
+  const loading = loadingObject[mode];
+  loading.loading(options, number);
+  return loading;
+}
+
+export function closeLoading(force = false, number = 1, mode: keyof typeof loadingObject = 'global'): void {
+  const loading = loadingObject[mode];
+  if (force) {
+    loading.forceClose();
+    return;
+  }
+  loading.close(number);
+}

package/template/meadmin/view/admin/src/utils/log.ts

@@ -0,0 +1,8 @@
+export default {
+  warn(message?: string, ...optionalParams: any[]) {
+    console.warn(`[meadmin warn]:${message}`, ...optionalParams);
+  },
+  error(message?: string, ...optionalParams: any[]) {
+    console.error(`[meadmin error]:${message}`, ...optionalParams);
+  },
+};

package/template/meadmin/view/admin/src/utils/mitt.ts

@@ -0,0 +1,152 @@
+// 根据开源项目mitt自定义更改
+import EventEnum from '@/dict/eventEnmu';
+import { onUnmounted } from 'vue';
+type EventType = EventEnum;
+
+// An event handler can take an optional event argument
+// and should not return a value
+export type Handler<T = unknown> = (event: T) => void | Promise<void>;
+export type WildcardHandler<T = Record<string, unknown>> = (type: keyof T, event: T[keyof T]) => void | Promise<void>;
+
+// An array of all currently registered event handlers for a type
+export type EventHandlerList<T = unknown> = Array<Handler<T>>;
+export type WildCardEventHandlerList<T = Record<string, unknown>> = Array<WildcardHandler<T>>;
+
+// A map of event types and their corresponding event handlers.
+export type EventHandlerMap<Events extends Record<EventType, unknown>> = Map<keyof Events | '*', EventHandlerList<Events[keyof Events]> | WildCardEventHandlerList<Events>>;
+
+export interface Mitter<Events extends Record<EventType, unknown>> {
+  all: EventHandlerMap<Events>;
+
+  once: (<Key extends keyof Events>(type: Key, handler: Handler<Events[Key]>, needUnmounted?: boolean) => void) & ((type: '*', handler: WildcardHandler<Events>, needUnmounted?: boolean) => void);
+
+  on: (<Key extends keyof Events>(type: Key, handler: Handler<Events[Key]>, needUnmounted?: boolean) => void) & ((type: '*', handler: WildcardHandler<Events>, needUnmounted?: boolean) => void);
+
+  off: (<Key extends keyof Events>(type: Key, handler?: Handler<Events[Key]>) => void) & ((type: '*', handler: WildcardHandler<Events>) => void);
+
+  emit: (<Key extends keyof Events>(type: Key, event: Events[Key]) => any[]) & (<Key extends keyof Events>(type: undefined extends Events[Key] ? Key : never) => any[]);
+}
+
+/**
+ * Mitt: Tiny (~200b) functional event emitter / pubsub.
+ * @name Mitter
+ * @returns {Mitt}
+ */
+export default function mitter<Events extends Record<EventType, unknown>>(all?: EventHandlerMap<Events>, once?: Set<Handler<Events[keyof Events]> | WildcardHandler<Events>>) {
+  type GenericEventHandler = Handler<Events[keyof Events]> | WildcardHandler<Events>;
+  all = all ?? new Map();
+  once = once ?? new Set();
+
+  return {
+    /**
+     * A Map of event names to registered handler functions.
+     */
+    all,
+
+    /**
+     * Register an once event handler for the given type.
+     * @param {string|symbol} type Type of event to listen for, or `'*'` for all events
+     * @param {Function} handler Function to call in response to given event
+     * @param needUnmounted 是否需要在Unmounted时移除监听
+     * @memberOf mitt
+     */
+    once<Key extends keyof Events>(type: Key, handler: GenericEventHandler, needUnmounted = false) {
+      const handlers: GenericEventHandler[] | undefined = all!.get(type);
+      if (handlers) {
+        handlers.push(handler);
+      } else {
+        all!.set(type, [handler] as EventHandlerList<Events[keyof Events]>);
+        once!.add(handler as Handler<Events[keyof Events]>);
+      }
+      needUnmounted &&
+        onUnmounted(() => {
+          this.off<Key>(type, handler as any);
+        });
+    },
+
+    /**
+     * Register an event handler for the given type.
+     * @param {string|symbol} type Type of event to listen for, or `'*'` for all events
+     * @param {Function} handler Function to call in response to given event
+     * @param needUnmounted 是否需要在Unmounted时移除监听
+     * @memberOf mitt
+     */
+    on<Key extends keyof Events>(type: Key, handler: GenericEventHandler, needUnmounted = false) {
+      const handlers: GenericEventHandler[] | undefined = all!.get(type);
+      if (handlers) {
+        handlers.push(handler);
+      } else {
+        all!.set(type, [handler] as EventHandlerList<Events[keyof Events]>);
+      }
+      needUnmounted &&
+        onUnmounted(() => {
+          this.off<Key>(type, handler as any);
+        });
+    },
+
+    /**
+     * Remove an event handler for the given type.
+     * If `handler` is omitted, all handlers of the given type are removed.
+     * @param {string|symbol} type Type of event to unregister `handler` from (`'*'` to remove a wildcard handler)
+     * @param {Function} [handler] Handler function to remove
+     * @memberOf mitt
+     */
+    off<Key extends keyof Events>(type: Key, handler?: GenericEventHandler) {
+      const handlers: GenericEventHandler[] | undefined = all!.get(type);
+      if (handlers) {
+        if (handler) {
+          handlers.splice(handlers.indexOf(handler) >>> 0, 1);
+          once!.delete(handler);
+        } else {
+          all!.set(type, []);
+        }
+      }
+    },
+
+    /**
+     * Invoke all handlers for the given type.(会顺序执行)
+     * If present, `'*'` handlers are invoked after type-matched handlers.
+     *
+     * Note: Manually firing '*' handlers is not supported.
+     *
+     * @param {string|symbol} type The event type to invoke
+     * @param {Any} [evt] Any value (object is recommended and powerful), passed to each handler
+     * @memberOf mitt
+     */
+    emit<Key extends keyof Events>(type: Key, evt: Events[Key]) {
+      let handlers = all!.get(type);
+      const result = [];
+      if (handlers) {
+        handlers = (handlers as EventHandlerList<Events[keyof Events]>).slice();
+        for (const handler of handlers) {
+          const res = handler(evt);
+          if (res instanceof Promise) {
+            res.catch((error) => {
+              console.error(error);
+            });
+          }
+          result.push(res);
+          if (once!.has(handler)) {
+            this.off(type, handler);
+          }
+        }
+      }
+
+      handlers = all!.get('*');
+      if (handlers) {
+        handlers = (handlers as WildCardEventHandlerList<Events>).slice();
+        for (const handler of handlers) {
+          const res = handler(type, evt);
+          if (res instanceof Promise) {
+            res.catch((error) => {
+              console.error(error);
+            });
+          }
+          result.push(res);
+        }
+        once!.clear();
+      }
+      return result;
+    },
+  } as Mitter<Events>;
+}

package/template/meadmin/view/admin/src/utils/nProgress.ts

@@ -0,0 +1,31 @@
+import nProgress from 'nprogress';
+let number = 0;
+export const done = (n = 1) => {
+  number -= n;
+  if (number <= 0) {
+    nProgress.done();
+    number = 0;
+  } else {
+    nProgress.set(number / (number + n));
+  }
+};
+
+export const start = (n = 1) => {
+  if (number <= 0) {
+    nProgress.start();
+    number = n;
+  } else {
+    number += n;
+  }
+};
+
+export const set = (n: number) => {
+  if (number > 0) {
+    nProgress.set(n);
+  }
+};
+
+export const remove = () => {
+  number = 0;
+  nProgress.remove();
+};

package/template/meadmin/view/admin/src/utils/permission.ts

@@ -0,0 +1,76 @@
+import EventEnum from '@/dict/eventEnmu';
+import { mitter } from '@/event';
+import { Layout, LayoutPage } from '@/router/constant';
+import { useUserStore } from '@/store';
+import Page404 from '@/views/404.vue';
+import { DefineComponent } from 'vue';
+import { RouteRecordRaw } from 'vue-router';
+import log from './log';
+
+/**
+ * 用户是否具有权限
+ * @param rules
+ * @returns
+ */
+export function permission(rules?: string | string[]) {
+  if (!rules) {
+    return true;
+  }
+  if (typeof rules === 'string') {
+    rules = [rules];
+  }
+  return useUserStore().rules!.some((rule) => rule === '*' || rules!.includes(rule));
+}
+
+export type DynamicViewsModules = Record<string, () => Promise<DefineComponent>>;
+let dynamicViewsModules: DynamicViewsModules;
+export function initDynamicViewsModules() {
+  if (!dynamicViewsModules) {
+    dynamicViewsModules = import.meta.glob('../views/**/*.{vue,tsx}') as Record<string, () => Promise<DefineComponent>>;
+    mitter.emit(EventEnum.INIT_DYNAMIC_VIEWS_MODULES, dynamicViewsModules);
+  }
+}
+//动态转换组件
+export function transitionComponent(component: string) {
+  if (component === 'Layout') {
+    return Layout;
+  }
+  if (component === 'LayoutPage') {
+    return LayoutPage;
+  }
+  const res = dynamicViewsModules['../views/' + component + '.vue'] || dynamicViewsModules['../views/' + component + '.tsx'];
+  if (res) {
+    return res;
+  } else {
+    log.warn('在src/views/下找不到`' + component + '.vue` 或 `' + component + '.tsx`, 请自行创建!');
+    return Page404;
+  }
+}
+
+/**
+ * 过滤动态路由
+ * @param routes
+ * @param activeMenu
+ * @param noAuth 不需要校验
+ * @returns
+ */
+export function filterAsyncRoutes(routes: RouteRecordRaw[], activeMenu?: string, noAuth = false) {
+  const res: RouteRecordRaw[] = [];
+  routes.forEach((route) => {
+    const tmp = { ...route };
+    if (!route.meta || noAuth || permission(route.meta.rule)) {
+      if (route.meta?.hideMenu) {
+        if (typeof route.meta.activeMenu === 'undefined' && activeMenu) {
+          route.meta.activeMenu = activeMenu;
+        }
+      } else {
+        activeMenu = route.meta?.activeMenu ?? route.path;
+      }
+      if (tmp.children) {
+        tmp.children = filterAsyncRoutes(tmp.children, activeMenu, noAuth);
+      }
+      res.push(tmp);
+    }
+  });
+  return res;
+}