重构首页

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/DiaryList.vue
+++ b/src/views/home/components/DiaryList.vue
@@ -0,0 +1,171 @@
+<template>
+	<div class="diary-list">
+		<div v-for="diary in diaryList" :key="diary.id" class="diary-card" @click="handleDiaryClick(diary)">
+			<div class="diary-header">
+				<div class="diary-date">
+					<el-icon><Calendar /></el-icon>
+					{{ diary.date }}
+				</div>
+				<el-tag :type="diary.mood === 'happy' ? 'success' : diary.mood === 'sad' ? 'danger' : 'warning'" size="small">
+					{{ getMoodText(diary.mood) }}
+				</el-tag>
+			</div>
+			<h3 class="diary-title">{{ diary.title }}</h3>
+			<p class="diary-content">{{ diary.content }}</p>
+			<div class="diary-footer">
+				<div class="diary-tags">
+					<el-tag v-for="tag in diary.tags" :key="tag" size="small" effect="plain">{{ tag }}</el-tag>
+				</div>
+				<div class="diary-actions">
+					<el-button text size="small" @click.stop="handleEdit(diary)">
+						<el-icon><Edit /></el-icon>
+					</el-button>
+					<el-button text size="small" type="danger" @click.stop="handleDelete(diary)">
+						<el-icon><Delete /></el-icon>
+					</el-button>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Calendar, Edit, Delete } from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
+
+interface Diary {
+	id: number;
+	title: string;
+	content: string;
+	date: string;
+	mood: 'happy' | 'sad' | 'normal';
+	tags: string[];
+}
+
+const diaryList = ref<Diary[]>([
+	{
+		id: 1,
+		title: '今天学习了 Vue 3 新特性',
+		content: '今天深入学习了 Vue 3 的 Composition API，感觉比 Options API 更加灵活和强大。特别是 setup 函数和响应式系统的改进，让代码组织更加清晰...',
+		date: '2026-05-26',
+		mood: 'happy',
+		tags: ['学习', 'Vue3', '前端'],
+	},
+	{
+		id: 2,
+		title: '项目进度顺利',
+		content: '今天完成了首页重构的基础布局，整体效果不错。明天继续完善功能模块和样式细节...',
+		date: '2026-05-25',
+		mood: 'happy',
+		tags: ['工作', '项目'],
+	},
+	{
+		id: 3,
+		title: '遇到了一些技术难题',
+		content: '在处理复杂组件通信时遇到了一些问题，花了不少时间调试。最后通过重新设计数据流解决了...',
+		date: '2026-05-24',
+		mood: 'normal',
+		tags: ['技术', '调试'],
+	},
+]);
+
+const getMoodText = (mood: string) => {
+	const moodMap: Record<string, string> = {
+		happy: '😊 开心',
+		sad: '😢 难过',
+		normal: '😐 平静',
+	};
+	return moodMap[mood] || '平静';
+};
+
+const handleDiaryClick = (diary: Diary) => {
+	ElMessage.info(`查看日记: ${diary.title}`);
+};
+
+const handleEdit = (diary: Diary) => {
+	ElMessage.info(`编辑日记: ${diary.title}`);
+};
+
+const handleDelete = (diary: Diary) => {
+	ElMessage.warning(`删除日记: ${diary.title}`);
+};
+</script>
+
+<style scoped lang="scss">
+.diary-list {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+	gap: 16px;
+}
+
+.diary-card {
+	background: #ffffff;
+	border-radius: 12px;
+	padding: 20px;
+	border: 1px solid #e5e7eb;
+	cursor: pointer;
+	transition: all 0.3s ease;
+
+	&:hover {
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+		transform: translateY(-2px);
+		border-color: #3b82f6;
+	}
+}
+
+.diary-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 12px;
+}
+
+.diary-date {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	font-size: 13px;
+	color: #6b7280;
+}
+
+.diary-title {
+	font-size: 16px;
+	font-weight: 600;
+	color: #1f2937;
+	margin: 0 0 12px 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.diary-content {
+	font-size: 14px;
+	color: #6b7280;
+	line-height: 1.6;
+	margin: 0 0 16px 0;
+	display: -webkit-box;
+	-webkit-line-clamp: 3;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+}
+
+.diary-footer {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding-top: 12px;
+	border-top: 1px solid #f3f4f6;
+}
+
+.diary-tags {
+	display: flex;
+	gap: 6px;
+	flex-wrap: wrap;
+}
+
+.diary-actions {
+	display: flex;
+	gap: 4px;
+}
+</style>