:art:添加静态打包

web/src/utils/auth/auth.js

@@ -0,0 +1,17 @@
+import { router } from '@/router'
+
+export function toLogin() {
+  const currentRoute = unref(router.currentRoute)
+  const needRedirect =
+    !currentRoute.meta.requireAuth && !['/404', '/login'].includes(router.currentRoute.value.path)
+  router.replace({
+    path: '/login',
+    query: needRedirect ? { ...currentRoute.query, redirect: currentRoute.path } : {},
+  })
+}
+
+export function toFourZeroFour() {
+  router.replace({
+    path: '/404',
+  })
+}

web/src/utils/auth/index.js

@@ -0,0 +1,2 @@
+export * from './auth'
+export * from './token'

web/src/utils/auth/token.js

@@ -0,0 +1,29 @@
+import { lStorage } from '@/utils'
+
+const TOKEN_CODE = 'token'
+const X_TOKEN_CODE = 'X_TOKEN_CODE'
+
+export function getToken() {
+  return lStorage.get(TOKEN_CODE)
+}
+
+export function getTokenAll() {
+  return lStorage.getItem(TOKEN_CODE)
+}
+
+export function getXToken() {
+  return lStorage.get(X_TOKEN_CODE)
+}
+
+export function setXToken(token) {
+  lStorage.set(X_TOKEN_CODE,token)
+}
+
+export function setToken(token,expireAt) {
+  lStorage.set(TOKEN_CODE, token,expireAt)
+}
+
+export function removeToken() {
+  lStorage.remove(TOKEN_CODE)
+}
+

web/src/utils/common/common.js

@@ -0,0 +1,99 @@
+import dayjs from 'dayjs'
+
+/**
+ * @desc  格式化时间
+ * @param {(Object|string|number)} time
+ * @param {string} format
+ * @returns {string | null}
+ */
+export function formatDateTime(time = undefined, format = 'YYYY-MM-DD HH:mm:ss') {
+  return dayjs(time).format(format)
+}
+
+export function formatDate(date = undefined, format = 'YYYY-MM-DD') {
+  return formatDateTime(date, format)
+}
+
+/**
+ * @desc  函数节流
+ * @param {Function} fn
+ * @param {Number} wait
+ * @returns {Function}
+ */
+export function throttle(fn, wait) {
+  var context, args
+  var previous = 0
+
+  return function () {
+    var now = +new Date()
+    context = this
+    args = arguments
+    if (now - previous > wait) {
+      fn.apply(context, args)
+      previous = now
+    }
+  }
+}
+
+/**
+ * @desc  函数防抖
+ * @param {Function} func
+ * @param {number} wait
+ * @param {boolean} immediate
+ * @return {*}
+ */
+export function debounce(method, wait, immediate) {
+  let timeout
+  return function (...args) {
+    let context = this
+    if (timeout) {
+      clearTimeout(timeout)
+    }
+    // 立即执行需要两个条件，一是immediate为true，二是timeout未被赋值或被置为null
+    if (immediate) {
+      /**
+       * 如果定时器不存在，则立即执行，并设置一个定时器，wait毫秒后将定时器置为null
+       * 这样确保立即执行后wait毫秒内不会被再次触发
+       */
+      let callNow = !timeout
+      timeout = setTimeout(() => {
+        timeout = null
+      }, wait)
+      if (callNow) {
+        method.apply(context, args)
+      }
+    } else {
+      // 如果immediate为false，则函数wait毫秒后执行
+      timeout = setTimeout(() => {
+        /**
+         * args是一个类数组对象，所以使用fn.apply
+         * 也可写作method.call(context, ...args)
+         */
+        method.apply(context, args)
+      }, wait)
+    }
+  }
+}
+
+/**
+ *
+ * @param {HTMLElement} el
+ * @param {Function} cb
+ * @return {ResizeObserver}
+ */
+export function useResize(el, cb) {
+  const observer = new ResizeObserver((entries) => {
+    cb(entries[0].contentRect)
+  })
+  observer.observe(el)
+  return observer
+}
+
+ // 超长省略号显示
+export function ellipsis(str) {
+  if (!str) return "";
+  if (str.length >= 10) {
+    return str.slice(0, 10) + "...";
+  }
+  return str;
+}

web/src/utils/common/icon.js

@@ -0,0 +1,12 @@
+import { h } from 'vue'
+import { Icon } from '@iconify/vue'
+import { NIcon } from 'naive-ui'
+import SvgIcon from '@/components/icon/SvgIcon.vue'
+
+export function renderIcon(icon, props = { size: 12 }) {
+  return () => h(NIcon, props, { default: () => h(Icon, { icon }) })
+}
+
+export function renderCustomIcon(icon, props = { size: 12 }) {
+  return () => h(NIcon, props, { default: () => h(SvgIcon, { icon }) })
+}

web/src/utils/common/index.js

@@ -0,0 +1,4 @@
+export * from './common'
+export * from './is'
+export * from './icon'
+export * from './naiveTools'

web/src/utils/common/is.js

@@ -0,0 +1,119 @@
+const toString = Object.prototype.toString
+
+export function is(val, type) {
+  return toString.call(val) === `[object ${type}]`
+}
+
+export function isDef(val) {
+  return typeof val !== 'undefined'
+}
+
+export function isUndef(val) {
+  return typeof val === 'undefined'
+}
+
+export function isNull(val) {
+  return val === null
+}
+
+export function isWhitespace(val) {
+  return val === ''
+}
+
+export function isObject(val) {
+  return !isNull(val) && is(val, 'Object')
+}
+
+export function isArray(val) {
+  return val && Array.isArray(val)
+}
+
+export function isString(val) {
+  return is(val, 'String')
+}
+
+export function isNumber(val) {
+  return is(val, 'Number')
+}
+
+export function isBoolean(val) {
+  return is(val, 'Boolean')
+}
+
+export function isDate(val) {
+  return is(val, 'Date')
+}
+
+export function isRegExp(val) {
+  return is(val, 'RegExp')
+}
+
+export function isFunction(val) {
+  return typeof val === 'function'
+}
+
+export function isPromise(val) {
+  return is(val, 'Promise') && isObject(val) && isFunction(val.then) && isFunction(val.catch)
+}
+
+export function isElement(val) {
+  return isObject(val) && !!val.tagName
+}
+
+export function isWindow(val) {
+  return typeof window !== 'undefined' && isDef(window) && is(val, 'Window')
+}
+
+export function isNullOrUndef(val) {
+  return isNull(val) || isUndef(val)
+}
+
+export function isNullOrWhitespace(val) {
+  return isNullOrUndef(val) || isWhitespace(val)
+}
+
+/** 空数组 | 空字符串 | 空对象 | 空Map | 空Set */
+export function isEmpty(val) {
+  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
+}
+
+/**
+ * * 类似mysql的IFNULL函数
+ * * 第一个参数为null/undefined/'' 则返回第二个参数作为备用值，否则返回第一个参数
+ * @param {Number|Boolean|String} val
+ * @param {Number|Boolean|String} def
+ * @returns
+ */
+export function ifNull(val, def = '') {
+  return isNullOrWhitespace(val) ? def : val
+}
+
+export function isUrl(path) {
+  const reg =
+    /(((^https?:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[\w]*))?)$/
+  return reg.test(path)
+}
+
+/**
+ * @param {string} path
+ * @returns {Boolean}
+ */
+export function isExternal(path) {
+  return /^(https?:|mailto:|tel:)/.test(path)
+}
+
+export const isServer = typeof window === 'undefined'
+
+export const isClient = !isServer

web/src/utils/common/naiveTools.js

@@ -0,0 +1,99 @@
+import * as NaiveUI from 'naive-ui'
+import { isNullOrUndef } from '@/utils'
+import { naiveThemeOverrides as themeOverrides } from '~/settings'
+import { useAppStore } from '@/store/modules/app'
+
+export function setupMessage(NMessage) {
+  let loadingMessage = null
+  class Message {
+    /**
+     * 规则：
+     * * loading message只显示一个，新的message会替换正在显示的loading message
+     * * loading message不会自动清除，除非被替换成非loading message，非loading message默认2秒后自动清除
+     */
+
+    removeMessage(message = loadingMessage, duration = 2000) {
+      setTimeout(() => {
+        if (message) {
+          message.destroy()
+          message = null
+        }
+      }, duration)
+    }
+
+    showMessage(type, content, option = {}) {
+      if (loadingMessage && loadingMessage.type === 'loading') {
+        // 如果存在则替换正在显示的loading message
+        loadingMessage.type = type
+        loadingMessage.content = content
+
+        if (type !== 'loading') {
+          // 非loading message需设置自动清除
+          this.removeMessage(loadingMessage, option.duration)
+        }
+      } else {
+        // 不存在正在显示的loading则新建一个message,如果新建的message是loading message则将message赋值存储下来
+        let message = NMessage[type](content, option)
+        if (type === 'loading') {
+          loadingMessage = message
+        }
+      }
+    }
+
+    loading(content) {
+      this.showMessage('loading', content, { duration: 0 })
+    }
+
+    success(content, option = {}) {
+      this.showMessage('success', content, option)
+    }
+
+    error(content, option = {}) {
+      this.showMessage('error', content, option)
+    }
+
+    info(content, option = {}) {
+      this.showMessage('info', content, option)
+    }
+
+    warning(content, option = {}) {
+      this.showMessage('warning', content, option)
+    }
+  }
+
+  return new Message()
+}
+
+export function setupDialog(NDialog) {
+  NDialog.confirm = function (option = {}) {
+    const showIcon = !isNullOrUndef(option.title)
+    return NDialog[option.type || 'warning']({
+      showIcon,
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: option.confirm,
+      onNegativeClick: option.cancel,
+      onMaskClick: option.cancel,
+      ...option,
+    })
+  }
+
+  return NDialog
+}
+
+export function setupNaiveDiscreteApi() {
+  const appStore = useAppStore()
+  const configProviderProps = computed(() => ({
+    theme: appStore.isDark ? NaiveUI.darkTheme : undefined,
+    themeOverrides,
+  }))
+  const { message, dialog, notification, loadingBar } = NaiveUI.createDiscreteApi(
+    ['message', 'dialog', 'notification', 'loadingBar'],
+    { configProviderProps }
+  )
+
+  window.$loadingBar = loadingBar
+  window.$notification = notification
+  window.$message = setupMessage(message)
+  window.$dialog = setupDialog(dialog)
+}

web/src/utils/http/helpers.js

@@ -0,0 +1,33 @@
+import { useUserStore } from '@/store'
+
+export function addBaseParams(params) {
+  if (!params.userId) {
+    params.userId = useUserStore().id
+  }
+}
+
+export function resolveResError(code, message) {
+  switch (code) {
+    case 400:
+      message = message ?? '请求参数错误'
+      break
+    case 401:
+      message = message ?? '登录已过期'
+      useUserStore().logout()
+      break
+    case 403:
+      message = message ?? '没有权限'
+      break
+    case 404:
+      message = message ?? '资源或接口不存在'
+      break
+    case 500:
+      message = message ?? '服务器异常'
+      useUserStore().logout()
+      break
+    default:
+      message = message ?? `【${code}】: 未知异常!`
+      break
+  }
+  return message
+}

web/src/utils/http/index.js

@@ -0,0 +1,19 @@
+import axios from 'axios'
+import { resReject, resResolve, reqReject, reqResolve } from './interceptors'
+
+export function createAxios(options = {}) {
+  const defaultOptions = {
+    timeout: 120000,
+  }
+  const service = axios.create({
+    ...defaultOptions,
+    ...options,
+  })
+  service.interceptors.request.use(reqResolve, reqReject)
+  service.interceptors.response.use(resResolve, resReject)
+  return service
+}
+
+export const request = createAxios({
+  baseURL: import.meta.env.VITE_BASE_API,
+})

web/src/utils/http/interceptors.js

@@ -0,0 +1,75 @@
+import { getToken, getTokenAll, getXToken, setToken, setXToken } from '@/utils'
+import { resolveResError } from './helpers'
+
+export function reqResolve(config) {
+  // 处理不需要token的请求
+  if (config.noNeedToken) {
+    return config
+  }
+
+  const token = getToken()
+  if (!token) {
+    return Promise.reject({ code: 401, message: '登录已过期，请重新登录！' })
+  }
+
+  // if (expire < Date.now()) {
+  //   return Promise.reject({ code: 401, message: '登录已过期，请重新登录！' })
+  // }
+
+  /**
+   * * 加上 token
+   * ! 认证方案: JWT Bearer
+   */
+  config.headers.Authorization = config.headers.Authorization || token
+  config.headers.set('X-TOKEN', getXToken())
+
+  return config
+}
+
+export function reqReject(error) {
+  return Promise.reject(error)
+}
+
+export function resResolve(response) {
+  // 设置token
+  if (response.headers.get('Authorization')) {
+    const { expire } = getTokenAll()
+    setToken(response.headers.get('Authorization'),expire / 1000)
+    setXToken(response.headers.get('X-TOKEN'))
+  }
+  // TODO: 处理不同的 response.headers
+  const { data, status, config, statusText } = response
+  if (data?.code !== 200 && status !== 200) {
+    const code = data?.code ?? status
+
+    /** 根据code处理对应的操作，并返回处理后的message */
+    const message = resolveResError(code, data?.message ?? statusText)
+
+    /** 需要错误提醒 */
+    !config.noNeedTip && window.$message?.error(message)
+    return Promise.reject({ code, message, error: data || response })
+  }
+
+  return Promise.resolve(response)
+}
+
+export function resReject(error) {
+  if (!error || !error.response) {
+    const code = error?.code
+    /** 根据code处理对应的操作，并返回处理后的message */
+    const message = resolveResError(code, error.message)
+    window.$message?.error(message)
+    return Promise.reject({ code, message, error })
+  }
+  if (error.response.headers.get('Authorization')) {
+    const { expire } = getTokenAll()
+    setToken(error.response.headers.get('Authorization'),expire / 1000)
+    setXToken(error.response.headers.get('X-TOKEN'))
+  }
+  const { data, status, config } = error.response
+  const code = data?.code ?? status
+  const message = resolveResError(code, data?.message ?? error.message)
+  /** 需要错误提醒 */
+  !config?.noNeedTip && window.$message?.error(message)
+  return Promise.reject({ code, message, error: error.response?.data || error.response })
+}

web/src/utils/index.js

@@ -0,0 +1,4 @@
+export * from './common'
+export * from './storage'
+export * from './http'
+export * from './auth'

web/src/utils/storage/index.js

@@ -0,0 +1,21 @@
+import { createStorage } from './storage'
+
+const prefixKey = 'Vue_Naive_Admin_'
+
+export const createLocalStorage = function (option = {}) {
+  return createStorage({
+    prefixKey: option.prefixKey || '',
+    storage: localStorage,
+  })
+}
+
+export const createSessionStorage = function (option = {}) {
+  return createStorage({
+    prefixKey: option.prefixKey || '',
+    storage: sessionStorage,
+  })
+}
+
+export const lStorage = createLocalStorage({ prefixKey })
+
+export const sStorage = createSessionStorage({ prefixKey })

web/src/utils/storage/storage.js

@@ -0,0 +1,55 @@
+import { isNullOrUndef } from '@/utils'
+
+class Storage {
+  constructor(option) {
+    this.storage = option.storage
+    this.prefixKey = option.prefixKey
+  }
+
+  getKey(key) {
+    return `${this.prefixKey}${key}`.toUpperCase()
+  }
+
+  set(key, value, expire) {
+    const stringData = JSON.stringify({
+      value,
+      time: Date.now(),
+      expire: !isNullOrUndef(expire) ? expire * 1000 : null,
+    })
+    this.storage.setItem(this.getKey(key), stringData)
+  }
+
+  get(key) {
+    const { value } = this.getItem(key, {})
+    return value
+  }
+
+  getItem(key, def = null) {
+    const val = this.storage.getItem(this.getKey(key))
+    if (!val) return def
+    try {
+      const data = JSON.parse(val)
+      const { value, time, expire } = data
+      if (isNullOrUndef(expire) || expire > Date.now()) {
+        return { value, time, expire }
+      }
+      this.remove(key)
+      return def
+    } catch (error) {
+      this.remove(key)
+      return def
+    }
+  }
+
+  remove(key) {
+    this.storage.removeItem(this.getKey(key))
+  }
+
+  clear() {
+    this.storage.clear()
+  }
+}
+
+export function createStorage({ prefixKey = '', storage = sessionStorage }) {
+  return new Storage({ prefixKey, storage })
+}