feat: 后台管理系统完整重构 + 前后台数据联通

- 后台全面引入 Naive UI 组件库，统一 UI 规范
- 前台 usePublicApi 切换到 API 调用（GET /api/content/[key]）
- 前后台数据源统一（site_content 表）
- 产品线统一管理（tour/camp/course 三套编辑器）
- 产品数据归一化（itinerary/faq/pricing 格式统一）
- 表单提交 API 改写入 submissions 表
- 新增 submissions 标记已读 API
- site-content PUT 支持 upsert
- 修复前台 bug（stories 路由冲突、占位符警告、selector breadcrumb）
- 消除 PageHero 类型警告（useSEO reactive 修复）
- 25 个前台页面全部 HTTP 200，展示效果不变

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

pages/admin/stories/[id].vue

@@ -0,0 +1,259 @@
+<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>
+          </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>
+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: '',
+  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 || '',
+      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
+
+  const payload = {
+    ...form.value,
+    sections: JSON.stringify(form.value.sections),
+    keyMoments: JSON.stringify(form.value.keyMoments),
+  }
+
+  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>

pages/admin/stories/index.vue

@@ -0,0 +1,84 @@
+<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="/stories" target="_blank" secondary>查看前台</n-button>
+        <n-button type="primary" @click="navigateTo('/admin/stories/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/stories/${row.id}`) }, row.title),
+  },
+  { title: '家庭类型', key: 'familyType', width: 90, render: (row) => h('span', { style: 'color: #9ca3af; font-size: 12px' }, row.familyType || '-') },
+  { title: '出发地', key: 'fromCity', width: 80, render: (row) => h('span', { style: 'color: #9ca3af; font-size: 12px' }, row.fromCity || '-') },
+  { title: '产品', key: 'tripProduct', width: 100, render: (row) => h('span', { style: 'color: #9ca3af; font-size: 12px' }, row.tripProduct || '-') },
+  {
+    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/stories/${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/stories?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/stories/${item.id}`, { method: 'PUT', body: { published: !item.published } }); item.published = !item.published }
+  catch { message.error('操作失败') }
+}
+
+async function handleDelete(item) {
+  try { await adminFetch(`/api/admin/stories/${item.id}`, { method: 'DELETE' }); message.success('已删除'); loadData() }
+  catch { message.error('删除失败') }
+}
+
+onMounted(loadData)
+</script>