ONE/frontend/src/views/PostView.vue

<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, sanitizeHtml } 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="sanitizeHtml(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>