hs-admin-ui 1.0.0

package/src/utils/request.ts

@@ -0,0 +1,82 @@
+import axios, { AxiosInstance } from 'axios';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { Session, systemStore } from '/@/utils/storage';
+import qs from 'qs';
+
+// 配置新建一个 axios 实例
+const service: AxiosInstance = axios.create({
+	baseURL: import.meta.env.VITE_API_URL,
+	timeout: 50000,
+	headers: { 'Content-Type': 'application/json' },
+	paramsSerializer: {
+		serialize(params) {
+			return qs.stringify(params, { allowDots: true });
+		},
+	},
+});
+
+const unifyParams = (params: object) => {
+	let _params = {};
+	console.debug('params:', params);
+	return _params;
+};
+
+// 添加请求拦截器
+service.interceptors.request.use(
+	(config) => {
+		if (config.method == 'post') {
+			unifyParams(config.data);
+		}
+		// 在发送请求之前做些什么 token
+		if (Session.get('token')) {
+			config.headers!['Authorization'] = `${Session.get('token')}`;
+		}
+		return config;
+	},
+	(error) => {
+		// 对请求错误做些什么
+		return Promise.reject(error);
+	}
+);
+
+// 添加响应拦截器
+service.interceptors.response.use(
+	async (response) => {
+		// 对响应数据做点什么
+		const res = response.data;
+		if (res.code && res.code !== 1) {
+			// `token` 过期或者账号已在别处登录
+			if (res.code === 401 || res.code === 4001) {
+				Session.clear(); // 清除浏览器全部临时缓存
+				window.location.href = '/'; // 去登录页
+				ElMessageBox.alert('你已被登出，请重新登录', '提示', {})
+					.then(() => {})
+					.catch(() => {});
+			} else if (res.code === 2000) {
+				ElMessage.error(res.msg);
+				systemStore.clear(); // 清除浏览器全部临时缓存
+				window.location.href = '/'; // 去登录页
+			} else {
+				ElMessage.error(res.msg);
+			}
+			return Promise.reject(service.interceptors.response);
+		} else {
+			return res;
+		}
+	},
+	(error) => {
+		// 对响应错误做点什么
+		if (error.message.indexOf('timeout') != -1) {
+			ElMessage.error('网络超时');
+		} else if (error.message == 'Network Error') {
+			ElMessage.error('网络连接错误');
+		} else {
+			if (error.response.data) ElMessage.error(error.response.statusText);
+			else ElMessage.error('接口路径找不到');
+		}
+		return Promise.reject(error);
+	}
+);
+
+// 导出 axios 实例
+export default service;

package/src/utils/setIconfont.ts

@@ -0,0 +1,48 @@
+// 字体图标 url
+const cssCdnUrlList: Array<string> = [
+	'//at.alicdn.com/t/c/font_2298093_rnp72ifj3ba.css',
+	'//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css',
+];
+// 第三方 js url
+const jsCdnUrlList: Array<string> = [];
+
+// 动态批量设置字体图标
+export function setCssCdn() {
+	if (cssCdnUrlList.length <= 0) return false;
+	cssCdnUrlList.map((v) => {
+		let link = document.createElement('link');
+		link.rel = 'stylesheet';
+		link.href = v;
+		link.crossOrigin = 'anonymous';
+		document.getElementsByTagName('head')[0].appendChild(link);
+	});
+}
+
+// 动态批量设置第三方js
+export function setJsCdn() {
+	if (jsCdnUrlList.length <= 0) return false;
+	jsCdnUrlList.map((v) => {
+		let link = document.createElement('script');
+		link.src = v;
+		document.body.appendChild(link);
+	});
+}
+
+/**
+ * 批量设置字体图标、动态js
+ * @method cssCdn 动态批量设置字体图标
+ * @method jsCdn 动态批量设置第三方js
+ */
+const setIntroduction = {
+	// 设置css
+	cssCdn: () => {
+		setCssCdn();
+	},
+	// 设置js
+	jsCdn: () => {
+		setJsCdn();
+	},
+};
+
+// 导出函数方法
+export default setIntroduction;

package/src/utils/showMessage.ts

@@ -0,0 +1,57 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { defineAsyncComponent, App, Plugin  } from 'vue';
+import { ElMessage } from 'element-plus';
+
+type MessageType = 'success' | 'warning' | 'info' | 'error';
+
+interface MessageOptions {
+  message: string;
+  type?: MessageType;
+  duration?: number;
+  showClose?: boolean;
+}
+const Message = defineAsyncComponent(() => import('element-plus'));
+
+/**
+ * 封装 Element Plus Message 组件
+ * @param options 消息选项
+ */
+
+// 支持 showMessage.success(message) 和 showMessage.warning(message) 这种写法
+const showMessageFns: Record<MessageType, (message: string) => void> = {
+  success(message: string) {
+    return ElMessage({ message, type: 'success' });
+  },
+  warning(message: string) {
+    return ElMessage({ message, type: 'warning' });
+  },
+  info(message: string) {
+    return ElMessage({ message, type: 'info' });
+  },
+  error(message: string) {
+    return ElMessage({ message, type: 'error' });
+  },
+};
+/**
+ * 封装 Element Plus Message 组件
+ * @param options 消息选项
+ */
+function showMessage(options: MessageOptions): any {
+  return ElMessage(options)
+}
+// 动态属性和函数的代理实现
+const showMessageProxy = new Proxy(showMessage, {
+  get(target, prop) {
+    if (prop in showMessageFns) {
+      return showMessageFns[prop];
+    }
+    return target[prop];
+  },
+});
+
+export default {
+  install(app: App): void {
+    // app.component(Message.name, Message);
+    app.config.globalProperties.$message = showMessageProxy;
+  },
+} as Plugin;

package/src/utils/showMessageBox.ts

@@ -0,0 +1,39 @@
+import { App, Plugin } from 'vue';
+import { ElMessageBox } from 'element-plus';
+
+interface MessageBoxOptions {
+  title: string;
+  message: string;
+  type?: 'success' | 'warning' | 'info' | 'error' | 'confirm';
+  confirmButtonText?: string;
+  cancelButtonText?: string;
+}
+
+function showMessageBox(options: MessageBoxOptions): Promise<string | undefined> {
+  return ElMessageBox(options);
+}
+// ElMessageBox.alert、ElMessageBox.confirm、ElMessageBox.prompt
+const showMessageBoxFns = {
+  alert(message: string, title: string | undefined, options: MessageBoxOptions) {
+    return ElMessageBox.alert(message, title, options);
+  },
+  confirm(message: string, title: string | undefined, options: MessageBoxOptions) {
+    return ElMessageBox.confirm(message, title, options);
+  },
+  prompt(message: string, title: string | undefined, options: MessageBoxOptions) {
+    return ElMessageBox.prompt(message, title, options);
+  },
+};
+const proxyMessageBox = new Proxy(showMessageBox, {
+  get(target, prop) {
+    if (prop in showMessageBoxFns) {
+      return showMessageBoxFns[prop];
+    }
+    return target[prop];
+  },
+});
+export default {
+  install(app: App): void {
+    app.config.globalProperties.$MessageBox = proxyMessageBox;
+  },
+} as Plugin;

package/src/utils/showNotification.ts

@@ -0,0 +1,50 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { defineAsyncComponent, App, Plugin } from 'vue';
+import { ElNotification } from 'element-plus';
+
+type NotificationType = 'success' | 'warning' | 'info' | 'error';
+
+interface NotificationOptions {
+  title: string;
+  message: string;
+  type?: NotificationType;
+  duration?: number;
+  showClose?: boolean;
+}
+
+const Notification = defineAsyncComponent(() => import('element-plus'));
+
+const showNotificationFns: Record<NotificationType, (options: NotificationOptions) => void> = {
+  success(options: NotificationOptions) {
+    return ElNotification({ ...options, type: 'success' });
+  },
+  warning(options: NotificationOptions) {
+    return ElNotification({ ...options, type: 'warning' });
+  },
+  info(options: NotificationOptions) {
+    return ElNotification({ ...options, type: 'info' });
+  },
+  error(options: NotificationOptions) {
+    return ElNotification({ ...options, type: 'error' });
+  },
+};
+
+function showNotification(options: NotificationOptions): any {
+  return ElNotification(options);
+}
+
+const showNotificationProxy = new Proxy(showNotification, {
+  get(target, prop) {
+    if (prop in showNotificationFns) {
+      return showNotificationFns[prop];
+    }
+    return target[prop];
+  },
+});
+
+export default {
+  install(app: App): void {
+    // app.component(Notification.name, Notification);
+    app.config.globalProperties.$notification = showNotificationProxy;
+  },
+} as Plugin;

package/src/utils/showPopup.ts

@@ -0,0 +1,81 @@
+import { h, Component, ref, AppContext, App, render, watch } from 'vue';
+import { VxeModal, VxeModalProps, VxeModalEventProps } from 'vxe-table';
+import ICustomData from '/@/types/customData';
+import router from '/@/router';
+import _ from 'lodash';
+
+type Config = VxeModalProps & VxeModalEventProps & { success?: Function } & { onReady?: Function };
+
+interface OptionsDef {
+	width: number | string;
+	height: number | string;
+	/** 是否显示遮罩层 */
+	mask: boolean;
+	/** 是否允许点击遮罩层关闭窗口 */
+	maskClosable: boolean;
+	/** 在窗口关闭时销毁内容 */
+	destroyOnClose: boolean;
+	/** 是否允许按 Esc 键关闭窗口 */
+	escClosable: boolean;
+	/** 标题是否标显示最大化与还原按钮 */
+	showZoom: boolean;
+	/** 是否允许窗口边缘拖动调整窗口大小 */
+	resize: boolean;
+}
+
+let appContext: AppContext;
+let optionsDef: OptionsDef | undefined;
+export function showPopup<T extends Component>(component: T, props: ICustomData.ANY, config: Config) {
+	const slots = {
+		default: () => h(component, { ...props, onSuccess, onReady }),
+	};
+	const vm = h(
+		VxeModal,
+		Object.assign({}, optionsDef, {
+			..._.omit(config, 'success', 'onReady'),
+			className: 'custom-popup',
+			modelValue: true,
+			slots,
+		})
+	);
+
+	if (appContext) {
+		vm.appContext = appContext;
+	}
+
+	function renderVNode() {
+		const container = document.createDocumentFragment();
+		render(vm, container as ICustomData.ANY);
+		document.body.appendChild(container);
+
+		return () => {
+			render(null, container as ICustomData.ANY);
+		};
+	}
+
+	const clearVNode = renderVNode();
+
+	watch(
+		() => router.currentRoute.value.name,
+		() => {
+			clearVNode();
+		}
+	);
+
+	/** 主动关闭弹窗api */
+	function onSuccess<T>(params: T) {
+		typeof config.success === 'function' && config.success(params);
+		clearVNode();
+	}
+	/** 弹窗组件加载完成通知 */
+	function onReady<T>(params: T) {
+		typeof config.onReady === 'function' && config.onReady(params);
+	}
+}
+
+export const popupPlugin = {
+	install(app: App, options?: OptionsDef) {
+		appContext = app._context;
+		optionsDef = options;
+	},
+};

package/src/utils/storage.ts

@@ -0,0 +1,137 @@
+import Cookies from 'js-cookie';
+import localforage from 'localforage';
+
+/**
+ * window.localStorage 浏览器永久缓存
+ * @method set 设置永久缓存
+ * @method get 获取永久缓存
+ * @method remove 移除永久缓存
+ * @method clear 移除全部永久缓存
+ */
+export const Local = {
+	// 查看 v2.4.3版本更新日志
+	setKey(key: string) {
+		// @ts-ignore
+		return `${__NEXT_NAME__}:${key}`;
+	},
+	// 设置永久缓存
+	set<T>(key: string, val: T) {
+		window.localStorage.setItem(Local.setKey(key), JSON.stringify(val));
+	},
+	// 获取永久缓存
+	get<T = any>(key: string) {
+		let json = <string>window.localStorage.getItem(Local.setKey(key));
+		return JSON.parse(json) as T;
+	},
+	// 移除永久缓存
+	remove(key: string) {
+		window.localStorage.removeItem(Local.setKey(key));
+	},
+	// 移除全部永久缓存
+	clear() {
+		window.localStorage.clear();
+	},
+};
+
+/**
+ * window.sessionStorage 浏览器临时缓存
+ * @method set 设置临时缓存
+ * @method get 获取临时缓存
+ * @method remove 移除临时缓存
+ * @method clear 移除全部临时缓存
+ */
+export const Session = {
+	// 设置临时缓存
+	set<T>(key: string, val: T) {
+		if (key === 'token') return Cookies.set(key, val);
+		window.sessionStorage.setItem(Local.setKey(key), JSON.stringify(val));
+	},
+	// 获取临时缓存
+	get(key: string) {
+		if (key === 'token') return Cookies.get(key);
+		let json = <string>window.sessionStorage.getItem(Local.setKey(key));
+		return JSON.parse(json);
+	},
+	// 移除临时缓存
+	remove(key: string) {
+		if (key === 'token') return Cookies.remove(key);
+		window.sessionStorage.removeItem(Local.setKey(key));
+	},
+	// 移除全部临时缓存
+	clear() {
+		Cookies.remove('token');
+		window.sessionStorage.clear();
+	},
+};
+
+class FormStore {
+	store: typeof localforage;
+	constructor() {
+		this.store = localforage.createInstance({
+			driver: [localforage.INDEXEDDB, localforage.WEBSQL, localforage.LOCALSTORAGE],
+			name: 'formTableConfig_00000_001',
+			storeName: 'formTableConfig',
+			version: 1.0,
+			description: '表单查询',
+		});
+	}
+	/** 查看 v2.4.3版本更新日志 */
+	setKey(key: string) {
+		// @ts-ignore
+		return `${__NEXT_NAME__}:${key}`;
+	}
+	/** 设置永久缓存 */
+	set(key: string, value: any) {
+		return this.store.setItem(this.setKey(key), value);
+	}
+	/** 获取永久缓存 */
+	get<T>(key: string) {
+		return this.store.getItem(this.setKey(key)) as Promise<T>;
+	}
+	/** 移除永久缓存 */
+	remove(key: string) {
+		return this.store.removeItem(key);
+	}
+	/** 移除全部永久缓存 */
+	clear() {
+		return this.store.clear();
+	}
+}
+
+export const formStore = new FormStore();
+
+class SystemStore {
+	store: typeof localforage;
+	constructor() {
+		this.store = localforage.createInstance({
+			driver: [localforage.INDEXEDDB, localforage.WEBSQL, localforage.LOCALSTORAGE],
+			name: 'systemConfig_00000_001',
+			storeName: 'systemConfig',
+			version: 1.0,
+			description: '系统信息',
+		});
+	}
+	/** 查看 v2.4.3版本更新日志 */
+	setKey(key: string) {
+		// @ts-ignore
+		return `${__NEXT_NAME__}:${key}`;
+	}
+	/** 设置永久缓存 */
+	set(key: string, value: any) {
+		return this.store.setItem(this.setKey(key), value);
+	}
+	/** 获取永久缓存 */
+	get<T = any>(key: string) {
+		return this.store.getItem(this.setKey(key)) as Promise<T>;
+	}
+	/** 移除永久缓存 */
+	remove(key: string) {
+		return this.store.removeItem(key);
+	}
+	/** 移除全部永久缓存 */
+	clear() {
+		return this.store.clear();
+	}
+}
+
+export const systemStore = new SystemStore();

package/src/utils/theme.ts

@@ -0,0 +1,65 @@
+import { ElMessage } from 'element-plus';
+
+/**
+ * 颜色转换函数
+ * @method hexToRgb hex 颜色转 rgb 颜色
+ * @method rgbToHex rgb 颜色转 Hex 颜色
+ * @method getDarkColor 加深颜色值
+ * @method getLightColor 变浅颜色值
+ */
+export function useChangeColor() {
+	// str 颜色值字符串
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	const hexToRgb = (str: string): any => {
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		let hexs: any  = '';
+		let reg = /^\#?[0-9A-Fa-f]{6}$/;
+		if (!reg.test(str)) {
+			ElMessage.warning('输入错误的hex');
+			return '';
+		}
+		str = str.replace('#', '');
+		hexs = str.match(/../g);
+		for (let i = 0; i < 3; i++) hexs[i] = parseInt(hexs[i], 16);
+		return hexs;
+	};
+	// r 代表红色 | g 代表绿色 | b 代表蓝色
+	const rgbToHex = (r: number, g: number, b: number): string => {
+		let reg = /^\d{1,3}$/;
+		if (!reg.test(String(r)) || !reg.test(String(g)) || !reg.test(String(b))) {
+			ElMessage.warning('输入错误的rgb颜色值');
+			return '';
+		}
+		let hexs = [r.toString(16), g.toString(16), b.toString(16)];
+		for (let i = 0; i < 3; i++) if (hexs[i].length == 1) hexs[i] = `0${hexs[i]}`;
+		return `#${hexs.join('')}`;
+	};
+	// color 颜色值字符串 | level 变浅的程度，限0-1之间
+	const getDarkColor = (color: string, level: number): string => {
+		let reg = /^\#?[0-9A-Fa-f]{6}$/;
+		if (!reg.test(color)) {
+			ElMessage.warning('输入错误的hex颜色值');
+			return '';
+		}
+		let rgb = useChangeColor().hexToRgb(color);
+		for (let i = 0; i < 3; i++) rgb[i] = Math.floor(rgb[i] * (1 - level));
+		return useChangeColor().rgbToHex(rgb[0], rgb[1], rgb[2]);
+	};
+	// color 颜色值字符串 | level 加深的程度，限0-1之间
+	const getLightColor = (color: string, level: number): string => {
+		let reg = /^\#?[0-9A-Fa-f]{6}$/;
+		if (!reg.test(color)) {
+			ElMessage.warning('输入错误的hex颜色值');
+			return '';
+		}
+		let rgb = useChangeColor().hexToRgb(color);
+		for (let i = 0; i < 3; i++) rgb[i] = Math.floor((255 - rgb[i]) * level + rgb[i]);
+		return useChangeColor().rgbToHex(rgb[0], rgb[1], rgb[2]);
+	};
+	return {
+		hexToRgb,
+		rgbToHex,
+		getDarkColor,
+		getLightColor,
+	};
+}