From 2793582fd15cb5e51c9a0d7438688936d4b13d1f Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Sun, 15 Feb 2026 20:18:28 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96AI=E8=AF=A6=E6=83=85=E7=94=9F?=
 =?UTF-8?q?=E6=88=90Agent=E6=B5=81=E7=A8=8B=E4=B8=8EPC=E5=B7=A5=E4=BD=9C?=
 =?UTF-8?q?=E5=8F=B0=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../settings/admin-settings-client.tsx        |   19 +
 app/api/canvas/detail-plan/route.ts           |  781 +++++++++++
 app/api/canvas/generate/image/route.ts        |   31 +-
 app/api/site-settings/route.ts                |   53 +
 components/canvas/CanvasChatPanel.tsx         | 1215 ++++++++++++++++-
 5 files changed, 2076 insertions(+), 23 deletions(-)
 create mode 100644 app/api/canvas/detail-plan/route.ts

diff --git a/app/(admin)/settings/admin-settings-client.tsx b/app/(admin)/settings/admin-settings-client.tsx
index ad8258b7e..1972b9eba 100644
--- a/app/(admin)/settings/admin-settings-client.tsx
+++ b/app/(admin)/settings/admin-settings-client.tsx
@@ -193,6 +193,7 @@ type SiteSettings = {
   tutorialEnabled: boolean;
   rankingEnabled: boolean;
   canvasEnabled: boolean;
+  aiDetailGenerationEnabled: boolean;
   canvasDefaultModelId: string | null;
   canvasAutoModeDefaultModelId: string | null;
   lovartComposerPrefix: string;
@@ -432,6 +433,7 @@ export function AdminSettingsClient() {
     tutorialEnabled: false,
     rankingEnabled: true,
     canvasEnabled: true,
+    aiDetailGenerationEnabled: false,
     canvasDefaultModelId: null,
     canvasAutoModeDefaultModelId: null,
     lovartComposerPrefix: "让Buyi-ai",
@@ -496,6 +498,7 @@ export function AdminSettingsClient() {
         tutorialEnabled: siteSettingsData.tutorialEnabled ?? false,
         rankingEnabled: siteSettingsData.rankingEnabled ?? true,
         canvasEnabled: siteSettingsData.canvasEnabled ?? true,
+        aiDetailGenerationEnabled: siteSettingsData.aiDetailGenerationEnabled ?? false,
         canvasDefaultModelId: siteSettingsData.canvasDefaultModelId || null,
         canvasAutoModeDefaultModelId: siteSettingsData.canvasAutoModeDefaultModelId || null,
         lovartComposerPrefix:
@@ -4144,6 +4147,22 @@ export function AdminSettingsClient() {
                   </div>
                   {siteSettings.canvasEnabled && (
                     <>
+                      <div className="flex items-center justify-between rounded-lg border p-3">
+                        <div className="space-y-0.5">
+                          <Label htmlFor="aiDetailGenerationEnabled">AI详情生成功能</Label>
+                          <div className="text-xs text-muted-foreground">
+                            开启后，无限画布前端会显示“AI详情生成”入口；关闭后前端隐藏该功能。
+                          </div>
+                        </div>
+                        <Switch
+                          id="aiDetailGenerationEnabled"
+                          checked={siteSettings.aiDetailGenerationEnabled}
+                          onCheckedChange={(checked) =>
+                            setSiteSettings({ ...siteSettings, aiDetailGenerationEnabled: checked })
+                          }
+                        />
+                      </div>
+
                       <div className="space-y-2">
                         <Label htmlFor="canvasDefaultModelId">画布默认生图模型</Label>
                         <Select
diff --git a/app/api/canvas/detail-plan/route.ts b/app/api/canvas/detail-plan/route.ts
new file mode 100644
index 000000000..8a9a87e40
--- /dev/null
+++ b/app/api/canvas/detail-plan/route.ts
@@ -0,0 +1,781 @@
+import { NextResponse } from "next/server";
+import { generateText } from "ai";
+import { auth } from "@/app/(auth)/auth";
+import {
+  getAgentAiModelWithProvider,
+  getEnabledAiModelsWithProvider,
+} from "@/lib/db/queries";
+import { getLanguageModelById } from "@/lib/ai/dynamic-provider";
+
+export const runtime = "nodejs";
+export const maxDuration = 60;
+
+type DetailPlanRequest = {
+  prompt?: string;
+  count?: number;
+  outputLanguage?: string;
+  referenceImages?: string[];
+  referenceImageNotes?: string[];
+  modelImageUrl?: string;
+  brief?: {
+    productName?: string;
+    targetAudience?: string;
+    mainUser?: string;
+    usageScenario?: string;
+    triggerMoment?: string;
+    coreNeed?: string;
+    riskConcern?: string;
+    expectedResult?: string;
+    coreSellingPoint?: string;
+    positioningStatement?: string;
+    userVoice?: string;
+    competitorReference?: string;
+    priceBand?: string;
+    brandTone?: string;
+    bannedWords?: string;
+  };
+};
+
+type DetailBrief = {
+  productName: string;
+  targetAudience: string;
+  mainUser: string;
+  usageScenario: string;
+  triggerMoment: string;
+  coreNeed: string;
+  riskConcern: string;
+  expectedResult: string;
+  coreSellingPoint: string;
+  positioningStatement: string;
+  userVoice: string;
+  competitorReference: string;
+  priceBand: string;
+  brandTone: string;
+  bannedWords: string;
+};
+
+type DetailScreenType = "A" | "B" | "C";
+
+type DetailPlanScreen = {
+  index: number;
+  screenType: DetailScreenType;
+  objective: string;
+  title: string;
+  subtitle: string;
+  copy: string;
+  layoutNote: string;
+  useModel: boolean;
+  modelReason: string;
+  visualPrompt: string;
+  fabe: {
+    b: string;
+    f: string;
+    a: string;
+    e: string;
+  };
+};
+
+type DetailPlanResponse = {
+  summary: string;
+  prompts: string[];
+  screenSize: {
+    width: number;
+    height: number;
+  };
+  globalStyle: {
+    designLanguage: string;
+    typography: {
+      fontFamily: string;
+      title: string;
+      subtitle: string;
+      body: string;
+    };
+    layout: {
+      grid: string;
+      safeArea: string;
+      rhythm: string;
+    };
+    palette: string;
+  };
+  skillFlow: {
+    name: string;
+    version: string;
+    steps: string[];
+  };
+  qualityChecks: {
+    passed: boolean;
+    issues: string[];
+  };
+  screens: DetailPlanScreen[];
+  model?: {
+    id: string;
+    displayName: string;
+    providerType: string;
+  };
+};
+
+function buildDetailSkillFlow(language: "zh" | "en") {
+  if (language === "en") {
+    return {
+      name: "AI Detail Generation Skill",
+      version: "1.0",
+      steps: [
+        "Positioning Card: identify buyer, user, scenario, trigger, risk, expected outcome.",
+        "Need Decomposition: prioritize core demand and convert feature to buying reason.",
+        "Golden Five-Screen Structure: core value, differentiation, trust proof.",
+        "FABE Copying: each frame includes Benefit, Feature, Advantage, Evidence.",
+        "A/B/C Visual Rhythm: emotional scene + rational proof + conversion closure.",
+        "Global Consistency: fixed size, unified typography hierarchy, layout rhythm and style.",
+      ],
+    };
+  }
+  return {
+    name: "AI详情生成技能",
+    version: "1.0",
+    steps: [
+      "定位卡：明确购买人群、使用者、主场景、触发时刻、顾虑与期望结果。",
+      "需求拆解：按核心需求优先级，把卖点转成买点表达。",
+      "黄金五屏：前2屏讲核心卖点，3-4屏做差异强化，第5屏证据收口。",
+      "FABE文案：每屏都输出利益(B)、特征(F)、优势(A)、证据(E)。",
+      "A/B/C视觉节奏：场景共鸣 + 理性证明 + 转化收尾。",
+      "全局一致性：固定尺寸、统一字体层级、统一排版节奏与设计风格。",
+    ],
+  };
+}
+
+function clampCount(value: unknown): number {
+  const num = Number(value);
+  if (!Number.isFinite(num)) return 5;
+  return Math.min(12, Math.max(5, Math.round(num)));
+}
+
+function sanitizeReferenceImages(images: unknown): string[] {
+  if (!Array.isArray(images)) return [];
+  return images
+    .map((item) => String(item || "").trim())
+    .filter((url) => /^https?:\/\//i.test(url))
+    .slice(0, 6);
+}
+
+function sanitizeReferenceImageNotes(notes: unknown): string[] {
+  if (!Array.isArray(notes)) return [];
+  return notes
+    .map((item) => String(item || "").replace(/\s+/g, " ").trim())
+    .filter(Boolean)
+    .slice(0, 6);
+}
+
+function normalizeOutputLanguage(value: unknown): "zh" | "en" {
+  const raw = String(value || "").toLowerCase();
+  if (raw.includes("en") || raw.includes("english") || raw.includes("英文")) {
+    return "en";
+  }
+  return "zh";
+}
+
+function normalizeDetailBrief(value: unknown): DetailBrief {
+  const raw = (value || {}) as Record<string, unknown>;
+  const normalize = (key: string) => String(raw[key] || "").replace(/\s+/g, " ").trim();
+  return {
+    productName: normalize("productName"),
+    targetAudience: normalize("targetAudience"),
+    mainUser: normalize("mainUser"),
+    usageScenario: normalize("usageScenario"),
+    triggerMoment: normalize("triggerMoment"),
+    coreNeed: normalize("coreNeed"),
+    riskConcern: normalize("riskConcern"),
+    expectedResult: normalize("expectedResult"),
+    coreSellingPoint: normalize("coreSellingPoint"),
+    positioningStatement: normalize("positioningStatement"),
+    userVoice: normalize("userVoice"),
+    competitorReference: normalize("competitorReference"),
+    priceBand: normalize("priceBand"),
+    brandTone: normalize("brandTone"),
+    bannedWords: normalize("bannedWords"),
+  };
+}
+
+function extractJsonBlock<T = Record<string, unknown>>(text: string): T | null {
+  const matched = text.match(/\{[\s\S]*\}/);
+  if (!matched) return null;
+  try {
+    return JSON.parse(matched[0]) as T;
+  } catch {
+    return null;
+  }
+}
+
+function buildBriefText(brief: DetailBrief, language: "zh" | "en") {
+  const lines =
+    language === "en"
+      ? [
+          brief.productName ? `Product: ${brief.productName}` : "",
+          `Primary buyer audience: ${brief.targetAudience}`,
+          brief.mainUser ? `Primary user: ${brief.mainUser}` : "",
+          `Main usage scenario: ${brief.usageScenario}`,
+          brief.triggerMoment ? `Trigger moment: ${brief.triggerMoment}` : "",
+          `Core demand: ${brief.coreNeed}`,
+          brief.riskConcern ? `Risk concern: ${brief.riskConcern}` : "",
+          brief.expectedResult ? `Expected result: ${brief.expectedResult}` : "",
+          brief.coreSellingPoint ? `Core mental keyword: ${brief.coreSellingPoint}` : "",
+          brief.positioningStatement ? `Positioning statement: ${brief.positioningStatement}` : "",
+          brief.userVoice ? `User voice samples: ${brief.userVoice}` : "",
+          brief.competitorReference ? `Competitor reference: ${brief.competitorReference}` : "",
+          brief.priceBand ? `Price band: ${brief.priceBand}` : "",
+          brief.brandTone ? `Brand tone: ${brief.brandTone}` : "",
+          brief.bannedWords ? `Banned words: ${brief.bannedWords}` : "",
+        ]
+      : [
+          brief.productName ? `产品：${brief.productName}` : "",
+          `主购买人群：${brief.targetAudience}`,
+          brief.mainUser ? `主使用者：${brief.mainUser}` : "",
+          `主场景：${brief.usageScenario}`,
+          brief.triggerMoment ? `触发时刻：${brief.triggerMoment}` : "",
+          `核心需求：${brief.coreNeed}`,
+          brief.riskConcern ? `用户顾虑：${brief.riskConcern}` : "",
+          brief.expectedResult ? `期望结果：${brief.expectedResult}` : "",
+          brief.coreSellingPoint ? `核心心智词：${brief.coreSellingPoint}` : "",
+          brief.positioningStatement ? `一句话定位：${brief.positioningStatement}` : "",
+          brief.userVoice ? `用户原话样本：${brief.userVoice}` : "",
+          brief.competitorReference ? `竞品对标：${brief.competitorReference}` : "",
+          brief.priceBand ? `价格带：${brief.priceBand}` : "",
+          brief.brandTone ? `品牌语气：${brief.brandTone}` : "",
+          brief.bannedWords ? `禁用词：${brief.bannedWords}` : "",
+        ];
+
+  return lines.filter(Boolean).join("\n");
+}
+
+function buildDefaultGlobalStyle(language: "zh" | "en") {
+  if (language === "en") {
+    return {
+      designLanguage: "Clean premium e-commerce detail storytelling",
+      typography: {
+        fontFamily: "Unified modern sans-serif family across all frames",
+        title: "Main title: same weight/size hierarchy, bold and concise",
+        subtitle: "Subtitle: one level below title with stable spacing",
+        body: "Body text: readable medium-small size with consistent leading",
+      },
+      layout: {
+        grid: "Unified 12-column vertical layout with consistent alignment",
+        safeArea: "Top title area, middle product focus area, bottom proof area",
+        rhythm: "Use identical margin/padding rhythm across all frames",
+      },
+      palette: "Keep one unified palette with stable contrast and accent color",
+    };
+  }
+  return {
+    designLanguage: "高转化电商详情叙事风格（统一、克制、专业）",
+    typography: {
+      fontFamily: "全套统一现代无衬线字体家族，不混用",
+      title: "主标题使用统一字号/字重层级，简短有力",
+      subtitle: "副标题保持同一层级与间距，承接主标题",
+      body: "正文说明统一行高与字距，保证可读性",
+    },
+    layout: {
+      grid: "统一 12 栅格竖版布局，所有屏幕对齐关系一致",
+      safeArea: "上区标题、中区产品主体、下区证据与转化信息",
+      rhythm: "边距与留白节奏全套一致，避免每屏乱跳",
+    },
+    palette: "全套保持同一主色/强调色/中性色体系，明暗对比稳定",
+  };
+}
+
+function buildFallbackScreens(params: {
+  prompt: string;
+  count: number;
+  language: "zh" | "en";
+  brief: DetailBrief;
+  globalStyle: DetailPlanResponse["globalStyle"];
+  referenceImageNotes: string[];
+  hasModelImage: boolean;
+}): DetailPlanScreen[] {
+  const { prompt, count, language, brief, globalStyle, referenceImageNotes, hasModelImage } = params;
+  const productLabel =
+    brief.productName || (language === "en" ? "the product" : "该产品");
+  const keyword =
+    brief.coreSellingPoint || (language === "en" ? "core value" : "核心价值");
+  const mainScenario = brief.usageScenario || (language === "en" ? "daily life" : "日常场景");
+  const coreNeed = brief.coreNeed || (language === "en" ? "user demand" : "核心需求");
+  const positioning =
+    brief.positioningStatement || (language === "en" ? "No explicit positioning statement" : "未提供一句话定位");
+
+  const defaultObjectives =
+    language === "en"
+      ? [
+          "Hero scene with one core value",
+          "Pain-point resonance and trigger moment",
+          "Solution structure and key mechanism",
+          "Differentiation reinforcement",
+          "Evidence and trust closing",
+        ]
+      : [
+          "首屏主视觉聚焦单一核心卖点",
+          "痛点共鸣与触发场景放大",
+          "解决方案与关键机制说明",
+          "差异化优势重复强化",
+          "证据背书与信任收口",
+        ];
+  const screenTypeSequence: DetailScreenType[] = ["B", "A", "B", "C", "B"];
+
+  return Array.from({ length: count }).map((_, index) => {
+    const screenType =
+      screenTypeSequence[index] || (index % 3 === 0 ? "B" : index % 3 === 1 ? "A" : "C");
+    const objective =
+      defaultObjectives[index] ||
+      (language === "en"
+        ? `Extended detail frame ${index + 1}`
+        : `延展分镜 ${index + 1}`);
+    const title =
+      language === "en"
+        ? `${keyword} Frame ${index + 1}`
+        : `${keyword} 第${index + 1}屏`;
+    const subtitle =
+      language === "en"
+        ? `For ${brief.targetAudience}, solve "${coreNeed}" in ${mainScenario}.`
+        : `面向${brief.targetAudience}，在${mainScenario}场景解决“${coreNeed}”。`;
+    const copy =
+      language === "en"
+        ? `${productLabel} turns key pain points into visible outcomes with a clear decision path.`
+        : `${productLabel}将关键痛点转为可感知结果，形成清晰购买决策路径。`;
+    const layoutNote =
+      language === "en"
+        ? `Use fixed layout rhythm. Keep title/subtitle/body hierarchy identical to all other frames.`
+        : `使用固定版式节奏，标题/副标题/正文层级与其余页面完全一致。`;
+    const useModel = hasModelImage && (index === 1 || index === 3 || index >= 5);
+    const modelReason = useModel
+      ? language === "en"
+        ? "This frame needs human scenario demonstration, so use the fixed model image."
+        : "本屏需要人物场景演示，使用固定模特图。"
+      : language === "en"
+        ? "This frame focuses on product-only communication without human figure."
+        : "本屏聚焦产品信息展示，不使用人物。";
+    const fabe =
+      language === "en"
+        ? {
+            b: `Get ${coreNeed} resolved with less effort and risk.`,
+            f: `Show concrete product structure and material facts.`,
+            a: `Outperform generic options in core scenario performance.`,
+            e: `Use test data, certification, and before-after comparisons.`,
+          }
+        : {
+            b: `用户可低成本获得“${coreNeed}”的结果。`,
+            f: "给出可验证的结构、材质或工艺事实。",
+            a: "强调在主场景下优于普通方案的关键优势。",
+            e: "使用检测、认证、对比图等证据收尾。",
+          };
+
+    const visualPrompt =
+      language === "en"
+        ? [
+            `E-commerce detail frame ${index + 1}, objective: ${objective}.`,
+            `Fixed vertical canvas 790x1300 pixels.`,
+            `Keep exact product identity consistent across all frames.`,
+            `Main scene: ${mainScenario}; audience: ${brief.targetAudience}; core demand: ${coreNeed}.`,
+            `Positioning statement: ${positioning}.`,
+            `Global style: ${globalStyle.designLanguage}.`,
+            `Typography: ${globalStyle.typography.fontFamily}; ${globalStyle.typography.title}; ${globalStyle.typography.subtitle}; ${globalStyle.typography.body}.`,
+            `Layout: ${globalStyle.layout.grid}; ${globalStyle.layout.safeArea}; ${globalStyle.layout.rhythm}.`,
+            `Palette: ${globalStyle.palette}.`,
+            referenceImageNotes.length > 0
+              ? `Reference image set roles: ${referenceImageNotes.join(" | ")}. Keep product identity and details fully consistent.`
+              : "",
+            useModel
+              ? "Integrate the same human model from the uploaded model image."
+              : "No human figure in this frame.",
+            `Commercial product photography, typography-safe area, no extra watermark.`,
+            `Task context: ${prompt}.`,
+          ].join(" ")
+        : [
+            `电商详情页第${index + 1}屏，目标：${objective}。`,
+            "画布固定竖版 790x1300 像素。",
+            "全套保持同一产品外观一致（结构、材质、颜色、比例、Logo）。",
+            `主场景：${mainScenario}；人群：${brief.targetAudience}；核心需求：${coreNeed}。`,
+            `一句话定位：${positioning}。`,
+            `全局风格：${globalStyle.designLanguage}。`,
+            `字体规范：${globalStyle.typography.fontFamily}；${globalStyle.typography.title}；${globalStyle.typography.subtitle}；${globalStyle.typography.body}。`,
+            `版式规范：${globalStyle.layout.grid}；${globalStyle.layout.safeArea}；${globalStyle.layout.rhythm}。`,
+            `配色规范：${globalStyle.palette}。`,
+            referenceImageNotes.length > 0
+              ? `参考图角色：${referenceImageNotes.join("；")}；必须严格保持产品一致性与细节一致性。`
+              : "",
+            useModel ? "本屏融入固定模特图中的同一人物。" : "本屏不要出现人物。",
+            "商业摄影质感，留出清晰文案排版区，不要水印。",
+            `任务上下文：${prompt}。`,
+          ].join("");
+
+    return {
+      index: index + 1,
+      screenType,
+      objective,
+      title,
+      subtitle,
+      copy,
+      layoutNote,
+      useModel,
+      modelReason,
+      visualPrompt,
+      fabe,
+    };
+  });
+}
+
+function buildFallbackPlan(params: {
+  prompt: string;
+  count: number;
+  language: "zh" | "en";
+  brief: DetailBrief;
+  referenceImageNotes: string[];
+  hasModelImage: boolean;
+}): DetailPlanResponse {
+  const { count, language } = params;
+  const globalStyle = buildDefaultGlobalStyle(language);
+  const skillFlow = buildDetailSkillFlow(language);
+  const screens = buildFallbackScreens({
+    ...params,
+    globalStyle,
+  });
+  const qualityChecks = evaluatePlanQuality({
+    screens,
+    hasModelImage: params.hasModelImage,
+  });
+  return {
+    summary:
+      language === "en"
+        ? `Generated ${count} storyboard frames with fixed size 790x1300.`
+        : `已生成 ${count} 段详情分镜，固定尺寸 790x1300。`,
+    prompts: screens.map((item) => item.visualPrompt),
+    screenSize: {
+      width: 790,
+      height: 1300,
+    },
+    globalStyle,
+    skillFlow,
+    qualityChecks,
+    screens,
+  };
+}
+
+function sanitizeScreen(
+  raw: unknown,
+  fallback: DetailPlanScreen
+): DetailPlanScreen {
+  const source = (raw || {}) as Record<string, unknown>;
+  const safeText = (value: unknown, defaultValue: string) => {
+    const normalized = String(value || "").replace(/\s+/g, " ").trim();
+    return normalized || defaultValue;
+  };
+
+  const fabeSource = (source.fabe || {}) as Record<string, unknown>;
+  const visualPrompt = safeText(source.visualPrompt, fallback.visualPrompt);
+  const rawScreenType = String(source.screenType || "").trim().toUpperCase();
+  const screenType: DetailScreenType =
+    rawScreenType === "A" || rawScreenType === "B" || rawScreenType === "C"
+      ? (rawScreenType as DetailScreenType)
+      : fallback.screenType;
+  return {
+    index: fallback.index,
+    screenType,
+    objective: safeText(source.objective, fallback.objective),
+    title: safeText(source.title, fallback.title),
+    subtitle: safeText(source.subtitle, fallback.subtitle),
+    copy: safeText(source.copy, fallback.copy),
+    layoutNote: safeText(source.layoutNote, fallback.layoutNote),
+    useModel:
+      typeof source.useModel === "boolean" ? source.useModel : fallback.useModel,
+    modelReason: safeText(source.modelReason, fallback.modelReason),
+    visualPrompt: visualPrompt.includes("790x1300")
+      ? visualPrompt
+      : `${visualPrompt} 画布固定 790x1300 像素。`,
+    fabe: {
+      b: safeText(fabeSource.b, fallback.fabe.b),
+      f: safeText(fabeSource.f, fallback.fabe.f),
+      a: safeText(fabeSource.a, fallback.fabe.a),
+      e: safeText(fabeSource.e, fallback.fabe.e),
+    },
+  };
+}
+
+function sanitizePlannedScreens(
+  raw: unknown,
+  fallbackScreens: DetailPlanScreen[],
+): DetailPlanScreen[] {
+  if (!Array.isArray(raw)) {
+    return fallbackScreens;
+  }
+  return fallbackScreens.map((fallback, index) => sanitizeScreen(raw[index], fallback));
+}
+
+function sanitizeGlobalStyle(
+  raw: unknown,
+  fallback: DetailPlanResponse["globalStyle"],
+): DetailPlanResponse["globalStyle"] {
+  const source = (raw || {}) as Record<string, unknown>;
+  const toText = (value: unknown, defaultValue: string) => {
+    const normalized = String(value || "").replace(/\s+/g, " ").trim();
+    return normalized || defaultValue;
+  };
+  const typography = (source.typography || {}) as Record<string, unknown>;
+  const layout = (source.layout || {}) as Record<string, unknown>;
+  return {
+    designLanguage: toText(source.designLanguage, fallback.designLanguage),
+    typography: {
+      fontFamily: toText(typography.fontFamily, fallback.typography.fontFamily),
+      title: toText(typography.title, fallback.typography.title),
+      subtitle: toText(typography.subtitle, fallback.typography.subtitle),
+      body: toText(typography.body, fallback.typography.body),
+    },
+    layout: {
+      grid: toText(layout.grid, fallback.layout.grid),
+      safeArea: toText(layout.safeArea, fallback.layout.safeArea),
+      rhythm: toText(layout.rhythm, fallback.layout.rhythm),
+    },
+    palette: toText(source.palette, fallback.palette),
+  };
+}
+
+function evaluatePlanQuality(params: {
+  screens: DetailPlanScreen[];
+  hasModelImage: boolean;
+}): { passed: boolean; issues: string[] } {
+  const { screens, hasModelImage } = params;
+  const issues: string[] = [];
+  if (screens.length === 0) {
+    issues.push("未生成任何分镜。");
+  }
+
+  const firstFive = screens.slice(0, 5);
+  if (firstFive.length >= 1 && firstFive[0]?.screenType !== "B") {
+    issues.push("第1屏应为B类场景共鸣页。");
+  }
+  if (firstFive.length >= 2 && firstFive[1]?.screenType !== "A") {
+    issues.push("第2屏建议为A类技术公信页。");
+  }
+  if (firstFive.length >= 4 && firstFive[3]?.screenType !== "C") {
+    issues.push("第4屏建议为C类细节佐证页。");
+  }
+
+  const typeCounter = firstFive.reduce(
+    (acc, screen) => {
+      acc[screen.screenType] += 1;
+      return acc;
+    },
+    { A: 0, B: 0, C: 0 } as Record<DetailScreenType, number>,
+  );
+
+  if (typeCounter.B < 2) {
+    issues.push("前5屏应至少包含2屏B类场景页。");
+  }
+  if (typeCounter.A < 1) {
+    issues.push("前5屏应至少包含1屏A类公信页。");
+  }
+  if (typeCounter.C < 1) {
+    issues.push("前5屏应至少包含1屏C类细节页。");
+  }
+
+  const hasMissingFABE = screens.some(
+    (screen) =>
+      !screen.fabe.b.trim() ||
+      !screen.fabe.f.trim() ||
+      !screen.fabe.a.trim() ||
+      !screen.fabe.e.trim(),
+  );
+  if (hasMissingFABE) {
+    issues.push("存在分镜FABE不完整。");
+  }
+
+  if (hasModelImage) {
+    const modelScreenCount = screens.filter((screen) => screen.useModel).length;
+    if (modelScreenCount === 0) {
+      issues.push("已提供模特图但没有人物场景分镜。");
+    }
+  }
+
+  return {
+    passed: issues.length === 0,
+    issues,
+  };
+}
+
+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()) as DetailPlanRequest;
+    const prompt = String(body.prompt || "").trim();
+    if (!prompt) {
+      return NextResponse.json({ success: false, error: "请输入详情需求" }, { status: 400 });
+    }
+
+    const count = clampCount(body.count);
+    const referenceImages = sanitizeReferenceImages(body.referenceImages);
+    const referenceImageNotes = sanitizeReferenceImageNotes(body.referenceImageNotes);
+    const modelImageUrl = String(body.modelImageUrl || "").trim();
+    const hasModelImage = /^https?:\/\//i.test(modelImageUrl);
+    const language = normalizeOutputLanguage(body.outputLanguage);
+    const brief = normalizeDetailBrief(body.brief);
+    if (!brief.targetAudience || !brief.usageScenario || !brief.coreNeed) {
+      return NextResponse.json(
+        {
+          success: false,
+          error: "请补充必填项：主购买人群、需求场景、核心需求",
+        },
+        { status: 400 },
+      );
+    }
+    const fallback = buildFallbackPlan({
+      prompt,
+      count,
+      language,
+      brief,
+      referenceImageNotes,
+      hasModelImage,
+    });
+
+    const allModels = await getEnabledAiModelsWithProvider(false);
+    const agentModel = await getAgentAiModelWithProvider();
+    const reasoningCompatible = allModels.filter(
+      (item) =>
+        !item.model.isSubModel &&
+        item.model.isEnabled &&
+        ["zhipu", "alibaba", "openai", "custom", "local"].includes(item.provider.type),
+    );
+    const preferredAgentConfig =
+      agentModel &&
+      reasoningCompatible.some((item) => item.model.id === agentModel.model.id)
+        ? reasoningCompatible.find((item) => item.model.id === agentModel.model.id)
+        : undefined;
+    let plannerConfig = preferredAgentConfig;
+
+    if (referenceImages.length > 0) {
+      if (!plannerConfig?.model.supportsVision) {
+        plannerConfig = reasoningCompatible.find((item) => item.model.supportsVision);
+      }
+    }
+    if (!plannerConfig) {
+      plannerConfig = reasoningCompatible[0];
+    }
+
+    if (!plannerConfig) {
+      return NextResponse.json({ success: true, data: fallback });
+    }
+
+    const model = await getLanguageModelById(plannerConfig.model.id);
+    if (!model) {
+      return NextResponse.json({ success: true, data: fallback });
+    }
+
+    const userInput = [
+      `用户需求：${prompt}`,
+      "以下是详情生成输入信息：",
+      buildBriefText(brief, language),
+      `目标分镜数量：${count}`,
+      `输出语言：${language === "en" ? "English" : "中文"}`,
+      "任务类型：电商详情页“AI详情生成”",
+      "必须遵循“详情升级文案方案”：定位卡 -> 卖点到买点转译 -> 黄金五屏 -> FABE闭环。",
+      referenceImageNotes.length > 0
+        ? `参考图说明（按上传顺序）：${referenceImageNotes.join(" | ")}`
+        : "",
+      hasModelImage ? "已提供固定模特图，人物场景必须复用该模特。" : "未提供模特图。",
+      referenceImages.length > 0 ? `提供了 ${referenceImages.length} 张参考产品图。` : "本轮未提供参考图。",
+    ]
+      .filter(Boolean)
+      .join("\n");
+
+    const imageInputs =
+      plannerConfig.model.supportsVision && referenceImages.length > 0
+        ? referenceImages.map((url) => ({ type: "image" as const, image: url }))
+        : [];
+
+    const { text } = await generateText({
+      model,
+      messages: [
+        {
+          role: "user",
+          content: [
+            {
+              type: "text",
+              text: userInput,
+            },
+            ...imageInputs,
+          ],
+        },
+      ],
+      system:
+        `你是资深电商视觉策划与提示词工程师。请为“AI详情生成”产出可直接用于生图的分镜提示词和文案。\n` +
+        `硬性要求：\n` +
+        `1) 输出严格 JSON，不要其他文本。\n` +
+        `2) 保持同一产品一致性（结构、颜色、材质、Logo、比例）。\n` +
+        `3) 所有分镜风格统一、构图统一、文案排版风格统一。主标题/副标题/正文的字体家族、字重、字号层级、行距必须全套统一。\n` +
+        `4) 每屏尺寸固定 790x1300 像素，输出提示词必须显式包含该尺寸约束。\n` +
+        `5) 结构遵循“黄金五屏原则”：屏1-2核心卖点，屏3-4差异强化，屏5证据背书；更多屏作为延展。\n` +
+        `6) 每屏都要有 FABE 闭环（B利益/F特征/A优势/E证据），且文案符合电商转化表达。\n` +
+        `7) 文案用词需贴近用户语言，不写空泛形容词，不泄露系统流程。\n` +
+        `8) 对每屏输出 useModel 与 modelReason：useModel=true 表示该屏必须融入固定模特图人物；false 表示该屏禁止出现人物。\n` +
+        `9) 对每屏输出 screenType（A/B/C）：A=技术公信，B=场景共鸣，C=细节佐证。\n` +
+        (hasModelImage
+          ? `10) 已提供模特图：涉及人物场景时必须复用同一模特（人脸、发型、体型、肤色与服装风格一致），不得替换其他人物。\n`
+          : `10) 未提供模特图：所有分镜均设置 useModel=false。\n`) +
+        `输出格式：\n` +
+        `{"summary":"简述","globalStyle":{"designLanguage":"一句话风格方向","typography":{"fontFamily":"字体家族","title":"主标题规范","subtitle":"副标题规范","body":"正文规范"},"layout":{"grid":"栅格","safeArea":"安全区","rhythm":"留白节奏"},"palette":"配色规范"},"screens":[{"index":1,"screenType":"B","objective":"本屏目标","title":"4-8字标题","subtitle":"一句副标题","copy":"正文文案","layoutNote":"排版说明","useModel":false,"modelReason":"是否需要人物及原因","fabe":{"b":"利益","f":"特征","a":"优势","e":"证据"},"visualPrompt":"用于生图的完整提示词，必须包含790x1300与统一字体排版"}]}`,
+      temperature: 0.25,
+      maxTokens: 1800,
+    } as any);
+
+    const parsed = extractJsonBlock<{ summary?: unknown; globalStyle?: unknown; screens?: unknown }>(text || "");
+    const globalStyle = sanitizeGlobalStyle(parsed?.globalStyle, fallback.globalStyle);
+    const rawScreens = sanitizePlannedScreens(parsed?.screens, fallback.screens).map((item) =>
+      hasModelImage
+        ? item
+        : {
+            ...item,
+            useModel: false,
+            modelReason: "未提供模特图，当前分镜不使用人物。",
+          }
+    );
+    const qualityChecks = evaluatePlanQuality({
+      screens: rawScreens,
+      hasModelImage,
+    });
+    const screens = qualityChecks.passed ? rawScreens : fallback.screens;
+    const prompts = screens.map((item) => item.visualPrompt);
+    const summaryRaw = String(parsed?.summary || "").trim();
+    const summary = qualityChecks.passed
+      ? summaryRaw || fallback.summary
+      : `${summaryRaw || fallback.summary}\n质量校验未通过，已自动回退到稳定分镜模板。`;
+
+    const response: DetailPlanResponse = {
+      summary,
+      prompts,
+      screenSize: {
+        width: 790,
+        height: 1300,
+      },
+      globalStyle,
+      skillFlow: fallback.skillFlow,
+      qualityChecks: qualityChecks.passed
+        ? qualityChecks
+        : {
+            passed: false,
+            issues: [...qualityChecks.issues],
+          },
+      screens,
+      model: {
+        id: plannerConfig.model.id,
+        displayName: plannerConfig.model.displayName,
+        providerType: plannerConfig.provider.type,
+      },
+    };
+
+    return NextResponse.json({ success: true, data: response });
+  } catch (error) {
+    console.error("[Canvas Detail Plan] Error:", error);
+    return NextResponse.json(
+      { success: false, error: error instanceof Error ? error.message : "详情规划失败" },
+      { status: 500 },
+    );
+  }
+}
diff --git a/app/api/canvas/generate/image/route.ts b/app/api/canvas/generate/image/route.ts
index ca8e3cc4e..73615e5b0 100644
--- a/app/api/canvas/generate/image/route.ts
+++ b/app/api/canvas/generate/image/route.ts
@@ -15,6 +15,7 @@ interface GenerateImageRequest {
   aspectRatio?: string; // 宽高比 "1:1", "16:9" 等
   imageCount?: number; // 生成数量
   referenceImage?: string; // 参考图片（用于图生图）
+  referenceImages?: string[]; // 多参考图（用于多角度/细节一致性）
 }
 
 interface ParsedImage {
@@ -63,7 +64,15 @@ export async function POST(request: Request) {
     }
 
     const body: GenerateImageRequest = await request.json();
-    const { prompt, negativePrompt, model, aspectRatio = "1:1", imageCount = 1, referenceImage } = body;
+    const {
+      prompt,
+      negativePrompt,
+      model,
+      aspectRatio = "1:1",
+      imageCount = 1,
+      referenceImage,
+      referenceImages,
+    } = body;
 
     if (!prompt) {
       return NextResponse.json(
@@ -85,7 +94,7 @@ export async function POST(request: Request) {
 
     // 选择模型（如果指定了 model，使用指定的；否则使用默认的）
     let selectedModel = model 
-      ? imageModels.find(m => m.model.modelId === model)
+      ? imageModels.find(m => m.model.modelId === model || m.model.id === model)
       : imageModels.find(m => m.model.isDefault) || imageModels[0];
 
     if (!selectedModel) {
@@ -100,13 +109,27 @@ export async function POST(request: Request) {
       );
     }
 
+    const normalizedReferenceImages = Array.from(
+      new Set(
+        [
+          ...(Array.isArray(referenceImages) ? referenceImages : []),
+          ...(referenceImage ? [referenceImage] : []),
+        ]
+          .map((item) => String(item || "").trim())
+          .filter((url) => /^https?:\/\//i.test(url))
+      )
+    ).slice(0, 6);
+
     // 构建消息
     const messages = [{
       role: "user" as const,
-      content: referenceImage
+      content: normalizedReferenceImages.length > 0
         ? [
             { type: "text" as const, text: prompt },
-            { type: "image_url" as const, image_url: { url: referenceImage } },
+            ...normalizedReferenceImages.map((url) => ({
+              type: "image_url" as const,
+              image_url: { url },
+            })),
           ]
         : prompt,
     }];
diff --git a/app/api/site-settings/route.ts b/app/api/site-settings/route.ts
index c50ff8ef8..8b862f108 100644
--- a/app/api/site-settings/route.ts
+++ b/app/api/site-settings/route.ts
@@ -28,6 +28,7 @@ import {
 const HOME_VARIANT_KEY = "home_variant";
 // Historically stored as "home_surprise_categories" but used for the featured gallery categories.
 const HOME_SURPRISE_CATEGORIES_KEY = "home_surprise_categories";
+const AI_DETAIL_GENERATOR_ENABLED_KEY = "ai_detail_generator_enabled";
 const LOVART_COMPOSER_PREVIEW_TEXTS_KEY = "lovart_composer_preview_texts";
 const LOVART_COMPOSER_PREFIX_KEY = "lovart_composer_prefix";
 const MEMBERSHIP_CONFIG_KEY = "membership_config";
@@ -98,6 +99,7 @@ export async function GET() {
       notificationSetting,
       homeVariantSetting,
       surpriseCategoriesSetting,
+      aiDetailGeneratorEnabledSetting,
       lovartComposerPreviewTextsSetting,
       lovartComposerPrefixSetting,
       membershipConfigSetting,
@@ -125,6 +127,12 @@ export async function GET() {
         .where(eq(systemSettings.key, HOME_SURPRISE_CATEGORIES_KEY))
         .limit(1)
         .then(rows => rows[0]),
+      db
+        .select()
+        .from(systemSettings)
+        .where(eq(systemSettings.key, AI_DETAIL_GENERATOR_ENABLED_KEY))
+        .limit(1)
+        .then(rows => rows[0]),
       db
         .select()
         .from(systemSettings)
@@ -172,6 +180,7 @@ export async function GET() {
     const notification = notificationSetting?.value || { enabled: false, title: "", content: "" };
     const homeVariant = normalizeHomeVariant(homeVariantSetting?.value);
     const surpriseCategories = normalizeSurpriseCategories(surpriseCategoriesSetting?.value);
+    const aiDetailGenerationEnabled = Boolean(aiDetailGeneratorEnabledSetting?.value);
     const lovartComposerPreviewTexts = normalizeLovartComposerPreviewTexts(
       lovartComposerPreviewTextsSetting?.value
     );
@@ -221,6 +230,7 @@ export async function GET() {
         lovartHeroSubtitle: "懂你的设计代理，帮你搞定一切",
         homeVariant,
         surpriseCategories,
+        aiDetailGenerationEnabled,
         lovartComposerPrefix,
         lovartComposerPreviewTexts,
         membershipConfig,
@@ -241,6 +251,7 @@ export async function GET() {
         notification,
         homeVariant,
         surpriseCategories,
+        aiDetailGenerationEnabled,
         lovartComposerPrefix,
         lovartComposerPreviewTexts,
         membershipConfig,
@@ -287,6 +298,7 @@ const updateSchema = z.object({
   tutorialEnabled: z.boolean().optional(),
   rankingEnabled: z.boolean().optional(),
   canvasEnabled: z.boolean().optional(),
+  aiDetailGenerationEnabled: z.boolean().optional(),
   canvasDefaultModelId: z.string().nullable().optional(),
   canvasAutoModeDefaultModelId: z.string().nullable().optional(),
   lovartPromoText: z.string().max(300).optional(),
@@ -322,6 +334,7 @@ export async function PUT(request: NextRequest) {
     const {
       homeVariant,
       surpriseCategories,
+      aiDetailGenerationEnabled,
       lovartComposerPrefix,
       lovartComposerPreviewTexts,
       membershipConfig,
@@ -386,6 +399,25 @@ export async function PUT(request: NextRequest) {
           });
       }
 
+      if (aiDetailGenerationEnabled !== undefined) {
+        await db
+          .insert(systemSettings)
+          .values({
+            key: AI_DETAIL_GENERATOR_ENABLED_KEY,
+            value: Boolean(aiDetailGenerationEnabled),
+            updatedAt: new Date(),
+            updatedBy: session.user.id,
+          })
+          .onConflictDoUpdate({
+            target: systemSettings.key,
+            set: {
+              value: Boolean(aiDetailGenerationEnabled),
+              updatedAt: new Date(),
+              updatedBy: session.user.id,
+            },
+          });
+      }
+
       if (lovartComposerPreviewTexts !== undefined) {
         const normalized = normalizeLovartComposerPreviewTexts(lovartComposerPreviewTexts);
         await db
@@ -533,6 +565,7 @@ export async function PUT(request: NextRequest) {
           surpriseCategories !== undefined
             ? normalizeSurpriseCategories(surpriseCategories)
             : normalizeSurpriseCategories(undefined),
+        aiDetailGenerationEnabled: aiDetailGenerationEnabled ?? false,
         lovartComposerPrefix:
           lovartComposerPrefix !== undefined
             ? normalizeLovartComposerPrefix(lovartComposerPrefix)
@@ -639,6 +672,25 @@ export async function PUT(request: NextRequest) {
           });
       }
 
+      if (aiDetailGenerationEnabled !== undefined) {
+        await db
+          .insert(systemSettings)
+          .values({
+            key: AI_DETAIL_GENERATOR_ENABLED_KEY,
+            value: Boolean(aiDetailGenerationEnabled),
+            updatedAt: new Date(),
+            updatedBy: session.user.id,
+          })
+          .onConflictDoUpdate({
+            target: systemSettings.key,
+            set: {
+              value: Boolean(aiDetailGenerationEnabled),
+              updatedAt: new Date(),
+              updatedBy: session.user.id,
+            },
+          });
+      }
+
       if (lovartComposerPreviewTexts !== undefined) {
         const normalized = normalizeLovartComposerPreviewTexts(lovartComposerPreviewTexts);
         await db
@@ -786,6 +838,7 @@ export async function PUT(request: NextRequest) {
           surpriseCategories !== undefined
             ? normalizeSurpriseCategories(surpriseCategories)
             : normalizeSurpriseCategories(undefined),
+        aiDetailGenerationEnabled: aiDetailGenerationEnabled ?? false,
         lovartComposerPrefix:
           lovartComposerPrefix !== undefined
             ? normalizeLovartComposerPrefix(lovartComposerPrefix)
diff --git a/components/canvas/CanvasChatPanel.tsx b/components/canvas/CanvasChatPanel.tsx
index 8a5630c98..46e79cc77 100644
--- a/components/canvas/CanvasChatPanel.tsx
+++ b/components/canvas/CanvasChatPanel.tsx
@@ -5,7 +5,7 @@ import { DefaultChatTransport } from "ai";
 import { useEffect, useRef, useState, useCallback, useMemo } from "react";
 import { createPortal } from "react-dom";
 import useSWR from "swr";
-import { Send, Loader2, ImagePlus, Paperclip, X, User, Bot, Plus, History, LayoutGrid, Maximize2, RefreshCw, Globe, Box, ArrowUp, Video, Sparkles, Check } from "lucide-react";
+import { Send, Loader2, ImagePlus, Paperclip, X, User, Bot, Plus, History, LayoutGrid, Maximize2, RefreshCw, Globe, Box, ArrowUp, Video, Sparkles, Check, ChevronDown, AlertCircle, CheckCircle2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
 import { ScrollArea } from "@/components/ui/scroll-area";
@@ -275,6 +275,99 @@ interface CanvasChatSession {
   updatedAt: number;
 }
 
+type DetailBriefForm = {
+  productName: string;
+  targetAudience: string;
+  mainUser: string;
+  usageScenario: string;
+  triggerMoment: string;
+  coreNeed: string;
+  riskConcern: string;
+  expectedResult: string;
+  coreSellingPoint: string;
+  positioningStatement: string;
+  userVoice: string;
+  competitorReference: string;
+  priceBand: string;
+  brandTone: string;
+  bannedWords: string;
+};
+
+type DetailSlotConfig = {
+  key: string;
+  label: string;
+  role: "product" | "model";
+};
+
+type DetailSectionKey = "required" | "strategy" | "assets";
+
+type DetailPlanResponse = {
+  summary?: string;
+  prompts?: string[];
+  screenSize?: {
+    width: number;
+    height: number;
+  };
+  globalStyle?: {
+    designLanguage?: string;
+    typography?: {
+      fontFamily?: string;
+      title?: string;
+      subtitle?: string;
+      body?: string;
+    };
+    layout?: {
+      grid?: string;
+      safeArea?: string;
+      rhythm?: string;
+    };
+    palette?: string;
+  };
+  screens?: Array<{
+    index: number;
+    screenType?: "A" | "B" | "C";
+    objective?: string;
+    title?: string;
+    subtitle?: string;
+    copy?: string;
+    layoutNote?: string;
+    useModel?: boolean;
+    modelReason?: string;
+    visualPrompt?: string;
+    fabe?: {
+      b?: string;
+      f?: string;
+      a?: string;
+      e?: string;
+    };
+  }>;
+  skillFlow?: {
+    name?: string;
+    version?: string;
+    steps?: string[];
+  };
+  qualityChecks?: {
+    passed?: boolean;
+    issues?: string[];
+  };
+  model?: {
+    id: string;
+    displayName: string;
+    providerType: string;
+  };
+};
+
+const DETAIL_TARGET_WIDTH = 790;
+const DETAIL_TARGET_HEIGHT = 1300;
+const DETAIL_SLOT_CONFIGS: DetailSlotConfig[] = [
+  { key: "product-1", label: "产品图1", role: "product" },
+  { key: "product-2", label: "产品图2", role: "product" },
+  { key: "product-3", label: "产品图3", role: "product" },
+  { key: "product-4", label: "产品图4", role: "product" },
+  { key: "product-5", label: "产品图5", role: "product" },
+  { key: "model-1", label: "模特图", role: "model" },
+];
+
 const SESSION_TITLE_MAX_LEN = 18;
 
 function toRawCanvasChatId(value: string): string {
@@ -296,10 +389,182 @@ function deriveSessionTitleFromMessages(messages: ChatMessage[]): string {
     : prompt;
 }
 
+function extractDetailFrameCount(text: string): number {
+  const normalized = text.replace(/\s+/g, "");
+  const matched = normalized.match(/(\d{1,2})张/);
+  if (!matched) return 5;
+  const value = Number(matched[1]);
+  if (!Number.isFinite(value)) return 5;
+  return Math.min(12, Math.max(5, Math.round(value)));
+}
+
+function buildDetailResultMarkdown(params: {
+  summary?: string;
+  images: Array<{ originalUrl: string; thumbnailUrl: string }>;
+  prompts: string[];
+  skillFlow?: {
+    name?: string;
+    version?: string;
+    steps?: string[];
+  };
+  qualityChecks?: {
+    passed?: boolean;
+    issues?: string[];
+  };
+  globalStyle?: {
+    designLanguage?: string;
+    typography?: {
+      fontFamily?: string;
+      title?: string;
+      subtitle?: string;
+      body?: string;
+    };
+    layout?: {
+      grid?: string;
+      safeArea?: string;
+      rhythm?: string;
+    };
+    palette?: string;
+  };
+  screens?: Array<{
+    screenType?: "A" | "B" | "C";
+    visualPrompt?: string;
+    title?: string;
+    subtitle?: string;
+    copy?: string;
+    layoutNote?: string;
+    useModel?: boolean;
+    modelReason?: string;
+    fabe?: {
+      b?: string;
+      f?: string;
+      a?: string;
+      e?: string;
+    };
+  }>;
+}): string {
+  const lines: string[] = [];
+  lines.push("### AI详情生成完成");
+  if (params.summary) {
+    lines.push(params.summary);
+  }
+  if (params.skillFlow?.steps?.length) {
+    lines.push(
+      `技能流程：${params.skillFlow.name || "AI详情生成"} ${params.skillFlow.version ? `(v${params.skillFlow.version})` : ""}`
+    );
+    params.skillFlow.steps.forEach((step, index) => {
+      lines.push(`${index + 1}. ${step}`);
+    });
+  }
+  if (params.qualityChecks) {
+    if (params.qualityChecks.passed) {
+      lines.push("质检结果：通过");
+    } else if (params.qualityChecks.issues?.length) {
+      lines.push("质检结果：未通过，已使用回退方案");
+      params.qualityChecks.issues.forEach((issue) => lines.push(`- ${issue}`));
+    }
+  }
+  lines.push(`共生成 ${params.images.length} 张详情图。`);
+  if (params.globalStyle) {
+    const typography = params.globalStyle.typography;
+    lines.push(
+      `全局风格：${params.globalStyle.designLanguage || "统一电商详情风格"}`
+    );
+    lines.push(
+      `字体规范：${typography?.fontFamily || "统一字体"} / ${typography?.title || "标题规范一致"} / ${typography?.subtitle || "副标题规范一致"}`
+    );
+  }
+  lines.push("");
+  params.images.forEach((image, index) => {
+    const screen = params.screens?.[index];
+    const prompt = params.prompts[index] || screen?.visualPrompt || "";
+    lines.push(`#### 分镜 ${index + 1}`);
+    if (screen?.screenType) {
+      lines.push(`分镜类型：${screen.screenType}`);
+    }
+    if (screen?.title) {
+      lines.push(`标题：${screen.title}`);
+    }
+    if (screen?.subtitle) {
+      lines.push(`副标题：${screen.subtitle}`);
+    }
+    if (screen?.copy) {
+      lines.push(`文案：${screen.copy}`);
+    }
+    if (screen?.layoutNote) {
+      lines.push(`排版：${screen.layoutNote}`);
+    }
+    if (screen?.useModel !== undefined) {
+      lines.push(screen.useModel ? "人物：使用固定模特图" : "人物：不使用模特图");
+    }
+    if (screen?.modelReason) {
+      lines.push(`人物策略：${screen.modelReason}`);
+    }
+    if (screen?.fabe) {
+      const fabeParts = [
+        screen.fabe.b ? `B ${screen.fabe.b}` : "",
+        screen.fabe.f ? `F ${screen.fabe.f}` : "",
+        screen.fabe.a ? `A ${screen.fabe.a}` : "",
+        screen.fabe.e ? `E ${screen.fabe.e}` : "",
+      ].filter(Boolean);
+      if (fabeParts.length > 0) {
+        lines.push(`FABE：${fabeParts.join(" | ")}`);
+      }
+    }
+    if (prompt) {
+      lines.push(prompt);
+    }
+    lines.push(
+      `![thumb|||${image.originalUrl}|||2K](${image.thumbnailUrl || image.originalUrl})`
+    );
+    lines.push("");
+  });
+  return lines.join("\n").trim();
+}
+
 export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenFileList }: CanvasChatPanelProps) {
   const [input, setInput] = useState("");
   const [attachments, setAttachments] = useState<PickedObjectAttachment[]>([]);
   const [selectedModelId, setSelectedModelId] = useState<string>("");
+  const [isDetailGenerationMode, setIsDetailGenerationMode] = useState(false);
+  const [isDetailGenerating, setIsDetailGenerating] = useState(false);
+  const [detailSections, setDetailSections] = useState<Record<DetailSectionKey, boolean>>({
+    required: true,
+    strategy: false,
+    assets: true,
+  });
+  const [detailProgress, setDetailProgress] = useState<{
+    status: "idle" | "running" | "done" | "error";
+    stage: string;
+    current: number;
+    total: number;
+  }>({
+    status: "idle",
+    stage: "",
+    current: 0,
+    total: 0,
+  });
+  const [detailSlots, setDetailSlots] = useState<Array<PickedObjectAttachment | null>>(
+    () => DETAIL_SLOT_CONFIGS.map(() => null)
+  );
+  const [detailSlotUploading, setDetailSlotUploading] = useState<number | null>(null);
+  const [detailBrief, setDetailBrief] = useState<DetailBriefForm>({
+    productName: "",
+    targetAudience: "",
+    mainUser: "",
+    usageScenario: "",
+    triggerMoment: "",
+    coreNeed: "",
+    riskConcern: "",
+    expectedResult: "",
+    coreSellingPoint: "",
+    positioningStatement: "",
+    userVoice: "",
+    competitorReference: "",
+    priceBand: "",
+    brandTone: "",
+    bannedWords: "",
+  });
   const canvasId = useMemo(() => toRawCanvasChatId(chatId), [chatId]);
   const [activeChatId, setActiveChatId] = useState<string>(chatId);
   const [chatSessions, setChatSessions] = useState<CanvasChatSession[]>([]);
@@ -307,6 +572,7 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const videoSlotInputRefs = useRef<Array<HTMLInputElement | null>>([]);
+  const detailSlotInputRefs = useRef<Array<HTMLInputElement | null>>([]);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const hiddenPromptRef = useRef<string | null>(null);
   const autoContextRef = useRef<string | null>(null);
@@ -851,8 +1117,11 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
     bannerText?: string;
     bannerLink?: string | null;
     canvasEnabled?: boolean;
+    aiDetailGenerationEnabled?: boolean;
     canvasDefaultModelId?: string | null;
+    canvasAutoModeDefaultModelId?: string | null;
   }>("/api/site-settings", fetcher);
+  const aiDetailGenerationEnabled = siteSettings?.aiDetailGenerationEnabled === true;
   
   const VIDEO_PROVIDER_TYPES = new Set(["volcano-video", "qianwen-video", "fal-video"]);
   const visualModels =
@@ -892,14 +1161,17 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
     () => allModels.find((model) => VIDEO_PROVIDER_TYPES.has(model.providerType))?.id || null,
     [allModels]
   );
-  const activeComposerMode = useMemo<"agent" | "image" | "video">(() => {
+  const activeComposerMode = useMemo<"agent" | "image" | "video" | "detail">(() => {
+    if (isDetailGenerationMode) return "detail";
     if (selectedModelId === "auto") return "agent";
     if (isVideoModel) return "video";
     return "image";
-  }, [isVideoModel, selectedModelId]);
+  }, [isDetailGenerationMode, isVideoModel, selectedModelId]);
   const activeModeLabel =
     activeComposerMode === "video"
       ? "视频"
+      : activeComposerMode === "detail"
+        ? "AI详情"
       : activeComposerMode === "image"
         ? "生图"
         : "Agent";
@@ -912,6 +1184,25 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
       setSelectedModelId(defaultModel);
     }
   }, [selectedModelId, siteSettings]);
+
+  useEffect(() => {
+    if (!aiDetailGenerationEnabled && isDetailGenerationMode) {
+      setIsDetailGenerationMode(false);
+    }
+  }, [aiDetailGenerationEnabled, isDetailGenerationMode]);
+
+  useEffect(() => {
+    if (isDetailGenerationMode) {
+      setAttachments([]);
+      setDetailSections({ required: true, strategy: false, assets: true });
+      const editableDiv = textareaRef.current as HTMLDivElement | null;
+      if (editableDiv) {
+        editableDiv.querySelectorAll("[data-attachment-url]").forEach((element) => element.remove());
+      }
+    } else {
+      setDetailProgress({ status: "idle", stage: "", current: 0, total: 0 });
+    }
+  }, [isDetailGenerationMode]);
   
   const currentModelIdRef = useRef(selectedModelId);
   const imageParamsRef = useRef(imageParams);
@@ -953,6 +1244,9 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
 
   useEffect(() => {
     if (!currentModel) return;
+    if (currentModel.id !== "auto" && isDetailGenerationMode) {
+      setIsDetailGenerationMode(false);
+    }
     if (isVideoModel) {
       setLastVideoModelId(currentModel.id);
       return;
@@ -960,12 +1254,23 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
     if (currentModel.id !== "auto") {
       setLastImageModelId(currentModel.id);
     }
-  }, [currentModel, isVideoModel]);
+  }, [currentModel, isDetailGenerationMode, isVideoModel]);
 
   const handleSelectGenerationMode = useCallback(
-    (mode: "agent" | "image" | "video") => {
+    (mode: "agent" | "image" | "video" | "detail") => {
       if (mode === "agent") {
         setSelectedModelId("auto");
+        setIsDetailGenerationMode(false);
+        return;
+      }
+
+      if (mode === "detail") {
+        if (!aiDetailGenerationEnabled) {
+          toast.error("AI详情生成功能未开启");
+          return;
+        }
+        setSelectedModelId("auto");
+        setIsDetailGenerationMode(true);
         return;
       }
 
@@ -983,6 +1288,7 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
           return;
         }
         setSelectedModelId(preferredImageModelId);
+        setIsDetailGenerationMode(false);
         return;
       }
 
@@ -996,10 +1302,61 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
         return;
       }
       setSelectedModelId(preferredVideoModelId);
+      setIsDetailGenerationMode(false);
     },
-    [allModels, firstImageModelId, firstVideoModelId, lastImageModelId, lastVideoModelId]
+    [
+      aiDetailGenerationEnabled,
+      allModels,
+      firstImageModelId,
+      firstVideoModelId,
+      lastImageModelId,
+      lastVideoModelId,
+    ]
   );
 
+  const updateDetailBriefField = useCallback(
+    (key: keyof DetailBriefForm, value: string) => {
+      setDetailBrief((prev) => ({ ...prev, [key]: value }));
+    },
+    []
+  );
+
+  const normalizedDetailBrief = useMemo(() => {
+    const normalizeValue = (value: string) => value.replace(/\s+/g, " ").trim();
+    return {
+      productName: normalizeValue(detailBrief.productName),
+      targetAudience: normalizeValue(detailBrief.targetAudience),
+      mainUser: normalizeValue(detailBrief.mainUser),
+      usageScenario: normalizeValue(detailBrief.usageScenario),
+      triggerMoment: normalizeValue(detailBrief.triggerMoment),
+      coreNeed: normalizeValue(detailBrief.coreNeed),
+      riskConcern: normalizeValue(detailBrief.riskConcern),
+      expectedResult: normalizeValue(detailBrief.expectedResult),
+      coreSellingPoint: normalizeValue(detailBrief.coreSellingPoint),
+      positioningStatement: normalizeValue(detailBrief.positioningStatement),
+      userVoice: normalizeValue(detailBrief.userVoice),
+      competitorReference: normalizeValue(detailBrief.competitorReference),
+      priceBand: normalizeValue(detailBrief.priceBand),
+      brandTone: normalizeValue(detailBrief.brandTone),
+      bannedWords: normalizeValue(detailBrief.bannedWords),
+    };
+  }, [detailBrief]);
+
+  const detailValidationIssues = useMemo(() => {
+    const issues: string[] = [];
+    if (!normalizedDetailBrief.targetAudience) issues.push("缺少主购买人群");
+    if (!normalizedDetailBrief.usageScenario) issues.push("缺少需求场景");
+    if (!normalizedDetailBrief.coreNeed) issues.push("缺少核心需求");
+    const productCount = detailSlots.slice(0, 5).filter((item) => Boolean(item?.url)).length;
+    if (productCount < 5) issues.push(`产品图不足（${productCount}/5）`);
+    if (!detailSlots[5]?.url) issues.push("缺少模特图（1/1）");
+    return issues;
+  }, [detailSlots, normalizedDetailBrief]);
+
+  const toggleDetailSection = useCallback((key: DetailSectionKey) => {
+    setDetailSections((prev) => ({ ...prev, [key]: !prev[key] }));
+  }, []);
+
   useEffect(() => {
     if (videoFrameSlots.length === 0) return;
     const editableDiv = textareaRef.current as HTMLDivElement | null;
@@ -1582,8 +1939,463 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
     [addNode, nodes.length, updateAttachmentAtVideoSlot]
   );
 
+  const updateDetailSlotAttachment = useCallback(
+    (slotIndex: number, attachment: PickedObjectAttachment | null) => {
+      setDetailSlots((current) => {
+        const next = [...current];
+        next[slotIndex] = attachment;
+        return next;
+      });
+    },
+    []
+  );
+
+  const handleDetailSlotFileChange = useCallback(
+    async (slotIndex: number, event: React.ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files?.[0];
+      if (!file) return;
+
+      if (!file.type.startsWith("image/")) {
+        toast.error("请上传图片文件");
+        event.currentTarget.value = "";
+        return;
+      }
+
+      if (file.size > 50 * 1024 * 1024) {
+        toast.error("图片大小不能超过 50MB");
+        event.currentTarget.value = "";
+        return;
+      }
+
+      setDetailSlotUploading(slotIndex);
+      try {
+        const formData = new FormData();
+        formData.append("file", file);
+
+        const response = await fetch("/api/files/upload", {
+          method: "POST",
+          body: formData,
+        });
+
+        if (!response.ok) {
+          throw new Error("上传失败");
+        }
+
+        const data = await response.json();
+        const imageUrl = String(data.url || "").trim();
+        if (!imageUrl) {
+          throw new Error("未获取到图片地址");
+        }
+
+        updateDetailSlotAttachment(slotIndex, {
+          url: imageUrl,
+          name: file.name,
+          contentType: file.type || "image/jpeg",
+        });
+        toast.success(`${DETAIL_SLOT_CONFIGS[slotIndex]?.label || "图片"}上传成功`);
+      } catch (_error) {
+        toast.error("图片上传失败");
+      } finally {
+        setDetailSlotUploading(null);
+        event.currentTarget.value = "";
+      }
+    },
+    [updateDetailSlotAttachment]
+  );
+
+  const handleDetailGeneration = useCallback(async () => {
+    if (isDetailGenerating) return;
+
+    const brief = normalizedDetailBrief;
+    if (!brief.targetAudience || !brief.usageScenario || !brief.coreNeed) {
+      toast.error("请先补充 AI详情生成必填项：主购买人群、需求场景、核心需求");
+      return;
+    }
+    const productAttachments = detailSlots
+      .slice(0, 5)
+      .filter((item): item is PickedObjectAttachment => Boolean(item?.url));
+    if (productAttachments.length < 5) {
+      toast.error("请先上传 5 张产品图后再执行 AI详情生成");
+      return;
+    }
+    const modelAttachment = detailSlots[5];
+    if (!modelAttachment?.url) {
+      toast.error("请上传 1 张人物模特图后再执行 AI详情生成");
+      return;
+    }
+
+    const userText = input
+      .replace(/\u200b/g, " ")
+      .replace(/\s+/g, " ")
+      .trim();
+    const basePrompt = brief.productName
+      ? `${brief.productName}详情页生成`
+      : "电商详情页生成";
+    const detailPrompt =
+      userText ||
+      `${basePrompt}，面向${brief.targetAudience}，在${brief.usageScenario}场景解决${brief.coreNeed}`;
+    const detailCount = extractDetailFrameCount(detailPrompt);
+    const assistantMessageId = generateUUID();
+    const skillLogicPreview = [
+      "### AI详情生成",
+      "我们将基于《详情升级文案方案》执行以下技能流程：",
+      "1. 定位卡：锁定人群/场景/触发时刻/风险与期望结果",
+      "2. 需求拆解：卖点转买点，确定核心需求优先级",
+      "3. 黄金五屏：核心卖点 -> 差异强化 -> 证据收口",
+      "4. FABE文案：每屏输出利益/特征/优势/证据",
+      "5. A/B/C视觉节奏：场景共鸣 + 理性证明 + 转化收尾",
+      "6. 一致性约束：固定790x1300 + 统一字体层级 + 统一排版风格",
+      "",
+      "正在规划分镜提示词...",
+    ].join("\n");
+    const referenceImageNotes = DETAIL_SLOT_CONFIGS.map((config, index) => {
+      const current = detailSlots[index];
+      return `${index + 1}. ${config.label}${current?.name ? `（${current.name}）` : ""}`;
+    });
+    const modelImageHint = `模特图固定策略：涉及人物场景时必须使用第6张模特图同一人物，不得替换人物。`;
+    const detailBriefText = [
+      "【AI详情生成输入】",
+      brief.productName ? `产品：${brief.productName}` : "",
+      `主购买人群：${brief.targetAudience}`,
+      brief.mainUser ? `主使用者：${brief.mainUser}` : "",
+      `需求场景：${brief.usageScenario}`,
+      brief.triggerMoment ? `触发时刻：${brief.triggerMoment}` : "",
+      `核心需求：${brief.coreNeed}`,
+      brief.riskConcern ? `用户顾虑：${brief.riskConcern}` : "",
+      brief.expectedResult ? `期望结果：${brief.expectedResult}` : "",
+      brief.coreSellingPoint ? `核心卖点关键词：${brief.coreSellingPoint}` : "",
+      brief.positioningStatement ? `一句话定位：${brief.positioningStatement}` : "",
+      brief.userVoice ? `用户原话样本：${brief.userVoice}` : "",
+      brief.competitorReference ? `竞品对标：${brief.competitorReference}` : "",
+      brief.priceBand ? `价格带：${brief.priceBand}` : "",
+      brief.brandTone ? `品牌语气：${brief.brandTone}` : "",
+      brief.bannedWords ? `禁用表达：${brief.bannedWords}` : "",
+      `参考图说明：${referenceImageNotes.join("；")}`,
+      modelImageHint,
+      `输出规格：每屏 ${DETAIL_TARGET_WIDTH}x${DETAIL_TARGET_HEIGHT} 像素`,
+    ]
+      .filter(Boolean)
+      .join("\n");
+
+    setIsDetailGenerating(true);
+    setDetailProgress({
+      status: "running",
+      stage: "Agent 正在解析需求并规划详情结构...",
+      current: 0,
+      total: Math.max(1, detailCount + 1),
+    });
+    try {
+      const detailReferenceAttachments = DETAIL_SLOT_CONFIGS.map((config, index) => {
+        const current = detailSlots[index];
+        if (!current?.url) return null;
+        return {
+          ...current,
+          name: `${config.label}${current.name ? `-${current.name}` : ""}`,
+        };
+      }).filter((item): item is PickedObjectAttachment => Boolean(item));
+      const userParts: any[] = detailReferenceAttachments.map((item) => ({
+        type: "file",
+        mediaType: item.contentType,
+        name: item.name,
+        url: item.url,
+      }));
+      userParts.push({
+        type: "text",
+        text: `${detailPrompt}\n\n${detailBriefText}`,
+      });
+
+      const userMessage: any = {
+        id: generateUUID(),
+        role: "user",
+        parts: userParts,
+      };
+      const assistantPendingMessage: any = {
+        id: assistantMessageId,
+        role: "assistant",
+        parts: [
+          {
+            type: "text",
+            text: skillLogicPreview,
+          },
+        ],
+      };
+
+      setMessages((prev) => [...prev, userMessage, assistantPendingMessage]);
+
+      setInput("");
+      setAttachments([]);
+      clearSelection();
+      const editableDiv = textareaRef.current as HTMLDivElement | null;
+      if (editableDiv) {
+        editableDiv.innerHTML = "";
+      }
+
+      const planResponse = await fetch("/api/canvas/detail-plan", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          prompt: detailPrompt,
+          count: detailCount,
+          referenceImages: detailReferenceAttachments.map((item) => item.url).slice(0, 6),
+          referenceImageNotes,
+          modelImageUrl: modelAttachment.url,
+          outputLanguage: /[a-zA-Z]/.test(detailPrompt) ? "en" : "zh",
+          brief,
+        }),
+      });
+
+      const planResult = await planResponse.json();
+      if (!planResponse.ok || !planResult?.success) {
+        throw new Error(planResult?.error || "详情分镜规划失败");
+      }
+
+      const planData = (planResult.data || {}) as DetailPlanResponse;
+      const prompts = Array.isArray(planData.prompts)
+        ? planData.prompts.map((item) => String(item || "").trim()).filter(Boolean)
+        : [];
+      if (prompts.length === 0) {
+        throw new Error("未获取到有效分镜提示词");
+      }
+      const screenSpecs = Array.isArray(planData.screens) ? planData.screens : [];
+      const totalSteps = prompts.length + 1;
+      const qualityIssues = Array.isArray(planData.qualityChecks?.issues)
+        ? planData.qualityChecks?.issues.filter(Boolean)
+        : [];
+      setDetailProgress({
+        status: "running",
+        stage:
+          planData.qualityChecks?.passed === false
+            ? `结构质检提示：${qualityIssues[0] || "已自动切换为稳定方案"}`
+            : "结构质检通过，开始逐屏生成",
+        current: 1,
+        total: totalSteps,
+      });
+
+      const modelForGeneration =
+        selectedModelId !== "auto"
+          ? selectedModelId
+          : siteSettings?.canvasAutoModeDefaultModelId ||
+            siteSettings?.canvasDefaultModelId ||
+            undefined;
+
+      const generatedImages: Array<{ originalUrl: string; thumbnailUrl: string }> = [];
+      for (let index = 0; index < prompts.length; index += 1) {
+        const screen = screenSpecs[index];
+        const useModelForScene = Boolean(screen?.useModel);
+        const promptText =
+          String(screen?.visualPrompt || "").trim() || prompts[index]!;
+        setDetailProgress({
+          status: "running",
+          stage: `正在生成第 ${index + 1}/${prompts.length} 屏详情图`,
+          current: index + 2,
+          total: totalSteps,
+        });
+        const globalStyle = planData.globalStyle;
+        const styleDirective = [
+          globalStyle?.designLanguage ? `全局风格：${globalStyle.designLanguage}` : "",
+          globalStyle?.typography?.fontFamily
+            ? `字体家族统一：${globalStyle.typography.fontFamily}`
+            : "",
+          globalStyle?.typography?.title ? `标题规范：${globalStyle.typography.title}` : "",
+          globalStyle?.typography?.subtitle
+            ? `副标题规范：${globalStyle.typography.subtitle}`
+            : "",
+          globalStyle?.typography?.body ? `正文规范：${globalStyle.typography.body}` : "",
+          globalStyle?.layout?.grid ? `布局栅格：${globalStyle.layout.grid}` : "",
+          globalStyle?.layout?.safeArea ? `安全区：${globalStyle.layout.safeArea}` : "",
+          globalStyle?.layout?.rhythm ? `留白节奏：${globalStyle.layout.rhythm}` : "",
+          globalStyle?.palette ? `配色：${globalStyle.palette}` : "",
+        ]
+          .filter(Boolean)
+          .join("；");
+        setMessages((prev) =>
+          prev.map((message) =>
+            message.id === assistantMessageId
+              ? {
+                  ...message,
+                  parts: [
+                    {
+                      type: "text",
+                      text: `### AI详情生成\n正在生成第 ${index + 1}/${prompts.length} 张...`,
+                    },
+                  ],
+                }
+              : message,
+          ),
+        );
+
+        const generationPrompt = [
+          promptText,
+          styleDirective ? `全局样式约束：${styleDirective}` : "",
+          screen?.screenType
+            ? `分镜类型：${screen.screenType}（A=技术公信，B=场景共鸣，C=细节佐证）`
+            : "",
+          useModelForScene
+            ? `人物规则：本屏涉及人物场景，固定使用提供的模特图同一人物（面部、发型、体型、服装风格保持一致）。`
+            : "人物规则：本屏不要出现人物或人体部位，只展示产品与场景元素。",
+          screen?.modelReason ? `人物融入依据：${screen.modelReason}` : "",
+          screen?.title ? `本屏标题：${screen.title}` : "",
+          screen?.subtitle ? `本屏副标题：${screen.subtitle}` : "",
+          screen?.copy ? `本屏文案说明：${screen.copy}` : "",
+          screen?.layoutNote ? `本屏排版说明：${screen.layoutNote}` : "",
+          screen?.fabe?.b ? `B（利益）：${screen.fabe.b}` : "",
+          screen?.fabe?.f ? `F（特征）：${screen.fabe.f}` : "",
+          screen?.fabe?.a ? `A（优势）：${screen.fabe.a}` : "",
+          screen?.fabe?.e ? `E（证据）：${screen.fabe.e}` : "",
+          `输出为竖版电商详情图，尺寸固定 ${DETAIL_TARGET_WIDTH}x${DETAIL_TARGET_HEIGHT} 像素。`,
+          "要求：整套详情图风格统一，产品外观严格一致，主标题/副标题/正文字体与层级全套一致，商业摄影质感，排版区域清晰。",
+        ]
+          .filter(Boolean)
+          .join("\n\n");
+        const styleAnchorUrl =
+          index > 0 ? generatedImages[0]?.originalUrl || generatedImages[0]?.thumbnailUrl : null;
+        const generationReferenceImages = [
+          ...productAttachments.map((item) => item.url),
+          ...(useModelForScene ? [modelAttachment.url] : []),
+          ...(styleAnchorUrl ? [styleAnchorUrl] : []),
+        ].filter(Boolean);
+        const generationResponse = await fetch("/api/canvas/generate/image", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            prompt: generationPrompt,
+            model: modelForGeneration,
+            aspectRatio: "9:16",
+            imageCount: 1,
+            negativePrompt: imageParams.negativePrompt,
+            referenceImage: productAttachments[0]?.url,
+            referenceImages: generationReferenceImages,
+          }),
+        });
+        const generationResult = await generationResponse.json();
+
+        if (!generationResponse.ok || !generationResult.success || !generationResult.data?.images?.length) {
+          throw new Error(generationResult.error || `第 ${index + 1} 张生成失败`);
+        }
+
+        const generated = generationResult.data.images[0]!;
+        generatedImages.push(generated);
+
+        const dimensions = await getImageDimensions(
+          generated.originalUrl || generated.thumbnailUrl
+        );
+        const spacing = 24;
+        const itemWidth = DETAIL_TARGET_WIDTH;
+        const itemHeight = DETAIL_TARGET_HEIGHT;
+        const column = index % 3;
+        const row = Math.floor(index / 3);
+        const x = 120 + column * (itemWidth + spacing);
+        const y = 120 + row * (itemHeight + spacing);
+        addNode({
+          type: "image",
+          position: { x, y },
+          size: { width: itemWidth, height: itemHeight },
+          data: {
+            src: generated.originalUrl || generated.thumbnailUrl,
+            status: "completed",
+            prompt: promptText,
+            title: `详情图-${index + 1}`,
+            metadata: {
+              originalWidth: dimensions.originalWidth,
+              originalHeight: dimensions.originalHeight,
+              generationPrompt,
+              detailSectionIndex: index + 1,
+              detailPlanSummary: planData.summary || "",
+              detailTargetWidth: DETAIL_TARGET_WIDTH,
+              detailTargetHeight: DETAIL_TARGET_HEIGHT,
+              detailTitle: screen?.title || "",
+              detailSubtitle: screen?.subtitle || "",
+              detailScreenType: screen?.screenType || "",
+              detailLayoutNote: screen?.layoutNote || "",
+              detailUseModel: useModelForScene,
+              detailModelReason: screen?.modelReason || "",
+              detailGlobalStyle: planData.globalStyle || null,
+            },
+          },
+          connections: [],
+        });
+      }
+
+      const finalMarkdown = buildDetailResultMarkdown({
+        summary: planData.summary,
+        images: generatedImages,
+        prompts,
+        skillFlow: planData.skillFlow,
+        qualityChecks: planData.qualityChecks,
+        globalStyle: planData.globalStyle,
+        screens: screenSpecs,
+      });
+      setMessages((prev) =>
+        prev.map((message) =>
+          message.id === assistantMessageId
+            ? {
+                ...message,
+                parts: [
+                  {
+                    type: "text",
+                    text: finalMarkdown,
+                  },
+                ],
+              }
+            : message,
+        ),
+      );
+      setDetailProgress({
+        status: "done",
+        stage: `已完成 ${generatedImages.length} 张详情图`,
+        current: totalSteps,
+        total: totalSteps,
+      });
+
+      toast.success(`AI详情生成完成，共 ${generatedImages.length} 张`);
+    } catch (error) {
+      const errMsg = error instanceof Error ? error.message : "AI详情生成失败";
+      setDetailProgress((prev) => ({
+        status: "error",
+        stage: errMsg,
+        current: prev.current,
+        total: prev.total,
+      }));
+      setMessages((prev) =>
+        prev.map((message) =>
+          message.id === assistantMessageId
+            ? {
+                ...message,
+                parts: [
+                  {
+                    type: "text",
+                    text: `### AI详情生成失败\n${errMsg}`,
+                  },
+                ],
+              }
+            : message,
+        ),
+      );
+      toast.error(errMsg);
+    } finally {
+      setIsDetailGenerating(false);
+    }
+  }, [
+    addNode,
+    clearSelection,
+    detailSlots,
+    imageParams.negativePrompt,
+    input,
+    isDetailGenerating,
+    normalizedDetailBrief,
+    selectedModelId,
+    setMessages,
+    siteSettings?.canvasAutoModeDefaultModelId,
+    siteSettings?.canvasDefaultModelId,
+  ]);
+
   // 处理发送（图片已在上传时添加到画布，这里只发送消息）
   const handleSend = useCallback(async () => {
+    if (isDetailGenerationMode && aiDetailGenerationEnabled) {
+      await handleDetailGeneration();
+      return;
+    }
+
     if (!input.trim() && attachments.length === 0) return;
     if (!selectedModelId) {
       toast.error("请选择一个模型");
@@ -1702,6 +2514,15 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
       hiddenSegments.push("【注意：图片中有标注（箭头、圆圈、文字等）标记的区域是需要重点关注或修改的部分，请根据标注进行处理】");
       console.log('[CanvasChat] 检测到标注图片，已生成隐藏提示');
     }
+    if (isDetailGenerationMode && aiDetailGenerationEnabled) {
+      hiddenSegments.push(
+        [
+          "【AI详情生成模式】",
+          "你正在处理电商详情页任务，请先规划分镜结构，再执行生图。",
+          "要求：保持同一产品外观一致、风格一致、文案排版一致，按详情页叙事顺序输出结果。",
+        ].join("\n")
+      );
+    }
     const hiddenPrompt = hiddenSegments.join('\n\n').trim();
     hiddenPromptRef.current = hiddenPrompt || null;
     
@@ -1744,6 +2565,9 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
     videoFrameSlots.length,
     currentModel?.providerType,
     selectedImageNodes,
+    isDetailGenerationMode,
+    aiDetailGenerationEnabled,
+    handleDetailGeneration,
   ]);
 
   // 处理文件选择 - 上传后立即添加到画布
@@ -1951,12 +2775,22 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
     }));
   }, []);
   
-  // 移除附件（通过索引删除，保留兼容性）
-  const removeAttachment = (index: number) => {
-    setAttachments(prev => prev.filter((_, i) => i !== index));
-  };
-
   const isLoading = status === 'streaming' || status === 'submitted';
+  const isSubmitting = isLoading || isDetailGenerating;
+  const hasInputOrAttachments = Boolean(input.trim() || attachments.length > 0);
+  const detailProductCount = detailSlots.slice(0, 5).filter((item) => Boolean(item?.url)).length;
+  const detailModelReady = Boolean(detailSlots[5]?.url);
+  const detailProgressPercent =
+    detailProgress.total > 0
+      ? Math.min(100, Math.round((detailProgress.current / detailProgress.total) * 100))
+      : 0;
+  const hasDetailFallbackAttachment =
+    !isDetailGenerationMode &&
+    !hasInputOrAttachments &&
+    getRecentImageAttachments().length > 0;
+  const canSend = isDetailGenerationMode
+    ? detailValidationIssues.length === 0 && !isDetailGenerating
+    : hasInputOrAttachments || hasDetailFallbackAttachment;
   const currentVideoImageLimit = isVideoModel
     ? getVideoImageLimit(videoParams, currentModel?.providerType)
     : null;
@@ -2439,16 +3273,334 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
           className="relative bg-card rounded-3xl border transition-all duration-200 focus-within:border-primary/50 focus-within:bg-background"
           data-canvas-chat-input-anchor="true"
         >
+          {isDetailGenerationMode && (
+            <div className="mx-3 mt-3 rounded-2xl border border-violet-200/80 bg-violet-50/70 p-3 dark:border-violet-500/35 dark:bg-violet-500/10">
+              <div className="flex items-start justify-between gap-3">
+                <div>
+                  <p className="text-sm font-semibold text-violet-950 dark:text-violet-100">
+                    AI详情生成工作台（PC）
+                  </p>
+                  <p className="mt-0.5 text-[11px] text-violet-700/80 dark:text-violet-200/70">
+                    固定规格 {DETAIL_TARGET_WIDTH} x {DETAIL_TARGET_HEIGHT}，先分析后生成，保持整套详情图风格统一。
+                  </p>
+                </div>
+                <span
+                  className={cn(
+                    "rounded-full px-2 py-0.5 text-[10px] font-medium",
+                    detailProgress.status === "running"
+                      ? "bg-violet-100 text-violet-700 dark:bg-violet-500/20 dark:text-violet-100"
+                      : detailProgress.status === "done"
+                        ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-100"
+                        : detailProgress.status === "error"
+                          ? "bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-100"
+                          : "bg-white/80 text-violet-700 dark:bg-zinc-900/60 dark:text-violet-200"
+                  )}
+                >
+                  {detailProgress.status === "running"
+                    ? "执行中"
+                    : detailProgress.status === "done"
+                      ? "已完成"
+                      : detailProgress.status === "error"
+                        ? "异常"
+                        : "待启动"}
+                </span>
+              </div>
+
+              <div className="mt-3 rounded-xl border border-violet-200/70 bg-white/80 p-2 dark:border-violet-500/30 dark:bg-zinc-900/60">
+                <div className="mb-1 flex items-center justify-between text-[11px] text-violet-700/80 dark:text-violet-200/70">
+                  <span>{detailProgress.stage || "待开始：请先补齐输入信息与素材。"}</span>
+                  <span>
+                    {detailProgress.current}/{detailProgress.total || 0}
+                  </span>
+                </div>
+                <div className="h-1.5 overflow-hidden rounded-full bg-violet-100 dark:bg-violet-500/20">
+                  <div
+                    className={cn(
+                      "h-full rounded-full transition-all duration-300",
+                      detailProgress.status === "error"
+                        ? "bg-red-500"
+                        : detailProgress.status === "done"
+                          ? "bg-emerald-500"
+                          : "bg-violet-500"
+                    )}
+                    style={{ width: `${detailProgressPercent}%` }}
+                  />
+                </div>
+              </div>
+
+              <div className="mt-3 space-y-2">
+                <div className="rounded-xl border border-violet-200/70 bg-white/85 dark:border-violet-500/30 dark:bg-zinc-900/50">
+                  <button
+                    type="button"
+                    className="flex w-full items-center justify-between px-3 py-2 text-left"
+                    onClick={() => toggleDetailSection("required")}
+                  >
+                    <div>
+                      <p className="text-xs font-semibold text-violet-900 dark:text-violet-100">必填信息</p>
+                      <p className="text-[11px] text-violet-700/75 dark:text-violet-200/70">人群 / 场景 / 核心需求为必填</p>
+                    </div>
+                    <ChevronDown
+                      className={cn(
+                        "h-4 w-4 text-violet-600 transition-transform dark:text-violet-200",
+                        detailSections.required && "rotate-180"
+                      )}
+                    />
+                  </button>
+                  {detailSections.required ? (
+                    <div className="grid grid-cols-2 gap-2 border-t border-violet-200/70 p-3 xl:grid-cols-4 dark:border-violet-500/25">
+                      <input
+                        value={detailBrief.targetAudience}
+                        onChange={(event) => updateDetailBriefField("targetAudience", event.target.value)}
+                        className="h-8 rounded-lg border border-violet-200/80 bg-white/90 px-2 text-xs outline-none focus:border-violet-400 dark:border-violet-500/30 dark:bg-zinc-900/60"
+                        placeholder="主购买人群 *"
+                      />
+                      <input
+                        value={detailBrief.usageScenario}
+                        onChange={(event) => updateDetailBriefField("usageScenario", event.target.value)}
+                        className="h-8 rounded-lg border border-violet-200/80 bg-white/90 px-2 text-xs outline-none focus:border-violet-400 dark:border-violet-500/30 dark:bg-zinc-900/60"
+                        placeholder="需求场景 *"
+                      />
+                      <input
+                        value={detailBrief.coreNeed}
+                        onChange={(event) => updateDetailBriefField("coreNeed", event.target.value)}
+                        className="h-8 rounded-lg border border-violet-200/80 bg-white/90 px-2 text-xs outline-none focus:border-violet-400 dark:border-violet-500/30 dark:bg-zinc-900/60"
+                        placeholder="核心需求 *"
+                      />
+                      <input
+                        value={detailBrief.productName}
+                        onChange={(event) => updateDetailBriefField("productName", event.target.value)}
+                        className="h-8 rounded-lg border border-violet-200/80 bg-white/90 px-2 text-xs outline-none focus:border-violet-400 dark:border-violet-500/30 dark:bg-zinc-900/60"
+                        placeholder="产品名称（选填）"
+                      />
+                      <input
+                        value={detailBrief.mainUser}
+                        onChange={(event) => updateDetailBriefField("mainUser", event.target.value)}
+                        className="h-8 rounded-lg border border-violet-200/80 bg-white/90 px-2 text-xs outline-none focus:border-violet-400 dark:border-violet-500/30 dark:bg-zinc-900/60"
+                        placeholder="主使用者（选填）"
+                      />
+                      <input
+                        value={detailBrief.triggerMoment}
+                        onChange={(event) => updateDetailBriefField("triggerMoment", event.target.value)}
+                        className="h-8 rounded-lg border border-violet-200/80 bg-white/90 px-2 text-xs outline-none focus:border-violet-400 dark:border-violet-500/30 dark:bg-zinc-900/60"
+                        placeholder="触发时刻（选填）"
+                      />
+                      <input
+                        value={detailBrief.riskConcern}
+                        onChange={(event) => updateDetailBriefField("riskConcern", event.target.value)}
+                        className="h-8 rounded-lg border border-violet-200/80 bg-white/90 px-2 text-xs outline-none focus:border-violet-400 dark:border-violet-500/30 dark:bg-zinc-900/60"
+                        placeholder="用户顾虑（选填）"
+                      />
+                      <input
+                        value={detailBrief.expectedResult}
+                        onChange={(event) => updateDetailBriefField("expectedResult", event.target.value)}
+                        className="h-8 rounded-lg border border-violet-200/80 bg-white/90 px-2 text-xs outline-none focus:border-violet-400 dark:border-violet-500/30 dark:bg-zinc-900/60"
+                        placeholder="期望结果（选填）"
+                      />
+                      <input
+                        value={detailBrief.coreSellingPoint}
+                        onChange={(event) => updateDetailBriefField("coreSellingPoint", event.target.value)}
+                        className="h-8 rounded-lg border border-violet-200/80 bg-white/90 px-2 text-xs outline-none focus:border-violet-400 xl:col-span-2 dark:border-violet-500/30 dark:bg-zinc-900/60"
+                        placeholder="核心卖点关键词（选填）"
+                      />
+                      <input
+                        value={detailBrief.positioningStatement}
+                        onChange={(event) => updateDetailBriefField("positioningStatement", event.target.value)}
+                        className="h-8 rounded-lg border border-violet-200/80 bg-white/90 px-2 text-xs outline-none focus:border-violet-400 xl:col-span-2 dark:border-violet-500/30 dark:bg-zinc-900/60"
+                        placeholder="一句话定位（选填）"
+                      />
+                    </div>
+                  ) : null}
+                </div>
+
+                <div className="rounded-xl border border-violet-200/70 bg-white/85 dark:border-violet-500/30 dark:bg-zinc-900/50">
+                  <button
+                    type="button"
+                    className="flex w-full items-center justify-between px-3 py-2 text-left"
+                    onClick={() => toggleDetailSection("strategy")}
+                  >
+                    <div>
+                      <p className="text-xs font-semibold text-violet-900 dark:text-violet-100">策略信息</p>
+                      <p className="text-[11px] text-violet-700/75 dark:text-violet-200/70">品牌语气、竞品参考、禁用词</p>
+                    </div>
+                    <ChevronDown
+                      className={cn(
+                        "h-4 w-4 text-violet-600 transition-transform dark:text-violet-200",
+                        detailSections.strategy && "rotate-180"
+                      )}
+                    />
+                  </button>
+                  {detailSections.strategy ? (
+                    <div className="grid grid-cols-2 gap-2 border-t border-violet-200/70 p-3 xl:grid-cols-4 dark:border-violet-500/25">
+                      <input
+                        value={detailBrief.priceBand}
+                        onChange={(event) => updateDetailBriefField("priceBand", event.target.value)}
+                        className="h-8 rounded-lg border border-violet-200/80 bg-white/90 px-2 text-xs outline-none focus:border-violet-400 dark:border-violet-500/30 dark:bg-zinc-900/60"
+                        placeholder="价格带（选填）"
+                      />
+                      <input
+                        value={detailBrief.brandTone}
+                        onChange={(event) => updateDetailBriefField("brandTone", event.target.value)}
+                        className="h-8 rounded-lg border border-violet-200/80 bg-white/90 px-2 text-xs outline-none focus:border-violet-400 dark:border-violet-500/30 dark:bg-zinc-900/60"
+                        placeholder="品牌语气（选填）"
+                      />
+                      <input
+                        value={detailBrief.competitorReference}
+                        onChange={(event) => updateDetailBriefField("competitorReference", event.target.value)}
+                        className="h-8 rounded-lg border border-violet-200/80 bg-white/90 px-2 text-xs outline-none focus:border-violet-400 xl:col-span-2 dark:border-violet-500/30 dark:bg-zinc-900/60"
+                        placeholder="竞品对标（选填）"
+                      />
+                      <input
+                        value={detailBrief.bannedWords}
+                        onChange={(event) => updateDetailBriefField("bannedWords", event.target.value)}
+                        className="h-8 rounded-lg border border-violet-200/80 bg-white/90 px-2 text-xs outline-none focus:border-violet-400 xl:col-span-2 dark:border-violet-500/30 dark:bg-zinc-900/60"
+                        placeholder="禁用表达（选填，逗号分隔）"
+                      />
+                      <textarea
+                        value={detailBrief.userVoice}
+                        onChange={(event) => updateDetailBriefField("userVoice", event.target.value)}
+                        className="min-h-[64px] resize-y rounded-lg border border-violet-200/80 bg-white/90 px-2 py-1.5 text-xs outline-none focus:border-violet-400 xl:col-span-4 dark:border-violet-500/30 dark:bg-zinc-900/60"
+                        placeholder="用户原话样本（选填，建议3-5条）"
+                      />
+                    </div>
+                  ) : null}
+                </div>
+
+                <div className="rounded-xl border border-violet-200/70 bg-white/85 dark:border-violet-500/30 dark:bg-zinc-900/50">
+                  <button
+                    type="button"
+                    className="flex w-full items-center justify-between px-3 py-2 text-left"
+                    onClick={() => toggleDetailSection("assets")}
+                  >
+                    <div>
+                      <p className="text-xs font-semibold text-violet-900 dark:text-violet-100">素材上传</p>
+                      <p className="text-[11px] text-violet-700/75 dark:text-violet-200/70">固定 5 张产品图 + 1 张模特图</p>
+                    </div>
+                    <ChevronDown
+                      className={cn(
+                        "h-4 w-4 text-violet-600 transition-transform dark:text-violet-200",
+                        detailSections.assets && "rotate-180"
+                      )}
+                    />
+                  </button>
+                  {detailSections.assets ? (
+                    <div className="border-t border-violet-200/70 p-3 dark:border-violet-500/25">
+                      <div className="mb-2 text-[11px] text-violet-700/80 dark:text-violet-200/70">
+                        Agent 会自动判断是否使用模特图，人物相关分镜将固定使用同一模特。
+                      </div>
+                      <div className="grid grid-cols-2 gap-2 xl:grid-cols-6">
+                        {DETAIL_SLOT_CONFIGS.map((config, index) => {
+                          const slotAttachment = detailSlots[index];
+                          const isUploading = detailSlotUploading === index;
+                          return (
+                            <div
+                              key={config.key}
+                              className="group relative h-28 overflow-hidden rounded-xl border border-violet-200/80 bg-white/90 dark:border-violet-500/30 dark:bg-zinc-900/60"
+                            >
+                              <input
+                                type="file"
+                                accept="image/*"
+                                className="hidden"
+                                ref={(element) => {
+                                  detailSlotInputRefs.current[index] = element;
+                                }}
+                                onChange={(event) => {
+                                  void handleDetailSlotFileChange(index, event);
+                                }}
+                              />
+                              {slotAttachment ? (
+                                <>
+                                  <button
+                                    type="button"
+                                    className="h-full w-full cursor-pointer"
+                                    onClick={() => detailSlotInputRefs.current[index]?.click()}
+                                  >
+                                    <img
+                                      src={slotAttachment.url}
+                                      alt={config.label}
+                                      className="h-full w-full object-cover transition-transform duration-200 group-hover:scale-[1.02]"
+                                    />
+                                  </button>
+                                  <div className="absolute inset-x-0 bottom-0 bg-black/60 px-1 py-0.5 text-center text-[10px] text-white">
+                                    {config.label}
+                                  </div>
+                                  <button
+                                    type="button"
+                                    className="absolute left-1 top-1 rounded bg-black/55 px-1.5 py-0.5 text-[10px] text-white opacity-0 transition-opacity group-hover:opacity-100"
+                                    onClick={() => detailSlotInputRefs.current[index]?.click()}
+                                  >
+                                    更换
+                                  </button>
+                                  <button
+                                    type="button"
+                                    className="absolute right-1 top-1 rounded bg-black/65 px-1.5 py-0.5 text-[10px] text-white"
+                                    onClick={() => updateDetailSlotAttachment(index, null)}
+                                  >
+                                    移除
+                                  </button>
+                                </>
+                              ) : (
+                                <button
+                                  type="button"
+                                  className="flex h-full w-full cursor-pointer flex-col items-center justify-center gap-1 text-[11px] text-violet-700 dark:text-violet-200"
+                                  onClick={() => detailSlotInputRefs.current[index]?.click()}
+                                  disabled={isSubmitting || isUploading}
+                                >
+                                  {isUploading ? (
+                                    <Loader2 className="h-4 w-4 animate-spin" />
+                                  ) : (
+                                    <ImagePlus className="h-4 w-4" />
+                                  )}
+                                  <span>{config.label}</span>
+                                </button>
+                              )}
+                            </div>
+                          );
+                        })}
+                      </div>
+                      <div className="mt-2 text-[11px] text-violet-700/80 dark:text-violet-200/80">
+                        当前素材：产品图 {detailProductCount}/5，模特图 {detailModelReady ? "1/1" : "0/1"}
+                      </div>
+                    </div>
+                  ) : null}
+                </div>
+              </div>
+
+              <div
+                className={cn(
+                  "mt-3 rounded-xl border px-3 py-2 text-[11px]",
+                  detailValidationIssues.length === 0
+                    ? "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-500/30 dark:bg-emerald-500/10 dark:text-emerald-200"
+                    : "border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-200"
+                )}
+              >
+                {detailValidationIssues.length === 0 ? (
+                  <div className="flex items-center gap-1.5">
+                    <CheckCircle2 className="h-3.5 w-3.5" />
+                    <span>校验通过，可直接发送执行 AI详情生成。</span>
+                  </div>
+                ) : (
+                  <div className="flex items-start gap-1.5">
+                    <AlertCircle className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+                    <span>当前不可发送：{detailValidationIssues.join("、")}</span>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
           {/* 混合输入区域：使用 contenteditable 实现真正的混合编辑 */}
           <div
             className="relative px-4 pt-3 pb-12 min-h-[60px]"
           >
             <div
               ref={textareaRef as any}
-              contentEditable={!isLoading}
+              contentEditable={!isSubmitting}
               suppressContentEditableWarning
               className="min-h-[40px] max-h-[120px] overflow-y-auto text-sm outline-none empty:before:content-[attr(data-placeholder)] empty:before:text-muted-foreground/50"
-              data-placeholder="请输入你的设计需求，例如：绿色椅子 替换 Image"
+              data-placeholder={
+                isDetailGenerationMode
+                  ? "可选补充：风格、情绪氛围、禁用元素、期望生成张数（如：生成8张）"
+                  : "请输入你的设计需求，例如：绿色椅子 替换 Image"
+              }
               onInput={(e) => {
                 // 从 contenteditable 中提取纯文本（排除附件标签文本）
                 const target = e.target as HTMLDivElement;
@@ -2585,6 +3737,8 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
                       "relative h-8 cursor-pointer rounded-full px-3 text-sm font-medium",
                       activeComposerMode === "video"
                         ? "border border-blue-500 bg-blue-50 text-blue-600 hover:bg-blue-100"
+                        : activeComposerMode === "detail"
+                          ? "border border-violet-500 bg-violet-50 text-violet-700 hover:bg-violet-100"
                         : activeComposerMode === "image"
                           ? "border border-purple-500 bg-purple-50 text-purple-700 hover:bg-purple-100"
                           : "border border-[#9eb3ff] bg-white text-zinc-700 hover:bg-zinc-50"
@@ -2593,6 +3747,8 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
                     <span className="flex items-center">
                       {activeComposerMode === "video" ? (
                         <Video className="mr-1 h-4 w-4" />
+                      ) : activeComposerMode === "detail" ? (
+                        <LayoutGrid className="mr-1 h-4 w-4" />
                       ) : activeComposerMode === "image" ? (
                         <ImagePlus className="mr-1 h-4 w-4" />
                       ) : (
@@ -2619,6 +3775,19 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
                     <span className="flex-1">Agent</span>
                     {activeComposerMode === "agent" ? <Check className="h-4 w-4 text-[#3b82f6]" /> : null}
                   </DropdownMenuItem>
+                  {aiDetailGenerationEnabled ? (
+                    <DropdownMenuItem
+                      onClick={() => handleSelectGenerationMode("detail")}
+                      className={cn(
+                        "h-8 cursor-pointer rounded-lg px-2 text-[13px] font-medium text-[#2e3238]",
+                        activeComposerMode === "detail" ? "bg-white/80" : "hover:bg-white/70"
+                      )}
+                    >
+                      <LayoutGrid className="h-4 w-4" />
+                      <span className="flex-1">AI详情生成</span>
+                      {activeComposerMode === "detail" ? <Check className="h-4 w-4 text-[#3b82f6]" /> : null}
+                    </DropdownMenuItem>
+                  ) : null}
                   <DropdownMenuItem
                     onClick={() => handleSelectGenerationMode("image")}
                     className={cn(
@@ -2644,13 +3813,13 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
                 </DropdownMenuContent>
               </DropdownMenu>
 
-              {(!isVideoModel || showVideoAttachmentButton) && (
+              {!isDetailGenerationMode && (!isVideoModel || showVideoAttachmentButton) && (
                 <Button
                   variant="ghost"
                   size="icon"
                   className="h-8 w-8 rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
                   onClick={() => fileInputRef.current?.click()}
-                  disabled={isLoading}
+                  disabled={isSubmitting}
                 >
                   <Paperclip className="h-4 w-4" />
                 </Button>
@@ -2678,7 +3847,15 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
             </div>
 
             <div className="flex items-center gap-2 flex-shrink-0">
-              <Select value={selectedModelId} onValueChange={setSelectedModelId}>
+              <Select
+                value={selectedModelId}
+                onValueChange={(value) => {
+                  setSelectedModelId(value);
+                  if (value !== "auto" || !aiDetailGenerationEnabled) {
+                    setIsDetailGenerationMode(false);
+                  }
+                }}
+              >
                 <SelectTrigger className="h-8 w-8 rounded-full border border-[#cfd4dc] bg-white p-0 justify-center [&>svg]:hidden">
                   <span className="h-6 w-6 overflow-hidden rounded-full bg-white flex items-center justify-center">
                     {currentModel?.avatarUrl ? (
@@ -2701,14 +3878,14 @@ export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenF
                 size="icon"
                 className={cn(
                   "h-8 w-8 rounded-full transition-all duration-200 flex-shrink-0",
-                  input.trim() || attachments.length > 0
+                  canSend
                     ? "bg-black text-white hover:bg-black/90 dark:bg-white dark:text-black dark:hover:bg-white/90"
                     : "bg-muted text-muted-foreground hover:bg-muted/80"
                 )}
                 onClick={handleSend}
-                disabled={isLoading || (!input.trim() && attachments.length === 0)}
+                disabled={isSubmitting || !canSend}
               >
-                {isLoading ? (
+                {isSubmitting ? (
                   <Loader2 className="h-4 w-4 animate-spin" />
                 ) : (
                   <ArrowUp className="h-4 w-4" />