feat(viewer): embed carousel iframe with visibility pause

P4b Task 4:宿主 loader 以 iframe 载入的轮播页(/embed/:slotToken,裸布局)。

- src/embed/feed.ts:纯函数集——A22 旧响应裁决(dispatch seq + configVersion
  双闸:过期/回看丢弃、等值差分合并、升值全量重置)、照片队列差分(新照片
  追加队尾、缺席淘汰、thumb 签名刷新)、interval/高度夹取、轮询退避;
- src/embed/useEmbedFeed.ts:取数编排(If-None-Match → 304 零处理)、轮询
  (查询 interval 覆盖 → EMBED_POLL_INTERVAL_MS,连续 5 失败 ×5 退避,成功
  归零;404/410 静默 collapse 隐藏自身)、A23 不可见暂停(document 隐藏 +
  IntersectionObserver 滚出视口 + 本地收起;恢复立即校准)、轮播 intervalMs
  切换;__embedPollMs e2e 注入点;
- src/embed/postMessage.ts:上行 resize/collapse(referrer origin 收敛,缺失
  退 '*'——载荷无敏感数据,宿主侧 loader source+origin 双校验)、下行 expand
  (event.source === window.parent 白名单);
- EmbedPage.vue:交叉淡入淡出(仅 thumb 小图省流量)、点击 window.open 单图
  深链(noopener)、计数圆点、「照片即将上线」空态卡、×收起;lang 查询
  (auto→相册 defaultLocale)驱动嵌入词条子集;
- api client:fetchPublicEmbedSlot(304/ETag 分支,不走 apiRequest);
- e2e:宿主夹具页 public/__test__/embed-host.html(仅测试资产)+ embed.spec 7
  用例(轮换/新标签深链/收起记忆/窄屏 sm/轮询增量/换绑重置/空态/幽灵槽);
  helpers 增展示位 admin API 种子 + flushOutbox;
- vitest 18 用例(裁决矩阵/队列差分/夹取/退避/304/可见性状态机)。

配套修正:api CORS exposedHeaders ETag(跨源浏览器可读,304 语义成立);
contracts 新增浏览器安全子路径 ./constants(根出口 re-export internal-sync
的 node:crypto 会打进浏览器包);eslint ignore embed-loader 产物拷贝
(Task 3 起 viewer lint 红,先修)。

Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
浅念
2026-09-20 23:02:07 +08:00
parent ddb4c8175f
commit 8f2c21d25a
16 changed files with 1433 additions and 5 deletions
+60
View File
@@ -16,6 +16,11 @@ export type VisitReportResponse = components['schemas']['VisitReportResponse'];
export type PublicPhotoDownload = components['schemas']['PublicPhotoDownload'];
export type DownloadVariant = components['schemas']['DownloadVariant'];
// P4b Task 4 展示位公开数据类型(ov 域;嵌入轮播 iframe 数据源)。
export type PublicEmbedSlot = components['schemas']['PublicEmbedSlot'];
export type PublicEmbedAlbum = components['schemas']['PublicEmbedAlbum'];
export type PublicEmbedPhoto = components['schemas']['PublicEmbedPhoto'];
/** 公开照片排序模式(sort=hot 仅 ov 实现:likeTotal 倒序短期快照,§7)。 */
export type SortMode = 'latest' | 'hot';
@@ -163,3 +168,58 @@ export function getPhotoDownload(
}),
);
}
/** 展示位公开数据取回结果(P4b Task 4):304(内容未变)时 data 为 null。 */
export interface EmbedSlotFetchResult {
data: PublicEmbedSlot | null;
etag: string | null;
}
/**
* 公开展示位数据(P4b Task 4):不走 apiRequest——需要 If-None-Match 条件请求与
* 304 分支(apiRequest 对非 2xx 一律抛错)。同源/跨源 fetch 对 304 均以
* response.status===304 无 body 达成;ETag 头依赖 API 侧 CORS exposedHeaders
* (configure-app),跨源读取否则恒 null。错误信封解析与 apiRequest 同规。
*/
export async function fetchPublicEmbedSlot(
slotToken: string,
options: { lang?: string; etag?: string | null } = {},
): Promise<EmbedSlotFetchResult> {
let response: Response;
const path = withQuery(`/public/embed-slots/${encodeURIComponent(slotToken)}`, {
lang: options.lang,
});
try {
response = await fetch(`${apiBase()}/v1${path}`, {
headers: {
accept: 'application/json',
...(options.etag ? { 'if-none-match': options.etag } : {}),
},
});
} catch {
throw new ApiError(NETWORK_ERROR_CODE, 'network request failed', 0, null);
}
const etag = response.headers.get('etag');
if (response.status === 304) {
return { data: null, etag };
}
const text = await response.text();
let body: unknown = null;
if (text.length > 0) {
try {
body = JSON.parse(text);
} catch {
body = null;
}
}
if (!response.ok) {
const env = parseErrorEnvelope(body);
throw new ApiError(
env.code ?? 'INTERNAL_ERROR',
env.message ?? `request failed with status ${response.status}`,
response.status,
env.requestId,
);
}
return { data: body as PublicEmbedSlot, etag };
}