fix: copyToClipboard button not work

web/package.json

@@ -13,16 +13,18 @@
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
-    "@tanstack/router-plugin": "^1.91.1",
+    "@tanstack/router-plugin": "^1.92.11",
     "@types/node": "^22.10.2",
     "@types/react": "^19.0.2",
     "@types/react-dom": "^19.0.2",
     "@vitejs/plugin-react": "^4.3.4",
+    "@types/react-copy-to-clipboard": "^5.0.7",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "autoprefixer": "^10.4.20",
     "postcss": "^8.4.49",
     "tailwindcss": "^3.4.17",
     "typescript": "^5.7.2",
-    "vite": "^6.0.5"
+    "vite": "^6.0.6"
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.1",
@@ -36,10 +38,10 @@
     "@radix-ui/react-switch": "^1.1.2",
     "@radix-ui/react-tabs": "^1.1.2",
     "@radix-ui/react-tooltip": "^1.1.6",
-    "@tanstack/react-query": "^5.62.10",
-    "@tanstack/react-router": "^1.92.3",
-    "@tanstack/router-devtools": "^1.92.3",
-    "@types/react-syntax-highlighter": "^15.5.13",
+    "@tanstack/react-query": "^5.62.11",
+    "@tanstack/react-router": "^1.92.11",
+    "@tanstack/router-devtools": "^1.92.11",
+    "react-copy-to-clipboard": "^5.1.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.469.0",

web/src/components/code-viewer.tsx

@@ -2,6 +2,7 @@ import { Button, ButtonProps } from "@/components/ui/button.tsx";
 import { cn } from "@/lib/utils.ts";
 import { CheckIcon, ClipboardIcon } from "lucide-react";
 import { HTMLProps, useEffect, useState } from "react";
+import { CopyToClipboard } from "react-copy-to-clipboard";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { materialDark } from "react-syntax-highlighter/dist/esm/styles/prism";
 import { toast } from "sonner";
@@ -11,10 +12,6 @@ interface CopyButtonProps extends ButtonProps {
   src?: string;
 }
 
-export function copyToClipboardWithMeta(value: string) {
-  navigator.clipboard.writeText(value);
-}
-
 export function CopyButton({ value, className, src, variant = "ghost", ...props }: CopyButtonProps) {
   const [hasCopied, setHasCopied] = useState(false);
 
@@ -27,21 +24,24 @@ export function CopyButton({ value, className, src, variant = "ghost", ...props
   }, [hasCopied]);
 
   return (
-    <Button
-      size="icon"
-      type="button"
-      variant={variant}
-      className={cn("relative z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50", className)}
-      onClick={() => {
-        copyToClipboardWithMeta(value);
+    <CopyToClipboard
+      text={value}
+      onCopy={() => {
         setHasCopied(true);
         toast.success("复制成功");
       }}
-      {...props}
     >
-      <span className="sr-only">Copy</span>
-      {hasCopied ? <CheckIcon /> : <ClipboardIcon />}
-    </Button>
+      <Button
+        size="icon"
+        type="button"
+        variant={variant}
+        className={cn("relative z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50", className)}
+        {...props}
+      >
+        <span className="sr-only">Copy</span>
+        {hasCopied ? <CheckIcon /> : <ClipboardIcon />}
+      </Button>
+    </CopyToClipboard>
   );
 }
 

web/src/components/copyable-field.tsx

@@ -2,6 +2,7 @@ import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import { Check, Copy } from "lucide-react";
 import { useCallback, useState } from "react";
+import { CopyToClipboard } from "react-copy-to-clipboard";
 import { toast } from "sonner";
 
 interface CopyableFieldProps {
@@ -31,9 +32,11 @@ export function CopyableField({ label, value, size }: CopyableFieldProps) {
           {value} {size != null && `(${size} bytes)`}
         </p>
       </div>
-      <Button variant="ghost" size="icon" type="button" onClick={copyToClipboard}>
-        {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
-      </Button>
+      <CopyToClipboard text={value as string} onCopy={copyToClipboard}>
+        <Button variant="ghost" size="icon" type="button">
+          {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+        </Button>
+      </CopyToClipboard>
     </div>
   );
 }