hs-admin-ui 1.0.0 → 1.0.2

package/src/directive/authDirective.ts

@@ -1,40 +0,0 @@
-import type { App } from 'vue';
-import { useUserInfo } from '/@/stores/userInfo';
-import { judementSameArr } from '/@/utils/arrayOperation';
-
-/**
- * 用户权限指令
- * @directive 单个权限验证（v-auth="xxx"）
- * @directive 多个权限验证，满足一个则显示（v-auths="[xxx,xxx]"）
- * @directive 多个权限验证，全部满足则显示（v-auth-all="[xxx,xxx]"）
- */
-export function authDirective(app: App) {
-	// 单个权限验证（v-auth="xxx"）
-	app.directive('auth', {
-		mounted(el, binding) {
-			const stores = useUserInfo();
-			if (!stores.userInfos.authBtnList.some((v: string) => v === binding.value)) el.parentNode.removeChild(el);
-		},
-	});
-	// 多个权限验证，满足一个则显示（v-auths="[xxx,xxx]"）
-	app.directive('auths', {
-		mounted(el, binding) {
-			let flag = false;
-			const stores = useUserInfo();
-			stores.userInfos.authBtnList.map((val: string) => {
-				binding.value.map((v: string) => {
-					if (val === v) flag = true;
-				});
-			});
-			if (!flag) el.parentNode.removeChild(el);
-		},
-	});
-	// 多个权限验证，全部满足则显示（v-auth-all="[xxx,xxx]"）
-	app.directive('auth-all', {
-		mounted(el, binding) {
-			const stores = useUserInfo();
-			const flag = judementSameArr(binding.value, stores.userInfos.authBtnList);
-			if (!flag) el.parentNode.removeChild(el);
-		},
-	});
-}

package/src/directive/customDirective.ts

@@ -1,178 +0,0 @@
-import type { App } from 'vue';
-
-/**
- * 按钮波浪指令
- * @directive 默认方式：v-waves，如 `<div v-waves></div>`
- * @directive 参数方式：v-waves=" |light|red|orange|purple|green|teal"，如 `<div v-waves="'light'"></div>`
- */
-export function wavesDirective(app: App) {
-	app.directive('waves', {
-		mounted(el, binding) {
-			el.classList.add('waves-effect');
-			binding.value && el.classList.add(`waves-${binding.value}`);
-			function setConvertStyle(obj: { [key: string]: unknown }) {
-				let style: string = '';
-				for (let i in obj) {
-					if (obj.hasOwnProperty(i)) style += `${i}:${obj[i]};`;
-				}
-				return style;
-			}
-			function onCurrentClick(e: { [key: string]: unknown }) {
-				let elDiv = document.createElement('div');
-				elDiv.classList.add('waves-ripple');
-				el.appendChild(elDiv);
-				let styles = {
-					left: `${e.layerX}px`,
-					top: `${e.layerY}px`,
-					opacity: 1,
-					transform: `scale(${(el.clientWidth / 100) * 10})`,
-					'transition-duration': `750ms`,
-					'transition-timing-function': `cubic-bezier(0.250, 0.460, 0.450, 0.940)`,
-				};
-				elDiv.setAttribute('style', setConvertStyle(styles));
-				setTimeout(() => {
-					elDiv.setAttribute(
-						'style',
-						setConvertStyle({
-							opacity: 0,
-							transform: styles.transform,
-							left: styles.left,
-							top: styles.top,
-						})
-					);
-					setTimeout(() => {
-						elDiv && el.removeChild(elDiv);
-					}, 750);
-				}, 450);
-			}
-			el.addEventListener('mousedown', onCurrentClick, false);
-		},
-		unmounted(el) {
-			el.addEventListener('mousedown', () => {});
-		},
-	});
-}
-
-/**
- * 自定义拖动指令
- * @description  使用方式：v-drag="[dragDom,dragHeader]"，如 `<div v-drag="['.drag-container .el-dialog', '.drag-container .el-dialog__header']"></div>`
- * @description dragDom 要拖动的元素，dragHeader 要拖动的 Header 位置
- * @link 注意：https://github.com/element-plus/element-plus/issues/522
- * @lick 参考：https://blog.csdn.net/weixin_46391323/article/details/105228020?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-10&spm=1001.2101.3001.4242
- */
-export function dragDirective(app: App) {
-	app.directive('drag', {
-		mounted(el, binding) {
-			if (!binding.value) return false;
-
-			const dragDom = document.querySelector(binding.value[0]) as HTMLElement;
-			const dragHeader = document.querySelector(binding.value[1]) as HTMLElement;
-
-			dragHeader.onmouseover = () => (dragHeader.style.cursor = `move`);
-
-			function down(e: any, type: string) {
-				// 鼠标按下，计算当前元素距离可视区的距离
-				const disX = type === 'pc' ? e.clientX - dragHeader.offsetLeft : e.touches[0].clientX - dragHeader.offsetLeft;
-				const disY = type === 'pc' ? e.clientY - dragHeader.offsetTop : e.touches[0].clientY - dragHeader.offsetTop;
-
-				// body当前宽度
-				const screenWidth = document.body.clientWidth;
-				// 可见区域高度(应为body高度，可某些环境下无法获取)
-				const screenHeight = document.documentElement.clientHeight;
-
-				// 对话框宽度
-				const dragDomWidth = dragDom.offsetWidth;
-				// 对话框高度
-				const dragDomheight = dragDom.offsetHeight;
-
-				const minDragDomLeft = dragDom.offsetLeft;
-				const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;
-
-				const minDragDomTop = dragDom.offsetTop;
-				const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight;
-
-				// 获取到的值带px 正则匹配替换
-				let styL: any = getComputedStyle(dragDom).left;
-				let styT: any = getComputedStyle(dragDom).top;
-
-				// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
-				if (styL.includes('%')) {
-					styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100);
-					styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100);
-				} else {
-					styL = +styL.replace(/\px/g, '');
-					styT = +styT.replace(/\px/g, '');
-				}
-
-				return {
-					disX,
-					disY,
-					minDragDomLeft,
-					maxDragDomLeft,
-					minDragDomTop,
-					maxDragDomTop,
-					styL,
-					styT,
-				};
-			}
-
-			function move(e: any, type: string, obj: any) {
-				let { disX, disY, minDragDomLeft, maxDragDomLeft, minDragDomTop, maxDragDomTop, styL, styT } = obj;
-
-				// 通过事件委托，计算移动的距离
-				let left = type === 'pc' ? e.clientX - disX : e.touches[0].clientX - disX;
-				let top = type === 'pc' ? e.clientY - disY : e.touches[0].clientY - disY;
-
-				// 边界处理
-				if (-left > minDragDomLeft) {
-					left = -minDragDomLeft;
-				} else if (left > maxDragDomLeft) {
-					left = maxDragDomLeft;
-				}
-
-				if (-top > minDragDomTop) {
-					top = -minDragDomTop;
-				} else if (top > maxDragDomTop) {
-					top = maxDragDomTop;
-				}
-
-				// 移动当前元素
-				dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`;
-			}
-
-			/**
-			 * pc端
-			 * onmousedown 鼠标按下触发事件
-			 * onmousemove 鼠标按下时持续触发事件
-			 * onmouseup 鼠标抬起触发事件
-			 */
-			dragHeader.onmousedown = (e) => {
-				const obj = down(e, 'pc');
-				document.onmousemove = (e) => {
-					move(e, 'pc', obj);
-				};
-				document.onmouseup = () => {
-					document.onmousemove = null;
-					document.onmouseup = null;
-				};
-			};
-
-			/**
-			 * 移动端
-			 * ontouchstart 当按下手指时，触发ontouchstart
-			 * ontouchmove 当移动手指时，触发ontouchmove
-			 * ontouchend 当移走手指时，触发ontouchend
-			 */
-			dragHeader.ontouchstart = (e) => {
-				const obj = down(e, 'app');
-				document.ontouchmove = (e) => {
-					move(e, 'app', obj);
-				};
-				document.ontouchend = () => {
-					document.ontouchmove = null;
-					document.ontouchend = null;
-				};
-			};
-		},
-	});
-}

package/src/directive/index.ts

@@ -1,18 +0,0 @@
-import type { App } from 'vue';
-import { authDirective } from '/@/directive/authDirective';
-import { wavesDirective, dragDirective } from '/@/directive/customDirective';
-
-/**
- * 导出指令方法：v-xxx
- * @methods authDirective 用户权限指令，用法：v-auth
- * @methods wavesDirective 按钮波浪指令，用法：v-waves
- * @methods dragDirective 自定义拖动指令，用法：v-drag
- */
-export function directive(app: App) {
-	// 用户权限指令
-	authDirective(app);
-	// 按钮波浪指令
-	wavesDirective(app);
-	// 自定义拖动指令
-	dragDirective(app);
-}

package/src/hooks/useCrypto.ts

@@ -1,36 +0,0 @@
-import CryptoJS from 'crypto-js';
-/***
- * 加密
- */
-const encrypt = (word: string, keyStr?: string, ivStr?: string) =>{
-  keyStr = keyStr ? keyStr : 'hskj20180614java';
-  ivStr = ivStr ? ivStr : 'hskj20180614java';
-  let key = CryptoJS.enc.Utf8.parse(keyStr);
-  let iv = CryptoJS.enc.Utf8.parse(ivStr);
-  let srcs = CryptoJS.enc.Utf8.parse(word);
-
-  let encrypted = CryptoJS.AES.encrypt(srcs, key, {
-    iv,
-    mode: CryptoJS.mode.CBC,
-    padding: CryptoJS.pad.ZeroPadding
-  });
-  return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
-  // return encrypted.toString();
-};
-const decrypt = (word: string, keyStr?: string, ivStr?: string) => {
-  keyStr = keyStr ? keyStr : 'hskj20180614java';
-  ivStr = ivStr ? ivStr : 'hskj20180614java';
-  var key = CryptoJS.enc.Utf8.parse(keyStr);
-  let iv = CryptoJS.enc.Utf8.parse(ivStr);
-
-  var decrypt = CryptoJS.AES.decrypt(word, key, {
-    iv,
-    mode: CryptoJS.mode.CBC,
-    padding: CryptoJS.pad.ZeroPadding
-  });
-  return CryptoJS.enc.Base64.stringify(decrypt.ciphertext);
-};
-export {
-  encrypt,
-  decrypt
-}

package/src/hooks/useExpose.ts

@@ -1,60 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import { computed, ref } from 'vue';
-
-/***
- * 组件暴露属性
- * @param ref
- * @param instance
- * @returns
- */
-const useExposeProperties = (ref: any, instance: any) => {
-	const entries = Object.entries(ref.value?.$?.exposed);
-	for (const [key, value] of entries) {
-		instance.exposed[key] = value;
-	}
-};
-/***
- * 组件v-model
- * @param props
- * @param propName
- * @param emit
- * @returns
- */
-const useVModel = (props: any, propName: string, emit: any) => {
-	return computed({
-		get() {
-			return new Proxy(props[propName], {
-				set(obj: any, index: any, val: any) {
-					if (Array.isArray(obj)) {
-						obj[index] = val;
-						emit('update:' + propName, [...obj]);
-					} else if (typeof obj === 'object') {
-						obj[index] = val;
-						emit('update:' + propName, { ...obj });
-					}
-					return true;
-				},
-			});
-		},
-		set(val) {
-			emit('update:' + propName, val);
-		},
-	});
-};
-/**
- * 获取聚焦元素
- */
-function useFocusElement() {
-	const focusRef = ref<HTMLElement>();
-
-	function activeElement() {
-		return focusRef.value?.querySelector('input');
-	}
-
-	return {
-		focusRef,
-		activeElement,
-	};
-}
-export { useExposeProperties, useVModel, useFocusElement };

package/src/layout/component/aside.vue

@@ -1,160 +0,0 @@
-<template>
-	<div class="h100" v-show="!isTagsViewCurrenFull">
-		<el-aside class="layout-aside" :class="setCollapseStyle">
-			<Logo v-if="setShowLogo" />
-			<el-scrollbar class="flex-auto" ref="layoutAsideScrollbarRef" @mouseenter="onAsideEnterLeave(true)" @mouseleave="onAsideEnterLeave(false)">
-				<Vertical :menuList="state.menuList" />
-			</el-scrollbar>
-		</el-aside>
-	</div>
-</template>
-
-<script setup lang="ts" name="layoutAside">
-import { defineAsyncComponent, reactive, computed, watch, onBeforeMount, ref } from 'vue';
-import { storeToRefs } from 'pinia';
-import { useRoutesList } from '/@/stores/routesList';
-import { useThemeConfig } from '/@/stores/themeConfig';
-import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
-import mittBus from '/@/utils/mitt';
-
-// 引入组件
-const Logo = defineAsyncComponent(() => import('/@/layout/logo/index.vue'));
-const Vertical = defineAsyncComponent(() => import('/@/layout/navMenu/vertical.vue'));
-
-// 定义变量内容
-const layoutAsideScrollbarRef = ref();
-const stores = useRoutesList();
-const storesThemeConfig = useThemeConfig();
-const storesTagsViewRoutes = useTagsViewRoutes();
-const { routesList } = storeToRefs(stores);
-const { themeConfig } = storeToRefs(storesThemeConfig);
-const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
-const state = reactive<AsideState>({
-	menuList: [],
-	clientWidth: 0,
-});
-// 关闭移动端蒙版
-const closeLayoutAsideMobileMode = () => {
-	const el = document.querySelector('.layout-aside-mobile-mode');
-	el?.setAttribute('style', 'animation: error-img-two 0.3s');
-	setTimeout(() => {
-		el?.parentNode?.removeChild(el);
-	}, 300);
-	const clientWidth = document.body.clientWidth;
-	if (clientWidth < 1000) themeConfig.value.isCollapse = false;
-	document.body.setAttribute('class', '');
-};
-// 设置菜单展开/收起时的宽度
-const setCollapseStyle = computed(() => {
-	const { layout, isCollapse, menuBar } = themeConfig.value;
-	const asideBrTheme = ['#FFFFFF', '#FFF', '#fff', '#ffffff'];
-	const asideBrColor = asideBrTheme.includes(menuBar) ? 'layout-el-aside-br-color' : '';
-	if (state.clientWidth <= 1000) {
-		if (isCollapse) {
-			document.body.setAttribute('class', 'el-popup-parent--hidden');
-			const asideEle = document.querySelector('.layout-container') as HTMLElement;
-			const modeDivs = document.createElement('div');
-			modeDivs.setAttribute('class', 'layout-aside-mobile-mode');
-			asideEle.appendChild(modeDivs);
-			modeDivs.addEventListener('click', closeLayoutAsideMobileMode);
-			return [asideBrColor, 'layout-aside-mobile', 'layout-aside-mobile-open'];
-		} else {
-			// 关闭弹窗
-			closeLayoutAsideMobileMode();
-			return [asideBrColor, 'layout-aside-mobile', 'layout-aside-mobile-close'];
-		}
-	} else {
-		if (layout === 'columns' || layout === 'classic') {
-			// 分栏布局、经典布局，菜单收起时宽度给 1px，防止切换动画消失
-			if (isCollapse) return [asideBrColor, 'layout-aside-pc-1'];
-			else return [asideBrColor, 'layout-aside-pc-220'];
-		} else {
-			// 其它布局给 64px
-			if (isCollapse) return [asideBrColor, 'layout-aside-pc-64'];
-			else return [asideBrColor, 'layout-aside-pc-220'];
-		}
-	}
-});
-// 设置显示/隐藏 logo
-const setShowLogo = computed(() => {
-	let { layout, isShowLogo } = themeConfig.value;
-	return (isShowLogo && layout === 'defaults') || (isShowLogo && layout === 'columns');
-});
-// 路由过滤递归函数
-const filterRoutesFun = <T extends RouteItem>(arr: T[]): T[] => {
-	return arr
-		.filter((item: T) => !item.meta?.isHide)
-		.map((item: T) => {
-			item = Object.assign({}, item);
-			if (item.children) item.children = filterRoutesFun(item.children);
-			return item;
-		});
-};
-// 设置/过滤路由（非静态路由/是否显示在菜单中）
-const setFilterRoutes = () => {
-	if (themeConfig.value.layout === 'columns') return false;
-	state.menuList = filterRoutesFun(routesList.value);
-};
-// 设置菜单导航是否固定（移动端）
-const initMenuFixed = (clientWidth: number) => {
-	state.clientWidth = clientWidth;
-};
-// 鼠标移入、移出
-const onAsideEnterLeave = (bool: Boolean) => {
-	const { layout, isColumnsMenuHoverPreload } = themeConfig.value;
-	if (layout !== 'columns') return false;
-	if (!bool) mittBus.emit('restoreDefault');
-	// 开启 `分栏菜单鼠标悬停预加载` 才设置，防止 columnsAside.vue 监听 pinia.state
-	if (isColumnsMenuHoverPreload) stores.setColumnsMenuHover(bool);
-};
-// 页面加载前
-onBeforeMount(() => {
-	initMenuFixed(document.body.clientWidth);
-	setFilterRoutes();
-	// 此界面不需要取消监听(mittBus.off('setSendColumnsChildren))
-	// 因为切换布局时有的监听需要使用，取消了监听，某些操作将不生效
-	mittBus.on('setSendColumnsChildren', (res: MittMenu) => {
-		state.menuList = res.children;
-	});
-	// 开启经典布局分割菜单时，设置菜单数据
-	mittBus.on('setSendClassicChildren', (res: MittMenu) => {
-		let { layout, isClassicSplitMenu } = themeConfig.value;
-		if (layout === 'classic' && isClassicSplitMenu) {
-			// 经典布局分割菜单只要一项子级时，收起左侧导航菜单
-			res.children.length <= 1 ? (themeConfig.value.isCollapse = true) : (themeConfig.value.isCollapse = false);
-			state.menuList = [];
-			state.menuList = res.children;
-		}
-	});
-	// 开启经典布局分割菜单时，重新处理菜单数据
-	mittBus.on('getBreadcrumbIndexSetFilterRoutes', () => {
-		setFilterRoutes();
-	});
-	// 监听窗口大小改变时(适配移动端)
-	mittBus.on('layoutMobileResize', (res: LayoutMobileResize) => {
-		initMenuFixed(res.clientWidth);
-		closeLayoutAsideMobileMode();
-	});
-});
-// 监听 pinia 值的变化，动态赋值给菜单中
-watch(
-	() => [themeConfig.value.isShowLogoChange, themeConfig.value.isShowLogo, themeConfig.value.layout, themeConfig.value.isClassicSplitMenu],
-	([isShowLogoChange, isShowLogo, layout, isClassicSplitMenu]) => {
-		if (isShowLogoChange !== isShowLogo) {
-			if (layoutAsideScrollbarRef.value) layoutAsideScrollbarRef.value.update();
-		}
-		if (layout === 'classic' && isClassicSplitMenu) return false;
-		setFilterRoutes();
-	},
-	{
-		deep: true,
-	}
-);
-// 监听用户权限切换，用于演示 `权限管理 -> 前端控制 -> 页面权限` 权限切换不生效
-watch(
-	() => routesList.value,
-	() => {
-		setFilterRoutes();
-	}
-);
-</script>