style(代码块): 添加代码块 CSS 变量和亮暗主题语法高亮

- 添加代码块相关 CSS 变量（背景色、边框、行号、阴影等）
- 实现亮色主题语法高亮（Claude Style）
- 实现暗色主题语法高亮（Mac Style 紫灰主题）
- 添加 Mac 红黄绿按钮显示控制变量
- 优化 Prism.js 代码高亮样式，支持主题切换

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;
 }