145 lines
2.9 KiB
Vue
145 lines
2.9 KiB
Vue
<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>
|