472 lines
19 KiB
TypeScript
472 lines
19 KiB
TypeScript
|
import {
|
|||
|
|
ArrowLeftOutlined,
|
|||
|
|
CameraOutlined,
|
|||
|
|
ColumnWidthOutlined,
|
|||
|
|
CustomerServiceOutlined,
|
|||
|
|
DeleteOutlined,
|
|||
|
|
DownloadOutlined,
|
|||
|
|
EditOutlined,
|
|||
|
|
FontSizeOutlined,
|
|||
|
|
InboxOutlined,
|
|||
|
|
LoadingOutlined,
|
|||
|
|
PlayCircleOutlined,
|
|||
|
|
RightOutlined,
|
|||
|
|
ScissorOutlined,
|
|||
|
|
SwapOutlined,
|
|||
|
|
ThunderboltOutlined,
|
|||
|
|
VideoCameraOutlined,
|
|||
|
|
} from "@ant-design/icons";
|
|||
|
|
import { useCallback, useEffect, useRef, useState } from "react";
|
|||
|
|
import StudioToolLayout from "../../components/StudioToolLayout";
|
|||
|
|
import type { WebImageWorkbenchTool, WebViewKey } from "../../types";
|
|||
|
|
import { aiGenerationClient } from "../../api/aiGenerationClient";
|
|||
|
|
import { uploadAssetWithProgress } from "../../api/uploadWithProgress";
|
|||
|
|
import { waitForTask } from "../../api/taskSubscription";
|
|||
|
|
import { addToolResultToAssetLibrary, saveToolResultToLocal } from "../workbench/toolResultActions";
|
|||
|
|
import { CheckCircleOutlined, InfoCircleOutlined } from "@ant-design/icons";
|
|||
|
|
|
|||
|
|
interface CharacterMixPageProps {
|
|||
|
|
isAuthenticated: boolean;
|
|||
|
|
onOpenMore?: () => void;
|
|||
|
|
onOpenImageTool?: (tool: WebImageWorkbenchTool) => void;
|
|||
|
|
onSelectView?: (view: WebViewKey) => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function CharacterMixPage({
|
|||
|
|
isAuthenticated,
|
|||
|
|
onOpenMore,
|
|||
|
|
onOpenImageTool,
|
|||
|
|
onSelectView,
|
|||
|
|
}: CharacterMixPageProps) {
|
|||
|
|
const [characterFile, setCharacterFile] = useState("");
|
|||
|
|
const [characterPreview, setCharacterPreview] = useState("");
|
|||
|
|
const [characterDataUrl, setCharacterDataUrl] = useState("");
|
|||
|
|
const [videoFile, setVideoFile] = useState("");
|
|||
|
|
const [videoPreview, setVideoPreview] = useState("");
|
|||
|
|
const [videoDataUrl, setVideoDataUrl] = useState("");
|
|||
|
|
const [promptInput, setPromptInput] = useState("");
|
|||
|
|
const [watermark, setWatermark] = useState(false);
|
|||
|
|
const [checkImage, setCheckImage] = useState(true);
|
|||
|
|
const [faceHint, setFaceHint] = useState<string | null>(null);
|
|||
|
|
const faceDetectTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
|||
|
|
const [notice, setNotice] = useState("等待上传角色图和参考视频");
|
|||
|
|
const [isCreating, setIsCreating] = useState(false);
|
|||
|
|
const [isDownloadingResult, setIsDownloadingResult] = useState(false);
|
|||
|
|
const [isSavingResultAsset, setIsSavingResultAsset] = useState(false);
|
|||
|
|
const [progress, setProgress] = useState(0);
|
|||
|
|
const [resultUrl, setResultUrl] = useState<string | null>(null);
|
|||
|
|
const abortRef = useRef(false);
|
|||
|
|
const taskIdRef = useRef<string | null>(null);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
return () => {
|
|||
|
|
if (characterPreview) URL.revokeObjectURL(characterPreview);
|
|||
|
|
};
|
|||
|
|
}, [characterPreview]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
return () => {
|
|||
|
|
if (videoPreview) URL.revokeObjectURL(videoPreview);
|
|||
|
|
};
|
|||
|
|
}, [videoPreview]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (faceDetectTimerRef.current) clearTimeout(faceDetectTimerRef.current);
|
|||
|
|
if (!checkImage || !characterPreview) {
|
|||
|
|
setFaceHint(null);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setFaceHint("analyzing");
|
|||
|
|
faceDetectTimerRef.current = setTimeout(() => {
|
|||
|
|
setFaceHint("ready");
|
|||
|
|
}, 800);
|
|||
|
|
return () => {
|
|||
|
|
if (faceDetectTimerRef.current) clearTimeout(faceDetectTimerRef.current);
|
|||
|
|
};
|
|||
|
|
}, [checkImage, characterPreview]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
return () => {
|
|||
|
|
abortRef.current = true;
|
|||
|
|
if (taskIdRef.current) {
|
|||
|
|
aiGenerationClient.cancelTask(taskIdRef.current).catch(() => {});
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
const handleCancel = useCallback(() => {
|
|||
|
|
abortRef.current = true;
|
|||
|
|
if (taskIdRef.current) {
|
|||
|
|
aiGenerationClient.cancelTask(taskIdRef.current).catch(() => {});
|
|||
|
|
taskIdRef.current = null;
|
|||
|
|
}
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
const pollTaskUntilDone = useCallback(async (taskId: string): Promise<string | null> => {
|
|||
|
|
return waitForTask(taskId, {
|
|||
|
|
abortRef,
|
|||
|
|
onProgress: (e) => setProgress(e.progress || 0),
|
|||
|
|
});
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
const handleCreateTask = async () => {
|
|||
|
|
if (isCreating) return;
|
|||
|
|
if (!characterDataUrl) {
|
|||
|
|
setNotice("请先上传人物图");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (!videoDataUrl) {
|
|||
|
|
setNotice("请先上传参考视频");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (!isAuthenticated) {
|
|||
|
|
setNotice("请先登录后再创建角色迁移任务。");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
abortRef.current = false;
|
|||
|
|
setIsCreating(true);
|
|||
|
|
setProgress(0);
|
|||
|
|
setResultUrl(null);
|
|||
|
|
setNotice("正在上传素材...");
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const [imageAsset, videoAsset] = await Promise.all([
|
|||
|
|
uploadAssetWithProgress(
|
|||
|
|
{ dataUrl: characterDataUrl, scope: "character-mix", mimeType: "image/png" },
|
|||
|
|
{ onProgress: (p) => setNotice(`上传人物图 ${p}%`) },
|
|||
|
|
),
|
|||
|
|
uploadAssetWithProgress(
|
|||
|
|
{ dataUrl: videoDataUrl, scope: "character-mix", mimeType: "video/mp4" },
|
|||
|
|
{ onProgress: (p) => setNotice(`上传参考视频 ${p}%`) },
|
|||
|
|
),
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
const prompt = promptInput.trim() || "保持角色原有服装和面部特征，动作流畅自然";
|
|||
|
|
setNotice("正在生成角色迁移视频...");
|
|||
|
|
const { taskId } = await aiGenerationClient.createVideoTask({
|
|||
|
|
model: "wan2.2-animate-mix",
|
|||
|
|
prompt,
|
|||
|
|
imageUrl: imageAsset.url,
|
|||
|
|
referenceUrls: [videoAsset.url],
|
|||
|
|
hasReferenceVideo: true,
|
|||
|
|
muted: !watermark,
|
|||
|
|
});
|
|||
|
|
taskIdRef.current = taskId;
|
|||
|
|
|
|||
|
|
const result = await pollTaskUntilDone(taskId);
|
|||
|
|
setResultUrl(result);
|
|||
|
|
setNotice(result ? "角色迁移完成" : "已取消");
|
|||
|
|
} catch (error) {
|
|||
|
|
setNotice(error instanceof Error ? error.message : "任务创建失败，请稍后重试。");
|
|||
|
|
} finally {
|
|||
|
|
setIsCreating(false);
|
|||
|
|
setProgress(0);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleDownloadResult = async () => {
|
|||
|
|
if (!resultUrl || isDownloadingResult) return;
|
|||
|
|
setIsDownloadingResult(true);
|
|||
|
|
try {
|
|||
|
|
const status = await saveToolResultToLocal({
|
|||
|
|
url: resultUrl,
|
|||
|
|
name: `character-mix-${Date.now()}`,
|
|||
|
|
type: "video",
|
|||
|
|
isVideo: true,
|
|||
|
|
taskId: taskIdRef.current || undefined,
|
|||
|
|
});
|
|||
|
|
setNotice(status === "saved" ? "已保存到本地" : "已开始保存到本地");
|
|||
|
|
} catch (error) {
|
|||
|
|
setNotice(error instanceof Error ? error.message : "保存本地失败");
|
|||
|
|
} finally {
|
|||
|
|
setIsDownloadingResult(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleAddResultToAssets = async () => {
|
|||
|
|
if (!resultUrl || isSavingResultAsset) return;
|
|||
|
|
setIsSavingResultAsset(true);
|
|||
|
|
try {
|
|||
|
|
const status = await addToolResultToAssetLibrary({
|
|||
|
|
url: resultUrl,
|
|||
|
|
name: `角色迁移-${Date.now()}`,
|
|||
|
|
type: "video",
|
|||
|
|
isVideo: true,
|
|||
|
|
taskId: taskIdRef.current || undefined,
|
|||
|
|
description: "从工具盒角色迁移生成的视频。",
|
|||
|
|
tags: ["工具盒", "角色迁移", "生成视频"],
|
|||
|
|
});
|
|||
|
|
setNotice(status === "server" ? "已加入资产库" : "已加入本地资产库");
|
|||
|
|
} catch (error) {
|
|||
|
|
setNotice(error instanceof Error ? error.message : "加入资产库失败");
|
|||
|
|
} finally {
|
|||
|
|
setIsSavingResultAsset(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<section className="image-workbench-page character-mix-page" aria-label="角色迁移">
|
|||
|
|
<header className="image-workbench-topbar">
|
|||
|
|
<button type="button" className="image-workbench-back-to-more" onClick={onOpenMore}>
|
|||
|
|
工具盒
|
|||
|
|
</button>
|
|||
|
|
<div className="image-workbench-tool-strip" aria-label="功能入口">
|
|||
|
|
<button type="button" onClick={() => onOpenImageTool?.("workbench")}>
|
|||
|
|
<EditOutlined />
|
|||
|
|
图片工作台
|
|||
|
|
</button>
|
|||
|
|
<button type="button" onClick={() => onOpenImageTool?.("inpaint")}>
|
|||
|
|
<ScissorOutlined />
|
|||
|
|
局部重绘
|
|||
|
|
</button>
|
|||
|
|
<button type="button" onClick={() => onOpenImageTool?.("camera")}>
|
|||
|
|
<CameraOutlined />
|
|||
|
|
镜头实验室
|
|||
|
|
</button>
|
|||
|
|
<button type="button" onClick={() => onSelectView?.("digitalHuman")}>
|
|||
|
|
<CustomerServiceOutlined />
|
|||
|
|
数字人
|
|||
|
|
</button>
|
|||
|
|
<button type="button" className="is-active">
|
|||
|
|
<SwapOutlined />
|
|||
|
|
角色迁移
|
|||
|
|
</button>
|
|||
|
|
<button type="button" onClick={() => onSelectView?.("resolutionUpscale")}>
|
|||
|
|
<ColumnWidthOutlined />
|
|||
|
|
分辨率提升
|
|||
|
|
</button>
|
|||
|
|
<button type="button" onClick={() => onSelectView?.("watermarkRemoval")}>
|
|||
|
|
<DeleteOutlined />
|
|||
|
|
去水印
|
|||
|
|
</button>
|
|||
|
|
<button type="button" onClick={() => onSelectView?.("subtitleRemoval")}>
|
|||
|
|
<FontSizeOutlined />
|
|||
|
|
字幕去除
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<div className="image-workbench-subbar">
|
|||
|
|
<button type="button" className="image-workbench-icon-btn" aria-label="返回工具盒" onClick={onOpenMore}>
|
|||
|
|
<ArrowLeftOutlined />
|
|||
|
|
</button>
|
|||
|
|
<strong>角色迁移</strong>
|
|||
|
|
<div className="image-workbench-camera-summary" aria-label="角色迁移状态">
|
|||
|
|
<strong>{characterFile && videoFile ? "素材已就绪" : "迁移预览"}</strong>
|
|||
|
|
<span>{characterFile || videoFile ? "人物 + 视频" : "待上传"}</span>
|
|||
|
|
</div>
|
|||
|
|
<button type="button" className="image-workbench-icon-btn" aria-label="下一项">
|
|||
|
|
<RightOutlined />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<StudioToolLayout
|
|||
|
|
noTop
|
|||
|
|
leftPanel={
|
|||
|
|
<>
|
|||
|
|
<div className="studio-panel__section">
|
|||
|
|
<div className="studio-panel__section-head">
|
|||
|
|
<span className="studio-panel__section-title">人物图</span>
|
|||
|
|
<span className={`studio-panel__section-chip studio-panel__section-chip--${characterFile ? "ready" : "waiting"}`}>
|
|||
|
|
{characterFile ? "已就绪" : "待上传"}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="studio-panel__section-body">
|
|||
|
|
<label className={characterFile ? "studio-upload-slot--filled" : "studio-upload-slot--empty"}>
|
|||
|
|
<input
|
|||
|
|
type="file"
|
|||
|
|
accept="image/*"
|
|||
|
|
onChange={(event) => {
|
|||
|
|
const file = event.target.files?.[0];
|
|||
|
|
if (!file) return;
|
|||
|
|
if (characterPreview) URL.revokeObjectURL(characterPreview);
|
|||
|
|
setCharacterFile(file.name);
|
|||
|
|
setCharacterPreview(URL.createObjectURL(file));
|
|||
|
|
const reader = new FileReader();
|
|||
|
|
reader.onload = () => {
|
|||
|
|
if (typeof reader.result === "string") setCharacterDataUrl(reader.result);
|
|||
|
|
};
|
|||
|
|
reader.readAsDataURL(file);
|
|||
|
|
setNotice(`已选择人物图 ${file.name}`);
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
{characterPreview ? (
|
|||
|
|
<img src={characterPreview} alt="" className="studio-upload-slot--filled__thumb" />
|
|||
|
|
) : (
|
|||
|
|
<span className="studio-upload-slot--empty__icon">
|
|||
|
|
<InboxOutlined />
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
<span className="studio-upload-slot--filled__info">
|
|||
|
|
<strong>{characterFile || "上传人物图"}</strong>
|
|||
|
|
<small>单人正面或半身更稳定</small>
|
|||
|
|
</span>
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="studio-panel__section">
|
|||
|
|
<div className="studio-panel__section-head">
|
|||
|
|
<span className="studio-panel__section-title">参考视频</span>
|
|||
|
|
<span className={`studio-panel__section-chip studio-panel__section-chip--${videoFile ? "ready" : "waiting"}`}>
|
|||
|
|
{videoFile ? "已就绪" : "待上传"}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="studio-panel__section-body">
|
|||
|
|
<label className={videoFile ? "studio-upload-slot--filled" : "studio-upload-slot--empty"}>
|
|||
|
|
<input
|
|||
|
|
type="file"
|
|||
|
|
accept="video/*"
|
|||
|
|
onChange={(event) => {
|
|||
|
|
const file = event.target.files?.[0];
|
|||
|
|
if (!file) return;
|
|||
|
|
if (videoPreview) URL.revokeObjectURL(videoPreview);
|
|||
|
|
setVideoFile(file.name);
|
|||
|
|
setVideoPreview(URL.createObjectURL(file));
|
|||
|
|
const reader = new FileReader();
|
|||
|
|
reader.onload = () => {
|
|||
|
|
if (typeof reader.result === "string") setVideoDataUrl(reader.result);
|
|||
|
|
};
|
|||
|
|
reader.readAsDataURL(file);
|
|||
|
|
setNotice(`已选择参考视频 ${file.name}`);
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
<span className="studio-upload-slot--empty__icon">
|
|||
|
|
<VideoCameraOutlined />
|
|||
|
|
</span>
|
|||
|
|
<span className="studio-upload-slot--filled__info">
|
|||
|
|
<strong>{videoFile || "上传参考视频"}</strong>
|
|||
|
|
<small>MP4 / MOV / AVI</small>
|
|||
|
|
</span>
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</>
|
|||
|
|
}
|
|||
|
|
canvas={
|
|||
|
|
isCreating ? (
|
|||
|
|
<div className="image-workbench-generating">
|
|||
|
|
<LoadingOutlined style={{ fontSize: 32 }} />
|
|||
|
|
<strong>角色迁移中...</strong>
|
|||
|
|
<div className="image-workbench-progress-bar">
|
|||
|
|
<div className="image-workbench-progress-fill" style={{ width: `${progress}%` }} />
|
|||
|
|
</div>
|
|||
|
|
<span>{progress}%</span>
|
|||
|
|
<button type="button" className="image-workbench-cancel" onClick={handleCancel}>取消</button>
|
|||
|
|
</div>
|
|||
|
|
) : resultUrl ? (
|
|||
|
|
<div className="studio-canvas-video">
|
|||
|
|
<video src={resultUrl} controls playsInline style={{ maxHeight: "100%", maxWidth: "100%", borderRadius: 12 }} />
|
|||
|
|
{characterPreview && (
|
|||
|
|
<div className="studio-canvas-pip">
|
|||
|
|
<img src={characterPreview} alt="人物图" />
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
) : videoPreview ? (
|
|||
|
|
<div className="studio-canvas-video">
|
|||
|
|
<video src={videoPreview} controls muted playsInline />
|
|||
|
|
{characterPreview ? (
|
|||
|
|
<div className="studio-canvas-pip">
|
|||
|
|
<img src={characterPreview} alt="人物图" />
|
|||
|
|
</div>
|
|||
|
|
) : null}
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div className="studio-canvas-ghost">
|
|||
|
|
<div className="studio-canvas-ghost__icon">
|
|||
|
|
<SwapOutlined />
|
|||
|
|
</div>
|
|||
|
|
<div className="studio-canvas-ghost__title">上传人物图与参考视频</div>
|
|||
|
|
<div className="studio-canvas-ghost__hint">将静态角色迁移到参考视频的动作与表情中。</div>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
rightPanel={
|
|||
|
|
<div className="studio-panel__section">
|
|||
|
|
<div className="studio-panel__section-head">
|
|||
|
|
<span className="studio-panel__section-title">迁移设置</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="studio-panel__section-body">
|
|||
|
|
<div style={{ marginBottom: 10 }}>
|
|||
|
|
<div className="studio-label" style={{ fontSize: 11, color: "var(--fg-muted, #999)", marginBottom: 4 }}>驱动提示词</div>
|
|||
|
|
<textarea
|
|||
|
|
value={promptInput}
|
|||
|
|
onChange={(e) => setPromptInput(e.target.value)}
|
|||
|
|
placeholder="保持角色原有服装，动作流畅自然"
|
|||
|
|
rows={3}
|
|||
|
|
maxLength={1000}
|
|||
|
|
style={{
|
|||
|
|
width: "100%", resize: "vertical", background: "var(--bg-elevated, #1a1a1a)",
|
|||
|
|
border: "1px solid var(--border-subtle, #333)", borderRadius: 6,
|
|||
|
|
padding: "6px 8px", fontSize: 12, color: "var(--fg-body, #eee)",
|
|||
|
|
fontFamily: "inherit", outline: "none", boxSizing: "border-box",
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="studio-toggle-row">
|
|||
|
|
<div className="studio-toggle-row__copy">
|
|||
|
|
<span className="studio-toggle-row__title">图像检测</span>
|
|||
|
|
<span className="studio-toggle-row__desc">检测人物朝向</span>
|
|||
|
|
</div>
|
|||
|
|
<button type="button" className={`studio-toggle${checkImage ? " is-on" : ""}`} onClick={() => setCheckImage(!checkImage)}>
|
|||
|
|
<span className="studio-toggle__thumb" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
{checkImage && characterPreview && faceHint && (
|
|||
|
|
<div className={`character-mix-face-hint character-mix-face-hint--${faceHint}`}>
|
|||
|
|
{faceHint === "analyzing" ? (
|
|||
|
|
<>
|
|||
|
|
<InfoCircleOutlined />
|
|||
|
|
<span>正在分析人物图像...</span>
|
|||
|
|
</>
|
|||
|
|
) : (
|
|||
|
|
<>
|
|||
|
|
<CheckCircleOutlined />
|
|||
|
|
<span>图像已就绪，将自动检测人物面部朝向</span>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
<div className="studio-toggle-row">
|
|||
|
|
<div className="studio-toggle-row__copy">
|
|||
|
|
<span className="studio-toggle-row__title">水印输出</span>
|
|||
|
|
<span className="studio-toggle-row__desc">含水印版本</span>
|
|||
|
|
</div>
|
|||
|
|
<button type="button" className={`studio-toggle${watermark ? " is-on" : ""}`} onClick={() => setWatermark(!watermark)}>
|
|||
|
|
<span className="studio-toggle__thumb" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<button type="button" className="studio-generate-btn" onClick={() => void handleCreateTask()} disabled={isCreating || !characterDataUrl || !videoDataUrl}>
|
|||
|
|
{isCreating ? <LoadingOutlined /> : <PlayCircleOutlined />}
|
|||
|
|
{isCreating ? "生成中..." : "开始迁移"}
|
|||
|
|
</button>
|
|||
|
|
{resultUrl && (
|
|||
|
|
<div className="studio-result-actions">
|
|||
|
|
<button type="button" onClick={() => void handleDownloadResult()} disabled={isDownloadingResult}>
|
|||
|
|
<DownloadOutlined />
|
|||
|
|
{isDownloadingResult ? "保存中" : "保存本地"}
|
|||
|
|
</button>
|
|||
|
|
<button type="button" onClick={() => void handleAddResultToAssets()} disabled={isSavingResultAsset}>
|
|||
|
|
<InboxOutlined />
|
|||
|
|
{isSavingResultAsset ? "加入中" : "加入资产库"}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
statusBar={
|
|||
|
|
<>
|
|||
|
|
<span className="studio-status-bar__badge studio-status-bar__badge--idle">就绪</span>
|
|||
|
|
<span className="studio-status-bar__text">{notice}</span>
|
|||
|
|
</>
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
</section>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default CharacterMixPage;
|