feat: add helpers

package.json

@@ -20,8 +20,10 @@
     "@vueuse/core": "^10.7.1",
     "@yuler/utils": "^0.2.0",
     "element-plus": "^2.4.4",
+    "klona": "^2.0.6",
     "nprogress": "^0.2.0",
     "pinia": "^2.1.7",
+    "query-string": "^9.0.0",
     "vue": "^3.4.3",
     "vue-router": "^4.2.5"
   },

src/helpers/index.ts

@@ -0,0 +1,109 @@
+import queryString from 'query-string'
+import {klona} from 'klona/full'
+import type {ElMessageBoxOptions} from 'element-plus'
+import {ElLoading, ElMessage, ElMessageBox} from 'element-plus'
+
+export const STORAGE_TOKEN = 'TOKEN'
+export const STORAGE_USERNAME = 'USERNAME'
+
+export function $isLogin() {
+  return !!$getToken() && !!$getUsername()
+}
+export function $getToken() {
+  return window.localStorage.getItem(STORAGE_TOKEN) ?? undefined
+}
+function $setToken(token: string) {
+  window.localStorage.setItem(STORAGE_TOKEN, token)
+}
+function $clearToken() {
+  window.localStorage.removeItem(STORAGE_TOKEN)
+}
+export function $getUsername() {
+  return window.localStorage.getItem(STORAGE_USERNAME) ?? undefined
+}
+function $setUsername(username: string) {
+  window.localStorage.setItem(STORAGE_USERNAME, username)
+}
+function $clearUsername() {
+  window.localStorage.removeItem(STORAGE_USERNAME)
+}
+
+export function $login({token, username}: {token: string; username: string}) {
+  $setToken(token)
+  $setUsername(username)
+}
+export function $logout() {
+  $clearToken()
+  $clearUsername()
+}
+
+export const $stringify = queryString.stringify
+export const $clone = klona
+
+// Element Plus
+
+let loadingInstance: ReturnType<typeof ElLoading.service>
+export const $loading = {
+  show: (text = 'Loading...') => {
+    loadingInstance = ElLoading.service({
+      body: true,
+      // target: '#app',
+      lock: true,
+      text,
+    })
+  },
+  hide: () => {
+    loadingInstance.close()
+  },
+}
+
+/**
+ * `element-plus` 的 ElMessage
+ */
+export const $toast = {
+  success: (message: string) => {
+    ElMessage.success({message, zIndex: 1000})
+  },
+  error: (message: string) => {
+    ElMessage.error({message, zIndex: 1000})
+  },
+  warning: (message: string) => {
+    ElMessage.warning({message, zIndex: 1000})
+  },
+}
+
+/**
+ * `element-plus` 的 ElMessageBox
+ */
+export async function $confirm(
+  message: string,
+  options?: ElMessageBoxOptions,
+): Promise<boolean> {
+  return new Promise(resolve => {
+    ElMessageBox.confirm(message, '确认', {
+      confirmButtonText: options?.confirmButtonText ?? '确定',
+      cancelButtonText: options?.cancelButtonText ?? '取消',
+      type: options?.type ?? 'warning',
+    })
+      .then(() => {
+        resolve(true)
+      })
+      .catch(() => {
+        resolve(false)
+      })
+  })
+}
+
+/**
+ * `element-plus` 的 ElMessageBox
+ */
+export async function $alert(
+  message: string | VNode | (() => VNode),
+  title?: string,
+  options: ElMessageBoxOptions = {},
+) {
+  return ElMessageBox.alert(message, title, {
+    confirmButtonText: '确定',
+    ...options,
+  })
+}

vite.config.ts

@@ -3,7 +3,7 @@ import {defineConfig, splitVendorChunkPlugin, loadEnv} from 'vite'
 import visualizer from 'rollup-plugin-visualizer'
 import Vue from '@vitejs/plugin-vue'
 import VueRouter from 'unplugin-vue-router/vite'
-import { VueRouterAutoImports } from 'unplugin-vue-router'
+import {VueRouterAutoImports} from 'unplugin-vue-router'
 import Layouts from 'vite-plugin-vue-layouts'
 import Components from 'unplugin-vue-components/vite'
 import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'
@@ -49,7 +49,7 @@ export default defineConfig(({mode}) => {
 
       // https://github.com/antfu/unplugin-auto-import
       AutoImport({
-        dirs: ['src/composables', 'src/store'],
+        dirs: ['src/composables', 'src/store', 'src/helpers'],
         imports: [
           'vue',
           VueRouterAutoImports,