MVP: 按 07 风格重写前端 + Go 后端落地（长文/短文、编辑器、后台管理）

2026-09-20 20:56:03 +08:00
parent edee708802
commit 4d8f2de3a4
96 changed files with 6005 additions and 2602 deletions
@@ -0,0 +1,196 @@
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import LeftNav from '../components/LeftNav.vue'
+import RightRail from '../components/RightRail.vue'
+import { publicApi } from '../api'
+import { site, applyDocTitle } from '../site'
+import { formatDate, minutesLabel } from '../utils'
+
+const route = useRoute()
+const post = ref(null)
+const loading = ref(true)
+const error = ref('')
+
+async function load() {
+  loading.value = true
+  error.value = ''
+  post.value = null
+  try {
+    post.value = await publicApi.post(route.params.slug)
+    applyDocTitle(post.value.kind === 'short' ? '短文' : post.value.title)
+  } catch (e) {
+    error.value = e.message || '加载失败'
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(load)
+watch(() => route.params.slug, load)
+
+const isShort = computed(() => post.value && post.value.kind === 'short')
+const initial = computed(() => (site.author_name || 'O').trim().slice(0, 1).toUpperCase())
+</script>
+
+<template>
+  <div class="shell">
+    <div class="layout">
+      <LeftNav />
+
+      <main class="main">
+        <div v-if="loading" class="loading">载入中…</div>
+
+        <div v-else-if="error" class="empty">
+          {{ error }}
+          <p><RouterLink to="/">← 回到时间线</RouterLink></p>
+        </div>
+
+        <article v-else class="wrap" :class="{ short: isShort }">
+          <header class="head">
+            <div class="byline">
+              <div class="avatar">{{ initial }}</div>
+              <div class="who">
+                <span class="author">{{ site.author_name || 'ONE' }}</span>
+                <span class="sub">
+                  <time :datetime="post.published_at">{{ formatDate(post.published_at) }}</time>
+                  <span class="dot">·</span>
+                  <span>{{ minutesLabel(post) }}</span>
+                </span>
+              </div>
+            </div>
+
+            <!-- 短文不渲染大标题 -->
+            <h1 v-if="!isShort" class="title">{{ post.title }}</h1>
+            <p v-if="!isShort && post.summary" class="lede">{{ post.summary }}</p>
+          </header>
+
+          <div class="prose" :class="{ 'prose-short': isShort }" v-html="post.content_html"></div>
+
+          <footer class="foot">
+            <div v-if="post.tags && post.tags.length" class="tags">
+              <RouterLink
+                v-for="t in post.tags"
+                :key="t"
+                :to="`/tag/${encodeURIComponent(t)}`"
+                class="tag-chip"
+              >
+                {{ t }}
+              </RouterLink>
+            </div>
+            <RouterLink to="/" class="back">← 回到时间线</RouterLink>
+          </footer>
+        </article>
+      </main>
+
+      <RightRail />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.main {
+  min-width: 0;
+  border-left: 1px solid var(--line);
+  border-right: 1px solid var(--line);
+  padding-bottom: 60px;
+}
+
+.wrap {
+  padding: 26px 26px 40px;
+}
+
+.head {
+  padding-bottom: 18px;
+  border-bottom: 1px solid var(--line);
+}
+
+.byline {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.avatar {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: var(--accent-soft);
+  color: var(--accent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--serif);
+  font-size: 18px;
+}
+
+.who {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.5;
+}
+
+.author {
+  font-weight: 600;
+}
+
+.sub {
+  font-size: 13px;
+  color: var(--muted);
+}
+
+.dot {
+  margin: 0 5px;
+  color: var(--faint);
+}
+
+.title {
+  margin: 20px 0 0;
+  font-size: 32px;
+  line-height: 1.35;
+}
+
+.lede {
+  margin: 10px 0 0;
+  font-family: var(--serif);
+  font-size: 16.5px;
+  color: var(--ink-soft);
+  font-style: italic;
+}
+
+.foot {
+  margin-top: 32px;
+  padding-top: 18px;
+  border-top: 1px solid var(--line);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.back {
+  font-size: 13px;
+  color: var(--accent);
+}
+
+@media (max-width: 780px) {
+  .main {
+    border: 0;
+  }
+
+  .wrap {
+    padding: 18px 4px 40px;
+  }
+
+  .title {
+    font-size: 27px;
+  }
+}
+</style>