hulai-website/pages/admin/content/selector/[idx].vue

<template>
  <div style="max-width: 800px;">
    <NBreadcrumb style="margin-bottom: 16px;">
      <NBreadcrumbItem>
        <NuxtLink to="/admin/content/selector">产品选择器</NuxtLink>
      </NBreadcrumbItem>
      <NBreadcrumbItem>Q{{ idx + 1 }}: {{ form.text || '编辑' }}</NBreadcrumbItem>
    </NBreadcrumb>

    <NSpace justify="space-between" align="center" style="margin-bottom: 24px;">
      <div style="font-size: 20px; font-weight: 600; color: #111827;">编辑问题 Q{{ idx + 1 }}</div>
      <NSpace :size="8">
        <NuxtLink to="/admin/content/selector">
          <NButton>返回列表</NButton>
        </NuxtLink>
        <NButton type="primary" :loading="saving" @click="handleSave">保存</NButton>
      </NSpace>
    </NSpace>

    <NSpin :show="pageLoading">
      <template v-if="!pageLoading">
        <NCard style="margin-bottom: 16px;">
          <template #header>
            <span style="font-size: 14px; font-weight: 600; color: #374151;">问题设置</span>
          </template>
          <NForm label-placement="top">
            <NFormItem label="问题文本">
              <NInput v-model:value="form.text" />
            </NFormItem>
            <NFormItem label="提示语">
              <NInput v-model:value="form.hint" />
            </NFormItem>
            <NGrid v-if="form.condition" :cols="2" :x-gap="12">
              <NGi>
                <NFormItem label="条件：依赖问题">
                  <NInput v-model:value="form.condition.key" placeholder="如 q2" />
                </NFormItem>
              </NGi>
              <NGi>
                <NFormItem label="条件：选择值">
                  <NInput v-model:value="form.condition.value" />
                </NFormItem>
              </NGi>
            </NGrid>
          </NForm>
        </NCard>

        <NCard style="margin-bottom: 16px;">
          <template #header>
            <NSpace justify="space-between" align="center">
              <span style="font-size: 14px; font-weight: 600; color: #374151;">选项 ({{ form.options?.length || 0 }})</span>
              <NButton size="small" type="primary" @click="addOption">+ 添加选项</NButton>
            </NSpace>
          </template>
          <NSpace vertical :size="10">
            <div
              v-for="(opt, i) in (form.options || [])"
              :key="i"
              style="display: flex; gap: 12px; align-items: flex-start; padding: 14px; background: #f9fafb; border: 1px solid #f3f4f6; border-radius: 8px;"
            >
              <div style="width: 28px; height: 28px; background: #e5e7eb; color: #374151; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; margin-top: 4px;">
                {{ i + 1 }}
              </div>
              <div style="flex: 1;">
                <NGrid :cols="2" :x-gap="8">
                  <NGi>
                    <NFormItem label="标签" label-style="font-size: 13px;" style="margin-bottom: 8px;">
                      <NInput v-model:value="opt.label" size="small" />
                    </NFormItem>
                  </NGi>
                  <NGi>
                    <NFormItem label="值" label-style="font-size: 13px;" style="margin-bottom: 8px;">
                      <NInput v-model:value="opt.value" size="small" />
                    </NFormItem>
                  </NGi>
                  <NGi :span="2">
                    <NFormItem label="描述" label-style="font-size: 13px;" style="margin-bottom: 0;">
                      <NInput v-model:value="opt.desc" size="small" />
                    </NFormItem>
                  </NGi>
                </NGrid>
              </div>
              <NButton size="small" type="error" ghost @click="form.options.splice(i, 1)" style="flex-shrink: 0; margin-top: 4px;">删除</NButton>
            </div>
          </NSpace>
        </NCard>

        <div v-if="formError" style="color: #ef4444; font-size: 13px; margin-bottom: 12px;">{{ formError }}</div>

        <div class="save-bar">
          <NuxtLink to="/admin/content/selector">
            <NButton>返回列表</NButton>
          </NuxtLink>
          <NButton type="primary" :loading="saving" @click="handleSave">保存</NButton>
        </div>
      </template>
    </NSpin>
  </div>
</template>

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

definePageMeta({ layout: 'admin', middleware: 'admin', name: 'admin-content-selector-edit' })
const message = useMessage()
const route = useRoute()
const { adminFetch } = useAdmin()
const idx = computed(() => Number(route.params.idx))
const form = ref({})
const pageLoading = ref(true)
const saving = ref(false)
const formError = ref('')

async function loadItem() {
  try {
    const res = await adminFetch('/api/admin/site-content?key=selector')
    const q = res.data.questions?.[idx.value]
    if (!q) { formError.value = '不存在'; return }
    form.value = JSON.parse(JSON.stringify(q))
  } catch (e) {
    formError.value = '加载失败'
  } finally {
    pageLoading.value = false
  }
}

function addOption() {
  if (!form.value.options) form.value.options = []
  form.value.options.push({ label: '', value: '', desc: '' })
}

async function handleSave() {
  saving.value = true
  formError.value = ''
  try {
    const res = await adminFetch('/api/admin/site-content?key=selector')
    res.data.questions[idx.value] = form.value
    await adminFetch('/api/admin/site-content', { method: 'PUT', body: { key: 'selector', data: res.data } })
    message.success('保存成功')
  } catch (e) {
    formError.value = e.data?.message || '保存失败'
    message.error(formError.value)
  } finally {
    saving.value = false
  }
}

onMounted(loadItem)
</script>

<style scoped>
.save-bar { 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; }
</style>