init

src/views/PostDetail.vue

@@ -0,0 +1,240 @@
+<script setup>
+import { computed } from 'vue'
+import { useRoute, useRouter, RouterLink } from 'vue-router'
+import { usePostsStore } from '@/stores/posts'
+import { marked } from 'marked'
+
+const route = useRoute()
+const router = useRouter()
+const postsStore = usePostsStore()
+
+const post = computed(() => postsStore.getPostById(route.params.id))
+const renderedContent = computed(() => post.value ? marked(post.value.content || '') : '')
+
+function goToEdit() {
+  router.push(`/post/edit/${route.params.id}`)
+}
+
+async function deletePost() {
+  if (confirm('确定要删除这篇文章吗？')) {
+    await postsStore.deletePost(route.params.id)
+    router.push('/')
+  }
+}
+</script>
+
+<template>
+  <div class="post-detail" v-if="post">
+    <div class="nav-buttons">
+      <RouterLink to="/" class="back-link">← 返回列表</RouterLink>
+      <div class="action-buttons">
+        <button class="btn-edit" @click="goToEdit" :style="{ display: 'none' }">编辑</button>
+        <button class="btn-delete" @click="deletePost" :style="{ display: 'none' }">删除</button>
+      </div>
+    </div>
+    <article class="post">
+      <header class="post-header">
+        <h1 class="post-title">{{ post.title }}</h1>
+        <p class="post-date">{{ post.date }}</p>
+      </header>
+      <div class="post-content markdown-body" v-html="renderedContent"></div>
+    </article>
+  </div>
+  <div v-else class="not-found">
+    <h2>文章未找到</h2>
+    <RouterLink to="/">返回首页</RouterLink>
+  </div>
+</template>
+
+<style scoped>
+.post-detail {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.nav-buttons {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+}
+
+.back-link {
+  color: var(--color-primary);
+  text-decoration: none;
+}
+
+.back-link:hover {
+  text-decoration: underline;
+}
+
+.action-buttons {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.btn-edit, .btn-delete {
+  padding: 0.4rem 0.8rem;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.85rem;
+}
+
+.btn-edit {
+  background: var(--color-primary);
+  color: white;
+}
+
+.btn-delete {
+  background: #fee2e2;
+  color: #dc2626;
+}
+
+.btn-edit:hover {
+  opacity: 0.9;
+}
+
+.btn-delete:hover {
+  background: #fecaca;
+}
+
+.post {
+  background: var(--color-background);
+  padding: 2rem;
+  border-radius: 8px;
+}
+
+.post-header {
+  margin-bottom: 2rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.post-title {
+  margin: 0 0 0.5rem;
+}
+
+.post-date {
+  margin: 0;
+  color: #666;
+  font-size: 0.875rem;
+}
+
+.post-content {
+  color: var(--color-text);
+}
+
+.not-found {
+  text-align: center;
+  padding: 4rem 2rem;
+}
+
+.not-found h2 {
+  margin-bottom: 1rem;
+}
+</style>
+
+<style>
+.markdown-body {
+  line-height: 1.8;
+}
+
+.markdown-body h1 {
+  font-size: 1.8rem;
+  margin: 1.5rem 0 1rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.markdown-body h2 {
+  font-size: 1.5rem;
+  margin: 1.5rem 0 1rem;
+}
+
+.markdown-body h3 {
+  font-size: 1.25rem;
+  margin: 1.25rem 0 0.75rem;
+}
+
+.markdown-body p {
+  margin: 0 0 1rem;
+}
+
+.markdown-body code {
+  background: var(--color-border);
+  padding: 0.15rem 0.4rem;
+  border-radius: 3px;
+  font-size: 0.9em;
+}
+
+.markdown-body pre {
+  background: #1e1e1e;
+  color: #d4d4d4;
+  padding: 1rem;
+  border-radius: 6px;
+  overflow-x: auto;
+  margin: 1rem 0;
+}
+
+.markdown-body pre code {
+  background: none;
+  padding: 0;
+  font-size: 0.9rem;
+  color: inherit;
+}
+
+.markdown-body ul, .markdown-body ol {
+  margin: 0 0 1rem;
+  padding-left: 2rem;
+}
+
+.markdown-body li {
+  margin: 0.25rem 0;
+}
+
+.markdown-body table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 1rem 0;
+}
+
+.markdown-body table th,
+.markdown-body table td {
+  border: 1px solid var(--color-border);
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+}
+
+.markdown-body table th {
+  background: var(--color-surface);
+  font-weight: 600;
+}
+
+.markdown-body blockquote {
+  margin: 1rem 0;
+  padding: 0.5rem 1rem;
+  border-left: 4px solid var(--color-primary);
+  background: var(--color-surface);
+  color: var(--color-text-secondary);
+}
+
+.markdown-body hr {
+  border: none;
+  border-top: 1px solid var(--color-border);
+  margin: 1.5rem 0;
+}
+
+.markdown-body a {
+  color: var(--color-primary);
+}
+
+.markdown-body a:hover {
+  text-decoration: underline;
+}
+
+.markdown-body img {
+  max-width: 100%;
+  border-radius: 4px;
+}
+</style>