From db2f21191c3a617c2927721de8d5c4786086db92 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=89=E9=91=AB=E5=8D=87?= <xsji@kland.com.cn>
Date: Fri, 3 Jul 2026 16:49:32 +0800
Subject: [PATCH] fix(frontend): handle clipboard fallback and markdown word
 export

---
 .../src/components/ai-elements/code-block.tsx | 24 +++++-----
 .../artifacts/artifact-file-detail.tsx        |  9 ++--
 .../src/components/workspace/copy-button.tsx  | 32 ++++++++------
 frontend-web/src/core/clipboard.ts            | 44 +++++++++++++++++++
 .../strategy-components/MarkdownRenderer.tsx  |  7 +--
 .../components/chat-qa/GeneralQA.tsx          |  7 +--
 6 files changed, 86 insertions(+), 37 deletions(-)
 create mode 100644 frontend-web/src/core/clipboard.ts

diff --git a/frontend-web/src/components/ai-elements/code-block.tsx b/frontend-web/src/components/ai-elements/code-block.tsx
index d490eeda..bce6fe3e 100644
--- a/frontend-web/src/components/ai-elements/code-block.tsx
+++ b/frontend-web/src/components/ai-elements/code-block.tsx
@@ -1,7 +1,8 @@
 "use client";
 
-import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { copyTextToClipboard } from "@/core/clipboard";
+import { cn } from "@/lib/utils";
 import { CheckIcon, CopyIcon } from "lucide-react";
 import {
   type ComponentProps,
@@ -144,18 +145,13 @@ export const CodeBlockCopyButton = ({
   ...props
 }: CodeBlockCopyButtonProps) => {
   const [isCopied, setIsCopied] = useState(false);
-  const { code } = useContext(CodeBlockContext);
-
-  const copyToClipboard = async () => {
-    if (typeof window === "undefined" || !navigator?.clipboard?.writeText) {
-      onError?.(new Error("Clipboard API not available"));
-      return;
-    }
-
-    try {
-      await navigator.clipboard.writeText(code);
-      setIsCopied(true);
-      onCopy?.();
+  const { code } = useContext(CodeBlockContext);
+
+  const copyToClipboard = async () => {
+    try {
+      await copyTextToClipboard(code);
+      setIsCopied(true);
+      onCopy?.();
       setTimeout(() => setIsCopied(false), timeout);
     } catch (error) {
       onError?.(error as Error);
diff --git a/frontend-web/src/components/workspace/artifacts/artifact-file-detail.tsx b/frontend-web/src/components/workspace/artifacts/artifact-file-detail.tsx
index 73f1f786..3cc2a027 100644
--- a/frontend-web/src/components/workspace/artifacts/artifact-file-detail.tsx
+++ b/frontend-web/src/components/workspace/artifacts/artifact-file-detail.tsx
@@ -28,7 +28,7 @@ import {
   ArtifactHeader,
   ArtifactTitle,
 } from "@/components/ai-elements/artifact";
-import { Select, SelectItem } from "@/components/ui/select";
+import { Select, SelectItem } from "@/components/ui/select";
 import {
   SelectContent,
   SelectGroup,
@@ -39,7 +39,8 @@ import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { CodeEditor } from "@/components/workspace/code-editor";
 import { publishArtifactToKnowledge } from "@/core/agents/api";
 import { useAgent } from "@/core/agents/hooks";
-import { apiFetch } from "@/core/api";
+import { apiFetch } from "@/core/api";
+import { copyTextToClipboard } from "@/core/clipboard";
 import {
   downloadArtifactFile,
 } from "@/core/artifacts/download";
@@ -682,7 +683,7 @@ export function ArtifactFileDetail({
                 disabled={!content}
                 onClick={async () => {
                   try {
-                    await navigator.clipboard.writeText(displayContent ?? "");
+                    await copyTextToClipboard(displayContent ?? "");
                     toast.success(t.clipboard.copiedToClipboard);
                   } catch (error) {
                     toast.error("Failed to copy to clipboard");
@@ -692,7 +693,7 @@ export function ArtifactFileDetail({
                 tooltip={t.clipboard.copyToClipboard}
               />
             )}
-            {!useWriteFileStreaming && language === "markdown" && (
+            {language === "markdown" && (
               <ArtifactAction
                 icon={isExportingWord ? LoaderIcon : FileType2Icon}
                 label="另存为 Word"
diff --git a/frontend-web/src/components/workspace/copy-button.tsx b/frontend-web/src/components/workspace/copy-button.tsx
index 8aea3099..cce836c4 100644
--- a/frontend-web/src/components/workspace/copy-button.tsx
+++ b/frontend-web/src/components/workspace/copy-button.tsx
@@ -1,8 +1,10 @@
-import { CheckIcon, CopyIcon } from "lucide-react";
-import { useCallback, useState, type ComponentProps } from "react";
-
-import { Button } from "@/components/ui/button";
-import { useI18n } from "@/core/i18n/hooks";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { useCallback, useState, type ComponentProps } from "react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import { copyTextToClipboard } from "@/core/clipboard";
+import { useI18n } from "@/core/i18n/hooks";
 
 import { Tooltip } from "./tooltip";
 
@@ -12,14 +14,18 @@ export function CopyButton({
 }: ComponentProps<typeof Button> & {
   clipboardData: string;
 }) {
-  const { t } = useI18n();
-  const [copied, setCopied] = useState(false);
-  const handleCopy = useCallback(() => {
-    void navigator.clipboard.writeText(clipboardData);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  }, [clipboardData]);
-  return (
+  const { t } = useI18n();
+  const [copied, setCopied] = useState(false);
+  const handleCopy = useCallback(async () => {
+    try {
+      await copyTextToClipboard(clipboardData);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      toast.error(t.clipboard.failedToCopyToClipboard);
+    }
+  }, [clipboardData, t.clipboard.failedToCopyToClipboard]);
+  return (
     <Tooltip content={t.clipboard.copyToClipboard}>
       <Button
         size="icon-sm"
diff --git a/frontend-web/src/core/clipboard.ts b/frontend-web/src/core/clipboard.ts
new file mode 100644
index 00000000..255d7844
--- /dev/null
+++ b/frontend-web/src/core/clipboard.ts
@@ -0,0 +1,44 @@
+export async function copyTextToClipboard(text: string): Promise<void> {
+  let clipboardError: unknown;
+
+  if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return;
+    } catch (error) {
+      clipboardError = error;
+    }
+  }
+
+  if (typeof document === "undefined" || !document.body) {
+    throw clipboardError instanceof Error
+      ? clipboardError
+      : new Error("Clipboard is not available");
+  }
+
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.setAttribute("readonly", "");
+  textarea.style.position = "fixed";
+  textarea.style.top = "0";
+  textarea.style.left = "0";
+  textarea.style.width = "1px";
+  textarea.style.height = "1px";
+  textarea.style.opacity = "0";
+
+  document.body.appendChild(textarea);
+  textarea.focus();
+  textarea.select();
+  textarea.setSelectionRange(0, textarea.value.length);
+
+  try {
+    const copied = document.execCommand("copy");
+    if (!copied) {
+      throw clipboardError instanceof Error
+        ? clipboardError
+        : new Error("Copy command failed");
+    }
+  } finally {
+    textarea.remove();
+  }
+}
diff --git a/frontend-web/src/strategy-components/MarkdownRenderer.tsx b/frontend-web/src/strategy-components/MarkdownRenderer.tsx
index 42e5879a..ce9c89d8 100644
--- a/frontend-web/src/strategy-components/MarkdownRenderer.tsx
+++ b/frontend-web/src/strategy-components/MarkdownRenderer.tsx
@@ -15,6 +15,7 @@ import sql from 'react-syntax-highlighter/dist/esm/languages/prism/sql';
 import tsx from 'react-syntax-highlighter/dist/esm/languages/prism/tsx';
 import typescript from 'react-syntax-highlighter/dist/esm/languages/prism/typescript';
 import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { copyTextToClipboard } from '@/core/clipboard';
 
 export interface WikiLinkTarget {
   target: string;
@@ -101,11 +102,11 @@ const CodeBlock: React.FC<{ children: React.ReactNode; className?: string }> = (
 
   const handleCopy = async () => {
     try {
-      await navigator.clipboard.writeText(codeText);
+      await copyTextToClipboard(codeText);
       setCopied(true);
       window.setTimeout(() => setCopied(false), 1500);
-    } catch (error) {
-      console.error('复制代码失败:', error);
+    } catch {
+      // The shared clipboard helper already tries the browser fallback.
     }
   };
 
diff --git a/frontend-web/src/strategy-components/components/chat-qa/GeneralQA.tsx b/frontend-web/src/strategy-components/components/chat-qa/GeneralQA.tsx
index 79d5cfa6..a01cb9d8 100644
--- a/frontend-web/src/strategy-components/components/chat-qa/GeneralQA.tsx
+++ b/frontend-web/src/strategy-components/components/chat-qa/GeneralQA.tsx
@@ -29,6 +29,7 @@ import {
 } from './GeneralQA.mock';
 import { requestCrudService } from '@/service/request-axios-service';
 import { authStorageGet } from '@/core/auth/scoped-storage';
+import { copyTextToClipboard } from '@/core/clipboard';
 
 /**
  * 通用问答组件
@@ -1763,9 +1764,9 @@ const GeneralQA: React.FC<{
   const handleCopyAssistantMessage = async (message: Message) => {
     const answerText = getAssistantAnswerText(message);
     try {
-      await navigator.clipboard.writeText(answerText);
-    } catch (copyError) {
-      console.error('复制模型回答失败:', copyError);
+      await copyTextToClipboard(answerText);
+    } catch {
+      // Keep the chat surface quiet when the browser blocks clipboard access.
     }
   };