Files
xiaoxia-saas/apps/web/src/pages/assets/components/AssetModals.tsx
T
xiaoxia db733a1574
CI/CD Pipeline / Check if frontend-only change (push) Has been cancelled
CI/CD Pipeline / Validate - Code Quality (push) Has been cancelled
CI/CD Pipeline / Validate - Type Check (mypy) (push) Has been cancelled
CI/CD Pipeline / Validate - Migration (alembic) (push) Has been cancelled
CI/CD Pipeline / Unit Tests (push) Has been cancelled
CI/CD Pipeline / Integration Tests (push) Has been cancelled
CI/CD Pipeline / Frontend Lint (push) Has been cancelled
CI/CD Pipeline / Frontend Unit Tests (push) Has been cancelled
CI/CD Pipeline / PR Build API Image (push) Has been cancelled
CI/CD Pipeline / PR Build Web Image (push) Has been cancelled
CI/CD Pipeline / PR Build Worker Image (push) Has been cancelled
CI/CD Pipeline / Build Staging API Image (push) Has been cancelled
CI/CD Pipeline / Build Staging Web Image (push) Has been cancelled
CI/CD Pipeline / Build Staging Worker Image (push) Has been cancelled
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (push) Has been cancelled
CI/CD Pipeline / Staging E2E Tests (push) Has been cancelled
CI/CD Pipeline / Staging API Integration Tests (push) Has been cancelled
CI/CD Pipeline / Build Production API Image (push) Has been cancelled
CI/CD Pipeline / Build Production Web Image (push) Has been cancelled
CI/CD Pipeline / Build Production Worker Image (push) Has been cancelled
CI/CD Pipeline / Deploy Production (push) Has been cancelled
CI/CD Pipeline / Production Browser E2E (push) Has been cancelled
CI/CD Pipeline / ACR Image Cleanup (push) Has been cancelled
CI/CD Pipeline / Canary Release to Production (push) Has been cancelled
CI/CD Pipeline / CI Gate (push) Has been cancelled
refactor(asset-library): 深化拆分,抽离上传区/网格区/弹窗集合 (#994)
2026-07-27 16:32:49 +08:00

180 lines
4.5 KiB
TypeScript

/**
* AssetLibrary 弹窗集合
*/
import React from "react"
import type { AssetItem, AssetKind } from "../types"
import type { SmartViewType } from "./BatchMarkModal"
import type { BatchOperationResult } from "@/api/assets"
import CreateLibraryModal from "./CreateLibraryModal"
import PlayModal from "./PlayModal"
import BatchTagModal from "./BatchTagModal"
import BatchClassifyModal from "./BatchClassifyModal"
import BatchMarkModal from "./BatchMarkModal"
import ResultDrawer from "./ResultDrawer"
import UploadProgressModal from "./UploadProgressModal"
export interface AssetModalsProps {
/* 上传进度 */
uploading: boolean
uploadProgress: number
/* 新建视频库 */
createModalOpen: boolean
onCreateModalCancel: () => void
onCreateModalOk: () => void
newLibName: string
onNewLibNameChange: (name: string) => void
newLibKind: AssetKind
onNewLibKindChange: (kind: AssetKind) => void
createLoading: boolean
/* 播放弹窗 */
playingAsset: AssetItem | null
onPlayClose: () => void
/* 批量打标签 */
tagModalOpen: boolean
selectedCount: number
onTagCancel: () => void
onTagOk: () => void
batchTags: string[]
batchTagInput: string
onTagInputChange: (val: string) => void
onTagInputKeyDown: (e: React.KeyboardEvent) => void
onRemoveTag: (tag: string) => void
tagMode: "add" | "replace"
onTagModeChange: (mode: "add" | "replace") => void
batchLoading: boolean
/* 批量改分类 */
classifyModalOpen: boolean
onClassifyCancel: () => void
onClassifyOk: () => void
batchCategory: string
onCategoryChange: (val: string) => void
/* 批量智能标记 */
markModalOpen: boolean
onMarkCancel: () => void
onMarkOk: () => void
batchSmartView: SmartViewType
onSmartViewChange: (val: SmartViewType) => void
/* 操作结果 Drawer */
resultDrawerOpen: boolean
operationTitle: string
operationResult: BatchOperationResult | null
onResultDrawerClose: () => void
}
export const AssetModals: React.FC<AssetModalsProps> = ({
uploading,
uploadProgress,
createModalOpen,
onCreateModalCancel,
onCreateModalOk,
newLibName,
onNewLibNameChange,
newLibKind,
onNewLibKindChange,
createLoading,
playingAsset,
onPlayClose,
tagModalOpen,
selectedCount,
onTagCancel,
onTagOk,
batchTags,
batchTagInput,
onTagInputChange,
onTagInputKeyDown,
onRemoveTag,
tagMode,
onTagModeChange,
batchLoading,
classifyModalOpen,
onClassifyCancel,
onClassifyOk,
batchCategory,
onCategoryChange,
markModalOpen,
onMarkCancel,
onMarkOk,
batchSmartView,
onSmartViewChange,
resultDrawerOpen,
operationTitle,
operationResult,
onResultDrawerClose,
}) => {
return (
<>
{/* 上传进度弹窗 */}
<UploadProgressModal open={uploading} progress={uploadProgress} />
{/* 新建视频库弹窗 */}
<CreateLibraryModal
open={createModalOpen}
onCancel={onCreateModalCancel}
onOk={onCreateModalOk}
name={newLibName}
onNameChange={onNewLibNameChange}
kind={newLibKind}
onKindChange={onNewLibKindChange}
confirmLoading={createLoading}
/>
{/* 视频/音频播放弹窗 */}
<PlayModal open={!!playingAsset} asset={playingAsset} onClose={onPlayClose} />
{/* 批量打标签弹窗 */}
<BatchTagModal
open={tagModalOpen}
selectedCount={selectedCount}
onCancel={onTagCancel}
onOk={onTagOk}
tags={batchTags}
onTagInputChange={onTagInputChange}
onTagInputKeyDown={onTagInputKeyDown}
onRemoveTag={onRemoveTag}
tagInput={batchTagInput}
tagMode={tagMode}
onTagModeChange={onTagModeChange}
confirmLoading={batchLoading}
/>
{/* 批量改分类弹窗 */}
<BatchClassifyModal
open={classifyModalOpen}
selectedCount={selectedCount}
onCancel={onClassifyCancel}
onOk={onClassifyOk}
category={batchCategory}
onCategoryChange={onCategoryChange}
confirmLoading={batchLoading}
/>
{/* 批量智能标记弹窗 */}
<BatchMarkModal
open={markModalOpen}
selectedCount={selectedCount}
onCancel={onMarkCancel}
onOk={onMarkOk}
smartView={batchSmartView}
onSmartViewChange={onSmartViewChange}
confirmLoading={batchLoading}
/>
{/* 操作结果 Drawer */}
<ResultDrawer
open={resultDrawerOpen}
title={operationTitle}
result={operationResult}
onClose={onResultDrawerClose}
/>
</>
)
}
export default AssetModals