You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
100 lines
2.1 KiB
100 lines
2.1 KiB
<script setup lang="ts">
|
|
import type { ArticleListItem } from '@/generated/api'
|
|
|
|
const props = defineProps<{
|
|
article: ArticleListItem
|
|
}>()
|
|
|
|
function formatDate(iso: string): string {
|
|
const d = new Date(iso)
|
|
if (isNaN(d.getTime())) return iso
|
|
return d.toLocaleString('zh-CN', { hour12: false })
|
|
}
|
|
|
|
function coverSrc(): string | undefined {
|
|
const url = props.article.coverImage
|
|
if (!url) return undefined
|
|
if (url.startsWith('http://') || url.startsWith('https://')) return url
|
|
return url.startsWith('/') ? url : `/${url}`
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<router-link class="article-card" :to="`/post/${article.slug}`">
|
|
<img v-if="coverSrc()" :src="coverSrc()" class="article-cover" alt="" loading="lazy" />
|
|
<div class="article-body">
|
|
<h3 class="article-title">{{ article.title }}</h3>
|
|
<p v-if="article.summary" class="article-summary">{{ article.summary }}</p>
|
|
<div class="article-meta">
|
|
<span class="meta-author">{{ article.authorName }}</span>
|
|
<span class="meta-date">{{ formatDate(article.publishedAt || article.createdAt) }}</span>
|
|
</div>
|
|
<div class="article-tags">
|
|
<span v-for="tag in article.tagNames" :key="tag" class="tag">{{ tag }}</span>
|
|
</div>
|
|
</div>
|
|
</router-link>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.article-card {
|
|
display: block;
|
|
background: #fff;
|
|
border: 1px solid #e5e5ea;
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
margin-bottom: 16px;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
transition: box-shadow 0.2s ease;
|
|
}
|
|
|
|
.article-card:hover {
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.article-cover {
|
|
width: 100%;
|
|
max-height: 220px;
|
|
object-fit: cover;
|
|
border-radius: 6px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.article-title {
|
|
margin: 0 0 8px;
|
|
font-size: 18px;
|
|
color: #1f2430;
|
|
}
|
|
|
|
.article-summary {
|
|
margin: 0 0 12px;
|
|
color: #5c6470;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.article-meta {
|
|
display: flex;
|
|
gap: 16px;
|
|
font-size: 13px;
|
|
color: #8a93a3;
|
|
}
|
|
|
|
.meta-author {
|
|
color: #3b82f6;
|
|
}
|
|
|
|
.article-tags {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.tag {
|
|
display: inline-block;
|
|
margin-right: 8px;
|
|
padding: 2px 10px;
|
|
background: #eef3ff;
|
|
color: #3b5bdb;
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
}
|
|
</style>
|