OnlineEducation-student-front/src/views/myResource/components/FileGrid.vue

<template>
	<!-- 文件平铺 -->
	<div class="file-grid-wrapper">
		<a-spin :spinning="loading" tip="文件加载中……">
			<ul class="file-list">
				<li
					class="file-item"
					v-for="(item, index) in fileListSorted"
					:key="index"
					:title="$file.getFileNameComplete(item)"
					:style="`width: ${gridSize + 40}px; `"
					:class="item.userFileId === selectedFile.userFileId ? 'active' : ''"
					@click="$file.handleFileNameClick(item, index, fileListSorted)"
					@contextmenu.prevent="handleContextMenu(item, index, $event)"
				>
					<video
						:style="`height:${gridSize}px; width:${gridSize}px`"
						v-if="$file.isVideoFile(item)"
						:src="$file.setFileImg(item)"
					></video>
					<a-image
						class="file-img"
						:src="$file.setFileImg(item)"
						:style="`width: ${gridSize}px; height: ${gridSize}px;`"
						fit="cover"
						v-else
					/>
					<div class="file-name" v-html="$file.getFileNameComplete(item, true)"></div>
					<MoreOutlined
						class="file-operate"
						:class="`operate-more-${index}`"
						v-if="screenWidth <= 768"
						@click.stop="handleClickMore(item, $event)"
					/>
					<div
						class="file-checked-wrapper"
						:class="{ checked: item.checked }"
						v-show="isBatchOperation"
						@click.stop.self="item.checked = !item.checked"
					>
						<a-checkbox
							class="file-checked"
							v-model:checked="item.checked"
							@click.stop="item.checked = !item.checked"
						></a-checkbox>
					</div>
				</li>
			</ul>
		</a-spin>
	</div>
</template>

<script setup>
	import { ref, computed, watch, inject } from 'vue'
	import { useMyResourceStore } from '@/store/myResource'
	import { MoreOutlined } from '@ant-design/icons-vue'

	const props = defineProps({
		// 文件类型
		fileType: {
			required: true,
			type: Number
		},
		// 文件路径
		filePath: {
			required: true,
			type: String
		},
		fileList: Array, // 文件列表
		loading: Boolean
	})

	const emit = defineEmits(['getTableDataByType'])

	const myResourceStore = useMyResourceStore()

	const fileListSorted = ref([])
	const officeFileType = ref(['ppt', 'pptx', 'doc', 'docx', 'xls', 'xlsx'])
	const selectedFile = ref({})

	// 注入全局方法，如果这些方法是通过 provide 提供的
	const $file = inject('$file')
	const $openBox = inject('$openBox')

	// 计算属性
	const gridSize = computed(() => myResourceStore.gridSize)
	const isBatchOperation = computed(() => myResourceStore.isBatchOperation)
	const screenWidth = computed(() => myResourceStore.screenWidth)

	// 文件平铺模式 排序-文件夹在前
	watch(
		() => props.fileList,
		(newValue) => {
			fileListSorted.value = [...newValue]
				.sort((pre, next) => {
					return next.isDir - pre.isDir
				})
				.map((item) => {
					return {
						...item,
						checked: false
					}
				})
		},
		{ immediate: true }
	)

	// 批量操作模式 - 监听被选中的文件
	watch(
		() => fileListSorted.value.filter((item) => item.checked),
		(newValue) => {
			myResourceStore.changeSelectedFiles(newValue) // 假设 Pinia store 有 changeSelectedFiles 方法
			myResourceStore.changeIsBatchOperation(newValue.length !== 0) // 假设 Pinia store 有 changeIsBatchOperation 方法
		}
	)

	/**
	 * 文件鼠标右键事件
	 * @param {object} item 文件信息
	 * @param {number} index 文件索引
	 * @param {object} event 鼠标事件信息
	 */
	const handleContextMenu = (item, index, event) => {
		// 阻止右键事件冒泡
		event.cancelBubble = true
		// xs 以上的屏幕
		if (screenWidth.value > 768) {
			selectedFile.value = item
			if (!isBatchOperation.value) {
				event.preventDefault()
				$openBox
					.contextMenu({
						selectedFile: item,
						domEvent: event
					})
					.then((res) => {
						selectedFile.value = {}
						if (res === 'confirm') {
							emit('getTableDataByType') // 刷新文件列表
							myResourceStore.showStorage() // 刷新存储容量，假设在 common 模块
						}
					})
			}
		}
	}

	/**
	 * 更多图标点击事件
	 * @description 打开右键菜单
	 * @param {object} item 当前行数据
	 * @param {object} event 当前右键元素
	 */
	const handleClickMore = (item, event) => {
		selectedFile.value = item
		if (!isBatchOperation.value) {
			event.preventDefault()
			$openBox
				.contextMenu({
					selectedFile: item,
					domEvent: event
				})
				.then((res) => {
					selectedFile.value = {}
					if (res === 'confirm') {
						emit('getTableDataByType') // 刷新文件列表
						myResourceStore.showStorage() // 刷新存储容量，假设在 common 模块
					}
				})
		}
	}
</script>

<style lang="less" scoped>
	@import '@/style/myResource/varibles.less';
	@import '@/style/myResource/mixins.less';
	.file-grid-wrapper {
		border-top: 1px solid @BorderBase;

		.file-list {
			height: calc(100vh - 206px);
			overflow-y: auto;
			display: flex;
			flex-wrap: wrap;
			align-items: flex-start;
			align-content: flex-start;
			list-style: none;
			.setScrollbar(6px, transparent, #C0C4CC); // 假设 setScrollbar 混合宏已转换为 less

			.file-item {
				margin: 0 16px 16px 0;
				position: relative;
				padding: 8px;
				text-align: center;
				cursor: pointer;
				z-index: 1;

				&:hover {
					background: @tabBackColor;

					.file-name {
						font-weight: 550;
					}
				}

				.file-name {
					margin-top: 8px;
					height: 44px;
					line-height: 22px;
					font-size: 12px;
					word-break: break-all;
					.setEllipsis(2); // 假设 setEllipsis 混合宏已转换为 less

					:deep(.keyword) {
						// 使用 :deep() 或 ::v-deep 替代 >>>
						color: @Danger;
					}
				}

				.file-checked-wrapper {
					position: absolute;
					top: 0;
					left: 0;
					z-index: 2;
					background: rgba(245, 247, 250, 0.5);
					width: 100%;
					height: 100%;

					.file-checked {
						position: absolute;
						top: 16px;
						left: 24px;
					}
				}

				.file-checked-wrapper.checked {
					background: rgba(245, 247, 250, 0);
				}
			}
			.file-item.active {
				background: @tabBackColor;
			}
		}

		.right-menu-list {
			position: fixed;
			display: flex;
			flex-direction: column;
			background: #fff;
			border: 1px solid @BorderLighter;
			border-radius: 4px;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			z-index: 2;
			padding: 4px 0;
			color: @RegularText;

			.right-menu-item,
			.unzip-item {
				padding: 0 16px;
				height: 36px;
				line-height: 36px;
				cursor: pointer;
				&:hover {
					background: @PrimaryHover;
					color: @Primary;
				}
				i {
					margin-right: 8px;
				}
			}

			.unzip-menu-item {
				position: relative;
				&:hover {
					.unzip-list {
						display: block;
					}
				}
				.unzip-list {
					position: absolute;
					display: none;
					.unzip-item {
						width: 200px;
						.setEllipsis(1);
					}
				}
			}
		}
		.right-menu-list,
		.unzip-list {
			background: #fff;
			border: 1px solid @BorderLighter;
			border-radius: 4px;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			z-index: 2;
			padding: 4px 0;
			color: @RegularText;
		}
	}
</style>