初始化

src/utils/Drag.ts

@@ -0,0 +1,98 @@
+//获取相关CSS属性
+const getCss = function (o, key) {
+  return o.currentStyle
+    ? o.currentStyle[key]
+    : document.defaultView?.getComputedStyle(o, null)[key];
+};
+
+const params = {
+  left: 0,
+  top: 0,
+  currentX: 0,
+  currentY: 0,
+  flag: false,
+};
+
+const startDrag = function (bar, target, callback?) {
+  const screenWidth = document.body.clientWidth; // body当前宽度
+  const screenHeight = document.documentElement.clientHeight; // 可见区域高度
+
+  const dragDomW = target.offsetWidth; // 对话框宽度
+  const dragDomH = target.offsetHeight; // 对话框高度
+
+  const minDomLeft = target.offsetLeft;
+  const minDomTop = target.offsetTop;
+
+  const maxDragDomLeft = screenWidth - minDomLeft - dragDomW;
+  const maxDragDomTop = screenHeight - minDomTop - dragDomH;
+
+  if (getCss(target, 'left') !== 'auto') {
+    params.left = getCss(target, 'left');
+  }
+  if (getCss(target, 'top') !== 'auto') {
+    params.top = getCss(target, 'top');
+  }
+
+  //o是移动对象
+  bar.onmousedown = function (event) {
+    params.flag = true;
+    if (!event) {
+      event = window.event;
+      //防止IE文字选中
+      bar.onselectstart = function () {
+        return false;
+      };
+    }
+    const e = event;
+    params.currentX = e.clientX;
+    params.currentY = e.clientY;
+  };
+  document.onmouseup = function () {
+    params.flag = false;
+    if (getCss(target, 'left') !== 'auto') {
+      params.left = getCss(target, 'left');
+    }
+    if (getCss(target, 'top') !== 'auto') {
+      params.top = getCss(target, 'top');
+    }
+  };
+  document.onmousemove = function (event) {
+    const e: any = event ? event : window.event;
+    if (params.flag) {
+      const nowX = e.clientX,
+        nowY = e.clientY;
+      const disX = nowX - params.currentX,
+        disY = nowY - params.currentY;
+
+      let left = parseInt(params.left) + disX;
+      let top = parseInt(params.top) + disY;
+
+      // 拖出屏幕边缘
+      if (-left > minDomLeft) {
+        left = -minDomLeft;
+      } else if (left > maxDragDomLeft) {
+        left = maxDragDomLeft;
+      }
+
+      if (-top > minDomTop) {
+        top = -minDomTop;
+      } else if (top > maxDragDomTop) {
+        top = maxDragDomTop;
+      }
+
+      target.style.left = left + 'px';
+      target.style.top = top + 'px';
+
+      if (typeof callback == 'function') {
+        callback((parseInt(params.left) || 0) + disX, (parseInt(params.top) || 0) + disY);
+      }
+
+      if (event.preventDefault) {
+        event.preventDefault();
+      }
+      return false;
+    }
+  };
+};
+
+export default startDrag;

src/utils/Storage.ts

@@ -0,0 +1,124 @@
+// 默认缓存期限为7天
+const DEFAULT_CACHE_TIME = 60 * 60 * 24 * 7;
+
+/**
+ * 创建本地缓存对象
+ * @param {string=} prefixKey -
+ * @param {Object} [storage=localStorage] - sessionStorage | localStorage
+ */
+
+export default class Storage {
+  private storage: globalThis.Storage;
+  private prefixKey?: string;
+
+  constructor(prefixKey = '', storage = localStorage) {
+    this.storage = storage;
+    this.prefixKey = prefixKey;
+  }
+
+  private getKey(key: string) {
+    return `${this.prefixKey}${key}`.toUpperCase();
+  }
+
+  /**
+   * @description 设置缓存
+   * @param {string} key 缓存键
+   * @param {*} value 缓存值
+   * @param expire
+   */
+  set(key: string, value: any, expire: number | null = DEFAULT_CACHE_TIME) {
+    const stringData = JSON.stringify({
+      value,
+      expire: expire !== null ? new Date().getTime() + expire * 1000 : null,
+    });
+    this.storage.setItem(this.getKey(key), stringData);
+  }
+
+  /**
+   * 读取缓存
+   * @param {string} key 缓存键
+   * @param {*=} def 默认值
+   */
+  get(key: string, def: any = null) {
+    const item = this.storage.getItem(this.getKey(key));
+    if (item) {
+      try {
+        const data = JSON.parse(item);
+        const { value, expire } = data;
+        // 在有效期内直接返回
+        if (expire === null || expire >= Date.now()) {
+          return value;
+        }
+        this.remove(key);
+      } catch (e) {
+        return def;
+      }
+    }
+    return def;
+  }
+
+  /**
+   * 从缓存删除某项
+   * @param {string} key
+   */
+  remove(key: string) {
+    this.storage.removeItem(this.getKey(key));
+  }
+
+  /**
+   * 清空所有缓存
+   * @memberOf Cache
+   */
+  clear(): void {
+    this.storage.clear();
+  }
+
+  /**
+   * 设置cookie
+   * @param {string} name cookie 名称
+   * @param {*} value cookie 值
+   * @param {number=} expire 过期时间
+   * 如果过期时间未设置，默认关闭浏览器自动删除
+   * @example
+   */
+  setCookie(name: string, value: any, expire: number | null = DEFAULT_CACHE_TIME) {
+    document.cookie = `${this.getKey(name)}=${value}; Max-Age=${expire}`;
+  }
+
+  /**
+   * 根据名字获取cookie值
+   * @param name
+   */
+  getCookie(name: string): string {
+    const cookieArr = document.cookie.split('; ');
+    for (let i = 0, length = cookieArr.length; i < length; i++) {
+      const kv = cookieArr[i].split('=');
+      if (kv[0] === this.getKey(name)) {
+        return kv[1];
+      }
+    }
+    return '';
+  }
+
+  /**
+   * 根据名字删除指定的cookie
+   * @param {string} key
+   */
+  removeCookie(key: string) {
+    this.setCookie(key, 1, -1);
+  }
+
+  /**
+   * 清空cookie，使所有cookie失效
+   */
+  clearCookie(): void {
+    const keys = document.cookie.match(/[^ =;]+(?==)/g);
+    if (keys) {
+      for (let i = keys.length; i--; ) {
+        document.cookie = keys[i] + '=0;expire=' + new Date(0).toUTCString();
+      }
+    }
+  }
+}
+
+export const storage = new Storage('');

src/utils/browser-type.ts

@@ -0,0 +1,142 @@
+/**
+ * @description 获取用户浏览器版本及系统信息
+ * @param {string='zh-cn' | 'en'} lang 返回中文的信息还是英文的
+ * @constructor
+ */
+export default function BrowserType(lang: 'zh-cn' | 'en' = 'en') {
+  // 权重：系统 + 系统版本 > 平台 > 内核 + 载体 + 内核版本 + 载体版本 > 外壳 + 外壳版本
+  const ua = navigator.userAgent.toLowerCase();
+  const testUa = (regexp) => regexp.test(ua);
+  const testVs = (regexp) =>
+    ua
+      .match(regexp)
+      ?.toString()
+      .replace(/[^0-9|_.]/g, '')
+      .replace(/_/g, '.');
+  // 系统
+  const system =
+    new Map([
+      [testUa(/windows|win32|win64|wow32|wow64/g), 'windows'], // windows系统
+      [testUa(/macintosh|macintel/g), 'macos'], // macos系统
+      [testUa(/x11/g), 'linux'], // linux系统
+      [testUa(/android|adr/g), 'android'], // android系统
+      [testUa(/ios|iphone|ipad|ipod|iwatch/g), 'ios'], // ios系统
+    ]).get(true) || 'unknow';
+
+  // 系统版本
+  const systemVs =
+    new Map([
+      [
+        'windows',
+        new Map([
+          [testUa(/windows nt 5.0|windows 2000/g), '2000'],
+          [testUa(/windows nt 5.1|windows xp/g), 'xp'],
+          [testUa(/windows nt 5.2|windows 2003/g), '2003'],
+          [testUa(/windows nt 6.0|windows vista/g), 'vista'],
+          [testUa(/windows nt 6.1|windows 7/g), '7'],
+          [testUa(/windows nt 6.2|windows 8/g), '8'],
+          [testUa(/windows nt 6.3|windows 8.1/g), '8.1'],
+          [testUa(/windows nt 10.0|windows 10/g), '10'],
+        ]).get(true),
+      ],
+      ['macos', testVs(/os x [\d._]+/g)],
+      ['android', testVs(/android [\d._]+/g)],
+      ['ios', testVs(/os [\d._]+/g)],
+    ]).get(system) || 'unknow';
+
+  // 平台
+  let platform = 'unknow';
+  if (system === 'windows' || system === 'macos' || system === 'linux') {
+    platform = 'desktop'; // 桌面端
+  } else if (system === 'android' || system === 'ios' || testUa(/mobile/g)) {
+    platform = 'mobile'; // 移动端
+  }
+  // 内核和载体
+  const [engine = 'unknow', supporter = 'unknow'] = new Map([
+    [
+      testUa(/applewebkit/g),
+      [
+        'webkit',
+        new Map([
+          // webkit内核
+          [testUa(/safari/g), 'safari'], // safari浏览器
+          [testUa(/chrome/g), 'chrome'], // chrome浏览器
+          [testUa(/opr/g), 'opera'], // opera浏览器
+          [testUa(/edge/g), 'edge'], // edge浏览器
+        ]).get(true),
+      ] || 'unknow',
+    ], // [webkit内核, xxx浏览器]
+    [testUa(/gecko/g) && testUa(/firefox/g), ['gecko', 'firefox']], // [gecko内核,firefox浏览器]
+    [testUa(/presto/g), ['presto', 'opera']], // [presto内核,opera浏览器]
+    [testUa(/trident|compatible|msie/g), ['trident', 'iexplore']], // [trident内核,iexplore浏览器]
+  ]).get(true) || ['unknow', 'unknow'];
+
+  // 内核版本
+  const engineVs =
+    new Map([
+      ['webkit', testVs(/applewebkit\/[\d._]+/g)],
+      ['gecko', testVs(/gecko\/[\d._]+/g)],
+      ['presto', testVs(/presto\/[\d._]+/g)],
+      ['trident', testVs(/trident\/[\d._]+/g)],
+    ]).get(engine) || 'unknow';
+
+  // 载体版本
+  const supporterVs =
+    new Map([
+      ['firefox', testVs(/firefox\/[\d._]+/g)],
+      ['opera', testVs(/opr\/[\d._]+/g)],
+      ['iexplore', testVs(/(msie [\d._]+)|(rv:[\d._]+)/g)],
+      ['edge', testVs(/edge\/[\d._]+/g)],
+      ['safari', testVs(/version\/[\d._]+/g)],
+      ['chrome', testVs(/chrome\/[\d._]+/g)],
+    ]).get(supporter) || 'unknow';
+
+  // 外壳和外壳版本
+  const [shell = 'none', shellVs = 'unknow'] = new Map([
+    [testUa(/micromessenger/g), ['wechat', testVs(/micromessenger\/[\d._]+/g)]], // [微信浏览器,]
+    [testUa(/qqbrowser/g), ['qq', testVs(/qqbrowser\/[\d._]+/g)]], // [QQ浏览器,]
+    [testUa(/ucbrowser/g), ['uc', testVs(/ucbrowser\/[\d._]+/g)]], // [UC浏览器,]
+    [testUa(/qihu 360se/g), ['360', 'unknow']], // [360浏览器(无版本),]
+    [testUa(/2345explorer/g), ['2345', testVs(/2345explorer\/[\d._]+/g)]], // [2345浏览器,]
+    [testUa(/metasr/g), ['sougou', 'unknow']], // [搜狗浏览器(无版本),]
+    [testUa(/lbbrowser/g), ['liebao', 'unknow']], // [猎豹浏览器(无版本),]
+    [testUa(/maxthon/g), ['maxthon', testVs(/maxthon\/[\d._]+/g)]], // [遨游浏览器,]
+  ]).get(true) || ['none', 'unknow'];
+
+  return {
+    'zh-cn': Object.assign(
+      {
+        内核: engine, // 内核: webkit gecko presto trident
+        内核版本: engineVs, // 内核版本
+        平台: platform, // 平台: desktop mobile
+        载体: supporter, // 载体: chrome safari firefox opera iexplore edge
+        载体版本: supporterVs, // 载体版本
+        系统: system, // 系统: windows macos linux android ios
+        系统版本: systemVs, // 系统版本
+      },
+      shell === 'none'
+        ? {}
+        : {
+            外壳: shell, // 外壳: wechat qq uc 360 2345 sougou liebao maxthon
+            外壳版本: shellVs, // 外壳版本
+          }
+    ),
+    en: Object.assign(
+      {
+        engine, // 内核: webkit gecko presto trident
+        engineVs, // 内核版本
+        platform, // 平台: desktop mobile
+        supporter, // 载体: chrome safari firefox opera iexplore edge
+        supporterVs, // 载体版本
+        system, // 系统: windows macos linux android ios
+        systemVs, // 系统版本
+      },
+      shell === 'none'
+        ? {}
+        : {
+            shell, // 外壳: wechat qq uc 360 2345 sougou liebao maxthon
+            shellVs, // 外壳版本
+          }
+    ),
+  }[lang];
+}

src/utils/dateUtil.ts

@@ -0,0 +1,12 @@
+import { format } from 'date-fns';
+
+const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm';
+const DATE_FORMAT = 'YYYY-MM-DD ';
+
+export function formatToDateTime(date: Date | number, formatStr = DATE_TIME_FORMAT): string {
+  return format(date, formatStr);
+}
+
+export function formatToDate(date: Date | number, formatStr = DATE_FORMAT): string {
+  return format(date, formatStr);
+}

src/utils/domUtils.ts

@@ -0,0 +1,165 @@
+import { upperFirst } from 'lodash-es';
+
+export interface ViewportOffsetResult {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+  rightIncludeBody: number;
+  bottomIncludeBody: number;
+}
+
+export function getBoundingClientRect(element: Element): DOMRect | number {
+  if (!element || !element.getBoundingClientRect) {
+    return 0;
+  }
+  return element.getBoundingClientRect();
+}
+
+function trim(string: string) {
+  return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '');
+}
+
+/* istanbul ignore next */
+export function hasClass(el: Element, cls: string) {
+  if (!el || !cls) return false;
+  if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.');
+  if (el.classList) {
+    return el.classList.contains(cls);
+  } else {
+    return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1;
+  }
+}
+
+/* istanbul ignore next */
+export function addClass(el: Element, cls: string) {
+  if (!el) return;
+  let curClass = el.className;
+  const classes = (cls || '').split(' ');
+
+  for (let i = 0, j = classes.length; i < j; i++) {
+    const clsName = classes[i];
+    if (!clsName) continue;
+
+    if (el.classList) {
+      el.classList.add(clsName);
+    } else if (!hasClass(el, clsName)) {
+      curClass += ' ' + clsName;
+    }
+  }
+  if (!el.classList) {
+    el.className = curClass;
+  }
+}
+
+/* istanbul ignore next */
+export function removeClass(el: Element, cls: string) {
+  if (!el || !cls) return;
+  const classes = cls.split(' ');
+  let curClass = ' ' + el.className + ' ';
+
+  for (let i = 0, j = classes.length; i < j; i++) {
+    const clsName = classes[i];
+    if (!clsName) continue;
+
+    if (el.classList) {
+      el.classList.remove(clsName);
+    } else if (hasClass(el, clsName)) {
+      curClass = curClass.replace(' ' + clsName + ' ', ' ');
+    }
+  }
+  if (!el.classList) {
+    el.className = trim(curClass);
+  }
+}
+/**
+ * Get the left and top offset of the current element
+ * left: the distance between the leftmost element and the left side of the document
+ * top: the distance from the top of the element to the top of the document
+ * right: the distance from the far right of the element to the right of the document
+ * bottom: the distance from the bottom of the element to the bottom of the document
+ * rightIncludeBody: the distance between the leftmost element and the right side of the document
+ * bottomIncludeBody: the distance from the bottom of the element to the bottom of the document
+ *
+ * @description:
+ */
+export function getViewportOffset(element: Element): ViewportOffsetResult {
+  const doc = document.documentElement;
+
+  const docScrollLeft = doc.scrollLeft;
+  const docScrollTop = doc.scrollTop;
+  const docClientLeft = doc.clientLeft;
+  const docClientTop = doc.clientTop;
+
+  const pageXOffset = window.pageXOffset;
+  const pageYOffset = window.pageYOffset;
+
+  const box = getBoundingClientRect(element);
+
+  const { left: retLeft, top: rectTop, width: rectWidth, height: rectHeight } = box as DOMRect;
+
+  const scrollLeft = (pageXOffset || docScrollLeft) - (docClientLeft || 0);
+  const scrollTop = (pageYOffset || docScrollTop) - (docClientTop || 0);
+  const offsetLeft = retLeft + pageXOffset;
+  const offsetTop = rectTop + pageYOffset;
+
+  const left = offsetLeft - scrollLeft;
+  const top = offsetTop - scrollTop;
+
+  const clientWidth = window.document.documentElement.clientWidth;
+  const clientHeight = window.document.documentElement.clientHeight;
+  return {
+    left: left,
+    top: top,
+    right: clientWidth - rectWidth - left,
+    bottom: clientHeight - rectHeight - top,
+    rightIncludeBody: clientWidth - left,
+    bottomIncludeBody: clientHeight - top,
+  };
+}
+
+export function hackCss(attr: string, value: string) {
+  const prefix: string[] = ['webkit', 'Moz', 'ms', 'OT'];
+
+  const styleObj: any = {};
+  prefix.forEach((item) => {
+    styleObj[`${item}${upperFirst(attr)}`] = value;
+  });
+  return {
+    ...styleObj,
+    [attr]: value,
+  };
+}
+
+/* istanbul ignore next */
+export function on(
+  element: Element | HTMLElement | Document | Window,
+  event: string,
+  handler: EventListenerOrEventListenerObject
+): void {
+  if (element && event && handler) {
+    element.addEventListener(event, handler, false);
+  }
+}
+
+/* istanbul ignore next */
+export function off(
+  element: Element | HTMLElement | Document | Window,
+  event: string,
+  handler: Fn
+): void {
+  if (element && event && handler) {
+    element.removeEventListener(event, handler, false);
+  }
+}
+
+/* istanbul ignore next */
+export function once(el: HTMLElement, event: string, fn: EventListener): void {
+  const listener = function (this: any, ...args: unknown[]) {
+    if (fn) {
+      fn.apply(this, args);
+    }
+    off(el, event, listener);
+  };
+  on(el, event, listener);
+}

src/utils/downloadFile.ts

@@ -0,0 +1,75 @@
+/**
+ * 根据文件url获取文件名
+ * @param url 文件url
+ */
+function getFileName(url) {
+  const num = url.lastIndexOf('/') + 1;
+  let fileName = url.substring(num);
+  //把参数和文件名分割开
+  fileName = decodeURI(fileName.split('?')[0]);
+  return fileName;
+}
+
+/**
+ * 根据文件地址下载文件
+ * @param {*} sUrl
+ */
+export function downloadByUrl({
+  url,
+  target = '_blank',
+  fileName,
+}: {
+  url: string;
+  target?: '_self' | '_blank';
+  fileName?: string;
+}): Promise<boolean> {
+  // 是否同源
+  const isSameHost = new URL(url).host == location.host;
+  return new Promise<boolean>((resolve, reject) => {
+    if (isSameHost) {
+      const link = document.createElement('a');
+      link.href = url;
+      link.target = target;
+
+      if (link.download !== undefined) {
+        link.download = fileName || getFileName(url);
+      }
+
+      if (document.createEvent) {
+        const e = document.createEvent('MouseEvents');
+        e.initEvent('click', true, true);
+        link.dispatchEvent(e);
+        return resolve(true);
+      }
+
+      if (url.indexOf('?') === -1) {
+        url += '?download';
+      }
+
+      window.open(url, target);
+      return resolve(true);
+    } else {
+      const canvas = document.createElement('canvas');
+      const img = document.createElement('img');
+      img.setAttribute('crossOrigin', 'Anonymous');
+      img.src = url;
+      img.onload = () => {
+        canvas.width = img.width;
+        canvas.height = img.height;
+        const context = canvas.getContext('2d')!;
+        context.drawImage(img, 0, 0, img.width, img.height);
+        // window.navigator.msSaveBlob(canvas.msToBlob(),'image.jpg');
+        // saveAs(imageDataUrl, '附件');
+        canvas.toBlob((blob) => {
+          const link = document.createElement('a');
+          link.href = window.URL.createObjectURL(blob);
+          link.download = getFileName(url);
+          link.click();
+          URL.revokeObjectURL(link.href);
+          resolve(true);
+        }, 'image/jpeg');
+      };
+      img.onerror = (e) => reject(e);
+    }
+  });
+}

src/utils/env.ts

@@ -0,0 +1,89 @@
+import type { GlobEnvConfig } from '/#/config';
+
+import { warn } from '@/utils/log';
+import pkg from '../../package.json';
+import { getConfigFileName } from '../../build/getConfigFileName';
+
+export function getCommonStoragePrefix() {
+  const { VITE_GLOB_APP_SHORT_NAME } = getAppEnvConfig();
+  return `${VITE_GLOB_APP_SHORT_NAME}__${getEnv()}`.toUpperCase();
+}
+
+// Generate cache key according to version
+export function getStorageShortName() {
+  return `${getCommonStoragePrefix()}${`__${pkg.version}`}__`.toUpperCase();
+}
+
+export function getAppEnvConfig() {
+  const ENV_NAME = getConfigFileName(import.meta.env);
+
+  const ENV = (import.meta.env.DEV
+    ? // Get the global configuration (the configuration will be extracted independently when packaging)
+      (import.meta.env as unknown as GlobEnvConfig)
+    : window[ENV_NAME as any]) as unknown as GlobEnvConfig;
+
+  const {
+    VITE_GLOB_APP_TITLE,
+    VITE_GLOB_API_URL,
+    VITE_GLOB_APP_SHORT_NAME,
+    VITE_GLOB_API_URL_PREFIX,
+    VITE_GLOB_UPLOAD_URL,
+    VITE_GLOB_FILE_URL,
+    VITE_USE_MOCK,
+    VITE_LOGGER_MOCK,
+  } = ENV;
+
+  if (!/^[a-zA-Z\_]*$/.test(VITE_GLOB_APP_SHORT_NAME)) {
+    warn(
+      `VITE_GLOB_APP_SHORT_NAME Variables can only be characters/underscores, please modify in the environment variables and re-running.`
+    );
+  }
+
+  return {
+    VITE_GLOB_APP_TITLE,
+    VITE_GLOB_API_URL,
+    VITE_GLOB_APP_SHORT_NAME,
+    VITE_GLOB_API_URL_PREFIX,
+    VITE_GLOB_UPLOAD_URL,
+    VITE_GLOB_FILE_URL,
+    VITE_USE_MOCK,
+    VITE_LOGGER_MOCK,
+  };
+}
+
+/**
+ * @description: Development model
+ */
+export const devMode = 'development';
+
+/**
+ * @description: Production mode
+ */
+export const prodMode = 'production';
+
+/**
+ * @description: Get environment variables
+ * @returns:
+ * @example:
+ */
+export function getEnv(): string {
+  return import.meta.env.MODE;
+}
+
+/**
+ * @description: Is it a development mode
+ * @returns:
+ * @example:
+ */
+export function isDevMode(): boolean {
+  return import.meta.env.DEV;
+}
+
+/**
+ * @description: Is it a production mode
+ * @returns:
+ * @example:
+ */
+export function isProdMode(): boolean {
+  return import.meta.env.PROD;
+}

src/utils/http/alova/index.ts

@@ -0,0 +1,141 @@
+import { createAlova } from 'alova';
+import VueHook from 'alova/vue';
+import adapterFetch from 'alova/fetch';
+import { createAlovaMockAdapter } from '@alova/mock';
+import { isString } from 'lodash-es';
+import mocks from './mocks';
+import { useUser } from '@/store/modules/user';
+import { storage } from '@/utils/Storage';
+import { useGlobSetting } from '@/hooks/setting';
+import { PageEnum } from '@/enums/pageEnum';
+import { ResultEnum } from '@/enums/httpEnum';
+import { isUrl } from '@/utils';
+
+const { useMock, apiUrl, urlPrefix, loggerMock } = useGlobSetting();
+
+const mockAdapter = createAlovaMockAdapter([...mocks], {
+  // 全局控制是否启用mock接口，默认为true
+  enable: useMock,
+
+  // 非模拟请求适配器，用于未匹配mock接口时发送请求
+  httpAdapter: adapterFetch(),
+
+  // mock接口响应延迟，单位毫秒
+  delay: 1000,
+
+  // 自定义打印mock接口请求信息
+  // mockRequestLogger: (res) => {
+  //   loggerMock && console.log(`Mock Request ${res.url}`, res);
+  // },
+  mockRequestLogger: loggerMock,
+  onMockError(error, currentMethod) {
+    console.error('🚀 ~ onMockError ~ currentMethod:', currentMethod);
+    console.error('🚀 ~ onMockError ~ error:', error);
+  },
+});
+
+export const Alova = createAlova({
+  baseURL: apiUrl,
+  statesHook: VueHook,
+  // 关闭全局请求缓存
+  // cacheFor: null,
+  // 全局缓存配置
+  // cacheFor: {
+  //   POST: {
+  //     mode: 'memory',
+  //     expire: 60 * 10 * 1000
+  //   },
+  //   GET: {
+  //     mode: 'memory',
+  //     expire: 60 * 10 * 1000
+  //   },
+  //   HEAD: 60 * 10 * 1000 // 统一设置HEAD请求的缓存模式
+  // },
+  // 在开发环境开启缓存命中日志
+  cacheLogger: process.env.NODE_ENV === 'development',
+  requestAdapter: mockAdapter,
+  beforeRequest(method) {
+    const userStore = useUser();
+    const token = userStore.getToken;
+    // 添加 token 到请求头
+    if (!method.meta?.ignoreToken && token) {
+      method.config.headers['token'] = token;
+    }
+    // 处理 api 请求前缀
+    const isUrlStr = isUrl(method.url as string);
+    if (!isUrlStr && urlPrefix) {
+      method.url = `${urlPrefix}${method.url}`;
+    }
+    if (!isUrlStr && apiUrl && isString(apiUrl)) {
+      method.url = `${apiUrl}${method.url}`;
+    }
+  },
+  responded: {
+    onSuccess: async (response, method) => {
+      let res;
+      try {
+        if (response.json) {
+          const text = await response.text();
+          try {
+            res = JSON.parse(text);
+          } catch (e) {
+            console.error('解析响应失败，响应内容:', text);
+            console.error('响应状态:', response.status);
+            throw new Error('服务器返回了无效的响应，请检查后端API是否正常运行');
+          }
+        } else {
+          res = response.body;
+        }
+      } catch (error) {
+        console.error('请求失败:', error);
+        throw error;
+      }
+
+      // 是否返回原生响应头 比如：需要获取响应头时使用该属性
+      if (method.meta?.isReturnNativeResponse) {
+        return res;
+      }
+      // 请根据自身情况修改数据结构
+      const { message, code, result } = res;
+
+      // 不进行任何处理，直接返回
+      // 用于需要直接获取 code、result、 message 这些信息时开启
+      if (method.meta?.isTransformResponse === false) {
+        return res.data;
+      }
+
+      // @ts-ignore
+      const Message = window.$message;
+      // @ts-ignore
+      const Modal = window.$dialog;
+
+      const LoginPath = PageEnum.BASE_LOGIN;
+      if (ResultEnum.SUCCESS === code) {
+        return result;
+      }
+      // 需要登录
+      if (code === 912) {
+        Modal?.warning({
+          title: '提示',
+          content: '登录身份已失效，请重新登录!',
+          okText: '确定',
+          closable: false,
+          maskClosable: false,
+          onOk: async () => {
+            storage.clear();
+            window.location.href = LoginPath;
+          },
+        });
+      } else {
+        // 可按需处理错误 一般情况下不是 912 错误，不一定需要弹出 message
+        Message?.error(message);
+        throw new Error(message);
+      }
+    },
+  },
+});
+
+// 项目，多个不同 api 地址，可导出多个实例
+// export const AlovaTwo = createAlova({
+//   baseURL: 'http://localhost:9001',
+// });

src/utils/http/alova/mocks.ts

@@ -0,0 +1,10 @@
+// 这里按需导入 mock 文件，只有在这里导入并导出，才会执行 mock 拦截
+// 跟根据实际开发情况配置
+import UserMock from '../../../../mock/user';
+import MenusMock from '../../../../mock/user/menus';
+import ConsoleMock from '../../../../mock/dashboard/console';
+import TableMock from '../../../../mock/table/list';
+import SystemMenuMock from '../../../../mock/system/menu';
+import SystemRoleMock from '../../../../mock/system/role';
+
+export default [UserMock, MenusMock, TableMock, ConsoleMock, SystemMenuMock, SystemRoleMock];

src/utils/index.ts

@@ -0,0 +1,240 @@
+import { h, unref } from 'vue';
+import type { App, Plugin, Component } from 'vue';
+import { NIcon, NTag } from 'naive-ui';
+import { PageEnum } from '@/enums/pageEnum';
+import { isObject } from './is/index';
+import { cloneDeep } from 'lodash-es';
+/**
+ * render 图标
+ * */
+export function renderIcon(icon) {
+  return () => h(NIcon, null, { default: () => h(icon) });
+}
+/**
+ * font 图标(Font class)
+ * */
+export function renderFontClassIcon(icon: string, iconName = 'iconfont') {
+  return () => h('span', { class: [iconName, icon] });
+}
+/**
+ * font 图标(Unicode)
+ * */
+export function renderUnicodeIcon(icon: string, iconName = 'iconfont') {
+  return () => h('span', { class: [iconName], innerHTML: icon });
+}
+/**
+ * font svg 图标
+ * */
+export function renderfontsvg(icon) {
+  return () =>
+    h(NIcon, null, {
+      default: () =>
+        h('svg', { class: `icon`, 'aria-hidden': 'true' }, h('use', { 'xlink:href': `#${icon}` })),
+    });
+}
+
+/**
+ * render new Tag
+ * */
+const newTagColors = { color: '#f90', textColor: '#fff', borderColor: '#f90' };
+export function renderNew(type = 'warning', text = 'New', color: object = newTagColors) {
+  return () =>
+    h(
+      NTag as any,
+      {
+        type,
+        round: true,
+        size: 'small',
+        color,
+      },
+      { default: () => text }
+    );
+}
+
+/**
+ * 递归组装菜单格式
+ */
+export function generatorMenu(routerMap: Array<any>) {
+  return filterRouter(routerMap).map((item) => {
+    const isRoot = isRootRouter(item);
+    const info = isRoot ? item.children[0] : item;
+    const currentMenu = {
+      ...info,
+      ...info.meta,
+      label: info.meta?.title,
+      key: info.name,
+      icon: isRoot ? item.meta?.icon : info.meta?.icon,
+    };
+    // 是否有子菜单，并递归处理
+    if (info.children && info.children.length > 0) {
+      // Recursion
+      currentMenu.children = generatorMenu(info.children);
+    }
+    return currentMenu;
+  });
+}
+
+/**
+ * 混合菜单
+ * */
+export function generatorMenuMix(routerMap: Array<any>, routerName: string, location: string) {
+  const cloneRouterMap = cloneDeep(routerMap);
+  const newRouter = filterRouter(cloneRouterMap);
+  if (location === 'header') {
+    const firstRouter: any[] = [];
+    newRouter.forEach((item) => {
+      const isRoot = isRootRouter(item);
+      const info = isRoot ? item.children[0] : item;
+      info.children = undefined;
+      const currentMenu = {
+        ...info,
+        ...info.meta,
+        label: info.meta?.title,
+        key: info.name,
+      };
+      firstRouter.push(currentMenu);
+    });
+    return firstRouter;
+  } else {
+    return getChildrenRouter(newRouter.filter((item) => item.name === routerName));
+  }
+}
+
+/**
+ * 递归组装子菜单
+ * */
+export function getChildrenRouter(routerMap: Array<any>) {
+  return filterRouter(routerMap).map((item) => {
+    const isRoot = isRootRouter(item);
+    const info = isRoot ? item.children[0] : item;
+    const currentMenu = {
+      ...info,
+      ...info.meta,
+      label: info.meta?.title,
+      key: info.name,
+    };
+    // 是否有子菜单，并递归处理
+    if (info.children && info.children.length > 0) {
+      // Recursion
+      currentMenu.children = getChildrenRouter(info.children);
+    }
+    return currentMenu;
+  });
+}
+
+/**
+ * 判断根路由 Router
+ * */
+export function isRootRouter(item) {
+  return (
+    item.meta?.alwaysShow != true &&
+    item?.children?.filter((item) => !Boolean(item?.meta?.hidden))?.length === 1
+  );
+}
+
+/**
+ * 排除Router
+ * */
+export function filterRouter(routerMap: Array<any>) {
+  return routerMap.filter((item) => {
+    return (
+      (item.meta?.hidden || false) != true &&
+      !['/:path(.*)*', '/', PageEnum.REDIRECT, PageEnum.BASE_LOGIN].includes(item.path)
+    );
+  });
+}
+
+export const withInstall = <T extends Component>(component: T, alias?: string) => {
+  const comp = component as any;
+  comp.install = (app: App) => {
+    app.component(comp.name || comp.displayName, component);
+    if (alias) {
+      app.config.globalProperties[alias] = component;
+    }
+  };
+  return component as T & Plugin;
+};
+
+/**
+ *  找到对应的节点
+ * */
+let result = null;
+export function getTreeItem(data: any[], key?: string | number): any {
+  data.map((item) => {
+    if (item.key === key) {
+      result = item;
+    } else {
+      if (item.children && item.children.length) {
+        getTreeItem(item.children, key);
+      }
+    }
+  });
+  return result;
+}
+
+/**
+ *  找到所有节点
+ * */
+const treeAll: any[] = [];
+export function getTreeAll(data: any[]): any[] {
+  data.map((item) => {
+    treeAll.push(item.key);
+    if (item.children && item.children.length) {
+      getTreeAll(item.children);
+    }
+  });
+  return treeAll;
+}
+
+// dynamic use hook props
+export function getDynamicProps<T extends {}, U>(props: T): Partial<U> {
+  const ret: Recordable = {};
+
+  Object.keys(props).map((key) => {
+    ret[key] = unref((props as Recordable)[key]);
+  });
+
+  return ret as Partial<U>;
+}
+
+export function deepMerge<T = any>(src: any = {}, target: any = {}): T {
+  let key: string;
+  for (key in target) {
+    src[key] = isObject(src[key]) ? deepMerge(src[key], target[key]) : (src[key] = target[key]);
+  }
+  return src;
+}
+
+/**
+ * Sums the passed percentage to the R, G or B of a HEX color
+ * @param {string} color The color to change
+ * @param {number} amount The amount to change the color by
+ * @returns {string} The processed part of the color
+ */
+function addLight(color: string, amount: number) {
+  const cc = parseInt(color, 16) + amount;
+  const c = cc > 255 ? 255 : cc;
+  return c.toString(16).length > 1 ? c.toString(16) : `0${c.toString(16)}`;
+}
+
+/**
+ * Lightens a 6 char HEX color according to the passed percentage
+ * @param {string} color The color to change
+ * @param {number} amount The amount to change the color by
+ * @returns {string} The processed color represented as HEX
+ */
+export function lighten(color: string, amount: number) {
+  color = color.indexOf('#') >= 0 ? color.substring(1, color.length) : color;
+  amount = Math.trunc((255 * amount) / 100);
+  return `#${addLight(color.substring(0, 2), amount)}${addLight(
+    color.substring(2, 4),
+    amount
+  )}${addLight(color.substring(4, 6), amount)}`;
+}
+
+/**
+ * 判断是否 url
+ * */
+export function isUrl(url: string) {
+  return /^(http|https):\/\//g.test(url);
+}

src/utils/is/index.ts

@@ -0,0 +1,118 @@
+const toString = Object.prototype.toString;
+
+/**
+ * @description: 判断值是否未某个类型
+ */
+export function is(val: unknown, type: string) {
+  return toString.call(val) === `[object ${type}]`;
+}
+
+/**
+ * @description:  是否为函数
+ */
+export function isFunction<T = Function>(val: unknown): val is T {
+  return is(val, 'Function') || is(val, 'AsyncFunction');
+}
+
+/**
+ * @description: 是否已定义
+ */
+export const isDef = <T = unknown>(val?: T): val is T => {
+  return typeof val !== 'undefined';
+};
+
+export const isUnDef = <T = unknown>(val?: T): val is T => {
+  return !isDef(val);
+};
+/**
+ * @description: 是否为对象
+ */
+export const isObject = (val: any): val is Record<any, any> => {
+  return val !== null && is(val, 'Object');
+};
+
+/**
+ * @description:  是否为时间
+ */
+export function isDate(val: unknown): val is Date {
+  return is(val, 'Date');
+}
+
+/**
+ * @description:  是否为数值
+ */
+export function isNumber(val: unknown): val is number {
+  return is(val, 'Number');
+}
+
+/**
+ * @description:  是否为AsyncFunction
+ */
+export function isAsyncFunction<T = any>(val: unknown): val is () => Promise<T> {
+  return is(val, 'AsyncFunction');
+}
+
+/**
+ * @description:  是否为promise
+ */
+export function isPromise<T = any>(val: unknown): val is Promise<T> {
+  return is(val, 'Promise') && isObject(val) && isFunction(val.then) && isFunction(val.catch);
+}
+
+/**
+ * @description:  是否为字符串
+ */
+export function isString(val: unknown): val is string {
+  return is(val, 'String');
+}
+
+/**
+ * @description:  是否为boolean类型
+ */
+export function isBoolean(val: unknown): val is boolean {
+  return is(val, 'Boolean');
+}
+
+/**
+ * @description:  是否为数组
+ */
+export function isArray(val: any): val is Array<any> {
+  return val && Array.isArray(val);
+}
+
+/**
+ * @description: 是否客户端
+ */
+export const isClient = () => {
+  return typeof window !== 'undefined';
+};
+
+/**
+ * @description: 是否为浏览器
+ */
+export const isWindow = (val: any): val is Window => {
+  return typeof window !== 'undefined' && is(val, 'Window');
+};
+
+export const isElement = (val: unknown): val is Element => {
+  return isObject(val) && !!val.tagName;
+};
+
+export const isServer = typeof window === 'undefined';
+
+// 是否为图片节点
+export function isImageDom(o: Element) {
+  return o && ['IMAGE', 'IMG'].includes(o.tagName);
+}
+
+export function isNull(val: unknown): val is null {
+  return val === null;
+}
+
+export function isNullAndUnDef(val: unknown): val is null | undefined {
+  return isUnDef(val) && isNull(val);
+}
+
+export function isNullOrUnDef(val: unknown): val is null | undefined {
+  return isUnDef(val) || isNull(val);
+}

src/utils/lib/echarts.ts

@@ -0,0 +1,55 @@
+import * as echarts from 'echarts/core';
+
+import {
+  BarChart,
+  LineChart,
+  PieChart,
+  MapChart,
+  PictorialBarChart,
+  RadarChart,
+} from 'echarts/charts';
+
+import {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  PolarComponent,
+  AriaComponent,
+  ParallelComponent,
+  LegendComponent,
+  RadarComponent,
+  ToolboxComponent,
+  DataZoomComponent,
+  VisualMapComponent,
+  TimelineComponent,
+  CalendarComponent,
+  GraphicComponent,
+} from 'echarts/components';
+
+import { SVGRenderer } from 'echarts/renderers';
+
+echarts.use([
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  PolarComponent,
+  AriaComponent,
+  ParallelComponent,
+  BarChart,
+  LineChart,
+  PieChart,
+  MapChart,
+  RadarChart,
+  SVGRenderer,
+  PictorialBarChart,
+  RadarComponent,
+  ToolboxComponent,
+  DataZoomComponent,
+  VisualMapComponent,
+  TimelineComponent,
+  CalendarComponent,
+  GraphicComponent,
+]);
+
+export default echarts;

src/utils/lodashChunk.ts

@@ -0,0 +1,12 @@
+/**
+ * 这里按需引入lodash的一些方法,方便维护
+ */
+
+//  export  {default as xxx} from 'lodash/xxx'
+
+export { default as cloneDeep } from 'lodash/cloneDeep';
+export { default as intersection } from 'lodash/intersection';
+export { default as get } from 'lodash/get';
+export { default as upperFirst } from 'lodash/upperFirst';
+export { default as omit } from 'lodash/omit';
+export { default as debounce } from 'lodash/debounce';

src/utils/log.ts

@@ -0,0 +1,9 @@
+const projectName = import.meta.env.VITE_GLOB_APP_TITLE;
+
+export function warn(message: string) {
+  console.warn(`[${projectName} warn]:${message}`);
+}
+
+export function error(message: string) {
+  throw new Error(`[${projectName} error]:${message}`);
+}

src/utils/propTypes.ts

@@ -0,0 +1,33 @@
+import { CSSProperties, VNodeChild } from 'vue';
+import { createTypes, VueTypeValidableDef, VueTypesInterface } from 'vue-types';
+
+export type VueNode = VNodeChild | JSX.Element;
+
+type PropTypes = VueTypesInterface & {
+  readonly style: VueTypeValidableDef<CSSProperties>;
+  readonly VNodeChild: VueTypeValidableDef<VueNode>;
+};
+
+const propTypes = createTypes({
+  func: undefined,
+  bool: undefined,
+  string: undefined,
+  number: undefined,
+  object: undefined,
+  integer: undefined,
+}) as PropTypes;
+
+propTypes.extend([
+  {
+    name: 'style',
+    getter: true,
+    type: [String, Object],
+    default: undefined,
+  },
+  {
+    name: 'VNodeChild',
+    getter: true,
+    type: undefined,
+  },
+]);
+export { propTypes };

src/utils/urlUtils.ts

@@ -0,0 +1,24 @@
+/**
+ * 将对象添加当作参数拼接到URL上面
+ * @param baseUrl 需要拼接的url
+ * @param obj 参数对象
+ * @returns {string} 拼接后的对象
+ * 例子:
+ *  let obj = {a: '3', b: '4'}
+ *  setObjToUrlParams('www.baidu.com', obj)
+ *  ==>www.baidu.com?a=3&b=4
+ */
+export function setObjToUrlParams(baseUrl: string, obj: object): string {
+  let parameters = '';
+  let url = '';
+  for (const key in obj) {
+    parameters += key + '=' + encodeURIComponent(obj[key]) + '&';
+  }
+  parameters = parameters.replace(/&$/, '');
+  if (/\?$/.test(baseUrl)) {
+    url = baseUrl + parameters;
+  } else {
+    url = baseUrl.replace(/\/?$/, '?') + parameters;
+  }
+  return url;
+}