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 08:57:18 +08:00
parent 9efc2b21d6
commit 38558b0b43
5 changed files with 661 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
hunliji-api/router/routers.go
View File

@@ -582,6 +582,14 @@ func collectAlbumImages(configData string) []string {
seen[src] = true
images = append(images, src)
}
// 相册灯箱优先原图；无原图时再退缩放展示图
addPrefer := func(primary interface{}, fallback interface{}) {
if src, ok := primary.(string); ok && strings.TrimSpace(src) != "" {
add(primary)
return
}
add(fallback)
}
add(raw["heroImg"])
add(raw["endImg"])
if pages, ok := raw["photoPages"].([]interface{}); ok {
@@ -590,12 +598,23 @@ func collectAlbumImages(configData string) []string {
if !ok {
continue
}
add(page["img1"])
add(page["img2"])
if pageImages, ok := page["images"].([]interface{}); ok {
for _, src := range pageImages {
add(src)
addPrefer(page["img1"], page["img1Resized"])
addPrefer(page["img2"], page["img2Resized"])
pageImages, _ := page["images"].([]interface{})
pageResized, _ := page["imagesResized"].([]interface{})
n := len(pageImages)
if len(pageResized) > n {
n = len(pageResized)
}
for i := 0; i < n; i++ {
var primary, fallback interface{}
if i < len(pageImages) {
primary = pageImages[i]
}
if i < len(pageResized) {
fallback = pageResized[i]
}
addPrefer(primary, fallback)
}
}
}

102
vite-tailwindcss/src/components/PhotoGallery.vue
View File

@@ -11,7 +11,7 @@
<div v-if="page.type === 'single'" v-reveal="{ variant: 'scale', delay: 100 }"
class="w-full mx-auto mt-6" :class="singleWrapClass" :style="singleWrapStyle">
<div :class="singleFrameClass">
<img :src="page.img1" class="preview-img" @click.stop="previewImage(page.img1)" />
<img :src="displayImg1" class="preview-img" @click.stop="previewImage(originalImg1)" />
</div>
</div>
@@ -32,10 +32,10 @@
:class="frameClass"
>
<img
:src="page.img1"
:src="displayImg1"
class="preview-img overlap-img"
decoding="async"
@click.stop="previewImage(page.img1)"
@click.stop="previewImage(originalImg1)"
/>
</div>
</div>
@@ -50,10 +50,10 @@
:class="frameClass"
>
<img
:src="page.img2"
:src="displayImg2"
class="preview-img overlap-img"
decoding="async"
@click.stop="previewImage(page.img2)"
@click.stop="previewImage(originalImg2)"
/>
</div>
</div>
@@ -77,10 +77,10 @@
>
<img
ref="olfsLargeImgRef"
:src="page.images[0]"
:src="displayAt(0)"
class="preview-img olfs-img"
decoding="async"
@click.stop="previewImage(page.images[0])"
@click.stop="previewImage(originalAt(0))"
/>
</div>
</div>
@@ -97,19 +97,19 @@
:class="frameClass"
>
<img
:src="page.images[i]"
:src="displayAt(i)"
class="preview-img olfs-img"
decoding="async"
@click.stop="previewImage(page.images[i])"
@click.stop="previewImage(originalAt(i))"
/>
</div>
</div>
</div>
<!-- 九宫格：串行挂载 + immediate（安卓 activate；iOS 近视口 IO） -->
<!-- 九宫格：近视口 IO 串行挂载（双端不停滚） -->
<div v-else-if="page.type === 'nine-grid'" ref="multiRootRef" class="nine-grid grid grid-cols-3 gap-1.5 px-4 mt-6">
<div
v-for="(img, imgIdx) in (page.images || [])"
v-for="(_, imgIdx) in (page.images || [])"
:key="imgIdx"
class="aspect-square relative nine-grid-slot"
:class="{ 'nine-grid-placeholder': imgIdx >= shownCount }"
@@ -121,10 +121,10 @@
:class="frameClass"
>
<img
:src="img"
:src="displayAt(imgIdx)"
class="nine-grid-img preview-img"
decoding="async"
@click.stop="previewImage(img)"
@click.stop="previewImage(originalAt(imgIdx))"
/>
</div>
<div
@@ -133,11 +133,11 @@
:class="frameClass"
>
<img
:src="img"
:src="displayAt(imgIdx)"
class="nine-grid-img preview-img"
loading="eager"
decoding="async"
@click.stop="previewImage(img)"
@click.stop="previewImage(originalAt(imgIdx))"
/>
</div>
</div>
@@ -146,7 +146,7 @@
<!-- 瀑布流：固定槽位 + 串行挂载 -->
<div v-else-if="page.type === 'masonry'" ref="multiRootRef" class="g-masonry mt-6 px-1">
<div
v-for="(img, imgIdx) in (page.images || [])"
v-for="(_, imgIdx) in (page.images || [])"
:key="imgIdx"
class="g-masonry-slot"
:class="{ 'g-masonry-placeholder': imgIdx >= shownCount }"
@@ -157,7 +157,7 @@
class="g-masonry-item"
:class="frameClass"
>
<img :src="img" class="preview-img" decoding="async" @click.stop="previewImage(img)" />
<img :src="displayAt(imgIdx)" class="preview-img" decoding="async" @click.stop="previewImage(originalAt(imgIdx))" />
</div>
</div>
</div>
@@ -165,14 +165,14 @@
<!-- 轮播滑动 -->
<div v-else-if="page.type === 'carousel'" class="relative mt-6">
<div ref="trackRef" class="g-carousel-track no-scrollbar" @scroll="onScroll">
<div v-for="(img, imgIdx) in page.images" :key="imgIdx" class="g-carousel-slide" :class="frameClass">
<img :src="img" class="preview-img" @click.stop="previewImage(img)" />
<div v-for="(_, imgIdx) in page.images" :key="imgIdx" class="g-carousel-slide" :class="frameClass">
<img :src="displayAt(imgIdx)" class="preview-img" @click.stop="previewImage(originalAt(imgIdx))" />
</div>
</div>
<button class="g-arrow g-prev" @click="goTo(index - 1)" aria-label="上一张">‹</button>
<button class="g-arrow g-next" @click="goTo(index + 1)" aria-label="下一张">›</button>
<div class="g-dots">
<button v-for="(img, imgIdx) in page.images" :key="imgIdx"
<button v-for="(_, imgIdx) in page.images" :key="imgIdx"
class="g-dot" :class="{ active: imgIdx === index }" @click="goTo(imgIdx)"></button>
</div>
</div>
@@ -180,7 +180,7 @@
<!-- 拍立得：固定槽位 + 串行挂载 -->
<div v-else-if="page.type === 'polaroid'" ref="multiRootRef" class="g-polaroid mt-6">
<div
v-for="(img, imgIdx) in (page.images || [])"
v-for="(_, imgIdx) in (page.images || [])"
:key="imgIdx"
class="g-polaroid-slot"
:class="{ 'g-polaroid-placeholder': imgIdx >= shownCount }"
@@ -192,7 +192,7 @@
class="g-polaroid-item"
:style="{ transform: polaroidTransform(imgIdx) }"
>
<img :src="img" class="preview-img" decoding="async" @click.stop="previewImage(img)" />
<img :src="displayAt(imgIdx)" class="preview-img" decoding="async" @click.stop="previewImage(originalAt(imgIdx))" />
</div>
</div>
</div>
@@ -220,7 +220,7 @@ const OLFS_SETTLE_MS = 320
const OLFS_DECODE_TIMEOUT_ANDROID_MS = 1200
const OLFS_DECODE_TIMEOUT_IOS_MS = 400
/** 安卓九宫格/一大五小：父级 activate+停滚；其余自观测不停滚 */
/** 仅用于 OLFS 是否跳过强制 decode */
const isIOSClient = (() => {
if (typeof navigator === 'undefined') return false
const ua = navigator.userAgent || ''
@@ -230,18 +230,16 @@ const isIOSClient = (() => {
return false
})()
const HOLD_ACTIVATE_TYPES = new Set(['nine-grid', 'one-large-five-small'])
/** 自观测串行：瀑布/拍立得双端；九宫格/一大五小仅 iOS（安卓走 activate） */
const SEQUENTIAL_SELF_TYPES = new Set(
isIOSClient
? ['masonry', 'polaroid', 'nine-grid', 'one-large-five-small']
: ['masonry', 'polaroid']
)
/** 双端均不停滚：近视口 IO 串行挂载 */
const SEQUENTIAL_SELF_TYPES = new Set([
'masonry',
'polaroid',
'nine-grid',
'one-large-five-small',
])
const props = defineProps({
page: { type: Object, required: true },
/** 重型版式：父级停滚后设为 true 才串行挂载（安卓） */
activate: { type: Boolean, default: false },
/** 九宫格：开启串行 v-reveal；关闭则一次展示 */
nineGridAnimate: { type: Boolean, default: false },
})
@@ -262,6 +260,16 @@ let overlapSecondTimer = null
const seq = createSequentialMount()
const frameClass = computed(() => borderClass(props.page.borderStyle))
/** 展示：缩放图优先；预览：原图优先 */
const pickDisplay = (original, resized) => resized || original || ''
const pickOriginal = (original, resized) => original || resized || ''
const displayImg1 = computed(() => pickDisplay(props.page?.img1, props.page?.img1Resized))
const displayImg2 = computed(() => pickDisplay(props.page?.img2, props.page?.img2Resized))
const originalImg1 = computed(() => pickOriginal(props.page?.img1, props.page?.img1Resized))
const originalImg2 = computed(() => pickOriginal(props.page?.img2, props.page?.img2Resized))
const displayAt = (i) => pickDisplay(props.page?.images?.[i], props.page?.imagesResized?.[i])
const originalAt = (i) => pickOriginal(props.page?.images?.[i], props.page?.imagesResized?.[i])
const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
const clearOverlapSecondTimer = () => {
@@ -294,10 +302,12 @@ const emitReady = () => {
emit('ready')
}
/** 关闭九宫格动画时提前暖缓存 */
/** 关闭九宫格动画时提前暖缓存（优先展示用缩放图） */
const preloadNineGridImages = () => {
if (preloadStarted || props.nineGridAnimate || props.page?.type !== 'nine-grid') return
const urls = (props.page.images || []).filter(Boolean)
const urls = (props.page.images || [])
.map((_, i) => displayAt(i))
.filter(Boolean)
if (!urls.length) return
preloadStarted = true
for (const url of urls) {
@@ -481,22 +491,19 @@ const bindByType = async () => {
}
if (SEQUENTIAL_SELF_TYPES.has(type)) {
await bindMultiObserver()
} else if (props.activate && HOLD_ACTIVATE_TYPES.has(type)) {
await startSequentialMount()
}
}
watch(
() => props.activate && HOLD_ACTIVATE_TYPES.has(props.page?.type),
async (on) => {
if (!on) return
await startSequentialMount()
},
{ flush: 'post' }
)
watch(
() => [props.page?.type, props.page?.images, props.page?.img1, props.page?.img2],
() => [
props.page?.type,
props.page?.images,
props.page?.imagesResized,
props.page?.img1,
props.page?.img2,
props.page?.img1Resized,
props.page?.img2Resized,
],
async () => {
seq.cancel()
olfsToken += 1
@@ -589,7 +596,8 @@ function onScroll() {
}
function previewImage(src) {
if (src) emit('preview-image', src)
const url = typeof src === 'string' ? src.trim() : String(src?.value || src || '').trim()
if (url && url !== '[object Object]') emit('preview-image', url)
}
const polaroidAngles = [-5, 4, -3, 6, -4, 3, -2, 5]

290
vite-tailwindcss/src/composables/resizeImage.js Normal file
View File

@@ -0,0 +1,290 @@
/**
* 画廊槽位等比缩放（不裁切）：装入 maxWidth×maxHeight 边界框后导出 jpeg。
*/
const JPEG_QUALITY = 0.85
const JPEG_MIME = 'image/jpeg'
export function loadImage(url) {
return new Promise((resolve, reject) => {
if (!url || typeof url !== 'string') {
reject(new Error('图片地址无效'))
return
}
const img = new Image()
img.crossOrigin = 'anonymous'
img.onload = () => resolve(img)
img.onerror = () => reject(new Error('图片加载失败（可能跨域未开 CORS，请使用本站或已配置 CORS 的图）'))
img.src = url
})
}
/**
* 等比缩小进边界框，只缩小不放大；输出尺寸可能小于 max。
* @returns {Promise<{ blob: Blob, originalWidth: number, originalHeight: number, width: number, height: number }>}
*/
export function resizeToFitBlob(img, {
maxWidth,
maxHeight,
mime = JPEG_MIME,
quality = JPEG_QUALITY,
} = {}) {
const mw = Math.max(1, Number(maxWidth) || 1)
const mh = Math.max(1, Number(maxHeight) || 1)
const sw = img.naturalWidth || img.width
const sh = img.naturalHeight || img.height
if (!sw || !sh) return Promise.reject(new Error('无法读取图片尺寸'))
const scale = Math.min(mw / sw, mh / sh, 1)
const dw = Math.max(1, Math.round(sw * scale))
const dh = Math.max(1, Math.round(sh * scale))
const canvas = document.createElement('canvas')
canvas.width = dw
canvas.height = dh
const ctx = canvas.getContext('2d')
if (!ctx) return Promise.reject(new Error('Canvas 不可用'))
ctx.drawImage(img, 0, 0, dw, dh)
return new Promise((resolve, reject) => {
canvas.toBlob(
(blob) => {
if (!blob) reject(new Error('导出失败'))
else {
resolve({
blob,
originalWidth: sw,
originalHeight: sh,
width: dw,
height: dh,
})
}
},
mime,
quality,
)
})
}
/** 文件字节 → 可读大小 */
export function formatBytes(n) {
const bytes = Number(n)
if (!Number.isFinite(bytes) || bytes < 0) return '?'
if (bytes < 1024) return `${Math.round(bytes)} B`
if (bytes < 1024 * 1024) {
const kb = bytes / 1024
return `${kb < 10 ? kb.toFixed(1) : Math.round(kb)} KB`
}
const mb = bytes / (1024 * 1024)
return `${mb < 10 ? mb.toFixed(2) : mb.toFixed(1)} MB`
}
/** 后台展示用：像素 + 文件大小两行对比 */
export function formatResizedMeta({
originalWidth,
originalHeight,
width,
height,
originalBytes,
resizedBytes,
}) {
const dim = `（${originalWidth}×${originalHeight}）→（${width}×${height}）`
const file = `（${formatBytes(originalBytes)}）→（${formatBytes(resizedBytes)}）`
return `${dim}\n${file}`
}
/** meta 是否已含文件大小（旧数据只有像素行） */
export function metaHasFileSize(meta) {
return typeof meta === 'string' && /\b(\d+(\.\d+)?\s?(B|KB|MB|GB))\b/i.test(meta)
}
/** 仅读取 natural 尺寸（不设 crossOrigin，无 CORS 也能拿宽高） */
export function loadImageSize(url) {
return new Promise((resolve, reject) => {
if (!url || typeof url !== 'string') {
reject(new Error('图片地址无效'))
return
}
const img = new Image()
img.onload = () => {
const width = img.naturalWidth || img.width
const height = img.naturalHeight || img.height
if (!width || !height) reject(new Error('无法读取图片尺寸'))
else resolve({ width, height })
}
img.onerror = () => reject(new Error('图片加载失败'))
img.src = url
})
}
/** 读取远程文件字节数：优先 HEAD Content-Length，失败再 GET */
export async function fetchFileBytes(url) {
if (!url || typeof url !== 'string') throw new Error('图片地址无效')
try {
const head = await fetch(url, { method: 'HEAD', mode: 'cors' })
if (head.ok) {
const len = head.headers.get('content-length')
if (len && Number(len) > 0) return Number(len)
}
} catch { /* fall through */ }
const res = await fetch(url, { mode: 'cors', cache: 'force-cache' })
if (!res.ok) throw new Error('读取文件大小失败')
const blob = await res.blob()
return blob.size
}
/** 根据原图/展示图 URL 探测像素+文件大小文案（用于旧数据补全 meta） */
export async function probeResizedMeta(originalUrl, resizedUrl) {
const [o, r, originalBytes, resizedBytes] = await Promise.all([
loadImageSize(originalUrl),
loadImageSize(resizedUrl),
fetchFileBytes(originalUrl).catch(() => -1),
fetchFileBytes(resizedUrl).catch(() => -1),
])
return formatResizedMeta({
originalWidth: o.width,
originalHeight: o.height,
width: r.width,
height: r.height,
originalBytes,
resizedBytes,
})
}
export function blobToUploadFile(blob, name = 'resized.jpg') {
return new File([blob], name, { type: blob.type || JPEG_MIME })
}
/** 按版式返回槽位缩放规格 */
export function getSlotResizeSpecs(page) {
if (!page?.type) return []
if (page.type === 'single') {
const full = page.singleWidth === 'full'
const maxWidth = full ? 1080 : 800
const maxHeight = full ? 1350 : 1000
return [{
key: 'img1',
maxWidth,
maxHeight,
getOriginal: () => page.img1 || '',
setResized: (url, meta = '') => {
page.img1Resized = url
page.img1ResizedMeta = meta || ''
},
clearResized: () => {
page.img1Resized = ''
page.img1ResizedMeta = ''
},
hasResized: () => !!page.img1Resized,
}]
}
if (page.type === 'overlap') {
const box = { maxWidth: 900, maxHeight: 1200 }
return [
{
key: 'img1',
...box,
getOriginal: () => page.img1 || '',
setResized: (url, meta = '') => {
page.img1Resized = url
page.img1ResizedMeta = meta || ''
},
clearResized: () => {
page.img1Resized = ''
page.img1ResizedMeta = ''
},
hasResized: () => !!page.img1Resized,
},
{
key: 'img2',
...box,
getOriginal: () => page.img2 || '',
setResized: (url, meta = '') => {
page.img2Resized = url
page.img2ResizedMeta = meta || ''
},
clearResized: () => {
page.img2Resized = ''
page.img2ResizedMeta = ''
},
hasResized: () => !!page.img2Resized,
},
]
}
const list = Array.isArray(page.images) ? page.images : []
const ensureResizedArr = () => {
if (!Array.isArray(page.imagesResized)) page.imagesResized = []
if (!Array.isArray(page.imagesResizedMeta)) page.imagesResizedMeta = []
while (page.imagesResized.length < list.length) page.imagesResized.push('')
while (page.imagesResizedMeta.length < list.length) page.imagesResizedMeta.push('')
if (page.imagesResized.length > list.length) page.imagesResized.length = list.length
if (page.imagesResizedMeta.length > list.length) page.imagesResizedMeta.length = list.length
}
ensureResizedArr()
let boxForIndex = () => ({ maxWidth: 800, maxHeight: 1000 })
if (page.type === 'nine-grid') {
boxForIndex = () => ({ maxWidth: 600, maxHeight: 600 })
} else if (page.type === 'one-large-five-small') {
boxForIndex = (i) => (i === 0
? { maxWidth: 1200, maxHeight: 1200 }
: { maxWidth: 600, maxHeight: 600 })
} else if (page.type === 'masonry') {
boxForIndex = () => ({ maxWidth: 800, maxHeight: 1067 })
} else if (page.type === 'carousel') {
boxForIndex = () => ({ maxWidth: 1200, maxHeight: 780 })
} else if (page.type === 'polaroid') {
boxForIndex = () => ({ maxWidth: 800, maxHeight: 1000 })
}
return list.map((_, i) => {
const box = boxForIndex(i)
return {
key: `images[${i}]`,
...box,
getOriginal: () => page.images[i] || '',
setResized: (url, meta = '') => {
ensureResizedArr()
page.imagesResized[i] = url
page.imagesResizedMeta[i] = meta || ''
},
clearResized: () => {
ensureResizedArr()
page.imagesResized[i] = ''
page.imagesResizedMeta[i] = ''
},
hasResized: () => !!(page.imagesResized && page.imagesResized[i]),
}
})
}
export async function resizeSlotToFile(originalUrl, maxWidth, maxHeight, fileName) {
const [img, originalBytes] = await Promise.all([
loadImage(originalUrl),
fetchFileBytes(originalUrl).catch(() => -1),
])
const { blob, originalWidth, originalHeight, width, height } = await resizeToFitBlob(img, {
maxWidth,
maxHeight,
})
return {
file: blobToUploadFile(blob, fileName || 'resized.jpg'),
meta: formatResizedMeta({
originalWidth,
originalHeight,
width,
height,
originalBytes,
resizedBytes: blob.size,
}),
originalWidth,
originalHeight,
width,
height,
originalBytes,
resizedBytes: blob.size,
}
}

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

@@ -505,20 +505,58 @@
<a-textarea v-model:value="page.desc" :rows="2" />
</a-form-item>
<!-- 图片上传区：按版式渲染 -->
<div class="flex flex-wrap items-center justify-between gap-2 mt-2 mb-2">
<div class="text-[11px] text-[#8A8680]">
原图用于预览；展示图为等比缩放后的体积（不裁切）。
<span v-if="resizeProgress" class="text-[#a88c6b] ml-1">{{ resizeProgress }}</span>
</div>
<a-button
size="small"
type="primary"
class="!bg-[#a88c6b] hover:!bg-[#967b5c] !border-[#a88c6b]"
:loading="resizingPage"
:disabled="uploading || !pageHasOriginal(page)"
@click="batchResizeAndUpload(page)"
>
<i class="fa-solid fa-compress mr-1"></i>一键缩放并上传
</a-button>
</div>
<div class="flex flex-wrap gap-3 mt-2">
<template v-if="page.type==='single'">
<image-field v-model="page.img1" @pick="openUpload(u => page.img1 = u)" :uploading="uploading" />
<div class="relative w-[96px]">
<image-field v-model="page.img1" @pick="openUpload(u => setOriginalAndClearResized(page, 'img1', u))" :uploading="uploading" />
<div v-if="page.img1Resized" class="text-center mt-1">
<div class="text-[9px] text-[#a88c6b]">展示已生成</div>
<div v-if="page.img1ResizedMeta" class="resized-meta">{{ page.img1ResizedMeta }}</div>
</div>
</div>
</template>
<template v-else-if="page.type==='overlap'">
<image-field v-model="page.img1" label="图一" @pick="openUpload(u => page.img1 = u)" :uploading="uploading" />
<image-field v-model="page.img2" label="图二" @pick="openUpload(u => page.img2 = u)" :uploading="uploading" />
<div class="relative w-[96px]">
<image-field v-model="page.img1" label="图一" @pick="openUpload(u => setOriginalAndClearResized(page, 'img1', u))" :uploading="uploading" />
<div v-if="page.img1Resized" class="text-center mt-1">
<div class="text-[9px] text-[#a88c6b]">展示已生成</div>
<div v-if="page.img1ResizedMeta" class="resized-meta">{{ page.img1ResizedMeta }}</div>
</div>
</div>
<div class="relative w-[96px]">
<image-field v-model="page.img2" label="图二" @pick="openUpload(u => setOriginalAndClearResized(page, 'img2', u))" :uploading="uploading" />
<div v-if="page.img2Resized" class="text-center mt-1">
<div class="text-[9px] text-[#a88c6b]">展示已生成</div>
<div v-if="page.img2ResizedMeta" class="resized-meta">{{ page.img2ResizedMeta }}</div>
</div>
</div>
</template>
<template v-else>
<div v-for="(img, iidx) in page.images" :key="iidx" class="relative">
<div v-for="(img, iidx) in page.images" :key="iidx" class="relative w-[96px]">
<image-field v-model="page.images[iidx]"
:label="`图${iidx+1}`"
@pick="openUpload(u => page.images[iidx] = u)"
@pick="openUpload(u => setOriginalImageAt(page, iidx, u))"
:uploading="uploading" />
<div v-if="page.imagesResized?.[iidx]" class="text-center mt-1">
<div class="text-[9px] text-[#a88c6b]">展示已生成</div>
<div v-if="page.imagesResizedMeta?.[iidx]" class="resized-meta">{{ page.imagesResizedMeta[iidx] }}</div>
</div>
<button v-if="isFlexible(page.type) && page.images.length > 1"
class="absolute -top-2 -right-2 w-5 h-5 rounded-full bg-[#a88c6b] text-white text-[10px] leading-none flex items-center justify-center shadow"
@click="removeImage(page, iidx)" title="移除该图">✕</button>
@@ -698,6 +736,7 @@ import { useAdminStore } from '@/stores/admin'
import ImageField from '@/components/ImageField.vue'
import { BORDER_STYLES, borderClass } from '@/composables/borderStyles'
import { resolveDanmakuSwatch } from '@/utils/danmakuColors'
import { getSlotResizeSpecs, resizeSlotToFile, probeResizedMeta, metaHasFileSize } from '@/composables/resizeImage'
echarts.use([PieChart, TooltipComponent, LegendComponent, CanvasRenderer])
@@ -732,6 +771,8 @@ const activeTab = ref(readStoredTab())
const activePhotoTab = ref('0')
const saving = ref(false)
const uploading = ref(false)
const resizingPage = ref(false)
const resizeProgress = ref('')
const uploadConfigSaving = ref(false)
const tabLoading = ref(false)
const rsvpLoading = ref(false)
@@ -850,10 +891,42 @@ function onHeightFieldCustomVh(target, key, val) {
target[key] = (val || 100) + 'vh'
}
function syncImagesResized(p) {
if (!Array.isArray(p.images)) {
delete p.imagesResized
delete p.imagesResizedMeta
return
}
if (!Array.isArray(p.imagesResized)) p.imagesResized = []
if (!Array.isArray(p.imagesResizedMeta)) p.imagesResizedMeta = []
while (p.imagesResized.length < p.images.length) p.imagesResized.push('')
while (p.imagesResizedMeta.length < p.images.length) p.imagesResizedMeta.push('')
if (p.imagesResized.length > p.images.length) p.imagesResized.length = p.images.length
if (p.imagesResizedMeta.length > p.images.length) p.imagesResizedMeta.length = p.images.length
}
function ensurePageShape(p) {
if (p.type === 'single') { p.img1 = p.img1 || ''; delete p.img2; delete p.images }
else if (p.type === 'overlap') { p.img1 = p.img1 || ''; p.img2 = p.img2 || ''; delete p.images }
else {
if (p.type === 'single') {
p.img1 = p.img1 || ''
p.img1Resized = p.img1Resized || ''
p.img1ResizedMeta = p.img1ResizedMeta || ''
delete p.img2
delete p.img2Resized
delete p.img2ResizedMeta
delete p.images
delete p.imagesResized
delete p.imagesResizedMeta
} else if (p.type === 'overlap') {
p.img1 = p.img1 || ''
p.img2 = p.img2 || ''
p.img1Resized = p.img1Resized || ''
p.img2Resized = p.img2Resized || ''
p.img1ResizedMeta = p.img1ResizedMeta || ''
p.img2ResizedMeta = p.img2ResizedMeta || ''
delete p.images
delete p.imagesResized
delete p.imagesResizedMeta
} else {
// 固定数量版式：一大五小(6) / 九宫格(9)；柔性版式：瀑布流/轮播/拍立得，仅首次补齐
const fixed = { 'one-large-five-small': 6, 'nine-grid': 9, 'masonry': 6, 'carousel': 5, 'polaroid': 6 }
const need = fixed[p.type] || 6
@@ -863,9 +936,15 @@ function ensurePageShape(p) {
while (p.images.length < need) p.images.push('')
if (p.images.length > need) p.images.length = need
}
delete p.img1; delete p.img2
syncImagesResized(p)
delete p.img1
delete p.img2
delete p.img1Resized
delete p.img2Resized
delete p.img1ResizedMeta
delete p.img2ResizedMeta
}
p.title = p.title || ''; p.subtitle = p.subtitle || ''; p.desc = p.desc || ''
p.title = p.title || ''; p.subtitle = p.subtitle || ''; p.desc = p.desc || ''
p.height = p.height || '100vh'
p.borderStyle = p.borderStyle || 'mat'
// 单图宽度设置（仅 single 版式使用，逐页配置）
@@ -878,13 +957,118 @@ function ensurePageShape(p) {
function isFlexible(type) {
return ['masonry', 'carousel', 'polaroid'].includes(type)
}
function addImage(page) { if (!Array.isArray(page.images)) page.images = []; page.images.push('') }
function removeImage(page, i) { if (page.images.length > 1) page.images.splice(i, 1) }
function addImage(page) {
if (!Array.isArray(page.images)) page.images = []
page.images.push('')
syncImagesResized(page)
}
function removeImage(page, i) {
if (page.images.length > 1) {
page.images.splice(i, 1)
if (Array.isArray(page.imagesResized)) page.imagesResized.splice(i, 1)
if (Array.isArray(page.imagesResizedMeta)) page.imagesResizedMeta.splice(i, 1)
syncImagesResized(page)
}
}
// 图片排序：前移(-1) / 后移(+1)
function moveImage(page, i, dir) {
const j = i + dir
if (!Array.isArray(page.images) || j < 0 || j >= page.images.length) return
const t = page.images[i]; page.images[i] = page.images[j]; page.images[j] = t
syncImagesResized(page)
if (Array.isArray(page.imagesResized)) {
const r = page.imagesResized[i]
page.imagesResized[i] = page.imagesResized[j]
page.imagesResized[j] = r
}
if (Array.isArray(page.imagesResizedMeta)) {
const m = page.imagesResizedMeta[i]
page.imagesResizedMeta[i] = page.imagesResizedMeta[j]
page.imagesResizedMeta[j] = m
}
}
function pageHasOriginal(page) {
return getSlotResizeSpecs(page).some((s) => !!s.getOriginal())
}
function setOriginalAndClearResized(page, key, url) {
page[key] = url
page[`${key}Resized`] = ''
page[`${key}ResizedMeta`] = ''
}
function setOriginalImageAt(page, iidx, url) {
page.images[iidx] = url
syncImagesResized(page)
page.imagesResized[iidx] = ''
page.imagesResizedMeta[iidx] = ''
}
/** 缺 meta，或只有像素没有文件大小时，自动探测并补全 */
async function fillMissingResizedMeta(page) {
if (!page) return
if (page.type === 'single' || page.type === 'overlap') {
const keys = page.type === 'single' ? ['img1'] : ['img1', 'img2']
await Promise.all(keys.map(async (key) => {
const original = page[key]
const resized = page[`${key}Resized`]
const metaKey = `${key}ResizedMeta`
if (!resized || !original || metaHasFileSize(page[metaKey])) return
try {
page[metaKey] = await probeResizedMeta(original, resized)
} catch { /* 跨域/失效图忽略 */ }
}))
return
}
if (!Array.isArray(page.images)) return
syncImagesResized(page)
await Promise.all(page.images.map(async (original, i) => {
const resized = page.imagesResized[i]
if (!resized || !original || metaHasFileSize(page.imagesResizedMeta[i])) return
try {
page.imagesResizedMeta[i] = await probeResizedMeta(original, resized)
} catch { /* ignore */ }
}))
}
async function batchResizeAndUpload(page) {
const slots = getSlotResizeSpecs(page).filter((s) => !!s.getOriginal())
if (!slots.length) {
message.warning('请先上传原图')
return
}
resizingPage.value = true
resizeProgress.value = `0/${slots.length}`
let ok = 0
let fail = 0
try {
for (let i = 0; i < slots.length; i += 1) {
const slot = slots[i]
resizeProgress.value = `${i + 1}/${slots.length}`
try {
const { file, meta } = await resizeSlotToFile(
slot.getOriginal(),
slot.maxWidth,
slot.maxHeight,
`resized-${page.type}-${slot.key}-${Date.now()}.jpg`,
)
const res = await uploadImage(file)
if (!res?.url) throw new Error('上传无返回地址')
slot.setResized(res.url, meta)
ok += 1
} catch (err) {
fail += 1
console.warn('[resize]', slot.key, err)
}
}
if (fail === 0) message.success(`已生成 ${ok} 张展示图`)
else if (ok > 0) message.warning(`成功 ${ok} 张，失败 ${fail} 张（常见原因：跨域无法读取原图）`)
else message.error('缩放上传全部失败，请确认原图可跨域读取')
} finally {
resizingPage.value = false
resizeProgress.value = ''
}
}
// 相册页操作
@@ -1063,7 +1247,13 @@ function applySectionData(section, loaded) {
if (typeof loaded.nineGridAnimate !== 'boolean') loaded.nineGridAnimate = false
}
Object.assign(cfg, loaded)
if (section === 'photos') setActivePhotoIndex(currentPhotoIndex.value)
if (section === 'photos') {
setActivePhotoIndex(currentPhotoIndex.value)
nextTick(() => {
const page = cfg.photoPages[currentPhotoIndex.value]
if (page) fillMissingResizedMeta(page)
})
}
}
async function loadConfigSection(section) {
@@ -1281,6 +1471,16 @@ watch(activeTab, (tab) => {
onTabActivate(tab)
}, { immediate: true })
// 进入相册页 / 切换页签时，为缺 meta 的展示图自动探测尺寸
watch(
() => [activeTab.value, currentPhotoIndex.value],
([tab]) => {
if (tab !== 'photos') return
const page = cfg.photoPages[currentPhotoIndex.value]
if (page) fillMissingResizedMeta(page)
},
)
const onResize = () => { regionChart?.resize() }
onMounted(() => {
@@ -1294,6 +1494,14 @@ onUnmounted(() => {
</script>
<style scoped>
.resized-meta {
margin-top: 2px;
font-size: 9px;
line-height: 1.35;
color: #8A8680;
white-space: pre-line;
word-break: break-all;
}
.admin-tabs :deep(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) { color: #a88c6b; }
.admin-tabs :deep(.ant-tabs-ink-bar) { background: #a88c6b; }
.admin-tabs :deep(.ant-tabs-tab:hover .ant-tabs-tab-btn) { color: #967b5c; }

164
vite-tailwindcss/src/views/index/index.vue
View File

@@ -309,18 +309,16 @@
<div v-for="(page, pIdx) in data.photoPages" :key="pIdx"
class="page-section p-6 relative"
:class="data.scrollMode === 'snap' ? 'snap-start' : ''"
:style="pageHeightStyle(page)"
:data-gallery-hold="isHoldGalleryType(page.type) ? String(pIdx) : undefined">
:style="pageHeightStyle(page)">
<div class="absolute inset-0 bg-white/40 -z-10"></div>
<div class="absolute top-0 left-0 w-24 h-24 border-l-[0.5px] border-t-[0.5px] border-[#a88c6b]/30 m-6 pointer-events-none z-0"></div>
<div class="absolute bottom-0 right-0 w-24 h-24 border-r-[0.5px] border-b-[0.5px] border-[#a88c6b]/30 m-6 pointer-events-none z-0"></div>
<div class="w-full h-full flex flex-col justify-center py-6 relative z-10">
<PhotoGallery
:page="page"
:activate="isHoldGalleryType(page.type) ? !!galleryActivate[pIdx] : false"
:nine-grid-animate="!!data.nineGridAnimate"
@preview-image="openImagePreview"
@ready="onGalleryReady(pIdx)"
@ready="onGalleryReady"
/>
</div>
</div>
@@ -611,9 +609,10 @@
</div>
</div>
<!-- 注意：不可对子 a-image 设 preview=false，否则不会注册进 Group，灯箱 src 为空 -->
<a-image-preview-group :preview="albumPreviewOptions">
<div class="album-preview-registry" aria-hidden="true">
<a-image v-for="(src, idx) in albumPreviewImages" :key="`${src}-${idx}`" :src="src" :preview="false" />
<a-image v-for="(src, idx) in albumPreviewImages" :key="`${src}-${idx}`" :src="src" />
</div>
</a-image-preview-group>
@@ -748,13 +747,6 @@ const likeBusy = ref(false)
let likePulseTimer = null
const previewVisible = ref(false), previewIndex = ref(0), albumLoaded = ref(false)
const albumPreviewImages = ref([])
/** 九宫格 / 一大五小：安卓进视口中线后停滚再串行加载
* 错落/瀑布/拍立得不停滚，由组件内 IO 分步挂载
* iOS 全部跳过停滚，近视口 IO 串行（保留滚动连续性） */
const HOLD_GALLERY_TYPES = new Set(['nine-grid', 'one-large-five-small'])
const isHoldGalleryType = (type) => !isIOS && HOLD_GALLERY_TYPES.has(type)
const galleryActivate = reactive({})
const galleryHold = ref(false)
const rsvpForm = reactive({ name: '', guest_count: '1', wishes: '' })
const blessingForm = reactive({ name: '', content: '', color: DEFAULT_DANMAKU_COLOR })
const danmakuColorOptions = DANMAKU_COLORS
@@ -793,25 +785,44 @@ const scheduleBlessingAutoClose = () => {
}
let rafId = null, snapTimer = null, pauseTimer = null, introTimer = null, freeTimer = null, animId = null, scrollStartTimer = null, bottomReturnTimer = null
let freeScrollLastTs = 0
/** free 模式自维护的滚动偏移，避免每帧读 scrollY 触发 iOS 同步重排/撕裂 */
let freeScrollOffset = -1
let galleryObserver = null
let galleryRevealTimer = null
const galleryDone = new Set()
/** 绝对时间锚点：用 elapsed 算位移，掉帧不再永久丢进度（iOS 更容易掉帧导致比安卓慢） */
let freeScrollOriginTs = 0
let freeScrollOriginOffset = 0
const BOTTOM_RETURN_DELAY = 30000
/** 每 freeScrollInterval ms 推进的基准像素（与配置滑块联动） */
const FREE_SCROLL_BASE_STEP = 1.2
/** ready 后极短缓冲再恢复滚动（串行等待已在 PhotoGallery 内完成） */
const GALLERY_RESUME_DELAY_MS = 200
/** iOS 合成器对高频 scrollTo 有轻微滞后，略提速对齐安卓观感 */
const FREE_SCROLL_IOS_BOOST = 1.22
const freeInterval = computed(() => {
const v = Number(data.value.freeScrollInterval)
return v >= 10 && v <= 1000 ? v : 50
})
/** px / ms */
const freeScrollVelocity = computed(() => {
const base = FREE_SCROLL_BASE_STEP / freeInterval.value
return isIOS ? base * FREE_SCROLL_IOS_BOOST : base
})
const freeScrollSignature = computed(() => `${data.value.scrollMode}:${freeInterval.value}`)
const invalidateFreeScrollAnchor = () => {
freeScrollOffset = -1
freeScrollOriginTs = 0
}
const restartAutoScroll = () => {
if (snapTimer || rafId) startAutoScroll()
}
const applyFreeScrollTop = (y) => {
// iOS：直接写 scrollTop，减少 scrollTo 被系统平滑插值拖慢的观感
if (isIOS) {
const top = Math.max(0, y)
document.documentElement.scrollTop = top
document.body.scrollTop = top
return
}
window.scrollTo(0, y)
}
const switchDuration = computed(() => {
const v = Number(data.value.pageSwitchDuration)
return v >= 0 && v <= 5000 ? v : 800
@@ -883,10 +894,15 @@ const normalizeImages = (images = []) => {
}
const localAlbumImages = () => {
// 灯箱优先原图；无原图时再退缩放图
const images = [data.value.heroImg, data.value.endImg]
;(data.value.photoPages || []).forEach((page) => {
images.push(page.img1, page.img2)
if (Array.isArray(page.images)) images.push(...page.images)
images.push(page.img1 || page.img1Resized, page.img2 || page.img2Resized)
if (Array.isArray(page.images)) {
page.images.forEach((src, i) => {
images.push(src || page.imagesResized?.[i])
})
}
})
return normalizeImages(images)
}
@@ -920,16 +936,21 @@ const albumPreviewOptions = computed(() => ({
}))
const openImagePreview = async (src) => {
if (!src) return
// 兼容 computed / 非字符串误传
const url = typeof src === 'string' ? src.trim() : String(src?.value || src || '').trim()
if (!url || url === '[object Object]') return
await loadAlbumPreviewImages()
let images = albumPreviewImages.value.length ? albumPreviewImages.value : [src]
let index = images.indexOf(src)
let images = albumPreviewImages.value.length ? [...albumPreviewImages.value] : []
let index = images.indexOf(url)
if (index < 0) {
images = [src, ...images]
images = [url, ...images]
albumPreviewImages.value = images
index = 0
}
previewIndex.value = index
// 等 a-image 挂载并 registerImage 后再打开，避免灯箱空白
await nextTick()
await nextTick()
previewVisible.value = true
clearBottomReturn()
cancelAnimationFrame(animId)
@@ -967,12 +988,12 @@ const handleUserInteraction = () => {
cancelAnimationFrame(animId)
clearTimeout(pauseTimer)
// 立刻失效，避免暂停窗口内其它路径用旧 offset 写回顶部
freeScrollOffset = -1
invalidateFreeScrollAnchor()
if (isAtBottom()) scheduleBottomReturn(true)
pauseTimer = setTimeout(() => {
isInteracting.value = false
// 恢复自动滚动前，让下一帧重新同步真实滚动位置
freeScrollOffset = -1
invalidateFreeScrollAnchor()
}, 3000)
}
@@ -1007,7 +1028,7 @@ const smoothScrollTo = (target, duration) => {
const start = pageScrollTop(), dist = target - start
if (!dist) return
// 标记 offset 失效，下一次 free 滚动重新从真实位置开始
freeScrollOffset = -1
invalidateFreeScrollAnchor()
if (duration <= 0) { window.scrollTo(0, target); return }
const t0 = performance.now()
const tick = (now) => {
@@ -1041,52 +1062,10 @@ const canAutoAdvance = () =>
&& !previewVisible.value
&& !showMapOptions.value
&& !showOpenInBrowser.value
&& !galleryHold.value
const beginGalleryGate = (pIdx) => {
if (galleryDone.has(pIdx)) return
galleryDone.add(pIdx)
galleryHold.value = true
galleryActivate[pIdx] = true
}
const onGalleryReady = (pIdx) => {
// iOS 跳过 hold，但仍需刷新文档高度（图挂载后 scrollMax 可能变化）
/** 图挂载后刷新文档高度（画廊不停滚，仅校正 scrollMax） */
const onGalleryReady = () => {
refreshScrollMax()
if (!galleryDone.has(pIdx)) return
clearTimeout(galleryRevealTimer)
galleryRevealTimer = setTimeout(() => {
galleryHold.value = false
galleryRevealTimer = null
}, GALLERY_RESUME_DELAY_MS)
}
const bindGalleryHoldObserver = () => {
galleryObserver?.disconnect()
galleryObserver = null
if (typeof IntersectionObserver === 'undefined') return
const nodes = scrollContainerRef.value?.querySelectorAll('[data-gallery-hold]')
if (!nodes?.length) return
// 区块抵达「自下而上 75%」线后再停滚+activate（= 距视口顶 25%）
galleryObserver = new IntersectionObserver(
(entries) => {
const vh = window.innerHeight || 1
const lineY = vh * (1 - 0.9) // 从下往上 75%
for (const entry of entries) {
if (!entry.isIntersecting) continue
const rect = entry.boundingClientRect
// 区块跨越该水平线
if (rect.top > lineY || rect.bottom < lineY) continue
const raw = entry.target.getAttribute('data-gallery-hold')
if (raw == null) continue
const pIdx = Number(raw)
if (!Number.isFinite(pIdx) || galleryDone.has(pIdx)) continue
beginGalleryGate(pIdx)
}
},
{ threshold: [0, 0.1, 0.25, 0.5, 0.75, 1], rootMargin: '0px' }
)
nodes.forEach((el) => galleryObserver.observe(el))
}
const startAutoScroll = () => {
@@ -1101,21 +1080,27 @@ const startAutoScroll = () => {
if (canAutoAdvance()) goNextSection()
}, 4500)
} else {
freeScrollLastTs = 0
invalidateFreeScrollAnchor()
const tickFreeScroll = (now) => {
const dt = freeScrollLastTs ? Math.min(34, now - freeScrollLastTs) : 16.7
freeScrollLastTs = now
if (canAutoAdvance()) {
// 失效后每帧推进前同步真实位置（打断/开关自动滚后都会走到这里）
if (freeScrollOffset < 0) freeScrollOffset = pageScrollTop()
// 重新锚定：从真实位置 + 当前时刻起算，掉帧用绝对时间补齐
if (freeScrollOriginTs <= 0 || freeScrollOffset < 0) {
freeScrollOriginOffset = pageScrollTop()
freeScrollOriginTs = now
freeScrollOffset = freeScrollOriginOffset
}
const max = pageScrollMax()
freeScrollOffset = freeScrollOriginOffset + freeScrollVelocity.value * (now - freeScrollOriginTs)
if (max - freeScrollOffset <= 8) {
freeScrollOffset = max
applyFreeScrollTop(freeScrollOffset)
scheduleBottomReturn()
} else {
// 单向写入，避免 read-then-write 触发 iOS 合成器/主线程同步抖动
freeScrollOffset += FREE_SCROLL_BASE_STEP * (dt / freeInterval.value)
window.scrollTo(0, freeScrollOffset)
applyFreeScrollTop(freeScrollOffset)
}
} else if (freeScrollOriginTs > 0) {
// 暂停期间丢弃锚点，恢复后从用户当前位置续滚
invalidateFreeScrollAnchor()
}
rafId = requestAnimationFrame(tickFreeScroll)
}
@@ -1156,10 +1141,11 @@ const completeIntro = () => {
const toggleAutoScroll = () => {
isAutoScroll.value = !isAutoScroll.value
if (isAutoScroll.value) {
freeScrollOffset = -1
invalidateFreeScrollAnchor()
if (isAtBottom()) scheduleBottomReturn(true)
} else {
clearBottomReturn()
invalidateFreeScrollAnchor()
}
}
@@ -1337,7 +1323,12 @@ onMounted(async () => {
const next = { ...p }
if (next.img1) next.img1 = optimizeImageUrl(next.img1)
if (next.img2) next.img2 = optimizeImageUrl(next.img2)
if (next.img1Resized) next.img1Resized = optimizeImageUrl(next.img1Resized)
if (next.img2Resized) next.img2Resized = optimizeImageUrl(next.img2Resized)
if (Array.isArray(next.images)) next.images = next.images.map((u) => optimizeImageUrl(u))
if (Array.isArray(next.imagesResized)) {
next.imagesResized = next.imagesResized.map((u) => (u ? optimizeImageUrl(u) : u))
}
return next
})
}
@@ -1373,7 +1364,6 @@ onMounted(async () => {
}
await nextTick()
bindGalleryHoldObserver()
refreshScrollMax()
window.addEventListener('scroll', handleScroll, { passive: true })
window.addEventListener('resize', refreshScrollMax, { passive: true })
@@ -1384,10 +1374,6 @@ onUnmounted(() => {
document.documentElement.classList.remove('page-scroll-snap')
window.removeEventListener('scroll', handleScroll)
window.removeEventListener('resize', refreshScrollMax)
galleryObserver?.disconnect()
galleryObserver = null
clearTimeout(galleryRevealTimer)
galleryRevealTimer = null
cancelAnimationFrame(scrollRaf)
scrollRaf = 0
cancelAnimationFrame(rafId)
@@ -1406,18 +1392,10 @@ watch(
() => data.value.photoPages,
async () => {
await nextTick()
bindGalleryHoldObserver()
refreshScrollMax()
},
{ deep: true }
)
watch(
() => data.value.nineGridAnimate,
async () => {
await nextTick()
bindGalleryHoldObserver()
}
)
watch(freeScrollSignature, restartAutoScroll)
watch(
() => [isDrawerOpen.value, showBlessingDrawer.value, previewVisible.value, showMapOptions.value, showOpenInBrowser.value],