ai写作修改

frontend-web/src/open-canvas/components/ai-writing/AIWritingDraftPanel.tsx

@@ -1,8 +1,10 @@
 import { FileText, PenLine } from 'lucide-react';
 
 import { useCanvasGraphContext } from '../../contexts/CanvasGraphContext';
+import { useCanvasUIContext } from '../../contexts/CanvasUIContext';
 import { getCurrentArtifactContent, isCodeArtifact } from '../../utils/artifact';
 import { TextArtifactRenderer } from '../artifact/TextArtifactRenderer';
+import { DraftStreamingPreview } from './DraftStreamingPreview';
 import type { CanvasArtifactText } from '../../types/artifact';
 
 function DraftWaitingPlaceholder() {
@@ -28,6 +30,27 @@ function DraftWaitingPlaceholder() {
 
 export function AIWritingDraftPanel() {
   const { artifact } = useCanvasGraphContext();
+  const { isDraftStreaming, draftStreamingMarkdown } = useCanvasUIContext();
+
+  // 流式生成中：只读流式预览，数据走独立通道（不依赖全局 artifact），全程不挂载编辑器，
+  // 彻底隔绝高频内容刷新触发的编辑器更新风暴。
+  if (isDraftStreaming) {
+    return (
+      <div className="h-full flex flex-col overflow-hidden border-l">
+        <div className="h-10 border-b flex items-center gap-2 px-4 shrink-0 bg-muted/20">
+          <FileText className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
+          <span className="text-sm font-medium truncate flex-1">草稿生成中…</span>
+        </div>
+        <div className="flex-1 overflow-hidden">
+          {draftStreamingMarkdown ? (
+            <DraftStreamingPreview markdown={draftStreamingMarkdown} />
+          ) : (
+            <DraftWaitingPlaceholder />
+          )}
+        </div>
+      </div>
+    );
+  }
 
   if (!artifact) {
     return (
@@ -50,6 +73,7 @@ export function AIWritingDraftPanel() {
       </div>
 
       <div className="flex-1 overflow-hidden">
+        {/* 生成完成：带编辑器的渲染器，开放润色 / 滑词等编辑能力 */}
         {content && !isCodeArtifact(content) ? (
           <TextArtifactRenderer content={content as CanvasArtifactText} />
         ) : null}