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
+83 -1
View File
@@ -19,6 +19,7 @@ import {
signSyncBody,
} from '@photo/contracts';
import { deliverPendingOnce } from '../../../services/sync/src/sender';
import { seedAdmin } from '../../../services/api/src/scripts/seed-admin';
// 仓库根 .env 唯一来源(同 services/api test/load-env.ts 约定)。必须在
// PrismaClient / createStorageFromEnv 构造前执行——两者均在首次查询/调用时读 env。
@@ -235,13 +236,84 @@ export async function flushSync(albumId: string): Promise<void> {
`flushSync bootstrap 失败(${bootstrap.status}):${(await bootstrap.text()).slice(0, 300)}`,
);
}
await flushOutbox();
}
/** 仅排空 outbox(P4b Task 4 embed e2e):slot.updated 事件不随相册 bootstrap
* 走(bootstrap 清单恒不含 slot-state),展示位创建/绑定的同步须单独排空。 */
export async function flushOutbox(): Promise<void> {
await deliverPendingOnce({
prisma,
ovApiUrl: process.env.OV_API_URL ?? 'http://127.0.0.1:8081',
internalKey,
internalKey: process.env.SYNC_INTERNAL_KEY ?? 'dev-sync-secret-change-me',
});
}
// ── P4b Task 4 展示位种子(经 cn admin API 真实路径,非直插行)──
const ADMIN_ACCOUNT = process.env.ADMIN_ACCOUNT ?? 'admin';
const ADMIN_PASSWORD = process.env.ADMIN_PASSWORD ?? 'admin-secret-change-me';
const seededSlotIds: string[] = [];
let adminTokenPromise: Promise<string> | null = null;
/** seeded admin 幂等 + 登录(journey.spec 同款;会话进程内复用)。 */
async function loginAdmin(): Promise<string> {
if (adminTokenPromise === null) {
adminTokenPromise = (async () => {
await seedAdmin(prisma, ADMIN_ACCOUNT, ADMIN_PASSWORD);
const res = await fetch(
`${(process.env.CN_API_URL ?? 'http://127.0.0.1:8080').replace(/\/+$/, '')}/v1/auth/password`,
{
method: 'POST',
headers: { 'content-type': 'application/json' },
body: JSON.stringify({ account: ADMIN_ACCOUNT, password: ADMIN_PASSWORD }),
},
);
if (!res.ok) {
throw new Error(`embed seed 登录失败(${res.status})`);
}
return ((await res.json()) as { sessionToken: string }).sessionToken;
})();
}
return adminTokenPromise;
}
/** 经 cn admin API 创建展示位(未绑定态;settings 缺省),登记待清理。 */
export async function createEmbedSlot(name: string): Promise<{ id: string; token: string }> {
const token = await loginAdmin();
const res = await fetch(
`${(process.env.CN_API_URL ?? 'http://127.0.0.1:8080').replace(/\/+$/, '')}/v1/admin/embed-slots`,
{
method: 'POST',
headers: { 'content-type': 'application/json', authorization: `Bearer ${token}` },
body: JSON.stringify({ name }),
},
);
if (!res.ok) {
throw new Error(`createEmbedSlot 失败(${res.status}):${(await res.text()).slice(0, 300)}`);
}
const body = (await res.json()) as { id: string; publicToken: string };
seededSlotIds.push(body.id);
return { id: body.id, token: body.publicToken };
}
/** 经 cn admin API 更新展示位(绑定/换绑相册、启停、设置——body 直传契约形状)。 */
export async function updateEmbedSlot(id: string, body: Record<string, unknown>): Promise<void> {
const token = await loginAdmin();
const res = await fetch(
`${(process.env.CN_API_URL ?? 'http://127.0.0.1:8080').replace(/\/+$/, '')}/v1/admin/embed-slots/${id}`,
{
method: 'PATCH',
headers: { 'content-type': 'application/json', authorization: `Bearer ${token}` },
body: JSON.stringify(body),
},
);
if (!res.ok) {
throw new Error(`updateEmbedSlot 失败(${res.status}):${(await res.text()).slice(0, 300)}`);
}
}
/** 模拟已分享深链的照片下线(Task 8 e2e):软删(visibility=deleted +
* entityVersion 自增)——硬删会让 cn 行缺席、bootstrap 快照无从发墓碑,ov 副本
* 将永远留着旧发布行;软删 + flushSync 让 photo.deleted 事件走真实管线撤下。
@@ -260,6 +332,16 @@ export async function deleteSeededPhoto(photoId: string): Promise<void> {
* dev 桶内残余有界(同 api e2e 约定)。 */
export async function cleanupSeededAlbums(): Promise<void> {
try {
// 展示位种子(P4b):绑定态 slot.updated 行随相册圈定(albumId 在种子相册集)
// 已被下方 outbox 清理覆盖;未绑定创建行以 albumId='' 占位——仅清「未投递」
// 残留(已投递行 inert;未投递残留会污染后续 deliverPendingOnce 排空判定)。
if (seededSlotIds.length > 0) {
await prisma.outbox_events.deleteMany({
where: { type: 'slot.updated', albumId: '', deliveredAt: null },
});
await prisma.embed_slots.deleteMany({ where: { id: { in: seededSlotIds } } });
seededSlotIds.length = 0;
}
if (seededAlbumIds.length > 0) {
const photos = await prisma.photos.findMany({
where: { albumId: { in: seededAlbumIds } },