feat(*): 创作体验 - 支持资源技能引用并统一生成反馈与画布列表展示

web/src/pages/canvas/canvas-project-status-dialogs.tsx

@@ -4,6 +4,7 @@ import { TaskDetailItem, taskStatusText } from "./canvas-project-feedback";
 import type { GenerationTask, TaskLog } from "@/services/api/task-center";
 import { CanvasNodeType, type CanvasNodeData } from "@/types/canvas";
 import { VideoPlayer } from "@/components/video-player";
+import { modelDisplayName, useEffectiveConfig } from "@/stores/use-config-store";
 
 type CanvasProjectStatusDialogsProps = {
     theme: { node: { stroke: string; panel: string; muted: string; fill: string } };
@@ -21,6 +22,7 @@ type CanvasProjectStatusDialogsProps = {
 };
 
 export function CanvasProjectStatusDialogs({ theme, task, taskLogs, taskLoading, superResolveNode, previewNode, clearConfirmOpen, onCloseTask, onCloseSuperResolve, onClosePreview, onCancelClear, onConfirmClear }: CanvasProjectStatusDialogsProps) {
+    const config = useEffectiveConfig();
     return (
         <>
             <Modal title="任务详情" open={Boolean(task)} footer={null} width={760} onCancel={onCloseTask}>
@@ -29,7 +31,7 @@ export function CanvasProjectStatusDialogs({ theme, task, taskLogs, taskLoading,
                         <div className="grid grid-cols-2 gap-3 rounded-lg border p-3" style={{ borderColor: theme.node.stroke, background: theme.node.panel }}>
                             <TaskDetailItem label="当前阶段" value={task.stage || taskStatusText(task.status)} />
                             <TaskDetailItem label="进度" value={`${task.progress ?? 0}%`} />
-                            <TaskDetailItem label="模型" value={task.model || "默认模型"} />
+                            <TaskDetailItem label="模型" value={task.model ? modelDisplayName(config, task.model) : "默认模型"} />
                             <TaskDetailItem label="任务 ID" value={task.id} />
                         </div>
                         <div>

web/src/pages/canvas/index.tsx

@@ -154,11 +154,12 @@ export default function CanvasPage() {
                 />
 
                 <ListToolbar
+                    className="canvas-library-toolbar"
                     active={Boolean(keyword || projectFilter !== "all" || sort !== "updated")}
                     trailing={<span className="text-xs tabular-nums text-foreground/42">显示 {visibleProjects.length} / {filteredProjects.length}</span>}
                     onReset={() => { setKeyword(""); setProjectFilter("all"); setSort("updated"); setPage(1); }}
                 >
-                    <div className="min-w-[220px] flex-1 sm:max-w-[380px]">
+                    <div className="canvas-library-search min-w-[220px] flex-[1_1_420px]">
                         <Input allowClear className="w-full" prefix={<Search className="size-4 text-foreground/40" />} value={keyword} placeholder="搜索画布" aria-label="搜索画布" onChange={(event) => { setKeyword(event.target.value); setPage(1); }} />
                     </div>
                     <Select aria-label="按所属项目筛选" className="w-[168px]" value={projectFilter} onChange={(value) => { setProjectFilter(value); setPage(1); }} options={[{ label: "全部项目", value: "all" }, { label: "自由画布", value: "independent" }, ...(projectQuery.data?.projects || []).map(({ project }) => ({ label: project.name, value: project.id }))]} />
@@ -178,7 +179,7 @@ export default function CanvasPage() {
                 {!hydrated ? (
                     <WorkspaceLoadingState label="正在恢复画布" detail="读取本地缓存与账号同步状态" />
                 ) : visibleProjects.length ? (
-                    <CollectionGrid className="sm:grid-cols-[repeat(auto-fill,minmax(272px,320px))] sm:justify-start">
+                    <CollectionGrid className="canvas-library-grid">
                         {visibleProjects.map((project) => (
                             <CanvasProjectCard key={project.id} project={project} projectName={project.projectId ? projectNames.get(project.projectId) || "未同步项目" : undefined} />
                         ))}

web/src/pages/canvas/use-canvas-generation-executor.ts

@@ -7,7 +7,7 @@ import { buildGenerationConfig, isGenerationCanceled, supportsVideoReferenceAudi
 import { isGenerationTaskCapacityError } from "@/lib/canvas/canvas-generation-batch";
 import { buildPortraitTexturePrompt } from "@/lib/canvas/canvas-portrait-texture";
 import { expandSkillMentions } from "@/lib/canvas/canvas-skill-mentions";
-import { generationFailureMetadata } from "@/lib/generation-error";
+import { generationErrorMessage, generationFailureMetadata } from "@/lib/generation-error";
 import { navigateToSettings } from "@/lib/settings-navigation";
 import type { Skill } from "@/services/api/skills";
 import type { GenerationTask } from "@/services/api/task-center";
@@ -132,7 +132,7 @@ export function useCanvasGenerationExecutor({
                     mode === "video" && supportsVideoReferenceAudio(generationConfig),
                 );
             } catch (error) {
-                const errorDetails = error instanceof Error ? error.message : "生成任务准备失败";
+                const errorDetails = generationErrorMessage(error);
                 if (isPreparingEmptyImage) {
                     setNodes((current) => current.map((node) => (node.id === nodeId ? { ...node, metadata: { ...node.metadata, status: controller.signal.aborted ? NODE_STATUS_IDLE : NODE_STATUS_ERROR, taskStage: undefined, taskProgress: undefined, taskCreatedAt: undefined, errorDetails: controller.signal.aborted ? undefined : errorDetails } } : node)));
                 }

web/src/pages/canvas/use-canvas-media-tools.ts

@@ -24,6 +24,7 @@ import { compositeEmotionImage, emotionGenerationSize } from "@/lib/canvas/canva
 import { DEFAULT_PORTRAIT_TEXTURE_SETTINGS } from "@/lib/canvas/canvas-portrait-texture";
 import { captureVideoLastFrame } from "@/lib/canvas/canvas-video-frame";
 import { mergeVideos, type MergeVideoProgress } from "@/lib/canvas/canvas-video-merge";
+import { generationErrorMessage } from "@/lib/generation-error";
 import { navigateToSettings } from "@/lib/settings-navigation";
 import { storeGeneratedVideo } from "@/services/api/video";
 import { getMediaBlob } from "@/services/file-storage";
@@ -349,7 +350,7 @@ export function useCanvasMediaTools({
             setNodes((current) => current.map((item) => item.id === childId ? { ...item, width: size.width, height: size.height, metadata: { ...item.metadata, ...imageMetadata(uploaded), prompt, ...generationMetadata } } : item));
         } catch (error) {
             if (isGenerationCanceled(error)) return;
-            const details = error instanceof Error ? error.message : "局部修改失败";
+            const details = generationErrorMessage(error);
             message.error(details);
             setNodes((current) => current.map((item) => item.id === childId ? { ...item, metadata: { ...item.metadata, status: NODE_STATUS_ERROR, errorDetails: details } } : item));
         } finally {
@@ -402,7 +403,7 @@ export function useCanvasMediaTools({
             setNodes((current) => current.map((item) => item.id === childId ? { ...item, width: size.width, height: size.height, metadata: { ...item.metadata, ...imageMetadata(uploaded), prompt, ...generationMetadata } } : item));
         } catch (error) {
             if (isGenerationCanceled(error)) return;
-            const details = error instanceof Error ? error.message : "生成失败";
+            const details = generationErrorMessage(error);
             setNodes((current) => current.map((item) => item.id === childId ? { ...item, metadata: { ...item.metadata, status: NODE_STATUS_ERROR, errorDetails: details } } : item));
         } finally {
             finishGenerationRequest(childId, controller);
@@ -455,7 +456,7 @@ export function useCanvasMediaTools({
             setNodes((current) => current.map((item) => item.id === childId ? { ...item, width: size.width, height: size.height, metadata: { ...item.metadata, ...imageMetadata(uploaded), prompt: payload.prompt, ...generationMetadata, emotionEdit } } : item));
         } catch (error) {
             if (isGenerationCanceled(error)) return;
-            const details = error instanceof Error ? error.message : "表情生成失败";
+            const details = generationErrorMessage(error);
             message.error(details);
             setNodes((current) => current.map((item) => item.id === childId ? { ...item, metadata: { ...item.metadata, status: NODE_STATUS_ERROR, errorDetails: details } } : item));
         } finally { finishGenerationRequest(childId, controller); setRunningNodeId(null); }

web/src/pages/canvas/use-canvas-storyboard.ts

@@ -17,9 +17,10 @@ import {
     storyboardRowsFromTask,
 } from "@/lib/canvas/canvas-project-domain";
 import { buildNodeMentionReferences } from "@/lib/canvas/canvas-resource-references";
+import { generationErrorMessage } from "@/lib/generation-error";
 import { navigateToSettings } from "@/lib/settings-navigation";
 import { createGenerationTask, waitForGenerationTask } from "@/services/api/task-center";
-import { modelOptionName, useConfigStore, useEffectiveConfig } from "@/stores/use-config-store";
+import { modelDisplayName, useConfigStore, useEffectiveConfig } from "@/stores/use-config-store";
 import {
     CanvasNodeType,
     type CanvasConnection,
@@ -60,14 +61,14 @@ export function useCanvasStoryboard({
         if (!count) return resolve(false);
         modal.confirm({
             title: `确认提交 ${count} 个${taskLabel}任务`,
-            content: `任务数：${count}；模型：${modelOptionName(model) || model}。当前没有可用价格数据，将提交 ${count} 个外部模型任务。`,
+            content: `任务数：${count}；模型：${modelDisplayName(effectiveConfig, model)}。当前没有可用价格数据，将提交 ${count} 个外部模型任务。`,
             okText: "确认生成",
             cancelText: "取消",
             centered: true,
             onOk: () => resolve(true),
             onCancel: () => resolve(false),
         });
-    }), [modal]);
+    }), [effectiveConfig, modal]);
 
     const updateScriptRows = useCallback((nodeId: string, updater: (rows: StoryboardRow[]) => StoryboardRow[]) => {
         setNodes((current) => current.map((node) => node.id === nodeId ? {
@@ -159,7 +160,7 @@ export function useCanvasStoryboard({
             message.success(`已生成 ${result.rows.length} 个镜头`);
             return true;
         } catch (error) {
-            const details = error instanceof Error ? error.message : "脚本生成失败";
+            const details = generationErrorMessage(error);
             setNodes((current) => current.map((node) => node.id === nodeId ? { ...node, metadata: { ...node.metadata, status: NODE_STATUS_ERROR, errorDetails: details } } : node));
             message.error(details);
             return false;

web/src/pages/create/creation-references.ts

@@ -0,0 +1,162 @@
+import { buildSkillMentionReferences, renderSkillPrompt } from "@/lib/canvas/canvas-skill-mentions";
+import { canvasResourceMentionToken, type CanvasResourceReference } from "@/lib/canvas/canvas-resource-references";
+import type { Skill } from "@/services/api/skills";
+import type { Asset } from "@/stores/use-asset-store";
+import type { ReferenceImage } from "@/types/image";
+import type { ReferenceAudio, ReferenceVideo } from "@/types/media";
+
+type CreationMode = "text" | "image" | "video";
+type MentionableAsset = Extract<Asset, { kind: "text" | "image" | "video" | "audio" }>;
+
+export type CreationReference = CanvasResourceReference & {
+    asset?: MentionableAsset;
+    attachmentId?: string;
+};
+
+export function buildCreationMentionReferences(assets: Asset[], skills: Skill[], mode: CreationMode, attachments: ReferenceImage[] = [], snapshots: CreationReference[] = []) {
+    const attachmentReferences = attachments.map(attachmentReference);
+    const assetReferences = assets
+        .filter((asset): asset is MentionableAsset => isMentionableAsset(asset) && supportsMode(asset.kind, mode))
+        .map(assetReference);
+    const skillReferences = buildSkillMentionReferences(skills) as CreationReference[];
+    const current = [...attachmentReferences, ...assetReferences, ...skillReferences];
+    const currentIDs = new Set(current.map((reference) => reference.id));
+    return [...current, ...snapshots.filter((reference) => !currentIDs.has(reference.id))].map((reference) => ({ ...reference, active: true }));
+}
+
+export function selectedCreationReferences(prompt: string, references: CreationReference[]) {
+    return references.filter((reference) => prompt.includes(canvasResourceMentionToken(reference)));
+}
+
+export function displayCreationPrompt(prompt: string, references: CreationReference[]) {
+    return references.reduce((value, reference) => value.split(canvasResourceMentionToken(reference)).join(`@${reference.label}`), prompt);
+}
+
+export function expandCreationPrompt(prompt: string, references: CreationReference[], attachments: ReferenceImage[] = []) {
+    const visiblePrompt = displayCreationPrompt(prompt, references).trim();
+    if (!references.length) return visiblePrompt;
+
+    const contexts: string[] = [];
+    const mediaMappings: string[] = [];
+    const attachmentPositions = new Map(attachments.map((attachment, index) => [attachment.id, index + 1]));
+    const counts = { image: attachments.length, video: 0, audio: 0 };
+    references.forEach((reference) => {
+        if (reference.kind === "skill" && reference.skill) {
+            contexts.push(renderSkillPrompt(reference.skill));
+            return;
+        }
+        if (reference.attachmentId) {
+            const position = attachmentPositions.get(reference.attachmentId);
+            mediaMappings.push(`- @${reference.label}：参考图片 ${position || 1}`);
+            return;
+        }
+        const asset = reference.asset;
+        if (!asset) return;
+        if (asset.kind === "text") {
+            contexts.push(`【引用资源：${reference.label}】\n${asset.data.content}`);
+            return;
+        }
+        counts[asset.kind] += 1;
+        const label = asset.kind === "image" ? "参考图片" : asset.kind === "video" ? "参考视频" : "参考音频";
+        mediaMappings.push(`- @${reference.label}：${label} ${counts[asset.kind]}`);
+    });
+
+    if (mediaMappings.length) contexts.push(`【资源对应关系】\n${mediaMappings.join("\n")}`);
+    return [...contexts, `【创作要求】\n${visiblePrompt}`].filter(Boolean).join("\n\n");
+}
+
+export function creationReferenceImages(references: CreationReference[]): ReferenceImage[] {
+    return references.flatMap((reference) => {
+        const asset = reference.asset;
+        if (!asset || asset.kind !== "image") return [];
+        return [{
+            id: asset.id,
+            name: asset.title,
+            type: asset.data.mimeType || "image/png",
+            dataUrl: asset.data.dataUrl,
+            url: asset.data.dataUrl,
+            storageKey: asset.data.storageKey,
+        }];
+    });
+}
+
+export function creationReferenceVideos(references: CreationReference[]): ReferenceVideo[] {
+    return references.flatMap((reference) => {
+        const asset = reference.asset;
+        if (!asset || asset.kind !== "video") return [];
+        return [{
+            id: asset.id,
+            name: asset.title,
+            type: asset.data.mimeType || "video/mp4",
+            url: asset.data.url,
+            storageKey: asset.data.storageKey,
+            bytes: asset.data.bytes,
+            width: asset.data.width,
+            height: asset.data.height,
+            durationMs: asset.data.durationMs,
+        }];
+    });
+}
+
+export function creationReferenceAudios(references: CreationReference[]): ReferenceAudio[] {
+    return references.flatMap((reference) => {
+        const asset = reference.asset;
+        if (!asset || asset.kind !== "audio") return [];
+        return [{
+            id: asset.id,
+            name: asset.title,
+            type: asset.data.mimeType || "audio/mpeg",
+            url: asset.data.url,
+            storageKey: asset.data.storageKey,
+            durationMs: asset.data.durationMs,
+        }];
+    });
+}
+
+export function creationReferenceMetadata(references: CreationReference[]) {
+    return {
+        assetIds: references.flatMap((reference) => reference.asset ? [reference.asset.id] : []),
+        skillIds: references.flatMap((reference) => reference.skill?.skill_id ? [reference.skill.skill_id] : []),
+    };
+}
+
+function assetReference(asset: MentionableAsset): CreationReference {
+    const kindLabel = asset.kind === "image" ? "图片资源" : asset.kind === "video" ? "视频资源" : asset.kind === "audio" ? "音频资源" : "文本资源";
+    const previewUrl = asset.coverUrl || (asset.kind === "image" ? asset.data.dataUrl : asset.kind === "video" ? asset.data.url : "");
+    return {
+        id: `asset:${asset.id}`,
+        nodeId: `asset:${asset.id}`,
+        kind: asset.kind,
+        label: asset.title.trim() || kindLabel,
+        title: kindLabel,
+        previewUrl: previewUrl || undefined,
+        storageKey: asset.kind === "text" ? undefined : asset.data.storageKey,
+        text: asset.kind === "text" ? asset.data.content : undefined,
+        active: true,
+        asset,
+    };
+}
+
+function attachmentReference(attachment: ReferenceImage, index: number): CreationReference {
+    const label = attachment.name.replace(/\.[^.]+$/, "").trim() || `上传图片${index + 1}`;
+    return {
+        id: `upload:${attachment.id}`,
+        nodeId: `upload:${attachment.id}`,
+        kind: "image",
+        label,
+        title: "本次上传",
+        previewUrl: attachment.dataUrl || attachment.url,
+        storageKey: attachment.storageKey,
+        active: true,
+        attachmentId: attachment.id,
+    };
+}
+
+function isMentionableAsset(asset: Asset): asset is MentionableAsset {
+    return asset.kind === "text" || asset.kind === "image" || asset.kind === "video" || asset.kind === "audio";
+}
+
+function supportsMode(kind: MentionableAsset["kind"], mode: CreationMode) {
+    if (kind === "text" || kind === "image") return true;
+    return mode === "video";
+}

web/src/pages/create/index.tsx

@@ -1,16 +1,22 @@
-import { useCallback, useEffect, useMemo, useRef, useState, type ChangeEvent, type KeyboardEvent, type ReactNode, type RefObject } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, type ChangeEvent, type ReactNode, type RefObject } from "react";
 import localforage from "localforage";
 import { App, Drawer, Modal, Popover, Spin, Tooltip } from "antd";
-import { ArrowUp, Check, ChevronDown, Clock3, Download, Film, History, Image as ImageIcon, Maximize2, MessageSquareText, Plus, RefreshCw, SlidersHorizontal, Sparkles, Square, X } from "lucide-react";
+import { ArrowUp, Check, ChevronDown, Clock3, Download, FileText, Film, History, Image as ImageIcon, Maximize2, MessageSquareText, Music2, Plus, RefreshCw, SlidersHorizontal, Sparkles, Square, X } from "lucide-react";
 import ReactMarkdown from "react-markdown";
 import { Link } from "react-router";
 
+import { CanvasResourceMentionTextarea } from "@/components/canvas/canvas-resource-mention-textarea";
 import { ModelPicker } from "@/components/model-picker";
+import { canvasResourceMentionToken } from "@/lib/canvas/canvas-resource-references";
+import { generationErrorMessage } from "@/lib/generation-error";
 import { VIDEO_RESOLUTION_OPTIONS } from "@/lib/video-generation-options";
 import { runBackendGenerationTask, runBackendGenerationTaskBatch } from "@/services/api/generation-task";
 import { requestImageQuestion } from "@/services/api/image";
-import { modelOptionName, selectableModelsByCapability, useConfigStore, useEffectiveConfig } from "@/stores/use-config-store";
+import { listAddedSkills, type Skill } from "@/services/api/skills";
+import { useAssetStore } from "@/stores/use-asset-store";
+import { modelDisplayName, modelOptionName, selectableModelsByCapability, useConfigStore, useEffectiveConfig } from "@/stores/use-config-store";
 import type { ReferenceImage } from "@/types/image";
+import { buildCreationMentionReferences, creationReferenceAudios, creationReferenceImages, creationReferenceMetadata, creationReferenceVideos, displayCreationPrompt, expandCreationPrompt, selectedCreationReferences, type CreationReference } from "./creation-references";
 
 type CreationMode = "text" | "image" | "video";
 type CreationStatus = "streaming" | "pending" | "done" | "error" | "cancelled";
@@ -27,6 +33,7 @@ type CreationMessage = {
     resultUrls?: string[];
     error?: string;
     attachments?: CreationAttachment[];
+    references?: CreationReference[];
     settings?: CreationSettings;
 };
 type CreationConversation = { id: string; title: string; updatedAt: string; messages: CreationMessage[] };
@@ -63,12 +70,15 @@ export default function CreatePage() {
     const { message: toast } = App.useApp();
     const config = useEffectiveConfig();
     const updateConfig = useConfigStore((state) => state.updateConfig);
+    const assets = useAssetStore((state) => state.assets);
     const [conversations, setConversations] = useState<CreationConversation[]>([]);
     const [activeId, setActiveId] = useState("");
     const [hydrated, setHydrated] = useState(false);
     const [mode, setMode] = useState<CreationMode>("video");
     const [prompt, setPrompt] = useState("");
     const [attachments, setAttachments] = useState<CreationAttachment[]>([]);
+    const [draftReferences, setDraftReferences] = useState<CreationReference[]>([]);
+    const [addedSkills, setAddedSkills] = useState<Skill[]>([]);
     const [ratio, setRatio] = useState("16:9");
     const [seconds, setSeconds] = useState("6");
     const [quality, setQuality] = useState("auto");
@@ -87,6 +97,7 @@ export default function CreatePage() {
         [activeId, conversations],
     );
     const selectedModel = mode === "text" ? config.textModel : mode === "image" ? config.imageModel : config.videoModel;
+    const mentionReferences = useMemo(() => buildCreationMentionReferences(assets, addedSkills, mode, attachments, draftReferences), [addedSkills, assets, attachments, draftReferences, mode]);
     const isEmpty = !activeConversation?.messages.length;
 
     useEffect(() => {
@@ -108,6 +119,18 @@ export default function CreatePage() {
         if (hydrated) void localforage.setItem(STORAGE_KEY, conversations);
     }, [conversations, hydrated]);
 
+    useEffect(() => {
+        let cancelled = false;
+        listAddedSkills().then(({ skills }) => {
+            if (!cancelled) setAddedSkills(skills);
+        }).catch(() => {
+            if (!cancelled) setAddedSkills([]);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+
     useEffect(() => {
         if (!followLatestMessageRef.current) return;
         const frame = window.requestAnimationFrame(() => {
@@ -130,6 +153,10 @@ export default function CreatePage() {
     }, [updateActive]);
 
     const selectMode = (next: CreationMode) => {
+        if (next !== "video") {
+            const unsupported = mentionReferences.filter((reference) => reference.kind === "video" || reference.kind === "audio");
+            if (unsupported.length) setPrompt((current) => removeReferenceTokens(current, unsupported));
+        }
         setMode(next);
         const nextModels = selectableModelsByCapability(config, next);
         const current = next === "text" ? config.textModel : next === "image" ? config.imageModel : config.videoModel;
@@ -152,6 +179,12 @@ export default function CreatePage() {
         event.target.value = "";
     };
 
+    const removeAttachment = (id: string) => {
+        const reference = mentionReferences.find((item) => item.attachmentId === id);
+        setAttachments((current) => current.filter((item) => item.id !== id));
+        if (reference) setPrompt((current) => removeReferenceTokens(current, [reference]));
+    };
+
     const submit = async () => {
         const text = prompt.trim();
         if (!text || busy || !activeConversation) return;
@@ -160,8 +193,14 @@ export default function CreatePage() {
             return;
         }
         const settings = { ratio, seconds, quality, videoQuality, count };
+        const references = selectedCreationReferences(text, mentionReferences);
+        const expandedPrompt = expandCreationPrompt(text, references, attachments);
+        const referencedImages = creationReferenceImages(references);
+        const referencedVideos = creationReferenceVideos(references);
+        const referencedAudios = creationReferenceAudios(references);
+        const referenceMetadata = creationReferenceMetadata(references);
         followLatestMessageRef.current = true;
-        const userMessage = newMessage("user", text, { mode, model: selectedModel, attachments, settings });
+        const userMessage = newMessage("user", text, { mode, model: selectedModel, attachments, references, settings });
         const assistantMessage = newMessage("assistant", "", { mode, model: selectedModel, status: mode === "text" ? "streaming" : "pending", settings });
         updateActive((conversation) => ({
             ...conversation,
@@ -171,6 +210,7 @@ export default function CreatePage() {
         }));
         setPrompt("");
         setAttachments([]);
+        setDraftReferences([]);
         setBusy(true);
         const controller = new AbortController();
         abortRef.current = controller;
@@ -179,8 +219,8 @@ export default function CreatePage() {
             if (mode === "text") {
                 const history = [...(activeConversation.messages || []), userMessage].map((item) => ({
                     role: item.role,
-                    content: item.role === "user" && item.attachments?.length
-                        ? [{ type: "text" as const, text: item.content }, ...item.attachments.map((attachment) => ({ type: "image_url" as const, image_url: { url: attachment.dataUrl || attachment.url || attachment.previewUrl } }))]
+                    content: item.role === "user"
+                        ? buildTextMessageContent(item)
                         : item.content,
                 }));
                 await requestImageQuestion(requestConfig, history, (delta) => updateAssistant(assistantMessage.id, (item) => ({ ...item, content: item.content + delta })), { signal: controller.signal });
@@ -188,11 +228,11 @@ export default function CreatePage() {
                 const taskCount = Math.max(1, Math.min(15, Math.floor(Number(count) || 1)));
                 const settled = await runBackendGenerationTaskBatch({
                     mode: "image",
-                    prompt: text,
+                    prompt: expandedPrompt,
                     config: { ...requestConfig, count: "1" },
-                    referenceImages: attachments,
+                    referenceImages: [...attachments, ...referencedImages],
                     signal: controller.signal,
-                    metadata: { source: "create-page", conversationId: activeConversation.id, messageId: assistantMessage.id },
+                    metadata: { source: "create-page", conversationId: activeConversation.id, messageId: assistantMessage.id, ...referenceMetadata },
                     count: taskCount,
                 });
                 if (controller.signal.aborted) throw new DOMException("Aborted", "AbortError");
@@ -207,11 +247,13 @@ export default function CreatePage() {
             } else {
                 const result = await runBackendGenerationTask({
                     mode: "video",
-                    prompt: text,
+                    prompt: expandedPrompt,
                     config: requestConfig,
-                    referenceImages: attachments,
+                    referenceImages: [...attachments, ...referencedImages],
+                    referenceVideos: referencedVideos,
+                    referenceAudios: referencedAudios,
                     signal: controller.signal,
-                    metadata: { source: "create-page", conversationId: activeConversation.id, messageId: assistantMessage.id, videoEditOperation: attachments.length ? "image_to_video" : "text_to_video" },
+                    metadata: { source: "create-page", conversationId: activeConversation.id, messageId: assistantMessage.id, videoEditOperation: attachments.length || referencedImages.length ? "image_to_video" : "text_to_video", ...referenceMetadata },
                 });
                 if (!result.video?.dataUrl) throw new Error("后端任务没有返回视频");
                 const videoUrl = result.video.dataUrl;
@@ -223,7 +265,7 @@ export default function CreatePage() {
                 updateAssistant(assistantMessage.id, (item) => ({ ...item, status: "cancelled", content: "已停止" }));
                 return;
             }
-            const message = error instanceof Error ? error.message : "生成失败，请重试";
+            const message = generationErrorMessage(error);
             updateAssistant(assistantMessage.id, (item) => ({ ...item, status: "error", error: message, content: "生成失败" }));
         } finally {
             abortRef.current = null;
@@ -238,6 +280,7 @@ export default function CreatePage() {
         setActiveId(next.id);
         setPrompt("");
         setAttachments([]);
+        setDraftReferences([]);
         setHistoryOpen(false);
     };
 
@@ -246,15 +289,48 @@ export default function CreatePage() {
         setActiveId(conversation.id);
         setPrompt("");
         setAttachments([]);
+        setDraftReferences([]);
         setHistoryOpen(false);
     };
 
-    const retryMessage = (item: CreationMessage, index: number) => {
+    const restoreMessageDraft = (item: CreationMessage) => {
+        const nextMode = item.mode || "text";
+        const nextSettings = item.settings;
+        setMode(nextMode);
+        setPrompt(item.content);
+        setAttachments(item.attachments ? [...item.attachments] : []);
+        setDraftReferences(item.references ? [...item.references] : []);
+        if (item.model) updateConfig(nextMode === "text" ? "textModel" : nextMode === "image" ? "imageModel" : "videoModel", item.model);
+        if (!nextSettings) return;
+        setRatio(nextSettings.ratio);
+        setSeconds(nextSettings.seconds);
+        setQuality(nextSettings.quality);
+        setVideoQuality(nextSettings.videoQuality);
+        setCount(nextSettings.count);
+    };
+
+    const retryFailedMessage = (item: CreationMessage, index: number) => {
         const previous = item.role === "assistant" ? activeConversation?.messages[index - 1] : item;
-        if (!previous?.content) return;
-        setMode(previous.mode || "text");
-        setPrompt(previous.content);
-        setAttachments(previous.attachments || []);
+        if (!previous?.content || busy) return;
+        followLatestMessageRef.current = true;
+        restoreMessageDraft(previous);
+        const removedIds = new Set([item.id, previous.id]);
+        updateActive((conversation) => {
+            const messages = conversation.messages.filter((message) => !removedIds.has(message.id));
+            const firstPrompt = messages.find((message) => message.role === "user")?.content.trim();
+            return {
+                ...conversation,
+                title: firstPrompt ? firstPrompt.slice(0, 24) : "新创作",
+                updatedAt: new Date().toISOString(),
+                messages,
+            };
+        });
+    };
+
+    const createVariant = (item: CreationMessage, index: number) => {
+        const previous = item.role === "assistant" ? activeConversation?.messages[index - 1] : item;
+        if (!previous?.content || busy) return;
+        restoreMessageDraft(previous);
     };
 
     if (!hydrated || !activeConversation) return <div className="grid h-full place-items-center"><Spin /></div>;
@@ -271,7 +347,8 @@ export default function CreatePage() {
         setPrompt,
         busy,
         attachments,
-        onRemoveAttachment: (id: string) => setAttachments((current) => current.filter((item) => item.id !== id)),
+        references: mentionReferences,
+        onRemoveAttachment: removeAttachment,
         fileInputRef,
         onFileChange: handleFileChange,
         onModeChange: selectMode,
@@ -293,21 +370,23 @@ export default function CreatePage() {
     };
 
     return <>
-        <main ref={threadScrollRef} onScroll={handleThreadScroll} className="creation-home creation-scrollbar relative flex h-full min-h-0 flex-col overflow-y-scroll overscroll-contain">
+        <div className="creation-home relative flex h-full min-h-0 flex-col overflow-hidden">
             <div className="creation-top-actions">
                 {!isEmpty ? <Tooltip title="新建创作"><button type="button" aria-label="新建创作" className="creation-top-action" onClick={startNewConversation}><Plus /></button></Tooltip> : null}
                 <Tooltip title="历史对话"><button type="button" aria-label="查看历史对话" aria-expanded={historyOpen} className="creation-top-action" onClick={() => setHistoryOpen(true)}><History /></button></Tooltip>
             </div>
-            {isEmpty ? <section className="creation-empty-workspace">
-                <CreationIntro mode={mode} />
-                <div className="creation-empty-composer"><CreationComposer {...composerProps} variant="empty" /></div>
-            </section> : <>
-                <section className="creation-thread-stage"><div className="creation-results">{activeConversation.messages.map((item, index) => <CreationMessageView key={item.id} item={item} onRetry={() => retryMessage(item, index)} />)}</div></section>
-                <section className="creation-thread-composer">
-                    <CreationComposer {...composerProps} variant="thread" />
-                </section>
-            </>}
-        </main>
+            <main ref={threadScrollRef} onScroll={handleThreadScroll} className="creation-scrollbar flex h-full min-h-0 flex-col overflow-y-scroll overscroll-contain">
+                {isEmpty ? <section className="creation-empty-workspace">
+                    <CreationIntro mode={mode} />
+                    <div className="creation-empty-composer"><CreationComposer {...composerProps} variant="empty" /></div>
+                </section> : <>
+                    <section className="creation-thread-stage"><div className="creation-results">{activeConversation.messages.map((item, index) => <CreationMessageView key={item.id} item={item} modelName={item.model ? modelDisplayName(config, item.model) : ""} onRetryFailure={() => retryFailedMessage(item, index)} onCreateVariant={() => createVariant(item, index)} />)}</div></section>
+                    <section className="creation-thread-composer">
+                        <CreationComposer {...composerProps} variant="thread" />
+                    </section>
+                </>}
+            </main>
+        </div>
         <CreationHistoryDrawer open={historyOpen} conversations={historyConversations} activeId={activeConversation.id} onClose={() => setHistoryOpen(false)} onSelect={selectConversation} />
     </>;
 }
@@ -323,7 +402,7 @@ function CreationHistoryDrawer({ open, conversations, activeId, onClose, onSelec
                     <button type="button" aria-current={active ? "page" : undefined} onClick={() => onSelect(conversation)}>
                         <span className="creation-history-time"><time dateTime={conversation.updatedAt}>{formatConversationTime(conversation.updatedAt)}</time><em>{latest?.mode ? modeLabels[latest.mode] : "创作"}</em></span>
                         <strong className="creation-history-item-heading">{conversation.title.trim() || "新创作"}</strong>
-                        <span className="creation-history-snippet">{latest?.content.trim() || "还没有开始创作"}</span>
+                        <span className="creation-history-snippet">{latest ? displayCreationPrompt(latest.content, latest.references || []).trim() || "还没有开始创作" : "还没有开始创作"}</span>
                     </button>
                 </li>;
             })}
@@ -331,21 +410,28 @@ function CreationHistoryDrawer({ open, conversations, activeId, onClose, onSelec
     </Drawer>;
 }
 
-function CreationMessageView({ item, onRetry }: { item: CreationMessage; onRetry: () => void }) {
-    if (item.role === "user") return <div className="creation-user-message"><div>{item.content}</div>{item.attachments?.length ? <div className="creation-user-message-attachments">{item.attachments.map((attachment) => <img key={attachment.id} src={attachment.previewUrl} alt={attachment.name} />)}</div> : null}</div>;
+function CreationMessageView({ item, modelName, onRetryFailure, onCreateVariant }: { item: CreationMessage; modelName: string; onRetryFailure: () => void; onCreateVariant: () => void }) {
+    if (item.role === "user") return <div className="creation-user-message"><div>{displayCreationPrompt(item.content, item.references || [])}</div>{item.references?.length ? <CreationMessageReferences references={item.references} /> : null}{item.attachments?.length ? <div className="creation-user-message-attachments">{item.attachments.map((attachment) => <img key={attachment.id} src={attachment.previewUrl} alt={attachment.name} />)}</div> : null}</div>;
     const mode = item.mode || "text";
     const stateLabel = item.status === "pending" ? "生成中" : item.status === "cancelled" ? "已停止" : "";
-    return <article className="creation-assistant-message"><div className="creation-message-heading"><span className="creation-message-mark"><Sparkles /></span><span>{modeLabels[mode]}</span>{item.model ? <span className="creation-message-model">{modelOptionName(item.model)}</span> : null}{stateLabel ? <span className={`creation-message-state is-${item.status}`}>{stateLabel}</span> : null}</div>{mode === "text" ? <div className="creation-message-content">{item.content ? <ReactMarkdown>{item.content}</ReactMarkdown> : <span>正在生成…</span>}</div> : <MediaResult item={item} onRetry={onRetry} />}{item.error ? <div className="creation-message-error"><span>{item.error}</span><button type="button" onClick={onRetry}><RefreshCw />重新生成</button></div> : null}</article>;
+    return <article className="creation-assistant-message"><div className="creation-message-heading"><span className="creation-message-mark"><Sparkles /></span><span>{modeLabels[mode]}</span>{modelName ? <span className="creation-message-model">{modelName}</span> : null}{stateLabel ? <span className={`creation-message-state is-${item.status}`}>{stateLabel}</span> : null}</div>{mode === "text" ? <div className="creation-message-content">{item.content ? <ReactMarkdown>{item.content}</ReactMarkdown> : <span>正在生成…</span>}</div> : <MediaResult item={item} onRetryFailure={onRetryFailure} onCreateVariant={onCreateVariant} />}{item.error ? <div className="creation-message-error"><span>{generationErrorMessage(item.error)}</span><button type="button" onClick={onRetryFailure}><RefreshCw />重新生成</button></div> : null}</article>;
 }
 
-function MediaResult({ item, onRetry }: { item: CreationMessage; onRetry: () => void }) {
+function CreationMessageReferences({ references }: { references: CreationReference[] }) {
+    return <div className="creation-user-message-references" aria-label="本次引用">{references.map((reference) => {
+        const Icon = reference.kind === "skill" ? Sparkles : reference.kind === "image" ? ImageIcon : reference.kind === "video" ? Film : reference.kind === "audio" ? Music2 : FileText;
+        return <span key={reference.id} className="creation-user-message-reference">{reference.previewUrl && (reference.kind === "image" || reference.kind === "video") ? <img src={reference.previewUrl} alt="" /> : <Icon />}<span>{reference.label}</span></span>;
+    })}</div>;
+}
+
+function MediaResult({ item, onRetryFailure, onCreateVariant }: { item: CreationMessage; onRetryFailure: () => void; onCreateVariant: () => void }) {
     const [previewUrl, setPreviewUrl] = useState("");
     const [previewType, setPreviewType] = useState<"image" | "video">("image");
     const resultUrls = item.resultUrls;
     const openPreview = (url: string, type: "image" | "video") => { setPreviewType(type); setPreviewUrl(url); };
     if (item.status === "pending") return <div className="creation-media-pending"><Spin size="small" />正在生成{item.mode === "video" ? "视频" : "图片"}…</div>;
-    if (!resultUrls?.length) return <div className="creation-media-empty">没有返回可预览结果 <button type="button" onClick={onRetry}>重试</button></div>;
-    return <div className="creation-media-result">{item.mode === "video" ? <button type="button" className="creation-video-result" onClick={() => openPreview(resultUrls[0], "video")} aria-label="预览生成视频"><video muted preload="metadata" className="size-full object-cover" src={resultUrls[0]} /><span><Maximize2 />预览视频</span></button> : <div className="creation-image-result-grid">{resultUrls.map((url) => <button key={url} type="button" className="creation-image-result" onClick={() => openPreview(url, "image")} aria-label="预览生成图片"><img src={url} alt="生成结果" /><span><Maximize2 /></span></button>)}</div>}<div className="creation-media-actions"><span>{item.mode === "video" ? "视频结果" : `${resultUrls.length} 张图片`}</span><button type="button" onClick={onRetry}><RefreshCw />生成变体</button><Link to="/canvas">添加到画布</Link>{resultUrls.map((url, index) => <a key={`${url}-download`} href={url} download>{resultUrls.length > 1 ? `下载 ${index + 1}` : <><Download />下载</>}</a>)}</div><Modal open={Boolean(previewUrl)} title={null} footer={null} centered destroyOnHidden width={previewType === "video" ? "min(1160px, calc(100vw - 32px))" : "min(980px, calc(100vw - 32px))"} onCancel={() => setPreviewUrl("")} className="creation-media-preview-modal" styles={{ body: { padding: 0 } }}>{previewUrl ? previewType === "video" ? <video controls autoPlay className="creation-media-preview-video" src={previewUrl} /> : <img className="creation-media-preview-image" src={previewUrl} alt="生成图片预览" /> : null}</Modal></div>;
+    if (!resultUrls?.length) return <div className="creation-media-empty">没有返回可预览结果 <button type="button" onClick={onRetryFailure}>重试</button></div>;
+    return <div className="creation-media-result">{item.mode === "video" ? <button type="button" className="creation-video-result" onClick={() => openPreview(resultUrls[0], "video")} aria-label="预览生成视频"><video muted preload="metadata" className="size-full object-cover" src={resultUrls[0]} /><span><Maximize2 />预览视频</span></button> : <div className="creation-image-result-grid">{resultUrls.map((url) => <button key={url} type="button" className="creation-image-result" onClick={() => openPreview(url, "image")} aria-label="预览生成图片"><img src={url} alt="生成结果" /><span><Maximize2 /></span></button>)}</div>}<div className="creation-media-actions"><span>{item.mode === "video" ? "视频结果" : `${resultUrls.length} 张图片`}</span><button type="button" onClick={onCreateVariant}><RefreshCw />生成变体</button><Link to="/canvas">添加到画布</Link>{resultUrls.map((url, index) => <a key={`${url}-download`} href={url} download>{resultUrls.length > 1 ? `下载 ${index + 1}` : <><Download />下载</>}</a>)}</div><Modal open={Boolean(previewUrl)} title={null} footer={null} centered destroyOnHidden width={previewType === "video" ? "min(1160px, calc(100vw - 32px))" : "min(980px, calc(100vw - 32px))"} onCancel={() => setPreviewUrl("")} className="creation-media-preview-modal" styles={{ body: { padding: 0 } }}>{previewUrl ? previewType === "video" ? <video controls autoPlay className="creation-media-preview-video" src={previewUrl} /> : <img className="creation-media-preview-image" src={previewUrl} alt="生成图片预览" /> : null}</Modal></div>;
 }
 
 type ComposerProps = {
@@ -355,6 +441,7 @@ type ComposerProps = {
     setPrompt: (value: string) => void;
     busy: boolean;
     attachments: CreationAttachment[];
+    references: CreationReference[];
     onRemoveAttachment: (id: string) => void;
     fileInputRef: RefObject<HTMLInputElement | null>;
     onFileChange: (event: ChangeEvent<HTMLInputElement>) => void;
@@ -387,9 +474,9 @@ function CreationComposer(props: ComposerProps) {
     return <section className={`creation-chat-composer is-${props.variant}`}>
         <div className="creation-chat-writing-surface">
             <input ref={props.fileInputRef} type="file" hidden accept="image/*" multiple onChange={props.onFileChange} />
-            <Tooltip title="添加参考图片"><button type="button" className={`creation-chat-reference ${props.variant === "empty" ? "is-paper" : ""}`} onClick={() => props.fileInputRef.current?.click()} disabled={props.busy} aria-label="添加参考图片"><Plus />{props.variant === "empty" ? <span>参考内容</span> : null}</button></Tooltip>
+            <Tooltip title="添加参考图片"><button type="button" className="creation-chat-reference is-paper" onClick={() => props.fileInputRef.current?.click()} disabled={props.busy} aria-label="添加参考图片"><Plus /><span>参考内容</span></button></Tooltip>
             <div className="creation-chat-editor">
-                <textarea value={props.prompt} onChange={(event) => props.setPrompt(event.target.value)} onKeyDown={(event: KeyboardEvent<HTMLTextAreaElement>) => { if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) { event.preventDefault(); props.onSubmit(); } }} placeholder={props.variant === "empty" ? emptyPlaceholder : placeholder} disabled={props.busy} />
+                <CanvasResourceMentionTextarea value={props.prompt} references={props.references} onChange={props.setPrompt} onSubmit={props.onSubmit} containerClassName="creation-chat-mention-container" className="creation-chat-mention-editor creation-scrollbar" style={{ color: "var(--creation-text)" }} placeholder={props.variant === "empty" ? emptyPlaceholder : placeholder} aria-label="创作提示词，可使用 @ 引用资源或技能" spellCheck disabled={props.busy} />
                 {props.attachments.length ? <div className="creation-chat-attachment-strip">{props.attachments.map((item) => <div key={item.id} className="creation-chat-attachment"><img src={item.previewUrl} alt={item.name} /><button type="button" onClick={() => props.onRemoveAttachment(item.id)} aria-label={`移除 ${item.name}`}><X /></button></div>)}</div> : null}
             </div>
         </div>
@@ -475,6 +562,17 @@ function conversationPreviewMessage(conversation: CreationConversation) {
     return fallback;
 }
 
+function buildTextMessageContent(item: CreationMessage) {
+    const content = expandCreationPrompt(item.content, item.references || [], item.attachments || []);
+    const images = [...(item.attachments || []), ...creationReferenceImages(item.references || [])];
+    if (!images.length) return content;
+    return [{ type: "text" as const, text: content }, ...images.map((image) => ({ type: "image_url" as const, image_url: { url: image.dataUrl || image.url || "" } }))];
+}
+
+function removeReferenceTokens(value: string, references: CreationReference[]) {
+    return references.reduce((current, reference) => current.split(canvasResourceMentionToken(reference)).join(""), value);
+}
+
 function conversationTimestamp(value: string) {
     const timestamp = new Date(value).getTime();
     return Number.isFinite(timestamp) ? timestamp : 0;

web/src/pages/settings/model-default-grid.tsx

@@ -70,7 +70,6 @@ export function ModelDefaultGrid({ config, onChange }: { config: AiConfig; onCha
                                                 <span className="min-w-0 flex-1">
                                                     <span className="block truncate text-xs font-semibold">{modelDisplayName(config, model)}</span>
                                                     <span className="mt-1 flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-1 text-[10px] text-foreground/45">
-                                                        <span className="max-w-full truncate font-mono">{modelOptionName(model)}</span>
                                                         <span className="max-w-full truncate">{channel.name || "未命名渠道"}</span>
                                                         <span className="rounded border border-border/70 px-1 py-px text-[9px]">{channel.scope === "system" ? "系统" : "自定义"}</span>
                                                         {cost ? <Tag color="gold" className="!m-0 !px-1.5 !text-[9px] !font-medium !leading-[18px] tabular-nums">{formatPrice(cost.unitPriceMicrocredits)} 积分/{cost.billingMode === "per_second" ? "秒" : "次"}</Tag> : null}

web/src/pages/tasks/index.tsx

@@ -12,7 +12,7 @@ import { formatTaskKind, operationOptions, statusLabel } from "@/lib/generation-
 import { cancelGenerationTask, createAgentSession, createGenerationTask, listGenerationTasks, listTaskLogs, queryFailedVideoProviderTask, queryGenerationTask, retryGenerationTask, type CreateTaskInput, type GenerationTask, type TaskLog, type TaskStatus } from "@/services/api/task-center";
 import { syncGenerationTaskToCanvasStore } from "@/lib/canvas/canvas-generation-task-sync";
 import { useCanvasStore } from "@/stores/canvas/use-canvas-store";
-import { resolveModelRequestConfig, useConfigStore, useEffectiveConfig, type AiConfig } from "@/stores/use-config-store";
+import { modelDisplayName, resolveModelRequestConfig, useConfigStore, useEffectiveConfig, type AiConfig } from "@/stores/use-config-store";
 import { formatCredits } from "@/constant/credits";
 import { listProjects, type ProjectSummary } from "@/services/api/projects";
 
@@ -287,7 +287,7 @@ export default function TasksPage() {
                 title: "类型｜模型",
                 width: 180,
                 responsive: ["md"],
-                render: (_, task) => <div className="min-w-0"><div className="truncate text-xs font-medium text-foreground/78">{formatTaskKind(task)}</div><div className="mt-1 truncate text-[10px] text-foreground/42" title={formatModelName(task)}>{formatModelName(task)}</div></div>,
+                render: (_, task) => <div className="min-w-0"><div className="truncate text-xs font-medium text-foreground/78">{formatTaskKind(task)}</div><div className="mt-1 truncate text-[10px] text-foreground/42" title={formatModelName(effectiveConfig, task)}>{formatModelName(effectiveConfig, task)}</div></div>,
             },
             {
                 title: "任务名称",
@@ -303,7 +303,7 @@ export default function TasksPage() {
                                 {task.status === "failed" || task.status === "cancelled" ? taskAttentionReason(task) : task.stage || statusLabel[task.status]}
                             </div>
                             <div className="mt-2 space-y-2 md:hidden">
-                                <div className="truncate text-[10px] text-foreground/45">{formatTaskKind(task)} · {formatModelName(task)}</div>
+                                <div className="truncate text-[10px] text-foreground/45">{formatTaskKind(task)} · {formatModelName(effectiveConfig, task)}</div>
                                 <div className="truncate text-[10px] text-foreground/38">{context.canvasName}{context.projectName ? ` · ${context.projectName}` : ""}</div>
                                 <div className="flex items-center justify-between gap-3">
                                     <div className="flex min-w-0 items-center gap-2 text-[11px]"><span className={`size-1.5 shrink-0 rounded-full ${statusDotClassName(task.status)}`} /><span>{statusLabel[task.status]}</span><TaskBilling billing={task.billing} /></div>
@@ -369,7 +369,7 @@ export default function TasksPage() {
                 ),
             },
         ],
-        [actingId, canvasById, domainProjectNameById, openTaskDetail],
+        [actingId, canvasById, domainProjectNameById, effectiveConfig, openTaskDetail],
     );
 
     return (
@@ -442,7 +442,7 @@ export default function TasksPage() {
                             <InfoItem label="状态" value={statusLabel[detailTask.status]} />
                             <InfoItem label="画布名称" value={getTaskCanvasContext(detailTask, canvasById, domainProjectNameById).canvasName} />
                             <InfoItem label="任务类型" value={formatTaskKind(detailTask)} />
-                            <InfoItem label="模型" value={formatModelName(detailTask)} />
+                            <InfoItem label="模型" value={formatModelName(effectiveConfig, detailTask)} />
                             <InfoItem label="尝试次数" value={`第 ${detailTask.attempts || 1} 次`} />
                             <InfoItem label="创建时间" value={formatDate(detailTask.createdAt)} />
                         </div>
@@ -601,7 +601,7 @@ function TaskBilling({ billing }: { billing?: GenerationTask["billing"] }) {
     return <div className="text-right"><div className="text-xs font-medium tabular-nums text-foreground/78">{amount}</div><div className={`mt-1 text-[10px] ${billing.status === "uncertain" ? "text-amber-600 dark:text-amber-300" : "text-foreground/38"}`}>{note}</div></div>;
 }
 
-function formatModelName(task: GenerationTask) {
+function formatModelName(config: AiConfig, task: GenerationTask) {
     const raw = (task.model || task.provider || "").trim();
     const model = raw.includes("::") ? raw.split("::").pop()?.trim() || raw : raw;
 
@@ -610,7 +610,7 @@ function formatModelName(task: GenerationTask) {
     if (model === "workflow-router") return "工作流路由";
     if (model === "internal-agent") return "内置工作流";
     if (model === "openai-compatible") return "OpenAI 兼容接口";
-    return model;
+    return modelDisplayName(config, raw);
 }
 
 function formatDate(value?: string) {

web/src/pages/wallet/index.tsx

@@ -11,6 +11,7 @@ import { WorkspaceSignalIcon } from "@/components/ui/aceternity/workspace-signal
 import { CometCard } from "@/components/ui/aceternity/comet-card";
 import { aceternityMotion } from "@/lib/aceternity-motion";
 import { checkinCredits, getWallet, redeemCredits, type CreditLedgerEntry, type WalletSummary } from "@/services/api/wallet";
+import { modelDisplayName, useEffectiveConfig, type AiConfig } from "@/stores/use-config-store";
 
 type LedgerFilter = "all" | "income" | "consume" | "refund";
 
@@ -25,6 +26,7 @@ export default function WalletPage() {
     const { message } = App.useApp();
     const screens = Grid.useBreakpoint();
     const reducedMotion = useReducedMotion();
+    const config = useEffectiveConfig();
     const [wallet, setWallet] = useState<WalletSummary | null>(null);
     const [code, setCode] = useState("");
     const [filter, setFilter] = useState<LedgerFilter>("all");
@@ -99,8 +101,8 @@ export default function WalletPage() {
             width: 400,
             ellipsis: true,
             render: (_, entry) => (
-                <div className="min-w-0 max-w-full overflow-hidden" title={[entry.model || ledgerTitle(entry), [sceneLabel(entry.scene), entry.note].filter(Boolean).join(" · ")].filter(Boolean).join("\n")}>
-                    <div className="truncate font-medium">{entry.model || ledgerTitle(entry)}</div>
+                <div className="min-w-0 max-w-full overflow-hidden" title={[ledgerModelName(config, entry), [sceneLabel(entry.scene), entry.note].filter(Boolean).join(" · ")].filter(Boolean).join("\n")}>
+                    <div className="truncate font-medium">{ledgerModelName(config, entry)}</div>
                     <div className="mt-1 truncate text-xs text-foreground/50">{[sceneLabel(entry.scene), entry.note].filter(Boolean).join(" · ") || "无补充说明"}</div>
                 </div>
             ),
@@ -206,7 +208,7 @@ export default function WalletPage() {
                             <Table className="app-data-table wallet-ledger-table" rowKey="id" size="middle" loading={loading} columns={columns} dataSource={entries} pagination={false} tableLayout="fixed" scroll={{ x: 990 }} />
                         </TableSurface>
                     ) : (
-                        <div className="overflow-hidden rounded-md border border-border/70 bg-background">{entries.length ? entries.map((entry) => <LedgerMobileRow key={entry.id} entry={entry} />) : <WorkspaceState compact icon="wallet" title="没有匹配的积分记录" description="切换流水类型，或完成一次生成后再回来查看。" />}</div>
+                        <div className="overflow-hidden rounded-md border border-border/70 bg-background">{entries.length ? entries.map((entry) => <LedgerMobileRow key={entry.id} config={config} entry={entry} />) : <WorkspaceState compact icon="wallet" title="没有匹配的积分记录" description="切换流水类型，或完成一次生成后再回来查看。" />}</div>
                     )}
                     <PaginationBar
                         current={page}
@@ -237,7 +239,7 @@ function BalanceMetric({ label, description, value, icon }: { label: string; des
     );
 }
 
-function LedgerMobileRow({ entry }: { entry: CreditLedgerEntry }) {
+function LedgerMobileRow({ config, entry }: { config: AiConfig; entry: CreditLedgerEntry }) {
     const meta = ledgerTypeMeta(entry.type);
     return (
         <article className="flex items-start gap-3 border-b border-border px-4 py-4 last:border-b-0">
@@ -245,7 +247,7 @@ function LedgerMobileRow({ entry }: { entry: CreditLedgerEntry }) {
             <div className="min-w-0 flex-1">
                 <div className="flex items-start justify-between gap-3">
                     <div className="min-w-0">
-                        <div className="truncate text-sm font-medium">{entry.model || ledgerTitle(entry)}</div>
+                        <div className="truncate text-sm font-medium">{ledgerModelName(config, entry)}</div>
                         <div className="mt-1 text-xs text-foreground/45">{formatTime(entry.createdAt)}</div>
                     </div>
                     <CreditDelta value={entry.amountMicrocredits} />
@@ -298,6 +300,10 @@ function ledgerTitle(entry: CreditLedgerEntry) {
     return entry.note || "积分调整";
 }
 
+function ledgerModelName(config: AiConfig, entry: CreditLedgerEntry) {
+    return entry.model ? modelDisplayName(config, entry.model) : ledgerTitle(entry);
+}
+
 function sceneLabel(scene?: string) {
     const labels: Record<string, string> = { image: "图片生成", text: "文本生成", video: "视频生成", audio: "音频生成", storyboard: "分镜生成" };
     return scene ? labels[scene] || "其他场景" : "";