feat(markdown code): custom code copy button

Author: LzhengH

packages/pro-components/chat/chat-markdown/_example/customCodeBlock.tsx

@@ -63,6 +63,12 @@ const customCodeBlockRenderer = (code: string, _sign: string, _cherry: any, lang
     highlightedCode = code.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
   }
 
+  // 生成唯一ID用于复制功能
+  const blockId = `code-block-${Math.random().toString(36).substr(2, 9)}`;
+
+  // 将原始代码进行 base64 编码，避免特殊字符问题
+  const encodedCode = btoa(encodeURIComponent(code));
+
   // 返回带有完整样式的代码块
   // 注意：由于在 Shadow DOM 中，我们需要内联所有样式
   return `
@@ -71,9 +77,24 @@ const customCodeBlockRenderer = (code: string, _sign: string, _cherry: any, lang
         <span style="font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #57606a;">${
           lang || 'text'
         }</span>
-        <span style="font-size: 11px; color: #8c959f; font-weight: 400;">代码</span>
+        <div style="display: flex; align-items: center; gap: 8px;">
+          <button
+            class="copy-code-btn"
+            data-code="${encodedCode}"
+            style="background: transparent; border: 1px solid #d0d7de; border-radius: 6px; padding: 4px 8px; font-size: 12px; color: #57606a; cursor: pointer; display: flex; align-items: center; gap: 4px; transition: all 0.2s; font-family: inherit;"
+            onmouseenter="this.style.background='#f3f4f6';this.style.borderColor='#8c959f';"
+            onmouseleave="this.style.background='transparent';this.style.borderColor='#d0d7de';"
+            onclick="(function(btn){try{const code=decodeURIComponent(atob(btn.getAttribute('data-code')));navigator.clipboard.writeText(code).then(function(){const orig=btn.innerHTML;btn.innerHTML='✓ 已复制';btn.style.color='#2da44e';setTimeout(function(){btn.innerHTML=orig;btn.style.color='#57606a';},2000);}).catch(function(err){console.error('复制失败:',err);btn.innerHTML='✗ 失败';setTimeout(function(){btn.innerHTML='复制';},2000);});}catch(e){console.error('解码失败:',e);}})(this);return false;"
+          >
+            <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+              <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path>
+              <path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"></path>
+            </svg>
+            复制
+          </button>
+        </div>
       </div>
-      <pre style="margin: 0; background: #ffffff; overflow-x: auto;"><code class="hljs language-${lang}" style="display: block; padding: 20px; color: #24292f; background: #ffffff; font-size: 13px; line-height: 1.6; tab-size: 4;">${highlightedCode}</code></pre>
+      <pre style="margin: 0; background: #ffffff; overflow-x: auto;"><code id="${blockId}" class="hljs language-${lang}" style="display: block; padding: 20px; color: #24292f; background: #ffffff; font-size: 13px; line-height: 1.6; tab-size: 4;">${highlightedCode}</code></pre>
       <style>
         /* GitHub Light Theme - 内联样式 */
         .hljs { color: #24292f; background: #ffffff; }