172 lines
3.9 KiB
Vue
172 lines
3.9 KiB
Vue
<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>
|