hulai-website/pages/admin/articles/index.vue

<template>
  <div style="max-width: 1200px">
    <n-space justify="space-between" align="center" style="margin-bottom: 20px">
      <div>
        <h1 style="margin: 0 0 4px; font-size: 20px; font-weight: 600; color: #111827">最新动态</h1>
        <p style="margin: 0; font-size: 13px; color: #9ca3af">管理官网新闻动态 · 对应官网「最新动态」页面</p>
      </div>
      <n-space>
        <n-button tag="a" href="/news" target="_blank" secondary>查看前台</n-button>
        <n-button type="primary" @click="navigateTo('/admin/articles/new')">新增动态</n-button>
      </n-space>
    </n-space>

    <n-card>
      <n-space style="margin-bottom: 16px">
        <n-input v-model:value="search" placeholder="搜索标题、分类..." clearable style="width: 260px" @keyup.enter="page = 1; loadData()">
          <template #prefix><span style="color: #9ca3af">&#128269;</span></template>
        </n-input>
        <n-button @click="page = 1; loadData()">搜索</n-button>
      </n-space>

      <n-data-table :columns="columns" :data="list" :loading="loading" :row-key="(row) => row.id" :pagination="false" size="small" striped />

      <n-space justify="end" style="margin-top: 16px" v-if="totalPages > 1">
        <n-pagination v-model:page="page" :page-count="totalPages" @update:page="loadData" />
      </n-space>
    </n-card>
  </div>
</template>

<script setup>
import { h } from 'vue'
import { NButton, NCard, NSpace, NInput, NDataTable, NTag, NPagination, NPopconfirm } from 'naive-ui'
import { useMessage } from 'naive-ui'

definePageMeta({ layout: 'admin', middleware: 'admin' })

const { adminFetch } = useAdmin()
const message = useMessage()
const list = ref([])
const total = ref(0)
const page = ref(1)
const totalPages = ref(1)
const loading = ref(false)
const search = ref('')

const columns = [
  { title: 'ID', key: 'id', width: 50, render: (row) => h('span', { style: 'color: #9ca3af; font-size: 12px' }, row.id) },
  {
    title: '标题', key: 'title',
    render: (row) => h('a', {
      style: 'color: #111827; text-decoration: none; font-weight: 500; cursor: pointer',
      onClick: () => navigateTo(`/admin/articles/${row.id}`),
    }, row.title),
  },
  {
    title: '分类', key: 'category', width: 80,
    render: (row) => row.category ? h(NTag, { size: 'small', type: 'info', bordered: false }, () => row.category) : '-',
  },
  {
    title: '状态', key: 'published', width: 70,
    render: (row) => h(NTag, {
      size: 'small', type: row.published ? 'success' : 'default', bordered: false,
      style: 'cursor: pointer',
      onClick: () => togglePublish(row),
    }, () => row.published ? '已发布' : '草稿'),
  },
  {
    title: '创建时间', key: 'createdAt', width: 100,
    render: (row) => h('span', { style: 'color: #9ca3af; font-size: 12px' }, row.createdAt?.slice(0, 10)),
  },
  {
    title: '操作', key: 'actions', width: 120,
    render: (row) => h(NSpace, { size: 'small' }, () => [
      h(NButton, { size: 'tiny', text: true, type: 'primary', onClick: () => navigateTo(`/admin/articles/${row.id}`) }, () => '编辑'),
      h(NPopconfirm, { onPositiveClick: () => handleDelete(row) }, {
        trigger: () => h(NButton, { size: 'tiny', text: true, type: 'error' }, () => '删除'),
        default: () => `确定删除「${row.title}」？`,
      }),
    ]),
  },
]

async function loadData() {
  loading.value = true
  try {
    const d = await adminFetch(`/api/admin/articles?type=news&page=${page.value}&limit=20&search=${encodeURIComponent(search.value)}`)
    list.value = d.items; total.value = d.total; totalPages.value = d.totalPages
  } catch { message.error('加载失败') } finally { loading.value = false }
}

async function togglePublish(item) {
  try {
    await adminFetch(`/api/admin/articles/${item.id}`, { method: 'PUT', body: { published: !item.published } })
    item.published = !item.published
  } catch { message.error('操作失败') }
}

async function handleDelete(item) {
  try {
    await adminFetch(`/api/admin/articles/${item.id}`, { method: 'DELETE' })
    message.success('已删除')
    loadData()
  } catch { message.error('删除失败') }
}

onMounted(loadData)
</script>