47 lines
1.5 KiB
Vue
47 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
// 文章详情页：标题 + 元信息 + AI 摘要 + Markdown 正文 + 互动区 + 评论
|
|
import { computed } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
|
|
import EmptyState from '@/components/common/EmptyState.vue'
|
|
import MarkdownContent from '@/components/common/MarkdownContent.vue'
|
|
import PostFooter from '@/components/site/PostFooter.vue'
|
|
import PostMeta from '@/components/site/PostMeta.vue'
|
|
import PostTitle from '@/components/site/PostTitle.vue'
|
|
import { getPost } from '@/mock/data'
|
|
|
|
const route = useRoute()
|
|
|
|
const post = computed(() =>
|
|
getPost(route.params.site as string, route.params.slug as string),
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="max-w-screen-md mx-auto">
|
|
<article v-if="post">
|
|
<!-- 文章标题 -->
|
|
<PostTitle :post="post" />
|
|
|
|
<!-- 文章元信息 -->
|
|
<PostMeta :post="post" />
|
|
|
|
<!-- AI 摘要 -->
|
|
<div class="xlog-post-summary border rounded-xl mt-5 p-4 space-y-2">
|
|
<div class="font-bold text-zinc-700 flex items-center">
|
|
<i class="i-mingcute-sparkles-line mr-2 text-lg" />
|
|
AI-generated summary
|
|
</div>
|
|
<div class="text-zinc-500 leading-loose text-sm">{{ post.excerpt }}</div>
|
|
</div>
|
|
|
|
<!-- Markdown 正文 -->
|
|
<MarkdownContent :content="post.content" class="mt-10" />
|
|
|
|
<!-- 互动区 + 评论区 -->
|
|
<PostFooter :post="post" />
|
|
</article>
|
|
<EmptyState v-else icon="i-mingcute-file-line" text="Post not found" />
|
|
</div>
|
|
</template>
|