OnlineEducation-back-front/src/views/myResource/components/FileTimeLine.vue

<template>
	<!-- 时间线模式 -->
	<div class="image-timeline-wrapper">
		<div class="radio">
			排序：
			<a-radio-group v-model:value="reverse">
				<a-radio :value="true">倒序</a-radio>
				<a-radio :value="false">正序</a-radio>
			</a-radio-group>
		</div>
		<a-timeline class="image-timeline-list" :reverse="reverse" v-if="imageTimelineData.length">
			<a-timeline-item
				class="image-timeline-item"
				v-for="(item, index) in imageTimelineData"
				:key="index"
				:label="item.uploadDate"
				color="blue"
				position="top"
			>
				<ul class="image-list">
					<li
						class="image-item"
						v-for="(image, imageIndex) in item.imageList"
						:key="`${index}-${imageIndex}`"
						:style="`width: ${gridSize + 40}px; `"
						@click="$file.handleImgPreview(imageIndex, {}, item.imageList)"
						@contextmenu.prevent="handleContextMenu(item, imageIndex, $event)"
					>
						<img
							class="image"
							:src="$file.getMinImgStream(image)"
							:alt="$file.getFileNameComplete(image)"
							:style="`width: ${gridSize}px; height: ${gridSize}px;`"
						/>
						<div class="image-name" v-html="$file.getFileNameComplete(image, true)"></div>
					</li>
				</ul>
			</a-timeline-item>
		</a-timeline>
	</div>
</template>

<script setup>
	import { ref, computed, inject } from 'vue'
	import { useMyResourceStore } from '@/store/myResource'

	const props = defineProps({
		// 文件列表
		fileList: {
			required: true,
			type: Array
		}
	})

	const emit = defineEmits(['getTableDataByType'])

	const myResourceStore = useMyResourceStore()

	const reverse = ref(true)
	const selectedFile = ref({})

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

	// 按年-月-日分组排序
	const imageTimelineData = computed(() => {
		let res = []
		// 去重，获取返回的所有日期年-月-日
		let uploadTimeSet = new Set(props.fileList.map((item) => item.uploadTime.split(' ')[0]))
		let uploadDate = [...uploadTimeSet]
		uploadDate.sort((a, b) => {
			const dateA = new Date(a)
			const dateB = new Date(b)
			return dateB - dateA
		})
		// 分组
		uploadDate.forEach((element) => {
			res.push({
				uploadDate: element,
				imageList: props.fileList.filter((item) => item.uploadTime.split(' ')[0] === element) // 过滤
			})
		})
		return res
	})

	const gridSize = computed(() => myResourceStore.gridSize)
	const screenWidth = computed(() => myResourceStore.screenWidth)
	const isBatchOperation = computed(() => myResourceStore.isBatchOperation)

	/**
	 * 文件鼠标右键事件
	 * @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() // 刷新存储容量
						}
					})
			}
		}
	}
</script>

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

	.image-timeline-wrapper {
		margin-top: 20px;
		height: calc(100vh - 215px);
		overflow-y: auto;
		.setScrollbar(6px, transparent, #C0C4CC); // 假设 setScrollbar 混合宏已转换为 less

		.image-timeline-list {
			margin-top: 10px;

			.image-timeline-item {
				.image-list {
					display: flex;
					flex-wrap: wrap;
					list-style: none;

					.image-item {
						margin: 0 16px 16px 0;
						padding: 8px;
						text-align: center;
						cursor: pointer;

						&:hover {
							background: @tabBackColor;

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

						.image-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;
							}
						}
					}
				}
			}
		}
	}
</style>