feat: 添加代码块复制功能，支持剪贴板操作并提供用户反馈

web/src/components/common/markdown-codeblock.tsx

@@ -1,6 +1,8 @@
 'use client'
+import { useTranslations } from "next-intl";
 import React from "react";
 import { toast } from "sonner";
+import copyToClipboard from '@/lib/clipboard';
 
 function extractText(node: React.ReactNode): string {
   if (typeof node === "string") return node;
@@ -17,6 +19,7 @@ function extractText(node: React.ReactNode): string {
 }
 
 export default function CodeBlock(props: React.ComponentPropsWithoutRef<"pre">) {
+  const t = useTranslations('CodeBlock');
   let className: string | undefined = undefined;
   const child = props.children as React.ReactElement<{ className?: string; children?: React.ReactNode }> | undefined;
   if (
@@ -43,28 +46,23 @@ export default function CodeBlock(props: React.ComponentPropsWithoutRef<"pre">)
     codeContent = extractText(child.props.children);
   }
 
-    function handleCopy(e: React.MouseEvent<HTMLButtonElement>) {
+  async function handleCopy(e: React.MouseEvent<HTMLButtonElement>) {
-        if (typeof window !== "undefined" && window.navigator?.clipboard) {
+    try {
-            window.navigator.clipboard.writeText(codeContent);
+      const ok = await copyToClipboard(codeContent);
-        } else {
+      if (ok) toast.success(t("copy_success"));
-            const textarea = document.createElement("textarea");
+      else toast.error(t("copy_failed") || 'Copy failed');
-            textarea.value = codeContent;
+    } catch (err) {
-            document.body.appendChild(textarea);
+      console.error('copy failed', err);
-            textarea.select();
+      toast.error(t("copy_failed") || 'Copy failed');
-            document.execCommand("copy");
-            document.body.removeChild(textarea);
     }
-        toast.success("已经复制", {
-            description: "代码已复制到剪贴板",
-        });
   }
 
   return (
-        <div className="relative my-6 rounded-lg overflow-hidden bg-[#f5f5f7] dark:bg-[#23272f] border border-gray-200 dark:border-gray-700 shadow-sm group">
+    <div className="relative my-6 rounded-2xl overflow-hidden bg-[#f5f5f7] dark:bg-[#23272f] border border-gray-200 dark:border-gray-700 shadow-sm group">
       <div className="flex items-center h-8 px-3 bg-[#e5e7eb] dark:bg-[#23272f] border-b border-gray-200 dark:border-gray-700 relative">
-                <span className="w-3 h-3 rounded-full bg-red-400 mr-2" />
+        <span className="w-3.5 h-3.5 rounded-full bg-red-400 mr-2" />
-                <span className="w-3 h-3 rounded-full bg-yellow-400 mr-2" />
+        <span className="w-3.5 h-3.5 rounded-full bg-yellow-400 mr-2" />
-                <span className="w-3 h-3 rounded-full bg-green-400" />
+        <span className="w-3.5 h-3.5 rounded-full bg-green-400" />
         {language && (
           <span className="absolute left-1/2 -translate-x-1/2 text-xs text-gray-500 dark:text-gray-400 font-mono">
             {language}
@@ -84,7 +82,7 @@ export default function CodeBlock(props: React.ComponentPropsWithoutRef<"pre">)
             onClick={handleCopy}
             tabIndex={-1}
           >
-                        复制
+            {t("copy")}
           </button>
         </div>
       </div>

web/src/lib/clipboard.ts

@@ -0,0 +1,65 @@
+/**
+ * copyToClipboard
+ * - 优先使用 navigator.clipboard.writeText（异步）
+ * - 如果不可用或失败，使用隐藏的 textarea + document.execCommand('copy') 回退
+ * - 尝试在回退时恢复原始 selection
+ *
+ * 返回 Promise<boolean>，表示是否成功复制
+ */
+export async function copyToClipboard(text: string): Promise<boolean> {
+  // 优先使用现代 Clipboard API
+  try {
+    if (typeof navigator !== 'undefined' && navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
+      await navigator.clipboard.writeText(text);
+      return true;
+    }
+  } catch (err) {
+    // 忽略并回退到老方法
+    // console.warn('navigator.clipboard.writeText failed, falling back to execCommand', err);
+  }
+
+  // 回退到 textarea + execCommand 方案（在许多旧浏览器上可用）
+  if (typeof document === 'undefined') return false;
+
+  const textarea = document.createElement('textarea');
+  textarea.value = text;
+  // 防止页面滚动，把元素放到不可见但可选中的位置
+  textarea.setAttribute('readonly', '');
+  textarea.style.position = 'fixed';
+  textarea.style.left = '-9999px';
+  textarea.style.top = '0';
+  textarea.style.opacity = '0';
+  document.body.appendChild(textarea);
+
+  // 保存当前 selection（以便恢复）
+  const selection = document.getSelection();
+  let originalRange: Range | null = null;
+  if (selection && selection.rangeCount > 0) {
+    originalRange = selection.getRangeAt(0);
+  }
+
+  textarea.select();
+  textarea.setSelectionRange(0, textarea.value.length);
+
+  try {
+    // 使用 any 绕开 TypeScript 中关于 execCommand 的弃用声明
+    const successful = (document as any).execCommand('copy');
+    // 清理并恢复 selection
+    document.body.removeChild(textarea);
+    if (selection) {
+      selection.removeAllRanges();
+      if (originalRange) selection.addRange(originalRange);
+    }
+    return Boolean(successful);
+  } catch (err) {
+    // 清理并恢复 selection
+    document.body.removeChild(textarea);
+    if (selection) {
+      selection.removeAllRanges();
+      if (originalRange) selection.addRange(originalRange);
+    }
+    return false;
+  }
+}
+
+export default copyToClipboard;

web/src/locales/zh-CN.json

@@ -16,6 +16,11 @@
     "error": "验证失败",
     "success": "恭喜呀，你是个人！"
   },
+  "CodeBlock": {
+    "copy": "复制",
+    "copy_success": "已经复制到剪贴板",
+    "copy_failed": "复制失败，请手动复制"
+  },
   "Comment": {
     "collapse_replies": "收起",
     "comment": "评论",
@@ -56,7 +61,11 @@
   },
   "Login": {
     "captcha_error": "验证错误，请重试。",
+    "fetch_captcha_config_failed": "获取验证码失败，请稍后重试。",
+    "fetch_oidc_configs_failed": "获取第三方身份提供者配置失败。",
     "logging": "正在登录...",
+    "login_success": "登录成功！",
+    "login_failed": "登录失败",
     "welcome": "欢迎回来",
     "with_oidc": "使用第三方身份提供者",
     "or_continue_with_local_account": "或使用用户名和密码",
@@ -69,7 +78,6 @@
     "by_logging_in_you_agree_to_our": "登录即表示你同意我们的",
     "terms_of_service": "服务条款",
     "and": "和",
-    "privacy_policy": "隐私政策",
+    "privacy_policy": "隐私政策"
-    "login_failed": "登录失败，请检查你的凭据。"
   }
 }