hulai-website/pages/admin/stories/[id].vue

<template>
  <div style="max-width: 1100px">
    <!-- 面包屑 -->
    <n-breadcrumb style="margin-bottom: 16px">
      <n-breadcrumb-item>
        <NuxtLink to="/admin/stories">客户故事</NuxtLink>
      </n-breadcrumb-item>
      <n-breadcrumb-item>{{ isNew ? '新增' : '编辑' }}</n-breadcrumb-item>
    </n-breadcrumb>

    <!-- 页头 -->
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px">
      <h1 style="margin: 0; font-size: 20px; font-weight: 600; color: #111827">
        {{ isNew ? '新增故事' : '编辑故事' }}
      </h1>
      <n-space>
        <NuxtLink to="/admin/stories">
          <n-button>取消</n-button>
        </NuxtLink>
        <n-button type="primary" :loading="saving" @click="handleSave">保存</n-button>
      </n-space>
    </div>

    <!-- 加载/错误状态 -->
    <n-card v-if="loadError" style="text-align: center; color: #ef4444; padding: 40px">
      {{ loadError }}
    </n-card>
    <n-card v-else-if="pageLoading" style="text-align: center; padding: 60px; color: #9ca3af">
      加载中...
    </n-card>

    <template v-else>
      <!-- 双栏布局 -->
      <n-grid :cols="4" :x-gap="20" :y-gap="0" style="align-items: start">
        <!-- 主内容区（占 3 列） -->
        <n-gi :span="3">
          <!-- 基本信息 -->
          <n-card title="基本信息">
            <n-form label-placement="top" :show-feedback="false">
              <n-form-item label="标题" required>
                <n-input v-model:value="form.title" placeholder="输入故事标题" />
              </n-form-item>
              <n-form-item label="Slug" required>
                <n-input v-model:value="form.slug" placeholder="URL 标识，如 wang-family-trip" />
              </n-form-item>
              <n-form-item label="副标题">
                <n-input v-model:value="form.subtitle" placeholder="输入副标题（可选）" />
              </n-form-item>
              <n-form-item label="卡片摘要">
                <n-input
                  v-model:value="form.summary"
                  type="textarea"
                  :rows="2"
                  placeholder="在客户故事墙卡片上展示的 1-2 句话（代替副标题）"
                />
              </n-form-item>
              <n-grid :cols="2" :x-gap="16">
                <n-gi>
                  <n-form-item label="作者 / 客户昵称">
                    <n-input v-model:value="form.author" placeholder="如：张女士" />
                  </n-form-item>
                </n-gi>
                <n-gi>
                  <n-form-item label="外部来源 URL">
                    <n-input v-model:value="form.sourceUrl" placeholder="如小红书链接，有则卡片外跳" />
                  </n-form-item>
                </n-gi>
              </n-grid>
              <n-form-item label="标签">
                <n-dynamic-tags v-model:value="form.tags" />
              </n-form-item>
            </n-form>
          </n-card>

          <!-- 家庭信息 -->
          <n-card title="家庭信息" style="margin-top: 16px">
            <n-form label-placement="top" :show-feedback="false">
              <n-grid :cols="2" :x-gap="16">
                <n-gi>
                  <n-form-item label="家庭类型">
                    <n-input v-model:value="form.familyType" placeholder="如：三口之家" />
                  </n-form-item>
                </n-gi>
                <n-gi>
                  <n-form-item label="孩子年龄">
                    <n-input v-model:value="form.childrenAge" placeholder="如：5岁" />
                  </n-form-item>
                </n-gi>
                <n-gi>
                  <n-form-item label="出发地">
                    <n-input v-model:value="form.fromCity" placeholder="如：上海" />
                  </n-form-item>
                </n-gi>
                <n-gi>
                  <n-form-item label="出行日期">
                    <n-input v-model:value="form.travelDate" placeholder="如：2026年3月" />
                  </n-form-item>
                </n-gi>
              </n-grid>
              <n-form-item label="产品">
                <n-input v-model:value="form.tripProduct" placeholder="如：呼伦贝尔亲子6日游" />
              </n-form-item>
            </n-form>
          </n-card>

          <!-- 故事章节 -->
          <n-card title="故事章节" style="margin-top: 16px">
            <div
              v-for="(sec, i) in form.sections"
              :key="i"
              style="margin-bottom: 16px; padding: 12px; border: 1px solid #e5e7eb; border-radius: 6px"
            >
              <n-space justify="space-between" align="center" style="margin-bottom: 8px">
                <span style="font-weight: 500">章节 {{ i + 1 }}</span>
                <n-button size="tiny" type="error" quaternary @click="form.sections.splice(i, 1)">
                  删除
                </n-button>
              </n-space>
              <n-form label-placement="top" :show-feedback="false">
                <n-form-item label="标题">
                  <n-input v-model:value="sec.heading" placeholder="章节标题" />
                </n-form-item>
                <n-form-item label="内容">
                  <n-input
                    v-model:value="sec.content"
                    type="textarea"
                    :rows="4"
                    placeholder="章节内容"
                  />
                </n-form-item>
              </n-form>
            </div>
            <n-button dashed block @click="form.sections.push({ heading: '', content: '' })">
              添加章节
            </n-button>
          </n-card>

          <!-- 精彩瞬间 -->
          <n-card title="精彩瞬间" style="margin-top: 16px">
            <n-dynamic-input
              v-model:value="form.keyMoments"
              placeholder="输入一个精彩瞬间描述"
              :min="0"
              show-sort-button
            />
          </n-card>
        </n-gi>

        <!-- 侧栏（占 1 列） -->
        <n-gi :span="1">
          <n-card title="发布设置">
            <n-form label-placement="top" :show-feedback="false">
              <n-form-item label="状态">
                <n-select
                  v-model:value="form.published"
                  :options="[
                    { label: '已发布', value: true },
                    { label: '草稿', value: false },
                  ]"
                />
              </n-form-item>
            </n-form>
          </n-card>

          <n-card title="封面图" style="margin-top: 16px">
            <AdminImageUpload v-model="form.coverImage" />
          </n-card>
        </n-gi>
      </n-grid>

      <!-- 底部 sticky 保存栏 -->
      <div
        style="
          position: sticky;
          bottom: 0;
          display: flex;
          justify-content: flex-end;
          gap: 8px;
          padding: 16px 0;
          margin-top: 24px;
          background: #f0f2f5;
          border-top: 1px solid #e5e7eb;
        "
      >
        <NuxtLink to="/admin/stories">
          <n-button>取消</n-button>
        </NuxtLink>
        <n-button type="primary" :loading="saving" @click="handleSave">保存</n-button>
      </div>
    </template>
  </div>
</template>

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

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

const route = useRoute()
const { adminFetch } = useAdmin()
const message = useMessage()

const isNew = computed(() => route.params.id === 'new')
const pageLoading = ref(!isNew.value)
const loadError = ref('')
const saving = ref(false)

const form = ref({
  title: '',
  slug: '',
  subtitle: '',
  summary: '',
  author: '',
  sourceUrl: '',
  tags: [],
  familyType: '',
  childrenAge: '',
  fromCity: '',
  travelDate: '',
  tripProduct: '',
  published: true,
  coverImage: '',
  sections: [],
  keyMoments: [],
})

// 加载数据（编辑模式）
async function loadItem() {
  if (isNew.value) return
  pageLoading.value = true
  try {
    const data = await adminFetch(`/api/admin/stories/${route.params.id}`)
    form.value = {
      ...data,
      published: !!data.published,
      coverImage: data.coverImage || '',
      summary: data.summary || '',
      author: data.author || '',
      sourceUrl: data.sourceUrl || '',
      tags: Array.isArray(data.tags)
        ? data.tags
        : (typeof data.tags === 'string' ? (() => { try { return JSON.parse(data.tags || '[]') } catch { return [] } })() : []),
      sections:
        typeof data.sections === 'string'
          ? JSON.parse(data.sections || '[]')
          : data.sections || [],
      keyMoments:
        typeof data.keyMoments === 'string'
          ? JSON.parse(data.keyMoments || '[]')
          : data.keyMoments || [],
    }
  } catch (e) {
    loadError.value = e.data?.message || '加载失败'
  } finally {
    pageLoading.value = false
  }
}

async function handleSave() {
  if (!form.value.title?.trim()) {
    message.error('标题不能为空')
    return
  }
  if (!form.value.slug?.trim()) {
    message.error('Slug 不能为空')
    return
  }

  saving.value = true

  // 直接传数组，由服务端统一 stringify，避免双重编码
  const payload = { ...form.value }

  try {
    if (isNew.value) {
      await adminFetch('/api/admin/stories', { method: 'POST', body: payload })
      message.success('创建成功')
      setTimeout(() => navigateTo('/admin/stories'), 800)
    } else {
      await adminFetch(`/api/admin/stories/${route.params.id}`, { method: 'PUT', body: payload })
      message.success('保存成功')
    }
  } catch (e) {
    message.error(e.data?.message || '保存失败')
  } finally {
    saving.value = false
  }
}

onMounted(loadItem)
</script>