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>

components/admin/DataTable.vue

@@ -0,0 +1,298 @@
+<template>
+  <div class="data-table-wrapper">
+    <!-- 工具栏 -->
+    <div class="toolbar">
+      <div class="toolbar-left">
+        <span class="total-info">共 <strong>{{ total }}</strong> 条</span>
+        <slot name="filter" />
+      </div>
+      <div class="toolbar-right">
+        <div class="search-box" v-if="searchable">
+          <input
+            v-model="searchInput"
+            type="text"
+            :placeholder="searchPlaceholder || '搜索...'"
+            @keyup.enter="handleSearch"
+          />
+          <button class="search-btn" @click="handleSearch">搜索</button>
+          <button v-if="searchInput" class="clear-btn" @click="searchInput=''; handleSearch()">清除</button>
+        </div>
+        <slot name="actions" />
+      </div>
+    </div>
+
+    <!-- 表格 -->
+    <div class="table-container">
+      <table>
+        <thead>
+          <tr>
+            <slot name="header" />
+          </tr>
+        </thead>
+        <tbody>
+          <slot name="body" />
+          <tr v-if="!loading && total === 0">
+            <td :colspan="colCount" class="empty-cell">暂无数据</td>
+          </tr>
+        </tbody>
+      </table>
+      <div v-if="loading" class="table-loading">加载中...</div>
+    </div>
+
+    <!-- 分页 -->
+    <div class="pagination" v-if="totalPages > 1">
+      <button class="page-btn" :disabled="page <= 1" @click="changePage(page - 1)">上一页</button>
+      <template v-for="p in visiblePages" :key="p">
+        <span v-if="p === '...'" class="page-dots">...</span>
+        <button v-else class="page-btn" :class="{ active: p === page }" @click="changePage(p)">{{ p }}</button>
+      </template>
+      <button class="page-btn" :disabled="page >= totalPages" @click="changePage(page + 1)">下一页</button>
+      <span class="page-info">{{ page }} / {{ totalPages }} 页</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  total: { type: Number, default: 0 },
+  page: { type: Number, default: 1 },
+  totalPages: { type: Number, default: 1 },
+  loading: { type: Boolean, default: false },
+  searchable: { type: Boolean, default: true },
+  searchPlaceholder: { type: String, default: '' },
+  colCount: { type: Number, default: 6 },
+})
+
+const emit = defineEmits(['search', 'page-change'])
+
+const searchInput = ref('')
+
+function handleSearch() {
+  emit('search', searchInput.value)
+}
+
+function changePage(p) {
+  if (p < 1 || p > props.totalPages) return
+  emit('page-change', p)
+}
+
+const visiblePages = computed(() => {
+  const pages = []
+  const total = props.totalPages
+  const current = props.page
+
+  if (total <= 7) {
+    for (let i = 1; i <= total; i++) pages.push(i)
+  } else {
+    pages.push(1)
+    if (current > 3) pages.push('...')
+    const start = Math.max(2, current - 1)
+    const end = Math.min(total - 1, current + 1)
+    for (let i = start; i <= end; i++) pages.push(i)
+    if (current < total - 2) pages.push('...')
+    pages.push(total)
+  }
+  return pages
+})
+</script>
+
+<style scoped>
+.data-table-wrapper {
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
+  overflow: hidden;
+}
+
+/* 工具栏 */
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 20px;
+  border-bottom: 1px solid #f0f0f0;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.toolbar-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.total-info {
+  font-size: 13px;
+  color: #888;
+}
+
+.total-info strong {
+  color: #333;
+}
+
+.search-box {
+  display: flex;
+  gap: 4px;
+}
+
+.search-box input {
+  padding: 5px 10px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  font-size: 13px;
+  width: 180px;
+  outline: none;
+}
+
+.search-box input:focus {
+  border-color: #3a7d44;
+}
+
+.search-btn {
+  padding: 5px 12px;
+  background: #3a7d44;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.search-btn:hover {
+  background: #2d6235;
+}
+
+.clear-btn {
+  padding: 5px 8px;
+  background: none;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+  color: #999;
+}
+
+/* 表格容器 */
+.table-container {
+  overflow-x: auto;
+  position: relative;
+  max-height: calc(100vh - 280px);
+  overflow-y: auto;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  min-width: 600px;
+}
+
+:deep(thead) {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+:deep(thead tr) {
+  background: #fafafa;
+}
+
+:deep(th) {
+  padding: 10px 14px;
+  text-align: left;
+  font-size: 12px;
+  font-weight: 600;
+  color: #666;
+  border-bottom: 1px solid #e8e8e8;
+  white-space: nowrap;
+  background: #fafafa;
+}
+
+:deep(td) {
+  padding: 10px 14px;
+  font-size: 13px;
+  color: #333;
+  border-bottom: 1px solid #f5f5f5;
+  vertical-align: middle;
+}
+
+:deep(tr:hover td) {
+  background: #fafbfc;
+}
+
+:deep(td strong) {
+  color: #1a1a2e;
+}
+
+.empty-cell {
+  text-align: center;
+  color: #ccc;
+  padding: 40px 14px !important;
+  font-size: 14px;
+}
+
+.table-loading {
+  position: absolute;
+  inset: 0;
+  background: rgba(255,255,255,0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #888;
+  font-size: 14px;
+}
+
+/* 分页 */
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 14px 20px;
+  border-top: 1px solid #f0f0f0;
+}
+
+.page-btn {
+  padding: 5px 10px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  background: #fff;
+  font-size: 13px;
+  cursor: pointer;
+  color: #333;
+  min-width: 32px;
+  text-align: center;
+}
+
+.page-btn:hover:not(:disabled):not(.active) {
+  border-color: #3a7d44;
+  color: #3a7d44;
+}
+
+.page-btn.active {
+  background: #3a7d44;
+  color: #fff;
+  border-color: #3a7d44;
+}
+
+.page-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.page-dots {
+  padding: 0 4px;
+  color: #ccc;
+}
+
+.page-info {
+  margin-left: 12px;
+  font-size: 12px;
+  color: #aaa;
+}
+</style>

components/admin/ImageUpload.vue

@@ -0,0 +1,225 @@
+<template>
+  <div class="image-upload">
+    <div class="upload-preview" v-if="modelValue">
+      <img :src="modelValue" alt="预览" @error="imgError = true" />
+      <div class="preview-actions">
+        <button type="button" class="btn-icon" @click="$emit('update:modelValue', '')" title="移除">&#10005;</button>
+      </div>
+    </div>
+
+    <div
+      v-else
+      class="upload-area"
+      :class="{ dragging }"
+      @click="triggerUpload"
+      @dragover.prevent="dragging = true"
+      @dragleave="dragging = false"
+      @drop.prevent="handleDrop"
+    >
+      <div v-if="uploading" class="upload-loading">上传中...</div>
+      <div v-else class="upload-placeholder">
+        <span class="upload-icon">+</span>
+        <span>点击或拖拽上传图片</span>
+        <span class="upload-hint">JPG / PNG / WebP，最大 10MB</span>
+      </div>
+    </div>
+
+    <input
+      ref="fileInput"
+      type="file"
+      accept="image/*"
+      style="display: none"
+      @change="handleFileChange"
+    />
+
+    <p v-if="uploadError" class="upload-error">{{ uploadError }}</p>
+
+    <!-- 或者直接填写路径 -->
+    <div class="upload-manual">
+      <input
+        :value="modelValue"
+        @input="$emit('update:modelValue', $event.target.value)"
+        type="text"
+        :placeholder="placeholder || '图片URL，可手动输入或上传'"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  modelValue: { type: String, default: '' },
+  placeholder: { type: String, default: '' },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const { adminFetch } = useAdmin()
+const fileInput = ref(null)
+const uploading = ref(false)
+const uploadError = ref('')
+const dragging = ref(false)
+const imgError = ref(false)
+
+function triggerUpload() {
+  fileInput.value?.click()
+}
+
+async function handleFileChange(e) {
+  const file = e.target.files?.[0]
+  if (file) await uploadFile(file)
+  e.target.value = ''
+}
+
+function handleDrop(e) {
+  dragging.value = false
+  const file = e.dataTransfer?.files?.[0]
+  if (file) uploadFile(file)
+}
+
+async function uploadFile(file) {
+  if (file.size > 10 * 1024 * 1024) {
+    uploadError.value = '文件过大，最大 10MB'
+    return
+  }
+
+  uploading.value = true
+  uploadError.value = ''
+
+  try {
+    const formData = new FormData()
+    formData.append('file', file)
+
+    const token = useState('admin_token')
+    const result = await $fetch('/api/admin/upload', {
+      method: 'POST',
+      body: formData,
+      headers: { Authorization: `Bearer ${token.value}` },
+    })
+
+    if (result.files?.length) {
+      emit('update:modelValue', result.files[0].url)
+      imgError.value = false
+    }
+  } catch (e) {
+    uploadError.value = e.data?.message || '上传失败'
+  } finally {
+    uploading.value = false
+  }
+}
+</script>
+
+<style scoped>
+.image-upload {
+  margin-bottom: 4px;
+}
+
+.upload-preview {
+  position: relative;
+  width: 200px;
+  height: 140px;
+  border-radius: 6px;
+  overflow: hidden;
+  border: 1px solid #eee;
+  margin-bottom: 8px;
+}
+
+.upload-preview img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.preview-actions {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+}
+
+.btn-icon {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: none;
+  background: rgba(0,0,0,0.5);
+  color: #fff;
+  font-size: 12px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.btn-icon:hover {
+  background: rgba(231,76,60,0.9);
+}
+
+.upload-area {
+  width: 200px;
+  height: 140px;
+  border: 2px dashed #d9d9d9;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s;
+  margin-bottom: 8px;
+}
+
+.upload-area:hover,
+.upload-area.dragging {
+  border-color: #3a7d44;
+  background: #f8fdf9;
+}
+
+.upload-placeholder {
+  text-align: center;
+  color: #999;
+}
+
+.upload-icon {
+  display: block;
+  font-size: 28px;
+  color: #ccc;
+  margin-bottom: 4px;
+}
+
+.upload-placeholder span {
+  display: block;
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.upload-hint {
+  color: #bbb;
+  font-size: 11px !important;
+}
+
+.upload-loading {
+  color: #3a7d44;
+  font-size: 13px;
+}
+
+.upload-manual input {
+  width: 100%;
+  max-width: 400px;
+  padding: 6px 10px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  font-size: 12px;
+  color: #666;
+  box-sizing: border-box;
+}
+
+.upload-manual input:focus {
+  border-color: #3a7d44;
+  outline: none;
+}
+
+.upload-error {
+  color: #e74c3c;
+  font-size: 12px;
+  margin: 4px 0 0;
+}
+</style>

components/admin/SeasonProduct.vue

@@ -0,0 +1,110 @@
+<template>
+  <div>
+    <div v-if="!loaded" class="loading-card">加载中...</div>
+    <template v-else>
+      <!-- 基本信息 -->
+      <div class="card">
+        <div class="card-header" @click="open.base=!open.base"><h2>基本信息</h2><i class="arrow" :class="{open:open.base}">&#9656;</i></div>
+        <div v-show="open.base" class="card-body grid-2">
+          <div class="field"><label>品牌</label><input v-model="data.brand" /></div>
+          <div class="field"><label>版本</label><input v-model="data.version" /></div>
+          <div class="field"><label>季节</label><input v-model="data.season" /></div>
+          <div class="field"><label>风格</label><input v-model="data.style" /></div>
+          <div class="field full"><label>叙事</label><textarea v-model="data.narrative" rows="3" class="w-full"></textarea></div>
+        </div>
+      </div>
+
+      <!-- 亮点 -->
+      <div class="card">
+        <div class="card-header" @click="open.hl=!open.hl"><h2>产品亮点 ({{ data.highlights?.length || 0 }})</h2><i class="arrow" :class="{open:open.hl}">&#9656;</i></div>
+        <div v-show="open.hl" class="card-body">
+          <div v-for="(h, i) in data.highlights" :key="i" class="inline-row">
+            <input v-model="h.title" placeholder="标题" style="width:150px" />
+            <input v-model="h.description" placeholder="描述" style="flex:1" />
+            <button class="btn btn-xs btn-danger" @click="data.highlights.splice(i,1)">删</button>
+          </div>
+          <button class="btn btn-xs btn-primary" @click="data.highlights.push({title:'',description:''})">+ 添加亮点</button>
+        </div>
+      </div>
+
+      <!-- 产品版本 -->
+      <div v-for="(v, vi) in data.versions" :key="vi" class="card">
+        <div class="card-header" @click="open['v'+vi]=!open['v'+vi]">
+          <h2>{{ v.name || '版本 '+(vi+1) }}</h2>
+          <div class="card-meta">
+            <span class="tag">{{ v.days }}天{{ v.nights }}晚</span>
+            <span class="tag">{{ v.line || v.route || '' }}</span>
+            <i class="arrow" :class="{open:open['v'+vi]}">&#9656;</i>
+          </div>
+        </div>
+        <div v-show="open['v'+vi]" class="card-body">
+          <div class="grid-2">
+            <div class="field"><label>ID</label><input v-model="v.id" /></div>
+            <div class="field"><label>名称</label><input v-model="v.name" /></div>
+            <div class="field"><label>线路</label><input v-model="v.line" /></div>
+            <div class="field"><label>路线</label><input v-model="v.route" /></div>
+            <div class="field"><label>天数</label><input v-model.number="v.days" type="number" /></div>
+            <div class="field"><label>晚数</label><input v-model.number="v.nights" type="number" /></div>
+            <div class="field"><label>受众</label><input v-model="v.audience" /></div>
+            <div class="field"><label>标签</label><input v-model="v.tag" /></div>
+          </div>
+          <div class="field"><label>描述</label><textarea v-model="v.description" rows="3" class="w-full"></textarea></div>
+          <div class="field"><label>亮点（每行一个）</label>
+            <textarea :value="(v.highlights||[]).join('\n')" @input="v.highlights=$event.target.value.split('\n').filter(Boolean)" rows="3" class="w-full"></textarea>
+          </div>
+          <div class="sub-section"><h3>每日行程</h3>
+            <div v-for="(day, di) in (v.itinerary||[])" :key="di" class="day-card">
+              <div class="day-num">D{{ day.day || di+1 }}</div>
+              <div class="day-fields">
+                <input v-model="day.title" placeholder="当日标题" />
+                <textarea v-model="day.summary" rows="2" placeholder="行程概要"></textarea>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({ data: Object, loaded: Boolean })
+const open = reactive({ base: false })
+</script>
+
+<style scoped>
+.loading-card { background: #fff; border-radius: 8px; padding: 60px; text-align: center; color: #999; }
+.card { background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); margin-bottom: 12px; overflow: hidden; }
+.card-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; cursor: pointer; user-select: none; background: #fafafa; border-bottom: 1px solid #f0f0f0; }
+.card-header:hover { background: #f5f5f5; }
+.card-header h2 { margin: 0; font-size: 15px; color: #333; }
+.card-meta { display: flex; align-items: center; gap: 8px; }
+.card-body { padding: 16px 20px; }
+.arrow { font-style: normal; font-size: 12px; transition: transform 0.2s; color: #999; }
+.arrow.open { transform: rotate(90deg); }
+.tag { font-size: 11px; background: #e6f7e9; color: #3a7d44; padding: 2px 8px; border-radius: 4px; }
+.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
+.full { grid-column: span 2; }
+.field { margin-bottom: 10px; }
+.field label { display: block; font-size: 12px; color: #888; margin-bottom: 3px; }
+.field input, .field textarea { width: 100%; padding: 6px 8px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 13px; box-sizing: border-box; }
+.field input:focus, .field textarea:focus { border-color: #3a7d44; outline: none; }
+.field textarea { resize: vertical; }
+.w-full { width: 100%; box-sizing: border-box; }
+.inline-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
+.inline-row input { padding: 6px 8px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 13px; }
+.inline-row input:focus { border-color: #3a7d44; outline: none; }
+.sub-section { margin-top: 14px; border-top: 1px solid #f0f0f0; padding-top: 10px; }
+.sub-section h3 { margin: 0 0 10px; font-size: 14px; color: #555; }
+.day-card { display: flex; gap: 12px; margin-bottom: 8px; padding: 10px; background: #fafbfc; border-radius: 6px; }
+.day-num { width: 36px; height: 36px; background: #3a7d44; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; }
+.day-fields { flex: 1; display: flex; flex-direction: column; gap: 6px; }
+.day-fields input, .day-fields textarea { padding: 6px 8px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 13px; width: 100%; box-sizing: border-box; }
+.day-fields input:focus, .day-fields textarea:focus { border-color: #3a7d44; outline: none; }
+.day-fields textarea { resize: vertical; }
+.btn { padding: 6px 14px; border: 1px solid #d9d9d9; border-radius: 4px; cursor: pointer; font-size: 13px; background: #fff; }
+.btn-primary { background: #3a7d44; color: #fff; border-color: #3a7d44; }
+.btn-xs { padding: 3px 8px; font-size: 11px; }
+.btn-danger { color: #e74c3c; border-color: #e74c3c; }
+.btn-danger:hover { background: #e74c3c; color: #fff; }
+</style>