404 lines
11 KiB
Vue
404 lines
11 KiB
Vue
<template>
|
||
<div class="aksrt-page-container content-page">
|
||
<PageHeader
|
||
title="Banner 管理"
|
||
desc="管理首页内容流 Banner 幻灯片（图片、文案、跳转、启用状态）。"
|
||
/>
|
||
|
||
<n-card class="aksrt-section-card" style="margin-bottom:16px;">
|
||
<template #header>
|
||
<div class="aksrt-card-header-row">
|
||
<strong>Banner 显示开关</strong>
|
||
<n-button size="small" secondary @click="goHeaderComponents">顶部多功能组件（轮播参数）</n-button>
|
||
</div>
|
||
</template>
|
||
<n-form label-placement="left" label-width="180" class="aksrt-form">
|
||
<n-form-item label="显示首页 Banner">
|
||
<div class="aksrt-inline-setting">
|
||
<n-switch v-model:value="bannerEnabled" :disabled="settingsLoading || settingsSaving" />
|
||
<span class="aksrt-inline-setting__hint">关闭后，首页 Banner 区块将不再渲染。</span>
|
||
</div>
|
||
</n-form-item>
|
||
</n-form>
|
||
<div class="aksrt-inline-setting__actions">
|
||
<n-button type="primary" :loading="settingsSaving" :disabled="settingsLoading" @click="saveBannerSettings">保存 Banner 开关</n-button>
|
||
</div>
|
||
</n-card>
|
||
|
||
<n-spin :show="loading" style="width:100%; min-height:200px;">
|
||
<n-card class="aksrt-section-card">
|
||
<template #header>
|
||
<div class="aksrt-card-header-row">
|
||
<div class="aksrt-card-header-row__left">
|
||
<span class="header-icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:18px;height:18px" aria-hidden="true">
|
||
<rect width="18" height="14" x="3" y="5" rx="2"/>
|
||
<path d="M3 10h18"/>
|
||
</svg>
|
||
</span>
|
||
<strong class="aksrt-card-header-row__title">Banner 列表 ({{ banners.length }})</strong>
|
||
</div>
|
||
<n-button type="primary" size="small" @click="openCreate">+ 添加 Banner</n-button>
|
||
</div>
|
||
</template>
|
||
|
||
<n-data-table
|
||
v-if="banners.length"
|
||
:columns="columns"
|
||
:data="banners"
|
||
:row-key="(row) => row.id"
|
||
:bordered="false"
|
||
size="small"
|
||
/>
|
||
<n-empty v-else description="暂无 Banner，添加后即可在首页使用。" />
|
||
</n-card>
|
||
</n-spin>
|
||
|
||
<n-modal
|
||
v-model:show="modalShow"
|
||
:mask-closable="false"
|
||
preset="card"
|
||
:title="editing.id ? '编辑 Banner' : '添加 Banner'"
|
||
class="aksrt-modal-card"
|
||
>
|
||
<n-form :model="editing" label-placement="top" class="aksrt-form">
|
||
<n-form-item label="标题">
|
||
<n-input v-model:value="editing.title" placeholder="开启文字后显示的主标题" />
|
||
</n-form-item>
|
||
|
||
<n-form-item label="副标题">
|
||
<n-input v-model:value="editing.subtitle" placeholder="开启文字后显示的副标题" />
|
||
</n-form-item>
|
||
|
||
<n-form-item label="Banner 图片">
|
||
<n-input-group>
|
||
<n-input v-model:value="editing.image_url" placeholder="https://..." />
|
||
<n-button secondary @click="pickImage">媒体库</n-button>
|
||
</n-input-group>
|
||
</n-form-item>
|
||
|
||
<div v-if="editing.image_url" class="aksrt-modal-preview">
|
||
<n-image :src="editing.image_url" width="100%" height="160" object-fit="cover" :preview-src="editing.image_url" />
|
||
</div>
|
||
|
||
<n-form-item label="跳转链接">
|
||
<n-input v-model:value="editing.link_url" placeholder="点击后跳转地址，可留空" />
|
||
</n-form-item>
|
||
|
||
<div class="aksrt-modal-grid">
|
||
<n-form-item label="显示文字">
|
||
<n-switch v-model:value="editing.show_text" />
|
||
</n-form-item>
|
||
|
||
<n-form-item label="启用">
|
||
<n-switch v-model:value="editing.enabled" />
|
||
</n-form-item>
|
||
|
||
<n-form-item label="显示元信息">
|
||
<n-switch v-model:value="editing.show_meta" />
|
||
</n-form-item>
|
||
|
||
<n-form-item label="排序">
|
||
<n-input-number v-model:value="editing.sort_order" :min="0" style="width:100%;" />
|
||
</n-form-item>
|
||
</div>
|
||
</n-form>
|
||
|
||
<template #footer>
|
||
<div class="aksrt-modal-footer">
|
||
<n-button @click="modalShow = false">取消</n-button>
|
||
<n-button type="primary" :loading="saving" @click="handleSave">保存</n-button>
|
||
</div>
|
||
</template>
|
||
</n-modal>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { h, onMounted, ref } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
import { NButton, NImage, NTag, useDialog, useMessage } from 'naive-ui'
|
||
import api from '@/api'
|
||
import { openMediaPicker } from '@/utils/media'
|
||
import PageHeader from '@/components/PageHeader.vue'
|
||
|
||
const router = useRouter()
|
||
const message = useMessage()
|
||
const dialog = useDialog()
|
||
|
||
function goHeaderComponents() {
|
||
router.push('/page-display/header-components')
|
||
}
|
||
const loading = ref(true)
|
||
const saving = ref(false)
|
||
const settingsLoading = ref(false)
|
||
const settingsSaving = ref(false)
|
||
const banners = ref([])
|
||
const bannerEnabled = ref(true)
|
||
|
||
const modalShow = ref(false)
|
||
const editing = ref(emptyForm())
|
||
|
||
function emptyForm() {
|
||
return {
|
||
id: 0,
|
||
title: '',
|
||
subtitle: '',
|
||
image_url: '',
|
||
link_url: '',
|
||
show_text: true,
|
||
enabled: true,
|
||
show_meta: false,
|
||
sort_order: 0,
|
||
}
|
||
}
|
||
|
||
const columns = [
|
||
{
|
||
title: '预览',
|
||
key: 'image_url',
|
||
width: 90,
|
||
render(row) {
|
||
if (!row.image_url) {
|
||
return h('span', { style: 'color:#bbb;font-size:12px;' }, '无')
|
||
}
|
||
return h(NImage, {
|
||
src: row.image_url,
|
||
width: 64,
|
||
height: 36,
|
||
objectFit: 'cover',
|
||
previewSrc: row.image_url,
|
||
style: 'border-radius:4px;display:block;',
|
||
})
|
||
},
|
||
},
|
||
{
|
||
title: '标题',
|
||
key: 'title',
|
||
ellipsis: { tooltip: true },
|
||
render(row) {
|
||
return row.title || h('span', { style: 'color:#bbb;' }, '未命名')
|
||
},
|
||
},
|
||
{
|
||
title: '文字',
|
||
key: 'show_text',
|
||
width: 70,
|
||
className: 'aksrt-table-mobile-hide',
|
||
render(row) {
|
||
return h(NTag, { size: 'small', type: row.show_text ? 'info' : 'default' }, {
|
||
default: () => (row.show_text ? '显示' : '隐藏'),
|
||
})
|
||
},
|
||
},
|
||
{
|
||
title: '排序',
|
||
key: 'sort_order',
|
||
width: 64,
|
||
className: 'aksrt-table-mobile-hide',
|
||
},
|
||
{
|
||
title: '元信息',
|
||
key: 'show_meta',
|
||
width: 78,
|
||
className: 'aksrt-table-mobile-hide',
|
||
render(row) {
|
||
return h(NTag, { size: 'small', type: row.show_meta ? 'info' : 'default' }, {
|
||
default: () => (row.show_meta ? '显示' : '隐藏'),
|
||
})
|
||
},
|
||
},
|
||
{
|
||
title: '状态',
|
||
key: 'enabled',
|
||
width: 84,
|
||
render(row) {
|
||
return h(NTag, { size: 'small', type: row.enabled ? 'success' : 'default' }, {
|
||
default: () => (row.enabled ? '启用' : '禁用'),
|
||
})
|
||
},
|
||
},
|
||
{
|
||
title: '操作',
|
||
key: 'actions',
|
||
width: 130,
|
||
render(row) {
|
||
return h('div', { style: 'display:flex;gap:6px;' }, [
|
||
h(NButton, { size: 'tiny', onClick: () => openEdit(row) }, { default: () => '编辑' }),
|
||
h(NButton, { size: 'tiny', type: 'error', quaternary: true, onClick: () => handleDelete(row) }, { default: () => '删除' }),
|
||
])
|
||
},
|
||
},
|
||
]
|
||
|
||
async function loadBanners() {
|
||
try {
|
||
loading.value = true
|
||
const res = await api.getHomepageBanners()
|
||
if (res.code === 'success') {
|
||
banners.value = res.data || []
|
||
}
|
||
} catch (e) {
|
||
message.error(e.message || '加载失败')
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
async function loadBannerSettings() {
|
||
settingsLoading.value = true
|
||
try {
|
||
const res = await api.getHomepageSettings()
|
||
const data = res?.data || {}
|
||
bannerEnabled.value = data.homepage_module_banner_enabled !== false
|
||
} catch (e) {
|
||
message.error(e.message || '加载 Banner 开关失败')
|
||
} finally {
|
||
settingsLoading.value = false
|
||
}
|
||
}
|
||
|
||
async function saveBannerSettings() {
|
||
settingsSaving.value = true
|
||
try {
|
||
const res = await api.saveHomepageSettings({
|
||
homepage_module_banner_enabled: bannerEnabled.value,
|
||
})
|
||
if (res?.code === 'success') {
|
||
message.success('Banner 开关已保存')
|
||
return
|
||
}
|
||
throw new Error(res?.message || '保存 Banner 开关失败')
|
||
} catch (e) {
|
||
message.error(e.message || '保存 Banner 开关失败')
|
||
} finally {
|
||
settingsSaving.value = false
|
||
}
|
||
}
|
||
|
||
function openCreate() {
|
||
editing.value = emptyForm()
|
||
modalShow.value = true
|
||
}
|
||
|
||
function openEdit(row) {
|
||
editing.value = {
|
||
id: row.id,
|
||
title: row.title || '',
|
||
subtitle: row.subtitle || '',
|
||
image_url: row.image_url || '',
|
||
link_url: row.link_url || '',
|
||
show_text: row.show_text !== false,
|
||
enabled: !!row.enabled,
|
||
show_meta: row.show_meta === true,
|
||
sort_order: Number(row.sort_order) || 0,
|
||
}
|
||
modalShow.value = true
|
||
}
|
||
|
||
async function pickImage() {
|
||
try {
|
||
const media = await openMediaPicker({
|
||
title: '选择 Banner 图片',
|
||
buttonText: '使用这张 Banner 图',
|
||
})
|
||
if (media?.url) {
|
||
editing.value.image_url = media.url
|
||
}
|
||
} catch (e) {
|
||
message.error(e.message || '打开媒体库失败')
|
||
}
|
||
}
|
||
|
||
async function handleSave() {
|
||
if (!editing.value.image_url) {
|
||
message.warning('请填写 Banner 图片')
|
||
return
|
||
}
|
||
|
||
saving.value = true
|
||
try {
|
||
if (editing.value.id) {
|
||
await api.updateHomepageBanner(editing.value.id, editing.value)
|
||
message.success('已保存')
|
||
} else {
|
||
await api.createHomepageBanner(editing.value)
|
||
message.success('已添加')
|
||
}
|
||
modalShow.value = false
|
||
await loadBanners()
|
||
} catch (e) {
|
||
message.error(e.message || '保存失败')
|
||
} finally {
|
||
saving.value = false
|
||
}
|
||
}
|
||
|
||
function handleDelete(row) {
|
||
dialog.warning({
|
||
title: '确认删除',
|
||
content: `确定删除 Banner「${row.title || '未命名'}」？`,
|
||
positiveText: '删除',
|
||
negativeText: '取消',
|
||
onPositiveClick: async () => {
|
||
try {
|
||
await api.deleteHomepageBanner(row.id)
|
||
message.success('已删除')
|
||
await loadBanners()
|
||
} catch (e) {
|
||
message.error(e.message || '删除失败')
|
||
}
|
||
},
|
||
})
|
||
}
|
||
|
||
onMounted(() => {
|
||
loadBanners()
|
||
loadBannerSettings()
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.aksrt-inline-setting {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.aksrt-inline-setting__hint {
|
||
color: #7a7f8a;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.aksrt-inline-setting__actions {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.aksrt-modal-preview {
|
||
margin: -8px 0 18px;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
border: 1px solid #eef1f6;
|
||
}
|
||
|
||
.aksrt-modal-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr 1fr;
|
||
gap: 14px;
|
||
}
|
||
|
||
.aksrt-modal-footer {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 10px;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.aksrt-modal-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style>
|