admin-ui/src/views/home/components/FileList.vue

<template>
	<div class="file-list">
		<div v-for="file in fileList" :key="file.id" class="file-card" @click="handleFileClick(file)">
			<div class="file-icon">
				<el-icon :size="40" :color="getFileColor(file.type)">
					<component :is="getFileIcon(file.type)" />
				</el-icon>
			</div>
			<div class="file-info">
				<h3 class="file-name">{{ file.name }}</h3>
				<div class="file-meta">
					<span class="file-size">{{ file.size }}</span>
					<span class="file-date">{{ file.date }}</span>
				</div>
				<div class="file-tags">
					<el-tag v-for="tag in file.tags" :key="tag" size="small" effect="plain">{{ tag }}</el-tag>
				</div>
			</div>
			<div class="file-actions">
				<el-button text size="small" @click.stop="handleDownload(file)">
					<el-icon><Download /></el-icon>
				</el-button>
				<el-button text size="small" type="danger" @click.stop="handleDelete(file)">
					<el-icon><Delete /></el-icon>
				</el-button>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Document, Picture, VideoPlay, Folder, Download, Delete } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

interface FileItem {
	id: number;
	name: string;
	type: 'document' | 'image' | 'video' | 'folder';
	size: string;
	date: string;
	tags: string[];
}

const fileList = ref<FileItem[]>([
	{
		id: 1,
		name: 'Vue3 学习笔记.pdf',
		type: 'document',
		size: '2.5 MB',
		date: '2026-05-26',
		tags: ['学习', '文档'],
	},
	{
		id: 2,
		name: '项目截图.png',
		type: 'image',
		size: '856 KB',
		date: '2026-05-25',
		tags: ['截图', '项目'],
	},
	{
		id: 3,
		name: '演示视频.mp4',
		type: 'video',
		size: '15.3 MB',
		date: '2026-05-24',
		tags: ['视频', '演示'],
	},
	{
		id: 4,
		name: '项目文档',
		type: 'folder',
		size: '12 个文件',
		date: '2026-05-23',
		tags: ['文件夹'],
	},
	{
		id: 5,
		name: 'API 接口文档.docx',
		type: 'document',
		size: '1.2 MB',
		date: '2026-05-22',
		tags: ['文档', 'API'],
	},
	{
		id: 6,
		name: 'UI 设计稿.sketch',
		type: 'image',
		size: '4.8 MB',
		date: '2026-05-21',
		tags: ['设计', 'UI'],
	},
]);

const getFileIcon = (type: string) => {
	const iconMap: Record<string, any> = {
		document: Document,
		image: Picture,
		video: VideoPlay,
		folder: Folder,
	};
	return iconMap[type] || Document;
};

const getFileColor = (type: string) => {
	const colorMap: Record<string, string> = {
		document: '#3b82f6',
		image: '#10b981',
		video: '#f59e0b',
		folder: '#8b5cf6',
	};
	return colorMap[type] || '#6b7280';
};

const handleFileClick = (file: FileItem) => {
	ElMessage.info(`打开文件: ${file.name}`);
};

const handleDownload = (file: FileItem) => {
	ElMessage.success(`下载文件: ${file.name}`);
};

const handleDelete = (file: FileItem) => {
	ElMessage.warning(`删除文件: ${file.name}`);
};
</script>

<style scoped lang="scss">
.file-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 16px;
}

.file-card {
	background: #ffffff;
	border-radius: 12px;
	padding: 20px;
	border: 1px solid #e5e7eb;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	gap: 16px;
	align-items: flex-start;

	&:hover {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
		transform: translateY(-2px);
		border-color: #3b82f6;
	}
}

.file-icon {
	flex-shrink: 0;
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f3f4f6;
	border-radius: 8px;
}

.file-info {
	flex: 1;
	min-width: 0;
}

.file-name {
	font-size: 15px;
	font-weight: 600;
	color: #1f2937;
	margin: 0 0 8px 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.file-meta {
	display: flex;
	gap: 12px;
	font-size: 13px;
	color: #6b7280;
	margin-bottom: 8px;
}

.file-tags {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.file-actions {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
</style>