hulai-website/pages/admin/content/youji.vue

<template>
  <div>
    <n-space justify="space-between" align="center" style="margin-bottom: 20px;">
      <div>
        <h1 style="margin: 0 0 4px; font-size: 22px; color: #1a1a2e;">客户游记</h1>
        <p style="margin: 0; font-size: 13px; color: #888;">管理客户在各平台发布的游记，对应官网「客户游记」页面</p>
      </div>
      <n-space>
        <n-button tag="a" href="/youji" target="_blank">查看前台 ↗</n-button>
        <n-button type="primary" :loading="saving" @click="save">保存</n-button>
      </n-space>
    </n-space>

    <n-spin :show="!loaded">
      <template v-if="loaded">
        <!-- 页面信息 -->
        <n-card title="页面信息" style="margin-bottom: 16px;">
          <n-grid :cols="2" :x-gap="12" :y-gap="12">
            <n-gi>
              <n-form-item label="标题">
                <n-input v-model:value="data.title" />
              </n-form-item>
            </n-gi>
            <n-gi>
              <n-form-item label="副标题">
                <n-input v-model:value="data.subtitle" />
              </n-form-item>
            </n-gi>
          </n-grid>
        </n-card>

        <!-- 游记列表 -->
        <n-card style="margin-bottom: 16px;">
          <template #header>
            <n-space justify="space-between" align="center">
              <span>游记列表 ({{ data.notes?.length || 0 }})</span>
              <n-button size="small" type="primary" @click="addNote">添加游记</n-button>
            </n-space>
          </template>
          <n-grid :cols="3" :x-gap="14" :y-gap="14" responsive="screen" cols="1 m:2 l:3">
            <n-gi v-for="(n, i) in data.notes" :key="i">
              <div style="border: 1px solid #e5e7eb; border-radius: 6px; padding: 12px;">
                <div style="margin-bottom: 8px;">
                  <AdminImageUpload v-model="n.cover" />
                </div>
                <n-form-item label="标题" :show-feedback="false" style="margin-bottom: 6px;">
                  <n-input v-model:value="n.title" placeholder="标题" size="small" />
                </n-form-item>
                <n-form-item label="作者" :show-feedback="false" style="margin-bottom: 6px;">
                  <n-input v-model:value="n.author" placeholder="作者" size="small" />
                </n-form-item>
                <n-form-item label="平台" :show-feedback="false" style="margin-bottom: 6px;">
                  <n-select
                    v-model:value="n.platform"
                    size="small"
                    :options="[
                      { label: '美篇', value: '美篇' },
                      { label: '微信公众号', value: '微信公众号' },
                      { label: '抖音', value: '抖音' },
                      { label: '微博', value: '微博' },
                      { label: '小红书', value: '小红书' },
                    ]"
                  />
                </n-form-item>
                <n-form-item label="原文链接" :show-feedback="false" style="margin-bottom: 6px;">
                  <n-input v-model:value="n.url" placeholder="原文链接" size="small" />
                </n-form-item>
                <n-form-item label="摘要" :show-feedback="false" style="margin-bottom: 6px;">
                  <n-input v-model:value="n.summary" placeholder="摘要" size="small" />
                </n-form-item>
                <n-form-item label="标签（逗号分隔）" :show-feedback="false" style="margin-bottom: 6px;">
                  <n-input :value="(n.tags||[]).join(', ')" @update:value="v => n.tags = v.split(',').map(s=>s.trim()).filter(Boolean)" placeholder="呼伦贝尔, 亲子游, 草原" size="small" />
                </n-form-item>
                <n-form-item label="版式" :show-feedback="false" style="margin-bottom: 6px;">
                  <n-select
                    v-model:value="n.ratio"
                    size="small"
                    :options="[{ label: '竖版', value: 'vertical' }, { label: '横版', value: 'horizontal' }]"
                  />
                </n-form-item>
                <n-button size="small" type="error" @click="data.notes.splice(i, 1)">删除</n-button>
              </div>
            </n-gi>
          </n-grid>
          <n-button dashed block style="margin-top: 14px;" @click="addNote">+ 添加游记</n-button>
        </n-card>
      </template>
    </n-spin>
  </div>
</template>

<script setup>
import { NButton, NCard, NSpace, NInput, NForm, NFormItem, NSpin, NGrid, NGi, NSelect } from 'naive-ui'
import { useMessage } from 'naive-ui'

definePageMeta({ layout: 'admin', middleware: 'admin' })
const { adminFetch } = useAdmin()
const message = useMessage()
const data = ref({ title: '', subtitle: '', notes: [] })
const loaded = ref(false)
const saving = ref(false)

async function load() {
  const res = await adminFetch('/api/admin/site-content?key=youji')
  data.value = res.data
  loaded.value = true
}

function addNote() {
  data.value.notes.push({ id: `yj-${Date.now()}`, title: '', cover: '', author: '', platform: '美篇', url: '', tags: [], ratio: 'horizontal', summary: '' })
}

async function save() {
  saving.value = true
  try {
    // 自动下载外部封面图到本地
    for (const note of data.value.notes) {
      if (note.cover && note.cover.startsWith('http')) {
        try {
          const res = await adminFetch('/api/admin/download-image', { method: 'POST', body: { url: note.cover } })
          note.cover = res.localUrl
        } catch {
          // 下载失败保留原 URL，不阻断保存
        }
      }
    }
    await adminFetch('/api/admin/site-content', { method: 'PUT', body: { key: 'youji', data: data.value } })
    message.success('已保存')
  } catch {
    message.error('保存失败')
  } finally {
    saving.value = false
  }
}

onMounted(load)
</script>