feat(admin,viewer,ui04): E06 management preview and v2 integration — real-component preview page, form mode fields, README
- viewer /embed-preview route: real EmbedStream with sample photography (picsum seeds), zero requests/WS (preview mode), postMessage config + simulated bursts through the real validation pipeline
- EmbedStream: preview prop (disables real WS subscription per §8.2 isolation) + exposed simulateBurst
- admin form: displayMode radio (new default), fixed 195x280 readonly, speed slider, reactions switch; v1 layout fields hidden in v2 (not silently effective)
- admin preview: v2 branch embeds the real preview iframe, white v2 handle, simulate-like tool button with sample-data note
- README-embed: v2 section (integration, hard sizing/docking, interactions/limits, artifact/version caching)
- tests: admin vitest 83 (+1 v2 placement), admin e2e 5 (v1 pinned carousel regression + full v2 chain incl. preview WYSIWYG heart and ov settings projection), viewer 244, v2 e2e 16
Note: part of the admin-side E06 changes (form/preview/utils/locales, mid-state of e2e spec) was swept into parallel commit eebf3b3 by a concurrent session's git add; this commit carries the final state of the remaining files and completes the set.
Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
@@ -112,3 +112,55 @@ pnpm --filter @photo/embed-loader run sync # 拷贝至 viewer public/(含 h
|
||||
宿主页交互行为(iframe 出现/收起/记忆/窄屏/多槽堆叠/跨源宿主/postMessage 白名单/
|
||||
后台设置动态生效)的端到端覆盖见 viewer Playwright `e2e/embed.spec.ts` 与
|
||||
`e2e/embed-crossorigin.spec.ts`(宿主 fixture 页 / 3999 端口跨源静态页)。
|
||||
|
||||
---
|
||||
|
||||
# UI-04 v2:垂直照片流窗(/embed/v2/loader.js)
|
||||
|
||||
新版展示模式:**PC/手机均固定 195×280 CSS px、单列照片连续自动上滚、真实点赞
|
||||
心形气泡、无标题栏与底部工具栏**(仅右上收起入口;点击照片打开观众深链)。
|
||||
v1(旧轮播)源码冻结保留——存量接入不受影响;切换新版需更新 script 地址。
|
||||
|
||||
## 接入代码
|
||||
|
||||
```html
|
||||
<script src="{EMBED_ORIGIN}/embed/v2/loader.js" data-slot="{publicToken}" defer></script>
|
||||
```
|
||||
|
||||
- 后台展示位 `displayMode=vertical-stream` 时,嵌入代码卡自动生成 v2 入口;
|
||||
- `data-speed`(8–32,像素/秒,缺省 16)与 `data-reactions="off"` 为显式覆盖,
|
||||
缺省让后台设置生效(优先级同 v1:data-* > 后台 > 默认);
|
||||
- v2 下 `data-size / data-interval / data-image-fit` 无布局作用(固定 195×280、
|
||||
连续滚动),不生成也不解析。
|
||||
|
||||
## 尺寸与停靠(硬性)
|
||||
|
||||
- 宽 195 / 高 280(border-box,含 1px 白边);视口不足时按 `min(195, 可用宽)` /
|
||||
`min(280, 可用高)` 收缩,低于可用下限转收起入口;**不整体缩放**(transform
|
||||
scale 会同缩文字与触控区);
|
||||
- 默认停靠:桌面 right 16 / 手机(≤599px 视口)right 12,bottom 24 + 安全区
|
||||
(`offsetX/offsetBottom` 可配置,0–120 / 0–240);z-index 缺省 1000 可配置;
|
||||
- 窄屏(<480px)默认收起(与 v1 策略一致);展开后两端尺寸一致;
|
||||
- iframe 内容不得经 resize 消息反向改变窗口高度(v2 忽略 resize)。
|
||||
|
||||
## 交互与限制
|
||||
|
||||
- 悬停(鼠标)/键盘焦点/按住暂停,离开 500ms 恢复;Space 显式暂停(不自动
|
||||
恢复);Escape 收起;↑↓/滚轮/拖动手动滚动(双向回绕,跟手 1:1);
|
||||
- 点击照片:pointerdown 锁定目标,拖动 >8px 取消——动画中不点错图;新标签
|
||||
打开 `/a/{albumToken}/p/{photoId}`(noopener);
|
||||
- 点赞气泡只由真实 `likes.burst`(WebSocket 只读订阅相册公开 token)驱动:
|
||||
断线不出泡、不伪造;组件自身不提交点赞、不上报浏览;
|
||||
- 减少动态效果(prefers-reduced-motion):停自动滚动与粒子,手动可查看。
|
||||
|
||||
## 产物与版本
|
||||
|
||||
- 构建产物 `dist/v1/loader.js` 与 `dist/v2/loader.js`(同 build/sync 脚本;
|
||||
viewer publicDir `public/embed/{v1,v2}/` 携带)。版本入口稳定可长缓存
|
||||
(immutable 语义同 `/embed/v1/`,见 viewer nginx 模板);升级走新版本路径,
|
||||
不原地变更已发布文件语义。
|
||||
|
||||
v2 行为的端到端覆盖见 viewer Playwright `e2e/embed-v2.spec.ts`(E01–E05 出口
|
||||
门/尺寸测量/滚动连续性/交互/真实点赞气泡/录屏证据);管理端表单与真实组件
|
||||
预览(`/embed-preview`,样例数据 + postMessage 配置/模拟事件)见 admin
|
||||
`e2e/embed-slots.spec.ts` UI-04 用例。
|
||||
|
||||
Reference in New Issue
Block a user