2026-07-31 11:36:19 +08:00
|
|
|
|
# 婚礼请柬项目 · 长期备忘
|
|
|
|
|
|
|
|
|
|
|
|
## 架构
|
|
|
|
|
|
- 前端 `vite-tailwindcss`：Vue3+Vite6+Tailwind4+Pinia+antd，路由 history 模式（`/admin` 非 hash），dev 端口 8888，代理 `/api` → 8080。
|
|
|
|
|
|
- 后端 `hunliji-api`：Go/Gin+GORM+MySQL，改完必须 `go build` 并重启旧进程才生效（404 多半是旧二进制）。
|
|
|
|
|
|
- 配置存后端单条 JSON，前后端均做旧字段兼容（musicUrl→musicList、缺省 height/borderStyle/singleWidth/速度参数）。
|
|
|
|
|
|
|
|
|
|
|
|
## 关键坑（不要再踩）
|
2026-07-31 12:13:41 +08:00
|
|
|
|
1. **`gf-frame` 绝不能设 position/width/height**：frames.css 在 Tailwind 之后加载，同优先级后者胜出——`position:relative` 曾把 overlap 版的 `absolute` 静默冲掉（元素退回静态流，right/bottom 失效），这是错落双图溢出问题反复出现的总根因。布局定位只交给 Tailwind 工具类。
|
|
|
|
|
|
2. **滚动容器绝不能加 `scroll-smooth`**：CSS smooth 会劫持 JS 的 scrollTop 赋值，free 自动滚动会严重卡顿。snap 翻页用自研 rAF 动画（`smoothScrollTo`，时长=pageSwitchDuration）。
|
|
|
|
|
|
3. **动画摇曳禁用 margin-left**（每帧触发布局）：外层跑位移、内层元素跑 transform 摇曳（petal/petal-inner、heart-bubble/heart-inner 模式）。
|
|
|
|
|
|
4. **相册页高与图片容器要联动**：页高可能 auto/80vh，图片容器写死 vh 会脱钩溢出 → 用 clamp 封顶 + 图片贴容器边缘。
|
|
|
|
|
|
5. `gf-natural` 保持原始比例；单图铺满用负边距出血（width:calc(100%+48px); margin:0 -24px 抵消 section p-6）。
|
2026-07-31 11:36:19 +08:00
|
|
|
|
|
|
|
|
|
|
## 环境
|
|
|
|
|
|
- 本机"安全删除"损坏：rm 常失败，vite build 用 `--outDir dist-chk-<ts>` 新目录验证，临时目录需手动清。
|
|
|
|
|
|
- 沙箱网络隔离：测宿主机服务要 dangerouslyDisableSandbox；沙箱浏览器加载不了 unsplash（裂图正常），localhost 图正常。
|
|
|
|
|
|
- 浏览器实测用 agent-browser（playwright-cli 未装）：多行 eval 写临时文件再 `eval "$(cat f)"`；截图落在 daemon cwd；admin 需先 localStorage 注入 admin_token；可用 network route mock /api/config 验证配置渲染（不动数据库）。
|
|
|
|
|
|
|
|
|
|
|
|
## 凭证
|
|
|
|
|
|
后台 admin / admin123（env 可覆盖）。
|
