重构首页

2026-05-26 16:01:13 +08:00
parent ded04de609
commit f0e36381d3
9 changed files with 1718 additions and 637 deletions
--- a/src/views/home/components/FileList.vue
+++ b/src/views/home/components/FileList.vue
@@ -0,0 +1,199 @@
+<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>