feat: harden recording lifecycle and refresh fnOS UI

2026-08-03 23:45:26 +08:00
parent e5b50ea85c
commit ecc737f0bd
90 changed files with 6995 additions and 1826 deletions
@@ -0,0 +1,502 @@
+import { expect, test, type Page, type TestInfo } from "@playwright/test";
+
+const now = "2026-08-02T12:00:00Z";
+const room = {
+  id: "room-1",
+  platform: 0,
+  platformName: "哔哩哔哩",
+  sourceUrl: "https://live.example/123",
+  originalLiveRoomUrl: "https://live.example/123",
+  normalizedUrl: "https://live.example/123",
+  roomId: "123456",
+  title: "夏日音乐直播间",
+  anchorName: "示例主播",
+  isPinned: true,
+  isPriority: false,
+  overrides: {},
+  effectiveSettings: {
+    preferredQuality: "origin",
+    outputFormat: 0,
+    saveMode: 1,
+    recordingTemplate: 0,
+    segmentDurationMinutes: 30,
+    enableAutoReconnect: true,
+    reconnectDelayMaxSeconds: 60,
+    readWriteTimeoutMilliseconds: 30000,
+    enableDanmakuRecording: true,
+    danmakuIncludeNonChatEvents: false,
+    danmakuMinPollIntervalMilliseconds: 1000,
+    danmakuRetryDelayMaxSeconds: 30
+  },
+  isEnabled: true,
+  availabilityStatus: 2,
+  currentRecordingState: 2,
+  lastAutoStartDecisionCode: "started",
+  lastAutoStartDecisionSummary: "已自动开始录制",
+  lastAutoStartDecisionDetail: "直播状态确认后创建录制会话。",
+  lastAutoStartDecisionAt: now,
+  lastCheckedAt: now,
+  createdAt: now,
+  updatedAt: now
+};
+
+const task = {
+  id: "task-1",
+  liveRoomId: room.id,
+  recordSessionId: "session-12345678",
+  segmentIndex: 1,
+  liveRoomTitle: room.title,
+  platform: 0,
+  roomId: room.roomId,
+  status: 4,
+  preferredQuality: "origin",
+  outputFormat: 0,
+  outputFilePath: "/volume1/录制/示例主播/2026-08-02/分片-001.mp4",
+  createdAt: now,
+  startedAt: now,
+  endedAt: now,
+  durationSeconds: 1800,
+  uploadStatus: 0
+};
+
+const session = {
+  id: "session-12345678",
+  liveRoomId: room.id,
+  liveRoomTitle: room.title,
+  platform: 0,
+  roomId: room.roomId,
+  status: 4,
+  preferredQuality: "origin",
+  outputFormat: 0,
+  saveMode: 1,
+  activeSegmentIndex: 0,
+  segmentCount: 1,
+  createdAt: now,
+  startedAt: now,
+  endedAt: now,
+  totalFileSizeBytes: 8_589_934_592,
+  totalDanmakuMessageCount: 2680,
+  uploadedSegmentCount: 0,
+  failedUploadSegmentCount: 0,
+  uploadingSegmentCount: 0,
+  tasks: [task]
+};
+
+const uploadTask = {
+  recordTaskId: task.id,
+  recordSessionId: session.id,
+  liveRoomId: room.id,
+  liveRoomTitle: room.title,
+  platform: room.platform,
+  roomId: room.roomId,
+  segmentIndex: 1,
+  outputFormat: 0,
+  filePath: task.outputFilePath,
+  fileSizeBytes: 8_589_934_592,
+  uploadStatus: 0,
+  uploadProgressPercent: 0,
+  uploadAttemptCount: 0,
+  createdAt: now
+};
+
+const dashboard = {
+  activeRecordingCount: 1,
+  liveRoomCount: 3,
+  offlineRoomCount: 5,
+  totalRoomCount: 8,
+  todayRecordingSeconds: 12600,
+  todayDataBytes: 32_212_254_720,
+  todayDanmakuCount: 12860,
+  activeSessionCount: 1,
+  recentErrorCount: 2,
+  currentErrorCount: 0,
+  storageStatus: {
+    isEnabled: true,
+    isAvailable: true,
+    hasEnoughSpace: true,
+    message: "空间充足",
+    checkedPath: "/volume1/录制/示例主播/2026-08-02",
+    totalBytes: 1_000_000_000_000,
+    usedBytes: 750_000_000_000,
+    availableBytes: 250_000_000_000,
+    requiredBytes: 100_000_000_000,
+    tier: "Green",
+    usagePercent: 75,
+    freePercent: 25,
+    greenThresholdPercent: 30,
+    redThresholdPercent: 10
+  },
+  recentSessions: [session],
+  topRooms: [{ liveRoomId: room.id, title: room.title, anchorName: room.anchorName, platformName: room.platformName, roomId: room.roomId, sessionCount: 1, totalDurationSeconds: 12600 }],
+  pendingTranscodeCount: 2,
+  pendingUploadCount: 3,
+  queuedDataBytes: 4_294_967_296
+};
+
+async function mockApi(page: Page) {
+  await page.addInitScript(() => {
+    localStorage.setItem("live-recorder-token", "e2e-token");
+    localStorage.setItem("live-recorder-user", JSON.stringify({
+      userId: "e2e-user",
+      username: "tester",
+      displayName: "界面测试"
+    }));
+  });
+
+  await page.route(/^http:\/\/127\.0\.0\.1:47173\/api\//, async (route) => {
+    const url = new URL(route.request().url());
+    const path = url.pathname;
+    let body: unknown = {};
+
+    if (path === "/api/dashboard") body = dashboard;
+    else if (path === "/api/live-rooms") body = [room];
+    else if (path === "/api/record-sessions/page") body = {
+      items: [session],
+      totalCount: 1,
+      skip: 0,
+      take: 20,
+      totalSessionCount: 1,
+      activeSessionCount: 0,
+      totalTaskCount: 1,
+      totalDanmakuCount: session.totalDanmakuMessageCount
+    };
+    else if (path === "/api/record-sessions") body = [session];
+    else if (path === "/api/record-tasks/upload-status") body = {
+      items: [uploadTask],
+      totalCount: 1,
+      notUploadedCount: 1,
+      failedArtifactCount: 0,
+      succeededCount: 0,
+      failedCount: 0,
+      queuedCount: 0,
+      uploadingCount: 0,
+      waitingRetryCount: 0
+    };
+    else if (path === "/api/settings") body = {};
+    else if (path.includes("/record-sessions/stream")) {
+      await route.fulfill({ status: 200, contentType: "text/event-stream", body: "" });
+      return;
+    }
+
+    await route.fulfill({ status: 200, contentType: "application/json", body: JSON.stringify(body) });
+  });
+}
+
+async function expectNoDocumentOverflow(page: Page) {
+  await expect.poll(() => page.evaluate(() => ({
+    scrollWidth: document.documentElement.scrollWidth,
+    clientWidth: document.documentElement.clientWidth
+  }))).toEqual(await page.evaluate(() => ({
+    scrollWidth: document.documentElement.clientWidth,
+    clientWidth: document.documentElement.clientWidth
+  })));
+}
+
+async function capture(page: Page, testInfo: TestInfo, name: string) {
+  await page.screenshot({ path: testInfo.outputPath(`${name}.png`), fullPage: true });
+}
+
+test.beforeEach(async ({ page }) => {
+  page.on("pageerror", (error) => console.error("[browser pageerror]", error.message));
+  page.on("console", (message) => {
+    if (message.type() === "error") console.error("[browser console]", message.text());
+  });
+  await mockApi(page);
+});
+
+test("dashboard keeps storage semantics and the shell within the viewport", async ({ page }, testInfo) => {
+  await page.goto("/");
+  await expect(page.getByRole("heading", { name: "仪表盘" })).toBeVisible();
+  const storage = page.getByTestId("storage-capacity");
+  await expect(storage).toContainText("75.0%");
+  await expect(storage).toContainText("已使用");
+  await expect(storage).toContainText("25.0%");
+  await expectNoDocumentOverflow(page);
+  await capture(page, testInfo, "dashboard");
+});
+
+test("live room table, drawer and dialog retain their final actions", async ({ page }, testInfo) => {
+  await page.goto("/live-rooms");
+  await expect(page.getByRole("heading", { name: "直播间列表" })).toBeVisible();
+  await expectNoDocumentOverflow(page);
+
+  if ((page.viewportSize()?.width ?? 0) >= 768) {
+    const actionHeader = page.getByRole("columnheader", { name: "操作" }).last();
+    await expect(actionHeader).toBeVisible();
+    const box = await actionHeader.boundingBox();
+    expect(box && box.x + box.width).toBeLessThanOrEqual((page.viewportSize()?.width ?? 0) + 1);
+  }
+
+  await page.getByRole("button", { name: /^查看/ }).first().click();
+  const drawerFooter = page.locator(".right-drawer__footer");
+  await expect(drawerFooter).toBeVisible();
+  const footerBox = await drawerFooter.boundingBox();
+  expect(footerBox && footerBox.y + footerBox.height).toBeLessThanOrEqual((page.viewportSize()?.height ?? 0) + 1);
+  await page.getByRole("button", { name: "关闭", exact: true }).click();
+  await expect(drawerFooter).toBeHidden();
+
+  await page.getByRole("button", { name: "新增直播间" }).click();
+  const dialogFooter = page.locator(".el-dialog__footer");
+  await expect(dialogFooter).toBeVisible();
+  const dialogFooterBox = await dialogFooter.boundingBox();
+  expect(dialogFooterBox && dialogFooterBox.y + dialogFooterBox.height).toBeLessThanOrEqual((page.viewportSize()?.height ?? 0) + 1);
+  await page.getByRole("button", { name: "取消", exact: true }).click();
+  await expect(dialogFooter).toBeHidden();
+  await capture(page, testInfo, "live-rooms");
+});
+
+test("mobile live room list paginates large collections", async ({ page }) => {
+  test.skip((page.viewportSize()?.width ?? 0) >= 768, "mobile-only pagination contract");
+  const manyRooms = Array.from({ length: 25 }, (_, index) => ({
+    ...room,
+    id: `room-${index + 1}`,
+    roomId: String(100000 + index + 1),
+    title: `分页直播间 ${index + 1}`,
+    anchorName: `分页主播 ${index + 1}`
+  }));
+  await page.route("**/api/live-rooms", async (route) => {
+    await route.fulfill({ status: 200, contentType: "application/json", body: JSON.stringify(manyRooms) });
+  });
+
+  await page.goto("/live-rooms");
+  await expect(page.locator(".room-card")).toHaveCount(12);
+  await expect(page.getByText("分页直播间 1", { exact: true })).toBeVisible();
+  await page.locator(".mobile-room-pagination .btn-next").click();
+  await expect(page.getByText("分页直播间 13", { exact: true })).toBeVisible();
+  await expect(page.locator(".room-card")).toHaveCount(12);
+});
+
+test("record task cards and tables expose one primary action", async ({ page }, testInfo) => {
+  await page.goto("/record-tasks");
+  await expect(page.getByRole("heading", { name: "录制任务" })).toBeVisible();
+  await expect(page.getByPlaceholder(/搜索直播间/)).toBeVisible();
+  await expect(page.getByRole("button", { name: /查看/ }).first()).toBeVisible();
+  await expect(page.getByRole("button", { name: /更多/ }).first()).toBeVisible();
+  await expectNoDocumentOverflow(page);
+  await capture(page, testInfo, "record-tasks");
+});
+
+test("record sessions paginate on the server and bound the rendered page", async ({ page }) => {
+  const allSessions = Array.from({ length: 200 }, (_, index) => ({
+    ...session,
+    id: `session-${index + 1}`,
+    liveRoomTitle: `分页录制会话 ${index + 1}`,
+    roomId: String(200000 + index + 1),
+    tasks: [{ ...task, id: `task-${index + 1}`, recordSessionId: `session-${index + 1}` }]
+  }));
+  const requests: Array<{ skip: number; take: number }> = [];
+
+  await page.route("**/api/record-sessions/page**", async (route) => {
+    const url = new URL(route.request().url());
+    const skip = Number(url.searchParams.get("skip") || 0);
+    const take = Number(url.searchParams.get("take") || 20);
+    requests.push({ skip, take });
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify({
+        items: allSessions.slice(skip, skip + take),
+        totalCount: allSessions.length,
+        skip,
+        take,
+        totalSessionCount: allSessions.length,
+        activeSessionCount: 0,
+        totalTaskCount: allSessions.length,
+        totalDanmakuCount: allSessions.length * session.totalDanmakuMessageCount
+      })
+    });
+  });
+
+  await page.goto("/record-tasks");
+  const expectedPageSize = (page.viewportSize()?.width ?? 0) < 768 ? 12 : 20;
+  await expect.poll(() => requests.length).toBeGreaterThan(0);
+  expect(requests[0]).toEqual({ skip: 0, take: expectedPageSize });
+  await expect(page.getByText("当前页 " + expectedPageSize + " / 共 200")).toBeVisible();
+  await expect(page.locator((page.viewportSize()?.width ?? 0) < 768 ? ".session-card" : ".session-panel"))
+    .toHaveCount(expectedPageSize);
+  const renderedNodeCount = await page.evaluate(() => document.getElementsByTagName("*").length);
+  expect(renderedNodeCount).toBeLessThan(5_000);
+
+  await page.locator(".session-pagination .btn-next").click();
+  await expect.poll(() => requests.some((item) => item.skip === expectedPageSize)).toBeTruthy();
+  await expect(page.getByText(`分页录制会话 ${expectedPageSize + 1}`, { exact: true })).toBeVisible();
+});
+
+test("mobile record session refresh keeps the current page and scroll position", async ({ page }) => {
+  test.skip((page.viewportSize()?.width ?? 0) >= 768, "mobile refresh contract");
+
+  await page.addInitScript(() => {
+    class MockEventSource {
+      onopen: ((event: Event) => void) | null = null;
+      onerror: ((event: Event) => void) | null = null;
+      private listeners = new Map<string, Array<(event: Event) => void>>();
+
+      constructor() {
+        (window as any).__recordSessionEventSource = this;
+        window.setTimeout(() => this.onopen?.(new Event("open")), 0);
+      }
+
+      addEventListener(type: string, listener: EventListenerOrEventListenerObject) {
+        const callback = typeof listener === "function"
+          ? listener
+          : (event: Event) => listener.handleEvent(event);
+        this.listeners.set(type, [...(this.listeners.get(type) ?? []), callback]);
+      }
+
+      emit(type: string) {
+        this.listeners.get(type)?.forEach((listener) => listener(new MessageEvent(type, { data: "{}" })));
+      }
+
+      close() {}
+    }
+
+    Object.defineProperty(window, "EventSource", { configurable: true, value: MockEventSource });
+    (window as any).__emitRecordSessionRefresh = () =>
+      (window as any).__recordSessionEventSource?.emit("refresh");
+  });
+
+  const allSessions = Array.from({ length: 60 }, (_, index) => ({
+    ...session,
+    id: `refresh-session-${index + 1}`,
+    liveRoomTitle: `刷新录制会话 ${index + 1}`,
+    tasks: [{ ...task, id: `refresh-task-${index + 1}`, recordSessionId: `refresh-session-${index + 1}` }]
+  }));
+  let requestCount = 0;
+  await page.route("**/api/record-sessions/page**", async (route) => {
+    requestCount++;
+    const url = new URL(route.request().url());
+    const skip = Number(url.searchParams.get("skip") || 0);
+    const take = Number(url.searchParams.get("take") || 12);
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify({
+        items: allSessions.slice(skip, skip + take),
+        totalCount: allSessions.length,
+        skip,
+        take,
+        totalSessionCount: allSessions.length,
+        activeSessionCount: 0,
+        totalTaskCount: allSessions.length,
+        totalDanmakuCount: 0
+      })
+    });
+  });
+
+  await page.goto("/record-tasks");
+  await expect(page.locator(".session-card")).toHaveCount(12);
+  const main = page.locator(".app-main");
+  await main.evaluate((element) => { element.scrollTop = element.scrollHeight; });
+  const scrollTopBefore = await main.evaluate((element) => element.scrollTop);
+  expect(scrollTopBefore).toBeGreaterThan(500);
+
+  await page.evaluate(() => (window as any).__emitRecordSessionRefresh());
+  await expect.poll(() => requestCount).toBeGreaterThan(1);
+  await expect(page.locator(".session-card")).toHaveCount(12);
+  const scrollTopAfter = await main.evaluate((element) => element.scrollTop);
+  expect(Math.abs(scrollTopAfter - scrollTopBefore)).toBeLessThanOrEqual(2);
+});
+
+test("upload tasks use cards on mobile and never require table horizontal scrolling", async ({ page }, testInfo) => {
+  await page.goto("/upload-tasks");
+  await expect(page.getByRole("heading", { name: "上传任务" })).toBeVisible();
+  await expect(page.getByPlaceholder(/搜索直播间/)).toBeVisible();
+  await expect(page.getByText(task.outputFilePath, { exact: true })).toBeVisible();
+  await expectNoDocumentOverflow(page);
+
+  if ((page.viewportSize()?.width ?? 0) < 1280) {
+    await expect(page.locator(".upload-item-card")).toBeVisible();
+    await expect(page.locator(".upload-table")).toHaveCount(0);
+    await expect(page.getByRole("button", { name: "查看详情" })).toBeVisible();
+    await expect(page.getByRole("button", { name: "立即上传" })).toBeVisible();
+  } else {
+    await expect(page.getByRole("columnheader", { name: "操作" })).toBeVisible();
+    const tableScroll = page.locator(".upload-table .el-scrollbar__wrap");
+    await expect(tableScroll).toBeVisible();
+    const dimensions = await tableScroll.evaluate((element) => ({
+      clientWidth: element.clientWidth,
+      scrollWidth: element.scrollWidth
+    }));
+    expect(dimensions.scrollWidth).toBeLessThanOrEqual(dimensions.clientWidth + 1);
+    const uploadButton = page.getByRole("button", { name: "上传", exact: true });
+    await expect(uploadButton).toBeVisible();
+    const uploadButtonBox = await uploadButton.boundingBox();
+    expect(uploadButtonBox && uploadButtonBox.x + uploadButtonBox.width)
+      .toBeLessThanOrEqual((page.viewportSize()?.width ?? 0) + 1);
+  }
+
+  await capture(page, testInfo, "upload-tasks");
+});
+
+test("mobile upload polling keeps cards and scroll position while progress updates", async ({ page }) => {
+  test.skip((page.viewportSize()?.width ?? 0) >= 768, "mobile polling contract");
+
+  const allItems = Array.from({ length: 60 }, (_, index) => ({
+    ...uploadTask,
+    recordTaskId: `upload-task-${index + 1}`,
+    segmentIndex: index + 1,
+    liveRoomTitle: `轮询直播间 ${index + 1}`,
+    uploadStatus: 3,
+    uploadProgressPercent: 10
+  }));
+  let requestCount = 0;
+  let inFlight = 0;
+  let maxInFlight = 0;
+
+  await page.route("**/api/record-tasks/upload-status**", async (route) => {
+    requestCount++;
+    inFlight++;
+    maxInFlight = Math.max(maxInFlight, inFlight);
+    const url = new URL(route.request().url());
+    const skip = Number(url.searchParams.get("skip") || 0);
+    const take = Number(url.searchParams.get("take") || 50);
+    if (requestCount > 1) {
+      await new Promise((resolve) => setTimeout(resolve, 500));
+    }
+    const progress = requestCount > 1 ? 42 : 10;
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify({
+        items: allItems.slice(skip, skip + take).map((item) => ({ ...item, uploadProgressPercent: progress })),
+        totalCount: allItems.length,
+        notUploadedCount: 0,
+        failedArtifactCount: 0,
+        succeededCount: 0,
+        failedCount: 0,
+        queuedCount: 0,
+        uploadingCount: allItems.length,
+        waitingRetryCount: 0
+      })
+    });
+    inFlight--;
+  });
+
+  await page.goto("/upload-tasks");
+  await expect(page.locator(".upload-item-card")).toHaveCount(12);
+  await expect(page.getByText("10.0% · 第 0 次").first()).toBeVisible();
+
+  const main = page.locator(".app-main");
+  await main.evaluate((element) => { element.scrollTop = element.scrollHeight; });
+  const scrollTopBefore = await main.evaluate((element) => element.scrollTop);
+  expect(scrollTopBefore).toBeGreaterThan(500);
+
+  await expect.poll(() => requestCount, { timeout: 10_000 }).toBeGreaterThan(1);
+  await expect(page.locator(".upload-item-card")).toHaveCount(12);
+  await expect(page.locator(".el-skeleton")).toHaveCount(0);
+  await expect(page.getByText("42.0% · 第 0 次").first()).toBeVisible();
+
+  const scrollTopAfter = await main.evaluate((element) => element.scrollTop);
+  expect(Math.abs(scrollTopAfter - scrollTopBefore)).toBeLessThanOrEqual(2);
+  expect(maxInFlight).toBe(1);
+});
+
+test("settings layer advanced controls without clipping the quick bar", async ({ page }, testInfo) => {
+  await page.goto("/settings/recording");
+  await expect(page.getByRole("heading", { name: "系统设置" })).toBeVisible();
+  await expect(page.getByRole("heading", { name: "保留清理" })).toBeHidden();
+  await page.getByText("高级设置", { exact: true }).click();
+  await expect(page.getByRole("heading", { name: "保留清理" })).toBeVisible();
+  await expectNoDocumentOverflow(page);
+  await capture(page, testInfo, "settings");
+});