ONE/frontend/src/components/RightRail.vue

<script setup>
import { computed, onMounted, ref } from 'vue'
import { publicApi } from '../api'
import { site } from '../site'
import { socialIcon } from '../socialIcons'
import { relativeDate } from '../utils'

// vivid 是单栏布局，右栏整体不渲染（省掉 latest/tags 两次请求）。
const isVivid = computed(() => site.ui_id === 'vivid')

// 项目源码仓库是固定入口（本站 git remote），不来自后台配置 —— 和版权一样
// 固定渲染在自己的那排；后台填的社交账号单独一排，URL 撞车的去重。
const PROJECT_REPO = 'https://git.gopher.ink/mirrors2/ONE'

// 社交 / 源码链接（后台「高级 → 社交链接」填写）；url 必填，空的丢弃。
// 有图标的（按域名推导）渲染成单色图标，认不出的显示名称文字。
const social = computed(() => (site.social_links || []).filter((s) => s && s.url && s.url !== PROJECT_REPO))

const links = [
  { to: '/', label: '首页' },
  { to: '/archive', label: '归档' },
  { to: '/tags', label: '标签' },
  { to: '/projects', label: '作品' },
  { to: '/about', label: '关于' }
]

const latest = ref([])
const tags = ref([])

onMounted(async () => {
  if (isVivid.value) return
  try {
    const [posts, tagData] = await Promise.all([publicApi.latest(), publicApi.tags()])
    latest.value = posts.items || []
    tags.value = (tagData.tags || []).slice(0, 12)
  } catch (e) {
    latest.value = []
    tags.value = []
  }
})
</script>

<template>
  <aside v-if="!isVivid" 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>

    <!-- 订阅卡删掉了：RSS 入口在下方页脚小字里，一张卡片只为一个链接不值得 -->

    <!-- 页脚信息（Twitter 式：右栏卡片下方的小字区）。通栏 ClassicFoot
         已删：右栏在窄屏会堆到信息流下方，卡片之后正好接页脚小字，
         所有宽度都不缺位。 -->
    <footer class="rail-foot">
      <nav class="foot-links" aria-label="页脚导航">
        <template v-for="(l, i) in links" :key="l.to">
          <span v-if="i" class="dot">·</span>
          <RouterLink :to="l.to">{{ l.label }}</RouterLink>
        </template>
        <span class="dot">·</span>
        <a href="/rss.xml">RSS</a>
      </nav>
      <!-- 后台填的社交账号：单独一排 -->
      <div v-if="social.length" class="social-row">
        <a
          v-for="s in social"
          :key="s.label + s.url"
          class="social-icon"
          :href="s.url"
          :title="s.label"
          :aria-label="s.label"
          :target="s.url.startsWith('http') ? '_blank' : undefined"
          :rel="s.url.startsWith('http') ? 'noopener' : undefined"
        >
          <svg v-if="socialIcon(s.url)" viewBox="0 0 24 24" aria-hidden="true"><path :d="socialIcon(s.url)" /></svg>
          <span v-else>{{ s.label }}</span>
        </a>
      </div>
      <!-- 项目信息：固定的源码图标 + 版权，永远在 -->
      <div class="foot-meta">
        <a class="social-icon" :href="PROJECT_REPO" title="项目源码" aria-label="项目源码" target="_blank" rel="noopener">
          <svg viewBox="0 0 24 24" aria-hidden="true"><path :d="socialIcon(PROJECT_REPO)" /></svg>
        </a>
        <span class="copyright">
          {{ site.footer_note }}<template v-if="site.icp"> · {{ site.icp }}</template>
        </span>
      </div>
    </footer>
  </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;
}

/* 页脚小字区：无卡片边框，Twitter 式侧栏页脚。classic 的页脚信息只在这里
   出现（通栏 ClassicFoot 已删）：右栏在窄屏会堆到信息流下方，卡片之后
   正好接页脚小字，所有宽度都不缺位。 */
.rail-foot {
  padding: 4px 6px 0;
  font-size: 12px;
  line-height: 1.9;
  color: var(--faint);
}

.foot-links a {
  color: var(--faint);
  transition: color 0.15s;
}

.foot-links a:hover {
  color: var(--accent);
}

.dot {
  margin: 0 4px;
  opacity: 0.6;
}

/* 图标 + 版权同排：源码等入口是单色小图标，hover 才亮成强调色 */
.social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.foot-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  /* 项目信息行和上面的社交账号排拉开一截：它们是两类信息 */
  margin-top: 16px;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 3px;
  border-radius: 6px;
  color: var(--faint);
  font-size: 12px;
  transition: color 0.15s;
}

.social-icon:hover {
  color: var(--accent);
}

.social-icon svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.copyright {
  color: var(--faint);
}

/* 窄屏：底部留白加高，右下角浮动主题钮压不到页脚小字 */
@media (max-width: 780px) {
  .rail-right {
    padding-bottom: 96px;
  }
}
</style>