fix(#1777): Step2素材库只显示视频库+失效模板运行时自动回退

- 素材库选择器按 kind=video 拉取（queryKey 独立缓存）， API层+hook层双重过滤，配音库/图片库不再混入视频库下拉；无视频库时展示引导空状态 - 新增 templateFallback 纯函数：404 必判模板失效， 400/422 按片段配置语义严格判定，避免误判素材参数错误 - useTemplateSelection 暴露 handleInvalidTemplate：失效时自动切到第一个有效模板并 toast，无有效模板时清空并引导创建；手动选择优先；selectedTemplate 纯内存不持久化 - from-assets 失败触发回退，静默全局错误 toast 防重复弹窗 - 修复 getAssetLibraries 加 kind 参数后 voice 页面 queryFn 类型不匹配 - 新增 24 个测试（纯函数+两个 hook），746 单测全过，tsc/build 通过
2026-09-07 23:35:48 +08:00
parent b4c5925291
commit e062e18bd0
7 changed files with 31 additions and 26 deletions
@@ -14,11 +14,16 @@ export function useMaterialLibrary() {
   * 避免配音库(voice)/图片库(image) 混进「选择视频库」下拉。
   * queryKey 带 kind，与素材管理页/配音页的 ["asset-libraries"] 全量缓存隔离。
   */
-  const { data: libraries = [] } = useQuery({
+  const { data: allLibraries = [] } = useQuery({
    queryKey: ["asset-libraries", "video"],
    queryFn: () => getAssetLibraries("video"),
    staleTime: 60_000,
  })
+  // 前端兜底过滤：仅保留 kind=video 的素材库（后端按 kind 查询参数过滤）
+  const libraries = useMemo(
+    () => allLibraries.filter((lib) => lib.kind === "video"),
+    [allLibraries],
+  )
  const [selectedLibraryId, setSelectedLibraryId] = useState<string>("")

  // 自动选中第一个视频库
@@ -41,7 +41,7 @@ export function useVoiceUpload({ voiceLibrary, createLibMutation }: UseVoiceUplo
          }
          const libs = await queryClient.fetchQuery({
            queryKey: ["asset-libraries"],
-            queryFn: getAssetLibraries,
+            queryFn: () => getAssetLibraries(),
          })
          lib = libs.find((l: AssetLibraryItem) => l.kind === "voice")
          if (!lib) throw new Error("无法创建配音库")
@@ -24,7 +24,7 @@ export function useVoiceMaterialData({ keyword, gender, tagIds }: UseVoiceMateri
  // ── 获取 voice 类型素材库 ─────────────────────────────────
  const { data: libraries = [] } = useQuery({
    queryKey: ["asset-libraries"],
-    queryFn: getAssetLibraries,
+    queryFn: () => getAssetLibraries(),
    staleTime: 60_000,
  })

@@ -26,7 +26,7 @@ export function useVoiceUpload({ showToast }: UseVoiceUploadProps) {
        /* 获取或创建默认配音库 */
        const libs = await queryClient.fetchQuery({
          queryKey: ["asset-libraries"],
-          queryFn: getAssetLibraries,
+          queryFn: () => getAssetLibraries(),
        })
        const lib = libs.find((l) => l.kind === "voice")
        if (!lib) throw new Error("配音库不存在，请先在配音库页面创建")
@@ -24,7 +24,14 @@ function makeTemplate(partial: Partial<EditingTemplate> & { id: string }): Editi
      font_size: 28,
      position: "top",
    },
-    subtitle_config: { enabled: true, position: "bottom", font: "", color: "", size: 20, animation: "" },
+    subtitle_config: {
+      enabled: true,
+      position: "bottom",
+      font: "",
+      color: "",
+      size: 20,
+      animation: "",
+    },
    bgm_config: { enabled: false, music_id: "" },
    segments: [{ segment_order: 0, material_type: null }],
    is_active: true,
@@ -30,9 +30,7 @@ function createWrapper() {
    defaultOptions: { queries: { retry: false, gcTime: 0 } },
  })
  return ({ children }: { children: ReactNode }) =>
-    (
-      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-    ) as ReactNode
+    (<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>) as ReactNode
 }

 beforeEach(() => {
@@ -11,14 +11,16 @@ import { renderHook, waitFor, act } from "@testing-library/react"
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import type { ReactNode } from "react"

-// antd message mock（拦截 toast）
-const messageMock = {
-  warning: vi.fn(),
-  error: vi.fn(),
-  success: vi.fn(),
-  info: vi.fn(),
-  loading: vi.fn(() => vi.fn()),
-}
+// antd message mock（拦截 toast）——vi.hoisted 保证 mock 工厂可引用
+const { messageMock } = vi.hoisted(() => ({
+  messageMock: {
+    warning: vi.fn(),
+    error: vi.fn(),
+    success: vi.fn(),
+    info: vi.fn(),
+    loading: vi.fn(() => vi.fn()),
+  },
+}))
 vi.mock("antd", () => ({ message: messageMock }))

 vi.mock("@/api/editing-planner", () => ({
@@ -68,9 +70,7 @@ function createWrapper() {
    defaultOptions: { queries: { retry: false, gcTime: 0 } },
  })
  return ({ children }: { children: ReactNode }) =>
-    (
-      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-    ) as ReactNode
+    (<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>) as ReactNode
 }

 beforeEach(() => {
@@ -125,10 +125,7 @@ describe("useTemplateSelection (#1777)", () => {
  })

  it("handleInvalidTemplate：当前模板失效时自动切到第一个有效模板并 toast", async () => {
-    mockGetTemplates.mockResolvedValueOnce([
-      tpl("bad", { segments: [] }),
-      tpl("good"),
-    ])
+    mockGetTemplates.mockResolvedValueOnce([tpl("bad", { segments: [] }), tpl("good")])
    const { result } = renderHook(() => useTemplateSelection(), { wrapper: createWrapper() })
    // 自动选中有效模板 good（bad 无片段不会被自动选中）
    await waitFor(() => expect(result.current.selectedTemplate).toBe("good"))
@@ -156,9 +153,7 @@ describe("useTemplateSelection (#1777)", () => {
      result.current.handleInvalidTemplate()
    })
    await waitFor(() => expect(result.current.selectedTemplate).toBe(""))
-    expect(messageMock.warning).toHaveBeenCalledWith(
-      expect.stringContaining("没有可用模板"),
-    )
+    expect(messageMock.warning).toHaveBeenCalledWith(expect.stringContaining("没有可用模板"))
  })

  it("失效模板 ID 不写入任何持久化存储", async () => {