OnlineEducation-back-front/src/views/myResource/common/BreadCrumb.vue

<template>
	<div class="breadcrumb-wrapper">
		<div class="title">当前位置：</div>
		<a-input
			class="file-path-input"
			ref="filePathInputRef"
			placeholder="请输入路径"
			v-model:value="inputFilePath"
			size="small"
			:autoFocus="true"
			v-if="isShowInput"
			@blur="handleInputBlurEnter"
			@change="handleInputBlurEnter"
		></a-input>
		<div
			class="breadcrumb-box"
			:class="{ 'able-input': fileType === 0 }"
			v-if="!isShowInput"
			@click.self="handleClickBreadCrumbSelf"
		>
			<a-breadcrumb v-if="![0, 8].includes(fileType) && !['Share'].includes(route.name)">
				<a-breadcrumb-item>{{ fileTypeMap[fileType] }}</a-breadcrumb-item>
			</a-breadcrumb>
			<a-breadcrumb v-else>
				<a-breadcrumb-item v-for="(item, index) in breadCrumbList" :key="index">
					<!-- <router-link :to="getRouteQuery(item)">{{ item.name }}</router-link> -->
					<span style="cursor: pointer" @click="setRouteQuery(item)">{{ item.name }}</span>
				</a-breadcrumb-item>
			</a-breadcrumb>
		</div>
	</div>
</template>

<script setup>
	import { ref, computed, nextTick } from 'vue'
	import { useRoute, useRouter } from 'vue-router'
	import { useMyResourceStore } from '@/store/myResource'
	const myResourceStore = useMyResourceStore()
	const props = defineProps({
		// 文件类型
		fileType: {
			required: true,
			type: Number
		},
		// 文件路径
		filePath: {
			require: true,
			type: String
		}
	})

	const route = useRoute()
	const router = useRouter()

	const fileTypeMap = {
		1: '全部图片',
		2: '全部文档',
		3: '全部视频',
		4: '全部音乐',
		5: '其他',
		6: '回收站',
		// 7: '群文件',
		// 9: '团队文件',
		10: '正在传输',
		11: '传输完成',
		12: '敏感词',
		13: '敏感词过滤记录',
		14: '跨文件传输记录',
		15: '企业云盘'
	}

	const isShowInput = ref(false) //  是否展示路径输入框
	const inputFilePath = ref('') //  路径输入
	const filePathInputRef = ref(null)

	/**
	 * 面包屑导航栏数组
	 */
	const breadCrumbList = computed(() => {
		// let filePath = route.query.filePath
		let filePath = myResourceStore.getQuery.filePath ? myResourceStore.getQuery.filePath : '/'
		let filePathList = filePath ? filePath.split('/') : []
		let res = [] //  返回结果数组
		let _path = [] //  存放祖先路径
		for (let i = 0; i < filePathList.length; i++) {
			if (filePathList[i]) {
				_path.push(filePathList[i])
				res.push({
					path: _path.join('/'),
					name: filePathList[i]
				})
			} else if (i === 0) {
				//  根目录
				filePathList[i] = ''
				_path.push(filePathList[i])
				res.push({
					path: '/',
					name:
						props.fileType === 0
							? '全部文件'
							: props.fileType === 8
							? '我的分享'
							: route.name === 'Share'
							? '全部分享'
							: ''
				})
			}
		}
		return res
	})

	/**
	 * 点击面包屑导航栏空白处
	 */
	const handleClickBreadCrumbSelf = () => {
		if (props.fileType === 0) {
			inputFilePath.value = props.filePath
			isShowInput.value = true
			nextTick(() => {
				filePathInputRef.value?.focus()
			})
		}
	}

	/**
	 * 路径输入框失去焦点或用户按下回车时触发
	 */
	const handleInputBlurEnter = () => {
		isShowInput.value = false
		if (inputFilePath.value !== props.filePath) {
			const fixInputFilePath = inputFilePath.value.endsWith('/')
				? inputFilePath.value.slice(0, -1)
				: inputFilePath.value
			// router.push({
			// 	query: { filePath: `${fixInputFilePath}`, fileType: 0 }
			// })
			myResourceStore.changeQuery({ filePath: fixInputFilePath, fileType: 0 })
		}
	}

	// 获取文件参数
	const getRouteQuery = (item) => {
		let routeName = route.name
		if (routeName === 'Share') {
			// 当前是查看他人分享列表的页面
			return { query: { filePath: item.path } }
		} else if (props.fileType === 8) {
			// 当前是我的已分享列表页面
			return {
				query: {
					fileType: 8,
					filePath: item.path,
					shareBatchNum: item.path === '/' ? undefined : route.query.shareBatchNum //  当查看的是根目录，批次号置空
				}
			}
		} else {
			// 网盘页面
			return { query: { filePath: item.path, fileType: 0 } }
		}
	}
	const setRouteQuery = (item) => {
		let data = getRouteQuery(item)
		myResourceStore.changeQuery(data.query)
	}
</script>

<style lang="less" scoped>
	@import '@/style/myResource/varibles.less';

	.breadcrumb-wrapper {
		padding: 0;
		height: 30px;
		line-height: 30px;
		display: flex;
		.title,
		:deep(.ant-breadcrumb) {
			height: 30px;
			line-height: 30px;
		}
		.file-path-input {
			flex: 1;
			font-size: 14px;
		}
		.breadcrumb-box {
			padding: 0 8px;
			flex: 1;
			display: flex;
			&.able-input {
				cursor: pointer;
				&:hover {
					// background: @tabBackColor; // 假设 $tabBackColor 转换为 @tabBackColor
				}
			}
		}
	}
</style>