hulai-website/pages/admin/gallery/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="/gallery" target="_blank" secondary>查看前台</n-button>
        <n-button type="primary" @click="navigateTo('/admin/gallery/new')">新增照片</n-button>
      </n-space>
    </n-space>

    <!-- 页面配置 -->
    <n-card title="页面配置" style="margin-bottom: 20px">
      <template #header-extra>
        <n-button type="primary" size="small" :loading="configSaving" @click="saveConfig">保存配置</n-button>
      </template>
      <n-spin :show="!configLoaded">
        <template v-if="configLoaded">
          <!-- 介绍描述 -->
          <n-form-item label="旅拍简介" style="margin-bottom: 12px">
            <n-input v-model:value="config.intro.description" type="textarea" :rows="3" placeholder="旅拍服务简介文字" />
          </n-form-item>

          <!-- 数据亮点 -->
          <div style="font-weight: 500; margin-bottom: 8px; color: #374151">数据亮点（stats）</div>
          <div v-for="(s, i) in config.intro.stats" :key="i" style="display: flex; gap: 8px; align-items: center; margin-bottom: 8px;">
            <n-input v-model:value="s.value" placeholder="数值，如 200+" style="width: 100px" size="small" />
            <n-input v-model:value="s.label" placeholder="标签，如 件蒙古服饰" style="width: 130px" size="small" />
            <n-input v-model:value="s.note" placeholder="说明文字" style="flex: 1" size="small" />
            <n-button size="tiny" type="error" quaternary @click="config.intro.stats.splice(i, 1)">删</n-button>
          </div>
          <n-button dashed size="small" style="margin-bottom: 16px" @click="config.intro.stats.push({ value: '', label: '', note: '' })">+ 添加数据项</n-button>

          <!-- 分类 -->
          <div style="font-weight: 500; margin-bottom: 8px; color: #374151">分类筛选（categories）</div>
          <div v-for="(cat, i) in config.categories" :key="i" style="display: flex; gap: 8px; align-items: center; margin-bottom: 8px;">
            <n-input v-model:value="cat.key" placeholder="key，如 family" style="width: 120px" size="small" />
            <n-input v-model:value="cat.label" placeholder="显示名称，如 亲子家庭" style="width: 130px" size="small" />
            <n-button size="tiny" type="error" quaternary :disabled="cat.key === 'all'" @click="config.categories.splice(i, 1)">删</n-button>
          </div>
          <n-button dashed size="small" @click="config.categories.push({ key: '', label: '' })">+ 添加分类</n-button>
        </template>
      </n-spin>
    </n-card>

    <!-- 照片列表 -->
    <n-card>
      <n-space style="margin-bottom: 16px">
        <n-input v-model:value="search" placeholder="搜索标题、分类..." clearable style="width: 260px" @keyup.enter="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, NImage, NPopconfirm, NSpin, NFormItem } from 'naive-ui'
import { useMessage } from 'naive-ui'

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

const { adminFetch } = useAdmin()
const { moveUp, moveDown } = useAdminSort('/api/admin/gallery')
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('')

// 页面配置（site_content gallery key）
const config = ref({ intro: { description: '', stats: [] }, categories: [] })
const configLoaded = ref(false)
const configSaving = ref(false)

async function loadConfig() {
  try {
    const res = await adminFetch('/api/admin/site-content?key=gallery')
    const d = res.data || {}
    config.value = {
      intro: {
        description: d.intro?.description || '',
        stats: d.intro?.stats || [],
      },
      categories: d.categories || [],
    }
  } catch {
    message.error('页面配置加载失败')
  } finally {
    configLoaded.value = true
  }
}

async function saveConfig() {
  configSaving.value = true
  try {
    // 先获取完整数据再合并，避免覆盖 works 等其他字段
    const res = await adminFetch('/api/admin/site-content?key=gallery')
    const full = res.data || {}
    full.intro = { ...(full.intro || {}), description: config.value.intro.description, stats: config.value.intro.stats }
    full.categories = config.value.categories
    await adminFetch('/api/admin/site-content', { method: 'PUT', body: { key: 'gallery', data: full } })
    message.success('页面配置已保存')
  } catch {
    message.error('保存失败')
  } finally {
    configSaving.value = false
  }
}

const columns = [
  { title: 'ID', key: 'id', width: 50, render: (row) => h('span', { style: 'color: #9ca3af; font-size: 12px' }, row.id) },
  {
    title: '排序', key: 'sortOrder', width: 110,
    render: (row, idx) => h(NSpace, { size: 4, align: 'center' }, () => [
      h('span', { style: 'color: #9ca3af; font-size: 12px; min-width: 20px' }, row.sortOrder),
      h(NButton, { size: 'tiny', disabled: idx === 0, onClick: async () => { await moveUp(list.value, idx); message.success('已上移') } }, () => '↑'),
      h(NButton, { size: 'tiny', disabled: idx === list.value.length - 1, onClick: async () => { await moveDown(list.value, idx); message.success('已下移') } }, () => '↓'),
    ]),
  },
  {
    title: '缩略',
    key: 'image',
    width: 60,
    render: (row) => row.image
      ? h(NImage, { src: row.image, width: 48, height: 36, objectFit: 'cover', style: 'border-radius: 4px', lazy: true })
      : h('div', { style: 'width:48px;height:36px;border-radius:4px;background:#f3f4f6' }),
  },
  {
    title: '标题',
    key: 'title',
    render: (row) => h('a', {
      style: 'color: #111827; text-decoration: none; font-weight: 500; cursor: pointer',
      onClick: () => navigateTo(`/admin/gallery/${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: 'location', width: 100, render: (row) => h('span', { style: 'color: #9ca3af; font-size: 12px' }, row.location || '-') },
  {
    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: 'actions',
    width: 120,
    render: (row) => h(NSpace, { size: 'small' }, () => [
      h(NButton, { size: 'tiny', text: true, type: 'primary', onClick: () => navigateTo(`/admin/gallery/${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/gallery?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/gallery/${item.id}`, { method: 'PUT', body: { published: !item.published } })
    item.published = !item.published
    message.success(item.published ? '已发布' : '已下架')
  } catch { message.error('操作失败') }
}

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

onMounted(() => { loadData(); loadConfig() })
</script>