ee078b61bc
- 后台全面引入 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>
98 行
4.0 KiB
Vue
98 行
4.0 KiB
Vue
<template>
|
|
<div style="max-width: 1100px">
|
|
<n-breadcrumb style="margin-bottom: 16px">
|
|
<n-breadcrumb-item @click="navigateTo('/admin/faqs')">常见问答</n-breadcrumb-item>
|
|
<n-breadcrumb-item>{{ isNew ? '新增' : '编辑' }}</n-breadcrumb-item>
|
|
</n-breadcrumb>
|
|
|
|
<n-space justify="space-between" align="center" style="margin-bottom: 24px">
|
|
<h1 style="margin: 0; font-size: 20px; font-weight: 600; color: #111827">{{ isNew ? '新增问答' : '编辑问答' }}</h1>
|
|
<n-space>
|
|
<n-button secondary @click="navigateTo('/admin/faqs')">取消</n-button>
|
|
<n-button type="primary" :loading="saving" @click="handleSave">保存</n-button>
|
|
</n-space>
|
|
</n-space>
|
|
|
|
<n-card v-if="loadError" style="text-align: center; color: #ef4444">{{ loadError }}</n-card>
|
|
<n-spin v-else-if="pageLoading" style="display: flex; justify-content: center; padding: 60px" />
|
|
|
|
<template v-else>
|
|
<n-card style="max-width: 700px">
|
|
<n-form label-placement="top">
|
|
<n-form-item label="问题" required>
|
|
<n-input v-model:value="form.question" placeholder="输入常见问题" />
|
|
</n-form-item>
|
|
<n-form-item label="答案" required>
|
|
<n-input v-model:value="form.answer" type="textarea" :rows="8" placeholder="输入答案内容" />
|
|
</n-form-item>
|
|
<n-form-item label="排序">
|
|
<n-input-number v-model:value="form.sortOrder" :min="0" placeholder="数字越小越靠前" style="width: 200px" />
|
|
</n-form-item>
|
|
<n-form-item label="状态">
|
|
<n-select v-model:value="form.published" :options="[{ label: '已发布', value: true }, { label: '草稿', value: false }]" style="width: 200px" />
|
|
</n-form-item>
|
|
</n-form>
|
|
</n-card>
|
|
|
|
<n-alert v-if="formError" type="error" style="margin-top: 12px; max-width: 700px">{{ formError }}</n-alert>
|
|
|
|
<div class="save-bar">
|
|
<n-button secondary @click="navigateTo('/admin/faqs')">取消</n-button>
|
|
<n-button type="primary" :loading="saving" @click="handleSave">保存</n-button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { NButton, NCard, NSpace, NInput, NInputNumber, NForm, NFormItem, NSelect, NBreadcrumb, NBreadcrumbItem, NSpin, NAlert } from 'naive-ui'
|
|
import { useMessage } from 'naive-ui'
|
|
|
|
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 formError = ref('')
|
|
|
|
const form = ref({ question: '', answer: '', sortOrder: 0, published: true })
|
|
|
|
async function loadItem() {
|
|
if (isNew.value) return
|
|
pageLoading.value = true
|
|
try {
|
|
const data = await adminFetch(`/api/admin/faqs/${route.params.id}`)
|
|
form.value = { ...data, published: !!data.published }
|
|
} catch (e) { loadError.value = e.data?.message || '加载失败' }
|
|
finally { pageLoading.value = false }
|
|
}
|
|
|
|
async function handleSave() {
|
|
if (!form.value.question?.trim()) { formError.value = '问题不能为空'; return }
|
|
if (!form.value.answer?.trim()) { formError.value = '答案不能为空'; return }
|
|
saving.value = true; formError.value = ''
|
|
try {
|
|
if (isNew.value) {
|
|
await adminFetch('/api/admin/faqs', { method: 'POST', body: form.value })
|
|
message.success('创建成功')
|
|
setTimeout(() => navigateTo('/admin/faqs'), 800)
|
|
} else {
|
|
await adminFetch(`/api/admin/faqs/${route.params.id}`, { method: 'PUT', body: form.value })
|
|
message.success('保存成功')
|
|
}
|
|
} catch (e) { formError.value = e.data?.message || '保存失败' }
|
|
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; max-width: 700px; }
|
|
</style>
|