feat: enhance responsive layout and improve i18n support (#39)

web/src/components/copyable-field.tsx

@@ -1,8 +1,9 @@
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import { Check, Copy } from "lucide-react";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { CopyToClipboard } from "react-copy-to-clipboard";
+import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 
 interface CopyableFieldProps {
@@ -13,30 +14,39 @@ interface CopyableFieldProps {
 
 export function CopyableField({ label, value, text }: CopyableFieldProps) {
   const [hasCopied, setHasCopied] = useState(false);
+  const { t } = useTranslation();
 
-  const copyToClipboard = useCallback(() => {
-    setHasCopied(true);
-    toast.success(`复制${label}成功`, {
-      duration: 1000,
-    });
-    setTimeout(() => {
-      setHasCopied(false);
-    }, 1000);
-  }, [label]);
+  useEffect(() => {
+    if (hasCopied) {
+      const timer = setTimeout(() => {
+        setHasCopied(false);
+      }, 1000);
+      return () => clearTimeout(timer);
+    }
+  }, [hasCopied]);
+
+  const handleCopy = useCallback(() => {
+    if (!hasCopied) {
+      setHasCopied(true);
+      toast.success(t("copyLabelSuccess", { label }), {
+        duration: 1000,
+      });
+    }
+  }, [hasCopied, label, t]);
 
   return (
-    <div className="flex items-center justify-between h-9">
-      <div className="flex items-center space-x-2 text-sm">
-        <Label className="w-32 text-right">{label}：</Label>
-        <p>{text}</p>
+    <div className="flex flex-col gap-1 py-1">
+      <div className="flex items-center justify-between gap-2">
+        <Label className="text-sm text-muted-foreground">{label}：</Label>
+        {value && (
+          <CopyToClipboard text={value as string} onCopy={handleCopy}>
+            <Button variant="ghost" size="icon" type="button" className="h-8 w-8" disabled={hasCopied}>
+              {hasCopied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+            </Button>
+          </CopyToClipboard>
+        )}
       </div>
-      {value && (
-        <CopyToClipboard text={value as string} onCopy={copyToClipboard}>
-          <Button variant="ghost" size="icon" type="button">
-            {hasCopied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
-          </Button>
-        </CopyToClipboard>
-      )}
+      <p className="text-sm break-all">{text}</p>
     </div>
   );
 }