🎨 build framework completed

2024-08-07 22:26:41 +08:00
parent 883afb315a
commit a4b502717c
29 changed files with 2733 additions and 183 deletions
--- a/.eslintrc-auto-import.json
+++ b/.eslintrc-auto-import.json
@@ -0,0 +1,84 @@
+{
+  "globals": {
+    "Component": true,
+    "ComponentPublicInstance": true,
+    "ComputedRef": true,
+    "EffectScope": true,
+    "ExtractDefaultPropTypes": true,
+    "ExtractPropTypes": true,
+    "ExtractPublicPropTypes": true,
+    "InjectionKey": true,
+    "PropType": true,
+    "Ref": true,
+    "VNode": true,
+    "WritableComputedRef": true,
+    "acceptHMRUpdate": true,
+    "computed": true,
+    "createApp": true,
+    "createPinia": true,
+    "customRef": true,
+    "defineAsyncComponent": true,
+    "defineComponent": true,
+    "defineStore": true,
+    "effectScope": true,
+    "getActivePinia": true,
+    "getCurrentInstance": true,
+    "getCurrentScope": true,
+    "h": true,
+    "inject": true,
+    "isProxy": true,
+    "isReactive": true,
+    "isReadonly": true,
+    "isRef": true,
+    "mapActions": true,
+    "mapGetters": true,
+    "mapState": true,
+    "mapStores": true,
+    "mapWritableState": true,
+    "markRaw": true,
+    "nextTick": true,
+    "onActivated": true,
+    "onBeforeMount": true,
+    "onBeforeRouteLeave": true,
+    "onBeforeRouteUpdate": true,
+    "onBeforeUnmount": true,
+    "onBeforeUpdate": true,
+    "onDeactivated": true,
+    "onErrorCaptured": true,
+    "onMounted": true,
+    "onRenderTracked": true,
+    "onRenderTriggered": true,
+    "onScopeDispose": true,
+    "onServerPrefetch": true,
+    "onUnmounted": true,
+    "onUpdated": true,
+    "provide": true,
+    "reactive": true,
+    "readonly": true,
+    "ref": true,
+    "resolveComponent": true,
+    "setActivePinia": true,
+    "setMapStoreSuffix": true,
+    "shallowReactive": true,
+    "shallowReadonly": true,
+    "shallowRef": true,
+    "storeToRefs": true,
+    "toRaw": true,
+    "toRef": true,
+    "toRefs": true,
+    "toValue": true,
+    "triggerRef": true,
+    "unref": true,
+    "useAttrs": true,
+    "useCssModule": true,
+    "useCssVars": true,
+    "useLink": true,
+    "useRoute": true,
+    "useRouter": true,
+    "useSlots": true,
+    "watch": true,
+    "watchEffect": true,
+    "watchPostEffect": true,
+    "watchSyncEffect": true
+  }
+}
--- a/auto-import.d.ts
+++ b/auto-import.d.ts
@@ -0,0 +1,83 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+export {}
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const createPinia: typeof import('pinia')['createPinia']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const defineStore: typeof import('pinia')['defineStore']
+  const effectScope: typeof import('vue')['effectScope']
+  const getActivePinia: typeof import('pinia')['getActivePinia']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const mapActions: typeof import('pinia')['mapActions']
+  const mapGetters: typeof import('pinia')['mapGetters']
+  const mapState: typeof import('pinia')['mapState']
+  const mapStores: typeof import('pinia')['mapStores']
+  const mapWritableState: typeof import('pinia')['mapWritableState']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const setActivePinia: typeof import('pinia')['setActivePinia']
+  const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const storeToRefs: typeof import('pinia')['storeToRefs']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useLink: typeof import('vue-router')['useLink']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useSlots: typeof import('vue')['useSlots']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  import('vue')
+}
--- a/components.d.ts
+++ b/components.d.ts
@@ -0,0 +1,16 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    AButton: typeof import('ant-design-vue/es')['Button']
+    Login: typeof import('./src/views/login/LoginPage.vue')['default']
+    LoginPage: typeof import('./src/views/login/LoginPage.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue + TS</title>
+      <title><%- title %></title>
  </head>
  <body>
    <div id="app"></div>
--- a/package.json
+++ b/package.json
@@ -4,21 +4,37 @@
  "version": "0.0.0",
  "type": "module",
  "scripts": {
-    "dev": "vite",
-    "build": "vue-tsc -b && vite build",
+    "dev": "vite --mode development --host",
+    "build": "vue-tsc -b && vite build --mode production",
    "preview": "vite preview"
  },
  "dependencies": {
+    "@ant-design/icons-vue": "^7.0.1",
+    "@types/crypto-js": "^4.2.2",
+    "@types/node": "^22.1.0",
+    "ant-design-vue": "^4.2.3",
+    "axios": "^1.7.3",
+    "crypto-js": "^4.2.0",
    "eslint": "9.x",
-    "vue": "^3.4.31"
+    "localforage": "^1.10.0",
+    "pinia": "^2.2.1",
+    "pinia-plugin-persistedstate": "^3.2.1",
+    "unplugin-auto-import": "^0.18.2",
+    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-html": "^3.2.2",
+    "vite-plugin-node-polyfills": "^0.22.0",
+    "vue": "^3.4.31",
+    "vue-router": "^4.4.3"
  },
  "devDependencies": {
    "@eslint/js": "^9.8.0",
    "@vitejs/plugin-vue": "^5.0.5",
    "eslint-plugin-vue": "^9.27.0",
    "globals": "^15.9.0",
+    "sass": "^1.77.8",
    "typescript": "^5.2.2",
    "typescript-eslint": "^8.0.1",
+    "unplugin-vue-components": "^0.27.3",
    "vite": "^5.3.4",
    "vue-tsc": "^2.0.24"
  }
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,30 +1,4 @@
-<script setup lang="ts">
-import HelloWorld from './components/HelloWorld.vue'
-</script>
-
 <template>
-  <div>
-    <a href="https://vitejs.dev" target="_blank">
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-    </a>
-  </div>
-  <HelloWorld msg="Vite + Vue" />
+  <router-view></router-view>
 </template>

-<style scoped>
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
-}
-</style>
--- a/src/assets/styles/variables.scss
+++ b/src/assets/styles/variables.scss
@@ -0,0 +1,26 @@
+
+::-webkit-scrollbar {
+    width: 6px;
+    height: 8px;
+}
+
+
+::-webkit-scrollbar-button {
+    display: none;
+}
+
+
+::-webkit-scrollbar-thumb {
+    background: rgba(144, 147, 153, 0.3);
+    cursor: pointer;
+    border-radius: 4px;
+}
+
+
+::-webkit-scrollbar-corner {
+    display: none;
+}
+
+::-webkit-resizer {
+    display: none;
+}
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-defineProps<{ msg: string }>()
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Learn more about IDE Support for Vue in the
-    <a
-      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
-      target="_blank"
-      >Vue Docs Scaling up Guide</a
-    >.
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,15 @@
-import { createApp } from 'vue'
-import './style.css'
+import {createApp} from 'vue'
 import App from './App.vue'
+import '@/assets/styles/variables.scss'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+//Pinia
+import {createPinia, Pinia} from 'pinia'
+import router from "@/router/router.ts";

-createApp(App).mount('#app')
+const pinia: Pinia = createPinia()
+pinia.use(piniaPluginPersistedstate)
+
+createApp(App)
+    .use(router)
+    .use(pinia)
+    .mount('#app')
--- a/src/router/modules/login.ts
+++ b/src/router/modules/login.ts
@@ -0,0 +1,10 @@
+export default [
+	{
+		path: '/',
+		name: 'login',
+		component: () => import('@/views/login/LoginPage.vue'),
+		meta: {
+			title: '登录页'
+		}
+	}
+]
--- a/src/router/router.ts
+++ b/src/router/router.ts
@@ -0,0 +1,11 @@
+import {createRouter, createWebHistory, RouteRecordRaw} from 'vue-router'
+
+import login from './modules/login'
+
+const routes: Array<RouteRecordRaw> = [...login]
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes
+})
+export default router
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -0,0 +1,7 @@
+import {useAuthStore} from '@/store/modules/user.ts'
+
+export default function useStore() {
+    return {
+        user: useAuthStore()
+    }
+}
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -0,0 +1,32 @@
+import {defineStore} from 'pinia'
+import {ref} from 'vue'
+
+export const useAuthStore = defineStore(
+    'user',
+    () => {
+        const user = ref<any>()
+
+        function setUser(data: any) {
+            user.value = data
+        }
+
+        function getUser() {
+            return user.value
+        }
+
+        function clearUser() {
+            user.value = void 0
+        }
+
+        return {
+            user,
+            setUser,
+            getUser,
+            clearUser
+        }
+    },
+    {
+        // 开启数据持久化
+        persist: true
+    }
+)
--- a/src/style.css
+++ b/src/style.css
@@ -1,79 +0,0 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-.card {
-  padding: 2em;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
--- a/src/utils/axios/request.ts
+++ b/src/utils/axios/request.ts
@@ -0,0 +1,163 @@
+/** @format */
+
+import axios, { AxiosInstance, AxiosRequestConfig } from "axios";
+import { message } from "ant-design-vue";
+import { getStorageFromKey } from "@/utils/localStorage/config.ts";
+
+class Request {
+	private instance: AxiosInstance | undefined;
+
+	constructor(config: AxiosRequestConfig) {
+		this.instance = axios.create(config);
+		// 全局请求拦截
+		this.instance.interceptors.request.use(
+			(config) => {
+				const token: string | null = getStorageFromKey("token");
+				if (token) {
+					config.headers.Authorization = `${import.meta.env.VITE_APP_TOKEN_KEY} ${token}`;
+				}
+				return config;
+			},
+			(error) => {
+				return Promise.reject(error);
+			},
+		);
+
+		// 全局响应拦截
+		this.instance.interceptors.response.use(
+			(response) => {
+				if (response.data instanceof Blob) {
+					return response;
+				} else {
+					return response.data;
+				}
+			},
+			(error) => {
+				const { response } = error;
+				if (response) {
+					this.handleCode(response.status);
+				}
+				if (!window.navigator.onLine) {
+					message.error("网络连接失败");
+					return Promise.reject(error);
+				}
+			},
+		);
+	}
+
+	handleCode(code: number): void {
+		switch (code) {
+			case 400:
+				message
+					.open({
+						content: "请求错误(400)",
+						type: "error",
+					})
+					.then();
+				break;
+			case 401:
+				message
+					.open({
+						content: "未授权，请重新登录(401)",
+						type: "error",
+					})
+					.then();
+				break;
+			case 403:
+				message
+					.open({
+						content: "拒绝访问(403)",
+						type: "error",
+					})
+					.then();
+				break;
+			case 404:
+				message
+					.open({
+						content: "请求出错(404)",
+						type: "error",
+					})
+					.then();
+				break;
+			case 408:
+				message
+					.open({
+						content: "请求超时(408)",
+						type: "error",
+					})
+					.then();
+				break;
+			case 500:
+				message
+					.open({
+						content: "服务器错误(500)",
+						type: "error",
+					})
+					.then();
+				break;
+			case 501:
+				message
+					.open({
+						content: "服务未实现(501)",
+						type: "error",
+					})
+					.then();
+				break;
+			case 502:
+				message
+					.open({
+						content: "网络错误(502)",
+						type: "error",
+					})
+					.then();
+				break;
+			case 503:
+				message
+					.open({
+						content: "服务不可用(503)",
+						type: "error",
+					})
+					.then();
+				break;
+			case 504:
+				message
+					.open({
+						content: "网络超时(504)",
+						type: "error",
+					})
+					.then();
+				break;
+			case 505:
+				message
+					.open({
+						content: "HTTP版本不受支持(505)",
+						type: "error",
+					})
+					.then();
+				break;
+			default:
+				message
+					.open({
+						content: `连接出错(${code})!`,
+						type: "error",
+					})
+					.then();
+				break;
+		}
+	}
+
+	request<T>(config: AxiosRequestConfig<T>): Promise<T> {
+		return new Promise<T>((resolve, reject) => {
+			this.instance
+				?.request<T, T>(config)
+				.then((res) => {
+					resolve(res);
+				})
+				.catch((err) => {
+					reject(err);
+				});
+		});
+	}
+}
+
+export default Request;
--- a/src/utils/axios/web.ts
+++ b/src/utils/axios/web.ts
@@ -0,0 +1,10 @@
+/** @format */
+
+import Request from "./request";
+
+const web: Request = new Request({
+	baseURL: import.meta.env.VITE_APP_BASE_API,
+	timeout: 5000,
+});
+
+export default web;
--- a/src/utils/cookie/cookie.ts
+++ b/src/utils/cookie/cookie.ts
@@ -0,0 +1,91 @@
+/**
+ * 配置
+ *
+ * @format
+ */
+
+interface Options {
+	/** key前缀 */
+	prefix?: string;
+}
+
+/** 默认配置 */
+const defaultOptions: Options = {
+	prefix: "",
+};
+
+class CookieStorage {
+	private prefix: string;
+
+	constructor(options: Options = defaultOptions) {
+		const { prefix } = options;
+		this.prefix = prefix ?? "";
+	}
+
+	/**
+	 * @description: 设置cookie
+	 * @param {string} key 键
+	 * @param {any} value 值
+	 * @param {number} expires 过期时间s毫秒，不传默认2年有效
+	 * @Date: 2023-05-17 18:10:34
+	 * @Author: mulingyuer
+	 */
+	public setItem(key: string, value: string | number, expires?: number): void {
+		const timestamp = Date.now();
+		if (typeof expires === "number") {
+			expires = timestamp + expires;
+		} else {
+			expires = timestamp + 2 * 365 * 24 * 60 * 60 * 1000;
+		}
+		document.cookie = `${this.prefix}${key}=${value};expires=${new Date(expires).toUTCString()}`;
+	}
+
+	/**
+	 * @description: 获取cookie
+	 * @param {string} key 键
+	 * @Date: 2023-05-17 18:31:50
+	 * @Author: mulingyuer
+	 */
+	public getItem(key: string): string | undefined {
+		const cookies = document.cookie.split("; ");
+		let val: string | undefined = undefined;
+		cookies.find((item) => {
+			const [k, v] = item.split("=");
+			if (k === `${this.prefix}${key}`) {
+				val = v;
+				return true;
+			}
+			return false;
+		});
+
+		return val;
+	}
+
+	/**
+	 * @description: 删除指定key的cookie
+	 * @param {string} key 键
+	 * @Date: 2023-05-17 18:32:56
+	 * @Author: mulingyuer
+	 */
+	public removeItem(key: string): void {
+		this.setItem(key, "", -1);
+	}
+
+	/**
+	 * @description: 清空所有cookie
+	 * @Date: 2023-05-17 23:13:04
+	 * @Author: mulingyuer
+	 */
+	public clear(): void {
+		const cookies = document.cookie.split("; ");
+		cookies.forEach((item) => {
+			const [k] = item.split("=");
+			this.removeItem(k);
+		});
+	}
+}
+
+const cookieStorage = new CookieStorage();
+
+export default cookieStorage;
+export { CookieStorage };
--- a/src/utils/encrypt/encrypt.ts
+++ b/src/utils/encrypt/encrypt.ts
@@ -0,0 +1,31 @@
+/** @format */
+import CryptoJS from "crypto-js";
+
+const key = CryptoJS.enc.Hex.parse("d86d7bab3d6ac01ad9dc6a897652f2d2");
+// const iv = CryptoJS.enc.Latin1.parse("d86d7bab3d6ac01ad9dc6a897652f2d2");
+
+/**
+ * 加密
+ * @param data
+ */
+function EncryptData(data: string) {
+	const src = CryptoJS.enc.Utf8.parse(data);
+	const encrypted = CryptoJS.AES.encrypt(src, key, {
+		mode: CryptoJS.mode.ECB,
+		padding: CryptoJS.pad.Pkcs7,
+	});
+	return encrypted.toString();
+}
+
+/**
+ * 解密
+ * @param data
+ */
+function DecryptData(data: string) {
+	const decrypt = CryptoJS.AES.decrypt(data, key, {
+		mode: CryptoJS.mode.ECB,
+		padding: CryptoJS.pad.Pkcs7,
+	});
+	return JSON.parse(CryptoJS.enc.Utf8.stringify(decrypt).toString());
+}
+export { EncryptData, DecryptData };
--- a/src/utils/localStorage/config.ts
+++ b/src/utils/localStorage/config.ts
@@ -0,0 +1,104 @@
+/** @format */
+
+import { encrypt, decrypt } from "./encry";
+import { globalConfig } from "./interface";
+
+const config: globalConfig = {
+	type: "localStorage", //存储类型，localStorage | sessionStorage
+	prefix: "schisandra_", //版本号
+	expire: 24 * 60, //过期时间，默认为一天，单位为分钟
+	isEncrypt: true, //支持加密、解密数据处理
+};
+
+const setStorage = (key: string, value: any, expire: number = 24 * 60): boolean => {
+	//设定值
+	if (value === "" || value === null || value === undefined) {
+		//空值重置
+		value = null;
+	}
+	if (isNaN(expire) || expire < 0) {
+		//过期时间值合理性判断
+		throw new Error("Expire must be a number");
+	}
+	const data = {
+		value, //存储值
+		time: Date.now(), //存储日期
+		expire: Date.now() + 1000 * 60 * expire, //过期时间
+	};
+	//是否需要加密，判断装载加密数据或原数据
+	window[config.type].setItem(
+		autoAddPreFix(key),
+		config.isEncrypt ? encrypt(JSON.stringify(data)) : JSON.stringify(data),
+	);
+	return true;
+};
+
+const getStorageFromKey = (key: string) => {
+	//获取指定值
+	if (config.prefix) {
+		key = autoAddPreFix(key);
+	}
+	if (!window[config.type].getItem(key)) {
+		//不存在判断
+		return null;
+	}
+
+	const storageVal = config.isEncrypt
+		? JSON.parse(decrypt(window[config.type].getItem(key) as string))
+		: JSON.parse(window[config.type].getItem(key) as string);
+	const now = Date.now();
+	if (now >= storageVal.expire) {
+		//过期销毁
+		removeStorageFromKey(key);
+		return null;
+		//不过期回值
+	} else {
+		return storageVal.value;
+	}
+};
+const getAllStorage = () => {
+	//获取所有值
+	const storageList: any = {};
+	const keys = Object.keys(window[config.type]);
+	keys.forEach((key) => {
+		const value = getStorageFromKey(autoRemovePreFix(key));
+		if (value !== null) {
+			//如果值没有过期，加入到列表中
+			storageList[autoRemovePreFix(key)] = value;
+		}
+	});
+	return storageList;
+};
+const getStorageLength = () => {
+	//获取值列表长度
+	return window[config.type].length;
+};
+const removeStorageFromKey = (key: string) => {
+	//删除值
+	if (config.prefix) {
+		key = autoAddPreFix(key);
+	}
+	window[config.type].removeItem(key);
+};
+const clearStorage = () => {
+	window[config.type].clear();
+};
+const autoAddPreFix = (key: string) => {
+	//添加前缀，保持唯一性
+	const prefix = config.prefix || "";
+	return `${prefix}_${key}`;
+};
+const autoRemovePreFix = (key: string) => {
+	//删除前缀，进行增删改查
+	const lineIndex = config.prefix.length + 1;
+	return key.substr(lineIndex);
+};
+
+export {
+	setStorage,
+	getStorageFromKey,
+	getAllStorage,
+	getStorageLength,
+	removeStorageFromKey,
+	clearStorage,
+};
--- a/src/utils/localStorage/encry.ts
+++ b/src/utils/localStorage/encry.ts
@@ -0,0 +1,39 @@
+/** @format */
+
+import CryptoJS from "crypto-js";
+
+const SECRET_KEY = CryptoJS.enc.Utf8.parse("3333e6e143439161"); //十六位十六进制数作为密钥
+const SECRET_IV = CryptoJS.enc.Utf8.parse("e3bbe7e3ba84431a"); //十六位十六进制数作为密钥偏移量
+
+const encrypt = (data: object | string): string => {
+    //加密
+    if (typeof data === "object") {
+        try {
+            data = JSON.stringify(data);
+        } catch (e) {
+            throw new Error("encrypt error" + e);
+        }
+    }
+    const dataHex = CryptoJS.enc.Utf8.parse(data);
+    const encrypted = CryptoJS.AES.encrypt(dataHex, SECRET_KEY, {
+        iv: SECRET_IV,
+        mode: CryptoJS.mode.CBC,
+        padding: CryptoJS.pad.Pkcs7,
+    });
+    return encrypted.ciphertext.toString();
+};
+
+const decrypt = (data: string) => {
+    //解密
+    const encryptedHexStr = CryptoJS.enc.Hex.parse(data);
+    const str = CryptoJS.enc.Base64.stringify(encryptedHexStr);
+    const decrypt = CryptoJS.AES.decrypt(str, SECRET_KEY, {
+        iv: SECRET_IV,
+        mode: CryptoJS.mode.CBC,
+        padding: CryptoJS.pad.Pkcs7,
+    });
+    const decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
+    return decryptedStr.toString();
+};
+
+export {encrypt, decrypt};
--- a/src/utils/localStorage/interface.ts
+++ b/src/utils/localStorage/interface.ts
@@ -0,0 +1,10 @@
+/** @format */
+
+interface globalConfig {
+	type: "localStorage" | "sessionStorage";
+	prefix: string;
+	expire: number;
+	isEncrypt: boolean;
+}
+
+export type { globalConfig };
--- a/src/utils/localforage/index.ts
+++ b/src/utils/localforage/index.ts
@@ -0,0 +1,76 @@
+/** @format */
+
+import localforage from "localforage";
+import CryptoJS from "crypto-js";
+
+const SECRET_KEY = CryptoJS.enc.Utf8.parse("3333e6e143439161"); //十六位十六进制数作为密钥
+const SECRET_IV = CryptoJS.enc.Utf8.parse("e3bbe7e3ba84431a"); //十六位十六进制数作为密钥偏移量
+/**
+ * 加密
+ * @param data
+ * @param output
+ */
+export const encrypt = (data: string, output?: any) => {
+    const dataHex = CryptoJS.enc.Utf8.parse(data);
+    const encrypted = CryptoJS.AES.encrypt(dataHex, SECRET_KEY, {
+        iv: SECRET_IV,
+        mode: CryptoJS.mode.CBC,
+        padding: CryptoJS.pad.Pkcs7,
+    });
+    return encrypted.ciphertext.toString(output);
+};
+
+/**
+ * 解密
+ * @param data
+ */
+export const decrypt = (data: string | null) => {
+    if (data === null) {
+        return;
+    }
+    const encryptedHex = CryptoJS.enc.Hex.parse(data);
+    const encryptedHexStr = CryptoJS.enc.Base64.stringify(encryptedHex);
+    const decrypted = CryptoJS.AES.decrypt(encryptedHexStr, SECRET_KEY, {
+        iv: SECRET_IV,
+        mode: CryptoJS.mode.CBC,
+        padding: CryptoJS.pad.Pkcs7,
+    });
+    const decryptedStr = decrypted.toString(CryptoJS.enc.Utf8);
+    return decryptedStr.toString();
+};
+
+export const handleLocalforage = {
+    config: async (options?: LocalForageOptions) => localforage.config(options || {}),
+    setItem: async (key: string, value: string): Promise<void> => {
+        await localforage.setItem(key, encrypt(value));
+    },
+    getItem: async function getItem<T>(key: string): Promise<T | string | null> {
+        try {
+            const value: any = decrypt(await localforage.getItem(key)) as any;
+            // 如果值是 undefined，返回 null
+            if (value === undefined) {
+                return null;
+            }
+            // 如果值是 T 类型，直接返回
+            if (typeof value === "object" && value !== null) {
+                return value as T;
+            }
+            // 如果值是 string 类型，直接返回
+            return value as string;
+        } catch (error) {
+            console.error("Error retrieving data from localforage:", error);
+            return null;
+        }
+    },
+    removeItem: async (key: string): Promise<void> => {
+        await localforage.removeItem(key);
+    },
+    clear: async () => {
+        return await localforage.clear();
+    },
+    createInstance: async (name: string) => {
+        return localforage.createInstance({
+            name,
+        });
+    },
+};
--- a/src/views/login/LoginPage.vue
+++ b/src/views/login/LoginPage.vue
@@ -0,0 +1,9 @@
+<template>
+  <AButton> 测试页面</AButton>
+</template>
+<script setup lang="ts">
+
+</script>
+<style scoped>
+
+</style>
--- a/src/views/login/index.scss
+++ b/src/views/login/index.scss
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1 +1,16 @@
 /// <reference types="vite/client" />
+declare interface ImportMetaEnv {
+    readonly VITE_APP_BASE_API: string;
+    readonly VITE_APP_TITLE: string;
+    readonly VITE_API_BASE_URL: string;
+    readonly VITE_NODE_ENV: string;
+    readonly VITE_TITLE_NAME: string;
+    readonly VITE_APP_TOKEN_KEY?: string;
+}
+
+interface ImportMeta {
+    readonly env: ImportMetaEnv;
+}
+
+
+
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -5,9 +5,12 @@
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
    "skipLibCheck": true,
-
    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
@@ -16,12 +19,27 @@
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "preserve",
-
    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": "./",
+    "types": [
+      "node"
+    ],
+    "paths": {
+      "@": [
+        "src"
+      ],
+      "@/*": [
+        "src/*"
+      ]
+    }
  },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue"
+  ]
 }
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -7,7 +7,10 @@
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true,
    "strict": true,
-    "noEmit": true
+    "noEmit": true,
+
  },
-  "include": ["vite.config.ts"]
+  "include": [
+    "vite.config.ts"
+  ]
 }
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,7 +1,129 @@
-import { defineConfig } from 'vite'
+import {defineConfig, loadEnv} from 'vite'
 import vue from '@vitejs/plugin-vue'
+import * as path from 'path'
+import viteCompression from "vite-plugin-compression";
+import {createHtmlPlugin} from "vite-plugin-html";
+import {nodePolyfills} from "vite-plugin-node-polyfills";
+import Components from 'unplugin-vue-components/vite';
+import {AntDesignVueResolver} from 'unplugin-vue-components/resolvers';
+import AutoImport from 'unplugin-auto-import/vite'

-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [vue()],
+export default defineConfig(({mode}: { mode: string }): object => {
+    const env: Record<string, string> = loadEnv(mode, process.cwd())
+    return {
+        resolve: {
+            //设置别名
+            alias: {
+                '@': path.resolve(__dirname, 'src')
+            }
+        },
+        plugins: [vue(),
+            Components({
+                dts: true,
+                dirs: ['src/components', 'src/views'],
+                resolvers: [
+                    AntDesignVueResolver({
+                        importStyle: "css-in-js",
+                        resolveIcons: true
+                    }),
+                ],
+            }),
+            AutoImport({
+                //安装两行后你会发现在组件中不用再导入ref，reactive等
+                imports: ['vue', 'vue-router', 'pinia'],
+                dts: 'auto-import.d.ts',
+                //ant-design-vue
+                resolvers: [AntDesignVueResolver()],
+                eslintrc: {
+                    enabled: false // 1、改为true用于生成eslint配置。2、生成后改回false，避免重复生成消耗
+                }
+            }),
+            nodePolyfills(),
+            viteCompression({
+                verbose: true, // 是否在控制台中输出压缩结果
+                disable: false,
+                threshold: 10240, // 如果体积大于阈值，将被压缩，单位为b，体积过小时请不要压缩，以免适得其反
+                algorithm: "gzip", // 压缩算法，可选['gzip'，' brotliccompress '，'deflate '，'deflateRaw']
+                ext: ".gz",
+                deleteOriginFile: true, // 源文件压缩后是否删除
+            }),
+            createHtmlPlugin({
+                minify: true,
+                /**
+                 * 在这里写entry后，你将不需要在`index.html`内添加 script 标签，原有标签需要删除
+                 * @default src/main.ts
+                 */
+                entry: "src/main.ts",
+                /**
+                 * 如果你想将 `index.html`存放在指定文件夹，可以修改它，否则不需要配置
+                 * @default index.html
+                 */
+                template: "index.html",
+                /**
+                 * 需要注入 index.html ejs 模版的数据
+                 */
+                inject: {
+                    data: {
+                        title: env.VITE_TITLE_NAME,
+                    },
+                },
+            }),
+        ],
+        css: {
+            preprocessorOptions: {
+                scss: {
+                    javascriptEnabled: true,
+                },
+            },
+            modules: {
+                // 一般我们可以通过 generateScopedName 属性来对生成的类名进行自定义
+                // 其中，name 表示当前文件名，local 表示类名
+                generateScopedName: "[name]__[local]___[hash:base64:5]",
+            },
+
+        },
+
+        esbuild: {
+            drop: ["console", "debugger"],
+        },
+        build: {
+            outDir: "dist", // 指定输出路径
+            assetsDir: "assets", // 指定生成静态文件目录
+            assetsInlineLimit: "4096", // 小于此阈值的导入或引用资源将内联为 base64 编码
+            cssCodeSplit: true, // 启用 CSS 代码拆分
+            sourcemap: false, // 构建后是否生成 source map 文件
+            minify: "esbuild", // 指定使用哪种混淆器
+            write: true, // 启用将构建后的文件写入磁盘
+            emptyOutDir: true, // 构建时清空该目录
+            brotliSize: true, // 启用 brotli 压缩大小报告
+            chunkSizeWarningLimit: 4000, // chunk 大小警告的限制
+            watch: null, // 设置为 {} 则会启用 rollup 的监听器
+            rollupOptions: {  // 自定义底层的 Rollup 打包配置
+                output: {
+                    chunkFileNames: 'js/[name]-[hash].js', // 引入文件名的名称
+                    entryFileNames: 'js/[name]-[hash].js', // 包的入口文件名称
+                    assetFileNames: '[ext]/[name]-[hash].[ext]' // 资源文件像 字体，图片等
+                }
+            }
+        },
+        output: {
+            // 最小化拆分包
+            manualChunks(id: string) {
+                if (id.includes('node_modules')) {
+                    return id.toString().split('node_modules/')[1].split('/')[0].toString()
+                }
+            }
+        },
+        server: {
+            proxy: {
+                [env.VITE_APP_BASE_API]: {
+                    //后端接口的baseurl
+                    target: env.VITE_API_BASE_URL,
+                    //是否允许跨域
+                    changeOrigin: true,
+                    rewrite: (path: string) => path.replace(RegExp(`^${env.VITE_APP_BASE_API}`), ""),
+                },
+            },
+        },
+    }
 })
--- a/yarn.lock
+++ b/yarn.lock