From 470e34e7a888db0582bce4648f8236402b37acac Mon Sep 17 00:00:00 2001
From: gaoziman <2942894660@qq.com>
Date: Sun, 21 Dec 2025 01:56:41 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E4=BB=A3=E7=A0=81=E5=9D=97):=20?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=20CSS=20=E5=8F=98=E9=87=8F=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81=E5=9D=97=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 使用 CSS 变量替代硬编码颜色值
- 添加 Mac 风格红黄绿交通灯按钮装饰
- 优化工具栏布局和间距
- 支持亮色/暗色主题自动切换
- 改进行号显示样式
---
 src/components/markdown/CodeBlock.tsx | 46 ++++++++++++++++++++++-----
 1 file changed, 38 insertions(+), 8 deletions(-)

diff --git a/src/components/markdown/CodeBlock.tsx b/src/components/markdown/CodeBlock.tsx
index 73cbfe2..6d548b0 100644
--- a/src/components/markdown/CodeBlock.tsx
+++ b/src/components/markdown/CodeBlock.tsx
@@ -84,16 +84,38 @@ export function CodeBlock({
   const lines = code.split('\n');
 
   return (
-    <div className={cn('relative group rounded overflow-hidden my-4', className)}>
+    <div className={cn('relative group rounded overflow-hidden my-4', className)}
+         style={{ boxShadow: 'var(--color-code-shadow)' }}>
       {/* 顶部工具栏 */}
-      <div className="flex items-center justify-between px-4 py-2 bg-[#2d2d2d] text-gray-400 text-sm">
-        <span className="font-mono">{language || 'code'}</span>
+      <div className="flex items-center justify-between px-4 py-2.5 text-sm"
+           style={{
+             backgroundColor: 'var(--color-code-toolbar-bg)',
+             color: 'var(--color-code-toolbar-text)',
+             borderBottom: '1px solid var(--color-code-border)'
+           }}>
+        {/* 左侧：Mac 红黄绿按钮 + 语言 */}
+        <div className="flex items-center gap-3">
+          {/* Mac Traffic Lights - 通过 CSS 变量控制显示 */}
+          <div className="items-center gap-2"
+               style={{ display: 'var(--color-code-traffic-light-display)' }}>
+            <span className="w-3 h-3 rounded-full"
+                  style={{ backgroundColor: '#ff5f56', boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.1) inset' }} />
+            <span className="w-3 h-3 rounded-full"
+                  style={{ backgroundColor: '#ffbd2e', boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.1) inset' }} />
+            <span className="w-3 h-3 rounded-full"
+                  style={{ backgroundColor: '#27c93f', boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.1) inset' }} />
+          </div>
+          <span className="font-mono text-[13px]">{language || 'code'}</span>
+        </div>
+
+        {/* 右侧：操作按钮 */}
         <div className="flex items-center gap-2">
           {/* HTML 预览按钮 */}
           {isHtmlPreviewable && (
             <button
               onClick={() => setPreviewOpen(true)}
-              className="inline-flex items-center gap-1.5 px-2 py-1 rounded hover:bg-white/10 transition-colors text-blue-400 hover:text-blue-300"
+              className="inline-flex items-center gap-1.5 px-2 py-1 rounded transition-colors hover:bg-white/10"
+              style={{ color: 'var(--color-primary)' }}
               title="预览 HTML"
             >
               <Eye size={14} />
@@ -103,7 +125,8 @@ export function CodeBlock({
           {/* 复制按钮 */}
           <button
             onClick={handleCopy}
-            className="inline-flex items-center gap-1.5 px-2 py-1 rounded hover:bg-white/10 transition-colors"
+            className="inline-flex items-center gap-1.5 px-2 py-1 rounded transition-colors hover:bg-white/10"
+            style={{ color: 'var(--color-code-toolbar-text)' }}
             title="Copy code"
           >
             {copied ? (
@@ -122,14 +145,20 @@ export function CodeBlock({
       </div>
 
       {/* 代码区域 */}
-      <div className="relative overflow-x-auto bg-[#1e1e1e]">
+      <div className="relative overflow-x-auto"
+           style={{ backgroundColor: 'var(--color-code-bg)' }}>
         {showLineNumbers && (
-          <div className="absolute left-0 top-0 bottom-0 w-12 bg-[#1e1e1e] border-r border-gray-700 select-none">
+          <div className="absolute left-0 top-0 bottom-0 w-12 select-none"
+               style={{
+                 backgroundColor: 'var(--color-code-bg)',
+                 borderRight: '1px solid var(--color-code-line-border)'
+               }}>
             <div className="py-4 px-2 text-right">
               {lines.map((_, index) => (
                 <div
                   key={index}
-                  className="text-gray-500 text-sm font-mono leading-6"
+                  className="text-sm font-mono leading-6"
+                  style={{ color: 'var(--color-code-line-number)' }}
                 >
                   {index + 1}
                 </div>
@@ -146,6 +175,7 @@ export function CodeBlock({
         >
           <code
             className={`language-${normalizedLanguage} text-sm leading-6`}
+            style={{ color: 'var(--color-code-text)' }}
             dangerouslySetInnerHTML={{ __html: highlightedCode }}
           />
         </pre>