🎨 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/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,
+        });
+    },
+};