feat: 新增写作画布系统

frontend-web/src/components/workspace/artifacts/artifact-file-detail.tsx

@@ -2,15 +2,16 @@
 
 import {
   ArrowDownIcon,
-  Code2Icon,
-  CopyIcon,
-  DownloadIcon,
-  EyeIcon,
-  LoaderIcon,
-  PackageIcon,
-  SquareArrowOutUpRightIcon,
-  XIcon,
-} from "lucide-react";
+  Code2Icon,
+  CopyIcon,
+  DownloadIcon,
+  EyeIcon,
+  LoaderIcon,
+  PackageIcon,
+  SaveIcon,
+  SquareArrowOutUpRightIcon,
+  XIcon,
+} from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
 import { Streamdown } from "streamdown";
@@ -33,11 +34,14 @@ import {
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { CodeEditor } from "@/components/workspace/code-editor";
 import { apiFetch } from "@/core/api";
-import {
-  downloadArtifactFile,
-  openArtifactInNewTab,
-} from "@/core/artifacts/download";
-import { useArtifactContent } from "@/core/artifacts/hooks";
+import {
+  downloadArtifactFile,
+  openArtifactInNewTab,
+} from "@/core/artifacts/download";
+import {
+  useArtifactContent,
+  useUpdateArtifactContent,
+} from "@/core/artifacts/hooks";
 import { urlOfArtifact } from "@/core/artifacts/utils";
 import { useI18n } from "@/core/i18n/hooks";
 import { installSkill } from "@/core/skills/api";
@@ -113,13 +117,18 @@ export function ArtifactFileDetail({
   const isSupportPreview = useMemo(() => {
     return language === "html" || language === "markdown";
   }, [language]);
-  const { content } = useArtifactContent({
-    threadId,
-    filepath: filepathFromProps,
-    enabled: isCodeFile && !isWriteFile,
-  });
-
-  const displayContent = content ?? "";
+  const { content, isApplyingEdit } = useArtifactContent({
+    threadId,
+    filepath: filepathFromProps,
+    enabled: isCodeFile && !isWriteFile,
+  });
+
+  const canEditArtifact =
+    language === "markdown" && !isWriteFile && !isSkillFile && !isMock;
+  const [draftContent, setDraftContent] = useState("");
+  const [hasLocalEdits, setHasLocalEdits] = useState(false);
+  const updateArtifact = useUpdateArtifactContent();
+  const displayContent = canEditArtifact ? draftContent : (content ?? "");
   const isHtmlStreaming = language === "html" && thread.isLoading;
   const hasMultipleArtifacts = (artifacts?.length ?? 0) > 1;
   const fileTypeLabel = useMemo(() => {
@@ -139,8 +148,20 @@ export function ArtifactFileDetail({
   const [binaryPreviewUrl, setBinaryPreviewUrl] = useState<string | null>(
     null,
   );
-  const artifactContentRef = useRef<HTMLDivElement | null>(null);
-  const resumeButtonTimeoutRef = useRef<number | null>(null);
+  const artifactContentRef = useRef<HTMLDivElement | null>(null);
+  const resumeButtonTimeoutRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    setDraftContent(content ?? "");
+    setHasLocalEdits(false);
+  }, [filepathFromProps]);
+
+  useEffect(() => {
+    if (!canEditArtifact || hasLocalEdits) {
+      return;
+    }
+    setDraftContent(content ?? "");
+  }, [canEditArtifact, content, hasLocalEdits]);
 
   useEffect(() => {
     setAllowAutoViewSwitch(true);
@@ -308,7 +329,7 @@ export function ArtifactFileDetail({
     }, 1600);
   }, [scrollArtifactToBottom]);
 
-  const handleInstallSkill = useCallback(async () => {
+  const handleInstallSkill = useCallback(async () => {
     if (isInstalling) return;
 
     setIsInstalling(true);
@@ -328,7 +349,33 @@ export function ArtifactFileDetail({
     } finally {
       setIsInstalling(false);
     }
-  }, [threadId, filepath, isInstalling]);
+  }, [threadId, filepath, isInstalling]);
+
+  const handleSaveArtifact = useCallback(async () => {
+    if (!canEditArtifact || updateArtifact.isPending) {
+      return;
+    }
+    try {
+      await updateArtifact.mutateAsync({
+        filepath,
+        threadId,
+        isMock,
+        content: draftContent,
+      });
+      setHasLocalEdits(false);
+      toast.success("Markdown 已保存");
+    } catch (error) {
+      console.error("Failed to save artifact:", error);
+      toast.error(error instanceof Error ? error.message : "Markdown 保存失败");
+    }
+  }, [
+    canEditArtifact,
+    draftContent,
+    filepath,
+    isMock,
+    threadId,
+    updateArtifact,
+  ]);
 
   return (
     <Artifact className={cn(className)}>
@@ -405,10 +452,19 @@ export function ArtifactFileDetail({
             </div>
           )}
         </div>
-        <div className="flex items-center justify-end gap-2">
-          <ArtifactActions className="bg-muted/45 rounded-full border border-black/6 p-1 dark:border-white/8">
-            {!isWriteFile && filepath.endsWith(".skill") && (
-              <Tooltip content={t.toolCalls.skillInstallTooltip}>
+        <div className="flex items-center justify-end gap-2">
+          <ArtifactActions className="bg-muted/45 rounded-full border border-black/6 p-1 dark:border-white/8">
+            {canEditArtifact && (
+              <ArtifactAction
+                icon={updateArtifact.isPending ? LoaderIcon : SaveIcon}
+                label="保存 Markdown"
+                tooltip={hasLocalEdits ? "保存 Markdown 修改" : "Markdown 已保存"}
+                disabled={!hasLocalEdits || updateArtifact.isPending}
+                onClick={handleSaveArtifact}
+              />
+            )}
+            {!isWriteFile && filepath.endsWith(".skill") && (
+              <Tooltip content={t.toolCalls.skillInstallTooltip}>
                 <ArtifactAction
                   icon={isInstalling ? LoaderIcon : PackageIcon}
                   label={t.common.install}
@@ -494,13 +550,19 @@ export function ArtifactFileDetail({
           </ArtifactActions>
         </div>
       </ArtifactHeader>
-      <ArtifactContent
-        ref={artifactContentRef}
-        className="relative p-0"
-        onWheelCapture={handlePauseAutoScroll}
-      >
-        {showResumeAutoScroll && (
-          <button
+      <ArtifactContent
+        ref={artifactContentRef}
+        className="relative p-0"
+        onWheelCapture={handlePauseAutoScroll}
+      >
+        {isApplyingEdit && (
+          <div className="absolute right-4 bottom-4 z-20 inline-flex items-center gap-2 rounded-full border border-[#d8b878] bg-[#fff3cf]/95 px-3 py-1.5 text-xs text-[#6d5625] shadow-sm">
+            <span className="h-3.5 w-0.5 animate-pulse rounded-full bg-[#9b7a2f]" />
+            正在改写 Markdown
+          </div>
+        )}
+        {showResumeAutoScroll && (
+          <button
             type="button"
             onClick={handleResumeAutoScroll}
             className="animate-[sandbox-scroll-button-in_220ms_ease-out] absolute inset-x-0 top-1/2 z-20 mx-auto flex w-fit -translate-y-1/2 items-center gap-2 rounded-full border border-white/35 bg-black/28 px-4 py-2 text-sm font-medium text-white shadow-[0_20px_40px_-24px_rgba(15,23,42,0.7)] backdrop-blur-md transition hover:bg-black/40"
@@ -512,21 +574,31 @@ export function ArtifactFileDetail({
         {isSupportPreview &&
           viewMode === "preview" &&
           (language === "markdown" || language === "html") && (
-            <ArtifactFilePreview
-              content={displayContent}
-              language={language ?? "text"}
-              animated={showPreviewSwitchPulse}
-            />
-          )}
+              <ArtifactFilePreview
+                content={displayContent}
+                language={language ?? "text"}
+                animated={showPreviewSwitchPulse}
+                activeCursor={isApplyingEdit}
+              />
+            )}
         {isCodeFile && viewMode === "code" && (
           <div className="size-full">
-            <CodeEditor
-              className="size-full resize-none rounded-none border-none bg-transparent"
-              value={displayContent ?? ""}
-              readonly
-            />
-          </div>
-        )}
+            <CodeEditor
+              className="size-full resize-none rounded-none border-none bg-transparent"
+              value={displayContent ?? ""}
+              readonly={!canEditArtifact}
+              onChange={
+                canEditArtifact
+                  ? (value) => {
+                      setDraftContent(value);
+                      setHasLocalEdits(true);
+                    }
+                  : undefined
+              }
+              streamingReadonlyFallback={!canEditArtifact}
+            />
+          </div>
+        )}
         {!isCodeFile &&
           (binaryPreviewUrl ? (
             <iframe className="size-full bg-white" src={binaryPreviewUrl} />
@@ -541,15 +613,17 @@ export function ArtifactFileDetail({
   );
 }
 
-export function ArtifactFilePreview({
-  content,
-  language,
-  animated = false,
-}: {
-  content: string;
-  language: string;
-  animated?: boolean;
-}) {
+export function ArtifactFilePreview({
+  content,
+  language,
+  animated = false,
+  activeCursor = false,
+}: {
+  content: string;
+  language: string;
+  animated?: boolean;
+  activeCursor?: boolean;
+}) {
   const [htmlPreviewUrl, setHtmlPreviewUrl] = useState<string>();
 
   useEffect(() => {
@@ -580,12 +654,15 @@ export function ArtifactFilePreview({
           className="size-full"
           {...streamdownPlugins}
           components={{ a: ArtifactLink }}
-        >
-          {content ?? ""}
-        </Streamdown>
-      </div>
-    );
-  }
+        >
+          {content ?? ""}
+        </Streamdown>
+        {activeCursor && (
+          <span className="mt-2 inline-block h-5 w-0.5 animate-pulse rounded-full bg-[#9b7a2f]" />
+        )}
+      </div>
+    );
+  }
 
   if (language === "html") {
     return (