hulai-website/pages/admin/content/xiaohongshu-wall.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="/xiaohongshu" 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-gi>
              <n-form-item label="账号名称">
                <n-input v-model:value="data.account.name" />
              </n-form-item>
            </n-gi>
            <n-gi>
              <n-form-item label="账号链接">
                <n-input v-model:value="data.account.url" />
              </n-form-item>
            </n-gi>
            <n-gi>
              <n-form-item label="粉丝数">
                <n-input v-model:value="data.account.followers" />
              </n-form-item>
            </n-gi>
            <n-gi>
              <n-form-item label="获赞数">
                <n-input v-model:value="data.account.likes" />
              </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-input v-model:value="n.url" placeholder="小红书链接" size="small" />
                </n-form-item>
                <n-space style="margin-bottom: 6px;">
                  <n-form-item label="点赞" :show-feedback="false">
                    <n-input-number v-model:value="n.likes" placeholder="点赞" size="small" style="width: 90px;" />
                  </n-form-item>
                  <n-form-item label="版式" :show-feedback="false">
                    <n-select v-model:value="n.ratio" size="small" style="width: 90px;" :options="[{label:'竖版',value:'vertical'},{label:'横版',value:'horizontal'}]" />
                  </n-form-item>
                </n-space>
                <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(', ')"
                    @input="n.tags = $event.split(',').map(t => t.trim()).filter(Boolean)"
                    placeholder="标签（逗号分隔）"
                    size="small"
                  />
                </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, NInputNumber, 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: '', account: {}, notes: [] })
const loaded = ref(false)
const saving = ref(false)

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

function addNote() {
  data.value.notes.push({ id: `xhs-${Date.now()}`, title: '', cover: '', author: '', likes: 0, url: '', tags: [], ratio: 'vertical', 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: 'xiaohongshu-wall', data: data.value } })
    message.success('已保存')
  } catch {
    message.error('保存失败')
  } finally {
    saving.value = false
  }
}

onMounted(load)
</script>