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:
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user