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,144 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+import { publicApi } from '../api'
+import { site } from '../site'
+import { relativeDate } from '../utils'
+
+const latest = ref([])
+const tags = ref([])
+
+onMounted(async () => {
+  try {
+    const [posts, tagData] = await Promise.all([
+      publicApi.posts({ size: 5 }),
+      publicApi.tags()
+    ])
+    latest.value = posts.items || []
+    tags.value = (tagData.tags || []).slice(0, 12)
+  } catch (e) {
+    latest.value = []
+    tags.value = []
+  }
+})
+</script>
+
+<template>
+  <aside class="rail-right">
+    <section class="card">
+      <p class="eyebrow">关于这里</p>
+      <p class="bio">{{ site.author_bio || site.site_desc }}</p>
+      <RouterLink to="/about" class="more">了解更多 →</RouterLink>
+    </section>
+
+    <section v-if="latest.length" class="card">
+      <p class="eyebrow">最近更新</p>
+      <ul class="list">
+        <li v-for="p in latest" :key="p.id">
+          <RouterLink :to="`/post/${p.slug}`" class="row">
+            <span class="title">
+              {{ p.kind === 'short' ? '短文' : p.title || '无题' }}
+              <span v-if="p.kind === 'short'" class="badge">短</span>
+            </span>
+            <span class="date">{{ relativeDate(p.published_at) }}</span>
+          </RouterLink>
+        </li>
+      </ul>
+    </section>
+
+    <section v-if="tags.length" class="card">
+      <p class="eyebrow">标签</p>
+      <div class="tags">
+        <RouterLink v-for="t in tags" :key="t.id" :to="`/tag/${t.slug}`" class="tag-chip">
+          {{ t.name }}<span class="count"> {{ t.count }}</span>
+        </RouterLink>
+      </div>
+    </section>
+
+    <section class="card">
+      <p class="eyebrow">订阅</p>
+      <p class="bio">用 RSS 阅读器跟进更新。</p>
+      <a class="pill pill-ghost" href="/rss.xml">RSS / feed.xml</a>
+    </section>
+  </aside>
+</template>
+
+<style scoped>
+.rail-right {
+  position: sticky;
+  top: 0;
+  align-self: start;
+  padding: 28px 0 40px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.card {
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  background: var(--card);
+  padding: 16px 18px;
+}
+
+.bio {
+  margin: 8px 0 10px;
+  font-size: 13.5px;
+  line-height: 1.85;
+  color: var(--ink-soft);
+}
+
+.more {
+  font-size: 13px;
+  color: var(--accent);
+}
+
+.list {
+  list-style: none;
+  margin: 8px 0 0;
+  padding: 0;
+}
+
+.row {
+  display: block;
+  padding: 7px 0;
+  border-bottom: 1px dashed var(--line-soft);
+}
+
+.list li:last-child .row {
+  border-bottom: 0;
+}
+
+.title {
+  display: block;
+  font-size: 14px;
+  line-height: 1.7;
+}
+
+.badge {
+  display: inline-block;
+  margin-left: 5px;
+  padding: 0 5px;
+  border: 1px solid var(--line);
+  border-radius: 2px;
+  font-size: 11px;
+  color: var(--muted);
+  vertical-align: 1px;
+}
+
+.date {
+  font-size: 12px;
+  color: var(--faint);
+}
+
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 10px;
+}
+
+.count {
+  color: var(--faint);
+  font-size: 11px;
+}
+</style>