chore: 初始化项目仓库
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,111 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
post: any
|
||||
matchedLines?: string[]
|
||||
highlight?: (text: string) => string
|
||||
}>()
|
||||
|
||||
const expanded = ref(false)
|
||||
|
||||
function formatDate(date: string) {
|
||||
return new Date(date).toLocaleDateString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
})
|
||||
}
|
||||
|
||||
function getWordCount(post: any): number {
|
||||
const text = JSON.stringify(post.body || '').replace(/<[^>]*>/g, '')
|
||||
const chinese = text.match(/[一-龥]/g) || []
|
||||
const english = text.match(/[a-zA-Z]+/g) || []
|
||||
return chinese.length + english.length
|
||||
}
|
||||
|
||||
function getReadTime(count: number): number {
|
||||
return Math.max(1, Math.ceil(count / 300))
|
||||
}
|
||||
|
||||
const wordCount = computed(() => getWordCount(props.post))
|
||||
const readTime = computed(() => getReadTime(wordCount.value))
|
||||
|
||||
function renderTitle(): string {
|
||||
const text = props.post.title || '无标题'
|
||||
return props.highlight ? props.highlight(text) : text
|
||||
}
|
||||
|
||||
function renderDesc(): string {
|
||||
if (!props.post.description) return ''
|
||||
return props.highlight ? props.highlight(props.post.description) : props.post.description
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLink :to="post.path" class="block">
|
||||
<div class="group transition-all hover:shadow-lg rounded-2xl py-6 overflow-hidden" style="border: 1px solid var(--color-border);">
|
||||
<div class="px-6">
|
||||
<div class="flex flex-col gap-4 md:flex-row">
|
||||
<div v-if="post.image" class="md:w-48 md:flex-shrink-0">
|
||||
<img
|
||||
:src="post.image"
|
||||
:alt="post.title"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
class="h-48 w-full rounded-md object-cover md:h-32"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex-1">
|
||||
<div class="mb-2 flex flex-wrap items-center gap-x-2 gap-y-0">
|
||||
<span
|
||||
v-if="post.pinned"
|
||||
class="shrink-0 inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium"
|
||||
style="background: var(--color-text); color: var(--color-bg);"
|
||||
>
|
||||
置顶
|
||||
</span>
|
||||
<time v-if="post.published" class="shrink-0 text-sm text-muted-foreground whitespace-nowrap">
|
||||
{{ formatDate(post.published) }}
|
||||
</time>
|
||||
<span class="shrink-0 text-sm text-muted-foreground whitespace-nowrap">
|
||||
· {{ wordCount }} 字
|
||||
</span>
|
||||
<span class="shrink-0 text-sm text-muted-foreground whitespace-nowrap">
|
||||
· 约 {{ readTime }} 分钟
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h2
|
||||
class="mb-2 text-2xl font-semibold group-hover:opacity-70 transition-opacity"
|
||||
v-html="renderTitle()"
|
||||
/>
|
||||
|
||||
<p
|
||||
v-if="post.description"
|
||||
class="text-muted-foreground"
|
||||
v-html="renderDesc()"
|
||||
/>
|
||||
|
||||
<div v-if="matchedLines && matchedLines.length > 0" class="mt-3 space-y-1.5">
|
||||
<div
|
||||
v-for="(line, idx) in (expanded ? matchedLines : matchedLines.slice(0, 3))"
|
||||
:key="idx"
|
||||
class="text-sm text-muted-foreground border-l-2 pl-3"
|
||||
style="border-color: var(--color-border);"
|
||||
v-html="highlight ? highlight(line) : line"
|
||||
/>
|
||||
<button
|
||||
v-if="matchedLines.length > 3"
|
||||
type="button"
|
||||
class="text-xs text-muted-foreground hover:opacity-70 transition-opacity mt-1"
|
||||
@click.prevent.stop="expanded = !expanded"
|
||||
>
|
||||
{{ expanded ? '收起' : `展开 (还有 ${matchedLines.length - 3} 条)` }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
Reference in New Issue
Block a user