fix(canvas): 创作界面 - 统一素材选择并修复画布顶栏与暗色交互

web/src/components/assets/asset-library-picker-modal.tsx

@@ -0,0 +1,230 @@
+import { Modal } from "antd";
+import { Check, FileText, FolderOpen, Image as ImageIcon, LoaderCircle, Music2, Search, Upload, UserRound, Video } from "lucide-react";
+import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+
+import { AssetMediaPreview } from "@/components/asset-media-preview";
+import { cn } from "@/lib/utils";
+import type { Asset } from "@/stores/use-asset-store";
+
+export type AssetLibraryPickerItem = {
+    id: string;
+    title: string;
+    category: string;
+    kindLabel: string;
+    asset?: Asset;
+    imageUrl?: string;
+    imageFit?: "cover" | "contain";
+    description?: string;
+    searchText?: string;
+    disabledReason?: string;
+};
+
+type Props = {
+    open: boolean;
+    items: AssetLibraryPickerItem[];
+    categoryLabels: Record<string, string>;
+    initialCategory?: string;
+    initialSelectedIds?: Iterable<string>;
+    multiple?: boolean;
+    title?: string;
+    eyebrow?: string;
+    confirmLabel?: (count: number) => string;
+    emptyTitle?: string;
+    emptyDescription?: string;
+    footerNote?: string;
+    upload?: {
+        accept: string;
+        description: string;
+        onUpload: (files: FileList) => Promise<string[]>;
+    };
+    onClose: () => void;
+    onConfirm: (ids: string[]) => Promise<void> | void;
+};
+
+export function AssetLibraryPickerModal({
+    open,
+    items,
+    categoryLabels,
+    initialCategory = "all",
+    initialSelectedIds,
+    multiple = true,
+    title = "素材库",
+    eyebrow = "参考内容",
+    confirmLabel = (count) => `使用已选素材${count ? `（${count}）` : ""}`,
+    emptyTitle = "这个分类还没有素材",
+    emptyDescription = "换个分类后再试。",
+    footerNote,
+    upload,
+    onClose,
+    onConfirm,
+}: Props) {
+    const [category, setCategory] = useState(initialCategory);
+    const [keyword, setKeyword] = useState("");
+    const [selected, setSelected] = useState<Set<string>>(new Set());
+    const [working, setWorking] = useState(false);
+    const [uploadingCount, setUploadingCount] = useState(0);
+    const [error, setError] = useState("");
+    const uploadInputRef = useRef<HTMLInputElement>(null);
+    const initialSelectedIdsRef = useRef(initialSelectedIds);
+    const itemsRef = useRef(items);
+    initialSelectedIdsRef.current = initialSelectedIds;
+    itemsRef.current = items;
+    const categories = useMemo(() => ["all", ...Array.from(new Set(items.map((item) => item.category || "other")))], [items]);
+    const visibleItems = useMemo(() => {
+        const query = keyword.trim().toLowerCase();
+        return items.filter((item) => {
+            if (category !== "all" && item.category !== category) return false;
+            return !query || [item.title, item.searchText || "", item.description || ""].join(" ").toLowerCase().includes(query);
+        });
+    }, [category, items, keyword]);
+    const selectedIds = useMemo(
+        () => items.filter((item) => !item.disabledReason && selected.has(item.id)).map((item) => item.id),
+        [items, selected],
+    );
+
+    useEffect(() => {
+        if (!open) return;
+        setCategory(initialCategory);
+        setKeyword("");
+        const selectableIds = new Set(itemsRef.current.filter((item) => !item.disabledReason).map((item) => item.id));
+        setSelected(new Set(Array.from(initialSelectedIdsRef.current || []).filter((id) => selectableIds.has(id))));
+        setWorking(false);
+        setUploadingCount(0);
+        setError("");
+    }, [initialCategory, open]);
+
+    useEffect(() => {
+        if (category === "all" || categories.includes(category)) return;
+        setCategory("all");
+    }, [categories, category]);
+
+    const toggle = (item: AssetLibraryPickerItem) => {
+        if (item.disabledReason || working) return;
+        setError("");
+        setSelected((current) => {
+            if (!multiple) return current.has(item.id) ? new Set() : new Set([item.id]);
+            const next = new Set(current);
+            if (next.has(item.id)) next.delete(item.id);
+            else next.add(item.id);
+            return next;
+        });
+    };
+
+    const confirm = async () => {
+        if (!selectedIds.length || working) return;
+        setWorking(true);
+        setError("");
+        try {
+            await onConfirm(selectedIds);
+        } catch (reason) {
+            setError(reason instanceof Error ? reason.message : "素材操作失败，请重试");
+        } finally {
+            setWorking(false);
+        }
+    };
+
+    const handleUpload = async (files: FileList | null) => {
+        if (!upload || !files?.length || working) return;
+        setWorking(true);
+        setError("");
+        setUploadingCount(files.length);
+        try {
+            const ids = await upload.onUpload(files);
+            if (ids.length) setSelected((current) => new Set(multiple ? [...current, ...ids] : ids.slice(-1)));
+        } catch (reason) {
+            setError(reason instanceof Error ? reason.message : "素材上传失败，请重试");
+        } finally {
+            if (uploadInputRef.current) uploadInputRef.current.value = "";
+            setWorking(false);
+            setUploadingCount(0);
+        }
+    };
+
+    const countFor = (value: string) => value === "all" ? items.length : items.filter((item) => item.category === value).length;
+    const uploading = uploadingCount > 0;
+
+    return (
+        <Modal
+            open={open}
+            footer={null}
+            title={null}
+            destroyOnHidden
+            closable={!working}
+            maskClosable={!working}
+            keyboard={!working}
+            onCancel={() => {
+                if (!working) onClose();
+            }}
+            width="min(1040px, calc(100vw - 24px))"
+            className="asset-library-picker-modal"
+            styles={{ container: { padding: 0 }, body: { padding: 0 } }}
+        >
+            <div className="asset-picker-shell">
+                <header className="asset-picker-toolbar">
+                    <div className="asset-picker-heading"><span>{eyebrow}</span><strong>{title}</strong></div>
+                    <label className="asset-picker-search"><Search aria-hidden /><input value={keyword} onChange={(event) => setKeyword(event.target.value)} placeholder="搜索素材名称或标签" aria-label="搜索素材" /></label>
+                    <span className="asset-picker-count">已选 {selectedIds.length} · {visibleItems.length} 个素材</span>
+                </header>
+                <div className="asset-picker-body">
+                    <nav className="asset-picker-categories" aria-label="素材分类">
+                        {categories.map((value) => (
+                            <button key={value} type="button" className={category === value ? "is-active" : ""} onClick={() => setCategory(value)}>
+                                <span>{categoryLabels[value] || "其他"}</span><em>{countFor(value)}</em>
+                            </button>
+                        ))}
+                    </nav>
+                    <div className="asset-picker-grid-wrap">
+                        <div className="asset-picker-grid">
+                            {visibleItems.length ? visibleItems.map((item) => (
+                                <PickerCard key={item.id} item={item} selected={selected.has(item.id)} onToggle={() => toggle(item)} />
+                            )) : (
+                                <div className="asset-picker-empty"><FolderOpen /><strong>{emptyTitle}</strong><span>{upload ? "换个分类，或从底部上传一份新素材。" : emptyDescription}</span></div>
+                            )}
+                        </div>
+                    </div>
+                </div>
+                <footer className={cn("asset-picker-footer", !upload && "is-compact")}>
+                    {upload ? (
+                        <>
+                            <input ref={uploadInputRef} type="file" hidden accept={upload.accept} multiple={multiple} onChange={(event) => void handleUpload(event.target.files)} />
+                            <button type="button" className="asset-picker-upload" onClick={() => uploadInputRef.current?.click()} disabled={working} aria-busy={uploading}>
+                                {uploading ? <LoaderCircle className="animate-spin" /> : <Upload />}
+                                <span><strong>{uploading ? `正在上传 ${uploadingCount} 个素材` : "上传新素材"}</strong><small>{uploading ? "保存完成后会自动选中" : upload.description}</small></span>
+                            </button>
+                        </>
+                    ) : footerNote ? <span className="asset-picker-footer-note">{footerNote}</span> : <span />}
+                    {error ? <span className="asset-picker-footer-error" role="alert">{error}</span> : null}
+                    <div className="asset-picker-actions">
+                        <button type="button" onClick={onClose} disabled={working}>取消</button>
+                        <button type="button" className="is-primary" disabled={working || !selectedIds.length} onClick={() => void confirm()}>
+                            {working && !uploading ? <LoaderCircle className="animate-spin" /> : <Check />}{confirmLabel(selectedIds.length)}
+                        </button>
+                    </div>
+                </footer>
+            </div>
+        </Modal>
+    );
+}
+
+function PickerCard({ item, selected, onToggle }: { item: AssetLibraryPickerItem; selected: boolean; onToggle: () => void }) {
+    const disabled = Boolean(item.disabledReason);
+    return (
+        <button type="button" className={cn("asset-picker-card", selected && "is-selected", disabled && "is-disabled")} onClick={onToggle} disabled={disabled} aria-pressed={selected} title={item.disabledReason || item.title}>
+            <div className="asset-picker-card-media">
+                {item.imageUrl ? <img src={item.imageUrl} alt={item.title} loading="lazy" decoding="async" className={item.imageFit === "contain" ? "is-contain" : undefined} /> : <AssetMediaPreview asset={item.asset} alt={item.title} fallback={<div className="asset-picker-card-fallback">{kindIcon(item.kindLabel)}</div>} />}
+                <span className="asset-picker-card-check"><Check /></span>
+                <span className="asset-picker-card-kind">{item.kindLabel}</span>
+                {item.disabledReason ? <span className="asset-picker-card-lock">{item.disabledReason}</span> : null}
+            </div>
+            <div className="asset-picker-card-copy"><strong>{item.title || "未命名素材"}</strong>{item.description ? <span>{item.description}</span> : null}</div>
+        </button>
+    );
+}
+
+function kindIcon(label: string): ReactNode {
+    if (label.includes("角色")) return <UserRound />;
+    if (label.includes("视频")) return <Video />;
+    if (label.includes("音频")) return <Music2 />;
+    if (label.includes("文本")) return <FileText />;
+    return <ImageIcon />;
+}

web/src/components/canvas/asset-picker-modal.tsx

@@ -1,10 +1,6 @@
-import { useEffect, useMemo, useState } from "react";
-import { Input, Modal, Pagination, Tag } from "antd";
-import { Search } from "lucide-react";
+import { useMemo } from "react";
 
-import { WorkspaceState } from "@/components/layout/workspace-state";
-import { AssetMediaPreview } from "@/components/asset-media-preview";
-import { cn } from "@/lib/utils";
+import { AssetLibraryPickerModal, type AssetLibraryPickerItem } from "@/components/assets/asset-library-picker-modal";
 import { useAssetStore, type Asset } from "@/stores/use-asset-store";
 
 type InsertableAsset = Extract<Asset, { kind: "text" | "image" | "video" | "audio" }>;
@@ -18,129 +14,44 @@ export type InsertAssetPayload =
 
 type Props = {
     open: boolean;
-    defaultTab?: string;
     onInsert: (payload: InsertAssetPayload) => void;
     onClose: () => void;
 };
 
+const categoryLabels: Record<string, string> = { all: "全部素材", character: "角色", environment: "场景", wardrobe: "服饰", prop: "道具", weapon: "武器", style: "画风", other: "其他" };
+
 export function AssetPickerModal({ open, onInsert, onClose }: Props) {
-    return (
-        <Modal title="选择素材" open={open} onCancel={onClose} footer={null} width={860} destroyOnHidden styles={{ body: { padding: "0 24px 24px", minHeight: 480 } }}>
-            <MyAssetsTab onInsert={onInsert} />
-        </Modal>
-    );
-}
-
-const PAGE_SIZE = 8;
-
-const kindOptions = [
-    { label: "全部", value: "all" },
-    { label: "文本", value: "text" },
-    { label: "图片", value: "image" },
-    { label: "视频", value: "video" },
-    { label: "音频", value: "audio" },
-];
-
-function PickerCard({ asset, onClick }: { asset: InsertableAsset; onClick: () => void }) {
-    const { title, kind } = asset;
-    return (
-        <button
-            type="button"
-            className="group relative cursor-pointer overflow-hidden rounded-lg border border-stone-200 bg-white text-left transition hover:border-stone-400 hover:shadow-md dark:border-stone-700 dark:bg-stone-900 dark:hover:border-stone-500"
-            onClick={onClick}
-        >
-            <AssetMediaPreview asset={asset} alt={title} className="aspect-[4/3] w-full bg-black object-cover" fallback={<div className="flex aspect-[4/3] items-center justify-center bg-stone-100 p-3 text-center text-xs leading-5 text-stone-500 dark:bg-stone-800 dark:text-stone-400">{title}</div>} />
-            <div className="p-2.5">
-                <div className="flex items-center justify-between gap-2">
-                    <span className="line-clamp-1 text-xs font-medium text-stone-800 dark:text-stone-200">{title}</span>
-                    <Tag className="m-0 shrink-0 text-[var(--fs-tiny)]">{kind === "image" ? "图片" : kind === "video" ? "视频" : kind === "audio" ? "音频" : "文本"}</Tag>
-                </div>
-            </div>
-            <div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-stone-950/0 text-sm font-medium text-white opacity-0 transition group-hover:bg-stone-950/55 group-hover:opacity-100">插入</div>
-        </button>
-    );
-}
-
-function MyAssetsTab({ onInsert }: { onInsert: (payload: InsertAssetPayload) => void }) {
     const assets = useAssetStore((state) => state.assets);
-    const [keyword, setKeyword] = useState("");
-    const [kindFilter, setKindFilter] = useState("all");
-    const [page, setPage] = useState(1);
+    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: asset.category || "other",
+        kindLabel: asset.kind === "image" ? "图片" : asset.kind === "video" ? "视频" : asset.kind === "audio" ? "音频" : "文本",
+        asset,
+        searchText: asset.tags.join(" "),
+    })), [insertableAssets]);
 
-    const filtered = useMemo(() => {
-        const query = keyword.trim().toLowerCase();
-        return assets
-            .filter((asset): asset is InsertableAsset => asset.kind === "text" || asset.kind === "image" || asset.kind === "video" || asset.kind === "audio")
-            .filter((a) => kindFilter === "all" || a.kind === kindFilter)
-            .filter((a) => !query || [a.title, ...(a.tags || [])].join(" ").toLowerCase().includes(query));
-    }, [assets, keyword, kindFilter]);
-
-    const visible = useMemo(() => filtered.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE), [filtered, page]);
-
-    useEffect(() => {
-        const maxPage = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
-        setPage((v) => Math.min(v, maxPage));
-    }, [filtered.length]);
-
-    const handleInsert = (asset: InsertableAsset) => {
-        if (asset.kind === "text") {
-            onInsert({ kind: "text", content: asset.data.content, title: asset.title, assetId: asset.id });
-        } else if (asset.kind === "audio") {
-            onInsert({ 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 });
-        } else if (asset.kind === "video") {
-            onInsert({ 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, bytes: asset.data.bytes, mimeType: asset.data.mimeType, assetId: asset.id });
-        } else if (asset.kind === "image") {
-            onInsert({ kind: "image", dataUrl: asset.data.dataUrl, storageKey: asset.data.storageKey, title: asset.title, assetId: asset.id });
-        }
+    const insert = (id: string) => {
+        const asset = insertableAssets.find((item) => item.id === id);
+        if (!asset) throw new Error("所选素材已不存在，请重新选择");
+        if (asset.kind === "text") onInsert({ kind: "text", content: asset.data.content, title: asset.title, assetId: asset.id });
+        else if (asset.kind === "audio") onInsert({ 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 });
+        else if (asset.kind === "video") onInsert({ 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, bytes: asset.data.bytes, mimeType: asset.data.mimeType, assetId: asset.id });
+        else onInsert({ kind: "image", dataUrl: asset.data.dataUrl, storageKey: asset.data.storageKey, title: asset.title, assetId: asset.id });
+        onClose();
     };
 
     return (
-        <div className="space-y-4">
-            <div className="flex flex-wrap items-center gap-3">
-                <Input
-                    className="w-56"
-                    size="small"
-                    prefix={<Search className="size-3.5 text-stone-400" />}
-                    placeholder="搜索素材"
-                    value={keyword}
-                    allowClear
-                    onChange={(e) => {
-                        setPage(1);
-                        setKeyword(e.target.value);
-                    }}
-                />
-                <div className="flex gap-1.5">
-                    {kindOptions.map((opt) => (
-                        <Tag.CheckableTag
-                            key={opt.value}
-                            checked={kindFilter === opt.value}
-                            className={cn("prompt-filter-tag", kindFilter === opt.value && "is-active")}
-                            onChange={() => {
-                                setPage(1);
-                                setKindFilter(opt.value);
-                            }}
-                        >
-                            {opt.label}
-                        </Tag.CheckableTag>
-                    ))}
-                </div>
-            </div>
-
-            {visible.length ? (
-                <div className="grid grid-cols-4 gap-3">
-                    {visible.map((asset) => (
-                        <PickerCard key={asset.id} asset={asset} onClick={() => handleInsert(asset)} />
-                    ))}
-                </div>
-            ) : (
-                <WorkspaceState icon="assets" compact title="没有可用素材" description={keyword || kindFilter !== "all" ? "调整关键词或素材类型后再试。" : "先在素材库中添加图片、视频、音频或文本。"} />
-            )}
-
-            {filtered.length > PAGE_SIZE && (
-                <div className="flex justify-center">
-                    <Pagination size="small" current={page} pageSize={PAGE_SIZE} total={filtered.length} onChange={setPage} showSizeChanger={false} />
-                </div>
-            )}
-        </div>
+        <AssetLibraryPickerModal
+            open={open}
+            items={items}
+            categoryLabels={categoryLabels}
+            multiple={false}
+            confirmLabel={() => "插入所选素材"}
+            emptyDescription="先在素材库中添加图片、视频、音频或文本。"
+            onClose={onClose}
+            onConfirm={(ids) => insert(ids[0])}
+        />
     );
 }

web/src/components/canvas/canvas-asset-tray.tsx

@@ -118,7 +118,7 @@ export function CanvasAssetTray({ assetImages, canvasImages, showLibrary = true,
         {
             id: "asset-tray-toggle",
             label: open ? "收起素材空间" : `打开素材空间，共 ${(showLibrary ? assetImages.length : 0) + canvasImages.length} 项`,
-            icon: <span className="relative"><Images /><span className="absolute -right-1.5 -top-1.5 min-w-3 rounded-full px-0.5 text-center text-[var(--fs-nano)] font-bold leading-3" style={{ background: theme.accent.primary, color: "#ffffff" }}>{(showLibrary ? assetImages.length : 0) + canvasImages.length}</span></span>,
+            icon: <span className="relative"><Images /><span className="absolute -right-1.5 -top-1.5 min-w-3 rounded-full px-0.5 text-center text-[var(--fs-nano)] font-bold leading-3" style={{ background: theme.accent.primary, color: theme.accent.onPrimary }}>{(showLibrary ? assetImages.length : 0) + canvasImages.length}</span></span>,
             active: open,
             onClick: () => setOpen((value) => !value),
         },

web/src/components/canvas/canvas-emotion-workspace.tsx

@@ -305,8 +305,8 @@ function FaceSelectionOverlay({
                     >
                         {selected ? (
                             <span
-                                className="absolute -top-2.5 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-full px-1.5 py-0.5 text-[var(--fs-micro)] font-semibold text-white"
-                                style={{ background: active ? theme.accent.primary : "rgba(20,20,22,.82)" }}
+                                className="absolute -top-2.5 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-full px-1.5 py-0.5 text-[var(--fs-micro)] font-semibold"
+                                style={{ background: active ? theme.accent.primary : "rgba(20,20,22,.82)", color: active ? theme.accent.onPrimary : "#ffffff" }}
                             >
                                 {selected.name}
                             </span>

web/src/components/canvas/canvas-image-toolbar-settings-modal.tsx

@@ -74,7 +74,7 @@ export function ImageToolSettingsModal({ open, tools, selectedIds, showLabels, o
                     {tools.map((tool) => (
                         <label key={tool.id} className="flex h-8 min-w-0 cursor-pointer items-center gap-1 rounded-[var(--r-md)] border px-1.5 transition-colors" style={{ background: selected.has(tool.id) ? theme.accent.primarySoft : "transparent", borderColor: selected.has(tool.id) ? theme.accent.primary : theme.toolbar.border, color: selected.has(tool.id) ? theme.accent.primary : theme.node.text }}>
                             <Checkbox className="canvas-image-tool-checkbox shrink-0" style={{ "--tool-accent": theme.accent.primary } as CSSProperties} value={tool.id} disabled={!selected.has(tool.id) && selectedTools.length >= maxSelected} />
-                            <span className="grid size-5 shrink-0 place-items-center rounded-[var(--r-sm)] [&_svg]:size-3" style={{ background: selected.has(tool.id) ? theme.accent.primary : theme.toolbar.itemHover, color: selected.has(tool.id) ? "#ffffff" : theme.node.muted }}>{tool.icon}</span>
+                            <span className="grid size-5 shrink-0 place-items-center rounded-[var(--r-sm)] [&_svg]:size-3" style={{ background: selected.has(tool.id) ? theme.accent.primary : theme.toolbar.itemHover, color: selected.has(tool.id) ? theme.accent.onPrimary : theme.node.muted }}>{tool.icon}</span>
                             <span className="min-w-0 truncate text-[var(--fs-tiny)] font-medium leading-none">{tool.label}</span>
                         </label>
                     ))}

web/src/components/canvas/canvas-node-toolbar.tsx

@@ -473,10 +473,10 @@ export function CanvasNodeInfoModal({ node, open, onClose, onMetadataChange, rea
     };
 
     const title = (
-        <div className="flex items-center justify-between gap-4 pr-10">
+        <div className="canvas-node-inspector-title">
             <div className="min-w-0">
-                <div className="text-[var(--fs-heading-lg)] font-semibold tracking-[-0.02em]">节点信息</div>
-                {node ? <div className="mt-0.5 truncate text-xs opacity-45">{node.id}</div> : null}
+                <div className="text-[var(--fs-heading-lg)] font-semibold">节点信息</div>
+                {node ? <div className="canvas-node-inspector-id">{node.id}</div> : null}
             </div>
             <Segmented
                 size="small"
@@ -497,70 +497,66 @@ export function CanvasNodeInfoModal({ node, open, onClose, onMetadataChange, rea
             open={open && Boolean(node)}
             centered
             footer={null}
-            width={720}
+            width={760}
             onCancel={onClose}
-            styles={{ body: { paddingTop: 8 } }}
+            styles={{ body: { paddingTop: 4 } }}
         >
             {node ? (
-                <div className="h-[min(68vh,640px)] min-h-[420px] text-sm" style={{ color: theme.node.text }}>
+                <div className="canvas-node-inspector" style={{ color: theme.node.text }}>
                     {view === "info" ? (
-                        <div className="thin-scrollbar h-full space-y-4 overflow-auto pr-1">
-                            <div className="grid gap-2 rounded-2xl border p-3" style={{ background: theme.node.fill, borderColor: theme.node.stroke }}>
-                                <div className="grid grid-cols-2 gap-2 max-sm:grid-cols-1">
+                        <div className="thin-scrollbar canvas-node-inspector-scroll">
+                            <section className="canvas-node-inspector-section">
+                                <div className="canvas-node-inspector-section-heading"><span>基础信息</span><em>{node.metadata?.status || "idle"}</em></div>
+                                <div className="canvas-node-inspector-facts">
                                     <InfoRow label="类型" value={nodeTypeLabel} />
-                                    <InfoRow label="状态" value={node.metadata?.status || "idle"} />
                                     <InfoRow label="尺寸" value={`${Math.round(node.width)} x ${Math.round(node.height)}`} />
                                     <InfoRow label="位置" value={`${Math.round(node.position.x)}, ${Math.round(node.position.y)}`} />
                                     {batchCount > 1 ? <InfoRow label="图片组" value={`${batchCount} 张`} /> : null}
                                     {imageBytes ? <InfoRow label="图片大小" value={formatBytes(imageBytes)} /> : null}
                                 </div>
-                                {node.type === CanvasNodeType.Image ? (
-                                    <div className="border-t pt-3" style={{ borderColor: theme.toolbar.border }}>
-                                        <div className="mb-2 text-xs font-medium opacity-45">项目资产分类</div>
-                                        <div className="flex flex-wrap gap-1.5">
-                                            {assetCategoryOptions.map((option) => {
-                                                const active = assetCategory === option.value;
-                                                return <button key={option.value} type="button" disabled={readOnly} onClick={() => saveAssetCategory(option.value)} className="h-7 rounded-md border px-2 text-xs font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-60" style={{ borderColor: active ? theme.accent.primary : theme.toolbar.border, background: active ? theme.accent.primarySoft : theme.toolbar.panel, color: active ? theme.accent.primary : theme.node.muted }}>{option.label}</button>;
-                                            })}
-                                        </div>
-                                        <div className="mt-2 text-[var(--fs-label)] leading-5 opacity-45">生成后会按此分类进入项目资产；角色、场景和画风工作流会自动预填。</div>
-                                    </div>
-                                ) : null}
-                                {node.metadata?.prompt ? (
-                                    <div className="rounded-xl border px-3 py-2" style={{ borderColor: theme.toolbar.border, background: theme.toolbar.panel }}>
-                                        <div className="mb-1 text-xs font-medium opacity-45">提示词</div>
-                                        <div className="whitespace-pre-wrap break-words leading-6">{node.metadata.prompt}</div>
-                                    </div>
-                                ) : null}
-                                {node.type === CanvasNodeType.Skill && node.metadata?.skillSnapshot ? (
-                                    <div className="rounded-xl border px-3 py-2" style={{ borderColor: theme.toolbar.border, background: theme.toolbar.panel }}>
-                                        <div className="mb-1 text-xs font-medium opacity-45">技能模板</div>
-                                        <div className="whitespace-pre-wrap break-words leading-6">{node.metadata.skillSnapshot.template}</div>
-                                        {node.metadata.skillSnapshot.outputContract ? (
-                                            <>
-                                                <div className="mb-1 mt-3 text-xs font-medium opacity-45">输出约束</div>
-                                                <div className="whitespace-pre-wrap break-words leading-6">{node.metadata.skillSnapshot.outputContract}</div>
-                                            </>
-                                        ) : null}
-                                    </div>
-                                ) : null}
-                            </div>
+                            </section>
 
                             {node.type === CanvasNodeType.Image ? (
-                                <div className="rounded-2xl border p-3" style={{ background: theme.toolbar.panel, borderColor: theme.node.stroke }}>
-                                    <div className="mb-2 flex items-center justify-between gap-3">
+                                <section className="canvas-node-inspector-section">
+                                    <div className="canvas-node-inspector-section-heading"><span>项目资产分类</span></div>
+                                    <div className="canvas-node-inspector-options">
+                                        {assetCategoryOptions.map((option) => {
+                                            const active = assetCategory === option.value;
+                                            return <button key={option.value} type="button" disabled={readOnly} onClick={() => saveAssetCategory(option.value)} className={active ? "is-active" : ""} style={{ "--inspector-accent": theme.accent.primary, "--inspector-accent-soft": theme.accent.primarySoft } as CSSProperties}>{option.label}</button>;
+                                        })}
+                                    </div>
+                                    <p className="canvas-node-inspector-help">生成后会按此分类进入项目资产；角色、场景和画风工作流会自动预填。</p>
+                                </section>
+                            ) : null}
+
+                            {node.metadata?.prompt ? (
+                                <section className="canvas-node-inspector-section">
+                                    <div className="canvas-node-inspector-section-heading"><span>提示词</span></div>
+                                    <div className="canvas-node-inspector-copy">{node.metadata.prompt}</div>
+                                </section>
+                            ) : null}
+
+                            {node.type === CanvasNodeType.Skill && node.metadata?.skillSnapshot ? (
+                                <section className="canvas-node-inspector-section">
+                                    <div className="canvas-node-inspector-section-heading"><span>技能模板</span></div>
+                                    <div className="canvas-node-inspector-copy">{node.metadata.skillSnapshot.template}</div>
+                                    {node.metadata.skillSnapshot.outputContract ? <><div className="canvas-node-inspector-subheading">输出约束</div><div className="canvas-node-inspector-copy">{node.metadata.skillSnapshot.outputContract}</div></> : null}
+                                </section>
+                            ) : null}
+
+                            {node.type === CanvasNodeType.Image ? (
+                                <section className="canvas-node-inspector-section">
+                                    <div className="canvas-node-inspector-section-heading">
                                         <div>
-                                            <div className="text-sm font-semibold">资产标签</div>
-                                            <div className="mt-0.5 text-xs opacity-45">一条标签描述一个角色、环境、道具或镜头用途。</div>
+                                            <span>资产标签</span>
+                                            <p>一条标签描述一个角色、环境、道具或镜头用途。</p>
                                         </div>
-                                        <span className="shrink-0 text-xs opacity-45">{assetTags.length} 条</span>
+                                        <em>{assetTags.length} 条</em>
                                     </div>
                                     {readOnly ? (
-                                        <div className="mb-2 rounded-lg border px-3 py-2 text-xs opacity-55" style={{ borderColor: theme.toolbar.border }}>
-                                            分享画布为只读，标签无法编辑。
-                                        </div>
+                                        <div className="canvas-node-inspector-notice">分享画布为只读，标签无法编辑。</div>
                                     ) : (
-                                        <div className="flex gap-2">
+                                        <div className="canvas-node-inspector-tag-editor">
                                             <Input
                                                 value={assetTagInput}
                                                 placeholder="例如：角色: 张三"
@@ -572,7 +568,7 @@ export function CanvasNodeInfoModal({ node, open, onClose, onMetadataChange, rea
                                             </Button>
                                         </div>
                                     )}
-                                    <div className="mt-3 flex min-h-10 flex-wrap gap-2 rounded-xl border px-2 py-2" style={{ borderColor: theme.toolbar.border, background: theme.node.fill }}>
+                                    <div className="canvas-node-inspector-tags">
                                         {assetTags.length ? (
                                             assetTags.map((tag) => (
                                                 <Tag key={tag} closable={!readOnly} onClose={() => (readOnly ? onUnauthorized?.() : removeAssetTag(tag))} className="!m-0 !rounded-lg !px-2 !py-1 !text-sm">
@@ -580,20 +576,20 @@ export function CanvasNodeInfoModal({ node, open, onClose, onMetadataChange, rea
                                                 </Tag>
                                             ))
                                         ) : (
-                                            <span className="px-1 py-1 text-xs opacity-40">{readOnly ? "暂无标签" : "还没有标签，输入后点击“加入”或按 Enter。"}</span>
+                                            <span className="canvas-node-inspector-empty-label">{readOnly ? "暂无标签" : "还没有标签，输入后点击“加入”或按 Enter。"}</span>
                                         )}
                                     </div>
-                                </div>
+                                </section>
                             ) : null}
 
                             {node.metadata?.errorDetails ? (
-                                <div className="rounded-2xl border p-3 text-red-500" style={{ borderColor: theme.node.stroke }}>
+                                <section className="canvas-node-inspector-error">
                                     {generationErrorMessage(node.metadata.errorDetails)}
-                                </div>
+                                </section>
                             ) : null}
                         </div>
                     ) : (
-                        <pre className="thin-scrollbar h-full overflow-auto rounded-2xl border p-3 text-xs leading-5" style={{ background: theme.node.fill, borderColor: theme.node.stroke, color: theme.node.text }}>
+                        <pre className="thin-scrollbar canvas-node-inspector-json" style={{ color: theme.node.text }}>
                             {json}
                         </pre>
                     )}
@@ -605,9 +601,9 @@ export function CanvasNodeInfoModal({ node, open, onClose, onMetadataChange, rea
 
 function InfoRow({ label, value }: { label: string; value: ReactNode }) {
     return (
-        <div className="rounded-xl border px-3 py-2" style={{ borderColor: "rgba(148,163,184,.22)" }}>
-            <div className="mb-1 text-xs font-medium opacity-45">{label}</div>
-            <div className="min-w-0 whitespace-pre-wrap break-words text-sm font-medium leading-5">{value}</div>
+        <div className="canvas-node-inspector-fact">
+            <div>{label}</div>
+            <strong>{value}</strong>
         </div>
     );
 }

web/src/components/canvas/canvas-node.tsx

@@ -791,7 +791,7 @@ function skillOutputModeLabel(mode?: string) {
 
 function ResourceLabelBadge({ reference, theme }: { reference: CanvasResourceReference; theme: CanvasTheme }) {
     return (
-        <span className="pointer-events-none min-w-0 max-w-28 truncate rounded-md px-1.5 py-1 text-[var(--fs-tiny)] font-medium leading-none text-white shadow-sm" style={{ background: reference.active ? theme.accent.primary : "rgba(0,0,0,.35)", opacity: reference.active ? 1 : 0.75 }} title={reference.title || reference.label}>
+        <span className="pointer-events-none min-w-0 max-w-28 truncate rounded-md px-1.5 py-1 text-[var(--fs-tiny)] font-medium leading-none shadow-sm" style={{ background: reference.active ? theme.accent.primary : "rgba(0,0,0,.35)", color: reference.active ? theme.accent.onPrimary : "#ffffff", opacity: reference.active ? 1 : 0.75 }} title={reference.title || reference.label}>
             {reference.label}
         </span>
     );
@@ -801,7 +801,7 @@ function ResourceStorageBadge({ storageKey, active, theme }: { storageKey?: stri
     const location = resourceStorageLocation(storageKey);
     const background = active ? (location === "local" ? "rgba(245,158,11,.9)" : theme.accent.primary) : "rgba(0,0,0,.35)";
     return (
-        <span className="pointer-events-auto shrink-0 rounded-md px-1.5 py-1 text-[var(--fs-tiny)] font-medium leading-none text-white shadow-sm" style={{ background, opacity: active ? 1 : 0.75 }} title={resourceStorageTitle(storageKey)}>
+        <span className="pointer-events-auto shrink-0 rounded-md px-1.5 py-1 text-[var(--fs-tiny)] font-medium leading-none shadow-sm" style={{ background, color: active && location !== "local" ? theme.accent.onPrimary : "#ffffff", opacity: active ? 1 : 0.75 }} title={resourceStorageTitle(storageKey)}>
             {resourceStorageLabel(storageKey)}
         </span>
     );

web/src/components/canvas/canvas-project-asset-modal.tsx

@@ -1,10 +1,7 @@
-import { useEffect, useMemo, useState } from "react";
-import { Button, Modal } from "antd";
-import { Check, FileText, Image as ImageIcon, Music2, UserRound, Video } from "lucide-react";
+import { useMemo } from "react";
 
+import { AssetLibraryPickerModal, type AssetLibraryPickerItem } from "@/components/assets/asset-library-picker-modal";
 import type { InsertAssetPayload } from "@/components/canvas/asset-picker-modal";
-import { AssetMediaPreview } from "@/components/asset-media-preview";
-import { WorkspaceState } from "@/components/layout/workspace-state";
 import { compileCharacterReferencePrompt } from "@/lib/canvas/canvas-character-reference";
 import { resourceFileUrl } from "@/services/api/resources";
 import type { ProjectAsset, ProjectDetail } from "@/services/api/projects";
@@ -15,9 +12,6 @@ type ProjectPickerItem = { id: string; category: string; character?: ProjectAsse
 
 export function CanvasProjectAssetModal({ open, detail, initialCategory = "all", onClose, onInsert }: { open: boolean; detail?: ProjectDetail; initialCategory?: string; onClose: () => void; onInsert: (payloads: InsertAssetPayload[]) => Promise<void> | void }) {
     const mediaAssets = useAssetStore((state) => state.assets);
-    const [category, setCategory] = useState("all");
-    const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
-    const [inserting, setInserting] = useState(false);
     const items = useMemo(() => {
         const mediaById = new Map(mediaAssets.map((asset) => [asset.id, asset]));
         const projectItems = (detail?.assets || []).flatMap((asset): ProjectPickerItem[] => {
@@ -31,43 +25,43 @@ export function CanvasProjectAssetModal({ open, detail, initialCategory = "all",
             .filter((asset) => asset.kind !== "model" && asset.kind !== "entity")
             .map((media) => ({ id: media.id, category: media.category || "other", media }));
     }, [detail?.assets, mediaAssets]);
-    const categories = useMemo(() => ["all", ...Array.from(new Set(items.map((item) => item.category)))], [items]);
-    const visible = category === "all" ? items : items.filter((item) => item.category === category);
+    const pickerItems = useMemo<AssetLibraryPickerItem[]>(() => items.map((item) => {
+        const character = item.character;
+        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");
+        return {
+            id: item.id,
+            title: character?.title || media?.title || "未命名资产",
+            category: item.category,
+            kindLabel: character ? "角色卡" : media?.kind === "video" ? "视频" : media?.kind === "audio" ? "音频" : media?.kind === "text" ? "文本" : "图片",
+            asset: media,
+            imageUrl: coverRepresentation ? resourceFileUrl(coverRepresentation.resourceId) : undefined,
+            imageFit: character ? "contain" : "cover",
+            description: character ? `${character.character?.visualStatus === "ready" ? "形象就绪" : "形象待完善"} · ${character.character?.voiceStatus === "ready" ? "声音已绑定" : "声音未绑定"}` : undefined,
+            searchText: media?.tags.join(" "),
+        };
+    }), [items]);
 
-    useEffect(() => {
-        setSelectedIds(new Set());
-        setInserting(false);
-        setCategory(open ? initialCategory : "all");
-    }, [initialCategory, open]);
-    const toggle = (id: string) => setSelectedIds((current) => { const next = new Set(current); if (next.has(id)) next.delete(id); else next.add(id); return next; });
-    const insert = async () => {
-        const payloads = items.filter((item) => selectedIds.has(item.id)).map(toInsertPayload);
-        if (!payloads.length) return;
-        setInserting(true);
-        try { await onInsert(payloads); onClose(); } finally { setInserting(false); }
-    };
-
-    return <Modal open={open} title={null} footer={null} destroyOnHidden onCancel={onClose} width="min(920px, calc(100vw - 24px))" styles={{ container: { padding: 0, overflow: "hidden" }, body: { padding: 0 } }}>
-        <div className="flex h-[min(620px,calc(100vh-80px))] min-h-[440px] flex-col overflow-hidden">
-            <header className="flex h-12 shrink-0 items-center justify-between border-b border-border py-0 pl-4 pr-12"><h2 className="text-sm font-semibold">引用项目角色与资产</h2><span className="text-[var(--fs-label)] text-foreground/42">已选 {selectedIds.size} 项</span></header>
-            <div className="grid min-h-0 flex-1 grid-rows-[auto_minmax(0,1fr)] sm:grid-cols-[150px_minmax(0,1fr)] sm:grid-rows-1">
-                <nav className="thin-scrollbar flex min-w-0 gap-1 overflow-x-auto border-b border-border p-2 sm:block sm:overflow-y-auto sm:border-b-0 sm:border-r" aria-label="项目资产分类">{categories.map((item) => <button key={item} type="button" onClick={() => setCategory(item)} className={`flex h-11 min-w-[104px] shrink-0 items-center justify-between rounded-md px-2 text-xs sm:w-full sm:min-w-0 ${category === item ? "bg-surface-active font-medium" : "text-foreground/55 hover:bg-surface-hover"}`}><span>{categoryLabels[item] || "其他"}</span><span className="min-w-5 rounded bg-foreground/[.05] px-1 text-center text-[var(--fs-tiny)] tabular-nums">{item === "all" ? items.length : items.filter((asset) => asset.category === item).length}</span></button>)}</nav>
-                <div className="thin-scrollbar min-h-0 overflow-y-auto p-3">{visible.length ? <div className="grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-4">{visible.map((item) => <ProjectAssetCard key={item.id} item={item} selected={selectedIds.has(item.id)} onToggle={() => toggle(item.id)} />)}</div> : <WorkspaceState icon="assets" compact className="h-full" title="此分类没有可引用资产" description={detail ? "先在项目角色与资产中完成角色确认或素材关联。" : "当前为自由画布，下方展示本地素材库；也可先上传素材后再引用。"} />}</div>
-            </div>
-            <footer className="flex h-12 shrink-0 items-center justify-between border-t border-border px-3"><span className="text-[var(--fs-tiny)] text-foreground/42">角色引用会在生成时解析当前角色版本</span><div className="flex gap-2"><Button size="small" onClick={onClose}>取消</Button><Button size="small" type="primary" disabled={!selectedIds.size} loading={inserting} onClick={() => void insert()}>引入 {selectedIds.size || ""} 项</Button></div></footer>
-        </div>
-    </Modal>;
-}
-
-function ProjectAssetCard({ item, selected, onToggle }: { item: ProjectPickerItem; selected: boolean; onToggle: () => void }) {
-    const character = item.character;
-    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 cover = coverRepresentation ? resourceFileUrl(coverRepresentation.resourceId) : "";
-    const Icon = character ? UserRound : media?.kind === "video" ? Video : media?.kind === "audio" ? Music2 : media?.kind === "text" ? FileText : ImageIcon;
-    const label = character ? "角色卡" : media?.kind === "video" ? "视频" : media?.kind === "audio" ? "音频" : media?.kind === "text" ? "文本" : "图片";
-    const title = character?.title || media?.title || "未命名资产";
-    return <button type="button" onClick={onToggle} className={`relative min-w-0 overflow-hidden rounded-md border text-left transition-colors ${selected ? "border-[var(--workspace-accent)] bg-[var(--workspace-accent-soft)]" : "border-border/80 hover:border-foreground/30"}`}><div className="relative aspect-[4/3] overflow-hidden bg-foreground/[.04]">{cover ? <img src={cover} alt={title} loading="lazy" decoding="async" className="h-full w-full object-contain p-1" /> : <AssetMediaPreview asset={media} alt={title} className="h-full w-full bg-black object-cover" fallback={<div className="grid h-full place-items-center text-foreground/25"><Icon className="size-7" /></div>} />}<span className={`absolute right-1.5 top-1.5 grid size-5 place-items-center rounded border ${selected ? "border-[var(--workspace-accent)] bg-[var(--workspace-accent)] text-white" : "border-white/60 bg-black/25 text-transparent backdrop-blur"}`}><Check className="size-3" /></span><span className="absolute bottom-1.5 left-1.5 rounded bg-black/55 px-1.5 py-0.5 text-[var(--fs-micro)] text-white">{label}</span></div><div className="px-2 py-1.5"><div className="truncate text-[var(--fs-label)] font-medium">{title}</div>{character ? <div className="mt-0.5 truncate text-[var(--fs-micro)] text-foreground/42">{character.character?.visualStatus === "ready" ? "形象就绪" : "形象待完善"} · {character.character?.voiceStatus === "ready" ? "声音已绑定" : "声音未绑定"}</div> : null}</div></button>;
+    return (
+        <AssetLibraryPickerModal
+            open={open}
+            items={pickerItems}
+            categoryLabels={categoryLabels}
+            initialCategory={initialCategory}
+            title="项目资产"
+            confirmLabel={(count) => `引入已选资产${count ? `（${count}）` : ""}`}
+            emptyTitle="此分类没有可引用资产"
+            emptyDescription={detail ? "先在项目角色与资产中完成角色确认或素材关联。" : "当前为自由画布，可先在素材库添加内容。"}
+            footerNote="角色引用会在生成时解析当前角色版本"
+            onClose={onClose}
+            onConfirm={async (ids) => {
+                const payloads = items.filter((item) => ids.includes(item.id)).map(toInsertPayload);
+                if (!payloads.length) return;
+                await onInsert(payloads);
+                onClose();
+            }}
+        />
+    );
 }
 
 function toInsertPayload(item: ProjectPickerItem): InsertAssetPayload {

web/src/components/canvas/canvas-short-drama-entry.tsx

@@ -155,7 +155,7 @@ export function CanvasShortDramaGuide({ progress, collapsed, onToggle, onSkip, o
                                         height: step.status === "current" ? "var(--flow-step-node-current)" : "var(--flow-step-node)",
                                         background: step.status === "pending" ? "transparent" : theme.accent.primary,
                                         border: step.status === "pending" ? "var(--stroke-2) solid var(--cn-stroke)" : "none",
-                                        color: step.status === "pending" ? theme.node.muted : "#fff",
+                                        color: step.status === "pending" ? theme.node.muted : theme.accent.onPrimary,
                                         boxShadow: step.status === "current" ? "var(--flow-step-current-glow)" : undefined,
                                         fontSize: step.status === "current" ? "var(--fs-body)" : "var(--fs-caption)",
                                     }}

web/src/components/canvas/canvas-timeline-dialog.tsx

@@ -591,7 +591,7 @@ export function CanvasTimelineDialog({
                                 width,
                                 background: isSelected ? theme.accent.primary : clipFill,
                                 borderColor: isSelected ? theme.timeline.clipSelectedBorder : theme.timeline.trackBorder,
-                                color: isSelected ? "#fff" : theme.node.text,
+                                color: isSelected ? theme.accent.onPrimary : theme.node.text,
                             }}
                             onPointerDown={(event) => handleClipPointerDown(event, clip.id, "move")}
                             onPointerMove={handleClipPointerMove}

web/src/components/layout/workspace-sidebar-footer.tsx

@@ -94,7 +94,7 @@ export function WorkspaceSidebarFooter({ expandedClassName, collapsedClassName,
                         </div>
                     )}
                 >
-                    <button type="button" className={cn("flex min-h-10 w-full min-w-0 items-center overflow-hidden rounded-md text-left transition-colors hover:bg-surface-hover", accountClassName)} title={creditsEnabled ? `${user.displayName || user.username} · ${balance} 积分` : user.displayName || user.username}>
+                    <button type="button" className={cn("app-workspace-account-button flex min-h-10 w-full min-w-0 items-center overflow-hidden rounded-md text-left transition-colors hover:bg-surface-hover", accountClassName)} title={creditsEnabled ? `${user.displayName || user.username} · ${balance} 积分` : user.displayName || user.username}>
                         <UserAvatar user={user} className="size-7" />
                         <span className={cn("min-w-0 flex-1 flex-col", expandedClassName)}>
                             <span className="truncate text-xs font-medium">{user.displayName || user.username}</span>