hs-admin-ui 1.0.0 → 1.0.2

package/src/layout/navBars/topBar/user.vue

@@ -1,222 +0,0 @@
-<template>
-	<div class="layout-navbars-breadcrumb-user pr15" :style="{ flex: layoutUserFlexNum }">
-		<div class="layout-navbars-breadcrumb-user-icon" @click="onSearchClick">
-			<el-icon title="菜单搜索">
-				<ele-Search />
-			</el-icon>
-		</div>
-		<div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick">
-			<i class="icon-skin iconfont" title="布局配置"></i>
-		</div>
-		<div class="layout-navbars-breadcrumb-user-icon" ref="userNewsBadgeRef" v-click-outside="onUserNewsClick">
-			<el-badge :is-dot="true">
-				<el-icon title="消息">
-					<ele-Bell />
-				</el-icon>
-			</el-badge>
-		</div>
-		<el-popover
-			ref="userNewsRef"
-			:virtual-ref="userNewsBadgeRef"
-			placement="bottom"
-			trigger="click"
-			transition="el-zoom-in-top"
-			virtual-triggering
-			:width="300"
-			:persistent="false"
-		>
-			<UserNews />
-		</el-popover>
-		<div class="layout-navbars-breadcrumb-user-icon mr10" @click="onScreenfullClick">
-			<i
-				class="iconfont"
-				:title="state.isScreenfull ? '关全屏' : '开全屏'"
-				:class="!state.isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"
-			></i>
-		</div>
-		<el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick">
-			<span class="layout-navbars-breadcrumb-user-link">
-				<img :src="userInfos.photo" class="layout-navbars-breadcrumb-user-link-photo mr5" />
-				{{ userInfos.userName === '' ? 'common' : userInfos.userName }}
-				<el-icon class="el-icon--right">
-					<ele-ArrowDown />
-				</el-icon>
-			</span>
-			<template #dropdown>
-				<el-dropdown-menu>
-					<el-dropdown-item divided command="logOut">退出登录</el-dropdown-item>
-				</el-dropdown-menu>
-			</template>
-		</el-dropdown>
-		<Search ref="searchRef" />
-	</div>
-</template>
-
-<script setup lang="ts" name="layoutBreadcrumbUser">
-import { defineAsyncComponent, ref, unref, computed, reactive, onMounted } from 'vue';
-import { useRouter } from 'vue-router';
-import { ElMessageBox, ElMessage, ClickOutside as vClickOutside } from 'element-plus';
-import screenfull from 'screenfull';
-import { storeToRefs } from 'pinia';
-import { useUserInfo } from '/@/stores/userInfo';
-import { useThemeConfig } from '/@/stores/themeConfig';
-import mittBus from '/@/utils/mitt';
-import { systemStore } from '/@/utils/storage';
-import { useLoginController } from '/@/api/loginController/index';
-// 引入组件
-const UserNews = defineAsyncComponent(() => import('/@/layout/navBars/topBar/userNews.vue'));
-const Search = defineAsyncComponent(() => import('/@/layout/navBars/topBar/search.vue'));
-const login = useLoginController();
-// 定义变量内容
-const userNewsRef = ref();
-const userNewsBadgeRef = ref();
-const router = useRouter();
-const stores = useUserInfo();
-const storesThemeConfig = useThemeConfig();
-const { userInfos } = storeToRefs(stores);
-const { themeConfig } = storeToRefs(storesThemeConfig);
-const searchRef = ref();
-const state = reactive({
-	isScreenfull: false,
-	disabledSize: 'large',
-});
-
-// 设置分割样式
-const layoutUserFlexNum = computed(() => {
-	let num: string | number = '';
-	const { layout, isClassicSplitMenu } = themeConfig.value;
-	const layoutArr: string[] = ['defaults', 'columns'];
-	if (layoutArr.includes(layout) || (layout === 'classic' && !isClassicSplitMenu)) num = '1';
-	else num = '';
-	return num;
-});
-// 全屏点击时
-const onScreenfullClick = () => {
-	if (!screenfull.isEnabled) {
-		ElMessage.warning('暂不不支持全屏');
-		return false;
-	}
-	screenfull.toggle();
-	screenfull.on('change', () => {
-		if (screenfull.isFullscreen) state.isScreenfull = true;
-		else state.isScreenfull = false;
-	});
-};
-// 消息通知点击时
-const onUserNewsClick = () => {
-	unref(userNewsRef).popperRef?.delayHide?.();
-};
-// 布局配置 icon 点击时
-const onLayoutSetingClick = () => {
-	mittBus.emit('openSetingsDrawer');
-};
-// 下拉菜单点击时
-const onHandleCommandClick = (path: string) => {
-	if (path === 'logOut') {
-		ElMessageBox({
-			closeOnClickModal: false,
-			closeOnPressEscape: false,
-			title: '提示',
-			message: '此操作将退出登录, 是否继续?',
-			showCancelButton: true,
-			confirmButtonText: '确定',
-			cancelButtonText: '取消',
-			buttonSize: 'default',
-			beforeClose: (action, instance, done) => {
-				if (action === 'confirm') {
-					instance.confirmButtonLoading = true;
-					instance.confirmButtonText = '退出中';
-					login
-						.postAjaxLogout()
-						.then(() => {
-							done();
-						})
-						.finally(() => {
-							instance.confirmButtonLoading = false;
-						});
-				} else {
-					done();
-				}
-			},
-		})
-			.then(() => {
-				stores.logout();
-			})
-			.catch(() => {});
-	} else if (path === 'wareHouse') {
-		window.open('https://www.baidu.com');
-	} else {
-		router.push(path);
-	}
-};
-// 菜单搜索点击
-const onSearchClick = () => {
-	searchRef.value.openSearch();
-};
-// 初始化组件大小/i18n
-const initI18nOrSize = async (value: string, attr: string) => {
-	(<any>state)[attr] = await systemStore.get('themeConfig').then((res) => res[value]);
-};
-// 组件大小改变
-const onComponentSizeChange = async (size: string) => {
-	await systemStore.remove('themeConfig');
-	themeConfig.value.globalComponentSize = size;
-	await systemStore.set('themeConfig', themeConfig.value);
-	await initI18nOrSize('globalComponentSize', 'disabledSize');
-	window.location.reload();
-};
-// 页面加载时
-onMounted(async () => {
-	const themeConfig = await systemStore.get('themeConfig');
-	if (themeConfig) {
-		await initI18nOrSize('globalComponentSize', 'disabledSize');
-	}
-});
-</script>
-
-<style scoped lang="scss">
-.layout-navbars-breadcrumb-user {
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	&-link {
-		height: 100%;
-		display: flex;
-		align-items: center;
-		white-space: nowrap;
-		&-photo {
-			width: 25px;
-			height: 25px;
-			border-radius: 100%;
-		}
-	}
-	&-icon {
-		padding: 0 10px;
-		cursor: pointer;
-		color: var(--next-bg-topBarColor);
-		height: 50px;
-		line-height: 50px;
-		display: flex;
-		align-items: center;
-		&:hover {
-			background: var(--next-color-user-hover);
-			i {
-				display: inline-block;
-				animation: logoAnimation 0.3s ease-in-out;
-			}
-		}
-	}
-	:deep(.el-dropdown) {
-		color: var(--next-bg-topBarColor);
-	}
-	:deep(.el-badge) {
-		height: 40px;
-		line-height: 40px;
-		display: flex;
-		align-items: center;
-	}
-	:deep(.el-badge__content.is-fixed) {
-		top: 12px;
-	}
-}
-</style>

package/src/layout/navBars/topBar/userNews.vue

@@ -1,107 +0,0 @@
-<template>
-	<div class="layout-navbars-breadcrumb-user-news">
-		<div class="head-box">
-			<div class="head-box-title">通知</div>
-			<div class="head-box-btn" v-if="state.newsList.length > 0" @click="onAllReadClick">全部已读</div>
-		</div>
-		<div class="content-box">
-			<template v-if="state.newsList.length > 0">
-				<div class="content-box-item" v-for="(v, k) in state.newsList" :key="k">
-					<div>{{ v.label }}</div>
-					<div class="content-box-msg">
-						{{ v.value }}
-					</div>
-					<div class="content-box-time">{{ v.time }}</div>
-				</div>
-			</template>
-			<el-empty description="暂无通知" v-else></el-empty>
-		</div>
-		<div class="foot-box" @click="onGoToGiteeClick" v-if="state.newsList.length > 0">前往通知中心</div>
-	</div>
-</template>
-
-<script setup lang="ts" name="layoutBreadcrumbUserNews">
-import { reactive } from 'vue';
-
-// 定义变量内容
-const state = reactive({
-	newsList: [
-		{
-			label: '关于版本发布的通知',
-			value: '华速消息',
-			time: '2023-12-28',
-		},
-		{
-			label: '关于学习交流的通知',
-			value: '华速消息',
-			time: '2023-12-28',
-		},
-	],
-});
-
-// 全部已读点击
-const onAllReadClick = () => {
-	state.newsList = [];
-};
-// 前往通知中心点击
-const onGoToGiteeClick = () => {
-	window.open('https://www.baidu.com');
-};
-</script>
-
-<style scoped lang="scss">
-.layout-navbars-breadcrumb-user-news {
-	.head-box {
-		display: flex;
-		border-bottom: 1px solid var(--el-border-color-lighter);
-		box-sizing: border-box;
-		color: var(--el-text-color-primary);
-		justify-content: space-between;
-		height: 35px;
-		align-items: center;
-		.head-box-btn {
-			color: var(--el-color-primary);
-			font-size: 13px;
-			cursor: pointer;
-			opacity: 0.8;
-			&:hover {
-				opacity: 1;
-			}
-		}
-	}
-	.content-box {
-		font-size: 13px;
-		.content-box-item {
-			padding-top: 12px;
-			&:last-of-type {
-				padding-bottom: 12px;
-			}
-			.content-box-msg {
-				color: var(--el-text-color-secondary);
-				margin-top: 5px;
-				margin-bottom: 5px;
-			}
-			.content-box-time {
-				color: var(--el-text-color-secondary);
-			}
-		}
-	}
-	.foot-box {
-		height: 35px;
-		color: var(--el-color-primary);
-		font-size: 13px;
-		cursor: pointer;
-		opacity: 0.8;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border-top: 1px solid var(--el-border-color-lighter);
-		&:hover {
-			opacity: 1;
-		}
-	}
-	:deep(.el-empty__description p) {
-		font-size: 13px;
-	}
-}
-</style>

package/src/layout/navMenu/horizontal.vue

@@ -1,138 +0,0 @@
-<template>
-	<div class="el-menu-horizontal-warp">
-		<el-menu router :default-active="state.defaultActive" background-color="transparent" mode="horizontal">
-			<template v-for="val in menuLists">
-				<el-sub-menu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
-					<template #title>
-						<SvgIcon :name="val.meta.icon" />
-						<span>{{ val.meta.title }}</span>
-					</template>
-					<SubItem :chil="val.children" />
-				</el-sub-menu>
-				<template v-else>
-					<el-menu-item :index="val.path" :key="val.path">
-						<template #title v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
-							<SvgIcon :name="val.meta.icon" />
-							{{ val.meta.title }}
-						</template>
-						<template #title v-else>
-							<a class="w100" @click.prevent="onALinkClick(val)">
-								<SvgIcon :name="val.meta.icon" />
-								{{ val.meta.title }}
-							</a>
-						</template>
-					</el-menu-item>
-				</template>
-			</template>
-		</el-menu>
-	</div>
-</template>
-
-<script setup lang="ts" name="navMenuHorizontal">
-import { defineAsyncComponent, reactive, computed, onBeforeMount } from 'vue';
-import { useRoute, onBeforeRouteUpdate, RouteRecordRaw } from 'vue-router';
-import { storeToRefs } from 'pinia';
-import { useRoutesList } from '/@/stores/routesList';
-import { useThemeConfig } from '/@/stores/themeConfig';
-import other from '/@/utils/other';
-import mittBus from '/@/utils/mitt';
-
-// 引入组件
-const SubItem = defineAsyncComponent(() => import('/@/layout/navMenu/subItem.vue'));
-
-// 定义父组件传过来的值
-const props = defineProps({
-	// 菜单列表
-	menuList: {
-		type: Array<RouteRecordRaw>,
-		default: () => [],
-	},
-});
-
-// 定义变量内容
-const stores = useRoutesList();
-const storesThemeConfig = useThemeConfig();
-const { routesList } = storeToRefs(stores);
-const { themeConfig } = storeToRefs(storesThemeConfig);
-const route = useRoute();
-const state = reactive({
-	defaultActive: '' as string | undefined,
-});
-
-// 获取父级菜单数据
-const menuLists = computed(() => {
-	return <RouteItems>props.menuList;
-});
-// 路由过滤递归函数
-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 setSendClassicChildren = (path: string) => {
-	const currentPathSplit = path.split('/');
-	let currentData: MittMenu = { children: [] };
-	filterRoutesFun(routesList.value).map((v, k) => {
-		if (v.path === `/${currentPathSplit[1]}`) {
-			v['k'] = k;
-			currentData['item'] = { ...v };
-			currentData['children'] = [{ ...v }];
-			if (v.children) currentData['children'] = v.children;
-		}
-	});
-	return currentData;
-};
-// 设置页面当前路由高亮
-const setCurrentRouterHighlight = (currentRoute: RouteToFrom) => {
-	const { path, meta } = currentRoute;
-	if (themeConfig.value.layout === 'classic') {
-		state.defaultActive = `/${path?.split('/')[1]}`;
-	} else {
-		const pathSplit = meta?.isDynamic ? meta.isDynamicPath!.split('/') : path!.split('/');
-		if (pathSplit.length >= 4 && meta?.isHide) state.defaultActive = pathSplit.splice(0, 3).join('/');
-		else state.defaultActive = path;
-	}
-};
-// 打开外部链接
-const onALinkClick = (val: RouteItem) => {
-	other.handleOpenLink(val);
-};
-// 页面加载前
-onBeforeMount(() => {
-	setCurrentRouterHighlight(route);
-});
-// 路由更新时
-onBeforeRouteUpdate((to) => {
-	setCurrentRouterHighlight(to);
-	// 修复经典布局开启切割菜单时，点击tagsView后左侧导航菜单数据不变的问题
-	let { layout, isClassicSplitMenu } = themeConfig.value;
-	if (layout === 'classic' && isClassicSplitMenu) {
-		mittBus.emit('setSendClassicChildren', setSendClassicChildren(to.path));
-	}
-});
-</script>
-
-<style scoped lang="scss">
-.el-menu-horizontal-warp {
-	flex: 1;
-	overflow: hidden;
-	margin-right: 30px;
-	:deep(.el-scrollbar__bar.is-vertical) {
-		display: none;
-	}
-	:deep(a) {
-		width: 100%;
-	}
-	.el-menu.el-menu--horizontal {
-		display: flex;
-		height: 100%;
-		width: 100%;
-		box-sizing: border-box;
-	}
-}
-</style>

package/src/layout/navMenu/subItem.vue

@@ -1,49 +0,0 @@
-<template>
-	<template v-for="val in chils">
-		<el-sub-menu :index="val.path" :key="val.path" v-if="val.children && val.children.length > 0">
-			<template #title>
-				<SvgIcon :name="val.meta.icon" />
-				<span>{{ val.meta.title }}</span>
-			</template>
-			<sub-item :chil="val.children" />
-		</el-sub-menu>
-		<template v-else>
-			<el-menu-item :index="val.path" :key="val.path">
-				<template v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
-					<SvgIcon :name="val.meta.icon" />
-					<span>{{ val.meta.title }}</span>
-				</template>
-				<template v-else>
-					<a class="w100" @click.prevent="onALinkClick(val)">
-						<SvgIcon :name="val.meta.icon" />
-						{{ val.meta.title }}
-					</a>
-				</template>
-			</el-menu-item>
-		</template>
-	</template>
-</template>
-
-<script setup lang="ts" name="navMenuSubItem">
-import { computed } from 'vue';
-import { RouteRecordRaw } from 'vue-router';
-import other from '/@/utils/other';
-
-// 定义父组件传过来的值
-const props = defineProps({
-	// 菜单列表
-	chil: {
-		type: Array<RouteRecordRaw>,
-		default: () => [],
-	},
-});
-
-// 获取父级菜单数据
-const chils = computed(() => {
-	return <RouteItems>props.chil;
-});
-// 打开外部链接
-const onALinkClick = (val: RouteItem) => {
-	other.handleOpenLink(val);
-};
-</script>

package/src/layout/navMenu/vertical.vue

@@ -1,100 +0,0 @@
-<template>
-	<el-menu
-		router
-		:default-active="state.defaultActive"
-		background-color="transparent"
-		:collapse="state.isCollapse"
-		:unique-opened="getThemeConfig.isUniqueOpened"
-		:collapse-transition="false"
-	>
-		<template v-for="val in menuLists">
-			<el-sub-menu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
-				<template #title>
-					<SvgIcon :name="val.meta.icon" />
-					<span>{{ val.meta.title }}</span>
-				</template>
-				<SubItem :chil="val.children" />
-			</el-sub-menu>
-			<template v-else>
-				<el-menu-item :index="val.path" :key="val.path">
-					<SvgIcon :name="val.meta.icon" />
-					<template #title v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
-						<span>{{ val.meta.title }}</span>
-					</template>
-					<template #title v-else>
-						<a class="w100" @click.prevent="onALinkClick(val)">{{ val.meta.title }}</a>
-					</template>
-				</el-menu-item>
-			</template>
-		</template>
-	</el-menu>
-</template>
-
-<script setup lang="ts" name="navMenuVertical">
-import { defineAsyncComponent, reactive, computed, onMounted, watch } from 'vue';
-import { useRoute, onBeforeRouteUpdate, RouteRecordRaw } from 'vue-router';
-import { storeToRefs } from 'pinia';
-import { useThemeConfig } from '/@/stores/themeConfig';
-import other from '/@/utils/other';
-
-// 引入组件
-const SubItem = defineAsyncComponent(() => import('/@/layout/navMenu/subItem.vue'));
-
-// 定义父组件传过来的值
-const props = defineProps({
-	// 菜单列表
-	menuList: {
-		type: Array<RouteRecordRaw>,
-		default: () => [],
-	},
-});
-
-// 定义变量内容
-const storesThemeConfig = useThemeConfig();
-const { themeConfig } = storeToRefs(storesThemeConfig);
-const route = useRoute();
-const state = reactive({
-	defaultActive: route.meta.isDynamic ? route.meta.isDynamicPath : route.path,
-	isCollapse: false,
-});
-
-// 获取父级菜单数据
-const menuLists = computed(() => {
-	return <RouteItems>props.menuList;
-});
-// 获取布局配置信息
-const getThemeConfig = computed(() => {
-	return themeConfig.value;
-});
-// 菜单高亮（详情时，父级高亮）
-const setParentHighlight = (currentRoute: RouteToFrom) => {
-	const { path, meta } = currentRoute;
-	const pathSplit = meta?.isDynamic ? meta.isDynamicPath!.split('/') : path!.split('/');
-	if (pathSplit.length >= 4 && meta?.isHide) return pathSplit.splice(0, 3).join('/');
-	else return path;
-};
-// 打开外部链接
-const onALinkClick = (val: RouteItem) => {
-	other.handleOpenLink(val);
-};
-// 页面加载时
-onMounted(() => {
-	state.defaultActive = setParentHighlight(route);
-});
-// 路由更新时
-onBeforeRouteUpdate((to) => {
-	state.defaultActive = setParentHighlight(to);
-	const clientWidth = document.body.clientWidth;
-	if (clientWidth < 1000) themeConfig.value.isCollapse = false;
-});
-// 设置菜单的收起/展开
-watch(
-	() => themeConfig.value.isCollapse,
-	(isCollapse) => {
-		document.body.clientWidth <= 1000 ? (state.isCollapse = false) : (state.isCollapse = isCollapse);
-	},
-	{
-		immediate: true,
-	}
-);
-</script>