From 5e9220302cfa2fe4cf98bfd0c6390d78895256dc Mon Sep 17 00:00:00 2001
From: kennethcheng <a1478925630@163.com>
Date: Mon, 27 Apr 2026 14:59:32 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E5=9D=97=E5=A2=9E=E5=BC=BA=E7=BB=84=E4=BB=B6=EF=BC=88=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E5=A4=8D=E5=88=B6=E4=B8=8E=E8=AF=AD=E8=A8=80=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CodeBlockHelper.astro | 71 ++++++++++++++++++++++++++++
 1 file changed, 71 insertions(+)
 create mode 100644 src/components/CodeBlockHelper.astro

diff --git a/src/components/CodeBlockHelper.astro b/src/components/CodeBlockHelper.astro
new file mode 100644
index 0000000..946e18b
--- /dev/null
+++ b/src/components/CodeBlockHelper.astro
@@ -0,0 +1,71 @@
+---
+// 此组件不渲染任何 HTML，仅注入全局客户端脚本
+---
+<script>
+  function upgradeCodeBlocks() {
+    const codeBlocks = document.querySelectorAll('pre');
+
+    codeBlocks.forEach((pre) => {
+      // 防止重复注入
+      if (pre.querySelector('.copy-button')) return;
+
+      // 1. 获取语言名称 (从 rehype-pretty-code 自动生成的属性中获取)
+      const lang = pre.getAttribute('data-language') || 'code';
+      
+      // 2. 创建包裹容器并调整 pre 样式
+      pre.classList.add('relative', 'group');
+      
+      // 3. 创建顶栏 (语言标签 + 复制按钮)
+      const header = document.createElement('div');
+      header.className = "absolute top-0 right-0 left-0 flex justify-between items-center px-4 py-1.5 text-[10px] font-mono font-bold uppercase tracking-widest text-gray-400 bg-gray-800/50 border-b border-gray-700/50 rounded-t-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300";
+      header.innerHTML = `
+        <span class="flex items-center gap-1.5"><span class="w-2 h-2 rounded-full bg-blue-500"></span>${lang}</span>
+        <button class="copy-button hover:text-white transition-colors cursor-pointer flex items-center gap-1">
+          <span class="btn-text">COPY</span>
+        </button>
+      `;
+
+      // 4. 注入到 pre 头部
+      pre.prepend(header);
+      // 增加 padding 给 header 留位
+      pre.style.paddingTop = '2.5rem';
+
+      // 5. 绑定点击事件
+      const btn = header.querySelector('.copy-button');
+      const btnText = header.querySelector('.btn-text');
+      
+      btn?.addEventListener('click', async () => {
+        const code = pre.querySelector('code')?.innerText || "";
+        await navigator.clipboard.writeText(code);
+        
+        if (btnText) {
+          btnText.innerText = "COPIED!";
+          btn.classList.add('text-green-400');
+          setTimeout(() => {
+            btnText.innerText = "COPY";
+            btn.classList.remove('text-green-400');
+          }, 2000);
+        }
+      });
+    });
+  }
+
+  // 初始化
+  document.addEventListener('astro:page-load', upgradeCodeBlocks);
+  upgradeCodeBlocks();
+</script>
+
+<style is:global>
+  /* 优化代码块圆角与阴影 */
+  pre {
+    @apply rounded-xl shadow-2xl border border-gray-800/50 !important;
+  }
+  /* 隐藏原有的滚动条，美化自定义滚动条 */
+  pre::-webkit-scrollbar {
+    height: 5px;
+  }
+  pre::-webkit-scrollbar-thumb {
+    background: #374151;
+    border-radius: 10px;
+  }
+</style>