first commit

resources/admin/support/cache.ts

@@ -0,0 +1,32 @@
+export default class Cache {
+  private static readonly prefix:string = 'catchadmin_'
+  /**
+     * set
+     *
+     * @param key
+     * @param value
+     */
+  static set (key:string, value: any) : void {
+    window.localStorage.setItem(Cache.prefix + key, value)
+  }
+
+  /**
+     * get
+     *
+     * @param key
+     * @returns
+     */
+  static get (key: string) : any {
+    return window.localStorage.getItem(Cache.prefix + key)
+  }
+
+  /**
+     * delete
+     *
+     * @param key
+     * @returns
+     */
+  static del (key: string) : void {
+    window.localStorage.removeItem(Cache.prefix + key)
+  }
+}

resources/admin/support/catchAdmin.ts

@@ -0,0 +1,88 @@
+import { createApp } from 'vue'
+import type { App as app } from 'vue'
+import App from '/admin/App.vue'
+import router, { bootstrapRouter } from '/admin/router'
+import ElementPlus from 'element-plus'
+import zh from 'element-plus/es/locale/lang/zh-cn'
+import { bootstrapStore } from '/admin/stores'
+import Cache from './cache'
+import { bootstrapI18n } from '/admin/i18n'
+import guard from '/admin/router/guard'
+
+/**
+ * catchadmin
+ */
+export default class CatchAdmin {
+  protected app: app
+
+  protected element: string
+
+  /**
+   * construct
+   *
+   * @param ele
+   */
+  constructor(ele: string = '#app') {
+    this.app = createApp(App)
+    this.element = ele
+  }
+
+  /**
+   * admin boot
+   */
+  bootstrap(): void {
+    this.useElementPlus().usePinia().useI18n().useRouter().mount()
+  }
+
+  /**
+   * 挂载节点
+   *
+   * @returns
+   */
+  protected mount(): void {
+    this.app.mount(this.element)
+  }
+
+  /**
+   * 加载路由
+   *
+   * @returns
+   */
+  protected useRouter(): CatchAdmin {
+    guard(router)
+
+    bootstrapRouter(this.app)
+
+    return this
+  }
+
+  /**
+   * ui
+   *
+   * @returns
+   */
+  protected useElementPlus(): CatchAdmin {
+    this.app.use(ElementPlus, {
+      locale: Cache.get('language') === 'zh' && zh,
+    })
+    return this
+  }
+
+  /**
+   * use pinia
+   */
+  protected usePinia(): CatchAdmin {
+    bootstrapStore(this.app)
+
+    return this
+  }
+
+  /**
+   * use i18n
+   */
+  protected useI18n(): CatchAdmin {
+    bootstrapI18n(this.app)
+
+    return this
+  }
+}

resources/admin/support/helper.ts

@@ -0,0 +1,89 @@
+/**
+ * Helper 助教函数集合
+ */
+
+import Cache from '/admin/support/cache'
+import i18n from '/admin/i18n'
+
+const AUTH_TOKEN = 'auth_token'
+
+/**
+ * env get
+ *
+ * @param key
+ */
+export function env(key: string): any {
+  const env = import.meta.env
+
+  return env[key]
+}
+
+/**
+ * remember token
+ *
+ * @param token
+ */
+export function rememberAuthToken(token: string): void {
+  Cache.set(AUTH_TOKEN, token)
+}
+
+/**
+ * remove auth token
+ */
+export function removeAuthToken(): void {
+  Cache.del(AUTH_TOKEN)
+}
+
+/**
+ * get auth token
+ *
+ */
+export function getAuthToken(): string | null {
+  return Cache.get(AUTH_TOKEN)
+}
+
+/**
+ * 是否是小屏幕
+ * @return
+ */
+export function isMiniScreen(): boolean {
+  return window.document.body.clientWidth < 500
+}
+
+/**
+ * translate
+ *
+ * @param translate
+ * @returns
+ */
+export function t(translate: string) {
+  return i18n.global.t(translate)
+}
+
+/**
+ * is undefined
+ *
+ * @param value
+ * @returns
+ */
+export function isUndefined(value: any): boolean {
+  return value === undefined
+}
+
+/**
+ * set page title
+ *
+ * @param title
+ */
+export function setPageTitle(title: string) {
+  document.title = title
+}
+
+/**
+ * is function?
+ *
+ * @param value
+ */
+export function isFunction(value: any) {
+  return typeof value === 'function'
+}

resources/admin/support/http.ts

@@ -0,0 +1,213 @@
+import { Code } from '/admin/enum/app'
+import axios, { AxiosInstance, AxiosRequestConfig } from 'axios'
+import { env, getAuthToken, removeAuthToken } from './helper'
+import Message from './message'
+import router from '/admin/router'
+import ResponseData from '/admin/types/responseData'
+
+/**
+ * http util
+ */
+class Http {
+  /**
+   * axios config
+   * @protected
+   */
+  protected config: AxiosRequestConfig = {}
+
+  /**
+   * base url
+   * @protected
+   */
+  protected baseURL: string = ''
+
+  /**
+   * http request timeout
+   *
+   * @protected
+   */
+  protected timeout: number = 0
+
+  /**
+   * http request headers
+   *
+   * @protected
+   */
+  protected headers: { [k: string]: string } = {}
+
+  /**
+   * axios instance
+   *
+   * @protected
+   */
+  protected request: AxiosInstance
+
+  /**
+   * instance
+   */
+  constructor() {
+    this.request = axios.create(this.getConfig())
+  }
+
+  /**
+   * get request
+   *
+   * @param path
+   * @param params
+   */
+  public get(path: string, params: object = {}) {
+    return this.request.get(this.baseURL + path, {
+      params,
+    })
+  }
+
+  /**
+   * post request
+   *
+   * @param path
+   * @param data
+   */
+  public post(path: string, data: object = {}) {
+    return this.request.post(this.baseURL + path, data)
+  }
+
+  /**
+   * put request
+   *
+   * @param path
+   * @param data
+   */
+  public put(path: string, data: object = {}) {
+    return this.request.put(this.baseURL + path, data)
+  }
+
+  /**
+   * delete request
+   *
+   * @param path
+   */
+  public delete(path: string) {
+    return this.request.delete(this.baseURL + path)
+  }
+
+  /**
+   * set timeout
+   *
+   * @param timeout
+   * @returns
+   */
+  public setTimeout(timeout: number): Http {
+    this.timeout = timeout
+
+    return this
+  }
+
+  /**
+   * set baseurl
+   *
+   * @param url
+   * @returns
+   */
+  public setBaseUrl(url: string): Http {
+    this.baseURL = url
+
+    return this
+  }
+
+  /**
+   * set headers
+   *
+   * @param key
+   * @param value
+   * @returns
+   */
+  public setHeader(key: string, value: string): Http {
+    this.headers.key = value
+
+    return this
+  }
+
+  /**
+   * get axios 配置
+   *
+   * @returns
+   */
+  protected getConfig(): AxiosRequestConfig {
+    // set base url
+    this.config.baseURL = this.baseURL ? this.baseURL : env('VITE_BASE_URL')
+
+    // set timeout
+    this.config.timeout = this.timeout ? this.timeout : 5000
+
+    // set ajax request
+    this.headers['X-Requested-With'] = 'XMLHttpRequest'
+    this.config.headers = this.headers
+
+    return this.config
+  }
+
+  /**
+   * 添加请求拦截器
+   *
+   */
+  public interceptorsOfRequest(): void {
+    this.request.interceptors.request.use(function (config: AxiosRequestConfig) {
+      const token = getAuthToken()
+      if (token) {
+        if (!config.headers) {
+          config.headers = {}
+        }
+
+        config.headers.authorization = 'Bearer ' + token
+      }
+
+      return config
+    })
+  }
+
+  /**
+   * 添加响应拦截器
+   *
+   */
+  public interceptorsOfResponse(): void {
+    this.request.interceptors.response.use(
+      response => {
+        const r: ResponseData = response.data
+        const code = r.code
+        const message = r.message
+        if (code === 1e4) {
+          return response
+        }
+
+        if (code === 10004) {
+          Message.error(message || 'Error')
+        } else if (code === Code.LOST_LOGIN || code === Code.LOGIN_EXPIRED) {
+          // to re-login
+          Message.confirm(message + '，需要重新登陆', function () {
+            removeAuthToken()
+            router.push('/login')
+          })
+        } else if (code === Code.LOGIN_BLACKLIST || code === Code.USER_FORBIDDEN) {
+          Message.error(message || 'Error')
+          removeAuthToken()
+          // to login page
+          router.push('/login')
+        } else {
+          Message.error(message || 'Error')
+        }
+
+        return Promise.reject(new Error(message || 'Error'))
+      },
+      error => {
+        Message.error(error.message)
+        return Promise.reject(error)
+      },
+    )
+  }
+}
+
+const http = new Http()
+http.interceptorsOfRequest()
+
+http.interceptorsOfResponse()
+export default http

resources/admin/support/message.ts

@@ -0,0 +1,59 @@
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { t } from './helper'
+
+export default class Message {
+  /**
+     * success
+     *
+     * @param message
+     */
+  static success (message: string) : void {
+    this.message(message, 'success')
+  }
+
+  /**
+     * error
+     *
+     * @param message
+     */
+  static error (message: string) : void {
+    this.message(message, 'error')
+  }
+
+  /**
+     * warning
+     *
+     * @param message
+     */
+  static warning (message: string) : void {
+    this.message(message, 'warning')
+  }
+
+  /**
+   * confirm
+   *
+   * @param message
+   * @param callback
+   */
+  static confirm (message: string, callback: any) : void {
+    ElMessageBox.confirm(message, t('system.warning'), {
+      confirmButtonText: t('system.confirm'),
+      cancelButtonText: t('system.cancel'),
+      type: 'warning'
+    }).then(callback)
+  }
+
+  /**
+     * message
+     *
+     * @param message
+     * @param type
+     */
+  protected static message (message: string, type: any) {
+    ElMessage({
+      message,
+
+      type
+    })
+  }
+}

resources/admin/support/progress.ts

@@ -0,0 +1,14 @@
+import NProgress from 'nprogress'
+import 'nprogress/nprogress.css'
+
+// 全局进度条的配置
+NProgress.configure({
+  easing: 'ease', // 动画方式
+  speed: 500, // 递增进度条的速度
+  showSpinner: true, // 是否显示加载ico
+  trickleSpeed: 200, // 自动递增间隔
+  minimum: 0.3, // 更改启动时使用的最小百分比
+  parent: 'body' // 指定进度条的父容器
+})
+
+export default NProgress