139 lines
11 KiB
Markdown
139 lines
11 KiB
Markdown
# 2026-07-31 婚礼请柬优化（第二版）
|
||
|
||
完成了用户提出的三点需求：
|
||
1. 背景音乐支持上传多首，后台选择当前播放曲目，前台仍可切换/暂停。
|
||
2. 入场揭幕帘幕 UI 美化：双开门+毛玻璃印章徽标+背景图。
|
||
3. 相册布局新增 瀑布流(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）：
|
||
|
||
1. **图册边框样式配置+预览**：新增 `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'`。
|
||
|
||
2. **花瓣优雅化**：`animations.css` 重写 `petalFall`+新增 `petalDrift`（轻微横向摇曳）；`index.vue` 花瓣改 SVG 花瓣形（带渐变描边叶脉 + 柔和投影），移除方形 `border-radius`。
|
||
|
||
3. **修复爱心只在底部**：原 `.heart-bubble` 固定 `bottom:0` 导致全聚底部。改为随机 `top` 分布 + 负 `animation-delay` 错峰，配合 `heartFloat` 全屏自然上升循环。
|
||
|
||
4. **音乐自动播放+授权模态框**：`useAudio.js` 新增 `attemptAutoplay()`（返回是否成功）。`index.vue` 启动时尝试播放，被拦截则弹出优雅授权模态框（“轻触开启”），点击授权播放；保留 `armAutoplay` 首次交互兜底。
|
||
|
||
5. **入场揭幕优雅化**：`index.vue` 重设 curtain 为象牙金双开门（柔和渐变+丝光+细金线），徽标改为衬线姓名+❀+细金分隔线+“轻触开启请柬”，去除厚重棕色玻璃卡。
|
||
|
||
6. **回执按钮+中文标签+单选标签**：回执 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 个问题，已修复：
|
||
|
||
1. **点击入场揭幕不自动播放**：原仅靠 `armAutoplay` 的 window pointerdown 监听，不够可靠。`index.vue` 的 `openInvitation` 改为在揭幕点击（明确用户手势）里直接 `audio.play()`，保证点击即播放；`onMusicAuthSkip`（暂不开启）改为挂起 `armAutoplay` 兜底。
|
||
|
||
2. **错落双图(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`。构建通过。
|
||
|
||
3. **/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 大块需求（附截图），全部实现并浏览器实测验证：
|
||
|
||
1. **首屏滚动修复+后台速度参数**
|
||
- 根因：容器带 `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` 取消程序化动画避免争抢。
|
||
|
||
2. **错落双图溢出修复**（先实测定位再修）
|
||
- 实测根因：保存的配置中该页 `height:'auto'` → section 仅 643px（视口 844），容器又写死 `h-[50vh]`，与页高脱钩 + `bottom-4` 悬空 → 第二图被裁/挤压。
|
||
- 修复：容器改 `clamp(320px,54vh,460px)` 封顶，图片贴容器边缘（bottom-0/right-0），68%/72% + 60%/60% 比例错落。实测修复后两图完整不出界。
|
||
|
||
3. **单图宽度铺满**：`page.singleWidth`(default|full) + `page.singleKeepRatio`(bool)。full+保比例 → 新增 `gf-natural` 辅助类（img height:auto）；full+不保 → aspect 4/5 裁切。后台单图版式显示该配置（单选+开关），实测铺满渲染正常。
|
||
|
||
4. **边框扩展5组**：gf-shadow(阴影浮起)/gf-ink(墨黑描边)/gf-card(悬浮卡片)/gf-lace(虚线文艺)/gf-glow(柔光金晕)，共 11 种，后台预览复用。
|
||
|
||
5. **背景装饰优化**：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 点反馈，全部完成并实测：
|
||
|
||
1. **错落双图没有错落感**：排查发现总根因——`frames.css` 的 `.gf-frame { position:relative }` 在 Tailwind 之后加载，同优先级覆盖元素上的 `absolute`，overlap 两图实际一直在静态流里（right/bottom 全失效），此前几轮修复都是在治症状。删除 position 后，改拼贴布局：图一左上 72%×78% -2°、图二右下 56%×62% +3° 压角叠放。实测两图 absolute 定位正确（左18-276 / 右167-373，角落重叠）。
|
||
2. **后台图片排序**：AdminEditor 多图版式每张图片加「前移/后移」圆钮（左下/右下，moveImage swap），实测 36 个按钮渲染正常。
|
||
3. **铺满沾满全宽**：singleWidth=full 时加负边距出血（width:calc(100%+48px); margin:0 -24px 抵消 section p-6）。实测 frame 0→390px 完全贴缘。验证方式：直接 POST 改库配置→截图→精确还原（original-config.json 备份恢复，page0 回 default、scrollMode 回 free）。
|
||
4. **播放图标白色不可见**：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 截图均确认。
|