hulai-website/pages/admin/content/customize.vue

<template>
  <div style="max-width: 1100px">
    <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="/customize" target="_blank" secondary>查看前台 ↗</n-button>
        <n-button type="primary" :loading="saving" @click="save">保存</n-button>
      </n-space>
    </n-space>

    <n-spin :show="!loaded">
      <n-space vertical :size="16">
        <!-- 信任数据 -->
        <n-card title="信任数据">
          <template #header-extra>
            <n-button size="small" type="primary" @click="data.trustStats.push({ value: '', unit: '', label: '' })">添加</n-button>
          </template>
          <n-space vertical :size="8">
            <n-space v-for="(s, i) in data.trustStats" :key="i" align="center">
              <n-input v-model:value="s.value" placeholder="数值" style="width: 80px" />
              <n-input v-model:value="s.unit" placeholder="单位" style="width: 60px" />
              <n-input v-model:value="s.label" placeholder="标签" style="width: 160px" />
              <n-button size="tiny" type="error" quaternary @click="data.trustStats.splice(i, 1)">删</n-button>
            </n-space>
          </n-space>
        </n-card>

        <!-- 出行天数 + 预算 两列 -->
        <n-grid :cols="2" :x-gap="16">
          <n-gi>
            <n-card title="出行天数选项">
              <template #header-extra>
                <n-button size="small" type="primary" @click="data.durations.push({ value: '', label: '' })">添加</n-button>
              </template>
              <n-space vertical :size="8">
                <n-space v-for="(d, i) in data.durations" :key="i" align="center">
                  <n-input v-model:value="d.value" placeholder="值" style="width: 80px" />
                  <n-input v-model:value="d.label" placeholder="标签" style="width: 140px" />
                  <n-button size="tiny" type="error" quaternary @click="data.durations.splice(i, 1)">删</n-button>
                </n-space>
              </n-space>
            </n-card>
          </n-gi>
          <n-gi>
            <n-card title="预算选项">
              <template #header-extra>
                <n-button size="small" type="primary" @click="data.budgets.push({ value: '', label: '' })">添加</n-button>
              </template>
              <n-space vertical :size="8">
                <n-space v-for="(b, i) in data.budgets" :key="i" align="center">
                  <n-input v-model:value="b.value" placeholder="值" style="width: 80px" />
                  <n-input v-model:value="b.label" placeholder="标签" style="width: 140px" />
                  <n-button size="tiny" type="error" quaternary @click="data.budgets.splice(i, 1)">删</n-button>
                </n-space>
              </n-space>
            </n-card>
          </n-gi>
        </n-grid>

        <!-- 活动偏好 -->
        <n-card title="活动偏好选项">
          <template #header-extra>
            <n-button size="small" type="primary" @click="data.activities.push({ value: '', label: '' })">添加</n-button>
          </template>
          <n-space :size="8" style="flex-wrap: wrap">
            <n-space v-for="(a, i) in data.activities" :key="i" align="center" :size="4" style="background: #f5f5f5; border-radius: 4px; padding: 4px 8px">
              <n-input v-model:value="a.label" style="width: 100px" size="small" :bordered="false" />
              <n-button size="tiny" type="error" quaternary @click="data.activities.splice(i, 1)">✕</n-button>
            </n-space>
          </n-space>
        </n-card>

        <!-- 定制流程 -->
        <n-card title="定制流程">
          <n-space vertical :size="8">
            <n-space v-for="(p, i) in data.process" :key="i" align="center">
              <div style="width: 24px; height: 24px; background: #3a7d44; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0">
                {{ i + 1 }}
              </div>
              <n-input v-model:value="p.title" placeholder="步骤标题" style="width: 120px" />
              <n-input v-model:value="p.desc" placeholder="步骤描述" style="width: 360px" />
            </n-space>
          </n-space>
        </n-card>

        <!-- 联系方式 -->
        <n-card title="联系方式">
          <n-form label-placement="top">
            <n-grid :cols="2" :x-gap="12">
              <n-gi><n-form-item label="微信"><n-input v-model:value="data.contact.wechat" /></n-form-item></n-gi>
              <n-gi><n-form-item label="提示文案"><n-input v-model:value="data.contact.tip" /></n-form-item></n-gi>
            </n-grid>
          </n-form>
        </n-card>
      </n-space>
    </n-spin>
  </div>
</template>

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

definePageMeta({ layout: 'admin', middleware: 'admin' })
const { adminFetch } = useAdmin()
const message = useMessage()
const data = ref({ trustStats: [], durations: [], budgets: [], activities: [], process: [], contact: {} })
const loaded = ref(false)
const saving = ref(false)

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

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

onMounted(load)
</script>