94 行
4.8 KiB
Vue
94 行
4.8 KiB
Vue
<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="/stories" target="_blank" secondary>查看前台</n-button>
|
|
<n-button type="primary" @click="navigateTo('/admin/stories/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="page = 1; 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, NPopconfirm } from 'naive-ui'
|
|
import { useMessage } from 'naive-ui'
|
|
|
|
definePageMeta({ layout: 'admin', middleware: 'admin' })
|
|
|
|
const { adminFetch } = useAdmin()
|
|
const message = useMessage()
|
|
const { moveUp, moveDown } = useAdminSort('/api/admin/stories')
|
|
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: 'sortOrder', width: 110,
|
|
render: (row, idx) => h(NSpace, { size: 4, align: 'center' }, () => [
|
|
h('span', { style: 'color: #9ca3af; font-size: 12px; min-width: 20px' }, row.sortOrder),
|
|
h(NButton, { size: 'tiny', disabled: idx === 0, onClick: async () => { await moveUp(list.value, idx); message.success('已上移') } }, () => '↑'),
|
|
h(NButton, { size: 'tiny', disabled: idx === list.value.length - 1, onClick: async () => { await moveDown(list.value, idx); message.success('已下移') } }, () => '↓'),
|
|
]),
|
|
},
|
|
{
|
|
title: '标题', key: 'title',
|
|
render: (row) => h('a', { style: 'color: #111827; text-decoration: none; font-weight: 500; cursor: pointer', onClick: () => navigateTo(`/admin/stories/${row.id}`) }, row.title),
|
|
},
|
|
{ title: '家庭类型', key: 'familyType', width: 90, render: (row) => h('span', { style: 'color: #9ca3af; font-size: 12px' }, row.familyType || '-') },
|
|
{ title: '出发地', key: 'fromCity', width: 80, render: (row) => h('span', { style: 'color: #9ca3af; font-size: 12px' }, row.fromCity || '-') },
|
|
{ title: '产品', key: 'tripProduct', width: 100, render: (row) => h('span', { style: 'color: #9ca3af; font-size: 12px' }, row.tripProduct || '-') },
|
|
{
|
|
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/stories/${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/stories?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/stories/${item.id}`, { method: 'PUT', body: { published: !item.published } }); item.published = !item.published }
|
|
catch { message.error('操作失败') }
|
|
}
|
|
|
|
async function handleDelete(item) {
|
|
try { await adminFetch(`/api/admin/stories/${item.id}`, { method: 'DELETE' }); message.success('已删除'); loadData() }
|
|
catch { message.error('删除失败') }
|
|
}
|
|
|
|
onMounted(loadData)
|
|
</script>
|