hulai-website/pages/admin/content/courses.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="/summer-camp" 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 v-if="data.philosophy" style="margin-bottom: 12px;">
          <template #header>
            <n-space justify="space-between" align="center" style="cursor: pointer;" @click="open.phil = !open.phil">
              <span>教育理念</span>
              <span style="color: #999; font-size: 12px;">{{ open.phil ? '▼' : '▶' }}</span>
            </n-space>
          </template>
          <div v-show="open.phil">
            <div v-for="(val, key) in data.philosophy" :key="key" style="margin-bottom: 10px;">
              <n-form-item :label="key">
                <n-input
                  v-if="typeof val === 'string'"
                  v-model:value="data.philosophy[key]"
                  type="textarea"
                  :rows="2"
                />
              </n-form-item>
            </div>
          </div>
        </n-card>

        <!-- 年龄分组 -->
        <n-card
          v-for="(ag, i) in (data.ageGroups || [])"
          :key="'ag' + i"
          style="margin-bottom: 12px;"
        >
          <template #header>
            <n-space justify="space-between" align="center" style="cursor: pointer;" @click="open['ag' + i] = !open['ag' + i]">
              <span>{{ ag.emoji || '' }} {{ ag.label }} — {{ ag.headline || '' }}</span>
              <span style="color: #999; font-size: 12px;">{{ open['ag' + i] ? '▼' : '▶' }}</span>
            </n-space>
          </template>
          <div v-show="open['ag' + i]">
            <n-grid :cols="2" :x-gap="10" :y-gap="10" style="margin-bottom: 12px;">
              <n-gi>
                <n-form-item label="ID">
                  <n-input v-model:value="ag.id" />
                </n-form-item>
              </n-gi>
              <n-gi>
                <n-form-item label="标签">
                  <n-input v-model:value="ag.label" />
                </n-form-item>
              </n-gi>
              <n-gi>
                <n-form-item label="标题">
                  <n-input v-model:value="ag.headline" />
                </n-form-item>
              </n-gi>
              <n-gi>
                <n-form-item label="侧重点">
                  <n-input v-model:value="ag.focus" />
                </n-form-item>
              </n-gi>
            </n-grid>
            <n-form-item label="描述">
              <n-input v-model:value="ag.description" type="textarea" :rows="2" />
            </n-form-item>
            <n-form-item label="亮点（每行一个）">
              <n-input
                :value="(ag.highlights || []).join('\n')"
                @input="ag.highlights = $event.split('\n').filter(Boolean)"
                type="textarea"
                :rows="3"
              />
            </n-form-item>
          </div>
        </n-card>

        <!-- 课程模块 -->
        <n-card
          v-for="(m, i) in (data.modules || [])"
          :key="'m' + i"
          style="margin-bottom: 12px;"
        >
          <template #header>
            <n-space justify="space-between" align="center" style="cursor: pointer;" @click="open['m' + i] = !open['m' + i]">
              <span>{{ m.icon || '' }} {{ m.name }}</span>
              <n-space>
                <n-tag size="small" type="success">{{ m.ageRange }}</n-tag>
                <n-tag size="small" type="info">{{ m.duration }}</n-tag>
                <span style="color: #999; font-size: 12px;">{{ open['m' + i] ? '▼' : '▶' }}</span>
              </n-space>
            </n-space>
          </template>
          <div v-show="open['m' + i]">
            <n-grid :cols="2" :x-gap="10" :y-gap="10" style="margin-bottom: 12px;">
              <n-gi>
                <n-form-item label="ID">
                  <n-input v-model:value="m.id" />
                </n-form-item>
              </n-gi>
              <n-gi>
                <n-form-item label="名称">
                  <n-input v-model:value="m.name" />
                </n-form-item>
              </n-gi>
              <n-gi>
                <n-form-item label="年龄段">
                  <n-input v-model:value="m.ageRange" />
                </n-form-item>
              </n-gi>
              <n-gi>
                <n-form-item label="时长">
                  <n-input v-model:value="m.duration" />
                </n-form-item>
              </n-gi>
            </n-grid>
            <n-form-item label="简介">
              <n-input v-model:value="m.shortDesc" type="textarea" :rows="2" />
            </n-form-item>
            <n-form-item label="教学目标（每行一个）">
              <n-input
                :value="(m.objectives || []).join('\n')"
                @input="m.objectives = $event.split('\n').filter(Boolean)"
                type="textarea"
                :rows="3"
              />
            </n-form-item>
            <n-form-item label="活动内容（每行一个）">
              <n-input
                :value="(m.activities || []).join('\n')"
                @input="m.activities = $event.split('\n').filter(Boolean)"
                type="textarea"
                :rows="3"
              />
            </n-form-item>
            <n-form-item label="教学理念">
              <n-input v-model:value="m.philosophy" type="textarea" :rows="2" />
            </n-form-item>
          </div>
        </n-card>

        <!-- FAQ -->
        <n-card v-if="data.faq?.length" style="margin-bottom: 12px;">
          <template #header>
            <n-space justify="space-between" align="center" style="cursor: pointer;" @click="open.faq = !open.faq">
              <span>常见问题 ({{ data.faq.length }})</span>
              <span style="color: #999; font-size: 12px;">{{ open.faq ? '▼' : '▶' }}</span>
            </n-space>
          </template>
          <div v-show="open.faq">
            <div
              v-for="(q, i) in data.faq"
              :key="i"
              style="padding: 10px; background: #fafbfc; border-radius: 6px; margin-bottom: 8px;"
            >
              <n-form-item label="Q">
                <n-input v-model:value="q.q" />
              </n-form-item>
              <n-form-item label="A">
                <n-input v-model:value="q.a" type="textarea" :rows="2" />
              </n-form-item>
            </div>
          </div>
        </n-card>
      </template>
    </n-spin>
  </div>
</template>

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

definePageMeta({ layout: 'admin', middleware: 'admin' })
const { adminFetch } = useAdmin()
const message = useMessage()
const data = ref({})
const loaded = ref(false)
const saving = ref(false)
const open = reactive({})

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

async function save() {
  saving.value = true
  try {
    await adminFetch('/api/admin/site-content', { method: 'PUT', body: { key: 'courses', data: data.value } })
    message.success('已保存')
  } catch {
    message.error('保存失败')
  } finally {
    saving.value = false
  }
}

onMounted(load)
</script>