2026-07-31 婚礼请柬优化（第二版）

完成了用户提出的三点需求：

背景音乐支持上传多首，后台选择当前播放曲目，前台仍可切换/暂停。
入场揭幕帘幕 UI 美化：双开门+毛玻璃印章徽标+背景图。
相册布局新增瀑布流(masonry)、轮播(carousel)、拍立得(polaroid)，并保留/优化单图布局；后台对柔性版式支持图片增删。

关键改动文件：

src/composables/useAudio.js：重写为多曲目 useAudio。
src/components/PhotoGallery.vue：新增 7 种版式渲染组件。
src/views/index/index.vue：揭幕帘幕、多曲目音乐弹层、PhotoGallery。
src/views/admin/AdminEditor.vue：新增「背景音乐」标签页，相册版式下拉，柔性版式增删图片。
配置字段迁移：musicUrl → musicList + activeMusicUrl，前后端均做了旧配置兼容。

验证：

node node_modules/vite/bin/vite.js build --outDir dist-verify 通过（EXIT=0）。
已清理临时构建输出到 D:/myCode/hunliji/_dist_verify_bak（环境安全删除机制损坏，无法真正删除，后续请手动清理）。
开发服务器在 8888 正常运行，/admin 登录与编辑器可访问；新「背景音乐」标签可见。

2026-07-31 晚（追加）相册页可设置页高

新增需求：后台每个相册页可独立设置页面高度。

改动：

src/views/index/index.vue：相册页 section 绑定 pageHeightStyle(page)，支持 100vh/80vh/60vh/auto/自定义vh。
src/views/admin/AdminEditor.vue：每个相册页卡片新增「页面高度」选择器（满屏/大屏/半屏/自适应/自定义 vh），ensurePageShape 默认 height: '100vh'，旧配置自动兼容。

验证：

构建通过（EXIT=0）。
浏览器实测：注入测试 token 进入后台，相册页管理标签下「页面高度」控件正常渲染。

2026-07-31（第三版）六项视觉/交互优化

用户提出 6 项改进，全部实现并通过 vite build（EXIT=0）：

图册边框样式配置+预览：新增 borderStyle 字段（none/thin/mat/rounded/double/gold）。
- 新建 src/styles/frames.css（全局 gf-frame gf-* 类，前台后台预览共用）并 import 到 main.js。
- 新建 src/composables/borderStyles.js 导出 BORDER_STYLES 与 borderClass()。
- PhotoGallery.vue 各版式图片套用 frameClass（polaroid 保留自身边框不受其影响）。
- AdminEditor.vue 相册页卡片新增「边框样式」下拉 + 实时预览小图；defaultConfig/ensurePageShape 默认 borderStyle:'mat'。
花瓣优雅化：animations.css 重写 petalFall+新增 petalDrift（轻微横向摇曳）；index.vue 花瓣改 SVG 花瓣形（带渐变描边叶脉 + 柔和投影），移除方形 border-radius。
修复爱心只在底部：原 .heart-bubble 固定 bottom:0 导致全聚底部。改为随机 top 分布 + 负 animation-delay 错峰，配合 heartFloat 全屏自然上升循环。
音乐自动播放+授权模态框：useAudio.js 新增 attemptAutoplay()（返回是否成功）。index.vue 启动时尝试播放，被拦截则弹出优雅授权模态框（“轻触开启”），点击授权播放；保留 armAutoplay 首次交互兜底。
入场揭幕优雅化：index.vue 重设 curtain 为象牙金双开门（柔和渐变+丝光+细金线），徽标改为衬线姓名+❀+细金分隔线+“轻触开启请柬”，去除厚重棕色玻璃卡。
回执按钮+中文标签+单选标签：回执 CTA 改为优雅金边胶囊按钮；模态框标题改「出席回执/敬请回复」，label 改中文（姓名/出席情况/祝福语）；出席选择由下拉改为单选标签（chip，选中填金）。

验证：vite preview 起服务 curl 返回 200，app 挂载正常。注：Go 后端若改动需重启才能生效（本次未改后端）。

2026-07-31（第四版）音乐播放流程收紧

需求：音乐必须先尝试自动播放，播放失败才弹授权模态框（不要提前弹）。

改动（仅 src/views/index/index.vue）：

onMounted 中先 attemptAutoplay()；成功则不弹框、不挂手势监听；失败才 armAutoplay() 挂「首次交互解锁」兜底。
新增 pendingMusicAuth 标记：若开启揭幕(introEnabled)，失败时不立即弹框，而是等用户点击揭幕（一次有效手势会触发 armAutoplay 直接播放）后，在 openInvitation 末尾用 setTimeout(0) 二次确认仍未播放才弹授权框；无揭幕则失败立即弹框。
避免揭幕期间授权框与帘幕重叠、以及用户点击揭幕本可播放却仍弹框的冗余体验。

验证：vite build --outDir dist-chk-<timestamp> 通过（EXIT=0）。本机安全删除损坏，临时构建目录需手动清理。

2026-07-31（第五版）修复三处问题

用户反馈 3 个问题，已修复：

点击入场揭幕不自动播放：原仅靠 armAutoplay 的 window pointerdown 监听，不够可靠。index.vue 的 openInvitation 改为在揭幕点击（明确用户手势）里直接 audio.play()，保证点击即播放；onMusicAuthSkip（暂不开启）改为挂起 armAutoplay 兜底。
错落双图(overlap)图片超出可视范围：根因 src/styles/frames.css 的 .gf-frame 写了 width:100%;height:100%，且在 Tailwind 工具类之后加载，层叠覆盖了 overlap 包装上的 w-[70%] h-[65%] 等尺寸，图片被撑满并 right-4 偏移而溢出。已移除 .gf-frame 的 width/height（改由包装工具类/网格控制尺寸），保留 position/background/overflow。构建通过。
/api/admin/login 返回 404：后端 main.go 路由本就存在（134 行），404 是因宿主机上跑的是旧 Go 二进制。hunliji-api 目录 go build -o hunliji-api.exe 重编译并重启（占用 8080 的旧进程被杀，新进程监听）。验证：8080 直连与 8888 vite 代理均返回 200 + token。默认账号 admin/admin123。

注意：前端改动后用户需刷新 8888 页面（HMR 已生效）；本机安全删除损坏，临时 dist-chk-* 与 hunliji-api/api-run.log 需手动清理。

2026-07-31（第六版）音乐播放流程再修正

用户澄清：不要去掉授权模态框，但要严格「先静默尝试自动播放 → 失败才弹框」。还原掉之前第四版的 pendingMusicAuth 延迟逻辑。

改动（仅 src/views/index/index.vue）：

移除 pendingMusicAuth 变量及相关分支。
onMounted：attemptAutoplay() 失败即 showMusicAuth = true（立即弹框）。
openInvitation：保留揭幕点击时 audio.play()（用户手势兜底，解决「点击揭幕不播放」）。
授权模态框模板/样式保持不变（轻触开启 → 播放；暂不开启 → 挂 armAutoplay 兜底）。

验证：vite build --outDir dist-chk-<timestamp> 通过（EXIT=0）。无残留 pendingMusicAuth 引用。

2026-07-31（第七版）滚动修复+速度参数+错落双图+单图宽度+边框扩展+背景装饰

用户提出 5 大块需求（附截图），全部实现并浏览器实测验证：

首屏滚动修复+后台速度参数
- 根因：容器带 scroll-smooth 类，CSS smooth 会劫持 JS 的 scrollTop 赋值，free 模式每帧 +=0.8 全被转成平滑动画 → 卡顿跳帧。已移除该类并注释警示。
- snap 切换动画时长不可控（behavior:'smooth' 浏览器自定）→ 自研 smoothScrollTo（rAF + easeInOutQuad，时长可配）。
- 新配置：freeScrollInterval(ms,默认50,自由滚动间隔,setInterval 驱动)、pageSwitchDuration(ms,默认800,翻页动画时长)。后台「视觉与动效」加滑块+数字输入。
- 循环逻辑：snap/free 到底后回第一屏继续；handleUserInteraction 取消程序化动画避免争抢。
错落双图溢出修复（先实测定位再修）
- 实测根因：保存的配置中该页 height:'auto' → section 仅 643px（视口 844），容器又写死 h-[50vh]，与页高脱钩 + bottom-4 悬空 → 第二图被裁/挤压。
- 修复：容器改 clamp(320px,54vh,460px) 封顶，图片贴容器边缘（bottom-0/right-0），68%/72% + 60%/60% 比例错落。实测修复后两图完整不出界。
单图宽度铺满：page.singleWidth(default|full) + page.singleKeepRatio(bool)。full+保比例 → 新增 gf-natural 辅助类（img height:auto）；full+不保 → aspect 4/5 裁切。后台单图版式显示该配置（单选+开关），实测铺满渲染正常。
边框扩展5组：gf-shadow(阴影浮起)/gf-ink(墨黑描边)/gf-card(悬浮卡片)/gf-lace(虚线文艺)/gf-glow(柔光金晕)，共 11 种，后台预览复用。
背景装饰优化：petalDrift/heartSway 从 margin-left（每帧触发布局）改嵌套内层 transform（全合成层，性能修复）；爱心三层景深(远小淡模糊/近大清晰)、花瓣两层景深；新增 bg-glow 柔光层(淡金/淡粉 radial 光斑缓慢漂移)。

实测工具：agent-browser（playwright-cli 未装）。坑：后台是 history 模式，URL 是 /admin 不是 /#/admin；eval 多行 JS 引号易炸，写临时文件 eval "$(cat x.js)" 最稳；截图保存在 daemon 的 cwd（D:/myCode/hunliji/dev/_shots）。

验证：vite build 通过（EXIT=0）；浏览器实测 overlap/single-full/admin 控件均正常。注：沙箱浏览器加载不了 unsplash（显示裂图），localhost:8080 上传图正常。

2026-07-31（第八版）错落拼贴+图片排序+铺满出血+图标颜色

用户 4 点反馈，全部完成并实测：

错落双图没有错落感：排查发现总根因——frames.css 的 .gf-frame { position:relative } 在 Tailwind 之后加载，同优先级覆盖元素上的 absolute，overlap 两图实际一直在静态流里（right/bottom 全失效），此前几轮修复都是在治症状。删除 position 后，改拼贴布局：图一左上 72%×78% -2°、图二右下 56%×62% +3° 压角叠放。实测两图 absolute 定位正确（左18-276 / 右167-373，角落重叠）。
后台图片排序：AdminEditor 多图版式每张图片加「前移/后移」圆钮（左下/右下，moveImage swap），实测 36 个按钮渲染正常。
铺满沾满全宽：singleWidth=full 时加负边距出血（width:calc(100%+48px); margin:0 -24px 抵消 section p-6）。实测 frame 0→390px 完全贴缘。验证方式：直接 POST 改库配置→截图→精确还原（original-config.json 备份恢复，page0 回 default、scrollMode 回 free）。
播放图标白色不可见：pause 图标从白色改金色(#a88c6b)，激活态按钮改浅金底(border 加深)。实测 3 个控制图标全 gold。

新坑记录：agent-browser 的 network route --body mock 有时页面自己的首次请求不走拦截（eval fetch 却走），不稳定 → 验证配置渲染直接改库+还原更可靠；screenshot 不支持 --clip（会当成文件路径）。

验证：vite build 通过（EXIT=0）；overlap/single-bleed/admin-sort/controls 截图均确认。

11 KiB Raw Blame History Unescape Escape