lq/hunli
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1. 海报

Browse Source
This commit is contained in:
李琦
2026-08-03 09:54:43 +08:00
parent 631c1afcc0
commit 3b9520eb0f
9 changed files with 969 additions and 748 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
vite-tailwindcss/src/views/admin/AdminEditor.vue
View File

@@ -19,8 +19,8 @@
</a-button>
<template #overlay>
<a-menu>
<a-menu-item key="male" @click="openPosterPreview('male')">男方 /hb-n</a-menu-item>
<a-menu-item key="female" @click="openPosterPreview('female')">女方 /hb-nv</a-menu-item>
<a-menu-item key="1" @click="openPosterPreview(1)">男方(1) /hb-n</a-menu-item>
<a-menu-item key="2" @click="openPosterPreview(2)">女方(2) /hb-nv</a-menu-item>
</a-menu>
</template>
</a-dropdown>
@@ -410,20 +410,34 @@
</a-card>
</a-tab-pane>
<!-- 海报（独立 poster_configs：男方 /hb-n、女方 /hb-nv） -->
<!-- 海报（独立 poster_configs：side 1 男方 /hb-n，2 女方 /hb-nv） -->
<a-tab-pane key="poster" tab="海报">
<a-card v-if="activeTab === 'poster'" :bordered="false" class="!shadow-sm">
<a-alert
type="info"
show-icon
class="mb-4"
message="海报配置独立存储。男方前台 /hb-n，女方前台 /hb-nv"
message="海报配置独立存储。side=1 男方 /hb-n，side=2 女方 /hb-nv；两侧可分别选择模板。"
/>
<a-tabs v-model:activeKey="posterSideTab" size="small" type="card" class="mb-3">
<a-tab-pane key="male" tab="男方海报" />
<a-tab-pane key="female" tab="女方海报" />
<a-tab-pane key="1" tab="男方(1)" />
<a-tab-pane key="2" tab="女方(2)" />
</a-tabs>
<a-form layout="vertical" :class="{ 'opacity-60 pointer-events-none': posterLoading }">
<a-form-item label="所属方">
<a-tag color="gold">{{ posterSideTab === '2' ? '2 · 女方' : '1 · 男方' }}</a-tag>
<span class="text-[11px] text-[#8A8680] ml-2">路由 {{ posterSideTab === '2' ? '/hb-nv' : '/hb-n' }}</span>
</a-form-item>
<a-form-item label="版式模板">
<a-radio-group v-model:value="posterCfg.template" class="poster-tpl-group">
<a-radio-button v-for="t in POSTER_TEMPLATES" :key="t.value" :value="t.value">
{{ t.label }}
</a-radio-button>
</a-radio-group>
<div class="text-[11px] text-[#8A8680] mt-1">
{{ POSTER_TEMPLATES.find(t => t.value === posterCfg.template)?.desc }}
</div>
</a-form-item>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<a-form-item label="启用海报页">
<a-switch v-model:checked="posterCfg.enabled" />
@@ -450,39 +464,85 @@
<a-input v-model:value="posterCfg.invitePath" placeholder="/" />
</a-form-item>
</div>
<a-form-item label="顶部照片">
<image-field v-model="posterCfg.heroImg" label="海报顶图" @pick="openUpload(u => posterCfg.heroImg = u)" :uploading="uploading" />
<a-form-item :label="posterCfg.template === 'split' ? '左侧照片' : '顶部照片'">
<image-field v-model="posterCfg.heroImg" label="海报图片" @pick="setPosterHero" :uploading="uploading" />
</a-form-item>
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-6">
<a-form-item :label="posterSideTab === 'female' ? '女儿称谓 / 姓名' : '儿子称谓 / 姓名'">
<div class="flex gap-2">
<a-input v-model:value="posterCfg.sonLabel" class="!w-[100px]" :placeholder="posterSideTab === 'female' ? '女儿：' : '儿子：'" />
<a-input v-model:value="posterCfg.sonName" placeholder="姓名" />
</div>
<!-- classic 字段 -->
<template v-if="posterCfg.template === 'classic'">
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-6">
<a-form-item :label="posterSideTab === '2' ? '女儿称谓 / 姓名' : '儿子称谓 / 姓名'">
<div class="flex gap-2">
<a-input v-model:value="posterCfg.sonLabel" class="!w-[100px]" :placeholder="posterSideTab === '2' ? '女儿：' : '儿子：'" />
<a-input v-model:value="posterCfg.sonName" placeholder="姓名" />
</div>
</a-form-item>
<a-form-item :label="posterSideTab === '2' ? '女婿称谓 / 姓名' : '儿媳称谓 / 姓名'">
<div class="flex gap-2">
<a-input v-model:value="posterCfg.daughterInLawLabel" class="!w-[100px]" :placeholder="posterSideTab === '2' ? '女婿：' : '儿媳：'" />
<a-input v-model:value="posterCfg.daughterInLawName" placeholder="姓名" />
</div>
</a-form-item>
</div>
<a-form-item label="主标题">
<a-input v-model:value="posterCfg.title" placeholder="婚礼邀请函" />
</a-form-item>
<a-form-item :label="posterSideTab === 'female' ? '女婿称谓 / 姓名' : '儿媳称谓 / 姓名'">
<div class="flex gap-2">
<a-input v-model:value="posterCfg.daughterInLawLabel" class="!w-[100px]" :placeholder="posterSideTab === 'female' ? '女婿：' : '儿媳：'" />
<a-input v-model:value="posterCfg.daughterInLawName" placeholder="姓名" />
</div>
<a-form-item label="正文（每行一条）">
<a-textarea v-model:value="posterLinesText" :rows="10" placeholder="每行一条正文" />
</a-form-item>
</div>
<a-form-item label="主标题">
<a-input v-model:value="posterCfg.title" placeholder="婚礼邀请函" />
</a-form-item>
<a-form-item label="正文（每行一条）">
<a-textarea v-model:value="posterLinesText" :rows="10" placeholder="每行一条正文" />
</a-form-item>
<a-form-item label="底部文案">
<a-input v-model:value="posterCfg.footer" />
</a-form-item>
<a-form-item label="底部文案">
<a-input v-model:value="posterCfg.footer" />
</a-form-item>
</template>
<!-- split 字段 -->
<template v-else>
<div class="grid grid-cols-1 md:grid-cols-3 gap-x-6">
<a-form-item label="竖排主标">
<a-input v-model:value="posterCfg.verticalSlogan" placeholder="吾家有喜" />
</a-form-item>
<a-form-item label="副标一">
<a-input v-model:value="posterCfg.subSlogan1" placeholder="佳偶天成" />
</a-form-item>
<a-form-item label="副标二">
<a-input v-model:value="posterCfg.subSlogan2" placeholder="百年好合" />
</a-form-item>
</div>
<a-form-item label="问候语">
<a-input v-model:value="posterCfg.greeting" placeholder="尊敬的各位亲朋好友" />
</a-form-item>
<a-form-item label="正文（每行一条，建议 2～4 行）">
<a-textarea v-model:value="posterLinesText" :rows="5" placeholder="每行一条正文" />
</a-form-item>
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-6">
<a-form-item label="新郎">
<a-input v-model:value="posterCfg.groomName" />
</a-form-item>
<a-form-item label="新娘">
<a-input v-model:value="posterCfg.brideName" />
</a-form-item>
<a-form-item label="喜宴时间">
<a-input v-model:value="posterCfg.dateText" />
</a-form-item>
<a-form-item label="农历">
<a-input v-model:value="posterCfg.lunarText" />
</a-form-item>
</div>
<a-form-item label="地点">
<a-input v-model:value="posterCfg.venueText" />
</a-form-item>
<a-form-item label="底部 Love 文案">
<a-input v-model:value="posterCfg.loveFooter" placeholder="Love you" />
</a-form-item>
</template>
<div class="flex gap-2 flex-wrap">
<a-button type="primary" :loading="posterSaving" @click="onSavePosterConfig"
class="!bg-[#a88c6b] hover:!bg-[#967b5c] !border-[#a88c6b]">
<i class="fa-solid fa-floppy-disk mr-1"></i>保存海报配置
</a-button>
<a-button @click="openPosterPreview(posterSideTab)">
<i class="fa-solid fa-eye mr-1"></i>打开 {{ posterSideTab === 'female' ? '/hb-nv' : '/hb-n' }} 预览
<i class="fa-solid fa-eye mr-1"></i>打开 {{ posterSideTab === '2' ? '/hb-nv' : '/hb-n' }} 预览
</a-button>
</div>
</a-form>
@@ -830,7 +890,7 @@ import { resolveDanmakuSwatch } from '@/utils/danmakuColors'
import { getSlotResizeSpecs, resizeSlotToFile, probeResizedMeta, metaHasFileSize } from '@/composables/resizeImage'
import {
defaultPosterBundle, normalizePosterBundle, normalizePosterConfig,
LOADING_EFFECTS, ENTER_EFFECTS, POSTER_SIDES,
LOADING_EFFECTS, ENTER_EFFECTS, POSTER_SIDES, POSTER_TEMPLATES, sideKey,
} from '@/composables/posterDefaults'
echarts.use([PieChart, TooltipComponent, LegendComponent, CanvasRenderer])
@@ -888,22 +948,27 @@ let regionChart = null
const cfg = reactive(defaultConfig())
const uploadCfg = reactive(defaultUploadConfig())
const posterSideTab = ref('male')
const posterSideTab = ref('1')
const posterBundle = reactive(defaultPosterBundle())
const posterCfg = computed(() => posterBundle[posterSideTab.value] || posterBundle.male)
const posterCfg = computed(() => posterBundle[sideKey(posterSideTab.value)] || posterBundle['1'])
const posterLinesText = computed({
get: () => {
const lines = posterCfg.value?.lines
return Array.isArray(lines) ? lines.join('\n') : ''
},
set: (v) => {
const side = posterSideTab.value
const side = sideKey(posterSideTab.value)
if (!posterBundle[side]) posterBundle[side] = normalizePosterConfig(null, side)
posterBundle[side].lines = String(v || '')
.split('\n')
.map((s) => s.trimEnd())
},
})
function setPosterHero(url) {
const side = sideKey(posterSideTab.value)
if (!posterBundle[side]) posterBundle[side] = normalizePosterConfig(null, side)
posterBundle[side].heroImg = url
}
const currentPhotoIndex = computed(() => Math.min(Number(activePhotoTab.value) || 0, Math.max(cfg.photoPages.length - 1, 0)))
const isConfigTab = computed(() => CONFIG_SECTIONS.includes(activeTab.value))
const visitPagination = computed(() => ({
@@ -1324,8 +1389,8 @@ async function loadPosterConfig() {
try {
const res = await getPosterConfig()
const bundle = normalizePosterBundle(res.data || {})
posterBundle.male = bundle.male
posterBundle.female = bundle.female
posterBundle['1'] = bundle['1']
posterBundle['2'] = bundle['2']
} catch (e) {
message.error(e?.message || '海报配置加载失败')
} finally {
@@ -1339,8 +1404,8 @@ async function onSavePosterConfig() {
const payload = normalizePosterBundle(posterBundle)
const res = await savePosterConfig(payload)
const bundle = normalizePosterBundle(res.data || payload)
posterBundle.male = bundle.male
posterBundle.female = bundle.female
posterBundle['1'] = bundle['1']
posterBundle['2'] = bundle['2']
message.success('海报配置已保存')
} catch (e) {
message.error(e?.message || '海报配置保存失败')
@@ -1547,8 +1612,9 @@ async function onTabActivate(tab) {
}
function openPreview() { window.open('/', '_blank') }
function openPosterPreview(side = 'male') {
const meta = POSTER_SIDES.find((s) => s.key === side) || POSTER_SIDES[0]
function openPosterPreview(side = 1) {
const s = Number(sideKey(side))
const meta = POSTER_SIDES.find((x) => x.key === s) || POSTER_SIDES[0]
window.open(meta.route, '_blank')
}