新增前端vue

2025-11-26 13:55:01 +08:00
parent ae391f1b94
commit ffd5a6ad66
781 changed files with 83348 additions and 0 deletions
--- a/web-vue/packages/core/utils/auth/index.ts
+++ b/web-vue/packages/core/utils/auth/index.ts
@@ -0,0 +1,26 @@
+import { Persistent, BasicKeys } from '@jeesite/core/utils/cache/persistent';
+import { CacheTypeEnum } from '@jeesite/core/enums/cacheEnum';
+import projectSetting from '@jeesite/core/settings/projectSetting';
+import { TOKEN_KEY } from '@jeesite/core/enums/cacheEnum';
+
+const { permissionCacheType } = projectSetting;
+const isLocal = permissionCacheType === CacheTypeEnum.LOCAL;
+
+export function getToken() {
+  return getAuthCache(TOKEN_KEY);
+}
+
+export function getAuthCache<T>(key: BasicKeys) {
+  const fn = isLocal ? Persistent.getLocal : Persistent.getSession;
+  return fn(key) as T;
+}
+
+export function setAuthCache(key: BasicKeys, value) {
+  const fn = isLocal ? Persistent.setLocal : Persistent.setSession;
+  return fn(key, value, true);
+}
+
+export function clearAuthCache(immediate = true) {
+  const fn = isLocal ? Persistent.clearLocal : Persistent.clearSession;
+  return fn(immediate);
+}
--- a/web-vue/packages/core/utils/cache/index.ts
+++ b/web-vue/packages/core/utils/cache/index.ts
@@ -0,0 +1,32 @@
+import { getStorageShortName } from '@jeesite/core/utils/env';
+import { createStorage as create, CreateStorageParams } from './storageCache';
+import { enableStorageEncryption } from '@jeesite/core/settings/encryptionSetting';
+import { DEFAULT_CACHE_TIME } from '@jeesite/core/settings/encryptionSetting';
+
+export type Options = Partial<CreateStorageParams>;
+
+const createOptions = (storage: Storage, options: Options = {}): Options => {
+  return {
+    // No encryption in debug mode
+    hasEncrypt: enableStorageEncryption,
+    storage,
+    prefixKey: getStorageShortName(),
+    ...options,
+  };
+};
+
+export const WebStorage = create(createOptions(sessionStorage));
+
+export const createStorage = (storage: Storage = sessionStorage, options: Options = {}) => {
+  return create(createOptions(storage, options));
+};
+
+export const createSessionStorage = (options: Options = {}) => {
+  return createStorage(sessionStorage, { ...options, timeout: DEFAULT_CACHE_TIME });
+};
+
+export const createLocalStorage = (options: Options = {}) => {
+  return createStorage(localStorage, { ...options, timeout: DEFAULT_CACHE_TIME });
+};
+
+export default WebStorage;
--- a/web-vue/packages/core/utils/cache/memory.ts
+++ b/web-vue/packages/core/utils/cache/memory.ts
@@ -0,0 +1,102 @@
+export interface Cache<V = any> {
+  value?: V;
+  timeoutId?: ReturnType<typeof setTimeout>;
+  time?: number;
+  alive?: number;
+}
+
+const NOT_ALIVE = 0;
+
+export class Memory<T = any, V = any> {
+  private cache: { [_key in keyof T]?: Cache<V> } = {};
+  private alive: number;
+
+  constructor(alive = NOT_ALIVE) {
+    // Unit second
+    this.alive = alive * 1000;
+  }
+
+  get getCache() {
+    return this.cache;
+  }
+
+  setCache(cache) {
+    this.cache = cache;
+  }
+
+  // get<K extends keyof T>(key: K) {
+  //   const item = this.getItem(key);
+  //   const time = item?.time;
+  //   if (!isNullOrUnDef(time) && time < new Date().getTime()) {
+  //     this.remove(key);
+  //   }
+  //   return item?.value ?? undefined;
+  // }
+
+  get<K extends keyof T>(key: K) {
+    return this.cache[key];
+  }
+
+  set<K extends keyof T>(key: K, value: V, expires?: number) {
+    let item = this.get(key);
+
+    if (!expires || (expires as number) <= 0) {
+      expires = this.alive;
+    }
+    if (item) {
+      if (item.timeoutId) {
+        clearTimeout(item.timeoutId);
+        item.timeoutId = undefined;
+      }
+      item.value = value;
+    } else {
+      item = { value, alive: expires };
+      this.cache[key] = item;
+    }
+
+    if (!expires) {
+      return value;
+    }
+    const now = new Date().getTime();
+    item.time = now + this.alive;
+    item.timeoutId = setTimeout(
+      () => {
+        this.remove(key);
+      },
+      expires > now ? expires - now : expires,
+    );
+
+    return value;
+  }
+
+  remove<K extends keyof T>(key: K) {
+    const item = this.get(key);
+    Reflect.deleteProperty(this.cache, key);
+    if (item) {
+      clearTimeout(item.timeoutId!);
+      return item.value;
+    }
+  }
+
+  resetCache(cache: { [_K in keyof T]: Cache }) {
+    Object.keys(cache).forEach((key) => {
+      const k = key as any as keyof T;
+      const item = cache[k];
+      if (item && item.time) {
+        const now = new Date().getTime();
+        const expire = item.time;
+        if (expire > now) {
+          this.set(k, item.value, expire);
+        }
+      }
+    });
+  }
+
+  clear() {
+    Object.keys(this.cache).forEach((key) => {
+      const item = this.cache[key];
+      item.timeoutId && clearTimeout(item.timeoutId);
+    });
+    this.cache = {};
+  }
+}
--- a/web-vue/packages/core/utils/cache/persistent.ts
+++ b/web-vue/packages/core/utils/cache/persistent.ts
@@ -0,0 +1,135 @@
+import type { LockInfo, UserInfo } from '@jeesite/types/store';
+import type { ProjectConfig } from '@jeesite/types/config';
+import type { RouteLocationNormalized } from 'vue-router';
+
+import { createLocalStorage, createSessionStorage } from '@jeesite/core/utils/cache';
+import { Memory } from './memory';
+import {
+  TOKEN_KEY,
+  SESSION_TIMEOUT_KEY,
+  USER_INFO_KEY,
+  ROLES_KEY,
+  LOCK_INFO_KEY,
+  PROJ_CFG_KEY,
+  APP_LOCAL_CACHE_KEY,
+  APP_SESSION_CACHE_KEY,
+  MULTIPLE_TABS_KEY,
+} from '@jeesite/core/enums/cacheEnum';
+import { DEFAULT_CACHE_TIME } from '@jeesite/core/settings/encryptionSetting';
+import { toRaw } from 'vue';
+import { pick, omit } from 'lodash-es';
+
+interface BasicStore {
+  [TOKEN_KEY]: string | number | null | undefined;
+  [SESSION_TIMEOUT_KEY]: boolean | undefined;
+  [USER_INFO_KEY]: UserInfo;
+  [ROLES_KEY]: string[];
+  [LOCK_INFO_KEY]: LockInfo;
+  [PROJ_CFG_KEY]: ProjectConfig;
+  [MULTIPLE_TABS_KEY]: RouteLocationNormalized[];
+}
+
+type LocalStore = BasicStore;
+
+type SessionStore = BasicStore;
+
+export type BasicKeys = keyof BasicStore;
+type LocalKeys = keyof LocalStore;
+type SessionKeys = keyof SessionStore;
+
+const ls = createLocalStorage();
+const ss = createSessionStorage();
+
+const localMemory = new Memory(DEFAULT_CACHE_TIME);
+const sessionMemory = new Memory(DEFAULT_CACHE_TIME);
+
+function initPersistentMemory() {
+  const localCache = ls.get(APP_LOCAL_CACHE_KEY);
+  const sessionCache = ss.get(APP_SESSION_CACHE_KEY);
+  localCache && localMemory.resetCache(localCache);
+  sessionCache && sessionMemory.resetCache(sessionCache);
+}
+
+export class Persistent {
+  static getLocal<T>(key: LocalKeys) {
+    return localMemory.get(key)?.value as Nullable<T>;
+  }
+
+  static setLocal(key: LocalKeys, value: LocalStore[LocalKeys], immediate = false): void {
+    localMemory.set(key, toRaw(value));
+    immediate && ls.set(APP_LOCAL_CACHE_KEY, localMemory.getCache);
+  }
+
+  static removeLocal(key: LocalKeys, immediate = false): void {
+    localMemory.remove(key);
+    immediate && ls.set(APP_LOCAL_CACHE_KEY, localMemory.getCache);
+  }
+
+  static clearLocal(immediate = false): void {
+    localMemory.clear();
+    immediate && ls.clear();
+  }
+
+  static getSession<T>(key: SessionKeys) {
+    return sessionMemory.get(key)?.value as Nullable<T>;
+  }
+
+  static setSession(key: SessionKeys, value: SessionStore[SessionKeys], immediate = false): void {
+    sessionMemory.set(key, toRaw(value));
+    immediate && ss.set(APP_SESSION_CACHE_KEY, sessionMemory.getCache);
+  }
+
+  static removeSession(key: SessionKeys, immediate = false): void {
+    sessionMemory.remove(key);
+    immediate && ss.set(APP_SESSION_CACHE_KEY, sessionMemory.getCache);
+  }
+
+  static clearSession(immediate = false): void {
+    sessionMemory.clear();
+    immediate && ss.clear();
+  }
+
+  static clearAll(immediate = false) {
+    sessionMemory.clear();
+    localMemory.clear();
+    if (immediate) {
+      ls.clear();
+      ss.clear();
+    }
+  }
+}
+
+window.addEventListener('beforeunload', function () {
+  // TOKEN_KEY 在登录或注销时已经写入到storage了，此处为了解决同时打开多个窗口时token不同步的问题
+  // LOCK_INFO_KEY 在锁屏和解锁时写入，此处也不应修改
+  ls.set(APP_LOCAL_CACHE_KEY, {
+    ...omit(localMemory.getCache, LOCK_INFO_KEY),
+    ...pick(ls.get(APP_LOCAL_CACHE_KEY), [TOKEN_KEY, USER_INFO_KEY, LOCK_INFO_KEY]),
+  });
+  ss.set(APP_SESSION_CACHE_KEY, {
+    ...omit(sessionMemory.getCache, LOCK_INFO_KEY),
+    ...pick(ss.get(APP_SESSION_CACHE_KEY), [TOKEN_KEY, USER_INFO_KEY, LOCK_INFO_KEY]),
+  });
+});
+
+function storageChange(e: any) {
+  const { key, newValue, oldValue } = e;
+
+  if (!key) {
+    Persistent.clearAll();
+    return;
+  }
+
+  if (!!newValue && !!oldValue) {
+    if (APP_LOCAL_CACHE_KEY === key) {
+      Persistent.clearLocal();
+    }
+    if (APP_SESSION_CACHE_KEY === key) {
+      Persistent.clearSession();
+    }
+  }
+}
+
+window.addEventListener('storage', storageChange);
+
+initPersistentMemory();
--- a/web-vue/packages/core/utils/cache/storageCache.ts
+++ b/web-vue/packages/core/utils/cache/storageCache.ts
@@ -0,0 +1,112 @@
+import { cacheCipher } from '@jeesite/core/settings/encryptionSetting';
+
+import type { EncryptionParams } from '@jeesite/core/utils/cipher';
+
+import { AesEncryption } from '@jeesite/core/utils/cipher';
+
+import { isNullOrUnDef } from '@jeesite/core/utils/is';
+
+export interface CreateStorageParams extends EncryptionParams {
+  prefixKey: string;
+  storage: Storage;
+  hasEncrypt: boolean;
+  timeout?: Nullable<number>;
+}
+export const createStorage = ({
+  prefixKey = '',
+  storage = sessionStorage,
+  key = cacheCipher.key,
+  iv = cacheCipher.iv,
+  timeout = null,
+  hasEncrypt = true,
+}: Partial<CreateStorageParams> = {}) => {
+  if (hasEncrypt && [key.length, iv.length].some((item) => item !== 16)) {
+    throw new Error('When hasEncrypt is true, the key or iv must be 16 bits!');
+  }
+
+  const encryption = new AesEncryption({ key, iv });
+
+  /**
+   *Cache class
+   *Construction parameters can be passed into sessionStorage, localStorage,
+   * @class Cache
+   * @example
+   */
+  const WebStorage = class WebStorage {
+    private storage: Storage;
+    private prefixKey?: string;
+    private encryption: AesEncryption;
+    private hasEncrypt: boolean;
+    /**
+     *
+     * @param {*} storage
+     */
+    constructor() {
+      this.storage = storage;
+      this.prefixKey = prefixKey;
+      this.encryption = encryption;
+      this.hasEncrypt = hasEncrypt;
+    }
+
+    private getKey(key: string) {
+      return `${this.prefixKey}${key}`.toUpperCase();
+    }
+
+    /**
+     *
+     *  Set cache
+     * @param {string} key
+     * @param {*} value
+     * @expire Expiration time in seconds
+     * @memberof Cache
+     */
+    set(key: string, value: any, expire: number | null = timeout) {
+      const stringData = JSON.stringify({
+        value,
+        time: Date.now(),
+        expire: !isNullOrUnDef(expire) ? new Date().getTime() + expire * 1000 : null,
+      });
+      const stringifyValue = this.hasEncrypt ? this.encryption.encryptByAES(stringData) : stringData;
+      this.storage.setItem(this.getKey(key), stringifyValue);
+    }
+
+    /**
+     *Read cache
+     * @param {string} key
+     * @memberof Cache
+     */
+    get(key: string, def: any = null): any {
+      const val = this.storage.getItem(this.getKey(key));
+      if (!val) return def;
+
+      try {
+        const decVal = this.hasEncrypt ? this.encryption.decryptByAES(val) : val;
+        const data = JSON.parse(decVal);
+        const { value, expire } = data;
+        if (isNullOrUnDef(expire) || expire >= new Date().getTime()) {
+          return value;
+        }
+        this.remove(key);
+      } catch (e) {
+        return def;
+      }
+    }
+
+    /**
+     * Delete cache based on key
+     * @param {string} key
+     * @memberof Cache
+     */
+    remove(key: string) {
+      this.storage.removeItem(this.getKey(key));
+    }
+
+    /**
+     * Delete all caches of this instance
+     */
+    clear(): void {
+      this.storage.clear();
+    }
+  };
+  return new WebStorage() as any;
+};
--- a/web-vue/packages/core/utils/cipher.ts
+++ b/web-vue/packages/core/utils/cipher.ts
@@ -0,0 +1,54 @@
+import AES from 'crypto-js/aes';
+import Pkcs7 from 'crypto-js/pad-pkcs7';
+import ECB from 'crypto-js/mode-ecb';
+import Md5 from 'crypto-js/md5';
+import UTF8 from 'crypto-js/enc-utf8';
+import Base64 from 'crypto-js/enc-base64';
+
+export interface EncryptionParams {
+  key: string;
+  iv: string;
+}
+
+export class AesEncryption {
+  private key;
+  private iv;
+
+  constructor(opt: Partial<EncryptionParams> = {}) {
+    const { key, iv } = opt;
+    if (key) {
+      this.key = UTF8.parse(key);
+    }
+    if (iv) {
+      this.iv = UTF8.parse(iv);
+    }
+  }
+
+  get getOptions() {
+    return {
+      mode: ECB,
+      padding: Pkcs7,
+      iv: this.iv,
+    } as any;
+  }
+
+  encryptByAES(cipherText: string) {
+    return AES.encrypt(cipherText, this.key, this.getOptions).toString();
+  }
+
+  decryptByAES(cipherText: string) {
+    return AES.decrypt(cipherText, this.key, this.getOptions).toString(UTF8);
+  }
+}
+
+export function encryptByBase64(cipherText: string) {
+  return UTF8.parse(cipherText).toString(Base64);
+}
+
+export function decryptByBase64(cipherText: string) {
+  return Base64.parse(cipherText).toString(UTF8);
+}
+
+export function encryptByMd5(password: string) {
+  return Md5(password).toString();
+}
--- a/web-vue/packages/core/utils/color.ts
+++ b/web-vue/packages/core/utils/color.ts
@@ -0,0 +1,148 @@
+/**
+ * 判断是否 十六进制颜色值.
+ * 输入形式可为 #fff000 #f00
+ *
+ * @param   String  color   十六进制颜色值
+ * @return  Boolean
+ */
+export function isHexColor(color: string) {
+  const reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-f]{6})$/;
+  return reg.test(color);
+}
+
+/**
+ * RGB 颜色值转换为 十六进制颜色值.
+ * r, g, 和 b 需要在 [0, 255] 范围内
+ *
+ * @return  String          类似#ff00ff
+ * @param r
+ * @param g
+ * @param b
+ */
+export function rgbToHex(r: number, g: number, b: number) {
+  // tslint:disable-next-line:no-bitwise
+  const hex = ((r << 16) | (g << 8) | b).toString(16);
+  return '#' + new Array(Math.abs(hex.length - 7)).join('0') + hex;
+}
+
+/**
+ * Transform a HEX color to its RGB representation
+ * @param {string} hex The color to transform
+ * @returns The RGB representation of the passed color
+ */
+export function hexToRGB(hex: string) {
+  let sHex = hex.toLowerCase();
+  if (isHexColor(hex)) {
+    if (sHex.length === 4) {
+      let sColorNew = '#';
+      for (let i = 1; i < 4; i += 1) {
+        sColorNew += sHex.slice(i, i + 1).concat(sHex.slice(i, i + 1));
+      }
+      sHex = sColorNew;
+    }
+    const sColorChange: number[] = [];
+    for (let i = 1; i < 7; i += 2) {
+      sColorChange.push(parseInt('0x' + sHex.slice(i, i + 2)));
+    }
+    return 'RGB(' + sColorChange.join(',') + ')';
+  }
+  return sHex;
+}
+
+export function colorIsDark(color: string) {
+  if (!isHexColor(color)) return;
+  const [r, g, b] = hexToRGB(color)
+    .replace(/(?:\(|\)|rgb|RGB)*/g, '')
+    .split(',')
+    .map((item) => Number(item));
+  return r * 0.299 + g * 0.578 + b * 0.114 < 192;
+}
+
+/**
+ * Darkens a HEX color given the passed percentage
+ * @param {string} color The color to process
+ * @param {number} amount The amount to change the color by
+ * @returns {string} The HEX representation of the processed color
+ */
+export function darken(color: string, amount: number) {
+  color = color.indexOf('#') >= 0 ? color.substring(1, color.length) : color;
+  amount = Math.trunc((255 * amount) / 100);
+  return `#${subtractLight(color.substring(0, 2), amount)}${subtractLight(
+    color.substring(2, 4),
+    amount,
+  )}${subtractLight(color.substring(4, 6), amount)}`;
+}
+
+/**
+ * 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)}`;
+}
+
+/* Suma el porcentaje indicado a un color (RR, GG o BB) hexadecimal para aclararlo */
+/**
+ * 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)}`;
+}
+
+/**
+ * Calculates luminance of an rgb color
+ * @param {number} r red
+ * @param {number} g green
+ * @param {number} b blue
+ */
+function luminanace(r: number, g: number, b: number) {
+  const a = [r, g, b].map((v) => {
+    v /= 255;
+    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+  });
+  return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
+}
+
+/**
+ * Calculates contrast between two rgb colors
+ * @param {string} rgb1 rgb color 1
+ * @param {string} rgb2 rgb color 2
+ */
+function contrast(rgb1: string[], rgb2: number[]) {
+  return (luminanace(~~rgb1[0], ~~rgb1[1], ~~rgb1[2]) + 0.05) / (luminanace(rgb2[0], rgb2[1], rgb2[2]) + 0.05);
+}
+
+/**
+ * Determines what the best text color is (black or white) based con the contrast with the background
+ * @param hexColor - Last selected color by the user
+ */
+export function calculateBestTextColor(hexColor: string) {
+  const rgbColor = hexToRGB(hexColor.substring(1));
+  const contrastWithBlack = contrast(rgbColor.split(','), [0, 0, 0]);
+
+  return contrastWithBlack >= 12 ? '#000000' : '#FFFFFF';
+}
+
+/**
+ * Subtracts the indicated 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 subtractLight(color: string, amount: number) {
+  const cc = parseInt(color, 16) - amount;
+  const c = cc < 0 ? 0 : cc;
+  return c.toString(16).length > 1 ? c.toString(16) : `0${c.toString(16)}`;
+}
--- a/web-vue/packages/core/utils/dateUtil.ts
+++ b/web-vue/packages/core/utils/dateUtil.ts
@@ -0,0 +1,22 @@
+/**
+ * Independent time operation tool to facilitate subsequent switch to dayjs
+ */
+import dayjs from 'dayjs';
+
+const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
+const DATE_FORMAT = 'YYYY-MM-DD';
+
+export function formatToDateTime(
+  date: dayjs.ConfigType | undefined = undefined,
+  format = DATE_TIME_FORMAT,
+): string | undefined {
+  if (!date) return undefined;
+  return dayjs(date).format(format);
+}
+
+export function formatToDate(date: dayjs.ConfigType | undefined = undefined, format = DATE_FORMAT): string | undefined {
+  if (!date) return undefined;
+  return dayjs(date).format(format);
+}
+
+export const dateUtil = dayjs;
--- a/web-vue/packages/core/utils/domUtils.ts
+++ b/web-vue/packages/core/utils/domUtils.ts
@@ -0,0 +1,176 @@
+import type { FunctionArgs } from '@vueuse/core';
+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 as [evt: Event]);
+    }
+    off(el, event, listener);
+  };
+  on(el, event, listener);
+}
+
+export function useRafThrottle<T extends FunctionArgs>(fn: T): T {
+  let locked = false;
+  // @ts-ignore
+  return function (...args: any[]) {
+    if (locked) return;
+    locked = true;
+    window.requestAnimationFrame(() => {
+      // @ts-ignore
+      fn.apply(this, args);
+      locked = false;
+    });
+  };
+}
--- a/web-vue/packages/core/utils/env.ts
+++ b/web-vue/packages/core/utils/env.ts
@@ -0,0 +1,71 @@
+import type { GlobEnvConfig } from '@jeesite/types/config';
+
+import { warn, env } from '@jeesite/core/utils/log';
+import { version } from '../package.json';
+import { getEnvConfigName } from '@jeesite/vite/config/getEnvConfigName';
+
+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().replace(/\s/g, '_')}${`__${version}`}__`.toUpperCase();
+}
+
+export function getAppEnvConfig() {
+  const ENV_CONFIG_NAME = getEnvConfigName(env);
+  const ENV = (env.DEV
+    ? (env as unknown as GlobEnvConfig)
+    : window[ENV_CONFIG_NAME as any]) as unknown as GlobEnvConfig;
+
+  if (!/^[a-zA-Z_]*$/.test(ENV.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 ENV;
+}
+
+/**
+ * @description: Development mode
+ */
+export const devMode = 'development';
+
+/**
+ * @description: Production mode
+ */
+export const prodMode = 'production';
+
+/**
+ * @description: Get environment mode
+ */
+export function getEnv(): string {
+  return env.MODE;
+}
+
+/**
+ * @description: Is it a development mode
+ */
+export function isDevMode(): boolean {
+  return env.DEV;
+}
+
+/**
+ * @description: Is it a production mode
+ */
+export function isProdMode(): boolean {
+  return env.PROD;
+}
+
+/**
+ * @description: VITE_PUBLIC_PATH
+ */
+function getPublicPath(): string {
+  const publicPath = env.VITE_PUBLIC_PATH || '';
+  return publicPath == '/' ? '' : publicPath;
+}
+
+export const publicPath = getPublicPath();
--- a/web-vue/packages/core/utils/event/index.ts
+++ b/web-vue/packages/core/utils/event/index.ts
@@ -0,0 +1,42 @@
+import ResizeObserver from 'resize-observer-polyfill';
+
+const isServer = typeof window === 'undefined';
+
+/* istanbul ignore next */
+function resizeHandler(entries: any[]) {
+  for (const entry of entries) {
+    const listeners = entry.target.__resizeListeners__ || [];
+    if (listeners.length) {
+      listeners.forEach((fn: () => any) => {
+        fn();
+      });
+    }
+  }
+}
+
+/* istanbul ignore next */
+export function addResizeListener(element: any, fn: () => any) {
+  if (isServer) return;
+  if (!element.__resizeListeners__) {
+    element.__resizeListeners__ = [];
+    element.__ro__ = new ResizeObserver(resizeHandler);
+    element.__ro__.observe(element);
+  }
+  element.__resizeListeners__.push(fn);
+}
+
+/* istanbul ignore next */
+export function removeResizeListener(element: any, fn: () => any) {
+  if (!element || !element.__resizeListeners__) return;
+  element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
+  if (!element.__resizeListeners__.length) {
+    element.__ro__.disconnect();
+  }
+}
+
+export function triggerResize() {
+  const event = document.createEvent('HTMLEvents');
+  event.initEvent('resize', true, true);
+  (event as any).eventType = 'message';
+  window.dispatchEvent(event);
+}
--- a/web-vue/packages/core/utils/factory/createAsyncComponent.tsx
+++ b/web-vue/packages/core/utils/factory/createAsyncComponent.tsx
@@ -0,0 +1,65 @@
+import {
+  defineAsyncComponent,
+  // FunctionalComponent, CSSProperties
+} from 'vue';
+import { noop } from '@jeesite/core/utils';
+import { Icon } from '@jeesite/core/components/Icon';
+import { ComponentPublicInstance } from 'vue';
+
+// const Loading: FunctionalComponent<{ size: 'small' | 'default' | 'large' }> = (props) => {
+//   const style: CSSProperties = {
+//     position: 'absolute',
+//     display: 'flex',
+//     justifyContent: 'center',
+//     alignItems: 'center',
+//   };
+//   return (
+//     <div style={style}>
+//       <Spin spinning={true} size={props.size} />
+//     </div>
+//   );
+// };
+
+interface Options {
+  size?: 'default' | 'small' | 'large';
+  delay?: number;
+  timeout?: number;
+  loading?: boolean;
+  retry?: boolean;
+}
+
+export function createAsyncComponent(loader: Fn, options: Options = {}): ComponentPublicInstance | any {
+  const { size = 'small', delay = 100, timeout = 30000, loading = false, retry = true } = options;
+  return defineAsyncComponent({
+    loader,
+    loadingComponent: loading ? (
+      <Icon spin={true} size={size} icon={'i-ant-design:loading3-quarters-outlined'} class="mr-2" />
+    ) : undefined,
+    // The error component will be displayed if a timeout is
+    // provided and exceeded. Default: Infinity.
+    timeout,
+    // errorComponent
+    // Defining if component is suspensible. Default: true.
+    // suspensible: false,
+    delay,
+    /**
+     *
+     * @param {*} error Error message object
+     * @param {*} retry A function that indicating whether the async component should retry when the loader promise rejects
+     * @param {*} fail  End of failure
+     * @param {*} attempts Maximum allowed retries number
+     */
+    onError: !retry
+      ? noop
+      : (error, retry, fail, attempts) => {
+          if (error.message.match(/fetch/) && attempts <= 3) {
+            // retry on fetch errors, 3 max attempts
+            retry();
+          } else {
+            // Note that retry/fail are like resolve/reject of a promise:
+            // one of them must be called for the error handling to continue.
+            fail();
+          }
+        },
+  });
+}
--- a/web-vue/packages/core/utils/file/base64Conver.ts
+++ b/web-vue/packages/core/utils/file/base64Conver.ts
@@ -0,0 +1,41 @@
+/**
+ * @description: base64 to blob
+ */
+export function dataURLtoBlob(base64Buf: string): Blob {
+  const arr = base64Buf.split(',');
+  const typeItem = arr[0];
+  const mime = typeItem.match(/:(.*?);/)![1];
+  const bstr = atob(arr[1]);
+  let n = bstr.length;
+  const u8arr = new Uint8Array(n);
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n);
+  }
+  return new Blob([u8arr], { type: mime });
+}
+
+/**
+ * img url to base64
+ * @param url
+ */
+export function urlToBase64(url: string, mineType?: string): Promise<string> {
+  return new Promise((resolve, reject) => {
+    let canvas = document.createElement('CANVAS') as Nullable<HTMLCanvasElement>;
+    const ctx = canvas!.getContext('2d');
+
+    const img = new Image();
+    img.crossOrigin = '';
+    img.onload = function () {
+      if (!canvas || !ctx) {
+        return reject();
+      }
+      canvas.height = img.height;
+      canvas.width = img.width;
+      ctx.drawImage(img, 0, 0);
+      const dataURL = canvas.toDataURL(mineType || 'image/png');
+      canvas = null;
+      resolve(dataURL);
+    };
+    img.src = url;
+  });
+}
--- a/web-vue/packages/core/utils/file/download.ts
+++ b/web-vue/packages/core/utils/file/download.ts
@@ -0,0 +1,131 @@
+// import { openWindow } from '..';
+import { dataURLtoBlob, urlToBase64 } from './base64Conver';
+import { defHttp } from '@jeesite/core/utils/http/axios';
+
+/**
+ * Download online pictures
+ * @param url
+ * @param filename
+ * @param mime
+ * @param bom
+ */
+export function downloadByOnlineUrl(url: string, filename: string, mime?: string, bom?: BlobPart) {
+  urlToBase64(url).then((base64) => {
+    downloadByBase64(base64, filename, mime, bom);
+  });
+}
+
+/**
+ * Download pictures based on base64
+ * @param buf
+ * @param filename
+ * @param mime
+ * @param bom
+ */
+export function downloadByBase64(buf: string, filename: string, mime?: string, bom?: BlobPart) {
+  const base64Buf = dataURLtoBlob(buf);
+  downloadByData(base64Buf, filename, mime, bom);
+}
+
+/**
+ * Download according to the background interface file stream
+ * @param {*} data
+ * @param {*} filename
+ * @param {*} mime
+ * @param {*} bom
+ */
+export function downloadByData(data: BlobPart, filename: string, mime?: string, bom?: BlobPart) {
+  const blobData = typeof bom !== 'undefined' ? [bom, data] : [data];
+  const blob = new Blob(blobData, { type: mime || 'application/octet-stream' });
+  const nav = window.navigator as any;
+  if (typeof nav.msSaveBlob !== 'undefined') {
+    nav.msSaveBlob(blob, filename);
+  } else {
+    const blobURL = window.URL.createObjectURL(blob);
+    const tempLink = document.createElement('a');
+    tempLink.style.display = 'none';
+    tempLink.href = blobURL;
+    tempLink.setAttribute('download', filename);
+    if (typeof tempLink.download === 'undefined') {
+      tempLink.setAttribute('target', '_blank');
+    }
+    document.body.appendChild(tempLink);
+    tempLink.click();
+    document.body.removeChild(tempLink);
+    window.URL.revokeObjectURL(blobURL);
+  }
+}
+
+/**
+ * Download file according to file address
+ * @param {*} sUrl
+ */
+export async function downloadByUrl({
+  url,
+  params,
+  data,
+  // target = '_self',
+  fileName,
+}: {
+  url: string;
+  params?: any;
+  data?: any;
+  // target?: TargetContext;
+  fileName?: string;
+}): Promise<boolean> {
+  const res = await defHttp.post(
+    { url, params, data, responseType: 'blob' },
+    { isReturnNativeResponse: true, joinPrefix: false },
+  );
+  let name = res.headers['content-disposition'];
+  name = name && name.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
+  name = name && name.length >= 1 && name[1].replace("utf-8'zh_cn'", '');
+  name = (name && decodeURIComponent(name)) || fileName || 'jeesite';
+  downloadByData(res.data, name);
+  // axios({
+  //   url: url,
+  //   method: 'post',
+  //   data: data,
+  //   responseType: 'blob',
+  // })
+  //   .then((response) => {
+  //     let name = response.headers['content-disposition'];
+  //     name = name && name.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
+  //     name = name && name.length >= 1 && name[1].replace("utf-8'zh_cn'", '');
+  //     name = name && (decodeURIComponent(name) || fileName || 'jeesite');
+  //     downloadByData(response.data, name);
+  //   })
+  //   .catch((error) => {
+  //     console.error(error);
+  //   });
+
+  // const isChrome = window.navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
+  // const isSafari = window.navigator.userAgent.toLowerCase().indexOf('safari') > -1;
+
+  // if (/(iP)/g.test(window.navigator.userAgent)) {
+  //   console.error('Your browser does not support download!');
+  //   return false;
+  // }
+  // if (isChrome || isSafari) {
+  //   const link = document.createElement('a');
+  //   link.href = url;
+  //   link.target = target;
+
+  //   if (link.download !== undefined) {
+  //     link.download = fileName || url.substring(url.lastIndexOf('/') + 1, url.length);
+  //   }
+
+  //   if (document.createEvent) {
+  //     const e = document.createEvent('MouseEvents');
+  //     e.initEvent('click', true, true);
+  //     link.dispatchEvent(e);
+  //     return true;
+  //   }
+  // }
+  // if (url.indexOf('?') === -1) {
+  //   url += '?download';
+  // }
+
+  // openWindow(url, { target });
+  return true;
+}
--- a/web-vue/packages/core/utils/helper/treeHelper.ts
+++ b/web-vue/packages/core/utils/helper/treeHelper.ts
@@ -0,0 +1,206 @@
+interface TreeHelperConfig {
+  id: string;
+  pid: string;
+  children: string;
+  callback: Fn;
+  fullNameSplit: string;
+}
+const DEFAULT_CONFIG: TreeHelperConfig = {
+  id: 'id',
+  pid: 'pId',
+  children: 'children',
+  callback: () => {},
+  fullNameSplit: '/',
+};
+
+const getConfig = (config: Partial<TreeHelperConfig>) => Object.assign({}, DEFAULT_CONFIG, config);
+
+// tree from list
+export function listToTree<T = any>(list?: any[], config: Partial<TreeHelperConfig> = {}): T[] {
+  const conf = getConfig(config) as TreeHelperConfig;
+  const nodeMap = new Map();
+  const result: T[] = [];
+  const { id, pid, children, fullNameSplit } = conf;
+
+  for (const node of list || []) {
+    node[children] = node[children] || [];
+    nodeMap.set(node[id], node);
+  }
+  for (const node of list || []) {
+    const parent = nodeMap.get(node[pid]);
+    (parent ? parent[children] : result).push(node);
+    if (node.name) {
+      node._name = node.name;
+      if (parent && parent._fullName) {
+        node._fullName = parent._fullName + fullNameSplit + node._name;
+      } else {
+        node._fullName = node._name;
+      }
+    }
+    conf.callback(parent, node);
+  }
+  return result;
+}
+
+export function treeToList<T = any>(tree: any, config: Partial<TreeHelperConfig> = {}): T {
+  config = getConfig(config);
+  const { children } = config;
+  const result: any = [...tree];
+  for (let i = 0; i < result.length; i++) {
+    if (!result[i][children!]) continue;
+    result.splice(i + 1, 0, ...result[i][children!]);
+  }
+  return result;
+}
+
+export function findNode<T = any>(tree: any, func: Fn, config: Partial<TreeHelperConfig> = {}): T | null {
+  config = getConfig(config);
+  const { children } = config;
+  const list = [...tree];
+  for (const node of list) {
+    if (func(node)) return node;
+    node[children!] && list.push(...node[children!]);
+  }
+  return null;
+}
+
+export function findNodeAll<T = any>(tree: any, func: Fn, config: Partial<TreeHelperConfig> = {}): T[] {
+  config = getConfig(config);
+  const { children } = config;
+  const list = [...tree];
+  const result: T[] = [];
+  for (const node of list) {
+    func(node) && result.push(node);
+    node[children!] && list.push(...node[children!]);
+  }
+  return result;
+}
+
+export function findPath<T = any>(tree: any, func: Fn, config: Partial<TreeHelperConfig> = {}): T | T[] | null {
+  config = getConfig(config);
+  const path: T[] = [];
+  const list = [...tree];
+  const visitedSet = new Set();
+  const { children } = config;
+  while (list.length) {
+    const node = list[0];
+    if (visitedSet.has(node)) {
+      path.pop();
+      list.shift();
+    } else {
+      visitedSet.add(node);
+      node[children!] && list.unshift(...node[children!]);
+      path.push(node);
+      if (func(node)) {
+        return path;
+      }
+    }
+  }
+  return null;
+}
+
+export function findPathAll(tree: any, func: Fn, config: Partial<TreeHelperConfig> = {}) {
+  config = getConfig(config);
+  const path: any[] = [];
+  const list = [...tree];
+  const result: any[] = [];
+  const visitedSet = new Set(),
+    { children } = config;
+  while (list.length) {
+    const node = list[0];
+    if (visitedSet.has(node)) {
+      path.pop();
+      list.shift();
+    } else {
+      visitedSet.add(node);
+      node[children!] && list.unshift(...node[children!]);
+      path.push(node);
+      func(node) && result.push([...path]);
+    }
+  }
+  return result;
+}
+
+export function filter<T = any>(
+  tree: T[],
+  func: (n: T) => boolean,
+  config: Partial<TreeHelperConfig> = {},
+  onlySearchLevel?: number,
+): T[] {
+  config = getConfig(config);
+  const children = config.children as string;
+  function listFilter(list: T[], level?: number) {
+    return list
+      .map((node: any) => ({ ...node }))
+      .filter((node) => {
+        if (level === 1) {
+          return func(node);
+        }
+        if (onlySearchLevel && level) {
+          node[children] = node[children] && listFilter(node[children], level - 1);
+          return node[children] && node[children].length;
+        }
+        node[children] = node[children] && listFilter(node[children]);
+        return func(node) || (node[children] && node[children].length);
+      });
+  }
+  return listFilter(tree, onlySearchLevel);
+}
+
+export function forEach<T = any>(tree: T[], func: (n: T) => any, config: Partial<TreeHelperConfig> = {}): void {
+  config = getConfig(config);
+  const list: any[] = [...tree];
+  const { children } = config;
+  for (let i = 0; i < list.length; i++) {
+    //func 返回true就终止遍历，避免大量节点场景下无意义循环，引起浏览器卡顿
+    if (func(list[i])) {
+      return;
+    }
+    children && list[i][children] && list.splice(i + 1, 0, ...list[i][children]);
+  }
+}
+
+/**
+ * @description: Extract tree specified structure
+ */
+export function treeMap<T = any>(treeData: T[], opt: { children?: string; conversion: Fn }): T[] {
+  return treeData.map((item) => treeMapEach(item, opt));
+}
+
+/**
+ * @description: Extract tree specified structure
+ */
+export function treeMapEach(data: any, { children = 'children', conversion }: { children?: string; conversion: Fn }) {
+  const haveChildren = Array.isArray(data[children]) && data[children].length > 0;
+  const conversionData = conversion(data) || {};
+  if (haveChildren) {
+    return {
+      ...conversionData,
+      [children]: data[children].map((i: number) =>
+        treeMapEach(i, {
+          children,
+          conversion,
+        }),
+      ),
+    };
+  } else {
+    return {
+      ...conversionData,
+    };
+  }
+}
+
+/**
+ * 递归遍历树结构
+ * @param treeDatas 树
+ * @param callBack 回调
+ * @param parentNode 父节点
+ */
+export function eachTree(treeDatas: any[], callBack: Fn, parentNode = {}) {
+  treeDatas.forEach((element) => {
+    const newNode = callBack(element, parentNode) || element;
+    if (element.children) {
+      eachTree(element.children, callBack, newNode);
+    }
+  });
+}
--- a/web-vue/packages/core/utils/helper/tsxHelper.tsx
+++ b/web-vue/packages/core/utils/helper/tsxHelper.tsx
@@ -0,0 +1,35 @@
+import { Slots } from 'vue';
+import { isFunction } from '@jeesite/core/utils/is';
+
+/**
+ * @description:  Get slot to prevent empty error
+ */
+export function getSlot(slots: Slots, slot = 'default', data?: any) {
+  if (!slots || !Reflect.has(slots, slot)) {
+    return null;
+  }
+  if (!isFunction(slots[slot])) {
+    console.error(`${slot} is not a function!`);
+    return null;
+  }
+  const slotFn = slots[slot];
+  if (!slotFn) return null;
+  return slotFn(data);
+}
+
+/**
+ * extends slots
+ * @param slots
+ * @param excludeKeys
+ */
+export function extendSlots(slots: Slots, excludeKeys: string[] = []) {
+  const slotKeys = Object.keys(slots);
+  const ret: any = {};
+  slotKeys.map((key) => {
+    if (excludeKeys.includes(key)) {
+      return null;
+    }
+    ret[key] = (data) => getSlot(slots, key, data);
+  });
+  return ret;
+}
--- a/web-vue/packages/core/utils/http/axios/Axios.ts
+++ b/web-vue/packages/core/utils/http/axios/Axios.ts
@@ -0,0 +1,242 @@
+import type { AxiosRequestConfig, AxiosInstance, AxiosResponse, AxiosError } from 'axios';
+import type { RequestOptions, Result, UploadFileParams } from '@jeesite/types/axios';
+import type { CreateAxiosOptions } from './axiosTransform';
+import axios from 'axios';
+import qs from 'qs';
+import { AxiosCanceler } from './axiosCancel';
+import { isFunction } from '@jeesite/core/utils/is';
+import { cloneDeep, omit } from 'lodash-es';
+import { ContentTypeEnum } from '@jeesite/core/enums/httpEnum';
+import { RequestEnum } from '@jeesite/core/enums/httpEnum';
+
+export * from './axiosTransform';
+
+/**
+ * @description:  axios module
+ */
+export class VAxios {
+  private axiosInstance: AxiosInstance;
+  private readonly options: CreateAxiosOptions;
+
+  constructor(options: CreateAxiosOptions) {
+    this.options = options;
+    this.axiosInstance = axios.create(options);
+    this.setupInterceptors();
+  }
+
+  /**
+   * @description:  Create axios instance
+   */
+  private createAxios(config: CreateAxiosOptions): void {
+    this.axiosInstance = axios.create(config);
+  }
+
+  private getTransform() {
+    const { transform } = this.options;
+    return transform;
+  }
+
+  getAxios(): AxiosInstance {
+    return this.axiosInstance;
+  }
+
+  /**
+   * @description: Reconfigure axios
+   */
+  configAxios(config: CreateAxiosOptions) {
+    if (!this.axiosInstance) {
+      return;
+    }
+    this.createAxios(config);
+  }
+
+  /**
+   * @description: Set general header
+   */
+  setHeader(headers: any): void {
+    if (!this.axiosInstance) {
+      return;
+    }
+    Object.assign(this.axiosInstance.defaults.headers, headers);
+  }
+
+  /**
+   * @description: Interceptor configuration
+   */
+  private setupInterceptors() {
+    const transform = this.getTransform();
+    if (!transform) {
+      return;
+    }
+    const { requestInterceptors, requestInterceptorsCatch, responseInterceptors, responseInterceptorsCatch } =
+      transform;
+
+    const axiosCanceler = new AxiosCanceler();
+
+    // Request interceptor configuration processing
+    this.axiosInstance.interceptors.request.use((config: AxiosRequestConfig | any) => {
+      // If cancel repeat request is turned on, then cancel repeat request is prohibited
+      const ignoreCancelToken = config.headers?.ignoreCancelToken;
+
+      const ignoreCancel =
+        ignoreCancelToken !== undefined ? ignoreCancelToken === 'true' : this.options.requestOptions?.ignoreCancelToken;
+
+      !ignoreCancel && axiosCanceler.addPending(config);
+      if (requestInterceptors && isFunction(requestInterceptors)) {
+        config = requestInterceptors(config, this.options);
+      }
+      return config;
+    }, undefined);
+
+    // Request interceptor error capture
+    requestInterceptorsCatch &&
+      isFunction(requestInterceptorsCatch) &&
+      this.axiosInstance.interceptors.request.use(undefined, requestInterceptorsCatch);
+
+    // Response result interceptor processing
+    this.axiosInstance.interceptors.response.use((res: AxiosResponse<any>) => {
+      res && axiosCanceler.removePending(res.config);
+      if (responseInterceptors && isFunction(responseInterceptors)) {
+        res = responseInterceptors(res);
+      }
+      return res;
+    }, undefined);
+
+    // Response result interceptor error capture
+    responseInterceptorsCatch &&
+      isFunction(responseInterceptorsCatch) &&
+      this.axiosInstance.interceptors.response.use(undefined, responseInterceptorsCatch);
+  }
+
+  /**
+   * @description:  File Upload
+   */
+  uploadFile<T = any>(config: AxiosRequestConfig, params: UploadFileParams) {
+    const formData = new window.FormData();
+
+    if (params.data) {
+      Object.keys(params.data).forEach((key) => {
+        if (!params.data) return;
+        const value = params.data[key];
+        if (Array.isArray(value)) {
+          value.forEach((item) => {
+            formData.append(`${key}[]`, item);
+          });
+          return;
+        }
+
+        formData.append(key, params.data[key]);
+      });
+    }
+    formData.append(params.name || 'file', params.file as any, params.filename);
+    const customParams = omit(params, 'file', 'filename');
+
+    Object.keys(customParams).forEach((key) => {
+      formData.append(key, customParams[key]);
+    });
+
+    return this.axiosInstance.request<T>({
+      ...config,
+      method: 'POST',
+      data: formData,
+      headers: {
+        'Content-type': ContentTypeEnum.FORM_DATA,
+        ignoreCancelToken: 'true',
+      },
+    });
+  }
+
+  // support form-data
+  supportFormData(config: AxiosRequestConfig) {
+    const headers = config.headers || this.options.headers;
+    const contentType = headers?.['Content-Type'] || headers?.['content-type'];
+
+    if (
+      contentType !== ContentTypeEnum.FORM_URLENCODED ||
+      !Reflect.has(config, 'data') ||
+      config.method?.toUpperCase() === RequestEnum.GET
+    ) {
+      if (config.url && config.params) {
+        let url = config.url;
+        url += url.indexOf('?') == -1 ? '?' : '&';
+        url += qs.stringify(config.params, { encode: true });
+        config.url = url;
+        config.params = {};
+      }
+      return config;
+    }
+
+    return {
+      ...config,
+      data: qs.stringify(config.data, { arrayFormat: 'indices' }),
+    };
+  }
+
+  get<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
+    return this.request({ ...config, method: 'GET' }, options);
+  }
+
+  post<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
+    return this.request({ ...config, method: 'POST' }, options);
+  }
+
+  postJson<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
+    if (!config.headers) {
+      config.headers = {};
+    }
+    config.headers['content-type'] = ContentTypeEnum.JSON;
+    return this.request({ ...config, method: 'POST' }, options);
+  }
+
+  put<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
+    return this.request({ ...config, method: 'PUT' }, options);
+  }
+
+  delete<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
+    return this.request({ ...config, method: 'DELETE' }, options);
+  }
+
+  request<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
+    let conf: CreateAxiosOptions = cloneDeep(config);
+    const transform = this.getTransform();
+
+    const { requestOptions } = this.options;
+
+    const opt: RequestOptions = Object.assign({}, requestOptions, options);
+
+    const { beforeRequestHook, requestCatchHook, transformRequestHook } = transform || {};
+    if (beforeRequestHook && isFunction(beforeRequestHook)) {
+      conf = beforeRequestHook(conf, opt);
+    }
+    conf.requestOptions = opt;
+
+    conf = this.supportFormData(conf);
+
+    return new Promise((resolve, reject) => {
+      this.axiosInstance
+        .request<any, AxiosResponse<Result>>(conf)
+        .then((res: AxiosResponse<Result>) => {
+          if (transformRequestHook && isFunction(transformRequestHook)) {
+            try {
+              const ret = transformRequestHook(res, opt);
+              resolve(ret);
+            } catch (err) {
+              reject(err || new Error('request error!'));
+            }
+            return;
+          }
+          resolve(res as unknown as Promise<T>);
+        })
+        .catch((e: Error | AxiosError) => {
+          if (requestCatchHook && isFunction(requestCatchHook)) {
+            reject(requestCatchHook(e, opt));
+            return;
+          }
+          if (axios.isAxiosError(e)) {
+            // rewrite error message from axios in here
+          }
+          reject(e);
+        });
+    });
+  }
+}
--- a/web-vue/packages/core/utils/http/axios/axiosCancel.ts
+++ b/web-vue/packages/core/utils/http/axios/axiosCancel.ts
@@ -0,0 +1,60 @@
+import type { AxiosRequestConfig, Canceler } from 'axios';
+import axios from 'axios';
+import { isFunction } from '@jeesite/core/utils/is';
+
+// Used to store the identification and cancellation function of each request
+let pendingMap = new Map<string, Canceler>();
+
+export const getPendingUrl = (config: AxiosRequestConfig) => [config.method, config.url].join('&');
+
+export class AxiosCanceler {
+  /**
+   * Add request
+   * @param {Object} config
+   */
+  addPending(config: AxiosRequestConfig) {
+    this.removePending(config);
+    const url = getPendingUrl(config);
+    config.cancelToken =
+      config.cancelToken ||
+      new axios.CancelToken((cancel) => {
+        if (!pendingMap.has(url)) {
+          // If there is no current request in pending, add it
+          pendingMap.set(url, cancel);
+        }
+      });
+  }
+
+  /**
+   * @description: Clear all pending
+   */
+  removeAllPending() {
+    pendingMap.forEach((cancel) => {
+      cancel && isFunction(cancel) && cancel();
+    });
+    pendingMap.clear();
+  }
+
+  /**
+   * Removal request
+   * @param {Object} config
+   */
+  removePending(config: AxiosRequestConfig) {
+    const url = getPendingUrl(config);
+
+    if (pendingMap.has(url)) {
+      // If there is a current request identifier in pending,
+      // the current request needs to be cancelled and removed
+      const cancel = pendingMap.get(url);
+      cancel && cancel(url);
+      pendingMap.delete(url);
+    }
+  }
+
+  /**
+   * @description: reset
+   */
+  reset(): void {
+    pendingMap = new Map<string, Canceler>();
+  }
+}
--- a/web-vue/packages/core/utils/http/axios/axiosTransform.ts
+++ b/web-vue/packages/core/utils/http/axios/axiosTransform.ts
@@ -0,0 +1,50 @@
+/**
+ * Data processing class, can be configured according to the project
+ */
+import type { AxiosRequestConfig, AxiosResponse } from 'axios';
+import type { RequestOptions, Result } from '@jeesite/types/axios';
+
+export interface CreateAxiosOptions extends AxiosRequestConfig {
+  authenticationHeader?: string;
+  authenticationScheme?: string;
+  transform?: AxiosTransform;
+  requestOptions?: RequestOptions;
+}
+
+export abstract class AxiosTransform {
+  /**
+   * @description: Process configuration before request
+   * @description: Process configuration before request
+   */
+  beforeRequestHook?: (config: AxiosRequestConfig, options: RequestOptions) => AxiosRequestConfig;
+
+  /**
+   * @description: Request successfully processed
+   */
+  transformRequestHook?: (res: AxiosResponse<Result>, options: RequestOptions) => any;
+
+  /**
+   * @description: 请求失败处理
+   */
+  requestCatchHook?: (e: Error, options: RequestOptions) => Promise<any>;
+
+  /**
+   * @description: 请求之前的拦截器
+   */
+  requestInterceptors?: (config: AxiosRequestConfig, options: CreateAxiosOptions) => AxiosRequestConfig;
+
+  /**
+   * @description: 请求之后的拦截器
+   */
+  responseInterceptors?: (res: AxiosResponse<any>) => AxiosResponse<any>;
+
+  /**
+   * @description: 请求之前的拦截器错误处理
+   */
+  requestInterceptorsCatch?: (error: Error) => void;
+
+  /**
+   * @description: 请求之后的拦截器错误处理
+   */
+  responseInterceptorsCatch?: (error: Error) => void;
+}
--- a/web-vue/packages/core/utils/http/axios/checkStatus.ts
+++ b/web-vue/packages/core/utils/http/axios/checkStatus.ts
@@ -0,0 +1,76 @@
+import type { ErrorMessageMode } from '@jeesite/types/axios';
+import { useMessage } from '@jeesite/core/hooks/web/useMessage';
+import { useI18n } from '@jeesite/core/hooks/web/useI18n';
+// import router from '@jeesite/core/router';
+// import { PageEnum } from '@jeesite/core/enums/pageEnum';
+import { useUserStoreWithOut } from '@jeesite/core/store/modules/user';
+import projectSetting from '@jeesite/core/settings/projectSetting';
+import { SessionTimeoutProcessingEnum } from '@jeesite/core/enums/appEnum';
+
+const { showMessageModal, showMessage } = useMessage();
+// const error = createMessage.error!;
+const stp = projectSetting.sessionTimeoutProcessing;
+
+export function checkStatus(status: number, msg: string, errorMessageMode: ErrorMessageMode = 'message'): void {
+  const { t } = useI18n();
+  const userStore = useUserStoreWithOut();
+  let errMessage = '';
+
+  switch (status) {
+    case 400:
+      errMessage = `${msg}`;
+      break;
+    // 401: Not logged in
+    // Jump to the login page if not logged in, and carry the path of the current page
+    // Return to the current page after successful login. This step needs to be operated on the login page.
+    case 401:
+      userStore.setToken(undefined);
+      errMessage = msg || t('sys.api.errMsg401');
+      if (stp === SessionTimeoutProcessingEnum.PAGE_COVERAGE) {
+        userStore.setSessionTimeout(true);
+      } else {
+        userStore.logout(true);
+      }
+      break;
+    case 403:
+      errMessage = msg || t('sys.api.errMsg403');
+      break;
+    // 404请求不存在
+    case 404:
+      errMessage = msg || t('sys.api.errMsg404');
+      break;
+    case 405:
+      errMessage = msg || t('sys.api.errMsg405');
+      break;
+    case 408:
+      errMessage = msg || t('sys.api.errMsg408');
+      break;
+    case 500:
+      errMessage = msg || t('sys.api.errMsg500');
+      break;
+    case 501:
+      errMessage = msg || t('sys.api.errMsg501');
+      break;
+    case 502:
+      errMessage = msg || t('sys.api.errMsg502');
+      break;
+    case 503:
+      errMessage = msg || t('sys.api.errMsg503');
+      break;
+    case 504:
+      errMessage = msg || t('sys.api.errMsg504');
+      break;
+    case 505:
+      errMessage = msg || t('sys.api.errMsg505');
+      break;
+    default:
+  }
+
+  if (errMessage) {
+    if (errorMessageMode === 'modal') {
+      showMessageModal({ title: t('sys.api.errorTip'), content: errMessage }, 'error');
+    } else if (errorMessageMode === 'message') {
+      showMessage({ content: errMessage, key: `global_error_message_status_${status}` }, 'error');
+    }
+  }
+}
--- a/web-vue/packages/core/utils/http/axios/helper.ts
+++ b/web-vue/packages/core/utils/http/axios/helper.ts
@@ -0,0 +1,44 @@
+import { isObject, isString } from '@jeesite/core/utils/is';
+
+const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm';
+
+export function joinTimestamp<T extends boolean>(join: boolean, restful: T): T extends true ? string : object;
+
+export function joinTimestamp(join: boolean, restful = false): string | object {
+  if (!join) {
+    return restful ? '' : {};
+  }
+  const now = new Date().getTime();
+  if (restful) {
+    return `?_t=${now}`;
+  }
+  return { _t: now };
+}
+
+/**
+ * @description: Format request parameter time
+ */
+export function formatRequestDate(params: Recordable) {
+  if (Object.prototype.toString.call(params) !== '[object Object]') {
+    return;
+  }
+
+  for (const key in params) {
+    const format = params[key]?.format ?? null;
+    if (format && typeof format === 'function') {
+      params[key] = params[key].format(DATE_TIME_FORMAT);
+    }
+    const value = params[key];
+    if (value) {
+      if (isString(key)) {
+        try {
+          params[key] = isString(value) ? value.trim() : value;
+        } catch (error: any) {
+          throw new Error(error);
+        }
+      } else if (isObject(value)) {
+        formatRequestDate(params[key]);
+      }
+    }
+  }
+}
--- a/web-vue/packages/core/utils/http/axios/index.ts
+++ b/web-vue/packages/core/utils/http/axios/index.ts
@@ -0,0 +1,307 @@
+// axios配置  可自行根据项目进行更改，只需更改该文件即可，其他文件可以不动
+// The axios configuration can be changed according to the project, just change the file, other files can be left unchanged
+
+import type { AxiosResponse } from 'axios';
+import type { RequestOptions, Result } from '@jeesite/types/axios';
+import type { AxiosTransform, CreateAxiosOptions } from './axiosTransform';
+import { VAxios } from './Axios';
+import { checkStatus } from './checkStatus';
+import { useGlobSetting } from '@jeesite/core/hooks/setting';
+import { useMessage } from '@jeesite/core/hooks/web/useMessage';
+import { RequestEnum, ContentTypeEnum } from '@jeesite/core/enums/httpEnum';
+import { isString } from '@jeesite/core/utils/is';
+import { getToken } from '@jeesite/core/utils/auth';
+import { setObjToUrlParams, deepMerge } from '@jeesite/core/utils';
+import { useErrorLogStoreWithOut } from '@jeesite/core/store/modules/errorLog';
+import { useI18n } from '@jeesite/core/hooks/web/useI18n';
+import { joinTimestamp, formatRequestDate } from './helper';
+import { useUserStoreWithOut } from '@jeesite/core/store/modules/user';
+import { router } from '@jeesite/core/router';
+import { PageEnum } from '@jeesite/core/enums/pageEnum';
+
+const globSetting = useGlobSetting();
+const urlPrefix = globSetting.urlPrefix;
+const { showMessageModal, showMessage } = useMessage();
+let isShowMessage = false;
+let isShowMessageModal = false;
+
+/**
+ * @description: 数据处理，方便区分多种处理方式
+ */
+const transform: AxiosTransform = {
+  /**
+   * @description: 处理请求数据。如果数据不是预期格式，可直接抛出错误
+   */
+  transformRequestHook: (res: AxiosResponse<Result>, options: RequestOptions) => {
+    const { t } = useI18n();
+    const { isTransformResponse, isReturnNativeResponse } = options;
+    // 是否返回原生响应头 比如：需要获取响应头时使用该属性
+    if (isReturnNativeResponse) {
+      return res;
+    }
+    // 不进行任何处理，直接返回
+    // 用于页面代码可能需要直接获取code，data，message这些信息时开启
+    if (!isTransformResponse) {
+      return res.data;
+    }
+    // 错误的时候返回
+
+    const { data, config } = res;
+    // if (!data) { // boolean false return error
+    //   // return '[HTTP] Request has no return value';
+    //   throw new Error(t('sys.api.apiRequestFailed'));
+    // }
+
+    // 处理响应头中的令牌
+    const token = res?.headers[(config as any)?.authenticationHeader];
+    if (token) {
+      const userStore = useUserStoreWithOut();
+      userStore.setToken(token);
+    }
+
+    // 非对象类型的直接返回数据
+    if (typeof data !== 'object') return data;
+
+    //  这里 code，result，message为 后台统一的字段，需要在 types.ts内修改为项目自己的接口返回格式
+    // const { code, result, message } = data;
+    const { sessionid, result, message } = data;
+
+    // 设置会话编码
+    if (data && Reflect.has(data, 'sessionid')) {
+      const userStore = useUserStoreWithOut();
+      userStore.setToken(sessionid);
+    }
+
+    if (data && Reflect.has(data, 'result')) {
+      if (result === 'login' && options.errorMessageMode !== 'none') {
+        if (!isShowMessage) {
+          isShowMessage = true;
+          // userStore.resetState();
+          const currentRoute = router.currentRoute.value;
+          if (currentRoute.path !== '/') {
+            showMessage(data.message, undefined, 180);
+          }
+          if (config.url?.indexOf('__notUpdateSession=true') == -1) {
+            let path = PageEnum.BASE_LOGIN as string;
+            if (currentRoute.path !== '/' && currentRoute.path !== PageEnum.BASE_LOGIN) {
+              path = path + '?redirect=' + currentRoute.fullPath;
+            }
+            router.replace(path);
+          }
+          setTimeout(() => (isShowMessage = false), 1000);
+        }
+        throw new Error(t('sys.api.timeoutMessage'));
+      } else if (result === 'false') {
+        const errorMessage = message || t('sys.api.apiRequestFailed');
+        if (options.errorMessageMode === 'modal') {
+          if (!isShowMessageModal) {
+            isShowMessageModal = true;
+            showMessageModal({
+              content: errorMessage,
+              onOk() {
+                isShowMessageModal = false;
+                return Promise.resolve();
+              },
+            });
+          }
+          throw new Error(errorMessage);
+        } else if (options.errorMessageMode === 'message') {
+          if (!isShowMessage) {
+            isShowMessage = true;
+            showMessage(errorMessage);
+            setTimeout(() => (isShowMessage = false), 1000);
+          }
+          throw new Error(errorMessage);
+        }
+      }
+    }
+    return data;
+  },
+
+  // 请求之前处理config
+  beforeRequestHook: (config, options) => {
+    const { apiUrl, joinPrefix, joinParamsToUrl, formatDate, joinTime = true, urlPrefix } = options;
+
+    if (joinPrefix) {
+      config.url = `${urlPrefix}${config.url}`;
+    }
+
+    if (apiUrl && isString(apiUrl)) {
+      config.url = `${apiUrl}${config.url}`;
+    }
+    const params = config.params || {};
+    const data = config.data || false;
+    formatDate && data && !isString(data) && formatRequestDate(data);
+    if (config.method?.toUpperCase() === RequestEnum.GET) {
+      if (!isString(params)) {
+        // 给 get 请求加上时间戳参数，避免从缓存中拿数据。
+        config.params = Object.assign(params || {}, joinTimestamp(joinTime, false));
+      } else {
+        // 兼容restful风格
+        config.url = config.url + params + `${joinTimestamp(joinTime, true)}`;
+        config.params = undefined;
+      }
+    } else {
+      if (!isString(params)) {
+        formatDate && formatRequestDate(params);
+        if (Reflect.has(config, 'data') && config.data && Object.keys(config.data).length > 0) {
+          config.data = data;
+          config.params = params;
+        } else {
+          // 非GET请求如果没有提供data，则将params视为data
+          config.data = params;
+          config.params = undefined;
+        }
+        if (joinParamsToUrl) {
+          config.url = setObjToUrlParams(config.url as string, Object.assign({}, config.params, config.data));
+        }
+      } else {
+        // 兼容restful风格
+        config.url = config.url + params;
+        config.params = undefined;
+      }
+    }
+    return config;
+  },
+
+  /**
+   * @description: 请求拦截器处理
+   */
+  requestInterceptors: (config: Recordable, options) => {
+    // 请求之前处理config
+    if (config?.requestOptions?.withToken !== false && options.authenticationHeader) {
+      const token = getToken();
+      if (token) {
+        config.headers[options.authenticationHeader] = options.authenticationScheme
+          ? `${options.authenticationScheme} ${token}`
+          : token;
+      }
+    }
+    return config;
+  },
+
+  /**
+   * @description: 响应拦截器处理
+   */
+  responseInterceptors: (res: AxiosResponse<any>) => {
+    return res;
+  },
+
+  /**
+   * @description: 响应错误处理
+   */
+  responseInterceptorsCatch: (error: any) => {
+    const { t } = useI18n();
+    const errorLogStore = useErrorLogStoreWithOut();
+    errorLogStore.addAjaxErrorInfo(error);
+    const { response, code, message, config } = error || {};
+    const errorMessageMode = config?.requestOptions?.errorMessageMode || 'none';
+    const msg: string = response?.data?.message ?? '';
+    const err: string = error?.toString?.() ?? '';
+
+    if (errorMessageMode === 'none') {
+      return Promise.resolve(response);
+    }
+
+    let errMessage = '';
+    try {
+      if (code === 'ECONNABORTED' && message.indexOf('timeout') !== -1) {
+        errMessage = t('sys.api.apiTimeoutMessage');
+      } else if (err?.includes('Network Error')) {
+        errMessage = t('sys.api.networkExceptionMsg');
+      } else if (code === 'ERR_BAD_RESPONSE') {
+        errMessage = t('sys.api.apiRequestFailed');
+      }
+
+      if (errMessage) {
+        if (errorMessageMode === 'modal') {
+          if (!isShowMessageModal) {
+            isShowMessageModal = true;
+            showMessageModal({
+              title: t('sys.api.errorTip'),
+              content: msg || errMessage,
+              onOk() {
+                isShowMessageModal = false;
+                return Promise.resolve(response);
+              },
+            });
+          }
+        } else if (errorMessageMode === 'message') {
+          if (!isShowMessage) {
+            isShowMessage = true;
+            showMessage({ content: msg || errMessage }, 'error');
+            setTimeout(() => (isShowMessage = false), 1000);
+          }
+        }
+        return Promise.reject(error);
+      }
+    } catch (error: any) {
+      throw new Error(error);
+    }
+
+    checkStatus(response?.status, msg, errorMessageMode);
+    return Promise.reject(error);
+  },
+};
+
+function createAxios(opt?: Partial<CreateAxiosOptions>) {
+  return new VAxios(
+    deepMerge(
+      {
+        // authenticationHeader: 'Authorization',
+        // authenticationScheme: 'Bearer',
+        authenticationHeader: 'x-token',
+        authenticationScheme: '',
+        // 请求超时时间，默认3分钟
+        timeout: 3 * 60 * 1000,
+        // 基础接口地址
+        // baseURL: globSetting.apiUrl,
+        // 默认请求头设置
+        // headers: { 'Content-Type': ContentTypeEnum.JSON },
+        // 如果是form-data格式
+        headers: {
+          'content-type': ContentTypeEnum.FORM_URLENCODED,
+          'x-requested-with': 'XMLHttpRequest',
+          'x-ajax': 'json',
+        },
+        // 数据处理方式
+        transform,
+        // 配置项，下面的选项都可以在独立的接口请求中覆盖
+        requestOptions: {
+          // 默认将prefix 添加到url
+          joinPrefix: true,
+          // 是否返回原生响应头 比如：需要获取响应头时使用该属性
+          isReturnNativeResponse: false,
+          // 需要对返回数据进行处理
+          isTransformResponse: true,
+          // post请求的时候添加参数到url
+          joinParamsToUrl: false,
+          // 格式化提交参数时间
+          formatDate: false,
+          // 消息提示类型
+          errorMessageMode: 'modal',
+          // 接口地址
+          apiUrl: globSetting.apiUrl,
+          // 接口拼接地址
+          urlPrefix: urlPrefix,
+          //  是否加入时间戳
+          joinTime: true,
+          // 忽略重复请求
+          ignoreCancelToken: true,
+          // 是否携带token
+          withToken: true,
+        },
+      },
+      opt || {},
+    ),
+  );
+}
+export const defHttp = createAxios();
+
+// other api url
+// export const otherHttp = createAxios({
+//   requestOptions: {
+//     apiUrl: 'xxx',
+//     urlPrefix: 'xxx',
+//   },
+// });
--- a/web-vue/packages/core/utils/index.ts
+++ b/web-vue/packages/core/utils/index.ts
@@ -0,0 +1,117 @@
+import type { RouteLocationNormalized, RouteRecordNormalized } from 'vue-router';
+import type { App, Events, HTMLAttributes, Plugin } from 'vue';
+
+import { unref, Component } from 'vue';
+import { isObject } from '@jeesite/core/utils/is';
+
+export const noop = () => {};
+
+/**
+ * @description:  Set ui mount node
+ */
+export function getPopupContainer(node?: HTMLElement): HTMLElement {
+  return (node?.parentNode as HTMLElement) ?? document.body;
+}
+
+/**
+ * Add the object as a parameter to the URL
+ * @param baseUrl url
+ * @param obj
+ * @returns {string}
+ * eg:
+ *  let obj = {a: '3', b: '4'}
+ *  setObjToUrlParams('www.baidu.com', obj)
+ *  ==>www.baidu.com?a=3&b=4
+ */
+export function setObjToUrlParams(baseUrl: string, obj: any): string {
+  let parameters = '';
+  for (const key in obj) {
+    parameters += key + '=' + encodeURIComponent(obj[key]) + '&';
+  }
+  parameters = parameters.replace(/&$/, '');
+  return /\?$/.test(baseUrl) ? baseUrl + parameters : baseUrl.replace(/\/?$/, '?') + parameters;
+}
+
+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;
+}
+
+export function openWindow(
+  url: string,
+  opt?: { target?: TargetContext | string; noopener?: boolean; noreferrer?: boolean },
+) {
+  const { target = '__blank', noopener = true, noreferrer = true } = opt || {};
+  const feature: string[] = [];
+  noopener && feature.push('noopener=yes');
+  noreferrer && feature.push('noreferrer=yes');
+  // t h i n k g e m / j e e s i t e
+  if (url && (url.endsWith('?___blank') || url.endsWith('&___blank'))) {
+    url = url.substring(0, url.length - 9);
+  }
+  window.open(url, target, feature.join(','));
+}
+
+export function openWindowLayer(url: string, opt?: { width?: number; height?: number }) {
+  const win = window as any;
+  let layerWidth = opt?.width || win.$(win).width();
+  if (layerWidth < 800) {
+    layerWidth -= 15 * 2;
+  } else {
+    layerWidth -= 100 * 2;
+  }
+  let layerHeight = opt?.height || win.$(win).height();
+  if (layerHeight < 500) {
+    layerHeight -= 15 * 2;
+  } else {
+    layerHeight -= 25 * 2;
+  }
+  win.layer.open({
+    type: 2,
+    maxmin: true,
+    shadeClose: true, // 点击背景关闭
+    title: false,
+    area: [layerWidth + 'px', layerHeight + 'px'],
+    method: 'get',
+    content: url,
+  });
+}
+
+// dynamic use hook props
+export function getDynamicProps<T, U>(props: T): Partial<U> {
+  const ret: Recordable = {};
+
+  Object.keys(props as any).map((key) => {
+    ret[key] = unref((props as Recordable)[key]);
+  });
+
+  return ret as Partial<U>;
+}
+
+export function getRawRoute(route: RouteLocationNormalized): RouteLocationNormalized {
+  if (!route) return route;
+  const { matched, ...opt } = route;
+  return {
+    ...opt,
+    matched: (matched
+      ? matched.map((item) => ({
+          meta: item.meta,
+          name: item.name,
+          path: item.path,
+        }))
+      : undefined) as RouteRecordNormalized[],
+  };
+}
+
+export const withInstall = <T extends Component>(component: T, alias?: string) => {
+  component['install'] = (app: App) => {
+    app.component(component.name || component['displayName'], component);
+    if (alias) {
+      app.config.globalProperties[alias] = component;
+    }
+  };
+  return component as T & Plugin & HTMLAttributes & Events;
+};
--- a/web-vue/packages/core/utils/is.ts
+++ b/web-vue/packages/core/utils/is.ts
@@ -0,0 +1,102 @@
+const toString = Object.prototype.toString;
+
+export function is(val: unknown, type: string) {
+  return toString.call(val) === `[object ${type}]`;
+}
+
+export function isDef<T = unknown>(val?: T): val is T {
+  return typeof val !== 'undefined';
+}
+
+export function isUnDef<T = unknown>(val?: T): val is T {
+  return !isDef(val);
+}
+
+export function isObject(val: any): val is Record<any, any> {
+  return val !== null && is(val, 'Object');
+}
+
+export function isEmpty<T = unknown>(val: T): val is T {
+  if (!isDef(val)) return true;
+
+  if (isArray(val) || isString(val)) {
+    return val.length === 0;
+  }
+
+  if (val instanceof Map || val instanceof Set) {
+    return val.size === 0;
+  }
+
+  if (isObject(val)) {
+    return Object.keys(val).length === 0;
+  }
+
+  return false;
+}
+
+export function isDate(val: unknown): val is Date {
+  return is(val, 'Date');
+}
+
+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);
+}
+
+export function isNumber(val: unknown): val is number {
+  return is(val, 'Number');
+}
+
+export function isPromise<T = any>(val: unknown): val is Promise<T> {
+  return is(val, 'Promise') && isObject(val) && isFunction(val.then) && isFunction(val.catch);
+}
+
+export function isString(val: unknown): val is string {
+  return is(val, 'String');
+}
+
+export function isFunction(val: unknown): val is Function {
+  return typeof val === 'function';
+}
+
+export function isBoolean(val: unknown): val is boolean {
+  return is(val, 'Boolean');
+}
+
+export function isRegExp(val: unknown): val is RegExp {
+  return is(val, 'RegExp');
+}
+
+export function isArray(val: any): val is Array<any> {
+  return val && Array.isArray(val);
+}
+
+export function isWindow(val: any): val is Window {
+  return typeof window !== 'undefined' && is(val, 'Window');
+}
+
+export function isElement(val: unknown): val is Element {
+  return isObject(val) && !!val.tagName;
+}
+
+export function isMap(val: unknown): val is Map<any, any> {
+  return is(val, 'Map');
+}
+
+export const isServer = typeof window === 'undefined';
+
+export const isClient = !isServer;
+
+export function isUrl(path: string): boolean {
+  if (path && path.endsWith('___blank')) return true;
+  const reg =
+    /(((^https?:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[\w]*))?)$/;
+  return reg.test(path);
+}
--- a/web-vue/packages/core/utils/lib/echarts.ts
+++ b/web-vue/packages/core/utils/lib/echarts.ts
@@ -0,0 +1,48 @@
+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;
--- a/web-vue/packages/core/utils/log.ts
+++ b/web-vue/packages/core/utils/log.ts
@@ -0,0 +1,9 @@
+export const env = import.meta.env;
+
+export function warn(message: string) {
+  console.warn(`[${env.VITE_GLOB_APP_TITLE} warn]:${message}`);
+}
+
+export function error(message: string) {
+  throw new Error(`[${env.VITE_GLOB_APP_TITLE} error]:${message}`);
+}
--- a/web-vue/packages/core/utils/mitt.ts
+++ b/web-vue/packages/core/utils/mitt.ts
@@ -0,0 +1,129 @@
+/**
+ * copy to https://github.com/developit/mitt
+ * Expand clear method
+ */
+export type EventType = string | symbol;
+
+// An event handler can take an optional event argument
+// and should not return a value
+export type Handler<T = unknown> = (event: T) => void;
+export type WildcardHandler<T = Record<string, unknown>> = (type: keyof T, event: T[keyof T]) => 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 Emitter<Events extends Record<EventType, unknown>> {
+  all: EventHandlerMap<Events>;
+
+  on<Key extends keyof Events>(type: Key, handler: Handler<Events[Key]>, isOne?: boolean): void;
+  on(type: '*', handler: WildcardHandler<Events>, isOne?: boolean): void;
+
+  off<Key extends keyof Events>(type: Key, handler?: Handler<Events[Key]>, isAll?: boolean): void;
+  off(type: '*', handler: WildcardHandler<Events>, isAll?: boolean): void;
+
+  emit<Key extends keyof Events>(type: Key, event: Events[Key]): void;
+  emit<Key extends keyof Events>(type: undefined extends Events[Key] ? Key : never): void;
+  clear(): void;
+}
+
+/**
+ * Mitt: Tiny (~200b) functional event emitter / pubsub.
+ * @name mitt
+ * @returns {Mitt}
+ */
+export function mitt<Events extends Record<EventType, unknown>>(all?: EventHandlerMap<Events>): Emitter<Events> {
+  type GenericEventHandler = Handler<Events[keyof Events]> | WildcardHandler<Events>;
+  all = all || new Map();
+
+  return {
+    /**
+     * A Map of event names to registered handler functions.
+     */
+    all,
+
+    /**
+     * 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 [isOne=false] 只存一份事件，而不是追加事件
+     * @memberOf mitt
+     */
+    on<Key extends keyof Events>(type: Key, handler: GenericEventHandler, isOne = false) {
+      if (isOne) {
+        all?.set(type, [handler] as EventHandlerList<Events[keyof Events]>);
+        return;
+      }
+      const handlers: Array<GenericEventHandler> | undefined = all!.get(type);
+      if (handlers) {
+        handlers.push(handler);
+      } else {
+        all!.set(type, [handler] as EventHandlerList<Events[keyof Events]>);
+      }
+    },
+
+    /**
+     * 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
+     * @param [isAll=false] 是否取消绑定 type 的所有事件
+     * @memberOf mitt
+     */
+    off<Key extends keyof Events>(type: Key, handler?: GenericEventHandler, isAll = false) {
+      if (!isAll) {
+        all?.set(type, []);
+        return;
+      }
+      const handlers: Array<GenericEventHandler> | undefined = all!.get(type);
+      if (handlers) {
+        if (handler) {
+          handlers.splice(handlers.indexOf(handler) >>> 0, 1);
+        } 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);
+      if (handlers) {
+        (handlers as EventHandlerList<Events[keyof Events]>).slice().forEach((handler) => {
+          handler(evt as Events[Key]);
+        });
+      }
+
+      handlers = all!.get('*');
+      if (handlers) {
+        (handlers as WildCardEventHandlerList<Events>).slice().forEach((handler) => {
+          handler(type, evt as Events[Key]);
+        });
+      }
+    },
+
+    /**
+     * Clear all
+     */
+    clear() {
+      this.all.clear();
+    },
+  };
+}
+
+export default mitt;
--- a/web-vue/packages/core/utils/propTypes.ts
+++ b/web-vue/packages/core/utils/propTypes.ts
@@ -0,0 +1,34 @@
+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>;
+  // readonly trueBool: VueTypeValidableDef<boolean>;
+};
+
+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 };
--- a/web-vue/packages/core/utils/uuid.ts
+++ b/web-vue/packages/core/utils/uuid.ts
@@ -0,0 +1,28 @@
+const hexList: string[] = [];
+for (let i = 0; i <= 15; i++) {
+  hexList[i] = i.toString(16);
+}
+
+export function buildUUID(): string {
+  let uuid = '';
+  for (let i = 1; i <= 36; i++) {
+    if (i === 9 || i === 14 || i === 19 || i === 24) {
+      uuid += '-';
+    } else if (i === 15) {
+      uuid += 4;
+    } else if (i === 20) {
+      uuid += hexList[(Math.random() * 4) | 8];
+    } else {
+      uuid += hexList[(Math.random() * 16) | 0];
+    }
+  }
+  return uuid.replace(/-/g, '');
+}
+
+let unique = 0;
+export function buildShortUUID(prefix = ''): string {
+  const time = Date.now();
+  const random = Math.floor(Math.random() * 1000000000);
+  unique++;
+  return prefix + '_' + random + unique + String(time);
+}