OnlineEducation-student-front/src/views/myResource/resourceLibrary/file/AsideMenu.vue

<template>
	<div class="side-menu-wrapper">
		<!-- 768px 下，以抽屉形式展示 -->
		<a-drawer v-model="isDrawer" :width="210" :closable="false" placement="left" v-if="screenWidth <= 768">
			<!-- collapse 属性：控制菜单收缩展开 -->
			<a-menu class="side-menu" v-model:selectedKeys="activeIndex" :mode="'inline'" :inline-collapsed="isCollapse">
				<a-sub-menu key="myFile" class="my-file">
					<template #title>
						<!-- 使用 Ant Design Vue 的图标 -->
						<folder-outlined />
						<span>我的文件</span>
					</template>
					<a-menu-item key="0" @click="navigateTo({ name: 'resourceLibrary', query: { fileType: 0, filePath: '/' } })">
						<menu-outlined />
						<span>全部</span>
					</a-menu-item>
					<a-menu-item key="1" @click="navigateTo({ name: 'resourceLibrary', query: { fileType: 1 } })">
						<picture-outlined />
						<span>图片</span>
					</a-menu-item>
					<a-menu-item key="2" @click="navigateTo({ name: 'resourceLibrary', query: { fileType: 2 } })">
						<file-text-outlined />
						<span>文档</span>
					</a-menu-item>
					<a-menu-item key="3" @click="navigateTo({ name: 'resourceLibrary', query: { fileType: 3 } })">
						<video-camera-outlined />
						<span>视频</span>
					</a-menu-item>
					<a-menu-item key="4" @click="navigateTo({ name: 'resourceLibrary', query: { fileType: 4 } })">
						<sound-outlined />
						<span>音乐</span>
					</a-menu-item>
					<a-menu-item key="5" @click="navigateTo({ name: 'resourceLibrary', query: { fileType: 5 } })">
						<inbox-outlined />
						<span>其他</span>
					</a-menu-item>
				</a-sub-menu>
				<a-menu-item key="6" @click="navigateTo({ name: 'resourceLibrary', query: { fileType: 6 } })" class="recovery">
					<delete-outlined />
					<span>回收站</span>
				</a-menu-item>
				<a-menu-item
					key="8"
					@click="navigateTo({ name: 'resourceLibrary', query: { fileType: 8, filePath: '/' } })"
					class="my-share"
				>
					<share-alt-outlined />
					<span>我的分享</span>
				</a-menu-item>
			</a-menu>
			<!-- 存储信息显示 -->
			<div class="storage-wrapper" :class="{ fold: isCollapse }">
				<a-progress
					:percent="storagePercentage"
					:stroke-color="storageColor"
					:show-info="false"
					:type="isCollapse ? 'circle' : 'line'"
					:width="32"
					:stroke-width="isCollapse ? 4 : 6"
					stroke-linecap="square"
				></a-progress>
				<div class="text" v-show="!isCollapse">
					<span class="label">存储</span>
					<span>
						{{ $file.calculateFileSize(storageValue) }} /
						{{ $file.calculateFileSize(totalStorageValue) }}
					</span>
				</div>
				<div class="text" v-show="isCollapse">
					<span>{{ $file.calculateFileSize(storageValue) }}</span>
				</div>
			</div>
		</a-drawer>
		<!-- 768px 以上，平铺展示 -->
		<template v-else>
			<!-- collapse 属性：控制菜单收缩展开 -->
			<a-menu class="side-menu" v-model:selectedKeys="activeIndex" :mode="'inline'" :inline-collapsed="isCollapse">
				<a-sub-menu key="myFile" class="my-file">
					<template #title>
						<!-- 使用 Ant Design Vue 的图标 -->
						<folder-outlined />
						<span>我的文件</span>
					</template>
					<a-menu-item key="0" @click="navigateTo({ name: 'resourceLibrary', query: { fileType: 0, filePath: '/' } })">
						<menu-outlined />
						<span>全部</span>
					</a-menu-item>
					<a-menu-item key="1" @click="navigateTo({ name: 'resourceLibrary', query: { fileType: 1 } })">
						<picture-outlined />
						<span>图片</span>
					</a-menu-item>
					<a-menu-item key="2" @click="navigateTo({ name: 'resourceLibrary', query: { fileType: 2 } })">
						<file-text-outlined />
						<span>文档</span>
					</a-menu-item>
					<a-menu-item key="3" @click="navigateTo({ name: 'resourceLibrary', query: { fileType: 3 } })">
						<video-camera-outlined />
						<span>视频</span>
					</a-menu-item>
					<a-menu-item key="4" @click="navigateTo({ name: 'resourceLibrary', query: { fileType: 4 } })">
						<sound-outlined />
						<span>音乐</span>
					</a-menu-item>
					<a-menu-item key="5" @click="navigateTo({ name: 'resourceLibrary', query: { fileType: 5 } })">
						<inbox-outlined />
						<span>其他</span>
					</a-menu-item>
				</a-sub-menu>
				<a-menu-item key="6" @click="navigateTo({ name: 'resourceLibrary', query: { fileType: 6 } })" class="recovery">
					<delete-outlined />
					<span>回收站</span>
				</a-menu-item>
				<a-menu-item
					key="8"
					@click="navigateTo({ name: 'resourceLibrary', query: { fileType: 8, filePath: '/' } })"
					class="my-share"
				>
					<share-alt-outlined />
					<span>我的分享</span>
				</a-menu-item>
			</a-menu>
			<!-- 存储信息显示 -->
			<div class="storage-wrapper" :class="{ fold: isCollapse }">
				<a-progress
					:percent="storagePercentage"
					:stroke-color="storageColor"
					:show-info="false"
					:type="isCollapse ? 'circle' : 'line'"
					:width="32"
					:stroke-width="isCollapse ? 4 : 6"
					stroke-linecap="square"
				></a-progress>
				<div class="text" v-show="!isCollapse">
					<span class="label">存储</span>
					<span>
						{{ $file.calculateFileSize(storageValue) }} /
						{{ $file.calculateFileSize(totalStorageValue) }}
					</span>
				</div>
				<div class="text" v-show="isCollapse">
					<span>{{ $file.calculateFileSize(storageValue) }}</span>
				</div>
			</div>
		</template>
		<!-- 展开 & 收缩分类栏 -->
		<a-tooltip :title="isCollapse ? '展开' : '收起'" placement="right">
			<div class="aside-title" @click="isCollapse ? (isCollapse = false) : (isCollapse = true)">
				<right-outlined v-if="isCollapse" class="icon" />
				<left-outlined v-else class="icon" />
			</div>
		</a-tooltip>
	</div>
</template>

<script setup>
	import { ref, computed, watch, onMounted, getCurrentInstance } from 'vue'
	import { useRouter, useRoute } from 'vue-router'
	import { useMyResourceStore } from '@/store/myResource'
	import {
		FolderOutlined,
		MenuOutlined,
		PictureOutlined,
		FileTextOutlined,
		VideoCameraOutlined,
		SoundOutlined,
		InboxOutlined,
		DeleteOutlined,
		ShareAltOutlined,
		LeftOutlined,
		RightOutlined
	} from '@ant-design/icons-vue'

	// 获取当前实例，用于访问全局属性
	const { proxy } = getCurrentInstance()
	const router = useRouter()
	const route = useRoute()
	const myResourceStore = useMyResourceStore()

	const emit = defineEmits([''])

	// 数据
	const isDrawer = ref(false) // 控制移动端菜单抽屉是否显示
	const isCollapse = ref(false) // 控制菜单收缩展开

	// 将计算属性改为响应式变量
	const activeIndex = ref([String(myResourceStore.getQuery.fileType ? myResourceStore.getQuery.fileType : '' || '0')])

	// 菜单 index 和名称 Map
	const myFileMenuMap = {
		0: '全部',
		1: '图片',
		2: '文档',
		3: '视频',
		4: '音乐',
		5: '其他',
		6: '回收站',
		8: '我的分享'
	}

	// 自定义进度条颜色，不同占比，进度条颜色不同
	const storageColor = {
		'0%': '#67C23A',
		'50%': '#67C23A',
		'80%': '#E6A23C',
		'100%': '#F56C6C'
	}

	// 存储容量
	const storageValue = computed(() => {
		return myResourceStore.storageValue
	})

	const totalStorageValue = computed(() => {
		return myResourceStore.totalStorageValue
	})

	// 存储百分比
	const storagePercentage = computed(() => {
		return totalStorageValue.value ? (storageValue.value / totalStorageValue.value) * 100 : 0
	})

	// 屏幕宽度
	const screenWidth = computed(() => {
		return myResourceStore.screenWidth
	})

	// 监听路由变化，更新activeIndex
	// watch(
	// 	() => route.query.fileType,
	// 	(newValue) => {
	// 		activeIndex.value = [String(newValue || '0')]
	// 		console.log('activeIndex', activeIndex.value)
	// 		document.title = `${myFileMenuMap[Number(newValue || 0)]} - ${proxy.$RESOURCE_CONFIG.siteName}`
	// 		isDrawer.value = false
	// 	}
	// )

	// // 监听收缩状态变化，存储在 localStorage 中，保证页面刷新时仍然保存设置的状态
	// watch(isCollapse, (newValue) => {
	// 	localStorage.setItem('qiwen_is_collapse', newValue)
	// 	if (screenWidth.value <= 768 && newValue) {
	// 		isDrawer.value = true
	// 		isCollapse.value = false
	// 	}
	// })

	// 导航到指定路由
	const navigateTo = (route) => {
		console.log('route==', route)
		// router.push(route)
		emit('onNavigateTo', route)
	}

	// 生命周期钩子
	onMounted(() => {
		isCollapse.value = localStorage.getItem('qiwen_is_collapse') === 'true' // 读取保存的状态
		document.title = `${myFileMenuMap[Number(activeIndex.value[0] || 0)]} - ${proxy.$RESOURCE_CONFIG.siteName}`
	})
</script>

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

	.side-menu-wrapper {
		position: relative;
		height: calc(100vh - 61px);
		padding-right: 11px;
		.side-menu {
			// 高度设置为屏幕高度减去顶部导航栏的高度
			height: calc(100vh - 127px);
			overflow: auto;
			// 调整滚动条样式
			.setScrollbar(6px, transparent, #C0C4CC);
			:deep(.ant-menu-item-selected) {
				background: #ecf5ff;
			}
			.my-file,
			.recovery {
				box-shadow: 0 4px 12px 0 @BorderExtralight;
			}
		}
		:deep(.ant-menu) {
			background: transparent;
			color: #fff;
		}
		// 对展开状态下的菜单设置宽度
		.side-menu:not(.ant-menu-inline-collapsed) {
			width: 210px;
		}
		// 存储空间展示区
		.storage-wrapper {
			position: absolute;
			bottom: 0;
			left: 0;
			box-shadow: 0 -2px 12px 0 @BorderExtralight;
			border-right: solid 1px #e6e6e6;
			box-sizing: border-box;
			width: calc(100% - 11px);
			height: 66px;
			padding: 16px;
			z-index: 2;
			color: @PrimaryText;
			.text {
				margin-top: 8px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 12px;
				flex-wrap: wrap;
			}
		}
		.storage-wrapper.fold {
			padding: 0;
			:deep(.ant-progress-circle) {
				margin: 0 auto;
				width: 32px;
				display: block;
			}
			.text {
				font-size: 12px;
				justify-content: center;
			}
		}
		// 折叠图标调整样式
		.aside-title {
			position: absolute;
			top: calc(50% - 50px);
			right: 0;
			z-index: 2;
			background: @BorderBase;
			color: #fff;
			width: 12px;
			height: 100px;
			line-height: 100px;
			cursor: pointer;
			border-radius: 0 16px 16px 0;
			&:hover {
				opacity: 0.7;
			}
			.icon {
				font-size: 12px;
			}
		}
	}
</style>