ai写作

2026-05-17 19:29:10 +08:00
1 parent 6cab62d140
commit 918e65d8d3
@@ -0,0 +1,59 @@
+import { FileText, PenLine } from 'lucide-react';
+
+import { useCanvasGraphContext } from '../../contexts/CanvasGraphContext';
+import { getCurrentArtifactContent, isCodeArtifact } from '../../utils/artifact';
+import { TextArtifactRenderer } from '../artifact/TextArtifactRenderer';
+import type { CanvasArtifactText } from '../../types/artifact';
+
+function DraftWaitingPlaceholder() {
+  return (
+    <div className="h-full flex flex-col items-center justify-center gap-5 select-none">
+      <div className="relative">
+        <div className="w-16 h-16 rounded-2xl bg-muted/60 flex items-center justify-center">
+          <FileText className="w-8 h-8 text-muted-foreground/40" />
+        </div>
+        <div className="absolute -bottom-1.5 -right-1.5 w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center">
+          <PenLine className="w-3.5 h-3.5 text-primary/60" />
+        </div>
+      </div>
+      <div className="text-center space-y-1.5 max-w-[200px]">
+        <p className="text-sm font-medium text-foreground/60">草稿将在此处显示</p>
+        <p className="text-[11px] text-muted-foreground leading-relaxed">
+          完成写作流程后，AI 生成的内容将实时出现在这里
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export function AIWritingDraftPanel() {
+  const { artifact } = useCanvasGraphContext();
+
+  if (!artifact) {
+    return (
+      <div className="h-full bg-muted/10 border-l">
+        <DraftWaitingPlaceholder />
+      </div>
+    );
+  }
+
+  const content = getCurrentArtifactContent(artifact);
+
+  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">
+          {content?.title ?? '草稿预览'}
+        </span>
+      </div>
+
+      <div className="flex-1 overflow-hidden">
+        {content && !isCodeArtifact(content) ? (
+          <TextArtifactRenderer content={content as CanvasArtifactText} />
+        ) : null}
+      </div>
+    </div>
+  );
+}