refactor(代码块): 使用 CSS 变量重构代码块组件样式

- 使用 CSS 变量替代硬编码颜色值
- 添加 Mac 风格红黄绿交通灯按钮装饰
- 优化工具栏布局和间距
- 支持亮色/暗色主题自动切换
- 改进行号显示样式

src/app/globals.css

@@ -62,6 +62,21 @@
 
   /* 字体大小 */
   --font-size-base: 15px;
+
+  /* ========================================
+     代码块颜色 - Claude 风格亮色主题
+     ======================================== */
+  --color-code-bg: #F5F3F0;
+  --color-code-toolbar-bg: #EDEAE6;
+  --color-code-border: #E0DDD8;
+  --color-code-line-number: #A8A29E;
+  --color-code-line-border: #E0DDD8;
+  --color-code-text: #374151;
+  --color-code-toolbar-text: #78716C;
+  --color-code-toolbar-text-hover: #57534E;
+  --color-code-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  /* Mac 红黄绿按钮 - 亮色主题隐藏 */
+  --color-code-traffic-light-display: none;
 }
 
 /* ========================================
@@ -104,6 +119,22 @@
   --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.4);
   --shadow-input: 0 2px 8px rgba(0, 0, 0, 0.2);
   --shadow-input-focus: 0 4px 16px rgba(224, 107, 62, 0.2);
+
+  /* ========================================
+     代码块颜色 - Mac Style 紫灰主题
+     与页面背景 #29252B 协调
+     ======================================== */
+  --color-code-bg: #322D38;
+  --color-code-toolbar-bg: #29252B;
+  --color-code-border: #3A353E;
+  --color-code-line-number: #5A5560;
+  --color-code-line-border: #3A353E;
+  --color-code-text: #D4D4D8;
+  --color-code-toolbar-text: #8B8592;
+  --color-code-toolbar-text-hover: #D4D4D8;
+  --color-code-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15);
+  /* Mac 红黄绿按钮 - 暗色主题显示 */
+  --color-code-traffic-light-display: flex;
 }
 
 @theme inline {
@@ -407,11 +438,12 @@ body {
 }
 
 /* ========================================
-   Prism.js 代码高亮样式 (VS Code Dark+)
+   Prism.js 代码高亮样式
    ======================================== */
+
+/* 基础样式 */
 code[class*="language-"],
 pre[class*="language-"] {
-  color: #d4d4d4;
   text-shadow: none;
   font-family: 'SF Mono', Monaco, 'Courier New', monospace;
   direction: ltr;
@@ -424,66 +456,150 @@ pre[class*="language-"] {
   hyphens: none;
 }
 
-.token.comment,
+/* ========================================
-.token.prolog,
+   亮色主题语法高亮 (Claude Style)
-.token.doctype,
+   ======================================== */
-.token.cdata {
+:root code[class*="language-"],
-  color: #6a9955;
+:root pre[class*="language-"] {
+  color: #374151;
 }
 
-.token.punctuation {
+:root .token.comment,
-  color: #d4d4d4;
+:root .token.prolog,
+:root .token.doctype,
+:root .token.cdata {
+  color: #9CA3AF;
+  font-style: italic;
 }
 
-.token.property,
+:root .token.punctuation {
-.token.tag,
+  color: #6B7280;
-.token.boolean,
-.token.number,
-.token.constant,
-.token.symbol,
-.token.deleted {
-  color: #b5cea8;
 }
 
-.token.selector,
+:root .token.property,
-.token.attr-name,
+:root .token.tag,
-.token.string,
+:root .token.boolean,
-.token.char,
+:root .token.number,
-.token.builtin,
+:root .token.constant,
-.token.inserted {
+:root .token.symbol,
-  color: #ce9178;
+:root .token.deleted {
+  color: #2563EB;
 }
 
-.token.operator,
+:root .token.selector,
-.token.entity,
+:root .token.attr-name,
-.token.url,
+:root .token.string,
-.language-css .token.string,
+:root .token.char,
-.style .token.string {
+:root .token.builtin,
-  color: #d4d4d4;
+:root .token.inserted {
+  color: #059669;
 }
 
-.token.atrule,
+:root .token.operator,
-.token.attr-value,
+:root .token.entity,
-.token.keyword {
+:root .token.url,
-  color: #569cd6;
+:root .language-css .token.string,
+:root .style .token.string {
+  color: #374151;
 }
 
-.token.function,
+:root .token.atrule,
-.token.class-name {
+:root .token.attr-value,
-  color: #dcdcaa;
+:root .token.keyword {
+  color: #D97706;
+  font-weight: 500;
 }
 
-.token.regex,
+:root .token.function,
-.token.important,
+:root .token.class-name {
-.token.variable {
+  color: #7C3AED;
-  color: #d16969;
 }
 
-.token.important,
+:root .token.regex,
-.token.bold {
+:root .token.important,
+:root .token.variable {
+  color: #DC2626;
+}
+
+:root .token.important,
+:root .token.bold {
   font-weight: bold;
 }
 
-.token.italic {
+:root .token.italic {
+  font-style: italic;
+}
+
+/* ========================================
+   暗色主题语法高亮 (Mac Style - 紫灰主题)
+   ======================================== */
+[data-theme="dark"] code[class*="language-"],
+[data-theme="dark"] pre[class*="language-"] {
+  color: #D4D4D8;
+}
+
+[data-theme="dark"] .token.comment,
+[data-theme="dark"] .token.prolog,
+[data-theme="dark"] .token.doctype,
+[data-theme="dark"] .token.cdata {
+  color: #6B6672;
+  font-style: italic;
+}
+
+[data-theme="dark"] .token.punctuation {
+  color: #A8A3AE;
+}
+
+[data-theme="dark"] .token.property,
+[data-theme="dark"] .token.tag,
+[data-theme="dark"] .token.boolean,
+[data-theme="dark"] .token.number,
+[data-theme="dark"] .token.constant,
+[data-theme="dark"] .token.symbol,
+[data-theme="dark"] .token.deleted {
+  color: #E8A87C;
+}
+
+[data-theme="dark"] .token.selector,
+[data-theme="dark"] .token.attr-name,
+[data-theme="dark"] .token.string,
+[data-theme="dark"] .token.char,
+[data-theme="dark"] .token.builtin,
+[data-theme="dark"] .token.inserted {
+  color: #9DD68D;
+}
+
+[data-theme="dark"] .token.operator,
+[data-theme="dark"] .token.entity,
+[data-theme="dark"] .token.url,
+[data-theme="dark"] .language-css .token.string,
+[data-theme="dark"] .style .token.string {
+  color: #7DD3C0;
+}
+
+[data-theme="dark"] .token.atrule,
+[data-theme="dark"] .token.attr-value,
+[data-theme="dark"] .token.keyword {
+  color: #D4A5E8;
+  font-weight: 500;
+}
+
+[data-theme="dark"] .token.function,
+[data-theme="dark"] .token.class-name {
+  color: #7EB8E8;
+}
+
+[data-theme="dark"] .token.regex,
+[data-theme="dark"] .token.important,
+[data-theme="dark"] .token.variable {
+  color: #E88A95;
+}
+
+[data-theme="dark"] .token.important,
+[data-theme="dark"] .token.bold {
+  font-weight: bold;
+}
+
+[data-theme="dark"] .token.italic {
   font-style: italic;
 }

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">
+      <div className="flex items-center justify-between px-4 py-2.5 text-sm"
-        <span className="font-mono">{language || 'code'}</span>
+           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>