feat(assets&canvas): 实现素材回收站机制、自动定时清理策略与过期时间提示，增加画布创建与变更历史时间线
This commit is contained in:
Danborad
@@ -13,7 +13,21 @@ export type InsertAssetPayload =
|
||||
| { kind: "image"; dataUrl: string; title: string; url?: string; storageKey?: string; width?: number; height?: number; bytes?: number; mimeType?: string; assetId?: string }
|
||||
| { kind: "video"; url: string; title: string; storageKey?: string; width?: number; height?: number; durationMs?: number; hasAudio?: boolean; bytes?: number; mimeType?: string; assetId?: string }
|
||||
| { kind: "audio"; url: string; title: string; storageKey?: string; durationMs?: number; bytes?: number; mimeType?: string; assetId?: string }
|
||||
| { kind: "character"; title: string; assetId: string; versionId: string; prompt: string; aliases: string[]; definition: Record<string, unknown>; coverUrl?: string; visualStatus: string; voiceStatus: string; voiceName?: string; voiceProfile?: { name: string; provider: string; language: string; timbre: string }; voiceInstructions?: string };
|
||||
| {
|
||||
kind: "character";
|
||||
title: string;
|
||||
assetId: string;
|
||||
versionId: string;
|
||||
prompt: string;
|
||||
aliases: string[];
|
||||
definition: Record<string, unknown>;
|
||||
coverUrl?: string;
|
||||
visualStatus: string;
|
||||
voiceStatus: string;
|
||||
voiceName?: string;
|
||||
voiceProfile?: { name: string; provider: string; language: string; timbre: string };
|
||||
voiceInstructions?: string;
|
||||
};
|
||||
|
||||
type Props = {
|
||||
open: boolean;
|
||||
@@ -22,23 +36,26 @@ type Props = {
|
||||
onClose: () => void;
|
||||
};
|
||||
|
||||
const categoryLabels: Record<string, string> = { all: "全部素材", ...ASSET_CATEGORY_LABELS };
|
||||
const categoryLabels: Record<string, string> = { all: "全部素材", ...ASSET_CATEGORY_LABELS, archived: "回收站" };
|
||||
|
||||
export function AssetPickerModal({ open, multiple = true, onInsert, onClose }: Props) {
|
||||
const assets = useAssetStore((state) => state.assets);
|
||||
const externalAssetSources = useExternalAssetSources(open);
|
||||
const insertableAssets = useMemo(() => assets.filter((asset): asset is InsertableAsset => asset.kind === "text" || asset.kind === "image" || asset.kind === "video" || asset.kind === "audio"), [assets]);
|
||||
const items = useMemo<AssetLibraryPickerItem[]>(() => [
|
||||
...insertableAssets.map((asset) => ({
|
||||
id: asset.id,
|
||||
title: asset.title,
|
||||
category: normalizeAssetCategory(asset.category),
|
||||
kindLabel: asset.kind === "image" ? "图片" : asset.kind === "video" ? "视频" : asset.kind === "audio" ? "音频" : "文本",
|
||||
asset,
|
||||
searchText: (asset.tags || []).join(" "),
|
||||
})),
|
||||
...externalAssetSources.items,
|
||||
], [externalAssetSources.items, insertableAssets]);
|
||||
const items = useMemo<AssetLibraryPickerItem[]>(
|
||||
() => [
|
||||
...insertableAssets.map((asset) => ({
|
||||
id: asset.id,
|
||||
title: asset.title,
|
||||
category: asset.status === "archived" ? "archived" : normalizeAssetCategory(asset.category),
|
||||
kindLabel: asset.kind === "image" ? "图片" : asset.kind === "video" ? "视频" : asset.kind === "audio" ? "音频" : "文本",
|
||||
asset,
|
||||
searchText: (asset.tags || []).join(" "),
|
||||
})),
|
||||
...externalAssetSources.items,
|
||||
],
|
||||
[externalAssetSources.items, insertableAssets],
|
||||
);
|
||||
|
||||
return (
|
||||
<AssetLibraryPickerModal
|
||||
@@ -76,7 +93,20 @@ export function assetPickerItemsToInsertPayloads(ids: string[], items: AssetLibr
|
||||
function localAssetToInsertPayload(asset: InsertableAsset): InsertAssetPayload {
|
||||
if (asset.kind === "text") return { kind: "text", content: asset.data.content, title: asset.title, assetId: asset.id };
|
||||
if (asset.kind === "audio") return { kind: "audio", url: asset.data.url, storageKey: asset.data.storageKey, title: asset.title, durationMs: asset.data.durationMs, bytes: asset.data.bytes, mimeType: asset.data.mimeType, assetId: asset.id };
|
||||
if (asset.kind === "video") return { kind: "video", url: asset.data.url, storageKey: asset.data.storageKey, title: asset.title, width: asset.data.width, height: asset.data.height, durationMs: asset.data.durationMs, hasAudio: asset.data.hasAudio, bytes: asset.data.bytes, mimeType: asset.data.mimeType, assetId: asset.id };
|
||||
if (asset.kind === "video")
|
||||
return {
|
||||
kind: "video",
|
||||
url: asset.data.url,
|
||||
storageKey: asset.data.storageKey,
|
||||
title: asset.title,
|
||||
width: asset.data.width,
|
||||
height: asset.data.height,
|
||||
durationMs: asset.data.durationMs,
|
||||
hasAudio: asset.data.hasAudio,
|
||||
bytes: asset.data.bytes,
|
||||
mimeType: asset.data.mimeType,
|
||||
assetId: asset.id,
|
||||
};
|
||||
return { kind: "image", dataUrl: asset.data.dataUrl, storageKey: asset.data.storageKey, title: asset.title, width: asset.data.width, height: asset.data.height, bytes: asset.data.bytes, mimeType: asset.data.mimeType, assetId: asset.id };
|
||||
}
|
||||
|
||||
|
||||
243
web/src/components/canvas/canvas-history-drawer.tsx
Normal file
243
web/src/components/canvas/canvas-history-drawer.tsx
Normal file
@@ -0,0 +1,243 @@
|
||||
import { useMemo, useState } from "react";
|
||||
import { Drawer, Tag, Button, Input, Popconfirm, Empty, Tooltip } from "antd";
|
||||
import { Clock, Clock3, ExternalLink, History, Search, Trash2, X } from "lucide-react";
|
||||
import { useNavigate } from "react-router";
|
||||
|
||||
import { useCanvasStore } from "@/stores/canvas/use-canvas-store";
|
||||
import { useCanvasHistoryStore } from "@/stores/canvas/use-canvas-history-store";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type TimelineItem = {
|
||||
id: string;
|
||||
title: string;
|
||||
isDeleted: boolean;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
deletedAt?: string;
|
||||
nodeCount: number;
|
||||
timelineTime: string;
|
||||
};
|
||||
|
||||
export function CanvasHistoryDrawer({ open, onClose }: { open: boolean; onClose: () => void }) {
|
||||
const navigate = useNavigate();
|
||||
const activeProjects = useCanvasStore((state) => state.projects);
|
||||
const deletedProjects = useCanvasHistoryStore((state) => state.deletedProjects);
|
||||
const removeDeletedItem = useCanvasHistoryStore((state) => state.removeDeletedHistoryItem);
|
||||
const clearDeletedHistory = useCanvasHistoryStore((state) => state.clearDeletedHistory);
|
||||
const [keyword, setKeyword] = useState("");
|
||||
const [filter, setFilter] = useState<"all" | "active" | "deleted">("all");
|
||||
|
||||
const timelineItems = useMemo<TimelineItem[]>(() => {
|
||||
const activeList: TimelineItem[] = activeProjects.map((p) => ({
|
||||
id: p.id,
|
||||
title: p.title || "未命名画布",
|
||||
isDeleted: false,
|
||||
createdAt: p.createdAt || p.updatedAt || new Date().toISOString(),
|
||||
updatedAt: p.updatedAt || new Date().toISOString(),
|
||||
nodeCount: p.nodes?.length || 0,
|
||||
timelineTime: p.createdAt || p.updatedAt || new Date().toISOString(),
|
||||
}));
|
||||
|
||||
const deletedList: TimelineItem[] = deletedProjects.map((d) => ({
|
||||
id: d.id,
|
||||
title: d.title || "未命名画布",
|
||||
isDeleted: true,
|
||||
createdAt: d.createdAt,
|
||||
updatedAt: d.updatedAt,
|
||||
deletedAt: d.deletedAt,
|
||||
nodeCount: d.nodeCount,
|
||||
timelineTime: d.deletedAt || d.createdAt,
|
||||
}));
|
||||
|
||||
const all = [...activeList, ...deletedList];
|
||||
all.sort((a, b) => new Date(b.timelineTime).getTime() - new Date(a.timelineTime).getTime());
|
||||
return all;
|
||||
}, [activeProjects, deletedProjects]);
|
||||
|
||||
const filteredItems = useMemo(() => {
|
||||
const q = keyword.trim().toLowerCase();
|
||||
return timelineItems.filter((item) => {
|
||||
if (filter === "active" && item.isDeleted) return false;
|
||||
if (filter === "deleted" && !item.isDeleted) return false;
|
||||
if (!q) return true;
|
||||
return item.title.toLowerCase().includes(q);
|
||||
});
|
||||
}, [filter, keyword, timelineItems]);
|
||||
|
||||
const openProject = (id: string) => {
|
||||
navigate(`/canvas/${id}`);
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
title={
|
||||
<div className="flex items-center justify-between gap-2 pr-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<History className="size-4 text-[var(--workspace-accent)]" />
|
||||
<span className="text-sm font-semibold text-stone-900 dark:text-stone-100">画布创建与变更历史时间线</span>
|
||||
</div>
|
||||
{deletedProjects.length > 0 ? (
|
||||
<Popconfirm title="确定清空已删除画布的历史记录？" onConfirm={clearDeletedHistory} okText="清空" okButtonProps={{ danger: true }} cancelText="取消">
|
||||
<Button type="text" size="small" danger icon={<Trash2 className="size-3.5" />}>
|
||||
清理删除记录
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
) : null}
|
||||
</div>
|
||||
}
|
||||
placement="right"
|
||||
width={460}
|
||||
open={open}
|
||||
onClose={onClose}
|
||||
className="workspace-drawer canvas-history-drawer"
|
||||
styles={{
|
||||
header: { borderBottom: "1px solid var(--border-color, rgba(255,255,255,0.08))" },
|
||||
body: { padding: "16px 20px" },
|
||||
}}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
{/* 搜索与筛选 */}
|
||||
<div className="space-y-3">
|
||||
<Input allowClear prefix={<Search className="size-3.5 text-stone-400" />} value={keyword} onChange={(e) => setKeyword(e.target.value)} placeholder="搜索画布名称..." className="text-xs" />
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
"cursor-pointer rounded-lg px-3 py-1.5 font-medium transition-all",
|
||||
filter === "all"
|
||||
? "!bg-stone-900 !text-white shadow-sm dark:!bg-stone-100 dark:!text-stone-900 font-semibold"
|
||||
: "bg-stone-100 text-stone-700 hover:bg-stone-200 dark:bg-stone-800 dark:text-stone-300 dark:hover:bg-stone-700",
|
||||
)}
|
||||
onClick={() => setFilter("all")}
|
||||
>
|
||||
全部 ({timelineItems.length})
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
"cursor-pointer rounded-lg px-3 py-1.5 font-medium transition-all",
|
||||
filter === "active"
|
||||
? "!bg-emerald-600 !text-white shadow-sm font-semibold"
|
||||
: "bg-emerald-50 text-emerald-800 hover:bg-emerald-100 border border-emerald-200/60 dark:bg-emerald-950/40 dark:text-emerald-300 dark:border-emerald-800/50",
|
||||
)}
|
||||
onClick={() => setFilter("active")}
|
||||
>
|
||||
活跃中 ({activeProjects.length})
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
"cursor-pointer rounded-lg px-3 py-1.5 font-medium transition-all",
|
||||
filter === "deleted" ? "!bg-rose-600 !text-white shadow-sm font-semibold" : "bg-rose-50 text-rose-800 hover:bg-rose-100 border border-rose-200/60 dark:bg-rose-950/40 dark:text-rose-300 dark:border-rose-800/50",
|
||||
)}
|
||||
onClick={() => setFilter("deleted")}
|
||||
>
|
||||
已删除 ({deletedProjects.length})
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 时间线列表 */}
|
||||
{filteredItems.length === 0 ? (
|
||||
<div className="py-12">
|
||||
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无匹配的历史记录" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="relative border-l-2 border-stone-200 dark:border-stone-800 pl-4 space-y-4 pt-1">
|
||||
{filteredItems.map((item) => {
|
||||
const isDeleted = item.isDeleted;
|
||||
return (
|
||||
<div key={item.id + (item.deletedAt || "")} className="group relative">
|
||||
{/* 时间轴圆点 */}
|
||||
<span className={cn("absolute -left-[23px] top-3.5 size-3 rounded-full border-2 border-background", isDeleted ? "bg-rose-500 ring-2 ring-rose-500/20" : "bg-emerald-500 ring-2 ring-emerald-500/20")} />
|
||||
|
||||
<div
|
||||
className={cn(
|
||||
"rounded-xl border p-3.5 transition-all shadow-sm",
|
||||
isDeleted
|
||||
? "border-rose-200/90 bg-rose-50/50 dark:border-rose-900/40 dark:bg-rose-950/20 hover:border-rose-300"
|
||||
: "border-stone-200 bg-white dark:border-stone-800 dark:bg-stone-900/70 hover:border-stone-300 dark:hover:border-stone-700",
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="min-w-0 flex-1 space-y-1.5">
|
||||
<div className="flex items-center gap-2">
|
||||
{isDeleted ? (
|
||||
<span className="truncate text-sm font-semibold text-stone-500 line-through decoration-rose-500/80 decoration-2 dark:text-stone-400" title={item.title}>
|
||||
{item.title}
|
||||
</span>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className="truncate text-left text-sm font-semibold text-stone-900 hover:text-blue-600 dark:text-stone-100 dark:hover:text-blue-400 transition-colors"
|
||||
onClick={() => openProject(item.id)}
|
||||
title={item.title}
|
||||
>
|
||||
{item.title}
|
||||
</button>
|
||||
)}
|
||||
{isDeleted ? (
|
||||
<Tag color="error" className="m-0 text-[11px] leading-tight px-1.5 py-0.5 font-medium">
|
||||
已删除
|
||||
</Tag>
|
||||
) : (
|
||||
<Tag color="success" className="m-0 text-[11px] leading-tight px-1.5 py-0.5 font-medium">
|
||||
活跃中
|
||||
</Tag>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-1 text-xs text-stone-600 dark:text-stone-300">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Clock3 className="size-3.5 text-stone-400 shrink-0" />
|
||||
<span>创建时间：{formatTimelineDate(item.createdAt)}</span>
|
||||
</div>
|
||||
{isDeleted && item.deletedAt ? (
|
||||
<div className="flex items-center gap-1.5 text-rose-600 dark:text-rose-400 font-medium">
|
||||
<Trash2 className="size-3.5 text-rose-500 shrink-0" />
|
||||
<span>删除时间：{formatTimelineDate(item.deletedAt)}</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-1.5 text-stone-500 dark:text-stone-400">
|
||||
<Clock className="size-3.5 text-stone-400 shrink-0" />
|
||||
<span>最近更新：{formatTimelineDate(item.updatedAt)}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="text-[11px] text-stone-500 dark:text-stone-400 pt-0.5">包含 {item.nodeCount} 个节点</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1 shrink-0 pt-0.5">
|
||||
{!isDeleted ? (
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
icon={<ExternalLink className="size-4 text-stone-500 hover:text-stone-800 dark:text-stone-400 dark:hover:text-stone-100" />}
|
||||
onClick={() => openProject(item.id)}
|
||||
title="打开画布"
|
||||
/>
|
||||
) : (
|
||||
<Tooltip title="从历史列表中移除此条记录">
|
||||
<Button type="text" size="small" danger icon={<X className="size-4" />} onClick={() => removeDeletedItem(item.id)} />
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Drawer>
|
||||
);
|
||||
}
|
||||
|
||||
function formatTimelineDate(isoString: string) {
|
||||
if (!isoString) return "--";
|
||||
const date = new Date(isoString);
|
||||
if (!Number.isFinite(date.getTime())) return "--";
|
||||
return `${date.getFullYear()}/${String(date.getMonth() + 1).padStart(2, "0")}/${String(date.getDate()).padStart(2, "0")} ${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
|
||||
}
|
||||
@@ -13,7 +13,23 @@ import { useAssetStore, type Asset } from "@/stores/use-asset-store";
|
||||
const categoryLabels: Record<string, string> = { all: "全部资产", ...ASSET_CATEGORY_LABELS };
|
||||
type ProjectPickerItem = { id: string; category: string; folderId?: string; project?: ProjectAsset; character?: ProjectAsset; media?: Asset };
|
||||
|
||||
export function CanvasProjectAssetModal({ open, detail, initialCategory = "all", initialFolderId = "all", onClose, onInsert, onInsertFolder }: { open: boolean; detail?: ProjectDetail; initialCategory?: string; initialFolderId?: string; onClose: () => void; onInsert: (payloads: InsertAssetPayload[]) => Promise<void> | void; onInsertFolder?: (folderId: string) => Promise<void> | void }) {
|
||||
export function CanvasProjectAssetModal({
|
||||
open,
|
||||
detail,
|
||||
initialCategory = "all",
|
||||
initialFolderId = "all",
|
||||
onClose,
|
||||
onInsert,
|
||||
onInsertFolder,
|
||||
}: {
|
||||
open: boolean;
|
||||
detail?: ProjectDetail;
|
||||
initialCategory?: string;
|
||||
initialFolderId?: string;
|
||||
onClose: () => void;
|
||||
onInsert: (payloads: InsertAssetPayload[]) => Promise<void> | void;
|
||||
onInsertFolder?: (folderId: string) => Promise<void> | void;
|
||||
}) {
|
||||
const mediaAssets = useAssetStore((state) => state.assets);
|
||||
const externalAssetSources = useExternalAssetSources(open);
|
||||
const items = useMemo<ProjectPickerItem[]>(() => {
|
||||
@@ -25,34 +41,35 @@ export function CanvasProjectAssetModal({ open, detail, initialCategory = "all",
|
||||
});
|
||||
if (detail) return projectItems;
|
||||
// 自由画布未关联项目时回退到个人素材库。
|
||||
return mediaAssets
|
||||
.filter((asset) => asset.kind !== "model" && asset.kind !== "entity")
|
||||
.map((media): ProjectPickerItem => ({ id: media.id, category: normalizeAssetCategory(media.category), media }));
|
||||
return mediaAssets.filter((asset) => asset.kind !== "model" && asset.kind !== "entity" && asset.status !== "archived").map((media): ProjectPickerItem => ({ id: media.id, category: normalizeAssetCategory(media.category), media }));
|
||||
}, [detail?.assets, mediaAssets]);
|
||||
const localPickerItems = useMemo<AssetLibraryPickerItem[]>(() => items.map((item) => {
|
||||
const character = item.character;
|
||||
const project = item.project;
|
||||
const media = item.media;
|
||||
const coverRepresentation = character?.character?.representations.find((representation) => representation.role === "turnaround_sheet") || character?.character?.representations.find((representation) => representation.role === "primary") || character?.character?.representations.find((representation) => representation.role === "front");
|
||||
const remoteResourceId = resourceIdFromStorageKey(project?.storageKey);
|
||||
return {
|
||||
id: item.id,
|
||||
title: character?.title || project?.title || media?.title || "未命名资产",
|
||||
category: item.category,
|
||||
folderId: item.folderId,
|
||||
kindLabel: character ? "角色卡" : (media?.kind || project?.mediaType) === "video" ? "视频" : (media?.kind || project?.mediaType) === "audio" ? "音频" : (media?.kind || project?.mediaType) === "text" ? "文本" : "图片",
|
||||
asset: media,
|
||||
imageUrl: coverRepresentation
|
||||
? resourceFileUrl(coverRepresentation.resourceId)
|
||||
: project?.mediaType === "image" && remoteResourceId
|
||||
? resourceFileUrl(remoteResourceId)
|
||||
: undefined,
|
||||
imageStorageKey: coverRepresentation ? `resource:${coverRepresentation.resourceId}` : undefined,
|
||||
imageFit: character ? "contain" : "cover",
|
||||
description: character ? `${character.character?.visualStatus === "ready" ? "形象就绪" : "形象待完善"} · ${character.character?.voiceStatus === "ready" ? "声音已绑定" : "声音未绑定"}` : project?.previewText,
|
||||
searchText: [media?.tags?.join(" ") || "", project?.previewText || ""].join(" "),
|
||||
};
|
||||
}), [items]);
|
||||
const localPickerItems = useMemo<AssetLibraryPickerItem[]>(
|
||||
() =>
|
||||
items.map((item) => {
|
||||
const character = item.character;
|
||||
const project = item.project;
|
||||
const media = item.media;
|
||||
const coverRepresentation =
|
||||
character?.character?.representations.find((representation) => representation.role === "turnaround_sheet") ||
|
||||
character?.character?.representations.find((representation) => representation.role === "primary") ||
|
||||
character?.character?.representations.find((representation) => representation.role === "front");
|
||||
const remoteResourceId = resourceIdFromStorageKey(project?.storageKey);
|
||||
return {
|
||||
id: item.id,
|
||||
title: character?.title || project?.title || media?.title || "未命名资产",
|
||||
category: item.category,
|
||||
folderId: item.folderId,
|
||||
kindLabel: character ? "角色卡" : (media?.kind || project?.mediaType) === "video" ? "视频" : (media?.kind || project?.mediaType) === "audio" ? "音频" : (media?.kind || project?.mediaType) === "text" ? "文本" : "图片",
|
||||
asset: media,
|
||||
imageUrl: coverRepresentation ? resourceFileUrl(coverRepresentation.resourceId) : project?.mediaType === "image" && remoteResourceId ? resourceFileUrl(remoteResourceId) : undefined,
|
||||
imageStorageKey: coverRepresentation ? `resource:${coverRepresentation.resourceId}` : undefined,
|
||||
imageFit: character ? "contain" : "cover",
|
||||
description: character ? `${character.character?.visualStatus === "ready" ? "形象就绪" : "形象待完善"} · ${character.character?.voiceStatus === "ready" ? "声音已绑定" : "声音未绑定"}` : project?.previewText,
|
||||
searchText: [media?.tags?.join(" ") || "", project?.previewText || ""].join(" "),
|
||||
};
|
||||
}),
|
||||
[items],
|
||||
);
|
||||
const pickerItems = useMemo<AssetLibraryPickerItem[]>(() => [...localPickerItems, ...externalAssetSources.items], [externalAssetSources.items, localPickerItems]);
|
||||
|
||||
return (
|
||||
@@ -69,18 +86,27 @@ export function CanvasProjectAssetModal({ open, detail, initialCategory = "all",
|
||||
emptyTitle="此分类没有可引用资产"
|
||||
emptyDescription={detail ? "先在项目角色与资产中完成角色确认或素材关联。" : "当前为自由画布，可先在素材库添加内容。"}
|
||||
footerNote={externalAssetSources.error || "角色引用会在生成时解析当前角色版本"}
|
||||
onFolderAction={onInsertFolder ? async (folderId) => { await onInsertFolder(folderId); onClose(); } : undefined}
|
||||
onFolderAction={
|
||||
onInsertFolder
|
||||
? async (folderId) => {
|
||||
await onInsertFolder(folderId);
|
||||
onClose();
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
onClose={onClose}
|
||||
onConfirm={async (ids) => {
|
||||
const payloads = await Promise.all(ids.map(async (id) => {
|
||||
const external = externalAssetSources.items.find((item) => item.id === id)?.external;
|
||||
if (external) return externalAssetToInsertPayload(external);
|
||||
const item = items.find((candidate) => candidate.id === id);
|
||||
if (!item) throw new Error("所选资产已不存在，请重新选择");
|
||||
if (item.media || item.character || !item.project) return toInsertPayload(item);
|
||||
const { asset } = await getRemoteAsset(item.project.id);
|
||||
return toInsertPayload({ ...item, media: asset });
|
||||
}));
|
||||
const payloads = await Promise.all(
|
||||
ids.map(async (id) => {
|
||||
const external = externalAssetSources.items.find((item) => item.id === id)?.external;
|
||||
if (external) return externalAssetToInsertPayload(external);
|
||||
const item = items.find((candidate) => candidate.id === id);
|
||||
if (!item) throw new Error("所选资产已不存在，请重新选择");
|
||||
if (item.media || item.character || !item.project) return toInsertPayload(item);
|
||||
const { asset } = await getRemoteAsset(item.project.id);
|
||||
return toInsertPayload({ ...item, media: asset });
|
||||
}),
|
||||
);
|
||||
if (!payloads.length) return;
|
||||
await onInsert(payloads);
|
||||
onClose();
|
||||
@@ -106,8 +132,30 @@ function toInsertPayload(item: ProjectPickerItem): InsertAssetPayload {
|
||||
}
|
||||
if (!asset) throw new Error("项目资产不可用");
|
||||
if (asset.kind === "text") return { kind: "text", content: asset.data.content, title: asset.title, assetId: asset.id };
|
||||
if (asset.kind === "video") return { kind: "video", url: projectAssetMediaUrl(asset.data.storageKey, asset.data.url), storageKey: asset.data.storageKey, title: asset.title, width: asset.data.width, height: asset.data.height, durationMs: asset.data.durationMs, bytes: asset.data.bytes, mimeType: asset.data.mimeType, assetId: asset.id };
|
||||
if (asset.kind === "audio") return { kind: "audio", url: projectAssetMediaUrl(asset.data.storageKey, asset.data.url), storageKey: asset.data.storageKey, title: asset.title, durationMs: asset.data.durationMs, bytes: asset.data.bytes, mimeType: asset.data.mimeType, assetId: asset.id };
|
||||
if (asset.kind === "video")
|
||||
return {
|
||||
kind: "video",
|
||||
url: projectAssetMediaUrl(asset.data.storageKey, asset.data.url),
|
||||
storageKey: asset.data.storageKey,
|
||||
title: asset.title,
|
||||
width: asset.data.width,
|
||||
height: asset.data.height,
|
||||
durationMs: asset.data.durationMs,
|
||||
bytes: asset.data.bytes,
|
||||
mimeType: asset.data.mimeType,
|
||||
assetId: asset.id,
|
||||
};
|
||||
if (asset.kind === "audio")
|
||||
return {
|
||||
kind: "audio",
|
||||
url: projectAssetMediaUrl(asset.data.storageKey, asset.data.url),
|
||||
storageKey: asset.data.storageKey,
|
||||
title: asset.title,
|
||||
durationMs: asset.data.durationMs,
|
||||
bytes: asset.data.bytes,
|
||||
mimeType: asset.data.mimeType,
|
||||
assetId: asset.id,
|
||||
};
|
||||
if (asset.kind === "image") return { kind: "image", dataUrl: projectAssetMediaUrl(asset.data.storageKey, asset.data.dataUrl), storageKey: asset.data.storageKey, title: asset.title, assetId: asset.id };
|
||||
throw new Error("当前项目资产不能直接插入画布");
|
||||
}
|
||||
@@ -121,7 +169,10 @@ export function projectCharacterToInsertPayload(asset: ProjectAsset): InsertAsse
|
||||
if (!asset.character) throw new Error("项目角色信息不完整");
|
||||
const card = asset.character;
|
||||
const definition = card.definition;
|
||||
const cover = card.representations.find((representation) => representation.role === "turnaround_sheet") || card.representations.find((representation) => representation.role === "primary") || card.representations.find((representation) => representation.role === "front");
|
||||
const cover =
|
||||
card.representations.find((representation) => representation.role === "turnaround_sheet") ||
|
||||
card.representations.find((representation) => representation.role === "primary") ||
|
||||
card.representations.find((representation) => representation.role === "front");
|
||||
return {
|
||||
kind: "character",
|
||||
title: asset.title,
|
||||
@@ -134,12 +185,14 @@ export function projectCharacterToInsertPayload(asset: ProjectAsset): InsertAsse
|
||||
visualStatus: card.visualStatus,
|
||||
voiceStatus: card.voiceStatus,
|
||||
voiceName: card.voice?.profile.name,
|
||||
voiceProfile: card.voice ? {
|
||||
name: card.voice.profile.name,
|
||||
provider: card.voice.profile.provider,
|
||||
language: card.voice.profile.language,
|
||||
timbre: card.voice.profile.timbre,
|
||||
} : undefined,
|
||||
voiceProfile: card.voice
|
||||
? {
|
||||
name: card.voice.profile.name,
|
||||
provider: card.voice.profile.provider,
|
||||
language: card.voice.profile.language,
|
||||
timbre: card.voice.profile.timbre,
|
||||
}
|
||||
: undefined,
|
||||
voiceInstructions: card.voice?.instructions,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -14,11 +14,15 @@ import { cn } from "@/lib/utils";
|
||||
import { useSyncProgressStore } from "@/stores/use-sync-progress-store";
|
||||
|
||||
export function CanvasCreateCard({ disabled, onClick }: { disabled?: boolean; onClick: () => void }) {
|
||||
return <button type="button" className="app-canvas-create-card" disabled={disabled} onClick={onClick}>
|
||||
<span className="app-canvas-create-preview"><Plus className="app-canvas-create-icon" /></span>
|
||||
<span className="app-canvas-create-title">新建画布</span>
|
||||
<span className="app-canvas-create-meta">从空白开始</span>
|
||||
</button>;
|
||||
return (
|
||||
<button type="button" className="app-canvas-create-card" disabled={disabled} onClick={onClick}>
|
||||
<span className="app-canvas-create-preview">
|
||||
<Plus className="app-canvas-create-icon" />
|
||||
</span>
|
||||
<span className="app-canvas-create-title">新建画布</span>
|
||||
<span className="app-canvas-create-meta">从空白开始</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export function CanvasProjectCard({ project, projectName, variant = "library", readOnly = false, footer }: { project: CanvasProject; projectName?: string; variant?: "library" | "recent"; readOnly?: boolean; footer?: ReactNode }) {
|
||||
@@ -55,14 +59,27 @@ export function CanvasProjectCard({ project, projectName, variant = "library", r
|
||||
>
|
||||
<ProjectPreview project={project} />
|
||||
</button>
|
||||
{!compact && !readOnly ? <span className={`canvas-project-select ${selected ? "is-visible" : ""}`} onClick={(event) => event.stopPropagation()}><input type="checkbox" checked={selected} onChange={(event) => toggleSelected(project.id, event.target.checked)} className="app-canvas-project-checkbox" aria-label={`选择 ${project.title}`} /></span> : null}
|
||||
<div className="canvas-project-cover-meta" aria-hidden="true"><span className="canvas-project-node-count">{project.nodes.length} 节点</span></div>
|
||||
{!compact && !readOnly ? (
|
||||
<span className={`canvas-project-select ${selected ? "is-visible" : ""}`} onClick={(event) => event.stopPropagation()}>
|
||||
<input type="checkbox" checked={selected} onChange={(event) => toggleSelected(project.id, event.target.checked)} className="app-canvas-project-checkbox" aria-label={`选择 ${project.title}`} />
|
||||
</span>
|
||||
) : null}
|
||||
<div className="canvas-project-cover-meta" aria-hidden="true">
|
||||
<span className="canvas-project-node-count">{project.nodes.length} 节点</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={cn("app-canvas-project-body", compact ? "is-compact" : "")}>
|
||||
<div className="canvas-project-heading-row">
|
||||
{editing && !readOnly ? (
|
||||
<Input className="canvas-project-title-input" value={editingTitle} onClick={(event) => event.stopPropagation()} onChange={(event) => setEditingTitle(event.target.value)} onKeyDown={(event) => event.key === "Enter" && saveTitle()} autoFocus />
|
||||
<Input
|
||||
className="canvas-project-title-input"
|
||||
value={editingTitle}
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
onChange={(event) => setEditingTitle(event.target.value)}
|
||||
onKeyDown={(event) => event.key === "Enter" && saveTitle()}
|
||||
autoFocus
|
||||
/>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
@@ -77,12 +94,18 @@ export function CanvasProjectCard({ project, projectName, variant = "library", r
|
||||
)}
|
||||
{editing && !readOnly ? (
|
||||
<div className="canvas-project-actions" onClick={(event) => event.stopPropagation()}>
|
||||
<button type="button" onClick={saveTitle} aria-label="保存名称"><Check className="size-3.5" /></button>
|
||||
<button type="button" onClick={stopEditing} aria-label="取消重命名"><X className="size-3.5" /></button>
|
||||
<button type="button" onClick={saveTitle} aria-label="保存名称">
|
||||
<Check className="size-3.5" />
|
||||
</button>
|
||||
<button type="button" onClick={stopEditing} aria-label="取消重命名">
|
||||
<X className="size-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
) : !readOnly ? (
|
||||
<div className="canvas-project-actions" onClick={(event) => event.stopPropagation()}>
|
||||
<button type="button" onClick={() => startEditing(project.id, project.title)} aria-label={`重命名 ${project.title}`} title="重命名"><Pencil className="size-3.5" /></button>
|
||||
<button type="button" onClick={() => startEditing(project.id, project.title)} aria-label={`重命名 ${project.title}`} title="重命名">
|
||||
<Pencil className="size-3.5" />
|
||||
</button>
|
||||
<Dropdown
|
||||
trigger={["click"]}
|
||||
menu={{
|
||||
@@ -94,13 +117,23 @@ export function CanvasProjectCard({ project, projectName, variant = "library", r
|
||||
],
|
||||
}}
|
||||
>
|
||||
<button type="button" aria-label={`${project.title} 画布操作`} title="更多操作"><MoreHorizontal className="size-4" /></button>
|
||||
<button type="button" aria-label={`${project.title} 画布操作`} title="更多操作">
|
||||
<MoreHorizontal className="size-4" />
|
||||
</button>
|
||||
</Dropdown>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="canvas-project-stats"><span>{projectName || "自由画布"}</span><span aria-hidden="true">·</span><time dateTime={project.updatedAt}>{formatProjectTime(project.updatedAt)}</time></div>
|
||||
{footer ? <div className="canvas-project-card-footer" onClick={(event) => event.stopPropagation()}>{footer}</div> : null}
|
||||
<div className="canvas-project-stats">
|
||||
<span>{projectName || "自由画布"}</span>
|
||||
<span aria-hidden="true">·</span>
|
||||
<time dateTime={project.updatedAt}>{formatProjectTime(project.updatedAt)}</time>
|
||||
</div>
|
||||
{footer ? (
|
||||
<div className="canvas-project-card-footer" onClick={(event) => event.stopPropagation()}>
|
||||
{footer}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
@@ -109,26 +142,31 @@ export function CanvasProjectCard({ project, projectName, variant = "library", r
|
||||
export function ProjectPreview({ project, preferLatestImage = false }: { project: CanvasProject; preferLatestImage?: boolean }) {
|
||||
const syncProgress = useSyncProgressStore((state) => state.syncingProjects[project.id]);
|
||||
const isSyncing = Boolean(syncProgress && (syncProgress.phase === "uploading" || syncProgress.phase === "saving"));
|
||||
const mediaNodes = project.nodes
|
||||
.flatMap((node) => {
|
||||
if (node.type !== CanvasNodeType.Image && node.type !== CanvasNodeType.Video) return [];
|
||||
const url = getNodeMediaUrl(node);
|
||||
const storageKey = node.metadata?.storageKey;
|
||||
return isPreviewUrl(url) || Boolean(storageKey) ? [{ node, url, storageKey }] : [];
|
||||
});
|
||||
const mediaNodes = project.nodes.flatMap((node) => {
|
||||
if (node.type !== CanvasNodeType.Image && node.type !== CanvasNodeType.Video) return [];
|
||||
const url = getNodeMediaUrl(node);
|
||||
const storageKey = node.metadata?.storageKey;
|
||||
return isPreviewUrl(url) || Boolean(storageKey) ? [{ node, url, storageKey }] : [];
|
||||
});
|
||||
const imageNodes = mediaNodes.filter(({ node }) => node.type === CanvasNodeType.Image);
|
||||
const media = preferLatestImage
|
||||
? imageNodes[imageNodes.length - 1] || mediaNodes[mediaNodes.length - 1]
|
||||
: imageNodes[0] || mediaNodes[0];
|
||||
const media = preferLatestImage ? imageNodes[imageNodes.length - 1] || mediaNodes[mediaNodes.length - 1] : imageNodes[0] || mediaNodes[0];
|
||||
|
||||
const content = media ? (
|
||||
<div className="canvas-project-media size-full">
|
||||
{media.node.type === CanvasNodeType.Video
|
||||
? <div className="canvas-project-video size-full"><Video className="size-8" aria-label={media.node.title || "项目视频"} /></div>
|
||||
: <CachedResourceImage storageKey={media.storageKey} src={media.url} alt={media.node.title || "项目图片"} loading="lazy" decoding="async" className="size-full min-h-0 object-cover" />}
|
||||
{media.node.type === CanvasNodeType.Video ? (
|
||||
<div className="canvas-project-video size-full">
|
||||
<Video className="size-8" aria-label={media.node.title || "项目视频"} />
|
||||
</div>
|
||||
) : (
|
||||
<CachedResourceImage storageKey={media.storageKey} src={media.url} alt={media.node.title || "项目图片"} loading="lazy" decoding="async" className="size-full min-h-0 object-cover" />
|
||||
)}
|
||||
</div>
|
||||
) : !project.nodes.length ? (
|
||||
<div className="canvas-project-empty size-full"><Plus className="canvas-project-empty-icon" /><span>空白画布</span><small>等待第一幕</small></div>
|
||||
<div className="canvas-project-empty size-full">
|
||||
<Plus className="canvas-project-empty-icon" />
|
||||
<span>空白画布</span>
|
||||
<small>等待第一幕</small>
|
||||
</div>
|
||||
) : (
|
||||
<div className="canvas-project-preview-canvas relative size-full overflow-hidden">
|
||||
{buildNodePreviewLayout(project.nodes.slice(0, 8)).map(({ node, style }) => {
|
||||
@@ -147,10 +185,7 @@ export function ProjectPreview({ project, preferLatestImage = false }: { project
|
||||
<div className="relative size-full overflow-hidden">
|
||||
{content}
|
||||
{isSyncing && syncProgress ? (
|
||||
<div
|
||||
className="absolute inset-0 z-20 flex flex-col items-center justify-center gap-2 bg-stone-950/75 p-3 text-center backdrop-blur-sm transition-all duration-300 pointer-events-none select-none"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="absolute inset-0 z-20 flex flex-col items-center justify-center gap-2 bg-stone-950/75 p-3 text-center backdrop-blur-sm transition-all duration-300 pointer-events-none select-none" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="flex items-center gap-1.5 text-amber-400">
|
||||
<CloudUpload className="size-4 animate-bounce" />
|
||||
<span className="text-xs font-medium tracking-wide">云端同步中</span>
|
||||
@@ -230,7 +265,7 @@ function getNodePresentation(node: CanvasNodeData) {
|
||||
}
|
||||
|
||||
function isPreviewUrl(value?: string) {
|
||||
return Boolean(value && (/^(https?:|blob:|data:image\/|data:video\/|\/api\/)/.test(value)));
|
||||
return Boolean(value && /^(https?:|blob:|data:image\/|data:video\/|\/api\/)/.test(value));
|
||||
}
|
||||
|
||||
export function formatProjectTime(value: string) {
|
||||
|
||||
Reference in New Issue
Block a user