fix(canvas): release ZIP staging bytes and revalidate recovery files

Add native task metadata, working-day calendar settings, dependency scheduling and rich note editing. Support complete-sheet PNG export with resolution and transparency controls, preserve XMind extensions and update browser regressions.

.env.example

@@ -153,8 +153,9 @@ PRODUCT_PLANNING_DB_SSL=false
 # Home Performance / Queues
 # -----------------------------------------------------------------------------
 
-CANVAS_IMAGE_TASK_CONCURRENCY=3
-CANVAS_IMAGE_TASK_BATCH_DISPATCH_INTERVAL_MS=1000
+# Legacy image queue fields: 0 = unrestricted; model/user admission caps are disabled.
+CANVAS_IMAGE_TASK_CONCURRENCY=0
+CANVAS_IMAGE_TASK_BATCH_DISPATCH_INTERVAL_MS=0
 EXTERNAL_IMAGE_API_MAX_CONCURRENT=3
 EXTERNAL_IMAGE_API_MAX_QUEUE=20
 EXTERNAL_IMAGE_API_QUEUE_TIMEOUT_MS=120000

.gitignore

@@ -50,6 +50,7 @@ yarn-error.log*
 /playwright-report/
 /blob-report/
 /playwright/*
+/output/
 deploy.tar.gz
 libvips-8.14.5-linux-x64.tar.br
 .temp-packages/
@@ -70,6 +71,10 @@ migration-*.txt
 artifacts/liblib-*/
 analysis/qiaodou-extract/
 
+# 本地运行时数据库与上传文件
+.local/
+public/uploads/local/
+
 # 模型文件
 *.model
 *.pth

README.md

@@ -94,7 +94,7 @@ pnpm db:generate
 推荐提交前至少运行：
 
 ```bash
-git fetch github main --prune
+git fetch origin --prune
 pnpm check:branch
 pnpm check:quality
 pnpm audit:security

app/(admin)/settings/_components/local-ai-sections/image-pipeline-sections.tsx

@@ -665,7 +665,7 @@ export function LocalAiImagePipelineSections({
                 </p>
                 <p>• 支持的图片格式：JPG, JPEG, PNG, BMP, WEBP, TIFF等</p>
                 <p>
-                  • 图片大小：不超过50MB，不限制分辨率（建议按业务需求控制尺寸）
+                  • 图片大小：不超过20MB，不限制分辨率（建议按业务需求控制尺寸）
                 </p>
                 <p>• 返回的链接有效期为1小时，系统会自动下载并存储到S3</p>
               </div>
@@ -784,7 +784,7 @@ export function LocalAiImagePipelineSections({
                 <p>• 支持2x、4x、8x放大倍数</p>
                 <p>• 处理时间：通常1-10秒，取决于图片大小</p>
                 <p>• 支持格式：JPG, PNG, JPEG等常见图片格式</p>
-                <p>• 文件限制：最大50MB</p>
+                <p>• 文件限制：最大20MB</p>
               </div>
             </div>
           </>

app/(admin)/settings/_components/local-ai-sections/runtime-sections.tsx

@@ -1078,139 +1078,15 @@ export function LocalAiRuntimeSections({
         </Button>
       </LocalAiSectionShell>
 
-      {/* 全站生图单模型并发 */}
       <LocalAiSectionShell
-        description={
-          <>
-            控制全站生图链路中，同一个模型允许同时运行的任务数，以及排队后下一批任务的发起间隔。配置保存到数据库，异步队列和直调生成都会自动读取，无需重启服务。
-          </>
-        }
+        description="生图任务直接发起，图片先显示，后台转存到存储桶。"
         expanded={isLocalAiSectionExpanded("canvas-image-task-queue")}
         id="local-ai-section-canvas-image-task-queue"
         onToggle={() => toggleLocalAiSection("canvas-image-task-queue")}
-        summary={
-          <LocalAiSectionSummary
-            items={[
-              {
-                label: `${canvasImageTaskQueueConfig.concurrency} 并发/模型`,
-                tone: "neutral",
-              },
-              {
-                label: `${(
-                  canvasImageTaskQueueConfig.batchDispatchIntervalMs / 1000
-                ).toFixed(1)} 秒补位`,
-                tone: "neutral",
-              },
-              { label: "全站生图生效", tone: "enabled" },
-            ]}
-          />
-        }
-        title={
-          <span className="flex items-center gap-2">
-            <ImageIcon className="h-5 w-5" />
-            全站生图单模型并发与批次间隔
-          </span>
-        }
+        summary={<LocalAiSectionSummary items={[{ label: "并发不限", tone: "enabled" }, { label: "即时发起", tone: "enabled" }]} />}
+        title={<span className="flex items-center gap-2"><ImageIcon className="h-5 w-5" />生图任务执行</span>}
       >
-        <div className="grid gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(220px,320px)]">
-          <div className="rounded-lg border border-amber-200 bg-amber-50 p-4 text-amber-900 text-sm">
-            <div className="font-medium">生效范围</div>
-            <div className="mt-2 space-y-1 text-amber-800 text-xs leading-5">
-              <p>
-                •
-                影响画布异步生图、智能体直调生图、视频分镜高清预览等全站生图入口。
-              </p>
-              <p>
-                •
-                多用户共享同一套并发限制，但会按模型分别计数，不同模型之间不再互相阻塞。
-              </p>
-              <p>
-                • 当前配置的是单模型并发，不是全站总并发，也不是单用户并发。
-              </p>
-              <p>
-                •
-                批次间隔只控制排队补位的“下一批”发起节奏，不影响首批任务即时启动。
-              </p>
-              <p>
-                • 数值过高可能触发上游模型 429、超时或 504，建议配合模型 Key
-                池继续细分。
-              </p>
-            </div>
-          </div>
-
-          <div className="space-y-4">
-            <div className="space-y-2">
-              <Label htmlFor="canvasImageTaskQueueConcurrency">
-                单模型最大同时运行任务数
-              </Label>
-              <Input
-                id="canvasImageTaskQueueConcurrency"
-                max={MAX_CANVAS_IMAGE_TASK_CONCURRENCY}
-                min={MIN_CANVAS_IMAGE_TASK_CONCURRENCY}
-                onChange={(e) =>
-                  setCanvasImageTaskQueueConfig(
-                    normalizeCanvasImageTaskQueueConfig({
-                      ...canvasImageTaskQueueConfig,
-                      concurrency: e.target.value,
-                    })
-                  )
-                }
-                type="number"
-                value={canvasImageTaskQueueConfig.concurrency}
-              />
-              <div className="text-muted-foreground text-xs">
-                可配置范围 {MIN_CANVAS_IMAGE_TASK_CONCURRENCY}-
-                {MAX_CANVAS_IMAGE_TASK_CONCURRENCY}，当前为{" "}
-                {canvasImageTaskQueueConfig.concurrency} 并发，默认值为{" "}
-                {DEFAULT_CANVAS_IMAGE_TASK_CONCURRENCY}。
-              </div>
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="canvasImageTaskBatchDispatchIntervalSeconds">
-                下一批排队任务发起间隔（秒）
-              </Label>
-              <Input
-                id="canvasImageTaskBatchDispatchIntervalSeconds"
-                max={MAX_CANVAS_IMAGE_BATCH_DISPATCH_INTERVAL_MS / 1000}
-                min={MIN_CANVAS_IMAGE_BATCH_DISPATCH_INTERVAL_MS / 1000}
-                onChange={(e) =>
-                  setCanvasImageTaskQueueConfig(
-                    normalizeCanvasImageTaskQueueConfig({
-                      ...canvasImageTaskQueueConfig,
-                      batchDispatchIntervalMs: Math.round(
-                        Number.parseFloat(e.target.value || "0") * 1000
-                      ),
-                    })
-                  )
-                }
-                step="0.5"
-                type="number"
-                value={String(
-                  canvasImageTaskQueueConfig.batchDispatchIntervalMs / 1000
-                )}
-              />
-              <div className="text-muted-foreground text-xs">
-                可配置范围 {MIN_CANVAS_IMAGE_BATCH_DISPATCH_INTERVAL_MS / 1000}-
-                {MAX_CANVAS_IMAGE_BATCH_DISPATCH_INTERVAL_MS / 1000} 秒，当前为{" "}
-                {(
-                  canvasImageTaskQueueConfig.batchDispatchIntervalMs / 1000
-                ).toFixed(1)}{" "}
-                秒，默认值为{" "}
-                {(
-                  DEFAULT_CANVAS_IMAGE_BATCH_DISPATCH_INTERVAL_MS / 1000
-                ).toFixed(1)}{" "}
-                秒。
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div className="flex justify-end">
-          <Button onClick={handleSaveCanvasImageTaskQueueConfig}>
-            <Save className="mr-2 h-4 w-4" /> 保存并发与间隔
-          </Button>
-        </div>
+        <p className="text-muted-foreground text-sm">已取消模型及单用户并发限制，任务无需等待其他图片生成完成。任务状态、超时处理和失败重试继续保留。</p>
       </LocalAiSectionShell>
 
       {/* 批量处理配置 */}

app/(admin)/settings/admin-settings-client.tsx

@@ -38,6 +38,7 @@ import {
   ImagePlus,
   Key,
   Layers,
+  LayoutTemplate,
   Layers3,
   Loader2,
   type LucideIcon,
@@ -1061,6 +1062,7 @@ const CANVAS_TOOLBAR_FALLBACK_ICONS: Record<CanvasToolbarItemKey, LucideIcon> =
     imageRemoveBackground: Scissors,
     imageBoxCutout: Scan,
     imageLocalEdit: Wand2,
+    imageLayoutReplace: LayoutTemplate,
     imageRemoveWatermark: Eraser,
     imageResize: Maximize2,
     imageTextEdit: Type,
@@ -2180,7 +2182,7 @@ export function AdminSettingsClient() {
     usageTimeEnabled: false,
     usageTimeStart: "08:00",
     usageTimeEnd: "20:00",
-    usageTimeMessage: "由壹点累了也是需要休息的",
+    usageTimeMessage: "BuYi 累了也是需要休息的",
     defaultTheme: "system",
     bannerEnabled: true,
     bannerText: "限时特惠：升级会员最高立享 45% OFF!",
@@ -2222,7 +2224,7 @@ export function AdminSettingsClient() {
     agentWorkflowDefaultModelId: null,
     canvasDetailDefaultModelId: null,
     canvasDetailAgentModelId: null,
-    lovartComposerPrefix: "让「由壹点AI」",
+    lovartComposerPrefix: "让「𝗕𝘂𝗬𝗶」",
     lovartComposerPreviewTexts: [
       "打造引人注目的社交媒体视觉",
       "帮我把这张产品图做成高级电商海报",
@@ -2238,8 +2240,8 @@ export function AdminSettingsClient() {
     lovartPromoText:
       "现在升级，立享 Kling 3.0 与 Nano Banana Pro，最高 5 折优惠",
     lovartPromoActionText: "立即升级",
-    lovartHeroTitle: "由壹点AI 让设计更简单",
-    lovartHeroSubtitle: "懂你的设计代理，帮你搞定一切",
+    lovartHeroTitle: "𝗕𝘂𝗬𝗶 让设计触手可及",
+    lovartHeroSubtitle: "下达指令，即刻呈现",
     surpriseCategories: ["全部", "精选"],
     membershipConfig: defaultMembershipConfig,
     membershipUserOverrides: defaultMembershipUserOverrides,
@@ -2300,7 +2302,7 @@ export function AdminSettingsClient() {
         usageTimeStart: siteSettingsData.usageTimeStart || "08:00",
         usageTimeEnd: siteSettingsData.usageTimeEnd || "20:00",
         usageTimeMessage:
-          siteSettingsData.usageTimeMessage || "由壹点累了也是需要休息的",
+          siteSettingsData.usageTimeMessage || "BuYi 累了也是需要休息的",
         defaultTheme: siteSettingsData.defaultTheme || "system",
         bannerEnabled: siteSettingsData.bannerEnabled ?? true,
         bannerText:
@@ -2396,7 +2398,7 @@ export function AdminSettingsClient() {
           (siteSettingsData as any).canvasDetailAgentModelId || null,
         lovartComposerPrefix:
           String((siteSettingsData as any).lovartComposerPrefix || "").trim() ||
-          "让「由壹点AI」",
+          "让「𝗕𝘂𝗬𝗶」",
         lovartComposerPreviewTexts: Array.isArray(
           siteSettingsData.lovartComposerPreviewTexts
         )
@@ -2498,9 +2500,9 @@ export function AdminSettingsClient() {
         lovartPromoActionText:
           siteSettingsData.lovartPromoActionText || "立即升级",
         lovartHeroTitle:
-          siteSettingsData.lovartHeroTitle || "由壹点AI 让设计更简单",
+          siteSettingsData.lovartHeroTitle || "𝗕𝘂𝗬𝗶 让设计触手可及",
         lovartHeroSubtitle:
-          siteSettingsData.lovartHeroSubtitle || "懂你的设计代理，帮你搞定一切",
+          siteSettingsData.lovartHeroSubtitle || "下达指令，即刻呈现",
         surpriseCategories: Array.isArray(siteSettingsData.surpriseCategories)
           ? siteSettingsData.surpriseCategories
               .map((item: any) => String(item).trim())
@@ -8913,9 +8915,7 @@ export function AdminSettingsClient() {
     {
       key: "realtime-canvas",
       title: "实时与队列",
-      description: `单模型并发 ${canvasImageTaskQueueConfig.concurrency}，批次间隔 ${(
-        canvasImageTaskQueueConfig.batchDispatchIntervalMs / 1000
-      ).toFixed(1)} 秒`,
+      description: "生图并发不限，任务即时发起",
       status: realtimeCanvasConfig.enabled ? "实时已启用" : "实时已关闭",
       tone: realtimeCanvasConfig.enabled ? "enabled" : "neutral",
       icon: SlidersHorizontal,
@@ -10522,7 +10522,7 @@ export function AdminSettingsClient() {
                         lovartComposerPrefix: e.target.value.slice(0, 40),
                       })
                     }
-                    placeholder="让「由壹点AI」"
+                    placeholder="让「𝗕𝘂𝗬𝗶」"
                     value={siteSettings.lovartComposerPrefix}
                   />
                   <div className="text-muted-foreground text-xs">
@@ -10724,7 +10724,7 @@ export function AdminSettingsClient() {
                         lovartHeroTitle: e.target.value,
                       })
                     }
-                    placeholder="由壹点AI 让设计更简单"
+                    placeholder="𝗕𝘂𝗬𝗶 让设计触手可及"
                     value={siteSettings.lovartHeroTitle}
                   />
                 </div>
@@ -10738,7 +10738,7 @@ export function AdminSettingsClient() {
                         lovartHeroSubtitle: e.target.value,
                       })
                     }
-                    placeholder="懂你的设计代理，帮你搞定一切"
+                    placeholder="下达指令，即刻呈现"
                     value={siteSettings.lovartHeroSubtitle}
                   />
                 </div>

app/(chat)/api/chat/_lib/detail-replacement.ts

@@ -2,9 +2,30 @@ import { createLogger } from "@/lib/observability/logger";
 import { generateText } from "ai";
 import { fetchImageBufferFromUrl } from "@/lib/ai/rmbg/service";
 import { getLanguageModelById } from "@/lib/ai/dynamic-provider";
+import {
+  DETAIL_REPLACEMENT_IMAGE_MODEL_CONFIG_KEY,
+  normalizeDetailReplacementImageModelConfig,
+} from "@/lib/ai/detail-replacement-image-model-config";
+import {
+  compositeReplacementWithReferenceLocks,
+  parseReplacementLayoutLockRegions,
+  type NormalizedReplacementBox,
+} from "@/lib/ai/replacement-layout-lock";
+import {
+  buildReplacementProductIdentityAnalysisPrompt,
+  buildReplacementProductStructureLockLines,
+  formatReplacementProductIdentityProfile,
+  normalizeReplacementProductImageIndexes,
+  parseReplacementProductIdentityProfile,
+  type ReplacementProductIdentityProfile,
+} from "@/lib/ai/replacement-product-identity";
 import { resolveDetailAgentLocalMoonshotModel } from "@/lib/ai/detail-agent-model-runtime";
 import { inlineVisionImages } from "@/lib/ai/vision-inline";
-import { getEnabledAiModelsWithProvider, getSiteSettings } from "@/lib/db/queries";
+import {
+  getEnabledAiModelsWithProvider,
+  getSiteSettings,
+  getSystemSetting,
+} from "@/lib/db/queries";
 import { uploadFile } from "@/lib/storage/service";
 import { bufferToArrayBuffer } from "./persistence";
 import { isVideoProviderType } from "./video-models";
@@ -234,6 +255,8 @@ export async function normalizeReplacementResultImage(params: {
   referenceImageUrl: string;
   referenceGeometry?: ReplacementReferenceGeometry | null;
   scenePlan?: ReplacementScenePlan | null;
+  preserveReferenceOutsideSubject?: boolean;
+  preserveReferenceText?: boolean;
   uploadPrefix: string;
 }): Promise<{
   originalUrl: string;
@@ -242,6 +265,11 @@ export async function normalizeReplacementResultImage(params: {
 }> {
   const sharp = (await import("sharp")).default;
   const generatedBuffer = await fetchImageBufferFromUrl(params.generatedImageUrl);
+  let referenceBuffer: Buffer | null = null;
+  const getReferenceBuffer = async () => {
+    referenceBuffer ||= await fetchImageBufferFromUrl(params.referenceImageUrl);
+    return referenceBuffer;
+  };
   let targetWidth = params.referenceGeometry?.width;
   let targetHeight = params.referenceGeometry?.height;
   const generatedMetadata = await sharp(generatedBuffer, { failOn: "none" })
@@ -250,8 +278,8 @@ export async function normalizeReplacementResultImage(params: {
 
   if (!targetWidth || !targetHeight) {
     try {
-      const referenceBuffer = await fetchImageBufferFromUrl(params.referenceImageUrl);
-      const referenceMetadata = await sharp(referenceBuffer, { failOn: "none" })
+      const resolvedReferenceBuffer = await getReferenceBuffer();
+      const referenceMetadata = await sharp(resolvedReferenceBuffer, { failOn: "none" })
         .rotate()
         .metadata();
       targetWidth = referenceMetadata.width;
@@ -298,7 +326,7 @@ export async function normalizeReplacementResultImage(params: {
     : shouldPreserveFullGeneratedCanvas
       ? "contain"
       : "cover";
-  const normalizedBuffer =
+  let normalizedBuffer =
     targetWidth && targetHeight
       ? await imagePipeline
           .resize(targetWidth, targetHeight, {
@@ -312,6 +340,82 @@ export async function normalizeReplacementResultImage(params: {
           .png()
           .toBuffer()
       : await imagePipeline.png().toBuffer();
+
+  if (
+    targetWidth &&
+    targetHeight &&
+    (params.preserveReferenceOutsideSubject || params.preserveReferenceText)
+  ) {
+    let layoutLocks = {
+      subjectBoundingBox: params.scenePlan?.subjectBoundingBox || null,
+      textBoundingBoxes: params.scenePlan?.textBoundingBoxes || [],
+      analyzed: params.scenePlan?.layoutLockAnalyzed === true,
+    };
+    const needsLayoutLockFallback =
+      !layoutLocks.analyzed ||
+      (params.preserveReferenceOutsideSubject && !layoutLocks.subjectBoundingBox);
+
+    if (needsLayoutLockFallback) {
+      const fallbackLocks = await resolveReplacementLayoutLockRegions({
+        referenceImageUrl: params.referenceImageUrl,
+        referenceBuffer: await getReferenceBuffer(),
+      });
+      layoutLocks = {
+        subjectBoundingBox:
+          layoutLocks.subjectBoundingBox || fallbackLocks.subjectBoundingBox,
+        textBoundingBoxes:
+          layoutLocks.textBoundingBoxes.length > 0
+            ? layoutLocks.textBoundingBoxes
+            : fallbackLocks.textBoundingBoxes,
+        analyzed: layoutLocks.analyzed || fallbackLocks.analyzed,
+      };
+    }
+
+    const shouldUseSafeReferenceFallback = Boolean(
+      (params.preserveReferenceOutsideSubject && !layoutLocks.subjectBoundingBox) ||
+        (params.preserveReferenceText && !layoutLocks.analyzed),
+    );
+    normalizedBuffer = shouldUseSafeReferenceFallback
+      ? await sharp(await getReferenceBuffer(), { failOn: "none" })
+          .rotate()
+          .resize(targetWidth, targetHeight, { fit: "fill" })
+          .png()
+          .toBuffer()
+      : await compositeReplacementWithReferenceLocks({
+          generatedBuffer: normalizedBuffer,
+          referenceBuffer: await getReferenceBuffer(),
+          width: targetWidth,
+          height: targetHeight,
+          preserveReferenceOutsideSubject: Boolean(
+            params.preserveReferenceOutsideSubject && layoutLocks.subjectBoundingBox,
+          ),
+          subjectBoundingBox: layoutLocks.subjectBoundingBox,
+          textBoundingBoxes: params.preserveReferenceText
+            ? layoutLocks.textBoundingBoxes
+            : [],
+        });
+    if (shouldUseSafeReferenceFallback) {
+      chatApiLogger.warn(
+        "[Chat API] Replacement layout lock analysis unavailable; preserved the reference image instead of returning a layout-damaged result",
+        {
+          preserveReferenceOutsideSubject: params.preserveReferenceOutsideSubject,
+          preserveReferenceText: params.preserveReferenceText,
+          hasSubjectBoundingBox: Boolean(layoutLocks.subjectBoundingBox),
+          layoutLockAnalyzed: layoutLocks.analyzed,
+        },
+      );
+    }
+    chatApiLogger.info("[Chat API] Replacement reference layout locks applied:", {
+      preserveReferenceOutsideSubject: Boolean(
+        params.preserveReferenceOutsideSubject && layoutLocks.subjectBoundingBox,
+      ),
+      preservedTextRegionCount: params.preserveReferenceText
+        ? layoutLocks.textBoundingBoxes.length
+        : 0,
+      usedFallbackAnalysis: needsLayoutLockFallback,
+      usedSafeReferenceFallback: shouldUseSafeReferenceFallback,
+    });
+  }
   const thumbnailBuffer = await createAgentImageThumbnailBuffer(normalizedBuffer);
 
   const uniqueSuffix = `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
@@ -399,6 +503,12 @@ export type ReplacementScenePlan = {
   generationPrompt: string;
   selectedProductImageIndexes: number[];
   productSelectionReason: string;
+  productIdentitySummary?: string;
+  productStructureSummary?: string;
+  productStructuralRisks?: string;
+  subjectBoundingBox?: NormalizedReplacementBox | null;
+  textBoundingBoxes?: NormalizedReplacementBox[];
+  layoutLockAnalyzed?: boolean;
   analysisModelName?: string | null;
   analysisSource: "local_moonshot" | "configured_vision" | "heuristic";
 };
@@ -439,6 +549,187 @@ export type ReplacementScenePlanningRuntime =
 
 const QWEN_VL_MODEL_MATCHER = /(qwen|千问|通义).*(vl|vision)|qwen3-vl|qwen-vl/i;
 
+const replacementProductIdentityProfileCache = new Map<
+  string,
+  {
+    expiresAt: number;
+    promise: Promise<ReplacementProductIdentityProfile | null>;
+  }
+>();
+
+async function resolveReplacementProductIdentityProfile(params: {
+  productImageUrls: string[];
+  planningRuntime: Exclude<ReplacementScenePlanningRuntime, null>;
+}) {
+  const productImageUrls = Array.from(
+    new Set(
+      params.productImageUrls
+        .map((url) => String(url || "").trim())
+        .filter((url) => /^https?:\/\//i.test(url)),
+    ),
+  ).slice(0, 8);
+  if (productImageUrls.length === 0) return null;
+
+  const cacheKey = [
+    params.planningRuntime.kind,
+    params.planningRuntime.modelName,
+    ...productImageUrls,
+  ].join("|");
+  const now = Date.now();
+  const cached = replacementProductIdentityProfileCache.get(cacheKey);
+  if (cached && cached.expiresAt > now) {
+    return cached.promise;
+  }
+
+  if (replacementProductIdentityProfileCache.size >= 100) {
+    const oldestKey = replacementProductIdentityProfileCache.keys().next().value;
+    if (oldestKey) replacementProductIdentityProfileCache.delete(oldestKey);
+  }
+
+  const promise = (async () => {
+    try {
+      const { inlineDataUrls } = await inlineVisionImages(productImageUrls, {
+        maxImages: productImageUrls.length,
+        maxSide: 800,
+        timeoutMs: 12_000,
+        retries: 2,
+        loggerPrefix: "[Chat API] Replacement product identity",
+      });
+      const effectiveImages =
+        inlineDataUrls.length === productImageUrls.length
+          ? inlineDataUrls
+          : productImageUrls;
+      const { text } = await generateText({
+        model: params.planningRuntime.model,
+        messages: [
+          {
+            role: "user",
+            content: [
+              {
+                type: "text",
+                text: buildReplacementProductIdentityAnalysisPrompt(
+                  productImageUrls.length,
+                ),
+              },
+              ...effectiveImages.map((image) => ({
+                type: "image" as const,
+                image,
+              })),
+            ],
+          },
+        ],
+        system:
+          "你是高精度商品结构分析器。多张图片属于同一商品；请跨视角还原唯一结构身份，并明确每个视角最清楚的构件。",
+        temperature: params.planningRuntime.kind === "local_moonshot" ? 1 : 0.1,
+        maxTokens: 1800,
+        abortSignal: AbortSignal.timeout(
+          params.planningRuntime.kind === "local_moonshot" ? 90_000 : 60_000,
+        ),
+      } as any);
+      const profile = parseReplacementProductIdentityProfile(
+        text,
+        productImageUrls.length,
+      );
+      if (!profile) {
+        throw new Error("商品结构画像缺少必需字段");
+      }
+      return profile;
+    } catch (error) {
+      chatApiLogger.warn("[Chat API] Replacement product identity analysis failed:", {
+        productImageCount: productImageUrls.length,
+        modelName: params.planningRuntime.modelName,
+        error: error instanceof Error ? error.message : "unknown",
+      });
+      return null;
+    }
+  })();
+
+  replacementProductIdentityProfileCache.set(cacheKey, {
+    expiresAt: now + 30 * 60 * 1000,
+    promise,
+  });
+  return promise;
+}
+
+const replacementLayoutLockCache = new Map<
+  string,
+  {
+    expiresAt: number;
+    promise: Promise<ReturnType<typeof parseReplacementLayoutLockRegions>>;
+  }
+>();
+
+async function resolveReplacementLayoutLockRegions(params: {
+  referenceImageUrl: string;
+  referenceBuffer: Buffer;
+}) {
+  const now = Date.now();
+  const cached = replacementLayoutLockCache.get(params.referenceImageUrl);
+  if (cached && cached.expiresAt > now) {
+    return cached.promise;
+  }
+
+  if (replacementLayoutLockCache.size >= 200) {
+    const oldestKey = replacementLayoutLockCache.keys().next().value;
+    if (oldestKey) {
+      replacementLayoutLockCache.delete(oldestKey);
+    }
+  }
+
+  const promise = (async () => {
+    try {
+      const sharp = (await import("sharp")).default;
+      const inlineBuffer = await sharp(params.referenceBuffer, { failOn: "none" })
+        .rotate()
+        .resize(1600, 1600, {
+          fit: "inside",
+          withoutEnlargement: true,
+        })
+        .flatten({ background: "#ffffff" })
+        .jpeg({ quality: 88 })
+        .toBuffer();
+      const { callQwen3Vl } = await import("@/lib/ai/qwen3-vl");
+      const result = await callQwen3Vl({
+        imageUrl: `data:image/jpeg;base64,${inlineBuffer.toString("base64")}`,
+        prompt: [
+          "你是电商详情图的布局区域定位器。",
+          "只分析当前图像，返回严格 JSON，不要解释。",
+          "所有坐标使用 0到1000 的归一化坐标，格式必须是 [x1,y1,x2,y2]，绝对不是 x/y/宽/高。",
+          "subjectBoundingBox：只框出图中当前旧商品主体的可视外轮廓区域，包含完整商品和它的自然阴影，不要包含文字；没有商品则为 null。",
+          "textBoundingBoxes：框出所有可见文案块，包括中英文标题、卖点、参数、标签、数字、品牌字样、按钮文字和紧邻的图标；没有则返回空数组。",
+          '{"subjectBoundingBox":[0,0,1000,1000],"textBoundingBoxes":[[0,0,1000,1000]]}',
+        ].join("\n"),
+        temperature: 0,
+        maxTokens: 1600,
+        timeoutMs: 60_000,
+        retries: 1,
+      });
+      const parsedLocks = parseReplacementLayoutLockRegions(result.text);
+      if (!parsedLocks.analyzed) {
+        throw new Error("布局区域定位结果缺少必需字段");
+      }
+      return parsedLocks;
+    } catch (error) {
+      replacementLayoutLockCache.delete(params.referenceImageUrl);
+      chatApiLogger.warn("[Chat API] Replacement layout lock fallback analysis failed:", {
+        referenceImageUrl: params.referenceImageUrl,
+        error: error instanceof Error ? error.message : "unknown",
+      });
+      return {
+        subjectBoundingBox: null,
+        textBoundingBoxes: [],
+        analyzed: false,
+      };
+    }
+  })();
+
+  replacementLayoutLockCache.set(params.referenceImageUrl, {
+    expiresAt: now + 30 * 60 * 1000,
+    promise,
+  });
+  return promise;
+}
+
 export function normalizeDetailReplacementStrategy(
   value: unknown,
 ): AgentDetailReplacementStrategy {
@@ -1441,7 +1732,27 @@ export function parseReplacementScenePlan(
         visualProfile: params.visualProfile,
       });
 
-    const productImageSelection = buildDefaultProductImageSelection(params.productImageCount);
+    const defaultProductImageSelection = buildDefaultProductImageSelection(
+      params.productImageCount,
+    );
+    const selectedProductImageIndexes = normalizeReplacementProductImageIndexes(
+      parsed.selectedProductImageIndexes ??
+        parsed.selectedProductIndexes ??
+        parsed.productImageIndexes,
+      params.productImageCount,
+    );
+    const productImageSelection =
+      selectedProductImageIndexes.length > 0
+        ? {
+            selectedProductImageIndexes,
+            productSelectionReason:
+              truncateReplacementAnalysisText(
+                parsed.productSelectionReason ?? parsed.selectionReason,
+                240,
+              ) || "按当前详情底板机位选择最匹配的产品视角。",
+          }
+        : defaultProductImageSelection;
+    const layoutLocks = parseReplacementLayoutLockRegions(parsed);
     let scenePlan: ReplacementScenePlan = {
       pageKind,
       generationRoute,
@@ -1486,6 +1797,9 @@ export function parseReplacementScenePlan(
       generationPrompt,
       selectedProductImageIndexes: productImageSelection.selectedProductImageIndexes,
       productSelectionReason: productImageSelection.productSelectionReason,
+      subjectBoundingBox: layoutLocks.subjectBoundingBox,
+      textBoundingBoxes: layoutLocks.textBoundingBoxes,
+      layoutLockAnalyzed: layoutLocks.analyzed,
       analysisModelName: null,
       analysisSource: "heuristic",
     };
@@ -1844,6 +2158,27 @@ export async function resolveDirectReplacementModelRef(params: {
   finalModelId?: string | null;
   models?: Awaited<ReturnType<typeof getEnabledAiModelsWithProvider>>;
 }) {
+  const models = params.models || (await getEnabledAiModelsWithProvider(false));
+  const imageModels = models.filter(
+    ({ model, provider }) =>
+      model.supportsImageGen &&
+      !model.isSubModel &&
+      !isVideoProviderType(provider?.type, model),
+  );
+  const configuredModelSetting = await getSystemSetting({
+    key: DETAIL_REPLACEMENT_IMAGE_MODEL_CONFIG_KEY,
+  }).catch(() => null);
+  const configuredModelId = normalizeDetailReplacementImageModelConfig(
+    configuredModelSetting?.value,
+  ).modelId;
+  const configuredModel = imageModels.find(
+    ({ model }) =>
+      model.id === configuredModelId || model.modelId === configuredModelId,
+  );
+  if (configuredModel) {
+    return configuredModel.model.id;
+  }
+
   const explicitModel = String(params.selectedChatModel || "").trim();
   if (explicitModel && explicitModel !== "auto") {
     return explicitModel;
@@ -1853,13 +2188,6 @@ export async function resolveDirectReplacementModelRef(params: {
     return routedModel;
   }
 
-  const models = params.models || (await getEnabledAiModelsWithProvider(false));
-  const imageModels = models.filter(
-    ({ model, provider }) =>
-      model.supportsImageGen &&
-      !model.isSubModel &&
-      !isVideoProviderType(provider?.type, model),
-  );
   const preferred =
     imageModels.find(({ model }) => model.isDefault) ||
     imageModels.find(({ provider }) => String(provider?.type || "").includes("image")) ||
@@ -2191,6 +2519,13 @@ export async function analyzeReplacementExecutionPlan(params: {
   const referenceVisualProfile = isDetailReplacement
     ? await resolveReplacementReferenceVisualProfile(params.referenceImageUrl)
     : null;
+  const productIdentityProfile =
+    params.planningRuntime && params.productImageUrls.length > 0
+      ? await resolveReplacementProductIdentityProfile({
+          productImageUrls: params.productImageUrls,
+          planningRuntime: params.planningRuntime,
+        })
+      : null;
   if (params.planningRuntime) {
     try {
       const replacementScenePlanningTimeoutMs =
@@ -2221,7 +2556,10 @@ export async function analyzeReplacementExecutionPlan(params: {
           ? "你是电商详情参考图背景替换流程中的“版式与背景区域规划器”。"
           : "你是电商详情替换流程中的“场景理解规划器”。",
         `当前要分析的参考图：${params.referenceLabel}`,
-        "你现在只分析这一张参考图本身，不分析产品图，不分析模特图。",
+        "当前视觉输入只包含这一张详情参考图；产品图已经单独做过跨视角结构分析，请根据下面的产品结构画像选择最匹配当前机位的产品视角，不要臆测产品结构。",
+        productIdentityProfile
+          ? `【产品结构画像】\n${formatReplacementProductIdentityProfile(productIdentityProfile)}`
+          : "产品结构画像暂不可用：仍需按当前参考图机位选择产品图，但不得把旧产品的腿型、支架或构件拓扑当成新产品结构。",
         referenceVisualProfile
           ? `像素初筛：nearWhite=${referenceVisualProfile.nearWhitePixelRatio.toFixed(2)}, lightLowSaturation=${referenceVisualProfile.lightLowSaturationPixelRatio.toFixed(2)}, topLight=${referenceVisualProfile.topLightLowSaturationPixelRatio.toFixed(2)}, borderLight=${referenceVisualProfile.borderLightLowSaturationPixelRatio.toFixed(2)}, dark=${referenceVisualProfile.darkPixelRatio.toFixed(2)}, likelyWhiteLayout=${referenceVisualProfile.likelyWhiteLayout ? "true" : "false"}, likelyWhiteScene=${referenceVisualProfile.likelyWhiteScene ? "true" : "false"}。${referenceVisualProfile.reason}`
           : "",
@@ -2231,7 +2569,7 @@ export async function analyzeReplacementExecutionPlan(params: {
         !referenceVisualProfile?.likelyWhiteLayout && referenceVisualProfile?.likelyWhiteScene
           ? "像素初筛已经命中白/浅色低饱和真实场景：这不是白底说明页。若画面存在真实空间、人物或产品照片，promptPackPolicy 应为 soft 或 allow，必须使用前置工作流词包重建图片框内产品、空间、软装和灯光，使差异清晰可见；但最终仍保持白/浅色低饱和基调，不要改造成深色厨房、黑墙、复杂吊灯或强软装。"
           : "",
-        "产品图和模特图会在后续生图阶段单独提供给生图模型使用，你这里不要尝试理解它们的具体外观，也不要要求必须使用所有输入图。",
+        "产品图和模特图会在后续生图阶段单独提供给生图模型。你必须依据产品结构画像输出 selectedProductImageIndexes，选择最多两张最能匹配当前参考图机位并共同说明完整结构的产品图；不得固定选择前两张，也不要要求强行使用全部产品图。",
         params.modelImageUrl && !isProductOnlyDetailReplacement
           ? "你只需要根据当前参考图判断：这一屏是否存在真实的人物展示需求；如果没有人物需求，useModelImage 必须为 false。"
           : "本轮没有模特图，useModelImage 必须为 false。",
@@ -2278,12 +2616,18 @@ export async function analyzeReplacementExecutionPlan(params: {
         isDetailReplacement
           ? "5. 判断 textPolicy：画面中存在营销标题、卖点、编号、参数、标签且与图匹配时必须 lock 或 preserve，避免后续生图改字、混色或重排。"
           : "",
+        isDetailReplacement
+          ? "5a. 必须输出 subjectBoundingBox 和 textBoundingBoxes。所有坐标为 0到1000 归一化坐标 [x1,y1,x2,y2]，不是 x/y/宽/高。subjectBoundingBox 紧密框住旧商品主体及自然阴影，不含文字，无商品时为 null；textBoundingBoxes 覆盖所有中英文文案、标题、卖点、参数、标签、数字、品牌字样、按钮文字及紧邻图标，无文字时为 []。"
+          : "",
         isDetailReplacement
           ? "6. 判断 peoplePolicy：有人物/多人/自拍/聚会/围坐/聚餐/模特互动/拿手机/用餐/试坐/承重动作时必须 preserve_relation；如果文字明确写了“多人围坐、聚餐、合照、用餐、单侧承重、横向受力测试、拿手机”等动作，generationPrompt 必须把这个动作写成硬约束；如果只提供 1 张模特图但参考图多人，仍要保留参考图人数和关系，额外人物按参考图生成相近人群。"
           : "",
         isDetailReplacement
           ? "7. 提炼 sceneSummary、cameraSummary、placementSummary、preserveSummary、styleSummary、avoidSummary；cameraSummary 必须写出产品主体的视角特征，例如正侧视/三分之四/俯视/平视、倾斜方向、可见面数量、主体朝向和透视消失方向。"
           : "",
+        isDetailReplacement
+          ? "7a. 输出 selectedProductImageIndexes：根据当前详情图机位，从产品结构画像的图片编号中选择最多两张最相关的产品图；第一张应最接近当前机位，第二张补足腿、支架、横梁、侧框或其他容易变形的结构。输出 productSelectionReason 说明选择依据。"
+          : "",
         isProductOnlyDetailReplacement
           ? "4. 输出 generationPrompt：这是一段给后续生图模型的本屏生成指令，要求只替换产品主体，保留其余背景、文案、排版、装饰和光影完全不变。"
           : isDetailReplacement
@@ -2309,7 +2653,7 @@ export async function analyzeReplacementExecutionPlan(params: {
           : "",
         "只返回严格 JSON，不要任何额外解释。",
         `JSON 格式：
-{"shouldReplace":true,"containsFurnitureProduct":true,"reason":"不超过30字","pageKind":"prompt_pack_scene|white_scene|white_layout|copy_locked|people_scene|action_poster|dimension_spec|material_detail|unknown","generationRoute":"${isDetailReplacement ? "prompt_pack_scene|layout_preserve_replace|copy_locked_regenerate|people_relation_locked" : "prompt_pack_scene|layout_preserve_replace|copy_locked_regenerate|people_relation_locked|direct_passthrough"}","promptPackPolicy":"allow|soft|forbid","textPolicy":"free|preserve|lock","peoplePolicy":"none|preserve_relation|require_user_model","whiteBackgroundLikely":false,"copyImageCoupled":false,"containsPeople":false,"containsMultiplePeople":false,"routeReason":"不超过50字","useModelImage":false,"modelImageReason":"不超过40字","sceneSummary":"不超过80字","cameraSummary":"不超过60字","placementSummary":"不超过60字","preserveSummary":"不超过80字","styleSummary":"不超过80字","avoidSummary":"不超过80字","generationPrompt":"不超过300字"}`,
+{"shouldReplace":true,"containsFurnitureProduct":true,"reason":"不超过30字","pageKind":"prompt_pack_scene|white_scene|white_layout|copy_locked|people_scene|action_poster|dimension_spec|material_detail|unknown","generationRoute":"${isDetailReplacement ? "prompt_pack_scene|layout_preserve_replace|copy_locked_regenerate|people_relation_locked" : "prompt_pack_scene|layout_preserve_replace|copy_locked_regenerate|people_relation_locked|direct_passthrough"}","promptPackPolicy":"allow|soft|forbid","textPolicy":"free|preserve|lock","peoplePolicy":"none|preserve_relation|require_user_model","whiteBackgroundLikely":false,"copyImageCoupled":false,"containsPeople":false,"containsMultiplePeople":false,"subjectBoundingBox":[0,0,1000,1000],"textBoundingBoxes":[[0,0,1000,1000]],"selectedProductImageIndexes":[1,2],"productSelectionReason":"不超过80字","routeReason":"不超过50字","useModelImage":false,"modelImageReason":"不超过40字","sceneSummary":"不超过80字","cameraSummary":"不超过60字","placementSummary":"不超过60字","preserveSummary":"不超过80字","styleSummary":"不超过80字","avoidSummary":"不超过80字","generationPrompt":"不超过300字"}`,
       ]
         .filter(Boolean)
         .join("\n");
@@ -2334,7 +2678,7 @@ export async function analyzeReplacementExecutionPlan(params: {
         system:
           "你是高精度商品详情图场景规划器。你只分析当前参考图本身，负责理解这一屏的场景、机位、主体位置和人物需求，不要臆测或依赖其他输入图片。",
         temperature: params.planningRuntime.kind === "local_moonshot" ? 1 : 0.1,
-        maxTokens: 1200,
+        maxTokens: 1600,
         abortSignal: AbortSignal.timeout(replacementScenePlanningTimeoutMs),
       } as any);
 
@@ -2368,6 +2712,9 @@ export async function analyzeReplacementExecutionPlan(params: {
               : "configured_vision",
           scenePlan: {
             ...normalizedPlan.scenePlan,
+            productIdentitySummary: productIdentityProfile?.identitySummary || "",
+            productStructureSummary: productIdentityProfile?.structureSummary || "",
+            productStructuralRisks: productIdentityProfile?.structuralRisks || "",
             analysisModelName: params.planningRuntime.modelName,
             analysisSource:
               params.planningRuntime.kind === "local_moonshot"
@@ -2413,7 +2760,12 @@ export async function analyzeReplacementExecutionPlan(params: {
   );
   return {
     ...normalizedFallbackPlan.decision,
-    scenePlan: normalizedFallbackPlan.scenePlan,
+    scenePlan: {
+      ...normalizedFallbackPlan.scenePlan,
+      productIdentitySummary: productIdentityProfile?.identitySummary || "",
+      productStructureSummary: productIdentityProfile?.structureSummary || "",
+      productStructuralRisks: productIdentityProfile?.structuralRisks || "",
+    },
   };
 }
 
@@ -2537,11 +2889,17 @@ export function buildAgentReplacementPrompt(params: {
         ]
       : [];
   const productAngleLockLines = [
-    "【产品角度锁定规则】最终商品/主体的拍摄角度以最后一张参考图为准，而不是以前面的产品输入图为准；前面的产品图只提供款式、材质、颜色、结构和细节。",
-    "必须逐项对齐最后一张参考图中的产品姿态：朝向、正侧视/三分之四/俯视/平视关系、桌面或面板倾斜方向、可见侧面数量、支架/腿部/把手/转轴位置、主体外轮廓、占比、重心和透视消失方向。",
+    "【产品角度锁定规则】最终商品/主体的拍摄角度、朝向、占比、重心和透视消失方向以最后一张参考图为准；商品身份、外轮廓、腿型、支架拓扑、构件数量和连接方式以前面的产品输入图为准。",
+    "必须对齐最后一张参考图的正侧视/三分之四/俯视/平视关系、桌面或面板倾斜方向和可见侧面数量，但不得照搬旧商品的腿部、横梁、侧框、把手、转轴或内部构件设计。",
     "如果最后一张参考图的产品是侧视或低视角，不允许改成俯视三分之四；如果是俯视三分之四，不允许改成正侧视；不允许镜像、旋转、翻转或把产品重画成另一个角度。",
     "若参考图含功能标签、箭头、尺寸线、编号或引导线，它们指向的实际结构部位必须保持一致，不得因产品转角改变而让标签指向错误位置。",
   ];
+  const productStructureLockLines = buildReplacementProductStructureLockLines({
+    productImageCount: params.productImageCount,
+    identitySummary: params.scenePlan?.productIdentitySummary,
+    structureSummary: params.scenePlan?.productStructureSummary,
+    structuralRisks: params.scenePlan?.productStructuralRisks,
+  });
   const normalizedBasePrompt = String(params.basePrompt || "").trim();
   const promptPackInstructionLines =
     params.modeType === "detail_replacement" &&
@@ -2641,6 +2999,7 @@ export function buildAgentReplacementPrompt(params: {
           ...promptPackInstructionLines,
           ...scenePlanLines,
           ...marketplaceBrandRemovalLines,
+          ...productStructureLockLines,
           ...productAngleLockLines,
           "你现在做的是‘仅替换产品’，不是重建场景，也不是重新设计整张详情图。",
           "忽略用户补充提示词里的场景风格、氛围、空间改造要求；这一次只服务于产品主体替换。",
@@ -2670,6 +3029,7 @@ export function buildAgentReplacementPrompt(params: {
           ...promptPackInstructionLines,
           ...scenePlanLines,
           ...marketplaceBrandRemovalLines,
+          ...productStructureLockLines,
           ...productAngleLockLines,
           "你现在做的是“详情参考图背景/场景图替换”，不是重新设计整张详情图。",
           "【版式锁层规则】把最后一张参考图当成 PSD 模板：文字、标题、编号、卖点标签、按钮、图标、白底/浅色底、留白、分割线、原有圆角照片区域和原有裁切范围都属于锁定版式层，不允许移动、缩放、重排或重新设计；不要把这些版式边界画成新的白色线框、描边或卡片。",
@@ -2785,6 +3145,7 @@ export function buildAgentReplacementPrompt(params: {
     "【图片顺序规则】",
     ...imageOrderLines,
     ...scenePlanLines,
+    ...productStructureLockLines,
     ...productAngleLockLines,
     params.pairedProductIndex !== undefined
       ? `请优先使用第 ${params.pairedProductIndex + 1} 张输入商品图作为本张参考图的一对一替换主体。`

app/(chat)/api/chat/_lib/image-failover.ts

@@ -57,7 +57,21 @@ export function resolveImageModelRuntimeId(
 export function normalizeFailoverErrorMessage(error: unknown): string {
   if (!error) return "";
   if (typeof error === "string") return error;
-  if (error instanceof Error) return error.message || String(error);
+  if (error instanceof Error) {
+    const record = error as Error & {
+      status?: unknown;
+      statusCode?: unknown;
+      httpStatus?: unknown;
+      response?: { status?: unknown };
+    };
+    const status =
+      record.status ??
+      record.statusCode ??
+      record.httpStatus ??
+      record.response?.status;
+    const message = error.message || String(error);
+    return status ? `[HTTP ${String(status)}] ${message}` : message;
+  }
   try {
     return JSON.stringify(error);
   } catch {
@@ -76,6 +90,13 @@ export function shouldCooldownImageFallbackModel(errorMessage: string): boolean
     msg.includes("api key is missing") ||
     msg.includes("invalid api key") ||
     msg.includes("unauthorized") ||
+    /(?:^|\D)401(?:\D|$)/.test(msg) ||
+    msg === "forbidden" ||
+    msg.includes("access forbidden") ||
+    msg.includes("access denied") ||
+    msg.includes("permission denied") ||
+    /(?:^|\D)403(?:\D|$)/.test(msg) ||
+    msg.includes("vip98k task failed") ||
     msg.includes("cannot convert argument to a bytestring") ||
     msg.includes("model maintenance") ||
     msg.includes("maintenance") ||

app/(chat)/api/chat/route.ts

@@ -1,3 +1,5 @@
+import { isExplicitDestructiveIntent } from "@/lib/ai/canvas-agent-runtime/capability-access";
+import { inferVideoTaskRequirements } from "@/lib/ai/canvas-agent-runtime/video-protocol";
 import { createLogger } from "@/lib/observability/logger";
 import { geolocation } from "@vercel/functions";
 import {
@@ -193,6 +195,7 @@ import {
 } from "@/lib/ai/runtime/agent-media-markdown";
 import { extractImageUrlsFromText } from "@/lib/image-url";
 import { saveGeneratedImages } from "@/lib/ai/runtime/generated-image-persistence";
+import { withAuthenticationFailover } from "@/lib/ai/runtime/authentication-failover";
 import {
   recordAiModelHealthFailure,
   recordAiModelHealthSuccess,
@@ -928,6 +931,15 @@ export async function POST(request: Request) {
     const json = await request.json();
     chatApiLogger.info("[Chat API] Received request body:", JSON.stringify(json, null, 2));
     requestBody = postRequestBodySchema.parse(json);
+    // Agent/Auto Agent has one execution owner: the isolated native ZCode entry.
+    // This also upgrades existing browser tabs without routing Claw here.
+    if (requestBody.composerMode === "agent" && requestBody.contextPayload?.source === "canvas" && requestBody.contextPayload.projectId) {
+      const { POST: nativeAgentPost } = await import("@/app/api/canvas/agent-chat/route");
+      return nativeAgentPost(new Request(new URL("/api/canvas/agent-chat", request.url), {
+        method: "POST", headers: request.headers, body: JSON.stringify(json),
+      }));
+    }
+
   } catch (error) {
     chatApiLogger.error("[Chat API] Schema validation failed:", error);
     return new ChatSDKError("bad_request:api").toResponse();
@@ -1222,6 +1234,14 @@ export async function POST(request: Request) {
       }
     }
 
+    if (shouldRunAgentConversation && preferredAgentModelId && !shouldKeepSelectedModel) {
+      const preferred = await getAiModelById({ id: preferredAgentModelId }).catch(() => null);
+      if (!preferred?.isEnabled || preferred.healthStatus === "auto_disabled") {
+        preferredAgentModelId = undefined;
+        configuredAgentConversationModelId = undefined;
+      }
+    }
+
     if (shouldRunAgentConversation && !preferredAgentModelId) {
       const configuredAgentModel = await getAgentAiModelWithProvider().catch((agentModelError) => {
         chatApiLogger.warn("[Chat API] Failed to load configured agent model:", agentModelError);
@@ -1342,6 +1362,7 @@ export async function POST(request: Request) {
     }
 
     const allowAgentVideoGeneration =
+      (contextPayload?.source === "canvas" && inferVideoTaskRequirements(requestTextContent).expectsVideo) ||
       Boolean(requestBody.videoParams) ||
       isVideoProviderType(requestedModelProviderType, requestedModelConfig || undefined);
     let smartAutoWorkflowDecision:
@@ -6054,6 +6075,9 @@ export async function POST(request: Request) {
                     referenceImageUrl: reference.imageUrl,
                     referenceGeometry,
                     scenePlan: replacementExecutionPlan.scenePlan,
+                    preserveReferenceOutsideSubject:
+                      detailReplacementStrategy === "product_only",
+                    preserveReferenceText: true,
                     uploadPrefix: "agent-detail-replacement",
                   });
                   finalImage = {
@@ -6489,9 +6513,20 @@ export async function POST(request: Request) {
               ...(selectedAgentPreset.defaultParams || {}),
               ...(replacementSlot?.defaultParams || {}),
             } as Record<string, any>;
-            const resolvedModelRef =
-              String(selectedChatModel || "").trim() &&
-              String(selectedChatModel || "").trim() !== "auto"
+            const replacementVisionModels = await getEnabledAiModelsWithProvider().catch(
+              (error) => {
+                chatApiLogger.warn("[Chat API] Failed to load configured vision models for replacement analysis:", error);
+                return undefined;
+              },
+            );
+            const resolvedModelRef = isDetailReplacementPreset
+              ? await resolveDirectReplacementModelRef({
+                  selectedChatModel,
+                  finalModelId: presetModelId,
+                  models: replacementVisionModels,
+                })
+              : String(selectedChatModel || "").trim() &&
+                  String(selectedChatModel || "").trim() !== "auto"
                 ? String(selectedChatModel || "").trim()
                 : presetModelId;
             const configuredReplacementAspectRatio =
@@ -6513,12 +6548,6 @@ export async function POST(request: Request) {
                   configuredAspectRatio: configuredReplacementAspectRatio,
                 });
             }
-            const replacementVisionModels = await getEnabledAiModelsWithProvider().catch(
-              (error) => {
-                chatApiLogger.warn("[Chat API] Failed to load configured vision models for replacement analysis:", error);
-                return undefined;
-              },
-            );
             const replacementScenePlanningRuntime =
               await resolveReplacementScenePlanningRuntime({
                 models: replacementVisionModels,
@@ -6943,6 +6972,10 @@ export async function POST(request: Request) {
                       referenceImageUrl: reference.imageUrl,
                       referenceGeometry,
                       scenePlan: replacementExecutionPlan.scenePlan,
+                      preserveReferenceOutsideSubject:
+                        isDetailReplacementPreset &&
+                        detailReplacementStrategy === "product_only",
+                      preserveReferenceText: isDetailReplacementPreset,
                       uploadPrefix: isDetailReplacementPreset
                         ? "agent-detail-replacement"
                         : "agent-sku-replacement",
@@ -8830,7 +8863,7 @@ export async function POST(request: Request) {
       .filter(Boolean)
       .join("\n\n");
 
-    const activeRuntimeModelDescriptor = await resolveAgentModelSlotDescriptor(
+    let activeRuntimeModelDescriptor = await resolveAgentModelSlotDescriptor(
       resolvedRuntimeModelLookupId,
     ).catch(() => null);
     if (shouldRunAgentConversation && activeRuntimeModelDescriptor) {
@@ -9635,6 +9668,11 @@ export async function POST(request: Request) {
         alibabaModelConfig?.fallbackModelId2,
       ].filter(Boolean) as string[];
       const allModels = await getEnabledAiModelsWithProvider();
+      const currentModelEntry = resolveModelEntryByRuntimeModelId(
+        allModels,
+        actualModelId,
+        finalModelId,
+      );
       const fallbackCandidates = buildImageFallbackCandidates(allModels, {
         currentProviderId: alibabaModelConfig?.providerId,
         currentModelId: alibabaModelConfig?.id,
@@ -9880,6 +9918,7 @@ export async function POST(request: Request) {
             
             let imageMarkdown = "";
             let usedModelId = actualModelId;
+            const generationStartedAt = Date.now();
 
             // 🆕 图片生成真正开始时发出标记（用于前端显示占位图）
 	            writeAssistantTextChunk(
@@ -9906,14 +9945,37 @@ export async function POST(request: Request) {
 	            } catch (primaryError) {
 	              chatApiLogger.error("[Chat API] Alibaba primary model failed:", primaryError);
 
+                await recordAiModelHealthFailure({
+                  model: currentModelEntry?.model || alibabaModelConfig,
+                  provider: currentModelEntry?.provider,
+                  error: primaryError,
+                  context: "chat_image_primary",
+                  elapsedMs: Date.now() - generationStartedAt,
+                  metadata: {
+                    runtimeModelId: actualModelId,
+                    finalModelId,
+                    providerType: (languageModel as any).provider,
+                    aspectRatio: effectiveImageGenerationParams.aspectRatio,
+                    imageSize: effectiveImageGenerationParams.imageSize,
+                    imageCount:
+                      effectiveImageGenerationParams.imageCount ||
+                      defaultImageQualityParams.imageCount ||
+                      1,
+                  },
+                }).catch((healthError) => {
+                  chatApiLogger.warn("[Chat API] Record image primary health failure failed:", healthError);
+                });
+
 	              if (!shouldFailoverAiModelError(primaryError)) {
 	                chatApiLogger.info("[Chat API] Alibaba primary error is not eligible for image failover; returning original error.");
 	                throw primaryError;
 	              }
 	              
 	              let fallbackSuccess = false;
+              const triedFallbackModelIds = new Set<string>();
               for (const candidate of fallbackCandidates) {
                 try {
+                  triedFallbackModelIds.add(String(candidate.model.id || ""));
                   chatApiLogger.info(`[Chat API] 🔄 Alibaba fallback model: ${candidate.model.displayName} (${candidate.provider.type})`);
                   const fallbackResult = await generateImageWithFailoverCandidate({
                     candidate,
@@ -9938,6 +10000,22 @@ export async function POST(request: Request) {
                   if (shouldCooldownImageFallbackModel(fallbackErrorMessage)) {
                     setImageFallbackModelCooldown(candidate.model.id, fallbackErrorMessage);
                   }
+                  await recordAiModelHealthFailure({
+                    model: candidate.model,
+                    provider: candidate.provider,
+                    error: fallbackError,
+                    context: "chat_image_fallback",
+                    elapsedMs: Date.now() - generationStartedAt,
+                    metadata: {
+                      primaryModelId: actualModelId,
+                      fallbackModelId: candidate.model.modelId,
+                      providerType: candidate.provider.type,
+                      aspectRatio: effectiveImageGenerationParams.aspectRatio,
+                      imageSize: effectiveImageGenerationParams.imageSize,
+                    },
+                  }).catch((healthError) => {
+                    chatApiLogger.warn("[Chat API] Record image fallback health failure failed:", healthError);
+                  });
                   chatApiLogger.error(`[Chat API] ❌ Alibaba fallback model ${candidate.model.displayName} (${candidate.provider.type}) failed:`, fallbackError);
                 }
               }
@@ -9966,10 +10044,11 @@ export async function POST(request: Request) {
                   currentModelKey: actualModelId,
                   currentProviderId: alibabaModelConfig?.providerId,
                   providerPriority,
-                });
+                }).filter((candidate) => !triedFallbackModelIds.has(String(candidate.model.id || "")));
 
                 for (const candidate of crossProviderCandidates) {
                   try {
+                    triedFallbackModelIds.add(String(candidate.model.id || ""));
                     chatApiLogger.info(`[Chat API] 🔁 Cross-provider failover attempt: ${candidate.model.displayName} (${candidate.provider.type})`);
                     if (
                       candidate.provider.type === "fal-image" &&
@@ -10053,6 +10132,22 @@ export async function POST(request: Request) {
                     if (shouldCooldownImageFallbackModel(crossErrorMessage)) {
                       setImageFallbackModelCooldown(candidate.model.id, crossErrorMessage);
                     }
+                    await recordAiModelHealthFailure({
+                      model: candidate.model,
+                      provider: candidate.provider,
+                      error: crossError,
+                      context: "chat_image_cross_fallback",
+                      elapsedMs: Date.now() - generationStartedAt,
+                      metadata: {
+                        primaryModelId: actualModelId,
+                        fallbackModelId: candidate.model.modelId,
+                        providerType: candidate.provider.type,
+                        aspectRatio: effectiveImageGenerationParams.aspectRatio,
+                        imageSize: effectiveImageGenerationParams.imageSize,
+                      },
+                    }).catch((healthError) => {
+                      chatApiLogger.warn("[Chat API] Record image cross-provider health failure failed:", healthError);
+                    });
                     chatApiLogger.error(`[Chat API] ❌ Cross-provider failover failed: ${candidate.model.displayName} (${candidate.provider.type})`, crossError);
                   }
                 }
@@ -10066,6 +10161,19 @@ export async function POST(request: Request) {
             chatApiLogger.info("[Chat API] Alibaba generated, length:", imageMarkdown.length);
             chatApiLogger.info("[Chat API] Alibaba used model:", usedModelId);
 
+            const usedModelEntry = resolveModelEntryByRuntimeModelId(
+              allModels,
+              usedModelId,
+              usedModelId === actualModelId ? finalModelId : undefined,
+            );
+            await recordAiModelHealthSuccess({
+              model:
+                usedModelEntry?.model ||
+                (usedModelId === actualModelId ? alibabaModelConfig : null),
+            }).catch((healthError) => {
+              chatApiLogger.warn("[Chat API] Record image health success failed:", healthError);
+            });
+
             const usedModelDisplayName =
               resolveModelDisplayNameByModelId(allModels, usedModelId) ||
               alibabaModelConfig?.displayName ||
@@ -11106,7 +11214,7 @@ export async function POST(request: Request) {
             requestHeaders: request.headers,
             requestUrl: request.url,
             defaultModelId: finalModelId,
-            destructiveConfirmed: isCanvasOperationConfirmText(requestTextContent),
+            authorizeDestructive: (nodeIds) => isExplicitDestructiveIntent(requestTextContent) && nodeIds.length > 0 && nodeIds.every((nodeId) => selectedCanvasImageNodeIds.includes(nodeId)),
             callbacks: {
               onClientCommand: (command, capability) => {
                 writeCanvasCapabilityCommandChunk(
@@ -12135,8 +12243,70 @@ export async function POST(request: Request) {
         const shouldDisableSmoothStream =
           resolvedModelSupportsImageGen || isVolcanoVideoModel;
 
+        let activeConversationModel = currentModelConfig;
+        let activeConversationProvider = currentProviderConfig;
+        const recordedAuthFailures = new Set<string>();
+        const recordConversationAuthFailure = async (error: unknown) => {
+          const key = activeConversationModel?.id;
+          if (!key || recordedAuthFailures.has(key)) return;
+          recordedAuthFailures.add(key);
+          recordProviderHealthFailure({
+            providerKey: activeConversationProvider?.id,
+            providerType: activeConversationProvider?.type,
+            error,
+          });
+          await recordAiModelHealthFailure({
+            model: activeConversationModel,
+            provider: activeConversationProvider,
+            error,
+            context: "canvas_agent_conversation_auth",
+          }).catch((healthError) => chatApiLogger.warn("[Chat API] Could not persist model authentication failure:", healthError));
+        };
+        const needsVisionFallback = convertedMessages.some((item: any) =>
+          Array.isArray(item.content) && item.content.some((part: any) =>
+            part.type === "image" || (part.type === "file" && String(part.mediaType || "").startsWith("image/"))
+          )
+        );
+        const streamModel = shouldRunAgentConversation && !shouldKeepSelectedModel &&
+          currentModelConfig?.excludeFromFailover !== true &&
+          !resolvedModelSupportsImageGen && !isVolcanoVideoModel
+          ? withAuthenticationFailover({
+              primary: languageModel as any,
+              onAuthenticationFailure: recordConversationAuthFailure,
+              resolveFallback: async () => {
+                const enabled = await getEnabledAiModelsWithProvider(false);
+                const preferredIds = [currentModelConfig?.fallbackModelId1, currentModelConfig?.fallbackModelId2];
+                const candidates = enabled.filter(({ model, provider }) =>
+                  model.id !== activeConversationModel?.id && model.isEnabled && provider.isEnabled &&
+                  !model.excludeFromFailover && !model.isSubModel && model.healthStatus !== "auto_disabled" &&
+                  !isImageGenerationModelType(provider.type, model) && !isVideoProviderType(provider.type, model) &&
+                  (!needsVisionFallback || model.supportsVision) &&
+                  (isAiModelAgentAuto(model) || preferredIds.includes(model.id)) &&
+                  !shouldAvoidProvider(getProviderHealthSnapshot(provider.id))
+                ).sort((a, b) => {
+                  const rank = (id: string, isDefault: boolean) => {
+                    const index = preferredIds.indexOf(id);
+                    return index >= 0 ? index : isDefault ? 2 : 3;
+                  };
+                  return rank(a.model.id, a.model.isDefault) - rank(b.model.id, b.model.isDefault);
+                });
+                for (const candidate of candidates) {
+                  const fallback = await getLanguageModelById(candidate.model.id);
+                  if (!fallback || typeof fallback === "string") continue;
+                  activeConversationModel = candidate.model;
+                  activeConversationProvider = candidate.provider;
+                  finalModelId = candidate.model.id;
+                  actualModelId = candidate.model.modelId;
+                  activeRuntimeModelDescriptor = await resolveAgentModelSlotDescriptor(candidate.model.id).catch(() => null);
+                  return fallback as any;
+                }
+                return null;
+              },
+            })
+          : languageModel;
         const result = streamText({
-          model: languageModel,
+          model: streamModel,
+          maxRetries: shouldRunAgentConversation ? 0 : undefined,
           system: effectiveConversationSystemPrompt,
           messages: convertedMessages,
           stopWhen: stepCountIs(shouldUseCanvasCapabilityToolLoop ? 8 : 5),

app/(chat)/api/files/direct-upload/route.ts

@@ -13,6 +13,10 @@ import { z } from "zod";
 
 import { auth } from "@/app/(auth)/auth";
 import { upsertMediaAsset } from "@/lib/db/queries";
+import {
+  IMAGE_UPLOAD_MAX_BYTES,
+  IMAGE_UPLOAD_TOO_LARGE_MESSAGE,
+} from "@/lib/image-upload-limits";
 import { createLogger } from "@/lib/observability/logger";
 import {
   buildS3PublicUrl,
@@ -160,7 +164,10 @@ function isAllowedDirectUpload(
   );
 }
 
-function getPurposeMaxBytes(purpose?: string) {
+function getPurposeMaxBytes(purpose?: string, contentType?: string) {
+  if (String(contentType || "").toLowerCase().startsWith("image/")) {
+    return IMAGE_UPLOAD_MAX_BYTES;
+  }
   if (purpose === OPENCLAW_CHAT_VIDEO_UPLOAD_PURPOSE) {
     return OPENCLAW_CHAT_VIDEO_MAX_BYTES;
   }
@@ -281,9 +288,14 @@ export async function POST(request: Request) {
           { status: 400 }
         );
       }
-      if (payload.size > getPurposeMaxBytes(payload.purpose)) {
+      const maxBytes = getPurposeMaxBytes(payload.purpose, contentType);
+      if (payload.size > maxBytes) {
         return NextResponse.json(
-          { error: `文件不能超过 ${getPurposeMaxBytes(payload.purpose) / 1024 / 1024}MB` },
+          {
+            error: contentType.startsWith("image/")
+              ? IMAGE_UPLOAD_TOO_LARGE_MESSAGE
+              : `文件不能超过 ${maxBytes / 1024 / 1024}MB`,
+          },
           { status: 413 }
         );
       }
@@ -390,8 +402,15 @@ export async function POST(request: Request) {
       if (!isAllowedDirectUpload(contentType, payload.purpose, payload.filename)) {
         return NextResponse.json({ error: "不支持续传该文件类型" }, { status: 400 });
       }
-      if (payload.size > getPurposeMaxBytes(payload.purpose)) {
-        return NextResponse.json({ error: "文件超过允许的上传大小" }, { status: 413 });
+      if (payload.size > getPurposeMaxBytes(payload.purpose, contentType)) {
+        return NextResponse.json(
+          {
+            error: contentType.startsWith("image/")
+              ? IMAGE_UPLOAD_TOO_LARGE_MESSAGE
+              : "文件超过允许的上传大小",
+          },
+          { status: 413 }
+        );
       }
       const expectedPartSize = computePartSize(payload.size);
       if (payload.partSize !== expectedPartSize) {
@@ -505,8 +524,15 @@ export async function POST(request: Request) {
         { status: 400 }
       );
     }
-    if (payload.size > getPurposeMaxBytes(payload.purpose)) {
-      return NextResponse.json({ error: "文件超过允许的上传大小" }, { status: 413 });
+    if (payload.size > getPurposeMaxBytes(payload.purpose, contentType)) {
+      return NextResponse.json(
+        {
+          error: contentType.startsWith("image/")
+            ? IMAGE_UPLOAD_TOO_LARGE_MESSAGE
+            : "文件超过允许的上传大小",
+        },
+        { status: 413 }
+      );
     }
 
     if (payload.uploadId) {

app/(chat)/api/files/upload/route.ts

@@ -1,5 +1,9 @@
 import { NextResponse } from "next/server";
 import { z } from "zod";
+import {
+  IMAGE_UPLOAD_TOO_LARGE_MESSAGE,
+  isImageUploadTooLarge,
+} from "@/lib/image-upload-limits";
 
 import { auth } from "@/app/(auth)/auth";
 import { createAgentWorkflowPreviewImageBuffer } from "@/lib/agents/workflow-preview-images";
@@ -260,6 +264,12 @@ export async function POST(request: Request) {
     const clientUploadId =
       String(formData.get("clientUploadId") || "").trim() || null;
     const isSvgUpload = contentType === "image/svg+xml";
+    if (contentType.startsWith("image/") && isImageUploadTooLarge(file.size)) {
+      return NextResponse.json(
+        { error: IMAGE_UPLOAD_TOO_LARGE_MESSAGE },
+        { status: 413 }
+      );
+    }
     if (
       isSvgUpload &&
       (uploadPurpose !== "admin-svg-icon" || !isSiteAdminType(session.user.type))

app/(chat)/flow-board/layout.tsx

@@ -3,10 +3,5 @@ export default function FlowBoardLayout({
 }: {
   children: React.ReactNode;
 }) {
-  return (
-    <>
-      <link href="/vendor/drawnix.css" rel="stylesheet" />
-      {children}
-    </>
-  );
+  return <>{children}</>;
 }

app/(chat)/layout.tsx

@@ -1,5 +1,6 @@
 import { Suspense } from "react";
 import { ChatShell } from "@/components/chat-shell";
+import { CanvasLogoLoadingView } from "@/components/canvas/canvas-logo-loading";
 import { DataStreamProvider } from "@/components/data-stream-provider";
 import { auth } from "../(auth)/auth";
 import {
@@ -8,10 +9,14 @@ import {
   getTutorialVideos,
 } from "@/lib/db/queries";
 
+export const dynamic = "force-dynamic";
+
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <DataStreamProvider>
-      <Suspense fallback={<div className="flex h-dvh" />}>
+      <Suspense
+        fallback={<CanvasLogoLoadingView label="正在加载页面..." />}
+      >
         <SidebarWrapper>{children}</SidebarWrapper>
       </Suspense>
     </DataStreamProvider>

app/api/admin/bananaimage-models/route.ts

@@ -94,6 +94,8 @@ export async function POST(request: Request) {
             providerId,
             modelId: preset.modelId,
             ...values,
+            isEnabled: true,
+            isHidden: false,
             isDefault: false,
             isSubModel: false,
             parentModelId: null,

app/api/admin/snapgen-image-models/route.ts

@@ -76,8 +76,6 @@ export async function POST(request: Request) {
               description: preset.description,
               supportsVision: preset.supportsVision,
               supportsImageGen: preset.supportsImageGen,
-              isEnabled: true,
-              isHidden: false,
               sortOrder: preset.sortOrder,
               capabilities: preset.capabilities || null,
               defaultParams: preset.defaultParams || null,

app/api/canvas/[id]/image-archives/route.ts

@@ -0,0 +1,65 @@
+import { NextRequest, NextResponse } from "next/server";
+import { and, eq, inArray, sql } from "drizzle-orm";
+import { auth } from "@/app/(auth)/auth";
+import { db } from "@/lib/db";
+import { canvasProject, imageArchiveTask, generatedImage, canvasImageTask } from "@/lib/db/schema";
+import { imageArchiveSourceKey } from "@/lib/storage/image-archive-db";
+import { isGeneratedImageSource } from "@/lib/storage/image-archive-urls";
+import { scheduleImageArchiveWorker } from "@/lib/storage/image-archive-worker";
+
+export async function POST(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  const session = await auth();
+  if (!session?.user?.id) return NextResponse.json({ error: "未登录" }, { status: 401 });
+  const { id } = await params;
+  const [project] = await db
+    .select({ id: canvasProject.id })
+    .from(canvasProject)
+    .where(and(eq(canvasProject.id, id), eq(canvasProject.userId, session.user.id)))
+    .limit(1);
+  if (!project) return NextResponse.json({ error: "画布不存在" }, { status: 404 });
+  const body = await request.json();
+  if (
+    !Array.isArray(body.urls) ||
+    body.urls.length > 100 ||
+    body.urls.some((url: unknown) => typeof url !== "string" || !isGeneratedImageSource(url))
+  ) {
+    return NextResponse.json({ error: "图片地址格式错误" }, { status: 400 });
+  }
+  const urls: string[] = [...new Set<string>(body.urls)];
+  if (!urls.length) return NextResponse.json({ replacements: {}, pending: [] });
+  const source = imageArchiveTask.sourceUrl;
+  const rows = await db
+    .select({
+      sourceUrl: imageArchiveTask.sourceUrl,
+      targetUrl: imageArchiveTask.targetUrl,
+      status: imageArchiveTask.status,
+    })
+    .from(imageArchiveTask)
+    .where(
+      and(
+        inArray(imageArchiveTask.sourceUrl, urls.map(imageArchiveSourceKey)),
+        sql`(
+        exists (select 1 from ${generatedImage} where ${generatedImage.userId} = ${session.user.id}
+          and (${generatedImage.originalUrl} = ${source} or ${generatedImage.thumbnailUrl} = ${source}
+            or ${generatedImage.originalUrl} = ${imageArchiveTask.targetUrl} or ${generatedImage.thumbnailUrl} = ${imageArchiveTask.targetUrl}))
+        or exists (select 1 from ${canvasImageTask} where ${canvasImageTask.userId} = ${session.user.id}
+          and (position(${source} in ${canvasImageTask.result}::text) > 0 or position(${imageArchiveTask.targetUrl} in ${canvasImageTask.result}::text) > 0))
+        or exists (select 1 from ${canvasProject} where ${canvasProject.id} = ${id} and ${canvasProject.userId} = ${session.user.id}
+          and (position(${source} in ${canvasProject.canvasData}::text) > 0 or position(${imageArchiveTask.targetUrl} in ${canvasProject.canvasData}::text) > 0))
+      )`,
+      ),
+    );
+  const byKey = new Map(rows.map((row) => [row.sourceUrl, row]));
+  const replacements: Record<string, string> = {};
+  const pending: string[] = [];
+  for (const url of urls) {
+    const row = byKey.get(imageArchiveSourceKey(url));
+    if (row?.targetUrl) replacements[url] = row.targetUrl;
+    else if (row && row.status !== "abandoned") pending.push(url);
+  }
+  if (rows.some((row) => row.status === "pending")) scheduleImageArchiveWorker(true);
+  return NextResponse.json(
+    { replacements, pending },
+    { headers: { "Cache-Control": "private, no-store" } },
+  );
+}

app/api/canvas/[id]/route.ts

@@ -3,6 +3,7 @@ import { auth } from '@/app/(auth)/auth';
 import { db } from '@/lib/db';
 import { canvasProject } from '@/lib/db/schema';
 import { syncCanvasNodesForProject } from '@/lib/db/queries';
+import { resolveArchivedImageUrls } from '@/lib/storage/image-archive-db';
 import { eq, and } from 'drizzle-orm';
 import {
   buildStaleCanvasSaveConflictPayload,
@@ -119,7 +120,8 @@ export async function PUT(
       return NextResponse.json({ success: false, error: '未登录' }, { status: 401 });
     }
 
-    const { title, description, thumbnail, canvasData } = body;
+    const { title, description, canvasData } = body;
+    const thumbnail = await resolveArchivedImageUrls(body.thumbnail);
     const baseCanvasRevision = body?.baseCanvasUpdatedAt || body?.baseCanvasRevision;
     const workspaceType =
       body && Object.prototype.hasOwnProperty.call(body, "workspaceType")

app/api/canvas/agent-capabilities/route.ts

@@ -0,0 +1,40 @@
+import { PROJECT_AGENT_OPERATIONS, projectOperationAuthorized } from "@/lib/ai/canvas-agent-runtime/project-operation-catalog";
+import { NextResponse } from "next/server";
+import { z } from "zod";
+import { and, eq } from "drizzle-orm";
+import { auth } from "@/app/(auth)/auth";
+import { db } from "@/lib/db";
+import { canvasProject } from "@/lib/db/schema";
+import { getSystemSetting } from "@/lib/db/queries";
+import {
+  normalizeVideoCanvasFunctionConfig,
+  VIDEO_CANVAS_FUNCTION_CONFIG_KEY,
+} from "@/lib/video-canvas/config";
+import { getCanvasAgentAccessManifest } from "@/lib/ai/canvas-agent-runtime/capability-access";
+export const dynamic = "force-dynamic";
+export async function GET(request: Request) {
+  const session = await auth();
+  if (!session?.user?.id) return NextResponse.json({ error: "未登录" }, { status: 401 });
+  const parsed = z.string().uuid().safeParse(new URL(request.url).searchParams.get("projectId"));
+  if (!parsed.success) return NextResponse.json({ error: "画布编号无效" }, { status: 400 });
+  const [project] = await db
+    .select({ id: canvasProject.id, workspace: canvasProject.workspaceType })
+    .from(canvasProject)
+    .where(and(eq(canvasProject.id, parsed.data), eq(canvasProject.userId, session.user.id)))
+    .limit(1);
+  if (!project) return NextResponse.json({ error: "画布不存在" }, { status: 404 });
+  const config = normalizeVideoCanvasFunctionConfig(
+    (await getSystemSetting({ key: VIDEO_CANVAS_FUNCTION_CONFIG_KEY }))?.value,
+  );
+  return NextResponse.json(
+    {
+      workspace: project.workspace,
+      projectServices: PROJECT_AGENT_OPERATIONS.map(item => ({ ...item, authorized: projectOperationAuthorized(item) })),
+      utilityTools: ["getWeather", "createDocument", "updateDocument", "requestSuggestions", "loadProjectSkill"],
+      capabilities: getCanvasAgentAccessManifest(config).filter(
+        (item) => item.workspace === (project.workspace === "video" ? "video" : "canvas"),
+      ),
+    },
+    { headers: { "Cache-Control": "private, no-store" } },
+  );
+}

app/api/canvas/agent-chat/route.ts

@@ -0,0 +1,453 @@
+import { registerProjectAgentTools } from "@/lib/ai/canvas-agent-runtime/project-tools";
+import { isZcodeWorkspaceAuthorized } from "@/lib/ai/canvas-agent-runtime/authorization";
+import {
+  createUIMessageStream,
+  createUIMessageStreamResponse,
+  generateText,
+} from "ai";
+import { after, NextResponse } from "next/server";
+import { z } from "zod";
+import { db } from "@/lib/db";
+import { siteSettings, canvasProject } from "@/lib/db/schema";
+import { eq } from "drizzle-orm";
+import { auth } from "@/app/(auth)/auth";
+import { postRequestBodySchema } from "@/app/(chat)/api/chat/schema";
+import { entitlementsByUserType } from "@/lib/ai/entitlements";
+import { getLanguageModelById } from "@/lib/ai/dynamic-provider";
+import {
+  getAgentAiModelWithProvider,
+  getAccessibleAgentPresetById,
+  getMultimodalAiModelsWithProvider,
+  getChatById,
+  getMessagesByChatId,
+  getMessageCountByUserId,
+  getSiteSettings,
+  saveChat,
+  saveMessages,
+} from "@/lib/db/queries";
+import { runZcodeCanvasTask } from "@/lib/ai/zcode-agent/task";
+import { createZcodeModelGateway } from "@/lib/ai/zcode-agent/model-gateway";
+import { newAgentRunSnapshot, publicAgentError } from "@/lib/ai/canvas-agent-runtime/protocol";
+import { shouldUseCanvasAgentRuntime } from "@/lib/ai/canvas-agent-runtime/routing";
+import {
+  acquireAgentRun,
+  agentRunView,
+  AgentRunError,
+  checkpointAgentRun,
+  consumeAgentRunInputs,
+  heartbeatAgentRun,
+} from "@/lib/ai/canvas-agent-runtime/store";
+import { readOwnedCanvas } from "@/lib/ai/canvas-agent-runtime/canvas";
+import { buildCanvasRuntimeTools } from "@/lib/ai/canvas-agent-runtime/tools";
+import { canvasRuntimeSystemPrompt } from "@/lib/ai/canvas-agent-runtime/prompt";
+import { verifyCanvasAgentResults } from "@/lib/ai/canvas-agent-runtime/review";
+import { inferCanvasTaskRequirements } from "@/lib/ai/canvas-agent-runtime/requirements";
+import {
+  resolveRuntimeConversationSources,
+  persistRuntimeConversationResults,
+} from "@/lib/ai/canvas-agent-runtime/conversation";
+import { getCanvasAgentFeatureFlagsFromSystemSettings } from "@/lib/canvas/agent-feature-settings";
+import { canApplyCanvasAgentMutations } from "@/lib/canvas/agent-feature-flags";
+
+import {
+  videoAgentSettingsSchema,
+  inferVideoTaskRequirements,
+  videoNodeUrl,
+  videoRuntimeSystemPrompt,
+} from "@/lib/ai/canvas-agent-runtime/video-protocol";
+import { readOwnedVideoCanvas } from "@/lib/ai/canvas-agent-runtime/video-store";
+import {
+  buildVideoRuntimeTools,
+  createVideoRuntimePorts,
+} from "@/lib/ai/canvas-agent-runtime/video-tools";
+import { probeVideoMetadata } from "@/lib/ai/canvas-agent-runtime/video-probe";
+import { verifyVideoAgentResults } from "@/lib/ai/canvas-agent-runtime/video-review";
+
+export const runtime = "nodejs";
+export const maxDuration = 1200;
+const requestSchema = postRequestBodySchema.extend({
+  resumeRunId: z.string().uuid().optional(),
+  workspaceVariant: z.enum(["canvas", "video"]).default("canvas"),
+  videoAgentSettings: videoAgentSettingsSchema.optional(),
+});
+export async function POST(request: Request) {
+  const session = await auth();
+  if (!session?.user?.id) return NextResponse.json({ error: "未登录" }, { status: 401 });
+  try {
+    const body = requestSchema.parse(await request.json());
+    if (!shouldUseCanvasAgentRuntime(body))
+      throw new AgentRunError("此请求不属于画布 Agent 任务", 400);
+    const projectId = body.contextPayload!.projectId!;
+    const [ownedProject] = await db.select({ userId: canvasProject.userId, workspaceType: canvasProject.workspaceType })
+      .from(canvasProject).where(eq(canvasProject.id, projectId)).limit(1);
+    if (!ownedProject || ownedProject.userId !== session.user.id) throw new AgentRunError("画布不存在", 404);
+    if (!isZcodeWorkspaceAuthorized(ownedProject.workspaceType)) throw new AgentRunError("视频画布暂未授权给 ZCode Agent，请使用手工功能。", 403);
+    const isVideo = ownedProject.workspaceType === "video";
+    const preset = body.agentPresetId ? await getAccessibleAgentPresetById({ id: body.agentPresetId, userId: session.user.id }) : null;
+    if (preset && String(preset.type) === "video") throw new AgentRunError("视频技能暂未授权给 ZCode Agent", 403);
+    if (body.agentPresetId && (!preset || preset.status !== "active")) throw new AgentRunError("此 Agent 预设不可用", 403);
+    const objective = body.message.parts
+      .filter((part) => part.type === "text")
+      .map((part) => part.text)
+      .join("\n")
+      .trim();
+    if (!objective) throw new AgentRunError("请描述需要完成的创作任务", 400);
+    const settings = await getSiteSettings();
+    if (
+      !settings.agentEnabled ||
+      !canApplyCanvasAgentMutations(await getCanvasAgentFeatureFlagsFromSystemSettings())
+    ) {
+      throw new AgentRunError("管理员尚未开启画布 Agent 操作", 403);
+    }
+    const [usageSettings] = await db.select().from(siteSettings).limit(1);
+    if (usageSettings?.usageTimeEnabled) {
+      const time = new Intl.DateTimeFormat("en-GB", {
+        timeZone: "Asia/Shanghai",
+        hour: "2-digit",
+        minute: "2-digit",
+        hourCycle: "h23",
+      }).format(new Date());
+      if (
+        time < (usageSettings.usageTimeStart || "08:00") ||
+        time > (usageSettings.usageTimeEnd || "20:00")
+      )
+        throw new AgentRunError(usageSettings.usageTimeMessage || "当前不在系统使用时间段内", 403);
+    }
+    const count = await getMessageCountByUserId({ id: session.user.id, differenceInHours: 24 });
+    if (count > entitlementsByUserType[session.user.type].maxMessagesPerDay)
+      throw new AgentRunError("今日对话次数已达到限额", 429);
+    const imageCanvas = isVideo ? null : await readOwnedCanvas(session.user.id, projectId);
+    if (imageCanvas?.project.workspaceType === "video")
+      throw new AgentRunError("请使用视频画布 Agent 入口", 400);
+    const videoCanvas = isVideo ? await readOwnedVideoCanvas(session.user.id, projectId) : null;
+    const nodes = imageCanvas?.nodes || [];
+    const availableIds = isVideo
+      ? videoCanvas!.nodes.map((node) => node.id)
+      : nodes.map((node) => node.id);
+    const selectedNodeIds = body.contextPayload?.selectedNodeIds || [];
+    if (selectedNodeIds.some((id) => !availableIds.includes(id))) {
+      throw new AgentRunError("选中图片尚未保存到画布，请等待保存完成后重试。");
+    }
+    const existingChat = await getChatById({ id: body.id });
+    if (existingChat && existingChat.userId !== session.user.id)
+      throw new AgentRunError("对话不存在", 404);
+    if (!existingChat)
+      await saveChat({
+        id: body.id,
+        userId: session.user.id,
+        title: objective.slice(0, 80),
+        visibility: "private",
+      });
+    const conversation = isVideo
+      ? {
+          sourceNodeIds: selectedNodeIds,
+          targetReason: "video-selected-nodes",
+          previousContext: null,
+        }
+      : await resolveRuntimeConversationSources({
+          userId: session.user.id,
+          chatId: body.id,
+          projectId,
+          text: objective,
+          parts: body.message.parts,
+          nodes,
+          selectedNodeIds,
+        });
+    const configured = await getAgentAiModelWithProvider();
+    if (!configured) throw new AgentRunError("请先在后台配置 Agent 对话模型", 503);
+    const model = await getLanguageModelById(configured.model.id);
+    if (!model) throw new AgentRunError("Agent 模型暂不可用", 503);
+    const visionEntry = configured.model.supportsVision
+      ? configured
+      : (await getMultimodalAiModelsWithProvider()).find((entry) => entry.model.supportsVision);
+    const visionModel = visionEntry ? await getLanguageModelById(visionEntry.model.id) : null;
+    const assistantMessageId = crypto.randomUUID();
+    const previousVideoMessages =
+      existingChat
+        ? (await getMessagesByChatId({ id: body.id })).slice(-6).map((message) => ({
+            role: message.role as "user" | "assistant",
+            content: (message.parts as Array<{ type: string; text?: string }>)
+              .filter((part) => part.type === "text")
+              .map((part) => part.text || "")
+              .join("\n")
+              .slice(0, 4000),
+          }))
+        : [];
+    const initialSnapshot = newAgentRunSnapshot(objective, [
+      ...previousVideoMessages,
+      { role: "user", content: objective },
+    ]);
+    initialSnapshot.workspace = isVideo ? "video" : "canvas";
+    if (isVideo) {
+      initialSnapshot.videoRequirements = inferVideoTaskRequirements(objective);
+      initialSnapshot.videoSettings = videoAgentSettingsSchema.parse({
+        ...body.videoAgentSettings,
+        ...(initialSnapshot.videoRequirements.duration
+          ? { duration: initialSnapshot.videoRequirements.duration }
+          : {}),
+        ...(initialSnapshot.videoRequirements.ratio
+          ? { ratio: initialSnapshot.videoRequirements.ratio }
+          : {}),
+      });
+    }
+    initialSnapshot.sourceNodeIds = conversation.sourceNodeIds;
+    initialSnapshot.requirements = {
+      ...inferCanvasTaskRequirements(objective, initialSnapshot.sourceNodeIds.length),
+      sourceCount: initialSnapshot.sourceNodeIds.length,
+    };
+    const run = await acquireAgentRun({
+      id: body.message.id,
+      userId: session.user.id,
+      projectId,
+      chatId: body.id,
+      assistantMessageId,
+      resumeRunId: body.resumeRunId,
+      snapshot: initialSnapshot,
+    });
+    const snapshot = run.snapshot;
+    const taskSourceNodeIds = snapshot.sourceNodeIds ?? selectedNodeIds;
+    const context = {
+      recentConversation: previousVideoMessages,
+      preset: preset ? { name: preset.name, type: preset.type, promptTemplate: preset.promptTemplate, defaultModelId: preset.defaultModelId, defaultParams: preset.defaultParams, slots: preset.slots.map(slot => ({ title: slot.title, promptTemplate: slot.promptTemplate, defaultParams: slot.defaultParams })) } : null,
+      videoSettings: snapshot.videoSettings,
+      selectedNodeIds: taskSourceNodeIds,
+      nodes: nodes
+        .filter((node) => taskSourceNodeIds.includes(node.id))
+        .map((node) => ({
+          id: node.id,
+          type: node.type,
+          position: node.position,
+          size: node.size,
+          title: node.data.title,
+        })),
+      skillInstructions: body.hiddenPrompt || undefined,
+      imageParameters: body.imageParams,
+      targetReason: conversation.targetReason,
+      previousConversationContext: conversation.previousContext,
+    };
+    await saveMessages({
+      messages: [
+        {
+          id: body.message.id,
+          chatId: body.id,
+          role: "user",
+          parts: body.message.parts,
+          attachments: [],
+          createdAt: new Date(),
+          videoStorageStatus: null,
+          temporaryVideoUrl: null,
+          permanentVideoUrl: null,
+          archivedAt: null,
+          videoMetadata: null,
+        },
+      ],
+    });
+    let archiveVideoResults: (() => Promise<void>) | undefined;
+    const stream = createUIMessageStream({
+      execute: async ({ writer }) => {
+        const emit = (type: string, data: unknown) => writer.write({ type, data } as never);
+        let cancelled = false;
+        let leaseLost = false;
+        let activeModelController: AbortController | null = null;
+        const heartbeat = setInterval(() => {
+          void heartbeatAgentRun(run)
+            .then((current) => {
+              if (!current) leaseLost = true;
+              if (current?.cancelRequested) cancelled = true;
+              if (cancelled || leaseLost) activeModelController?.abort();
+            })
+            .catch(() => {
+              leaseLost = true;
+              activeModelController?.abort();
+            });
+          emit("data-keepalive", { label: "canvas-agent-runtime", ts: Date.now() });
+        }, 10_000);
+        const textId = crypto.randomUUID();
+        writer.write({ type: "start", messageId: assistantMessageId });
+        writer.write({ type: "text-start", id: textId });
+        writer.write({
+          type: "text-delta",
+          id: textId,
+          delta: isVideo ? "正在按步骤处理你的视频任务。\n\n" : "正在按步骤处理你的图片任务。\n\n",
+        });
+        try {
+          const videoPorts = isVideo
+            ? await createVideoRuntimePorts({
+                userId: session.user.id,
+                chatId: body.id,
+                projectId,
+                runId: run.id,
+                assistantMessageId,
+                request,
+                snapshot,
+                emit,
+              })
+            : null;
+          archiveVideoResults = videoPorts?.archiveResults;
+          const tools = isVideo
+            ? buildVideoRuntimeTools({
+                runId: run.id,
+                projectId,
+                selectedNodeIds,
+                snapshot,
+                ports: videoPorts!,
+              })
+            : await buildCanvasRuntimeTools({
+                userId: session.user.id,
+                chatId: body.id,
+                projectId,
+                runId: run.id,
+                assistantMessageId,
+                selectedNodeIds: taskSourceNodeIds,
+                request,
+                model: visionModel || model,
+                supportsVision: Boolean(visionModel),
+                imageSize: body.imageParams?.imageSize,
+                preferredModelId: preset?.type === "image" ? preset.defaultModelId || undefined : undefined,
+                operationSelectedNodeIds: selectedNodeIds,
+                objective: [snapshot.objective, ...snapshot.inputs.map((input) => input.text)].join(
+                  "\n",
+                ),
+                emit,
+              });
+          await registerProjectAgentTools({ session, projectId, request, objective: snapshot.objective,
+            definitions: tools.definitions, executable: tools.executable, emit });
+          const gateway = await createZcodeModelGateway(configured);
+          activeModelController = new AbortController();
+          const status = await runZcodeCanvasTask({
+            runId: run.id, snapshot, definitions: tools.definitions,
+            instructions: (isVideo ? videoRuntimeSystemPrompt : canvasRuntimeSystemPrompt)(snapshot.objective, snapshot.summary, snapshot.inputs.map(input => input.text), context),
+            context, gateway, signal: activeModelController.signal,
+            tools: tools.executable,
+            checkpoint: async (state, stateStatus) => {
+              if (leaseLost) throw new AgentRunError("任务执行已中断");
+              const saved = await checkpointAgentRun(run, state, stateStatus);
+              cancelled ||= saved.cancelRequested;
+              emit("data-canvasAgentRun", agentRunView(saved));
+            },
+            consumeInputs: async (state) => {
+              if (leaseLost) throw new AgentRunError("任务执行已中断");
+              const control = await consumeAgentRunInputs(run, state);
+              cancelled ||= control.cancelled;
+              return { cancelled };
+            },
+            isCancelled: async () => {
+              const current = await heartbeatAgentRun(run);
+              if (!current) throw new AgentRunError("任务执行已中断");
+              cancelled ||= current.cancelRequested;
+              return cancelled;
+            },
+            verify: async (state) =>
+              isVideo
+                ? verifyVideoAgentResults({
+                    snapshot: state,
+                    nodes: (await readOwnedVideoCanvas(session.user.id, projectId)).nodes,
+                    inspect: async (node, requirements) => {
+                      const metadata = await probeVideoMetadata(videoNodeUrl(node));
+                      const report = await videoPorts!.analyze({
+                        mode: "video-analysis",
+                        prompt: `请基于真实抽帧画面检查主体、场景、镜头连贯性，说明不确定内容。用户要求：${requirements}`,
+                        imageUrls: [],
+                        videoUrls: [videoNodeUrl(node)],
+                      });
+                      const verdict = await generateText({
+                        model,
+                        system:
+                          '你是视频验收员。依据实际抽帧分析判断是否满足用户要求；不能从文件名或提示词判断。若报告无法读取真实帧，必须不通过。抽帧只能检查画面，不能证明音频、精确时长或完整运动，涉及这些要求无法确认时说明需要人工检查。仅返回 JSON {"passed":boolean,"issues":string[]}。',
+                        prompt: JSON.stringify({ requirements, report }),
+                        maxOutputTokens: 1200,
+                        maxRetries: 0,
+                        abortSignal: AbortSignal.timeout(60_000),
+                      });
+                      state.inputTokens += verdict.usage.inputTokens || 0;
+                      state.outputTokens += verdict.usage.outputTokens || 0;
+                      const match = verdict.text.match(/\{[\s\S]*\}/);
+                      if (!match) throw new Error("视频检查未返回有效结果");
+                      return {
+                        ...z
+                          .object({ passed: z.boolean(), issues: z.array(z.string()).max(12) })
+                          .parse(JSON.parse(match[0])),
+                        ...metadata,
+                      };
+                    },
+                  })
+                : verifyCanvasAgentResults({
+                    snapshot: state,
+                    userId: session.user.id,
+                    projectId,
+                    model: visionModel || model,
+                    supportsVision: Boolean(visionModel),
+                  }),
+          });
+          const finalText = snapshot.message;
+          if (!isVideo)
+            await persistRuntimeConversationResults({
+              userId: session.user.id,
+              chatId: body.id,
+              projectId,
+              assistantMessageId,
+              snapshot,
+            }).catch((error) => {
+              console.warn("[Canvas Agent] Conversation memory update failed", {
+                runId: run.id,
+                error: publicAgentError(error),
+              });
+            });
+          await saveMessages({
+            messages: [
+              {
+                id: assistantMessageId,
+                chatId: body.id,
+                role: "assistant",
+                parts: [{ type: "text", text: finalText }],
+                attachments: [],
+                createdAt: new Date(),
+                videoStorageStatus: null,
+                temporaryVideoUrl: null,
+                permanentVideoUrl: null,
+                archivedAt: null,
+                videoMetadata: null,
+              },
+            ],
+          });
+          writer.write({ type: "text-delta", id: textId, delta: finalText });
+        } catch (error) {
+          const text = publicAgentError(error);
+          await checkpointAgentRun(run, { ...snapshot, message: text }, "needs_review").catch(
+            () => undefined,
+          );
+          writer.write({ type: "text-delta", id: textId, delta: text });
+        } finally {
+          clearInterval(heartbeat);
+          writer.write({ type: "text-end", id: textId });
+          writer.write({ type: "finish" });
+        }
+      },
+    });
+    // Browser disconnection does not cancel paid image work. Keep consuming on the server.
+    const [client, background] = stream.tee();
+    after(async () => {
+      const reader = background.getReader();
+      try {
+        while (!(await reader.read()).done) {
+          /* Drain the server branch. */
+        }
+      } finally {
+        reader.releaseLock();
+        await archiveVideoResults?.();
+      }
+    });
+    return createUIMessageStreamResponse({
+      stream: client,
+      headers: { "Cache-Control": "no-store", "X-Accel-Buffering": "no" },
+    });
+  } catch (error) {
+    return NextResponse.json(
+      { error: publicAgentError(error), message: publicAgentError(error) },
+      {
+        status:
+          error instanceof AgentRunError ? error.status : error instanceof z.ZodError ? 400 : 503,
+      },
+    );
+  }
+}

app/api/canvas/agent-runs/route.ts

@@ -0,0 +1,65 @@
+import { NextResponse } from "next/server";
+import { z } from "zod";
+import { auth } from "@/app/(auth)/auth";
+import {
+  AgentRunError,
+  agentRunView,
+  assertAgentRunOwnership,
+  controlAgentRun,
+  getAgentRun,
+} from "@/lib/ai/canvas-agent-runtime/store";
+import { publicAgentError } from "@/lib/ai/canvas-agent-runtime/protocol";
+
+export const dynamic = "force-dynamic";
+const scope = z.object({
+  chatId: z.string().uuid(),
+  projectId: z.string().uuid(),
+  runId: z.string().uuid().optional(),
+});
+const control = scope
+  .extend({
+    runId: z.string().uuid(),
+    action: z.enum(["steer", "cancel"]),
+    inputId: z.string().uuid().optional(),
+    text: z.string().trim().min(1).max(2000).optional(),
+  })
+  .refine(
+    (input) => input.action !== "steer" || Boolean(input.inputId && input.text),
+    "补充要求缺少内容或请求号",
+  );
+
+export async function GET(request: Request) {
+  const session = await auth();
+  if (!session?.user?.id) return NextResponse.json({ error: "未登录" }, { status: 401 });
+  try {
+    const input = scope.parse(Object.fromEntries(new URL(request.url).searchParams));
+    await assertAgentRunOwnership(session.user.id, input.projectId, input.chatId);
+    const run = await getAgentRun(session.user.id, input.chatId, input.projectId, input.runId);
+    return NextResponse.json(
+      { run: run ? agentRunView(run) : null },
+      { headers: { "Cache-Control": "private, no-store" } },
+    );
+  } catch (error) {
+    return failure(error);
+  }
+}
+export async function POST(request: Request) {
+  const session = await auth();
+  if (!session?.user?.id) return NextResponse.json({ error: "未登录" }, { status: 401 });
+  try {
+    const input = control.parse(await request.json());
+    await assertAgentRunOwnership(session.user.id, input.projectId, input.chatId);
+    return NextResponse.json({ run: await controlAgentRun({ ...input, userId: session.user.id }) });
+  } catch (error) {
+    return failure(error);
+  }
+}
+function failure(error: unknown) {
+  return NextResponse.json(
+    { error: publicAgentError(error) },
+    {
+      status:
+        error instanceof AgentRunError ? error.status : error instanceof z.ZodError ? 400 : 503,
+    },
+  );
+}

app/api/canvas/clawd-chat/artifact/route.ts

@@ -0,0 +1,266 @@
+import { lookup } from "node:dns/promises";
+import { isIP } from "node:net";
+import { NextResponse } from "next/server";
+import { z } from "zod";
+import { auth } from "@/app/(auth)/auth";
+import { getChatById, getMessageById, getSystemSetting } from "@/lib/db/queries";
+import {
+  normalizeOpenClawChatConfig,
+  OPENCLAW_CHAT_CONFIG_KEY,
+} from "@/lib/openclaw-chat/config";
+import { normalizeClawdTaskMetadata } from "@/lib/openclaw-chat/task-state";
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+export const maxDuration = 120;
+
+const querySchema = z.object({
+  chatId: z.string().uuid(),
+  messageId: z.string().uuid(),
+  index: z.coerce.number().int().min(0).max(127),
+  download: z.enum(["0", "1"]).optional().default("0"),
+});
+
+const MAX_REDIRECTS = 4;
+const RESPONSE_HEADERS = [
+  "accept-ranges",
+  "content-length",
+  "content-range",
+  "etag",
+  "last-modified",
+] as const;
+
+function isPrivateIpv4(address: string) {
+  const octets = address.split(".").map(Number);
+  if (octets.length !== 4 || octets.some((value) => !Number.isInteger(value))) {
+    return true;
+  }
+  const [a, b] = octets;
+  return (
+    a === 0 ||
+    a === 10 ||
+    a === 127 ||
+    (a === 100 && b >= 64 && b <= 127) ||
+    (a === 169 && b === 254) ||
+    (a === 172 && b >= 16 && b <= 31) ||
+    (a === 192 && b === 168) ||
+    a >= 224
+  );
+}
+
+function isPrivateIpAddress(address: string) {
+  if (isIP(address) === 4) return isPrivateIpv4(address);
+  if (isIP(address) !== 6) return true;
+  const normalized = address.toLowerCase();
+  if (normalized.startsWith("::ffff:")) {
+    return isPrivateIpv4(normalized.slice("::ffff:".length));
+  }
+  return (
+    normalized === "::" ||
+    normalized === "::1" ||
+    normalized.startsWith("fc") ||
+    normalized.startsWith("fd") ||
+    normalized.startsWith("fe8") ||
+    normalized.startsWith("fe9") ||
+    normalized.startsWith("fea") ||
+    normalized.startsWith("feb") ||
+    normalized.startsWith("ff")
+  );
+}
+
+async function validateTargetUrl(target: URL, trustedOrigin: string) {
+  if (target.username || target.password) return false;
+  if (target.origin === trustedOrigin) {
+    return target.protocol === "http:" || target.protocol === "https:";
+  }
+  if (target.protocol !== "https:") return false;
+  const hostname = target.hostname.toLowerCase().replace(/^\[|\]$/g, "");
+  if (
+    hostname === "localhost" ||
+    hostname.endsWith(".localhost") ||
+    hostname.endsWith(".local")
+  ) {
+    return false;
+  }
+  if (isIP(hostname)) return !isPrivateIpAddress(hostname);
+
+  const addresses = await lookup(hostname, { all: true, verbatim: true }).catch(
+    () => []
+  );
+  return (
+    addresses.length > 0 &&
+    addresses.every((entry) => !isPrivateIpAddress(entry.address))
+  );
+}
+
+function normalizeRangeHeader(value: string | null) {
+  const range = String(value || "").trim();
+  if (!range) return null;
+  const match = range.match(/^bytes=(\d*)-(\d*)$/);
+  if (!match || (!match[1] && !match[2])) return "";
+  if (match[1] && match[2] && Number(match[1]) > Number(match[2])) return "";
+  return range;
+}
+
+function inferContentType(filename: string, declaredType: string) {
+  if (declaredType) return declaredType;
+  const lower = filename.toLowerCase();
+  if (lower.endsWith(".glb")) return "model/gltf-binary";
+  if (lower.endsWith(".gltf")) return "model/gltf+json";
+  if (lower.endsWith(".png")) return "image/png";
+  if (lower.endsWith(".webp")) return "image/webp";
+  if (lower.endsWith(".jpg") || lower.endsWith(".jpeg")) return "image/jpeg";
+  return "application/octet-stream";
+}
+
+function safeDownloadName(value: string) {
+  const normalized = value.replace(/[\r\n"\\/]/g, "_").trim() || "artifact";
+  return normalized.slice(0, 180);
+}
+
+async function fetchArtifact(params: {
+  request: Request;
+  initialUrl: URL;
+  method: "GET" | "HEAD";
+  range: string | null;
+  token: string;
+  trustedOrigin: string;
+}) {
+  let target = params.initialUrl;
+  for (let redirects = 0; redirects <= MAX_REDIRECTS; redirects += 1) {
+    if (!(await validateTargetUrl(target, params.trustedOrigin))) {
+      throw new Error("不允许访问该文件地址");
+    }
+    const headers = new Headers({ Accept: "*/*" });
+    if (params.range) headers.set("Range", params.range);
+    if (target.origin === params.trustedOrigin && params.token) {
+      headers.set("Authorization", `Bearer ${params.token}`);
+    }
+    const response = await fetch(target, {
+      method: params.method,
+      headers,
+      cache: "no-store",
+      redirect: "manual",
+      signal: params.request.signal,
+    });
+    if (![301, 302, 303, 307, 308].includes(response.status)) {
+      return { response, target };
+    }
+    if (redirects === MAX_REDIRECTS) throw new Error("文件重定向次数过多");
+    const location = response.headers.get("location");
+    if (!location) throw new Error("文件重定向地址无效");
+    target = new URL(location, target);
+  }
+  throw new Error("文件地址无效");
+}
+
+async function handleRequest(request: Request, method: "GET" | "HEAD") {
+  const session = await auth().catch(() => null);
+  if (!session?.user?.id) {
+    return NextResponse.json({ error: "未登录" }, { status: 401 });
+  }
+
+  const url = new URL(request.url);
+  const parsed = querySchema.safeParse({
+    chatId: url.searchParams.get("chatId"),
+    messageId: url.searchParams.get("messageId"),
+    index: url.searchParams.get("index"),
+    download: url.searchParams.get("download") || undefined,
+  });
+  if (!parsed.success) {
+    return NextResponse.json({ error: "请求参数不正确" }, { status: 400 });
+  }
+
+  const chat = await getChatById({ id: parsed.data.chatId }).catch(() => null);
+  if (!chat || chat.userId !== session.user.id) {
+    return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+  }
+  const rows = await getMessageById({ id: parsed.data.messageId }).catch(
+    () => []
+  );
+  const message = rows.find((row) => row.chatId === parsed.data.chatId);
+  const metadata = normalizeClawdTaskMetadata(message?.videoMetadata);
+  const artifact = metadata?.artifacts?.[parsed.data.index];
+  if (!message || !artifact) {
+    return NextResponse.json({ error: "文件不存在" }, { status: 404 });
+  }
+
+  const setting = await getSystemSetting({ key: OPENCLAW_CHAT_CONFIG_KEY }).catch(
+    () => null
+  );
+  const config = normalizeOpenClawChatConfig(setting?.value);
+  let target: URL;
+  let trustedOrigin: string;
+  try {
+    target = new URL(artifact.downloadUrl);
+    trustedOrigin = new URL(config.baseUrl).origin;
+  } catch {
+    return NextResponse.json({ error: "文件地址无效" }, { status: 400 });
+  }
+
+  const range = normalizeRangeHeader(request.headers.get("range"));
+  if (range === "") {
+    return NextResponse.json({ error: "Range 请求格式无效" }, { status: 400 });
+  }
+
+  try {
+    const { response, target: finalTarget } = await fetchArtifact({
+      request,
+      initialUrl: target,
+      method,
+      range,
+      token: config.token,
+      trustedOrigin,
+    });
+    if (!response.ok && response.status !== 206) {
+      return NextResponse.json(
+        { error: `文件读取失败（HTTP ${response.status}）` },
+        { status: response.status >= 400 && response.status < 600 ? response.status : 502 }
+      );
+    }
+
+    const headers = new Headers();
+    for (const name of RESPONSE_HEADERS) {
+      const value = response.headers.get(name);
+      if (value) headers.set(name, value);
+    }
+    headers.set(
+      "content-type",
+      response.headers.get("content-type") ||
+        inferContentType(artifact.filename || finalTarget.pathname, artifact.mimeType)
+    );
+    headers.set("cache-control", "private, max-age=3600, must-revalidate");
+    headers.set("x-content-type-options", "nosniff");
+    if (parsed.data.download === "1") {
+      const filename = safeDownloadName(artifact.filename || artifact.displayName);
+      headers.set(
+        "content-disposition",
+        `attachment; filename*=UTF-8''${encodeURIComponent(filename)}`
+      );
+    }
+
+    return new Response(method === "HEAD" ? null : response.body, {
+      status: response.status,
+      headers,
+    });
+  } catch (error) {
+    console.warn("[Clawd Artifact] Proxy failed:", {
+      chatId: parsed.data.chatId,
+      messageId: parsed.data.messageId,
+      artifactIndex: parsed.data.index,
+      error: error instanceof Error ? error.message : String(error),
+    });
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : "文件读取失败" },
+      { status: 502 }
+    );
+  }
+}
+
+export async function GET(request: Request) {
+  return handleRequest(request, "GET");
+}
+
+export async function HEAD(request: Request) {
+  return handleRequest(request, "HEAD");
+}

app/api/canvas/clawd-chat/history/route.ts

@@ -25,7 +25,7 @@ export async function GET(request: Request) {
   const url = new URL(request.url);
   const limit = Math.max(
     1,
-    Math.min(100, Math.round(Number(url.searchParams.get("limit") || 50)))
+    Math.min(500, Math.round(Number(url.searchParams.get("limit") || 100)))
   );
 
   const chats = await getClawdChatsByUserId({

app/api/canvas/clawd-chat/route.ts

@@ -29,6 +29,7 @@ import {
   OPENCLAW_CHAT_MEDIA_MAX_ATTACHMENTS,
   type OpenClawChatMediaAttachment,
 } from "@/lib/openclaw-chat/media-attachments";
+import { extractOpenClawArtifacts } from "@/lib/openclaw-chat/artifacts";
 import {
   buildOpenClawDisplayMessage,
   buildOpenClawMessageWithSpreadsheetMarkdown,
@@ -298,7 +299,7 @@ async function executeClawdTask(params: ExecuteClawdTaskParams) {
           params.spreadsheetMarkdownTruncated || undefined,
         ...params.metadata,
       },
-      stream_progress: false,
+      stream_progress: !params.sensitiveInput,
       sensitive_input: params.sensitiveInput,
     };
 
@@ -337,6 +338,9 @@ async function executeClawdTask(params: ExecuteClawdTaskParams) {
           assistantMessageId: params.assistantMessageId,
           answer,
           requestId: getRequestId(payload),
+          artifacts: extractOpenClawArtifacts(payload, {
+            baseUrl: params.config.baseUrl,
+          }),
         });
         clearClawdRequestCancellation(params.cancelKey);
         return;
@@ -370,6 +374,7 @@ async function executeClawdTask(params: ExecuteClawdTaskParams) {
         ...target,
         answer: outcome.answer,
         requestId: outcome.requestId,
+        artifacts: outcome.artifacts,
       });
     } else if (outcome.status === "canceled") {
       await markClawdTaskCanceled({
@@ -576,7 +581,7 @@ export async function POST(request: Request) {
           : "image/jpeg"),
   }));
 
-  await persistPendingClawdTask({
+  const persistedTask = await persistPendingClawdTask({
     chatId: parsed.id,
     userMessageId,
     assistantMessageId,
@@ -587,6 +592,22 @@ export async function POST(request: Request) {
     skillTagName,
     processingHint,
   });
+  if (
+    persistedTask &&
+    persistedTask.assistantMessageId !== assistantMessageId
+  ) {
+    return NextResponse.json(
+      buildTaskResponse({
+        chatId: parsed.id,
+        userMessageId,
+        assistantMessageId: persistedTask.assistantMessageId,
+        status: persistedTask.status,
+        processingHint:
+          persistedTask.processingHint || DEFAULT_PROCESSING_HINT,
+      }),
+      { status: 202, headers: { "Retry-After": "2" } }
+    );
+  }
 
   const userProfile = await getUserById({ id: session.user.id }).catch(
     () => null

app/api/canvas/clawd-chat/status/route.ts

@@ -75,6 +75,7 @@ async function reconcileDetachedOpenClawTask(params: {
         ...target,
         answer: outcome.answer,
         requestId: outcome.requestId,
+        artifacts: outcome.artifacts,
       });
     } else if (outcome.status === "failed") {
       await markClawdTaskFailed({ ...target, error: outcome.error });

app/api/canvas/download-image/route.ts

@@ -1,5 +1,9 @@
-import { NextRequest, NextResponse } from "next/server";
+import { resolveCanvasCdnDownload } from "@/lib/storage/canvas-cdn-download";
+import { prepareImageArchiveDownload } from "@/lib/storage/image-download-preparation";
+import { after, NextRequest, NextResponse } from "next/server";
 import { auth } from "@/app/(auth)/auth";
+import { getDownloadPreparationQueue, type DownloadPreparationInput } from "@/lib/canvas/download-preparation";
+import { extractImageProxySourceUrl, inferOriginalImageUrl } from "@/lib/image-url";
 import {
   buildAttachmentContentDisposition,
   fetchCanvasDownloadAsset,
@@ -9,6 +13,31 @@ import {
 export const runtime = "nodejs";
 export const maxDuration = 120;
 
+async function prepareDownload(input: DownloadPreparationInput, signal: AbortSignal) {
+  // A proxy candidate for the same original must not repeat the same slow
+  // upstream request through our own server (and create another HTTP timeout).
+  const sources = [...new Set(input.urls.map(url => {
+    const source = extractImageProxySourceUrl(url) || url;
+    return inferOriginalImageUrl(source) || source;
+  }))];
+  for (let attempt = 0; attempt < 3; attempt++) {
+    signal.throwIfAborted();
+    for (const url of sources) {
+      signal.throwIfAborted();
+      const result = await fetchCanvasDownloadAsset({
+        file: { url, name: "original" }, index: 0,
+        requestOrigin: input.requestOrigin, cookie: input.cookie,
+        includeSequencePrefix: false, timeoutMs: 12_000, retryCount: 1, signal,
+      });
+      if (result.ok) return { buffer: result.bytes, contentType: result.contentType };
+    }
+    // Each pass resolves the latest archive URL inside fetchCanvasDownloadAsset.
+    // No AI/model request is involved and a completed source fetch is shared.
+    if (attempt < 2) await new Promise(resolve => setTimeout(resolve, 1_000));
+  }
+  throw new Error("Original image sources unavailable");
+}
+
 function getRequestOrigin(request: NextRequest): string {
   const forwardedHost = (request.headers.get("x-forwarded-host") || "").split(",")[0]?.trim();
   const forwardedProto = (request.headers.get("x-forwarded-proto") || "").split(",")[0]?.trim();
@@ -55,12 +84,41 @@ export async function POST(request: NextRequest) {
     const body = (await request.json().catch(() => ({}))) as Record<string, unknown>;
     const requestOrigin = getRequestOrigin(request);
     const urls = resolveDownloadUrls(body, requestOrigin);
+    const requestedUrls = [...urls];
     if (urls.length === 0) {
       return NextResponse.json({ success: false, error: "图片地址无效" }, { status: 400 });
     }
 
     const name = sanitizeCanvasDownloadFileName(String(body.name || ""), "canvas-image");
+    if (body.preferDirect === true) {
+      const { task, direct } = await resolveCanvasCdnDownload(urls, `${name}.png`).catch(() => ({ task: null, direct: null }));
+      if (direct) return NextResponse.json(direct, { headers: { "Cache-Control": "no-store" } });
+      if (task?.targetUrl) {
+        if (!urls.includes(task.targetUrl)) urls.unshift(task.targetUrl);
+        after(() => prepareImageArchiveDownload(task.id));
+      }
+    }
     const cookie = request.headers.get("cookie") || "";
+    if (body.preparation === "async") {
+      const result = await getDownloadPreparationQueue(prepareDownload, after).request({
+        userId: session.user.id, urls: requestedUrls, requestOrigin, cookie,
+      });
+      if (result.status === "preparing") {
+        return NextResponse.json({ delivery: "preparing", retryAfter: 3,
+          message: "正在准备原图，完成后将自动下载" }, {
+          status: 202, headers: { "Retry-After": "3", "Cache-Control": "no-store" },
+        });
+      }
+      if (result.status === "failed") {
+        return NextResponse.json({ success: false, error: result.error }, { status: 502 });
+      }
+      return new NextResponse(new Uint8Array(result.asset.buffer), { headers: {
+        "Content-Type": result.asset.contentType,
+        "Content-Length": String(result.asset.buffer.length),
+        "Content-Disposition": buildAttachmentContentDisposition(`${name}.png`),
+        "Cache-Control": "no-store",
+      } });
+    }
     let result: Awaited<ReturnType<typeof fetchCanvasDownloadAsset>> | null = null;
     const failures: string[] = [];
 

app/api/canvas/download-zip-task/route.ts

@@ -1,54 +1,22 @@
+import { writeDownloadZip, readDownloadZip } from "@/lib/canvas/download-zip-stream";
+import { claimZipTask, loadZipTask, saveZipTask, zipTaskPath, assertZipDiskSpace, cleanupZipTasks, assertZipTaskCapacity, type ZipTask } from "@/lib/canvas/download-zip-task-store";
+import { parseDownloadByteRange } from "@/lib/canvas/download-byte-range";
+import { createReadStream } from "node:fs";
+import { mkdir, stat, writeFile, rm } from "node:fs/promises";
+import { join } from "node:path";
 import { randomUUID } from "node:crypto";
-import { NextRequest, NextResponse } from "next/server";
+import { after, NextRequest, NextResponse } from "next/server";
 import JSZip from "jszip";
 import { auth } from "@/app/(auth)/auth";
 import { fetchCanvasDownloadAsset } from "@/lib/canvas/photoshop-safe-download";
-
+import { publishCanvasZip } from "@/lib/storage/canvas-zip-delivery";
 export const runtime = "nodejs";
 export const maxDuration = 300;
-
-type DownloadFileItem = {
-  url: string;
-  name?: string;
-};
-
-type ZipTaskStatus = "pending" | "running" | "completed" | "failed";
-
-type ZipTask = {
-  id: string;
-  userId: string;
-  folderName: string;
-  files: DownloadFileItem[];
-  totalCount: number;
-  processedCount: number;
-  successCount: number;
-  failedCount: number;
-  compressPercent: number;
-  status: ZipTaskStatus;
-  stage: string;
-  error?: string;
-  zipBuffer?: Buffer;
-  contentDisposition?: string;
-  createdAt: number;
-  updatedAt: number;
-  expiresAt: number;
-};
-
-const MAX_CONCURRENCY = 8;
+type DownloadFileItem = { url: string; name?: string };
 const MAX_DOWNLOAD_FILES = 200;
-const TASK_TTL_MS = 30 * 60 * 1000;
-
-const globalTaskStore = globalThis as typeof globalThis & {
-  __canvasDownloadZipTasks?: Map<string, ZipTask>;
-};
-
-function getTaskStore() {
-  if (!globalTaskStore.__canvasDownloadZipTasks) {
-    globalTaskStore.__canvasDownloadZipTasks = new Map<string, ZipTask>();
-  }
-  return globalTaskStore.__canvasDownloadZipTasks;
-}
-
+const TASK_TTL_MS = 60 * 60_000;
+const running = (globalThis as typeof globalThis & { __canvasZipRunning?: Set<string> });
+const active = running.__canvasZipRunning ??= new Set<string>();
 function sanitizeFolderName(value: string): string {
   const cleaned = String(value || "")
     .replace(/[\\/:*?"<>|]+/g, "-")
@@ -56,7 +24,7 @@ function sanitizeFolderName(value: string): string {
     .replace(/-+/g, "-")
     .replace(/^-+|-+$/g, "")
     .trim();
-  return cleaned || `canvas-images-${Date.now()}`;
+  return cleaned && !/^\.+$/.test(cleaned) ? cleaned.slice(0, 100) : `canvas-images-${Date.now()}`;
 }
 
 function buildContentDisposition(folderName: string): string {
@@ -110,258 +78,161 @@ function toDownloadItems(input: unknown, origin: string): DownloadFileItem[] {
     .slice(0, MAX_DOWNLOAD_FILES);
 }
 
-function cleanupExpiredTasks() {
-  const now = Date.now();
-  const store = getTaskStore();
-  for (const [taskId, task] of store.entries()) {
-    if (task.expiresAt <= now) {
-      store.delete(taskId);
-    }
-  }
-}
-
-function getTaskProgress(task: ZipTask) {
-  if (task.status === "completed") {
-    return 100;
-  }
-  if (task.status === "failed") {
-    return Math.max(
-      0,
-      Math.min(100, Math.round((task.processedCount / Math.max(1, task.totalCount)) * 85))
-    );
-  }
-  if (task.processedCount >= task.totalCount && task.totalCount > 0) {
-    return Math.min(99, 85 + Math.round((task.compressPercent / 100) * 14));
-  }
-  return Math.max(
-    4,
-    Math.min(85, Math.round((task.processedCount / Math.max(1, task.totalCount)) * 85))
-  );
-}
 
 function serializeTask(task: ZipTask) {
-  const downloadUrl =
-    task.status === "completed"
-      ? `/api/canvas/download-zip-task?taskId=${encodeURIComponent(task.id)}&download=1`
-      : "";
-  return {
-    id: task.id,
-    folderName: task.folderName,
-    status: task.status,
-    stage: task.stage,
-    totalCount: task.totalCount,
-    processedCount: task.processedCount,
-    successCount: task.successCount,
-    failedCount: task.failedCount,
-    progress: getTaskProgress(task),
-    error: task.error || "",
-    downloadUrl,
-    createdAt: task.createdAt,
-    updatedAt: task.updatedAt,
-    expiresAt: task.expiresAt,
-  };
+  return { id: task.id, folderName: task.folderName, status: task.status, stage: task.stage,
+    totalCount: task.totalCount, processedCount: task.processedCount, successCount: task.successCount,
+    failedCount: task.failedCount, progress: task.status === "completed" ? 100 : Math.min(99,
+      Math.round(task.processedCount / Math.max(1, task.totalCount) * 85 + task.compressPercent * .14)),
+    error: task.error || "", expiresAt: task.expiresAt,
+    downloadUrl: task.status === "completed" ? `/api/canvas/download-zip-task?taskId=${task.id}&download=1` : "" };
 }
-
-async function processZipTask(params: {
-  task: ZipTask;
-  requestOrigin: string;
-  cookie: string;
-}) {
-  const { task, requestOrigin, cookie } = params;
-  const store = getTaskStore();
+async function processTask(id: string, userId: string, requestOrigin: string, cookie: string) {
+  if (active.has(id) || active.size >= 2) return;
+  active.add(id);
+  let release: (() => Promise<void>) | null = null;
+  let task: ZipTask | null = null;
   try {
-    task.status = "running";
-    task.stage = "正在读取源图";
-    task.updatedAt = Date.now();
-
-    const zip = new JSZip();
-    const folder = zip.folder(task.folderName) || zip;
-    const results: Array<
-      | Awaited<ReturnType<typeof fetchCanvasDownloadAsset>>
-      | null
-    > = new Array(task.files.length).fill(null);
+    release = await claimZipTask(id);
+    if (!release) return;
+    task = await loadZipTask(id, userId);
+    if (!task || task.status === "completed" || task.status === "failed") return;
+    await assertZipDiskSpace();
+    task.status = "running"; task.stage = "正在准备原图"; task.updatedAt = Date.now();
+    await saveZipTask(task);
+    // Stage each image on disk, not all PNG buffers in the web process heap.
+    // A restart resumes from these files using the current owner's session.
     let cursor = 0;
-    const workerCount = Math.min(MAX_CONCURRENCY, task.files.length);
-
-    await Promise.all(
-      Array.from({ length: workerCount }, async () => {
-        while (true) {
-          const index = cursor;
-          cursor += 1;
-          if (index >= task.files.length) break;
-
-          const file = task.files[index]!;
-          results[index] = await fetchCanvasDownloadAsset({
-            file,
-            index,
-            requestOrigin,
-            cookie,
-          });
-
-          const result = results[index];
-          task.processedCount += 1;
-          if (result?.ok) {
-            task.successCount += 1;
-          } else {
-            task.failedCount += 1;
-          }
-          task.stage = `正在处理 ${task.processedCount}/${task.totalCount} 张`;
-          task.updatedAt = Date.now();
-        }
-      })
-    );
-
-    const failures: Array<{ index: number; url: string; name?: string; error: string }> = [];
-    for (const [index, item] of results.entries()) {
-      if (!item || !item.ok) {
-        failures.push({
-          index: index + 1,
-          url: item?.ok === false ? item.url : task.files[index]?.url || "",
-          name: item?.ok === false ? item.name : task.files[index]?.name,
-          error: item?.ok === false ? item.error : "未知错误",
-        });
-        continue;
+    let writes = Promise.resolve();
+    const persist = () => { const current = task!; writes = writes.then(() => saveZipTask(current)); return writes; };
+    const results = await Promise.allSettled(Array.from({ length: Math.min(2, task.files.length) }, async () => {
+      while (cursor < task!.files.length) {
+        const index = cursor++; const file = task!.files[index];
+        const path = join(zipTaskPath(id), `${index}.image`);
+        if (file.prepared && file.filename && (await stat(path).catch(() => null))?.size) continue;
+        delete file.prepared; delete file.filename;
+        const result = await fetchCanvasDownloadAsset({ file, index, requestOrigin, cookie,
+          signal: AbortSignal.timeout(120_000) }).catch(() => ({ ok: false as const, error: "原图读取超时或源地址暂时不可用" }));
+        if (result.ok) {
+          await assertZipDiskSpace(result.bytes.length);
+          await writeFile(path, result.bytes, { mode: 0o600 });
+          file.prepared = `${index}.image`; file.filename = result.filename; delete file.error;
+        } else file.error = result.error;
+        task!.processedCount = task!.files.filter(f => f.prepared || f.error).length;
+        task!.successCount = task!.files.filter(f => f.prepared).length;
+        task!.failedCount = task!.files.filter(f => f.error).length;
+        task!.stage = `正在准备原图 ${task!.processedCount}/${task!.totalCount}`;
+        task!.updatedAt = Date.now(); await persist();
       }
-      folder.file(item.filename, item.bytes);
-    }
-
-    if (failures.length > 0) {
-      folder.file(
-        "_download-failures.txt",
-        [
-          "以下图片暂时无法下载。可稍后重试，或复制链接检查源图是否仍可访问。",
-          "",
-          ...failures.map((item) => {
-            const label = item.name ? `${item.index}. ${item.name}` : `${item.index}. image`;
-            return `${label}\nURL: ${item.url}\n原因: ${item.error}`;
-          }),
-        ].join("\n\n")
-      );
-      console.warn("[CanvasDownloadZipTask] Partial download failures:", failures);
-    }
-
-    task.stage = "正在生成 ZIP 文件";
-    task.updatedAt = Date.now();
-    task.zipBuffer = await zip.generateAsync(
-      {
-        type: "nodebuffer",
-        compression: "DEFLATE",
-        compressionOptions: { level: 6 },
-      },
-      (metadata) => {
-        task.compressPercent = Math.max(0, Math.min(100, metadata.percent || 0));
-        task.updatedAt = Date.now();
-      }
-    );
+    }));
+    const rejected = results.find(result => result.status === "rejected");
+    if (rejected?.status === "rejected") throw rejected.reason;
+    if (!task.successCount) throw new Error("所选原图暂时都无法读取，请稍后重试；画布图片不会被删除");
+    const zip = new JSZip(); const folder = zip.folder(task.folderName) || zip;
+    for (const file of task.files) if (file.prepared && file.filename)
+      folder.file(file.filename, createReadStream(join(zipTaskPath(id), file.prepared))
+        .once("close", () => { void rm(join(zipTaskPath(id), file.prepared!), { force: true }).catch(() => undefined); }));
+    if (task.failedCount) folder.file("_download-failures.txt", task.files.filter(f => f.error)
+      .map(f => `${f.name || "图片"}：${f.error}`).join("\n"));
+    task.stage = "正在生成完整 ZIP 文件"; await saveZipTask(task);
+    task.zipFile = await writeDownloadZip(zip, task.id, percent => { task!.compressPercent = percent; });
     task.contentDisposition = buildContentDisposition(task.folderName);
-    task.status = "completed";
-    task.stage = "打包完成";
-    task.compressPercent = 100;
-    task.updatedAt = Date.now();
-    task.expiresAt = Date.now() + TASK_TTL_MS;
-  } catch (error) {
-    console.error("[CanvasDownloadZipTask] Failed:", error);
-    task.status = "failed";
-    task.stage = "打包失败";
-    task.error = error instanceof Error ? error.message : "打包下载失败";
-    task.updatedAt = Date.now();
-    task.expiresAt = Date.now() + TASK_TTL_MS;
-  } finally {
-    store.set(task.id, task);
-  }
-}
-
-export async function POST(request: NextRequest) {
-  try {
-    cleanupExpiredTasks();
-    const session = await auth();
-    if (!session?.user?.id) {
-      return NextResponse.json({ success: false, error: "未登录" }, { status: 401 });
-    }
-
-    const body = (await request.json().catch(() => ({}))) as Record<string, unknown>;
-    const requestOrigin = getRequestOrigin(request);
-    const files = toDownloadItems(body.files, requestOrigin);
-    const folderName = sanitizeFolderName(String(body.folderName || ""));
-    if (files.length === 0) {
-      return NextResponse.json({ success: false, error: "没有可下载的图片" }, { status: 400 });
-    }
-
-    const task: ZipTask = {
-      id: randomUUID(),
-      userId: session.user.id,
-      folderName,
-      files,
-      totalCount: files.length,
-      processedCount: 0,
-      successCount: 0,
-      failedCount: 0,
-      compressPercent: 0,
-      status: "pending",
-      stage: "等待服务端开始打包",
-      createdAt: Date.now(),
-      updatedAt: Date.now(),
-      expiresAt: Date.now() + TASK_TTL_MS,
-    };
-    getTaskStore().set(task.id, task);
-
-    void processZipTask({
-      task,
-      requestOrigin,
-      cookie: request.headers.get("cookie") || "",
-    });
-
-    return NextResponse.json({
-      success: true,
-      task: serializeTask(task),
-    });
-  } catch (error) {
-    console.error("[CanvasDownloadZipTask] Create failed:", error);
-    return NextResponse.json({ success: false, error: "创建打包任务失败" }, { status: 500 });
-  }
-}
-
-export async function GET(request: NextRequest) {
-  try {
-    cleanupExpiredTasks();
-    const session = await auth();
-    if (!session?.user?.id) {
-      return NextResponse.json({ success: false, error: "未登录" }, { status: 401 });
-    }
-
-    const taskId = String(request.nextUrl.searchParams.get("taskId") || "").trim();
-    if (!taskId) {
-      return NextResponse.json({ success: false, error: "缺少任务 ID" }, { status: 400 });
-    }
-
-    const task = getTaskStore().get(taskId);
-    if (!task || task.userId !== session.user.id) {
-      return NextResponse.json({ success: false, error: "打包任务不存在或已过期" }, { status: 404 });
-    }
-
-    if (request.nextUrl.searchParams.get("download") === "1") {
-      if (task.status !== "completed" || !task.zipBuffer) {
-        return NextResponse.json({ success: false, error: "ZIP 文件尚未准备好" }, { status: 409 });
+    task.stage = "正在准备下载链接"; await saveZipTask(task);
+    try {
+      const cdn = await publishCanvasZip({ id: task.id, ...task.zipFile, disposition: task.contentDisposition });
+      if (cdn) {
+        task.cdnObject = { storageConfigId: cdn.storageConfigId, key: cdn.key };
+        if (cdn.url) task.cdnUrl = cdn.url;
       }
-      return new NextResponse(task.zipBuffer, {
-        status: 200,
-        headers: {
-          "Content-Type": "application/zip",
-          "Content-Disposition": task.contentDisposition || buildContentDisposition(task.folderName),
-          "Content-Length": String(task.zipBuffer.length),
-          "Cache-Control": "no-store",
-          "X-Download-Success-Count": String(task.successCount),
-          "X-Download-Failed-Count": String(task.failedCount),
-        },
-      });
-    }
-
-    return NextResponse.json({
-      success: true,
-      task: serializeTask(task),
-    });
+    } catch { console.warn("[CanvasDownloadZipTask] CDN delivery unavailable; complete local ZIP retained", { taskId: id }); }
+    task.status = "completed"; task.stage = task.failedCount ? `已打包 ${task.successCount} 张，${task.failedCount} 张未能读取` : "打包完成";
+    task.compressPercent = 100; task.updatedAt = Date.now(); task.expiresAt = Date.now() + TASK_TTL_MS;
+    await saveZipTask(task);
+    // The complete ZIP is enough for retries; release staged duplicate bytes.
+    await Promise.all(task.files.filter(f => f.prepared).map(f => rm(join(zipTaskPath(id), f.prepared!), { force: true }).catch(() => undefined)));
+    console.info("[CanvasDownloadZipTask] Complete", { taskId: id, count: task.successCount, failed: task.failedCount,
+      bytes: task.zipFile.bytes, delivery: task.cdnUrl ? "cdn" : "local" });
   } catch (error) {
-    console.error("[CanvasDownloadZipTask] Query failed:", error);
-    return NextResponse.json({ success: false, error: "查询打包任务失败" }, { status: 500 });
+    if (task) {
+      task.status = "failed"; task.stage = "打包未完成";
+      task.error = error instanceof Error ? error.message : "打包失败，请稍后重试";
+      task.updatedAt = Date.now(); task.expiresAt = Date.now() + TASK_TTL_MS; await saveZipTask(task).catch(() => undefined);
+    }
+    console.error("[CanvasDownloadZipTask] Preparation failed", { taskId: id, message: task?.error });
+  } finally { await release?.().catch(() => undefined); active.delete(id); }
+}
+function schedule(task: ZipTask, request: NextRequest) {
+  const run = () => processTask(task.id, task.userId, getRequestOrigin(request), request.headers.get("cookie") || "");
+  after(run);
+}
+export async function POST(request: NextRequest) {
+  const session = await auth();
+  if (!session?.user?.id) return NextResponse.json({ error: "未登录" }, { status: 401 });
+  try {
+    await cleanupZipTasks();
+    const body = await request.json();
+    let id = typeof body.taskId === "string" ? body.taskId : randomUUID();
+    let task = await loadZipTask(id, session.user.id);
+    if (!task) {
+      await assertZipTaskCapacity(session.user.id);
+      if (await stat(zipTaskPath(id)).catch(() => null)) id = randomUUID();
+      const files = toDownloadItems(body.files, getRequestOrigin(request));
+      if (!files.length || !Array.isArray(body.files) || body.files.length > MAX_DOWNLOAD_FILES || files.length !== body.files.length)
+        return NextResponse.json({ error: "请选择 1 到 200 张可下载图片" }, { status: 400 });
+      // Exclusive creation prevents an arbitrary taskId from overwriting another owner's manifest.
+      await mkdir(zipTaskPath(id), { recursive: false, mode: 0o700 }).catch(async error => {
+        if (error.code !== "ENOENT") throw error;
+        await mkdir((await import("@/lib/canvas/download-zip-stream")).downloadZipDirectory, { recursive: true, mode: 0o700 });
+        await mkdir(zipTaskPath(id), { mode: 0o700 });
+      });
+      const now = Date.now();
+      task = { id, userId: session.user.id, folderName: sanitizeFolderName(String(body.folderName || "")), files,
+        totalCount: files.length, processedCount: 0, successCount: 0, failedCount: 0, compressPercent: 0,
+        status: "pending", stage: "等待后台准备", createdAt: now, updatedAt: now, expiresAt: now + 6 * TASK_TTL_MS };
+      await saveZipTask(task);
+    } else if (task.status === "failed" && body.retry === true) {
+      task.status = "pending"; task.error = undefined;
+      await assertZipTaskCapacity(session.user.id);
+      for (const file of task.files) delete file.error;
+      task.processedCount = task.successCount = task.files.filter(file => file.prepared).length;
+      task.failedCount = 0; task.updatedAt = Date.now(); task.expiresAt = Date.now() + 6 * TASK_TTL_MS;
+      await saveZipTask(task);
+    }
+    if (task.status === "pending" || task.status === "running") schedule(task, request);
+    return NextResponse.json({ success: true, task: serializeTask(task) }, { status: 202, headers: { "Cache-Control": "no-store" } });
+  } catch (error) {
+    console.warn("[CanvasDownloadZipTask] Create rejected", { message: (error as Error).message });
+    return NextResponse.json({ error: "无法创建打包任务，请稍后重试" }, { status: 400 });
+  }
+}
+export async function GET(request: NextRequest) {
+  const session = await auth();
+  if (!session?.user?.id) return NextResponse.json({ error: "未登录" }, { status: 401 });
+  try {
+    const id = request.nextUrl.searchParams.get("taskId") || "";
+    const task = await loadZipTask(id, session.user.id);
+    if (!task) return NextResponse.json({ error: "打包任务不存在或已过期，请重新打包" }, { status: 404 });
+    if (request.nextUrl.searchParams.get("download") === "1") {
+      if (task.status !== "completed" || !task.zipFile) return NextResponse.json({ error: "ZIP 尚未准备好" }, { status: 409 });
+      if (task.cdnUrl && request.nextUrl.searchParams.get("local") !== "1")
+        return NextResponse.redirect(task.cdnUrl, 307);
+      const info = await stat(task.zipFile.path).catch(() => null);
+      if (!info || info.size !== task.zipFile.bytes) return NextResponse.json({ error: "下载文件已过期，请重新打包" }, { status: 410 });
+      const etag = `"${task.id}-${info.size}"`;
+      const headers: Record<string, string> = { "Content-Type": "application/zip", "Content-Disposition": task.contentDisposition!,
+        "Accept-Ranges": "bytes", "ETag": etag, "Cache-Control": "private, no-store",
+        "X-Download-Success-Count": String(task.successCount), "X-Download-Failed-Count": String(task.failedCount) };
+      const ifRange = request.headers.get("if-range");
+      let range;
+      try { range = parseDownloadByteRange(!ifRange || ifRange === etag ? request.headers.get("range") : null, info.size); }
+      catch { return new NextResponse(null, { status: 416, headers: { ...headers, "Content-Range": `bytes */${info.size}` } }); }
+      headers["Content-Length"] = String(range ? range.end - range.start + 1 : info.size);
+      if (range) headers["Content-Range"] = `bytes ${range.start}-${range.end}/${info.size}`;
+      return new NextResponse(readDownloadZip(task.zipFile.path, range || undefined), { status: range ? 206 : 200, headers });
+    }
+    if (task.status === "pending" || task.status === "running") schedule(task, request);
+    return NextResponse.json({ success: true, task: serializeTask(task) }, { headers: { "Cache-Control": "no-store" } });
+  } catch {
+    return NextResponse.json({ error: "查询打包任务失败，请稍后重试" }, { status: 500 });
   }
 }

app/api/canvas/download-zip/route.ts

@@ -1,3 +1,4 @@
+import { streamDownloadZip } from "@/lib/canvas/download-zip-stream";
 import { NextRequest, NextResponse } from "next/server";
 import JSZip from "jszip";
 import { auth } from "@/app/(auth)/auth";
@@ -159,13 +160,7 @@ export async function POST(request: NextRequest) {
       console.warn("[CanvasDownloadZip] Partial download failures:", failures);
     }
 
-    const zipBuffer = await zip.generateAsync({
-      type: "nodebuffer",
-      compression: "DEFLATE",
-      compressionOptions: { level: 6 },
-    });
-
-    return new NextResponse(zipBuffer, {
+    return new NextResponse(streamDownloadZip(zip), {
       status: 200,
       headers: {
         "Content-Type": "application/zip",

app/api/canvas/layout-replace/batches/[batchId]/route.ts

@@ -0,0 +1,143 @@
+import { NextResponse } from "next/server";
+import { auth } from "@/app/(auth)/auth";
+import {
+  getCanvasLayoutReplaceBatchActiveTaskId,
+  getCanvasLayoutReplaceBatchForUser,
+  markCanvasLayoutReplaceBatchItemsAdded,
+  retryCanvasLayoutReplaceBatchItem,
+} from "@/lib/canvas/layout-replace-batch";
+import {
+  enqueueCanvasImageTask,
+  ensureCanvasImageTaskActive,
+} from "@/lib/canvas/image-task-queue";
+
+function normalizeUuid(value: unknown) {
+  const id = String(value || "").trim();
+  return /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(id)
+    ? id
+    : "";
+}
+
+export async function GET(
+  _request: Request,
+  { params }: { params: Promise<{ batchId: string }> }
+) {
+  try {
+    const session = await auth();
+    if (!session?.user?.id) {
+      return NextResponse.json({ success: false, error: "未登录" }, { status: 401 });
+    }
+    const batchId = normalizeUuid((await params).batchId);
+    if (!batchId) {
+      return NextResponse.json({ success: false, error: "批次ID无效" }, { status: 400 });
+    }
+
+    let batch = await getCanvasLayoutReplaceBatchForUser({
+      batchId,
+      userId: session.user.id,
+    });
+    if (!batch) {
+      return NextResponse.json({ success: false, error: "批次不存在" }, { status: 404 });
+    }
+    const activeTaskId = getCanvasLayoutReplaceBatchActiveTaskId(batch);
+    if (activeTaskId) {
+      await ensureCanvasImageTaskActive({
+        taskId: activeTaskId,
+        userId: session.user.id,
+      });
+      batch = await getCanvasLayoutReplaceBatchForUser({
+        batchId,
+        userId: session.user.id,
+      });
+    }
+
+    return NextResponse.json({ success: true, batch });
+  } catch (error) {
+    console.error("[Canvas Layout Replace Batch][Detail] Error:", error);
+    return NextResponse.json(
+      {
+        success: false,
+        error: error instanceof Error ? error.message : "查询批次失败",
+      },
+      { status: 500 }
+    );
+  }
+}
+
+export async function PATCH(
+  request: Request,
+  { params }: { params: Promise<{ batchId: string }> }
+) {
+  try {
+    const session = await auth();
+    if (!session?.user?.id) {
+      return NextResponse.json({ success: false, error: "未登录" }, { status: 401 });
+    }
+    const batchId = normalizeUuid((await params).batchId);
+    const body = await request.json().catch(() => ({}));
+    if (body?.action === "retry") {
+      const itemId = normalizeUuid(body?.itemId);
+      if (!batchId || !itemId) {
+        return NextResponse.json(
+          { success: false, error: "缺少需要重试的结果" },
+          { status: 400 }
+        );
+      }
+      const taskId = await retryCanvasLayoutReplaceBatchItem({
+        batchId,
+        itemId,
+        userId: session.user.id,
+      });
+      if (!taskId) {
+        return NextResponse.json(
+          { success: false, error: "该结果当前无法重试" },
+          { status: 409 }
+        );
+      }
+      await enqueueCanvasImageTask(taskId);
+      return NextResponse.json({ success: true, taskId });
+    }
+
+    const items = Array.isArray(body?.items)
+      ? body.items
+          .map((item: unknown) => {
+            const record =
+              item && typeof item === "object" && !Array.isArray(item)
+                ? (item as Record<string, unknown>)
+                : {};
+            return {
+              itemId: normalizeUuid(record.itemId),
+              canvasNodeId: String(record.canvasNodeId || "").trim(),
+            };
+          })
+          .filter(
+            (item: { itemId: string; canvasNodeId: string }) =>
+              Boolean(item.itemId && item.canvasNodeId)
+          )
+      : [];
+    if (!batchId || items.length === 0) {
+      return NextResponse.json(
+        { success: false, error: "缺少已添加的结果信息" },
+        { status: 400 }
+      );
+    }
+    const updated = await markCanvasLayoutReplaceBatchItemsAdded({
+      batchId,
+      userId: session.user.id,
+      items,
+    });
+    if (!updated) {
+      return NextResponse.json({ success: false, error: "批次不存在" }, { status: 404 });
+    }
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    console.error("[Canvas Layout Replace Batch][PATCH] Error:", error);
+    return NextResponse.json(
+      {
+        success: false,
+        error: error instanceof Error ? error.message : "更新批次失败",
+      },
+      { status: 500 }
+    );
+  }
+}

app/api/canvas/layout-replace/batches/route.ts

@@ -0,0 +1,201 @@
+import { and, eq } from "drizzle-orm";
+import { NextResponse } from "next/server";
+import { auth } from "@/app/(auth)/auth";
+import {
+  CANVAS_LAYOUT_REPLACE_BATCH_LIMIT,
+  createCanvasLayoutReplaceBatch,
+  getCanvasLayoutReplaceBatchActiveTaskId,
+  getLatestCanvasLayoutReplaceBatchForUser,
+  type CanvasLayoutReplaceBatchSource,
+} from "@/lib/canvas/layout-replace-batch";
+import {
+  enqueueCanvasImageTask,
+  ensureCanvasImageTaskActive,
+} from "@/lib/canvas/image-task-queue";
+import { db } from "@/lib/db";
+import { canvasProject } from "@/lib/db/schema";
+import { getPointsSystemConfig } from "@/lib/db/queries";
+import { prepareFeaturePointsCharge } from "@/lib/points/feature-charge";
+import { getImageToolCreditCost } from "@/lib/points/config";
+
+export const maxDuration = 1200;
+
+function normalizeHttpUrl(value: unknown) {
+  const url = String(value || "").trim();
+  return /^https?:\/\//i.test(url) ? url : "";
+}
+
+function normalizeUuid(value: unknown) {
+  const id = String(value || "").trim();
+  return /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(id)
+    ? id
+    : "";
+}
+
+function normalizeSources(value: unknown): CanvasLayoutReplaceBatchSource[] {
+  if (!Array.isArray(value)) return [];
+  const seen = new Set<string>();
+  const sources: CanvasLayoutReplaceBatchSource[] = [];
+  for (const item of value) {
+    if (!item || typeof item !== "object" || Array.isArray(item)) continue;
+    const record = item as Record<string, unknown>;
+    const sourceImageUrl = normalizeHttpUrl(record.sourceImageUrl);
+    if (!sourceImageUrl || seen.has(sourceImageUrl)) continue;
+    seen.add(sourceImageUrl);
+    sources.push({
+      sourceImageUrl,
+      sourceKind: record.sourceKind === "upload" ? "upload" : "canvas",
+      sourceNodeId: String(record.sourceNodeId || "").trim() || undefined,
+      sourceTitle: String(record.sourceTitle || "").trim().slice(0, 256) || undefined,
+    });
+    if (sources.length >= CANVAS_LAYOUT_REPLACE_BATCH_LIMIT) break;
+  }
+  return sources;
+}
+
+async function getOwnedProject(projectId: string, userId: string) {
+  const [project] = await db
+    .select({ id: canvasProject.id })
+    .from(canvasProject)
+    .where(and(eq(canvasProject.id, projectId), eq(canvasProject.userId, userId)))
+    .limit(1);
+  return project || null;
+}
+
+export async function GET(request: Request) {
+  try {
+    const session = await auth();
+    if (!session?.user?.id) {
+      return NextResponse.json({ success: false, error: "未登录" }, { status: 401 });
+    }
+
+    const { searchParams } = new URL(request.url);
+    const projectId = normalizeUuid(searchParams.get("projectId"));
+    const sourceNodeId = String(searchParams.get("sourceNodeId") || "").trim();
+    if (!projectId) {
+      return NextResponse.json(
+        { success: false, error: "缺少有效的画布项目" },
+        { status: 400 }
+      );
+    }
+    if (!(await getOwnedProject(projectId, session.user.id))) {
+      return NextResponse.json({ success: false, error: "画布不存在" }, { status: 404 });
+    }
+
+    let batch = await getLatestCanvasLayoutReplaceBatchForUser({
+      projectId,
+      userId: session.user.id,
+      sourceNodeId: sourceNodeId || undefined,
+    });
+    const activeTaskId = batch
+      ? getCanvasLayoutReplaceBatchActiveTaskId(batch)
+      : null;
+    if (activeTaskId) {
+      await ensureCanvasImageTaskActive({
+        taskId: activeTaskId,
+        userId: session.user.id,
+      });
+      batch = await getLatestCanvasLayoutReplaceBatchForUser({
+        projectId,
+        userId: session.user.id,
+        sourceNodeId: sourceNodeId || undefined,
+      });
+    }
+
+    return NextResponse.json({ success: true, batch: batch || null });
+  } catch (error) {
+    console.error("[Canvas Layout Replace Batch][GET] Error:", error);
+    return NextResponse.json(
+      {
+        success: false,
+        error: error instanceof Error ? error.message : "查询批次失败",
+      },
+      { status: 500 }
+    );
+  }
+}
+
+export async function POST(request: Request) {
+  try {
+    const session = await auth();
+    if (!session?.user?.id) {
+      return NextResponse.json({ success: false, error: "未登录" }, { status: 401 });
+    }
+
+    const body = await request.json().catch(() => ({}));
+    const projectId = normalizeUuid(body?.projectId);
+    const referenceImageUrl = normalizeHttpUrl(body?.referenceImageUrl);
+    const sources = normalizeSources(body?.sources);
+    if (!projectId || !(await getOwnedProject(projectId, session.user.id))) {
+      return NextResponse.json({ success: false, error: "画布不存在" }, { status: 404 });
+    }
+    if (sources.length === 0) {
+      return NextResponse.json(
+        { success: false, error: "请至少添加一张待处理图片" },
+        { status: 400 }
+      );
+    }
+    if (!referenceImageUrl) {
+      return NextResponse.json(
+        { success: false, error: "请上传目标模版图" },
+        { status: 400 }
+      );
+    }
+
+    const pointsConfig = await getPointsSystemConfig();
+    const perImageCost = getImageToolCreditCost(pointsConfig, "repaint");
+    const totalCost = perImageCost * sources.length;
+    const pointsCharge = await prepareFeaturePointsCharge({
+      userId: session.user.id,
+      unitCost: totalCost,
+      reason: "image_repaint",
+      modelId: "canvas-layout-replace-batch",
+      note: `批量排版替换 ${sources.length} 张`,
+      pointsConfig,
+    });
+    if (!pointsCharge.ok) {
+      return NextResponse.json(pointsCharge.payload, { status: pointsCharge.status });
+    }
+
+    const created = await createCanvasLayoutReplaceBatch({
+      userId: session.user.id,
+      projectId,
+      sources,
+      referenceImageUrl,
+      supplementalPrompt:
+        typeof body?.supplementalPrompt === "string"
+          ? body.supplementalPrompt
+          : undefined,
+      imageSize: typeof body?.imageSize === "string" ? body.imageSize : "2K",
+      model: typeof body?.model === "string" ? body.model : undefined,
+    });
+    await enqueueCanvasImageTask(created.firstTaskId);
+
+    if (pointsCharge.chargeable) {
+      try {
+        await pointsCharge.consume({
+          note: `批量排版替换 ${sources.length} 张（${created.batchId}）`,
+        });
+      } catch (error) {
+        console.error("[Points] Failed to consume layout batch points:", error);
+      }
+    }
+
+    return NextResponse.json({
+      success: true,
+      batchId: created.batchId,
+      firstTaskId: created.firstTaskId,
+      sourceCount: sources.length,
+      pointsCost: totalCost,
+    });
+  } catch (error) {
+    console.error("[Canvas Layout Replace Batch][POST] Error:", error);
+    return NextResponse.json(
+      {
+        success: false,
+        error: error instanceof Error ? error.message : "创建批次失败",
+      },
+      { status: 500 }
+    );
+  }
+}

app/api/canvas/layout-replace/route.ts

@@ -0,0 +1,124 @@
+import { NextResponse } from "next/server";
+import { auth } from "@/app/(auth)/auth";
+import {
+  createCanvasImageTask,
+  enqueueCanvasImageTask,
+} from "@/lib/canvas/image-task-queue";
+import { getPointsSystemConfig } from "@/lib/db/queries";
+import { prepareFeaturePointsCharge } from "@/lib/points/feature-charge";
+import { getImageToolCreditCost } from "@/lib/points/config";
+import type { CanvasLayoutReplaceTaskRequest } from "@/lib/canvas/layout-replace-task";
+
+export const maxDuration = 1200;
+
+function normalizeHttpUrl(value: unknown) {
+  const url = String(value || "").trim();
+  return /^https?:\/\//i.test(url) ? url : "";
+}
+
+function normalizeUuid(value: unknown) {
+  const uuid = String(value || "").trim();
+  return /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(uuid)
+    ? uuid
+    : undefined;
+}
+
+export async function POST(request: Request) {
+  try {
+    const session = await auth();
+    if (!session?.user?.id) {
+      return NextResponse.json(
+        { success: false, error: "未登录" },
+        { status: 401 },
+      );
+    }
+
+    const body = await request.json().catch(() => ({}));
+    const sourceImageUrl = normalizeHttpUrl(body?.sourceImageUrl);
+    const referenceImageUrl = normalizeHttpUrl(body?.referenceImageUrl);
+    if (!sourceImageUrl) {
+      return NextResponse.json(
+        { success: false, error: "缺少当前产品图片" },
+        { status: 400 },
+      );
+    }
+    if (!referenceImageUrl) {
+      return NextResponse.json(
+        { success: false, error: "缺少排版参考图" },
+        { status: 400 },
+      );
+    }
+
+    const pointsConfig = await getPointsSystemConfig();
+    const pointsCharge = await prepareFeaturePointsCharge({
+      userId: session.user.id,
+      unitCost: getImageToolCreditCost(pointsConfig, "repaint"),
+      reason: "image_repaint",
+      modelId: "canvas-layout-replace",
+      note: "排版替换消耗积分",
+      pointsConfig,
+    });
+    if (!pointsCharge.ok) {
+      return NextResponse.json(pointsCharge.payload, {
+        status: pointsCharge.status,
+      });
+    }
+
+    const taskRequest: CanvasLayoutReplaceTaskRequest = {
+      taskKind: "canvas-layout-replace",
+      sourceImageUrl,
+      referenceImageUrl,
+      supplementalPrompt:
+        typeof body?.supplementalPrompt === "string"
+          ? body.supplementalPrompt
+          : undefined,
+      model: typeof body?.model === "string" ? body.model : undefined,
+      imageSize:
+        typeof body?.imageSize === "string" && body.imageSize.trim()
+          ? body.imageSize.trim()
+          : "2K",
+      sourceNodeId:
+        typeof body?.sourceNodeId === "string" ? body.sourceNodeId : undefined,
+      agentProjectId: normalizeUuid(body?.agentProjectId),
+      referenceLabel:
+        typeof body?.referenceLabel === "string" ? body.referenceLabel : undefined,
+      debugMeta:
+        body?.debugMeta &&
+        typeof body.debugMeta === "object" &&
+        !Array.isArray(body.debugMeta)
+          ? body.debugMeta
+          : undefined,
+    };
+
+    const task = await createCanvasImageTask({
+      userId: session.user.id,
+      request: taskRequest as unknown as Record<string, unknown>,
+    });
+    await enqueueCanvasImageTask(task.id);
+
+    if (pointsCharge.chargeable) {
+      try {
+        await pointsCharge.consume({
+          note: `排版替换消耗积分（${task.id}）`,
+        });
+      } catch (pointsError) {
+        console.error("[Points] Failed to consume canvas layout replace points:", pointsError);
+      }
+    }
+
+    return NextResponse.json({
+      success: true,
+      taskId: task.id,
+      status: task.status,
+    });
+  } catch (error) {
+    console.error("[Canvas Layout Replace] Error:", error);
+    return NextResponse.json(
+      {
+        success: false,
+        error: error instanceof Error ? error.message : "排版替换提交失败",
+      },
+      { status: 500 },
+    );
+  }
+}

app/api/canvas/text-edit/route.ts

@@ -29,8 +29,9 @@ export const runtime = "nodejs";
 export const maxDuration = 1200;
 
 const logger = createLogger("canvas-text-edit");
-const TEXT_EDIT_SOURCE_ARCHIVE_TIMEOUT_MS = 20_000;
+const TEXT_EDIT_SOURCE_ARCHIVE_TIMEOUT_MS = 120_000;
 const TEXT_EDIT_MODEL_FALLBACK_LIMIT = 3;
+const TEXT_EDIT_GENERATION_TIMEOUT_MS = 180_000;
 
 const textItemSchema = z.object({
   id: z.string().min(1),
@@ -68,6 +69,13 @@ const SUPPORTED_TEXT_EDIT_PROVIDER_TYPES = new Set([
 
 type TextEditModelCandidate = Awaited<ReturnType<typeof getEnabledAiModelsWithProvider>>[number];
 
+function isExplicitTextEditModel(candidate: TextEditModelCandidate) {
+  const capabilities = candidate.model.capabilities as Record<string, unknown> | null;
+  const kind = String(capabilities?.kind || "").toLowerCase();
+  const modelId = String(candidate.model.modelId || "").toLowerCase();
+  return kind === "image-edit" || /(?:^|[/_-])edit(?:$|[/_-])/.test(modelId);
+}
+
 function getTextEditModelCandidates(
   models: Awaited<ReturnType<typeof getEnabledAiModelsWithProvider>>
 ) {
@@ -82,16 +90,19 @@ function getTextEditModelCandidates(
         }) &&
         item.model.isEnabled &&
         item.provider.isEnabled &&
+        (!item.model.excludeFromFailover || item.model.isDefaultTextEditModel) &&
         SUPPORTED_TEXT_EDIT_PROVIDER_TYPES.has(item.provider.type),
     )
     .sort((a, b) => {
       const aScore =
         (a.model.isDefaultTextEditModel ? 100 : 0) +
+        (isExplicitTextEditModel(a) ? 30 : 0) +
         (a.model.isDefault ? 10 : 0) +
         (a.model.modelId?.toLowerCase().includes("seedream") ? 5 : 0) +
         (a.model.displayName?.includes("火山") ? 3 : 0);
       const bScore =
         (b.model.isDefaultTextEditModel ? 100 : 0) +
+        (isExplicitTextEditModel(b) ? 30 : 0) +
         (b.model.isDefault ? 10 : 0) +
         (b.model.modelId?.toLowerCase().includes("seedream") ? 5 : 0) +
         (b.model.displayName?.includes("火山") ? 3 : 0);
@@ -220,6 +231,13 @@ async function resolveTextEditSourceImageUrl(imageUrl: string) {
   } catch (error) {
     logger.warn("source_image_archive_failed", {
       error: error instanceof Error ? error.message : String(error),
+      sourceHost: (() => {
+        try {
+          return new URL(imageUrl).host;
+        } catch {
+          return "invalid-url";
+        }
+      })(),
     });
     return imageUrl;
   }
@@ -495,6 +513,7 @@ async function generateTextEditImageWithFailover(params: {
         ],
         imageParams: {
           imageCount: 1,
+          timeoutMs: TEXT_EDIT_GENERATION_TIMEOUT_MS,
         },
       };
       if (selected.provider.type === "atlascloud" || selected.provider.type === "vip98k") {

app/api/canvas/video-agent/route.ts

@@ -0,0 +1,78 @@
+import { NextResponse } from "next/server";
+import { z } from "zod";
+import { auth } from "@/app/(auth)/auth";
+import { getChatById, getMessagesByChatId } from "@/lib/db/queries";
+import {
+  readOwnedVideoCanvas,
+  saveVideoAgentCanvas,
+} from "@/lib/ai/canvas-agent-runtime/video-store";
+import { AgentRunError } from "@/lib/ai/canvas-agent-runtime/store";
+import { publicAgentError } from "@/lib/ai/canvas-agent-runtime/protocol";
+
+export const dynamic = "force-dynamic";
+export async function GET(request: Request) {
+  const session = await auth();
+  if (!session?.user?.id) return NextResponse.json({ error: "未登录" }, { status: 401 });
+  try {
+    const projectId = z.string().uuid().parse(new URL(request.url).searchParams.get("projectId"));
+    await readOwnedVideoCanvas(session.user.id, projectId);
+    // One stable conversation per video workspace survives browser reloads.
+    const chat = await getChatById({ id: projectId });
+    if (chat && chat.userId !== session.user.id) throw new AgentRunError("对话不存在", 404);
+    const messages = chat ? (await getMessagesByChatId({ id: projectId })).slice(-40) : [];
+    return NextResponse.json(
+      { messages: messages.map(({ id, role, parts }) => ({ id, role, parts })) },
+      { headers: { "Cache-Control": "private, no-store" } },
+    );
+  } catch (error) {
+    return NextResponse.json(
+      { error: publicAgentError(error) },
+      {
+        status:
+          error instanceof AgentRunError ? error.status : error instanceof z.ZodError ? 400 : 503,
+      },
+    );
+  }
+}
+
+const saveSchema = z.object({
+  projectId: z.string().uuid(),
+  baseRevision: z.string().datetime(),
+  canvasData: z.object({
+    nodes: z.array(z.record(z.unknown())).max(2000),
+    edges: z
+      .array(
+        z.object({
+          id: z.string(),
+          source: z.string(),
+          target: z.string(),
+          type: z.string().optional(),
+        }),
+      )
+      .max(4000),
+    selectedNodeIds: z.array(z.string()).max(20),
+    viewport: z.object({
+      x: z.number().finite(),
+      y: z.number().finite(),
+      zoom: z.number().positive(),
+    }),
+    tool: z.literal("select"),
+  }),
+});
+export async function POST(request: Request) {
+  const session = await auth();
+  if (!session?.user?.id) return NextResponse.json({ error: "未登录" }, { status: 401 });
+  try {
+    const body = saveSchema.parse(await request.json());
+    await saveVideoAgentCanvas(session.user.id, body.projectId, body.baseRevision, body.canvasData);
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    return NextResponse.json(
+      { error: publicAgentError(error) },
+      {
+        status:
+          error instanceof AgentRunError ? error.status : error instanceof z.ZodError ? 400 : 503,
+      },
+    );
+  }
+}

app/api/canvas/world/tasks/[taskId]/route.ts

@@ -190,6 +190,48 @@ function assertArchivedAssetBuffer(params: {
   }
 }
 
+async function verifyArchivedAssetUpload(params: {
+  url: string;
+  expectedBytes: number;
+  validateAs?: ArchiveValidationKind;
+}) {
+  const headResponse = await fetch(params.url, {
+    method: "HEAD",
+    cache: "no-store",
+  });
+  if (!headResponse.ok) {
+    throw new Error(`归档文件校验失败（HTTP ${headResponse.status}）`);
+  }
+
+  const archivedLength = Number(headResponse.headers.get("content-length"));
+  if (
+    Number.isFinite(archivedLength) &&
+    archivedLength > 0 &&
+    archivedLength !== params.expectedBytes
+  ) {
+    throw new Error(
+      `归档文件大小不一致（源文件 ${params.expectedBytes}，归档文件 ${archivedLength}）`
+    );
+  }
+
+  if (!params.validateAs) return;
+
+  const rangeResponse = await fetch(params.url, {
+    method: "GET",
+    headers: { Range: "bytes=0-63" },
+    cache: "no-store",
+  });
+  if (!rangeResponse.ok) {
+    throw new Error(`归档文件头校验失败（HTTP ${rangeResponse.status}）`);
+  }
+  const headerBuffer = await rangeResponse.arrayBuffer();
+  assertArchivedAssetBuffer({
+    buffer: headerBuffer,
+    contentType: rangeResponse.headers.get("content-type"),
+    validateAs: params.validateAs,
+  });
+}
+
 async function archiveRemoteAssetIfNeeded(params: {
   cacheKey: string;
   sourceUrl?: string | null;
@@ -249,6 +291,11 @@ async function archiveRemoteAssetIfNeeded(params: {
       );
       const filename = `${params.filenamePrefix}.${ext}`;
       const uploaded = await uploadFile(filename, assetBuffer);
+      await verifyArchivedAssetUpload({
+        url: uploaded.url,
+        expectedBytes: assetBuffer.byteLength,
+        validateAs: params.validateAs,
+      });
       cache.set(params.cacheKey, {
         sourceUrl,
         archivedUrl: uploaded.url,
@@ -299,7 +346,8 @@ async function archiveRemoteAssetMapIfNeeded(params: {
     )
   ).filter((entry): entry is readonly [string, string] => Boolean(entry));
 
-  return archivedEntries.length > 0 ? Object.fromEntries(archivedEntries) : null;
+  if (archivedEntries.length !== entries.length) return null;
+  return Object.fromEntries(archivedEntries);
 }
 
 function getStringValue(...values: unknown[]) {
@@ -368,33 +416,96 @@ async function updatePersistedWorldAsset(params: {
 function extractWorldId(operation: WorldLabsOperation) {
   const response = getObjectValue(operation.response);
   const metadata = getObjectValue(operation.metadata);
-  return getStringValue(
-    response?.world_id,
-    response?.worldId,
-    metadata?.world_id,
-    metadata?.worldId
-  );
+  const nestedWorldId =
+    getStringValue(response?.world_id, response?.worldId) ||
+    findNestedString(response, ["world_id", "worldId"]);
+  const metadataWorldId =
+    getStringValue(metadata?.world_id, metadata?.worldId) ||
+    findNestedString(metadata, ["world_id", "worldId"]);
+
+  return getStringValue(nestedWorldId, metadataWorldId);
+}
+
+function isWorldLikePayload(value: unknown): value is WorldLabsWorld {
+  const record = getObjectValue(value);
+  if (!record) return false;
+
+  const hasCoreWorldField =
+    typeof record.world_id === "string" ||
+    typeof record.world_marble_url === "string" ||
+    typeof record.display_name === "string" ||
+    typeof record.worldId === "string";
+  const hasPossibleWorldContainerFields = record.assets || record.permission || record.tags || record.world_prompt;
+  const hasModelAliasOnly =
+    typeof record.model === "string" && /world/i.test(record.model);
+
+  return Boolean(hasCoreWorldField || hasPossibleWorldContainerFields || hasModelAliasOnly);
+}
+
+function extractWorldCandidate(value: unknown, depth = 0): WorldLabsWorld | null {
+  if (depth > 8) return null;
+  const record = getObjectValue(value);
+  if (!record) return null;
+
+  if (isWorldLikePayload(record)) return record;
+
+  const childCandidates: Array<Record<string, unknown> | null> = [
+    getObjectValue(record.world),
+    getObjectValue(record.result),
+    getObjectValue(record.output),
+    getObjectValue(record.data),
+    getObjectValue(record.payload),
+  ];
+
+  for (const child of childCandidates) {
+    if (!child) continue;
+    if (isWorldLikePayload(child)) return child;
+    const nested = extractWorldCandidate(child, depth + 1);
+    if (nested) return nested;
+  }
+
+  for (const child of Object.values(record)) {
+    const nested = extractWorldCandidate(child, depth + 1);
+    if (nested) return nested;
+  }
+
+  return null;
 }
 
 function extractWorldFromOperation(operation: WorldLabsOperation) {
-  const response = operation.response;
-  if (response && typeof response === "object" && "world_marble_url" in (response as Record<string, unknown>)) {
-    return response as WorldLabsWorld;
-  }
-  return null;
+  return extractWorldCandidate(operation.response);
 }
 
 function hasUsableWorldAssets(world?: WorldLabsWorld | null) {
   const assets = world?.assets || null;
   if (!assets) return false;
-  const spzUrls = assets.splats?.spz_urls;
+  const meshRecord = getObjectValue(assets.mesh);
+  const imageryRecord = getObjectValue(assets.imagery);
+  const splatsRecord = getObjectValue(assets.splats);
+  const spzUrls =
+    splatsRecord?.spz_urls || splatsRecord?.spzUrls || splatsRecord?.splat_urls;
   return Boolean(
     getStringValue(assets.thumbnail_url) ||
-      getStringValue(assets.imagery?.pano_url) ||
-      getStringValue(assets.mesh?.collider_mesh_url) ||
+      getStringValue(
+        imageryRecord?.pano_url,
+        imageryRecord?.panoUrl,
+        imageryRecord?.panorama_url,
+        imageryRecord?.panoramaUrl
+      ) ||
+      getStringValue(
+        meshRecord?.collider_mesh_url,
+        meshRecord?.colliderMeshUrl,
+        meshRecord?.collider_mesh,
+        meshRecord?.mesh_url,
+        meshRecord?.meshUrl,
+        meshRecord?.model_url,
+        meshRecord?.modelUrl
+      ) ||
       (spzUrls &&
         typeof spzUrls === "object" &&
-        Object.values(spzUrls).some((value) => typeof value === "string" && value.trim()))
+        Object.values(spzUrls).some(
+          (value) => typeof value === "string" && value.trim()
+        ))
   );
 }
 
@@ -667,185 +778,224 @@ export async function GET(request: Request, { params }: RouteParams) {
     });
     providerForLog = config.providerId || null;
     const modelAliasConfig = await getThreeDModelAliasConfigForRuntime();
-    const persistedAssetPayload =
+    let persistedAssetPayload =
       getObjectValue(persistedWorldAsset?.assetPayload) || {};
-    const shouldUseExternalTaskResultApi =
+    let shouldUseExternalTaskResultApi =
       isWorldLabsExternalTaskApi(config.baseUrl) &&
       persistedAssetPayload.externalTaskApi !== false &&
       persistedAssetPayload.marbleApi !== true;
     if (shouldUseExternalTaskResultApi) {
-      const externalPayload = await worldLabsRequest<
-        WorldLabsExternalTaskResponse<WorldLabsExternalTaskResultData>
-      >(config, {
-        method: "GET",
-        path: `/api/external/task/result?taskId=${encodeURIComponent(normalizedTaskId)}`,
-        timeoutMs: resolveWorldLabsStatusTimeoutMs(),
-      });
-      const externalData =
-        unwrapExternalTaskData<WorldLabsExternalTaskResultData>(externalPayload);
-      const externalStatusText = getStringValue(externalData.status) || "running";
-      const externalStatus = normalizeExternalTaskStatus(
-        externalStatusText,
-        externalData.done === true
-      );
-      const externalAssetPayloadBase = {
-        ...persistedAssetPayload,
-        providerId: config.providerId || null,
-        providerName: config.providerName || null,
-        externalTaskApi: true,
-        externalTaskStatus: externalStatusText,
-        requestId: getStringValue(externalPayload.requestId, externalPayload.request_id),
-      };
-
-      if (externalStatus === "running") {
-        return NextResponse.json({
-          success: true,
-          data: {
-            taskId: normalizedTaskId,
-            type: "world",
-            status: "running",
-            progress: null,
-            output: externalData,
-            assetPayload: externalAssetPayloadBase,
-          },
+      try {
+        const externalPayload = await worldLabsRequest<
+          WorldLabsExternalTaskResponse<WorldLabsExternalTaskResultData>
+        >(config, {
+          method: "GET",
+          path: `/api/external/task/result?taskId=${encodeURIComponent(normalizedTaskId)}`,
+          timeoutMs: resolveWorldLabsStatusTimeoutMs(),
         });
-      }
-
-      if (externalStatus === "failed") {
-        const errorMessage = extractExternalTaskErrorMessage(
-          externalData,
-          externalPayload
+        const externalData =
+          unwrapExternalTaskData<WorldLabsExternalTaskResultData>(externalPayload);
+        const externalStatusText = getStringValue(externalData.status) || "running";
+        const externalStatus = normalizeExternalTaskStatus(
+          externalStatusText,
+          externalData.done === true
         );
+        const externalAssetPayloadBase = {
+          ...persistedAssetPayload,
+          providerId: config.providerId || null,
+          providerName: config.providerName || null,
+          externalTaskApi: true,
+          externalTaskStatus: externalStatusText,
+          requestId: getStringValue(externalPayload.requestId, externalPayload.request_id),
+        };
+
+        if (externalStatus === "running") {
+          return NextResponse.json({
+            success: true,
+            data: {
+              taskId: normalizedTaskId,
+              type: "world",
+              status: "running",
+              progress: null,
+              output: externalData,
+              assetPayload: externalAssetPayloadBase,
+            },
+          });
+        }
+
+        if (externalStatus === "failed") {
+          const errorMessage = extractExternalTaskErrorMessage(
+            externalData,
+            externalPayload
+          );
+          await updatePersistedWorldAsset({
+            id: persistedWorldAsset?.id,
+            status: "failed",
+            progress: null,
+            error: errorMessage,
+            assetPayload: externalAssetPayloadBase,
+          });
+          logger.warn("external task failed status", {
+            elapsedMs: Date.now() - startedAt,
+            taskIdLength: normalizedTaskId.length,
+            providerId: config.providerId || null,
+            error: errorMessage,
+          });
+          return NextResponse.json({
+            success: true,
+            data: {
+              taskId: normalizedTaskId,
+              type: "world",
+              status: "failed",
+              progress: null,
+              errorMessage,
+              output: externalData,
+              assetPayload: externalAssetPayloadBase,
+            },
+          });
+        }
+        const extractedAssetPayload = extractExternalWorldAssetPayload(externalData);
+        const rawMeshUrl = extractedAssetPayload.meshUrl;
+        const rawThumbnailUrl = extractedAssetPayload.thumbnailUrl;
+        const rawPanoUrl = extractedAssetPayload.panoUrl;
+        const stableWorldUrl: string | null = null;
+        const stableModelUrl = await archiveRemoteAssetIfNeeded({
+          cacheKey: `worldlabs:${normalizedTaskId}:mesh`,
+          sourceUrl: rawMeshUrl,
+          filenamePrefix: `worldlabs-mesh-${normalizedTaskId}`,
+          fallbackExtension: "glb",
+          validateAs: "glb",
+        });
+        const stableThumbnailUrl = await archiveRemoteAssetIfNeeded({
+          cacheKey: `worldlabs:${normalizedTaskId}:thumb`,
+          sourceUrl: rawThumbnailUrl,
+          filenamePrefix: `worldlabs-thumb-${normalizedTaskId}`,
+          fallbackExtension: "jpg",
+        });
+        const stablePanoUrl = await archiveRemoteAssetIfNeeded({
+          cacheKey: `worldlabs:${normalizedTaskId}:pano`,
+          sourceUrl: rawPanoUrl,
+          filenamePrefix: `worldlabs-pano-${normalizedTaskId}`,
+          fallbackExtension: "jpg",
+        });
+        const stableSpzUrls = await archiveRemoteAssetMapIfNeeded({
+          cacheKeyPrefix: `worldlabs:${normalizedTaskId}:spz`,
+          sourceMap: extractedAssetPayload.spzUrls,
+          filenamePrefix: `worldlabs-splat-${normalizedTaskId}`,
+          fallbackExtension: "spz",
+          validateAs: "spz",
+        });
+        const sourceSpzEntryCount = Object.keys(
+          extractedAssetPayload.spzUrls || {}
+        ).length;
+        const stableSpzEntryCount = Object.keys(stableSpzUrls || {}).length;
+        const assetsArchivingPending = Boolean(
+          (rawMeshUrl && !stableModelUrl) ||
+            (rawThumbnailUrl && !stableThumbnailUrl) ||
+            (rawPanoUrl && !stablePanoUrl) ||
+            (sourceSpzEntryCount > 0 && stableSpzEntryCount !== sourceSpzEntryCount)
+        );
+        const storageArchivedAt = assetsArchivingPending
+          ? null
+          : new Date().toISOString();
+        const assetPayload = {
+          ...externalAssetPayloadBase,
+          worldId: extractedAssetPayload.worldId,
+          worldUrl: stableWorldUrl,
+          displayName: extractedAssetPayload.displayName,
+          model: resolveThreeDModelAliasId(
+            extractedAssetPayload.model,
+            modelAliasConfig.worldModels
+          ),
+          caption: extractedAssetPayload.caption,
+          thumbnailUrl: stableThumbnailUrl || extractedAssetPayload.thumbnailUrl,
+          panoUrl: stablePanoUrl || extractedAssetPayload.panoUrl,
+          meshUrl: stableModelUrl,
+          spzUrls: stableSpzUrls,
+          semanticsMetadata: extractedAssetPayload.semanticsMetadata,
+          spzArchiveValidatedAt: stableSpzUrls ? storageArchivedAt : null,
+          storageArchivedAt,
+          assetsArchivingPending,
+          sourceWorldUrl: extractedAssetPayload.worldUrl || null,
+          sourceMeshUrl:
+            rawMeshUrl && stableModelUrl && rawMeshUrl !== stableModelUrl
+              ? rawMeshUrl
+              : null,
+          sourceThumbnailUrl:
+            rawThumbnailUrl && stableThumbnailUrl && rawThumbnailUrl !== stableThumbnailUrl
+              ? rawThumbnailUrl
+              : null,
+          sourcePanoUrl:
+            rawPanoUrl && stablePanoUrl && rawPanoUrl !== stablePanoUrl
+              ? rawPanoUrl
+              : null,
+          sourceSpzUrls:
+            extractedAssetPayload.spzUrls &&
+            stableSpzUrls !== extractedAssetPayload.spzUrls
+              ? extractedAssetPayload.spzUrls
+              : null,
+        };
+
         await updatePersistedWorldAsset({
           id: persistedWorldAsset?.id,
-          status: "failed",
-          progress: null,
-          error: errorMessage,
-          assetPayload: externalAssetPayloadBase,
+          status: "success",
+          progress: 100,
+          modelUrl: stableModelUrl,
+          previewImageUrl: stableThumbnailUrl || stablePanoUrl || null,
+          error: null,
+          assetPayload,
         });
-        logger.warn("external task failed status", {
+
+        logger.info("external task success status", {
           elapsedMs: Date.now() - startedAt,
           taskIdLength: normalizedTaskId.length,
           providerId: config.providerId || null,
-          error: errorMessage,
+          hasMesh: Boolean(stableModelUrl),
+          hasPano: Boolean(stablePanoUrl),
+          hasThumbnail: Boolean(stableThumbnailUrl),
+          hasSplat: Boolean(stableSpzUrls && Object.keys(stableSpzUrls).length > 0),
+          assetsArchivingPending,
         });
+
         return NextResponse.json({
           success: true,
           data: {
             taskId: normalizedTaskId,
             type: "world",
-            status: "failed",
-            progress: null,
-            errorMessage,
+            status: "success",
+            progress: 100,
             output: externalData,
-            assetPayload: externalAssetPayloadBase,
+            modelUrl: stableModelUrl,
+            previewImageUrl: stableThumbnailUrl || stablePanoUrl || null,
+            worldId: assetPayload.worldId,
+            worldUrl: stableWorldUrl,
+            panoUrl: stablePanoUrl,
+            caption: assetPayload.caption,
+            assetPayload,
           },
         });
+      } catch (error) {
+        const fallbackAssetPayload = {
+          ...persistedAssetPayload,
+          providerId: config.providerId || null,
+          providerName: config.providerName || null,
+          marbleApi: true,
+          externalTaskApi: false,
+        };
+        shouldUseExternalTaskResultApi = false;
+        persistedAssetPayload = fallbackAssetPayload;
+        await updatePersistedWorldAsset({
+          id: persistedWorldAsset?.id,
+          status: "running",
+          assetPayload: fallbackAssetPayload,
+        }).catch(() => {});
+        logger.warn("external task result failed, fallback to marble status", {
+          elapsedMs: Date.now() - startedAt,
+          taskIdLength: normalizedTaskId.length,
+          providerId: config.providerId || null,
+          error: error instanceof Error ? error.message : String(error),
+        });
       }
-
-      const extractedAssetPayload = extractExternalWorldAssetPayload(externalData);
-      const rawMeshUrl = extractedAssetPayload.meshUrl;
-      const rawThumbnailUrl = extractedAssetPayload.thumbnailUrl;
-      const rawPanoUrl = extractedAssetPayload.panoUrl;
-      const stableWorldUrl: string | null = null;
-      const stableModelUrl = await archiveRemoteAssetIfNeeded({
-        cacheKey: `worldlabs:${normalizedTaskId}:mesh`,
-        sourceUrl: rawMeshUrl,
-        filenamePrefix: `worldlabs-mesh-${normalizedTaskId}`,
-        fallbackExtension: "glb",
-        validateAs: "glb",
-      });
-      const stableThumbnailUrl = await archiveRemoteAssetIfNeeded({
-        cacheKey: `worldlabs:${normalizedTaskId}:thumb`,
-        sourceUrl: rawThumbnailUrl,
-        filenamePrefix: `worldlabs-thumb-${normalizedTaskId}`,
-        fallbackExtension: "jpg",
-      });
-      const stablePanoUrl = await archiveRemoteAssetIfNeeded({
-        cacheKey: `worldlabs:${normalizedTaskId}:pano`,
-        sourceUrl: rawPanoUrl,
-        filenamePrefix: `worldlabs-pano-${normalizedTaskId}`,
-        fallbackExtension: "jpg",
-      });
-      const stableSpzUrls = await archiveRemoteAssetMapIfNeeded({
-        cacheKeyPrefix: `worldlabs:${normalizedTaskId}:spz`,
-        sourceMap: extractedAssetPayload.spzUrls,
-        filenamePrefix: `worldlabs-splat-${normalizedTaskId}`,
-        fallbackExtension: "spz",
-        validateAs: "spz",
-      });
-      const assetPayload = {
-        ...externalAssetPayloadBase,
-        worldId: extractedAssetPayload.worldId,
-        worldUrl: stableWorldUrl,
-        displayName: extractedAssetPayload.displayName,
-        model: resolveThreeDModelAliasId(
-          extractedAssetPayload.model,
-          modelAliasConfig.worldModels
-        ),
-        caption: extractedAssetPayload.caption,
-        thumbnailUrl: stableThumbnailUrl || extractedAssetPayload.thumbnailUrl,
-        panoUrl: stablePanoUrl || extractedAssetPayload.panoUrl,
-        meshUrl: stableModelUrl,
-        spzUrls: stableSpzUrls,
-        semanticsMetadata: extractedAssetPayload.semanticsMetadata,
-        storageArchivedAt: new Date().toISOString(),
-        sourceWorldUrl: extractedAssetPayload.worldUrl || null,
-        sourceMeshUrl:
-          rawMeshUrl && stableModelUrl && rawMeshUrl !== stableModelUrl
-            ? rawMeshUrl
-            : null,
-        sourceThumbnailUrl:
-          rawThumbnailUrl && stableThumbnailUrl && rawThumbnailUrl !== stableThumbnailUrl
-            ? rawThumbnailUrl
-            : null,
-        sourcePanoUrl:
-          rawPanoUrl && stablePanoUrl && rawPanoUrl !== stablePanoUrl
-            ? rawPanoUrl
-            : null,
-        sourceSpzUrls:
-          extractedAssetPayload.spzUrls && stableSpzUrls !== extractedAssetPayload.spzUrls
-            ? extractedAssetPayload.spzUrls
-            : null,
-      };
-
-      await updatePersistedWorldAsset({
-        id: persistedWorldAsset?.id,
-        status: "success",
-        progress: 100,
-        modelUrl: stableModelUrl,
-        previewImageUrl: stableThumbnailUrl || stablePanoUrl || null,
-        error: null,
-        assetPayload,
-      });
-
-      logger.info("external task success status", {
-        elapsedMs: Date.now() - startedAt,
-        taskIdLength: normalizedTaskId.length,
-        providerId: config.providerId || null,
-        hasMesh: Boolean(stableModelUrl),
-        hasPano: Boolean(stablePanoUrl),
-        hasThumbnail: Boolean(stableThumbnailUrl),
-        hasSplat: Boolean(stableSpzUrls && Object.keys(stableSpzUrls).length > 0),
-      });
-
-      return NextResponse.json({
-        success: true,
-        data: {
-          taskId: normalizedTaskId,
-          type: "world",
-          status: "success",
-          progress: 100,
-          output: externalData,
-          modelUrl: stableModelUrl,
-          previewImageUrl: stableThumbnailUrl || stablePanoUrl || null,
-          worldId: assetPayload.worldId,
-          worldUrl: stableWorldUrl,
-          panoUrl: stablePanoUrl,
-          caption: assetPayload.caption,
-          assetPayload,
-        },
-      });
     }
 
     const operation = await worldLabsRequest<WorldLabsOperation>(config, {
@@ -908,22 +1058,68 @@ export async function GET(request: Request, { params }: RouteParams) {
     let world = extractWorldFromOperation(operation);
     const worldId = extractWorldId(operation);
     if ((!world || !hasUsableWorldAssets(world)) && worldId) {
-      const detailedWorld = await worldLabsRequest<WorldLabsWorld>(config, {
-        method: "GET",
-        path: `/marble/v1/worlds/${encodeURIComponent(worldId)}`,
-        timeoutMs: resolveWorldLabsStatusTimeoutMs(),
-      });
-      world = world
-        ? {
-            ...world,
-            ...detailedWorld,
-            assets: detailedWorld.assets || world.assets || null,
-          }
-        : detailedWorld;
+      try {
+        const detailedWorld = await worldLabsRequest<WorldLabsWorld>(config, {
+          method: "GET",
+          path: `/marble/v1/worlds/${encodeURIComponent(worldId)}`,
+          timeoutMs: resolveWorldLabsStatusTimeoutMs(),
+        });
+        world = world
+          ? {
+              ...world,
+              ...detailedWorld,
+              assets: detailedWorld.assets || world.assets || null,
+            }
+          : detailedWorld;
+      } catch (error) {
+        logger.warn("world detail fetch failed, retry with running status", {
+          elapsedMs: Date.now() - startedAt,
+          taskIdLength: normalizedTaskId.length,
+          providerId: config.providerId || null,
+          worldId,
+          error: error instanceof Error ? error.message : "unknown",
+        });
+      }
     }
 
     if (!world) {
-      throw new Error("World Labs 任务已完成，但未返回 world 数据");
+      const pendingPayload = {
+        ...(getObjectValue(persistedWorldAsset?.assetPayload) || {}),
+        providerId: config.providerId || null,
+        providerName: config.providerName || null,
+        worldId: worldId || null,
+        worldUrl: null,
+        displayName: null,
+        model: null,
+        assetsPending: true,
+        operationMetadata: operation.metadata ?? null,
+      };
+      await updatePersistedWorldAsset({
+        id: persistedWorldAsset?.id,
+        status: "running",
+        progress: 95,
+        assetPayload: pendingPayload,
+      });
+      logger.warn("task completed but world payload is missing", {
+        elapsedMs: Date.now() - startedAt,
+        taskIdLength: normalizedTaskId.length,
+        providerId: config.providerId || null,
+        worldId: worldId || null,
+      });
+      return NextResponse.json({
+        success: true,
+        data: {
+          taskId: normalizedTaskId,
+          type: "world",
+          status: "running",
+          progress: 95,
+          output: operation.response ?? null,
+          worldId: worldId || null,
+          worldUrl: null,
+          previewImageUrl: null,
+          assetPayload: pendingPayload,
+        },
+      });
     }
 
     if (!hasUsableWorldAssets(world)) {
@@ -1039,24 +1235,15 @@ export async function GET(request: Request, { params }: RouteParams) {
       : 0;
     const hasMissingSpzArchive =
       rawSpzUrls.length > 0 && stableSpzEntryCount < rawSpzUrls.length;
-    const storageArchivedAt =
-      [
-        [rawWorldUrl, stableWorldUrl],
-        [rawMeshUrl, stableModelUrl],
-        [rawThumbnailUrl, stableThumbnailUrl],
-        [rawPanoUrl, stablePanoUrl],
-      ].some(([rawUrl, stableUrl]) => rawUrl && stableUrl && rawUrl !== stableUrl) ||
-      Boolean(
-        stableSpzUrls &&
-          assetPayload.spzUrls &&
-          Object.entries(stableSpzUrls).some(
-            ([key, value]) =>
-              typeof assetPayload.spzUrls?.[key] === "string" &&
-              assetPayload.spzUrls[key] !== value
-          )
-      )
-        ? new Date().toISOString()
-        : null;
+    const assetsArchivingPending = Boolean(
+      (rawMeshUrl && !stableModelUrl) ||
+        (rawThumbnailUrl && !stableThumbnailUrl) ||
+        (rawPanoUrl && !stablePanoUrl) ||
+        hasMissingSpzArchive
+    );
+    const storageArchivedAt = assetsArchivingPending
+      ? null
+      : new Date().toISOString();
 
     logger.info("task success status", {
       elapsedMs: Date.now() - startedAt,
@@ -1068,10 +1255,7 @@ export async function GET(request: Request, { params }: RouteParams) {
       hasThumbnail: Boolean(stableThumbnailUrl),
       hasSplat: Boolean(stableSpzUrls && Object.keys(stableSpzUrls).length > 0),
       storageArchivedAt,
-      assetsArchivingPending: Boolean(
-        (rawMeshUrl && !stableModelUrl) ||
-          hasMissingSpzArchive
-      ),
+      assetsArchivingPending,
     });
 
     const responseAssetPayload = {
@@ -1081,12 +1265,9 @@ export async function GET(request: Request, { params }: RouteParams) {
       panoUrl: stablePanoUrl || assetPayload.panoUrl,
       meshUrl: stableModelUrl,
       spzUrls: stableSpzUrls,
-      spzArchiveValidatedAt: stableSpzUrls ? new Date().toISOString() : null,
+      spzArchiveValidatedAt: stableSpzUrls ? storageArchivedAt : null,
       storageArchivedAt,
-      assetsArchivingPending: Boolean(
-        (rawMeshUrl && !stableModelUrl) ||
-          hasMissingSpzArchive
-      ),
+      assetsArchivingPending,
       sourceWorldUrl: rawWorldUrl || null,
       sourceMeshUrl:
         rawMeshUrl && stableModelUrl && rawMeshUrl !== stableModelUrl

app/api/canvas/world/tasks/route.ts

@@ -142,7 +142,27 @@ function shouldUseExternalTaskCreateApi(
   config: Awaited<ReturnType<typeof getWorldLabsProviderConfig>>,
   mode: WorldTaskMode
 ) {
-  return isWorldLabsExternalTaskApi(config.baseUrl) && mode === "text";
+  return isWorldLabsExternalTaskApi(config.baseUrl) && mode === "image";
+}
+
+function isWorldLabsModeUnsupportedByExternalProvider(
+  config: Awaited<ReturnType<typeof getWorldLabsProviderConfig>>,
+  mode: WorldTaskMode
+) {
+  return isWorldLabsExternalTaskApi(config.baseUrl) && mode !== "image";
+}
+
+function assertWorldModeSupportedByCandidate(
+  config: Awaited<ReturnType<typeof getWorldLabsProviderConfig>>,
+  mode: WorldTaskMode,
+) {
+  if (isWorldLabsModeUnsupportedByExternalProvider(config, mode)) {
+    const normalizedBaseUrl = String(config.baseUrl || "").trim() || "未知服务地址";
+    const normalizedMode = String(mode || "").trim() || "未知模式";
+    throw new Error(
+      `${normalizedBaseUrl} 的 world-generation 当前仅支持图生世界（image）。当前提交的是 ${normalizedMode}，请先切换供应商或使用图生世界。`
+    );
+  }
 }
 
 function resolveOfficialMarbleModel(model?: string | null) {
@@ -153,6 +173,49 @@ function resolveOfficialMarbleModel(model?: string | null) {
   return normalized;
 }
 
+function buildExternalWorldTaskPayload(
+  mode: WorldTaskMode,
+  worldPrompt: Record<string, unknown>,
+  prompt: string | null,
+  displayName: string,
+) {
+  const normalizedPrompt = readOptionalTrimmedText(prompt);
+  if (!normalizedPrompt && mode === "text") {
+    throw new Error("请输入世界描述");
+  }
+  const payload: Record<string, unknown> = {
+    model: WORLDLABS_EXTERNAL_TASK_MODEL,
+    displayName,
+  };
+  if (normalizedPrompt) {
+    payload.prompt = normalizedPrompt;
+  } else if (mode !== "text") {
+    payload.prompt = "图生世界";
+  }
+
+  if (mode === "image" || mode === "multi-image") {
+    payload.world_prompt = worldPrompt;
+  }
+
+  return payload;
+}
+
+function buildOfficialWorldTaskPayload(
+  displayName: string,
+  worldPrompt: Record<string, unknown>,
+  officialMarbleModel: string,
+  body: CreateWorldTaskRequest
+) {
+  return {
+    display_name: displayName,
+    model: officialMarbleModel,
+    permission: {
+      public: body.makePublic === true,
+    },
+    world_prompt: worldPrompt,
+  };
+}
+
 function buildWorldPrompt(body: CreateWorldTaskRequest, mode: WorldTaskMode) {
   const textPrompt = readOptionalTrimmedText(body.prompt);
 
@@ -356,41 +419,73 @@ export async function POST(request: Request) {
     for (const candidate of candidates) {
       try {
         const useExternalTaskApi = shouldUseExternalTaskCreateApi(candidate, mode);
+        assertWorldModeSupportedByCandidate(candidate, mode);
+        let requestUsedExternalTaskApi = false;
         if (useExternalTaskApi) {
-          const prompt = readOptionalTrimmedText(body.prompt);
-          if (!prompt) {
-            throw new Error("请输入世界描述");
+          const payload = buildExternalWorldTaskPayload(
+            mode,
+            worldPrompt,
+            readOptionalTrimmedText(body.prompt),
+            displayName,
+          );
+          try {
+            const externalResult = await worldLabsRequest<
+              WorldLabsExternalTaskResponse<WorldLabsExternalTaskCreateData>
+            >(candidate, {
+              method: "POST",
+              path: "/api/external/task/generate",
+              timeoutMs: resolveWorldLabsCreateTimeoutMs(),
+              json: payload,
+            });
+            result = normalizeExternalTaskCreateOperation(externalResult);
+            requestUsedExternalTaskApi = true;
+          } catch (error) {
+            const externalError = error instanceof Error ? error.message : String(error);
+            logger.warn("external world create failed, fallback to marble endpoint", {
+              providerId: candidate.providerId || null,
+              error: externalError,
+            });
+            if (isCredentialOrBillingProviderError(error)) {
+              await reportWorldLabsProviderRuntimeFailure(
+                candidate.providerId,
+                externalError
+              );
+            }
+
+            result = await worldLabsRequest<WorldLabsOperation>(candidate, {
+              method: "POST",
+              path: "/marble/v1/worlds:generate",
+              timeoutMs: resolveWorldLabsCreateTimeoutMs(),
+              json: buildOfficialWorldTaskPayload(
+                displayName,
+                worldPrompt,
+                officialMarbleModel,
+                body
+              ),
+            });
+            requestUsedExternalTaskApi = false;
           }
-          const externalResult = await worldLabsRequest<
-            WorldLabsExternalTaskResponse<WorldLabsExternalTaskCreateData>
-          >(candidate, {
-            method: "POST",
-            path: "/api/external/task/generate",
-            timeoutMs: resolveWorldLabsCreateTimeoutMs(),
-            json: {
-              model: WORLDLABS_EXTERNAL_TASK_MODEL,
-              displayName,
-              prompt,
-            },
-          });
-          result = normalizeExternalTaskCreateOperation(externalResult);
         } else {
+          requestUsedExternalTaskApi = false;
           result = await worldLabsRequest<WorldLabsOperation>(candidate, {
             method: "POST",
             path: "/marble/v1/worlds:generate",
             timeoutMs: resolveWorldLabsCreateTimeoutMs(),
-            json: {
-              display_name: displayName,
-              model: officialMarbleModel,
-              permission: {
-                public: body.makePublic === true,
-              },
-              world_prompt: worldPrompt,
-            },
+            json: buildOfficialWorldTaskPayload(
+              displayName,
+              worldPrompt,
+              officialMarbleModel,
+              body
+            ),
           });
         }
+
+        if (!result?.operation_id) {
+          throw new Error("创建 World Labs 世界任务返回缺少 operation_id");
+        }
+
         usedProvider = candidate;
-        usedExternalTaskApi = useExternalTaskApi;
+        usedExternalTaskApi = requestUsedExternalTaskApi;
         providerForLog = candidate.providerId || null;
         break;
       } catch (error) {

app/api/flow-board/_utils.ts

@@ -1,4 +1,8 @@
-import type { FlowBoardDraft, FlowBoardSnapshotData } from "@/lib/db/schema";
+import type {
+  FlowBoardDraft,
+  FlowBoardSheetSnapshotData,
+  FlowBoardSnapshotData,
+} from "@/lib/db/schema";
 
 export function isRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === "object" && value !== null && !Array.isArray(value);
@@ -8,6 +12,73 @@ function normalizeRecord(value: unknown): Record<string, unknown> | null {
   return isRecord(value) ? value : null;
 }
 
+const DEFAULT_FLOW_BOARD_CANVAS = {
+  backgroundColor: "#f7f8fb",
+  gridColor: "#d8dde8",
+  gridEnabled: false,
+  gridSize: 24,
+};
+
+function normalizeCanvasColor(value: unknown, fallback: string) {
+  return typeof value === "string" && /^#[0-9a-f]{6}$/i.test(value)
+    ? value.toLowerCase()
+    : fallback;
+}
+
+function normalizeFlowBoardCanvas(value: unknown): Record<string, unknown> {
+  const canvas = isRecord(value) ? value : {};
+  const requestedGridSize =
+    typeof canvas.gridSize === "number" && Number.isFinite(canvas.gridSize)
+      ? Math.round(canvas.gridSize)
+      : DEFAULT_FLOW_BOARD_CANVAS.gridSize;
+
+  return {
+    backgroundColor: normalizeCanvasColor(
+      canvas.backgroundColor,
+      DEFAULT_FLOW_BOARD_CANVAS.backgroundColor
+    ),
+    gridColor: normalizeCanvasColor(
+      canvas.gridColor,
+      DEFAULT_FLOW_BOARD_CANVAS.gridColor
+    ),
+    gridEnabled:
+      typeof canvas.gridEnabled === "boolean"
+        ? canvas.gridEnabled
+        : DEFAULT_FLOW_BOARD_CANVAS.gridEnabled,
+    gridSize: Math.min(64, Math.max(8, requestedGridSize)),
+  };
+}
+
+function normalizeSheetId(value: unknown, index: number) {
+  const id = typeof value === "string" ? value.trim().slice(0, 128) : "";
+  return id || `sheet-${index + 1}`;
+}
+
+function normalizeSheetTitle(value: unknown, index: number) {
+  const title = typeof value === "string" ? value.trim().slice(0, 128) : "";
+  return title || `画布 ${index + 1}`;
+}
+
+function normalizeFlowBoardSheet(
+  value: unknown,
+  index: number
+): FlowBoardSheetSnapshotData | null {
+  if (!isRecord(value)) {
+    return null;
+  }
+
+  return {
+    id: normalizeSheetId(value.id, index),
+    title: normalizeSheetTitle(value.title, index),
+    children: Array.isArray(value.children)
+      ? value.children.filter(isRecord)
+      : [],
+    viewport: normalizeRecord(value.viewport),
+    theme: normalizeRecord(value.theme),
+    canvas: normalizeFlowBoardCanvas(value.canvas),
+  };
+}
+
 export function normalizeFlowBoardTitle(value: unknown) {
   const title = String(value || "").trim();
   return title.slice(0, 256) || "未命名流程白板";
@@ -17,15 +88,67 @@ export function normalizeFlowBoardSnapshot(
   value: unknown
 ): FlowBoardSnapshotData {
   const raw = isRecord(value) ? value : {};
+  const legacyChildren = Array.isArray(raw.children)
+    ? raw.children.filter(isRecord)
+    : [];
+  const normalizedSheets = Array.isArray(raw.sheets)
+    ? raw.sheets
+        .map(normalizeFlowBoardSheet)
+        .filter(
+          (sheet): sheet is FlowBoardSheetSnapshotData => Boolean(sheet)
+        )
+    : [];
+  const sheets =
+    normalizedSheets.length > 0
+      ? normalizedSheets
+      : [
+          {
+            id: "sheet-1",
+            title: "画布 1",
+            children: legacyChildren,
+            viewport: normalizeRecord(raw.viewport),
+            theme: normalizeRecord(raw.theme),
+            canvas: normalizeFlowBoardCanvas(raw.canvas),
+          },
+        ];
+  const requestedActiveSheetId =
+    typeof raw.activeSheetId === "string" ? raw.activeSheetId.trim() : "";
+  const activeSheet =
+    sheets.find((sheet) => sheet.id === requestedActiveSheetId) || sheets[0];
+  const activeChildren = Array.isArray(raw.children)
+    ? legacyChildren
+    : activeSheet.children;
+  const activeViewport = isRecord(raw.viewport)
+    ? raw.viewport
+    : activeSheet.viewport;
+  const activeTheme = isRecord(raw.theme) ? raw.theme : activeSheet.theme;
+  const activeCanvas = isRecord(raw.canvas)
+    ? normalizeFlowBoardCanvas(raw.canvas)
+    : normalizeFlowBoardCanvas(activeSheet.canvas);
+  const nextSheets = sheets.map((sheet) =>
+    sheet.id === activeSheet.id
+      ? {
+          ...sheet,
+          children: activeChildren,
+          viewport: activeViewport,
+          theme: activeTheme,
+          canvas: activeCanvas,
+        }
+      : sheet
+  );
   const updatedAt =
     typeof raw.updatedAt === "string" && raw.updatedAt.trim()
       ? raw.updatedAt
       : new Date().toISOString();
 
   return {
-    children: Array.isArray(raw.children) ? raw.children.filter(isRecord) : [],
-    viewport: normalizeRecord(raw.viewport),
-    theme: normalizeRecord(raw.theme),
+    version: 2,
+    activeSheetId: activeSheet.id,
+    sheets: nextSheets,
+    children: activeChildren,
+    viewport: activeViewport,
+    theme: activeTheme,
+    canvas: activeCanvas,
     updatedAt,
   };
 }

app/api/gallery/route.ts

@@ -1,7 +1,7 @@
 import { NextRequest, NextResponse } from "next/server";
 import { db } from "@/lib/db";
-import { generatedImage } from "@/lib/db/schema";
-import { eq, desc, sql } from "drizzle-orm";
+import { generatedImage, imageArchiveTask } from "@/lib/db/schema";
+import { and, desc, eq, isNull, sql } from "drizzle-orm";
 import { auth } from "@/app/(auth)/auth";
 
 export async function GET(request: NextRequest) {
@@ -19,12 +19,23 @@ export async function GET(request: NextRequest) {
     const page = Number.parseInt(searchParams.get("page") || "1");
     const pageSize = Number.parseInt(searchParams.get("pageSize") || "24");
     const offset = (page - 1) * pageSize;
+    const visibleImageFilter = and(
+      eq(generatedImage.userId, userId),
+      isNull(imageArchiveTask.id)
+    );
 
     // 查询总数
     const countResult = await db
       .select({ count: sql<number>`count(*)::int` })
       .from(generatedImage)
-      .where(eq(generatedImage.userId, userId));
+      .leftJoin(
+        imageArchiveTask,
+        and(
+          eq(imageArchiveTask.sourceUrl, generatedImage.originalUrl),
+          eq(imageArchiveTask.status, "abandoned")
+        )
+      )
+      .where(visibleImageFilter);
     
     const total = countResult[0]?.count || 0;
 
@@ -42,7 +53,14 @@ export async function GET(request: NextRequest) {
         modelId: generatedImage.modelId,  // 添加 modelId 字段
       })
       .from(generatedImage)
-      .where(eq(generatedImage.userId, userId))
+      .leftJoin(
+        imageArchiveTask,
+        and(
+          eq(imageArchiveTask.sourceUrl, generatedImage.originalUrl),
+          eq(imageArchiveTask.status, "abandoned")
+        )
+      )
+      .where(visibleImageFilter)
       .orderBy(desc(generatedImage.createdAt))
       .limit(pageSize)
       .offset(offset);

app/api/generated-image-preview/[key]/route.ts

@@ -0,0 +1,34 @@
+import { NextRequest, NextResponse } from "next/server";
+import { eq } from "drizzle-orm";
+import { db } from "@/lib/db";
+import { imageArchiveTask } from "@/lib/db/schema";
+
+// The SHA-256 URL is a capability, like the provider's signed image URL. It must be
+// readable by image nodes and reference-image providers without a session cookie.
+export async function GET(request: NextRequest, { params }: { params: Promise<{ key: string }> }) {
+  const { key } = await params;
+  if (!/^[a-f0-9]{64}$/.test(key)) return new NextResponse(null, { status: 404 });
+  const configured =
+    process.env.NEXT_PUBLIC_APP_URL || process.env.AUTH_URL || process.env.NEXTAUTH_URL;
+  const origin = configured
+    ? new URL(configured).origin
+    : `http://localhost:${process.env.PORT || "3000"}`;
+  const sourceUrl = `${origin}/api/generated-image-preview/${key}`;
+  const [task] = await db
+    .select({ targetUrl: imageArchiveTask.targetUrl, metadata: imageArchiveTask.metadata })
+    .from(imageArchiveTask)
+    .where(eq(imageArchiveTask.sourceUrl, sourceUrl))
+    .limit(1);
+  if (task?.targetUrl) return NextResponse.redirect(task.targetUrl, 307);
+  const inline = (task?.metadata as { inlineSource?: string } | null)?.inlineSource;
+  const match = inline?.match(/^data:(image\/[a-z0-9.+-]+);base64,([a-z0-9+/=]+)$/i);
+  if (!match) return new NextResponse(null, { status: 404 });
+  return new NextResponse(Buffer.from(match[2], "base64"), {
+    headers: {
+      "Content-Type": match[1],
+      "Cache-Control": "private, no-store",
+      "X-Content-Type-Options": "nosniff",
+      "Content-Security-Policy": "default-src 'none'; sandbox",
+    },
+  });
+}

app/api/messages/route.ts

@@ -14,6 +14,10 @@ import {
   updateMessageById,
 } from "@/lib/db/queries";
 import type { DBMessage } from "@/lib/db/schema";
+import {
+  buildOpenClawArtifactProxyUrl,
+  normalizeOpenClawArtifacts,
+} from "@/lib/openclaw-chat/artifacts";
 import {
   getFalImageTaskStatus,
   resolveFalImageTaskToMarkdown,
@@ -32,12 +36,29 @@ const FAL_IMAGE_TASK_POLL_INTERVAL_MS = 2_000;
 const falTaskLastPolledAt = new Map<string, number>();
 const falTaskSyncInFlight = new Set<string>();
 
-function toPublicVideoMetadata(value: DBMessage["videoMetadata"]) {
+function toPublicVideoMetadata(params: {
+  message: DBMessage;
+  requestOrigin: string;
+}) {
+  const value = params.message.videoMetadata;
   if (!value || typeof value !== "object" || Array.isArray(value)) return value;
   const metadata = value as Record<string, unknown>;
   if (metadata.taskKind !== "clawd_chat") return value;
   const publicMetadata = { ...metadata };
   delete publicMetadata.upstreamTaskKey;
+  publicMetadata.artifacts = normalizeOpenClawArtifacts(metadata.artifacts).map(
+    (artifact, artifactIndex) => ({
+      ...artifact,
+      downloadUrl: new URL(
+        buildOpenClawArtifactProxyUrl({
+          chatId: params.message.chatId,
+          messageId: params.message.id,
+          artifactIndex,
+        }),
+        params.requestOrigin
+      ).toString(),
+    })
+  );
   return publicMetadata;
 }
 
@@ -286,7 +307,11 @@ export async function GET(request: NextRequest) {
         createdAt: msg.createdAt,
         parts: parts,
         attachments: msg.attachments || [],
-        videoMetadata: toPublicVideoMetadata(msg.videoMetadata) || null,
+        videoMetadata:
+          toPublicVideoMetadata({
+            message: msg,
+            requestOrigin: request.nextUrl.origin,
+          }) || null,
       };
     });
 

app/api/site-settings/route.ts

@@ -399,7 +399,7 @@ function normalizeLovartComposerPreviewTexts(value: unknown): string[] {
 function normalizeLovartComposerPrefix(value: unknown): string {
   const normalized = String(value || "").trim();
   if (!normalized) {
-    return "让「由壹点AI」";
+    return "让「𝗕𝘂𝗬𝗶」";
   }
   return normalized.slice(0, 40);
 }
@@ -573,7 +573,7 @@ const PUBLIC_SITE_SETTINGS_SCOPES = new Set<string>([
 ]);
 
 const HOME_SITE_SETTINGS_FALLBACK: Record<string, unknown> = {
-  siteName: "AI Chatbot",
+  siteName: "𝗕𝘂𝗬𝗶",
   siteLogo: null,
   siteLogoDark: null,
   favicon: null,
@@ -583,11 +583,11 @@ const HOME_SITE_SETTINGS_FALLBACK: Record<string, unknown> = {
   bannerText: "限时特惠：升级会员最高立享 45% OFF!",
   bannerLink: null,
   bannerActionText: "立即查看",
-  lovartHeroTitle: "由壹点AI 让设计更简单",
-  lovartHeroSubtitle: "懂你的设计代理，帮你搞定一切",
+  lovartHeroTitle: "𝗕𝘂𝗬𝗶 让设计触手可及",
+  lovartHeroSubtitle: "下达指令，即刻呈现",
   surpriseCategories: ["全部", "精选"],
   canvasDefaultModelId: null,
-  lovartComposerPrefix: "让「由壹点AI」",
+  lovartComposerPrefix: "让「𝗕𝘂𝗬𝗶」",
   lovartComposerPreviewTexts: [],
   lovartPromptTagVisibility: {},
   contactConfig: normalizeContactConfig(undefined),
@@ -664,7 +664,7 @@ async function readScopedSiteSettings(keys: string[]) {
 
 function createBrandingSettings(settings: Record<string, unknown> | undefined) {
   return {
-    siteName: String(settings?.siteName || "AI Chatbot"),
+    siteName: String(settings?.siteName || "𝗕𝘂𝗬𝗶"),
     siteLogo: settings?.siteLogo || null,
     siteLogoDark: settings?.siteLogoDark || null,
     favicon: settings?.favicon || null,
@@ -822,7 +822,7 @@ async function getScopedPublicSiteSettings(
       usageTimeStart: typedSettings?.usageTimeStart || "08:00",
       usageTimeEnd: typedSettings?.usageTimeEnd || "20:00",
       usageTimeMessage:
-        typedSettings?.usageTimeMessage || "由壹点累了也是需要休息的",
+        typedSettings?.usageTimeMessage || "BuYi 累了也是需要休息的",
     });
   }
 
@@ -953,9 +953,9 @@ async function getScopedPublicSiteSettings(
       typedSettings?.lovartPromoText ||
       "现在升级，立享 Kling 3.0 与 Nano Banana Pro，最高 5 折优惠",
     lovartPromoActionText: typedSettings?.lovartPromoActionText || "立即升级",
-    lovartHeroTitle: typedSettings?.lovartHeroTitle || "由壹点AI 让设计更简单",
+    lovartHeroTitle: typedSettings?.lovartHeroTitle || "𝗕𝘂𝗬𝗶 让设计触手可及",
     lovartHeroSubtitle:
-      typedSettings?.lovartHeroSubtitle || "懂你的设计代理，帮你搞定一切",
+      typedSettings?.lovartHeroSubtitle || "下达指令，即刻呈现",
     surpriseCategories: normalizeSurpriseCategories(
       valueByKey.get(HOME_SURPRISE_CATEGORIES_KEY)
     ),
@@ -1476,7 +1476,7 @@ export async function GET(request: NextRequest) {
         usageTimeEnabled: false,
         usageTimeStart: "08:00",
         usageTimeEnd: "20:00",
-        usageTimeMessage: "由壹点累了也是需要休息的",
+        usageTimeMessage: "BuYi 累了也是需要休息的",
         bannerEnabled: true,
         bannerText: "限时特惠：升级会员最高立享 45% OFF!",
         bannerLink: null,
@@ -1525,8 +1525,8 @@ export async function GET(request: NextRequest) {
         canvasDetailAgentModelId: null,
         lovartPromoText: "现在升级，立享 Kling 3.0 与 Nano Banana Pro，最高 5 折优惠",
         lovartPromoActionText: "立即升级",
-        lovartHeroTitle: "由壹点AI 让设计更简单",
-        lovartHeroSubtitle: "懂你的设计代理，帮你搞定一切",
+        lovartHeroTitle: "𝗕𝘂𝗬𝗶 让设计触手可及",
+        lovartHeroSubtitle: "下达指令，即刻呈现",
         surpriseCategories,
         aiDetailGenerationEnabled,
         lovartComposerPrefix,
@@ -1546,8 +1546,8 @@ export async function GET(request: NextRequest) {
           baseSettings.lovartPromoText ||
           "现在升级，立享 Kling 3.0 与 Nano Banana Pro，最高 5 折优惠",
         lovartPromoActionText: baseSettings.lovartPromoActionText || "立即升级",
-        lovartHeroTitle: baseSettings.lovartHeroTitle || "由壹点AI 让设计更简单",
-        lovartHeroSubtitle: baseSettings.lovartHeroSubtitle || "懂你的设计代理，帮你搞定一切",
+        lovartHeroTitle: baseSettings.lovartHeroTitle || "𝗕𝘂𝗬𝗶 让设计触手可及",
+        lovartHeroSubtitle: baseSettings.lovartHeroSubtitle || "下达指令，即刻呈现",
         notification,
         surpriseCategories,
         aiDetailGenerationEnabled,
@@ -3119,7 +3119,7 @@ export async function PUT(request: NextRequest) {
           usageTimeEnabled: siteSettingsPayload.usageTimeEnabled ?? false,
           usageTimeStart: siteSettingsPayload.usageTimeStart ?? "08:00",
           usageTimeEnd: siteSettingsPayload.usageTimeEnd ?? "20:00",
-          usageTimeMessage: siteSettingsPayload.usageTimeMessage ?? "由壹点累了也是需要休息的",
+          usageTimeMessage: siteSettingsPayload.usageTimeMessage ?? "BuYi 累了也是需要休息的",
           bannerEnabled: siteSettingsPayload.bannerEnabled ?? true,
           bannerText: siteSettingsPayload.bannerText ?? "限时特惠：升级会员最高立享 45% OFF!",
           bannerLink: siteSettingsPayload.bannerLink,
@@ -3144,8 +3144,8 @@ export async function PUT(request: NextRequest) {
             siteSettingsPayload.lovartPromoText ??
             "现在升级，立享 Kling 3.0 与 Nano Banana Pro，最高 5 折优惠",
           lovartPromoActionText: siteSettingsPayload.lovartPromoActionText ?? "立即升级",
-          lovartHeroTitle: siteSettingsPayload.lovartHeroTitle ?? "由壹点AI 让设计更简单",
-          lovartHeroSubtitle: siteSettingsPayload.lovartHeroSubtitle ?? "懂你的设计代理，帮你搞定一切",
+          lovartHeroTitle: siteSettingsPayload.lovartHeroTitle ?? "𝗕𝘂𝗬𝗶 让设计触手可及",
+          lovartHeroSubtitle: siteSettingsPayload.lovartHeroSubtitle ?? "下达指令，即刻呈现",
           updatedBy: session.user.id,
         })
         .returning();

app/canvas/[id]/CanvasEditorLegacyPageClient.tsx

@@ -74,6 +74,7 @@ import {
   useState,
 } from "react";
 import { toast } from "sonner";
+import { useCanvasImageArchives } from "@/hooks/use-canvas-image-archives";
 import useSWR from "swr";
 // 深色主题组件 V2 (新版布局)
 import type { AgentGenerationWorkspaceDarkV2Props } from "@/components/agents/AgentGenerationWorkspaceDarkV2";
@@ -86,7 +87,9 @@ import {
   CanvasAddImageDialog,
   type CanvasAddImageDialogImage,
 } from "@/components/canvas/CanvasAddImageDialog";
+import { CanvasAgentUiListener } from "@/components/canvas/chat-panel/canvas-agent-ui-listener";
 import { CanvasToolbarIcon } from "@/components/canvas/CanvasToolbarIcon";
+import { CanvasSurfaceHeader } from "@/components/canvas/CanvasSurfaceHeader";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -249,7 +252,6 @@ import type {
   AgentWorkflowUiConfig,
 } from "@/types/agent";
 import type {
-  AgentSlotNodeData,
   CanvasEdge,
   CanvasInitialProject,
   CanvasNode,
@@ -262,7 +264,7 @@ import type {
 
 const CANVAS_SITE_SETTINGS_REFRESH_INTERVAL_MS = 15000;
 const CANVAS_SITE_SETTINGS_TIMEOUT_MS = 10000;
-const CANVAS_SURFACE_BACKGROUND = "#f4f4f5";
+const CANVAS_SURFACE_BACKGROUND = "#f5f5f5";
 
 const fetchCanvasSiteSettings = async (url: string) => {
   const separator = url.includes("?") ? "&" : "?";
@@ -1906,6 +1908,8 @@ export default function CanvasEditorLegacyPage({
     [isVideoMode]
   );
 
+  useCanvasImageArchives(id);
+
   // Store state
   const projectTitle = useCanvasStore((state) => state.projectTitle);
   const viewport = useCanvasStore(canvasSelectors.viewport);
@@ -3141,8 +3145,7 @@ export default function CanvasEditorLegacyPage({
 
       const updateWidthFromClientX = (clientX: number) => {
         const currentViewportWidth = window.innerWidth;
-        const nextWidth =
-          currentViewportWidth - DOCKED_PANEL_INSET - clientX;
+        const nextWidth = currentViewportWidth - DOCKED_PANEL_INSET - clientX;
 
         setFloatingPanelWidth(
           clampFloatingPanelWidth(nextWidth, currentViewportWidth)
@@ -7515,7 +7518,7 @@ export default function CanvasEditorLegacyPage({
                 materialMimeType: image.mimeType || undefined,
                 originalHeight: dimensions.originalHeight,
                 originalWidth: dimensions.originalWidth,
-                source: "agent-workflow-material-search",
+                source: image.sourceType === "upload" ? "local-upload" : "agent-workflow-material-search",
               },
             },
             connections: [],
@@ -7527,7 +7530,7 @@ export default function CanvasEditorLegacyPage({
 
       if (createdNodeIds.length > 0) {
         selectNodes(createdNodeIds);
-        toast.success(`已添加 ${createdNodeIds.length} 张白底图到画布`);
+        toast.success(`已添加 ${createdNodeIds.length} 张${validImages.every((image) => image.sourceType === "upload") ? "图片" : "白底图"}到画布`);
       }
     },
     [createCanvasNode, getVisibleCanvasOrigin, selectNodes]
@@ -7543,64 +7546,6 @@ export default function CanvasEditorLegacyPage({
     setIsAddImageDialogOpen(true);
   }, [handleAddWorkflowNode, isVideoMode]);
 
-  const handleAddAgentSlotNode = useCallback((slotType: AgentSlotNodeData["slotType"]) => {
-    if (isVideoMode) return;
-
-    const slotDefaults: Record<
-      AgentSlotNodeData["slotType"],
-      {
-        label: string;
-        size: CanvasNode["size"];
-        aspectRatio: string;
-      }
-    > = {
-      image: {
-        label: "图片槽位",
-        size: { width: 320, height: 320 },
-        aspectRatio: "1:1",
-      },
-      video: {
-        label: "视频槽位",
-        size: { width: 360, height: 220 },
-        aspectRatio: "16:9",
-      },
-      "ui-screen": {
-        label: "UI 槽位",
-        size: { width: 360, height: 260 },
-        aspectRatio: "16:9",
-      },
-    };
-    const defaults = slotDefaults[slotType];
-    const origin = getVisibleCanvasOrigin();
-    createCanvasNode({
-      type: "agent-slot",
-      position: {
-        x: origin.x + 40,
-        y: origin.y + 40,
-      },
-      size: defaults.size,
-      data: {
-        slotType,
-        label: defaults.label,
-        status: "empty",
-        aspectRatio: defaults.aspectRatio,
-        fillPolicy: "replace-empty",
-        acceptedSources: ["text", "image", "selection", "annotation"],
-        filledNodeIds: [],
-        metadata: {
-          createdBy: "toolbar",
-          createdSlotType: slotType,
-          createdAt: new Date().toISOString(),
-        },
-      },
-      connections: [],
-    });
-  }, [createCanvasNode, getVisibleCanvasOrigin, isVideoMode]);
-
-  const handleAddAgentImageSlotNode = useCallback(() => {
-    handleAddAgentSlotNode("image");
-  }, [handleAddAgentSlotNode]);
-
   const handleAddVideoNode = useCallback(() => {
     if (isVideoMode) {
       handleAddWorkflowNode("video-input");
@@ -9374,6 +9319,7 @@ export default function CanvasEditorLegacyPage({
   // 键盘快捷键
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
+      if (useCanvasStore.getState().canvasImageSelectionSession) return;
       // 如果正在输入则不触发快捷键（包括 input、textarea 和 contentEditable 元素）
       if (isCanvasTextEntryTarget(e.target)) {
         return;
@@ -10311,7 +10257,11 @@ export default function CanvasEditorLegacyPage({
   return (
     <TooltipProvider>
       <div
-        className="relative h-dvh w-full overflow-hidden overscroll-none"
+        data-canvas-panel-open={isPanelOpen ? "true" : "false"}
+        className={cn(
+          "h-dvh w-full overflow-hidden overscroll-none",
+          isVideoMode ? "relative" : "lovart-canvas-surface fixed inset-0"
+        )}
         style={
           {
             "--canvas-surface-background": canvasSurfaceBackground,
@@ -10319,10 +10269,12 @@ export default function CanvasEditorLegacyPage({
           } as React.CSSProperties
         }
       >
+        <CanvasAgentUiListener projectId={id} workspace="canvas" />
         {/* 1. Canvas Layer (Full Screen) - 使用 key 强制在 id 变化时重新挂载 */}
         <div
           className="absolute inset-0 z-0"
           data-canvas-stage="true"
+          style={isVideoMode ? undefined : { right: panelOcclusionRight, top: 40 }}
           key={`workspace-${id}`}
         >
           <CanvasWorkspace
@@ -10333,9 +10285,10 @@ export default function CanvasEditorLegacyPage({
                 ? "先在右侧选择文生视频、主体参考或首尾帧模式，再开始生成"
                 : '点击顶部"添加"按钮开始创作'
             }
-            occlusionRight={panelOcclusionRight}
+            occlusionRight={0}
             onBlankCanvasDoubleClick={handleOpenVideoCanvasInsertMenu}
-            showEmptyState={!isVideoMode}
+            showEmptyState={false}
+            showZoomControls={isVideoMode}
             workspaceLabel={workspaceLabel}
             workspaceVariant={isVideoMode ? "video" : "canvas"}
             layerSplitEnabled={isLayerSplitEnabled}
@@ -11024,14 +10977,27 @@ export default function CanvasEditorLegacyPage({
           </div>
         ) : null}
 
-        {brandEntry}
+        {isVideoMode ? brandEntry : (
+          <CanvasSurfaceHeader
+            isSaving={isSaving}
+            onAddImage={handleAddImageNode}
+            onHome={goHome}
+            onOpenFiles={() => {
+              setIsPanelOpen(true);
+              setPanelMode("fileList");
+            }}
+            onSave={() => void handleSave()}
+            projectTitle={projectTitle}
+            rightInset={panelOcclusionRight}
+          />
+        )}
         {agentDisabledNotice}
 
         {/* 2. Floating Actions (Top Right) */}
         {!isVideoMode && !isPanelOpen && (
           <div
             className="absolute z-20"
-            style={{ top: FLOATING_PANEL_INSET, right: FLOATING_PANEL_INSET }}
+            style={{ top: 46, right: 12 }}
           >
             <Button
               className={cn(
@@ -11063,7 +11029,7 @@ export default function CanvasEditorLegacyPage({
             )}
             data-canvas-right-panel="true"
             style={{
-              top: DOCKED_PANEL_INSET,
+              top: 0,
               right: DOCKED_PANEL_INSET,
               bottom: DOCKED_PANEL_INSET,
               width: resolvedPanelWidth,
@@ -11094,7 +11060,7 @@ export default function CanvasEditorLegacyPage({
                 />
               </div>
             ) : null}
-            <div className="flex h-full w-full flex-col overflow-hidden border-l bg-white dark:bg-zinc-950">
+            <div className="flex h-full w-full flex-col overflow-hidden border-l border-[#ededed] bg-white dark:border-zinc-800 dark:bg-zinc-950">
               {!areSecondaryPanelsReady ? (
                 <CanvasLazyPanelLoader label="正在准备侧边面板..." />
               ) : panelMode === "chat" ? (
@@ -11200,11 +11166,11 @@ export default function CanvasEditorLegacyPage({
             className={cn(
               isVideoMode
                 ? VIDEO_CANVAS_TOOLBAR_CLASS
-                : "border bg-white shadow-2xl dark:bg-zinc-950",
+                : "border border-[#e9e9e9] bg-white shadow-[0_1px_3px_rgba(0,0,0,0.035)] dark:border-white/10 dark:bg-zinc-950",
               !isVideoMode &&
                 (shouldDockFloatingToolbarToSide
                   ? "flex flex-col items-center gap-1 rounded-[24px] px-1.5 py-2.5"
-                  : "flex items-center gap-1 rounded-[24px] px-2.5 py-1.5")
+                  : "flex items-center gap-1 rounded-[14px] px-1.5 py-1.5")
             )}
             style={
               shouldDockFloatingToolbarToSide
@@ -11222,7 +11188,7 @@ export default function CanvasEditorLegacyPage({
                     tool === "select" &&
                       (isVideoMode
                         ? VIDEO_CANVAS_TOOLBAR_ACTIVE_BUTTON_CLASS
-                        : "bg-primary text-primary-foreground hover:bg-primary/90")
+                        : "bg-[#ededed] text-[#333333] hover:bg-[#e5e5e5] dark:bg-white/12 dark:text-white")
                   )}
                   onClick={() => setTool("select")}
                   size="icon"
@@ -11232,6 +11198,8 @@ export default function CanvasEditorLegacyPage({
                     active={tool === "select"}
                     className="h-4 w-4"
                     fallback={MousePointer}
+                    referenceName={isVideoMode ? undefined : "cursor"}
+                    referenceSize={20}
                     item={getCanvasToolbarItem(
                       canvasToolbarConfig,
                       "selectTool"
@@ -11245,63 +11213,6 @@ export default function CanvasEditorLegacyPage({
               </TooltipContent>
             </Tooltip>
 
-            {!isVideoMode &&
-            isCanvasToolbarItemEnabled(
-              canvasToolbarConfig,
-              "addAgentImageSlot"
-            ) ? (
-              <DropdownMenu>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <DropdownMenuTrigger asChild>
-                      <Button className="h-9 w-9 rounded-xl" size="icon" variant="ghost">
-                        <CanvasToolbarIcon
-                          className="h-4 w-4"
-                          fallback={ImagePlus}
-                          item={getCanvasToolbarItem(
-                            canvasToolbarConfig,
-                            "addAgentImageSlot"
-                          )}
-                        />
-                      </Button>
-                    </DropdownMenuTrigger>
-                  </TooltipTrigger>
-                  <TooltipContent side={floatingToolbarTooltipSide}>
-                    {
-                      getCanvasToolbarItem(
-                        canvasToolbarConfig,
-                        "addAgentImageSlot"
-                      ).label
-                    }
-                  </TooltipContent>
-                </Tooltip>
-                <DropdownMenuContent
-                  align="start"
-                  side={floatingToolbarDropdownSide}
-                >
-                  <DropdownMenuItem
-                    onSelect={() => handleAddAgentImageSlotNode()}
-                  >
-                    <ImagePlus className="h-4 w-4" />
-                    图片槽位
-                  </DropdownMenuItem>
-                  <DropdownMenuItem
-                    onSelect={() => handleAddAgentSlotNode("video")}
-                  >
-                    <Video className="h-4 w-4" />
-                    视频槽位
-                  </DropdownMenuItem>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem
-                    onSelect={() => handleAddAgentSlotNode("ui-screen")}
-                  >
-                    <MonitorSmartphone className="h-4 w-4" />
-                    UI 槽位
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            ) : null}
-
             <Tooltip>
               <TooltipTrigger asChild>
                 <Button
@@ -11312,7 +11223,7 @@ export default function CanvasEditorLegacyPage({
                     tool === "pan" &&
                       (isVideoMode
                         ? VIDEO_CANVAS_TOOLBAR_ACTIVE_BUTTON_CLASS
-                        : "bg-primary text-primary-foreground hover:bg-primary/90")
+                        : "bg-[#ededed] text-[#333333] hover:bg-[#e5e5e5] dark:bg-white/12 dark:text-white")
                   )}
                   onClick={() => setTool("pan")}
                   size="icon"
@@ -11322,6 +11233,8 @@ export default function CanvasEditorLegacyPage({
                     active={tool === "pan"}
                     className="h-4 w-4"
                     fallback={Hand}
+                    referenceName={isVideoMode ? undefined : "pan"}
+                    referenceSize={20}
                     item={getCanvasToolbarItem(canvasToolbarConfig, "panTool")}
                   />
                 </Button>
@@ -11442,7 +11355,7 @@ export default function CanvasEditorLegacyPage({
                       tool === "draw" &&
                         (isVideoMode
                           ? VIDEO_CANVAS_TOOLBAR_ACTIVE_BUTTON_CLASS
-                          : "bg-primary text-primary-foreground hover:bg-primary/90")
+                          : "bg-[#ededed] text-[#333333] hover:bg-[#e5e5e5] dark:bg-white/12 dark:text-white")
                     )}
                     onClick={() => setTool("draw")}
                     size="icon"
@@ -11483,7 +11396,7 @@ export default function CanvasEditorLegacyPage({
                         isAgentMode &&
                         (isVideoMode
                           ? VIDEO_CANVAS_TOOLBAR_ACTIVE_BUTTON_CLASS
-                          : "bg-primary text-primary-foreground hover:bg-primary/90")
+                          : "bg-[#ededed] text-[#333333] hover:bg-[#e5e5e5] dark:bg-white/12 dark:text-white")
                     )}
                     onClick={handleStyleModeToolbarClick}
                     size="icon"
@@ -11499,6 +11412,14 @@ export default function CanvasEditorLegacyPage({
                       fallback={
                         shouldUseStyleModeButtonForStylePro ? Sparkles : Wand2
                       }
+                      referenceName={
+                        isVideoMode
+                          ? undefined
+                          : shouldUseStyleModeButtonForStylePro
+                            ? "style-controls"
+                            : "creativity"
+                      }
+                      referenceSize={20}
                       item={getCanvasToolbarItem(
                         canvasToolbarConfig,
                         "styleMode"
@@ -11528,6 +11449,8 @@ export default function CanvasEditorLegacyPage({
                     <CanvasToolbarIcon
                       className="h-4 w-4"
                       fallback={Sparkles}
+                      referenceName={isVideoMode ? undefined : "style-controls"}
+                      referenceSize={20}
                       item={getCanvasToolbarItem(
                         canvasToolbarConfig,
                         "stylePro"
@@ -11557,6 +11480,8 @@ export default function CanvasEditorLegacyPage({
                     <CanvasToolbarIcon
                       className="h-4 w-4"
                       fallback={Layers}
+                    referenceName={isVideoMode ? undefined : "layers"}
+                    referenceSize={20}
                       item={getCanvasToolbarItem(
                         canvasToolbarConfig,
                         "batchProcessing"
@@ -11588,6 +11513,8 @@ export default function CanvasEditorLegacyPage({
                   <CanvasToolbarIcon
                     className="h-4 w-4"
                     fallback={ImagePlus}
+                    referenceName={isVideoMode ? undefined : "image"}
+                    referenceSize={20}
                     item={getCanvasToolbarItem(
                       canvasToolbarConfig,
                       isVideoMode ? "addImageInput" : "addImage"
@@ -11620,6 +11547,8 @@ export default function CanvasEditorLegacyPage({
                   <CanvasToolbarIcon
                     className="h-4 w-4"
                     fallback={Type}
+                    referenceName={isVideoMode ? undefined : "text"}
+                    referenceSize={20}
                     item={getCanvasToolbarItem(
                       canvasToolbarConfig,
                       isVideoMode ? "addScriptNode" : "addText"
@@ -11777,6 +11706,8 @@ export default function CanvasEditorLegacyPage({
                     <CanvasToolbarIcon
                       className="h-4 w-4"
                       fallback={PenTool}
+                      referenceName={isVideoMode ? undefined : "draw"}
+                      referenceSize={20}
                       item={resolveCanvasToolbarItemWithFallback(
                         canvasToolbarConfig,
                         "realtimeCanvas",
@@ -11824,6 +11755,8 @@ export default function CanvasEditorLegacyPage({
                     <CanvasToolbarIcon
                       className="h-4 w-4"
                       fallback={Sparkles}
+                      referenceName={isVideoMode ? undefined : "image-enhance"}
+                      referenceSize={20}
                       item={resolveCanvasToolbarItemWithFallback(
                         canvasToolbarConfig,
                         "enhanceCanvas",
@@ -11877,6 +11810,8 @@ export default function CanvasEditorLegacyPage({
                   <CanvasToolbarIcon
                     className="h-4 w-4"
                     fallback={Box}
+                    referenceName={isVideoMode ? undefined : "model-auto"}
+                    referenceSize={20}
                     item={getCanvasToolbarItem(canvasToolbarConfig, "model3d")}
                   />
                 </Button>
@@ -11966,6 +11901,8 @@ export default function CanvasEditorLegacyPage({
                   <CanvasToolbarIcon
                     className="h-4 w-4"
                     fallback={Plus}
+                    referenceName={isVideoMode ? undefined : "plus"}
+                    referenceSize={20}
                     item={getCanvasToolbarItem(
                       canvasToolbarConfig,
                       isVideoMode ? "newVideoCanvas" : "newCanvas"
@@ -11993,12 +11930,15 @@ export default function CanvasEditorLegacyPage({
           type="file"
         />
 
-        {/* 6. Bottom Left Compact Controls */}
+        {/* Compact zoom and history controls. */}
         <div
+          data-canvas-compact-controls="true"
           className="absolute z-20"
           style={{
             bottom: `${FLOATING_BOTTOM_INSET + 4}px`,
-            left: `${compactControlsLeft + 8}px`,
+            ...(isVideoMode
+              ? { left: `${compactControlsLeft + 8}px` }
+              : { right: `${panelOcclusionRight + 16}px` }),
           }}
         >
           <div

app/canvas/[id]/model3d/page.tsx

@@ -365,6 +365,62 @@ function resolveWorldTaskPreviewUrl(task?: TaskRecord | null) {
   );
 }
 
+function getTaskPreviewCandidates(task?: TaskRecord | null) {
+  if (!task) return [];
+  const candidates = [
+    task.previewImageUrl,
+    task.assetPayload?.thumbnailUrl,
+    task.assetPayload?.panoUrl,
+    task.assetPayload?.sourcePreviewImageUrl,
+    task.assetPayload?.sourceThumbnailUrl,
+    task.assetPayload?.sourcePanoUrl,
+  ];
+  const seen = new Set<string>();
+  return candidates
+    .map((value) => String(value || "").trim())
+    .filter((value) => {
+      if (!value || seen.has(value)) return false;
+      seen.add(value);
+      return true;
+    });
+}
+
+function isPersistableTaskPreviewUrl(value?: string | null) {
+  return /^https?:\/\//i.test(String(value || "").trim());
+}
+
+function TaskAssetPreview({ task }: { task: TaskRecord }) {
+  const candidates = getTaskPreviewCandidates(task);
+  const signature = candidates.join("|");
+  const [candidateIndex, setCandidateIndex] = useState(0);
+
+  useEffect(() => {
+    setCandidateIndex(0);
+  }, [signature]);
+
+  const previewUrl = candidates[candidateIndex] || null;
+  if (!previewUrl) {
+    return (
+      <div className="flex h-full w-full items-center justify-center text-zinc-700">
+        {task.status === "queued" || task.status === "running" ? (
+          <Loader2 className="h-7 w-7 animate-spin text-yellow-400/70" />
+        ) : (
+          <Box className="h-8 w-8" />
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <img
+      alt="3D 资产预览"
+      className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.035]"
+      onError={() => setCandidateIndex((index) => index + 1)}
+      src={previewUrl}
+    />
+  );
+}
+
 function canImportTaskToCanvas(task?: TaskRecord | null) {
   if (!task || task.status !== "success") return false;
   if (task.provider !== "worldlabs-3d") return Boolean(resolveTaskModelUrl(task));
@@ -850,9 +906,21 @@ export default function CanvasModel3DPage() {
   );
 
   const pollAttemptsRef = useRef(0);
+  const pollErrorCountRef = useRef(0);
   const multiViewSlotsRef = useRef<MultiViewSlot[]>([]);
   const batchImageSlotsRef = useRef<MultiViewSlot[]>([]);
 
+  const MAX_RETRYABLE_TASK_POLL_FAILURES = 12;
+
+  const isRetryableTaskPollFailure = (message: string) => {
+    const normalized = String(message || "").toLowerCase();
+    return (
+      /http[^0-9]*5\d\d/.test(normalized) ||
+      normalized.includes("超时") ||
+      normalized.includes("timeout")
+    );
+  };
+
   // Fetch site settings for Logo
   const { data: siteSettingsData } = useSWR(
     "/api/site-settings?scope=branding",
@@ -1114,7 +1182,9 @@ export default function CanvasModel3DPage() {
               modelVersion: task.modelVersion,
               progress: task.progress ?? null,
               modelUrl: task.modelUrl ?? null,
-              previewImageUrl: task.previewImageUrl ?? null,
+              previewImageUrl: isPersistableTaskPreviewUrl(task.previewImageUrl)
+                ? task.previewImageUrl
+                : null,
               error: task.error ?? null,
               sourceTaskId: task.sourceTaskId ?? null,
               exportFormat: task.exportFormat ?? null,
@@ -1434,6 +1504,33 @@ export default function CanvasModel3DPage() {
             });
       if (!result.success || !result.data) {
         const failMessage = result.error || "任务查询失败";
+
+        if (isRetryableTaskPollFailure(failMessage)) {
+          pollErrorCountRef.current += 1;
+          if (pollErrorCountRef.current === 1) {
+            console.warn("[Model3DPage] 任务查询临时异常，继续重试", {
+              taskId: currentTask.taskId,
+              provider: currentTask.provider,
+              error: failMessage,
+              attempt: pollAttemptsRef.current,
+            });
+            toast.info(`任务查询异常，正在重试...`);
+          }
+
+          if (pollErrorCountRef.current >= MAX_RETRYABLE_TASK_POLL_FAILURES) {
+            const failedRecord: TaskRecord = {
+              ...currentTask,
+              status: "failed",
+              error: `${failMessage}（重试仍异常）`,
+            };
+            setCurrentTask(failedRecord);
+            upsertTaskHistory(failedRecord);
+          }
+
+          return;
+        }
+
+        pollErrorCountRef.current = 0;
         const failedRecord: TaskRecord = {
           ...currentTask,
           status: "failed",
@@ -1479,6 +1576,8 @@ export default function CanvasModel3DPage() {
         error:
           status === "failed" ? result.data.errorMessage || "任务失败" : null,
       };
+
+      pollErrorCountRef.current = 0;
       if (taskRecordChanged(currentTask, nextRecord)) {
         setCurrentTask(nextRecord);
         upsertTaskHistory(nextRecord);
@@ -1652,6 +1751,7 @@ export default function CanvasModel3DPage() {
     sourceTaskId?: string | null;
     exportFormat?: string | null;
     assetPayload?: Model3DTaskAssetPayload | null;
+    previewImageUrl?: string | null;
   }) => {
     const normalizedPayload =
       params.provider === "tripo-3d" &&
@@ -1706,6 +1806,7 @@ export default function CanvasModel3DPage() {
       createdAt: Date.now(),
       sourceTaskId: params.sourceTaskId || null,
       exportFormat: params.exportFormat || null,
+      previewImageUrl: params.previewImageUrl || null,
       assetPayload:
         params.provider === "worldlabs-3d"
           ? worldCreateResultData?.assetPayload ?? params.assetPayload ?? null
@@ -1821,6 +1922,7 @@ export default function CanvasModel3DPage() {
             providerId: uploadResult.data.providerId || null,
             providerName: uploadResult.data.providerName || null,
           },
+          previewImageUrl: referencePreviewUrl,
         });
         toast.success("已提交图生3D任务");
         return;
@@ -1855,6 +1957,8 @@ export default function CanvasModel3DPage() {
               providerId: uploadResult.data.providerId || null,
               providerName: uploadResult.data.providerName || null,
             },
+            previewImageUrl:
+              batchImageSlots.find((slot) => slot.file === file)?.previewUrl || null,
           });
           successCount += 1;
         }
@@ -1910,6 +2014,7 @@ export default function CanvasModel3DPage() {
           providerId: boundTripoProviderId,
           providerName: boundTripoProviderName,
         },
+        previewImageUrl: multiViewSlots.find((slot) => slot.previewUrl)?.previewUrl || null,
       });
       toast.success("已提交多视图3D任务");
     } catch (error) {
@@ -1992,6 +2097,7 @@ export default function CanvasModel3DPage() {
           mode: "world-image",
           promptText: normalizedPrompt || "图生世界",
           modelLabel: worldModel,
+          previewImageUrl: sourceUrl || worldImagePreviewUrl,
         });
         toast.success("已提交图生世界任务");
         return;
@@ -2076,6 +2182,10 @@ export default function CanvasModel3DPage() {
         mode: "world-multi-image",
         promptText: normalizedPrompt || "多图世界",
         modelLabel: worldModel,
+        previewImageUrl:
+          mediaAssets.find((item) => "sourceUrl" in item)?.sourceUrl ||
+          selectedWorldImages.find((slot) => slot.previewUrl)?.previewUrl ||
+          null,
       });
       toast.success("已提交多图世界任务");
     } catch (error) {
@@ -4177,8 +4287,6 @@ export default function CanvasModel3DPage() {
                 const canImportWorld =
                   task.provider === "worldlabs-3d" && canImportTaskToCanvas(task);
                 const isSelectedForCanvas = selectedWorldCanvasTaskIds.includes(task.taskId);
-                const previewUrl = resolveWorldTaskPreviewUrl(task) || task.previewImageUrl;
-
                 return (
                   <div
                     className={cn(
@@ -4195,17 +4303,7 @@ export default function CanvasModel3DPage() {
                       onClick={() => handleSelectTask(task)}
                       type="button"
                     >
-                      {previewUrl ? (
-                        <img
-                          alt="preview"
-                          className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.035]"
-                          src={previewUrl}
-                        />
-                      ) : (
-                        <div className="flex h-full w-full items-center justify-center text-zinc-700">
-                          <Box className="h-8 w-8" />
-                        </div>
-                      )}
+                      <TaskAssetPreview task={task} />
                     </button>
                     <div className="border-white/10 border-t bg-zinc-950/95 px-1.5 py-2">
                       <div className="flex items-center justify-center gap-1">

app/dev/flow-board-preview/page.tsx

@@ -0,0 +1,17 @@
+import { notFound } from "next/navigation";
+import { FlowBoardClient } from "@/components/flow-board/flow-board-client";
+
+export default function FlowBoardPreviewPage() {
+  if (process.env.NODE_ENV === "production") {
+    notFound();
+  }
+
+  return (
+    <FlowBoardClient
+      previewMode
+      siteLogo={null}
+      siteLogoDark={null}
+      siteName="SnapGen"
+    />
+  );
+}

app/globals.css

@@ -507,3 +507,273 @@
     padding: 0 12px 12px;
   }
 }
+
+/* Lovart surface typography and controls, scoped to the home and image canvas. */
+.lovart-home-surface,
+.lovart-canvas-surface {
+  font-family: Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+.lovart-suggestion {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  gap: 8px;
+  height: 32px;
+  padding: 0 14px;
+  border: 1px solid #e5e5e5;
+  border-radius: 999px;
+  background: white;
+  color: #333;
+  font-size: 13px;
+  white-space: nowrap;
+  transition: background-color 150ms, border-color 150ms;
+}
+.lovart-suggestion:hover { background: #f7f7f7; border-color: #d5d5d5; }
+.lovart-suggestion:focus-visible,
+.lovart-start-action:focus-visible { outline: 2px solid #8c8c8c; outline-offset: 3px; }
+
+.lovart-start-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  gap: 9px;
+  min-width: 172px;
+  height: 40px;
+  padding: 0 16px;
+  border: 1px solid #e5e5e5;
+  border-radius: 999px;
+  background: white;
+  color: #333;
+  font-size: 14px;
+  font-weight: 400;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
+  transition: background-color 150ms, border-color 150ms;
+}
+.lovart-start-action:hover { background: #f7f7f7; border-color: #d4d4d4; }
+.lovart-canvas-surface [data-lovart-chat="true"] .lovart-chat-header { border-bottom: 0; }
+.lovart-canvas-surface [data-lovart-chat="true"] .lovart-chat-composer { padding: 0 8px 8px; }
+.lovart-canvas-surface [data-lovart-chat="true"] .lovart-chat-composer > [data-canvas-chat-input-anchor] {
+  min-height: 120px;
+  border-color: #e5e5e5;
+  box-shadow: 0 1px 3px rgb(0 0 0 / 5%);
+}
+/* The promo backplate continues underneath the composer's rounded corners. */
+.lovart-chat-promo-connected { padding: 0 8px; }
+.lovart-chat-promo-surface { padding-bottom: 24px; border-radius: 24px 24px 0 0; background: #ebebeb; }
+.lovart-chat-promo-row { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 16px; }
+.lovart-chat-promo-message { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; padding: 0; border: 0; background: transparent; color: #202020; font-size: 14px; font-weight: 400; line-height: 20px; text-align: left; cursor: pointer; }
+.lovart-chat-promo-message:disabled { cursor: default; opacity: 1; }
+.lovart-chat-promo-message > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.lovart-chat-promo-badge { flex-shrink: 0; }
+.lovart-chat-promo-close { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: #262626; cursor: pointer; }
+.lovart-chat-promo-close:hover { background: rgb(0 0 0 / 5%); }
+.lovart-canvas-surface [data-lovart-chat="true"] .lovart-chat-promo-connected + .lovart-chat-composer { position: relative; z-index: 1; margin-top: -24px; background: transparent; }
+.lovart-canvas-surface [data-lovart-chat="true"] .lovart-chat-composer > [data-canvas-chat-input-anchor][data-canvas-composer-mode="image"] { min-height: 184px; border-radius: 24px; }
+.lovart-canvas-surface [data-lovart-chat="true"] .lovart-reference-upload { margin: 8px 8px 0; }
+.lovart-canvas-surface [data-lovart-chat="true"] .lovart-reference-tile { flex-direction: column; gap: 8px; width: 56px; height: 68px; border: 0; border-radius: 18px; background: #f5f5f5; color: #aaa; font-size: 12px; font-weight: 400; }
+.lovart-canvas-surface [data-lovart-chat="true"] .lovart-reference-tile:hover { background: #ececec; color: #777; }
+.lovart-canvas-surface [data-lovart-chat="true"] .lovart-reference-tile > svg { width: 14px; height: 14px; stroke-width: 1.5; }
+.lovart-canvas-surface [data-lovart-chat="true"] [data-canvas-composer-mode="image"] .lovart-composer-text-region { padding: 12px 16px 0; }
+.lovart-canvas-surface [data-lovart-chat="true"] [data-canvas-composer-mode="image"] [role="textbox"] { min-height: 40px; font-size: 14px; }
+.lovart-canvas-surface [data-lovart-chat="true"] [data-canvas-composer-mode="image"] [role="textbox"]:empty::before { color: #b0b0b0; }
+.dark .lovart-chat-promo-surface { background: #27272a; }
+.dark .lovart-chat-promo-message, .dark .lovart-chat-promo-close { color: #eee; }
+.dark .lovart-chat-promo-close:hover { background: rgb(255 255 255 / 10%); }
+.dark .lovart-canvas-surface [data-lovart-chat="true"] .lovart-reference-tile { background: #27272a; color: #a1a1aa; }
+.dark .lovart-canvas-surface [data-lovart-chat="true"] .lovart-reference-tile:hover { background: #3f3f46; color: #eee; }
+.dark .lovart-suggestion,
+.dark .lovart-start-action { border-color: rgb(255 255 255 / 12%); background: #18181b; color: #eee; }
+.dark .lovart-suggestion:hover,
+.dark .lovart-start-action:hover { background: #27272a; border-color: rgb(255 255 255 / 22%); }
+.dark .lovart-canvas-surface [data-lovart-chat="true"] .lovart-chat-header { border-color: rgb(255 255 255 / 10%); }
+.dark [data-canvas-right-panel="true"] > .border-l { border-left-color: #27272a; }
+.dark .lovart-canvas-surface [data-lovart-chat="true"] .lovart-chat-composer > [data-canvas-chat-input-anchor] { border-color: rgb(255 255 255 / 12%); }
+@media (max-width: 640px) {
+  .lovart-home-surface main { padding-top: calc(72px + var(--home-banner-offset, 0px)); }
+  .lovart-hero { margin-top: 16px; }
+  .lovart-home-composer { border-radius: 20px; }
+  .lovart-suggestion { padding: 0 11px; font-size: 12px; }
+  .lovart-start-action { min-width: 160px; }
+  .lovart-chat-welcome h1 { font-size: 15px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .lovart-home-surface *, .lovart-canvas-surface * { scroll-behavior: auto !important; }
+}
+
+.lovart-home-surface :is(button, input, textarea, select),
+.lovart-canvas-surface :is(button, input, textarea, select) { font-family: inherit; }
+@media (max-width: 640px) {
+  .lovart-canvas-surface[data-canvas-panel-open="true"] :is([data-canvas-topbar], [data-canvas-floating-toolbar], [data-canvas-compact-controls]) { display: none; }
+}
+
+/* Reference icon sizing is independent of the application's root rem scale. */
+.lovart-suggestion { gap: 8px; padding: 0 12px; }
+.lovart-start-action { min-width: 172.71875px; gap: 8px; padding: 0 12px; }
+.lovart-canvas-surface [data-canvas-floating-toolbar] button { min-width: 32px; height: 32px; border-radius: 8px; }
+.lovart-canvas-surface [data-lovart-chat="true"] [data-canvas-composer-mode="image"] .lovart-composer-mode-selector { width: 90px; height: 32px; padding: 0 8px; background: transparent; font-size: 14px; font-weight: 400; }
+.lovart-canvas-surface [data-lovart-chat="true"] [data-canvas-composer-mode="image"] .lovart-composer-mode-selector > span { font-size: 13px; }
+.lovart-canvas-surface [data-lovart-chat="true"] [data-canvas-composer-mode="image"] .lovart-composer-mode-selector:hover,
+.lovart-canvas-surface [data-lovart-chat="true"] .lovart-image-params:hover,
+.lovart-canvas-surface [data-lovart-chat="true"] .lovart-model-selector:hover { background: rgb(0 0 0 / 4%); }
+.lovart-canvas-surface [data-lovart-chat="true"] .lovart-image-params { width: 105.3828125px; min-width: 105.3828125px; height: 32px; padding: 0 4px 0 12px; background: transparent; font-size: 13px; gap: 4px; }
+.lovart-canvas-surface [data-lovart-chat="true"] .lovart-model-selector { flex: 0 0 121px; width: 121px; height: 32px; padding: 0 4px 0 8px; gap: 0; border: 0; background: transparent; box-shadow: none; font-size: 13px; font-weight: 400; }
+.lovart-canvas-surface [data-lovart-chat="true"] .lovart-model-selector > [data-reference-icon]:first-child { margin-right: 8px; }
+.lovart-canvas-surface [data-lovart-chat="true"] .lovart-model-selector > span:not([data-reference-icon]) { max-width: 65px; }
+.dark .lovart-canvas-surface [data-lovart-chat="true"] :is(.lovart-model-selector, .lovart-image-params) { color: #eee; }
+.dark .lovart-canvas-surface [data-lovart-chat="true"] :is(.lovart-model-selector, .lovart-image-params, .lovart-composer-mode-selector):hover { background: rgb(255 255 255 / 8%); }
+.lovart-canvas-surface [data-lovart-chat="true"] [data-canvas-composer-mode="image"] .lovart-composer-footer { padding: 0 8px 8px; gap: 0; }
+.lovart-canvas-surface [data-lovart-chat="true"] [data-canvas-composer-mode="image"] .lovart-composer-footer > div:first-child { flex: 0 0 90px; padding-right: 0; overflow: visible; }
+.lovart-canvas-surface [data-lovart-chat="true"] [data-canvas-composer-mode="image"] .lovart-composer-footer > div:last-child { flex: 1 1 0; min-width: 0; gap: 0; }
+.lovart-canvas-surface [data-lovart-chat="true"] [data-canvas-composer-mode="image"] .lovart-composer-send { min-width: 32px; width: auto; height: 32px; padding: 0 8px; gap: 2px; font-size: 13px; font-weight: 400; }
+
+/* The existing image toolbar is scaled to 80%; these dimensions render at
+   the reference's 44px bar, 32px buttons, and 20px icons. */
+.lovart-image-action-bar {
+  height: 55px;
+  gap: 5px;
+  padding: 0 7.5px;
+  border: 1.25px solid rgba(0, 0, 0, 0.07);
+  border-radius: 17.5px;
+  background: #fff !important;
+  color: #000;
+  box-shadow: 0 1.25px 2.5px rgba(0, 0, 0, 0.04);
+  backdrop-filter: none;
+}
+.lovart-image-action-bar::before { display: none; }
+.lovart-image-action-bar > button {
+  width: 40px;
+  min-width: 40px;
+  height: 40px;
+  margin: 0;
+  gap: 0;
+  padding: 0;
+  border-radius: 10px;
+  background: transparent;
+  color: #000;
+  font-size: 0;
+  font-weight: 400;
+  box-shadow: none;
+}
+.lovart-image-action-bar > button:hover,
+.lovart-image-action-bar > button[data-state="open"],
+.lovart-image-action-bar > button[data-reference-active="true"] {
+  background: rgba(0, 0, 0, 0.04);
+  color: #000;
+}
+.lovart-image-action-bar > button:disabled {
+  background: transparent;
+  color: rgba(0, 0, 0, 0.3);
+}
+.lovart-image-action-bar > button > svg,
+.lovart-image-action-bar > button > [data-reference-icon],
+.lovart-image-action-bar > button > span[aria-hidden="true"],
+.lovart-image-action-bar > button > img {
+  width: 25px;
+  height: 25px;
+  margin: 0;
+  flex-shrink: 0;
+}
+.lovart-image-action-bar > button > img { filter: brightness(0); }
+.lovart-image-action-bar > div.h-px,
+.lovart-image-action-bar > div.w-px {
+  width: 1.25px;
+  height: 55px;
+  margin: 0 2.5px;
+  background: rgba(0, 0, 0, 0.07);
+}
+.lovart-image-action-menu [role="menuitem"] > svg,
+.lovart-image-action-menu [role="menuitem"] > [data-reference-icon] {
+  width: 18px;
+  height: 18px;
+}
+.dark .lovart-image-action-bar {
+  border-color: rgba(255, 255, 255, 0.1);
+  background: #18191c !important;
+  color: #fff;
+}
+.dark .lovart-image-action-bar > button { color: #fff; }
+.dark .lovart-image-action-bar > button:hover,
+.dark .lovart-image-action-bar > button[data-state="open"],
+.dark .lovart-image-action-bar > button[data-reference-active="true"] {
+  background: rgba(255, 255, 255, 0.08);
+  color: #fff;
+}
+.dark .lovart-image-action-bar > button:disabled { color: rgba(255, 255, 255, 0.3); }
+.dark .lovart-image-action-bar > button > img { filter: brightness(0) invert(1); }
+.dark .lovart-image-action-bar > div.w-px { background: rgba(255, 255, 255, 0.1); }
+
+.lovart-image-action-bar[data-show-tool-names="true"] > button[data-tool-key] { width: auto; gap: 7.5px; padding: 0 12.5px; font-size: 16.25px; }
+.lovart-image-tool-label { white-space: nowrap; }
+.lovart-image-tool-tooltip { z-index: 10030; border: 0; border-radius: 6px; background: #1b1b1b; padding: 6px 9px; color: #fff; font-size: 13px; line-height: 18px; box-shadow: 0 4px 10px #00000012; --tw-ring-shadow: 0 0 transparent; }
+.lovart-image-custom-more { min-width: 172px; padding: 6px 12px; border: 1px solid #e8e8e8; border-radius: 12px; background: #fff; }
+.lovart-image-custom-more [role="menuitem"] { min-height: 32px; gap: 10px; padding: 4px 0; font-size: 14px; font-weight: 400; }
+.lovart-image-custom-more .lovart-customize-entry { justify-content: center; gap: 5px; }
+.lovart-toolbar-customizer-overlay { z-index: 10010; background: #0006; }
+.lovart-toolbar-customizer { z-index: 10020; display: flex; flex-direction: column; width: min(720px, calc(100vw - 32px)); max-width: 720px; max-height: calc(100dvh - 48px); gap: 0; padding: 20px 24px 24px; border: 1px solid #e5e5e5; border-radius: 16px; background: #fff; color: #242424; box-shadow: 0 8px 24px #00000012; }
+.lovart-customizer-header { display: flex; flex-shrink: 0; justify-content: space-between; align-items: flex-start; gap: 16px; }
+.lovart-customizer-header h2 { margin: 0; font-size: 18px; line-height: 24px; font-weight: 600; }
+.lovart-customizer-header p { margin-top: 2px; color: inherit; font-size: 14px; line-height: 22px; }
+.lovart-customizer-header-actions { display: flex; gap: 4px; }
+.lovart-customizer-header-actions button { display: flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 7px; }
+.lovart-customizer-header-actions button:last-child { background: #f1f1f1; }
+.lovart-customizer-header-actions button:hover { background: #e9e9e9; }
+.lovart-customizer-body { min-height: 0; overflow-y: auto; margin: 24px 0 20px; }
+.lovart-customizer-preview { display: flex; height: 180px; align-items: center; overflow: hidden; padding: 16px; border-radius: 10px; background: #e5edef url("/icons/lovart/toolbar-preview.png") center / cover; }
+.lovart-customizer-preview-bar { display: flex; align-items: center; flex: 1; min-width: 0; gap: 4px; padding: 5px 8px; border: 1px solid #e5e5e5; border-radius: 14px; background: #fff; overflow-x: auto; scrollbar-width: thin; }
+.lovart-preview-fixed,.lovart-preview-chip { display: flex; align-items: center; flex-shrink: 0; height: 32px; gap: 8px; padding: 0 10px; font-size: 13px; white-space: nowrap; }
+.lovart-preview-chip { position: relative; margin-top: 5px; margin-bottom: 5px; border-radius: 8px; background: #f4f4f4; cursor: grab; }
+.lovart-preview-chip:active { cursor: grabbing; }
+.lovart-preview-chip > button:last-child { position: absolute; top: -5px; right: -3px; display: flex; width: 16px; height: 16px; align-items: center; justify-content: center; border: 1px solid #e6e6e6; border-radius: 50%; background: #fff; color: #888; }
+.lovart-customizer-tools { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 24px; }
+.lovart-customizer-tools > button { display: flex; align-items: center; gap: 10px; height: 36px; min-width: 0; padding: 0 12px; border: 1px solid #e2e2e2; border-radius: 8px; background: #fff; font-size: 14px; text-align: left; }
+.lovart-customizer-tools > button > span:not([aria-hidden]) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.lovart-customizer-tools > button > svg:last-child { flex-shrink: 0; }
+.lovart-customizer-tools > button:hover { background: #f7f7f7; }
+.lovart-customizer-footer { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 16px; }
+.lovart-customizer-footer > label,.lovart-customizer-footer > div { display: flex; align-items: center; gap: 8px; font-size: 14px; }
+.lovart-customizer-switch { width: 32px; height: 18px; padding: 2px; border-radius: 20px; background: #d5d5d5; }
+.lovart-customizer-switch > span { display: block; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .15s; }
+.lovart-customizer-switch[aria-checked="true"] { background: #2c2c2c; }
+.lovart-customizer-switch[aria-checked="true"] > span { transform: translateX(14px); }
+.lovart-customizer-footer > div > button { width: 80px; height: 36px; border: 1px solid #e3e3e3; border-radius: 8px; font-size: 14px; }
+.lovart-customizer-footer .lovart-customizer-save { border-color: #2c2c2c; background: #2c2c2c; color: #fff; }
+.lovart-customizer-footer > div > button:hover { opacity: .8; }
+.lovart-toolbar-customizer button:focus-visible,.lovart-preview-chip:focus-visible { outline: 2px solid #397dff; outline-offset: 2px; }
+.dark .lovart-toolbar-customizer,.dark .lovart-image-custom-more { background: #202124; border-color: #3d3e40; color: #f5f5f5; }
+.dark .lovart-customizer-preview-bar,.dark .lovart-customizer-tools > button { background: #26272a; border-color: #46474a; }
+.dark .lovart-preview-chip,.dark .lovart-customizer-header-actions button:last-child { background: #35363a; }
+.dark .lovart-preview-chip > button:last-child { background: #26272a; border-color: #46474a; color: #ccc; }
+.dark .lovart-customizer-tools > button:hover { background: #35363a; }
+@media(max-width:600px) { .lovart-toolbar-customizer { padding: 18px; } .lovart-customizer-tools { grid-template-columns: repeat(2,minmax(0,1fr)); } .lovart-customizer-preview { height: 140px; } }
+
+.lovart-preview-handle { display: flex; align-items: center; gap: 8px; white-space: nowrap; cursor: grab; }
+
+.lovart-image-tool-tooltip { display: flex; align-items: center; gap: 8px; }
+.lovart-image-tool-cost { margin-left: auto; padding: 0; background: transparent; color: #999; font-size: 12px; font-weight: 400; box-shadow: none; }
+.lovart-image-tool-cost > svg { width: 12px; height: 12px; }
+
+/* Preserve the canvas's own skills as the primary welcome content. */
+.canvas-welcome-action {
+  display: inline-flex;
+  min-height: 36px;
+  min-width: 0;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 6px 8px;
+  border: 1px solid #e5e5e5;
+  border-radius: 999px;
+  background: white;
+  color: #333;
+  font-size: 12px;
+  line-height: 16px;
+  transition: background-color 150ms, border-color 150ms;
+}
+.canvas-welcome-action:hover { background: #f7f7f7; border-color: #d4d4d4; }
+.canvas-welcome-action:focus-visible { outline: 2px solid #8c8c8c; outline-offset: 3px; }
+.dark .canvas-welcome-action { border-color: rgb(255 255 255 / 12%); background: #18181b; color: #eee; }
+.dark .canvas-welcome-action:hover { background: #27272a; border-color: rgb(255 255 255 / 22%); }

app/layout.tsx

@@ -94,18 +94,33 @@ const CHUNK_ERROR_RECOVERY_SCRIPT = `\
     }
   }
   
-  function safeRemoveSessionStorage(key) {
-    try {
-      sessionStorage.removeItem(key);
-      return true;
-    } catch (e) {
-      return false;
-    }
-  }
-  
-  var RECOVERY_KEY = 'chunk-reload-attempted-v2';
+  // Keep one attempt per route for the browser session. A cooldown alone can
+  // turn a recurring editor exception into an endless reload cycle.
+  var RECOVERY_KEY = 'chunk-reload-attempted-v3:' + window.location.pathname;
   var lastReloadAt = Number(safeGetSessionStorage(RECOVERY_KEY) || '0') || 0;
-  
+  var recoveryNoticeShown = false;
+
+  function isFlowBoardEditing() {
+    var path = window.location.pathname;
+    return path === '/flow-board' || path.indexOf('/flow-board/') === 0;
+  }
+
+  function showManualRecoveryNotice() {
+    if (recoveryNoticeShown) return;
+    recoveryNoticeShown = true;
+    function show() {
+      if (!document.body || !isFlowBoardEditing()) return;
+      var notice = document.createElement('div');
+      notice.setAttribute('role', 'alert');
+      notice.setAttribute('data-runtime-recovery-notice', 'true');
+      notice.style.cssText = 'position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:2147483647;max-width:calc(100vw - 32px);padding:12px 16px;border:1px solid var(--border,#e4e4e7);border-radius:12px;background:var(--background,#fff);color:var(--foreground,#27272a);box-shadow:0 4px 20px #0002;font:14px/1.5 system-ui;';
+      notice.textContent = '部分页面资源加载失败，请先保存白板后手动刷新页面。';
+      document.body.appendChild(notice);
+    }
+    if (document.body) show();
+    else window.addEventListener('DOMContentLoaded', show, { once: true });
+  }
+
   function shouldAutoRecover(message) {
     if (!message) return false;
     var normalized = String(message).toLowerCase();
@@ -117,28 +132,33 @@ const CHUNK_ERROR_RECOVERY_SCRIPT = `\
       normalized.indexOf('error loading dynamically imported module') !== -1 ||
       normalized.indexOf('importing a module script failed') !== -1 ||
       normalized.indexOf('module script load failed') !== -1 ||
-      normalized.indexOf('/_next/static/chunks/') !== -1 ||
-      normalized.indexOf('failed to find server action') !== -1 ||
-      normalized.indexOf('server components render') !== -1 ||
-      normalized.indexOf('application error: a client-side exception') !== -1
+      normalized.indexOf('failed to find server action') !== -1
     );
   }
   
   function triggerAutoRecover(reason) {
+    if (isFlowBoardEditing()) {
+      showManualRecoveryNotice();
+      return;
+    }
+    if (lastReloadAt) return;
     var now = Date.now();
-    if (lastReloadAt && now - lastReloadAt < 30000) return;
+    // If storage is blocked, a reload cannot remember its attempt and must not run.
+    if (!safeSetSessionStorage(RECOVERY_KEY, String(now))) return;
     lastReloadAt = now;
-    console.warn('[RuntimeRecover] 检测到前端运行时异常，自动刷新页面...', reason || '');
-    safeSetSessionStorage(RECOVERY_KEY, String(now));
+    console.warn('[RuntimeRecover] 检测到页面资源加载失败，尝试恢复一次...', reason || '');
     setTimeout(function() {
+      if (isFlowBoardEditing()) {
+        showManualRecoveryNotice();
+        return;
+      }
       window.location.reload();
     }, 800);
   }
-  
+
   window.addEventListener('error', function(event) {
     var message = '';
     if (event && event.message) message += event.message;
-    if (event && event.filename) message += ' ' + event.filename;
     if (event && event.error && event.error.message) {
       message += ' ' + event.error.message;
     }
@@ -157,12 +177,6 @@ const CHUNK_ERROR_RECOVERY_SCRIPT = `\
     }
   });
   
-  // 页面稳定一段时间后清除标记，避免旧资源异常无限刷新。
-  window.addEventListener('load', function() {
-    setTimeout(function() {
-      safeRemoveSessionStorage(RECOVERY_KEY);
-    }, 120000);
-  });
 })();`;
 
 export default function RootLayout({

components/agents/AgentAiTemplateDialog.tsx

@@ -0,0 +1,315 @@
+"use client";
+
+import { useEffect, useId, useRef, useState } from "react";
+import { LayoutTemplate, Loader2, Upload } from "lucide-react";
+import { toast } from "sonner";
+import { AgentPreviewImage } from "@/components/agents/AgentPreviewImage";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { fetchUploadWithRetry } from "@/lib/client/upload-with-retry";
+import { imageGenerationService } from "@/services/canvas";
+
+const POLL_INTERVAL_MS = 2500;
+const POLL_LIMIT = 240;
+
+export type AgentAiTemplateResult = {
+  imageUrl: string;
+  sourceImageUrl: string;
+  referenceImageUrl: string;
+};
+
+type AgentAiTemplateDialogProps = {
+  open: boolean;
+  sourceImageUrl?: string | null;
+  model?: string | null;
+  imageSize?: string | null;
+  projectId: string;
+  onOpenChange: (open: boolean) => void;
+  onProcessingChange?: (processing: boolean, sourceImageUrl: string) => void;
+  onResultCreated: (result: AgentAiTemplateResult) => void | Promise<void>;
+};
+
+function isHttpImageUrl(value?: string | null) {
+  return /^https?:\/\//i.test(String(value || "").trim());
+}
+
+function sleep(ms: number) {
+  return new Promise((resolve) => window.setTimeout(resolve, ms));
+}
+
+async function pollAiTemplateTask(taskId: string) {
+  for (let attempt = 0; attempt < POLL_LIMIT; attempt += 1) {
+    await sleep(POLL_INTERVAL_MS);
+    const taskResult = await imageGenerationService.getImageTask(taskId);
+    const task = taskResult.data?.task;
+    if (!taskResult.success || !task) {
+      continue;
+    }
+
+    const status = String(task.status || "").toLowerCase();
+    if (status === "succeeded" || status === "completed") {
+      const image = task.result?.images?.[0];
+      const imageUrl = String(image?.originalUrl || image?.thumbnailUrl || "").trim();
+      if (!isHttpImageUrl(imageUrl)) {
+        throw new Error("AI套模版已完成但未返回结果图片");
+      }
+      return imageUrl;
+    }
+
+    if (["failed", "cancelled", "expired", "banned"].includes(status)) {
+      throw new Error(task.error || "AI套模版生成失败");
+    }
+  }
+
+  throw new Error("AI套模版任务等待超时，请稍后在结果区查看");
+}
+
+export function AgentAiTemplateDialog({
+  open,
+  sourceImageUrl,
+  model,
+  imageSize,
+  projectId,
+  onOpenChange,
+  onProcessingChange,
+  onResultCreated,
+}: AgentAiTemplateDialogProps) {
+  const referenceUploadId = useId();
+  const [referenceImageUrl, setReferenceImageUrl] = useState("");
+  const [supplementalPrompt, setSupplementalPrompt] = useState("");
+  const [isUploading, setIsUploading] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const normalizedSourceUrl = String(sourceImageUrl || "").trim();
+  const onProcessingChangeRef = useRef(onProcessingChange);
+  const onResultCreatedRef = useRef(onResultCreated);
+
+  useEffect(() => {
+    onProcessingChangeRef.current = onProcessingChange;
+    onResultCreatedRef.current = onResultCreated;
+  }, [onProcessingChange, onResultCreated]);
+
+  useEffect(() => {
+    if (!open || isSubmitting) return;
+    setReferenceImageUrl("");
+    setSupplementalPrompt("");
+    setIsUploading(false);
+  }, [isSubmitting, open, normalizedSourceUrl]);
+
+  const handleReferenceUpload = async (file?: File) => {
+    if (!file) return;
+    if (!file.type.startsWith("image/")) {
+      toast.error("请上传图片文件");
+      return;
+    }
+
+    setIsUploading(true);
+    try {
+      const formData = new FormData();
+      formData.append("file", file);
+      const response = await fetchUploadWithRetry(formData);
+      const payload = await response.json().catch(() => null);
+      const uploadedUrl = String(payload?.url || "").trim();
+      if (!response.ok || !isHttpImageUrl(uploadedUrl)) {
+        throw new Error(payload?.error || "参考图上传失败");
+      }
+      setReferenceImageUrl(uploadedUrl);
+      toast.success("版式参考图已上传");
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "参考图上传失败");
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  const handleSubmit = async () => {
+    const normalizedReferenceUrl = referenceImageUrl.trim();
+    if (!isHttpImageUrl(normalizedSourceUrl)) {
+      toast.error("当前主图结果地址不可用");
+      return;
+    }
+    if (!isHttpImageUrl(normalizedReferenceUrl)) {
+      toast.error("请先上传或填写版式参考图");
+      return;
+    }
+    if (isSubmitting) return;
+
+    setIsSubmitting(true);
+    onProcessingChangeRef.current?.(true, normalizedSourceUrl);
+    try {
+      const submitResult = await imageGenerationService.layoutReplace({
+        sourceImageUrl: normalizedSourceUrl,
+        referenceImageUrl: normalizedReferenceUrl,
+        supplementalPrompt: supplementalPrompt.trim() || undefined,
+        model: model && model !== "auto" ? model : undefined,
+        imageSize: imageSize || "2K",
+        agentProjectId: projectId,
+        referenceLabel: "风格化主图 AI 套模版参考图",
+        debugMeta: {
+          operation: "agent-main-ai-template",
+          source: "agent-main-result-card",
+        },
+      });
+      const taskId = String(submitResult.data?.taskId || "").trim();
+      if (!submitResult.success || !taskId) {
+        throw new Error(submitResult.error || "AI套模版提交失败");
+      }
+
+      onOpenChange(false);
+      toast.success("AI套模版已进入生图队列");
+      const resultImageUrl = await pollAiTemplateTask(taskId);
+      await onResultCreatedRef.current({
+        imageUrl: resultImageUrl,
+        sourceImageUrl: normalizedSourceUrl,
+        referenceImageUrl: normalizedReferenceUrl,
+      });
+      toast.success("AI套模版结果已加入主图结果区");
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "AI套模版生成失败");
+    } finally {
+      setIsSubmitting(false);
+      onProcessingChangeRef.current?.(false, normalizedSourceUrl);
+    }
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(nextOpen) => {
+        if (!isUploading) {
+          onOpenChange(nextOpen);
+        }
+      }}
+    >
+      <DialogContent className="flex max-h-[calc(100dvh-1rem)] w-[calc(100vw-1rem)] max-w-[780px] flex-col gap-0 overflow-hidden border-white/10 bg-[#09090b] p-0 text-white sm:max-h-[calc(100dvh-2rem)] sm:w-[calc(100vw-2rem)]">
+        <DialogHeader className="shrink-0 border-b border-white/10 px-4 py-3 pr-12 text-left sm:px-6 sm:py-4">
+          <DialogTitle className="flex items-center gap-2 text-base">
+            <LayoutTemplate className="h-4 w-4" />
+            AI套模版
+          </DialogTitle>
+          <DialogDescription className="text-white/55">
+            保留参考图的版式、文字和图标，仅将产品主体替换为当前主图。
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 py-4 sm:px-6">
+          <div className="grid gap-4 md:grid-cols-2">
+            <div className="min-w-0 space-y-2">
+              <Label>当前主图</Label>
+              <div className="flex h-[clamp(180px,34dvh,340px)] items-center justify-center overflow-hidden rounded-lg border border-white/10 bg-zinc-900">
+                {isHttpImageUrl(normalizedSourceUrl) ? (
+                  <AgentPreviewImage
+                    alt="当前主图结果"
+                    className="max-h-full max-w-full object-contain"
+                    eager
+                    previewQuality={86}
+                    previewWidth={720}
+                    src={normalizedSourceUrl}
+                  />
+                ) : null}
+              </div>
+            </div>
+
+            <div className="min-w-0 space-y-2">
+              <Label htmlFor={referenceUploadId}>版式参考图</Label>
+              <div className="flex gap-2">
+                <Input
+                  className="min-w-0 border-white/10 bg-white/[0.04]"
+                  onChange={(event) => setReferenceImageUrl(event.currentTarget.value)}
+                  placeholder="填写图片链接或上传"
+                  value={referenceImageUrl}
+                />
+                <Button
+                  asChild
+                  className="shrink-0 border-white/10 bg-white/[0.06] text-white hover:bg-white/[0.12]"
+                  variant="outline"
+                >
+                  <label htmlFor={referenceUploadId}>
+                    {isUploading ? (
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    ) : (
+                      <Upload className="mr-2 h-4 w-4" />
+                    )}
+                    上传
+                  </label>
+                </Button>
+                <input
+                  accept="image/jpeg,image/png,image/webp,image/heic,image/heif,.heic,.heif"
+                  className="sr-only"
+                  disabled={isUploading || isSubmitting}
+                  id={referenceUploadId}
+                  onChange={(event) => {
+                    const file = event.currentTarget.files?.[0];
+                    event.currentTarget.value = "";
+                    void handleReferenceUpload(file);
+                  }}
+                  type="file"
+                />
+              </div>
+              <div className="flex h-[clamp(180px,34dvh,340px)] items-center justify-center overflow-hidden rounded-lg border border-dashed border-white/10 bg-zinc-900">
+                {isUploading ? (
+                  <Loader2 className="h-5 w-5 animate-spin text-white/45" />
+                ) : isHttpImageUrl(referenceImageUrl) ? (
+                  <AgentPreviewImage
+                    alt="AI套模版参考图"
+                    className="max-h-full max-w-full object-contain"
+                    eager
+                    previewQuality={86}
+                    previewWidth={720}
+                    src={referenceImageUrl}
+                  />
+                ) : (
+                  <LayoutTemplate className="h-7 w-7 text-white/20" />
+                )}
+              </div>
+            </div>
+          </div>
+
+          <div className="mt-4 space-y-2">
+            <Label htmlFor={`${referenceUploadId}-prompt`}>补充要求</Label>
+            <Textarea
+              className="min-h-[84px] max-h-[180px] border-white/10 bg-white/[0.04]"
+              id={`${referenceUploadId}-prompt`}
+              onChange={(event) => setSupplementalPrompt(event.currentTarget.value)}
+              placeholder="可选：补充产品材质、颜色或替换细节"
+              value={supplementalPrompt}
+            />
+          </div>
+        </div>
+
+        <DialogFooter className="shrink-0 gap-2 border-t border-white/10 bg-black/25 px-4 py-3 sm:px-6">
+          <Button
+            className="border-white/10 bg-white/[0.04] text-white hover:bg-white/[0.10] hover:text-white"
+            disabled={isUploading}
+            onClick={() => onOpenChange(false)}
+            type="button"
+            variant="outline"
+          >
+            取消
+          </Button>
+          <Button
+            disabled={isSubmitting || isUploading || !isHttpImageUrl(referenceImageUrl)}
+            onClick={() => void handleSubmit()}
+            type="button"
+          >
+            {isSubmitting ? (
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            ) : (
+              <LayoutTemplate className="mr-2 h-4 w-4" />
+            )}
+            {isSubmitting ? "提交中" : "开始AI套模版"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

components/agents/AgentGenerationWorkspaceDarkV2.tsx

@@ -26,6 +26,7 @@ import {
   Download,
   GitCompareArrows,
   ImagePlus,
+  LayoutTemplate,
   Loader2,
   Maximize2,
   Sparkles,
@@ -37,6 +38,10 @@ import {
   Settings2,
 } from "lucide-react";
 import { toast } from "sonner";
+import {
+  IMAGE_UPLOAD_MAX_BYTES,
+  IMAGE_UPLOAD_TOO_LARGE_MESSAGE,
+} from "@/lib/image-upload-limits";
 import { Button } from "@/components/ui/button";
 import { ClientErrorBoundary } from "@/components/ui/client-error-boundary";
 import {
@@ -64,6 +69,10 @@ import { ImageParamsBar, type ImageGenerationParams } from "@/components/image-p
 import { AgentWorkflowShowcaseBanner } from "@/components/agents/AgentWorkflowShowcaseBanner";
 import { AgentDetailReferenceStitchDialog } from "@/components/agents/AgentDetailReferenceStitchDialog";
 import { AgentImageTextEditDialog } from "@/components/agents/AgentImageTextEditDialog";
+import {
+  AgentAiTemplateDialog,
+  type AgentAiTemplateResult,
+} from "@/components/agents/AgentAiTemplateDialog";
 import { AgentPsdTemplateEditorDialog } from "@/components/agents/AgentPsdTemplateEditorDialog";
 import { AgentPreviewImage } from "@/components/agents/AgentPreviewImage";
 import {
@@ -300,7 +309,7 @@ const MAX_CHAT_HIDDEN_PROMPT_LENGTH = 4000;
 const MAX_CHAT_ATTACHMENT_NAME_LENGTH = 100;
 const MAX_AGENT_MODE_QUERY_LENGTH = 64;
 const MAX_AGENT_MODE_REFERENCE_COUNT = 40;
-const DETAIL_LOCAL_EDIT_REFERENCE_MAX_UPLOAD_BYTES = 30 * 1024 * 1024;
+const DETAIL_LOCAL_EDIT_REFERENCE_MAX_UPLOAD_BYTES = IMAGE_UPLOAD_MAX_BYTES;
 const REPLACEMENT_RERUN_MAX_REFERENCE_IMAGES = 4;
 const DETAIL_LOCAL_EDIT_MIN_RECT_RATIO = 0.025;
 const DETAIL_SCALE_TARGET_MIN_PERCENT = -80;
@@ -662,9 +671,10 @@ const AGENT_DEFERRED_SECTION_STYLE = {
   containIntrinsicSize: "1px 760px",
 } as CSSProperties;
 
-const AGENT_DEFERRED_RESULTS_STYLE = {
-  contentVisibility: "auto",
-  containIntrinsicSize: "1px 900px",
+// Dynamic result content must stay painted while scrolling. Deferring this subtree
+// makes Chromium briefly discard image and animation layers at viewport boundaries.
+const AGENT_STABLE_RESULTS_STYLE = {
+  contentVisibility: "visible",
 } as CSSProperties;
 
 const AGENT_DEFERRED_LIST_CARD_STYLE = {
@@ -672,6 +682,10 @@ const AGENT_DEFERRED_LIST_CARD_STYLE = {
   containIntrinsicSize: "1px 320px",
 } as CSSProperties;
 
+const AGENT_STABLE_RESULT_CARD_STYLE = {
+  contentVisibility: "visible",
+} as CSSProperties;
+
 function handlePreviewImageLoadError(
   event: SyntheticEvent<HTMLImageElement, Event>,
   originalUrl: string
@@ -832,7 +846,7 @@ async function uploadDetailLocalEditReferenceImage(
     throw new Error("请上传图片文件");
   }
   if (file.size > DETAIL_LOCAL_EDIT_REFERENCE_MAX_UPLOAD_BYTES) {
-    throw new Error("参考图过大，请先压缩到 30MB 以内");
+    throw new Error(IMAGE_UPLOAD_TOO_LARGE_MESSAGE);
   }
 
   const formData = new FormData();
@@ -2703,29 +2717,40 @@ function DetailResultProcessingScanOverlay({
   return (
     <div className="absolute inset-0 z-30 overflow-hidden rounded-[inherit] bg-[#07090f]">
       <style>{`
-        @keyframes detailResultScanBreatheBlur {
-          0%, 100% { filter: blur(14px) brightness(0.8) saturate(0.9); transform: scale(1.08); }
-          50% { filter: blur(17px) brightness(0.9) saturate(0.98); transform: scale(1.1); }
+        @keyframes detailResultScanBreathe {
+          0%, 100% { opacity: 0.68; transform: translate3d(0, 0, 0) scale(1.06); }
+          50% { opacity: 0.8; transform: translate3d(0, 0, 0) scale(1.075); }
         }
         @keyframes detailResultScanSweep {
-          0% { top: -7%; opacity: 0; }
+          0% { opacity: 0; transform: translate3d(0, -100%, 0); }
           8% { opacity: 1; }
           92% { opacity: 1; }
-          100% { top: 107%; opacity: 0; }
+          100% { opacity: 0; transform: translate3d(0, 0, 0); }
         }
         @keyframes detailResultScanPulseRing {
           0% { box-shadow: 0 0 0 0 rgba(125, 211, 252, 0.48); }
           70% { box-shadow: 0 0 0 8px rgba(125, 211, 252, 0); }
           100% { box-shadow: 0 0 0 0 rgba(125, 211, 252, 0); }
         }
+        @media (prefers-reduced-motion: reduce) {
+          [data-detail-result-scan-animation] { animation: none !important; }
+        }
       `}</style>
       {isHttpImageUrl(imageUrl) ? (
-        <img
+        <AgentPreviewImage
           alt=""
           aria-hidden
+          data-detail-result-scan-animation
           className="absolute inset-0 h-full w-full object-cover"
           src={imageUrl}
-          style={{ animation: "detailResultScanBreatheBlur 6s ease-in-out infinite" }}
+          previewWidth={720}
+          previewQuality={62}
+          rootMargin="320px 0px"
+          style={{
+            animation: "detailResultScanBreathe 6s ease-in-out infinite",
+            filter: "blur(12px) brightness(0.84) saturate(0.92)",
+            willChange: "opacity, transform",
+          }}
         />
       ) : (
         <div
@@ -2747,8 +2772,12 @@ function DetailResultProcessingScanOverlay({
       />
       <div
         aria-hidden
-        className="absolute inset-x-0 top-0 z-40 h-px pointer-events-none"
-        style={{ animation: "detailResultScanSweep 2.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite" }}
+        data-detail-result-scan-animation
+        className="pointer-events-none absolute inset-0 z-40"
+        style={{
+          animation: "detailResultScanSweep 2.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite",
+          willChange: "opacity, transform",
+        }}
       >
         <div
           className="absolute inset-x-0 bottom-0 h-[110px]"
@@ -2759,7 +2788,7 @@ function DetailResultProcessingScanOverlay({
           }}
         />
         <div
-          className="absolute inset-x-0 top-0 h-[38px]"
+          className="absolute inset-x-0 -bottom-[38px] h-[38px]"
           style={{
             background:
               "linear-gradient(0deg, transparent, rgba(255,255,255,0.1))",
@@ -2769,15 +2798,23 @@ function DetailResultProcessingScanOverlay({
       </div>
       <div
         aria-hidden
-        className="absolute inset-x-0 top-0 z-50 h-px pointer-events-none"
+        data-detail-result-scan-animation
+        className="pointer-events-none absolute inset-0 z-50"
         style={{
           animation: "detailResultScanSweep 2.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite",
-          background:
-            "linear-gradient(90deg, transparent, rgba(167,139,250,0.7) 18%, rgba(255,255,255,0.98) 50%, rgba(125,211,252,0.7) 82%, transparent)",
-          boxShadow:
-            "0 0 6px rgba(255,255,255,0.7), 0 0 18px rgba(125,211,252,0.55), 0 0 34px rgba(167,139,250,0.35)",
+          willChange: "opacity, transform",
         }}
-      />
+      >
+        <div
+          className="absolute inset-x-0 bottom-0 h-px"
+          style={{
+            background:
+              "linear-gradient(90deg, transparent, rgba(167,139,250,0.7) 18%, rgba(255,255,255,0.98) 50%, rgba(125,211,252,0.7) 82%, transparent)",
+            boxShadow:
+              "0 0 6px rgba(255,255,255,0.7), 0 0 18px rgba(125,211,252,0.55), 0 0 34px rgba(167,139,250,0.35)",
+          }}
+        />
+      </div>
       <div
         className="absolute right-3 top-3 z-[70] isolate inline-flex items-center gap-1.5 rounded-full border border-white/14 bg-[#080b12]/95 px-2.5 py-1.5 text-[11px] font-semibold leading-none text-white shadow-[0_12px_28px_rgba(0,0,0,0.34)]"
         style={{
@@ -3236,6 +3273,10 @@ export function AgentGenerationWorkspaceDarkV2({
   const [psdTemplateDialogMode, setPsdTemplateDialogMode] = useState<AgentPsdTemplateMode>("main");
   const [psdTemplateDialogResultModeType, setPsdTemplateDialogResultModeType] =
     useState<AgentGenerationResultModeType>("scene_generation");
+  const [aiTemplateDialogSourceUrl, setAiTemplateDialogSourceUrl] =
+    useState<string | null>(null);
+  const [aiTemplateProcessingSourceUrl, setAiTemplateProcessingSourceUrl] =
+    useState<string | null>(null);
   const [batchDownloadState, setBatchDownloadState] =
     useState<null | BatchDownloadScope>(null);
   const [batchDownloadDialog, setBatchDownloadDialog] =
@@ -6818,6 +6859,23 @@ export function AgentGenerationWorkspaceDarkV2({
     }, 2800);
   }, []);
 
+  const handleAiTemplateResultCreated = useCallback(
+    (result: AgentAiTemplateResult) => {
+      const appended = appendResultUrlToCollection("scene_generation", result.imageUrl, {
+        compareSourceUrl: result.sourceImageUrl,
+      });
+      if (!appended) {
+        toast.error("当前项目未接入结果保存能力");
+        return;
+      }
+
+      setActiveResultModeType("scene_generation");
+      setSelectedResultUrl(result.imageUrl);
+      showProcessedResultHint(result.imageUrl, "AI套模版完成");
+    },
+    [appendResultUrlToCollection, showProcessedResultHint]
+  );
+
   const updateDetailGenerationProcessedResult = useCallback(
     (params: {
       cardId?: string | null;
@@ -9640,7 +9698,7 @@ export function AgentGenerationWorkspaceDarkV2({
             initial={{ opacity: 0, scale: 0.98 }}
             animate={{ opacity: 1, scale: 1 }}
             transition={{ delay: 0.12 }}
-            style={AGENT_DEFERRED_RESULTS_STYLE}
+            style={AGENT_STABLE_RESULTS_STYLE}
             data-agent-style-section="results"
           >
             <div className="flex items-center justify-between border-b border-white/12 px-5 py-4">
@@ -9826,7 +9884,7 @@ export function AgentGenerationWorkspaceDarkV2({
                       selectedProductAttachments.map((attachment, index) => (
                         <div
                           key={`${attachment?.url || "input"}-${index}`}
-                          style={AGENT_DEFERRED_LIST_CARD_STYLE}
+                          style={AGENT_STABLE_RESULT_CARD_STYLE}
                           className="overflow-hidden rounded-[22px] border border-white/10 bg-black/20"
                         >
                           <div className="aspect-square overflow-hidden bg-black/30">
@@ -9942,7 +10000,7 @@ export function AgentGenerationWorkspaceDarkV2({
                             return (
                           <div
                           key={card.id}
-                          style={AGENT_DEFERRED_LIST_CARD_STYLE}
+                          style={AGENT_STABLE_RESULT_CARD_STYLE}
                           className={cn(
                             "w-full cursor-pointer overflow-hidden rounded-[22px] border bg-black/20 transition-colors",
                             isActive
@@ -10107,7 +10165,7 @@ export function AgentGenerationWorkspaceDarkV2({
                             return (
                         <div
                           key={`${card.id}-result`}
-                          style={AGENT_DEFERRED_LIST_CARD_STYLE}
+                          style={AGENT_STABLE_RESULT_CARD_STYLE}
                           className={cn(
                             "w-full cursor-pointer overflow-hidden rounded-[22px] border bg-black/20 transition-colors",
                             hasResult && isActive
@@ -10378,7 +10436,7 @@ export function AgentGenerationWorkspaceDarkV2({
                       selectedProductAttachments.map((attachment, index) => (
                         <div
                           key={`${attachment?.url || "sku-input"}-${index}`}
-                          style={AGENT_DEFERRED_LIST_CARD_STYLE}
+                          style={AGENT_STABLE_RESULT_CARD_STYLE}
                           className="overflow-hidden rounded-[22px] border border-white/10 bg-black/20"
                         >
                           <div className="aspect-square overflow-hidden bg-black/30">
@@ -10550,7 +10608,7 @@ export function AgentGenerationWorkspaceDarkV2({
                               key={candidate.id}
                               type="button"
                               onClick={() => handleSelectSkuReplacementCandidate(candidate.id)}
-                              style={AGENT_DEFERRED_LIST_CARD_STYLE}
+                              style={AGENT_STABLE_RESULT_CARD_STYLE}
                               className={cn(
                                 "min-w-[280px] overflow-hidden rounded-[20px] border text-left transition-colors",
                                 isSelected
@@ -10617,7 +10675,7 @@ export function AgentGenerationWorkspaceDarkV2({
                       skuReplacementReferenceCards.map((card, index) => (
                         <div
                           key={card.id}
-                          style={AGENT_DEFERRED_LIST_CARD_STYLE}
+                          style={AGENT_STABLE_RESULT_CARD_STYLE}
                           className={cn(
                             "w-full cursor-pointer overflow-hidden rounded-[22px] border bg-black/20 transition-colors",
                             activeSkuReferenceCardId === card.id
@@ -10746,7 +10804,7 @@ export function AgentGenerationWorkspaceDarkV2({
                         return (
                         <div
                           key={`${card.id}-result`}
-                          style={AGENT_DEFERRED_LIST_CARD_STYLE}
+                          style={AGENT_STABLE_RESULT_CARD_STYLE}
                           className={cn(
                             "w-full cursor-pointer overflow-hidden rounded-[22px] border bg-black/20 transition-colors",
                             hasResult && activeSkuReferenceCardId === card.id
@@ -10885,12 +10943,21 @@ export function AgentGenerationWorkspaceDarkV2({
                     className="flex flex-1 flex-col px-6 pb-6 pt-5 md:px-8"
                   >
                     <div className="mx-auto w-full max-w-[1200px]">
-                      <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
+                      <div
+                        className={cn(
+                          "grid gap-4",
+                          activeResultModeType === "scene_generation"
+                            ? "grid-cols-1 md:grid-cols-2"
+                            : "grid-cols-2 md:grid-cols-4"
+                        )}
+                      >
                           {gridResultCards.map((card) => {
                             const isActive = card.url && displayedResultUrl === card.url;
                             const isSceneResultCard = activeResultModeType === "scene_generation";
                             const isDetailGenerationCard =
                               activeResultModeType === "detail_generation";
+                            const isAiTemplateProcessing =
+                              aiTemplateProcessingSourceUrl === card.url;
                             const isDetailEnhancing = detailEnhancingCardIds.has(card.id);
                             const isDetailLocalEditBusy =
                               detailLocalEditSubmittingId === card.id;
@@ -10913,7 +10980,7 @@ export function AgentGenerationWorkspaceDarkV2({
                               key={card.id}
                               role={card.url ? "button" : undefined}
                               tabIndex={card.url ? 0 : -1}
-                              style={AGENT_DEFERRED_LIST_CARD_STYLE}
+                              style={AGENT_STABLE_RESULT_CARD_STYLE}
                               onClick={() => {
                                 if (!card.url) return;
                                 setSelectedResultUrl(card.url);
@@ -10953,36 +11020,70 @@ export function AgentGenerationWorkspaceDarkV2({
                                     />
                                     {isSceneResultCard ? (
                                       <>
-                                        <button
-                                          type="button"
-                                          onClick={(event) => {
-                                            event.stopPropagation();
-                                            setSelectedResultUrl(card.url!);
-                                            setSceneResizeEditorTargetUrl(card.url!);
-                                          }}
-                                          className={cn("absolute left-3 top-3 flex h-9 w-9 items-center justify-center", IMAGE_OVERLAY_ACTIVE_BADGE_CLASS, "px-0 py-0")}
-                                          aria-label="调整尺寸"
-                                        >
-                                          <Maximize2 className="h-4 w-4" />
-                                        </button>
-                                        {isPsdTemplateEnabled ? (
+                                        <div className="absolute left-3 right-14 top-3 flex flex-wrap items-center gap-2">
                                           <button
                                             type="button"
                                             onClick={(event) => {
                                               event.stopPropagation();
                                               setSelectedResultUrl(card.url!);
-                                              openPsdTemplateDialog({
-                                                sourceImageUrl: card.url!,
-                                                mode: getPsdTemplateModeByResultMode(activeResultModeType),
-                                              });
+                                              setSceneResizeEditorTargetUrl(card.url!);
                                             }}
-                                            className={cn("absolute left-14 top-3 flex items-center gap-1", IMAGE_OVERLAY_ACTION_CLASS)}
-                                            aria-label="套用 PSD 模板"
+                                            className={cn(
+                                              "flex h-9 w-9 items-center justify-center px-0 py-0",
+                                              IMAGE_OVERLAY_ACTIVE_BADGE_CLASS
+                                            )}
+                                            aria-label="调整尺寸"
                                           >
-                                            <ImagePlus className="h-3.5 w-3.5" />
-                                            <span>套PSD</span>
+                                            <Maximize2 className="h-4 w-4" />
                                           </button>
-                                        ) : null}
+                                          {isPsdTemplateEnabled ? (
+                                            <button
+                                              type="button"
+                                              onClick={(event) => {
+                                                event.stopPropagation();
+                                                setSelectedResultUrl(card.url!);
+                                                openPsdTemplateDialog({
+                                                  sourceImageUrl: card.url!,
+                                                  mode: getPsdTemplateModeByResultMode(
+                                                    activeResultModeType
+                                                  ),
+                                                });
+                                              }}
+                                              className={cn(
+                                                "flex items-center gap-1",
+                                                IMAGE_OVERLAY_ACTION_CLASS
+                                              )}
+                                              aria-label="套用 PSD 模板"
+                                            >
+                                              <ImagePlus className="h-3.5 w-3.5" />
+                                              <span>套PSD</span>
+                                            </button>
+                                          ) : null}
+                                          <button
+                                            type="button"
+                                            onClick={(event) => {
+                                              event.stopPropagation();
+                                              setSelectedResultUrl(card.url!);
+                                              setAiTemplateDialogSourceUrl(card.url!);
+                                            }}
+                                            disabled={Boolean(aiTemplateProcessingSourceUrl)}
+                                            className={cn(
+                                              "flex items-center gap-1 disabled:cursor-not-allowed disabled:opacity-55",
+                                              IMAGE_OVERLAY_ACTION_CLASS
+                                            )}
+                                            aria-label="AI套模版"
+                                            aria-busy={isAiTemplateProcessing}
+                                          >
+                                            {isAiTemplateProcessing ? (
+                                              <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                                            ) : (
+                                              <LayoutTemplate className="h-3.5 w-3.5" />
+                                            )}
+                                            <span>
+                                              {isAiTemplateProcessing ? "AI套版中" : "AI套模版"}
+                                            </span>
+                                          </button>
+                                        </div>
                                         <div className="pointer-events-none absolute inset-x-3 bottom-3 rounded-2xl border border-white/25 bg-zinc-950/82 px-3 py-2 font-semibold text-[11px] text-white shadow-[0_12px_34px_rgba(0,0,0,0.48)] backdrop-blur-md">
                                           双击查看大图
                                         </div>
@@ -11230,6 +11331,29 @@ export function AgentGenerationWorkspaceDarkV2({
         </div>
       </main>
 
+      <AgentAiTemplateDialog
+        imageSize={imageParams.imageSize}
+        model={selectedModelId !== "auto" ? selectedModelId : effectiveDefaultModelId}
+        projectId={projectId}
+        onOpenChange={(open) => {
+          if (!open) {
+            setAiTemplateDialogSourceUrl(null);
+          }
+        }}
+        onProcessingChange={(processing, sourceImageUrl) => {
+          setAiTemplateProcessingSourceUrl((current) =>
+            processing
+              ? sourceImageUrl
+              : current === sourceImageUrl
+                ? null
+                : current
+          );
+        }}
+        onResultCreated={handleAiTemplateResultCreated}
+        open={Boolean(aiTemplateDialogSourceUrl)}
+        sourceImageUrl={aiTemplateDialogSourceUrl}
+      />
+
       {sceneResizeEditorTargetUrl ? (
         <ImageAnnotator
           key={`agent-scene-resize-${sceneResizeEditorTargetUrl}`}

components/agents/agent-psd-template-export-preview.tsx

@@ -112,6 +112,8 @@ const PREVIEW_DIMENSION_HANDLE_RADIUS = 3.2;
 const PREVIEW_DIMENSION_HANDLE_STROKE_WIDTH = 1.2;
 const PREVIEW_DIMENSION_TEXT_HALO_WIDTH = 2.2;
 const PREVIEW_DIMENSION_TEXT_OUTLINE_WIDTH = 0.85;
+const DIMENSION_FONT_FAMILY =
+  '"PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif';
 const SIZE_INFO_LINE_REGEX = /尺寸信息[:：]\s*([^\n]+)/i;
 const NUMBER_REGEX = /\d+(?:\.\d+)?/g;
 const HEX_COLOR_REGEX = /^#(?:[0-9a-fA-F]{3}){1,2}$/;
@@ -568,87 +570,54 @@ function drawAnnotationToCanvas(params: {
   context: CanvasRenderingContext2D;
   annotation: DimensionAnnotation;
   imageSize: ImageSize;
+  previewRect: PreviewRect;
   annotations: DimensionAnnotation[];
   autoDimensionValues?: AutoDimensionValues | null;
 }) {
-  const { context, annotation, imageSize, annotations, autoDimensionValues } =
-    params;
+  const { context, annotation } = params;
   const annotationColor = getAnnotationColor(annotation);
-  const label = getDimensionLabel({
-    annotation,
-    annotations,
-    autoDimensionValues,
-  });
-  const vector = getAnnotationVector(
-    annotation.x1,
-    annotation.y1,
-    annotation.x2,
-    annotation.y2
-  );
-  const rawAngleRadians = Math.atan2(vector.dy, vector.dx);
-  const angleRadians =
-    rawAngleRadians > Math.PI / 2
-      ? rawAngleRadians - Math.PI
-      : rawAngleRadians < -Math.PI / 2
-        ? rawAngleRadians + Math.PI
-        : rawAngleRadians;
-  const strokeWidth = clamp(
-    Math.min(imageSize.width, imageSize.height) * 0.001_35,
-    1,
-    2.4
-  );
-  const capLength = strokeWidth * 5.3;
-  const fontSize = clamp(
-    Math.round(Math.min(imageSize.width, imageSize.height) * 0.0176),
-    11,
-    27
-  );
-  const labelOffset = fontSize * 0.95;
-  const centerX = (annotation.x1 + annotation.x2) / 2 + vector.nx * labelOffset;
-  const centerY = (annotation.y1 + annotation.y2) / 2 + vector.ny * labelOffset;
+  const geometry = getPreviewAnnotationGeometry(params);
   const textOutlineColor = getAnnotationTextOutlineColor(annotation);
-  const textOutlineWidth = annotation.glow
-    ? Math.max(1.5, fontSize * 0.18)
-    : Math.max(0.85, fontSize * 0.08);
 
   context.save();
   context.strokeStyle = annotationColor;
-  context.lineWidth = strokeWidth;
+  context.lineWidth = PREVIEW_DIMENSION_STROKE_WIDTH;
   context.lineCap = "round";
   context.lineJoin = "round";
   context.shadowColor = annotation.glow
-    ? colorWithAlpha(annotationColor, 0.52)
+    ? colorWithAlpha(annotationColor, 0.42)
     : "transparent";
-  context.shadowBlur = annotation.glow ? Math.max(8, fontSize * 0.7) : 0;
+  context.shadowBlur = annotation.glow ? 4 : 0;
 
   context.beginPath();
-  context.moveTo(annotation.x1, annotation.y1);
-  context.lineTo(annotation.x2, annotation.y2);
+  context.moveTo(geometry.start.x, geometry.start.y);
+  context.lineTo(geometry.end.x, geometry.end.y);
   context.stroke();
 
+  context.lineWidth = PREVIEW_DIMENSION_CAP_STROKE_WIDTH;
   drawDimensionCap({
     context,
-    point: { x: annotation.x1, y: annotation.y1 },
-    size: capLength,
-    vector,
+    point: geometry.start,
+    size: PREVIEW_DIMENSION_TICK_LENGTH,
+    vector: geometry.vector,
   });
   drawDimensionCap({
     context,
-    point: { x: annotation.x2, y: annotation.y2 },
-    size: capLength,
-    vector,
+    point: geometry.end,
+    size: PREVIEW_DIMENSION_TICK_LENGTH,
+    vector: geometry.vector,
   });
 
-  context.translate(centerX, centerY);
-  context.rotate(angleRadians);
-  context.font = `500 ${fontSize}px "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif`;
+  context.translate(geometry.labelCenterX, geometry.labelCenterY);
+  context.rotate((geometry.angleDegrees * Math.PI) / 180);
+  context.font = `500 ${PREVIEW_DIMENSION_FONT_SIZE}px ${DIMENSION_FONT_FAMILY}`;
   context.textAlign = "center";
   context.textBaseline = "middle";
-  context.lineWidth = textOutlineWidth;
+  context.lineWidth = getAnnotationTextOutlineWidth(annotation);
   context.strokeStyle = textOutlineColor;
-  context.strokeText(label, 0, 0);
+  context.strokeText(geometry.label, 0, 0.5);
   context.fillStyle = annotationColor;
-  context.fillText(label, 0, 0);
+  context.fillText(geometry.label, 0, 0.5);
   context.restore();
 }
 
@@ -1067,6 +1036,10 @@ export function AgentPsdTemplateExportPreview({
         return;
       }
 
+      if (!imageSize || !previewRect) {
+        throw new Error("请等待预览图片加载完成后再下载");
+      }
+
       const { image, dispose } = await loadImageFromCandidates([
         buildImageProxyUrl(imageUrl, { delivery: "proxy" }),
         imageUrl,
@@ -1082,18 +1055,25 @@ export function AgentPsdTemplateExportPreview({
         }
 
         context.drawImage(image, 0, 0, canvas.width, canvas.height);
+        // Draw in the same coordinates as the SVG, then map its image area to
+        // the original bitmap. The preview can use a smaller image variant.
+        context.save();
+        context.scale(
+          canvas.width / previewRect.width,
+          canvas.height / previewRect.height
+        );
+        context.translate(-previewRect.left, -previewRect.top);
         for (const annotation of annotations) {
           drawAnnotationToCanvas({
             annotation,
             annotations,
             autoDimensionValues,
             context,
-            imageSize: {
-              width: canvas.width,
-              height: canvas.height,
-            },
+            imageSize,
+            previewRect,
           });
         }
+        context.restore();
 
         const blob = await new Promise<Blob>((resolve, reject) => {
           canvas.toBlob(
@@ -1125,6 +1105,8 @@ export function AgentPsdTemplateExportPreview({
     downloadName,
     enableDimensionAnnotations,
     imageUrl,
+    imageSize,
+    previewRect,
   ]);
 
   return (
@@ -1305,6 +1287,7 @@ export function AgentPsdTemplateExportPreview({
                         <text
                           dominantBaseline="middle"
                           fill={annotationColor}
+                          fontFamily={DIMENSION_FONT_FAMILY}
                           fontSize={PREVIEW_DIMENSION_FONT_SIZE}
                           fontWeight={500}
                           paintOrder="stroke"

components/agents/detail-reference-upload.ts

@@ -1,7 +1,11 @@
 import { fetchUploadWithRetry } from "@/lib/client/upload-with-retry";
+import {
+  IMAGE_UPLOAD_MAX_BYTES,
+  IMAGE_UPLOAD_TOO_LARGE_MESSAGE,
+} from "@/lib/image-upload-limits";
 import type { AgentDetailReplacementReferenceItem } from "@/types/agent";
 
-const DETAIL_REFERENCE_UPLOAD_MAX_BYTES = 50 * 1024 * 1024;
+const DETAIL_REFERENCE_UPLOAD_MAX_BYTES = IMAGE_UPLOAD_MAX_BYTES;
 
 export interface UploadedDetailReferenceImage {
   url: string;
@@ -64,7 +68,7 @@ export async function uploadDetailReferenceImageFile(
     throw new Error("请上传图片文件");
   }
   if (file.size > DETAIL_REFERENCE_UPLOAD_MAX_BYTES) {
-    throw new Error("目标详情图过大，请压缩到 50MB 以内");
+    throw new Error(IMAGE_UPLOAD_TOO_LARGE_MESSAGE);
   }
 
   const dimensionsPromise = readLocalImageDimensions(file);

components/bloub-avatar.tsx

@@ -0,0 +1,259 @@
+"use client";
+
+import { useEffect, useId, useRef, useState } from "react";
+import { defaultCycle } from "@/lib/bloub-official/cycles";
+import { NOTIF_BLUE } from "@/lib/bloub-official/decor";
+import { type BotFrame, BotEngine } from "@/lib/bloub-official/engine";
+import {
+  DEFAULT_EXPRESSION,
+  EXPRESSION_BY_ID,
+} from "@/lib/bloub-official/expressions";
+import { DEMI_VIEWBOX, RAYON } from "@/lib/bloub-official/repere";
+import { SHAPE_BY_ID } from "@/lib/bloub-official/skins";
+import type { StateId } from "@/lib/bloub-official/states";
+import { cn } from "@/lib/utils";
+
+export type BloubAvatarProps = {
+  animated?: boolean;
+  className?: string;
+  label?: string;
+  playSequence?: boolean;
+  size?: number;
+  state?: StateId;
+  surface?: "chat" | "page";
+};
+
+export function BloubAvatar({
+  animated = true,
+  className,
+  label = "AI 助手",
+  playSequence = false,
+  size = 32,
+  state = "idle",
+  surface = "chat",
+}: BloubAvatarProps) {
+  const rawId = useId();
+  const uid = rawId.replace(/[^a-zA-Z0-9_-]/g, "");
+  const maskId = `bloub-mask-${uid}`;
+  const engineRef = useRef<BotEngine | null>(null);
+  const clockRef = useRef(0);
+
+  if (!engineRef.current) {
+    engineRef.current = new BotEngine(
+      RAYON,
+      state,
+      SHAPE_BY_ID.get("squircle")?.radii ?? null,
+      EXPRESSION_BY_ID.get(DEFAULT_EXPRESSION) ?? null
+    );
+  }
+
+  const [frame, setFrame] = useState<BotFrame>(() =>
+    engineRef.current!.sample(0)
+  );
+
+  useEffect(() => {
+    if (playSequence) return;
+    const engine = engineRef.current;
+    if (!engine || engine.state === state) return;
+    engine.setState(state, clockRef.current);
+    setFrame(engine.sample(clockRef.current));
+  }, [playSequence, state]);
+
+  useEffect(() => {
+    const engine = engineRef.current;
+    if (!engine) return;
+
+    const cycle = defaultCycle().blocks;
+    const firstState = playSequence
+      ? cycle[0]?.state ?? "idle"
+      : engine.state;
+    engine.reset(firstState, 0);
+    clockRef.current = 0;
+    setFrame(engine.sample(0));
+
+    const reducedMotion = window.matchMedia(
+      "(prefers-reduced-motion: reduce)"
+    ).matches;
+    if (!animated || reducedMotion) return;
+
+    let animationFrame = 0;
+    let lastFrameAt = 0;
+    let blockIndex = 0;
+    let nextBlockAt = cycle[0]?.duration ?? Number.POSITIVE_INFINITY;
+
+    const tick = (timestamp: number) => {
+      const delta = lastFrameAt
+        ? Math.min((timestamp - lastFrameAt) / 1000, 0.064)
+        : 0;
+      lastFrameAt = timestamp;
+      clockRef.current += delta;
+
+      if (playSequence && cycle.length > 0) {
+        while (clockRef.current >= nextBlockAt) {
+          blockIndex = (blockIndex + 1) % cycle.length;
+          const nextBlock = cycle[blockIndex]!;
+          engine.setState(nextBlock.state, nextBlockAt);
+          nextBlockAt += nextBlock.duration;
+        }
+      }
+
+      setFrame(engine.sample(clockRef.current));
+      animationFrame = window.requestAnimationFrame(tick);
+    };
+
+    animationFrame = window.requestAnimationFrame(tick);
+    return () => window.cancelAnimationFrame(animationFrame);
+  }, [animated, playSequence]);
+
+  const renderDot = (
+    dot: BotFrame["dots"][number],
+    index: number,
+    layer: "back" | "front"
+  ) => {
+    const fill = dot.color ?? "currentColor";
+    const common = {
+      fill,
+      opacity:
+        dot.color || dot.depth === undefined
+          ? dot.opacity
+          : dot.opacity * dot.depth,
+    };
+    const key = `${layer}-${index}`;
+
+    if (dot.d) {
+      return (
+        <path
+          {...common}
+          d={dot.d}
+          key={key}
+          transform={`translate(${dot.x} ${dot.y}) rotate(${dot.rot ?? 0}) scale(${RAYON})`}
+        />
+      );
+    }
+
+    return (
+      <circle {...common} cx={dot.x} cy={dot.y} key={key} r={dot.r} />
+    );
+  };
+
+  return (
+    <svg
+      aria-label={label}
+      className={cn(
+        "block shrink-0 text-[#0a0a0c] dark:text-[#3ecf8e]",
+        surface === "page"
+          ? "[--bloub-paper:#f4f4f5] dark:[--bloub-paper:#08090b]"
+          : "[--bloub-paper:#ffffff] dark:[--bloub-paper:#09090b]",
+        className
+      )}
+      height={size}
+      role="img"
+      viewBox={`${-DEMI_VIEWBOX} ${-DEMI_VIEWBOX} ${DEMI_VIEWBOX * 2} ${DEMI_VIEWBOX * 2}`}
+      width={size}
+    >
+      <defs>
+        <mask
+          height={DEMI_VIEWBOX * 2}
+          id={maskId}
+          maskUnits="userSpaceOnUse"
+          width={DEMI_VIEWBOX * 2}
+          x={-DEMI_VIEWBOX}
+          y={-DEMI_VIEWBOX}
+        >
+          <path d={frame.bodyPath} fill="#fff" />
+          {frame.eyes.map((eye, index) => (
+            <path
+              d={eye.d}
+              fill="#000"
+              key={`eye-${index}`}
+              opacity={eye.alpha}
+              transform={eye.matrix}
+            />
+          ))}
+          {frame.notch ? (
+            <circle
+              cx={frame.notch.x}
+              cy={frame.notch.y}
+              fill="#000"
+              r={frame.notch.r}
+            />
+          ) : null}
+        </mask>
+
+        {frame.arcs.map((arc) => (
+          <linearGradient
+            gradientUnits="userSpaceOnUse"
+            id={`${uid}-${arc.id}`}
+            key={`gradient-${arc.id}`}
+            x1={arc.grad.x1}
+            x2={arc.grad.x2}
+            y1={arc.grad.y1}
+            y2={arc.grad.y2}
+          >
+            {arc.grad.stops.map((color, index) => (
+              <stop
+                key={`${arc.id}-${color}-${index}`}
+                offset={index / (arc.grad.stops.length - 1)}
+                stopColor={color}
+              />
+            ))}
+          </linearGradient>
+        ))}
+      </defs>
+
+      <g fill="none" strokeLinecap="round">
+        {frame.arcs.map((arc) => (
+          <path
+            d={arc.back}
+            key={`arc-back-${arc.id}`}
+            opacity={arc.opacity}
+            stroke={`url(#${uid}-${arc.id})`}
+            strokeWidth={arc.width}
+          />
+        ))}
+      </g>
+
+      {frame.dotsBehind ? (
+        <g>{frame.dots.map((dot, index) => renderDot(dot, index, "back"))}</g>
+      ) : null}
+
+      <g opacity={frame.bodyAlpha}>
+        <path d={frame.bodyPath} fill="var(--bloub-paper)" />
+        <g mask={`url(#${maskId})`}>
+          <rect
+            fill="currentColor"
+            height={DEMI_VIEWBOX * 2}
+            width={DEMI_VIEWBOX * 2}
+            x={-DEMI_VIEWBOX}
+            y={-DEMI_VIEWBOX}
+          />
+        </g>
+      </g>
+
+      {!frame.dotsBehind ? (
+        <g>{frame.dots.map((dot, index) => renderDot(dot, index, "front"))}</g>
+      ) : null}
+
+      {frame.notif ? (
+        <circle
+          cx={frame.notif.x}
+          cy={frame.notif.y}
+          fill={NOTIF_BLUE}
+          r={frame.notif.r}
+        />
+      ) : null}
+
+      <g fill="none" strokeLinecap="round">
+        {frame.arcs.map((arc) => (
+          <path
+            d={arc.front}
+            key={`arc-front-${arc.id}`}
+            opacity={arc.opacity}
+            stroke={`url(#${uid}-${arc.id})`}
+            strokeWidth={arc.width}
+          />
+        ))}
+      </g>
+    </svg>
+  );
+}

components/canvas/AiWashWorkspace.tsx

@@ -46,7 +46,10 @@ import {
   type AiWashControlLevel,
   type AiWashPreset,
 } from "@/lib/ai-wash/config";
-import { downloadCanvasImageAsPng } from "@/lib/client/canvas-image-download";
+import {
+  downloadCanvasImageAsPng,
+  getCanvasImageDownloadErrorMessage,
+} from "@/lib/client/canvas-image-download";
 import { buildImageProxyUrl } from "@/lib/image-delivery";
 import { cn } from "@/lib/utils";
 import { imageGenerationService } from "@/services/canvas";
@@ -1019,7 +1022,7 @@ export function AiWashWorkspace({
       });
       toast.success("图片已开始下载");
     } catch (error) {
-      toast.error(error instanceof Error ? error.message : "下载失败");
+      toast.error(getCanvasImageDownloadErrorMessage(error));
     } finally {
       setDownloadingResultId((current) =>
         current === downloadId ? null : current

components/canvas/CanvasAddImageDialog.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { Check, ImageIcon, ImagePlus, Loader2, Search, X } from "lucide-react";
-import { useCallback, useMemo, useState } from "react";
+import { Check, ImageIcon, ImagePlus, Loader2, Search, Upload, X } from "lucide-react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import { AgentPreviewImage } from "@/components/agents/AgentPreviewImage";
 import { Button } from "@/components/ui/button";
 import {
@@ -21,6 +21,8 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { cn } from "@/lib/utils";
+import { IMAGE_UPLOAD_MAX_BYTES, IMAGE_UPLOAD_TOO_LARGE_MESSAGE } from "@/lib/image-upload-limits";
+import { imageGenerationService } from "@/services/canvas";
 import type {
   AgentWorkflowMaterialImage,
   AgentWorkflowMaterialQueryType,
@@ -163,6 +165,8 @@ export function CanvasAddImageDialog({
   const [selectedImageIds, setSelectedImageIds] = useState<string[]>([]);
   const [isSearching, setIsSearching] = useState(false);
   const [isAdding, setIsAdding] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+  const localUploadInputRef = useRef<HTMLInputElement>(null);
   const [errorText, setErrorText] = useState<string | null>(null);
 
   const images = useMemo(() => normalizeImages(result), [result]);
@@ -182,12 +186,13 @@ export function CanvasAddImageDialog({
 
   const handleDialogOpenChange = useCallback(
     (nextOpen: boolean) => {
+      if (!nextOpen && (isUploading || isAdding)) return;
       if (!nextOpen) {
         resetDialogState();
       }
       onOpenChange(nextOpen);
     },
-    [onOpenChange, resetDialogState]
+    [isAdding, isUploading, onOpenChange, resetDialogState]
   );
 
   const closeDialog = useCallback(() => {
@@ -263,6 +268,51 @@ export function CanvasAddImageDialog({
     }
   };
 
+  const handleLocalUpload = async (files: File[]) => {
+    if (!files.length || isUploading || isAdding) return;
+    if (files.some((file) => !file.type.startsWith("image/"))) {
+      setErrorText("请选择图片文件");
+      return;
+    }
+    if (files.some((file) => file.size > IMAGE_UPLOAD_MAX_BYTES)) {
+      setErrorText(IMAGE_UPLOAD_TOO_LARGE_MESSAGE);
+      return;
+    }
+
+    setIsUploading(true);
+    setErrorText(null);
+    try {
+      const uploadedImages: CanvasAddImageDialogImage[] = [];
+      const failures: string[] = [];
+      for (const [index, file] of files.entries()) {
+        const upload = await imageGenerationService.uploadImage(file);
+        if (!upload.success || !upload.data?.url) {
+          failures.push(`${file.name}：${upload.error || "图片上传失败"}`);
+          continue;
+        }
+        uploadedImages.push({
+          id: upload.data.assetId || crypto.randomUUID(),
+          key: upload.data.pathname || file.name,
+          label: file.name.replace(/\.[^.]+$/, "") || file.name,
+          fileName: file.name,
+          imageUrl: upload.data.url,
+          assetId: upload.data.assetId,
+          mimeType: file.type,
+          sourceType: "upload",
+          group: "other",
+          sortOrder: index,
+        });
+      }
+      if (uploadedImages.length) await onAddImages(uploadedImages);
+      if (failures.length) setErrorText(failures.join("；"));
+      else closeDialog();
+    } catch (error) {
+      setErrorText(error instanceof Error ? error.message : "图片上传失败，请重试");
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
   return (
     <Dialog onOpenChange={handleDialogOpenChange} open={open}>
       <DialogContent className="max-h-[86vh] max-w-4xl overflow-hidden p-0">
@@ -272,15 +322,38 @@ export function CanvasAddImageDialog({
             添加图片
           </DialogTitle>
           <DialogDescription>
-            添加空白图片节点，或从风格化素材库检索 SPU / SKU 白底图。
+            从本地上传图片、添加空白图片节点，或检索 SPU / SKU 白底图。
           </DialogDescription>
         </DialogHeader>
 
         <div className="max-h-[62vh] overflow-y-auto px-5 py-4">
           <div className="rounded-[var(--ui-radius-panel)] border bg-muted/20 p-3">
             <div className="flex flex-col gap-2.5 sm:flex-row">
+              <input
+                accept="image/*"
+                className="hidden"
+                multiple
+                onChange={(event) => {
+                  const files = Array.from(event.target.files || []);
+                  event.target.value = "";
+                  void handleLocalUpload(files);
+                }}
+                ref={localUploadInputRef}
+                type="file"
+              />
               <Button
-                className="h-9 justify-start gap-2"
+                className="h-9 shrink-0 justify-start gap-2"
+                disabled={isUploading || isAdding}
+                onClick={() => localUploadInputRef.current?.click()}
+                type="button"
+                variant="secondary"
+              >
+                {isUploading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Upload className="h-4 w-4" />}
+                {isUploading ? "上传中…" : "本地上传"}
+              </Button>
+              <Button
+                className="h-9 shrink-0 justify-start gap-2"
+                disabled={isUploading || isAdding}
                 onClick={() => {
                   onCreateBlankImage();
                   closeDialog();
@@ -355,13 +428,13 @@ export function CanvasAddImageDialog({
             </div>
             {!materialSearchEnabled ? (
               <div className="mt-2.5 rounded-[var(--ui-radius-control)] border border-dashed bg-background/70 px-3 py-2 text-[12px] text-muted-foreground">
-                风格化功能或素材搜索步骤未开启，当前只显示空白图片入口。
+                风格化功能或素材搜索步骤未开启，可从本地上传或添加空白图片。
               </div>
             ) : null}
           </div>
 
           {errorText ? (
-            <div className="mt-3 rounded-[var(--ui-radius-control)] border border-destructive/20 bg-destructive/5 px-3 py-2 text-[13px] text-destructive">
+            <div role="alert" className="mt-3 rounded-[var(--ui-radius-control)] border border-destructive/20 bg-destructive/5 px-3 py-2 text-[13px] text-destructive">
               {errorText}
             </div>
           ) : null}
@@ -440,6 +513,7 @@ export function CanvasAddImageDialog({
 
         <DialogFooter className="border-t px-5 py-3">
           <Button
+            disabled={isUploading || isAdding}
             onClick={closeDialog}
             type="button"
             variant="outline"
@@ -448,7 +522,7 @@ export function CanvasAddImageDialog({
           </Button>
           <Button
             className="gap-2"
-            disabled={!selectedImages.length || isAdding}
+            disabled={!selectedImages.length || isAdding || isUploading}
             onClick={() => void handleAddSelected()}
             type="button"
           >

components/canvas/CanvasBlankContextMenu.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import type { Position } from "@/types/canvas";
+
+type Props = {
+  position: Position | null;
+  isMac: boolean;
+  videoUploading: boolean;
+  onClose: () => void;
+  onUploadImage: () => void;
+  onUploadVideo: () => void;
+  onPaste: () => void;
+  onZoomIn: () => void;
+  onZoomOut: () => void;
+  onFitAll: () => void;
+  onResetZoom: () => void;
+};
+
+export function CanvasBlankContextMenu({
+  position,
+  isMac,
+  videoUploading,
+  onClose,
+  onUploadImage,
+  onUploadVideo,
+  onPaste,
+  onZoomIn,
+  onZoomOut,
+  onFitAll,
+  onResetZoom,
+}: Props) {
+  const modifier = isMac ? "⌘" : "Ctrl+";
+  const itemClass =
+    "h-8 cursor-pointer justify-between whitespace-nowrap rounded-[5px] px-0 text-[14px] font-normal focus:bg-[#f5f5f5] dark:focus:bg-white/10";
+  const shortcut = (label: string) => (
+    <span className="ml-2 whitespace-nowrap text-[13px] text-[#aaa]">
+      {label}
+    </span>
+  );
+  return (
+    <DropdownMenu
+      modal={false}
+      open={position !== null}
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
+    >
+      <DropdownMenuTrigger asChild>
+        <button
+          aria-hidden="true"
+          tabIndex={-1}
+          data-canvas-no-drag="true"
+          className="pointer-events-none fixed h-px w-px opacity-0"
+          style={{ left: position?.x ?? 0, top: position?.y ?? 0 }}
+          type="button"
+        />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        aria-label="画布右键菜单"
+        align="start"
+        sideOffset={0}
+        collisionPadding={8}
+        data-canvas-blank-menu="true"
+        data-canvas-no-drag="true"
+        className="z-[10005] w-[200px] rounded-[12px] border-[#ededed] bg-white px-3 py-[5px] text-[#242424] shadow-[0_8px_20px_rgba(0,0,0,0.06)] ring-0 dark:border-white/10 dark:bg-zinc-900 dark:text-white"
+        style={{
+          fontFamily:
+            'Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif',
+        }}
+        onCloseAutoFocus={(event) => event.preventDefault()}
+        onClick={(event) => event.stopPropagation()}
+        onMouseDown={(event) => event.stopPropagation()}
+        onContextMenu={(event) => {
+          event.preventDefault();
+          event.stopPropagation();
+        }}
+      >
+        <DropdownMenuItem className={itemClass} onSelect={onUploadImage}>
+          上传图片
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          className={itemClass}
+          disabled={videoUploading}
+          onSelect={onUploadVideo}
+        >
+          上传视频
+        </DropdownMenuItem>
+        <DropdownMenuSeparator className="mx-0 my-[6.5px] bg-[#ededed] dark:bg-white/10" />
+        <DropdownMenuItem className={itemClass} onSelect={onPaste}>
+          粘贴{shortcut(`${modifier}V`)}
+        </DropdownMenuItem>
+        <DropdownMenuSeparator className="mx-0 my-[6.5px] bg-[#ededed] dark:bg-white/10" />
+        <DropdownMenuItem className={itemClass} onSelect={onZoomIn}>
+          放大{shortcut(`${modifier}+`)}
+        </DropdownMenuItem>
+        <DropdownMenuItem className={itemClass} onSelect={onZoomOut}>
+          缩小{shortcut(`${modifier}-`)}
+        </DropdownMenuItem>
+        <DropdownMenuItem className={itemClass} onSelect={onFitAll}>
+          显示画布所有元素{shortcut(isMac ? "⇧1" : "Shift+1")}
+        </DropdownMenuItem>
+        <DropdownMenuItem className={itemClass} onSelect={onResetZoom}>
+          缩放至100%{shortcut(`${modifier}0`)}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

components/canvas/CanvasComposerPromo.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { ReferenceIcon } from "@/components/lovart/reference-icon";
+
+type CanvasComposerPromoProps = {
+  text: string;
+  onDismiss: () => void;
+  onActivate?: () => void;
+};
+
+export function CanvasComposerPromo({
+  text,
+  onDismiss,
+  onActivate,
+}: CanvasComposerPromoProps) {
+  return (
+    <div className="lovart-chat-promo lovart-chat-promo-connected">
+      <div className="lovart-chat-promo-surface">
+        <div className="lovart-chat-promo-row">
+          <button
+            type="button"
+            className="lovart-chat-promo-message"
+            onClick={onActivate}
+            disabled={!onActivate}
+            title={text}
+          >
+            <svg
+              aria-hidden="true"
+              width="16"
+              height="18"
+              viewBox="0 0 24 28"
+              className="lovart-chat-promo-badge"
+            >
+              <path d="M10 1.15a4 4 0 0 1 4 0l8 4.6a4 4 0 0 1 2 3.46v9.58a4 4 0 0 1-2 3.46l-8 4.6a4 4 0 0 1-4 0l-8-4.6A4 4 0 0 1 0 18.79V9.21a4 4 0 0 1 2-3.46Z" fill="#ddef65" />
+              <path
+                d="M12 5.5c1.2 5.3 2.2 6.3 7.5 7.5-5.3 1.2-6.3 2.2-7.5 7.5C10.8 15.2 9.8 14.2 4.5 13c5.3-1.2 6.3-2.2 7.5-7.5Z"
+                fill="#111"
+              />
+            </svg>
+            <span>{text}</span>
+          </button>
+          <button
+            type="button"
+            className="lovart-chat-promo-close"
+            aria-label="关闭优惠广告"
+            onClick={onDismiss}
+          >
+            <ReferenceIcon name="close" size={18} />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

components/canvas/CanvasLayoutReplaceBatchDialog.tsx

@@ -0,0 +1,953 @@
+"use client";
+
+import {
+  CircleAlert,
+  ImagePlus,
+  Images,
+  LayoutTemplate,
+  Loader2,
+  Plus,
+  RefreshCw,
+  Trash2,
+  Upload,
+} from "lucide-react";
+import type React from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Progress } from "@/components/ui/progress";
+import { Textarea } from "@/components/ui/textarea";
+import { buildImageProxyUrl } from "@/lib/image-delivery";
+import { cn } from "@/lib/utils";
+import {
+  getAvailableCanvasLayoutReplaceSources,
+  getLayoutReplaceSourceIdentity,
+  getReadyCanvasLayoutReplaceSource,
+  type LayoutReplaceSource,
+  mergeUniqueLayoutReplaceSources,
+} from "@/lib/canvas/layout-replace-source-selection";
+import {
+  imageGenerationService,
+  type CanvasLayoutReplaceBatchItemSnapshot,
+  type CanvasLayoutReplaceBatchSnapshot,
+} from "@/services/canvas";
+import { useCanvasStore } from "@/store/canvas";
+import type { CanvasNode, Size } from "@/types/canvas";
+
+const MAX_BATCH_SOURCES = 5;
+const ACTIVE_BATCH_STATUSES = new Set(["pending", "running"]);
+
+type CanvasLayoutReplaceBatchDialogProps = {
+  costLabel?: string | null;
+  onOpenChange: (open: boolean) => void;
+  open: boolean;
+  primaryNode: CanvasNode;
+};
+
+function isHttpImageUrl(value: unknown) {
+  return /^https?:\/\//i.test(String(value || "").trim());
+}
+
+function buildInitialSources(
+  primaryNode: CanvasNode,
+  nodes: CanvasNode[],
+  selectedNodeIds: string[]
+) {
+  const selectedById = new Map(nodes.map((node) => [node.id, node]));
+  const orderedIds = [primaryNode.id, ...selectedNodeIds.filter((id) => id !== primaryNode.id)];
+  const sources: LayoutReplaceSource[] = [];
+  const seen = new Set<string>();
+  for (const id of orderedIds) {
+    const node = id === primaryNode.id ? primaryNode : selectedById.get(id);
+    if (!node) continue;
+    const source = getReadyCanvasLayoutReplaceSource(node);
+    if (!source) continue;
+    const identity = getLayoutReplaceSourceIdentity(source);
+    if (seen.has(identity)) continue;
+    seen.add(identity);
+    sources.push(source);
+    if (sources.length >= MAX_BATCH_SOURCES) break;
+  }
+  return sources;
+}
+
+function sourcesFromBatch(batch: CanvasLayoutReplaceBatchSnapshot) {
+  return batch.items.map((item) => ({
+    id: item.sourceNodeId ? `canvas:${item.sourceNodeId}` : `upload:${item.id}`,
+    imageUrl: item.sourceImageUrl,
+    kind: item.sourceKind === "upload" ? ("upload" as const) : ("canvas" as const),
+    nodeId: item.sourceNodeId || undefined,
+    title: item.sourceTitle || `图片 ${item.position}`,
+  }));
+}
+
+function getBatchStatusLabel(status: string) {
+  if (status === "succeeded") return "全部完成";
+  if (status === "partial_failed") return "部分失败";
+  if (status === "failed") return "处理失败";
+  if (status === "running") return "处理中";
+  return "排队中";
+}
+
+function getItemStatusLabel(item: CanvasLayoutReplaceBatchItemSnapshot) {
+  if (item.status === "succeeded") return item.addedToCanvas ? "已加入画布" : "生成完成";
+  if (item.status === "failed") return "生成失败";
+  if (item.status === "running") return "正在生成";
+  return "排队中";
+}
+
+async function resolveImageSize(url: string, fallback: Size) {
+  if (typeof window === "undefined") return fallback;
+  return new Promise<Size>((resolve) => {
+    const image = new window.Image();
+    const timeout = window.setTimeout(() => resolve(fallback), 6000);
+    image.onload = () => {
+      window.clearTimeout(timeout);
+      const naturalWidth = image.naturalWidth || fallback.width;
+      const naturalHeight = image.naturalHeight || fallback.height;
+      const width = Math.max(180, Math.min(720, fallback.width || 360));
+      resolve({
+        width,
+        height: Math.max(120, Math.min(1000, Math.round((width * naturalHeight) / naturalWidth))),
+      });
+    };
+    image.onerror = () => {
+      window.clearTimeout(timeout);
+      resolve(fallback);
+    };
+    image.src = buildImageProxyUrl(url, { delivery: "proxy" });
+  });
+}
+
+export function CanvasLayoutReplaceBatchDialog({
+  costLabel,
+  onOpenChange,
+  open,
+  primaryNode,
+}: CanvasLayoutReplaceBatchDialogProps) {
+  const allNodes = useCanvasStore((state) => state.nodes);
+  const selectedNodeIds = useCanvasStore((state) => state.selectedNodeIds);
+  const projectId = useCanvasStore((state) => state.projectId);
+  const addNode = useCanvasStore((state) => state.addNode);
+  const selectNodes = useCanvasStore((state) => state.selectNodes);
+  const canvasImageSelectionSession = useCanvasStore(
+    (state) => state.canvasImageSelectionSession
+  );
+  const startCanvasImageSelection = useCanvasStore(
+    (state) => state.startCanvasImageSelection
+  );
+  const endCanvasImageSelection = useCanvasStore(
+    (state) => state.endCanvasImageSelection
+  );
+  const sourceUploadInputRef = useRef<HTMLInputElement>(null);
+  const referenceUploadInputRef = useRef<HTMLInputElement>(null);
+  const seenSucceededItemIdsRef = useRef(new Set<string>());
+  const [sources, setSources] = useState<LayoutReplaceSource[]>(() =>
+    buildInitialSources(primaryNode, allNodes, selectedNodeIds)
+  );
+  const [referenceImageUrl, setReferenceImageUrl] = useState("");
+  const [supplementalPrompt, setSupplementalPrompt] = useState("");
+  const [batch, setBatch] = useState<CanvasLayoutReplaceBatchSnapshot | null>(null);
+  const [selectedResultIds, setSelectedResultIds] = useState<Set<string>>(new Set());
+  const [isLoadingBatch, setIsLoadingBatch] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isUploadingSources, setIsUploadingSources] = useState(false);
+  const [isUploadingReference, setIsUploadingReference] = useState(false);
+  const [isAddingResults, setIsAddingResults] = useState(false);
+  const [retryingItemId, setRetryingItemId] = useState<string | null>(null);
+
+  const readyCanvasSources = useMemo(
+    () =>
+      allNodes
+        .map(getReadyCanvasLayoutReplaceSource)
+        .filter(Boolean) as LayoutReplaceSource[],
+    [allNodes]
+  );
+  const activeCanvasImageSelectionSession =
+    canvasImageSelectionSession?.ownerNodeId === primaryNode.id
+      ? canvasImageSelectionSession
+      : null;
+  const successfulItems = useMemo(
+    () => batch?.items.filter((item) => item.status === "succeeded" && item.resultImageUrl) || [],
+    [batch]
+  );
+  const batchIsActive = Boolean(batch && ACTIVE_BATCH_STATUSES.has(batch.status));
+  const terminalItemCount = batch
+    ? batch.items.filter((item) => item.status === "succeeded" || item.status === "failed").length
+    : 0;
+  const batchProgress = batch
+    ? Math.round((terminalItemCount / Math.max(1, batch.totalCount)) * 100)
+    : 0;
+
+  const applyBatchSnapshot = useCallback((nextBatch: CanvasLayoutReplaceBatchSnapshot) => {
+    setBatch(nextBatch);
+    setSources(sourcesFromBatch(nextBatch));
+    setReferenceImageUrl(nextBatch.referenceImageUrl);
+    setSupplementalPrompt(nextBatch.supplementalPrompt || "");
+    const newlySucceeded = nextBatch.items
+      .filter(
+        (item) =>
+          item.status === "succeeded" &&
+          !item.addedToCanvas &&
+          !seenSucceededItemIdsRef.current.has(item.id)
+      )
+      .map((item) => item.id);
+    if (newlySucceeded.length > 0) {
+      setSelectedResultIds((current) => new Set([...current, ...newlySucceeded]));
+    }
+    nextBatch.items
+      .filter((item) => item.status === "succeeded")
+      .forEach((item) => seenSucceededItemIdsRef.current.add(item.id));
+  }, []);
+
+  const loadBatch = useCallback(
+    async (batchId: string) => {
+      const result = await imageGenerationService.getLayoutReplaceBatch(batchId);
+      if (result.success && result.data?.batch) {
+        applyBatchSnapshot(result.data.batch);
+        return result.data.batch;
+      }
+      return null;
+    },
+    [applyBatchSnapshot]
+  );
+
+  useEffect(() => {
+    if (!open) return;
+    const currentCanvas = useCanvasStore.getState();
+    const currentPrimaryNode =
+      currentCanvas.nodes.find((node) => node.id === primaryNode.id) || primaryNode;
+    const initialSources = buildInitialSources(
+      currentPrimaryNode,
+      currentCanvas.nodes,
+      currentCanvas.selectedNodeIds
+    );
+    setSources(initialSources);
+    setSelectedResultIds(new Set());
+    seenSucceededItemIdsRef.current = new Set();
+    if (!projectId) {
+      setBatch(null);
+      return;
+    }
+
+    let cancelled = false;
+    setIsLoadingBatch(true);
+    void imageGenerationService
+      .getLatestLayoutReplaceBatch({ projectId, sourceNodeId: primaryNode.id })
+      .then((result) => {
+        if (cancelled) return;
+        if (result.success && result.data?.batch) {
+          applyBatchSnapshot(result.data.batch);
+        } else {
+          setBatch(null);
+        }
+      })
+      .finally(() => {
+        if (!cancelled) setIsLoadingBatch(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [applyBatchSnapshot, open, primaryNode.id, projectId]);
+
+  useEffect(
+    () => () => {
+      endCanvasImageSelection(primaryNode.id);
+    },
+    [endCanvasImageSelection, primaryNode.id]
+  );
+
+  useEffect(() => {
+    if (!activeCanvasImageSelectionSession) return;
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      endCanvasImageSelection(primaryNode.id);
+    };
+    window.addEventListener("keydown", handleKeyDown, true);
+    return () => window.removeEventListener("keydown", handleKeyDown, true);
+  }, [activeCanvasImageSelectionSession, endCanvasImageSelection, primaryNode.id]);
+
+  useEffect(() => {
+    if (!open || !batch?.id || !batchIsActive) return;
+    const interval = window.setInterval(() => {
+      void loadBatch(batch.id);
+    }, 2500);
+    return () => window.clearInterval(interval);
+  }, [batch?.id, batchIsActive, loadBatch, open]);
+
+  const startNewBatchDraft = useCallback(() => {
+    setBatch(null);
+    setSelectedResultIds(new Set());
+    seenSucceededItemIdsRef.current = new Set();
+    setSources(buildInitialSources(primaryNode, allNodes, selectedNodeIds));
+  }, [allNodes, primaryNode, selectedNodeIds]);
+
+  const removeSource = useCallback((sourceId: string) => {
+    setSources((current) => current.filter((source) => source.id !== sourceId));
+  }, []);
+
+  const startCanvasSourceSelection = useCallback(() => {
+    if (canvasImageSelectionSession) return;
+    const remainingCount = MAX_BATCH_SOURCES - sources.length;
+    if (remainingCount <= 0) {
+      toast.info(`最多添加 ${MAX_BATCH_SOURCES} 张图片`);
+      return;
+    }
+    const availableSources = getAvailableCanvasLayoutReplaceSources(
+      readyCanvasSources,
+      sources
+    );
+    if (availableSources.length === 0) {
+      toast.info("画布中暂无其他可添加的图片");
+      return;
+    }
+    startCanvasImageSelection({
+      ownerNodeId: primaryNode.id,
+      allowedNodeIds: availableSources.flatMap((source) =>
+        source.nodeId ? [source.nodeId] : []
+      ),
+      maxCount: remainingCount,
+    });
+  }, [
+    canvasImageSelectionSession,
+    primaryNode.id,
+    readyCanvasSources,
+    sources,
+    startCanvasImageSelection,
+  ]);
+
+  const cancelCanvasSourceSelection = useCallback(() => {
+    endCanvasImageSelection(primaryNode.id);
+  }, [endCanvasImageSelection, primaryNode.id]);
+
+  const confirmCanvasSourceSelection = useCallback(() => {
+    if (!activeCanvasImageSelectionSession) return;
+    const selectedIds = new Set(activeCanvasImageSelectionSession.selectedNodeIds);
+    const selectedSources = readyCanvasSources.filter(
+      (source) => source.nodeId && selectedIds.has(source.nodeId)
+    );
+    if (selectedSources.length === 0) return;
+    setSources((current) => {
+      return mergeUniqueLayoutReplaceSources(
+        current,
+        selectedSources,
+        MAX_BATCH_SOURCES
+      );
+    });
+    endCanvasImageSelection(primaryNode.id);
+    toast.success(`已从画布添加 ${selectedSources.length} 张图片`);
+  }, [
+    activeCanvasImageSelectionSession,
+    endCanvasImageSelection,
+    primaryNode.id,
+    readyCanvasSources,
+  ]);
+
+  const handleSourceUpload = useCallback(
+    async (event: React.ChangeEvent<HTMLInputElement>) => {
+      const files = Array.from(event.currentTarget.files || []).filter((file) =>
+        file.type.startsWith("image/")
+      );
+      event.currentTarget.value = "";
+      const remaining = Math.max(0, MAX_BATCH_SOURCES - sources.length);
+      if (remaining === 0 || files.length === 0) return;
+      const selectedFiles = files.slice(0, remaining);
+      if (selectedFiles.length < files.length) {
+        toast.info(`最多添加 ${MAX_BATCH_SOURCES} 张图片`);
+      }
+
+      setIsUploadingSources(true);
+      try {
+        const uploaded: LayoutReplaceSource[] = [];
+        for (const file of selectedFiles) {
+          const result = await imageGenerationService.uploadImage(file);
+          if (!result.success || !result.data?.url) {
+            throw new Error(result.error || `${file.name} 上传失败`);
+          }
+          uploaded.push({
+            id: `upload:${crypto.randomUUID()}`,
+            imageUrl: result.data.url,
+            kind: "upload",
+            title: file.name.replace(/\.[^.]+$/, "") || "上传图片",
+          });
+        }
+        setSources((current) => {
+          return mergeUniqueLayoutReplaceSources(
+            current,
+            uploaded,
+            MAX_BATCH_SOURCES
+          );
+        });
+        toast.success(`已上传 ${uploaded.length} 张图片`);
+      } catch (error) {
+        toast.error(error instanceof Error ? error.message : "图片上传失败");
+      } finally {
+        setIsUploadingSources(false);
+      }
+    },
+    [sources.length]
+  );
+
+  const handleReferenceUpload = useCallback(async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.currentTarget.files?.[0];
+    event.currentTarget.value = "";
+    if (!file || !file.type.startsWith("image/")) return;
+    setIsUploadingReference(true);
+    try {
+      const result = await imageGenerationService.uploadImage(file);
+      if (!result.success || !result.data?.url) {
+        throw new Error(result.error || "目标模版图上传失败");
+      }
+      setReferenceImageUrl(result.data.url);
+      toast.success("目标模版图已上传");
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "目标模版图上传失败");
+    } finally {
+      setIsUploadingReference(false);
+    }
+  }, []);
+
+  const handleSubmit = useCallback(async () => {
+    if (!projectId) {
+      toast.error("当前画布尚未保存，无法创建批次");
+      return;
+    }
+    if (sources.length === 0) {
+      toast.error("请至少添加一张待处理图片");
+      return;
+    }
+    if (!isHttpImageUrl(referenceImageUrl)) {
+      toast.error("请上传目标模版图");
+      return;
+    }
+    if (isSubmitting || isUploadingSources || isUploadingReference) return;
+
+    setIsSubmitting(true);
+    try {
+      const result = await imageGenerationService.createLayoutReplaceBatch({
+        projectId,
+        sources: sources.map((source) => ({
+          sourceImageUrl: source.imageUrl,
+          sourceKind: source.kind,
+          sourceNodeId: source.nodeId,
+          sourceTitle: source.title,
+        })),
+        referenceImageUrl,
+        supplementalPrompt,
+        imageSize: "2K",
+      });
+      if (!result.success || !result.data?.batchId) {
+        throw new Error(result.error || "创建批次失败");
+      }
+      const nextBatch = await loadBatch(result.data.batchId);
+      if (!nextBatch) throw new Error("批次已创建，但状态读取失败");
+      toast.success(`已提交 ${sources.length} 张图片，正在顺序处理`);
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "创建批次失败");
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [
+    isSubmitting,
+    isUploadingReference,
+    isUploadingSources,
+    loadBatch,
+    projectId,
+    referenceImageUrl,
+    sources,
+    supplementalPrompt,
+  ]);
+
+  const addItemsToCanvas = useCallback(
+    async (items: CanvasLayoutReplaceBatchItemSnapshot[]) => {
+      if (!batch || items.length === 0 || isAddingResults) return;
+      setIsAddingResults(true);
+      try {
+        const created: Array<{ itemId: string; canvasNodeId: string }> = [];
+        for (const [index, item] of items.entries()) {
+          if (!item.resultImageUrl || item.addedToCanvas) continue;
+          const sourceNode = allNodes.find((candidate) => candidate.id === item.sourceNodeId);
+          const anchor = sourceNode || primaryNode;
+          const resultSize = await resolveImageSize(item.resultImageUrl, anchor.size);
+          const canvasNodeId = addNode({
+            type: "image",
+            position: {
+              x: anchor.position.x + anchor.size.width + 20,
+              y: anchor.position.y + index * 24,
+            },
+            size: resultSize,
+            data: {
+              src: item.resultImageUrl,
+              thumbnailUrl: item.resultThumbnailUrl || item.resultImageUrl,
+              status: "completed",
+              prompt: "批量排版替换结果",
+              title: `${item.sourceTitle || `图片 ${item.position}`}-排版替换`,
+              originalSrc: item.sourceImageUrl,
+              model: item.resultModelId || undefined,
+              metadata: {
+                editMode: "layout-replace",
+                batchId: batch.id,
+                batchItemId: item.id,
+                taskId: item.taskId,
+                sourceNodeId: item.sourceNodeId,
+                layoutReferenceUrl: batch.referenceImageUrl,
+                layoutReplaceCompletedAt: new Date().toISOString(),
+              },
+            },
+            connections: item.sourceNodeId ? [item.sourceNodeId] : [],
+          });
+          created.push({ itemId: item.id, canvasNodeId });
+        }
+        if (created.length === 0) return;
+        selectNodes(created.map((item) => item.canvasNodeId));
+        const marked = await imageGenerationService.markLayoutReplaceBatchItemsAdded({
+          batchId: batch.id,
+          items: created,
+        });
+        if (!marked.success) {
+          toast.warning("结果已加入画布，但同步批次状态失败");
+        }
+        await loadBatch(batch.id);
+        setSelectedResultIds((current) => {
+          const next = new Set(current);
+          created.forEach((item) => next.delete(item.itemId));
+          return next;
+        });
+        toast.success(`已将 ${created.length} 张结果加入画布`);
+      } catch (error) {
+        toast.error(error instanceof Error ? error.message : "添加到画布失败");
+      } finally {
+        setIsAddingResults(false);
+      }
+    },
+    [addNode, allNodes, batch, isAddingResults, loadBatch, primaryNode, selectNodes]
+  );
+
+  const selectedSuccessfulItems = successfulItems.filter(
+    (item) => selectedResultIds.has(item.id) && !item.addedToCanvas
+  );
+
+  const retryItem = useCallback(
+    async (item: CanvasLayoutReplaceBatchItemSnapshot) => {
+      if (!batch || batchIsActive || retryingItemId) return;
+      setRetryingItemId(item.id);
+      try {
+        const result = await imageGenerationService.retryLayoutReplaceBatchItem({
+          batchId: batch.id,
+          itemId: item.id,
+        });
+        if (!result.success) throw new Error(result.error || "重试失败");
+        await loadBatch(batch.id);
+        toast.success("已重新加入生成队列");
+      } catch (error) {
+        toast.error(error instanceof Error ? error.message : "重试失败");
+      } finally {
+        setRetryingItemId(null);
+      }
+    },
+    [batch, batchIsActive, loadBatch, retryingItemId]
+  );
+
+  return (
+    <>
+      <Dialog
+        onOpenChange={(nextOpen) => {
+          if (!activeCanvasImageSelectionSession) onOpenChange(nextOpen);
+        }}
+        open={open && !activeCanvasImageSelectionSession}
+      >
+        <DialogContent className="flex max-h-[calc(100dvh-1rem)] w-[calc(100vw-1rem)] max-w-[1180px] flex-col gap-0 overflow-hidden p-0 sm:max-h-[calc(100dvh-2rem)] sm:w-[calc(100vw-2rem)]">
+        <DialogHeader className="shrink-0 border-b px-4 py-3 pr-12 text-left sm:px-6 sm:py-4">
+          <div className="flex flex-wrap items-center justify-between gap-3">
+            <DialogTitle className="flex items-center gap-2 text-base">
+              <LayoutTemplate className="h-4 w-4" />
+              AI 模版替换
+            </DialogTitle>
+            {batch ? (
+              <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                <span>{getBatchStatusLabel(batch.status)}</span>
+                <span>{terminalItemCount}/{batch.totalCount}</span>
+              </div>
+            ) : null}
+          </div>
+          <DialogDescription className="sr-only">
+            最多选择五张图片，按照目标模版顺序生成并添加到画布
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 py-4 sm:px-6">
+          {isLoadingBatch ? (
+            <div className="flex min-h-[360px] items-center justify-center">
+              <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+            </div>
+          ) : (
+            <div className="space-y-5">
+              <div className="grid gap-5 xl:grid-cols-[minmax(0,1fr)_360px]">
+                <section className="min-w-0 space-y-3">
+                  <div className="flex flex-wrap items-center justify-between gap-2">
+                    <Label>待处理图片 {sources.length}/{MAX_BATCH_SOURCES}</Label>
+                    {!batch ? (
+                      <div className="flex items-center gap-2">
+                        <Button
+                          disabled={
+                            sources.length >= MAX_BATCH_SOURCES ||
+                            Boolean(canvasImageSelectionSession)
+                          }
+                          onClick={startCanvasSourceSelection}
+                          size="sm"
+                          type="button"
+                          variant="outline"
+                        >
+                          <Images className="mr-1.5 h-4 w-4" />
+                          从画布中添加
+                        </Button>
+                        <input
+                          accept="image/*"
+                          className="hidden"
+                          multiple
+                          onChange={(event) => void handleSourceUpload(event)}
+                          ref={sourceUploadInputRef}
+                          type="file"
+                        />
+                        <Button
+                          disabled={isUploadingSources || sources.length >= MAX_BATCH_SOURCES}
+                          onClick={() => sourceUploadInputRef.current?.click()}
+                          size="sm"
+                          type="button"
+                          variant="outline"
+                        >
+                          {isUploadingSources ? (
+                            <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />
+                          ) : (
+                            <Upload className="mr-1.5 h-4 w-4" />
+                          )}
+                          上传图片
+                        </Button>
+                      </div>
+                    ) : null}
+                  </div>
+
+                  <div className="grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-5">
+                    {Array.from({ length: MAX_BATCH_SOURCES }, (_, index) => {
+                      const source = sources[index];
+                      return (
+                        <div
+                          className="relative aspect-square min-w-0 overflow-hidden rounded-md border bg-muted/25"
+                          key={source?.id || `empty-${index}`}
+                        >
+                          <span className="absolute left-1.5 top-1.5 z-10 flex h-5 min-w-5 items-center justify-center rounded bg-black/65 px-1 text-[10px] text-white">
+                            {index + 1}
+                          </span>
+                          {source ? (
+                            <>
+                              <img
+                                alt={source.title}
+                                className="h-full w-full object-cover"
+                                src={buildImageProxyUrl(source.imageUrl, { width: 240 })}
+                              />
+                              {!batch && index > 0 ? (
+                                <button
+                                  aria-label={`移除第 ${index + 1} 张图片`}
+                                  className="absolute right-1.5 top-1.5 flex h-7 w-7 items-center justify-center rounded-md bg-black/65 text-white hover:bg-black/80"
+                                  onClick={() => removeSource(source.id)}
+                                  type="button"
+                                >
+                                  <Trash2 className="h-3.5 w-3.5" />
+                                </button>
+                              ) : null}
+                              <div className="absolute inset-x-0 bottom-0 truncate bg-black/65 px-2 py-1.5 text-[11px] text-white">
+                                {source.title}
+                              </div>
+                            </>
+                          ) : (
+                            <button
+                              aria-label={`添加第 ${index + 1} 张图片`}
+                              className="flex h-full w-full items-center justify-center text-muted-foreground hover:bg-muted/50"
+                              disabled={Boolean(batch)}
+                              onClick={() => sourceUploadInputRef.current?.click()}
+                              type="button"
+                            >
+                              <Plus className="h-5 w-5" />
+                            </button>
+                          )}
+                        </div>
+                      );
+                    })}
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor={`layout-batch-prompt-${primaryNode.id}`}>补充要求</Label>
+                    <Textarea
+                      className="min-h-[88px] max-h-[180px]"
+                      disabled={Boolean(batch)}
+                      id={`layout-batch-prompt-${primaryNode.id}`}
+                      onChange={(event) => setSupplementalPrompt(event.currentTarget.value)}
+                      placeholder="可选，只写产品替换细节"
+                      value={supplementalPrompt}
+                    />
+                  </div>
+                </section>
+
+                <section className="min-w-0 space-y-2">
+                  <Label htmlFor={`layout-batch-reference-${primaryNode.id}`}>目标模版图</Label>
+                  <Input
+                    disabled={Boolean(batch)}
+                    id={`layout-batch-reference-${primaryNode.id}`}
+                    onChange={(event) => setReferenceImageUrl(event.currentTarget.value)}
+                    placeholder="https://..."
+                    value={referenceImageUrl}
+                  />
+                  <input
+                    accept="image/*"
+                    className="hidden"
+                    onChange={(event) => void handleReferenceUpload(event)}
+                    ref={referenceUploadInputRef}
+                    type="file"
+                  />
+                  <button
+                    className="flex h-[clamp(180px,34dvh,360px)] w-full items-center justify-center overflow-hidden rounded-md border border-dashed bg-muted/20"
+                    disabled={Boolean(batch) || isUploadingReference}
+                    onClick={() => referenceUploadInputRef.current?.click()}
+                    type="button"
+                  >
+                    {isUploadingReference ? (
+                      <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+                    ) : isHttpImageUrl(referenceImageUrl) ? (
+                      <img
+                        alt="目标模版图"
+                        className="h-full w-full object-contain"
+                        src={buildImageProxyUrl(referenceImageUrl, { width: 720 })}
+                      />
+                    ) : (
+                      <div className="flex flex-col items-center gap-2 text-muted-foreground">
+                        <ImagePlus className="h-6 w-6" />
+                        <span className="text-xs">上传目标模版图</span>
+                      </div>
+                    )}
+                  </button>
+                </section>
+              </div>
+
+              {batch ? (
+                <section className="space-y-3 border-t pt-5">
+                  <div className="flex flex-wrap items-center justify-between gap-3">
+                    <div className="space-y-1">
+                      <Label>生成结果</Label>
+                      <div className="text-xs text-muted-foreground">
+                        {getBatchStatusLabel(batch.status)} · {terminalItemCount}/{batch.totalCount}
+                      </div>
+                    </div>
+                    {!batchIsActive ? (
+                      <Button onClick={startNewBatchDraft} size="sm" type="button" variant="outline">
+                        <Plus className="mr-1.5 h-4 w-4" />
+                        新建批次
+                      </Button>
+                    ) : null}
+                  </div>
+                  <Progress className="h-1.5" value={batchProgress} />
+                  <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+                    {batch.items.map((item) => {
+                      const canAdd = item.status === "succeeded" && Boolean(item.resultImageUrl) && !item.addedToCanvas;
+                      const checked = selectedResultIds.has(item.id);
+                      return (
+                        <div className="overflow-hidden rounded-md border" key={item.id}>
+                          <div className="grid grid-cols-2 gap-px bg-border">
+                            <div className="aspect-square bg-muted">
+                              <img
+                                alt={item.sourceTitle || `图片 ${item.position}`}
+                                className="h-full w-full object-cover"
+                                src={buildImageProxyUrl(item.sourceImageUrl, { width: 280 })}
+                              />
+                            </div>
+                            <div className="relative flex aspect-square items-center justify-center bg-muted/40">
+                              {item.resultImageUrl ? (
+                                <img
+                                  alt={`结果 ${item.position}`}
+                                  className="h-full w-full object-cover"
+                                  src={buildImageProxyUrl(item.resultThumbnailUrl || item.resultImageUrl, { width: 280 })}
+                                />
+                              ) : item.status === "failed" ? (
+                                <CircleAlert className="h-6 w-6 text-destructive" />
+                              ) : item.status === "running" ? (
+                                <Loader2 className="h-6 w-6 animate-spin text-primary" />
+                              ) : (
+                                <Loader2 className="h-5 w-5 text-muted-foreground" />
+                              )}
+                              {canAdd ? (
+                                <label className="absolute right-2 top-2 flex h-6 w-6 items-center justify-center rounded bg-background/90 shadow-sm">
+                                  <input
+                                    checked={checked}
+                                    className="h-4 w-4"
+                                    onChange={(event) => {
+                                      setSelectedResultIds((current) => {
+                                        const next = new Set(current);
+                                        if (event.currentTarget.checked) next.add(item.id);
+                                        else next.delete(item.id);
+                                        return next;
+                                      });
+                                    }}
+                                    type="checkbox"
+                                  />
+                                </label>
+                              ) : null}
+                            </div>
+                          </div>
+                          <div className="flex min-h-12 items-center justify-between gap-2 px-3 py-2">
+                            <div className="min-w-0">
+                              <div className="truncate text-xs font-medium">
+                                {item.sourceTitle || `图片 ${item.position}`}
+                              </div>
+                              <div
+                                className={cn(
+                                  "text-[11px] text-muted-foreground",
+                                  item.status === "failed" && "text-destructive"
+                                )}
+                              >
+                                {getItemStatusLabel(item)}
+                              </div>
+                            </div>
+                            {canAdd ? (
+                              <Button
+                                disabled={isAddingResults}
+                                onClick={() => void addItemsToCanvas([item])}
+                                size="sm"
+                                type="button"
+                                variant="outline"
+                              >
+                                加入画布
+                              </Button>
+                            ) : item.status === "failed" && !batchIsActive ? (
+                              <Button
+                                disabled={Boolean(retryingItemId)}
+                                onClick={() => void retryItem(item)}
+                                size="sm"
+                                type="button"
+                                variant="outline"
+                              >
+                                {retryingItemId === item.id ? (
+                                  <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />
+                                ) : (
+                                  <RefreshCw className="mr-1.5 h-3.5 w-3.5" />
+                                )}
+                                重试
+                              </Button>
+                            ) : null}
+                          </div>
+                          {item.error ? (
+                            <div className="border-t px-3 py-2 text-xs text-destructive">
+                              {item.error}
+                            </div>
+                          ) : null}
+                        </div>
+                      );
+                    })}
+                  </div>
+                </section>
+              ) : null}
+            </div>
+          )}
+        </div>
+
+        <DialogFooter className="shrink-0 gap-2 border-t bg-background px-4 py-3 sm:px-6">
+          <Button onClick={() => onOpenChange(false)} type="button" variant="outline">
+            关闭
+          </Button>
+          {batch ? (
+            <Button
+              disabled={selectedSuccessfulItems.length === 0 || isAddingResults}
+              onClick={() => void addItemsToCanvas(selectedSuccessfulItems)}
+              type="button"
+            >
+              {isAddingResults ? (
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              ) : (
+                <Images className="mr-2 h-4 w-4" />
+              )}
+              添加所选到画布 ({selectedSuccessfulItems.length})
+            </Button>
+          ) : (
+            <Button
+              disabled={
+                sources.length === 0 ||
+                !isHttpImageUrl(referenceImageUrl) ||
+                isSubmitting ||
+                isUploadingReference ||
+                isUploadingSources
+              }
+              onClick={() => void handleSubmit()}
+              type="button"
+            >
+              {isSubmitting ? (
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              ) : (
+                <LayoutTemplate className="mr-2 h-4 w-4" />
+              )}
+              批量处理 {sources.length} 张
+              {costLabel ? (
+                <span className="ml-1 rounded-full bg-white/18 px-1.5 py-0.5 text-[10px] text-white">
+                  {sources.length} × {costLabel}
+                </span>
+              ) : null}
+            </Button>
+          )}
+        </DialogFooter>
+        </DialogContent>
+      </Dialog>
+      {activeCanvasImageSelectionSession && typeof document !== "undefined"
+        ? createPortal(
+            <div
+              className="pointer-events-none fixed inset-x-0 bottom-4 z-[10020] flex justify-center px-3 sm:bottom-6"
+              data-canvas-layout-replace-picker="true"
+            >
+              <div
+                className="pointer-events-auto flex w-full max-w-[720px] flex-wrap items-center gap-2 rounded-lg border border-border bg-background px-3 py-2.5 shadow-2xl sm:flex-nowrap sm:px-4"
+                data-canvas-overlay="true"
+              >
+                <div className="flex min-w-0 flex-1 items-center gap-2">
+                  <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-[#168cff] text-white">
+                    <Images className="h-4 w-4" />
+                  </span>
+                  <div className="min-w-0">
+                    <div className="truncate text-sm font-medium">选择画布图片</div>
+                    <div className="truncate text-xs text-muted-foreground">
+                      已选 {activeCanvasImageSelectionSession.selectedNodeIds.length}/
+                      {activeCanvasImageSelectionSession.maxCount}
+                    </div>
+                  </div>
+                </div>
+                <Button
+                  onClick={cancelCanvasSourceSelection}
+                  size="sm"
+                  type="button"
+                  variant="outline"
+                >
+                  取消
+                </Button>
+                <Button
+                  disabled={activeCanvasImageSelectionSession.selectedNodeIds.length === 0}
+                  onClick={confirmCanvasSourceSelection}
+                  size="sm"
+                  type="button"
+                >
+                  确认添加到图片卡槽
+                </Button>
+              </div>
+            </div>,
+            document.body
+          )
+        : null}
+    </>
+  );
+}

components/canvas/CanvasSurfaceHeader.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { ReferenceIcon } from "@/components/lovart/reference-icon";
+
+import { Loader2, Save } from "lucide-react";
+
+type CanvasSurfaceHeaderProps = {
+  isSaving: boolean;
+  onAddImage: () => void;
+  onHome: () => void;
+  onOpenFiles: () => void;
+  onSave: () => void;
+  projectTitle: string;
+  rightInset: number;
+};
+
+const iconButtonClass =
+  "inline-flex h-[28px] w-[28px] items-center justify-center rounded-[8px] p-0 text-[#858585] transition-colors hover:bg-black/5 focus-visible:outline-2 focus-visible:outline-offset-2 dark:hover:bg-white/10";
+
+export function CanvasSurfaceHeader({
+  isSaving,
+  onAddImage,
+  onHome,
+  onOpenFiles,
+  onSave,
+  projectTitle,
+  rightInset,
+}: CanvasSurfaceHeaderProps) {
+  return (
+    <div
+      className="absolute left-0 top-0 z-20 flex h-[40px] items-center justify-between border-b border-[#ededed] bg-white px-3 dark:border-white/10 dark:bg-zinc-950"
+      data-canvas-topbar="true"
+      style={{ right: rightInset }}
+    >
+      <div className="flex min-w-0 items-center gap-2">
+        <button
+          aria-label="返回首页"
+          className={iconButtonClass}
+          onClick={onHome}
+          title="返回首页"
+          type="button"
+        >
+          <ReferenceIcon name="branding" size={16} />
+        </button>
+        <button
+          aria-label="添加参考素材"
+          className={iconButtonClass}
+          onClick={onAddImage}
+          title="添加参考素材"
+          type="button"
+        >
+          <ReferenceIcon name="reference" size={16} />
+        </button>
+        <button
+          aria-label="查看项目文件"
+          className={iconButtonClass}
+          onClick={onOpenFiles}
+          title="查看项目文件"
+          type="button"
+        >
+          <ReferenceIcon name="brand" size={16} />
+        </button>
+        <div className="mx-1 h-4 w-px bg-[#ededed] dark:bg-white/10" />
+        <span className="inline-flex h-7 min-w-0 items-center gap-2 rounded-[8px] bg-[#ededed] px-3 text-[13px] text-[#333333] dark:bg-white/10 dark:text-white">
+          <ReferenceIcon name="page" size={16} />
+          <span className="max-w-[160px] truncate">
+            {projectTitle || "页面 1"}
+          </span>
+        </span>
+        <button
+          aria-label="添加到画布"
+          className={iconButtonClass}
+          onClick={onAddImage}
+          title="添加到画布"
+          type="button"
+        >
+          <ReferenceIcon name="plus" size={16} />
+        </button>
+      </div>
+      <button
+        className="inline-flex h-7 shrink-0 items-center gap-1.5 rounded-[8px] border border-[#e5e5e5] px-3 text-[12px] text-[#333333] transition-colors hover:bg-black/5 disabled:opacity-50 dark:border-white/10 dark:text-white"
+        disabled={isSaving}
+        onClick={onSave}
+        type="button"
+      >
+        {isSaving ? (
+          <Loader2 className="h-3.5 w-3.5 animate-spin" />
+        ) : (
+          <Save className="h-3.5 w-3.5" />
+        )}
+        保存
+      </button>
+    </div>
+  );
+}

components/canvas/CanvasToolbarIcon.tsx

@@ -1,6 +1,10 @@
 "use client";
 
 import type { CSSProperties } from "react";
+import {
+  ReferenceIcon,
+  type ReferenceIconName,
+} from "@/components/lovart/reference-icon";
 import type { LucideIcon } from "lucide-react";
 import type { CanvasToolbarItemConfig } from "@/lib/canvas-toolbar-config";
 import { cn } from "@/lib/utils";
@@ -12,13 +16,12 @@ type CanvasToolbarIconProps = {
   className?: string;
   style?: CSSProperties;
   active?: boolean;
+  referenceName?: ReferenceIconName;
+  referenceSize?: number;
 };
 
 function isSvgIconUrl(url: string) {
-  return (
-    /^data:image\/svg\+xml/i.test(url) ||
-    /\.svg(?:[?#].*)?$/i.test(url)
-  );
+  return /^data:image\/svg\+xml/i.test(url) || /\.svg(?:[?#].*)?$/i.test(url);
 }
 
 function stripImageFilterClasses(className?: string) {
@@ -42,6 +45,8 @@ export function CanvasToolbarIcon({
   className,
   style,
   active = false,
+  referenceName,
+  referenceSize = 18,
 }: CanvasToolbarIconProps) {
   const resolvedIconUrl = String(iconUrl || item?.iconUrl || "").trim();
 
@@ -75,7 +80,9 @@ export function CanvasToolbarIcon({
         aria-hidden="true"
         className={cn(
           "object-contain",
-          active ? "brightness-0 invert opacity-95" : "brightness-0 opacity-80 dark:invert",
+          active
+            ? "brightness-0 invert opacity-95"
+            : "brightness-0 opacity-80 dark:invert",
           className
         )}
         src={resolvedIconUrl}
@@ -84,5 +91,15 @@ export function CanvasToolbarIcon({
     );
   }
 
+  if (referenceName) {
+    return (
+      <ReferenceIcon
+        name={referenceName}
+        size={referenceSize}
+        className={className}
+        style={style}
+      />
+    );
+  }
   return <FallbackIcon className={className} style={style} />;
 }

components/canvas/CanvasWorkspace.tsx

@@ -12,8 +12,13 @@ import { UiScreenNode } from "./nodes/UiScreenNode";
 import { VideoNode } from "./nodes/VideoNode";
 import { WorkflowNode } from "./nodes/WorkflowNode";
 import { CanvasToolbarIcon } from "./CanvasToolbarIcon";
+import { CanvasBlankContextMenu } from "./CanvasBlankContextMenu";
+import { getCanvasFitViewport } from "@/lib/canvas/viewport-fit";
+import { downloadCanvasSelectionZip } from "@/lib/client/canvas-zip-download";
+import { fetchUploadWithRetry } from "@/lib/client/upload-with-retry";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { toast } from "sonner";
 import { imageGenerationService } from "@/services/canvas";
 import {
@@ -25,8 +30,10 @@ import {
   Heart,
   HelpCircle,
   ImagePlus,
+  LayoutTemplate,
   LayoutGrid,
   Lightbulb,
+  Loader2,
   Minus,
   Pin,
   Plus,
@@ -65,6 +72,10 @@ import {
   type CanvasAgentPendingRequestWindow,
 } from "@/lib/canvas/agent-pending-requests";
 import { inferOriginalImageUrl } from "@/lib/image-url";
+import {
+  IMAGE_UPLOAD_MAX_BYTES,
+  IMAGE_UPLOAD_TOO_LARGE_MESSAGE,
+} from "@/lib/image-upload-limits";
 
 type ImageNodeModule = typeof import("./nodes/ImageNode");
 type Model3DNodeModule = typeof import("./nodes/Model3DNode");
@@ -385,6 +396,11 @@ export function CanvasWorkspace({
   } | null;
   const containerRef = useRef<HTMLDivElement>(null);
   const contentLayerRef = useRef<HTMLDivElement>(null);
+  const contextImageInputRef = useRef<HTMLInputElement>(null);
+  const contextVideoInputRef = useRef<HTMLInputElement>(null);
+  const contextCanvasPointRef = useRef<Position>({ x: 0, y: 0 });
+  const [blankContextPosition, setBlankContextPosition] = useState<Position | null>(null);
+  const [isContextVideoUploading, setIsContextVideoUploading] = useState(false);
   const [isPanning, setIsPanning] = useState(false);
   const [panStart, setPanStart] = useState<Position>({ x: 0, y: 0 });
   const [isMarqueeSelecting, setIsMarqueeSelecting] = useState(false);
@@ -416,6 +432,9 @@ export function CanvasWorkspace({
   const nodes = useCanvasStore(canvasSelectors.nodes);
   const edges = useCanvasStore(canvasSelectors.edges);
   const selectedNodeIds = useCanvasStore(canvasSelectors.selectedNodeIds);
+  const canvasImageSelectionSession = useCanvasStore(
+    (state) => state.canvasImageSelectionSession
+  );
   const viewport = useCanvasStore(canvasSelectors.viewport);
   const tool = useCanvasStore(canvasSelectors.tool);
   const lastAddedNodeId = useCanvasStore((state) => state.lastAddedNodeId);
@@ -715,12 +734,17 @@ export function CanvasWorkspace({
     canvasToolbarConfig,
     "imageLocalEdit"
   );
-  // 局部编辑属于主无限画布图片的固定能力，旧配置缺少该 key 时也保持可见。
-  const selectedImageLocalEditEnabled = true;
+  const selectedImageLayoutReplaceItem = getCanvasToolbarItem(
+    canvasToolbarConfig,
+    "imageLayoutReplace"
+  );
   
   // Store actions
   const selectNode = useCanvasStore((state) => state.selectNode);
   const selectNodes = useCanvasStore((state) => state.selectNodes);
+  const toggleCanvasImageSelection = useCanvasStore(
+    (state) => state.toggleCanvasImageSelection
+  );
   const clearSelection = useCanvasStore((state) => state.clearSelection);
   const addNode = useCanvasStore((state) => state.addNode);
   const addEdge = useCanvasStore((state) => state.addEdge);
@@ -1089,42 +1113,61 @@ export function CanvasWorkspace({
   );
 
   const fitAllImageNodesIntoViewport = useCallback(() => {
-    const imageNodes = nodes.filter(
-      (node) => node.type === "image" && Boolean((node.data as any)?.src)
+    const fit = getCanvasFitViewport(
+      nodes.filter((node) => node.type === "image" && Boolean((node.data as any)?.src)),
+      containerSize, occlusionRight
     );
-    if (imageNodes.length === 0) return;
-    if (containerSize.width <= 0 || containerSize.height <= 0) return;
+    if (fit) setViewport(fit);
+  }, [containerSize, nodes, occlusionRight, setViewport]);
 
-    const padding = 80;
-    const minX = Math.min(...imageNodes.map((node) => node.position.x));
-    const minY = Math.min(...imageNodes.map((node) => node.position.y));
-    const maxX = Math.max(
-      ...imageNodes.map((node) => node.position.x + node.size.width)
-    );
-    const maxY = Math.max(
-      ...imageNodes.map((node) => node.position.y + node.size.height)
-    );
+  const fitAllCanvasNodesIntoViewport = useCallback(() => {
+    const fit = getCanvasFitViewport(nodes, containerSize, occlusionRight);
+    if (fit) setViewport(fit);
+  }, [containerSize, nodes, occlusionRight, setViewport]);
 
-    const contentWidth = Math.max(1, maxX - minX + padding * 2);
-    const contentHeight = Math.max(1, maxY - minY + padding * 2);
+  const handleBlankCanvasContextMenu = useCallback((event: React.MouseEvent) => {
+    if (isWorkflowCanvas || hasBlockingDialogOpen() || canvasImageSelectionSession) return;
+    if (!(event.target instanceof Element) || event.target.closest(
+      '[data-canvas-node-id], [data-canvas-overlay], [data-canvas-no-drag="true"], button, input, textarea, select, a, [contenteditable="true"]'
+    )) return;
+    const rect = containerRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    event.preventDefault();
+    event.stopPropagation();
+    contextCanvasPointRef.current = {
+      x: (event.clientX - rect.left - viewportRef.current.x) / viewportRef.current.zoom,
+      y: (event.clientY - rect.top - viewportRef.current.y) / viewportRef.current.zoom,
+    };
+    setBlankContextPosition({ x: event.clientX, y: event.clientY });
+    setAgentSlotContextMenu(null);
+  }, [canvasImageSelectionSession, hasBlockingDialogOpen, isWorkflowCanvas]);
 
-    const visibleWidth = Math.max(240, containerSize.width - Math.max(0, occlusionRight));
-    const fitZoomX = visibleWidth / contentWidth;
-    const fitZoomY = containerSize.height / contentHeight;
-    const targetZoom = Math.max(0.05, Math.min(4, Math.min(fitZoomX, fitZoomY)));
+  const zoomCanvasFromContextMenu = useCallback((factor: number) => {
+    const current = useCanvasStore.getState().viewport;
+    const zoom = Math.max(0.1, Math.min(4, current.zoom * factor));
+    const centerX = Math.max(1, containerSize.width - occlusionRight) / 2;
+    const centerY = containerSize.height / 2;
+    const ratio = zoom / current.zoom;
+    setViewport({ x: centerX - (centerX - current.x) * ratio, y: centerY - (centerY - current.y) * ratio, zoom });
+  }, [containerSize, occlusionRight, setViewport]);
 
-    const centerX = (minX + maxX) / 2;
-    const centerY = (minY + maxY) / 2;
-    const visibleCenterX = visibleWidth / 2;
-    const nextViewportX = visibleCenterX - centerX * targetZoom;
-    const nextViewportY = containerSize.height / 2 - centerY * targetZoom;
-
-    setViewport({
-      x: nextViewportX,
-      y: nextViewportY,
-      zoom: targetZoom,
-    });
-  }, [containerSize.height, containerSize.width, nodes, occlusionRight, setViewport]);
+  React.useEffect(() => {
+    if (isWorkflowCanvas) return;
+    const handleFitShortcut = (event: KeyboardEvent) => {
+      if (!event.shiftKey || event.metaKey || event.ctrlKey || event.altKey || event.code !== "Digit1") return;
+      if (hasBlockingDialogOpen() || (event.target instanceof Element && event.target.closest(
+        'input, textarea, [contenteditable="true"], [role="textbox"]'
+      ))) return;
+      const active = document.activeElement;
+      if (active && active !== document.body && !containerRef.current?.contains(active)
+        && !active.closest('[data-canvas-floating-toolbar], [data-canvas-blank-menu="true"]')) return;
+      event.preventDefault();
+      fitAllCanvasNodesIntoViewport();
+      setBlankContextPosition(null);
+    };
+    window.addEventListener("keydown", handleFitShortcut);
+    return () => window.removeEventListener("keydown", handleFitShortcut);
+  }, [fitAllCanvasNodesIntoViewport, hasBlockingDialogOpen, isWorkflowCanvas]);
 
   const getNodeInputAnchor = useCallback(
     (node: CanvasNode): Position => ({
@@ -1238,8 +1281,10 @@ export function CanvasWorkspace({
 
   // 处理画布点击（取消选择）
   const handleCanvasClick = useCallback((e: React.MouseEvent) => {
+    if (canvasImageSelectionSession) return;
     if (hasBlockingDialogOpen()) return;
     setAgentSlotContextMenu(null);
+    setBlankContextPosition(null);
     if (!isEventFromCanvasContainer(e.target)) return;
     if (suppressCanvasClickRef.current) {
       suppressCanvasClickRef.current = false;
@@ -1256,10 +1301,11 @@ export function CanvasWorkspace({
         fitAllImageNodesIntoViewport();
       }
     }
-  }, [clearLatestGeneratedImageHighlights, clearSelection, fitAllImageNodesIntoViewport, hasBlockingDialogOpen, isEventFromCanvasContainer, isMarqueeSelecting, isPointOnNodeElement]);
+  }, [canvasImageSelectionSession, clearLatestGeneratedImageHighlights, clearSelection, fitAllImageNodesIntoViewport, hasBlockingDialogOpen, isEventFromCanvasContainer, isMarqueeSelecting, isPointOnNodeElement]);
 
   // 处理画布平移开始
   const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    if (canvasImageSelectionSession) return;
     if (hasBlockingDialogOpen()) return;
     if (!isEventFromCanvasContainer(e.target)) return;
     if (connectionDraft) {
@@ -1275,7 +1321,7 @@ export function CanvasWorkspace({
       !isPointOnNodeElement(e.target);
 
     if (
-      tool === 'pan' ||
+      (tool === 'pan' && e.button === 0) ||
       e.button === 1 ||
       (e.button === 0 && e.altKey) ||
       shouldPanBlankWorkflowCanvas
@@ -1305,7 +1351,7 @@ export function CanvasWorkspace({
       setMarqueeStart(start);
       setMarqueeEnd(start);
     }
-  }, [cancelPanPreview, clearBrowserTextSelection, clearLatestGeneratedImageHighlights, connectionDraft, hasBlockingDialogOpen, isEventFromCanvasContainer, isPointOnNodeElement, isWorkflowCanvas, toCanvasPosition, tool]);
+  }, [cancelPanPreview, canvasImageSelectionSession, clearBrowserTextSelection, clearLatestGeneratedImageHighlights, connectionDraft, hasBlockingDialogOpen, isEventFromCanvasContainer, isPointOnNodeElement, isWorkflowCanvas, toCanvasPosition, tool]);
 
   // 处理画布平移
   const handleMouseMove = useCallback((e: React.MouseEvent) => {
@@ -1554,8 +1600,8 @@ export function CanvasWorkspace({
     for (let index = 0; index < files.length; index += 1) {
       const file = files[index];
       if (!isImageFile(file)) continue;
-      if (file.size > 50 * 1024 * 1024) {
-        toast.error("图片大小不能超过 50MB");
+      if (file.size > IMAGE_UPLOAD_MAX_BYTES) {
+        toast.error(IMAGE_UPLOAD_TOO_LARGE_MESSAGE);
         continue;
       }
 
@@ -1638,6 +1684,105 @@ export function CanvasWorkspace({
     }
   }, [addNode, clearLatestGeneratedImageHighlights, getImageDimensionsFromFile, updateNode, viewport.x, viewport.y, viewport.zoom]);
 
+  const getContextUploadClientPoint = useCallback(() => {
+    const rect = containerRef.current?.getBoundingClientRect();
+    const current = viewportRef.current;
+    return {
+      x: (rect?.left ?? 0) + current.x + contextCanvasPointRef.current.x * current.zoom,
+      y: (rect?.top ?? 0) + current.y + contextCanvasPointRef.current.y * current.zoom,
+    };
+  }, []);
+
+  const pasteCanvasText = useCallback((text: string, point: Position) => {
+    if (!text.trim()) return;
+    addNode({
+      type: "text", position: point, size: { width: 320, height: 160 },
+      data: { content: text, color: "#111827" }, connections: [],
+    });
+  }, [addNode]);
+
+  const uploadContextVideos = useCallback(async (files: File[]) => {
+    if (!files.length || isContextVideoUploading) return;
+    const position = { ...contextCanvasPointRef.current };
+    setIsContextVideoUploading(true);
+    try {
+      for (const [index, file] of files.entries()) {
+        if (!["video/mp4", "video/quicktime", "video/webm"].includes(file.type)) {
+          toast.error("请选择 MP4、MOV 或 WebM 视频");
+          continue;
+        }
+        if (file.size > 50 * 1024 * 1024) {
+          toast.error("视频文件不能超过 50MB");
+          continue;
+        }
+        const loadingToast = toast.loading(`正在上传 ${file.name}`);
+        try {
+          const formData = new FormData();
+          formData.append("file", file);
+          formData.append("purpose", "canvas-video-process");
+          const response = await fetchUploadWithRetry(formData);
+          const result = await response.json();
+          if (!response.ok || !result.url) throw new Error(result.error || "视频上传失败");
+          addNode({
+            type: "video", position: { x: position.x + index * 24, y: position.y + index * 24 },
+            size: { width: 320, height: 180 },
+            data: { src: result.url, assetId: result.assetId, status: "completed", prompt: file.name,
+              metadata: { source: "local-upload", fileName: file.name, contentType: file.type } },
+            connections: [],
+          });
+          toast.success("视频已添加到画布");
+        } catch (error) {
+          toast.error(error instanceof Error ? error.message : "视频上传失败，请重试");
+        } finally {
+          toast.dismiss(loadingToast);
+        }
+      }
+    } finally {
+      setIsContextVideoUploading(false);
+    }
+  }, [addNode, isContextVideoUploading]);
+
+  const pasteFromContextMenu = useCallback(async () => {
+    const pastePoint = { ...contextCanvasPointRef.current };
+    const clientPoint = getContextUploadClientPoint();
+    try {
+      const files: File[] = [];
+      let text = "";
+      if (typeof navigator.clipboard?.read === "function") {
+        const items = await navigator.clipboard.read();
+        for (const [index, item] of items.entries()) {
+          const imageType = item.types.find((type) => type.startsWith("image/"));
+          if (imageType) {
+            const blob = await item.getType(imageType);
+            files.push(new File([blob], `粘贴图片-${Date.now()}-${index}.${imageType.split("/")[1]}`, { type: imageType }));
+          } else if (item.types.includes("text/plain")) {
+            text += await (await item.getType("text/plain")).text();
+          }
+        }
+      } else if (typeof navigator.clipboard?.readText === "function") {
+        text = await navigator.clipboard.readText();
+      } else {
+        throw new Error("Clipboard unavailable");
+      }
+      if (files.length) {
+        await processDroppedFiles(files, clientPoint.x, clientPoint.y);
+      } else if (text.trim()) {
+        pasteCanvasText(text, pastePoint);
+      } else {
+        toast.info("剪贴板中没有可粘贴的图片或文字");
+      }
+    } catch {
+      toast.info(`无法读取剪贴板，请使用 ${isMacPlatform ? "⌘V" : "Ctrl+V"} 粘贴`);
+    }
+  }, [getContextUploadClientPoint, isMacPlatform, pasteCanvasText, processDroppedFiles]);
+
+  React.useEffect(() => {
+    if (!blankContextPosition) return;
+    const close = () => setBlankContextPosition(null);
+    window.addEventListener("resize", close);
+    return () => window.removeEventListener("resize", close);
+  }, [blankContextPosition]);
+
   React.useEffect(() => {
     const handleWindowDrop = async (e: DragEvent) => {
       if (!isFileDrag(e.dataTransfer)) return;
@@ -1700,24 +1845,44 @@ export function CanvasWorkspace({
 
   React.useEffect(() => {
     const handlePaste = async (e: ClipboardEvent) => {
-      if (hasBlockingDialogOpen() || isEditablePasteTarget(e.target)) return;
+      const activeElement = document.activeElement;
+      const fromContextMenu = Boolean(activeElement?.closest('[data-canvas-blank-menu="true"]'));
+      if (hasBlockingDialogOpen() || (!fromContextMenu && isEditablePasteTarget(e.target))) return;
 
       const container = containerRef.current;
       if (!container) return;
-      const activeElement = document.activeElement;
       if (
         activeElement instanceof HTMLElement &&
         activeElement !== document.body &&
-        !container.contains(activeElement)
+        !container.contains(activeElement) && !fromContextMenu
       ) {
         return;
       }
 
       const files = extractImageFilesFromDataTransfer(e.clipboardData);
-      if (files.length === 0) return;
+      const text = e.clipboardData?.getData("text/plain") || "";
+      if (files.length === 0 && (isWorkflowCanvas || !text.trim())) return;
 
       e.preventDefault();
       const rect = container.getBoundingClientRect();
+      if (fromContextMenu) {
+        setBlankContextPosition(null);
+        if (files.length) {
+          const point = getContextUploadClientPoint();
+          await processDroppedFiles(files, point.x, point.y);
+        } else {
+          pasteCanvasText(text, { ...contextCanvasPointRef.current });
+        }
+        return;
+      }
+      if (files.length === 0) {
+        const current = viewportRef.current;
+        pasteCanvasText(text, {
+          x: (rect.width / 2 - current.x) / current.zoom,
+          y: (rect.height / 2 - current.y) / current.zoom,
+        });
+        return;
+      }
       await processDroppedFiles(
         files,
         rect.left + rect.width / 2,
@@ -1727,7 +1892,7 @@ export function CanvasWorkspace({
 
     window.addEventListener("paste", handlePaste);
     return () => window.removeEventListener("paste", handlePaste);
-  }, [hasBlockingDialogOpen, processDroppedFiles]);
+  }, [getContextUploadClientPoint, hasBlockingDialogOpen, isWorkflowCanvas, pasteCanvasText, processDroppedFiles]);
 
   const handleDownloadSelectedImages = useCallback(async () => {
     if (selectedImageNodes.length === 0) {
@@ -1750,10 +1915,10 @@ export function CanvasWorkspace({
         const rawImageUrl = String(nodeData?.src || "").trim();
         if (!rawImageUrl) return null;
         let imageUrl = inferOriginalImageUrl(rawImageUrl) || rawImageUrl;
-        if (browserOrigin && rawImageUrl.startsWith("/")) {
-          imageUrl = `${browserOrigin}${rawImageUrl}`;
-        } else if (browserOrigin && rawImageUrl.startsWith("//")) {
+        if (browserOrigin && rawImageUrl.startsWith("//")) {
           imageUrl = `${window.location.protocol}${rawImageUrl}`;
+        } else if (browserOrigin && rawImageUrl.startsWith("/")) {
+          imageUrl = `${browserOrigin}${rawImageUrl}`;
         }
         const name =
           String(nodeData?.title || "").trim() ||
@@ -1769,32 +1934,18 @@ export function CanvasWorkspace({
     }
 
     setIsDownloadSubmitting(true);
+    const toastId = toast.loading("正在准备所选图片...");
     try {
-      const form = document.createElement("form");
-      form.method = "POST";
-      form.action = "/api/canvas/download-zip";
-      form.style.display = "none";
-
-      const payloadInput = document.createElement("input");
-      payloadInput.type = "hidden";
-      payloadInput.name = "payload";
-      payloadInput.value = JSON.stringify({
-        folderName,
-        files,
+      const result = await downloadCanvasSelectionZip({ folderName, files,
+        selectionKey: `${useCanvasStore.getState().projectId}:${selectedImageNodes.map(node => node.id).sort().join(",")}`,
+        onProgress: task => toast.loading(`${task.stage}（${task.progress}%）`, { id: toastId }),
       });
-      form.appendChild(payloadInput);
-
-      document.body.appendChild(form);
-      form.submit();
-      form.remove();
-
-      toast.success("已开始打包下载，请留意浏览器下载栏");
-    } catch (_error) {
-      toast.error("下载失败，请稍后重试");
+      if (result.failedCount) toast.warning(`已开始下载 ${result.successCount} 张图片，${result.failedCount} 张未能读取；ZIP 内附失败清单`, { id: toastId, duration: 10000 });
+      else toast.success(`ZIP 已准备完成，正在下载 ${result.successCount} 张图片`, { id: toastId });
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "打包下载失败，请稍后重试", { id: toastId });
     } finally {
-      window.setTimeout(() => {
-        setIsDownloadSubmitting(false);
-      }, 800);
+      setIsDownloadSubmitting(false);
     }
   }, [isDownloadSubmitting, selectedImageNodes]);
 
@@ -1824,7 +1975,14 @@ export function CanvasWorkspace({
 
   // 渲染节点
   const renderNode = (node: CanvasNode) => {
-    const isSelected = selectedNodeIds.includes(node.id);
+    const isCanvasImageSelectionCandidate = Boolean(
+      canvasImageSelectionSession?.allowedNodeIds.includes(node.id)
+    );
+    const isCanvasImageSelectionSelected = Boolean(
+      canvasImageSelectionSession?.selectedNodeIds.includes(node.id)
+    );
+    const isSelected =
+      !canvasImageSelectionSession && selectedNodeIds.includes(node.id);
     const showWorkflowHandles = isWorkflowCanvas && (tool === "draw" || isSelected);
     const isImageNode = node.type === "image";
     const enableImageResizeHandles =
@@ -2021,13 +2179,17 @@ export function CanvasWorkspace({
           pushHistory();
         }}
         bounds="parent"
-        enableResizing={enableImageResizeHandles}
+        enableResizing={canvasImageSelectionSession ? false : enableImageResizeHandles}
         resizeHandleStyles={imageResizeHandleStyles}
-        disableDragging={tool !== 'select'}
+        disableDragging={tool !== 'select' || Boolean(canvasImageSelectionSession)}
         cancel={CANVAS_DRAG_CANCEL_SELECTOR}
         className={cn(
           "absolute",
-          tool === "select" && "cursor-pointer"
+          canvasImageSelectionSession
+            ? isCanvasImageSelectionCandidate
+              ? "cursor-crosshair"
+              : "cursor-default"
+            : tool === "select" && "cursor-pointer"
         )}
         data-canvas-node-id={node.id}
         style={{ overflow: 'visible' }} // 允许工具栏显示在节点外部
@@ -2038,6 +2200,12 @@ export function CanvasWorkspace({
         }}
         onClick={(e: React.MouseEvent) => {
           e.stopPropagation();
+          if (canvasImageSelectionSession) {
+            if (isCanvasImageSelectionCandidate) {
+              toggleCanvasImageSelection(node.id);
+            }
+            return;
+          }
           setAgentSlotContextMenu(null);
           clearLatestGeneratedImageHighlights();
           setSelectedEdgeId(null);
@@ -2172,6 +2340,29 @@ export function CanvasWorkspace({
             </div>
           )}
         </motion.div>
+        {isCanvasImageSelectionCandidate ? (
+          <div
+            className={cn(
+              "pointer-events-none absolute inset-0 z-[70] border-2",
+              isCanvasImageSelectionSelected
+                ? "border-[#168cff] bg-[#168cff]/10"
+                : "border-dashed border-[#168cff]/70"
+            )}
+          >
+            <span
+              className={cn(
+                "absolute right-2 top-2 flex h-7 w-7 items-center justify-center rounded-full border-2 shadow-sm",
+                isCanvasImageSelectionSelected
+                  ? "border-[#168cff] bg-[#168cff] text-white"
+                  : "border-white bg-white/95 text-[#168cff]"
+              )}
+            >
+              {isCanvasImageSelectionSelected ? (
+                <Check className="h-4 w-4" strokeWidth={3} />
+              ) : null}
+            </span>
+          </div>
+        ) : null}
       </Rnd>
     );
   };
@@ -2196,7 +2387,8 @@ export function CanvasWorkspace({
         isWorkflowCanvas ? "bg-[#050607] text-white" : "bg-background",
         tool === 'pan' && "cursor-grab",
         tool === 'draw' && "cursor-crosshair",
-        isPanning && "cursor-grabbing"
+        isPanning && "cursor-grabbing",
+        canvasImageSelectionSession && "cursor-crosshair"
       )}
       style={
         isWorkflowCanvas
@@ -2209,12 +2401,47 @@ export function CanvasWorkspace({
       onMouseUp={handleMouseUp}
       onMouseLeave={handleMouseUp}
       onDoubleClick={handleBlankCanvasDoubleClick}
+      onContextMenu={handleBlankCanvasContextMenu}
       onWheel={handleWheel}
       onDragEnter={handleDragEnter}
       onDragLeave={handleDragLeave}
       onDragOver={handleDragOver}
       onDrop={handleDrop}
     >
+      {!isWorkflowCanvas && (
+        <>
+          <input
+            ref={contextImageInputRef} type="file" accept="image/*" multiple className="hidden"
+            aria-label="从右键菜单上传图片"
+            onChange={(event) => {
+              const files = Array.from(event.target.files || []);
+              event.target.value = "";
+              const point = getContextUploadClientPoint();
+              void processDroppedFiles(files, point.x, point.y);
+            }}
+          />
+          <input
+            ref={contextVideoInputRef} type="file" accept="video/mp4,video/quicktime,video/webm,.mp4,.mov,.webm" multiple className="hidden"
+            aria-label="从右键菜单上传视频"
+            onChange={(event) => {
+              const files = Array.from(event.target.files || []);
+              event.target.value = "";
+              void uploadContextVideos(files);
+            }}
+          />
+          <CanvasBlankContextMenu
+            position={blankContextPosition} isMac={isMacPlatform} videoUploading={isContextVideoUploading}
+            onClose={() => setBlankContextPosition(null)}
+            onUploadImage={() => contextImageInputRef.current?.click()}
+            onUploadVideo={() => contextVideoInputRef.current?.click()}
+            onPaste={() => { void pasteFromContextMenu(); }}
+            onZoomIn={() => zoomCanvasFromContextMenu(1.2)}
+            onZoomOut={() => zoomCanvasFromContextMenu(1 / 1.2)}
+            onFitAll={fitAllCanvasNodesIntoViewport}
+            onResetZoom={() => setViewport({ x: 0, y: 0, zoom: 1 })}
+          />
+        </>
+      )}
       {isWorkflowCanvas ? (
         <>
           <div className="pointer-events-none absolute inset-0 pattern-grid-lg text-white opacity-[0.065]" />
@@ -2494,7 +2721,9 @@ export function CanvasWorkspace({
       )}
 
       {/* 选中图片快捷操作 */}
-      {selectedPendingImageUploadCount > 0 && selectedImageNodes.length === 0 && (
+      {!canvasImageSelectionSession &&
+        selectedPendingImageUploadCount > 0 &&
+        selectedImageNodes.length === 0 && (
         <div
           className="absolute bottom-16 left-4 z-30 rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-800 shadow-sm"
           data-canvas-overlay
@@ -2502,12 +2731,16 @@ export function CanvasWorkspace({
           图片仍在本地，上传完成后可进行 AI 处理
         </div>
       )}
-      {selectedImageNodes.length > 0 && (
+      {!canvasImageSelectionSession && selectedImageNodes.length > 0 && (
         <div
-          className="absolute bottom-16 left-4 z-30 flex items-center gap-2"
+          className={cn(
+            "absolute left-4 z-30 flex items-center gap-2",
+            isWorkflowCanvas ? "bottom-16" : "bottom-[20px]"
+          )}
           data-canvas-overlay
+          data-canvas-selection-actions="true"
         >
-          {selectedImageLocalEditEnabled && selectedImageNodes.length === 1 ? (
+          {isWorkflowCanvas && selectedImageNodes.length === 1 ? (
             <Button
               variant={isWorkflowCanvas ? "outline" : "secondary"}
               size="sm"
@@ -2529,27 +2762,77 @@ export function CanvasWorkspace({
               {selectedImageLocalEditItem.label}
             </Button>
           ) : null}
-          <Button
-            variant={isWorkflowCanvas ? "outline" : "secondary"}
-            size="sm"
-            className={cn(
-              "h-8 gap-1.5 px-3 text-xs shadow-sm border border-border/60",
-              isWorkflowCanvas &&
-                "rounded-full border-[#dbe2ee] bg-white text-[#3b4860] shadow-[0_0_0_1px_rgba(219,226,238,0.26)] hover:bg-[#f7f9ff]"
-            )}
-            onClick={handleDownloadSelectedImages}
-            disabled={isDownloadSubmitting}
-            title={getCanvasToolbarItem(canvasToolbarConfig, "downloadFolder").label}
-          >
-            <CanvasToolbarIcon
-              className="h-3.5 w-3.5"
-              fallback={Download}
-              item={getCanvasToolbarItem(canvasToolbarConfig, "downloadFolder")}
-            />
-            {isDownloadSubmitting
-              ? "打包中..."
-              : `${getCanvasToolbarItem(canvasToolbarConfig, "downloadFolder").label}(${selectedImageNodes.length})`}
-          </Button>
+          {isWorkflowCanvas &&
+          selectedImageNodes.length >= 1 ? (
+            <Button
+              variant={isWorkflowCanvas ? "outline" : "secondary"}
+              size="sm"
+              className={cn(
+                "h-8 gap-1.5 border border-border/60 px-3 text-xs shadow-sm",
+                isWorkflowCanvas &&
+                  "rounded-full border-[#dbe2ee] bg-white text-[#3b4860] shadow-[0_0_0_1px_rgba(219,226,238,0.26)] hover:bg-[#f7f9ff]"
+              )}
+              onClick={() =>
+                requestImageNodeAction(selectedImageNodes[0].id, "layout-replace", {
+                  args: {
+                    sourceNodeIds: selectedImageNodes
+                      .slice(0, 5)
+                      .map((selectedNode) => selectedNode.id),
+                  },
+                })
+              }
+              title={selectedImageLayoutReplaceItem.label}
+            >
+              <CanvasToolbarIcon
+                className="h-3.5 w-3.5"
+                fallback={LayoutTemplate}
+                item={selectedImageLayoutReplaceItem}
+              />
+              {selectedImageLayoutReplaceItem.label}
+            </Button>
+          ) : null}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant={isWorkflowCanvas ? "outline" : "secondary"}
+                size={isWorkflowCanvas ? "sm" : "icon"}
+                className={cn(
+                  isWorkflowCanvas
+                    ? "h-8 gap-1.5 rounded-full border border-[#dbe2ee] bg-white px-3 text-xs text-[#3b4860] shadow-[0_0_0_1px_rgba(219,226,238,0.26)] hover:bg-[#f7f9ff]"
+                    : "h-[32px] w-[32px] rounded-[8px] border border-[#e9e9e9] bg-white p-0 text-[#333333] shadow-[0_1px_3px_rgba(0,0,0,0.035)] hover:bg-[#f5f5f5] dark:border-white/10 dark:bg-zinc-950 dark:text-white dark:hover:bg-white/10"
+                )}
+                onClick={handleDownloadSelectedImages}
+                disabled={isDownloadSubmitting}
+                aria-label={
+                  isDownloadSubmitting
+                    ? "打包中..."
+                    : `${getCanvasToolbarItem(canvasToolbarConfig, "downloadFolder").label}(${selectedImageNodes.length})`
+                }
+              >
+                {!isWorkflowCanvas && isDownloadSubmitting ? (
+                  <Loader2 className="h-5 w-5 animate-spin" />
+                ) : (
+                  <CanvasToolbarIcon
+                    className={isWorkflowCanvas ? "h-3.5 w-3.5" : "h-5 w-5"}
+                    fallback={Download}
+                    referenceName={isWorkflowCanvas ? undefined : "image-download"}
+                    referenceSize={20}
+                    item={getCanvasToolbarItem(canvasToolbarConfig, "downloadFolder")}
+                  />
+                )}
+                {isWorkflowCanvas
+                  ? isDownloadSubmitting
+                    ? "打包中..."
+                    : `${getCanvasToolbarItem(canvasToolbarConfig, "downloadFolder").label}(${selectedImageNodes.length})`
+                  : null}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="top">
+              {isDownloadSubmitting
+                ? "打包中..."
+                : `${getCanvasToolbarItem(canvasToolbarConfig, "downloadFolder").label}(${selectedImageNodes.length})`}
+            </TooltipContent>
+          </Tooltip>
         </div>
       )}
 

components/canvas/LiblibVideoCanvasReplica.tsx

@@ -65,6 +65,11 @@ import {
   useState,
 } from "react";
 import { toast } from "sonner";
+import { ZCODE_VIDEO_CANVAS_AUTHORIZED } from "@/lib/ai/canvas-agent-runtime/authorization";
+import { CanvasAgentUiListener } from "./chat-panel/canvas-agent-ui-listener";
+import type { CanvasAgentUiCommand } from "@/lib/ai/canvas-agent-runtime/ui-command";
+import { VideoCanvasAgentPanel } from "./chat-panel/video-canvas-agent-panel";
+import { mergeVideoAgentResults } from "@/lib/ai/canvas-agent-runtime/video-protocol";
 import useSWR from "swr";
 import {
   getGenerationCreditCostFromImageGenConfig,
@@ -786,28 +791,28 @@ const STARTER_CARDS = [
     title: "故事脚本生成",
     subtitle: "脚本到分镜",
     coverUrl:
-      "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/starter-story-script-cover.png",
+      "https://scqnycdn.jiansun.vip/legacy-oss/demo-sparkai/video-canvas-demo/starter-story-script-cover.png",
     steps: ["故事脚本", "多模态文本模型Pro", "可灵 3.0", "预览"],
   },
   {
     title: "角色三视图",
     subtitle: "角色资产沉淀",
     coverUrl:
-      "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/starter-character-three-view-cover.png",
+      "https://scqnycdn.jiansun.vip/legacy-oss/demo-sparkai/video-canvas-demo/starter-character-three-view-cover.png",
     steps: ["角色描述", "角色三视图", "全能图片模型V2", "保存"],
   },
   {
     title: "首帧图生视频",
     subtitle: "参考图到成片",
     coverUrl:
-      "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/starter-first-frame-video-cover.png",
+      "https://scqnycdn.jiansun.vip/legacy-oss/demo-sparkai/video-canvas-demo/starter-first-frame-video-cover.png",
     steps: ["上传图片", "首帧图", "可灵 3.0", "预览"],
   },
   {
     title: "音频生视频",
     subtitle: "音频驱动画面",
     coverUrl:
-      "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/starter-audio-to-video-cover.png",
+      "https://scqnycdn.jiansun.vip/legacy-oss/demo-sparkai/video-canvas-demo/starter-audio-to-video-cover.png",
     icon: "music",
     steps: ["上传音频", "音频主视频", "Wan 2.6", "预览"],
   },
@@ -822,7 +827,7 @@ const TOOLBOX_TEMPLATE_PRESETS: ToolboxTemplatePreset[] = [
     badge: "预设",
     category: "周星驰经典名场面",
     cover:
-      "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/starter-first-frame-video-cover.png",
+      "https://scqnycdn.jiansun.vip/legacy-oss/demo-sparkai/video-canvas-demo/starter-first-frame-video-cover.png",
     description: "左弧滑行，镜头从人物左侧弧线推进，带轻微喜剧节奏和夸张表情停顿。",
     duration: "5s",
     id: "left-arc-slide",
@@ -837,7 +842,7 @@ const TOOLBOX_TEMPLATE_PRESETS: ToolboxTemplatePreset[] = [
     badge: "商用",
     category: "电商展示",
     cover:
-      "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/starter-character-three-view-cover.png",
+      "https://scqnycdn.jiansun.vip/legacy-oss/demo-sparkai/video-canvas-demo/starter-character-three-view-cover.png",
     description: "电商手机弹出效果，产品从画面中心弹出并旋转定格，适合主图视频开场。",
     duration: "5s",
     id: "phone-pop-product",
@@ -852,7 +857,7 @@ const TOOLBOX_TEMPLATE_PRESETS: ToolboxTemplatePreset[] = [
     badge: "商用",
     category: "电商展示",
     cover:
-      "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/starter-story-script-cover.png",
+      "https://scqnycdn.jiansun.vip/legacy-oss/demo-sparkai/video-canvas-demo/starter-story-script-cover.png",
     description: "咖啡杯出场，杯身从桌面滑入，蒸汽和柔光形成温暖的品牌氛围。",
     duration: "5s",
     id: "coffee-cup-entry",
@@ -867,7 +872,7 @@ const TOOLBOX_TEMPLATE_PRESETS: ToolboxTemplatePreset[] = [
     badge: "热门",
     category: "镜头运动",
     cover:
-      "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/starter-audio-to-video-cover.png",
+      "https://scqnycdn.jiansun.vip/legacy-oss/demo-sparkai/video-canvas-demo/starter-audio-to-video-cover.png",
     description: "360旋转展示，围绕主体做一圈稳定环绕，适合产品、人物和空间展示。",
     duration: "6s",
     id: "orbit-360-showcase",
@@ -881,7 +886,7 @@ const TOOLBOX_TEMPLATE_PRESETS: ToolboxTemplatePreset[] = [
     author: "工业镜头",
     category: "镜头运动",
     cover:
-      "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/character-image.png",
+      "https://scqnycdn.jiansun.vip/legacy-oss/demo-sparkai/video-canvas-demo/character-image.png",
     description: "机械臂视角，以第一视角穿过机械臂与产品线，增强科技感和空间纵深。",
     duration: "5s",
     id: "robot-arm-pov",
@@ -896,7 +901,7 @@ const TOOLBOX_TEMPLATE_PRESETS: ToolboxTemplatePreset[] = [
     badge: "NEW",
     category: "人物动画",
     cover:
-      "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/character-three-view.png",
+      "https://scqnycdn.jiansun.vip/legacy-oss/demo-sparkai/video-canvas-demo/character-three-view.png",
     description: "Live 2D，让单张角色图产生眨眼、微笑和轻微身体摆动，适合口播开场。",
     duration: "4s",
     id: "live-2d-character",
@@ -910,7 +915,7 @@ const TOOLBOX_TEMPLATE_PRESETS: ToolboxTemplatePreset[] = [
     author: "电影运镜",
     category: "镜头运动",
     cover:
-      "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/starter-first-frame-video-cover.png",
+      "https://scqnycdn.jiansun.vip/legacy-oss/demo-sparkai/video-canvas-demo/starter-first-frame-video-cover.png",
     description: "瞳孔拉近，镜头快速推向眼部并在反光里展示下一场景，适合悬疑转场。",
     duration: "5s",
     id: "pupil-zoom",
@@ -925,7 +930,7 @@ const TOOLBOX_TEMPLATE_PRESETS: ToolboxTemplatePreset[] = [
     badge: "热门",
     category: "人物动画",
     cover:
-      "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/starter-story-script-cover.png",
+      "https://scqnycdn.jiansun.vip/legacy-oss/demo-sparkai/video-canvas-demo/starter-story-script-cover.png",
     description: "飞鸟解体，主体由细碎羽片散开再重组，适合视觉冲击强的短视频片头。",
     duration: "6s",
     id: "bird-dissolve",
@@ -940,7 +945,7 @@ const TOOLBOX_TEMPLATE_PRESETS: ToolboxTemplatePreset[] = [
     badge: "商用",
     category: "电商展示",
     cover:
-      "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/starter-character-three-view-cover.png",
+      "https://scqnycdn.jiansun.vip/legacy-oss/demo-sparkai/video-canvas-demo/starter-character-three-view-cover.png",
     description: "商品震撼登场，产品带冲击波与局部高光进入画面，适合活动主推款。",
     duration: "5s",
     id: "product-hero-entry",
@@ -954,7 +959,7 @@ const TOOLBOX_TEMPLATE_PRESETS: ToolboxTemplatePreset[] = [
     author: "旅拍模板",
     category: "镜头运动",
     cover:
-      "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/starter-audio-to-video-cover.png",
+      "https://scqnycdn.jiansun.vip/legacy-oss/demo-sparkai/video-canvas-demo/starter-audio-to-video-cover.png",
     description: "旅拍转场，前景遮挡切换到新地点，带自然手持感和轻微速度变化。",
     duration: "5s",
     id: "travel-whip-transition",
@@ -1299,19 +1304,19 @@ const NINE_GRID_CELL_VISUALS: GridCellVisual[] = [
 ];
 
 const TARGET_AVATAR =
-  "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/target-avatar.jpg";
+  "https://scqnycdn.jiansun.vip/legacy-oss/demo-sparkai/video-canvas-demo/target-avatar.jpg";
 const CHARACTER_IMAGE_URL =
-  "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/character-image.png";
+  "https://scqnycdn.jiansun.vip/legacy-oss/demo-sparkai/video-canvas-demo/character-image.png";
 const CHARACTER_THREE_VIEW_URL =
-  "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/character-three-view.png";
+  "https://scqnycdn.jiansun.vip/legacy-oss/demo-sparkai/video-canvas-demo/character-three-view.png";
 const FIRST_FRAME_IMAGE_URL =
-  "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/first-frame-image.png";
+  "https://scqnycdn.jiansun.vip/legacy-oss/demo-sparkai/video-canvas-demo/first-frame-image.png";
 const AUDIO_SOURCE_URL =
-  "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/audio-source.mp3";
+  "https://scqnycdn.jiansun.vip/legacy-oss/demo-sparkai/video-canvas-demo/audio-source.mp3";
 const AUDIO_REFERENCE_IMAGE_URL =
-  "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/audio-reference-image.png";
+  "https://scqnycdn.jiansun.vip/legacy-oss/demo-sparkai/video-canvas-demo/audio-reference-image.png";
 const PUBLISH_MODAL_BG_URL =
-  "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/publish-modal-bg.png";
+  "https://scqnycdn.jiansun.vip/legacy-oss/demo-sparkai/video-canvas-demo/publish-modal-bg.png";
 const STORY_SCRIPT_PROMPT = "根据我上传的剧本生成一个完整的故事脚本";
 const AUDIO_TO_VIDEO_PROMPT =
   "根据上传的音频生成对应场景画面，镜头语言、节奏、音乐匹配情绪变化，电影级质感。";
@@ -1322,22 +1327,22 @@ const TEXT_TO_MUSIC_PROMPT =
   "生成一首现代品牌电子音乐，干净有力的低频贝斯，清晰电子鼓点，整体风格高级、未来感强。";
 const IMAGE_TO_PROMPT_PROMPT = "根据图片生成结构化中文提示词，包括主体描述、环境、光影、镜头语言、风格关键词。";
 const HD_IMAGE_SOURCE_URL =
-  "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/hd-image-source.png";
+  "https://scqnycdn.jiansun.vip/legacy-oss/demo-sparkai/video-canvas-demo/hd-image-source.png";
 const VIDEO_FIRST_FRAME_SOURCE_URL =
-  "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/video-first-frame-source.png";
+  "https://scqnycdn.jiansun.vip/legacy-oss/demo-sparkai/video-canvas-demo/video-first-frame-source.png";
 const VIDEO_FIRST_FRAME_PROMPT = "以当前图为首帧生成视频。";
 const VIDEO_FIRST_LAST_FIRST_URL =
-  "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/video-first-last-first.png";
+  "https://scqnycdn.jiansun.vip/legacy-oss/demo-sparkai/video-canvas-demo/video-first-last-first.png";
 const VIDEO_FIRST_LAST_LAST_URL =
-  "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/video-first-last-last.png";
+  "https://scqnycdn.jiansun.vip/legacy-oss/demo-sparkai/video-canvas-demo/video-first-last-last.png";
 const VIDEO_FIRST_LAST_PROMPT =
   "手从白帆布包中取出青柠气泡水罐的特写，过渡到短发女生在户外草地闭眼仰头喝同款气泡水的中景，日系清新治愈风格，明亮自然光，柔和暖调，胶片质感，动作流畅自然";
 const SCRIPT_VIDEO_REFERENCE_URL =
-  "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/script-video-reference.mp4";
+  "https://scqnycdn.jiansun.vip/legacy-oss/demo-sparkai/video-canvas-demo/script-video-reference.mp4";
 const SCRIPT_CHARACTER_ONE_URL =
-  "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/script-character-one.png";
+  "https://scqnycdn.jiansun.vip/legacy-oss/demo-sparkai/video-canvas-demo/script-character-one.png";
 const SCRIPT_CHARACTER_TWO_URL =
-  "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/script-character-two.png";
+  "https://scqnycdn.jiansun.vip/legacy-oss/demo-sparkai/video-canvas-demo/script-character-two.png";
 const SCRIPT_CHARACTER_PROMPT =
   "根据角色参考图生成分镜脚本，围绕旧城区、机械修复、暴雨停电和被重新点亮的街道展开，突出人物关系、镜头画面和声音设计。";
 const SLASH_IMAGE_ITEMS = [
@@ -4915,6 +4920,8 @@ export function LiblibVideoCanvasReplica({
     [siteBrandSettings?.siteName]
   );
   const [nodes, setNodes] = useState<CloneNode[]>([]);
+  const [isVideoAgentOpen, setIsVideoAgentOpen] = useState(false);
+  const receivedAgentNodeIds = useRef(new Set<string>());
   const [edges, setEdges] = useState<CloneEdge[]>([]);
   const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
   const [selectedEdgeId, setSelectedEdgeId] = useState<string | null>(null);
@@ -5043,7 +5050,9 @@ export function LiblibVideoCanvasReplica({
       const title = normalizeCanvasTitle(project.title);
       setProjectTitle(title);
       setDraftTitle(title);
-      setNodes(restoreNodes(project.canvasData));
+      const restored = restoreNodes(project.canvasData);
+      receivedAgentNodeIds.current = new Set(restored.map((node) => node.id));
+      setNodes(restored);
       setEdges(restoreEdges(project.canvasData));
     };
 
@@ -5111,6 +5120,66 @@ export function LiblibVideoCanvasReplica({
     setIsSaving(false);
   }, [canvasId, edges, nodes, selectedNodeId, viewport]);
 
+  const refreshVideoAgentResults = useCallback(async (projectId: string, resultNodeIds: string[]) => {
+    if (projectId !== canvasId) return;
+    const result = await canvasService.getProject(canvasId);
+    if (!result.success || !result.data) return;
+    const incoming = restoreNodes(result.data.canvasData).filter((node) => resultNodeIds.includes(node.id));
+    const unseen = incoming.filter((node) => !receivedAgentNodeIds.current.has(node.id));
+    for (const node of incoming) receivedAgentNodeIds.current.add(node.id);
+    setNodes((current) => mergeVideoAgentResults(current.map((node) => {
+      const remote = incoming.find((item) => item.id === node.id);
+      return remote && remote.draftValues?.temporaryVideoUrl === node.draftValues?.mediaUrl && remote.draftValues?.mediaUrl !== node.draftValues?.mediaUrl ? { ...node, draftValues: { ...node.draftValues, mediaUrl: remote.draftValues?.mediaUrl, url: remote.draftValues?.url } } : node;
+    }), unseen));
+    setEdges((current) => mergeVideoAgentResults(current, restoreEdges(result.data!.canvasData).filter((edge) => unseen.some((node) => node.id === edge.target))));
+  }, [canvasId]);
+
+  useEffect(() => {
+    const handler = async (event: Event) => {
+      const change = (event as CustomEvent<{ projectId: string; createdNodeIds?: string[]; updatedNodeIds?: string[]; deletedNodeIds?: string[]; action?: string; nodeIds?: string[]; viewportChanged?: boolean }>).detail;
+      if (change?.projectId !== canvasId) return;
+      const response = await canvasService.getProject(canvasId);
+      if (!response.success || !response.data) return;
+      const remote = restoreNodes(response.data.canvasData);
+      const changed = new Set([...(change.createdNodeIds || []), ...(change.updatedNodeIds || [])]);
+      const deleted = new Set(change.deletedNodeIds || []);
+      setNodes((current) => mergeVideoAgentResults(current.filter((node) => !deleted.has(node.id)).map((node) => changed.has(node.id) ? remote.find((item) => item.id === node.id) || node : node), remote.filter((node) => changed.has(node.id))));
+      setEdges((current) => {
+        const kept = current.filter((edge) => !deleted.has(edge.source) && !deleted.has(edge.target) && !(change.action === "disconnect" && edge.source === change.nodeIds?.[0] && edge.target === change.nodeIds?.[1]));
+        return change.action === "connect" ? mergeVideoAgentResults(kept, restoreEdges(response.data!.canvasData).filter((edge) => edge.source === change.nodeIds?.[0] && edge.target === change.nodeIds?.[1])) : kept;
+      });
+      if (change.viewportChanged && response.data.canvasData?.viewport) setViewport(response.data.canvasData.viewport);
+    };
+    window.addEventListener("video-canvas-agent-mutation", handler);
+    return () => window.removeEventListener("video-canvas-agent-mutation", handler);
+  }, [canvasId]);
+
+  const saveBeforeVideoAgent = useCallback(async () => {
+    const statusResponse = await fetch(`/api/canvas/agent-runs?${new URLSearchParams({ chatId: canvasId, projectId: canvasId })}`, { cache: "no-store" });
+    if (statusResponse.ok && (await statusResponse.json()).run?.status === "running") throw new Error("当前视频任务还在执行，请使用补充要求。");
+    const remote = await canvasService.getProject(canvasId);
+    if (!remote.success || !remote.data) throw new Error("无法读取视频画布，请稍后重试");
+    const remoteNodes = restoreNodes(remote.data.canvasData);
+    const unseen = remoteNodes.filter((node) => node.draftValues?.canvasAgentRunId && !receivedAgentNodeIds.current.has(node.id));
+    const syncedNodes = nodes.map((node) => {
+      const archived = remoteNodes.find((item) => item.id === node.id && item.draftValues?.temporaryVideoUrl === node.draftValues?.mediaUrl);
+      return archived ? { ...node, draftValues: { ...node.draftValues, mediaUrl: archived.draftValues?.mediaUrl, url: archived.draftValues?.url, temporaryVideoUrl: archived.draftValues?.temporaryVideoUrl } } : node;
+    });
+    const mergedNodes = mergeVideoAgentResults(syncedNodes, unseen);
+    const mergedEdges = mergeVideoAgentResults(edges, restoreEdges(remote.data.canvasData).filter((edge) => unseen.some((node) => node.id === edge.target)));
+    const response = await fetch("/api/canvas/video-agent", {
+      method: "POST", headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ projectId: canvasId, baseRevision: remote.data.updatedAt, canvasData: {
+        nodes: serializeNodes(mergedNodes), edges: serializeEdges(mergedEdges),
+        selectedNodeIds: selectedNodeId ? [selectedNodeId] : [], viewport, tool: "select",
+      } }),
+    });
+    const result = await response.json();
+    if (!response.ok) throw new Error(result.error || "画布保存失败，请稍后重试");
+    if (result.success) { setNodes(mergedNodes); setEdges(mergedEdges); for (const node of unseen) receivedAgentNodeIds.current.add(node.id); }
+    if (!result.success) throw new Error(result.error || "画布保存失败，请稍后重试");
+  }, [canvasId, nodes, edges, selectedNodeId, viewport]);
+
   const commitTitle = useCallback(async () => {
     const nextTitle = draftTitle.trim() || "未命名";
     setProjectTitle(nextTitle);
@@ -10857,6 +10926,50 @@ export function LiblibVideoCanvasReplica({
     };
   }, [lineConnectState, nodes]);
 
+  const handleAgentVideoUiCommand = async (command: CanvasAgentUiCommand) => {
+    const target = nodes.find((node) => node.id === (command.nodeIds[0] || selectedNodeId));
+    if (command.nodeIds.some((id) => !nodes.some((node) => node.id === id))) throw new Error("目标节点不属于当前视频画布");
+    if (target) { setSelectedNodeId(target.id); setSelectedEdgeId(null); }
+    if (command.featureId.startsWith("video.function.")) {
+      const key = command.featureId.slice("video.function.".length);
+      const tool = configuredTools.find((item) => item.toolKey === key);
+      if (!tool) throw new Error("此视频功能已关闭或尚未配置");
+      if ((key === "grid-split" || key === "image-crop") && target) { await runSelectedImageToolAction(target.id, "crop"); return; }
+      if (key === "angle-edit" && target) { setAngleEditorNodeId(target.id); return; }
+      const created = createToolNode(tool, target ? target.x + target.width + 72 : 360, target?.y || 300);
+      addNodes([created], command.nodeIds.map((id) => ({ id: makeId("edge"), source: id, target: created.id })));
+      setInspectorNodeId(created.id);
+      return;
+    }
+    const action = command.featureId.replace("video.ui.", "");
+    const panels: Record<string, Exclude<ActivePanel, null>> = { assets: "assets", roles: "roleLibrary", styles: "styleLibrary", effects: "effectLibrary", history: "history", workflows: "workflow", share: "share", publish: "publish", skills: "skills", help: "help" };
+    if (panels[action]) { setActivePanel(panels[action]); return; }
+    if (action.startsWith("upload-")) { addTargetModule(action === "upload-video" ? "video" : action === "upload-audio" ? "audio" : "image"); toast.message("已添加上传模块，请选择本机文件"); return; }
+    if (action === "save") { await saveCanvas(); return; }
+    if (action === "export") {
+      const url = URL.createObjectURL(new Blob([JSON.stringify({ title: projectTitle, workspaceType: "video", canvasData: { nodes: serializeNodes(nodes), edges: serializeEdges(edges), viewport } }, null, 2)], { type: "application/json" }));
+      const link = document.createElement("a"); link.href = url; link.download = `${projectTitle}.json`; link.click(); setTimeout(() => URL.revokeObjectURL(url), 1000); return;
+    }
+    if (action === "import") {
+      const picker = document.createElement("input"); picker.type = "file"; picker.accept = ".json,application/json";
+      picker.onchange = async () => { try { const file = picker.files?.[0]; if (!file) return; const data = JSON.parse(await file.text()); const imported = restoreNodes(data.canvasData || data); if (!imported.length) throw new Error("文件中没有可用的视频画布节点"); if (!window.confirm("确认将文件里的节点添加到当前画布？")) return; const ids = new Map(imported.map((node) => [node.id, makeId("import")])); addNodes(imported.map((node) => ({ ...node, id: ids.get(node.id)! })), restoreEdges(data.canvasData || data).filter((edge) => ids.has(edge.source) && ids.has(edge.target)).map((edge) => ({ id: makeId("edge"), source: ids.get(edge.source)!, target: ids.get(edge.target)! }))); } catch (error) { toast.error(error instanceof Error ? error.message : "导入失败"); } }; picker.click(); return;
+    }
+    if (!target) throw new Error("请先选中具体素材节点");
+    if (action === "download") { downloadMediaNode(target); return; }
+    if (action === "preview") { setPreviewNode(target); return; }
+    if (action === "local-edit") { await runSelectedImageToolAction(target.id, "localEdit"); return; }
+    if (action === "annotate") { await runSelectedImageToolAction(target.id, "annotate"); return; }
+    if (action === "director") { setDirectorConsoleNodeId(target.id); return; }
+    if (action === "storyboard") { openStoryScriptWorkflow(target.id); return; }
+    if (action === "batch-storyboard" || action === "batch-video") { openStoryScriptWorkflow(target.id); toast.message("请检查分镜及费用后在工作台提交批量任务"); return; }
+    if (action === "video-hd") { setInspectorNodeId(target.id); toast.message("当前视频 AI 高清尚缺真实后端，不能将原视频冒充高清结果"); return; }
+    if (action === "video-clip") { setActiveVideoToolbarMode("clip"); return; }
+    if (action === "video-crop") { setActiveVideoToolbarMode("crop"); toast.message("当前裁剪导出后端尚未接入，不能当作已完成的视频裁剪"); return; }
+    if (action === "subtitle-erase") { setActiveVideoToolbarMode("subtitleErase"); toast.message("当前去字幕尚未接入真实处理后端"); return; }
+    if (["audio-split", "voice-split", "background-split", "frame-first", "frame-last", "frame-current"].includes(action)) { setPreviewNode(target); toast.message("已授权入口；当前页面此功能仍为模拟流程，Agent 不会生成占位素材或伪报完成"); return; }
+    throw new Error("此入口需要在相应的视频工作区打开");
+  };
+
   return (
     <div
       className="relative h-dvh w-full overflow-hidden bg-[#151515] text-white"
@@ -10868,6 +10981,7 @@ export function LiblibVideoCanvasReplica({
       onWheel={onCanvasWheel}
       ref={canvasRef}
     >
+      <CanvasAgentUiListener projectId={canvasId} workspace="video" onVideoAction={handleAgentVideoUiCommand} />
       <div className="absolute inset-0 bg-[radial-gradient(circle,rgba(255,255,255,0.18)_1px,transparent_1px)] bg-[length:16px_16px] bg-[position:2px_2px] opacity-[0.28]" />
 
       {lineConnectState ? (
@@ -11443,6 +11557,29 @@ export function LiblibVideoCanvasReplica({
         />
       ) : null}
 
+      {ZCODE_VIDEO_CANVAS_AUTHORIZED && (isVideoAgentOpen ? (
+        <VideoCanvasAgentPanel
+          key={canvasId}
+          projectId={canvasId}
+          selectedNodeIds={selectedNodeId ? [selectedNodeId] : []}
+          videoModels={canvasModelOptions.filter((model) => isVideoModelDescriptor(model))}
+          imageModels={canvasModelOptions.filter((model) => isImageGenerationModelDescriptor(model))}
+          beforeSend={saveBeforeVideoAgent}
+          onResults={(projectId, ids) => void refreshVideoAgentResults(projectId, ids)}
+          onClose={() => setIsVideoAgentOpen(false)}
+        />
+      ) : (
+        <button
+          type="button"
+          data-canvas-overlay="true"
+          onClick={() => { setInspectorNodeId(null); setIsVideoAgentOpen(true); }}
+          className="absolute right-4 top-[76px] z-40 flex items-center gap-2 rounded-xl border border-white/10 bg-[#252525] px-4 py-3 text-sm text-white shadow-lg hover:bg-[#303030]"
+          aria-label="打开视频创作 Agent"
+        >
+          <FileText className="h-4 w-4" />视频 Agent
+        </button>
+      ))}
+
       <TopBar
         draftTitle={draftTitle}
         isTitleEditing={isTitleEditing}
@@ -22937,8 +23074,8 @@ const STYLE_MARKET_CATEGORIES = [
   "全部",
 ];
 
-const STYLE_MARKET_THUMBNAIL_URL = "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/starter-character-three-view-cover.png";
-const EFFECT_MARKET_THUMBNAIL_URL = "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/starter-first-frame-video-cover.png";
+const STYLE_MARKET_THUMBNAIL_URL = "https://scqnycdn.jiansun.vip/legacy-oss/demo-sparkai/video-canvas-demo/starter-character-three-view-cover.png";
+const EFFECT_MARKET_THUMBNAIL_URL = "https://scqnycdn.jiansun.vip/legacy-oss/demo-sparkai/video-canvas-demo/starter-first-frame-video-cover.png";
 
 const STYLE_MARKET_CARDS: AssetMarketCard[] = [
   ["复古马卡龙", "算力潮汐", 177],

components/canvas/ReferenceImageToolbar.tsx

@@ -0,0 +1,452 @@
+"use client";
+
+import { ChevronRight, X } from "lucide-react";
+import {
+  Children,
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  useState,
+  type HTMLAttributes,
+  type MouseEvent,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+import { toast } from "sonner";
+import { ReferenceIcon } from "@/components/lovart/reference-icon";
+import { CanvasToolbarIcon } from "@/components/canvas/CanvasToolbarIcon";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import {
+  saveImageToolbarPreferences,
+  useImageToolbarPreferences,
+  type ImageToolbarPreferences,
+} from "@/lib/canvas-image-toolbar-preferences";
+
+type ToolProps = HTMLAttributes<HTMLButtonElement> & {
+  "data-tool-key"?: string;
+  disabled?: boolean;
+  children?: ReactNode;
+};
+type Tool = ReactElement<ToolProps>;
+type Props = HTMLAttributes<HTMLDivElement> & {
+  referencePresentation: boolean;
+  defaultPinnedKeys: string[];
+};
+
+function toolLabel(tool: Tool) {
+  return tool.props.title || "";
+}
+function toolIcon(tool: Tool, size: number) {
+  const icon = Children.toArray(tool.props.children).find(isValidElement);
+  if (
+    !isValidElement<{
+      className?: string;
+      style?: object;
+      referenceSize?: number;
+    }>(icon)
+  )
+    return null;
+  return cloneElement(icon, {
+    className: "shrink-0",
+    style: { width: size, height: size },
+    ...(icon.type === CanvasToolbarIcon ? { referenceSize: size } : {}),
+  });
+}
+function toolCredit(tool: Tool) {
+  return Children.toArray(tool.props.children).find(
+    (child) =>
+      isValidElement<{ compact?: boolean; label?: string }>(child) &&
+      child.props.compact &&
+      child.props.label
+  ) as
+    | ReactElement<{ compact?: boolean; label?: string; className?: string }>
+    | undefined;
+}
+function tooltipButton(tool: Tool, showNames: boolean) {
+  const name = toolLabel(tool);
+  // Clone the existing action so its handler, busy state and administrator icon override remain intact.
+  const button = cloneElement(tool, {
+    title: undefined,
+    "aria-label": name,
+    children: (
+      <>
+        {toolIcon(tool, 25)}
+        {showNames && <span className="lovart-image-tool-label">{name}</span>}
+      </>
+    ),
+  });
+  return (
+    <Tooltip key={tool.props["data-tool-key"] || name}>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent
+        className="lovart-image-tool-tooltip"
+        side="top"
+        sideOffset={8}
+      >
+        {name}
+        {toolCredit(tool) &&
+          cloneElement(toolCredit(tool)!, {
+            compact: false,
+            className: "lovart-image-tool-cost",
+          })}
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+export const ReferenceImageToolbar = forwardRef<HTMLDivElement, Props>(
+  function ReferenceImageToolbar(
+    { referencePresentation, defaultPinnedKeys, children, ...rootProps },
+    ref
+  ) {
+    const saved = useImageToolbarPreferences();
+    const [draft, setDraft] = useState<ImageToolbarPreferences | null>(null);
+    const [draggedKey, setDraggedKey] = useState<string | null>(null);
+    const elements = Children.toArray(children).filter(
+      isValidElement
+    ) as ReactElement<ToolProps>[];
+    const tools = elements.filter(
+      (element) =>
+        element.props["data-tool-key"] &&
+        !["addToChat", "download"].includes(element.props["data-tool-key"]!)
+    );
+    const toolMap = new Map(
+      tools.map((tool) => [tool.props["data-tool-key"]!, tool])
+    );
+    const preferences = saved || {
+      pinnedKeys: defaultPinnedKeys,
+      showNames: false,
+    };
+    const pinned = preferences.pinnedKeys.filter((key) => toolMap.has(key));
+    const moreTools = tools.filter(
+      (tool) => !pinned.includes(tool.props["data-tool-key"]!)
+    );
+    const addToChat = elements.find(
+      (element) => element.props["data-tool-key"] === "addToChat"
+    );
+    const download = elements.find(
+      (element) => element.props["data-tool-key"] === "download"
+    );
+    const originalMenu = elements.find(
+      (element) => element.type === DropdownMenu
+    );
+    const menuChildren = originalMenu
+      ? (Children.toArray(originalMenu.props.children).filter(
+          isValidElement
+        ) as ReactElement<{ children?: ReactNode }>[])
+      : [];
+    const menuTrigger = menuChildren.find(
+      (element) => element.type === DropdownMenuTrigger
+    );
+    const moreButton =
+      menuTrigger &&
+      (Children.toArray(menuTrigger.props.children).find(isValidElement) as
+        | Tool
+        | undefined);
+    const extras = menuChildren.find(
+      (element) => element.type === DropdownMenuContent
+    )?.props.children;
+    const openCustomizer = () =>
+      setDraft({
+        pinnedKeys: [...preferences.pinnedKeys],
+        showNames: preferences.showNames,
+      });
+    const toggle = (key: string) =>
+      setDraft((current) =>
+        current
+          ? {
+              ...current,
+              pinnedKeys: current.pinnedKeys.includes(key)
+                ? current.pinnedKeys.filter((item) => item !== key)
+                : [...current.pinnedKeys, key],
+            }
+          : current
+      );
+    const move = (key: string, target: string) =>
+      setDraft((current) => {
+        if (!current || key === target) return current;
+        const next = [...current.pinnedKeys];
+        const from = next.indexOf(key),
+          to = next.indexOf(target);
+        if (from < 0 || to < 0) return current;
+        next.splice(from, 1);
+        next.splice(to, 0, key);
+        return { ...current, pinnedKeys: next };
+      });
+    if (!referencePresentation)
+      return (
+        <div {...rootProps} ref={ref}>
+          {children}
+        </div>
+      );
+    return (
+      <>
+        <div
+          {...rootProps}
+          ref={ref}
+          style={{ ...rootProps.style, overflowX: "auto" }}
+          data-show-tool-names={preferences.showNames ? "true" : "false"}
+        >
+          {addToChat && tooltipButton(addToChat, preferences.showNames)}
+          {addToChat && <div className="w-px" />}
+          {pinned.map((key) =>
+            tooltipButton(toolMap.get(key)!, preferences.showNames)
+          )}
+          <DropdownMenu>
+            {moreButton && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <DropdownMenuTrigger asChild>
+                    {cloneElement(moreButton, {
+                      title: undefined,
+                      "aria-label": toolLabel(moreButton),
+                      children: toolIcon(moreButton, 25),
+                    })}
+                  </DropdownMenuTrigger>
+                </TooltipTrigger>
+                <TooltipContent
+                  className="lovart-image-tool-tooltip"
+                  sideOffset={8}
+                >
+                  {toolLabel(moreButton)}
+                </TooltipContent>
+              </Tooltip>
+            )}
+            <DropdownMenuContent
+              className="lovart-image-action-menu lovart-image-custom-more"
+              side="bottom"
+              align="end"
+            >
+              {moreTools.map((tool) => (
+                <DropdownMenuItem
+                  key={tool.props["data-tool-key"]}
+                  disabled={tool.props.disabled}
+                  onClick={(event) =>
+                    tool.props.onClick?.(
+                      event as unknown as MouseEvent<HTMLButtonElement>
+                    )
+                  }
+                >
+                  {toolIcon(tool, 18)}
+                  <span>{toolLabel(tool)}</span>
+                  {toolCredit(tool) &&
+                    cloneElement(toolCredit(tool)!, {
+                      compact: false,
+                      className: "lovart-image-tool-cost",
+                    })}
+                </DropdownMenuItem>
+              ))}
+              {extras}
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                className="lovart-customize-entry"
+                onSelect={openCustomizer}
+              >
+                自定义工具栏
+                <ChevronRight size={14} />
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+          {download && (
+            <>
+              <div className="w-px" />
+              {tooltipButton(download, preferences.showNames)}
+            </>
+          )}
+        </div>
+        <Dialog
+          open={Boolean(draft)}
+          onOpenChange={(open) => {
+            if (!open) setDraft(null);
+          }}
+        >
+          <DialogContent
+            hideCloseButton
+            className="lovart-toolbar-customizer"
+            overlayClassName="lovart-toolbar-customizer-overlay"
+            onPointerDown={(event) => event.stopPropagation()}
+            onClick={(event) => event.stopPropagation()}
+          >
+            <header className="lovart-customizer-header">
+              <div>
+                <DialogTitle>自定义工具栏</DialogTitle>
+                <DialogDescription>
+                  选择你想在编辑栏中使用的工具
+                </DialogDescription>
+              </div>
+              <div className="lovart-customizer-header-actions">
+                <button
+                  type="button"
+                  aria-label="恢复默认工具栏"
+                  onClick={() =>
+                    setDraft({
+                      pinnedKeys: [...defaultPinnedKeys],
+                      showNames: false,
+                    })
+                  }
+                >
+                  <ReferenceIcon name="toolbar-reset" size={16} />
+                </button>
+                <button
+                  type="button"
+                  aria-label="关闭自定义工具栏"
+                  onClick={() => setDraft(null)}
+                >
+                  <ReferenceIcon name="toolbar-close" size={16} />
+                </button>
+              </div>
+            </header>
+            <div className="lovart-customizer-body">
+              <div
+                className="lovart-customizer-preview"
+                aria-label="工具栏预览"
+              >
+                <div className="lovart-customizer-preview-bar">
+                  {addToChat && (
+                    <span className="lovart-preview-fixed">
+                      {toolIcon(addToChat, 18)}
+                      {draft?.showNames && toolLabel(addToChat)}
+                    </span>
+                  )}
+                  {draft?.pinnedKeys
+                    .filter((key) => toolMap.has(key))
+                    .map((key, index, keys) => {
+                      const tool = toolMap.get(key)!;
+                      return (
+                        <div
+                          className="lovart-preview-chip"
+                          key={key}
+                          draggable
+                          onDragStart={(event) => {
+                            setDraggedKey(key);
+                            event.dataTransfer.setData("text/plain", key);
+                            event.dataTransfer.effectAllowed = "move";
+                          }}
+                          onDragEnd={() => setDraggedKey(null)}
+                          onDragOver={(event) => event.preventDefault()}
+                          onDrop={(event) => {
+                            event.preventDefault();
+                            if (draggedKey) move(draggedKey, key);
+                            setDraggedKey(null);
+                          }}
+                        >
+                          <button
+                            type="button"
+                            className="lovart-preview-handle"
+                            aria-label={`${toolLabel(tool)}，按左右方向键调整顺序`}
+                            onKeyDown={(event) => {
+                              const offset =
+                                event.key === "ArrowLeft"
+                                  ? -1
+                                  : event.key === "ArrowRight"
+                                    ? 1
+                                    : 0;
+                              if (offset && keys[index + offset]) {
+                                event.preventDefault();
+                                move(key, keys[index + offset]);
+                              }
+                            }}
+                          >
+                            {toolIcon(tool, 18)}
+                            {draft.showNames && <span>{toolLabel(tool)}</span>}
+                          </button>
+                          <button
+                            type="button"
+                            aria-label={`移除${toolLabel(tool)}`}
+                            onClick={() => toggle(key)}
+                          >
+                            <X size={12} />
+                          </button>
+                        </div>
+                      );
+                    })}
+                </div>
+              </div>
+              <div className="lovart-customizer-tools">
+                {tools.map((tool) => {
+                  const key = tool.props["data-tool-key"]!;
+                  const isPinned = Boolean(draft?.pinnedKeys.includes(key));
+                  return (
+                    <button
+                      key={key}
+                      type="button"
+                      aria-label={`${isPinned ? "取消固定" : "固定"}${toolLabel(tool)}`}
+                      aria-pressed={isPinned}
+                      onClick={() => toggle(key)}
+                    >
+                      {toolIcon(tool, 18)}
+                      <span>{toolLabel(tool)}</span>
+                      <ReferenceIcon
+                        name={
+                          isPinned
+                            ? "toolbar-pin-filled"
+                            : "toolbar-pin-outline"
+                        }
+                        size={13}
+                      />
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+            <footer className="lovart-customizer-footer">
+              <label>
+                <button
+                  type="button"
+                  role="switch"
+                  aria-label="显示工具名称"
+                  aria-checked={Boolean(draft?.showNames)}
+                  className="lovart-customizer-switch"
+                  onClick={() =>
+                    setDraft((current) =>
+                      current
+                        ? { ...current, showNames: !current.showNames }
+                        : current
+                    )
+                  }
+                >
+                  <span />
+                </button>
+                显示工具名称
+              </label>
+              <div>
+                <button type="button" onClick={() => setDraft(null)}>
+                  取消
+                </button>
+                <button
+                  type="button"
+                  className="lovart-customizer-save"
+                  onClick={() => {
+                    if (draft && saveImageToolbarPreferences(draft))
+                      setDraft(null);
+                    else
+                      toast.error("无法保存工具栏设置，请检查浏览器存储权限");
+                  }}
+                >
+                  保存
+                </button>
+              </div>
+            </footer>
+          </DialogContent>
+        </Dialog>
+      </>
+    );
+  }
+);

components/canvas/canvas-logo-loading.tsx

@@ -1,5 +1,4 @@
-import { Sparkles } from "lucide-react";
-import { cn } from "@/lib/utils";
+import { BloubAvatar } from "@/components/bloub-avatar";
 
 type CanvasLogoLoadingViewProps = {
   label?: string;
@@ -10,46 +9,17 @@ type CanvasLogoLoadingViewProps = {
 
 export function CanvasLogoLoadingView({
   label = "正在加载画布...",
-  siteName = "AI Chatbot",
-  siteLogo,
-  siteLogoDark,
 }: CanvasLogoLoadingViewProps) {
-  const resolvedSiteName = String(siteName || "AI Chatbot").trim();
-  const lightLogo = String(siteLogo || siteLogoDark || "").trim();
-  const darkLogo = String(siteLogoDark || siteLogo || "").trim();
-  const hasSeparateDarkLogo = Boolean(darkLogo && darkLogo !== lightLogo);
-
   return (
     <div className="flex h-dvh w-screen items-center justify-center bg-[#f4f4f5] text-[#20242a] dark:bg-[#08090b] dark:text-zinc-100">
-      <div className="flex flex-col items-center gap-3.5">
-        <div className="relative flex h-[78px] w-[78px] items-center justify-center">
-          <div className="absolute inset-0 animate-spin rounded-full bg-[conic-gradient(from_0deg,#ff7a00,#ffe04b,#48e6a5,#35a7ff,#b15cff,#ff4aa2,#ff7a00)] opacity-90 blur-[1px]" />
-          <div className="absolute inset-[6px] animate-ping rounded-full bg-[conic-gradient(from_180deg,#ff7a00,#35a7ff,#b15cff,#48e6a5,#ff7a00)] opacity-25" />
-          <div className="absolute inset-1 rounded-full bg-[#f4f4f5] dark:bg-[#08090b]" />
-          <div className="relative flex h-14 w-14 items-center justify-center overflow-hidden rounded-full border border-black/8 bg-white shadow-[0_13px_38px_rgba(15,23,42,0.16)] dark:border-white/10 dark:bg-zinc-950 dark:shadow-[0_17px_49px_rgba(0,0,0,0.45)]">
-            {lightLogo ? (
-              <>
-                <img
-                  alt={resolvedSiteName}
-                  className={cn(
-                    "h-[34px] w-[34px] object-contain",
-                    hasSeparateDarkLogo && "dark:hidden"
-                  )}
-                  src={lightLogo}
-                />
-                {hasSeparateDarkLogo ? (
-                  <img
-                    alt={resolvedSiteName}
-                    className="hidden h-[34px] w-[34px] object-contain dark:block"
-                    src={darkLogo}
-                  />
-                ) : null}
-              </>
-            ) : (
-              <Sparkles className="h-[22px] w-[22px] text-[#20242a] dark:text-white" />
-            )}
-          </div>
-        </div>
+      <div className="flex flex-col items-center gap-2.5">
+        <BloubAvatar
+          label={label}
+          playSequence
+          size={104}
+          state="idle"
+          surface="page"
+        />
         <div className="text-[12px] font-medium tracking-[0.16em] text-[#6b7280] dark:text-zinc-400">
           {label}
         </div>

components/canvas/chat-panel/OpenClawInteractiveModelViewer.tsx

@@ -0,0 +1,595 @@
+"use client";
+
+/* eslint-disable @next/next/no-img-element */
+import { Environment, OrbitControls, useGLTF } from "@react-three/drei";
+import { Canvas, useFrame, useThree } from "@react-three/fiber";
+import { AlertCircle } from "lucide-react";
+import React, { Suspense, useEffect, useMemo, useRef } from "react";
+import * as THREE from "three";
+import type { Mesh, Object3D } from "three";
+import type { OrbitControls as OrbitControlsImpl } from "three-stdlib";
+import type {
+  OpenClawModelInteractionManifest,
+  OpenClawModelInteractionPart,
+} from "@/lib/openclaw-chat/model-interaction";
+import {
+  getOpenClawExplodedOffsetMm,
+  getOpenClawSourceNodeOffset,
+  mapOpenClawCadOffsetToGlb,
+} from "@/lib/openclaw-chat/model-interaction";
+
+export type OpenClawModelTransformRequest = {
+  actionId: string | null;
+  amount: number;
+  animate: boolean;
+  durationMs: number;
+  nonce: number;
+};
+
+export type OpenClawModelCameraState = {
+  position: [number, number, number];
+  target: [number, number, number];
+};
+
+type InteractiveEntry = {
+  node: Object3D;
+  part: OpenClawModelInteractionPart;
+  initialPosition: THREE.Vector3;
+};
+
+type AnimationState = {
+  startedAt: number;
+  durationMs: number;
+  starts: Map<string, THREE.Vector3>;
+  targets: Map<string, THREE.Vector3>;
+  easing: string;
+};
+
+type DragState = {
+  entry: InteractiveEntry;
+  plane: THREE.Plane;
+  startIntersection: THREE.Vector3;
+  startWorldPosition: THREE.Vector3;
+  startLocalPosition: THREE.Vector3;
+  pointerId: number;
+};
+
+class InteractiveViewerErrorBoundary extends React.Component<
+  { children: React.ReactNode; fallback: React.ReactNode; resetKey: string },
+  { hasError: boolean }
+> {
+  state = { hasError: false };
+
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+
+  componentDidUpdate(previousProps: { resetKey: string }) {
+    if (
+      this.state.hasError &&
+      previousProps.resetKey !== this.props.resetKey
+    ) {
+      this.setState({ hasError: false });
+    }
+  }
+
+  render() {
+    return this.state.hasError ? this.props.fallback : this.props.children;
+  }
+}
+
+function isMesh(node: Object3D): node is Mesh {
+  return (node as Mesh).isMesh === true;
+}
+
+function cloneScene(scene: Object3D) {
+  const clone = scene.clone(true);
+  clone.traverse((node) => {
+    if (!isMesh(node)) return;
+    node.castShadow = true;
+    node.receiveShadow = true;
+    const materials = Array.isArray(node.material)
+      ? node.material
+      : [node.material];
+    const clones = materials.map((material) => material.clone());
+    node.material = Array.isArray(node.material)
+      ? clones
+      : clones[0] || node.material;
+  });
+  return clone;
+}
+
+function getFitTransform(scene: Object3D) {
+  const bounds = new THREE.Box3().setFromObject(scene);
+  if (bounds.isEmpty()) {
+    return {
+      position: [0, 0, 0] as [number, number, number],
+      scale: 1,
+    };
+  }
+  const size = bounds.getSize(new THREE.Vector3());
+  const center = bounds.getCenter(new THREE.Vector3());
+  const largestDimension = Math.max(size.x, size.y, size.z);
+  if (!Number.isFinite(largestDimension) || largestDimension <= 0) {
+    return {
+      position: [0, 0, 0] as [number, number, number],
+      scale: 1,
+    };
+  }
+  const scale = 2 / largestDimension;
+  return {
+    position: [
+      -center.x * scale,
+      -center.y * scale,
+      -center.z * scale,
+    ] as [number, number, number],
+    scale,
+  };
+}
+
+function getEasedProgress(progress: number, easing: string) {
+  if (easing.toLowerCase() === "linear") return progress;
+  return progress < 0.5
+    ? 4 * progress * progress * progress
+    : 1 - Math.pow(-2 * progress + 2, 3) / 2;
+}
+
+function getPartTargetPosition(
+  entry: InteractiveEntry,
+  manifest: OpenClawModelInteractionManifest,
+  amount: number
+) {
+  const offsetMm = getOpenClawExplodedOffsetMm(entry.part);
+  if (!offsetMm) return entry.initialPosition.clone();
+  const offset = mapOpenClawCadOffsetToGlb(offsetMm, manifest.scaleMmToGlb);
+  return entry.initialPosition
+    .clone()
+    .add(new THREE.Vector3(offset.x, offset.y, offset.z).multiplyScalar(amount));
+}
+
+function ModelInteractionScene({
+  allowDragging,
+  fitExplodedSource,
+  initialCameraState,
+  interactionParts,
+  manifest,
+  modelUrl,
+  onMatchChange,
+  onCameraStateChange,
+  onSelectedPartChange,
+  resetAllToken,
+  resetSelectedToken,
+  selectedNodeName,
+  sourceVariant,
+  transformRequest,
+}: {
+  allowDragging: boolean;
+  fitExplodedSource: boolean;
+  initialCameraState?: OpenClawModelCameraState | null;
+  interactionParts: OpenClawModelInteractionPart[];
+  manifest: OpenClawModelInteractionManifest;
+  modelUrl: string;
+  onMatchChange: (matched: number, total: number) => void;
+  onCameraStateChange?: (state: OpenClawModelCameraState) => void;
+  onSelectedPartChange: (part: OpenClawModelInteractionPart | null) => void;
+  resetAllToken: number;
+  resetSelectedToken: number;
+  selectedNodeName: string | null;
+  sourceVariant: "assembled" | "exploded";
+  transformRequest: OpenClawModelTransformRequest;
+}) {
+  const { camera, gl, scene: rootScene } = useThree();
+  const controlsRef = useRef<OrbitControlsImpl | null>(null);
+  const gltf = useGLTF(modelUrl, true);
+  const scene = useMemo(() => {
+    const cloned = cloneScene(gltf.scene);
+    if (sourceVariant !== "exploded") return cloned;
+    const partsByNodeName = new Map(
+      interactionParts.map((part) => [part.nodeName, part])
+    );
+    cloned.traverse((node) => {
+      const part = partsByNodeName.get(node.name);
+      if (!part) return;
+      const offset = getOpenClawSourceNodeOffset(
+        part,
+        sourceVariant,
+        manifest.scaleMmToGlb
+      );
+      node.position.add(new THREE.Vector3(offset.x, offset.y, offset.z));
+    });
+    cloned.updateMatrixWorld(true);
+    return cloned;
+  }, [gltf.scene, interactionParts, manifest.scaleMmToGlb, sourceVariant]);
+  const fitTransform = useMemo(
+    () => getFitTransform(fitExplodedSource ? gltf.scene : scene),
+    [fitExplodedSource, gltf.scene, scene]
+  );
+  const entriesRef = useRef<Map<string, InteractiveEntry>>(new Map());
+  const objectEntriesRef = useRef<Map<Object3D, InteractiveEntry>>(new Map());
+  const animationRef = useRef<AnimationState | null>(null);
+  const dragRef = useRef<DragState | null>(null);
+  const currentAmountRef = useRef(0);
+  const selectionHelperRef = useRef<THREE.BoxHelper | null>(null);
+
+  useEffect(() => {
+    const partsByNodeName = new Map(
+      interactionParts.map((part) => [part.nodeName, part])
+    );
+    const entries = new Map<string, InteractiveEntry>();
+    const objectEntries = new Map<Object3D, InteractiveEntry>();
+    scene.traverse((node) => {
+      const part = partsByNodeName.get(node.name);
+      if (!part || entries.has(part.nodeName)) return;
+      const entry = {
+        node,
+        part,
+        initialPosition: node.position.clone(),
+      };
+      entries.set(part.nodeName, entry);
+      objectEntries.set(node, entry);
+    });
+    entriesRef.current = entries;
+    objectEntriesRef.current = objectEntries;
+    onMatchChange(entries.size, interactionParts.length);
+
+    return () => {
+      entriesRef.current.clear();
+      objectEntriesRef.current.clear();
+      onMatchChange(0, interactionParts.length);
+    };
+  }, [interactionParts, onMatchChange, scene]);
+
+  useEffect(() => {
+    if (!initialCameraState || !controlsRef.current) return;
+    camera.position.set(...initialCameraState.position);
+    controlsRef.current.target.set(...initialCameraState.target);
+    camera.updateProjectionMatrix();
+    controlsRef.current.update();
+  }, [camera, initialCameraState]);
+
+  useEffect(() => {
+    const previous = selectionHelperRef.current;
+    if (previous) {
+      rootScene.remove(previous);
+      previous.geometry.dispose();
+      (previous.material as THREE.Material).dispose();
+      selectionHelperRef.current = null;
+    }
+    if (!selectedNodeName) return;
+    const entry = entriesRef.current.get(selectedNodeName);
+    if (!entry) return;
+    const helper = new THREE.BoxHelper(entry.node, 0x3ecf8e);
+    helper.raycast = () => undefined;
+    rootScene.add(helper);
+    selectionHelperRef.current = helper;
+    return () => {
+      rootScene.remove(helper);
+      helper.geometry.dispose();
+      (helper.material as THREE.Material).dispose();
+      if (selectionHelperRef.current === helper) {
+        selectionHelperRef.current = null;
+      }
+    };
+  }, [rootScene, selectedNodeName]);
+
+  useEffect(() => {
+    const amount = THREE.MathUtils.clamp(transformRequest.amount, 0, 1);
+    currentAmountRef.current = amount;
+    const starts = new Map<string, THREE.Vector3>();
+    const targets = new Map<string, THREE.Vector3>();
+    for (const [nodeName, entry] of entriesRef.current) {
+      starts.set(nodeName, entry.node.position.clone());
+      targets.set(nodeName, getPartTargetPosition(entry, manifest, amount));
+    }
+    if (!transformRequest.animate) {
+      animationRef.current = null;
+      for (const [nodeName, target] of targets) {
+        entriesRef.current.get(nodeName)?.node.position.copy(target);
+      }
+      return;
+    }
+    const targetState = amount >= 0.5 ? "exploded" : "assembled";
+    const action =
+      manifest.actions.find((item) => item.id === transformRequest.actionId) ||
+      manifest.actions.find((item) => item.toState === targetState);
+    animationRef.current = {
+      startedAt: performance.now(),
+      durationMs: action?.durationMs ?? transformRequest.durationMs,
+      starts,
+      targets,
+      easing: action?.easing || "easeInOutCubic",
+    };
+  }, [manifest, transformRequest]);
+
+  useEffect(() => {
+    if (resetAllToken <= 0) return;
+    animationRef.current = null;
+    for (const entry of entriesRef.current.values()) {
+      entry.node.position.copy(
+        getPartTargetPosition(entry, manifest, currentAmountRef.current)
+      );
+    }
+  }, [manifest, resetAllToken]);
+
+  useEffect(() => {
+    if (resetSelectedToken <= 0 || !selectedNodeName) return;
+    const entry = entriesRef.current.get(selectedNodeName);
+    if (!entry) return;
+    entry.node.position.copy(
+      getPartTargetPosition(entry, manifest, currentAmountRef.current)
+    );
+  }, [manifest, resetSelectedToken, selectedNodeName]);
+
+  useEffect(() => {
+    const element = gl.domElement;
+    const raycaster = new THREE.Raycaster();
+    const pointer = new THREE.Vector2();
+    const planeIntersection = new THREE.Vector3();
+    const worldPosition = new THREE.Vector3();
+
+    const updateRay = (event: PointerEvent) => {
+      const bounds = element.getBoundingClientRect();
+      if (bounds.width <= 0 || bounds.height <= 0) return false;
+      pointer.set(
+        ((event.clientX - bounds.left) / bounds.width) * 2 - 1,
+        -((event.clientY - bounds.top) / bounds.height) * 2 + 1
+      );
+      raycaster.setFromCamera(pointer, camera);
+      return true;
+    };
+    const findEntry = (object: Object3D) => {
+      let current: Object3D | null = object;
+      while (current) {
+        const entry = objectEntriesRef.current.get(current);
+        if (entry) return entry;
+        current = current.parent;
+      }
+      return null;
+    };
+    const handlePointerDown = (event: PointerEvent) => {
+      if (event.button !== 0 || animationRef.current || !updateRay(event)) return;
+      const intersections = raycaster.intersectObjects(
+        [...entriesRef.current.values()].map((entry) => entry.node),
+        true
+      );
+      const entry = intersections
+        .map((intersection) => findEntry(intersection.object))
+        .find((candidate): candidate is InteractiveEntry => Boolean(candidate));
+      if (!entry) {
+        onSelectedPartChange(null);
+        return;
+      }
+      onSelectedPartChange(entry.part);
+      if (!allowDragging || !entry.part.draggable) return;
+
+      const normal = camera.getWorldDirection(new THREE.Vector3()).normalize();
+      const startWorldPosition = entry.node.getWorldPosition(new THREE.Vector3());
+      const plane = new THREE.Plane().setFromNormalAndCoplanarPoint(
+        normal,
+        startWorldPosition
+      );
+      if (!raycaster.ray.intersectPlane(plane, planeIntersection)) return;
+      dragRef.current = {
+        entry,
+        plane,
+        startIntersection: planeIntersection.clone(),
+        startWorldPosition,
+        startLocalPosition: entry.node.position.clone(),
+        pointerId: event.pointerId,
+      };
+      if (controlsRef.current) controlsRef.current.enabled = false;
+      element.setPointerCapture?.(event.pointerId);
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    };
+    const handlePointerMove = (event: PointerEvent) => {
+      const drag = dragRef.current;
+      if (!drag || drag.pointerId !== event.pointerId || !updateRay(event)) return;
+      if (!raycaster.ray.intersectPlane(drag.plane, planeIntersection)) return;
+      const targetWorld = worldPosition
+        .copy(drag.startWorldPosition)
+        .add(planeIntersection.clone().sub(drag.startIntersection));
+      const targetLocal = drag.entry.node.parent
+        ? drag.entry.node.parent.worldToLocal(targetWorld.clone())
+        : targetWorld;
+      const axes = manifest.drag.axes;
+      if (!axes.includes("x")) targetLocal.x = drag.startLocalPosition.x;
+      if (!axes.includes("z")) targetLocal.y = drag.startLocalPosition.y;
+      if (!axes.includes("y")) targetLocal.z = drag.startLocalPosition.z;
+
+      const maxDistance = manifest.drag.maxDistanceMm * manifest.scaleMmToGlb;
+      const fromInitial = targetLocal.clone().sub(drag.entry.initialPosition);
+      if (maxDistance > 0 && fromInitial.length() > maxDistance) {
+        fromInitial.setLength(maxDistance);
+        targetLocal.copy(drag.entry.initialPosition).add(fromInitial);
+      }
+      drag.entry.node.position.copy(targetLocal);
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    };
+    const finishDrag = (event: PointerEvent) => {
+      const drag = dragRef.current;
+      if (!drag || drag.pointerId !== event.pointerId) return;
+      const snapDistance =
+        manifest.drag.snapDistanceMm * manifest.scaleMmToGlb;
+      if (snapDistance > 0) {
+        const delta = drag.entry.node.position
+          .clone()
+          .sub(drag.entry.initialPosition);
+        delta.set(
+          Math.round(delta.x / snapDistance) * snapDistance,
+          Math.round(delta.y / snapDistance) * snapDistance,
+          Math.round(delta.z / snapDistance) * snapDistance
+        );
+        drag.entry.node.position.copy(drag.entry.initialPosition).add(delta);
+      }
+      element.releasePointerCapture?.(event.pointerId);
+      dragRef.current = null;
+      if (controlsRef.current) controlsRef.current.enabled = true;
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    };
+
+    element.addEventListener("pointerdown", handlePointerDown, true);
+    window.addEventListener("pointermove", handlePointerMove, true);
+    window.addEventListener("pointerup", finishDrag, true);
+    window.addEventListener("pointercancel", finishDrag, true);
+    return () => {
+      element.removeEventListener("pointerdown", handlePointerDown, true);
+      window.removeEventListener("pointermove", handlePointerMove, true);
+      window.removeEventListener("pointerup", finishDrag, true);
+      window.removeEventListener("pointercancel", finishDrag, true);
+      dragRef.current = null;
+    };
+  }, [allowDragging, camera, gl, manifest, onSelectedPartChange]);
+
+  useEffect(() => {
+    return () => {
+      scene.traverse((node) => {
+        if (!isMesh(node)) return;
+        const materials = Array.isArray(node.material)
+          ? node.material
+          : [node.material];
+        for (const material of materials) material.dispose();
+      });
+    };
+  }, [scene]);
+
+  useFrame(() => {
+    selectionHelperRef.current?.update();
+    const animation = animationRef.current;
+    if (!animation) return;
+    const rawProgress =
+      animation.durationMs <= 0
+        ? 1
+        : Math.min(1, (performance.now() - animation.startedAt) / animation.durationMs);
+    const progress = getEasedProgress(rawProgress, animation.easing);
+    for (const [nodeName, target] of animation.targets) {
+      const entry = entriesRef.current.get(nodeName);
+      const start = animation.starts.get(nodeName);
+      if (entry && start) entry.node.position.lerpVectors(start, target, progress);
+    }
+    if (rawProgress >= 1) animationRef.current = null;
+  });
+
+  return (
+    <>
+      <ambientLight intensity={0.75} />
+      <directionalLight castShadow intensity={1.6} position={[4, 7, 5]} />
+      <directionalLight intensity={0.45} position={[-4, 2, -3]} />
+      <primitive
+        object={scene}
+        position={fitTransform.position}
+        scale={fitTransform.scale}
+      />
+      <Environment preset="studio" />
+      <OrbitControls
+        dampingFactor={0.08}
+        enableDamping
+        enablePan
+        enableRotate
+        enableZoom
+        makeDefault
+        maxPolarAngle={Math.PI / 1.65}
+        minDistance={1.2}
+        minPolarAngle={0}
+        onChange={() => {
+          const controls = controlsRef.current;
+          if (!controls || !onCameraStateChange) return;
+          onCameraStateChange({
+            position: camera.position.toArray() as [number, number, number],
+            target: controls.target.toArray() as [number, number, number],
+          });
+        }}
+        ref={controlsRef}
+      />
+    </>
+  );
+}
+
+export function OpenClawInteractiveModelViewer({
+  allowDragging,
+  background,
+  fitExplodedSource = false,
+  initialCameraState,
+  interactionParts,
+  manifest,
+  modelUrl,
+  onMatchChange,
+  onCameraStateChange,
+  onSelectedPartChange,
+  previewImageUrl,
+  resetAllToken,
+  resetSelectedToken,
+  resetViewToken,
+  selectedNodeName,
+  sourceVariant,
+  transformRequest,
+}: {
+  allowDragging: boolean;
+  background: string;
+  fitExplodedSource?: boolean;
+  initialCameraState?: OpenClawModelCameraState | null;
+  interactionParts?: OpenClawModelInteractionPart[];
+  manifest: OpenClawModelInteractionManifest;
+  modelUrl: string;
+  onMatchChange: (matched: number, total: number) => void;
+  onCameraStateChange?: (state: OpenClawModelCameraState) => void;
+  onSelectedPartChange: (part: OpenClawModelInteractionPart | null) => void;
+  previewImageUrl?: string | null;
+  resetAllToken: number;
+  resetSelectedToken: number;
+  resetViewToken: number;
+  selectedNodeName: string | null;
+  sourceVariant: "assembled" | "exploded";
+  transformRequest: OpenClawModelTransformRequest;
+}) {
+  return (
+    <InteractiveViewerErrorBoundary
+      resetKey={`${modelUrl}:${resetViewToken}`}
+      fallback={
+        <div className="relative flex h-full w-full items-center justify-center overflow-hidden bg-zinc-950 text-zinc-200">
+          {previewImageUrl ? (
+            <img
+              alt="3D 模型静态预览"
+              className="absolute inset-0 h-full w-full object-contain opacity-80"
+              src={previewImageUrl}
+            />
+          ) : null}
+          <div className="relative flex max-w-xs flex-col items-center gap-2 rounded-md bg-black/70 px-4 py-3 text-center backdrop-blur-sm">
+            <AlertCircle className="h-6 w-6 text-amber-300" />
+            <p className="text-xs">3D 交互预览加载失败，已显示静态预览</p>
+          </div>
+        </div>
+      }
+    >
+      <Canvas
+        camera={{ fov: 42, position: [2.4, 1.8, 2.4] }}
+        dpr={[1, 1.75]}
+        gl={{ antialias: true, powerPreference: "high-performance" }}
+        key={`${modelUrl}:${resetViewToken}`}
+        shadows
+        style={{ background }}
+      >
+        <Suspense fallback={null}>
+          <ModelInteractionScene
+            allowDragging={allowDragging}
+            fitExplodedSource={fitExplodedSource}
+            initialCameraState={initialCameraState}
+            interactionParts={interactionParts || manifest.parts}
+            manifest={manifest}
+            modelUrl={modelUrl}
+            onMatchChange={onMatchChange}
+            onCameraStateChange={onCameraStateChange}
+            onSelectedPartChange={onSelectedPartChange}
+            resetAllToken={resetAllToken}
+            resetSelectedToken={resetSelectedToken}
+            selectedNodeName={selectedNodeName}
+            sourceVariant={sourceVariant}
+            transformRequest={transformRequest}
+          />
+        </Suspense>
+      </Canvas>
+    </InteractiveViewerErrorBoundary>
+  );
+}

components/canvas/chat-panel/canvas-agent-run-panel.tsx

@@ -0,0 +1,181 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import useSWR from "swr";
+import { Loader2, Square, ArrowUp, RotateCcw } from "lucide-react";
+import { toast } from "sonner";
+import type { AgentRunView } from "@/lib/ai/canvas-agent-runtime/protocol";
+
+export function CanvasAgentRunPanel(props: {
+  enabled: boolean;
+  chatId: string;
+  projectId: string;
+  busy: boolean;
+  onResume: (runId: string) => void;
+  onResults: (projectId: string, nodeIds: string[]) => void;
+  onRunChange?: (run: AgentRunView | null) => void;
+}) {
+  const [text, setText] = useState("");
+  const [sending, setSending] = useState(false);
+  const [stopping, setStopping] = useState(false);
+  const activeScope = useRef("");
+  activeScope.current = `${props.chatId}:${props.projectId}`;
+  const resultSignature = useRef("");
+  const key = props.enabled
+    ? `/api/canvas/agent-runs?${new URLSearchParams({ chatId: props.chatId, projectId: props.projectId })}`
+    : null;
+  const { data, mutate } = useSWR<{ run: AgentRunView | null }>(
+    key,
+    async (url: string) => {
+      const response = await fetch(url, { cache: "no-store" });
+      if (!response.ok) return { run: null };
+      return response.json();
+    },
+    {
+      refreshInterval: (latest) => (latest?.run?.status === "running" || props.busy ? 2000 : 0),
+      revalidateOnFocus: true,
+      shouldRetryOnError: false,
+    },
+  );
+  const run = data?.run;
+  useEffect(() => {
+    if (data) props.onRunChange?.(data.run);
+  }, [data, props.onRunChange]);
+  useEffect(() => {
+    setText("");
+    setStopping(false);
+    resultSignature.current = "";
+  }, [props.chatId, props.projectId]);
+  useEffect(() => {
+    if (!props.enabled) return;
+    const handler = (event: Event) => {
+      const update = (event as CustomEvent<AgentRunView>).detail;
+      if (update?.chatId === props.chatId && update?.projectId === props.projectId)
+        void mutate({ run: update }, false);
+    };
+    window.addEventListener("canvas-agent-run:update", handler);
+    return () => window.removeEventListener("canvas-agent-run:update", handler);
+  }, [props.enabled, props.chatId, props.projectId, mutate]);
+  useEffect(() => {
+    if (!run?.resultNodeIds.length) return;
+    const signature = `${run.id}:${run.resultNodeIds.join(",")}:${run.status}`;
+    if (signature === resultSignature.current) return;
+    resultSignature.current = signature;
+    props.onResults(run.projectId, run.resultNodeIds);
+  }, [run, props.onResults]);
+  const control = useCallback(
+    async (action: "steer" | "cancel") => {
+      if (!run || sending) return;
+      const scope = activeScope.current;
+      setSending(true);
+      try {
+        const response = await fetch("/api/canvas/agent-runs", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            action,
+            chatId: props.chatId,
+            projectId: props.projectId,
+            runId: run.id,
+            ...(action === "steer" ? { inputId: crypto.randomUUID(), text: text.trim() } : {}),
+          }),
+        });
+        const result = await response.json();
+        if (!response.ok) throw new Error(result.error || "操作失败，请重试");
+        if (scope !== activeScope.current) return;
+        await mutate(result, false);
+        if (action === "steer") {
+          setText("");
+          toast.message("补充要求已收到，将在下一步应用");
+        } else {
+          setStopping(true);
+          toast.message("将停止后续步骤，已发出的生成请求会先收好结果");
+        }
+      } catch (error) {
+        toast.error(error instanceof Error ? error.message : "操作失败");
+      } finally {
+        if (scope === activeScope.current) setSending(false);
+      }
+    },
+    [run, sending, props.chatId, props.projectId, text, mutate],
+  );
+  if (!props.enabled || !run || run.status === "completed") return null;
+  const running = run.status === "running";
+  const stopPending = stopping || run.cancelRequested;
+  return (
+    <div
+      className="mb-2 rounded-2xl border border-zinc-200 bg-zinc-50 px-3 py-2.5 text-xs dark:border-zinc-800 dark:bg-zinc-900"
+      data-testid="canvas-agent-run"
+    >
+      <div
+        className="flex items-center gap-2 text-zinc-700 dark:text-zinc-200"
+        role="status"
+        aria-live="polite"
+      >
+        {running ? <Loader2 className="h-3.5 w-3.5 shrink-0 animate-spin" /> : null}
+        <span className="min-w-0 flex-1">
+          {stopPending && running ? "正在停止后续步骤，等待当前生成结果" : run.message}
+        </span>
+        {running ? (
+          <button
+            type="button"
+            onClick={() => void control("cancel")}
+            disabled={sending || stopPending}
+            className="rounded-lg p-1.5 hover:bg-zinc-200 disabled:opacity-40 dark:hover:bg-zinc-800"
+            title="停止后续步骤"
+            aria-label="停止后续步骤"
+          >
+            <Square className="h-3.5 w-3.5" />
+          </button>
+        ) : run.resumable ? (
+          <button
+            type="button"
+            onClick={() => props.onResume(run.id)}
+            disabled={props.busy}
+            className="flex shrink-0 items-center gap-1 rounded-lg px-2 py-1.5 hover:bg-zinc-200 disabled:opacity-40 dark:hover:bg-zinc-800"
+          >
+            <RotateCcw className="h-3.5 w-3.5" />
+            继续任务
+          </button>
+        ) : null}
+      </div>
+      <div className="mt-1 text-[11px] text-zinc-500">
+        {run.runtime?.engine === "zcode" ? <span className="mr-2">ZCode · {!run.runtime.sandbox ? "尚未启动沙箱" : run.runtime.state === "starting" ? "正在启动独立沙箱" : run.runtime.state === "running" ? "独立沙箱运行中" : "沙箱已停止"}</span> : null}
+        已处理 {run.steps} 轮 · {run.toolCount} 个工具步骤
+      </div>
+      {run.inputs.slice(-2).map((input) => (
+        <div key={input.id} className="mt-1 truncate text-zinc-500" title={input.text}>
+          {input.applied ? "已应用" : "待应用"}：{input.text}
+        </div>
+      ))}
+      {running && !stopPending ? (
+        <form
+          className="mt-2 flex items-center gap-2"
+          onSubmit={(event) => {
+            event.preventDefault();
+            if (text.trim()) void control("steer");
+          }}
+        >
+          <input
+            value={text}
+            onChange={(event) => setText(event.target.value)}
+            maxLength={2000}
+            disabled={sending}
+            placeholder="补充要求，将从下一步生效"
+            aria-label="补充任务要求"
+            className="min-w-0 flex-1 rounded-xl border border-zinc-200 bg-white px-3 py-2 outline-none focus:border-zinc-400 dark:border-zinc-700 dark:bg-zinc-950"
+          />
+          <button
+            type="submit"
+            disabled={sending || !text.trim()}
+            title="发送补充要求"
+            aria-label="发送补充要求"
+            className="rounded-full bg-zinc-200 p-2 text-zinc-700 disabled:opacity-40 dark:bg-zinc-800 dark:text-zinc-100"
+          >
+            <ArrowUp className="h-3.5 w-3.5" />
+          </button>
+        </form>
+      ) : null}
+    </div>
+  );
+}

components/canvas/chat-panel/canvas-agent-ui-listener.tsx

@@ -0,0 +1,78 @@
+"use client";
+import { useEffect, useRef } from "react";
+import { toast } from "sonner";
+import { getCanvasAgentAccessManifest } from "@/lib/ai/canvas-agent-runtime/capability-access";
+import {
+  canvasAgentUiCommandSchema,
+  CANVAS_AGENT_UI_COMMAND_EVENT,
+  type CanvasAgentUiCommand,
+} from "@/lib/ai/canvas-agent-runtime/ui-command";
+import { useCanvasStore } from "@/store/canvas";
+
+export function CanvasAgentUiListener(props: {
+  projectId: string;
+  workspace: "canvas" | "video";
+  onVideoAction?: (command: CanvasAgentUiCommand) => void | Promise<void>;
+}) {
+  const latest = useRef(props);
+  latest.current = props;
+  const seen = useRef(new Set<string>());
+  useEffect(() => {
+    const handler = async (event: Event) => {
+      const parsed = canvasAgentUiCommandSchema.safeParse((event as CustomEvent).detail);
+      if (!parsed.success) return;
+      const command = parsed.data,
+        current = latest.current;
+      if (
+        command.projectId !== current.projectId ||
+        command.workspace !== current.workspace ||
+        seen.current.has(command.requestId)
+      )
+        return;
+      seen.current.add(command.requestId);
+      try {
+        if (current.workspace === "video") {
+          await current.onVideoAction?.(command);
+          return;
+        }
+        const feature = getCanvasAgentAccessManifest().find(
+          (item) => item.id === command.featureId && item.workspace === "canvas",
+        );
+        if (!feature || !feature.id.startsWith("canvas.ui.")) throw new Error("这个界面入口不存在");
+        const key = feature.id.slice("canvas.ui.".length);
+        if (/chatSend|chatStartGeneration/.test(key)) {
+          toast.message("已定位对话提交入口，请由你确认并发送；Agent 不会伪造下一条用户消息");
+          return;
+        }
+        const state = useCanvasStore.getState();
+        if (state.projectId !== current.projectId) return;
+        if (command.nodeIds.length)
+          state.selectNodes(
+            command.nodeIds.filter((id) => state.nodes.some((node) => node.id === id)),
+          );
+        await new Promise<void>((resolve) =>
+          requestAnimationFrame(() => requestAnimationFrame(() => resolve())),
+        );
+        const element = Array.from(
+          document.querySelectorAll<HTMLElement>("[data-canvas-feature-key]"),
+        ).find((item) => item.dataset.canvasFeatureKey === key && item.getClientRects().length);
+        const button = element?.closest<HTMLElement>("button,[role=button],a");
+        if (!button || button.hasAttribute("disabled"))
+          throw new Error(
+            "此入口当前未显示或不可用；请切换相应工作区。工具授权不会恢复被隐藏的按钮。",
+          );
+        if (
+          /Delete|Generate|Confirm|Cancel|SaveText|realtimeSend/.test(key) &&
+          !window.confirm(`Agent 请求操作「${feature.title}」。确认在当前画布执行？`)
+        )
+          return;
+        button.click();
+      } catch (error) {
+        toast.error(error instanceof Error ? error.message : "无法打开画布入口");
+      }
+    };
+    window.addEventListener(CANVAS_AGENT_UI_COMMAND_EVENT, handler);
+    return () => window.removeEventListener(CANVAS_AGENT_UI_COMMAND_EVENT, handler);
+  }, []);
+  return null;
+}

components/canvas/chat-panel/canvas-chat-session.ts

@@ -1,4 +1,5 @@
 import type { Attachment, ChatMessage } from "@/lib/types";
+import { isOpenClawChatFileAttachment } from "@/lib/openclaw-chat/media-attachments";
 
 export const SESSION_TITLE_MAX_LEN = 18;
 export const MAX_CHAT_TEXT_PART_LENGTH = 2000;
@@ -43,6 +44,24 @@ export interface PickedObjectAttachment extends Attachment {
   };
 }
 
+export interface CanvasChatSessionRecord {
+  id: string;
+  title: string;
+  mode: string;
+  createdAt: number;
+  updatedAt: number;
+  clawdSkillTagId?: string | null;
+  clawdSkillTagPromptApplied?: boolean;
+}
+
+export interface ClawdChatHistoryRecord {
+  id: string;
+  title: string;
+  createdAt: string | Date;
+  updatedAt: string | Date;
+  messageCount: number;
+}
+
 export function toRawCanvasChatId(value: string): string {
   return value.startsWith("canvas-") ? value.replace("canvas-", "") : value;
 }
@@ -80,6 +99,9 @@ export function normalizeChatMediaType(value?: string | null): string {
   if (ALLOWED_CHAT_MEDIA_TYPES.has(normalized)) {
     return normalized;
   }
+  if (isOpenClawChatFileAttachment("", normalized)) {
+    return normalized;
+  }
   return "image/jpeg";
 }
 
@@ -113,6 +135,76 @@ export function getSessionRootStorageKey(canvasId: string, scope: "canvas" | "ag
   return `canvas-chat-root:${scope}:${canvasId}`;
 }
 
+function parseHistoryTimestamp(value: string | Date) {
+  const timestamp = value instanceof Date ? value.getTime() : Date.parse(value);
+  return Number.isFinite(timestamp) ? timestamp : 0;
+}
+
+export function mergeClawdHistoryIntoCanvasSessions<
+  T extends CanvasChatSessionRecord,
+>(sessions: T[], history: ClawdChatHistoryRecord[]): T[] {
+  if (history.length === 0) return sessions;
+
+  const nextSessions = [...sessions];
+  const indexById = new Map(
+    nextSessions.map((session, index) => [session.id, index])
+  );
+  let changed = false;
+
+  for (const item of history) {
+    const rawId = toRawCanvasChatId(String(item.id || "").trim());
+    if (!isValidChatUuid(rawId)) continue;
+    const id = `canvas-${rawId}`;
+    const existingIndex = indexById.get(id);
+    const historyCreatedAt = parseHistoryTimestamp(item.createdAt);
+    const historyUpdatedAt =
+      parseHistoryTimestamp(item.updatedAt) || historyCreatedAt;
+    const historyTitle = String(item.title || "").trim();
+
+    if (existingIndex === undefined) {
+      const created = {
+        id,
+        title: historyTitle || "Claw 对话",
+        mode: "clawd",
+        createdAt: historyCreatedAt || historyUpdatedAt,
+        updatedAt: historyUpdatedAt || historyCreatedAt,
+      } as T;
+      indexById.set(id, nextSessions.length);
+      nextSessions.push(created);
+      changed = true;
+      continue;
+    }
+
+    const existing = nextSessions[existingIndex];
+    const nextTitle = historyTitle || existing.title || "Claw 对话";
+    const nextCreatedAt =
+      Number(existing.createdAt) || historyCreatedAt || historyUpdatedAt;
+    const nextUpdatedAt = Math.max(
+      Number(existing.updatedAt) || 0,
+      historyUpdatedAt
+    );
+    if (
+      existing.title === nextTitle &&
+      existing.mode === "clawd" &&
+      existing.createdAt === nextCreatedAt &&
+      existing.updatedAt === nextUpdatedAt
+    ) {
+      continue;
+    }
+    nextSessions[existingIndex] = {
+      ...existing,
+      title: nextTitle,
+      mode: "clawd",
+      createdAt: nextCreatedAt,
+      updatedAt: nextUpdatedAt,
+    };
+    changed = true;
+  }
+
+  if (!changed) return sessions;
+  return nextSessions.sort((a, b) => b.updatedAt - a.updatedAt);
+}
+
 export function extractUserTextPrompt(message: ChatMessage): string {
   const parts = (message as any)?.parts || [];
   const textFromParts = parts

components/canvas/chat-panel/canvas-image-result-sync.ts

@@ -0,0 +1,70 @@
+import { normalizeImageIdentityUrl } from "./canvas-chat-media";
+import type { ArchivedImageUrlMap } from "@/lib/storage/image-archive-urls";
+
+type ImageResultNode = {
+  type: string;
+  data?: unknown;
+};
+
+function imageUrls(node: ImageResultNode): string[] {
+  if (node.type !== "image") return [];
+  const data = node.data as { src?: string; metadata?: { sourceImageKey?: string } } | undefined;
+  return [data?.src, data?.metadata?.sourceImageKey].filter(
+    (url): url is string => typeof url === "string" && Boolean(url.trim()),
+  );
+}
+
+export function getCanvasImageResultUrlKeys(
+  nodes: readonly ImageResultNode[],
+  aliases: ArchivedImageUrlMap = {},
+) {
+  const keys = new Set<string>();
+  for (const node of nodes) {
+    for (const url of imageUrls(node)) {
+      keys.add(normalizeImageIdentityUrl(url));
+      if (aliases[url]) keys.add(normalizeImageIdentityUrl(aliases[url]));
+    }
+  }
+  keys.delete("");
+  return keys;
+}
+
+// A history refresh may already contain bucket URLs while this tab still shows
+// provider previews. Resolve aliases only for an existing result of this message;
+// a new generation never waits for storage before appearing on the canvas.
+export async function resolveCanvasImageResultAliases(params: {
+  nodes: readonly ImageResultNode[];
+  messageId?: string;
+  imageUrls: string[];
+  resolveAliases: (urls: string[]) => Promise<ArchivedImageUrlMap>;
+}): Promise<ArchivedImageUrlMap> {
+  const keys = getCanvasImageResultUrlKeys(params.nodes);
+  if (!params.messageId || params.imageUrls.every((url) => keys.has(normalizeImageIdentityUrl(url)))) {
+    return {};
+  }
+  const urls = [...new Set(params.nodes.flatMap((node) => {
+    const data = node.data as { metadata?: { sourceMessageId?: string } } | undefined;
+    return data?.metadata?.sourceMessageId === params.messageId ? imageUrls(node) : [];
+  }))].filter((url) => /^https?:\/\//i.test(url));
+  if (!urls.length) return {};
+  const aliases: ArchivedImageUrlMap = {};
+  for (let index = 0; index < urls.length; index += 100) {
+    Object.assign(aliases, await params.resolveAliases(urls.slice(index, index + 100)));
+  }
+  return aliases;
+}
+
+// Call synchronously immediately before changing the store, after all image
+// loading/network awaits. Both stream and history writers share this check.
+export function commitCanvasImageResultIfMissing<T>(params: {
+  getNodes: () => readonly ImageResultNode[];
+  url: string;
+  aliases: ArchivedImageUrlMap;
+  commit: () => T;
+}): T | undefined {
+  const key = normalizeImageIdentityUrl(params.url);
+  if (!key || getCanvasImageResultUrlKeys(params.getNodes(), params.aliases).has(key)) {
+    return undefined;
+  }
+  return params.commit();
+}

components/canvas/chat-panel/canvas-upload-helpers.ts

@@ -1,6 +1,10 @@
 import type { PickedObjectAttachment } from "@/components/canvas/chat-panel/canvas-chat-session";
+import {
+  IMAGE_UPLOAD_MAX_BYTES,
+  IMAGE_UPLOAD_TOO_LARGE_MESSAGE,
+} from "@/lib/image-upload-limits";
 
-export const CANVAS_IMAGE_UPLOAD_MAX_BYTES = 50 * 1024 * 1024;
+export const CANVAS_IMAGE_UPLOAD_MAX_BYTES = IMAGE_UPLOAD_MAX_BYTES;
 
 export type CanvasUploadFileLike = {
   name: string;
@@ -18,7 +22,7 @@ export function validateCanvasImageUploadFile(file?: CanvasUploadFileLike | null
     return { ok: false, message: "请上传图片文件" };
   }
   if (file.size > CANVAS_IMAGE_UPLOAD_MAX_BYTES) {
-    return { ok: false, message: "图片大小不能超过 50MB" };
+    return { ok: false, message: IMAGE_UPLOAD_TOO_LARGE_MESSAGE };
   }
   return { ok: true };
 }

components/canvas/chat-panel/video-canvas-agent-panel.tsx

@@ -0,0 +1,324 @@
+"use client";
+
+import { useChat } from "@ai-sdk/react";
+import { DefaultChatTransport, type UIMessage } from "ai";
+import { ArrowUp, MessageSquare, X } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
+import { CanvasAgentRunPanel } from "./canvas-agent-run-panel";
+import {
+  videoAgentSettingsSchema,
+  type VideoAgentSettings,
+} from "@/lib/ai/canvas-agent-runtime/video-protocol";
+
+type ModelOption = { id: string; displayName: string };
+export function VideoCanvasAgentPanel(props: {
+  projectId: string;
+  selectedNodeIds: string[];
+  videoModels: ModelOption[];
+  imageModels: ModelOption[];
+  beforeSend: () => Promise<void>;
+  onResults: (projectId: string, nodeIds: string[]) => void;
+  onClose: () => void;
+}) {
+  const [input, setInput] = useState("");
+  const [settings, setSettings] = useState<VideoAgentSettings>(() =>
+    videoAgentSettingsSchema.parse({}),
+  );
+  const [preparing, setPreparing] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [backgroundRunning, setBackgroundRunning] = useState(false);
+  const latest = useRef({ props, settings });
+  latest.current = { props, settings };
+  const resumeRef = useRef<string | undefined>(undefined);
+  const mounted = useRef(true);
+  const resultIds = useRef<string[]>([]);
+  const restoredRunId = useRef("");
+  const { messages, setMessages, sendMessage, status } = useChat({
+    id: `video-agent-${props.projectId}`,
+    generateId: () => crypto.randomUUID(),
+    transport: new DefaultChatTransport({
+      api: "/api/canvas/agent-chat",
+      prepareSendMessagesRequest: ({ messages }) => {
+        const current = latest.current;
+        const resumeRunId = resumeRef.current;
+        resumeRef.current = undefined;
+        return {
+          body: {
+            id: current.props.projectId,
+            message: messages[messages.length - 1],
+            selectedChatModel: "agent",
+            selectedVisibilityType: "private",
+            composerMode: "agent",
+            workspaceVariant: "video",
+            videoAgentSettings: current.settings,
+            resumeRunId,
+            contextPayload: {
+              source: "canvas",
+              projectId: current.props.projectId,
+              selectedNodeIds: current.props.selectedNodeIds,
+            },
+          },
+        };
+      },
+    }),
+    onData: (part) => {
+      if (part.type === "data-videoCanvasMutation") window.dispatchEvent(new CustomEvent("video-canvas-agent-mutation", { detail: part.data }));
+      if (part.type === "data-canvasAgentUiCommand") window.dispatchEvent(new CustomEvent("canvas-agent-ui-command", { detail: part.data }));
+      if (part.type === "data-canvasAgentRun")
+        window.dispatchEvent(new CustomEvent("canvas-agent-run:update", { detail: part.data }));
+    },
+    onError: (error) => toast.error(error.message || "视频任务启动失败，请重试"),
+  });
+  useEffect(() => {
+    mounted.current = true;
+    const controller = new AbortController();
+    void fetch(`/api/canvas/video-agent?projectId=${props.projectId}`, {
+      cache: "no-store",
+      signal: controller.signal,
+    })
+      .then(async (response) => {
+        const data = await response.json();
+        if (!response.ok) throw new Error(data.error || "读取视频对话失败");
+        if (!controller.signal.aborted) setMessages(data.messages as UIMessage[]);
+      })
+      .catch((error) => {
+        if (!controller.signal.aborted) toast.error(error.message);
+      })
+      .finally(() => {
+        if (!controller.signal.aborted) setLoading(false);
+      });
+    return () => {
+      mounted.current = false;
+      controller.abort();
+    };
+  }, [props.projectId, setMessages]);
+  const busy = backgroundRunning || preparing || status === "submitted" || status === "streaming";
+  const submit = useCallback(
+    async (resumeRunId?: string) => {
+      if (busy || loading) return;
+      const text =
+        input.trim() ||
+        (resumeRunId ? "请继续尚未完成的视频创作步骤，保留已完成的脚本、关键帧和视频。" : "");
+      if (!text) return;
+      setPreparing(true);
+      try {
+        await latest.current.props.beforeSend();
+        if (!mounted.current) return;
+        resumeRef.current = resumeRunId;
+        setInput("");
+        await sendMessage({ text });
+      } catch (error) {
+        toast.error(error instanceof Error ? error.message : "视频任务启动失败");
+      } finally {
+        resumeRef.current = undefined;
+        if (mounted.current) setPreparing(false);
+      }
+    },
+    [busy, loading, input, sendMessage],
+  );
+  const onRunChange = useCallback(
+    (run: import("@/lib/ai/canvas-agent-runtime/protocol").AgentRunView | null) => {
+      resultIds.current = run?.resultNodeIds || [];
+      if (run?.videoSettings && restoredRunId.current !== run.id) {
+        restoredRunId.current = run.id;
+        setSettings(run.videoSettings);
+      }
+      setBackgroundRunning(run?.status === "running");
+    },
+    [],
+  );
+  const onResults = useCallback(
+    (projectId: string, ids: string[]) => latest.current.props.onResults(projectId, ids),
+    [],
+  );
+  useEffect(() => {
+    const timer = setInterval(() => {
+      if (resultIds.current.length)
+        latest.current.props.onResults(latest.current.props.projectId, resultIds.current);
+    }, 10_000);
+    return () => clearInterval(timer);
+  }, []);
+  return (
+    <aside
+      className="dark absolute bottom-3 right-3 top-[72px] z-40 flex w-[390px] max-w-[calc(100vw-24px)] flex-col overflow-hidden rounded-2xl border border-white/10 bg-[#202020] text-zinc-100 shadow-2xl"
+      data-canvas-overlay="true"
+      data-testid="video-agent-panel"
+      aria-label="视频创作 Agent"
+    >
+      <div className="flex items-center gap-2 border-b border-white/10 px-4 py-3">
+        <MessageSquare className="h-4 w-4" />
+        <span className="flex-1 font-medium">视频创作 Agent</span>
+        <button
+          type="button"
+          onClick={props.onClose}
+          aria-label="收起视频 Agent"
+          className="rounded-lg p-1 hover:bg-white/10"
+        >
+          <X className="h-4 w-4" />
+        </button>
+      </div>
+      <div className="flex-1 space-y-4 overflow-y-auto px-4 py-4" aria-live="polite">
+        {loading ? (
+          <p className="text-sm text-zinc-400">正在读取对话…</p>
+        ) : messages.length === 0 ? (
+          <p className="text-sm leading-7 text-zinc-400">
+            选择画布素材，告诉我你想制作的视频。我可以分析参考、编写分镜、生成关键帧并继续生成视频。
+          </p>
+        ) : null}
+        {messages.map((message) => (
+          <div
+            key={message.id}
+            className={
+              message.role === "user"
+                ? "ml-5 whitespace-pre-wrap rounded-2xl bg-white/10 px-3 py-2 text-sm leading-6"
+                : "whitespace-pre-wrap text-sm leading-6 text-zinc-300"
+            }
+          >
+            {message.parts
+              .filter((part) => part.type === "text")
+              .map((part, i) => (
+                <span key={`${message.id}-${i}`}>{part.type === "text" ? part.text : ""}</span>
+              ))}
+          </div>
+        ))}
+      </div>
+      <div className="border-t border-white/10 p-3">
+        <CanvasAgentRunPanel
+          enabled={!loading}
+          chatId={props.projectId}
+          projectId={props.projectId}
+          busy={busy}
+          onResume={(id) => void submit(id)}
+          onResults={onResults}
+          onRunChange={onRunChange}
+        />
+        <div className="mb-2 grid grid-cols-2 gap-2 text-xs">
+          <select
+            aria-label="视频模型"
+            disabled={busy}
+            value={settings.modelRef || ""}
+            onChange={(e) => setSettings({ ...settings, modelRef: e.target.value || undefined })}
+            className="min-w-0 rounded-lg border border-white/10 bg-zinc-800 p-2"
+          >
+            <option value="">默认视频模型</option>
+            {props.videoModels.map((m) => (
+              <option key={m.id} value={m.id}>
+                {m.displayName}
+              </option>
+            ))}
+          </select>
+          <select
+            aria-label="关键帧模型"
+            disabled={busy}
+            value={settings.imageModelRef || ""}
+            onChange={(e) =>
+              setSettings({ ...settings, imageModelRef: e.target.value || undefined })
+            }
+            className="min-w-0 rounded-lg border border-white/10 bg-zinc-800 p-2"
+          >
+            <option value="">默认关键帧模型</option>
+            {props.imageModels.map((m) => (
+              <option key={m.id} value={m.id}>
+                {m.displayName}
+              </option>
+            ))}
+          </select>
+          <select
+            aria-label="视频模式"
+            disabled={busy}
+            value={settings.mode}
+            onChange={(e) =>
+              setSettings({ ...settings, mode: e.target.value as VideoAgentSettings["mode"] })
+            }
+            className="rounded-lg border border-white/10 bg-zinc-800 p-2"
+          >
+            {[
+              ["auto", "按参考图匹配模式"],
+              ["text-to-video", "文生视频"],
+              ["first-frame", "首帧视频"],
+              ["first-last-frame", "首尾帧视频"],
+              ["reference-images", "参考图视频"],
+            ].map(([value, label]) => (
+              <option key={value} value={value}>
+                {label}
+              </option>
+            ))}
+          </select>
+          <div className="flex items-center gap-1 rounded-lg border border-white/10 bg-zinc-800 px-2">
+            <input
+              aria-label="视频时长（秒）"
+              type="number"
+              min={1}
+              max={120}
+              disabled={busy}
+              value={settings.duration}
+              onChange={(e) => setSettings({ ...settings, duration: Number(e.target.value) })}
+              className="w-12 min-w-0 bg-transparent py-2"
+            />
+            <span>秒</span>
+            <select
+              aria-label="视频比例"
+              disabled={busy}
+              value={settings.ratio}
+              onChange={(e) =>
+                setSettings({ ...settings, ratio: e.target.value as VideoAgentSettings["ratio"] })
+              }
+              className="min-w-0 flex-1 bg-zinc-800"
+            >
+              {["16:9", "9:16", "1:1", "4:3", "3:4", "21:9"].map((v) => (
+                <option key={v}>{v}</option>
+              ))}
+            </select>
+          </div>
+          <select
+            aria-label="视频分辨率"
+            disabled={busy}
+            value={settings.resolution}
+            onChange={(e) =>
+              setSettings({
+                ...settings,
+                resolution: e.target.value as VideoAgentSettings["resolution"],
+              })
+            }
+            className="rounded-lg border border-white/10 bg-zinc-800 p-2"
+          >
+            {["480p", "720p", "1080p"].map((v) => (
+              <option key={v}>{v}</option>
+            ))}
+          </select>
+        </div>
+        <form
+          onSubmit={(event) => {
+            event.preventDefault();
+            void submit();
+          }}
+          className="rounded-2xl border border-white/10 bg-[#151515] p-3"
+        >
+          <textarea
+            aria-label="视频创作要求"
+            value={input}
+            onChange={(event) => setInput(event.target.value)}
+            maxLength={2000}
+            rows={3}
+            placeholder="例如：先分析选中素材，写分镜，再生成一条5秒商品展示视频"
+            className="w-full resize-none bg-transparent text-sm outline-none placeholder:text-zinc-500"
+          />
+          <div className="mt-2 flex items-center justify-between">
+            <span className="text-xs text-zinc-500">
+              已选择 {props.selectedNodeIds.length} 个素材
+            </span>
+            <button
+              type="submit"
+              aria-label="开始视频任务"
+              disabled={busy || loading || !input.trim()}
+              className="rounded-full bg-zinc-100 p-2 text-zinc-900 disabled:opacity-30"
+            >
+              <ArrowUp className="h-4 w-4" />
+            </button>
+          </div>
+        </form>
+      </div>
+    </aside>
+  );
+}

components/canvas/model3d/Model3DViewer.tsx

@@ -53,6 +53,8 @@ export type Model3DViewerSettings = {
 
 type Model3DViewerProps = {
   modelUrl?: string | null;
+  modelFormat?: "glb" | "gltf" | null;
+  autoFitModel?: boolean;
   previewImageUrl?: string | null;
   emptyStateTitle?: string;
   settings: Model3DViewerSettings;
@@ -323,9 +325,14 @@ function cloneSceneWithIndependentMaterials(scene: Object3D) {
 
 function resolveSceneGroundY(
   scene: Object3D,
-  modelRotation?: [number, number, number]
+  modelRotation?: [number, number, number],
+  fitTransform?: { position: [number, number, number]; scale: number }
 ) {
   const probeScene = scene.clone(true);
+  if (fitTransform) {
+    probeScene.position.set(...fitTransform.position);
+    probeScene.scale.setScalar(fitTransform.scale);
+  }
   const probeGroup = new THREE.Group();
   if (modelRotation) {
     probeGroup.rotation.set(...modelRotation);
@@ -338,6 +345,26 @@ function resolveSceneGroundY(
   return bounds.min.y;
 }
 
+function getModelFitTransform(scene: Object3D) {
+  const bounds = new THREE.Box3().setFromObject(scene);
+  if (bounds.isEmpty()) return { position: [0, 0, 0] as [number, number, number], scale: 1 };
+  const size = bounds.getSize(new THREE.Vector3());
+  const center = bounds.getCenter(new THREE.Vector3());
+  const largestDimension = Math.max(size.x, size.y, size.z);
+  if (!Number.isFinite(largestDimension) || largestDimension <= 0) {
+    return { position: [0, 0, 0] as [number, number, number], scale: 1 };
+  }
+  const scale = 2 / largestDimension;
+  return {
+    position: [
+      -center.x * scale,
+      -center.y * scale,
+      -center.z * scale,
+    ] as [number, number, number],
+    scale,
+  };
+}
+
 function ModelScene({
   url,
   settings,
@@ -346,6 +373,7 @@ function ModelScene({
   onLayersChange,
   onStatsChange,
   onGroundYChange,
+  autoFitModel,
 }: {
   url: string;
   settings: Model3DViewerSettings;
@@ -354,6 +382,7 @@ function ModelScene({
   onLayersChange?: (layers: Model3DLayer[]) => void;
   onStatsChange?: (stats: Model3DStats) => void;
   onGroundYChange?: (groundY: number) => void;
+  autoFitModel?: boolean;
 }) {
   const { gl } = useThree();
   const ktx2Loader = useMemo(() => {
@@ -382,11 +411,18 @@ function ModelScene({
     [model.scene]
   );
   const meta = useMemo(() => collectSceneMeta(scene), [scene]);
+  const fitTransform = useMemo(
+    () =>
+      autoFitModel
+        ? getModelFitTransform(scene)
+        : { position: [0, 0, 0] as [number, number, number], scale: 1 },
+    [autoFitModel, scene]
+  );
   const modelRotationKey = modelRotation?.join("|") || "";
   const groundY = useMemo(
-    () => resolveSceneGroundY(scene, modelRotation),
+    () => resolveSceneGroundY(scene, modelRotation, fitTransform),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [scene, modelRotationKey]
+    [scene, modelRotationKey, fitTransform]
   );
 
   useEffect(() => {
@@ -437,7 +473,11 @@ function ModelScene({
 
   return (
     <group rotation={modelRotation || [0, 0, 0]}>
-      <primitive object={scene} scale={1} />
+      <primitive
+        object={scene}
+        position={fitTransform.position}
+        scale={fitTransform.scale}
+      />
     </group>
   );
 }
@@ -679,6 +719,8 @@ function EmptyState({
 
 export function Model3DViewer({
   modelUrl,
+  modelFormat,
+  autoFitModel = false,
   previewImageUrl,
   emptyStateTitle = "准备生成 3D 资产",
   settings,
@@ -715,7 +757,7 @@ export function Model3DViewer({
     );
   }
 
-  if (!isGlbOrGltf(modelUrl)) {
+  if (!isGlbOrGltf(modelUrl) && modelFormat !== "glb" && modelFormat !== "gltf") {
     return (
       <div className="flex h-full w-full flex-col items-center justify-center gap-3 bg-zinc-950 p-4 text-zinc-400">
         <AlertCircle className="h-8 w-8 text-yellow-500/50" />
@@ -737,9 +779,17 @@ export function Model3DViewer({
   return (
     <ViewerErrorBoundary
       fallback={
-        <div className="flex h-full w-full flex-col items-center justify-center gap-3 bg-zinc-950 p-4 text-zinc-400">
-          <AlertCircle className="h-8 w-8 text-red-500/50" />
-          <p className="text-sm">3D 预览加载失败，请尝试在新窗口打开</p>
+        <div className="relative flex h-full w-full flex-col items-center justify-center gap-3 overflow-hidden bg-zinc-950 p-4 text-zinc-300">
+          {previewImageUrl ? (
+            <img
+              alt="3D 模型静态预览"
+              className="absolute inset-0 h-full w-full object-contain opacity-80"
+              src={previewImageUrl}
+            />
+          ) : null}
+          <div className="relative flex max-w-xs flex-col items-center gap-3 rounded-lg bg-black/70 px-4 py-3 text-center backdrop-blur-sm">
+            <AlertCircle className="h-7 w-7 text-amber-300" />
+            <p className="text-sm">3D 预览加载失败，已切换为静态预览</p>
           <Button
             asChild
             className="gap-2 border-white/10 text-zinc-300 hover:bg-white/5"
@@ -750,6 +800,7 @@ export function Model3DViewer({
               打开3D文件
             </a>
           </Button>
+          </div>
         </div>
       }
     >
@@ -810,6 +861,7 @@ export function Model3DViewer({
           >
             <group position={[0, 0, 0]}>
               <ModelScene
+                autoFitModel={autoFitModel}
                 layerVisibility={layerVisibility}
                 modelRotation={modelRotation}
                 onGroundYChange={handleGroundYChange}

components/canvas/nodes/ImageNode.tsx

@@ -13,11 +13,13 @@ import {
   Download,
   Eraser,
   Expand,
+  FileImage,
   FlipHorizontal2,
   FlipVertical2,
   Globe2,
   ImagePlus,
   Layers,
+  LayoutTemplate,
   Loader2,
   Link2,
   Maximize2,
@@ -40,15 +42,21 @@ import {
   Zap,
 } from "lucide-react";
 import type React from "react";
-import { useParams, useRouter } from "next/navigation";
+import { useParams, usePathname, useRouter } from "next/navigation";
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { toast } from "sonner";
+import {
+  IMAGE_UPLOAD_MAX_BYTES,
+  IMAGE_UPLOAD_TOO_LARGE_MESSAGE,
+} from "@/lib/image-upload-limits";
 import useSWR from "swr";
 import { AgentExecutionSnapshotDialog } from "@/components/agents/AgentExecutionSnapshotDialog";
+import { CanvasLayoutReplaceBatchDialog } from "@/components/canvas/CanvasLayoutReplaceBatchDialog";
 import { TextEditColorField } from "@/components/canvas/TextEditColorField";
 import { DetailSurfaceOverlayRenderer } from "@/components/canvas/DetailSurfaceOverlayRenderer";
 import { DetailUiDomRenderer } from "@/components/canvas/DetailUiDomRenderer";
+import { ReferenceImageToolbar } from "@/components/canvas/ReferenceImageToolbar";
 import { CanvasToolbarIcon } from "@/components/canvas/CanvasToolbarIcon";
 import { CanvasImageDownloadProgressDialog } from "@/components/canvas/CanvasImageDownloadProgressDialog";
 import {
@@ -135,6 +143,7 @@ import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
@@ -166,6 +175,7 @@ import {
 import { fetchUploadWithRetry } from "@/lib/client/upload-with-retry";
 import {
   downloadCanvasImageAsPng,
+  getCanvasImageDownloadErrorMessage,
   type CanvasImageDownloadProgress,
 } from "@/lib/client/canvas-image-download";
 import type { DetailUiDslV2Document } from "@/lib/detail-ui-dsl-v2";
@@ -648,7 +658,7 @@ const normalizeTextEditItems = (
     .filter((item): item is ImageTextEditItem => !!item);
 };
 
-const CHAT_ATTACHMENT_MAX_UPLOAD_BYTES = 30 * 1024 * 1024;
+const CHAT_ATTACHMENT_MAX_UPLOAD_BYTES = IMAGE_UPLOAD_MAX_BYTES;
 const CHAT_ATTACHMENT_MAX_DATA_URL_LENGTH = 42 * 1024 * 1024;
 const CANVAS_3D_POLL_INTERVAL_MS = 2000;
 const CANVAS_3D_MAX_POLL_ATTEMPTS = 360;
@@ -834,7 +844,7 @@ async function uploadChatAttachmentBlob(blob: Blob, displayName: string) {
   }
 
   if (uploadBlob.size > CHAT_ATTACHMENT_MAX_UPLOAD_BYTES) {
-    throw new Error("图片过大，请先压缩后再添加到对话");
+    throw new Error(IMAGE_UPLOAD_TOO_LARGE_MESSAGE);
   }
 
   const formData = new FormData();
@@ -1298,6 +1308,8 @@ export function ImageNode({
 }: ImageNodeProps) {
   const router = useRouter();
   const routeParams = useParams();
+  const pathname = usePathname();
+  const useReferenceImageToolbar = /^\/canvas\/[^/]+\/?$/.test(pathname);
   const canvasId = Array.isArray(routeParams?.id)
     ? routeParams.id[0] || ""
     : typeof routeParams?.id === "string"
@@ -1351,6 +1363,10 @@ export function ImageNode({
   );
   const imageBoxCutoutItem = getCanvasToolbarItem(canvasToolbarConfig, "imageBoxCutout");
   const imageLocalEditItem = getCanvasToolbarItem(canvasToolbarConfig, "imageLocalEdit");
+  const imageLayoutReplaceItem = getCanvasToolbarItem(
+    canvasToolbarConfig,
+    "imageLayoutReplace"
+  );
   const imageRemoveWatermarkItem = getCanvasToolbarItem(
     canvasToolbarConfig,
     "imageRemoveWatermark"
@@ -1423,6 +1439,8 @@ export function ImageNode({
   // 局部编辑是无限画布图片的核心入口：即使旧后台工具栏配置里还没有该 key，
   // 也必须默认展示，避免历史配置把新功能吞掉。
   const imageLocalEditEnabled = true;
+  // 排版替换是无限画布图片的核心 AI 入口；旧配置缺少该 key 时也保持可见。
+  const imageLayoutReplaceEnabled = true;
   const imageLayerSplitEnabledByToolbar = isCanvasToolbarItemEnabled(
     canvasToolbarConfig,
     "imageLayerSplit"
@@ -1488,6 +1506,7 @@ export function ImageNode({
     { key: "textEdit", enabled: imageTextEditEnabled },
     { key: "boxCutout", enabled: imageBoxCutoutEnabled },
     { key: "localEdit", enabled: imageLocalEditEnabled },
+    { key: "layoutReplace", enabled: imageLayoutReplaceEnabled },
     { key: "removeWatermark", enabled: imageRemoveWatermarkEnabled },
     { key: "resize", enabled: imageResizeEnabled },
     { key: "multiAngle", enabled: imageMultiAngleEnabled },
@@ -1516,13 +1535,16 @@ export function ImageNode({
       .map((action) => action.key)
   );
   const isSelectedImageActionInline = (key: SelectedImageToolbarActionKey) =>
-    selectedImageInlineActionKeys.has(key);
+    useReferenceImageToolbar
+      ? enabledSelectedImageToolbarActions.some((action) => action.key === key)
+      : selectedImageInlineActionKeys.has(key);
   const isSelectedImageActionInMore = (key: SelectedImageToolbarActionKey) =>
-    selectedImageMoreActionKeys.has(key);
+    !useReferenceImageToolbar && selectedImageMoreActionKeys.has(key);
   const hasHoverImageMorePrimaryActions =
     imageRemoveBackgroundEnabled ||
     imageRemoveWatermarkEnabled ||
     imageEnhanceEnabled ||
+    imageLayoutReplaceEnabled ||
     imageNoteEnabled ||
     hasCanvasAgentAnnotations ||
     (isLayerSplitEnabled && imageLayerSplitEnabledByToolbar) ||
@@ -1543,6 +1565,7 @@ export function ImageNode({
   const hasSelectedImageMorePrimaryActions =
     selectedImageMoreActionKeys.size > 0;
   const hasSelectedImageMoreMenu =
+    useReferenceImageToolbar ||
     hasSelectedImageMorePrimaryActions ||
     (imageNodeMoreEnabled && hasCanvasAgentAnnotations) ||
     (imageNodeMoreEnabled && imageDeleteEnabled);
@@ -1681,6 +1704,7 @@ export function ImageNode({
     DEFAULT_CANVAS_WORLD_MODEL || "world-standard"
   );
   const [regeneratePrompt, setRegeneratePrompt] = useState("");
+  const [layoutReplaceDialogOpen, setLayoutReplaceDialogOpen] = useState(false);
   const [isUploading, setIsUploading] = useState(false);
   const [annotatorOpen, setAnnotatorOpen] = useState(false);
   const [fullscreenPreviewOpen, setFullscreenPreviewOpen] = useState(false);
@@ -6053,6 +6077,21 @@ export function ImageNode({
     await detectTextItems(true);
   }, [data.src, data.textEditItems, data.textEditSource, detectTextItems]);
 
+  const handleOpenLayoutReplace = useCallback(() => {
+    setCropPanelOpen(false);
+    setCropInteraction(null);
+    setImageAdjustPanelOpen(false);
+    setFlipRotatePanelOpen(false);
+    setAnglePanelOpen(false);
+    setTextEditPanelOpen(false);
+    setNotePanelOpen(false);
+    setPromptDialogOpen(false);
+    setAiWashQuickPanelOpen(false);
+    resetBoxCutoutState();
+    resetLocalEditState();
+    setLayoutReplaceDialogOpen(true);
+  }, [resetBoxCutoutState, resetLocalEditState]);
+
   useEffect(() => {
     if (!imageNodeActionRequest || imageNodeActionRequest.nodeId !== node.id) {
       return;
@@ -6072,11 +6111,17 @@ export function ImageNode({
 
     if (imageNodeActionRequest.action === "local-edit") {
       handleEnterLocalEditMode();
+      return;
+    }
+
+    if (imageNodeActionRequest.action === "layout-replace") {
+      handleOpenLayoutReplace();
     }
   }, [
     clearImageNodeActionRequest,
     handleEnterBoxCutoutMode,
     handleEnterLocalEditMode,
+    handleOpenLayoutReplace,
     handleOpenTextEdit,
     imageNodeActionRequest,
     node.id,
@@ -6287,9 +6332,8 @@ export function ImageNode({
       return;
     }
 
-    // 验证文件大小 (50MB)
-    if (file.size > 50 * 1024 * 1024) {
-      toast.error("图片大小不能超过 50MB");
+    if (file.size > IMAGE_UPLOAD_MAX_BYTES) {
+      toast.error(IMAGE_UPLOAD_TOO_LARGE_MESSAGE);
       return;
     }
 
@@ -6386,6 +6430,7 @@ export function ImageNode({
       "prompt-regenerate": "重绘",
       "box-cutout": "框选抠图",
       "local-edit": "局部编辑",
+      "layout-replace": "排版替换",
     };
     return names[action] || action;
   };
@@ -6828,6 +6873,10 @@ export function ImageNode({
       handleEnterLocalEditMode();
       return;
     }
+    if (action === "layout-replace") {
+      handleOpenLayoutReplace();
+      return;
+    }
     if (action === "scale-adjust") {
       handleEnterLocalEditMode(undefined, "scale_adjust");
       return;
@@ -8286,17 +8335,13 @@ export function ImageNode({
         signal: controller.signal,
         onProgress: setDownloadProgress,
       });
-      toast.success("原图下载成功");
+      toast.success("原图已开始下载");
     } catch (error) {
       if (controller.signal.aborted) {
         toast.message("已取消下载");
       } else {
         console.error("下载失败:", error);
-        toast.error(
-          error instanceof Error
-            ? `${error.message}，源图可能已失效，请稍后重试或重新生成图片`
-            : "图片源文件暂时不可访问，请稍后重试或重新生成图片"
-        );
+        toast.error(getCanvasImageDownloadErrorMessage(error));
       }
     } finally {
       if (downloadAbortControllerRef.current === controller) {
@@ -9593,6 +9638,21 @@ export function ImageNode({
 	                  {imageTextEditItem.label}
 	                </DropdownMenuItem>
 	                ) : null}
+		                {imageLayoutReplaceEnabled ? (
+		                <DropdownMenuItem
+		                  onClick={() => handleAction("layout-replace")}
+		                >
+		                  <CanvasToolbarIcon
+		                    className="mr-2 h-4 w-4"
+		                    fallback={LayoutTemplate}
+		                    item={imageLayoutReplaceItem}
+		                    referenceName={useReferenceImageToolbar ? "image-layout-replace" : undefined}
+		                    referenceSize={18}
+		                  />
+		                  <span>{imageLayoutReplaceItem.label}</span>
+                    <ImageActionCreditBadge label={localEditCostShortLabel} />
+		                </DropdownMenuItem>
+		                ) : null}
 	                {imageExtendEnabled ? (
 	                <DropdownMenuItem onClick={() => handleAction("extend")}>
 	                  <CanvasToolbarIcon
@@ -9744,6 +9804,15 @@ export function ImageNode({
         prompt={regeneratePrompt}
       />
 
+      {layoutReplaceDialogOpen ? (
+        <CanvasLayoutReplaceBatchDialog
+          costLabel={localEditCostShortLabel}
+          onOpenChange={setLayoutReplaceDialogOpen}
+          open
+          primaryNode={node}
+        />
+      ) : null}
+
       <ThreeDGenerationDialog
         costLabel={
           threedGenerationDialogMode === "world"
@@ -9903,6 +9972,7 @@ export function ImageNode({
         !isEditingTitle &&
         !sceneFusionDialogOpen &&
         !promptDialogOpen &&
+        !layoutReplaceDialogOpen &&
         !threedGenerationDialogMode &&
         !notePanelOpen &&
         !boxCutoutMode &&
@@ -10130,8 +10200,12 @@ export function ImageNode({
         typeof document !== "undefined" &&
         createPortal(
           <TooltipProvider delayDuration={200}>
-            <div
-                className="fixed z-[9999] flex items-center gap-0.5 rounded-[24px] border border-white/70 bg-white/82 px-2 py-1.5 text-gray-800 shadow-[0_18px_52px_rgba(15,23,42,0.20)] backdrop-blur-2xl before:pointer-events-none before:absolute before:inset-[-10px] before:-z-10 before:rounded-[32px] before:bg-white/35 before:shadow-[0_18px_64px_rgba(15,23,42,0.18)] before:backdrop-blur-2xl before:content-[''] supports-[backdrop-filter]:bg-white/72 dark:border-white/12 dark:bg-[#08090c]/72 dark:text-zinc-100 dark:shadow-[0_24px_72px_rgba(0,0,0,0.58)] dark:before:bg-black/35 dark:before:shadow-[0_24px_80px_rgba(0,0,0,0.62)] supports-[backdrop-filter]:dark:bg-[#08090c]/62"
+            <ReferenceImageToolbar
+              referencePresentation={useReferenceImageToolbar}
+              defaultPinnedKeys={enabledSelectedImageToolbarActions.slice(0, selectedImageInlineActionCount).map((action) => action.key)}
+                className={cn("fixed z-[9999] flex items-center gap-0.5 rounded-[24px] border border-white/70 bg-white/82 px-2 py-1.5 text-gray-800 shadow-[0_18px_52px_rgba(15,23,42,0.20)] backdrop-blur-2xl before:pointer-events-none before:absolute before:inset-[-10px] before:-z-10 before:rounded-[32px] before:bg-white/35 before:shadow-[0_18px_64px_rgba(15,23,42,0.18)] before:backdrop-blur-2xl before:content-[''] supports-[backdrop-filter]:bg-white/72 dark:border-white/12 dark:bg-[#08090c]/72 dark:text-zinc-100 dark:shadow-[0_24px_72px_rgba(0,0,0,0.58)] dark:before:bg-black/35 dark:before:shadow-[0_24px_80px_rgba(0,0,0,0.62)] supports-[backdrop-filter]:dark:bg-[#08090c]/62", useReferenceImageToolbar && "lovart-image-action-bar")}
+              data-selected-image-toolbar="true"
+              data-reference-presentation={useReferenceImageToolbar ? "true" : undefined}
               onClick={(e) => e.stopPropagation()}
               onMouseDown={(e) => e.stopPropagation()}
               onPointerDown={(e) => e.stopPropagation()}
@@ -10155,7 +10229,8 @@ export function ImageNode({
 	                className="mr-1 inline-flex h-10 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-xl bg-slate-900 px-3 font-semibold text-[13px] text-white hover:bg-slate-800 hover:text-white dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-200"
 	                disabled={isProcessing || isAddingToChat}
 	                onClick={handleAddToChat}
-	                title={imageAddToChatItem.label}
+	                data-tool-key="addToChat"
+                  title={imageAddToChatItem.label}
 	                variant="ghost"
 	              >
 	                {isAddingToChat ? (
@@ -10166,6 +10241,8 @@ export function ImageNode({
 	                    className="h-4 w-4 dark:invert-0"
 	                    fallback={MessageSquarePlus}
 	                    item={imageAddToChatItem}
+                      referenceName={useReferenceImageToolbar ? "image-mark" : undefined}
+                      referenceSize={25}
 	                  />
 	                )}
 	                <span className="whitespace-nowrap">{imageAddToChatItem.label}</span>
@@ -10180,6 +10257,7 @@ export function ImageNode({
 
               {isSelectedImageActionInline("pickObject") ? (
               <Button
+                data-tool-key="pickObject"
                 className="h-10 rounded-xl px-3 font-medium text-[13px] text-slate-700 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-100 dark:hover:bg-zinc-800"
 	                disabled={isProcessing || isPickerLoading || isThisNodePicking}
 	                onClick={handleStartPicking}
@@ -10190,6 +10268,8 @@ export function ImageNode({
 	                  className="mr-1.5 h-4 w-4"
 	                  fallback={Crosshair}
 	                  item={imagePickObjectItem}
+                      referenceName={useReferenceImageToolbar ? "image-move-object" : undefined}
+                      referenceSize={25}
 	                />
 	                {imagePickObjectItem.label}
 	              </Button>
@@ -10197,6 +10277,7 @@ export function ImageNode({
 
               {isSelectedImageActionInline("enhance") ? (
               <Button
+                data-tool-key="enhance"
                 className="group relative h-10 rounded-xl px-3 font-medium text-[13px] text-slate-700 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-100 dark:hover:bg-zinc-800"
 	                disabled={isProcessing}
 	                onClick={() => handleAction("enhance")}
@@ -10207,6 +10288,8 @@ export function ImageNode({
 	                  className="mr-1.5 h-4 w-4"
 	                  fallback={Sparkles}
 	                  item={imageEnhanceItem}
+                      referenceName={useReferenceImageToolbar ? "image-upscale" : undefined}
+                      referenceSize={25}
 	                />
 	                {imageEnhanceItem.label}
                   <ImageActionCreditBadge compact label={enhanceCostShortLabel} />
@@ -10215,6 +10298,7 @@ export function ImageNode({
 
               {isSelectedImageActionInline("removeBackground") ? (
               <Button
+                data-tool-key="removeBackground"
                 className="group relative h-10 rounded-xl px-3 font-medium text-[13px] text-slate-700 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-100 dark:hover:bg-zinc-800"
 	                disabled={isProcessing}
 	                onClick={() => handleAction("rmbg")}
@@ -10225,6 +10309,8 @@ export function ImageNode({
 	                  className="mr-1.5 h-4 w-4"
 	                  fallback={Scissors}
 	                  item={imageRemoveBackgroundItem}
+                      referenceName={useReferenceImageToolbar ? "image-remove-background" : undefined}
+                      referenceSize={25}
 	                />
 	                {imageRemoveBackgroundItem.label}
                   <ImageActionCreditBadge
@@ -10236,6 +10322,7 @@ export function ImageNode({
 
               {isSelectedImageActionInline("aiWashQuick") ? (
                 <Button
+                data-tool-key="aiWashQuick"
                   className={cn(
                     "group relative h-10 rounded-xl px-3 font-medium text-[13px] transition",
                     aiWashQuickPanelOpen
@@ -10245,6 +10332,7 @@ export function ImageNode({
                   disabled={isProcessing || isSubmittingAiWashQuick}
                   onClick={() => handleAction("ai-wash")}
                   title={aiWashQuickModeLabel}
+                  data-reference-active={aiWashQuickPanelOpen ? "true" : undefined}
                   variant="ghost"
                 >
                   {isSubmittingAiWashQuick ? (
@@ -10255,6 +10343,8 @@ export function ImageNode({
                       className="mr-1.5 h-4 w-4"
                       fallback={Sparkles}
                       iconUrl={aiWashQuickConfig.modeIconUrl}
+                      referenceName={useReferenceImageToolbar ? "image-local-edit" : undefined}
+                      referenceSize={25}
                     />
                   )}
                   {aiWashQuickModeLabel}
@@ -10267,6 +10357,7 @@ export function ImageNode({
 
               {isSelectedImageActionInline("textEdit") ? (
               <Button
+                data-tool-key="textEdit"
                 className="h-10 rounded-xl px-3 font-medium text-[13px] text-slate-700 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-100 dark:hover:bg-zinc-800"
 	                disabled={isProcessing || isDetectingText || isApplyingTextEdit}
 	                onClick={() => handleAction("text-edit")}
@@ -10277,6 +10368,8 @@ export function ImageNode({
 	                  className="mr-1.5 h-4 w-4"
 	                  fallback={Type}
 	                  item={imageTextEditItem}
+                      referenceName={useReferenceImageToolbar ? "image-edit-text" : undefined}
+                      referenceSize={25}
 	                />
 	                {imageTextEditItem.label}
 	              </Button>
@@ -10284,6 +10377,7 @@ export function ImageNode({
 
               {isSelectedImageActionInline("boxCutout") ? (
               <Button
+                data-tool-key="boxCutout"
                 className="group relative h-10 rounded-xl px-3 font-medium text-[13px] text-slate-700 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-100 dark:hover:bg-zinc-800"
 	                disabled={isProcessing}
 	                onClick={() => handleAction("box-cutout")}
@@ -10294,14 +10388,17 @@ export function ImageNode({
 	                  className="mr-1.5 h-4 w-4"
 	                  fallback={Scan}
 	                  item={imageBoxCutoutItem}
+                      referenceName={useReferenceImageToolbar ? "image-vector" : undefined}
+                      referenceSize={25}
 	                />
 	                {imageBoxCutoutItem.label}
                   <ImageActionCreditBadge compact label={boxCutoutCostShortLabel} />
 	              </Button>
               ) : null}
 
-              {isSelectedImageActionInline("localEdit") ? (
+	              {isSelectedImageActionInline("localEdit") ? (
               <Button
+                data-tool-key="localEdit"
                 className="group relative h-10 rounded-xl px-3 font-medium text-[13px] text-slate-700 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-100 dark:hover:bg-zinc-800"
 	                disabled={isProcessing || isSubmittingLocalEdit}
 	                onClick={() => handleAction("local-edit")}
@@ -10312,6 +10409,8 @@ export function ImageNode({
 	                  className="mr-1.5 h-4 w-4"
 	                  fallback={Wand2}
 	                  item={imageLocalEditItem}
+                      referenceName={useReferenceImageToolbar ? "image-local-edit" : undefined}
+                      referenceSize={25}
 	                />
 	                {imageLocalEditItem.label}
 	                  <ImageActionCreditBadge
@@ -10321,8 +10420,33 @@ export function ImageNode({
 		              </Button>
 	              ) : null}
 
+              {isSelectedImageActionInline("layoutReplace") ? (
+              <Button
+                data-tool-key="layoutReplace"
+                className="group relative h-10 rounded-xl px-3 font-medium text-[13px] text-slate-700 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-100 dark:hover:bg-zinc-800"
+		                disabled={isProcessing}
+		                onClick={() => handleAction("layout-replace")}
+		                title={imageLayoutReplaceItem.label}
+		                variant="ghost"
+		              >
+		                <CanvasToolbarIcon
+		                  className="mr-1.5 h-4 w-4"
+		                  fallback={LayoutTemplate}
+		                  item={imageLayoutReplaceItem}
+		                  referenceName={useReferenceImageToolbar ? "image-layout-replace" : undefined}
+		                  referenceSize={18}
+		                />
+		                {imageLayoutReplaceItem.label}
+                  <ImageActionCreditBadge
+                    compact
+                    label={localEditCostShortLabel}
+                  />
+		              </Button>
+              ) : null}
+
 	              {isSelectedImageActionInline("removeWatermark") ? (
               <Button
+                data-tool-key="removeWatermark"
                 className="group relative h-10 rounded-xl px-3 font-medium text-[13px] text-slate-700 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-100 dark:hover:bg-zinc-800"
 	                disabled={isProcessing}
 	                onClick={() => handleAction("watermark")}
@@ -10333,6 +10457,8 @@ export function ImageNode({
 	                  className="mr-1.5 h-4 w-4"
 	                  fallback={Eraser}
 	                  item={imageRemoveWatermarkItem}
+                      referenceName={useReferenceImageToolbar ? "image-erase" : undefined}
+                      referenceSize={25}
 	                />
 	                {imageRemoveWatermarkItem.label}
                   <ImageActionCreditBadge
@@ -10344,6 +10470,7 @@ export function ImageNode({
 
               {isSelectedImageActionInline("resize") ? (
               <Button
+                data-tool-key="resize"
                 className="h-10 rounded-xl px-3 font-medium text-[13px] text-slate-700 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-100 dark:hover:bg-zinc-800"
 	                disabled={isProcessing}
 	                onClick={() => handleAction("resize")}
@@ -10361,6 +10488,7 @@ export function ImageNode({
 
               {isSelectedImageActionInline("multiAngle") ? (
               <Button
+                data-tool-key="multiAngle"
                 className="group relative h-10 rounded-xl px-3 font-medium text-[13px] text-slate-700 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-100 dark:hover:bg-zinc-800"
 	                disabled={isProcessing}
 	                onClick={() => handleAction("angle")}
@@ -10371,6 +10499,8 @@ export function ImageNode({
 	                  className="mr-1.5 h-4 w-4"
 	                  fallback={Box}
 	                  item={imageMultiAngleItem}
+                      referenceName={useReferenceImageToolbar ? "image-angle" : undefined}
+                      referenceSize={25}
 	                />
 	                {imageMultiAngleItem.label}
                   <ImageActionCreditBadge
@@ -10382,6 +10512,7 @@ export function ImageNode({
 
               {isSelectedImageActionInline("generate3dModel") ? (
                 <Button
+                data-tool-key="generate3dModel"
                   className="group relative h-10 rounded-xl px-3 font-medium text-[13px] text-slate-700 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-100 dark:hover:bg-zinc-800"
 	                  disabled={isProcessing}
 	                  onClick={() => handleAction("generate-3d-model")}
@@ -10403,6 +10534,7 @@ export function ImageNode({
 
               {isSelectedImageActionInline("generate3dWorld") ? (
                 <Button
+                data-tool-key="generate3dWorld"
                   className="group relative h-10 rounded-xl px-3 font-medium text-[13px] text-slate-700 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-100 dark:hover:bg-zinc-800"
 	                  disabled={isProcessing}
 	                  onClick={() => handleAction("generate-3d-world")}
@@ -10424,6 +10556,7 @@ export function ImageNode({
 
               {isSelectedImageActionInline("layerSplit") ? (
                 <Button
+                data-tool-key="layerSplit"
                   className="h-10 rounded-xl px-3 font-medium text-[13px] text-slate-700 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-100 dark:hover:bg-zinc-800"
 	                  disabled={isProcessing}
 	                  onClick={() => handleAction("layer-split")}
@@ -10434,6 +10567,8 @@ export function ImageNode({
 	                    className="mr-1.5 h-4 w-4"
 	                    fallback={Layers}
 	                    item={imageLayerSplitItem}
+                      referenceName={useReferenceImageToolbar ? "image-extract-layer" : undefined}
+                      referenceSize={25}
 	                  />
 	                  {imageLayerSplitItem.label}
 	                </Button>
@@ -10441,6 +10576,7 @@ export function ImageNode({
 
               {isSelectedImageActionInline("extend") ? (
               <Button
+                data-tool-key="extend"
                 className="group relative h-10 rounded-xl px-3 font-medium text-[13px] text-slate-700 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-100 dark:hover:bg-zinc-800"
 	                disabled={isProcessing}
 	                onClick={() => handleAction("extend")}
@@ -10451,6 +10587,8 @@ export function ImageNode({
 	                  className="mr-1.5 h-4 w-4"
 	                  fallback={Expand}
 	                  item={imageExtendItem}
+                      referenceName={useReferenceImageToolbar ? "image-outpaint" : undefined}
+                      referenceSize={25}
 	                />
 	                {imageExtendItem.label}
                   <ImageActionCreditBadge compact label={extendCostShortLabel} />
@@ -10459,6 +10597,7 @@ export function ImageNode({
 
               {isSelectedImageActionInline("crop") ? (
               <Button
+                data-tool-key="crop"
                 className="h-10 rounded-xl px-3 font-medium text-[13px] text-slate-700 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-100 dark:hover:bg-zinc-800"
 	                disabled={isProcessing}
 	                onClick={() => handleAction("crop")}
@@ -10469,6 +10608,8 @@ export function ImageNode({
 	                  className="mr-1.5 h-4 w-4"
 	                  fallback={Crop}
 	                  item={imageCropItem}
+                      referenceName={useReferenceImageToolbar ? "image-crop" : undefined}
+                      referenceSize={25}
 	                />
 	                {imageCropItem.label}
 	              </Button>
@@ -10476,6 +10617,7 @@ export function ImageNode({
 
               {isSelectedImageActionInline("adjust") ? (
               <Button
+                data-tool-key="adjust"
                 className="h-10 rounded-xl px-3 font-medium text-[13px] text-slate-700 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-100 dark:hover:bg-zinc-800"
 	                disabled={isProcessing}
 	                onClick={() => handleAction("adjust")}
@@ -10486,6 +10628,8 @@ export function ImageNode({
 	                  className="mr-1.5 h-4 w-4"
 	                  fallback={SlidersHorizontal}
 	                  item={imageAdjustItem}
+                      referenceName={useReferenceImageToolbar ? "image-adjust" : undefined}
+                      referenceSize={25}
 	                />
 	                {imageAdjustItem.label}
 	              </Button>
@@ -10493,6 +10637,7 @@ export function ImageNode({
 
               {isSelectedImageActionInline("flipRotate") ? (
               <Button
+                data-tool-key="flipRotate"
                 className="h-10 rounded-xl px-3 font-medium text-[13px] text-slate-700 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-100 dark:hover:bg-zinc-800"
 	                disabled={isProcessing}
 	                onClick={() => handleAction("flip-rotate")}
@@ -10503,6 +10648,8 @@ export function ImageNode({
 	                  className="mr-1.5 h-4 w-4"
 	                  fallback={FlipHorizontal2}
 	                  item={imageFlipRotateItem}
+                      referenceName={useReferenceImageToolbar ? "image-flip-rotate" : undefined}
+                      referenceSize={25}
 	                />
 	                {imageFlipRotateItem.label}
 	              </Button>
@@ -10510,6 +10657,7 @@ export function ImageNode({
 
               {isSelectedImageActionInline("promptRegenerate") ? (
               <Button
+                data-tool-key="promptRegenerate"
                 className="group relative h-10 rounded-xl px-3 font-medium text-[13px] text-slate-700 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-100 dark:hover:bg-zinc-800"
 	                disabled={isProcessing}
 	                onClick={() => handleAction("prompt-regenerate")}
@@ -10531,6 +10679,7 @@ export function ImageNode({
 
               {isSelectedImageActionInline("note") ? (
               <Button
+                data-tool-key="note"
                 className="h-10 rounded-xl px-3 font-medium text-[13px] text-slate-700 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-100 dark:hover:bg-zinc-800"
 	                disabled={isProcessing}
 	                onClick={() => handleAction("note")}
@@ -10541,6 +10690,8 @@ export function ImageNode({
 	                  className="mr-1.5 h-4 w-4"
 	                  fallback={StickyNote}
 	                  item={imageNoteItem}
+                      referenceName={useReferenceImageToolbar ? "image-mark" : undefined}
+                      referenceSize={25}
 	                />
 	                {imageNoteItem.label}
 	              </Button>
@@ -10565,12 +10716,14 @@ export function ImageNode({
 	                      className="h-4 w-4"
 	                      fallback={MoreHorizontal}
 	                      item={imageNodeMoreItem}
+                      referenceName={useReferenceImageToolbar ? "image-more" : undefined}
+                      referenceSize={25}
 	                    />
 	                  </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent
                   align="center"
-                  className="bg-white opacity-100 backdrop-blur-none dark:bg-zinc-950 dark:text-zinc-100"
+                  className={cn("bg-white opacity-100 backdrop-blur-none dark:bg-zinc-950 dark:text-zinc-100", useReferenceImageToolbar && "lovart-image-action-menu")}
                   side="bottom"
                 >
 	                  {isSelectedImageActionInMore("boxCutout") ? (
@@ -10579,6 +10732,8 @@ export function ImageNode({
 	                      className="mr-2 h-4 w-4"
 	                      fallback={Scan}
 	                      item={imageBoxCutoutItem}
+                      referenceName={useReferenceImageToolbar ? "image-vector" : undefined}
+                      referenceSize={18}
 	                    />
 	                    <span>{imageBoxCutoutItem.label}</span>
                       <ImageActionCreditBadge label={boxCutoutCostShortLabel} />
@@ -10590,9 +10745,26 @@ export function ImageNode({
 	                      className="mr-2 h-4 w-4"
 	                      fallback={Wand2}
 	                      item={imageLocalEditItem}
+                      referenceName={useReferenceImageToolbar ? "image-local-edit" : undefined}
+                      referenceSize={18}
 	                    />
 		                    <span>{imageLocalEditItem.label}</span>
 	                      <ImageActionCreditBadge label={localEditCostShortLabel} />
+		                  </DropdownMenuItem>
+		                  ) : null}
+		                  {isSelectedImageActionInMore("layoutReplace") ? (
+		                  <DropdownMenuItem
+		                    onClick={() => handleAction("layout-replace")}
+		                  >
+		                    <CanvasToolbarIcon
+		                      className="mr-2 h-4 w-4"
+		                      fallback={LayoutTemplate}
+		                      item={imageLayoutReplaceItem}
+		                      referenceName={useReferenceImageToolbar ? "image-layout-replace" : undefined}
+		                      referenceSize={18}
+		                    />
+		                    <span>{imageLayoutReplaceItem.label}</span>
+                      <ImageActionCreditBadge label={localEditCostShortLabel} />
 		                  </DropdownMenuItem>
 		                  ) : null}
 		                  {isSelectedImageActionInMore("removeWatermark") ? (
@@ -10601,6 +10773,8 @@ export function ImageNode({
 	                      className="mr-2 h-4 w-4"
 	                      fallback={Eraser}
 	                      item={imageRemoveWatermarkItem}
+                      referenceName={useReferenceImageToolbar ? "image-erase" : undefined}
+                      referenceSize={18}
 	                    />
 	                    <span>{imageRemoveWatermarkItem.label}</span>
                       <ImageActionCreditBadge
@@ -10624,6 +10798,8 @@ export function ImageNode({
 	                      className="mr-2 h-4 w-4"
 	                      fallback={Box}
 	                      item={imageMultiAngleItem}
+                      referenceName={useReferenceImageToolbar ? "image-angle" : undefined}
+                      referenceSize={18}
 	                    />
 	                    <span>{imageMultiAngleItem.label}</span>
                       <ImageActionCreditBadge
@@ -10665,6 +10841,8 @@ export function ImageNode({
 	                      className="mr-2 h-4 w-4"
 	                      fallback={Layers}
 	                      item={imageLayerSplitItem}
+                      referenceName={useReferenceImageToolbar ? "image-extract-layer" : undefined}
+                      referenceSize={18}
 	                    />
 	                    {imageLayerSplitItem.label}
 	                  </DropdownMenuItem>
@@ -10675,6 +10853,8 @@ export function ImageNode({
 	                      className="mr-2 h-4 w-4"
 	                      fallback={Expand}
 	                      item={imageExtendItem}
+                      referenceName={useReferenceImageToolbar ? "image-outpaint" : undefined}
+                      referenceSize={18}
 	                    />
 	                    <span>{imageExtendItem.label}</span>
                       <ImageActionCreditBadge label={extendCostShortLabel} />
@@ -10686,6 +10866,8 @@ export function ImageNode({
 	                      className="mr-2 h-4 w-4"
 	                      fallback={Crop}
 	                      item={imageCropItem}
+                      referenceName={useReferenceImageToolbar ? "image-crop" : undefined}
+                      referenceSize={18}
 	                    />
 	                    {imageCropItem.label}
 	                  </DropdownMenuItem>
@@ -10696,6 +10878,8 @@ export function ImageNode({
 	                      className="mr-2 h-4 w-4"
 	                      fallback={SlidersHorizontal}
 	                      item={imageAdjustItem}
+                      referenceName={useReferenceImageToolbar ? "image-adjust" : undefined}
+                      referenceSize={18}
 	                    />
 	                    {imageAdjustItem.label}
 	                  </DropdownMenuItem>
@@ -10706,6 +10890,8 @@ export function ImageNode({
 	                      className="mr-2 h-4 w-4"
 	                      fallback={FlipHorizontal2}
 	                      item={imageFlipRotateItem}
+                      referenceName={useReferenceImageToolbar ? "image-flip-rotate" : undefined}
+                      referenceSize={18}
 	                    />
 	                    {imageFlipRotateItem.label}
 	                  </DropdownMenuItem>
@@ -10731,6 +10917,8 @@ export function ImageNode({
 		                      className="mr-2 h-4 w-4"
 		                      fallback={StickyNote}
 		                      item={imageNoteItem}
+                      referenceName={useReferenceImageToolbar ? "image-mark" : undefined}
+                      referenceSize={18}
 		                    />
 		                    {imageNoteItem.label}
 		                  </DropdownMenuItem>
@@ -10770,7 +10958,8 @@ export function ImageNode({
                     void handleDownload();
                   }}
 	                size="icon"
-	                title={imageDownloadItem.label}
+	                data-tool-key="download"
+                  title={imageDownloadItem.label}
 	                variant="ghost"
 	              >
 	                {isDownloadingOriginalImage ? (
@@ -10780,11 +10969,13 @@ export function ImageNode({
                       className="h-4 w-4"
                       fallback={Download}
                       item={imageDownloadItem}
+                      referenceName={useReferenceImageToolbar ? "image-download" : undefined}
+                      referenceSize={25}
                     />
                   )}
 	              </Button>
               ) : null}
-            </div>
+            </ReferenceImageToolbar>
           </TooltipProvider>,
           document.body
         )}

components/canvas/nodes/TextNode.tsx

@@ -11,6 +11,10 @@ import {
 import type { CanvasNode, TextNodeData } from "@/types/canvas";
 import { cn } from "@/lib/utils";
 import { fetchUploadWithRetry } from "@/lib/client/upload-with-retry";
+import {
+  IMAGE_UPLOAD_MAX_BYTES,
+  IMAGE_UPLOAD_TOO_LARGE_MESSAGE,
+} from "@/lib/image-upload-limits";
 import { toast } from "sonner";
 
 interface TextNodeProps {
@@ -20,7 +24,7 @@ interface TextNodeProps {
 }
 
 const DEFAULT_TEXT_NODE_COLOR = "#111827";
-const PASTED_IMAGE_MAX_BYTES = 50 * 1024 * 1024;
+const PASTED_IMAGE_MAX_BYTES = IMAGE_UPLOAD_MAX_BYTES;
 const PASTED_IMAGE_MAX_SIZE = 360;
 const PASTED_IMAGE_MIN_SIZE = 140;
 
@@ -127,7 +131,7 @@ export function TextNode({
         const file = files[index];
         if (!file.type.startsWith("image/")) continue;
         if (file.size > PASTED_IMAGE_MAX_BYTES) {
-          toast.error("图片大小不能超过 50MB");
+          toast.error(IMAGE_UPLOAD_TOO_LARGE_MESSAGE);
           continue;
         }
 

components/canvas/world3d/World3DViewer.tsx

@@ -1917,9 +1917,6 @@ function WorldSplatCaptureBridge({
 function WorldSplatViewer({
   splatUrl,
   splatUrls,
-  fallbackMeshUrl,
-  fallbackMeshSettings,
-  fallbackMeshLayerVisibility,
   worldUrl,
   previewImageUrl,
   firstPerson,
@@ -1927,8 +1924,6 @@ function WorldSplatViewer({
   interactionMode,
   onPick,
   onHotspotSelect,
-  onFallbackMeshLayersChange,
-  onFallbackMeshStatsChange,
   semanticsMetadata,
   resetViewToken,
   minimalFrame = false,
@@ -1938,9 +1933,6 @@ function WorldSplatViewer({
 }: {
   splatUrl?: string | null;
   splatUrls?: string[] | null;
-  fallbackMeshUrl?: string | null;
-  fallbackMeshSettings?: Model3DViewerSettings;
-  fallbackMeshLayerVisibility?: Record<string, boolean>;
   worldUrl?: string | null;
   previewImageUrl?: string | null;
   minimalFrame?: boolean;
@@ -1949,8 +1941,6 @@ function WorldSplatViewer({
   interactionMode?: "navigate" | "hotspot";
   onPick?: (pick: World3DPickResult) => void;
   onHotspotSelect?: (hotspotId: string) => void;
-  onFallbackMeshLayersChange?: (layers: Model3DLayer[]) => void;
-  onFallbackMeshStatsChange?: (stats: Model3DStats) => void;
   semanticsMetadata?: Record<string, unknown> | null;
   resetViewToken?: number;
   onCaptureReady?: (capture: (() => Promise<Blob | null>) | null) => void;
@@ -1967,7 +1957,6 @@ function WorldSplatViewer({
   const [prefetchedSplat, setPrefetchedSplat] = useState<PrefetchedSplatAsset | null>(
     null
   );
-  const [useMeshFallback, setUseMeshFallback] = useState(false);
   const resolvedSplatUrls = useMemo(() => {
     const rawUrls = [
       splatUrl,
@@ -1985,16 +1974,13 @@ function WorldSplatViewer({
   }, [splatUrl, splatUrls]);
   const resolvedSplatSignature = resolvedSplatUrls.join("|");
   const resolvedSplatUrl = resolvedSplatUrls[activeSplatIndex] || "";
-  const resolvedFallbackMeshUrl = String(fallbackMeshUrl || "").trim() || null;
-  const hasMeshFallback = Boolean(resolvedFallbackMeshUrl);
   const loadStartedAtRef = useRef(0);
   const movementStateRef = useRef<MovementState>(createMovementState());
 
   useEffect(() => {
     setActiveSplatIndex(0);
     setFailedSplatLoads([]);
-    setUseMeshFallback(false);
-  }, [resolvedFallbackMeshUrl, resolvedSplatSignature]);
+  }, [resolvedSplatSignature]);
 
   useEffect(() => {
     if (!resolvedSplatUrl) return;
@@ -2047,10 +2033,6 @@ function WorldSplatViewer({
       const failedUrl = resolvedSplatUrl;
       const nextIndex = activeSplatIndex + 1;
       const nextUrl = resolvedSplatUrls[nextIndex] || "";
-      const shouldUseMeshFallback =
-        hasMeshFallback &&
-        (message.includes("SPZ 加载超时") || !nextUrl);
-
       if (failedUrl) {
         setFailedSplatLoads((items) => [
           ...items,
@@ -2058,20 +2040,6 @@ function WorldSplatViewer({
         ]);
       }
 
-      if (shouldUseMeshFallback) {
-        console.warn("[WorldSplatViewer] Switching to mesh fallback", {
-          error: message,
-          failedUrl,
-          attemptedUrls: resolvedSplatUrls.slice(0, nextIndex),
-          fallbackMeshUrl: resolvedFallbackMeshUrl,
-        });
-        setPrefetchedSplat(null);
-        setLoadProgress(null);
-        setOverlayPhase("hidden");
-        setUseMeshFallback(true);
-        return;
-      }
-
       if (nextUrl) {
         console.warn("[WorldSplatViewer] Falling back to next SPZ asset", {
           error: message,
@@ -2096,15 +2064,13 @@ function WorldSplatViewer({
     },
     [
       activeSplatIndex,
-      hasMeshFallback,
-      resolvedFallbackMeshUrl,
       resolvedSplatUrl,
       resolvedSplatUrls,
     ]
   );
 
   useEffect(() => {
-    if (!resolvedSplatUrl || useMeshFallback) return;
+    if (!resolvedSplatUrl) return;
 
     const abortController = new AbortController();
     let cancelled = false;
@@ -2141,25 +2107,7 @@ function WorldSplatViewer({
       globalThis.clearTimeout(timeoutId);
       abortController.abort();
     };
-  }, [handleSplatLoadStateChange, resolvedSplatUrl, useMeshFallback]);
-
-  if ((useMeshFallback || !resolvedSplatUrl) && resolvedFallbackMeshUrl) {
-    return (
-      <Model3DViewer
-        emptyStateTitle="准备加载 3D Mesh"
-        layerVisibility={fallbackMeshLayerVisibility}
-        modelRotation={WORLDLABS_ASSET_ROTATION}
-        modelUrl={resolvedFallbackMeshUrl}
-        onCaptureReady={onCaptureReady}
-        onLayersChange={onFallbackMeshLayersChange}
-        onStatsChange={onFallbackMeshStatsChange}
-        previewImageUrl={previewImageUrl}
-        resetViewToken={resetViewToken}
-        settings={fallbackMeshSettings || DEFAULT_MESH_SETTINGS}
-        showMovementControls={showMovementControls}
-      />
-    );
-  }
+  }, [handleSplatLoadStateChange, resolvedSplatUrl]);
 
   if (!resolvedSplatUrl) {
     return (
@@ -2375,13 +2323,8 @@ export function World3DViewer({
     <WorldViewerInteractionSurface className={className}>
       <WorldSplatViewer
         firstPerson={firstPerson}
-        fallbackMeshLayerVisibility={meshLayerVisibility}
-        fallbackMeshSettings={meshSettings}
-        fallbackMeshUrl={meshUrl}
         hotspots={hotspots}
         interactionMode={interactionMode}
-        onFallbackMeshLayersChange={onMeshLayersChange}
-        onFallbackMeshStatsChange={onMeshStatsChange}
         onCaptureReady={onCaptureReady}
         onHotspotSelect={onHotspotSelect}
         onPick={onPick}

components/canvas/world3d/WorldSharePage.tsx

@@ -282,6 +282,7 @@ export function WorldSharePage({
                 mode={activeView}
                 previewImageUrl={activeWorld?.previewImageUrl || null}
                 semanticsMetadata={activeWorld?.semanticsMetadata || null}
+                showInfoOverlay={false}
                 showMovementControls={activeView === "splat" || activeView === "mesh"}
                 splatUrl={activeWorld?.splatUrl || null}
                 worldUrl={activeWorld?.worldUrl || null}

components/chat-shell.tsx

@@ -3,6 +3,7 @@
 import dynamic from "next/dynamic";
 import { usePathname } from "next/navigation";
 import type { User } from "next-auth";
+import { CanvasLogoLoadingView } from "@/components/canvas/canvas-logo-loading";
 import type { ChatShellChromeProps } from "@/components/chat-shell-chrome";
 
 type CustomLink = {
@@ -49,7 +50,7 @@ const ChatShellChrome = dynamic(
       (module) => module.ChatShellChrome
     ),
   {
-    loading: () => <div className="h-svh w-full overflow-hidden" />,
+    loading: () => <CanvasLogoLoadingView label="正在加载页面..." />,
     ssr: false,
   }
 );

components/flow-board/flow-board-client.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import "@/public/vendor/drawnix.css";
+
 import dynamic from "next/dynamic";
 import { Loader2 } from "lucide-react";
 
@@ -7,6 +9,7 @@ type FlowBoardClientProps = {
   siteName: string;
   siteLogo: string | null;
   siteLogoDark: string | null;
+  previewMode?: boolean;
 };
 
 const DrawnixWorkspace = dynamic(

components/flow-board/mind-annotation-board.ts

@@ -0,0 +1,206 @@
+import {
+  addSelectedElement,
+  BoardTransforms,
+  clearSelectedElement,
+  PlaitBoard,
+  type PlaitElement,
+  PlaitHistoryBoard,
+  PlaitPointerType,
+  type Point,
+  Transforms,
+} from "@plait/core";
+import {
+  ArrowLineMarkerType,
+  ArrowLineShape,
+  BasicShapes,
+  createArrowLineElement,
+  createGeometryElementWithoutText,
+} from "@plait/draw";
+import { getRectangleByNode, MindElement } from "@plait/mind";
+import {
+  type AnnotatedElement,
+  getBoundaryPoints,
+  getRelationshipPoints,
+  isMindAnnotation,
+  type MindAnnotation,
+  type TopicRectangle,
+} from "@/lib/flow-board/mind-annotations";
+
+function getTopics(board: PlaitBoard) {
+  const topics = new Map<
+    string,
+    { element: MindElement; visible: MindElement }
+  >();
+  const visit = (elements: PlaitElement[], collapsedAncestor?: MindElement) => {
+    for (const element of elements) {
+      if (!MindElement.isMindElement(board, element)) continue;
+      topics.set(element.id, {
+        element,
+        visible: collapsedAncestor || element,
+      });
+      visit(
+        element.children || [],
+        collapsedAncestor || (element.isCollapsed ? element : undefined)
+      );
+    }
+  };
+  visit(board.children);
+  return topics;
+}
+
+function rectangle(element: MindElement): TopicRectangle | null {
+  const node = MindElement.getNode(element);
+  return node ? getRectangleByNode(node) : null;
+}
+
+function annotationPoints(
+  board: PlaitBoard,
+  annotation: MindAnnotation
+): Point[] | null {
+  const topics = getTopics(board);
+  if (annotation.kind === "relationship") {
+    const source = topics.get(annotation.sourceId);
+    const target = topics.get(annotation.targetId);
+    if (!source || !target) return null;
+    const a = rectangle(source.visible);
+    const b = rectangle(target.visible);
+    return a && b ? getRelationshipPoints(a, b) : null;
+  }
+  const rectangles: TopicRectangle[] = [];
+  const seen = new Set<string>();
+  const collect = (element: MindElement) => {
+    if (seen.has(element.id)) return;
+    seen.add(element.id);
+    const rect = rectangle(element);
+    if (rect) rectangles.push(rect);
+    if (!element.isCollapsed) element.children?.forEach(collect);
+  };
+  for (const id of annotation.topicIds) {
+    const topic = topics.get(id);
+    if (topic) collect(topic.visible);
+  }
+  return getBoundaryPoints(rectangles, annotation.padding);
+}
+
+export function insertMindAnnotation(
+  board: PlaitBoard,
+  annotation: MindAnnotation
+) {
+  const points = annotationPoints(board, annotation);
+  if (!points) return null;
+  const endpoints: [Point, Point] = [points[0], points[points.length - 1]];
+  const label = { type: "paragraph", children: [{ text: "联系" }] };
+  const shape =
+    annotation.kind === "relationship"
+      ? createArrowLineElement(
+          ArrowLineShape.curve,
+          endpoints,
+          { marker: ArrowLineMarkerType.none },
+          { marker: ArrowLineMarkerType.arrow },
+          [{ position: 0.5, text: label }],
+          { strokeColor: "#64748b", strokeWidth: 2 }
+        )
+      : createGeometryElementWithoutText(
+          BasicShapes.roundRectangle,
+          endpoints,
+          {
+            fill: "transparent",
+            strokeColor: "#8b9bb8",
+            strokeWidth: 2,
+          }
+        );
+  const element: AnnotatedElement = {
+    ...shape,
+    points,
+    mindAnnotation: annotation,
+  };
+  PlaitHistoryBoard.withNewBatch(board, () => {
+    // Boundaries sit behind topics, so clicking within them still selects topics.
+    Transforms.insertNode(board, element, [
+      annotation.kind === "boundary" ? 0 : board.children.length,
+    ]);
+  });
+  BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
+  clearSelectedElement(board);
+  addSelectedElement(board, element);
+  return element;
+}
+
+const installed = new WeakSet<PlaitBoard>();
+
+/** Keep native drawable shapes linked to topic IDs, using the existing undo stack. */
+export function withMindAnnotations(board: PlaitBoard) {
+  if (installed.has(board)) return;
+  installed.add(board);
+  const { afterChange, undo, redo, apply } = board;
+  board.apply = (operation) => {
+    // Plait keeps a hover reference after deleting or collapsing a topic. Clear it
+    // while the node's DOM still exists, otherwise the next pointerLeave throws.
+    if (
+      operation.type === "remove_node" ||
+      (operation.type === "set_node" &&
+        ("isCollapsed" in operation.newProperties ||
+          "children" in operation.newProperties))
+    ) {
+      board.pointerLeave(new PointerEvent("pointerleave"));
+    }
+    apply(operation);
+  };
+  let pending = false;
+  let replaying = true;
+  const synchronize = () => {
+    pending = false;
+    const replay = replaying;
+    replaying = false;
+    const topics = getTopics(board);
+    const changes = board.children
+      .filter(isMindAnnotation)
+      .flatMap((element) => {
+        const annotation = element.mindAnnotation;
+        const missing =
+          annotation.kind === "relationship"
+            ? !topics.has(annotation.sourceId) ||
+              !topics.has(annotation.targetId)
+            : !annotation.topicIds.some((id) => topics.has(id));
+        const points = missing ? null : annotationPoints(board, annotation);
+        if (
+          !missing &&
+          (!points || JSON.stringify(points) === JSON.stringify(element.points))
+        )
+          return [];
+        return [{ element, points, missing }];
+      });
+    if (!changes.length) return;
+    const update = () => {
+      for (const { element, points, missing } of changes) {
+        const index = board.children.findIndex(
+          (child) => child.id === element.id
+        );
+        if (index < 0) continue;
+        if (missing) Transforms.removeNode(board, [index]);
+        else if (points) Transforms.setNode(board, { points }, [index]);
+      }
+    };
+    if (replay) PlaitHistoryBoard.withoutSaving(board, update);
+    else PlaitHistoryBoard.withMerging(board, update);
+  };
+  board.undo = () => {
+    replaying = board.history.undos.length > 0;
+    undo();
+  };
+  board.redo = () => {
+    replaying = board.history.redos.length > 0;
+    redo();
+  };
+  board.afterChange = () => {
+    afterChange();
+    if (
+      !pending &&
+      board.operations.some((op) => op.type !== "set_selection")
+    ) {
+      pending = true;
+      queueMicrotask(synchronize);
+    }
+  };
+  queueMicrotask(synchronize);
+}

components/flow-board/mind-marker-board.ts

@@ -0,0 +1,30 @@
+import type { PlaitBoard } from "@plait/core";
+import type { withEmoji } from "@plait/mind";
+import { getXmindMarker } from "@/lib/flow-board/xmind-markers";
+
+/** Use the native marker artwork in Plait's existing emoji geometry and hit targets. */
+export function withXmindMarkers(board: PlaitBoard) {
+  const markerBoard = board as ReturnType<typeof withEmoji>;
+  const renderEmoji = markerBoard.renderEmoji;
+  markerBoard.renderEmoji = (container, props) => {
+    const marker = getXmindMarker(props.emojiItem.name);
+    if (!marker) return renderEmoji(container, props);
+    const image = document.createElement("img");
+    image.className = "mind-node-emoji xmind-topic-marker";
+    image.draggable = false;
+    let currentProps = props;
+    const update = (next: Partial<typeof props>) => {
+      currentProps = { ...currentProps, ...next };
+      const current = getXmindMarker(currentProps.emojiItem.name);
+      image.src = current?.asset || marker.asset;
+      image.alt = current?.name || marker.name;
+      image.dataset.markerId = current?.id || marker.id;
+      image.style.width = `${currentProps.fontSize}px`;
+      image.style.height = `${currentProps.fontSize}px`;
+    };
+    update(props);
+    container.append(image);
+    return { update, destroy: () => image.remove() };
+  };
+  return board;
+}

components/flow-board/mind-special-layout-board.ts

@@ -0,0 +1,506 @@
+import type { PlaitBoard } from "@plait/core";
+import {
+  MindElement,
+  MindNodeComponent,
+  PlaitMind,
+  PlaitMindComponent,
+  getBranchColorByMindElement,
+  getBranchWidthByMindElement,
+  type MindNode,
+} from "@plait/mind";
+import {
+  arrangeSpecialMind,
+  isSpecialMindLayout,
+  isSummaryNode,
+  specialNodeRect,
+  specialSubtreeBounds,
+} from "@/lib/flow-board/mind-special-layout";
+
+import { measureXmindTopics } from "@/lib/flow-board/xmind-typography";
+
+const ns = "http://www.w3.org/2000/svg";
+type TableCell = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  depth: number;
+  branch: number;
+};
+type TableGrid = {
+  kind: "spreadsheet";
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  columns: string[];
+  headerHeight: number;
+  columnHeaderHeight: number;
+  rowHeaderWidth: number;
+  columnWidth: number;
+  rows: { y: number; height: number; branch: number }[];
+};
+const tableLayouts = new Set(["treeTable", "treeTableSide", "spreadsheet"]);
+const tableTopicState = new WeakMap<
+  SVGGElement,
+  {
+    foreignObject: SVGForeignObjectElement;
+    x: string | null;
+    y: string | null;
+    width: string | null;
+    height: string | null;
+    textStyle: string | null;
+    contentStyle: string | null;
+    shape: SVGElement | null;
+    shapeVisibility: string;
+  }
+>();
+function ensureTreeTableStyles() {
+  const id = "xmind-tree-table-topic-styles";
+  if (document.getElementById(id)) return;
+  const style = document.createElement("style");
+  style.id = id;
+  style.textContent = `
+    [data-special-table-topic] .plait-text-container {
+      align-items: center !important;
+      display: flex !important;
+      height: 100% !important;
+      justify-content: center !important;
+      overflow-wrap: normal !important;
+      text-align: center !important;
+      white-space: nowrap !important;
+      width: 100% !important;
+    }
+    [data-special-table-topic] .plait-text-container > [data-slate-node="element"] {
+      text-align: center !important;
+      white-space: nowrap !important;
+      width: 100% !important;
+    }
+    [data-special-table-topic="0"] .plait-text-container {
+      color: #fff !important;
+    }
+  `;
+  document.head.append(style);
+}
+function frameTreeTableTopic(
+  component: MindNodeComponent,
+  node: MindNode,
+  enabled: boolean
+) {
+  const host = component.getElementG();
+  const saved = tableTopicState.get(host);
+  if (!enabled) {
+    delete host.dataset.specialTableTopic;
+    if (!saved) return;
+    for (const [name, value] of [
+      ["x", saved.x],
+      ["y", saved.y],
+      ["width", saved.width],
+      ["height", saved.height],
+    ] as const) {
+      if (value === null) saved.foreignObject.removeAttribute(name);
+      else saved.foreignObject.setAttribute(name, value);
+    }
+    const text = saved.foreignObject.firstElementChild as HTMLElement | null;
+    if (text) {
+      if (saved.textStyle === null) text.removeAttribute("style");
+      else text.setAttribute("style", saved.textStyle);
+      const content = text.firstElementChild as HTMLElement | null;
+      if (content) {
+        if (saved.contentStyle === null) content.removeAttribute("style");
+        else content.setAttribute("style", saved.contentStyle);
+      }
+    }
+    if (saved.shape) saved.shape.style.visibility = saved.shapeVisibility;
+    tableTopicState.delete(host);
+    return;
+  }
+
+  const cell = (node as MindNode & { tableCell?: TableCell }).tableCell;
+  const foreignObject = host.querySelector<SVGForeignObjectElement>(
+    ":scope > .text foreignObject"
+  );
+  if (!cell || !foreignObject) return;
+  ensureTreeTableStyles();
+  host.dataset.specialTableTopic = String(cell.depth);
+  const currentShape = (
+    component.nodeShapeGenerator as unknown as { g?: SVGGElement }
+  ).g;
+  if (!saved) {
+    tableTopicState.set(host, {
+      foreignObject,
+      x: foreignObject.getAttribute("x"),
+      y: foreignObject.getAttribute("y"),
+      width: foreignObject.getAttribute("width"),
+      height: foreignObject.getAttribute("height"),
+      textStyle: foreignObject.firstElementChild?.getAttribute("style") ?? null,
+      contentStyle:
+        foreignObject.firstElementChild?.firstElementChild?.getAttribute(
+          "style"
+        ) ?? null,
+      shape: currentShape || null,
+      shapeVisibility: currentShape?.style.visibility || "",
+    });
+  } else if (currentShape && currentShape !== saved.shape) {
+    saved.shape = currentShape;
+    saved.shapeVisibility = currentShape.style.visibility || "";
+  }
+  if (currentShape) currentShape.style.visibility = "hidden";
+  foreignObject.setAttribute("x", String(cell.x + 14));
+  foreignObject.setAttribute("y", String(cell.y + 8));
+  foreignObject.setAttribute("width", String(Math.max(1, cell.width - 28)));
+  foreignObject.setAttribute("height", String(Math.max(1, cell.height - 16)));
+  const text = foreignObject.firstElementChild as HTMLElement | null;
+  if (text) {
+    text.style.alignItems = "center";
+    text.style.color = cell.depth === 0 ? "#ffffff" : "#17252a";
+    text.style.display = "flex";
+    text.style.height = "100%";
+    text.style.justifyContent = "center";
+    text.style.overflowWrap = "normal";
+    text.style.textAlign = "center";
+    text.style.whiteSpace = "nowrap";
+    text.style.width = "100%";
+    const content = text.firstElementChild as HTMLElement | null;
+    if (content) {
+      content.style.alignItems = "center";
+      content.style.color = cell.depth === 0 ? "#ffffff" : "#17252a";
+      content.style.display = "flex";
+      content.style.height = "100%";
+      content.style.justifyContent = "center";
+      content.style.textAlign = "center";
+      content.style.whiteSpace = "nowrap";
+      content.style.width = "100%";
+    }
+  }
+}
+function specialLink(component: MindNodeComponent) {
+  const node = component.node;
+  let root: MindNode = node;
+  while (root.parent) root = root.parent;
+  const kind = root.origin.specialLayout;
+  const tableLayout = tableLayouts.has(String(kind));
+  frameTreeTableTopic(component, node, tableLayout);
+  if (tableLayout)
+    requestAnimationFrame(() => {
+      if (component.getElementG().isConnected)
+        frameTreeTableTopic(component, node, true);
+    });
+  if (!isSpecialMindLayout(kind) || isSummaryNode(node)) return false;
+  if (
+    kind !== "brace" &&
+    kind !== "verticalTimeline" &&
+    !tableLayout &&
+    node !== root &&
+    node.parent !== root
+  )
+    return false;
+  component.linkLineG?.remove();
+  const group = document.createElementNS(ns, "g");
+  group.dataset.specialStructure = kind;
+  const color =
+    getBranchColorByMindElement(component.board, component.element) ||
+    "#64748b";
+  const width =
+    getBranchWidthByMindElement(component.board, component.element) || 2;
+  const path = (d: string) => {
+    const shape = document.createElementNS(ns, "path");
+    shape.setAttribute("d", d);
+    shape.setAttribute("fill", "none");
+    shape.setAttribute("stroke", color);
+    shape.setAttribute("stroke-width", String(width));
+    group.append(shape);
+  };
+  const blendWithWhite = (value: string, amount: number) => {
+    const match = value.match(/^#([\da-f]{2})([\da-f]{2})([\da-f]{2})$/i);
+    if (!match) return value;
+    const channels = match.slice(1).map((channel) => Number.parseInt(channel, 16));
+    return `#${channels
+      .map((channel) =>
+        Math.round(channel + (255 - channel) * amount)
+          .toString(16)
+          .padStart(2, "0")
+      )
+      .join("")}`;
+  };
+  const solidColor = (value: unknown, fallback: string) => {
+    if (typeof value !== "string") return fallback;
+    const short = value.match(/^#([\da-f])([\da-f])([\da-f])$/i);
+    if (short) return `#${short.slice(1).map((channel) => channel + channel).join("")}`;
+    if (/^#[\da-f]{6}$/i.test(value)) return value;
+    const rgba = value.match(/^#([\da-f]{2})([\da-f]{2})([\da-f]{2})([\da-f]{2})$/i);
+    if (!rgba) return fallback;
+    const alpha = Number.parseInt(rgba[4], 16) / 255;
+    return `#${rgba
+      .slice(1, 4)
+      .map((channel) =>
+        Math.round(Number.parseInt(channel, 16) * alpha + 255 * (1 - alpha))
+          .toString(16)
+          .padStart(2, "0")
+      )
+      .join("")}`;
+  };
+  const rootRect = specialNodeRect(root);
+  const axisY = rootRect.y + rootRect.height / 2;
+  const branches = root.children.filter((child) => !isSummaryNode(child));
+  if (kind === "treeTable" || kind === "treeTableSide") {
+    if (node === root) {
+      group.setAttribute("pointer-events", "none");
+      const palette = ["#ffbc9f", "#d8ac8f", "#83c5be", "#f3c78e", "#8ab7d9"];
+      const tableNodes: MindNode[] = [];
+      const collect = (item: MindNode) => {
+        if (!isSummaryNode(item)) tableNodes.push(item);
+        item.children.forEach(collect);
+      };
+      collect(root);
+      const rootFill = solidColor(root.origin.fill, "#006d77");
+      tableNodes.forEach((item) => {
+        const cell = (item as typeof item & { tableCell?: TableCell }).tableCell;
+        if (!cell) return;
+        const rectangle = document.createElementNS(ns, "rect");
+        rectangle.dataset.specialTableCell = item.origin.id || "topic";
+        rectangle.dataset.depth = String(cell.depth);
+        rectangle.setAttribute("x", String(cell.x));
+        rectangle.setAttribute("y", String(cell.y));
+        rectangle.setAttribute("width", String(cell.width));
+        rectangle.setAttribute("height", String(cell.height));
+        const branchColor = palette[cell.branch % palette.length] || palette[0];
+        const explicit = solidColor(item.origin.fill, "");
+        rectangle.setAttribute(
+          "fill",
+          cell.depth === 0
+            ? rootFill
+            : explicit ||
+                blendWithWhite(branchColor, cell.depth === 1 ? 0.08 : 0.72)
+        );
+        rectangle.setAttribute("stroke", rootFill);
+        rectangle.setAttribute("stroke-width", "2");
+        rectangle.setAttribute("vector-effect", "non-scaling-stroke");
+        group.append(rectangle);
+      });
+      group.dataset.specialTable = kind;
+    } else {
+      group.dataset.specialConnector = kind;
+    }
+  } else if (kind === "spreadsheet") {
+    if (node === root) {
+      group.setAttribute("pointer-events", "none");
+      const grid = (root as MindNode & { tableGrid?: TableGrid }).tableGrid;
+      if (grid) {
+        const palette = ["#ff9d8e", "#f6c75d", "#70c8af", "#68a7dd", "#9c8bd8"];
+        const rootFill = solidColor(root.origin.fill, "#1f2766");
+        const rectangle = (
+          x: number,
+          y: number,
+          width: number,
+          height: number,
+          fill: string,
+          dataset?: Record<string, string>
+        ) => {
+          const rect = document.createElementNS(ns, "rect");
+          rect.setAttribute("x", String(x));
+          rect.setAttribute("y", String(y));
+          rect.setAttribute("width", String(width));
+          rect.setAttribute("height", String(height));
+          rect.setAttribute("fill", fill);
+          rect.setAttribute("stroke", rootFill);
+          rect.setAttribute("stroke-width", "2");
+          rect.setAttribute("vector-effect", "non-scaling-stroke");
+          Object.assign(rect.dataset, dataset);
+          group.append(rect);
+        };
+        rectangle(grid.x, grid.y, grid.width, grid.headerHeight, rootFill, {
+          specialTableCell: root.origin.id || "topic",
+          depth: "0",
+        });
+        rectangle(
+          grid.x,
+          grid.y + grid.headerHeight,
+          grid.rowHeaderWidth,
+          grid.columnHeaderHeight,
+          rootFill
+        );
+        grid.columns.forEach((column, index) => {
+          const x = grid.x + grid.rowHeaderWidth + index * grid.columnWidth;
+          const y = grid.y + grid.headerHeight;
+          rectangle(x, y, grid.columnWidth, grid.columnHeaderHeight, rootFill, {
+            specialMatrixColumn: column,
+          });
+          const label = document.createElementNS(ns, "text");
+          label.dataset.specialMatrixColumnLabel = column;
+          label.setAttribute("x", String(x + grid.columnWidth / 2));
+          label.setAttribute("y", String(y + grid.columnHeaderHeight / 2 + 5));
+          label.setAttribute("fill", "#ffffff");
+          label.setAttribute("font-size", "14");
+          label.setAttribute("font-weight", "600");
+          label.setAttribute("text-anchor", "middle");
+          label.textContent = column;
+          group.append(label);
+        });
+        grid.rows.forEach((row, rowIndex) => {
+          const rowNode = branches[rowIndex];
+          const rowColor = solidColor(
+            rowNode?.origin.fill,
+            palette[rowIndex % palette.length]
+          );
+          rectangle(grid.x, row.y, grid.rowHeaderWidth, row.height, rowColor, {
+            specialTableCell: rowNode?.origin.id || `row-${rowIndex}`,
+            depth: "1",
+          });
+          grid.columns.forEach((column, columnIndex) =>
+            rectangle(
+              grid.x + grid.rowHeaderWidth + columnIndex * grid.columnWidth,
+              row.y,
+              grid.columnWidth,
+              row.height,
+              "#ffffff",
+              { specialMatrixCell: `${rowIndex}:${columnIndex}` }
+            )
+          );
+          rowNode?.children
+            .filter((child) => !isSummaryNode(child))
+            .forEach((entry) => {
+              const cell = (entry as typeof entry & { tableCell?: TableCell }).tableCell;
+              if (!cell) return;
+              rectangle(cell.x, cell.y, cell.width, cell.height, blendWithWhite(rowColor, 0.2), {
+                specialMatrixEntry: entry.origin.id || "topic",
+              });
+            });
+        });
+        group.dataset.specialTable = kind;
+      }
+    } else group.dataset.specialConnector = kind;
+  } else if (kind === "verticalTimeline") {
+    const axisX = rootRect.x + rootRect.width / 2;
+    if (node === root) {
+      if (branches.length) {
+        const end = Math.max(
+          ...branches.map((child) => {
+            const rect = specialNodeRect(child);
+            return rect.y + rect.height / 2;
+          })
+        );
+        path(`M${axisX} ${rootRect.y + rootRect.height}V${end}`);
+        group.dataset.specialAxis = kind;
+      }
+    } else {
+      const rect = specialNodeRect(node);
+      const right = rect.x > axisX;
+      const endX = right ? rect.x : rect.x + rect.width;
+      const endY = rect.y + rect.height / 2;
+      if (node.parent === root) {
+        path(`M${axisX} ${endY}H${endX}`);
+      } else if (node.parent) {
+        const parent = specialNodeRect(node.parent);
+        const startX = right ? parent.x + parent.width : parent.x;
+        const startY = parent.y + parent.height / 2;
+        const midX = (startX + endX) / 2;
+        path(
+          `M${startX} ${startY}C${midX} ${startY} ${midX} ${endY} ${endX} ${endY}`
+        );
+      }
+      group.dataset.specialConnector = kind;
+    }
+  } else if (kind === "brace") {
+    const parent = node.parent;
+    const siblings = parent?.children.filter((child) => !isSummaryNode(child));
+    if (parent && siblings?.[0] === node) {
+      const owner = specialNodeRect(parent);
+      const rects = siblings.map(specialNodeRect);
+      const top = Math.min(...rects.map((rect) => rect.y + rect.height / 2));
+      const bottom = Math.max(...rects.map((rect) => rect.y + rect.height / 2));
+      const middle = (top + bottom) / 2;
+      const right = Math.min(...rects.map((rect) => rect.x)) - 10;
+      const x = right - 18;
+      const left = Math.max(owner.x + owner.width + 6, x - 18);
+      const radius = Math.min(18, (bottom - top) / 4);
+      path(
+        top === bottom
+          ? `M${left} ${top}H${right}`
+          : `M${right} ${top}Q${x} ${top} ${x} ${top + radius}V${middle - radius}Q${x} ${middle} ${left} ${middle}Q${x} ${middle} ${x} ${middle + radius}V${bottom - radius}Q${x} ${bottom} ${right} ${bottom}`
+      );
+    }
+  } else if (node === root) {
+    if (branches.length) {
+      const end =
+        Math.max(
+          ...branches.map((child) => {
+            const rect = specialSubtreeBounds(child);
+            return rect.x + rect.width;
+          })
+        ) + 32;
+      path(`M${rootRect.x + rootRect.width} ${axisY}H${end}`);
+      group.dataset.specialAxis = kind;
+    }
+  } else {
+    const rect = specialNodeRect(node);
+    const above = rect.y + rect.height / 2 < axisY;
+    const endX = rect.x + rect.width / 2;
+    const startX = endX - (kind === "fishbone" ? 48 : 0);
+    path(
+      `M${startX} ${axisY}L${endX} ${above ? rect.y + rect.height : rect.y}`
+    );
+    group.dataset.specialConnector = kind;
+    if (kind === "timeline") {
+      const circle = document.createElementNS(ns, "circle");
+      circle.setAttribute("cx", String(startX));
+      circle.setAttribute("cy", String(axisY));
+      circle.setAttribute("r", "4");
+      circle.setAttribute("fill", color);
+      group.append(circle);
+    }
+  }
+  component.linkLineG = group;
+  const host = component.getElementG();
+  if (tableLayout && node === root && host.parentElement)
+    host.parentElement.insertBefore(group, host.parentElement.firstChild);
+  else host.append(group);
+  return true;
+}
+class SpecialMindRoot extends PlaitMindComponent {
+  override updateMindLayout(element = this.element) {
+    measureXmindTopics(this.board, element);
+    super.updateMindLayout(element);
+    if (isSpecialMindLayout(element.specialLayout))
+      arrangeSpecialMind(this.root, element.specialLayout);
+  }
+  override drawLink() {
+    if (!specialLink(this)) {
+      this.linkLineG?.remove();
+      this.linkLineG = undefined;
+      super.drawLink();
+    }
+  }
+}
+class SpecialMindNode extends MindNodeComponent {
+  private lastSpecialLayout: unknown;
+  private rootLayout() {
+    let root = this.node;
+    while (root.parent) root = root.parent;
+    return root.origin.specialLayout;
+  }
+  override onContextChanged(
+    ...args: Parameters<MindNodeComponent["onContextChanged"]>
+  ) {
+    super.onContextChanged(...args);
+    // A structure switch can leave descendant positions and parent identity unchanged.
+    if (this.rootLayout() !== this.lastSpecialLayout) this.drawLink();
+  }
+  override drawLink() {
+    if (!specialLink(this)) super.drawLink();
+    this.lastSpecialLayout = this.rootLayout();
+  }
+}
+const installed = new WeakSet<PlaitBoard>();
+export function withSpecialMindLayouts(board: PlaitBoard) {
+  if (installed.has(board)) return board;
+  installed.add(board);
+  const drawElement = board.drawElement;
+  board.drawElement = (context) => {
+    if (PlaitMind.isMind(context.element)) return SpecialMindRoot;
+    if (MindElement.isMindElement(board, context.element))
+      return SpecialMindNode;
+    return drawElement(context);
+  };
+  return board;
+}

components/flow-board/xmind-annotation-panel.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import { Trash2, X } from "lucide-react";
+import type { AnnotatedElement } from "@/lib/flow-board/mind-annotations";
+
+export function XmindAnnotationPanel({
+  element,
+  onChange,
+  onDelete,
+  onClose,
+}: {
+  element: AnnotatedElement;
+  onChange: (patch: Record<string, unknown>) => void;
+  onDelete: () => void;
+  onClose: () => void;
+}) {
+  const relationship = element.mindAnnotation.kind === "relationship";
+  const label = (element.texts?.[0]?.text?.children || [])
+    .map((leaf: { text?: string }) => leaf.text || "")
+    .join("");
+  return (
+    <aside
+      className="xmind-aux-panel absolute right-0 top-[94px] bottom-9 z-30 w-full max-w-[304px] overflow-y-auto border-l border-[#dfe2e7] bg-white text-[#343b48]"
+      data-flow-board-shell-control="true"
+    >
+      <div className="flex h-12 items-center justify-between border-b border-[#eceef1] px-4">
+        <h2 className="text-sm font-semibold">
+          {relationship ? "联系格式" : "外框格式"}
+        </h2>
+        <button aria-label="关闭格式面板" onClick={onClose} type="button">
+          <X size={16} />
+        </button>
+      </div>
+      <div className="space-y-5 p-4 text-xs">
+        {relationship ? (
+          <label className="block space-y-2">
+            <span>联系文字</span>
+            <input
+              className="h-9 w-full rounded border border-[#dfe2e7] px-2 text-sm"
+              value={label}
+              onChange={(event) =>
+                onChange({
+                  texts: event.target.value
+                    ? [
+                        {
+                          position: 0.5,
+                          text: {
+                            type: "paragraph",
+                            children: [{ text: event.target.value }],
+                          },
+                        },
+                      ]
+                    : [],
+                })
+              }
+            />
+          </label>
+        ) : (
+          <label className="flex items-center justify-between">
+            <span>外框留白</span>
+            <select
+              aria-label="外框留白"
+              className="h-8 rounded border border-[#dfe2e7] px-2"
+              value={
+                element.mindAnnotation.kind === "boundary"
+                  ? element.mindAnnotation.padding
+                  : 18
+              }
+              onChange={(event) =>
+                onChange({
+                  mindAnnotation: {
+                    ...element.mindAnnotation,
+                    padding: Number(event.target.value),
+                  },
+                })
+              }
+            >
+              {[12, 18, 24, 32].map((value) => (
+                <option key={value} value={value}>
+                  {value} px
+                </option>
+              ))}
+            </select>
+          </label>
+        )}
+        <label className="flex items-center justify-between">
+          <span>线条颜色</span>
+          <input
+            aria-label="联系或外框颜色"
+            className="h-7 w-12 cursor-pointer"
+            type="color"
+            value={element.strokeColor || "#64748b"}
+            onChange={(event) => onChange({ strokeColor: event.target.value })}
+          />
+        </label>
+        <label className="flex items-center justify-between">
+          <span>线条粗细</span>
+          <select
+            aria-label="联系或外框粗细"
+            className="h-8 rounded border border-[#dfe2e7] px-2"
+            value={element.strokeWidth || 2}
+            onChange={(event) =>
+              onChange({ strokeWidth: Number(event.target.value) })
+            }
+          >
+            {[1, 2, 3, 4].map((value) => (
+              <option key={value} value={value}>
+                {value} pt
+              </option>
+            ))}
+          </select>
+        </label>
+        <p className="leading-5 text-[#8b919c]">
+          {relationship
+            ? "联系线会跟随主题移动。双击线上的文字也可以编辑。"
+            : "外框包含所选主题及其展开的子主题，随分支布局自动调整。"}
+        </p>
+        <button
+          className="flex h-9 w-full items-center justify-center gap-2 rounded border border-[#e5e7eb] text-[#b44343] hover:bg-red-50"
+          onClick={onDelete}
+          type="button"
+        >
+          <Trash2 size={14} />
+          删除{relationship ? "联系" : "外框"}
+        </button>
+      </div>
+    </aside>
+  );
+}

components/flow-board/xmind-command-menu.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { type ReactNode, useEffect, useRef, useState } from "react";
+import { ChevronDown, type LucideIcon } from "lucide-react";
+
+export type XmindCommand = {
+  label: string;
+  icon?: LucideIcon;
+  shortcut?: string;
+  disabled?: boolean;
+  checked?: boolean;
+  separator?: boolean;
+  run: () => void;
+};
+
+export function XmindCommandMenu({ label, children, commands, className = "", align = "left" }: {
+  label: string;
+  children: ReactNode;
+  commands: XmindCommand[];
+  className?: string;
+  align?: "left" | "right";
+}) {
+  const [open, setOpen] = useState(false);
+  const host = useRef<HTMLDivElement>(null);
+  const trigger = useRef<HTMLButtonElement>(null);
+  useEffect(() => {
+    if (!open) return;
+    const dismiss = (event: PointerEvent) => {
+      if (!host.current?.contains(event.target as Node)) setOpen(false);
+    };
+    document.addEventListener("pointerdown", dismiss);
+    return () => document.removeEventListener("pointerdown", dismiss);
+  }, [open]);
+  return (
+    <div className={`xmind-menu-host ${className}`} ref={host} data-flow-board-shell-control="true">
+      <button type="button" ref={trigger} aria-label={label} aria-haspopup="menu" aria-expanded={open}
+        className="xmind-menu-trigger" onClick={() => setOpen(value => !value)}
+        onKeyDown={event => {
+          if (event.key === "ArrowDown") {
+            event.preventDefault();
+            setOpen(true);
+            requestAnimationFrame(() => host.current?.querySelector<HTMLButtonElement>("[role=menuitem]:not(:disabled)")?.focus());
+          }
+        }}>
+        {children}<ChevronDown size={12} />
+      </button>
+      {open ? <div role="menu" aria-label={label} className={`xmind-command-menu ${align === "right" ? "xmind-menu-right" : ""}`}
+        onKeyDown={event => {
+          if (event.key === "Escape") {
+            event.preventDefault(); event.stopPropagation(); setOpen(false); trigger.current?.focus();
+          }
+          const items = Array.from(host.current?.querySelectorAll<HTMLButtonElement>("[role=menuitem]:not(:disabled)") || []);
+          const index = items.indexOf(document.activeElement as HTMLButtonElement);
+          if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+            event.preventDefault();
+            const next = event.key === "Home" ? 0 : event.key === "End" ? items.length - 1 : (index + (event.key === "ArrowDown" ? 1 : -1) + items.length) % items.length;
+            items[next]?.focus();
+          }
+        }}>
+        {commands.map(({ label: title, icon: Icon, shortcut, disabled, checked, separator, run }) => <div key={title}>
+          {separator ? <hr className="xmind-menu-separator" /> : null}
+          <button type="button" role="menuitem" disabled={disabled} className="xmind-command" onClick={() => { setOpen(false); run(); }}>
+            {Icon ? <Icon size={16} /> : <span className="xmind-command-check">{checked ? "✓" : ""}</span>}
+            <span>{title}</span>{shortcut ? <kbd>{shortcut}</kbd> : null}
+          </button>
+        </div>)}
+      </div> : null}
+    </div>
+  );
+}

components/flow-board/xmind-editor-chrome.tsx

@@ -0,0 +1,470 @@
+"use client";
+
+import {
+  CalendarDays,
+  ChartGantt,
+  ArrowLeft,
+  ArrowUpRight,
+  Bold,
+  ChevronDown,
+  Copy,
+  FileText,
+  FolderOpen,
+  GitBranchPlus,
+  GitMerge,
+  Hand,
+  Image as ImageIcon,
+  Italic,
+  ListPlus,
+  Link2,
+  StickyNote,
+  Maximize,
+  Minus,
+  MousePointer2,
+  Network,
+  PanelRight,
+  Pencil,
+  Plus,
+  Redo2,
+  Save,
+  Shapes,
+  Tag,
+  Trash2,
+  Type,
+  Underline,
+  Undo2,
+  Upload,
+  Download,
+  X,
+  type LucideIcon,
+} from "lucide-react";
+import { type ReactNode, useState } from "react";
+import { Home, Smile, Scan, Search, MoreHorizontal, AlignLeft, AlignCenter, AlignRight, Presentation, SlidersHorizontal } from "lucide-react";
+import { XmindCommandMenu } from "./xmind-command-menu";
+
+export type FlowBoardToolId =
+  | "selection"
+  | "hand"
+  | "mind"
+  | "text"
+  | "arrow"
+  | "shape"
+  | "image";
+
+export type FlowBoardSheetTab = {
+  id: string;
+  title: string;
+};
+
+export type FlowBoardLayoutOption = {
+  id: string;
+  label: string;
+  preview:
+    | "both"
+    | "right"
+    | "left"
+    | "down"
+    | "up"
+    | "indent"
+    | "fishbone"
+    | "timeline"
+    | "brace"
+    | "verticalTimeline"
+    | "treeTable"
+    | "treeTableSide"
+    | "spreadsheet";
+};
+
+export type FlowBoardThemeOption = {
+  id: string;
+  label: string;
+  colors: [string, string, string];
+};
+
+function LayoutPreview({
+  direction,
+}: {
+  direction: FlowBoardLayoutOption["preview"];
+}) {
+  const horizontal = direction === "right" || direction === "left";
+  const vertical = direction === "down" || direction === "up";
+  const leaf = (x: number, y: number) => (
+    <rect key={`${x}-${y}`} x={x - 3} y={y - 3} width="6" height="6" fill="white" />
+  );
+  const root = (x: number, y: number) => (
+    <rect x={x - 4.5} y={y - 4.5} width="9" height="9" fill="currentColor" stroke="none" />
+  );
+  return (
+    <svg aria-hidden="true" className="block h-9 w-12 shrink-0" data-layout-preview={direction}
+      viewBox="0 0 48 36" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round">
+      {direction === "both" ? (
+        <>
+          <path d="M19.5 18H14V8H8M14 18V28H8M28.5 18H34V8H40M34 18V28H40" />
+          {root(24, 18)}
+          {[leaf(5, 8), leaf(5, 28), leaf(43, 8), leaf(43, 28)]}
+        </>
+      ) : null}
+      {horizontal ? (
+        <g transform={direction === "left" ? "translate(48 0) scale(-1 1)" : undefined}>
+          <path d="M13.5 18H24V8H35M24 18V28H35" />
+          {root(9, 18)}
+          {[leaf(38, 8), leaf(38, 28)]}
+        </g>
+      ) : null}
+      {vertical ? (
+        <g transform={direction === "up" ? "translate(0 36) scale(1 -1)" : undefined}>
+          <path d="M24 10.5V19M7 25V19H41V25M24 19V25" />
+          {root(24, 6)}
+          {[leaf(7, 28), leaf(24, 28), leaf(41, 28)]}
+        </g>
+      ) : null}
+      {direction === "indent" ? (
+        <>
+          <path d="M9 10.5V30H27M9 18H27" />
+          {root(9, 6)}
+          {[leaf(30, 18), leaf(30, 30)]}
+          <path d="M34 18H44M34 30H44" />
+        </>
+      ) : null}
+      {direction === "fishbone" || direction === "timeline" ? <>
+        {root(6, 18)}<path d="M10.5 18H46" />
+        <path d={direction === "fishbone" ? "M17 18L23 7M29 18L35 29M34 18L40 7" : "M20 18V7M29 18V29M40 18V7"} />
+        {[leaf(direction === "fishbone" ? 23 : 20, 5), leaf(direction === "fishbone" ? 35 : 29, 31), leaf(40, 5)]}
+      </> : null}
+      {direction === "verticalTimeline" ? <>
+        {root(24, 5)}<path d="M24 9.5V32M24 15H35M24 23H13M24 31H35" />
+        {[leaf(38, 15), leaf(10, 23), leaf(38, 31)]}
+      </> : null}
+      {direction === "treeTable" ? <>
+        <rect x="7" y="4" width="34" height="8" fill="currentColor" stroke="none" />
+        <path d="M7 12H41V32H7ZM7 22H41M25 12V32" />
+      </> : null}
+      {direction === "treeTableSide" ? <>
+        <rect x="5" y="5" width="10" height="26" fill="currentColor" stroke="none" />
+        <path d="M15 5H43V31H15ZM15 14H43M15 23H43M29 5V31" />
+      </> : null}
+      {direction === "spreadsheet" ? <>
+        <rect x="5" y="4" width="38" height="8" fill="currentColor" stroke="none" />
+        <path d="M5 12H43V32H5ZM5 19H43M5 25.5H43M16 12V32M25 12V32M34 12V32" />
+        <rect x="6" y="20" width="9" height="5" fill="currentColor" stroke="none" opacity=".55" />
+      </> : null}
+      {direction === "brace" ? <>{root(8,18)}<path d="M30 5Q23 5 23 11V13Q23 18 17 18Q23 18 23 23V25Q23 31 30 31" />{[leaf(37,5),leaf(37,18),leaf(37,31)]}</> : null}
+    </svg>
+  );
+}
+
+export function XmindEditorTopBar({
+  activeTool, canEditMind, currentTitle, formatPanelOpen, markerPanelOpen, isSaving, onBack,
+  onImport, onExport, onExportImage, isExporting, onInsertChild, onInsertSibling,
+  onRelationship, onBoundary, relationshipPending, onOpenFiles, onRedo,
+  onSave, onSummary, onTopicDetails, onTitleChange, onTitleCommit,
+  onToggleFormat, onToggleMarkers, onToolChange, onUndo, siteName,
+  onSearch, onToggleZen, onToggleOutline, onPresentation, onTask, onGantt,
+}: {
+  activeTool: FlowBoardToolId;
+  canEditMind: boolean;
+  currentTitle: string;
+  formatPanelOpen: boolean;
+  markerPanelOpen: boolean;
+  isSaving: boolean;
+  onBack: () => void;
+  onImport: () => void;
+  onExport: () => void;
+  onExportImage: () => void;
+  isExporting: boolean;
+  onInsertChild: () => void;
+  onInsertSibling: () => void;
+  onRelationship: () => void;
+  onBoundary: () => void;
+  relationshipPending: boolean;
+  onOpenFiles: () => void;
+  onRedo: () => void;
+  onSave: () => void;
+  onSummary: () => void;
+  onTopicDetails: (section: "notes" | "links" | "labels") => void;
+  onTitleChange: (value: string) => void;
+  onTitleCommit: () => void;
+  onToggleFormat: () => void;
+  onToggleMarkers: () => void;
+  onToolChange: (tool: FlowBoardToolId) => void;
+  onUndo: () => void;
+  siteLogo: string | null;
+  siteName: string;
+  onTask: () => void;
+  onGantt: () => void;
+  onSearch: () => void;
+  onToggleZen: () => void;
+  onToggleOutline: () => void;
+  onPresentation: () => void;
+}) {
+  const nativeIcons: Record<string,string> = {"同级主题":"topic","子主题":"subtopic","联系":"relationship","概要":"summary","外框":"boundary","ZEN 模式":"zen","演示":"pitch","格式":"sidebar","标记":"marker","导出 XMind":"export"};
+  const action = (label: string, Icon: LucideIcon, run: () => void, disabled = false, active = false) => (
+    <button aria-label={label} title={label} type="button" disabled={disabled} aria-pressed={active}
+      className={`xmind-icon-button ${active ? "is-active" : ""}`} onClick={run}>{nativeIcons[label] ? <span aria-hidden="true" className="xmind-native-icon" style={{maskImage:`url(/icons/xmind/${nativeIcons[label]}.svg)`}} /> : <Icon size={20} strokeWidth={1.8} />}</button>
+  );
+  return <header className="xmind-topbar" data-flow-board-shell-control="true">
+    <div className="xmind-document-heading">
+      <button type="button" aria-label="返回首页" title={`返回 ${siteName}`} className="xmind-home-button" onClick={onBack}><Home size={21} strokeWidth={1.8} /></button>
+      <div className="xmind-document-name">
+        <input aria-label="白板标题" value={currentTitle} maxLength={256} onChange={e => onTitleChange(e.target.value)}
+          onBlur={onTitleCommit} onKeyDown={e => { if (e.key === "Enter") e.currentTarget.blur(); }} />
+        <span role="status">{isSaving ? "正在保存…" : "已编辑"}</span>
+      </div>
+      <XmindCommandMenu label="文件与编辑" className="xmind-document-menu" commands={[
+        {label:"保存",icon:Save,shortcut:"⌘S",run:onSave},
+        {label:"云文件",icon:FolderOpen,run:onOpenFiles},
+        {label:"导入",icon:Upload,run:onImport},
+        {label:"导出 XMind",icon:Download,disabled:isExporting,run:onExport},
+        {label:"导出图片",icon:ImageIcon,disabled:isExporting,run:onExportImage},
+        {label:"撤销",icon:Undo2,shortcut:"⌘Z",separator:true,run:onUndo},
+        {label:"重做",icon:Redo2,shortcut:"⇧⌘Z",run:onRedo},
+        {label:"甘特图",icon:ChartGantt,run:onGantt},
+        {label:"查找与替换",icon:Search,shortcut:"⌘F",separator:true,run:onSearch},
+        {label:"选择",icon:MousePointer2,checked:activeTool === "selection",separator:true,run:() => onToolChange("selection")},
+        {label:"画布",icon:Hand,checked:activeTool === "hand",run:() => onToolChange("hand")},
+      ]}><MoreHorizontal size={17} /></XmindCommandMenu>
+    </div>
+    <nav className="xmind-pointer-toolbar" aria-label="画布工具">
+      <button type="button" aria-label="选择工具" title="选择 · V（空白处拖动框选）"
+        aria-pressed={activeTool === "selection"} className={`xmind-icon-button ${activeTool === "selection" ? "is-active" : ""}`} onClick={() => onToolChange("selection")}><MousePointer2 size={17} strokeWidth={1.8} /></button>
+      <button type="button" aria-label="拖动画布" title="拖动画布 · H（也可按住空格拖动）"
+        aria-pressed={activeTool === "hand"} className={`xmind-icon-button ${activeTool === "hand" ? "is-active" : ""}`} onClick={() => onToolChange("hand")}><Hand size={17} strokeWidth={1.8} /></button>
+    </nav>
+    <nav className="xmind-primary-tools" aria-label="主题工具">
+      <div className="xmind-toolbar-pill">
+        {action("同级主题", ListPlus, onInsertSibling, !canEditMind)}
+        {action("子主题", GitBranchPlus, onInsertChild, !canEditMind)}
+      </div>
+      <div className="xmind-toolbar-pill">
+        {action("联系", ArrowUpRight, onRelationship, !canEditMind && !relationshipPending, relationshipPending)}
+        {action("概要", GitMerge, onSummary, !canEditMind)}
+        {action("外框", Shapes, onBoundary, !canEditMind)}
+        <XmindCommandMenu label="插入" commands={[
+          {label:"主题",icon:Network,run:() => onToolChange("mind")},
+          {label:"笔记",icon:StickyNote,shortcut:"⇧⌘N",disabled:!canEditMind,separator:true,run:() => onTopicDetails("notes")},
+          {label:"任务",icon:CalendarDays,disabled:!canEditMind,run:onTask},
+          {label:"链接",icon:Link2,disabled:!canEditMind,run:() => onTopicDetails("links")},
+          {label:"标签",icon:Tag,disabled:!canEditMind,run:() => onTopicDetails("labels")},
+          {label:"图片",icon:ImageIcon,separator:true,run:() => onToolChange("image")},
+          {label:"文本",icon:Type,run:() => onToolChange("text")},
+          {label:"形状",icon:Shapes,run:() => onToolChange("shape")},
+          {label:"箭头",icon:ArrowUpRight,run:() => onToolChange("arrow")},
+        ]}><Plus size={23} strokeWidth={1.7} /></XmindCommandMenu>
+      </div>
+    </nav>
+    <div className="xmind-utility-tools">
+      <div className="xmind-toolbar-pill">{action("导出 XMind", Download, onExport, isExporting)}<XmindCommandMenu label="更多导出选项" align="right" commands={[
+        {label:"导出图片",icon:ImageIcon,disabled:isExporting,run:onExportImage},
+        {label:"导出 XMind",icon:Download,disabled:isExporting,run:onExport},
+      ]}><span className="sr-only">导出</span></XmindCommandMenu></div>
+      <div className="xmind-toolbar-pill">
+        {action("ZEN 模式", Scan, onToggleZen)}
+        {action("大纲视图", FileText, onToggleOutline)}
+        {action("演示", Presentation, onPresentation)}
+      </div>
+      <div className="xmind-toolbar-pill">
+        {action("标记", Smile, onToggleMarkers, false, markerPanelOpen)}
+        {action("格式", PanelRight, onToggleFormat, false, formatPanelOpen)}
+      </div>
+    </div>
+  </header>;
+}
+
+export function XmindFormatPanel({
+  activeLayoutId,
+  activeThemeId,
+  branchColor,
+  branchShape,
+  branchWidth,
+  canvasBackgroundColor,
+  canvasGridColor,
+  canvasGridEnabled,
+  canvasGridSize,
+  fontSize,
+  isBold,
+  isItalic,
+  isUnderlined,
+  layouts,
+  nodeFill,
+  nodeShape,
+  onBranchColorChange,
+  onBranchShapeChange,
+  onBranchWidthChange,
+  onCanvasBackgroundColorChange,
+  onCanvasGridColorChange,
+  onCanvasGridEnabledChange,
+  onCanvasGridSizeChange,
+  onClose,
+  onFontSizeChange,
+  onLayoutChange,
+  onNodeFillChange,
+  onNodeShapeChange,
+  onTextColorChange,
+  onThemeChange,
+  onToggleTextMark,
+  selectedCount,
+  textColor,
+  themes,
+}: {
+  activeLayoutId: string;
+  activeThemeId: string;
+  branchColor: string;
+  branchShape: "bight" | "polyline";
+  branchWidth: number;
+  canvasBackgroundColor: string;
+  canvasGridColor: string;
+  canvasGridEnabled: boolean;
+  canvasGridSize: number;
+  fontSize: string;
+  isBold: boolean;
+  isItalic: boolean;
+  isUnderlined: boolean;
+  layouts: FlowBoardLayoutOption[];
+  nodeFill: string;
+  nodeShape: "round-rectangle" | "underline";
+  onBranchColorChange: (value: string) => void;
+  onBranchShapeChange: (value: "bight" | "polyline") => void;
+  onBranchWidthChange: (value: number) => void;
+  onCanvasBackgroundColorChange: (value: string) => void;
+  onCanvasGridColorChange: (value: string) => void;
+  onCanvasGridEnabledChange: (value: boolean) => void;
+  onCanvasGridSizeChange: (value: number) => void;
+  onClose: () => void;
+  onFontSizeChange: (value: string) => void;
+  onLayoutChange: (value: string) => void;
+  onNodeFillChange: (value: string) => void;
+  onNodeShapeChange: (value: "round-rectangle" | "underline") => void;
+  onTextColorChange: (value: string) => void;
+  onThemeChange: (value: string) => void;
+  onToggleTextMark: (mark: "bold" | "italic" | "underlined") => void;
+  selectedCount: number;
+  textColor: string;
+  themes: FlowBoardThemeOption[];
+}) {
+  const [activePanel, setActivePanel] = useState<"format" | "canvas">("format");
+  const [structuresOpen, setStructuresOpen] = useState(false);
+  const activeLayout = layouts.find(layout => layout.id === activeLayoutId) || layouts[0];
+  const colorControl = (label: string, value: string, change: (value: string) => void, disabled = false) => (
+    <input type="color" aria-label={label} value={/^#[0-9a-f]{6}$/i.test(value) ? value : "#ffffff"}
+      disabled={disabled} onChange={e => change(e.target.value)} className="xmind-color-control" />
+  );
+  return <aside className="xmind-format-panel" aria-label="格式面板" data-flow-board-shell-control="true">
+    <div className="xmind-panel-heading"><span>格式</span><button type="button" aria-label="关闭格式面板" onClick={onClose}><X size={16} /></button></div>
+    <div className="xmind-panel-tabs" role="tablist" aria-label="格式分类">
+      <button type="button" role="tab" aria-selected={activePanel === "format"} onClick={() => setActivePanel("format")}>样式</button>
+      <button type="button" role="tab" aria-selected={activePanel === "canvas"} onClick={() => setActivePanel("canvas")}>画布</button>
+    </div>
+    <div className="xmind-panel-content">
+      {activePanel === "format" ? <>
+        <div className="xmind-topic-preview"><span style={{ backgroundColor: nodeFill, color: textColor,
+          fontWeight: isBold ? 700 : 500, fontStyle: isItalic ? "italic" : "normal", borderRadius: nodeShape === "underline" ? 0 : 8 }}>{selectedCount ? "分支主题" : "中心主题"}</span><ChevronDown size={14} /></div>
+        <section className="xmind-format-section">
+          <h3><ChevronDown size={13} />形状</h3>
+          <div className="xmind-segmented">
+            <button type="button" aria-label="圆角矩形节点" aria-pressed={nodeShape === "round-rectangle"} disabled={!selectedCount} onClick={() => onNodeShapeChange("round-rectangle")}><span className="xmind-shape-rectangle" /></button>
+            <button type="button" aria-label="下划线节点" aria-pressed={nodeShape === "underline"} disabled={!selectedCount} onClick={() => onNodeShapeChange("underline")}><span className="xmind-shape-line" /></button>
+          </div>
+          <label className="xmind-setting-row"><span>填充</span>{colorControl("节点填充颜色", nodeFill, onNodeFillChange, !selectedCount)}</label>
+        </section>
+        <section className="xmind-format-section">
+          <h3><ChevronDown size={13} />文本</h3>
+          <label className="xmind-setting-row"><span>字号</span><select aria-label="节点字号" value={fontSize} disabled={!selectedCount} onChange={e => onFontSizeChange(e.target.value)}>
+            {Array.from(new Set([12,13,14,15,16,18,20,24,28,30,32,40,48,Number(fontSize)].filter(size => size > 0))).sort((a,b) => a-b).map(size => <option value={size} key={size}>{size}</option>)}
+          </select></label>
+          <label className="xmind-setting-row"><span>颜色</span>{colorControl("文字颜色", textColor, onTextColorChange, !selectedCount)}</label>
+          <div className="xmind-segmented xmind-text-marks">
+            {[{icon:Bold,id:"bold" as const,label:"粗体",active:isBold},{icon:Italic,id:"italic" as const,label:"斜体",active:isItalic},{icon:Underline,id:"underlined" as const,label:"下划线",active:isUnderlined}].map(({icon:Icon,id,label,active}) =>
+              <button type="button" key={id} aria-label={label} aria-pressed={active} disabled={!selectedCount} onClick={() => onToggleTextMark(id)}><Icon size={18} /></button>)}
+          </div>
+        </section>
+        <section className="xmind-format-section">
+          <div className="xmind-setting-row"><h3><ChevronDown size={13} />结构</h3><button type="button" aria-label="选择结构" aria-expanded={structuresOpen} className="xmind-structure-trigger" onClick={() => setStructuresOpen(value => !value)}><LayoutPreview direction={activeLayout.preview} /><ChevronDown size={12} /></button></div>
+          <div className="xmind-current-structure">{activeLayout.label}</div>
+          {structuresOpen ? <div className="xmind-structure-grid">
+            {layouts.map(layout => <button type="button" key={layout.id} aria-label={layout.label} aria-pressed={activeLayoutId === layout.id}
+              onClick={() => { onLayoutChange(layout.id); setStructuresOpen(false); }}><LayoutPreview direction={layout.preview} /><span>{layout.label}</span></button>)}
+          </div> : null}
+        </section>
+        <section className="xmind-format-section">
+          <h3><ChevronDown size={13} />分支</h3>
+          <label className="xmind-setting-row"><span>线条</span><select aria-label="分支形状" value={branchShape} disabled={!selectedCount} onChange={e => onBranchShapeChange(e.target.value as "bight" | "polyline")}><option value="bight">曲线</option><option value="polyline">折线</option></select></label>
+          <label className="xmind-setting-row"><span>粗细</span><select aria-label="分支粗细" value={branchWidth} disabled={!selectedCount} onChange={e => onBranchWidthChange(Number(e.target.value))}>{[1,2,3,4,5,6,8].map(width => <option key={width} value={width}>{width} px</option>)}</select></label>
+          <label className="xmind-setting-row"><span>颜色</span>{colorControl("分支颜色", branchColor, onBranchColorChange, !selectedCount)}</label>
+        </section>
+      </> : <>
+        <section className="xmind-format-section">
+          <h3><ChevronDown size={13} />背景</h3>
+          <div className="xmind-background-presets">{["#ffffff","#f7f8fb","#f1f5f9","#fff8e7","#eef8f1","#f5f0ff"].map(color => <button type="button" key={color} aria-label={`画布背景 ${color}`} aria-pressed={color === canvasBackgroundColor} style={{backgroundColor:color}} onClick={() => onCanvasBackgroundColorChange(color)} />)}</div>
+          <label className="xmind-setting-row"><span>自定义颜色</span>{colorControl("画布背景颜色",canvasBackgroundColor,onCanvasBackgroundColorChange)}</label>
+        </section>
+        <section className="xmind-format-section"><h3><ChevronDown size={13} />彩虹色</h3><div className="xmind-theme-grid">{themes.map(theme => <button type="button" key={theme.id} aria-label={theme.label} aria-pressed={theme.id === activeThemeId} onClick={() => onThemeChange(theme.id)}><span>{theme.colors.map(color => <i key={color} style={{backgroundColor:color}} />)}</span>{theme.label}</button>)}</div></section>
+        <section className="xmind-format-section">
+          <div className="xmind-setting-row"><h3><ChevronDown size={13} />网格</h3><button type="button" role="switch" aria-label="显示画布网格" aria-checked={canvasGridEnabled} className="xmind-switch" onClick={() => onCanvasGridEnabledChange(!canvasGridEnabled)}><i /></button></div>
+          <label className="xmind-setting-row"><span>网格颜色</span>{colorControl("网格颜色",canvasGridColor,onCanvasGridColorChange,!canvasGridEnabled)}</label>
+          <label className="xmind-setting-row"><span>网格间距</span><select aria-label="网格间距" value={canvasGridSize} disabled={!canvasGridEnabled} onChange={e => onCanvasGridSizeChange(Number(e.target.value))}>{[8,16,24,32,40,48,64].map(size => <option key={size} value={size}>{size} px</option>)}</select></label>
+          <div aria-label="画布样式预览" className="xmind-canvas-preview" style={{backgroundColor:canvasBackgroundColor,backgroundImage:canvasGridEnabled ? `radial-gradient(${canvasGridColor} 1px, transparent 1px)` : "none",backgroundSize:`${canvasGridSize}px ${canvasGridSize}px`}} />
+        </section>
+      </>}
+    </div>
+  </aside>;
+}
+
+export function XmindSheetBar({
+  outlineOpen, onToggleOutline, activeSheetId, formatPanelOpen, onAddSheet,
+  onDeleteSheet, onDuplicateSheet, onFit, onRenameSheet, onSwitchSheet,
+  onZoomIn, onZoomOut, onZoomTo, sheets, zoomPercent, topicCount, selectedCount,
+}: {
+  outlineOpen: boolean;
+  onToggleOutline: () => void;
+  activeSheetId: string;
+  formatPanelOpen: boolean;
+  onAddSheet: () => void;
+  onDeleteSheet: (id: string) => void;
+  onDuplicateSheet: (id: string) => void;
+  onFit: () => void;
+  onRenameSheet: (id: string, title: string) => void;
+  onSwitchSheet: (id: string) => void;
+  onZoomIn: () => void;
+  onZoomOut: () => void;
+  onZoomTo: (value: number) => void;
+  sheets: FlowBoardSheetTab[];
+  zoomPercent: number;
+  topicCount: number;
+  selectedCount: number;
+}) {
+  const [renamingSheetId, setRenamingSheetId] = useState<string | null>(null);
+  const [renameDraft, setRenameDraft] = useState("");
+  const [contextId, setContextId] = useState<string | null>(null);
+  const activeSheet = sheets.find(sheet => sheet.id === activeSheetId);
+  const rename = (id: string) => { const sheet = sheets.find(item => item.id === id); if (sheet) { setRenamingSheetId(id); setRenameDraft(sheet.title); } };
+  const commitRename = () => { if (renamingSheetId && renameDraft.trim()) onRenameSheet(renamingSheetId,renameDraft.trim()); setRenamingSheetId(null); };
+  return <footer className="xmind-sheetbar" data-flow-board-shell-control="true">
+    <div className="xmind-sheet-tabs" role="tablist" aria-label="工作表">
+      {sheets.map(sheet => <div className="xmind-sheet-tab-host" key={sheet.id}>
+        {renamingSheetId === sheet.id ? <input aria-label="重命名画布" autoFocus value={renameDraft} maxLength={80} onChange={e => setRenameDraft(e.target.value)} onBlur={commitRename} onKeyDown={e => { if (e.key === "Enter") { e.preventDefault(); commitRename(); } if (e.key === "Escape") { e.preventDefault(); setRenamingSheetId(null); } }} /> :
+          <button type="button" aria-label={sheet.title} aria-pressed={sheet.id === activeSheetId} onClick={() => onSwitchSheet(sheet.id)} onDoubleClick={() => rename(sheet.id)} onContextMenu={e => { e.preventDefault(); setContextId(contextId === sheet.id ? null : sheet.id); }}>{sheet.title}</button>}
+        {contextId === sheet.id ? <div className="xmind-sheet-context" data-flow-board-shell-control="true">
+          <button type="button" onClick={() => { rename(sheet.id); setContextId(null); }}>重命名</button>
+          <button type="button" onClick={() => { onDuplicateSheet(sheet.id); setContextId(null); }}>复制</button>
+          <button type="button" disabled={sheets.length <= 1} onClick={() => { onDeleteSheet(sheet.id); setContextId(null); }}>删除</button>
+          <button type="button" onClick={() => setContextId(null)}>关闭菜单</button>
+        </div> : null}
+      </div>)}
+    </div>
+    <span className="xmind-footer-divider" />
+    <button type="button" aria-label="新增画布" title="新增画布" className="xmind-footer-icon" onClick={onAddSheet}><Plus size={21} strokeWidth={1.5} /></button>
+    <XmindCommandMenu label="画布操作" className="xmind-sheet-actions" commands={[
+      {label:"重命名当前画布",icon:Pencil,disabled:!activeSheet,run:() => activeSheet && rename(activeSheet.id)},
+      {label:"复制当前画布",icon:Copy,disabled:!activeSheet,run:() => activeSheet && onDuplicateSheet(activeSheet.id)},
+      {label:"删除当前画布",icon:Trash2,disabled:sheets.length <= 1,run:() => activeSheet && onDeleteSheet(activeSheet.id)},
+    ]}><MoreHorizontal size={17} /></XmindCommandMenu>
+    <div className="xmind-sheet-status"><span className="xmind-topic-count">主题: {selectedCount} / {topicCount}</span><span className="xmind-footer-divider" />
+      <XmindCommandMenu label="缩放" align="right" className="xmind-zoom-menu" commands={[
+        {label:"放大",icon:Plus,run:onZoomIn},{label:"缩小",icon:Minus,run:onZoomOut},
+        ...[50,75,100,125,150,200].map(value => ({label:`${value}%`,checked:value === zoomPercent,separator:value === 50,run:() => onZoomTo(value)})),
+        {label:"适应画布",icon:Maximize,separator:true,run:onFit},
+      ]}><span>{zoomPercent}%</span></XmindCommandMenu>
+      <span className="xmind-footer-divider" /><button type="button" aria-label={outlineOpen ? "切换到思维导图" : "切换到大纲"} aria-pressed={outlineOpen} className="xmind-outline-toggle" onClick={onToggleOutline}>{outlineOpen ? "思维导图" : "大纲"}</button>
+    </div>
+  </footer>;
+}

components/flow-board/xmind-gantt.tsx

@@ -0,0 +1,778 @@
+"use client";
+import {
+  CalendarDays,
+  ChevronDown,
+  ChevronRight,
+  Download,
+  Link2,
+  Minus,
+  Plus,
+  Printer,
+  Search,
+  UserRound,
+  X,
+} from "lucide-react";
+import type { PlaitElement } from "@plait/core";
+import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  addDays,
+  dateIndex,
+  getTaskRows,
+  indexDate,
+  todayDate,
+  type TopicTask,
+} from "@/lib/flow-board/topic-tasks";
+import { getTopicEntries } from "@/lib/flow-board/topic-details";
+import {
+  activeWorkingCalendar,
+  getProjectCalendar,
+  isWorkingDate,
+  preserveNonWorkingDue,
+  taskDueDate,
+  workingDaysBetween,
+} from "@/lib/flow-board/project-calendar";
+const ROW = 38,
+  HEADER = 64;
+export function XmindGantt({
+  elements,
+  title,
+  onClose,
+  onEdit,
+  onCalendar,
+  onChange,
+  onUndo,
+  onRedo,
+}: {
+  elements: PlaitElement[];
+  title: string;
+  onClose: () => void;
+  onEdit: (id: string) => void;
+  onCalendar: () => void;
+  onChange: (id: string, task: TopicTask) => void;
+  onUndo: () => void;
+  onRedo: () => void;
+}) {
+  const panelRef = useRef<HTMLElement>(null);
+  useEffect(() => {
+    const previous = document.activeElement as HTMLElement | null;
+    panelRef.current?.querySelector<HTMLButtonElement>("button")?.focus();
+    return () => {
+      if (previous?.isConnected) previous.focus();
+    };
+  }, []);
+  const [scale, setScale] = useState(34),
+    [query, setQuery] = useState(""),
+    [assignee, setAssignee] = useState(""),
+    [status, setStatus] = useState("all");
+  const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
+  const [selected, setSelected] = useState<string[]>([]);
+  const [drag, setDrag] = useState<{
+    id: string;
+    x: number;
+    kind: "move" | "start" | "due";
+    task: TopicTask;
+    days: number;
+  } | null>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const rowScrollRef = useRef<HTMLDivElement>(null);
+  const projectCalendar = getProjectCalendar(elements);
+  const calendar = activeWorkingCalendar(projectCalendar);
+  const rows = getTaskRows(elements);
+  const visible = rows.filter(
+    (row) =>
+      row.title.toLocaleLowerCase().includes(query.toLocaleLowerCase()) &&
+      (!assignee || row.task.assignees.includes(assignee)) &&
+      (status === "all" ||
+        (status === "done" && row.task.progress === 100) ||
+        (status === "open" && row.task.progress < 100)) &&
+      !rows.some(
+        (parent) =>
+          collapsed.has(parent.element.id) &&
+          parent.path.length < row.path.length &&
+          parent.path.every((n, i) => row.path[i] === n)
+      )
+  );
+  const candidates = getTopicEntries(elements).filter(
+    (e) => !rows.some((r) => r.element.id === e.element.id)
+  );
+  const [candidate, setCandidate] = useState("");
+  const [notice, setNotice] = useState("");
+  const today = dateIndex(todayDate());
+  const dated = rows.filter((r) => r.task.start && r.task.due);
+  const from =
+    Math.min(today, ...dated.map((r) => dateIndex(r.task.start))) - 3;
+  const last =
+    Math.max(today + 20, ...dated.map((r) => dateIndex(r.task.due))) + 4;
+  // Very long plans use a virtual day grid; no thousands of day DOM nodes.
+  const width = Math.max(800, (last - from + 1) * scale);
+  const [scrollX, setScrollX] = useState(0),
+    [viewportWidth, setViewportWidth] = useState(1000);
+  const tickStep = scale >= 24 ? 1 : scale >= 10 ? 7 : 30;
+  const monthBands = useMemo(() => {
+    const start = from + Math.max(0, Math.floor(scrollX / scale) - 31),
+      end = Math.min(
+        last,
+        from + Math.ceil((scrollX + viewportWidth) / scale) + 31
+      );
+    const bands: { date: string; offset: number; days: number }[] = [];
+    for (let day = start; day <= end; ) {
+      const date = indexDate(day),
+        next = dateIndex(`${date.slice(0, 7)}-01`);
+      const d = new Date(next * 86_400_000);
+      d.setUTCMonth(d.getUTCMonth() + 1);
+      const monthEnd = d.getTime() / 86_400_000;
+      const bandStart = Math.max(from, next),
+        bandEnd = Math.min(last + 1, monthEnd);
+      bands.push({
+        date: date.slice(0, 7),
+        offset: bandStart - from,
+        days: bandEnd - bandStart,
+      });
+      day = monthEnd;
+    }
+    return bands;
+  }, [from, last, scrollX, scale, viewportWidth]);
+  const ticks = useMemo(() => {
+    const result: number[] = [];
+    const begin = Math.max(
+      0,
+      Math.floor(scrollX / scale / tickStep) * tickStep - tickStep
+    );
+    const end = Math.min(
+      last - from,
+      Math.ceil((scrollX + viewportWidth) / scale) + tickStep
+    );
+    for (let i = begin; i <= end; i += tickStep) result.push(i);
+    return result;
+  }, [scrollX, scale, tickStep, viewportWidth, last, from]);
+  const moveTask = (task: TopicTask, days: number) => {
+    const start = addDays(task.start, days);
+    return {
+      ...task,
+      start,
+      due: preserveNonWorkingDue(
+        addDays(task.due, days),
+        taskDueDate(start, task.duration, calendar),
+        calendar
+      ),
+    };
+  };
+  const effective = (row: (typeof rows)[number]) => {
+    if (drag?.id !== row.element.id || !drag.days) return row.task;
+    const task = row.task;
+    if (drag.kind === "move") return moveTask(task, drag.days);
+    const start =
+      drag.kind === "start" ? addDays(task.start, drag.days) : task.start;
+    const due = drag.kind === "due" ? addDays(task.due, drag.days) : task.due;
+    return {
+      ...task,
+      start,
+      due,
+      duration: Math.max(1, workingDaysBetween(start, due, calendar)),
+    };
+  };
+  const goToday = () =>
+    scrollRef.current?.scrollTo({
+      left: Math.max(0, (today - from) * scale - 200),
+      behavior: "smooth",
+    });
+  const downloadCsv = () => {
+    const quote = (v: unknown) => `"${String(v ?? "").replaceAll('"', '""')}"`;
+    const content =
+      "\ufeff" +
+      [
+        [
+          "任务名称",
+          "开始日期",
+          "截止日期",
+          "时长（天）",
+          "进度（%）",
+          "优先级",
+          "负责人",
+          "前置任务",
+        ],
+        ...visible.map((r) => [
+          r.title,
+          r.task.start,
+          r.task.due,
+          r.task.duration,
+          r.task.progress,
+          r.task.priority == null ? "" : `P${r.task.priority}`,
+          r.task.assignees.join(", "),
+          r.task.dependencies
+            .map(
+              (d) =>
+                `${rows.find((t) => t.element.id === d.id)?.title || d.id} ${d.type}`
+            )
+            .join(", "),
+        ]),
+      ]
+        .map((row) => row.map(quote).join(","))
+        .join("\r\n");
+    const url = URL.createObjectURL(
+      new Blob([content], { type: "text/csv;charset=utf-8" })
+    );
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${title}-甘特图.csv`;
+    a.click();
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
+  };
+  const linkTasks = () => {
+    if (selected.length !== 2) return;
+    const target = rows.find((r) => r.element.id === selected[1]);
+    if (!target) return;
+    onChange(target.element.id, {
+      ...target.task,
+      dependencies: [
+        ...target.task.dependencies.filter((d) => d.id !== selected[0]),
+        { id: selected[0], type: "FS", lag: 0 },
+      ],
+    });
+  };
+  return (
+    <section
+      role="dialog"
+      aria-modal="true"
+      aria-label="甘特图"
+      className="xmind-gantt"
+      ref={panelRef}
+      data-flow-board-shell-control="true"
+      onKeyUp={(e) => e.stopPropagation()}
+      onKeyDown={(e) => {
+        e.stopPropagation();
+        if (e.key === "Escape") {
+          e.stopPropagation();
+          onClose();
+        }
+        if (e.key === "Tab") {
+          const controls = Array.from(
+            panelRef.current?.querySelectorAll<HTMLElement>(
+              'button:not(:disabled),input,select,[tabindex="0"]'
+            ) || []
+          );
+          const first = controls[0],
+            last = controls.at(-1);
+          if (e.shiftKey && document.activeElement === first) {
+            e.preventDefault();
+            last?.focus();
+          }
+          if (!e.shiftKey && document.activeElement === last) {
+            e.preventDefault();
+            first?.focus();
+          }
+        }
+        if (
+          (e.metaKey || e.ctrlKey) &&
+          e.key.toLowerCase() === "z" &&
+          !(e.target instanceof HTMLInputElement) &&
+          !(e.target instanceof HTMLSelectElement)
+        ) {
+          e.preventDefault();
+          e.stopPropagation();
+          if (e.shiftKey) onRedo();
+          else onUndo();
+        }
+      }}
+    >
+      <header className="xmind-gantt-toolbar">
+        <div className="xmind-gantt-title">
+          <button type="button" aria-label="关闭甘特图" onClick={onClose}>
+            <X size={18} />
+          </button>
+          <h2>甘特图</h2>
+          <span>{title}</span>
+        </div>
+        <div className="xmind-gantt-actions">
+          <button
+            type="button"
+            aria-label="连接选中任务"
+            title="按选择顺序建立完成 → 开始依赖"
+            disabled={selected.length !== 2}
+            onClick={linkTasks}
+          >
+            <Link2 size={18} />
+          </button>
+          <button
+            type="button"
+            aria-label="项目工作日"
+            title="项目工作日"
+            onClick={onCalendar}
+          >
+            <CalendarDays size={18} />
+          </button>
+          <button
+            type="button"
+            aria-label="导出甘特图 CSV"
+            onClick={downloadCsv}
+          >
+            <Download size={18} />
+          </button>
+          <button
+            type="button"
+            aria-label="打印甘特图"
+            onClick={() => window.print()}
+          >
+            <Printer size={18} />
+          </button>
+          <button type="button" aria-label="定位今天" onClick={goToday}>
+            <CalendarDays size={18} />
+          </button>
+          <div className="xmind-gantt-zoom">
+            <button
+              type="button"
+              aria-label="缩小甘特图"
+              onClick={() => setScale((s) => Math.max(2, s - 4))}
+            >
+              <Minus size={16} />
+            </button>
+            <input
+              type="range"
+              aria-label="甘特图缩放"
+              min={2}
+              max={64}
+              value={scale}
+              onChange={(e) => setScale(Number(e.target.value))}
+            />
+            <button
+              type="button"
+              aria-label="放大甘特图"
+              onClick={() => setScale((s) => Math.min(64, s + 4))}
+            >
+              <Plus size={16} />
+            </button>
+          </div>
+        </div>
+      </header>
+      <div className="xmind-gantt-filters">
+        <label>
+          <Search size={14} />
+          <input
+            aria-label="搜索甘特图任务"
+            placeholder="搜索任务"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+          />
+        </label>
+        <select
+          aria-label="按负责人筛选"
+          value={assignee}
+          onChange={(e) => setAssignee(e.target.value)}
+        >
+          <option value="">全部负责人</option>
+          {[...new Set(rows.flatMap((r) => r.task.assignees))].map((name) => (
+            <option key={name} value={name}>
+              {name}
+            </option>
+          ))}
+        </select>
+        <select
+          aria-label="按任务进度筛选"
+          value={status}
+          onChange={(e) => setStatus(e.target.value)}
+        >
+          <option value="all">全部任务</option>
+          <option value="open">未完成</option>
+          <option value="done">已完成</option>
+        </select>
+        <select
+          aria-label="选择新增任务主题"
+          value={candidate}
+          onChange={(e) => setCandidate(e.target.value)}
+        >
+          <option value="">选择主题添加任务</option>
+          {candidates.map((e) => (
+            <option key={e.element.id} value={e.element.id}>
+              {e.title}
+            </option>
+          ))}
+        </select>
+        <button
+          type="button"
+          disabled={!candidate}
+          onClick={() => {
+            onEdit(candidate);
+            setCandidate("");
+          }}
+        >
+          添加任务
+        </button>
+        <span>
+          {calendar ? `${calendar.name} · 跳过非工作日 · ` : ""}
+          {visible.length} 个任务
+        </span>
+      </div>
+      <div className="xmind-gantt-body">
+        <div className="xmind-gantt-table">
+          <div className="xmind-gantt-table-head">
+            <span>任务名称</span>
+            <span>开始日期</span>
+            <span>时长</span>
+          </div>
+          <div
+            className="xmind-gantt-row-scroll"
+            ref={rowScrollRef}
+            onScroll={(e) => {
+              const node = scrollRef.current;
+              if (node && node.scrollTop !== e.currentTarget.scrollTop)
+                node.scrollTop = e.currentTarget.scrollTop;
+            }}
+            data-gantt-row-scroll="true"
+          >
+            {visible.map((row) => (
+              <div
+                className={`xmind-gantt-row ${selected.includes(row.element.id) ? "is-selected" : ""}`}
+                key={row.element.id}
+                style={{ height: ROW }}
+              >
+                <div
+                  className="xmind-gantt-row-name"
+                  style={{ paddingLeft: 8 + Math.min(row.depth, 5) * 12 }}
+                >
+                  <input
+                    type="checkbox"
+                    aria-label={`选择任务 ${row.title}`}
+                    checked={selected.includes(row.element.id)}
+                    onChange={(e) =>
+                      setSelected((s) =>
+                        e.target.checked
+                          ? [...s, row.element.id]
+                          : s.filter((id) => id !== row.element.id)
+                      )
+                    }
+                  />
+                  {row.summary ? (
+                    <button
+                      type="button"
+                      aria-label={`折叠任务 ${row.title}`}
+                      aria-expanded={!collapsed.has(row.element.id)}
+                      onClick={() =>
+                        setCollapsed((old) => {
+                          const next = new Set(old);
+                          if (next.has(row.element.id))
+                            next.delete(row.element.id);
+                          else next.add(row.element.id);
+                          return next;
+                        })
+                      }
+                    >
+                      {collapsed.has(row.element.id) ? (
+                        <ChevronRight size={12} />
+                      ) : (
+                        <ChevronDown size={12} />
+                      )}
+                    </button>
+                  ) : null}
+                  <button
+                    type="button"
+                    className="xmind-gantt-task-title"
+                    title={row.title}
+                    onClick={() => onEdit(row.element.id)}
+                  >
+                    {row.title}
+                  </button>
+                </div>
+                <button
+                  type="button"
+                  className="xmind-gantt-date"
+                  onClick={() => onEdit(row.element.id)}
+                >
+                  {effective(row).start || "未排期"}
+                </button>
+                <span>{effective(row).duration} 天</span>
+              </div>
+            ))}
+            {!visible.length ? (
+              <div className="xmind-gantt-empty">
+                <CalendarDays size={52} />
+                <strong>{rows.length ? "没有匹配的任务" : "没有任务"}</strong>
+                <p>
+                  {rows.length
+                    ? "调整搜索或筛选条件。"
+                    : "请选择一个主题以添加任务。"}
+                </p>
+              </div>
+            ) : null}
+          </div>
+        </div>
+        <div
+          className="xmind-gantt-timeline"
+          ref={scrollRef}
+          onScroll={(e) => {
+            setScrollX(e.currentTarget.scrollLeft);
+            setViewportWidth(e.currentTarget.clientWidth);
+            const rowScroll = rowScrollRef.current;
+            if (rowScroll && rowScroll.scrollTop !== e.currentTarget.scrollTop)
+              rowScroll.scrollTop = e.currentTarget.scrollTop;
+          }}
+        >
+          <div
+            className="xmind-gantt-grid"
+            style={{
+              width,
+              height: Math.max(600, HEADER + visible.length * ROW),
+              backgroundSize: `${scale}px ${ROW}px`,
+            }}
+          >
+            {calendar
+              ? Array.from(
+                  { length: Math.ceil(viewportWidth / scale) + 3 },
+                  (_, index) =>
+                    Math.max(0, Math.floor(scrollX / scale) - 1) + index
+                )
+                  .filter(
+                    (offset) =>
+                      offset <= last - from &&
+                      !isWorkingDate(indexDate(from + offset), calendar)
+                  )
+                  .map((offset) => (
+                    <div
+                      key={`off-${offset}`}
+                      className="xmind-gantt-day-off"
+                      data-gantt-day-off={indexDate(from + offset)}
+                      style={{
+                        left: offset * scale,
+                        width: scale,
+                        top: HEADER,
+                        bottom: 0,
+                      }}
+                    />
+                  ))
+              : null}
+            <div
+              className="xmind-gantt-calendar"
+              style={{ width, height: HEADER }}
+            >
+              {ticks.map((offset) => {
+                const date = indexDate(from + offset);
+                return (
+                  <div
+                    className={`xmind-gantt-day ${calendar && !isWorkingDate(date, calendar) ? "is-day-off" : ""}`}
+                    key={offset}
+                    style={{ left: offset * scale, width: tickStep * scale }}
+                  >
+                    <b>
+                      {tickStep >= 30
+                        ? date.slice(5, 7) + "月"
+                        : tickStep >= 7
+                          ? date.slice(5)
+                          : String(Number(date.slice(8)))}
+                    </b>
+                  </div>
+                );
+              })}
+              {monthBands.map((band) => (
+                <div
+                  key={band.date}
+                  className="xmind-gantt-month"
+                  style={{
+                    left: band.offset * scale,
+                    width: band.days * scale,
+                  }}
+                >
+                  {band.date.replace("-", "年")}月
+                </div>
+              ))}
+            </div>
+            <div
+              className="xmind-gantt-today"
+              aria-label="今天"
+              style={{ left: (today - from) * scale, top: HEADER }}
+            />
+            <svg
+              className="xmind-gantt-connections"
+              aria-label="任务依赖关系"
+              role="img"
+              width={width}
+              height={Math.max(600, HEADER + visible.length * ROW)}
+            >
+              <defs>
+                <marker
+                  id="gantt-arrow"
+                  viewBox="0 0 10 10"
+                  refX="8"
+                  refY="5"
+                  markerWidth="5"
+                  markerHeight="5"
+                  orient="auto-start-reverse"
+                >
+                  <path d="M 0 0 L 10 5 L 0 10 z" fill="#8d94a1" />
+                </marker>
+              </defs>
+              {visible.flatMap((row, i) =>
+                row.task.dependencies.map((d) => {
+                  const fromIndex = visible.findIndex(
+                    (r) => r.element.id === d.id
+                  );
+                  if (fromIndex < 0) return null;
+                  const before = effective(visible[fromIndex]),
+                    after = effective(row);
+                  if (!before.start || !after.start) return null;
+                  const x1 =
+                      (dateIndex(
+                        d.type[0] === "F" ? before.due : before.start
+                      ) -
+                        from +
+                        (d.type[0] === "F" ? 1 : 0)) *
+                      scale,
+                    x2 =
+                      (dateIndex(d.type[1] === "F" ? after.due : after.start) -
+                        from +
+                        (d.type[1] === "F" ? 1 : 0)) *
+                      scale,
+                    y1 = HEADER + fromIndex * ROW + ROW / 2,
+                    y2 = HEADER + i * ROW + ROW / 2;
+                  return (
+                    <path
+                      key={`${row.element.id}-${d.id}`}
+                      data-gantt-dependency={`${d.id}:${row.element.id}`}
+                      d={`M${x1},${y1} H${x1 + 9} V${y2} H${x2}`}
+                      fill="none"
+                      stroke="#8d94a1"
+                      strokeWidth={1.3}
+                      markerEnd="url(#gantt-arrow)"
+                    />
+                  );
+                })
+              )}
+            </svg>
+            {visible.map((row, i) =>
+              selected.includes(row.element.id) ? (
+                <div
+                  key={`selection-${row.element.id}`}
+                  className="xmind-gantt-selection"
+                  style={{ top: HEADER + i * ROW, height: ROW, width }}
+                />
+              ) : null
+            )}
+            {visible.map((row, i) => {
+              const t = effective(row);
+              if (!t.start || !t.due) return null;
+              const left = (dateIndex(t.start) - from) * scale,
+                barWidth = Math.max(
+                  6,
+                  (dateIndex(t.due) - dateIndex(t.start) + 1) * scale
+                );
+              return (
+                <div
+                  key={row.element.id}
+                  className={`xmind-gantt-bar ${row.summary ? "is-summary" : ""} ${t.progress === 100 ? "is-complete" : ""}`}
+                  data-gantt-task-id={row.element.id}
+                  style={{ left, top: HEADER + i * ROW + 6, width: barWidth }}
+                  role="button"
+                  tabIndex={0}
+                  aria-label={`任务时间条 ${row.title}`}
+                  aria-pressed={selected.includes(row.element.id)}
+                  title={`${row.title}\n${t.start} — ${t.due}\n进度 ${t.progress}%`}
+                  onDoubleClick={() => onEdit(row.element.id)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") onEdit(row.element.id);
+                    if (
+                      !row.summary &&
+                      ["ArrowLeft", "ArrowRight"].includes(e.key)
+                    ) {
+                      e.preventDefault();
+                      const days = e.key === "ArrowLeft" ? -1 : 1;
+                      onChange(row.element.id, moveTask(t, days));
+                    }
+                  }}
+                  onPointerDown={(e) => {
+                    if (row.summary || e.button !== 0) return;
+                    e.preventDefault();
+                    setSelected((ids) =>
+                      e.metaKey || e.ctrlKey
+                        ? ids.includes(row.element.id)
+                          ? ids.filter((id) => id !== row.element.id)
+                          : [...ids, row.element.id]
+                        : [row.element.id]
+                    );
+                    e.currentTarget.setPointerCapture(e.pointerId);
+                    const kind =
+                      (e.target as HTMLElement).dataset.resize === "start"
+                        ? "start"
+                        : (e.target as HTMLElement).dataset.resize === "due"
+                          ? "due"
+                          : "move";
+                    setDrag({
+                      id: row.element.id,
+                      x: e.clientX,
+                      kind,
+                      task: row.task,
+                      days: 0,
+                    });
+                  }}
+                  onPointerMove={(e) => {
+                    if (drag?.id !== row.element.id) return;
+                    let days = Math.round((e.clientX - drag.x) / scale);
+                    if (drag.kind === "start")
+                      days = Math.min(
+                        dateIndex(drag.task.due) - dateIndex(drag.task.start),
+                        days
+                      );
+                    if (drag.kind === "due")
+                      days = Math.max(
+                        dateIndex(drag.task.start) - dateIndex(drag.task.due),
+                        days
+                      );
+                    setDrag({ ...drag, days });
+                  }}
+                  onPointerUp={() => {
+                    if (drag?.id !== row.element.id) return;
+                    if (drag.days) onChange(row.element.id, t);
+                    setDrag(null);
+                  }}
+                  onPointerCancel={() => setDrag(null)}
+                >
+                  <div
+                    className="xmind-gantt-progress"
+                    style={{ width: `${t.progress}%` }}
+                  />
+                  {!row.summary ? (
+                    <>
+                      <span
+                        data-resize="start"
+                        className="xmind-gantt-resize is-start"
+                      />
+                      <span
+                        data-resize="due"
+                        className="xmind-gantt-resize is-due"
+                      />
+                    </>
+                  ) : null}
+                  <span className="xmind-gantt-bar-label">
+                    <span
+                      className="xmind-gantt-avatar"
+                      title={t.assignees.join("、") || "未分配负责人"}
+                    >
+                      <UserRound size={12} />
+                    </span>
+                    <span>{row.title}</span>
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+      <footer className="xmind-gantt-footer">
+        <span>
+          {drag
+            ? `调整 ${drag.days > 0 ? "+" : ""}${drag.days} 天`
+            : "拖动调整日期 · 拉伸修改工期 · 双击编辑任务"}
+        </span>
+        <span>{notice}</span>
+        <button
+          type="button"
+          onClick={() => {
+            setQuery("");
+            setAssignee("");
+            setStatus("all");
+            setNotice("");
+          }}
+        >
+          清除筛选
+        </button>
+      </footer>
+    </section>
+  );
+}

components/flow-board/xmind-image-export.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { Download, Loader2, X } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import type { ImageExportOptions } from "@/lib/flow-board/image-export";
+
+export function XmindImageExport({
+  busy,
+  onExport,
+  onClose,
+}: {
+  busy: boolean;
+  onExport: (
+    options: Pick<ImageExportOptions, "scale" | "transparent">
+  ) => void;
+  onClose: () => void;
+}) {
+  const dialog = useRef<HTMLDialogElement>(null);
+  const [scale, setScale] = useState<1 | 2 | 3>(2);
+  const [transparent, setTransparent] = useState(false);
+  useEffect(() => {
+    const node = dialog.current;
+    node?.showModal();
+    return () => node?.close();
+  }, []);
+  return (
+    <dialog
+      ref={dialog}
+      className="xmind-image-export"
+      aria-labelledby="image-export-title"
+      data-flow-board-shell-control="true"
+      onKeyDown={(event) => event.stopPropagation()}
+      onCancel={(event) => {
+        event.preventDefault();
+        if (!busy) onClose();
+      }}
+    >
+      <header>
+        <h2 id="image-export-title">导出图片</h2>
+        <button
+          type="button"
+          aria-label="关闭图片导出"
+          disabled={busy}
+          onClick={onClose}
+        >
+          <X size={18} />
+        </button>
+      </header>
+      <p>导出当前工作表的完整内容为 PNG 图片。</p>
+      <label className="xmind-image-export-field">
+        清晰度
+        <select
+          aria-label="图片清晰度"
+          value={scale}
+          disabled={busy}
+          onChange={(event) =>
+            setScale(Number(event.target.value) as 1 | 2 | 3)
+          }
+        >
+          <option value={1}>标准 · 1 倍</option>
+          <option value={2}>高清 · 2 倍</option>
+          <option value={3}>超清 · 3 倍</option>
+        </select>
+      </label>
+      <label className="xmind-image-export-check">
+        <input
+          type="checkbox"
+          checked={transparent}
+          disabled={busy}
+          onChange={(event) => setTransparent(event.target.checked)}
+        />
+        透明背景
+      </label>
+      <footer>
+        <button type="button" disabled={busy} onClick={onClose}>
+          取消
+        </button>
+        <button
+          type="button"
+          className="xmind-primary-button"
+          disabled={busy}
+          onClick={() => onExport({ scale, transparent })}
+        >
+          {busy ? (
+            <Loader2 size={16} className="animate-spin" />
+          ) : (
+            <Download size={16} />
+          )}
+          {busy ? "正在导出…" : "导出 PNG"}
+        </button>
+      </footer>
+    </dialog>
+  );
+}

components/flow-board/xmind-marker-panel.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { useState } from "react";
+import { ChevronDown, Search, X } from "lucide-react";
+import { XMIND_MARKER_GROUPS, type XmindMarker } from "@/lib/flow-board/xmind-markers";
+
+export function XmindMarkerPanel({ selectedCount, activeIds, mixedIds, onApply, onClear, onClose }: {
+  selectedCount: number;
+  activeIds: string[];
+  mixedIds: string[];
+  onApply: (marker: XmindMarker) => void;
+  onClear: () => void;
+  onClose: () => void;
+}) {
+  const [query, setQuery] = useState("");
+  const [showAll, setShowAll] = useState(false);
+  const [collapsed, setCollapsed] = useState<string[]>([]);
+  const needle = query.trim().toLowerCase();
+  const groups = XMIND_MARKER_GROUPS.filter(group => showAll || needle || !group.hidden).map(group => ({
+    ...group, markers: group.markers.filter(marker => (showAll || needle || !marker.hidden) && (!needle || `${group.label} ${marker.name} ${marker.id}`.toLowerCase().includes(needle))),
+  })).filter(group => group.markers.length);
+  return <aside className="xmind-format-panel xmind-marker-panel" aria-label="标记面板" data-flow-board-shell-control="true"
+    onPointerDownCapture={event => event.stopPropagation()} onMouseDownCapture={event => event.stopPropagation()}>
+    <div className="xmind-panel-heading"><span>标记</span><button type="button" aria-label="关闭标记面板" onClick={onClose}><X size={16} /></button></div>
+    <div className="xmind-marker-search"><Search size={14} /><input aria-label="搜索标记" placeholder="搜索标记" value={query} onChange={event => setQuery(event.target.value)} /></div>
+    <p className="xmind-marker-selection" role="status">{selectedCount ? `已选中 ${selectedCount} 个主题` : "先选中主题，再添加标记"}</p>
+    <div className="xmind-panel-content">
+      {groups.map(group => <section className="xmind-marker-group" key={group.id}>
+        <button type="button" className="xmind-marker-group-heading" aria-expanded={!collapsed.includes(group.id) || Boolean(needle)} onClick={() => setCollapsed(ids => ids.includes(group.id) ? ids.filter(id => id !== group.id) : [...ids, group.id])}>
+          <ChevronDown size={13} /><span>{group.label}</span><span>{group.markers.length}</span>
+        </button>
+        {!collapsed.includes(group.id) || needle ? <div className="xmind-marker-grid">
+          {group.markers.map(marker => <button type="button" key={marker.id} data-marker-id={marker.id}
+            aria-label={marker.id.startsWith("priority-") ? marker.name : `${group.label} ${marker.name}`}
+            title={`${group.label} · ${marker.name}`} aria-pressed={activeIds.includes(marker.id) ? true : mixedIds.includes(marker.id) ? "mixed" : false}
+            disabled={!selectedCount} onPointerDown={event => event.preventDefault()} onMouseDown={event => event.preventDefault()} onClick={() => onApply(marker)}>
+            <img src={marker.asset} alt="" draggable={false} loading="lazy" />
+          </button>)}
+        </div> : null}
+      </section>)}
+      {!groups.length ? <p className="xmind-marker-empty">没有匹配的标记</p> : null}
+      {!needle ? <button type="button" className="xmind-marker-more" aria-expanded={showAll} onClick={() => setShowAll(value => !value)}>{showAll ? "收起更多标记" : "更多标记"}</button> : null}
+    </div>
+    <div className="xmind-marker-footer"><button type="button" disabled={!selectedCount} onPointerDown={event => event.preventDefault()} onMouseDown={event => event.preventDefault()} onClick={onClear}>清空所选节点标记</button></div>
+  </aside>;
+}

components/flow-board/xmind-native.css

@@ -0,0 +1,280 @@
+/* Xmind editing controls use the project's home/canvas typography and density. */
+.xmind-workspace {
+  --xmind-panel-width: 240px;
+  --xmind-ink: #24282b;
+  --xmind-muted: #888b8e;
+  --xmind-panel: #f3f4f5;
+  --xmind-border: #e3e5e8;
+  color: var(--xmind-ink);
+  font-family: Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  background: white;
+  font-size: 13px;
+}
+.xmind-workspace button { cursor: pointer; }
+.xmind-workspace :is(button,input,textarea,select) { font-family: inherit; }
+.xmind-workspace button:disabled { cursor: default; opacity: .3; }
+.xmind-workspace button:focus-visible { outline: 2px solid #35b5ff; outline-offset: 2px; }
+.xmind-topic-marker { display:inline-block; object-fit:contain; flex-shrink:0; vertical-align:middle; }
+.xmind-marker-search { display:flex; align-items:center; gap:6px; margin:4px 12px; padding:6px 8px; border:1px solid var(--xmind-border); border-radius:7px; background:white; }
+.xmind-marker-search input { width:100%; min-width:0; outline:none; background:transparent; font-size:12px; }
+.xmind-marker-selection { margin:6px 12px 10px; font-size:11px; color:var(--xmind-muted); }
+.xmind-marker-panel .xmind-panel-content { flex:1; overflow-x:hidden; }
+.xmind-marker-group { margin-bottom:12px; }
+.xmind-marker-group-heading { display:flex; align-items:center; gap:5px; width:100%; height:26px; font-size:12px; font-weight:600; }
+.xmind-marker-group-heading > span:last-child { margin-left:auto; font-size:10px; font-weight:400; color:var(--xmind-muted); }
+.xmind-marker-group-heading[aria-expanded=false] svg { transform:rotate(-90deg); }
+.xmind-marker-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; }
+.xmind-marker-grid button { display:grid; place-items:center; width:100%; height:28px; border:1px solid transparent; border-radius:5px; background:transparent; }
+.xmind-marker-grid button:hover:not(:disabled) { background:#e3e6ea; }
+.xmind-marker-grid button[aria-pressed=true] { border-color:#387cff; background:#e9f0ff; }
+.xmind-marker-grid button[aria-pressed=mixed] { border:1px dashed #387cff; background:#e9f0ff80; }
+.xmind-marker-grid img { width:20px; height:20px; object-fit:contain; }
+.xmind-marker-more { width:100%; padding:7px; border-radius:6px; color:#3569e8; background:#e9edf4; font-size:12px; }
+.xmind-marker-empty { padding:24px 0; text-align:center; color:var(--xmind-muted); }
+.xmind-marker-footer { padding:10px 12px; border-top:1px solid var(--xmind-border); }
+.xmind-marker-footer button { width:100%; padding:7px; border:1px solid var(--xmind-border); border-radius:6px; background:white; font-size:12px; }
+.xmind-topbar { position:absolute; top:0; left:0; right:var(--xmind-panel-offset,0px); height:56px; z-index:50; display:flex; align-items:flex-start; padding:12px 12px 0; gap:8px; pointer-events:none; }
+.xmind-topbar > * { pointer-events:auto; }
+.xmind-document-heading { display:flex; align-items:center; gap:8px; min-width:200px; }
+.xmind-home-button { display:grid; place-items:center; width:32px; height:32px; border:1px solid var(--xmind-border); border-radius:8px; background:rgba(255,255,255,.95); box-shadow:0 2px 8px #00000006; flex-shrink:0; }
+.xmind-document-name { height:32px; display:flex; flex-direction:column; justify-content:center; gap:0; min-width:100px; }
+.xmind-document-name input { background:transparent; border:1px solid transparent; border-radius:5px; font-size:13px; font-weight:600; width:140px; padding:0 3px; outline:none; }
+.xmind-document-name input:focus { border-color:#35b5ff; }
+.xmind-document-name span { font-size:11px; padding-left:4px; }
+.xmind-document-menu { margin-left:-8px; opacity:0; transition:opacity .15s; }
+.xmind-document-heading:hover .xmind-document-menu,.xmind-document-heading:focus-within .xmind-document-menu { opacity:1; }
+.xmind-pointer-toolbar { position:absolute; top:64px; left:12px; display:flex; flex-direction:column; gap:2px; padding:3px; border:1px solid var(--xmind-border); border-radius:10px; background:#fffffff5; box-shadow:0 2px 8px #00000008; }
+.xmind-pointer-toolbar .xmind-icon-button { width:28px; height:28px; }
+.xmind-primary-tools { display:flex; align-items:center; gap:8px; margin:auto; margin-top:0; }
+.xmind-toolbar-pill { display:flex; align-items:center; padding:2px; border:1px solid var(--xmind-border); border-radius:8px; background:rgba(255,255,255,.95); box-shadow:0 2px 8px #00000006; backdrop-filter:blur(24px); }
+.xmind-icon-button { width:30px; height:28px; display:grid; place-items:center; border-radius:6px; color:var(--xmind-ink); background:transparent; flex-shrink:0; }
+.xmind-icon-button > svg { width:18px; height:18px; }
+.xmind-icon-button:hover:not(:disabled),.xmind-home-button:hover,.xmind-menu-trigger:hover { background:#00000009; }
+.xmind-icon-button.is-active { background:#363b3e; color:white; }
+.xmind-utility-tools { display:flex; align-items:center; gap:8px; }
+.xmind-menu-host { position:relative; }
+.xmind-menu-trigger { display:flex; align-items:center; justify-content:center; gap:4px; min-height:28px; padding:2px 5px; border-radius:24px; }
+.xmind-document-menu .xmind-menu-trigger > svg:last-child,.xmind-sheet-actions .xmind-menu-trigger > svg:last-child { display:none; }
+.xmind-command-menu { position:absolute; top:calc(100% + 10px); left:0; min-width:220px; max-height:min(70vh,540px); overflow-y:auto; padding:5px; border:1px solid #dedfe2; border-radius:10px; background:#fcfcfcf5; backdrop-filter:blur(24px); box-shadow:0 12px 32px #00000020,0 2px 6px #0000000a; z-index:70; }
+.xmind-menu-right { left:auto; right:0; }
+.xmind-command { width:100%; display:flex; align-items:center; gap:10px; border-radius:5px; padding:7px 9px; text-align:left; min-height:32px; color:#34393c; font-size:13px; }
+.xmind-command:hover:not(:disabled),.xmind-command:focus-visible { background:#35a6fc; color:white; outline:none; }
+.xmind-command kbd { font:inherit; opacity:.5; margin-left:auto; font-size:11px; }
+.xmind-command-check { display:block; width:16px; }
+.xmind-menu-separator { height:1px; background:#e1e2e4; margin:4px 6px; }
+.xmind-format-panel { position:absolute; top:8px; right:8px; bottom:8px; width:var(--xmind-panel-width); border-radius:12px; background:var(--xmind-panel); border:1px solid #e5e7e9; box-shadow:-5px 0 20px #00000005; display:flex; flex-direction:column; z-index:35; overflow:hidden; }
+.xmind-panel-heading { display:flex; justify-content:space-between; align-items:center; min-height:36px; padding:0 12px; font-weight:600; }
+.xmind-panel-heading button { border-radius:6px; padding:4px; color:#7a7e83; }
+.xmind-panel-heading button:hover { background:#e2e4e6; }
+.xmind-panel-tabs { display:flex; margin:4px 10px 10px; padding:3px; height:28px; border-radius:8px; background:#e7e8eb; flex-shrink:0; }
+.xmind-panel-tabs button { flex:1; border-radius:6px; font-size:12px; color:#6d7276; }
+.xmind-panel-tabs button[aria-selected=true] { background:#ffffffd9; color:#23282b; font-weight:600; }
+.xmind-panel-content { overflow-y:auto; min-height:0; padding:0 12px 12px; scrollbar-width:thin; scrollbar-color:#b5b5b5 transparent; }
+.xmind-topic-preview { min-height:48px; border:1px solid var(--xmind-border); border-radius:8px; background:#fff; display:flex; align-items:center; gap:8px; padding:8px; margin-bottom:12px; }
+.xmind-topic-preview > span { flex:1; text-align:center; font-size:14px; padding:5px; }
+.xmind-topic-preview svg { color:#5c6267; flex-shrink:0; }
+.xmind-format-section { padding:12px 0; border-top:1px solid var(--xmind-border); }
+.xmind-format-section h3 { display:flex; align-items:center; gap:5px; margin:0 0 10px; font-size:12px; font-weight:600; }
+.xmind-setting-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:8px 0; font-size:12px; }
+.xmind-setting-row h3 { margin:0; }
+.xmind-setting-row > span { flex-shrink:0; }
+.xmind-setting-row select { height:25px; background:#fff; border:1px solid var(--xmind-border); border-radius:8px; min-width:74px; max-width:170px; padding:0 8px; font-size:12px; }
+.xmind-color-control { height:25px; width:74px; padding:0; border:1px solid var(--xmind-border); border-radius:8px; overflow:hidden; background:white; cursor:pointer; }
+.xmind-color-control::-webkit-color-swatch-wrapper { padding:0; }
+.xmind-color-control::-webkit-color-swatch { border:0; border-radius:7px; }
+.xmind-segmented { display:flex; border:1px solid var(--xmind-border); background:white; border-radius:8px; overflow:hidden; height:27px; }
+.xmind-segmented button { flex:1; display:grid; place-items:center; margin:2px; border-radius:6px; }
+.xmind-segmented button[aria-pressed=true] { background:#e4e6e8; }
+.xmind-segmented button:hover:not(:disabled) { background:#f1f2f3; }
+.xmind-shape-rectangle { width:18px; height:12px; border:1.5px solid currentColor; border-radius:3px; }
+.xmind-shape-line { width:24px; border-bottom:1.5px solid currentColor; }
+.xmind-text-marks { height:28px; margin-top:12px; }
+.xmind-structure-trigger { display:flex; height:26px; align-items:center; padding:0 8px; background:white; border:1px solid var(--xmind-border); border-radius:8px; }
+.xmind-structure-trigger svg[data-layout-preview] { width:35px; height:24px; }
+.xmind-current-structure { padding:4px 10px; margin-top:14px; border:1px solid var(--xmind-border); border-radius:8px; background:#fff; font-size:12px; color:#7e8388; }
+.xmind-structure-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-top:12px; }
+.xmind-structure-grid button { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; min-height:64px; border:1px solid #e0e3e7; border-radius:7px; font-size:9px; padding:4px 2px; background:white; }
+.xmind-structure-grid button[aria-pressed=true] { border-color:#36b4ff; background:#edf8ff; color:#179cdc; }
+.xmind-background-presets { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; }
+.xmind-background-presets button { height:28px; border:1px solid #d6d8dc; border-radius:6px; }
+.xmind-background-presets button[aria-pressed=true] { outline:2px solid #35b5ff; }
+.xmind-theme-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
+.xmind-theme-grid button { background:white; border:1px solid #e1e3e6; border-radius:8px; font-size:11px; padding:8px; }
+.xmind-theme-grid button[aria-pressed=true] { border-color:#35b5ff; }
+.xmind-theme-grid button > span { display:flex; margin-bottom:8px; height:12px; overflow:hidden; border-radius:3px; }
+.xmind-theme-grid i { flex:1; }
+.xmind-switch { width:30px; height:18px; border-radius:12px; background:#bfc3c8; position:relative; }
+.xmind-switch i { position:absolute; top:2px; left:2px; height:14px; width:14px; background:white; border-radius:50%; transition:transform .15s; }
+.xmind-switch[aria-checked=true] { background:#35b5ff; }
+.xmind-switch[aria-checked=true] i { transform:translateX(12px); }
+.xmind-canvas-preview { height:96px; border:1px solid var(--xmind-border); border-radius:8px; margin-top:12px; }
+.xmind-sheetbar { position:absolute; bottom:10px; left:16px; right:calc(var(--xmind-panel-offset,0px) + 16px); height:30px; z-index:40; display:flex; align-items:center; gap:8px; pointer-events:none; }
+.xmind-sheetbar > * { pointer-events:auto; }
+.xmind-sheet-tabs { display:flex; gap:4px; max-width:60%; overflow-x:auto; scrollbar-width:none; }
+.xmind-sheet-tab-host { flex-shrink:0; }
+.xmind-sheet-tab-host > button { border-radius:16px; padding:4px 18px; font-size:12px; font-weight:500; background:#ffffffd9; max-width:180px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+.xmind-sheet-tab-host > button[aria-pressed=true] { background:#e4e5e6; font-weight:600; }
+.xmind-sheet-tab-host input { width:130px; height:25px; border-radius:6px; background:white; border:1px solid #35b5ff; padding:0 8px; }
+.xmind-sheet-context { position:absolute; bottom:36px; min-width:140px; padding:5px; border:1px solid #e2e4e7; border-radius:10px; background:white; box-shadow:0 10px 25px #00000015; }
+.xmind-sheet-context button { display:block; width:100%; text-align:left; padding:7px 10px; border-radius:6px; }
+.xmind-sheet-context button:hover { background:#f0f3f5; }
+.xmind-footer-divider { width:1px; height:13px; background:#dfe2e5; flex-shrink:0; }
+.xmind-footer-icon { display:grid; place-items:center; width:26px; height:26px; border-radius:6px; }
+.xmind-footer-icon:hover { background:#f2f3f5; }
+.xmind-sheet-actions { opacity:0; }
+.xmind-sheetbar:hover .xmind-sheet-actions,.xmind-sheet-actions:focus-within { opacity:1; }
+.xmind-sheet-status { margin-left:auto; display:flex; gap:12px; align-items:center; background:#ffffffd9; }
+.xmind-topic-count { font-size:11px; white-space:nowrap; }
+.xmind-zoom-menu .xmind-command-menu,.xmind-sheet-actions .xmind-command-menu { top:auto; bottom:calc(100% + 8px); }
+.xmind-zoom-menu .xmind-menu-trigger { font-size:12px; padding:0; min-width:50px; }
+.xmind-outline-toggle { font-weight:600; font-size:13px; white-space:nowrap; }
+.xmind-workspace .flow-board-canvas-shell { top:0; bottom:0; right:var(--xmind-panel-offset,0px); }
+.xmind-workspace .board-host-svg { background:transparent !important; }
+.xmind-workspace .board-active-svg { z-index:2; pointer-events:none; }
+.xmind-workspace .active-host-g path[stroke="#6698FF"] { stroke:#387cff; stroke-width:2px; vector-effect:non-scaling-stroke; }
+.xmind-workspace .active-host-g path[fill="#6698FF25"] { fill:rgba(56,124,255,.12); }
+.xmind-outline-shell { position:absolute; inset:56px var(--xmind-panel-offset,0px) 48px 0; z-index:20; }
+.xmind-workspace .xmind-aux-panel { top:8px; bottom:8px; right:8px; width:var(--xmind-panel-width); max-width:var(--xmind-panel-width); border-radius:12px; border:1px solid var(--xmind-border); background:var(--xmind-panel); }
+.xmind-zen-exit { position:absolute; top:16px; right:16px; z-index:45; display:flex; gap:8px; align-items:center; padding:9px 14px; border-radius:24px; background:#fffffff0; box-shadow:0 4px 20px #0000000c; font-size:12px; }
+.xmind-empty-canvas { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:20; border:1px solid #333; background:white; border-radius:8px; padding:8px 16px; font-size:16px; font-weight:600; }
+.xmind-search-panel { position:absolute; top:64px; left:8px; bottom:48px; width:var(--xmind-panel-width); border-radius:12px; background:var(--xmind-panel); border:1px solid var(--xmind-border); z-index:45; display:flex; flex-direction:column; box-shadow:5px 0 20px #00000008; }
+.xmind-workspace:has(.xmind-search-panel) .xmind-pointer-toolbar { visibility:hidden; }
+.xmind-search-panel .xmind-panel-content { padding:0 14px 14px; }
+.xmind-search-box { display:flex; gap:8px; border-radius:8px; border:1px solid var(--xmind-border); background:white; padding:8px; align-items:center; margin:8px 0; }
+.xmind-search-box input { outline:0; width:100%; background:transparent; font-size:13px; }
+.xmind-search-options { display:flex; align-items:center; gap:12px; margin:10px 0; font-size:11px; }
+.xmind-search-panel select { width:100%; height:30px; border-radius:8px; background:white; border:1px solid var(--xmind-border); padding:0 8px; font-size:12px; }
+.xmind-search-navigation { display:flex; align-items:center; gap:8px; margin:12px 0; font-size:11px; color:#81868b; }
+.xmind-search-navigation span { flex:1; }
+.xmind-search-navigation button { padding:4px; border-radius:5px; }
+.xmind-search-navigation button:hover { background:#e5e7e9; }
+.xmind-search-result { display:block; width:100%; text-align:left; padding:10px; border-radius:8px; margin:4px 0; background:#ffffffa6; }
+.xmind-search-result.is-active { outline:1px solid #35b5ff; background:#ecf8ff; }
+.xmind-search-result > span { display:block; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.xmind-search-result small { font-size:10px; color:#8a8e91; }
+.xmind-search-replace-buttons { display:flex; gap:8px; margin:10px 0 16px; }
+.xmind-search-replace-buttons button { flex:1; border:1px solid var(--xmind-border); border-radius:6px; background:white; padding:5px; font-size:11px; }
+.xmind-presentation { position:absolute; inset:0; z-index:60; background:#fff; display:flex; flex-direction:column; }
+.xmind-presentation > header { display:flex; align-items:center; justify-content:space-between; padding:20px 28px; color:#8b9095; font-size:12px; }
+.xmind-presentation > header button { display:flex; align-items:center; gap:6px; }
+.xmind-presentation-slide { display:flex; flex:1; flex-direction:column; align-items:center; justify-content:center; padding:60px; overflow:auto; }
+.xmind-presentation-slide h1 { font-size:clamp(28px,4vw,56px); font-weight:650; text-align:center; }
+.xmind-presentation-slide ul { display:flex; flex-direction:column; gap:20px; margin-top:40px; font-size:clamp(18px,2vw,28px); }
+.xmind-presentation-slide li { display:flex; align-items:center; gap:15px; }
+.xmind-presentation-slide li::before { content:""; width:8px; height:8px; border-radius:50%; background:#ff7160; }
+.xmind-presentation > footer { display:flex; justify-content:center; align-items:center; gap:20px; padding:20px; font-size:12px; color:#72787e; }
+.xmind-presentation > footer button { padding:8px; border:1px solid #e6e7e9; border-radius:50%; }
+@media (max-width:1100px) { .xmind-window-dots { display:none; } .xmind-document-heading { min-width:160px; gap:8px; } .xmind-document-name input { width:100px; } .xmind-utility-tools { gap:8px; } .xmind-primary-tools { gap:8px; } .xmind-topbar { gap:8px; padding-left:12px; } }
+@media (max-width:850px) { .xmind-document-name { display:none; } .xmind-document-heading { min-width:auto; } .xmind-document-menu { opacity:1; } .xmind-utility-tools > .xmind-toolbar-pill:nth-child(2) { display:none; } .xmind-topbar { justify-content:space-between; } }
+@media (max-width:640px) { .xmind-workspace { --xmind-panel-offset:0px !important; } .xmind-format-panel,.xmind-workspace .xmind-aux-panel { width:min(var(--xmind-panel-width),calc(100vw - 16px)); } .xmind-topbar { gap:4px; padding:12px 8px; } .xmind-home-button { width:32px; } .xmind-primary-tools { gap:4px; margin:0 auto; } .xmind-icon-button { width:28px; } .xmind-document-menu { display:none; } .xmind-topic-count { display:none; } .xmind-sheetbar { left:10px; right:10px; gap:5px; } .xmind-sheet-status { gap:6px; } .xmind-sheet-tabs { max-width:50%; } }
+@font-face { font-family:NeverMind; src:url('/fonts/xmind/NeverMind-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
+@font-face { font-family:NeverMind; src:url('/fonts/xmind/NeverMind-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
+@font-face { font-family:NeverMind; src:url('/fonts/xmind/NeverMind-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
+@font-face { font-family:NeverMind; src:url('/fonts/xmind/NeverMind-Extrabold.ttf') format('truetype'); font-weight:800; font-style:normal; font-display:swap; }
+@layer base {
+  .xmind-workspace .drawnix,.xmind-workspace .drawnix * { --ui-font:Arial,"PingFang SC",sans-serif; font-family:Arial,"PingFang SC",sans-serif !important; }
+  .xmind-workspace .drawnix .plait-text-container,.xmind-workspace .drawnix .plait-text-container * { font-family:NeverMind,Arial,"PingFang SC",sans-serif !important; }
+}
+
+.xmind-native-icon { display:block; width:18px; height:18px; background:currentColor; mask-size:contain; mask-position:center; mask-repeat:no-repeat; }
+
+/* Topic notes follow the native compact formatting toolbar. */
+.xmind-notes-editor { border:1px solid #e2e5eb; border-radius:12px; background:#fafbfc; overflow:hidden; }
+.xmind-notes-toolbar { display:flex; justify-content:center; align-items:center; gap:2px; padding:7px; border-bottom:1px solid #eceef1; }
+.xmind-notes-toolbar button { display:grid; place-items:center; width:28px; height:28px; border-radius:6px; }
+.xmind-notes-toolbar button:hover,.xmind-notes-toolbar button[aria-pressed=true] { background:#e9edf5; color:#3569e8; }
+.xmind-note-content { min-height:180px; max-height:380px; overflow:auto; padding:12px; outline:none; font-size:13px; line-height:1.7; color:#30343b; counter-reset:note-number; }
+.xmind-note-content p { margin:0 0 4px; position:relative; }
+.xmind-note-content p[data-note-list] { padding-left:20px; }
+.xmind-note-content p[data-note-list=bullet]::before { content:"•"; position:absolute; left:3px; }
+.xmind-note-content p[data-note-list=number] { counter-increment:note-number; }
+.xmind-note-content p[data-note-list=number]::before { content:counter(note-number) "."; position:absolute; left:0; }
+.xmind-note-content a { color:#3569e8; text-decoration:underline; }
+.xmind-note-link-form { padding:8px; display:flex; flex-wrap:wrap; gap:6px; }
+.xmind-note-link-form input { min-width:0; flex:1; border:1px solid #dfe2e7; padding:4px; border-radius:5px; }
+.xmind-note-link-form p { width:100%; color:#c0392b; font-size:11px; }
+.xmind-task-backdrop { position:absolute; inset:0; background:rgb(20 27 40 / .16); z-index:85; display:grid; place-items:center; padding:20px; }
+.xmind-task-editor { width:min(460px,100%); max-height:calc(100vh - 40px); overflow:auto; border:1px solid #e0e3e8; border-radius:16px; background:#fafbfc; color:#343b48; padding:18px; box-shadow:0 16px 64px rgb(20 27 40 / .18); font-size:12px; }
+.xmind-task-editor header,.xmind-task-editor header h2 { display:flex; align-items:center; gap:8px; }
+.xmind-task-editor header { justify-content:space-between; }.xmind-task-editor h2 { font-size:14px; font-weight:600; }
+.xmind-task-name { margin:14px 0; font-size:15px; font-weight:600; overflow-wrap:anywhere; }
+.xmind-task-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
+.xmind-task-fields label { display:flex; flex-direction:column; gap:5px; }
+.xmind-task-editor input,.xmind-task-editor select { width:100%; min-width:0; height:32px; padding:0 8px; border:1px solid #dfe2e7; background:white; border-radius:6px; outline:none; }
+.xmind-task-editor input:focus,.xmind-task-editor select:focus { border-color:#799ce8; }
+.xmind-task-editor h3 { font-weight:600; margin:16px 0 8px; }
+.xmind-task-dependencies>div { display:flex; justify-content:space-between; padding:6px 0; }.xmind-task-add-dependency { display:grid; grid-template-columns:1fr 1fr 50px 34px; gap:5px; }
+.xmind-task-editor footer { display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:20px; }.xmind-task-editor footer button { border-radius:6px; padding:7px 11px; }.xmind-task-editor footer button:first-child { margin-right:auto; }
+.xmind-primary-button { background:#3569e8; color:white; }.xmind-danger,.xmind-task-error { color:#c23c36; }.xmind-task-error { margin-top:10px; }
+.xmind-gantt { position:absolute; inset:0; z-index:75; display:flex; flex-direction:column; background:#edf0f3; color:#30343b; font-size:12px; }
+.xmind-gantt-toolbar { display:flex; align-items:center; justify-content:space-between; min-height:58px; padding:8px 16px; gap:10px; }.xmind-gantt-title,.xmind-gantt-actions { display:flex; align-items:center; gap:12px; }.xmind-gantt-title h2 { font-size:15px; font-weight:600; white-space:nowrap; }.xmind-gantt-title>span { max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#7d8592; }
+.xmind-gantt-actions>button,.xmind-gantt-title>button { display:grid; place-items:center; width:32px; height:32px; background:#fafbfc; border-radius:12px; }.xmind-gantt button:disabled { opacity:.35; cursor:default; }.xmind-gantt-zoom { display:flex; align-items:center; gap:8px; padding:6px 10px; background:#fafbfc; border-radius:16px; }.xmind-gantt-zoom input { width:90px; }
+.xmind-gantt-filters { display:flex; align-items:center; gap:8px; padding:0 16px 10px; flex-wrap:wrap; }.xmind-gantt-filters label { display:flex; align-items:center; gap:6px; background:#fafbfc; padding:0 8px; border:1px solid #e0e3e8; border-radius:6px; }.xmind-gantt-filters input { width:130px; height:28px; outline:none; background:transparent; }.xmind-gantt-filters select { max-width:210px; height:30px; border:1px solid #e0e3e8; background:#fafbfc; padding:0 8px; border-radius:6px; }.xmind-gantt-filters>span { margin-left:auto; color:#7d8592; }
+.xmind-gantt-body { min-height:0; flex:1; display:grid; grid-template-columns:minmax(290px,34%) minmax(0,1fr); gap:12px; padding:0 12px; }.xmind-gantt-table,.xmind-gantt-timeline { border:1px solid #dfe3e9; border-radius:12px; background:#fafbfc; overflow:hidden; min-width:0; position:relative; }.xmind-gantt-table { display:flex; flex-direction:column; }.xmind-gantt-table-head,.xmind-gantt-row { display:grid; grid-template-columns:minmax(0,1fr) 104px 54px; align-items:center; }.xmind-gantt-table-head { height:64px; min-height:64px; font-weight:600; border-bottom:1px solid #e2e5eb; }.xmind-gantt-table-head>span { display:flex; align-items:center; height:100%; padding:0 12px; border-right:1px solid #e2e5eb; }.xmind-gantt-row-scroll { overflow:auto; scrollbar-width:none; flex:1; position:relative; }.xmind-gantt-row { border-bottom:1px solid #e2e5eb; }.xmind-gantt-row.is-selected { background:#edf3ff; }.xmind-gantt-row>span { padding:0 7px; }.xmind-gantt-row-name { display:flex; align-items:center; gap:5px; overflow:hidden; }.xmind-gantt-row-name input { flex-shrink:0; }.xmind-gantt-task-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; }.xmind-gantt-date { font-size:11px; text-align:left; padding:0 8px; }
+.xmind-gantt-timeline { overflow:auto; }.xmind-gantt-grid { position:relative; background-image:linear-gradient(to right,#e7e9ee 1px,transparent 1px),linear-gradient(to bottom,#e7e9ee 1px,transparent 1px); background-position:0 64px; }.xmind-gantt-calendar { position:sticky; top:0; z-index:5; background:#fafbfc; border-bottom:1px solid #e2e5eb; }.xmind-gantt-day { position:absolute; top:0; height:64px; display:flex; flex-direction:column; justify-content:space-around; align-items:center; border-right:1px solid #e2e5eb; white-space:nowrap; overflow:hidden; }.xmind-gantt-day span { font-size:10px; color:#8b929d; }.xmind-gantt-day b { font-weight:500; }.xmind-gantt-today { position:absolute; bottom:0; width:2px; background:#fa603b; pointer-events:none; z-index:2; }.xmind-gantt-connections { position:absolute; inset:0; pointer-events:none; z-index:2; }.xmind-gantt-bar { position:absolute; height:26px; border-radius:16px; background:#fac28a; cursor:grab; touch-action:none; z-index:3; overflow:hidden; min-width:6px; border:1px solid #f5b978; }.xmind-gantt-bar:focus { outline:2px solid #3569e8; outline-offset:2px; }.xmind-gantt-progress { position:absolute; inset:0 auto 0 0; background:#f3a660; }.xmind-gantt-bar.is-complete { background:#b8dcca; border-color:#68a986; }.xmind-gantt-bar.is-complete .xmind-gantt-progress { background:#86b99b; }.xmind-gantt-bar.is-summary { height:10px; margin-top:4px; background:#667387; border-color:#667387; cursor:default; }.xmind-gantt-bar-label { position:relative; display:flex; align-items:center; gap:8px; padding:0 6px; height:24px; color:#72491f; font-size:11px; pointer-events:none; white-space:nowrap; }
+.xmind-gantt-bar-label>span:last-child { flex:1; overflow:hidden; text-overflow:ellipsis; text-align:center; }
+.xmind-gantt-avatar { width:18px; height:18px; border-radius:50%; background:#eceff1; color:#939ba2; display:grid; place-items:center; flex-shrink:0; }
+.xmind-gantt-selection { position:absolute; left:0; background:rgb(125 136 148 / .15); pointer-events:none; z-index:1; }
+.xmind-gantt-bar[aria-pressed=true] { outline:2px solid #539efa; outline-offset:1px; }.xmind-gantt-bar.is-summary .xmind-gantt-bar-label { display:none; }.xmind-gantt-resize { position:absolute; top:0; bottom:0; width:6px; cursor:ew-resize; z-index:4; }.xmind-gantt-resize.is-start { left:0; }.xmind-gantt-resize.is-due { right:0; }
+.xmind-gantt-empty { min-height:300px; height:70%; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#a0a6af; gap:10px; }.xmind-gantt-empty strong { font-size:15px; color:#424852; }.xmind-gantt-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:32px; padding:0 16px; color:#7d8592; font-size:11px; }
+@media(max-width:800px) { .xmind-gantt-title>span { display:none; }.xmind-gantt-body { grid-template-columns:260px minmax(0,1fr); gap:6px; padding:0 6px; }.xmind-gantt-table-head,.xmind-gantt-row { grid-template-columns:minmax(0,1fr) 84px 42px; }.xmind-gantt-actions { gap:5px; }.xmind-gantt-toolbar { padding:8px; }.xmind-gantt-zoom input { width:50px; } }
+@media print { .xmind-workspace:has(.xmind-gantt)>:not(.xmind-gantt) { display:none!important; }.xmind-gantt { position:fixed; background:white; }.xmind-gantt-toolbar button,.xmind-gantt-actions,.xmind-gantt-filters,.xmind-gantt-footer { display:none; }.xmind-gantt-timeline,.xmind-gantt-row-scroll { overflow:visible; }.xmind-gantt-body { overflow:visible; }.xmind-gantt-table { overflow:visible; }.xmind-gantt-row-name input { display:none; } }
+
+.xmind-gantt-grid { min-height:100%; }
+.xmind-gantt-day { top:28px; height:36px; }
+.xmind-gantt-month { position:absolute; top:0; height:28px; padding:6px 12px; text-align:center; color:#7d8592; border-right:1px solid #e2e5eb; border-bottom:1px solid #e2e5eb; white-space:nowrap; overflow:hidden; }
+
+.xmind-topic-badges { position:absolute; inset:0; pointer-events:none; z-index:12; overflow:hidden; }
+.xmind-topic-badge { position:absolute; display:flex; align-items:center; gap:2px; pointer-events:auto; }
+.xmind-topic-badge button { display:grid; place-items:center; width:19px; height:19px; background:rgb(255 255 255 / .9); border-radius:4px; color:#8b929d; }
+.xmind-topic-badge button:hover { background:#edf3ff; color:#3569e8; }
+
+.xmind-note-content p:not([data-note-list=number]) { counter-reset:note-number; }
+
+.xmind-gantt-day-off { position:absolute; background:rgb(111 124 139 / .09); pointer-events:none; z-index:0; }
+.xmind-gantt-day.is-day-off { color:#929aa6; background:#eef0f3; }
+.xmind-task-calendar-info { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:12px 0; color:#7d8592; font-size:11px; }
+.xmind-task-calendar-info button { padding:6px 10px; border:1px solid #dce1e8; border-radius:6px; background:#f7f8fa; color:#3b4452; }
+.xmind-project-calendar-backdrop,.xmind-calendar-exception-backdrop { position:absolute; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; background:rgb(29 36 46 / .22); padding:16px; }
+.xmind-calendar-exception-backdrop { position:fixed; z-index:110; }
+.xmind-project-calendar,.xmind-calendar-exception { display:flex; flex-direction:column; width:740px; max-width:100%; max-height:calc(100svh - 32px); color:#343b48; font-size:12px; background:#f7f8fa; border:1px solid #dce1e8; border-radius:14px; box-shadow:0 18px 60px rgb(0 0 0 / .17); overflow:hidden; }
+.xmind-project-calendar>header,.xmind-calendar-exception>header { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:18px 20px; }
+.xmind-project-calendar h2,.xmind-calendar-exception h2 { display:flex; align-items:center; gap:9px; font-size:16px; font-weight:600; }
+.xmind-project-calendar>header p { margin-top:6px; font-size:11px; color:#8b929d; }
+.xmind-project-calendar>header button,.xmind-calendar-exception>header button { padding:4px; border-radius:5px; }
+.xmind-project-calendar-content { display:grid; grid-template-columns:290px minmax(0,1fr); gap:12px; padding:0 20px 18px; min-height:0; overflow:auto; }
+.xmind-calendar-preview,.xmind-calendar-settings { padding:15px; border:1px solid #e0e4ea; border-radius:10px; background:#fff; }
+.xmind-project-calendar label,.xmind-calendar-exception label { display:flex; flex-direction:column; gap:6px; font-size:11px; }
+.xmind-project-calendar input:not([type=checkbox]),.xmind-project-calendar select,.xmind-calendar-exception input,.xmind-calendar-exception select { height:31px; padding:0 9px; border:1px solid #dce1e8; background:#fff; border-radius:6px; font-size:12px; outline:none; min-width:0; width:100%; }
+.xmind-project-calendar input:focus,.xmind-project-calendar select:focus,.xmind-calendar-exception input:focus,.xmind-calendar-exception select:focus { border-color:#6592ef; box-shadow:0 0 0 2px rgb(53 105 232 / .1); }
+.xmind-project-calendar h3 { font-size:12px; font-weight:600; }
+.xmind-calendar-import { display:flex; align-items:flex-end; gap:8px; margin-bottom:18px; }.xmind-calendar-import label { flex:1; min-width:0; }.xmind-calendar-import>button { color:#3569e8; font-size:11px; margin-bottom:8px; }
+.xmind-calendar-month-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:9px; }.xmind-calendar-month-header button { padding:5px; }.xmind-calendar-month-header strong { font-weight:500; }
+.xmind-calendar-month-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; }.xmind-calendar-month-grid>button,.xmind-calendar-weekday { height:29px; display:grid; place-items:center; border-radius:5px; font-size:11px; }
+.xmind-calendar-weekday { color:#8b929d; }.xmind-calendar-month-grid .is-day-off { background:repeating-linear-gradient(135deg,#f1f3f6,#f1f3f6 3px,#e9ecf0 3px,#e9ecf0 4px); color:#89929e; }.xmind-calendar-month-grid .is-other-month { opacity:.4; }.xmind-calendar-month-grid>button[aria-pressed=true] { background:#edf3ff; box-shadow:inset 0 0 0 1px #6592ef; color:#3569e8; }
+.xmind-calendar-hint { color:#929aa6; font-size:10px; line-height:1.6; margin-top:9px; }
+.xmind-project-calendar .xmind-calendar-skip { flex-direction:row; align-items:center; gap:7px; margin:18px 0; font-size:12px; }.xmind-calendar-working-week { display:flex; justify-content:space-between; gap:5px; padding:12px 0 18px; border-bottom:1px solid #e9edf2; }.xmind-calendar-working-week label { align-items:center; }
+.xmind-calendar-rule-heading { display:flex; align-items:center; justify-content:space-between; margin:16px 0 9px; }.xmind-calendar-rule-heading button { padding:5px; background:#f2f4f7; border-radius:5px; }.xmind-calendar-rules { max-height:225px; overflow:auto; }.xmind-calendar-rules>div { display:flex; justify-content:space-between; align-items:center; gap:7px; padding:9px 0; border-bottom:1px solid #eef0f4; }.xmind-calendar-rules>div>button:first-child { flex:1; text-align:left; min-width:0; }.xmind-calendar-rules strong,.xmind-calendar-rules span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.xmind-calendar-rules strong { font-weight:500; }.xmind-calendar-rules span { font-size:10px; color:#8b929d; margin-top:5px; }.xmind-calendar-rules>div>button:last-child { padding:6px; color:#8b929d; }.xmind-calendar-rules>p { color:#929aa6; font-size:11px; padding:10px 0; }
+.xmind-project-calendar>footer,.xmind-calendar-exception>footer { padding:13px 20px; display:flex; justify-content:space-between; gap:10px; border-top:1px solid #e2e6ec; background:#fff; }.xmind-project-calendar>footer>div { display:flex; gap:8px; }.xmind-project-calendar>footer button,.xmind-calendar-exception>footer button,.xmind-calendar-personal>button { padding:8px 12px; border:1px solid #dce1e8; border-radius:6px; font-size:11px; }.xmind-project-calendar>footer .xmind-primary-button,.xmind-calendar-exception>footer .xmind-primary-button { border-color:#3569e8; }
+.xmind-calendar-personal { border-top:1px solid #e6e9ee; margin-top:14px; padding-top:12px; }.xmind-calendar-personal p { color:#929aa6; font-size:10px; margin:7px 0; }.xmind-calendar-personal>div { display:flex; justify-content:space-between; align-items:center; margin:9px 0; }.xmind-calendar-personal>label { margin:12px 0 8px; }
+.xmind-calendar-exception { width:420px; }.xmind-calendar-exception-fields { display:flex; flex-direction:column; gap:12px; padding:0 20px 20px; overflow:auto; }.xmind-calendar-range { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.xmind-calendar-exception>footer { justify-content:flex-end; }
+@media(max-width:700px) { .xmind-project-calendar-content { grid-template-columns:1fr; }.xmind-calendar-preview { max-width:360px; width:100%; justify-self:center; }.xmind-project-calendar>footer { flex-wrap:wrap; }.xmind-project-calendar>footer>div:last-child { margin-left:auto; } }
+
+.xmind-notes-popover { position:absolute; z-index:40; width:min(360px,calc(100vw - 32px)); padding:8px; background:#fafbfc; border:1px solid #e5e8ed; border-radius:18px; box-shadow:0 14px 44px rgb(0 0 0 / .14); color:#30343b; }
+.xmind-notes-popover>header { display:flex; align-items:center; justify-content:space-between; padding:0 6px; height:24px; font-size:11px; color:#9198a3; }.xmind-notes-popover>header>span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.xmind-notes-popover>header>div { display:flex; align-items:center; gap:8px; }
+.xmind-notes-popover .xmind-notes-editor { border:0; border-radius:12px; }.xmind-notes-popover .xmind-notes-toolbar { border-bottom:0; padding:4px; }.xmind-notes-popover .xmind-note-content { min-height:220px; max-height:280px; padding:8px; }.xmind-note-empty { min-height:220px; padding:16px; font-size:12px; color:#8b929d; }
+
+.xmind-image-export { width:400px; max-width:calc(100vw - 32px); border:1px solid #e5e5e8; border-radius:14px; padding:24px; color:#303034; background:white; box-shadow:0 18px 60px #0002; font:14px NeverMind,Arial,"PingFang SC",sans-serif; }
+.xmind-image-export::backdrop { background:#0004; }
+.xmind-image-export header,.xmind-image-export footer { display:flex; align-items:center; justify-content:space-between; gap:12px; }
+.xmind-image-export h2 { margin:0; font-size:18px; font-weight:600; }
+.xmind-image-export p { color:#737378; margin:18px 0 24px; line-height:1.6; }
+.xmind-image-export button { display:inline-flex; gap:7px; align-items:center; justify-content:center; min-height:34px; border:0; border-radius:7px; padding:7px 12px; background:#f2f2f4; color:inherit; cursor:pointer; }
+.xmind-image-export button:disabled { opacity:.55; cursor:wait; }
+.xmind-image-export button.xmind-primary-button { background:#2463eb; color:white; }
+.xmind-image-export-field { display:flex; align-items:center; justify-content:space-between; gap:20px; }
+.xmind-image-export select { width:220px; height:36px; background:white; border:1px solid #dcdce2; border-radius:7px; padding:0 10px; color:inherit; }
+.xmind-image-export-check { display:flex; align-items:center; gap:8px; margin:20px 0 28px; }
+.xmind-image-export-check input { accent-color:#2463eb; }
+.xmind-image-export footer { justify-content:flex-end; }

components/flow-board/xmind-notes-editor.tsx

@@ -0,0 +1,318 @@
+"use client";
+import {
+  Bold,
+  Italic,
+  Underline,
+  Strikethrough,
+  List,
+  ListOrdered,
+  Link2,
+  X,
+} from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import {
+  createEditor,
+  Editor,
+  Element,
+  Transforms,
+  type Descendant,
+} from "slate";
+import { withHistory } from "slate-history";
+import {
+  Editable,
+  Slate,
+  withReact,
+  ReactEditor,
+  type RenderElementProps,
+  type RenderLeafProps,
+} from "slate-react";
+import {
+  type NoteDocument,
+  type NoteParagraph,
+  safeNoteLink,
+  serializeNoteDocument,
+} from "@/lib/flow-board/topic-notes";
+
+export function XmindNotesEditor({
+  value,
+  onChange,
+}: {
+  value: NoteDocument;
+  onChange: (value: NoteDocument) => void;
+}) {
+  const [editor] = useState(() => withHistory(withReact(createEditor())));
+  const sourceRef = useRef(value);
+  sourceRef.current = value;
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const [revision, setRevision] = useState(0);
+  const [linkOpen, setLinkOpen] = useState(false),
+    [link, setLink] = useState("");
+  const [linkError, setLinkError] = useState("");
+  const savedSelection = useRef(editor.selection);
+  useEffect(() => {
+    if (
+      JSON.stringify(serializeNoteDocument(editor.children as NoteDocument)) ===
+      JSON.stringify(serializeNoteDocument(value))
+    )
+      return;
+    editor.children = value as Descendant[];
+    editor.selection = null;
+    editor.history = { undos: [], redos: [] };
+    editor.onChange();
+  }, [editor, value]);
+  const marks = Editor.marks(editor) as Record<string, unknown> | null;
+  // Toolbar presses can arrive before Slate's throttled selection listener.
+  const syncDOMSelection = () => {
+    const selection = window.getSelection();
+    if (
+      !selection?.anchorNode ||
+      !ReactEditor.hasDOMNode(editor, selection.anchorNode)
+    )
+      return;
+    const range = ReactEditor.toSlateRange(editor, selection, {
+      exactMatch: false,
+      suppressThrow: true,
+    });
+    if (range) Transforms.select(editor, range);
+  };
+  const toggleMark = (
+    mark: "bold" | "italic" | "underline" | "strikethrough"
+  ) => {
+    syncDOMSelection();
+    const currentMarks = Editor.marks(editor) as Record<string, unknown> | null;
+    if (currentMarks?.[mark]) Editor.removeMark(editor, mark);
+    else Editor.addMark(editor, mark, true);
+    setRevision((v) => v + 1);
+  };
+  const toggleList = (list: "bullet" | "number") => {
+    syncDOMSelection();
+    const match = Array.from(
+      Editor.nodes(editor, { match: (n) => Element.isElement(n) })
+    )[0];
+    Transforms.setNodes(
+      editor,
+      {
+        list: (match?.[0] as NoteParagraph)?.list === list ? undefined : list,
+      } as Partial<Descendant>,
+      { match: (n) => Element.isElement(n) }
+    );
+  };
+  const applyLink = () => {
+    const href = link.trim() ? safeNoteLink(link.trim()) : "";
+    if (href === null) {
+      setLinkError("请输入完整的网页或邮件链接。");
+      return;
+    }
+    if (savedSelection.current)
+      Transforms.select(editor, savedSelection.current);
+    if (href) Editor.addMark(editor, "href", href);
+    else Editor.removeMark(editor, "href");
+    setLinkOpen(false);
+    editor.onChange();
+  };
+  const leaf = ({ attributes, children, leaf }: RenderLeafProps) => {
+    const t = leaf as {
+      bold?: boolean;
+      italic?: boolean;
+      underline?: boolean;
+      strikethrough?: boolean;
+      href?: string;
+    };
+    const href = safeNoteLink(t.href || "");
+    return (
+      <span
+        {...attributes}
+        style={{
+          fontWeight: t.bold ? 700 : undefined,
+          fontStyle: t.italic ? "italic" : undefined,
+          textDecoration:
+            [
+              t.underline ? "underline" : "",
+              t.strikethrough ? "line-through" : "",
+            ]
+              .filter(Boolean)
+              .join(" ") || undefined,
+        }}
+      >
+        {href ? (
+          <a
+            href={href}
+            title={href}
+            rel="noopener noreferrer"
+            onClick={(e) => {
+              if (!e.metaKey && !e.ctrlKey) e.preventDefault();
+            }}
+            target="_blank"
+          >
+            {children}
+          </a>
+        ) : (
+          children
+        )}
+      </span>
+    );
+  };
+  const element = ({ attributes, children, element }: RenderElementProps) => {
+    const p = element as NoteParagraph;
+    return (
+      <p
+        {...attributes}
+        data-note-list={p.list}
+        style={{ marginLeft: Math.max(0, Math.min(120, p.indent || 0)) }}
+      >
+        {children}
+      </p>
+    );
+  };
+  return (
+    <div className="xmind-notes-editor" data-editor-revision={revision}>
+      <Slate
+        editor={editor}
+        initialValue={value as Descendant[]}
+        onChange={(next) => {
+          setRevision((v) => v + 1);
+          if (editor.operations.every((o) => o.type === "set_selection"))
+            return;
+          const doc = next as NoteDocument;
+          if (
+            JSON.stringify(serializeNoteDocument(doc)) !==
+            JSON.stringify(serializeNoteDocument(sourceRef.current))
+          )
+            onChangeRef.current(doc);
+        }}
+      >
+        <div
+          className="xmind-notes-toolbar"
+          role="toolbar"
+          aria-label="笔记格式"
+        >
+          {(
+            [
+              ["bold", "加粗", Bold],
+              ["italic", "斜体", Italic],
+              ["underline", "下划线", Underline],
+              ["strikethrough", "删除线", Strikethrough],
+            ] as const
+          ).map(([mark, label, Icon]) => (
+            <button
+              key={mark}
+              type="button"
+              aria-label={`笔记${label}`}
+              aria-pressed={Boolean(marks?.[mark])}
+              onMouseDown={(e) => {
+                e.preventDefault();
+                toggleMark(mark);
+              }}
+            >
+              <Icon size={17} />
+            </button>
+          ))}
+          <button
+            type="button"
+            aria-label="笔记无序列表"
+            onMouseDown={(e) => {
+              e.preventDefault();
+              toggleList("bullet");
+            }}
+          >
+            <List size={17} />
+          </button>
+          <button
+            type="button"
+            aria-label="笔记有序列表"
+            onMouseDown={(e) => {
+              e.preventDefault();
+              toggleList("number");
+            }}
+          >
+            <ListOrdered size={17} />
+          </button>
+          <button
+            type="button"
+            aria-label="笔记链接"
+            onMouseDown={(e) => {
+              e.preventDefault();
+              syncDOMSelection();
+              savedSelection.current = editor.selection;
+              setLink(String(marks?.href || ""));
+              setLinkError("");
+              setLinkOpen(!linkOpen);
+            }}
+          >
+            <Link2 size={17} />
+          </button>
+        </div>
+        {linkOpen ? (
+          <div className="xmind-note-link-form">
+            <input
+              aria-label="笔记链接地址"
+              placeholder="https://…"
+              value={link}
+              onChange={(e) => setLink(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  applyLink();
+                }
+              }}
+            />
+            <button type="button" onClick={applyLink}>
+              确定
+            </button>
+            <button
+              type="button"
+              aria-label="取消笔记链接"
+              onClick={() => setLinkOpen(false)}
+            >
+              <X size={14} />
+            </button>
+            {linkError ? <p role="alert">{linkError}</p> : null}
+          </div>
+        ) : null}
+        <Editable
+          aria-label="主题备注"
+          className="xmind-note-content"
+          placeholder="为这个主题补充说明…"
+          renderLeaf={leaf}
+          renderElement={element}
+          onKeyDown={(e) => {
+            if (
+              (e.metaKey || e.ctrlKey) &&
+              ["b", "i", "u"].includes(e.key.toLowerCase())
+            ) {
+              e.preventDefault();
+              toggleMark(
+                (
+                  { b: "bold", i: "italic", u: "underline" } as Record<
+                    string,
+                    "bold" | "italic" | "underline"
+                  >
+                )[e.key.toLowerCase()]
+              );
+            }
+            if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "z")
+              e.stopPropagation();
+            if (e.key === "Tab") {
+              e.preventDefault();
+              const match = Array.from(
+                Editor.nodes(editor, { match: (n) => Element.isElement(n) })
+              )[0];
+              const indent = (match?.[0] as NoteParagraph)?.indent || 0;
+              Transforms.setNodes(
+                editor,
+                {
+                  indent: Math.max(
+                    0,
+                    Math.min(120, indent + (e.shiftKey ? -20 : 20))
+                  ),
+                } as Partial<Descendant>,
+                { match: (n) => Element.isElement(n) }
+              );
+            }
+          }}
+        />
+      </Slate>
+    </div>
+  );
+}

components/flow-board/xmind-notes-popover.tsx

@@ -0,0 +1,111 @@
+"use client";
+import {
+  type PlaitBoard,
+  type PlaitElement,
+  toHostPointFromViewBoxPoint,
+  toScreenPointFromHostPoint,
+} from "@plait/core";
+import { getRectangleByNode, MindElement } from "@plait/mind";
+import { MoreHorizontal, X } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import {
+  getNoteDocument,
+  type NoteDocument,
+} from "@/lib/flow-board/topic-notes";
+import { getTopicTitle } from "@/lib/flow-board/topic-details";
+import { XmindNotesEditor } from "./xmind-notes-editor";
+export function XmindNotesPopover({
+  board,
+  topic,
+  viewport,
+  onChange,
+  onDetails,
+  onClose,
+}: {
+  board: PlaitBoard | null;
+  topic: PlaitElement | null;
+  viewport: unknown;
+  onChange: (doc: NoteDocument) => void;
+  onDetails: () => void;
+  onClose: () => void;
+}) {
+  const ref = useRef<HTMLElement>(null);
+  const [position, setPosition] = useState({ left: 400, top: 300 });
+  useEffect(() => {
+    if (!board || !topic) return;
+    const update = () => {
+      const node = MindElement.getNode(topic as MindElement);
+      if (!node) return;
+      const rect = getRectangleByNode(node),
+        point = toScreenPointFromHostPoint(
+          board,
+          toHostPointFromViewBoxPoint(board, [
+            rect.x + rect.width / 2,
+            rect.y + rect.height,
+          ])
+        );
+      const host = ref.current?.parentElement?.getBoundingClientRect();
+      const width = Math.min(360, window.innerWidth - 32);
+      const right = window.innerWidth > 800 ? 240 : 0;
+      const left = Math.max(
+        12,
+        Math.min(window.innerWidth - right - width - 16, point[0] - width / 2)
+      );
+      const top = Math.max(
+        78,
+        Math.min(window.innerHeight - 340, point[1] + 12)
+      );
+      setPosition({ left: left - (host?.x || 0), top: top - (host?.y || 0) });
+    };
+    const frame = requestAnimationFrame(update);
+    window.addEventListener("resize", update);
+    return () => {
+      cancelAnimationFrame(frame);
+      window.removeEventListener("resize", update);
+    };
+  }, [board, topic?.id, topic?.data, viewport]);
+  return (
+    <aside
+      ref={ref}
+      className="xmind-notes-popover"
+      aria-label="主题笔记"
+      style={position}
+      data-flow-board-shell-control="true"
+      onKeyDown={(e) => {
+        if (e.key === "Escape") {
+          e.preventDefault();
+          e.stopPropagation();
+          onClose();
+        }
+      }}
+    >
+      <header>
+        <span title={topic ? getTopicTitle(topic) : "笔记"}>
+          {topic ? getTopicTitle(topic) : "笔记"}
+        </span>
+        <div>
+          <button
+            type="button"
+            aria-label="主题详情"
+            title="主题详情"
+            onClick={onDetails}
+          >
+            <MoreHorizontal size={15} />
+          </button>
+          <button type="button" aria-label="关闭笔记" onClick={onClose}>
+            <X size={15} />
+          </button>
+        </div>
+      </header>
+      {topic ? (
+        <XmindNotesEditor
+          key={topic.id}
+          value={getNoteDocument(topic)}
+          onChange={onChange}
+        />
+      ) : (
+        <p className="xmind-note-empty">选择一个主题以编辑笔记。</p>
+      )}
+    </aside>
+  );
+}

components/flow-board/xmind-outline.tsx

@@ -0,0 +1,310 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import {
+  ArrowDown,
+  ArrowUp,
+  ChevronDown,
+  ChevronRight,
+  GripVertical,
+  IndentDecrease,
+  IndentIncrease,
+  Plus,
+  Trash2,
+} from "lucide-react";
+import type { PlaitElement } from "@plait/core";
+import {
+  getTopicDetails,
+  getTopicEntries,
+  type TopicEntry,
+} from "@/lib/flow-board/topic-details";
+import type {
+  OutlineCommand,
+  OutlineDrop,
+} from "@/lib/flow-board/mind-outline";
+
+type Props = {
+  zoomPercent: number;
+  elements: PlaitElement[];
+  selectedId: string | null;
+  onSelect: (id: string) => void;
+  onRename: (id: string, title: string) => void;
+  onToggle: (id: string) => void;
+  onCommand: (
+    id: string | null,
+    command: OutlineCommand | OutlineDrop
+  ) => string | null;
+  onUndo: () => void;
+  onRedo: () => void;
+};
+
+function OutlineRow({
+  entry,
+  selected,
+  onSelect,
+  onRename,
+  onToggle,
+  onCommand,
+  onFocusTopic,
+}: {
+  entry: TopicEntry;
+  selected: boolean;
+  onSelect: Props["onSelect"];
+  onRename: Props["onRename"];
+  onToggle: Props["onToggle"];
+  onCommand: Props["onCommand"];
+  onFocusTopic: (id: string | null, direction?: number) => void;
+}) {
+  const { element, title, depth } = entry;
+  const [draft, setDraft] = useState(title);
+  const [drop, setDrop] = useState<OutlineDrop["placement"] | null>(null);
+  const ref = useRef<HTMLInputElement>(null);
+  const details = getTopicDetails(element);
+  useEffect(() => setDraft(title), [title]);
+  const commit = () => {
+    if (draft !== title) onRename(element.id, draft);
+  };
+  const act = (command: OutlineCommand) => {
+    commit();
+    onFocusTopic(onCommand(element.id, command));
+  };
+  return (
+    <div
+      data-outline-id={element.id}
+      data-depth={depth}
+      className={`group flex min-h-11 items-center gap-1 border-b border-[#f1f2f5] px-3 ${selected ? "bg-[#f0f5ff]" : "hover:bg-[#fafbfc]"} ${drop === "child" ? "ring-1 ring-inset ring-blue-400" : drop === "before" ? "border-t-2 border-t-blue-400" : drop === "after" ? "border-b-2 border-b-blue-400" : ""}`}
+      style={{ paddingLeft: 12 + Math.min(depth, 20) * 24 }}
+      onDragOver={(event) => {
+        event.preventDefault();
+        const box = event.currentTarget.getBoundingClientRect();
+        const y = (event.clientY - box.top) / box.height;
+        setDrop(y < 0.25 ? "before" : y > 0.75 ? "after" : "child");
+      }}
+      onDragLeave={() => setDrop(null)}
+      onDrop={(event) => {
+        event.preventDefault();
+        const source = event.dataTransfer.getData("application/x-mind-topic");
+        if (source && drop)
+          onFocusTopic(
+            onCommand(source, { targetId: element.id, placement: drop })
+          );
+        setDrop(null);
+      }}
+    >
+      <span
+        draggable
+        aria-label={`拖动 ${title}`}
+        className="cursor-grab text-[#9ca3af] opacity-30 group-hover:opacity-100"
+        onDragStart={(event) => {
+          event.dataTransfer.setData("application/x-mind-topic", element.id);
+          event.dataTransfer.effectAllowed = "move";
+        }}
+      >
+        <GripVertical size={13} />
+      </span>
+      {element.children?.length ? (
+        <button
+          type="button"
+          className="p-1 text-[#64748b]"
+          aria-label={`${element.isCollapsed ? "展开" : "折叠"} ${title}`}
+          onClick={() => onToggle(element.id)}
+        >
+          {element.isCollapsed ? (
+            <ChevronRight size={14} />
+          ) : (
+            <ChevronDown size={14} />
+          )}
+        </button>
+      ) : (
+        <span className="w-[22px] text-center text-[#a2a9b3]">·</span>
+      )}
+      <input
+        ref={ref}
+        aria-label={`大纲主题 ${title}`}
+        data-outline-input={element.id}
+        className={`min-w-0 flex-1 bg-transparent py-2 text-sm outline-none ${depth === 0 ? "font-semibold text-[#253046]" : "text-[#404958]"}`}
+        value={draft}
+        onChange={(event) => setDraft(event.target.value)}
+        onFocus={() => onSelect(element.id)}
+        onBlur={commit}
+        onKeyDown={(event) => {
+          if (event.nativeEvent.isComposing) return;
+          if (event.key === "Enter") {
+            event.preventDefault();
+            act(event.shiftKey || depth === 0 ? "child" : "sibling");
+          } else if (event.key === "Tab") {
+            event.preventDefault();
+            act(event.shiftKey ? "outdent" : "indent");
+          } else if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+            event.preventDefault();
+            commit();
+            if (event.altKey) act(event.key === "ArrowUp" ? "up" : "down");
+            else onFocusTopic(element.id, event.key === "ArrowUp" ? -1 : 1);
+          } else if (event.key === "Escape") {
+            event.preventDefault();
+            setDraft(title);
+          } else if (
+            (event.metaKey || event.ctrlKey) &&
+            event.key.toLowerCase() === "z" &&
+            draft !== title
+          ) {
+            event.preventDefault();
+            event.stopPropagation();
+            setDraft(title);
+          } else if (event.key === "Backspace" && !draft) {
+            event.preventDefault();
+            onFocusTopic(onCommand(element.id, "delete"));
+          }
+        }}
+      />
+      {Number.isInteger(element.start) ? (
+        <span className="text-[10px] text-[#8d79b2]">概要</span>
+      ) : null}
+      {details.notes ? (
+        <span title={details.notes} className="text-[10px] text-[#8a94a5]">
+          备注
+        </span>
+      ) : null}
+      {details.labels.map((label) => (
+        <span
+          key={label}
+          className="hidden rounded bg-[#e8effc] px-1.5 py-0.5 text-[10px] text-[#5879b4] lg:inline"
+        >
+          {label}
+        </span>
+      ))}
+      <button
+        type="button"
+        aria-label={`为 ${title} 添加子主题`}
+        className="p-1 text-[#8a94a5] opacity-0 focus:opacity-100 group-hover:opacity-100"
+        onClick={() => act("child")}
+      >
+        <Plus size={14} />
+      </button>
+    </div>
+  );
+}
+
+export function XmindOutline(props: Props) {
+  const { elements, selectedId, onCommand } = props;
+  const container = useRef<HTMLElement>(null);
+  const [focusId, setFocusId] = useState<string | null>(null);
+  const entries = getTopicEntries(elements);
+  const collapsedPaths = entries
+    .filter(({ element }) => element.isCollapsed)
+    .map((entry) => entry.path);
+  const visible = entries.filter(
+    (entry) =>
+      !collapsedPaths.some(
+        (path) =>
+          path.length < entry.path.length &&
+          path.every((index, i) => index === entry.path[i])
+      )
+  );
+  useEffect(() => {
+    if (!focusId) return;
+    const input = Array.from(
+      container.current?.querySelectorAll<HTMLInputElement>(
+        "[data-outline-input]"
+      ) || []
+    ).find((node) => node.dataset.outlineInput === focusId);
+    if (input) {
+      input.focus();
+      input.select();
+      setFocusId(null);
+    }
+  }, [focusId, elements]);
+  const focusTopic = (id: string | null, direction?: number) => {
+    if (!id) return;
+    const target = direction
+      ? visible[
+          visible.findIndex((entry) => entry.element.id === id) + direction
+        ]?.element.id
+      : id;
+    if (target) setFocusId(target);
+  };
+  const action = (command: OutlineCommand) =>
+    focusTopic(onCommand(selectedId, command));
+  return (
+    <section
+      ref={container}
+      aria-label="大纲视图"
+      className="h-full overflow-auto bg-white"
+      data-flow-board-shell-control="true"
+      onKeyDown={(event) => {
+        event.stopPropagation();
+        if (
+          (event.metaKey || event.ctrlKey) &&
+          event.key.toLowerCase() === "z"
+        ) {
+          event.preventDefault();
+          if (event.shiftKey) props.onRedo();
+          else props.onUndo();
+        }
+      }}
+    >
+      <div className="sticky top-0 z-10 flex flex-wrap items-center gap-1 border-b border-[#e5e8ee] bg-white px-5 py-3">
+        <h2 className="mr-2 text-sm font-semibold">大纲</h2>
+        <span className="mr-auto text-xs text-[#949ba7]">
+          {entries.length} 个主题
+        </span>
+        {(
+          [
+            { command: "child", label: "大纲新增子主题", icon: Plus },
+            { command: "indent", label: "大纲缩进", icon: IndentIncrease },
+            { command: "outdent", label: "大纲提升层级", icon: IndentDecrease },
+            { command: "up", label: "大纲上移", icon: ArrowUp },
+            { command: "down", label: "大纲下移", icon: ArrowDown },
+            { command: "delete", label: "大纲删除主题", icon: Trash2 },
+          ] as const
+        ).map(({ command, label, icon: Icon }) => (
+          <button
+            key={command}
+            type="button"
+            title={label}
+            aria-label={label}
+            className="rounded p-1.5 text-[#64748b] hover:bg-[#edf3ff] disabled:opacity-30"
+            disabled={
+              (!selectedId && entries.length > 0) ||
+              (!selectedId && command !== "child")
+            }
+            onClick={() => action(command)}
+          >
+            <Icon size={16} />
+          </button>
+        ))}
+      </div>
+      <div
+        className="mx-auto max-w-4xl px-4 py-6"
+        style={{ zoom: props.zoomPercent / 100 }}
+      >
+        {!entries.length ? (
+          <button
+            type="button"
+            onClick={() => action("child")}
+            className="w-full rounded border border-dashed border-[#cbd5e1] p-8 text-sm text-[#64748b]"
+          >
+            添加中心主题
+          </button>
+        ) : (
+          visible.map((entry) => (
+            <OutlineRow
+              key={entry.element.id}
+              entry={entry}
+              selected={entry.element.id === selectedId}
+              onSelect={props.onSelect}
+              onRename={props.onRename}
+              onToggle={props.onToggle}
+              onCommand={onCommand}
+              onFocusTopic={focusTopic}
+            />
+          ))
+        )}
+        <p className="mt-6 text-xs text-[#a1a8b4]">
+          Enter 新增同级 · Shift+Enter 新增子主题 · Tab 缩进 · Shift+Tab
+          提升层级 · Alt+↑↓ 调整顺序
+        </p>
+      </div>
+    </section>
+  );
+}

components/flow-board/xmind-presentation.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { ChevronLeft, ChevronRight, X } from "lucide-react";
+import { useEffect, useState } from "react";
+import type { PlaitElement } from "@plait/core";
+import { getTopicEntries, getTopicTitle } from "@/lib/flow-board/topic-details";
+
+export function XmindPresentation({ elements, title, onClose }: { elements: PlaitElement[]; title: string; onClose: () => void }) {
+  const slides = getTopicEntries(elements).filter(({ element, depth }) => depth === 0 || element.children?.length);
+  const [index,setIndex] = useState(0);
+  const entry = slides[Math.min(index,slides.length - 1)];
+  const next = () => setIndex(value => Math.min(slides.length - 1,value + 1));
+  const previous = () => setIndex(value => Math.max(0,value - 1));
+  useEffect(() => {
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") { event.preventDefault(); onClose(); }
+      if (["ArrowRight","ArrowDown"," ","PageDown"].includes(event.key)) { event.preventDefault(); next(); }
+      if (["ArrowLeft","ArrowUp","PageUp"].includes(event.key)) { event.preventDefault(); previous(); }
+    };
+    window.addEventListener("keydown",onKey);
+    return () => window.removeEventListener("keydown",onKey);
+  }, [onClose,slides.length]);
+  return <section className="xmind-presentation" aria-label="演示视图" data-flow-board-shell-control="true">
+    <header><span>{title}</span><button type="button" aria-label="退出演示" onClick={onClose}><X size={16} />退出演示</button></header>
+    <div className="xmind-presentation-slide"><h1>{entry?.title || title}</h1><ul>{(entry?.element.children || []).map(child => <li key={child.id}>{getTopicTitle(child)}</li>)}</ul></div>
+    <footer><button type="button" aria-label="上一页" disabled={index === 0} onClick={previous}><ChevronLeft size={18} /></button><span>{Math.min(index + 1,slides.length)} / {slides.length}</span><button type="button" aria-label="下一页" disabled={index >= slides.length - 1} onClick={next}><ChevronRight size={18} /></button></footer>
+  </section>;
+}

components/flow-board/xmind-project-calendar.tsx

@@ -0,0 +1,650 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+import {
+  CalendarDays,
+  ChevronLeft,
+  ChevronRight,
+  Plus,
+  Trash2,
+  X,
+} from "lucide-react";
+import {
+  CALENDAR_FREQUENCIES,
+  defaultWorkingCalendar,
+  isWorkingDate,
+  readWorkingCalendar,
+  validateWorkingCalendar,
+  type CalendarRule,
+  type ProjectCalendarConfig,
+  type ProjectWorkingCalendar,
+} from "@/lib/flow-board/project-calendar";
+import {
+  addDays,
+  dateIndex,
+  DAY,
+  indexDate,
+  todayDate,
+} from "@/lib/flow-board/calendar-dates";
+const STORAGE_KEY = "flow-board.personal-calendars.v1";
+const WEEKDAYS = ["一", "二", "三", "四", "五", "六", "日"];
+const FREQUENCY_LABELS: Record<CalendarRule["frequency"], string> = {
+  NONE: "不重复",
+  DAILY: "每天",
+  WEEKLY: "每周",
+  MONTHLY_BY_DATE: "每月（按日期）",
+  MONTHLY_BY_WEEKDAY: "每月（按星期）",
+  YEARLY: "每年",
+};
+const copy = <T,>(value: T): T => JSON.parse(JSON.stringify(value));
+function useCalendarDialogFocus(ref: React.RefObject<HTMLElement | null>) {
+  useEffect(() => {
+    const previous = document.activeElement as HTMLElement | null;
+    ref.current?.querySelector<HTMLElement>("input,button")?.focus();
+    return () => {
+      if (previous?.isConnected) previous.focus();
+    };
+  }, [ref]);
+}
+function trapCalendarTab(
+  event: React.KeyboardEvent,
+  panel: HTMLElement | null
+) {
+  if (event.key !== "Tab") return;
+  const controls = Array.from(
+    panel?.querySelectorAll<HTMLElement>(
+      "button:not(:disabled),input:not(:disabled),select:not(:disabled)"
+    ) || []
+  );
+  const first = controls[0],
+    last = controls.at(-1);
+  if (event.shiftKey && document.activeElement === first) {
+    event.preventDefault();
+    last?.focus();
+  }
+  if (!event.shiftKey && document.activeElement === last) {
+    event.preventDefault();
+    first?.focus();
+  }
+}
+function CalendarExceptionEditor({
+  rule,
+  onSave,
+  onClose,
+}: {
+  rule: CalendarRule;
+  onSave: (rule: CalendarRule) => void;
+  onClose: () => void;
+}) {
+  const [draft, setDraft] = useState(() => copy(rule)),
+    [error, setError] = useState("");
+  const ref = useRef<HTMLElement>(null);
+  useCalendarDialogFocus(ref);
+  const patch = (changes: Partial<CalendarRule>) =>
+    setDraft((value) => ({ ...value, ...changes }));
+  const save = () => {
+    const problem = validateWorkingCalendar({
+      id: "validation",
+      name: "",
+      defaultWorkingDays: [1],
+      rules: [draft],
+    });
+    if (problem) {
+      setError(problem);
+      return;
+    }
+    const selected = draft.selectedDates[0];
+    if (
+      (draft.effectiveRange?.start && selected < draft.effectiveRange.start) ||
+      (draft.effectiveRange?.end && selected > draft.effectiveRange.end)
+    ) {
+      setError("例外日期必须在生效范围内。");
+      return;
+    }
+    onSave({ ...draft, name: draft.name.trim() || "例外" });
+    onClose();
+  };
+  return (
+    <div
+      className="xmind-calendar-exception-backdrop"
+      data-flow-board-shell-control="true"
+      onKeyUp={(event) => event.stopPropagation()}
+      onKeyDown={(event) => {
+        event.stopPropagation();
+        trapCalendarTab(event, ref.current);
+        if (event.key === "Escape") onClose();
+      }}
+    >
+      <section
+        ref={ref}
+        className="xmind-calendar-exception"
+        role="dialog"
+        aria-modal="true"
+        aria-label="工作日例外"
+      >
+        <header>
+          <h2>工作日例外</h2>
+          <button type="button" aria-label="关闭工作日例外" onClick={onClose}>
+            <X size={17} />
+          </button>
+        </header>
+        <div className="xmind-calendar-exception-fields">
+          <label>
+            名称
+            <input
+              aria-label="例外名称"
+              value={draft.name}
+              onChange={(event) => patch({ name: event.target.value })}
+            />
+          </label>
+          <label>
+            日期
+            <input
+              type="date"
+              aria-label="例外日期"
+              value={draft.selectedDates[0] || ""}
+              onChange={(event) =>
+                patch({ selectedDates: [event.target.value] })
+              }
+            />
+          </label>
+          <label>
+            类型
+            <select
+              aria-label="例外类型"
+              value={draft.type}
+              onChange={(event) =>
+                patch({ type: event.target.value as CalendarRule["type"] })
+              }
+            >
+              <option value="NON_WORKING_DAY">休息日</option>
+              <option value="WORKING_DAY">工作日（补班）</option>
+            </select>
+          </label>
+          <label>
+            重复
+            <select
+              aria-label="例外重复规则"
+              value={draft.frequency}
+              onChange={(event) =>
+                patch({
+                  frequency: event.target.value as CalendarRule["frequency"],
+                })
+              }
+            >
+              {CALENDAR_FREQUENCIES.map((frequency) => (
+                <option key={frequency} value={frequency}>
+                  {FREQUENCY_LABELS[frequency]}
+                </option>
+              ))}
+            </select>
+          </label>
+          {draft.frequency !== "NONE" ? (
+            <label>
+              每隔
+              <input
+                type="number"
+                min={1}
+                max={100}
+                aria-label="例外重复间隔"
+                value={draft.interval || 1}
+                onChange={(event) =>
+                  patch({ interval: Number(event.target.value) })
+                }
+              />
+            </label>
+          ) : null}
+          <div className="xmind-calendar-range">
+            <label>
+              生效开始
+              <input
+                type="date"
+                aria-label="例外生效开始"
+                value={draft.effectiveRange?.start || ""}
+                onChange={(event) =>
+                  patch({
+                    effectiveRange: {
+                      ...draft.effectiveRange,
+                      start: event.target.value,
+                    },
+                  })
+                }
+              />
+            </label>
+            <label>
+              生效结束
+              <input
+                type="date"
+                aria-label="例外生效结束"
+                value={draft.effectiveRange?.end || ""}
+                onChange={(event) =>
+                  patch({
+                    effectiveRange: {
+                      ...draft.effectiveRange,
+                      end: event.target.value,
+                    },
+                  })
+                }
+              />
+            </label>
+          </div>
+          <p className="xmind-calendar-hint">
+            留空表示不限制生效日期。后添加的例外优先。
+          </p>
+          {error ? (
+            <p role="alert" className="xmind-task-error">
+              {error}
+            </p>
+          ) : null}
+        </div>
+        <footer>
+          <button type="button" onClick={onClose}>
+            取消
+          </button>
+          <button type="button" className="xmind-primary-button" onClick={save}>
+            保存例外
+          </button>
+        </footer>
+      </section>
+    </div>
+  );
+}
+export function XmindProjectCalendar({
+  config,
+  onSave,
+  onClose,
+}: {
+  config: ProjectCalendarConfig;
+  onSave: (config: ProjectCalendarConfig) => boolean;
+  onClose: () => void;
+}) {
+  const ref = useRef<HTMLElement>(null);
+  useCalendarDialogFocus(ref);
+  const [draft, setDraft] = useState(() =>
+    copy(config.settings || defaultWorkingCalendar())
+  );
+  const [skip, setSkip] = useState(config.settings ? config.skip : true),
+    [error, setError] = useState("");
+  const [selectedDate, setSelectedDate] = useState(todayDate()),
+    [month, setMonth] = useState(todayDate().slice(0, 7));
+  const [exception, setException] = useState<CalendarRule | null>(null),
+    [manage, setManage] = useState(false);
+  const [templates, setTemplates] = useState<ProjectWorkingCalendar[]>(() => {
+    try {
+      const stored = JSON.parse(localStorage.getItem(STORAGE_KEY) || "[]");
+      return Array.isArray(stored)
+        ? stored
+            .map(readWorkingCalendar)
+            .filter((item): item is ProjectWorkingCalendar => Boolean(item))
+        : [];
+    } catch {
+      return [];
+    }
+  });
+  const [templateName, setTemplateName] = useState("");
+  const [message, setMessage] = useState("");
+  const storeTemplates = (value: ProjectWorkingCalendar[]) => {
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(value));
+      setTemplates(value);
+      return true;
+    } catch {
+      setError("个人日历保存失败，请检查浏览器存储空间。");
+      return false;
+    }
+  };
+  const save = () => {
+    const problem = validateWorkingCalendar(draft);
+    if (problem) {
+      setError(problem);
+      return;
+    }
+    if (
+      onSave({
+        settings: { ...draft, name: draft.name.trim() || "项目日历" },
+        skip,
+      })
+    )
+      onClose();
+  };
+  const saveTemplate = () => {
+    const problem = validateWorkingCalendar(draft);
+    if (problem) {
+      setError(problem);
+      return;
+    }
+    if (!templateName.trim()) {
+      setError("请输入个人日历名称。");
+      return;
+    }
+    const value = {
+      ...copy(draft),
+      id: crypto.randomUUID(),
+      name: templateName.trim(),
+    };
+    if (storeTemplates([...templates, value])) {
+      setTemplateName("");
+      setError("");
+      setMessage(`已保存个人日历：${value.name}`);
+    }
+  };
+  const moveMonth = (step: number) => {
+    const date = new Date(`${month}-01T00:00:00Z`);
+    date.setUTCMonth(date.getUTCMonth() + step);
+    setMonth(date.toISOString().slice(0, 7));
+  };
+  const first = dateIndex(`${month}-01`),
+    offset = (new Date(first * DAY).getUTCDay() + 6) % 7;
+  const days = Array.from({ length: 42 }, (_, index) =>
+    indexDate(first - offset + index)
+  );
+  const addException = () =>
+    setException({
+      id: crypto.randomUUID(),
+      name: "",
+      type: isWorkingDate(selectedDate, draft)
+        ? "NON_WORKING_DAY"
+        : "WORKING_DAY",
+      frequency: "NONE",
+      selectedDates: [selectedDate],
+      effectiveRange: { start: selectedDate, end: selectedDate },
+    });
+  return (
+    <div
+      className="xmind-project-calendar-backdrop"
+      data-flow-board-shell-control="true"
+      onKeyUp={(event) => event.stopPropagation()}
+      onKeyDown={(event) => {
+        event.stopPropagation();
+        if (exception) return;
+        trapCalendarTab(event, ref.current);
+        if (event.key === "Escape") onClose();
+      }}
+    >
+      <section
+        ref={ref}
+        className="xmind-project-calendar"
+        role="dialog"
+        aria-modal="true"
+        aria-label="项目工作日"
+      >
+        <header>
+          <div>
+            <h2>
+              <CalendarDays size={19} />
+              项目工作日
+            </h2>
+            <p>只应用于当前工作表，不影响其他工作表。</p>
+          </div>
+          <button type="button" aria-label="关闭项目工作日" onClick={onClose}>
+            <X size={18} />
+          </button>
+        </header>
+        <div className="xmind-project-calendar-content">
+          <div className="xmind-calendar-preview">
+            <div className="xmind-calendar-import">
+              <label>
+                导入日历
+                <select
+                  aria-label="导入个人日历"
+                  value=""
+                  onChange={(event) => {
+                    const value =
+                      event.target.value === "basic"
+                        ? { ...defaultWorkingCalendar(), name: "基本日历" }
+                        : templates.find(
+                            (item) => item.id === event.target.value
+                          );
+                    if (value) {
+                      setDraft(copy(value));
+                      setError("");
+                    }
+                  }}
+                >
+                  <option value="">当前项目：{draft.name}</option>
+                  <option value="basic">基本日历（周一至周五）</option>
+                  {templates.map((item) => (
+                    <option key={item.id} value={item.id}>
+                      {item.name}
+                    </option>
+                  ))}
+                </select>
+              </label>
+              <button
+                type="button"
+                onClick={() => setManage((value) => !value)}
+              >
+                管理
+              </button>
+            </div>
+            <div className="xmind-calendar-month-header">
+              <button
+                type="button"
+                aria-label="上个月"
+                onClick={() => moveMonth(-1)}
+              >
+                <ChevronLeft size={16} />
+              </button>
+              <strong>{month.replace("-", "年")}月</strong>
+              <button
+                type="button"
+                aria-label="下个月"
+                onClick={() => moveMonth(1)}
+              >
+                <ChevronRight size={16} />
+              </button>
+            </div>
+            <div className="xmind-calendar-month-grid" aria-label="工作日预览">
+              {WEEKDAYS.map((day) => (
+                <span className="xmind-calendar-weekday" key={day}>
+                  {day}
+                </span>
+              ))}
+              {days.map((date) => (
+                <button
+                  type="button"
+                  key={date}
+                  data-calendar-date={date}
+                  data-working={isWorkingDate(date, draft)}
+                  aria-label={`${date} ${isWorkingDate(date, draft) ? "工作日" : "休息日"}`}
+                  aria-pressed={selectedDate === date}
+                  className={`${date.slice(0, 7) !== month ? "is-other-month" : ""} ${isWorkingDate(date, draft) ? "" : "is-day-off"}`}
+                  onClick={() => setSelectedDate(date)}
+                >
+                  {Number(date.slice(8))}
+                </button>
+              ))}
+            </div>
+            <p className="xmind-calendar-hint">
+              阴影为休息日。选择日期后可添加例外。
+            </p>
+            {manage ? (
+              <div className="xmind-calendar-personal">
+                <h3>个人日历</h3>
+                <p>保存在当前浏览器，可用于其他工作表。</p>
+                {templates.length ? (
+                  templates.map((item) => (
+                    <div key={item.id}>
+                      <span>{item.name}</span>
+                      <button
+                        type="button"
+                        aria-label={`删除个人日历 ${item.name}`}
+                        onClick={() =>
+                          storeTemplates(
+                            templates.filter((value) => value.id !== item.id)
+                          )
+                        }
+                      >
+                        <Trash2 size={13} />
+                      </button>
+                    </div>
+                  ))
+                ) : (
+                  <p>还没有个人日历。</p>
+                )}
+                <label>
+                  名称
+                  <input
+                    aria-label="个人日历名称"
+                    value={templateName}
+                    onChange={(event) => setTemplateName(event.target.value)}
+                  />
+                </label>
+                <button type="button" onClick={saveTemplate}>
+                  保存为个人日历
+                </button>
+              </div>
+            ) : null}
+          </div>
+          <div className="xmind-calendar-settings">
+            <label>
+              日历名称
+              <input
+                aria-label="项目日历名称"
+                value={draft.name}
+                onChange={(event) =>
+                  setDraft((value) => ({ ...value, name: event.target.value }))
+                }
+              />
+            </label>
+            <label className="xmind-calendar-skip">
+              <input
+                type="checkbox"
+                aria-label="跳过非工作日"
+                checked={skip}
+                onChange={(event) => setSkip(event.target.checked)}
+              />
+              跳过非工作日
+            </label>
+            <h3>每周工作日</h3>
+            <div className="xmind-calendar-working-week">
+              {WEEKDAYS.map((day, index) => (
+                <label key={day}>
+                  <input
+                    type="checkbox"
+                    aria-label={`周${day}为工作日`}
+                    checked={draft.defaultWorkingDays.includes(index + 1)}
+                    onChange={(event) => {
+                      const value = event.target.checked
+                        ? [...draft.defaultWorkingDays, index + 1].sort()
+                        : draft.defaultWorkingDays.filter(
+                            (value) => value !== index + 1
+                          );
+                      if (!value.length) {
+                        setError("请至少保留一个每周工作日。");
+                        return;
+                      }
+                      setDraft((settings) => ({
+                        ...settings,
+                        defaultWorkingDays: value,
+                      }));
+                      setError("");
+                    }}
+                  />
+                  {day}
+                </label>
+              ))}
+            </div>
+            <div className="xmind-calendar-rule-heading">
+              <h3>例外</h3>
+              <button
+                type="button"
+                aria-label="添加工作日例外"
+                onClick={addException}
+              >
+                <Plus size={16} />
+              </button>
+            </div>
+            <div className="xmind-calendar-rules">
+              {[...draft.rules].reverse().map((rule) => (
+                <div key={rule.id}>
+                  <button
+                    type="button"
+                    aria-label={`编辑工作日例外 ${rule.name}`}
+                    onClick={() => setException(copy(rule))}
+                  >
+                    <strong>{rule.name}</strong>
+                    <span>
+                      {rule.type === "WORKING_DAY" ? "补班" : "休息日"} ·{" "}
+                      {rule.selectedDates.join("、")} ·{" "}
+                      {FREQUENCY_LABELS[rule.frequency]}
+                      {rule.interval && rule.interval > 1
+                        ? `（间隔 ${rule.interval}）`
+                        : ""}
+                    </span>
+                  </button>
+                  <button
+                    type="button"
+                    aria-label={`删除工作日例外 ${rule.name}`}
+                    onClick={() =>
+                      setDraft((value) => ({
+                        ...value,
+                        rules: value.rules.filter(
+                          (item) => item.id !== rule.id
+                        ),
+                      }))
+                    }
+                  >
+                    <Trash2 size={14} />
+                  </button>
+                </div>
+              ))}
+              {!draft.rules.length ? (
+                <p>可添加节假日、调休或重复例外。</p>
+              ) : null}
+            </div>
+            {error ? (
+              <p role="alert" className="xmind-task-error">
+                {error}
+              </p>
+            ) : null}
+            {message ? <p role="status">{message}</p> : null}
+          </div>
+        </div>
+        <footer>
+          <div>
+            {config.settings ? (
+              <button
+                type="button"
+                className="xmind-danger"
+                onClick={() => {
+                  if (onSave({ settings: null, skip: false })) onClose();
+                }}
+              >
+                移除项目日历
+              </button>
+            ) : null}
+            <button type="button" onClick={() => setManage(true)}>
+              保存为日历
+            </button>
+          </div>
+          <div>
+            <button type="button" onClick={onClose}>
+              取消
+            </button>
+            <button
+              type="button"
+              className="xmind-primary-button"
+              onClick={save}
+            >
+              保存工作日
+            </button>
+          </div>
+        </footer>
+      </section>
+      {exception ? (
+        <CalendarExceptionEditor
+          rule={exception}
+          onSave={(rule) =>
+            setDraft((value) => ({
+              ...value,
+              rules: value.rules.some((item) => item.id === rule.id)
+                ? value.rules.map((item) => (item.id === rule.id ? rule : item))
+                : [...value.rules, rule],
+            }))
+          }
+          onClose={() => setException(null)}
+        />
+      ) : null}
+    </div>
+  );
+}

components/flow-board/xmind-search-panel.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { ChevronDown, ChevronUp, Search, X } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { searchTopics, type SearchSheet, type TopicSearchResult } from "@/lib/flow-board/topic-search";
+
+export function XmindSearchPanel({ sheets, activeSheetId, onJump, onReplace, onClose }: {
+  sheets: SearchSheet[];
+  activeSheetId: string;
+  onJump: (result: TopicSearchResult) => void;
+  onReplace: (results: TopicSearchResult[], query: string, replacement: string, caseSensitive: boolean) => void;
+  onClose: () => void;
+}) {
+  const [query, setQuery] = useState("");
+  const [replacement, setReplacement] = useState("");
+  const [caseSensitive, setCaseSensitive] = useState(false);
+  const [scope, setScope] = useState("current");
+  const [activeIndex, setActiveIndex] = useState(0);
+  const input = useRef<HTMLInputElement>(null);
+  const results = searchTopics(scope === "all" ? sheets : sheets.filter(sheet => sheet.id === activeSheetId),query,caseSensitive);
+  useEffect(() => { input.current?.focus(); }, []);
+  useEffect(() => { setActiveIndex(0); }, [query,caseSensitive,scope]);
+  const navigate = (step: number) => {
+    if (!results.length) return;
+    const next = (Math.min(activeIndex,results.length - 1) + step + results.length) % results.length;
+    setActiveIndex(next); onJump(results[next]);
+  };
+  return <aside className="xmind-search-panel" aria-label="查找与替换" data-flow-board-shell-control="true" onKeyDown={event => {
+    if (event.key === "Escape") { event.preventDefault(); event.stopPropagation(); onClose(); }
+  }}>
+    <div className="xmind-panel-heading"><span>查找与替换</span><button type="button" aria-label="关闭查找" onClick={onClose}><X size={16} /></button></div>
+    <div className="xmind-panel-content">
+      <label className="xmind-search-box"><Search size={15} /><input ref={input} aria-label="查找主题" placeholder="查找主题" value={query} onChange={e => setQuery(e.target.value)} onKeyDown={e => { if (e.key === "Enter") { e.preventDefault(); navigate(e.shiftKey ? -1 : 1); } }} /></label>
+      <div className="xmind-search-options"><label><input type="checkbox" checked={caseSensitive} onChange={e => setCaseSensitive(e.target.checked)} /> 区分大小写</label></div>
+      <select aria-label="查找范围" value={scope} onChange={e => setScope(e.target.value)}><option value="current">当前画布</option><option value="all">所有画布</option></select>
+      <label className="xmind-search-box"><input aria-label="替换为" placeholder="替换为" value={replacement} onChange={e => setReplacement(e.target.value)} /></label>
+      <div className="xmind-search-replace-buttons">
+        <button type="button" disabled={!results.length} onClick={() => onReplace([results[Math.min(activeIndex,results.length - 1)]],query,replacement,caseSensitive)}>替换</button>
+        <button type="button" disabled={!results.length} onClick={() => onReplace(results,query,replacement,caseSensitive)}>全部替换</button>
+      </div>
+      <div className="xmind-search-navigation"><span role="status">{query ? `${results.length} 个匹配主题` : "输入内容开始查找"}</span><button type="button" aria-label="上一个结果" disabled={!results.length} onClick={() => navigate(-1)}><ChevronUp size={16} /></button><button type="button" aria-label="下一个结果" disabled={!results.length} onClick={() => navigate(1)}><ChevronDown size={16} /></button></div>
+      <div aria-label="查找结果">{results.map((result,index) => <button type="button" key={`${result.sheetId}:${result.id}`} aria-label={`定位 ${result.title}`} className={`xmind-search-result ${index === activeIndex ? "is-active" : ""}`} onClick={() => { setActiveIndex(index); onJump(result); }}><span>{result.title}</span><small>{result.sheetTitle} · {result.occurrences} 处匹配</small></button>)}</div>
+    </div>
+  </aside>;
+}

components/flow-board/xmind-task-editor.tsx

@@ -0,0 +1,384 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+import { CalendarDays, X } from "lucide-react";
+import type { PlaitElement } from "@plait/core";
+import { getTopicEntries, getTopicTitle } from "@/lib/flow-board/topic-details";
+import {
+  activeWorkingCalendar,
+  getProjectCalendar,
+  taskDueDate,
+  workingDaysBetween,
+} from "@/lib/flow-board/project-calendar";
+import {
+  DAY,
+  getTopicTask,
+  newTopicTask,
+  validateTopicTask,
+  type TopicTask,
+  type TaskDependency,
+} from "@/lib/flow-board/topic-tasks";
+export function XmindTaskEditor({
+  topic,
+  elements,
+  onSave,
+  onClose,
+  onGantt,
+  onCalendar,
+}: {
+  topic: PlaitElement;
+  elements: PlaitElement[];
+  onSave: (id: string, task: TopicTask | null) => void;
+  onClose: () => void;
+  onGantt: () => void;
+  onCalendar: () => void;
+}) {
+  const dialogRef = useRef<HTMLElement>(null);
+  useEffect(() => {
+    const previous = document.activeElement as HTMLElement | null;
+    dialogRef.current?.querySelector<HTMLInputElement>("input")?.focus();
+    return () => {
+      if (previous?.isConnected) previous.focus();
+    };
+  }, []);
+  const calendar = activeWorkingCalendar(getProjectCalendar(elements));
+  const existing = getTopicTask(topic);
+  const [draft, setDraft] = useState<TopicTask>(
+    () => existing || newTopicTask()
+  );
+  const [error, setError] = useState("");
+  const [assigneesDraft, setAssigneesDraft] = useState(
+    (existing?.assignees || []).join(", ")
+  );
+  const [dependency, setDependency] = useState("");
+  const [dependencyType, setDependencyType] =
+    useState<TaskDependency["type"]>("FS");
+  const [lag, setLag] = useState("0");
+  const source = JSON.stringify(existing);
+  useEffect(() => {
+    setDraft(getTopicTask(topic) || newTopicTask());
+    setAssigneesDraft((getTopicTask(topic)?.assignees || []).join(", "));
+    setError("");
+  }, [topic.id, source]);
+  const tasks = getTopicEntries(elements).filter(
+    (e) => e.element.id !== topic.id && getTopicTask(e.element)
+  );
+  const patch = (p: Partial<TopicTask>) => setDraft((t) => ({ ...t, ...p }));
+  const withAssignees = () => ({
+    ...draft,
+    assignees: [
+      ...new Set(
+        assigneesDraft
+          .split(/[,，]/)
+          .map((s) => s.trim())
+          .filter(Boolean)
+      ),
+    ],
+  });
+  const save = () => {
+    const task = withAssignees();
+    const problem = validateTopicTask(topic.id, task, elements);
+    if (problem) {
+      setError(problem);
+      return;
+    }
+    onSave(topic.id, task);
+    onClose();
+  };
+  return (
+    <div
+      className="xmind-task-backdrop"
+      data-flow-board-shell-control="true"
+      onKeyUp={(e) => e.stopPropagation()}
+      onKeyDown={(e) => {
+        e.stopPropagation();
+        if (e.key === "Escape") {
+          e.stopPropagation();
+          onClose();
+        }
+        if (e.key === "Tab") {
+          const controls = Array.from(
+            dialogRef.current?.querySelectorAll<HTMLElement>(
+              "button:not(:disabled),input,select"
+            ) || []
+          );
+          const first = controls[0],
+            last = controls.at(-1);
+          if (e.shiftKey && document.activeElement === first) {
+            e.preventDefault();
+            last?.focus();
+          }
+          if (!e.shiftKey && document.activeElement === last) {
+            e.preventDefault();
+            first?.focus();
+          }
+        }
+      }}
+    >
+      <section
+        role="dialog"
+        aria-modal="true"
+        aria-label="任务信息"
+        className="xmind-task-editor"
+        ref={dialogRef}
+      >
+        <header>
+          <h2>
+            <CalendarDays size={17} />
+            任务信息
+          </h2>
+          <button type="button" aria-label="关闭任务信息" onClick={onClose}>
+            <X size={17} />
+          </button>
+        </header>
+        <p className="xmind-task-name">{getTopicTitle(topic)}</p>
+        <div className="xmind-task-fields">
+          <label>
+            开始日期
+            <input
+              type="date"
+              aria-label="任务开始日期"
+              value={draft.start}
+              onChange={(e) => {
+                const start = e.target.value;
+                patch({
+                  start,
+                  due:
+                    start && draft.duration >= 1
+                      ? taskDueDate(start, draft.duration, calendar)
+                      : "",
+                });
+              }}
+            />
+          </label>
+          <label>
+            截止日期
+            <input
+              type="date"
+              aria-label="任务截止日期"
+              value={draft.due}
+              onChange={(e) => {
+                const due = e.target.value;
+                patch({
+                  due,
+                  ...(draft.start && due && due >= draft.start
+                    ? {
+                        duration: Math.max(
+                          1,
+                          workingDaysBetween(draft.start, due, calendar)
+                        ),
+                      }
+                    : {}),
+                });
+              }}
+            />
+          </label>
+          <label>
+            {calendar ? "时长（工作日）" : "时长（天）"}
+            <input
+              type="number"
+              aria-label="任务工期"
+              min={1}
+              max={36500}
+              value={draft.duration}
+              onChange={(e) => {
+                const duration = Number(e.target.value);
+                patch({
+                  duration,
+                  ...(draft.start && duration >= 1 && duration <= 36500
+                    ? { due: taskDueDate(draft.start, duration, calendar) }
+                    : {}),
+                });
+              }}
+            />
+          </label>
+          <label>
+            进度（%）
+            <input
+              type="number"
+              aria-label="任务进度"
+              min={0}
+              max={100}
+              value={draft.progress}
+              onChange={(e) => patch({ progress: Number(e.target.value) })}
+            />
+          </label>
+          <label>
+            优先级
+            <select
+              aria-label="任务优先级"
+              value={draft.priority ?? ""}
+              onChange={(e) =>
+                patch({
+                  priority:
+                    e.target.value === "" ? null : Number(e.target.value),
+                })
+              }
+            >
+              <option value="">无</option>
+              {Array.from({ length: 10 }, (_, i) => (
+                <option value={i} key={i}>
+                  P{i}
+                </option>
+              ))}
+            </select>
+          </label>
+          <label>
+            负责人
+            <input
+              aria-label="任务负责人"
+              placeholder="多人用逗号分隔"
+              value={assigneesDraft}
+              onChange={(e) => setAssigneesDraft(e.target.value)}
+            />
+          </label>
+        </div>
+        <h3>前置任务</h3>
+        <div className="xmind-task-dependencies">
+          {draft.dependencies.map((dep, i) => (
+            <div key={`${dep.id}-${i}`}>
+              <span>
+                {tasks.find((e) => e.element.id === dep.id)?.title ||
+                  "已删除的任务"}{" "}
+                · {dep.type}
+                {dep.lag ? ` · ${dep.lag / DAY} 天` : ""}
+              </span>
+              <button
+                type="button"
+                aria-label={`移除前置任务 ${tasks.find((e) => e.element.id === dep.id)?.title || dep.id}`}
+                onClick={() =>
+                  patch({
+                    dependencies: draft.dependencies.filter((_, n) => n !== i),
+                  })
+                }
+              >
+                <X size={13} />
+              </button>
+            </div>
+          ))}
+        </div>
+        <div className="xmind-task-add-dependency">
+          <select
+            aria-label="前置任务"
+            value={dependency}
+            onChange={(e) => setDependency(e.target.value)}
+          >
+            <option value="">选择任务</option>
+            {tasks.map((e) => (
+              <option value={e.element.id} key={e.element.id}>
+                {e.title}
+              </option>
+            ))}
+          </select>
+          <select
+            aria-label="依赖类型"
+            value={dependencyType}
+            onChange={(e) =>
+              setDependencyType(e.target.value as TaskDependency["type"])
+            }
+          >
+            <option value="FS">完成 → 开始</option>
+            <option value="SS">开始 → 开始</option>
+            <option value="FF">完成 → 完成</option>
+            <option value="SF">开始 → 完成</option>
+          </select>
+          <input
+            type="number"
+            aria-label="依赖间隔天数"
+            value={lag}
+            onChange={(e) => setLag(e.target.value)}
+            title="间隔天数（负数为提前）"
+          />
+          <button
+            type="button"
+            disabled={!dependency}
+            onClick={() => {
+              const next = {
+                ...draft,
+                dependencies: [
+                  ...draft.dependencies.filter((d) => d.id !== dependency),
+                  {
+                    id: dependency,
+                    type: dependencyType,
+                    lag: Number(lag) * DAY,
+                  },
+                ],
+              };
+              const problem = validateTopicTask(topic.id, next, elements);
+              if (problem) setError(problem);
+              else {
+                setDraft(next);
+                setDependency("");
+                setError("");
+              }
+            }}
+          >
+            添加
+          </button>
+        </div>
+        {error ? (
+          <p role="alert" className="xmind-task-error">
+            {error}
+          </p>
+        ) : null}
+        <div className="xmind-task-calendar-info">
+          <span>
+            {calendar ? `已跳过非工作日 · ${calendar.name}` : "包含非工作日"}
+          </span>
+          <button
+            type="button"
+            onClick={() => {
+              const task = withAssignees(),
+                problem = validateTopicTask(topic.id, task, elements);
+              if (problem) {
+                setError(problem);
+                return;
+              }
+              onSave(topic.id, task);
+              onClose();
+              onCalendar();
+            }}
+          >
+            项目工作日
+          </button>
+        </div>
+        <footer>
+          {existing ? (
+            <button
+              type="button"
+              className="xmind-danger"
+              onClick={() => {
+                onSave(topic.id, null);
+                onClose();
+              }}
+            >
+              移除任务
+            </button>
+          ) : (
+            <button type="button" onClick={onClose}>
+              取消
+            </button>
+          )}
+          <button
+            type="button"
+            onClick={() => {
+              const task = withAssignees();
+              const problem = validateTopicTask(topic.id, task, elements);
+              if (problem) {
+                setError(problem);
+                return;
+              }
+              onSave(topic.id, task);
+              onClose();
+              onGantt();
+            }}
+          >
+            查看甘特图
+          </button>
+          <button type="button" className="xmind-primary-button" onClick={save}>
+            保存任务
+          </button>
+        </footer>
+      </section>
+    </div>
+  );
+}

components/flow-board/xmind-topic-badges.tsx

@@ -0,0 +1,139 @@
+"use client";
+import {
+  type PlaitBoard,
+  type PlaitElement,
+  toHostPointFromViewBoxPoint,
+  toScreenPointFromHostPoint,
+} from "@plait/core";
+import { MindElement, getRectangleByNode } from "@plait/mind";
+import { FileText } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { getTopicDetails, getTopicTitle } from "@/lib/flow-board/topic-details";
+import { getTopicTask } from "@/lib/flow-board/topic-tasks";
+export function XmindTopicBadges({
+  board,
+  elements,
+  viewport,
+  onNotes,
+  onTask,
+}: {
+  board: PlaitBoard | null;
+  elements: PlaitElement[];
+  viewport: unknown;
+  onNotes: (id: string) => void;
+  onTask: (id: string) => void;
+}) {
+  const hostRef = useRef<HTMLDivElement>(null);
+  const [badges, setBadges] = useState<
+    {
+      id: string;
+      title: string;
+      notes: boolean;
+      progress: number | null;
+      left: number;
+      top: number;
+    }[]
+  >([]);
+  useEffect(() => {
+    if (!board) return;
+    const update = () => {
+      const host = hostRef.current;
+      if (!host) return;
+      const origin = host.getBoundingClientRect();
+      const result: typeof badges = [];
+      const visit = (children: PlaitElement[]) => {
+        for (const element of children) {
+          const notes = Boolean(getTopicDetails(element).notes.trim()),
+            task = getTopicTask(element);
+          if (notes || task) {
+            const node = MindElement.getNode(element as MindElement);
+            if (node) {
+              const rect = getRectangleByNode(node);
+              const point = toScreenPointFromHostPoint(
+                board,
+                toHostPointFromViewBoxPoint(board, [
+                  rect.x + rect.width,
+                  rect.y + rect.height / 2,
+                ])
+              );
+              result.push({
+                id: element.id,
+                title: getTopicTitle(element),
+                notes,
+                progress: task?.progress ?? null,
+                left: point[0] - origin.x + 5,
+                top: point[1] - origin.y - 9,
+              });
+            }
+          }
+          if (!element.isCollapsed && element.children) visit(element.children);
+        }
+      };
+      visit(elements);
+      setBadges(result);
+    };
+    const frame = requestAnimationFrame(update);
+    window.addEventListener("resize", update);
+    return () => {
+      cancelAnimationFrame(frame);
+      window.removeEventListener("resize", update);
+    };
+  }, [board, elements, viewport]);
+  return (
+    <div ref={hostRef} className="xmind-topic-badges" aria-label="主题内容提示">
+      {badges.map((b) => (
+        <div
+          key={b.id}
+          className="xmind-topic-badge"
+          style={{ left: b.left, top: b.top }}
+          data-flow-board-shell-control="true"
+        >
+          {b.progress !== null ? (
+            <button
+              type="button"
+              aria-label={`编辑任务 ${b.title}`}
+              title={`任务进度 ${b.progress}%`}
+              onClick={() => onTask(b.id)}
+            >
+              <svg
+                aria-hidden="true"
+                width={16}
+                height={16}
+                viewBox="0 0 16 16"
+              >
+                <circle
+                  cx={8}
+                  cy={8}
+                  r={6}
+                  fill="#f8fafc"
+                  stroke="#afb7c4"
+                  strokeWidth={1.4}
+                />
+                <circle
+                  cx={8}
+                  cy={8}
+                  r={6}
+                  fill="none"
+                  stroke="#6b8ee4"
+                  strokeWidth={3}
+                  strokeDasharray={`${(b.progress * 37.7) / 100} 37.7`}
+                  transform="rotate(-90 8 8)"
+                />
+              </svg>
+            </button>
+          ) : null}
+          {b.notes ? (
+            <button
+              type="button"
+              aria-label={`查看笔记 ${b.title}`}
+              title="查看笔记"
+              onClick={() => onNotes(b.id)}
+            >
+              <FileText size={15} />
+            </button>
+          ) : null}
+        </div>
+      ))}
+    </div>
+  );
+}

components/flow-board/xmind-topic-panel.tsx

@@ -0,0 +1,321 @@
+"use client";
+
+import type { PlaitElement } from "@plait/core";
+import {
+  ExternalLink,
+  FileDown,
+  Link2,
+  StickyNote,
+  Tag,
+  X,
+} from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import {
+  getSafeTopicHref,
+  getTopicDetails,
+  getTopicTitle,
+  type TopicDetails,
+  type TopicEntry,
+} from "@/lib/flow-board/topic-details";
+
+import { getNoteDocument } from "@/lib/flow-board/topic-notes";
+import { XmindNotesEditor } from "./xmind-notes-editor";
+
+export type TopicDetailSection = "notes" | "links" | "labels";
+
+export function XmindTopicPanel({
+  topic,
+  topics,
+  section,
+  onPatch,
+  onJump,
+  onClose,
+}: {
+  topic: PlaitElement | null;
+  topics: TopicEntry[];
+  section: TopicDetailSection;
+  onPatch: (patch: Partial<TopicDetails>) => void;
+  onJump: (id: string) => void;
+  onClose: () => void;
+}) {
+  const details = getTopicDetails(topic);
+  const [labelDraft, setLabelDraft] = useState("");
+  const [linkDraft, setLinkDraft] = useState(details.href);
+  const [attachmentError, setAttachmentError] = useState("");
+  const [isReadingAttachment, setIsReadingAttachment] = useState(false);
+  const attachmentRef = useRef<HTMLInputElement>(null);
+
+  const linkRef = useRef<HTMLInputElement>(null);
+  const labelRef = useRef<HTMLInputElement>(null);
+  useEffect(() => {
+    setLinkDraft(details.href);
+  }, [topic?.id, details.href]);
+  useEffect(() => {
+    setLabelDraft("");
+    setAttachmentError("");
+  }, [topic?.id]);
+  useEffect(() => {
+    if (section === "links") linkRef.current?.focus();
+    if (section === "labels") labelRef.current?.focus();
+  }, [section]);
+  const safeHref = getSafeTopicHref(linkDraft);
+  const invalidHref = Boolean(linkDraft.trim()) && !safeHref;
+  const addLabel = () => {
+    const value = labelDraft.trim();
+    if (value && !details.labels.includes(value))
+      onPatch({ labels: [...details.labels, value] });
+    setLabelDraft("");
+  };
+  const addAttachment = async (file: File) => {
+    setAttachmentError("");
+    if (file.size > 8 * 1024 * 1024) {
+      setAttachmentError("附件不能超过 8 MB。");
+      return;
+    }
+    setIsReadingAttachment(true);
+    try {
+      const url = await new Promise<string>((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onerror = () => reject(new Error("读取失败"));
+        reader.onload = () => resolve(String(reader.result));
+        // Always download attachments as files, independent of their source type.
+        reader.readAsDataURL(
+          new Blob([file], { type: "application/octet-stream" })
+        );
+      });
+      onPatch({
+        attachment: {
+          name: file.name,
+          url,
+          mimeType: "application/octet-stream",
+        },
+      });
+    } catch {
+      setAttachmentError("无法读取附件，请重新选择。");
+    } finally {
+      setIsReadingAttachment(false);
+    }
+  };
+  return (
+    <aside
+      className="xmind-aux-panel absolute right-0 top-[94px] bottom-9 z-30 w-full max-w-[304px] overflow-y-auto border-l border-[#dfe2e7] bg-white text-[#343b48]"
+      data-flow-board-shell-control="true"
+    >
+      <div className="flex h-12 items-center justify-between border-b border-[#eceef1] px-4">
+        <h2 className="text-sm font-semibold">主题内容</h2>
+        <button type="button" aria-label="关闭主题内容" onClick={onClose}>
+          <X size={16} />
+        </button>
+      </div>
+      {!topic ? (
+        <p className="p-4 text-xs text-[#8b919c]">
+          选择一个主题，编辑它的备注、链接和标签。
+        </p>
+      ) : (
+        <div className="space-y-6 p-4 text-xs">
+          <p className="truncate font-medium" title={getTopicTitle(topic)}>
+            {getTopicTitle(topic)}
+          </p>
+          <section className="space-y-2">
+            <h3 className="flex items-center gap-2 font-medium"><StickyNote size={14} />笔记</h3>
+            <XmindNotesEditor key={topic.id} value={getNoteDocument(topic)} onChange={(notesDocument) => onPatch({notesDocument})} />
+          </section>
+          <section className="space-y-2">
+            <h3 className="flex items-center gap-2 font-medium">
+              <Tag size={14} />
+              标签
+            </h3>
+            <div className="flex flex-wrap gap-1.5">
+              {details.labels.map((label) => (
+                <span
+                  key={label}
+                  className="flex items-center gap-1 rounded bg-[#edf3ff] px-2 py-1 text-[#3569e8]"
+                >
+                  {label}
+                  <button
+                    type="button"
+                    aria-label={`移除标签 ${label}`}
+                    onClick={() =>
+                      onPatch({
+                        labels: details.labels.filter(
+                          (value) => value !== label
+                        ),
+                      })
+                    }
+                  >
+                    <X size={12} />
+                  </button>
+                </span>
+              ))}
+            </div>
+            <div className="flex gap-2">
+              <input
+                aria-label="新增主题标签"
+                ref={labelRef}
+                className="h-8 min-w-0 flex-1 rounded border border-[#dfe2e7] px-2"
+                placeholder="输入标签后回车"
+                value={labelDraft}
+                onChange={(event) => setLabelDraft(event.target.value)}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter" && !event.nativeEvent.isComposing) {
+                    event.preventDefault();
+                    addLabel();
+                  }
+                }}
+              />
+              <button
+                type="button"
+                className="rounded border border-[#dfe2e7] px-2"
+                onClick={addLabel}
+              >
+                添加
+              </button>
+            </div>
+          </section>
+          <section className="space-y-2">
+            <h3 className="flex items-center gap-2 font-medium">
+              <Link2 size={14} />
+              网页或邮件链接
+            </h3>
+            <input
+              aria-label="主题外部链接"
+              ref={linkRef}
+              aria-invalid={invalidHref}
+              className="h-8 w-full rounded border border-[#dfe2e7] px-2"
+              placeholder="https://…"
+              value={linkDraft}
+              onChange={(event) => setLinkDraft(event.target.value)}
+              onBlur={() => {
+                if (!invalidHref) onPatch({ href: linkDraft.trim() });
+              }}
+              onKeyDown={(event) => {
+                if (event.key === "Enter" && !invalidHref) {
+                  event.preventDefault();
+                  onPatch({ href: linkDraft.trim() });
+                }
+              }}
+            />
+            {invalidHref ? (
+              <p role="alert" className="text-red-600">
+                请输入完整的 http、https、mailto 或 tel 链接。
+              </p>
+            ) : safeHref ? (
+              <a
+                className="inline-flex items-center gap-1 text-[#3569e8]"
+                href={safeHref}
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <ExternalLink size={12} />
+                打开链接
+              </a>
+            ) : null}
+            {details.href ? (
+              <button
+                type="button"
+                className="ml-3 text-[#8b919c]"
+                onClick={() => {
+                  setLinkDraft("");
+                  onPatch({ href: "" });
+                }}
+              >
+                移除外部链接
+              </button>
+            ) : null}
+          </section>
+          <section className="space-y-2">
+            <h3 className="flex items-center gap-2 font-medium">
+              <FileDown size={14} />
+              附件
+            </h3>
+            {details.attachment ? (
+              <>
+                <a
+                  className="block break-all text-[#3569e8]"
+                  href={details.attachment.url}
+                  download={details.attachment.name}
+                >
+                  下载 {details.attachment.name}
+                </a>
+                <button
+                  type="button"
+                  className="text-[#8b919c]"
+                  onClick={() => onPatch({ attachment: null })}
+                >
+                  移除附件
+                </button>
+              </>
+            ) : null}
+            <input
+              ref={attachmentRef}
+              type="file"
+              className="hidden"
+              aria-label="上传主题附件"
+              onChange={(event) => {
+                const file = event.target.files?.[0];
+                event.target.value = "";
+                if (file) void addAttachment(file);
+              }}
+            />
+            <button
+              type="button"
+              className="block text-[#3569e8] disabled:text-gray-400"
+              disabled={isReadingAttachment}
+              onClick={() => attachmentRef.current?.click()}
+            >
+              {isReadingAttachment
+                ? "正在读取附件…"
+                : details.attachment
+                  ? "替换附件"
+                  : "添加附件"}
+            </button>
+            {attachmentError ? (
+              <p role="alert" className="text-red-600">
+                {attachmentError}
+              </p>
+            ) : null}
+          </section>
+          <label className="block space-y-2">
+            <span className="font-medium">链接到当前画布的主题</span>
+            <select
+              aria-label="主题链接目标"
+              className="h-8 w-full rounded border border-[#dfe2e7] px-2"
+              value={details.topicLinkId}
+              onChange={(event) => onPatch({ topicLinkId: event.target.value })}
+            >
+              <option value="">无主题链接</option>
+              {details.topicLinkId &&
+              !topics.some(
+                ({ element }) => element.id === details.topicLinkId
+              ) ? (
+                <option value={details.topicLinkId}>目标主题已不存在</option>
+              ) : null}
+              {topics
+                .filter(({ element }) => element.id !== topic.id)
+                .map(({ element, title, depth }) => (
+                  <option key={element.id} value={element.id}>
+                    {"　".repeat(Math.min(depth, 5))}
+                    {title}
+                  </option>
+                ))}
+            </select>
+          </label>
+          {details.topicLinkId ? (
+            <button
+              type="button"
+              disabled={
+                !topics.some(
+                  ({ element }) => element.id === details.topicLinkId
+                )
+              }
+              className="text-[#3569e8] disabled:text-gray-400"
+              onClick={() => onJump(details.topicLinkId)}
+            >
+              定位目标主题
+            </button>
+          ) : null}
+        </div>
+      )}
+    </aside>
+  );
+}

components/generation-dot-placeholder.tsx

@@ -1,17 +1,25 @@
 "use client";
 
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
+import { BloubAvatar } from "@/components/bloub-avatar";
+import type { StateId } from "@/lib/bloub-official/states";
 import { cn } from "@/lib/utils";
 
-type GenerationPhase = "idle" | "queued" | "processing" | "finalizing" | "failed" | "completed";
+type GenerationPhase =
+  | "idle"
+  | "queued"
+  | "processing"
+  | "finalizing"
+  | "failed"
+  | "completed";
 
 interface GenerationDotPlaceholderProps {
   className?: string;
-  title?: string;
+  compact?: boolean;
   phase?: GenerationPhase;
   progress?: number | null;
-  compact?: boolean;
   showProgress?: boolean;
+  title?: string;
   viewportScale?: number;
 }
 
@@ -101,6 +109,7 @@ const GENERATION_STATUS_TITLES = [
   "正在完成本次生成",
   "正在即将展示结果",
 ];
+
 const LONG_WAIT_TITLE_THRESHOLD_MS = 5 * 60 * 1000;
 const LONG_WAIT_STATUS_TITLES = [
   "服务繁忙，排队处理中",
@@ -108,7 +117,6 @@ const LONG_WAIT_STATUS_TITLES = [
   "仍在保持连接，等待模型返回",
   "结果返回后会自动展示",
 ];
-
 const STATUS_TITLE_DURATIONS_MS = GENERATION_STATUS_TITLES.map((_, index) => {
   const rhythm = [3600, 5200, 4100, 6100, 3300, 4700, 5700, 3900, 6800, 4400];
   return rhythm[index % rhythm.length];
@@ -116,147 +124,13 @@ const STATUS_TITLE_DURATIONS_MS = GENERATION_STATUS_TITLES.map((_, index) => {
 const TYPEWRITER_START_DELAY_MS = 120;
 const TYPEWRITER_BASE_STEP_MS = 46;
 
-function getStatusTitleState(elapsedMs: number, initialTitle?: string) {
-  const titles = initialTitle
-    ? [initialTitle, ...GENERATION_STATUS_TITLES.filter((item) => item !== initialTitle)]
-    : GENERATION_STATUS_TITLES;
-  const durations = initialTitle
-    ? [4200, ...STATUS_TITLE_DURATIONS_MS]
-    : STATUS_TITLE_DURATIONS_MS;
-
-  let cursor = Math.max(0, elapsedMs);
-  for (let index = 0; index < titles.length; index += 1) {
-    const duration = durations[index] || 4600;
-    if (cursor < duration) {
-      return {
-        index,
-        title: titles[index] || titles[titles.length - 1] || PHASE_TITLES.processing,
-        elapsedInTitle: cursor,
-      };
-    }
-    cursor -= duration;
-  }
-
-  return {
-    index: titles.length - 1,
-    title: titles[titles.length - 1] || PHASE_TITLES.processing,
-    elapsedInTitle: durations[durations.length - 1] || 4600,
-  };
-}
-
-function getLongWaitTitleState(elapsedMs: number, initialTitle?: string) {
-  const titles = initialTitle
-    ? [initialTitle, ...LONG_WAIT_STATUS_TITLES.filter((item) => item !== initialTitle)]
-    : LONG_WAIT_STATUS_TITLES;
-  const elapsedAfterThreshold = Math.max(0, elapsedMs - LONG_WAIT_TITLE_THRESHOLD_MS);
-  const duration = 7600;
-  const index = Math.floor(elapsedAfterThreshold / duration) % titles.length;
-
-  return {
-    index,
-    title: titles[index] || titles[0] || PHASE_TITLES.processing,
-    elapsedInTitle: elapsedAfterThreshold % duration,
-  };
-}
-
-function getTypewriterText(text: string, elapsedInTitle: number, index: number) {
-  const chars = Array.from(text);
-  if (chars.length === 0) return "";
-  const step = TYPEWRITER_BASE_STEP_MS + (index % 5) * 8;
-  const visibleCount = Math.max(
-    1,
-    Math.min(
-      chars.length,
-      Math.floor(Math.max(0, elapsedInTitle - TYPEWRITER_START_DELAY_MS) / step) + 1
-    )
-  );
-  return chars.slice(0, visibleCount).join("");
-}
-
-const scatterVertexShader = `
-uniform float uTime;
-uniform float uPointSize;
-uniform float uEffectIntensity;
-attribute vec3 randomOffset;
-varying float vDistance;
-
-vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
-vec2 mod289(vec2 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
-vec3 permute(vec3 x) { return mod289(((x * 34.0) + 1.0) * x); }
-float snoise(vec2 v) {
-  const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439);
-  vec2 i = floor(v + dot(v, C.yy));
-  vec2 x0 = v - i + dot(i, C.xx);
-  vec2 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
-  vec4 x12 = x0.xyxy + C.xxzz;
-  x12.xy -= i1;
-  i = mod289(i);
-  vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0)) + i.x + vec3(0.0, i1.x, 1.0));
-  vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy), dot(x12.zw, x12.zw)), 0.0);
-  m = m * m;
-  m = m * m;
-  vec3 x = 2.0 * fract(p * C.www) - 1.0;
-  vec3 h = abs(x) - 0.5;
-  vec3 ox = floor(x + 0.5);
-  vec3 a0 = x - ox;
-  m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);
-  vec3 g;
-  g.x = a0.x * x0.x + h.x * x0.y;
-  g.yz = a0.yz * x12.xz + h.yz * x12.yw;
-  return 130.0 * dot(m, g);
-}
-
-void main() {
-  vec3 pos = position;
-  vec3 scatterDir = normalize(pos + randomOffset * 0.5);
-  float scatterDist = length(pos) * 0.5 + randomOffset.x * 3.0;
-  vec3 scattered = pos + scatterDir * scatterDist * uEffectIntensity * 1.85;
-  float turb = snoise(pos.xy * 0.34 + uTime * 0.45);
-  scattered += vec3(turb, turb * 0.55, turb * 0.35) * uEffectIntensity * 1.2;
-  pos = mix(pos, scattered, 0.72);
-
-  vec4 mvPosition = modelViewMatrix * vec4(pos, 1.0);
-  float dist = length(pos);
-  vDistance = dist;
-  gl_PointSize = (uPointSize / -mvPosition.z) * (1.0 + sin(uTime * 3.0 + dist * 0.16) * 0.42);
-  gl_Position = projectionMatrix * mvPosition;
-}
-`;
-
-const scatterFragmentShader = `
-uniform float uTime;
-uniform float uOpacity;
-varying float vDistance;
-
-	void main() {
-	  float dist = distance(gl_PointCoord, vec2(0.5));
-	  if (dist > 0.5) discard;
-	  float edge = 1.0 - smoothstep(0.42, 0.5, dist);
-	  float core = 0.92 + (1.0 - smoothstep(0.0, 0.34, dist)) * 0.08;
-	  float shimmer = 0.78 + sin(vDistance * 0.33 + uTime) * 0.18;
-	  gl_FragColor = vec4(vec3(0.11, 0.12, 0.13), edge * core * shimmer * uOpacity);
-	}
-	`;
-
 function clampProgress(value: number) {
   if (!Number.isFinite(value)) return 0;
   return Math.max(0, Math.min(100, Math.round(value)));
 }
 
-function normalizeViewportScale(value: number | undefined) {
-  if (typeof value !== "number" || !Number.isFinite(value) || value <= 0) {
-    return 1;
-  }
-  return Math.max(0.1, Math.min(4, value));
-}
-
-function getParticlePointSize(compact: boolean, viewportScale: number) {
-  return (compact ? 76 : 94) * viewportScale;
-}
-
 function estimateProgress(phase: GenerationPhase, elapsedMs: number) {
-  if (phase === "completed") return 100;
-  if (phase === "failed") return 100;
+  if (phase === "completed" || phase === "failed") return 100;
   if (phase === "finalizing") return 96;
   if (phase === "queued") {
     return clampProgress(6 + Math.min(12, elapsedMs / 3500));
@@ -268,165 +142,93 @@ function estimateProgress(phase: GenerationPhase, elapsedMs: number) {
   return clampProgress(Math.min(8, elapsedMs / 1000));
 }
 
-function ScatterParticleLayer({
-  compact,
-  opacity,
-  viewportScale,
-}: {
-  compact: boolean;
-  opacity: number;
-  viewportScale: number;
-}) {
-  const containerRef = useRef<HTMLDivElement | null>(null);
-  const pointSizeUniformRef = useRef<{ value: number } | null>(null);
-  const viewportScaleRef = useRef(viewportScale);
+function getStatusTitleState(elapsedMs: number, initialTitle?: string) {
+  const titles = initialTitle
+    ? [
+        initialTitle,
+        ...GENERATION_STATUS_TITLES.filter((item) => item !== initialTitle),
+      ]
+    : GENERATION_STATUS_TITLES;
+  const durations = initialTitle
+    ? [4200, ...STATUS_TITLE_DURATIONS_MS]
+    : STATUS_TITLE_DURATIONS_MS;
 
-  useEffect(() => {
-    viewportScaleRef.current = viewportScale;
-    if (pointSizeUniformRef.current) {
-      pointSizeUniformRef.current.value = getParticlePointSize(
-        compact,
-        viewportScale
-      );
-    }
-  }, [compact, viewportScale]);
-
-  useEffect(() => {
-    let cancelled = false;
-    let cleanup = () => {};
-
-    async function setup() {
-      const container = containerRef.current;
-      if (!container) return;
-
-      const THREE = await import("three");
-      if (cancelled || !containerRef.current) return;
-
-      const scene = new THREE.Scene();
-      const camera = new THREE.PerspectiveCamera(34, 1, 0.1, 1000);
-      camera.position.set(0, 0, compact ? 48 : 44);
-      camera.lookAt(0, 0, 0);
-
-      const renderer = new THREE.WebGLRenderer({
-        alpha: true,
-        antialias: true,
-        powerPreference: "high-performance",
-      });
-      renderer.setClearColor(0xffffff, 0);
-      renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2.5));
-      renderer.domElement.style.display = "block";
-      renderer.domElement.style.height = "100%";
-      renderer.domElement.style.width = "100%";
-      container.appendChild(renderer.domElement);
-
-      const particleCount = compact ? 7200 : 12800;
-      const positions = new Float32Array(particleCount * 3);
-      const randomOffsets = new Float32Array(particleCount * 3);
-
-      for (let i = 0; i < particleCount; i += 1) {
-        const i3 = i * 3;
-        const t = (Math.random() - 0.5) * 4.7;
-        const angle = Math.random() * Math.PI * 2;
-        const radiusBase = 0.35 + Math.pow(Math.abs(t), 2.18);
-        const radius = radiusBase * (0.74 + Math.random() * 0.58);
-        positions[i3] = Math.cos(angle) * radius * 2.25;
-        positions[i3 + 1] = t * (compact ? 5.2 : 6.8);
-        positions[i3 + 2] = Math.sin(angle) * radius * 2.25;
-        randomOffsets[i3] = (Math.random() - 0.5) * 2;
-        randomOffsets[i3 + 1] = (Math.random() - 0.5) * 2;
-        randomOffsets[i3 + 2] = (Math.random() - 0.5) * 2;
-      }
-
-      const geometry = new THREE.BufferGeometry();
-      geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
-      geometry.setAttribute("randomOffset", new THREE.BufferAttribute(randomOffsets, 3));
-
-      const material = new THREE.ShaderMaterial({
-        vertexShader: scatterVertexShader,
-        fragmentShader: scatterFragmentShader,
-        transparent: true,
-        depthWrite: false,
-        blending: THREE.NormalBlending,
-        uniforms: {
-          uTime: { value: 0 },
-          uPointSize: {
-            value: getParticlePointSize(compact, viewportScaleRef.current),
-          },
-          uEffectIntensity: { value: 1 },
-          uOpacity: { value: opacity },
-        },
-      });
-      pointSizeUniformRef.current = material.uniforms.uPointSize as {
-        value: number;
-      };
-
-      const points = new THREE.Points(geometry, material);
-      points.rotation.x = -0.06;
-      const baseX = 0;
-      const baseY = 0;
-      points.position.set(baseX, baseY, 0);
-      scene.add(points);
-
-      const resize = () => {
-        const rect = container.getBoundingClientRect();
-        const width = Math.max(1, Math.floor(rect.width));
-        const height = Math.max(1, Math.floor(rect.height));
-        renderer.setSize(width, height, false);
-        camera.aspect = width / height;
-        camera.updateProjectionMatrix();
-      };
-      resize();
-
-      const resizeObserver = new ResizeObserver(resize);
-      resizeObserver.observe(container);
-
-      let frameId = 0;
-      let time = 0;
-      const animate = () => {
-        time += 0.008;
-        points.rotation.y += 0.0048;
-        points.rotation.z += 0.0015;
-        points.rotation.x = -0.08 + Math.sin(time * 0.17) * 0.18;
-        points.position.x = baseX + Math.sin(time * 0.16) * 0.04;
-        points.position.y = baseY + Math.sin(time * 0.22) * 0.04;
-        material.uniforms.uTime.value = time;
-        renderer.render(scene, camera);
-        frameId = window.requestAnimationFrame(animate);
-      };
-      animate();
-
-      cleanup = () => {
-        window.cancelAnimationFrame(frameId);
-        resizeObserver.disconnect();
-        geometry.dispose();
-        material.dispose();
-        renderer.dispose();
-        renderer.domElement.remove();
-        pointSizeUniformRef.current = null;
+  let cursor = Math.max(0, elapsedMs);
+  for (let index = 0; index < titles.length; index += 1) {
+    const duration = durations[index] || 4600;
+    if (cursor < duration) {
+      return {
+        elapsedInTitle: cursor,
+        index,
+        title:
+          titles[index] ||
+          titles[titles.length - 1] ||
+          PHASE_TITLES.processing,
       };
     }
+    cursor -= duration;
+  }
 
-    setup();
-    return () => {
-      cancelled = true;
-      cleanup();
-    };
-  }, [compact, opacity]);
+  return {
+    elapsedInTitle: durations[durations.length - 1] || 4600,
+    index: titles.length - 1,
+    title: titles[titles.length - 1] || PHASE_TITLES.processing,
+  };
+}
 
-  return <div ref={containerRef} className="absolute inset-0" />;
+function getLongWaitTitleState(elapsedMs: number, initialTitle?: string) {
+  const titles = initialTitle
+    ? [
+        initialTitle,
+        ...LONG_WAIT_STATUS_TITLES.filter((item) => item !== initialTitle),
+      ]
+    : LONG_WAIT_STATUS_TITLES;
+  const elapsedAfterThreshold = Math.max(
+    0,
+    elapsedMs - LONG_WAIT_TITLE_THRESHOLD_MS
+  );
+  const duration = 7600;
+  const index = Math.floor(elapsedAfterThreshold / duration) % titles.length;
+
+  return {
+    elapsedInTitle: elapsedAfterThreshold % duration,
+    index,
+    title: titles[index] || titles[0] || PHASE_TITLES.processing,
+  };
+}
+
+function getTypewriterText(text: string, elapsedInTitle: number, index: number) {
+  const chars = Array.from(text);
+  if (chars.length === 0) return "";
+  const step = TYPEWRITER_BASE_STEP_MS + (index % 5) * 8;
+  const visibleCount = Math.max(
+    1,
+    Math.min(
+      chars.length,
+      Math.floor(
+        Math.max(0, elapsedInTitle - TYPEWRITER_START_DELAY_MS) / step
+      ) + 1
+    )
+  );
+  return chars.slice(0, visibleCount).join("");
+}
+
+function getBloubState(phase: GenerationPhase): StateId {
+  if (phase === "failed") return "alert";
+  if (phase === "completed") return "wink";
+  if (phase === "queued") return "thinking";
+  return "idle";
 }
 
 export function GenerationDotPlaceholder({
   className,
-  title,
+  compact = false,
   phase = "processing",
   progress,
-  compact = false,
   showProgress = true,
-  viewportScale,
+  title,
 }: GenerationDotPlaceholderProps) {
   const [elapsedMs, setElapsedMs] = useState(0);
-  const resolvedViewportScale = normalizeViewportScale(viewportScale);
 
   useEffect(() => {
     const startedAt = Date.now();
@@ -451,9 +253,10 @@ export function GenerationDotPlaceholder({
     statusTitleState.index
   );
   const resolvedTitle =
-    phase === "processing" || phase === "finalizing" ? rotatingTitle : title || PHASE_TITLES[phase];
-  const dotOpacity = phase === "failed" ? 0.18 : 0.56;
-
+    phase === "processing" || phase === "finalizing"
+      ? rotatingTitle
+      : title || PHASE_TITLES[phase];
+  const playSequence = phase === "processing" || phase === "finalizing";
   const progressStyle = useMemo(
     () => ({ width: `${resolvedProgress}%` }),
     [resolvedProgress]
@@ -462,60 +265,51 @@ export function GenerationDotPlaceholder({
   return (
     <div
       className={cn(
-        "relative isolate overflow-hidden rounded-[32px] bg-[#f4f4f4] text-[#565b63]",
+        "relative isolate overflow-hidden rounded-[24px] bg-[#f4f4f4] text-[#565b63] dark:bg-[#08090b] dark:text-zinc-200",
         compact ? "min-h-[190px] p-5" : "min-h-[360px] p-8",
         className
       )}
     >
-      <div className="relative z-10 flex h-full min-h-[inherit] flex-col">
+      <div className="flex h-full min-h-[inherit] flex-col">
         <div
+          aria-live="polite"
           className={cn(
-            "flex items-center gap-2 font-semibold tracking-tight",
-            compact ? "text-[12px] leading-[1.35]" : "text-[18px] leading-[1.35]"
+            "font-semibold",
+            compact
+              ? "text-[12px] leading-[1.35]"
+              : "text-[18px] leading-[1.35]"
           )}
         >
+          {resolvedTitle}
           <span
             aria-hidden="true"
-            className={cn(
-              "relative inline-flex shrink-0 items-center justify-center text-[#5b6068]",
-              compact ? "h-5 w-5" : "h-7 w-7"
-            )}
-          >
-            <span className="absolute inset-[18%] rounded-full bg-current opacity-15 blur-[3px]" />
-            <span className="absolute left-1/2 top-1/2 h-[18%] w-[18%] -translate-x-1/2 -translate-y-1/2 rounded-full bg-current opacity-80" />
-            <span className="absolute inset-0 animate-[generationSparkSpin_3.8s_linear_infinite]">
-              <span className="absolute left-1/2 top-[4%] h-[28%] w-[10%] -translate-x-1/2 rounded-full bg-current opacity-80" />
-              <span className="absolute bottom-[4%] left-1/2 h-[28%] w-[10%] -translate-x-1/2 rounded-full bg-current opacity-55" />
-              <span className="absolute left-[4%] top-1/2 h-[10%] w-[28%] -translate-y-1/2 rounded-full bg-current opacity-65" />
-              <span className="absolute right-[4%] top-1/2 h-[10%] w-[28%] -translate-y-1/2 rounded-full bg-current opacity-70" />
-            </span>
-            <span className="absolute inset-[8%] animate-[generationSparkPulse_1.9s_ease-in-out_infinite]">
-              <span className="absolute left-[16%] top-[16%] h-[9%] w-[30%] rotate-45 rounded-full bg-current opacity-55" />
-              <span className="absolute right-[16%] top-[16%] h-[9%] w-[30%] -rotate-45 rounded-full bg-current opacity-65" />
-              <span className="absolute bottom-[16%] left-[16%] h-[9%] w-[30%] -rotate-45 rounded-full bg-current opacity-60" />
-              <span className="absolute bottom-[16%] right-[16%] h-[9%] w-[30%] rotate-45 rounded-full bg-current opacity-50" />
-            </span>
-          </span>
-          <span className="min-w-0">
-            {resolvedTitle}
-            <span
-              aria-hidden="true"
-              className="ml-1 inline-block h-[1em] w-[0.08em] translate-y-[0.15em] animate-[generationCursorBlink_1s_steps(1,end)_infinite] bg-current"
-            />
-          </span>
+            className="ml-1 inline-block h-[1em] w-[0.08em] translate-y-[0.15em] animate-[generationCursorBlink_1s_steps(1,end)_infinite] bg-current"
+          />
         </div>
-        <div className="flex-1" />
+
+        <div className="flex min-h-0 flex-1 items-center justify-center py-3">
+          <BloubAvatar
+            label={resolvedTitle}
+            playSequence={playSequence}
+            size={compact ? 88 : 120}
+            state={getBloubState(phase)}
+            surface="page"
+          />
+        </div>
+
         {showProgress ? (
           <div className="space-y-2">
-            <div className="flex items-center justify-between text-[12px] font-medium text-[#7d838b]">
+            <div className="flex items-center justify-between text-[12px] font-medium text-[#7d838b] dark:text-zinc-400">
               <span>{phase === "failed" ? "已停止" : "生成进度"}</span>
               <span>{resolvedProgress}%</span>
             </div>
-            <div className="h-1.5 overflow-hidden rounded-full bg-white/80 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.035)]">
+            <div className="h-1.5 overflow-hidden rounded-full bg-white/80 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.035)] dark:bg-white/10 dark:shadow-none">
               <div
                 className={cn(
                   "h-full rounded-full transition-[width] duration-700 ease-out",
-                  phase === "failed" ? "bg-[#c7ccd3]" : "bg-[#9fa4aa]"
+                  phase === "failed"
+                    ? "bg-[#c7ccd3] dark:bg-zinc-600"
+                    : "bg-[#0a0a0c] dark:bg-[#3ecf8e]"
                 )}
                 style={progressStyle}
               />
@@ -523,11 +317,7 @@ export function GenerationDotPlaceholder({
           </div>
         ) : null}
       </div>
-      <ScatterParticleLayer
-        compact={compact}
-        opacity={dotOpacity}
-        viewportScale={resolvedViewportScale}
-      />
+
       <style jsx>{`
         @keyframes generationCursorBlink {
           0%,
@@ -539,33 +329,6 @@ export function GenerationDotPlaceholder({
             opacity: 0;
           }
         }
-
-        @keyframes generationSparkSpin {
-          0% {
-            transform: rotate(0deg) scale(0.9);
-            opacity: 0.55;
-          }
-          45% {
-            transform: rotate(155deg) scale(1.06);
-            opacity: 1;
-          }
-          100% {
-            transform: rotate(360deg) scale(0.9);
-            opacity: 0.58;
-          }
-        }
-
-        @keyframes generationSparkPulse {
-          0%,
-          100% {
-            transform: rotate(0deg) scale(0.72);
-            opacity: 0.35;
-          }
-          50% {
-            transform: rotate(-18deg) scale(1.08);
-            opacity: 0.9;
-          }
-        }
       `}</style>
     </div>
   );

components/home/lovart-home.tsx

@@ -1,7 +1,9 @@
 "use client";
 
+import { ReferenceIcon, type ReferenceIconName } from "@/components/lovart/reference-icon";
+
 import dynamic from "next/dynamic";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { type CSSProperties, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
 import { useTheme } from "next-themes";
 import useSWR from "swr";
@@ -69,7 +71,6 @@ import {
   normalizeLovartHomeSidebarConfig,
   type LovartHomeSidebarItemKey,
 } from "@/lib/home/lovart-sidebar-config";
-import { BrandTopBar } from "@/components/layout/brand-top-bar";
 import { LovartFeaturedGallery } from "@/components/home/lovart/lovart-featured-gallery";
 import { LovartHeroComposer } from "@/components/home/lovart/lovart-hero-composer";
 import { LovartProjectsSection } from "@/components/home/lovart/lovart-projects-section";
@@ -345,7 +346,7 @@ type LovartPromptTagKey = (typeof PROMPT_TAGS)[number]["key"];
 type LovartPromptTagVisibility = Record<LovartPromptTagKey, boolean>;
 
 const FEATURED_PAGE_SIZE = 24;
-const COMPOSER_PREFIX_DEFAULT = "让「由壹点AI」";
+const COMPOSER_PREFIX_DEFAULT = "让「𝗕𝘂𝗬𝗶」";
 
 function SidebarSvgIcon({
   iconUrl,
@@ -420,16 +421,15 @@ function AccountMenuItem({
   onClick: () => void;
 }) {
   return (
-    <button
-      type="button"
-      onClick={onClick}
+    <DropdownMenuItem
+      onSelect={onClick}
       className="flex w-full items-center gap-3 rounded-2xl px-2.5 py-1.5 text-left text-[13px] font-medium text-black/80 hover:bg-black/5 dark:text-white/85 dark:hover:bg-white/6"
     >
       <span className="flex h-8 w-8 items-center justify-center rounded-xl bg-black/5 text-black/70 dark:bg-white/8 dark:text-white/70">
         <Icon className="h-[16px] w-[16px]" />
       </span>
       <span className="flex-1">{label}</span>
-    </button>
+    </DropdownMenuItem>
   );
 }
 
@@ -1637,7 +1637,31 @@ export function LovartHome({
   ) => {
     const item = getLovartSidebarItem(key);
     const FallbackIcon = LOVART_HOME_SIDEBAR_FALLBACK_ICONS[key];
-    const sizeClassName = options?.sizeClassName || "h-[18px] w-[18px]";
+    const sizeClassName = options?.sizeClassName || "h-[20px] w-[20px]";
+
+    const referenceIcons: Record<LovartHomeSidebarItemKey, ReferenceIconName> = {
+      newProject: "plus",
+      home: "home",
+      projects: "folder",
+      profile: "profile",
+      gallery: "brand",
+      tutorial: "tutorial",
+      imageEditor: "image-local-edit",
+      aiCad: "model-auto",
+      model3d: "model-auto",
+      scene: "layers",
+      agent: "skill",
+      videoCanvas: "video",
+      flowBoard: "connections",
+      productPlanning: "page",
+      toolbox1: "toolbox",
+      toolbox2: "toolbox",
+      settings: "settings",
+    };
+    const reference = referenceIcons[key];
+    if (reference && !item.iconUrl) {
+      return <ReferenceIcon name={reference} size={20} className={options?.filled ? "text-white" : undefined} />;
+    }
 
     if (options?.filled) {
       return (
@@ -1703,8 +1727,261 @@ export function LovartHome({
     THEME_MODE_OPTIONS[0];
   const SelectedThemeIcon = selectedThemeOption.icon;
 
+  const homeThemeControl = () => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button
+          type="button"
+          className="inline-flex h-8 w-8 items-center justify-center rounded-[11px] border border-black/10 bg-white text-black/70 shadow-sm transition hover:bg-black/5 hover:text-black dark:border-white/10 dark:bg-white/6 dark:text-white/72 dark:hover:bg-white/10 dark:hover:text-white"
+          title={`主题模式：${selectedThemeOption.label}`}
+          aria-label={`主题模式：${selectedThemeOption.label}`}
+        >
+          <SelectedThemeIcon className="h-[15px] w-[15px]" />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align="end"
+        sideOffset={10}
+        className="z-[160] !min-w-0 w-auto rounded-[18px] border-black/10 bg-white p-1.5 shadow-xl dark:border-white/10 dark:bg-[#141416]"
+      >
+        <div className="flex items-center gap-1">
+          {THEME_MODE_OPTIONS.map((option) => {
+            const OptionIcon = option.icon;
+            const isSelected = selectedThemeMode === option.value;
+
+            return (
+              <DropdownMenuItem
+                key={option.value}
+                aria-label={option.label}
+                className={cn(
+                  "flex h-[34px] w-[34px] cursor-pointer items-center justify-center rounded-[10px] p-0 focus:bg-black/5 dark:focus:bg-white/8",
+                  isSelected
+                    ? "bg-black text-white focus:bg-black focus:text-white dark:bg-white dark:text-black dark:focus:bg-white dark:focus:text-black"
+                    : "text-black/70 dark:text-white/70"
+                )}
+                onSelect={() => setTheme(option.value)}
+                title={option.label}
+              >
+                <OptionIcon className="h-[15px] w-[15px]" />
+              </DropdownMenuItem>
+            );
+          })}
+        </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+  const homeUtilityControls = () => (
+    <>
+      <button
+        type="button"
+        aria-label="通知"
+        title="通知"
+        className="flex h-8 w-8 items-center justify-center rounded-lg bg-black/5 text-black/75 hover:bg-black/10 dark:bg-white/6 dark:text-white/70 dark:hover:bg-white/10"
+      >
+        <Bell className="h-3.5 w-3.5" />
+      </button>
+      {homeThemeControl()}
+    </>
+  );
+  const homeAccountControls = () => (
+    <div className="flex w-full flex-col items-center gap-[12px]">
+      {isMembershipEnabled ? (
+        <HoverCard openDelay={100} closeDelay={120}>
+          <HoverCardTrigger asChild>
+            <Button
+              variant="ghost"
+              onClick={() => setUpgradeDialogOpen(true)}
+              aria-label="积分与会员"
+              className="h-auto w-[36px] rounded-[8px] px-0 py-2 text-[#333] hover:bg-black/5 dark:text-white/75 dark:hover:bg-white/10"
+            >
+              <div className="flex flex-col items-center gap-[4px] text-[10px] leading-none">
+                <Zap className="h-[20px] w-[20px]" />
+                {membershipData?.summary?.currentCredits ?? 0}
+              </div>
+            </Button>
+          </HoverCardTrigger>
+          <HoverCardContent
+            side="right"
+            align="end"
+            sideOffset={12}
+            className="z-[150] w-[300px] rounded-3xl border border-black/10 bg-white p-0 shadow-xl dark:border-white/10 dark:bg-[#141416]"
+          >
+            <div className="p-4">
+              <div className="mb-4 flex items-start justify-between">
+                <div>
+                  <div className="text-[22px] font-semibold leading-none text-black dark:text-white">
+                    {currentPlan?.name || "Free"}
+                  </div>
+                </div>
+                <Button
+                  size="sm"
+                  className="h-8 rounded-2xl bg-[#2f3542] px-4 text-[13px] text-white hover:bg-[#242a36]"
+                  onClick={() => setUpgradeDialogOpen(true)}
+                >
+                  升级
+                </Button>
+              </div>
+              <div className="space-y-2.5 border-t border-black/10 pt-3 text-[14px] dark:border-white/10 dark:text-white/90">
+                <div className="flex items-center justify-between">
+                  <span className="inline-flex items-center gap-2 text-black/80 dark:text-white/75">
+                    <Sparkles className="h-3.5 w-3.5" />
+                    积分
+                  </span>
+                  <span>{membershipData?.summary?.currentCredits ?? 0}</span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className="inline-flex items-center gap-2 text-black/80 dark:text-white/75">
+                    <Upload className="h-3.5 w-3.5" />
+                    每日免费积分
+                  </span>
+                  <span>{membershipData?.summary?.dailyFreeCredits ?? 0}</span>
+                </div>
+              </div>
+              <button
+                type="button"
+                className="mt-4 inline-flex items-center gap-1 text-[12px] font-medium text-black/80 hover:text-black dark:text-white/75 dark:hover:text-white"
+                onClick={() => setUpgradeDialogOpen(true)}
+              >
+                使用详情
+                <ChevronDown className="h-4 w-4 -rotate-90" />
+              </button>
+            </div>
+          </HoverCardContent>
+        </HoverCard>
+      ) : null}
+
+      {isAuthenticated ? (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button
+              type="button"
+              className="flex h-[28px] w-[28px] shrink-0 items-center justify-center rounded-full bg-[#d4551f] text-[11px] font-semibold text-white"
+              aria-label="账号菜单"
+              title="账号菜单"
+            >
+              {userInitials}
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            side="right"
+            align="end"
+            sideOffset={12}
+            className="z-[150] max-h-[calc(100svh-24px)] w-[300px] overflow-y-auto rounded-3xl border border-black/10 bg-white p-0 shadow-xl dark:border-white/10 dark:bg-[#141416]"
+          >
+            <div className="p-3.5">
+              <div className="rounded-3xl border border-black/10 bg-white p-3.5 dark:border-white/10 dark:bg-[#19191d]">
+                <div className="flex justify-center">
+                  <div className="flex h-10 w-10 items-center justify-center rounded-full bg-[#d4551f] text-[14px] font-semibold text-white">
+                    {userInitials}
+                  </div>
+                </div>
+
+                <div className="mt-3 flex items-center justify-between gap-3">
+                  <div className="min-w-0">
+                    <div className="truncate text-[15px] font-semibold text-black dark:text-white">
+                      {userDisplayName}
+                    </div>
+                    <div className="truncate text-[12px] text-black/45 dark:text-white/45">
+                      {user?.email || ""}
+                    </div>
+                  </div>
+                  {isMembershipEnabled ? (
+                    <DropdownMenuItem asChild>
+                      <Button
+                        size="sm"
+                        className="h-8 rounded-2xl bg-[#2f3542] px-4 text-[13px] text-white hover:bg-[#242a36]"
+                        onClick={() => setUpgradeDialogOpen(true)}
+                      >
+                        升级
+                      </Button>
+                    </DropdownMenuItem>
+                  ) : null}
+                </div>
+
+                <div className="mt-4 border-t border-black/10 pt-3 dark:border-white/10">
+                  <DropdownMenuItem asChild>
+                    <button
+                      type="button"
+                      className="flex w-full items-center justify-between rounded-2xl px-1 py-1 text-[13px] font-semibold text-black/80 hover:bg-black/5 dark:text-white/80 dark:hover:bg-white/6"
+                      onClick={() => {
+                        setAccountCenterTab("account");
+                        setUsageFilter("all");
+                        setAccountCenterOpen(true);
+                      }}
+                    >
+                      <span>积分</span>
+                      <span className="inline-flex items-center gap-2 text-[13px] font-semibold text-black/60 dark:text-white/55">
+                        {membershipData?.summary?.currentCredits ?? 0}
+                        <ArrowRight className="h-4 w-4" />
+                      </span>
+                    </button>
+                  </DropdownMenuItem>
+                </div>
+              </div>
+
+              <div className="mt-3 space-y-1">
+                {isMembershipEnabled ? (
+                  <AccountMenuItem
+                    icon={Users}
+                    label="创建团队"
+                    onClick={() => toast.info("团队功能后续开放")}
+                  />
+                ) : null}
+                <AccountMenuItem
+                  icon={User}
+                  label="账户管理"
+                  onClick={() => {
+                    setAccountCenterTab("account");
+                    setUsageFilter("all");
+                    setAccountCenterOpen(true);
+                  }}
+                />
+                <AccountMenuItem
+                  icon={Info}
+                  label="使用指南"
+                  onClick={() => toast.info("使用指南后续开放")}
+                />
+                <AccountMenuItem
+                  icon={Mail}
+                  label="联系我们"
+                  onClick={() => setContactDialogOpen(true)}
+                />
+                <div className="flex items-center justify-between border-t border-black/10 px-2 py-2 dark:border-white/10">
+                  <span className="text-[13px] text-black/65 dark:text-white/65">
+                    通知与主题
+                  </span>
+                  <div className="flex items-center gap-2">
+                    {homeUtilityControls()}
+                  </div>
+                </div>
+                <AccountMenuItem
+                  icon={LogOut}
+                  label="退出登录"
+                  onClick={() => {
+                    void handleLogout();
+                  }}
+                />
+              </div>
+            </div>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ) : (
+        <>
+          {homeThemeControl()}
+          <button
+            type="button"
+            className="flex h-[32px] w-[36px] items-center justify-center rounded-full border border-black/15 bg-white text-[11px] font-medium text-black/80 hover:bg-black/5 dark:border-white/12 dark:bg-[#161618] dark:text-white/80 dark:hover:bg-white/8"
+            onClick={openLoginDialog}
+          >
+            登录
+          </button>
+        </>
+      )}
+    </div>
+  );
+
   return (
-    <div className="min-h-svh overflow-x-hidden bg-white text-[#171717] dark:bg-[#0a0a0c] dark:text-zinc-100 [&_button]:cursor-pointer [&_input]:cursor-pointer [&_textarea]:cursor-pointer [&_img]:cursor-pointer [&_a]:cursor-pointer [&_[role=button]]:cursor-pointer">
+    <div className="lovart-home-surface min-h-svh overflow-x-hidden bg-white text-[#171717] dark:bg-[#0a0a0c] dark:text-zinc-100 [&_button]:cursor-pointer [&_input]:cursor-pointer [&_textarea]:cursor-pointer [&_img]:cursor-pointer [&_a]:cursor-pointer [&_[role=button]]:cursor-pointer">
       {shouldShowHomeBanner ? (
         <LovartPromoBanner
           actionText={homeBannerActionText}
@@ -1714,236 +1991,12 @@ export function LovartHome({
           text={homeBannerText}
         />
       ) : null}
-      <BrandTopBar
-        contentClassName="pl-[80px]"
-        logo={displayLogo}
-        offsetTop={shouldShowHomeBanner ? LOVART_PROMO_BANNER_HEIGHT : 0}
-        onLogoClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
-        showBrand={false}
-        siteName={siteName || "Lovart"}
-      >
-            <button className="flex h-8 w-8 items-center justify-center rounded-lg bg-black/5 text-black/75 hover:bg-black/10 dark:bg-white/6 dark:text-white/70 dark:hover:bg-white/10">
-              <Bell className="h-3.5 w-3.5" />
-            </button>
-
-            {isMembershipEnabled ? (
-              <HoverCard openDelay={100} closeDelay={120}>
-                  <HoverCardTrigger asChild>
-                    <Button
-                      variant="ghost"
-                      onClick={() => setUpgradeDialogOpen(true)}
-                      className="h-8 rounded-[14px] border border-black/10 bg-white px-2 text-[14px] text-black/72 shadow-sm hover:bg-black/5 hover:text-black dark:border-white/10 dark:bg-white/6 dark:text-white/72 dark:hover:bg-white/10 dark:hover:text-white"
-                    >
-                      <div className="inline-flex items-center gap-1 rounded-[9px] px-1.5 py-0.5 text-xs">
-                        <Zap className="h-3 w-3 text-amber-500" />
-                        {membershipData?.summary?.currentCredits ?? 0}
-                      </div>
-                    </Button>
-                  </HoverCardTrigger>
-                  <HoverCardContent
-                    align="end"
-                    sideOffset={10}
-                    className="w-[300px] rounded-3xl border border-black/10 bg-white p-0 shadow-xl dark:border-white/10 dark:bg-[#141416]"
-                  >
-                    <div className="p-4">
-                      <div className="mb-4 flex items-start justify-between">
-                        <div>
-                          <div className="text-[22px] font-semibold leading-none text-black dark:text-white">
-                            {currentPlan?.name || "Free"}
-                          </div>
-                        </div>
-                        <Button
-                          size="sm"
-                          className="h-8 rounded-2xl bg-[#2f3542] px-4 text-[13px] text-white hover:bg-[#242a36]"
-                          onClick={() => setUpgradeDialogOpen(true)}
-                        >
-                          升级
-                        </Button>
-                      </div>
-                      <div className="space-y-2.5 border-t border-black/10 pt-3 text-[14px] dark:border-white/10 dark:text-white/90">
-                        <div className="flex items-center justify-between">
-                          <span className="inline-flex items-center gap-2 text-black/80 dark:text-white/75">
-                            <Sparkles className="h-3.5 w-3.5" />
-                            积分
-                          </span>
-                          <span>{membershipData?.summary?.currentCredits ?? 0}</span>
-                        </div>
-                        <div className="flex items-center justify-between">
-                          <span className="inline-flex items-center gap-2 text-black/80 dark:text-white/75">
-                            <Upload className="h-3.5 w-3.5" />
-                            每日免费积分
-                          </span>
-                          <span>{membershipData?.summary?.dailyFreeCredits ?? 0}</span>
-                        </div>
-                      </div>
-                      <button
-                        type="button"
-                        className="mt-4 inline-flex items-center gap-1 text-[12px] font-medium text-black/80 hover:text-black dark:text-white/75 dark:hover:text-white"
-                        onClick={() => setUpgradeDialogOpen(true)}
-                      >
-                        使用详情
-                        <ChevronDown className="h-4 w-4 -rotate-90" />
-                      </button>
-                    </div>
-                  </HoverCardContent>
-              </HoverCard>
-            ) : null}
-
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <button
-                  type="button"
-                  className="inline-flex h-8 w-8 items-center justify-center rounded-[11px] border border-black/10 bg-white text-black/70 shadow-sm transition hover:bg-black/5 hover:text-black dark:border-white/10 dark:bg-white/6 dark:text-white/72 dark:hover:bg-white/10 dark:hover:text-white"
-                  title={`主题模式：${selectedThemeOption.label}`}
-                  aria-label={`主题模式：${selectedThemeOption.label}`}
-                >
-                  <SelectedThemeIcon className="h-[15px] w-[15px]" />
-                </button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent
-                align="end"
-                sideOffset={10}
-                className="!min-w-0 w-auto rounded-[18px] border-black/10 bg-white p-1.5 shadow-xl dark:border-white/10 dark:bg-[#141416]"
-              >
-                <div className="flex items-center gap-1">
-                  {THEME_MODE_OPTIONS.map((option) => {
-                    const OptionIcon = option.icon;
-                    const isSelected = selectedThemeMode === option.value;
-
-                    return (
-                      <DropdownMenuItem
-                        key={option.value}
-                        aria-label={option.label}
-                        className={cn(
-                          "flex h-[34px] w-[34px] cursor-pointer items-center justify-center rounded-[10px] p-0 focus:bg-black/5 dark:focus:bg-white/8",
-                          isSelected
-                            ? "bg-black text-white focus:bg-black focus:text-white dark:bg-white dark:text-black dark:focus:bg-white dark:focus:text-black"
-                            : "text-black/70 dark:text-white/70"
-                        )}
-                        onSelect={() => setTheme(option.value)}
-                        title={option.label}
-                      >
-                        <OptionIcon className="h-[15px] w-[15px]" />
-                      </DropdownMenuItem>
-                    );
-                  })}
-                </div>
-              </DropdownMenuContent>
-            </DropdownMenu>
-
-            {isAuthenticated ? (
-              <HoverCard openDelay={80} closeDelay={120}>
-                <HoverCardTrigger asChild>
-                  <button
-                    type="button"
-                    className="flex h-8 w-8 items-center justify-center rounded-full bg-[#d4551f] text-[14px] font-semibold text-white"
-                    aria-label="Account menu"
-                  >
-                    {userInitials}
-                  </button>
-                </HoverCardTrigger>
-                <HoverCardContent
-                  align="end"
-                  sideOffset={12}
-                  className="w-[300px] rounded-3xl border border-black/10 bg-white p-0 shadow-xl dark:border-white/10 dark:bg-[#141416]"
-                >
-                  <div className="p-3.5">
-                    <div className="rounded-3xl border border-black/10 bg-white p-3.5 dark:border-white/10 dark:bg-[#19191d]">
-                      <div className="flex justify-center">
-                        <div className="flex h-10 w-10 items-center justify-center rounded-full bg-[#d4551f] text-[14px] font-semibold text-white">
-                          {userInitials}
-                        </div>
-                      </div>
-
-                      <div className="mt-3 flex items-center justify-between gap-3">
-                        <div className="min-w-0">
-                          <div className="truncate text-[15px] font-semibold text-black dark:text-white">
-                            {userDisplayName}
-                          </div>
-                          <div className="truncate text-[12px] text-black/45 dark:text-white/45">
-                            {user?.email || ""}
-                          </div>
-                        </div>
-                        {isMembershipEnabled ? (
-                          <Button
-                            size="sm"
-                            className="h-8 rounded-2xl bg-[#2f3542] px-4 text-[13px] text-white hover:bg-[#242a36]"
-                            onClick={() => setUpgradeDialogOpen(true)}
-                          >
-                            升级
-                          </Button>
-                        ) : null}
-                      </div>
-
-                      <div className="mt-4 border-t border-black/10 pt-3 dark:border-white/10">
-                        <button
-                          type="button"
-                          className="flex w-full items-center justify-between rounded-2xl px-1 py-1 text-[13px] font-semibold text-black/80 hover:bg-black/5 dark:text-white/80 dark:hover:bg-white/6"
-                          onClick={() => {
-                            setAccountCenterTab("account");
-                            setUsageFilter("all");
-                            setAccountCenterOpen(true);
-                          }}
-                        >
-                          <span>积分</span>
-                          <span className="inline-flex items-center gap-2 text-[13px] font-semibold text-black/60 dark:text-white/55">
-                            {membershipData?.summary?.currentCredits ?? 0}
-                            <ArrowRight className="h-4 w-4" />
-                          </span>
-                        </button>
-                      </div>
-                    </div>
-
-                    <div className="mt-3 space-y-1">
-                      {isMembershipEnabled ? (
-                        <AccountMenuItem
-                          icon={Users}
-                          label="创建团队"
-                          onClick={() => toast.info("团队功能后续开放")}
-                        />
-                      ) : null}
-                      <AccountMenuItem
-                        icon={User}
-                        label="账户管理"
-                        onClick={() => {
-                          setAccountCenterTab("account");
-                          setUsageFilter("all");
-                          setAccountCenterOpen(true);
-                        }}
-                      />
-                      <AccountMenuItem
-                        icon={Info}
-                        label="使用指南"
-                        onClick={() => toast.info("使用指南后续开放")}
-                      />
-                      <AccountMenuItem
-                        icon={Mail}
-                        label="联系我们"
-                        onClick={() => setContactDialogOpen(true)}
-                      />
-                      <AccountMenuItem
-                        icon={LogOut}
-                        label="退出登录"
-                        onClick={() => {
-                          void handleLogout();
-                        }}
-                      />
-                    </div>
-                  </div>
-                </HoverCardContent>
-              </HoverCard>
-            ) : (
-              <button
-                type="button"
-                className="inline-flex h-8 items-center justify-center rounded-full border border-black/15 bg-white px-3 text-xs font-medium text-black/80 hover:bg-black/5 dark:border-white/12 dark:bg-[#161618] dark:text-white/80 dark:hover:bg-white/8"
-                onClick={openLoginDialog}
-              >
-                登录
-              </button>
-            )}
-      </BrandTopBar>
+      <div className="fixed bottom-5 left-4 z-[100] flex w-[44px] items-center rounded-full bg-[#f5f5f5] py-2 shadow-sm lg:hidden dark:bg-[#141416]">
+        {homeAccountControls()}
+      </div>
 
       <LovartSidebar
+        accountControls={homeAccountControls()}
         agentEnabled={siteSettingsData?.agentEnabled !== false}
         getItem={getLovartSidebarItem}
         isEnabled={isLovartSidebarItemEnabled}
@@ -1982,9 +2035,12 @@ export function LovartHome({
       />
 
       <main
+        style={
+          { "--home-banner-offset": `${shouldShowHomeBanner ? LOVART_PROMO_BANNER_HEIGHT : 0}px` } as CSSProperties
+        }
         className={cn(
-          "ml-[92px] mr-10 w-auto max-w-none pb-16 max-lg:mx-5",
-          shouldShowHomeBanner ? "pt-[113px]" : "pt-[68px]"
+          "ml-[120px] mr-[60px] w-auto max-w-none pb-16 max-lg:mx-5",
+          shouldShowHomeBanner ? "pt-[124px]" : "pt-[76px]"
         )}
       >
         {!isProjectsOnlyView && (
@@ -2013,25 +2069,15 @@ export function LovartHome({
             setPrompt={setPrompt}
             siteName={siteName}
             selectedModelId={selectedComposerModel.id}
+            onOpenGallery={() => featuredSectionRef.current?.scrollIntoView({ behavior: "smooth", block: "start" })}
           />
         )}
 
-        <LovartProjectsSection
-          deletingProjectId={deletingProjectId}
-          hasMoreProjects={hasMoreProjects}
-          isProjectsOnlyView={isProjectsOnlyView}
-          onCreateProject={openNewCanvas}
-          onDeleteProject={handleDeleteProject}
-          onOpenProject={openCanvasProject}
-          onPrepareCreate={preloadCanvasWorkspace}
-          onPrepareProject={prepareCanvasProject}
-          onViewAllProjects={openAllProjectsInPage}
-          projects={recentProjects}
-          projectSectionRef={projectSectionRef}
-        />
 
         {!isProjectsOnlyView && (
           <LovartFeaturedGallery
+            onOpenProjects={openAllProjectsInPage}
+            onOpenMaterials={handleOpenImageEditor}
             activeCategory={activeCategory}
             categories={discoveryTabs}
             featuredItems={featuredItems}
@@ -2042,6 +2088,22 @@ export function LovartHome({
             setActiveCategory={setActiveCategory}
           />
         )}
+
+        {(isProjectsOnlyView || recentProjects.length > 0) && (
+          <LovartProjectsSection
+            deletingProjectId={deletingProjectId}
+            hasMoreProjects={hasMoreProjects}
+            isProjectsOnlyView={isProjectsOnlyView}
+            onCreateProject={openNewCanvas}
+            onDeleteProject={handleDeleteProject}
+            onOpenProject={openCanvasProject}
+            onPrepareCreate={preloadCanvasWorkspace}
+            onPrepareProject={prepareCanvasProject}
+            onViewAllProjects={openAllProjectsInPage}
+            projects={recentProjects}
+            projectSectionRef={projectSectionRef}
+          />
+        )}
       </main>
 
       <button
@@ -2132,7 +2194,7 @@ export function LovartHome({
 
       {loginDialogOpen ? (
         <div
-          className="fixed inset-0 z-50 flex items-center justify-center bg-black/85 p-4 backdrop-blur-[1px]"
+          className="fixed inset-0 z-[9998] flex items-center justify-center bg-black/85 p-4 backdrop-blur-[1px]"
           onClick={() => setLoginDialogOpen(false)}
         >
           <div

components/home/lovart/lovart-featured-gallery.tsx

@@ -1,8 +1,11 @@
+import { ReferenceIcon } from "@/components/lovart/reference-icon";
 import { Gem, Heart, Loader2, PlayCircle } from "lucide-react";
 import type { Ref } from "react";
 import type { FeaturedImage } from "./types";
 
 type LovartFeaturedGalleryProps = {
+  onOpenProjects: () => void;
+  onOpenMaterials: () => void;
   activeCategory: string;
   categories: string[];
   featuredItems: FeaturedImage[];
@@ -13,7 +16,23 @@ type LovartFeaturedGalleryProps = {
   setActiveCategory: (category: string) => void;
 };
 
+function getFeaturedPreviewUrl(item: FeaturedImage) {
+  const source = item.thumbnailUrl || item.originalUrl;
+
+  if (
+    !source ||
+    !/^https:\/\/yybb\.top\//i.test(source) ||
+    source.includes("?")
+  ) {
+    return source;
+  }
+
+  return `${source}?imageView2/2/w/900/q/78`;
+}
+
 export function LovartFeaturedGallery({
+  onOpenProjects,
+  onOpenMaterials,
   activeCategory,
   categories,
   featuredItems,
@@ -24,21 +43,44 @@ export function LovartFeaturedGallery({
   setActiveCategory,
 }: LovartFeaturedGalleryProps) {
   return (
-    <section ref={featuredSectionRef} className="mt-14">
-      <h2 className="text-[16px] font-semibold leading-none text-[#1f1f1f] dark:text-white">
-        灵感发现
-      </h2>
+    <section
+      ref={featuredSectionRef}
+      className="lovart-discovery mt-16 scroll-mt-28"
+      aria-label="灵感发现"
+    >
+      <div className="flex items-center gap-2 overflow-x-auto pb-2 text-[13px] text-[#858585] dark:text-white/50">
+        <span className="inline-flex h-7 shrink-0 items-center gap-2 rounded-[8px] bg-[#ededed] px-3 text-[#252525] dark:bg-white/10 dark:text-white">
+          <ReferenceIcon name="skill" size={16} />
+          灵感发现
+        </span>
+        <button
+          type="button"
+          onClick={onOpenProjects}
+          className="inline-flex h-7 shrink-0 items-center gap-2 rounded-[8px] px-3 hover:bg-black/5 dark:hover:bg-white/10"
+        >
+          <ReferenceIcon name="folder" size={16} />
+          我的项目
+        </button>
+        <button
+          type="button"
+          onClick={onOpenMaterials}
+          className="inline-flex h-7 shrink-0 items-center gap-2 rounded-[8px] px-3 hover:bg-black/5 dark:hover:bg-white/10"
+        >
+          <ReferenceIcon name="brand" size={16} />
+          我的素材
+        </button>
+      </div>
 
-      <div className="mt-4 flex flex-wrap items-center gap-x-3 gap-y-2">
+      <div className="flex items-center gap-x-5 overflow-x-auto border-b border-[#ededed] px-3 dark:border-white/10">
         {categories.map((category) => (
           <button
             key={category}
             type="button"
             onClick={() => setActiveCategory(category)}
-            className={`h-7 rounded-[7px] px-3 text-[12px] font-normal leading-none transition-colors duration-150 ${
+            className={`relative h-9 shrink-0 border-b px-0 text-[13px] font-normal leading-none transition-colors duration-150 ${
               activeCategory === category
-                ? "bg-[#f2f2f2] text-[#202020] dark:bg-[#24242a] dark:text-white"
-                : "text-[#5f5f5f] hover:bg-[#f7f7f7] hover:text-[#202020] dark:text-white/55 dark:hover:bg-[#17171b]"
+                ? "border-[#303030] text-[#202020] dark:border-white dark:text-white"
+                : "border-transparent text-[#858585] hover:text-[#202020] dark:text-white/55 dark:hover:text-white"
             }`}
           >
             {category}
@@ -48,23 +90,41 @@ export function LovartFeaturedGallery({
 
       {featuredItems.length === 0 ? (
         <div className="mt-[22px] rounded-[10px] border border-dashed border-black/15 bg-[#f7f7f7] p-10 text-center text-[14px] text-black/35 dark:border-white/12 dark:bg-[#141416] dark:text-white/35">
-          {isLoadingFeatured ? "灵感内容加载中..." : "当前没有可展示的灵感数据。"}
+          {isLoadingFeatured
+            ? "灵感内容加载中..."
+            : "当前没有可展示的灵感数据。"}
         </div>
       ) : (
-        <div className="mt-[14px] columns-1 gap-[10px] md:columns-2 lg:columns-5">
+        <div className="mt-6 columns-1 gap-4 sm:columns-2 lg:columns-4">
           {featuredItems.map((item, index) => (
             <button
               key={item.id}
               type="button"
-              onClick={() => window.open(item.originalUrl || item.thumbnailUrl, "_blank")}
+              onClick={() =>
+                window.open(item.originalUrl || item.thumbnailUrl, "_blank")
+              }
               className="group mb-[24px] block w-full cursor-pointer break-inside-avoid text-left"
             >
               <img
-                src={item.thumbnailUrl || item.originalUrl}
+                src={getFeaturedPreviewUrl(item)}
                 alt={item.prompt || "灵感图"}
                 loading="lazy"
                 decoding="async"
-                className="block h-auto w-full rounded-[6px] bg-[#e8e8e8] object-cover transition-transform duration-150 ease-out will-change-transform group-hover:scale-[1.008] dark:bg-[#1b1c20]"
+                onError={(event) => {
+                  const image = event.currentTarget;
+                  const fallbackUrl = item.originalUrl || item.thumbnailUrl;
+
+                  if (
+                    !fallbackUrl ||
+                    image.dataset.fallbackApplied === "true"
+                  ) {
+                    return;
+                  }
+
+                  image.dataset.fallbackApplied = "true";
+                  image.src = fallbackUrl;
+                }}
+                className="block h-auto w-full rounded-[12px] bg-[#e8e8e8] object-cover transition-transform duration-150 ease-out will-change-transform group-hover:scale-[1.008] dark:bg-[#1b1c20]"
               />
               <div className="mt-[8px] flex h-[22px] items-center justify-between text-[11px] font-normal leading-none text-[#b8b8b8] dark:text-white/45">
                 <div className="flex min-w-0 items-center gap-[6px] pr-2">
@@ -91,7 +151,10 @@ export function LovartFeaturedGallery({
           ))}
         </div>
       )}
-      <div ref={featuredLoadMoreRef} className="mt-3 flex h-10 items-center justify-center">
+      <div
+        ref={featuredLoadMoreRef}
+        className="mt-3 flex h-10 items-center justify-center"
+      >
         {isLoadingMoreFeatured ? (
           <div className="inline-flex items-center gap-2 text-sm text-black/45 dark:text-white/45">
             <Loader2 className="h-3.5 w-3.5 animate-spin" />

components/home/lovart/lovart-hero-composer.tsx

@@ -1,6 +1,8 @@
 import dynamic from "next/dynamic";
-import { ArrowUp, Box, Lightbulb, Loader2, Plus, Sparkles, X } from "lucide-react";
-import type { ChangeEvent } from "react";
+import { ReferenceIcon } from "@/components/lovart/reference-icon";
+import { ModelIdentityIcon } from "@/components/lovart/model-identity-icon";
+import { Lightbulb, Loader2, X } from "lucide-react";
+import { useRef, type ChangeEvent } from "react";
 import { Button } from "@/components/ui/button";
 import {
   Select,
@@ -52,23 +54,19 @@ type LovartHeroComposerProps = {
   onModelChange: (modelId: string) => void;
   onStartAgentMode: () => void;
   selectedModelId: string;
+  onOpenGallery: () => void;
 };
 
 export function LovartHeroComposer({
   composerPlaceholder,
-  displayLogo,
   files,
   handleAddFiles,
-  heroPromoActionText,
-  heroPromoText,
   heroSubtitleText,
   heroTitleText,
   homeAnimationData,
   isAgentModeActive,
-  isMembershipEnabled,
   isSubmitting,
   onSubmit,
-  openUpgradeDialog,
   prompt,
   removeFile,
   setPrompt,
@@ -77,63 +75,71 @@ export function LovartHeroComposer({
   onModelChange,
   onStartAgentMode,
   selectedModelId,
+  onOpenGallery,
 }: LovartHeroComposerProps) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const uploadRef = useRef<HTMLInputElement>(null);
+  const suggestions = [
+    {
+      label: "电商",
+      icon: "commerce" as const,
+      prompt: "为我的产品设计一张高转化的电商主图，突出产品卖点。",
+    },
+    {
+      label: "社交媒体",
+      icon: "social" as const,
+      prompt: "设计一张适合社交媒体发布的视觉海报。",
+    },
+    {
+      label: "品牌",
+      icon: "branding" as const,
+      prompt: "为我的品牌设计一套统一的视觉形象。",
+    },
+    {
+      label: "创意",
+      icon: "creativity" as const,
+      prompt: "创作一张富有想象力和视觉冲击力的创意作品。",
+    },
+    {
+      label: "网站",
+      icon: "website" as const,
+      prompt: "设计一个简洁、现代的网站首页视觉稿。",
+    },
+  ];
+
   return (
-    <section className="mt-6 text-center">
-      {isMembershipEnabled ? (
-        <button
-          type="button"
-          onClick={openUpgradeDialog}
-          className="inline-flex w-full max-w-[620px] items-center gap-1.5 rounded-[12px] bg-[#fde8bf] px-3 py-1.5 text-[11px] leading-5 text-black/80 transition-colors duration-150 hover:bg-[#f9dfac] sm:w-auto sm:rounded-full sm:text-[12px] dark:bg-[#3f3013] dark:text-[#f6dfaa] dark:hover:bg-[#493819]"
-        >
-          <span className="rounded-full bg-[#ff9d3d] px-2 py-0.5 text-[10px] font-semibold text-white">NEW</span>
-          <span className="line-clamp-2 min-w-0 flex-1 text-left sm:line-clamp-1">
-            {heroPromoText || "现在升级，立享 Kling 3.0 与 Nano Banana Pro，最高 5 折优惠"}
-          </span>
-          <span className="shrink-0 text-[#ff7a00]">{heroPromoActionText || "立即升级"}</span>
-        </button>
-      ) : (
-        <div className="inline-flex w-full max-w-[620px] items-center gap-1.5 rounded-[12px] bg-[#fde8bf] px-3 py-1.5 text-[11px] leading-5 text-black/80 sm:w-auto sm:rounded-full sm:text-[12px] dark:bg-[#3f3013] dark:text-[#f6dfaa]">
-          <span className="rounded-full bg-[#ff9d3d] px-2 py-0.5 text-[10px] font-semibold text-white">NEW</span>
-          <span className="line-clamp-2 min-w-0 flex-1 text-left sm:line-clamp-1">
-            {heroPromoText || "现在升级，立享 Kling 3.0 与 Nano Banana Pro，最高 5 折优惠"}
-          </span>
-        </div>
-      )}
+    <section className="lovart-hero mt-6 text-center" aria-label="开始设计">
+      <h1 className="text-[20px] font-medium leading-7 tracking-[-0.02em] dark:text-white">
+        {heroTitleText || "你想设计什么？"}
+      </h1>
+      {heroSubtitleText ? (
+        <p className="mt-2 text-[13px] text-black/45 dark:text-white/45">
+          {heroSubtitleText}
+        </p>
+      ) : null}
 
-      <div className="mt-7 flex items-center justify-center gap-1.5">
-        {displayLogo ? (
-          <img
-            src={displayLogo}
-            alt={siteName}
-            className="h-8 w-8 rounded-full object-cover"
-          />
-        ) : (
-          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-black text-white dark:bg-white dark:text-black">
-            <Sparkles className="h-3.5 w-3.5" />
-          </div>
-        )}
-        <h1 className="text-[28px] font-semibold leading-tight sm:text-[30px] dark:text-white">
-          {heroTitleText || `${siteName || "Lovart"} 让设计更简单`}
-        </h1>
-      </div>
-      <p className="mt-1.5 text-[12px] text-black/38 dark:text-white/48">
-        {heroSubtitleText || "懂你的设计代理，帮你搞定一切"}
-      </p>
-
-      <div className="mx-auto mt-7 w-full max-w-[760px] rounded-[16px] border border-[#e1e4e8] bg-white px-[18px] pb-[10px] pt-[14px] shadow-[0_8px_22px_rgba(0,0,0,0.055)] transition-shadow duration-150 focus-within:shadow-[0_10px_26px_rgba(0,0,0,0.075)] dark:border-white/10 dark:bg-[#141416] dark:shadow-[0_14px_38px_rgba(0,0,0,0.32)]">
+      <div className="lovart-home-composer mx-auto mt-7 w-full max-w-[760px] rounded-[24px] border border-[#e5e5e5] bg-white px-[16px] pb-[8px] pt-[14px] shadow-[0_2px_4px_rgba(0,0,0,0.04),0_8px_20px_rgba(0,0,0,0.025)] transition-shadow duration-150 focus-within:shadow-[0_3px_8px_rgba(0,0,0,0.07)] dark:border-white/12 dark:bg-[#141416]">
         <Textarea
+          ref={textareaRef}
+          aria-label="描述你的设计需求"
           value={prompt}
           onChange={(event) => setPrompt(event.target.value)}
           placeholder={composerPlaceholder}
-          className="min-h-[60px] resize-none border-0 bg-transparent px-0 !text-[16px] leading-6 text-[#20242a] shadow-none placeholder:text-[#aeb3bb] focus-visible:ring-0 md:!text-[14px] dark:text-white dark:placeholder:text-white/35"
+          className="min-h-[54px] resize-none border-0 bg-transparent px-0 !text-[16px] leading-6 text-[#20242a] shadow-none placeholder:text-[#b7b7b7] focus-visible:ring-0 md:!text-[14px] dark:text-white dark:placeholder:text-white/35"
         />
 
         {files.length > 0 && (
           <div className="mb-3 flex flex-wrap gap-2 px-1">
             {files.map((item) => (
-              <div key={item.id} className="group relative h-11 w-11 overflow-hidden rounded-md border border-black/10 dark:border-white/10">
-                <img src={item.previewUrl} alt={item.file.name} className="h-full w-full object-cover" />
+              <div
+                key={item.id}
+                className="group relative h-11 w-11 overflow-hidden rounded-md border border-black/10 dark:border-white/10"
+              >
+                <img
+                  src={item.previewUrl}
+                  alt={item.file.name}
+                  className="h-full w-full object-cover"
+                />
                 <button
                   type="button"
                   className="absolute right-0 top-0 hidden h-5 w-5 items-center justify-center rounded-bl bg-black/60 text-white group-hover:flex"
@@ -150,8 +156,10 @@ export function LovartHeroComposer({
         <div className="flex min-h-[44px] items-center justify-between pt-2">
           <div className="flex min-w-0 flex-1 items-center gap-4">
             <label className="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-[#20242a] transition-colors duration-150 hover:bg-black/5 dark:text-white/72 dark:hover:bg-white/8">
-              <Plus className="h-4 w-4" strokeWidth={1.9} />
+              <ReferenceIcon name="plus" size={18} />
               <input
+                ref={uploadRef}
+                aria-label="上传参考图"
                 type="file"
                 accept="image/*"
                 multiple
@@ -186,7 +194,17 @@ export function LovartHeroComposer({
                 title="选择模型"
               >
                 <div className="flex h-8 w-8 items-center justify-center">
-                  <Box className="block h-4 w-4" strokeWidth={1.9} />
+                  <ModelIdentityIcon
+                    name={
+                      modelOptions.find((model) => model.id === selectedModelId)
+                        ?.displayName || "auto"
+                    }
+                    avatarUrl={
+                      modelOptions.find((model) => model.id === selectedModelId)
+                        ?.avatarUrl
+                    }
+                    size={18}
+                  />
                 </div>
               </SelectTrigger>
               <SelectContent
@@ -201,18 +219,15 @@ export function LovartHeroComposer({
                     className="h-8 rounded-[7px] text-[12px] [&>span:first-child]:hidden [&>span:last-child]:block [&>span:last-child]:w-full"
                   >
                     <span className="flex min-w-0 items-center gap-2">
-                      <span className="flex h-5 w-5 shrink-0 items-center justify-center overflow-hidden rounded-full border border-black/10 bg-white text-[10px] font-medium text-[#6b7280] dark:border-white/15 dark:bg-white/8 dark:text-white/70">
-                        {model.avatarUrl ? (
-                          <img
-                            alt=""
-                            className="h-full w-full object-cover"
-                            src={model.avatarUrl}
-                          />
-                        ) : (
-                          (model.displayName || "A").slice(0, 1)
-                        )}
+                      <ModelIdentityIcon
+                        name={model.displayName}
+                          identity={`${model.modelId || model.id} ${model.providerType || ""}`}
+                        avatarUrl={model.avatarUrl}
+                        size={18}
+                      />
+                      <span className="min-w-0 flex-1 truncate">
+                        {model.displayName}
                       </span>
-                      <span className="min-w-0 flex-1 truncate">{model.displayName}</span>
                     </span>
                   </SelectItem>
                 ))}
@@ -220,19 +235,63 @@ export function LovartHeroComposer({
             </Select>
             <Button
               onClick={onSubmit}
+              aria-label="开始生成"
               disabled={isSubmitting || (!prompt.trim() && files.length === 0)}
               className="h-9 w-9 rounded-full bg-[#eeeeef] p-0 text-[#c2c7cf] transition-colors duration-150 hover:bg-[#e5e6e8] hover:text-[#7f8794] dark:bg-white/10 dark:text-white/40 dark:hover:bg-white/16"
             >
               {isSubmitting ? (
                 <Loader2 className="h-4.5 w-4.5 animate-spin" />
               ) : (
-                <ArrowUp className="h-4 w-4" strokeWidth={1.8} />
+                <ReferenceIcon name="arrow-up" size={18} />
               )}
             </Button>
           </div>
         </div>
       </div>
 
+      <div className="mx-auto mt-4 w-full max-w-[760px] space-y-3 px-4 text-left">
+        <div className="flex flex-wrap items-center gap-2">
+          <span className="mr-1 w-[96px] shrink-0 text-[13px] text-[#8b8b8b] dark:text-white/45">
+            {siteName} 帮你做：
+          </span>
+          {suggestions.map(({ label, icon, prompt: suggestion }) => (
+            <button
+              key={label}
+              type="button"
+              className="lovart-suggestion"
+              onClick={() => {
+                setPrompt(suggestion);
+                textareaRef.current?.focus();
+              }}
+            >
+              <ReferenceIcon name={icon} size={18} />
+              {label}
+            </button>
+          ))}
+        </div>
+        <div className="flex flex-wrap items-center gap-2">
+          <span className="mr-1 w-[96px] shrink-0 text-[13px] text-[#8b8b8b] dark:text-white/45">
+            连接/收集灵感：
+          </span>
+          <button
+            type="button"
+            className="lovart-suggestion"
+            onClick={() => uploadRef.current?.click()}
+          >
+            <ReferenceIcon name="connections" size={18} />
+            上传我的参考素材
+          </button>
+          <button
+            type="button"
+            className="lovart-suggestion"
+            onClick={onOpenGallery}
+          >
+            <ReferenceIcon name="clipper" size={18} />
+            浏览灵感，发现更多创意
+          </button>
+        </div>
+      </div>
+
       {homeAnimationData?.enabled && homeAnimationData?.htmlContent ? (
         <div className="mt-6 w-full">
           <HomeAnimationEmbed htmlContent={homeAnimationData.htmlContent} />