diff --git a/apps/web/src/pages/assets/hooks/asset-operations/batchOperations.ts b/apps/web/src/pages/assets/hooks/asset-operations/batchOperations.ts new file mode 100644 index 000000000..b78a2dcde --- /dev/null +++ b/apps/web/src/pages/assets/hooks/asset-operations/batchOperations.ts @@ -0,0 +1,230 @@ +import { useState, useCallback } from "react" +import { message } from "antd" +import { + batchDeleteAssets, + batchTagAssets, + batchClassifyAssets, + batchMarkAssets, + type BatchOperationResult, +} from "@/api/assets" +import type { SmartViewType } from "../../components/BatchMarkModal" +import { SMART_VIEW_LABELS } from "./constants" + +/* ── 批量删除 ── */ +interface UseBatchDeleteOptions { + selectedIds: Set + invalidateAssets: () => void + showResult: (result: BatchOperationResult, title: string, clear?: boolean) => void +} + +export const useBatchDelete = ({ selectedIds, invalidateAssets, showResult }: UseBatchDeleteOptions) => { + const [batchLoading, setBatchLoading] = useState(false) + + const handleBatchDelete = useCallback(async () => { + const ids = Array.from(selectedIds) + setBatchLoading(true) + try { + const result = await batchDeleteAssets(ids) + invalidateAssets() + showResult(result, "批量删除") + if (result.failure_count === 0) { + message.success(`成功删除 ${result.success_count} 个素材`) + } else { + message.warning( + `删除完成:成功 ${result.success_count} 个,失败 ${result.failure_count} 个`, + ) + } + } catch { + message.error("批量删除失败,请重试") + } finally { + setBatchLoading(false) + } + }, [selectedIds, invalidateAssets, showResult]) + + return { batchLoading, handleBatchDelete } +} + +/* ── 批量打标签 ── */ +interface UseBatchTagOptions { + selectedIds: Set + queryClient: ReturnType + showResult: (result: BatchOperationResult, title: string, clear?: boolean) => void +} + +export const useBatchTag = ({ selectedIds, queryClient, showResult }: UseBatchTagOptions) => { + const [tagModalOpen, setTagModalOpen] = useState(false) + const [batchTagInput, setBatchTagInput] = useState("") + const [batchTags, setBatchTags] = useState([]) + const [tagMode, setTagMode] = useState<"add" | "replace">("add") + const [batchLoading, setBatchLoading] = useState(false) + + const handleBatchTag = useCallback(async () => { + if (batchTags.length === 0) { + message.warning("请至少输入一个标签") + return + } + const ids = Array.from(selectedIds) + setBatchLoading(true) + try { + const result = await batchTagAssets({ + asset_ids: ids, + tags: batchTags, + mode: tagMode, + }) + queryClient.invalidateQueries({ queryKey: ["assets"] }) + showResult(result, "批量打标签") + setTagModalOpen(false) + setBatchTags([]) + setBatchTagInput("") + setTagMode("add") + if (result.failure_count === 0) { + message.success(`成功为 ${result.success_count} 个素材打标签`) + } else { + message.warning( + `打标签完成:成功 ${result.success_count} 个,失败 ${result.failure_count} 个`, + ) + } + } catch { + message.error("批量打标签失败,请重试") + } finally { + setBatchLoading(false) + } + }, [batchTags, selectedIds, tagMode, queryClient, showResult]) + + const handleTagInputKeyDown = useCallback( + (e: React.KeyboardEvent) => { + if (e.key === "Enter" && batchTagInput.trim()) { + e.preventDefault() + const tag = batchTagInput.trim() + if (!batchTags.includes(tag)) { + setBatchTags([...batchTags, tag]) + } + setBatchTagInput("") + } + }, + [batchTagInput, batchTags], + ) + + const removeBatchTag = useCallback( + (tag: string) => { + setBatchTags(batchTags.filter((t) => t !== tag)) + }, + [batchTags], + ) + + return { + tagModalOpen, + setTagModalOpen, + batchTagInput, + setBatchTagInput, + batchTags, + setBatchTags, + tagMode, + setTagMode, + batchLoading, + handleBatchTag, + handleTagInputKeyDown, + removeBatchTag, + } +} + +/* ── 批量改分类 ── */ +interface UseBatchClassifyOptions { + selectedIds: Set + queryClient: ReturnType + showResult: (result: BatchOperationResult, title: string, clear?: boolean) => void +} + +export const useBatchClassify = ({ selectedIds, queryClient, showResult }: UseBatchClassifyOptions) => { + const [classifyModalOpen, setClassifyModalOpen] = useState(false) + const [batchCategory, setBatchCategory] = useState("") + const [batchLoading, setBatchLoading] = useState(false) + + const handleBatchClassify = useCallback(async () => { + if (!batchCategory) { + message.warning("请选择分类") + return + } + const ids = Array.from(selectedIds) + setBatchLoading(true) + try { + const result = await batchClassifyAssets({ + asset_ids: ids, + category: batchCategory, + }) + queryClient.invalidateQueries({ queryKey: ["assets"] }) + showResult(result, "批量改分类") + setClassifyModalOpen(false) + setBatchCategory("") + if (result.failure_count === 0) { + message.success(`成功将 ${result.success_count} 个素材改为「${batchCategory}」`) + } else { + message.warning( + `改分类完成:成功 ${result.success_count} 个,失败 ${result.failure_count} 个`, + ) + } + } catch { + message.error("批量改分类失败,请重试") + } finally { + setBatchLoading(false) + } + }, [batchCategory, selectedIds, queryClient, showResult]) + + return { + classifyModalOpen, + setClassifyModalOpen, + batchCategory, + setBatchCategory, + batchLoading, + handleBatchClassify, + } +} + +/* ── 批量智能标记 ── */ +interface UseBatchMarkOptions { + selectedIds: Set + queryClient: ReturnType + showResult: (result: BatchOperationResult, title: string, clear?: boolean) => void +} + +export const useBatchMark = ({ selectedIds, queryClient, showResult }: UseBatchMarkOptions) => { + const [markModalOpen, setMarkModalOpen] = useState(false) + const [batchSmartView, setBatchSmartView] = useState("recommended") + const [batchLoading, setBatchLoading] = useState(false) + + const handleBatchMark = useCallback(async () => { + const ids = Array.from(selectedIds) + setBatchLoading(true) + try { + const result = await batchMarkAssets({ + asset_ids: ids, + smart_view: batchSmartView, + }) + queryClient.invalidateQueries({ queryKey: ["assets"] }) + showResult(result, "批量智能标记") + setMarkModalOpen(false) + if (result.failure_count === 0) { + message.success( + `成功将 ${result.success_count} 个素材标记为「${SMART_VIEW_LABELS[batchSmartView]}」`, + ) + } else { + message.warning( + `智能标记完成:成功 ${result.success_count} 个,失败 ${result.failure_count} 个`, + ) + } + } catch { + message.error("批量智能标记失败,请重试") + } finally { + setBatchLoading(false) + } + }, [batchSmartView, selectedIds, queryClient, showResult]) + + return { + markModalOpen, + setMarkModalOpen, + batchSmartView, + setBatchSmartView, + batchLoading, + handleBatchMark, + } +} diff --git a/apps/web/src/pages/assets/hooks/asset-operations/constants.ts b/apps/web/src/pages/assets/hooks/asset-operations/constants.ts new file mode 100644 index 000000000..f53b5a923 --- /dev/null +++ b/apps/web/src/pages/assets/hooks/asset-operations/constants.ts @@ -0,0 +1,7 @@ +import type { SmartViewType } from "../../components/BatchMarkModal" + +export const SMART_VIEW_LABELS: Record = { + recommended: "推荐", + caution: "慎用", + high_risk: "高风险", +} diff --git a/apps/web/src/pages/assets/hooks/asset-operations/useSingleOperations.ts b/apps/web/src/pages/assets/hooks/asset-operations/useSingleOperations.ts new file mode 100644 index 000000000..f42be42b1 --- /dev/null +++ b/apps/web/src/pages/assets/hooks/asset-operations/useSingleOperations.ts @@ -0,0 +1,106 @@ +import { useCallback } from "react" +import { useQueryClient } from "@tanstack/react-query" +import { message } from "antd" +import { getAssetDiagnosis, deleteAsset, type BatchOperationResult } from "@/api/assets" +import type { AssetItem } from "../../types" + +interface UseSingleOperationsOptions { + selectedIds: Set + setSelectedIds: (ids: Set) => void +} + +/** + * 单个素材操作 Hook + * 诊断、单个删除 + */ +export const useSingleOperations = ({ + selectedIds, + setSelectedIds, +}: UseSingleOperationsOptions) => { + const queryClient = useQueryClient() + + /* ── 诊断 ── */ + const handleDiagnose = useCallback( + async (asset: AssetItem) => { + // 模拟 loading 状态 + try { + const result = await getAssetDiagnosis(asset.id) + const score = result.readiness_score ?? "-" + message.success(`"${asset.name}" 诊断完成,就绪分:${score}`) + queryClient.invalidateQueries({ queryKey: ["assets"] }) + } catch { + message.error(`"${asset.name}" 诊断失败`) + } + }, + [queryClient], + ) + + /* ── 单个素材删除 ── */ + const handleSingleDelete = useCallback( + async (assetId: string) => { + try { + await deleteAsset(assetId) + queryClient.invalidateQueries({ queryKey: ["assets"] }) + queryClient.invalidateQueries({ queryKey: ["asset-libraries"] }) + // 从选中集合中移除 + setSelectedIds( + (() => { + const next = new Set(selectedIds) + next.delete(assetId) + return next + })(), + ) + message.success("素材已删除") + } catch { + message.error("删除失败,请重试") + } + }, + [queryClient, selectedIds, setSelectedIds], + ) + + return { + handleDiagnose, + handleSingleDelete, + } +} + +interface UseBatchHelpersOptions { + queryClient: ReturnType + setSelectedIds: (ids: Set) => void +} + +/** + * 批量操作辅助函数 + * 刷新数据、显示操作结果 + */ +export const useBatchHelpers = ({ + queryClient, + setSelectedIds, +}: UseBatchHelpersOptions) => { + const invalidateAssets = useCallback(() => { + queryClient.invalidateQueries({ queryKey: ["assets"] }) + queryClient.invalidateQueries({ queryKey: ["asset-libraries"] }) + }, [queryClient]) + + const showOperationResult = useCallback( + ( + setResult: (r: BatchOperationResult | null) => void, + setTitle: (t: string) => void, + setDrawerOpen: (v: boolean) => void, + result: BatchOperationResult, + title: string, + clearSelection = true, + ) => { + setResult(result) + setTitle(title) + setDrawerOpen(true) + if (clearSelection) setSelectedIds(new Set()) + }, + [setSelectedIds], + ) + + return { + invalidateAssets, + showOperationResult, + } +} diff --git a/apps/web/src/pages/assets/hooks/useAssetOperations.ts b/apps/web/src/pages/assets/hooks/useAssetOperations.ts index d1ec91f29..160ca3d23 100644 --- a/apps/web/src/pages/assets/hooks/useAssetOperations.ts +++ b/apps/web/src/pages/assets/hooks/useAssetOperations.ts @@ -1,23 +1,21 @@ +/** + * 素材操作 Hook(入口) + * 组合各子模块,保持导出不变 + * + * 子模块位于 ./asset-operations/ + */ import { useState, useCallback } from "react" import { useQueryClient } from "@tanstack/react-query" -import { message } from "antd" +import { useSingleOperations, useBatchHelpers } from "./asset-operations/useSingleOperations" import { - deleteAsset, - getAssetDiagnosis, - batchDeleteAssets, - batchTagAssets, - batchClassifyAssets, - batchMarkAssets, - type BatchOperationResult, -} from "@/api/assets" -import type { AssetItem } from "../types" + useBatchDelete, + useBatchTag, + useBatchClassify, + useBatchMark, +} from "./asset-operations/batchOperations" +import type { BatchOperationResult } from "@/api/assets" import type { SmartViewType } from "../components/BatchMarkModal" -/** - * 素材操作 Hook - * 封装素材的诊断、删除、批量打标签、批量改分类、批量智能标记等操作, - * 以及相关弹窗和结果展示的状态管理 - */ interface UseAssetOperationsProps { selectedIds: Set setSelectedIds: (ids: Set) => void @@ -29,78 +27,35 @@ export function useAssetOperations({ selectedIds, setSelectedIds }: UseAssetOper /* ── 诊断状态 ── */ const [diagnosingId, setDiagnosingId] = useState(null) - /* ── 批量操作弹窗状态 ── */ - const [tagModalOpen, setTagModalOpen] = useState(false) - const [classifyModalOpen, setClassifyModalOpen] = useState(false) - const [markModalOpen, setMarkModalOpen] = useState(false) - const [resultDrawerOpen, setResultDrawerOpen] = useState(false) - - /* ── 批量打标签表单 ── */ - const [batchTagInput, setBatchTagInput] = useState("") - const [batchTags, setBatchTags] = useState([]) - const [tagMode, setTagMode] = useState<"add" | "replace">("add") - - /* ── 批量改分类表单 ── */ - const [batchCategory, setBatchCategory] = useState("") - - /* ── 批量智能标记表单 ── */ - const [batchSmartView, setBatchSmartView] = useState("recommended") - /* ── 操作结果 ── */ + const [resultDrawerOpen, setResultDrawerOpen] = useState(false) const [operationResult, setOperationResult] = useState(null) const [operationTitle, setOperationTitle] = useState("") - /* ── 批量操作 loading ── */ - const [batchLoading, setBatchLoading] = useState(false) + /* ── 单个操作 ── */ + const { handleDiagnose: handleDiagnoseRaw, handleSingleDelete } = useSingleOperations({ + selectedIds, + setSelectedIds, + }) - /* ── 刷新数据辅助函数 ── */ - const invalidateAssets = useCallback(() => { - queryClient.invalidateQueries({ queryKey: ["assets"] }) - queryClient.invalidateQueries({ queryKey: ["asset-libraries"] }) - }, [queryClient]) - - /* ── 诊断 ── */ + // 包装一下,加上 diagnosingId 状态 const handleDiagnose = useCallback( - async (asset: AssetItem) => { + async (asset: Parameters[0]) => { setDiagnosingId(asset.id) try { - const result = await getAssetDiagnosis(asset.id) - const score = result.readiness_score ?? "-" - message.success(`"${asset.name}" 诊断完成,就绪分:${score}`) - queryClient.invalidateQueries({ queryKey: ["assets"] }) - } catch { - message.error(`"${asset.name}" 诊断失败`) + await handleDiagnoseRaw(asset) } finally { setDiagnosingId(null) } }, - [queryClient], + [handleDiagnoseRaw], ) - /* ── 单个素材删除 ── */ - const handleSingleDelete = useCallback( - async (assetId: string) => { - try { - await deleteAsset(assetId) - invalidateAssets() - // 从选中集合中移除 - setSelectedIds( - (() => { - const next = new Set(selectedIds) - next.delete(assetId) - return next - })(), - ) - message.success("素材已删除") - } catch { - message.error("删除失败,请重试") - } - }, - [invalidateAssets, selectedIds, setSelectedIds], - ) + /* ── 批量操作辅助 ── */ + const { invalidateAssets } = useBatchHelpers({ queryClient, setSelectedIds }) - /* ── 显示操作结果 ── */ - const showOperationResult = useCallback( + // 包装 showResult 适配子模块的接口 + const showResult = useCallback( (result: BatchOperationResult, title: string, clearSelection = true) => { setOperationResult(result) setOperationTitle(title) @@ -110,147 +65,20 @@ export function useAssetOperations({ selectedIds, setSelectedIds }: UseAssetOper [setSelectedIds], ) - /* ── 批量删除 ── */ - const handleBatchDelete = useCallback(async () => { - const ids = Array.from(selectedIds) - setBatchLoading(true) - try { - const result = await batchDeleteAssets(ids) - invalidateAssets() - showOperationResult(result, "批量删除") - if (result.failure_count === 0) { - message.success(`成功删除 ${result.success_count} 个素材`) - } else { - message.warning( - `删除完成:成功 ${result.success_count} 个,失败 ${result.failure_count} 个`, - ) - } - } catch { - message.error("批量删除失败,请重试") - } finally { - setBatchLoading(false) - } - }, [selectedIds, invalidateAssets, showOperationResult]) + /* ── 批量操作 ── */ + const { batchLoading: deleteLoading, handleBatchDelete } = useBatchDelete({ + selectedIds, + invalidateAssets, + showResult, + }) - /* ── 批量打标签 ── */ - const handleBatchTag = useCallback(async () => { - if (batchTags.length === 0) { - message.warning("请至少输入一个标签") - return - } - const ids = Array.from(selectedIds) - setBatchLoading(true) - try { - const result = await batchTagAssets({ - asset_ids: ids, - tags: batchTags, - mode: tagMode, - }) - queryClient.invalidateQueries({ queryKey: ["assets"] }) - showOperationResult(result, "批量打标签") - setTagModalOpen(false) - setBatchTags([]) - setBatchTagInput("") - setTagMode("add") - if (result.failure_count === 0) { - message.success(`成功为 ${result.success_count} 个素材打标签`) - } else { - message.warning( - `打标签完成:成功 ${result.success_count} 个,失败 ${result.failure_count} 个`, - ) - } - } catch { - message.error("批量打标签失败,请重试") - } finally { - setBatchLoading(false) - } - }, [batchTags, selectedIds, tagMode, queryClient, showOperationResult]) + const tagResult = useBatchTag({ selectedIds, queryClient, showResult }) + const classifyResult = useBatchClassify({ selectedIds, queryClient, showResult }) + const markResult = useBatchMark({ selectedIds, queryClient, showResult }) - /* ── 标签输入处理 ── */ - const handleTagInputKeyDown = useCallback( - (e: React.KeyboardEvent) => { - if (e.key === "Enter" && batchTagInput.trim()) { - e.preventDefault() - const tag = batchTagInput.trim() - if (!batchTags.includes(tag)) { - setBatchTags([...batchTags, tag]) - } - setBatchTagInput("") - } - }, - [batchTagInput, batchTags], - ) - - const removeBatchTag = useCallback( - (tag: string) => { - setBatchTags(batchTags.filter((t) => t !== tag)) - }, - [batchTags], - ) - - /* ── 批量改分类 ── */ - const handleBatchClassify = useCallback(async () => { - if (!batchCategory) { - message.warning("请选择分类") - return - } - const ids = Array.from(selectedIds) - setBatchLoading(true) - try { - const result = await batchClassifyAssets({ - asset_ids: ids, - category: batchCategory, - }) - queryClient.invalidateQueries({ queryKey: ["assets"] }) - showOperationResult(result, "批量改分类") - setClassifyModalOpen(false) - setBatchCategory("") - if (result.failure_count === 0) { - message.success(`成功将 ${result.success_count} 个素材改为「${batchCategory}」`) - } else { - message.warning( - `改分类完成:成功 ${result.success_count} 个,失败 ${result.failure_count} 个`, - ) - } - } catch { - message.error("批量改分类失败,请重试") - } finally { - setBatchLoading(false) - } - }, [batchCategory, selectedIds, queryClient, showOperationResult]) - - /* ── 批量智能标记 ── */ - const handleBatchMark = useCallback(async () => { - const ids = Array.from(selectedIds) - setBatchLoading(true) - try { - const result = await batchMarkAssets({ - asset_ids: ids, - smart_view: batchSmartView, - }) - queryClient.invalidateQueries({ queryKey: ["assets"] }) - showOperationResult(result, "批量智能标记") - setMarkModalOpen(false) - const labelMap: Record = { - recommended: "推荐", - caution: "慎用", - high_risk: "高风险", - } - if (result.failure_count === 0) { - message.success( - `成功将 ${result.success_count} 个素材标记为「${labelMap[batchSmartView]}」`, - ) - } else { - message.warning( - `智能标记完成:成功 ${result.success_count} 个,失败 ${result.failure_count} 个`, - ) - } - } catch { - message.error("批量智能标记失败,请重试") - } finally { - setBatchLoading(false) - } - }, [batchSmartView, selectedIds, queryClient, showOperationResult]) + // 取任一批量操作的 loading 状态(任意一个在加载都算加载中) + const batchLoading = + deleteLoading || tagResult.batchLoading || classifyResult.batchLoading || markResult.batchLoading /* ── 关闭结果 Drawer ── */ const handleResultDrawerClose = useCallback(() => { @@ -267,29 +95,29 @@ export function useAssetOperations({ selectedIds, setSelectedIds }: UseAssetOper // 批量操作 loading batchLoading, // 批量打标签 - tagModalOpen, - setTagModalOpen, - batchTagInput, - setBatchTagInput, - batchTags, - setBatchTags, - tagMode, - setTagMode, - handleBatchTag, - handleTagInputKeyDown, - removeBatchTag, + tagModalOpen: tagResult.tagModalOpen, + setTagModalOpen: tagResult.setTagModalOpen, + batchTagInput: tagResult.batchTagInput, + setBatchTagInput: tagResult.setBatchTagInput, + batchTags: tagResult.batchTags, + setBatchTags: tagResult.setBatchTags, + tagMode: tagResult.tagMode, + setTagMode: tagResult.setTagMode, + handleBatchTag: tagResult.handleBatchTag, + handleTagInputKeyDown: tagResult.handleTagInputKeyDown, + removeBatchTag: tagResult.removeBatchTag, // 批量改分类 - classifyModalOpen, - setClassifyModalOpen, - batchCategory, - setBatchCategory, - handleBatchClassify, + classifyModalOpen: classifyResult.classifyModalOpen, + setClassifyModalOpen: classifyResult.setClassifyModalOpen, + batchCategory: classifyResult.batchCategory, + setBatchCategory: classifyResult.setBatchCategory, + handleBatchClassify: classifyResult.handleBatchClassify, // 批量智能标记 - markModalOpen, - setMarkModalOpen, - batchSmartView, - setBatchSmartView, - handleBatchMark, + markModalOpen: markResult.markModalOpen, + setMarkModalOpen: markResult.setMarkModalOpen, + batchSmartView: markResult.batchSmartView as SmartViewType, + setBatchSmartView: markResult.setBatchSmartView, + handleBatchMark: markResult.handleBatchMark, // 批量删除 handleBatchDelete, // 操作结果