iailab-plat-ui-vue3.git

dengzedong

5 天以前 f9b459a3fefd5fab0ee8e19268adb9d9eadab2a7

提交 \| 用户 \| 时间
820397	1	<script lang="ts" setup>
3e359e	2	import { computed, nextTick, onMounted, ref, unref, watch } from 'vue'
820397	3	import type { RouteLocationNormalizedLoaded, RouterLinkProps } from 'vue-router'
3e359e	4	import { useRouter } from 'vue-router'
820397	5	import { usePermissionStore } from '@/store/modules/permission'
H	6	import { useTagsViewStore } from '@/store/modules/tagsView'
	7	import { useAppStore } from '@/store/modules/app'
	8	import { useI18n } from '@/hooks/web/useI18n'
	9	import { filterAffixTags } from './helper'
	10	import { ContextMenu, ContextMenuExpose } from '@/layout/components/ContextMenu'
	11	import { useDesign } from '@/hooks/web/useDesign'
	12	import { useTemplateRefsList } from '@vueuse/core'
	13	import { ElScrollbar } from 'element-plus'
	14	import { useScrollTo } from '@/hooks/event/useScrollTo'
	15
	16	const { getPrefixCls } = useDesign()
	17
	18	const prefixCls = getPrefixCls('tags-view')
	19
	20	const { t } = useI18n()
	21
	22	const { currentRoute, push, replace } = useRouter()
	23
	24	const permissionStore = usePermissionStore()
	25
	26	const routers = computed(() => permissionStore.getRouters)
	27
	28	const tagsViewStore = useTagsViewStore()
	29
	30	const visitedViews = computed(() => tagsViewStore.getVisitedViews)
	31
	32	const affixTagArr = ref<RouteLocationNormalizedLoaded[]>([])
	33
	34	const appStore = useAppStore()
3e359e	35
H	36	const tagsViewImmerse = computed(() => appStore.getTagsViewImmerse)
820397	37
H	38	const tagsViewIcon = computed(() => appStore.getTagsViewIcon)
	39
	40	const isDark = computed(() => appStore.getIsDark)
	41
	42	// 初始化tag
	43	const initTags = () => {
	44	affixTagArr.value = filterAffixTags(unref(routers))
	45	for (const tag of unref(affixTagArr)) {
	46	// Must have tag name
	47	if (tag.name) {
	48	tagsViewStore.addVisitedView(tag)
	49	}
	50	}
	51	}
	52
	53	const selectedTag = ref<RouteLocationNormalizedLoaded>()
	54
	55	// 新增tag
	56	const addTags = () => {
	57	const { name } = unref(currentRoute)
	58	if (name) {
	59	selectedTag.value = unref(currentRoute)
	60	tagsViewStore.addView(unref(currentRoute))
	61	}
	62	return false
	63	}
	64
	65	// 关闭选中的tag
	66	const closeSelectedTag = (view: RouteLocationNormalizedLoaded) => {
	67	if (view?.meta?.affix) return
	68	tagsViewStore.delView(view)
	69	if (isActive(view)) {
	70	toLastView()
	71	}
	72	}
	73
	74	// 关闭全部
	75	const closeAllTags = () => {
	76	tagsViewStore.delAllViews()
	77	toLastView()
	78	}
	79
	80	// 关闭其它
	81	const closeOthersTags = () => {
	82	tagsViewStore.delOthersViews(unref(selectedTag) as RouteLocationNormalizedLoaded)
	83	}
	84
	85	// 重新加载
	86	const refreshSelectedTag = async (view?: RouteLocationNormalizedLoaded) => {
	87	if (!view) return
	88	tagsViewStore.delCachedView()
	89	const { path, query } = view
	90	await nextTick()
	91	replace({
	92	path: '/redirect' + path,
	93	query: query
	94	})
	95	}
	96
	97	// 关闭左侧
	98	const closeLeftTags = () => {
	99	tagsViewStore.delLeftViews(unref(selectedTag) as RouteLocationNormalizedLoaded)
	100	}
	101
	102	// 关闭右侧
	103	const closeRightTags = () => {
	104	tagsViewStore.delRightViews(unref(selectedTag) as RouteLocationNormalizedLoaded)
	105	}
	106
	107	// 跳转到最后一个
	108	const toLastView = () => {
	109	const visitedViews = tagsViewStore.getVisitedViews
	110	const latestView = visitedViews.slice(-1)[0]
	111	if (latestView) {
	112	push(latestView)
	113	} else {
	114	if (
	115	unref(currentRoute).path === permissionStore.getAddRouters[0].path \|\|
	116	unref(currentRoute).path === permissionStore.getAddRouters[0].redirect
	117	) {
	118	addTags()
	119	return
	120	}
	121	// TODO: You can set another route
	122	push('/')
	123	}
	124	}
	125
	126	// 滚动到选中的tag
	127	const moveToCurrentTag = async () => {
	128	await nextTick()
	129	for (const v of unref(visitedViews)) {
3e359e	130	if (v.fullPath === unref(currentRoute).fullPath) {
820397	131	moveToTarget(v)
H	132	break
	133	}
	134	}
	135	}
	136
	137	const tagLinksRefs = useTemplateRefsList<RouterLinkProps>()
	138
	139	const moveToTarget = (currentTag: RouteLocationNormalizedLoaded) => {
	140	const wrap$ = unref(scrollbarRef)?.wrapRef
	141	let firstTag: Nullable<RouterLinkProps> = null
	142	let lastTag: Nullable<RouterLinkProps> = null
	143
	144	const tagList = unref(tagLinksRefs)
	145	// find first tag and last tag
	146	if (tagList.length > 0) {
	147	firstTag = tagList[0]
	148	lastTag = tagList[tagList.length - 1]
	149	}
	150	if ((firstTag?.to as RouteLocationNormalizedLoaded).fullPath === currentTag.fullPath) {
	151	// 直接滚动到0的位置
	152	const { start } = useScrollTo({
	153	el: wrap$!,
	154	position: 'scrollLeft',
	155	to: 0,
	156	duration: 500
	157	})
	158	start()
	159	} else if ((lastTag?.to as RouteLocationNormalizedLoaded).fullPath === currentTag.fullPath) {
	160	// 滚动到最后的位置
	161	const { start } = useScrollTo({
	162	el: wrap$!,
	163	position: 'scrollLeft',
	164	to: wrap$!.scrollWidth - wrap$!.offsetWidth,
	165	duration: 500
	166	})
	167	start()
	168	} else {
	169	// find preTag and nextTag
	170	const currentIndex: number = tagList.findIndex(
	171	(item) => (item?.to as RouteLocationNormalizedLoaded).fullPath === currentTag.fullPath
	172	)
	173	const tgsRefs = document.getElementsByClassName(`${prefixCls}__item`)
	174
	175	const prevTag = tgsRefs[currentIndex - 1] as HTMLElement
	176	const nextTag = tgsRefs[currentIndex + 1] as HTMLElement
	177
	178	// the tag's offsetLeft after of nextTag
	179	const afterNextTagOffsetLeft = nextTag.offsetLeft + nextTag.offsetWidth + 4
	180
	181	// the tag's offsetLeft before of prevTag
	182	const beforePrevTagOffsetLeft = prevTag.offsetLeft - 4
	183
	184	if (afterNextTagOffsetLeft > unref(scrollLeftNumber) + wrap$!.offsetWidth) {
	185	const { start } = useScrollTo({
	186	el: wrap$!,
	187	position: 'scrollLeft',
	188	to: afterNextTagOffsetLeft - wrap$!.offsetWidth,
	189	duration: 500
	190	})
	191	start()
	192	} else if (beforePrevTagOffsetLeft < unref(scrollLeftNumber)) {
	193	const { start } = useScrollTo({
	194	el: wrap$!,
	195	position: 'scrollLeft',
	196	to: beforePrevTagOffsetLeft,
	197	duration: 500
	198	})
	199	start()
	200	}
	201	}
	202	}
	203
	204	// 是否是当前tag
	205	const isActive = (route: RouteLocationNormalizedLoaded): boolean => {
3e359e	206	return route.fullPath === unref(currentRoute).fullPath
820397	207	}
H	208
	209	// 所有右键菜单组件的元素
	210	const itemRefs = useTemplateRefsList<ComponentRef<typeof ContextMenu & ContextMenuExpose>>()
	211
	212	// 右键菜单装填改变的时候
	213	const visibleChange = (visible: boolean, tagItem: RouteLocationNormalizedLoaded) => {
	214	if (visible) {
	215	for (const v of unref(itemRefs)) {
	216	const elDropdownMenuRef = v.elDropdownMenuRef
	217	if (tagItem.fullPath !== v.tagItem.fullPath) {
	218	elDropdownMenuRef?.handleClose()
	219	}
	220	}
	221	}
	222	}
	223
	224	// elscroll 实例
	225	const scrollbarRef = ref<ComponentRef<typeof ElScrollbar>>()
	226
	227	// 保存滚动位置
	228	const scrollLeftNumber = ref(0)
	229
	230	const scroll = ({ scrollLeft }) => {
	231	scrollLeftNumber.value = scrollLeft as number
	232	}
	233
	234	// 移动到某个位置
	235	const move = (to: number) => {
	236	const wrap$ = unref(scrollbarRef)?.wrapRef
	237	const { start } = useScrollTo({
	238	el: wrap$!,
	239	position: 'scrollLeft',
	240	to: unref(scrollLeftNumber) + to,
	241	duration: 500
	242	})
	243	start()
	244	}
	245
	246	onMounted(() => {
	247	initTags()
	248	addTags()
	249	})
	250
	251	watch(
	252	() => currentRoute.value,
	253	() => {
	254	addTags()
	255	moveToCurrentTag()
	256	}
	257	)
	258	</script>
	259
	260	<template>
	261	<div
	262	:id="prefixCls"
	263	:class="prefixCls"
	264	class="relative w-full flex bg-[#fff] dark:bg-[var(--el-bg-color)]"
	265	>
	266	<span
3e359e	267	:class="tagsViewImmerse ? '' : `${prefixCls}__tool ${prefixCls}__tool--first`"
820397	268	class="h-[var(--tags-view-height)] w-[var(--tags-view-height)] flex cursor-pointer items-center justify-center"
H	269	@click="move(-200)"
	270	>
	271	<Icon
	272	:hover-color="isDark ? '#fff' : 'var(--el-color-black)'"
3e359e	273	color="var(--el-text-color-placeholder)"
H	274	icon="ep:d-arrow-left"
820397	275	/>
H	276	</span>
	277	<div class="flex-1 overflow-hidden">
	278	<ElScrollbar ref="scrollbarRef" class="h-full" @scroll="scroll">
3e359e	279	<div class="h-[var(--tags-view-height)] flex">
820397	280	<ContextMenu
3e359e	281	v-for="item in visitedViews"
H	282	:key="item.fullPath"
820397	283	:ref="itemRefs.set"
3e359e	284	:class="[
H	285	`${prefixCls}__item`,
	286	tagsViewImmerse ? `${prefixCls}__item--immerse` : '',
	287	tagsViewIcon ? `${prefixCls}__item--icon` : '',
	288	tagsViewImmerse && tagsViewIcon ? `${prefixCls}__item--immerse--icon` : '',
	289	item?.meta?.affix ? `${prefixCls}__item--affix` : '',
	290	{
	291	'is-active': isActive(item)
	292	}
	293	]"
820397	294	:schema="[
H	295	{
	296	icon: 'ep:refresh',
	297	label: t('common.reload'),
	298	disabled: selectedTag?.fullPath !== item.fullPath,
	299	command: () => {
	300	refreshSelectedTag(item)
	301	}
	302	},
	303	{
	304	icon: 'ep:close',
	305	label: t('common.closeTab'),
	306	disabled: !!visitedViews?.length && selectedTag?.meta.affix,
	307	command: () => {
	308	closeSelectedTag(item)
	309	}
	310	},
	311	{
	312	divided: true,
	313	icon: 'ep:d-arrow-left',
	314	label: t('common.closeTheLeftTab'),
	315	disabled:
	316	!!visitedViews?.length &&
	317	(item.fullPath === visitedViews[0].fullPath \|\|
	318	selectedTag?.fullPath !== item.fullPath),
	319	command: () => {
	320	closeLeftTags()
	321	}
	322	},
	323	{
	324	icon: 'ep:d-arrow-right',
	325	label: t('common.closeTheRightTab'),
	326	disabled:
	327	!!visitedViews?.length &&
	328	(item.fullPath === visitedViews[visitedViews.length - 1].fullPath \|\|
	329	selectedTag?.fullPath !== item.fullPath),
	330	command: () => {
	331	closeRightTags()
	332	}
	333	},
	334	{
	335	divided: true,
	336	icon: 'ep:discount',
	337	label: t('common.closeOther'),
	338	disabled: selectedTag?.fullPath !== item.fullPath,
	339	command: () => {
	340	closeOthersTags()
	341	}
	342	},
	343	{
	344	icon: 'ep:minus',
	345	label: t('common.closeAll'),
	346	command: () => {
	347	closeAllTags()
	348	}
	349	}
	350	]"
	351	:tag-item="item"
	352	@visible-change="visibleChange"
	353	>
	354	<div>
3e359e	355	<router-link :ref="tagLinksRefs.set" v-slot="{ navigate }" :to="{ ...item }" custom>
820397	356	<div
3e359e	357	:class="`h-full flex items-center justify-center whitespace-nowrap pl-15px ${prefixCls}__item--label`"
820397	358	@click="navigate"
H	359	>
	360	<Icon
	361	v-if="
3e359e	362	tagsViewIcon &&
H	363	(item?.meta?.icon \|\|
	364	(item?.matched &&
	365	item.matched[0] &&
	366	item.matched[item.matched.length - 1].meta?.icon))
820397	367	"
3e359e	368	:icon="item?.meta?.icon \|\| item.matched[item.matched.length - 1].meta.icon"
820397	369	:size="12"
H	370	class="mr-5px"
	371	/>
3e359e	372	{{
H	373	t(item?.meta?.title as string) +
	374	(item?.meta?.titleSuffix ? ` (${item?.meta?.titleSuffix})` : '')
	375	}}
820397	376	<Icon
H	377	:class="`${prefixCls}__item--close`"
3e359e	378	:size="12"
820397	379	color="#333"
H	380	icon="ep:close"
	381	@click.prevent.stop="closeSelectedTag(item)"
	382	/>
	383	</div>
	384	</router-link>
	385	</div>
	386	</ContextMenu>
	387	</div>
	388	</ElScrollbar>
	389	</div>
	390	<span
3e359e	391	:class="tagsViewImmerse ? '' : `${prefixCls}__tool`"
820397	392	class="h-[var(--tags-view-height)] w-[var(--tags-view-height)] flex cursor-pointer items-center justify-center"
H	393	@click="move(200)"
	394	>
	395	<Icon
	396	:hover-color="isDark ? '#fff' : 'var(--el-color-black)'"
3e359e	397	color="var(--el-text-color-placeholder)"
H	398	icon="ep:d-arrow-right"
820397	399	/>
H	400	</span>
	401	<span
3e359e	402	:class="tagsViewImmerse ? '' : `${prefixCls}__tool`"
820397	403	class="h-[var(--tags-view-height)] w-[var(--tags-view-height)] flex cursor-pointer items-center justify-center"
H	404	@click="refreshSelectedTag(selectedTag)"
	405	>
	406	<Icon
	407	:hover-color="isDark ? '#fff' : 'var(--el-color-black)'"
3e359e	408	color="var(--el-text-color-placeholder)"
H	409	icon="ep:refresh-right"
820397	410	/>
H	411	</span>
	412	<ContextMenu
	413	:schema="[
	414	{
	415	icon: 'ep:refresh',
	416	label: t('common.reload'),
	417	command: () => {
	418	refreshSelectedTag(selectedTag)
	419	}
	420	},
	421	{
	422	icon: 'ep:close',
	423	label: t('common.closeTab'),
	424	disabled: !!visitedViews?.length && selectedTag?.meta.affix,
	425	command: () => {
	426	closeSelectedTag(selectedTag!)
	427	}
	428	},
	429	{
	430	divided: true,
	431	icon: 'ep:d-arrow-left',
	432	label: t('common.closeTheLeftTab'),
	433	disabled: !!visitedViews?.length && selectedTag?.fullPath === visitedViews[0].fullPath,
	434	command: () => {
	435	closeLeftTags()
	436	}
	437	},
	438	{
	439	icon: 'ep:d-arrow-right',
	440	label: t('common.closeTheRightTab'),
	441	disabled:
	442	!!visitedViews?.length &&
	443	selectedTag?.fullPath === visitedViews[visitedViews.length - 1].fullPath,
	444	command: () => {
	445	closeRightTags()
	446	}
	447	},
	448	{
	449	divided: true,
	450	icon: 'ep:discount',
	451	label: t('common.closeOther'),
	452	command: () => {
	453	closeOthersTags()
	454	}
	455	},
	456	{
	457	icon: 'ep:minus',
	458	label: t('common.closeAll'),
	459	command: () => {
	460	closeAllTags()
	461	}
	462	}
	463	]"
3e359e	464	trigger="click"
820397	465	>
H	466	<span
3e359e	467	:class="tagsViewImmerse ? '' : `${prefixCls}__tool`"
820397	468	class="block h-[var(--tags-view-height)] w-[var(--tags-view-height)] flex cursor-pointer items-center justify-center"
H	469	>
	470	<Icon
	471	:hover-color="isDark ? '#fff' : 'var(--el-color-black)'"
3e359e	472	color="var(--el-text-color-placeholder)"
H	473	icon="ep:menu"
820397	474	/>
H	475	</span>
	476	</ContextMenu>
	477	</div>
	478	</template>
	479
	480	<style lang="scss" scoped>
	481	$prefix-cls: #{$namespace}-tags-view;
	482
	483	.#{$prefix-cls} {
	484	:deep(.#{$elNamespace}-scrollbar__view) {
	485	height: 100%;
	486	}
	487
	488	&__tool {
	489	position: relative;
	490
	491	&::before {
	492	position: absolute;
3e359e	493	top: 0;
820397	494	left: 0;
H	495	width: 100%;
3e359e	496	height: 100%;
820397	497	border-left: 1px solid var(--el-border-color);
H	498	content: '';
	499	}
	500
	501	&--first {
	502	&::before {
	503	position: absolute;
3e359e	504	top: 0;
820397	505	left: 0;
H	506	width: 100%;
3e359e	507	height: 100%;
820397	508	border-right: 1px solid var(--el-border-color);
H	509	border-left: none;
	510	content: '';
	511	}
	512	}
	513	}
	514
	515	&__item {
	516	position: relative;
3e359e	517	top: 3px;
820397	518	height: calc(100% - 6px);
3e359e	519	padding-right: 15px;
820397	520	margin-left: 4px;
H	521	font-size: 12px;
	522	cursor: pointer;
	523	border: 1px solid #d9d9d9;
	524	border-radius: 2px;
3e359e	525	box-sizing: border-box;
820397	526
H	527	&--close {
	528	position: absolute;
	529	top: 50%;
	530	right: 5px;
	531	display: none;
	532	transform: translate(0, -50%);
	533	}
3e359e	534
820397	535	&:not(.#{$prefix-cls}__item--affix):hover {
H	536	.#{$prefix-cls}__item--close {
	537	display: block;
	538	}
	539	}
3e359e	540	}
H	541
	542	&__item--icon {
	543	padding-right: 20px;
820397	544	}
H	545
	546	&__item:not(.is-active) {
	547	&:hover {
	548	color: var(--el-color-primary);
	549	}
	550	}
	551
	552	&__item.is-active {
	553	color: var(--el-color-white);
	554	background-color: var(--el-color-primary);
	555	border: 1px solid var(--el-color-primary);
3e359e	556
820397	557	.#{$prefix-cls}__item--close {
H	558	:deep(span) {
	559	color: var(--el-color-white) !important;
3e359e	560	}
H	561	}
	562	}
	563
	564	&__item--immerse {
	565	top: 2px;
	566	height: calc(100% - 3px);
	567	padding-right: 35px;
	568	margin: 0 -10px;
	569	border: none !important;
	570	-webkit-mask-box-image: url("data:image/svg+xml,%3Csvg width='68' height='34' viewBox='0 0 68 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m27,0c-7.99582,0 -11.95105,0.00205 -12,12l0,6c0,8.284 -0.48549,16.49691 -8.76949,16.49691l54.37857,-0.11145c-8.284,0 -8.60908,-8.10146 -8.60908,-16.38546l0,-6c0.11145,-12.08445 -4.38441,-12 -12,-12l-13,0z' fill='%23409eff'/%3E%3C/svg%3E")
	571	12 27 15;
	572
	573	.#{$prefix-cls}__item--label {
	574	padding-left: 35px;
	575	}
	576
	577	.#{$prefix-cls}__item--close {
	578	right: 20px;
	579	}
	580	}
	581
	582	&__item--immerse--icon {
	583	padding-right: 35px;
	584	}
	585
	586	&__item--immerse:not(.is-active) {
	587	&:hover {
	588	color: var(--el-color-white);
	589	background-color: var(--el-color-primary);
	590
	591	.#{$prefix-cls}__item--close {
	592	:deep(span) {
	593	color: var(--el-color-white) !important;
	594	}
820397	595	}
H	596	}
	597	}
	598	}
	599
	600	.dark {
	601	.#{$prefix-cls} {
	602	&__tool {
	603	&--first {
	604	&::after {
	605	display: none;
	606	}
	607	}
	608	}
	609
	610	&__item {
	611	border: 1px solid var(--el-border-color);
	612	}
	613
	614	&__item:not(.is-active) {
	615	&:hover {
	616	color: var(--el-color-primary);
	617	}
	618	}
	619
	620	&__item.is-active {
	621	color: var(--el-color-white);
	622	background-color: var(--el-color-primary);
	623	border: 1px solid var(--el-color-primary);
3e359e	624
820397	625	.#{$prefix-cls}__item--close {
H	626	:deep(span) {
	627	color: var(--el-color-white) !important;
	628	}
	629	}
	630	}
3e359e	631
H	632	&__item--immerse:not(.is-active) {
	633	&:hover {
	634	color: var(--el-color-white);
	635	}
	636	}
820397	637	}
H	638	}
	639	</style>