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>
这个提交包含在：
Mimingguang
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<div style="max-width: 1100px">
|
||||
<n-breadcrumb style="margin-bottom: 16px">
|
||||
<n-breadcrumb-item @click="navigateTo('/admin/gallery')">呼籁旅拍</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/gallery')">取消</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>
|
||||
<div class="form-layout">
|
||||
<div class="form-main">
|
||||
<n-card title="照片信息">
|
||||
<n-form label-placement="top">
|
||||
<n-form-item label="标题" required>
|
||||
<n-input v-model:value="form.title" placeholder="输入照片标题" />
|
||||
</n-form-item>
|
||||
<n-grid :cols="2" :x-gap="16">
|
||||
<n-gi>
|
||||
<n-form-item label="分类">
|
||||
<n-select v-model:value="form.category" :options="categoryOptions" placeholder="选择分类" clearable />
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-form-item label="地点">
|
||||
<n-input v-model:value="form.location" placeholder="拍摄地点" />
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
<n-form-item label="描述">
|
||||
<n-input v-model:value="form.description" type="textarea" :rows="4" placeholder="照片描述（可选）" />
|
||||
</n-form-item>
|
||||
<n-grid :cols="2" :x-gap="16">
|
||||
<n-gi>
|
||||
<n-form-item label="方向">
|
||||
<n-select v-model:value="form.orientation" :options="[{ label: '横屏', value: 'landscape' }, { label: '竖屏', value: 'portrait' }]" />
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-form-item label="排序">
|
||||
<n-input-number v-model:value="form.sortOrder" :min="0" style="width: 100%" />
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
</n-form>
|
||||
</n-card>
|
||||
</div>
|
||||
|
||||
<div class="form-sidebar">
|
||||
<n-card title="发布设置">
|
||||
<n-form-item label="状态">
|
||||
<n-select v-model:value="form.published" :options="[{ label: '已发布', value: true }, { label: '草稿', value: false }]" />
|
||||
</n-form-item>
|
||||
</n-card>
|
||||
<n-card title="照片">
|
||||
<AdminImageUpload v-model="form.image" />
|
||||
</n-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<n-alert v-if="formError" type="error" style="margin-top: 12px">{{ formError }}</n-alert>
|
||||
|
||||
<div class="save-bar">
|
||||
<n-button secondary @click="navigateTo('/admin/gallery')">取消</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, NGrid, NGi } 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 categoryOptions = [
|
||||
{ label: '草原', value: '草原' }, { label: '森林', value: '森林' },
|
||||
{ label: '湖泊', value: '湖泊' }, { label: '冬季', value: '冬季' },
|
||||
{ label: '人文', value: '人文' }, { label: '其他', value: '其他' },
|
||||
]
|
||||
|
||||
const form = ref({
|
||||
title: '', category: '', location: '', description: '',
|
||||
image: '', orientation: 'landscape', published: true, sortOrder: 0,
|
||||
})
|
||||
|
||||
async function loadItem() {
|
||||
if (isNew.value) return
|
||||
pageLoading.value = true
|
||||
try {
|
||||
const data = await adminFetch(`/api/admin/gallery/${route.params.id}`)
|
||||
form.value = { ...data, published: !!data.published, image: data.image || '' }
|
||||
} catch (e) { loadError.value = e.data?.message || '加载失败' }
|
||||
finally { pageLoading.value = false }
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
if (!form.value.title?.trim()) { formError.value = '标题不能为空'; return }
|
||||
if (!form.value.image?.trim()) { formError.value = '请上传照片'; return }
|
||||
saving.value = true; formError.value = ''
|
||||
try {
|
||||
if (isNew.value) {
|
||||
await adminFetch('/api/admin/gallery', { method: 'POST', body: form.value })
|
||||
message.success('创建成功')
|
||||
setTimeout(() => navigateTo('/admin/gallery'), 800)
|
||||
} else {
|
||||
await adminFetch(`/api/admin/gallery/${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>
|
||||
.form-layout { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
|
||||
.form-main { min-width: 0; }
|
||||
.form-sidebar { display: flex; flex-direction: column; gap: 16px; }
|
||||
.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>
|
||||
@@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<div style="max-width: 1200px">
|
||||
<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="/gallery" target="_blank" secondary>查看前台</n-button>
|
||||
<n-button type="primary" @click="navigateTo('/admin/gallery/new')">新增照片</n-button>
|
||||
</n-space>
|
||||
</n-space>
|
||||
|
||||
<n-card>
|
||||
<n-space style="margin-bottom: 16px">
|
||||
<n-input v-model:value="search" placeholder="搜索标题、分类..." clearable style="width: 260px" @keyup.enter="loadData">
|
||||
<template #prefix><span style="color: #9ca3af">🔍</span></template>
|
||||
</n-input>
|
||||
<n-button @click="page = 1; loadData()">搜索</n-button>
|
||||
</n-space>
|
||||
|
||||
<n-data-table
|
||||
:columns="columns"
|
||||
:data="list"
|
||||
:loading="loading"
|
||||
:row-key="(row) => row.id"
|
||||
:pagination="false"
|
||||
size="small"
|
||||
striped
|
||||
/>
|
||||
|
||||
<n-space justify="end" style="margin-top: 16px" v-if="totalPages > 1">
|
||||
<n-pagination
|
||||
v-model:page="page"
|
||||
:page-count="totalPages"
|
||||
@update:page="loadData"
|
||||
/>
|
||||
</n-space>
|
||||
</n-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { h } from 'vue'
|
||||
import { NButton, NCard, NSpace, NInput, NDataTable, NTag, NPagination, NImage, NPopconfirm } from 'naive-ui'
|
||||
import { useMessage } from 'naive-ui'
|
||||
|
||||
definePageMeta({ layout: 'admin', middleware: 'admin' })
|
||||
|
||||
const { adminFetch } = useAdmin()
|
||||
const message = useMessage()
|
||||
const list = ref([])
|
||||
const total = ref(0)
|
||||
const page = ref(1)
|
||||
const totalPages = ref(1)
|
||||
const loading = ref(false)
|
||||
const search = ref('')
|
||||
|
||||
const columns = [
|
||||
{ title: 'ID', key: 'id', width: 50, render: (row) => h('span', { style: 'color: #9ca3af; font-size: 12px' }, row.id) },
|
||||
{
|
||||
title: '缩略',
|
||||
key: 'image',
|
||||
width: 60,
|
||||
render: (row) => row.image
|
||||
? h(NImage, { src: row.image, width: 48, height: 36, objectFit: 'cover', style: 'border-radius: 4px', lazy: true })
|
||||
: h('div', { style: 'width:48px;height:36px;border-radius:4px;background:#f3f4f6' }),
|
||||
},
|
||||
{
|
||||
title: '标题',
|
||||
key: 'title',
|
||||
render: (row) => h('a', {
|
||||
style: 'color: #111827; text-decoration: none; font-weight: 500; cursor: pointer',
|
||||
onClick: () => navigateTo(`/admin/gallery/${row.id}`),
|
||||
}, row.title),
|
||||
},
|
||||
{
|
||||
title: '分类',
|
||||
key: 'category',
|
||||
width: 80,
|
||||
render: (row) => row.category ? h(NTag, { size: 'small', type: 'info', bordered: false }, () => row.category) : '-',
|
||||
},
|
||||
{ title: '地点', key: 'location', width: 100, render: (row) => h('span', { style: 'color: #9ca3af; font-size: 12px' }, row.location || '-') },
|
||||
{
|
||||
title: '状态',
|
||||
key: 'published',
|
||||
width: 70,
|
||||
render: (row) => h(NTag, {
|
||||
size: 'small',
|
||||
type: row.published ? 'success' : 'default',
|
||||
bordered: false,
|
||||
style: 'cursor: pointer',
|
||||
onClick: () => togglePublish(row),
|
||||
}, () => row.published ? '已发布' : '草稿'),
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'actions',
|
||||
width: 120,
|
||||
render: (row) => h(NSpace, { size: 'small' }, () => [
|
||||
h(NButton, { size: 'tiny', text: true, type: 'primary', onClick: () => navigateTo(`/admin/gallery/${row.id}`) }, () => '编辑'),
|
||||
h(NPopconfirm, { onPositiveClick: () => handleDelete(row) }, {
|
||||
trigger: () => h(NButton, { size: 'tiny', text: true, type: 'error' }, () => '删除'),
|
||||
default: () => `确定删除「${row.title}」？`,
|
||||
}),
|
||||
]),
|
||||
},
|
||||
]
|
||||
|
||||
async function loadData() {
|
||||
loading.value = true
|
||||
try {
|
||||
const d = await adminFetch(`/api/admin/gallery?page=${page.value}&limit=20&search=${encodeURIComponent(search.value)}`)
|
||||
list.value = d.items; total.value = d.total; totalPages.value = d.totalPages
|
||||
} catch { message.error('加载失败') } finally { loading.value = false }
|
||||
}
|
||||
|
||||
async function togglePublish(item) {
|
||||
try {
|
||||
await adminFetch(`/api/admin/gallery/${item.id}`, { method: 'PUT', body: { published: !item.published } })
|
||||
item.published = !item.published
|
||||
message.success(item.published ? '已发布' : '已下架')
|
||||
} catch { message.error('操作失败') }
|
||||
}
|
||||
|
||||
async function handleDelete(item) {
|
||||
try {
|
||||
await adminFetch(`/api/admin/gallery/${item.id}`, { method: 'DELETE' })
|
||||
message.success('已删除')
|
||||
loadData()
|
||||
} catch { message.error('删除失败') }
|
||||
}
|
||||
|
||||
onMounted(loadData)
|
||||
</script>
|
||||
在新工单中引用
屏蔽一个用户