feat(embed,ui04): E01 v2 contract skeleton — displayMode/scrollSpeed/reactionsEnabled, v2 loader entry and fixed 195x280 shell

- contracts: EmbedSlotSettings optional v2 fields (carousel default) + SlotSettingsPayload; gen + redocly green
- api: DTO validation + normalization full-set (cn manage + ov public projection share normalizeStoredSettings)
- embed-loader: params v2 parse/merge/url family, loader-v2.js fixed shell (border/radius/#10161E/safe-area, resize ignored, stack gap 12), dual-artifact build+sync; v1 source frozen
- viewer: EmbedPage v=2 branch, EmbedStream (viewport/track/real anchors/collapse/empty), stream.ts pure fns, i18n zh/en
- admin: types + utils (create default vertical-stream, clampScrollSpeed, v1/v2 snippet selection)
- tests: loader 36 (+9 v2), viewer 222, admin 82, api unit 51, v1 embed e2e 20, v2 E01 gate 2 (195x280 desktop+mobile cross-origin, no footer)

Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
浅念
2026-09-22 12:50:28 +08:00
parent f8dbc3ab9b
commit 66d1eb3e9f
25 changed files with 1383 additions and 52 deletions
+62
View File
@@ -0,0 +1,62 @@
// apps/viewer/src/embed/stream.ts —— v2 垂直照片流纯函数集(UI-04 §2.3/§3.2)。
// 高度比例防御、环形队列窗口数学、锚定计算全部收敛为纯函数(vitest 直接覆盖);
// 组件/编排层(EmbedStream.vue / useVerticalPhotoStream.ts)只做装配。
/** 元数据异常时的高度比例回退(4:3,§2.3)。 */
export const FALLBACK_RATIO = 4 / 3;
/** 超长图安全钳(高度/宽度上限;防无穷高度破坏循环,§2.3)。 */
export const MAX_RATIO = 8;
/** 照片缝宽度(px,§2.2 硬性 3px)。 */
export const PHOTO_GAP_PX = 3;
export interface StreamPhotoSize {
width: number;
height: number;
}
/** 元数据 → 高度比例(height/width);宽高须 >0 且有限,否则回退 4:3。 */
export function photoRatio(size: StreamPhotoSize): number {
if (
Number.isFinite(size.width) &&
Number.isFinite(size.height) &&
size.width > 0 &&
size.height > 0
) {
return Math.min(size.height / size.width, MAX_RATIO);
}
return FALLBACK_RATIO;
}
/** 容器内宽 → 照片展示高度(按比例;内宽 = 窗宽 - 边框)。 */
export function photoDisplayHeight(size: StreamPhotoSize, innerWidth: number): number {
return photoRatio(size) * innerWidth;
}
/**
* 环形队列窗口(§3.2 步骤 1):给定队列、窗口高度与预载余量,计算从
* startIndex 起需要装载的条目数(高度和 ≥ 窗口高 + 上下余量)。返回条目
* 数量(至少 1,队列空返回 0)。纯计算——实际 DOM 复用由编排层负责。
*/
export function windowCount(
sizes: StreamPhotoSize[],
startIndex: number,
innerWidth: number,
viewportHeight: number,
bufferPx: number,
): number {
if (sizes.length === 0) return 0;
const target = viewportHeight + bufferPx;
let acc = 0;
let count = 0;
for (let i = 0; i < sizes.length; i++) {
const item = sizes[(startIndex + i) % sizes.length];
acc += photoDisplayHeight(item, innerWidth) + PHOTO_GAP_PX;
count += 1;
if (acc >= target) return count;
}
// 一轮高度不足以覆盖窗口(极矮照片):返回整队(§3.2.7 少量可见循环
// 副本由编排层处理,本函数不放大队列)。
return count;
}