baseline: 保留 07 风格重写前的 Vue 前端原件

frontend/src/views/PostDetail.vue

@@ -0,0 +1,46 @@
+<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>