ONE/frontend/src/admin/DashboardView.vue

<script setup>
import { computed, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { adminApi } from '../api'
import { relativeDate } from '../utils'

const router = useRouter()
const loading = ref(true)
const d = ref(null)

async function load() {
  loading.value = true
  try {
    d.value = await adminApi.dashboard()
  } finally {
    loading.value = false
  }
}
onMounted(load)

function edit(id) {
  router.push('/admin/' + id)
}

const chartMax = computed(() => {
  if (!d.value || !d.value.published_by_month.length) return 1
  return Math.max(1, ...d.value.published_by_month.map((b) => b.count))
})
</script>

<template>
  <section v-if="loading" class="loading">载入中…</section>
  <section v-else-if="d">
    <div class="stat-grid">
      <div class="stat accent">
        <div class="label">总文章</div>
        <div class="value">{{ d.total_posts }}</div>
        <div class="hint">长文 {{ d.long_posts }} · 短文 {{ d.short_posts }}</div>
      </div>
      <div class="stat">
        <div class="label">已发布</div>
        <div class="value">{{ d.published_posts }}</div>
        <div class="hint">前台可见</div>
      </div>
      <div class="stat">
        <div class="label">草稿</div>
        <div class="value">{{ d.draft_posts }}</div>
        <div class="hint">还在写</div>
      </div>
      <div class="stat">
        <div class="label">标签</div>
        <div class="value">{{ d.total_tags }}</div>
        <div class="hint">已使用</div>
      </div>
      <div class="stat">
        <div class="label">总字数</div>
        <div class="value">{{ d.total_words.toLocaleString() }}</div>
        <div class="hint">Markdown 字符</div>
      </div>
    </div>

    <div class="dash-cols">
      <div class="panel">
        <div class="panel-title">
          <h2>最近 12 个月发布</h2>
          <span class="meta">每月文章数</span>
        </div>
        <div v-if="!d.published_by_month.length" class="empty" style="padding: 24px;">还没有发布数据</div>
        <div v-else class="dash-chart">
          <div
            v-for="b in d.published_by_month"
            :key="b.month"
            class="bar"
            :style="{ height: ((b.count / chartMax) * 100) + '%' }"
            :title="`${b.month} · ${b.count} 篇`"
          >
            <span v-if="b.count" class="v">{{ b.count }}</span>
          </div>
        </div>
        <div v-if="d.published_by_month.length" class="dash-chart-labels" style="display: flex; gap: 6px; margin-top: 6px;">
          <span
            v-for="b in d.published_by_month"
            :key="b.month"
            style="flex: 1; font-size: 10px; color: var(--admin-muted); text-align: center;"
          >{{ b.month.slice(5) }}</span>
        </div>
      </div>

      <div class="panel">
        <div class="panel-title">
          <h2>热门标签</h2>
          <span class="meta">按文章数</span>
        </div>
        <div v-if="!d.top_tags.length" class="empty" style="padding: 24px;">还没有标签</div>
        <div v-else class="recent-list">
          <RouterLink
            v-for="t in d.top_tags"
            :key="t.id"
            :to="`/admin/tags`"
            class="recent-item"
          >
            <span class="tag-dot" :style="{ background: t.color || 'var(--admin-accent)' }"></span>
            <span class="title">{{ t.name }}</span>
            <span class="meta">{{ t.count }} 篇</span>
          </RouterLink>
        </div>
      </div>
    </div>

    <div class="dash-cols even">
      <div class="panel">
        <div class="panel-title">
          <h2>最近发布</h2>
          <RouterLink to="/admin/posts" class="meta">查看全部 →</RouterLink>
        </div>
        <div v-if="!d.recent_posts.length" class="empty" style="padding: 24px;">还没有发布</div>
        <div v-else class="recent-list">
          <a v-for="p in d.recent_posts" :key="p.id" href="#" class="recent-item" @click.prevent="edit(p.id)">
            <span class="title">{{ p.title || '(无题)' }}</span>
            <span class="meta">{{ relativeDate(p.published_at) }}</span>
          </a>
        </div>
      </div>

      <div class="panel">
        <div class="panel-title">
          <h2>最近草稿</h2>
          <RouterLink to="/admin/new" class="meta">写新的 →</RouterLink>
        </div>
        <div v-if="!d.recent_drafts.length" class="empty" style="padding: 24px;">没有草稿</div>
        <div v-else class="recent-list">
          <a v-for="p in d.recent_drafts" :key="p.id" href="#" class="recent-item" @click.prevent="edit(p.id)">
            <span class="title">{{ p.title || '(无题草稿)' }}</span>
            <span class="meta">{{ relativeDate(p.updated_at) }}</span>
          </a>
        </div>
      </div>
    </div>
  </section>
</template>
<style scoped>
/* 两块并排面板：桌面 1.4:1 / 1:1，手机（≤720px）单列——写死在行内样式里
   会被 min-content 顶出横向滚动（量过：390 视口下 docW 418）。 */
.dash-cols {display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;}
.dash-cols.even {grid-template-columns: 1fr 1fr;
  margin-top: 16px;}
@media (max-width: 720px) {
  .dash-cols,
  .dash-cols.even {grid-template-columns: 1fr;}
}
</style>