feat(ui): 全面升级终端风格主题和交互组件

重构整个应用的UI风格为终端黑客美学主题，包括：
1. 引入新的主题变量和全局样式
2. 重写侧边栏、高亮框和页面布局组件
3. 添加返回顶部按钮和交互动画效果
4. 优化搜索框和导航按钮的终端风格
5. 更新首页内容展示样式

使用自定义CSS变量实现终端风格的配色方案，增强代码高亮和交互反馈视觉效果

Author: tt-a1i

index.html

@@ -27,15 +27,20 @@
     <meta name="twitter:description" content="深入理解 Qwen CLI 的内部架构与 AI 工具交互模式" />
     <meta name="twitter:image" content="https://tt-a1i.github.io/coding-cli-guide/og.png" />
 
+    <!-- Google Fonts: JetBrains Mono + IBM Plex Sans -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
+
     <!-- Favicon -->
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="apple-touch-icon" href="/favicon.svg" />
 
     <!-- Canonical -->
     <link rel="canonical" href="https://tt-a1i.github.io/coding-cli-guide/" />
 
-    <!-- Theme Color -->
-    <meta name="theme-color" content="#0f172a" />
+    <!-- Theme Color - Terminal Dark -->
+    <meta name="theme-color" content="#0a0a0f" />
 
     <!-- Dev Tools -->
     <script type="module">

src/App.tsx

@@ -232,7 +232,7 @@ function App() {
   };
 
   return (
-    <div className="flex min-h-screen bg-gray-950">
+    <div className="flex h-screen overflow-hidden bg-gray-950">
       {/* Desktop Sidebar */}
       <div className="hidden md:block">
         <Sidebar activeTab={activeTab} onTabChange={(tab) => navigateToTab(tab)} />

src/components/HighlightBox.tsx

@@ -8,13 +8,41 @@ interface HighlightBoxProps {
 }
 
 const variantStyles = {
-  default: 'bg-orange-500/10 border-orange-500',
-  blue: 'bg-cyan-500/10 border-cyan-500',
-  green: 'bg-green-500/10 border-green-500',
-  purple: 'bg-purple-500/10 border-purple-500',
-  red: 'bg-red-500/10 border-red-500',
-  yellow: 'bg-yellow-500/10 border-yellow-500',
-  orange: 'bg-orange-500/10 border-orange-500',
+  default: {
+    container: 'bg-[var(--amber)]/5 border-[var(--amber)]/30 hover:border-[var(--amber)]/50',
+    title: 'text-[var(--amber)]',
+    accent: 'bg-[var(--amber)]',
+  },
+  blue: {
+    container: 'bg-[var(--cyber-blue)]/5 border-[var(--cyber-blue)]/30 hover:border-[var(--cyber-blue)]/50',
+    title: 'text-[var(--cyber-blue)]',
+    accent: 'bg-[var(--cyber-blue)]',
+  },
+  green: {
+    container: 'bg-[var(--terminal-green)]/5 border-[var(--terminal-green)]/30 hover:border-[var(--terminal-green)]/50',
+    title: 'text-[var(--terminal-green)]',
+    accent: 'bg-[var(--terminal-green)]',
+  },
+  purple: {
+    container: 'bg-purple-500/5 border-purple-500/30 hover:border-purple-500/50',
+    title: 'text-purple-400',
+    accent: 'bg-purple-500',
+  },
+  red: {
+    container: 'bg-red-500/5 border-red-500/30 hover:border-red-500/50',
+    title: 'text-red-400',
+    accent: 'bg-red-500',
+  },
+  yellow: {
+    container: 'bg-[var(--amber)]/5 border-[var(--amber)]/30 hover:border-[var(--amber)]/50',
+    title: 'text-[var(--amber)]',
+    accent: 'bg-[var(--amber)]',
+  },
+  orange: {
+    container: 'bg-[var(--amber)]/5 border-[var(--amber)]/30 hover:border-[var(--amber)]/50',
+    title: 'text-[var(--amber)]',
+    accent: 'bg-[var(--amber)]',
+  },
 };
 
 export function HighlightBox({
@@ -26,14 +54,22 @@ export function HighlightBox({
   className = '',
 }: HighlightBoxProps) {
   const style = variant || color || 'default';
+  const styles = variantStyles[style];
+
   return (
     <div
-      className={`rounded-lg border p-4 my-4 ${variantStyles[style]} ${className}`}
+      className={`rounded-lg border p-5 my-4 transition-all duration-200 relative overflow-hidden ${styles.container} ${className}`}
     >
+      {/* Decorative corner accent */}
+      <div className="absolute top-0 left-0 w-8 h-8 pointer-events-none">
+        <div className={`absolute top-0 left-0 w-full h-[1px] ${styles.accent} opacity-40`} />
+        <div className={`absolute top-0 left-0 w-[1px] h-full ${styles.accent} opacity-40`} />
+      </div>
+
       {title && (
-        <div className="font-bold mb-2 flex items-center gap-2">
-          {icon && <span>{icon}</span>}
-          {title}
+        <div className={`font-bold font-mono mb-3 flex items-center gap-2 ${styles.title}`}>
+          {icon && <span className="opacity-80">{icon}</span>}
+          <span>{title}</span>
         </div>
       )}
       {children}

src/components/PageLayout.tsx

@@ -3,6 +3,48 @@ import { flatNavItems } from '../nav';
 import { useOutline } from './OutlineContext';
 import { OutlineProvider } from './OutlineProvider';
 
+function BackToTop() {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const main = document.querySelector('main');
+    if (!main) return;
+
+    const handleScroll = () => {
+      setVisible(main.scrollTop > 400);
+    };
+
+    main.addEventListener('scroll', handleScroll);
+    return () => main.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  const scrollToTop = useCallback(() => {
+    const main = document.querySelector('main');
+    if (main) {
+      main.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+  }, []);
+
+  if (!visible) return null;
+
+  return (
+    <button
+      onClick={scrollToTop}
+      className="fixed bottom-6 right-6 z-50 flex items-center justify-center w-10 h-10 rounded-lg bg-[var(--bg-panel)] border border-[var(--border-subtle)] text-[var(--text-secondary)] hover:border-[var(--terminal-green)] hover:text-[var(--terminal-green)] hover:shadow-[0_0_15px_var(--terminal-green-glow)] transition-all duration-200 group"
+      title="回到顶部"
+    >
+      <svg
+        className="w-5 h-5 transition-transform group-hover:-translate-y-0.5"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+      >
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 10l7-7m0 0l7 7m-7-7v18" />
+      </svg>
+    </button>
+  );
+}
+
 function ShareButtons({ activeSectionId }: { activeSectionId: string | null }) {
   const [copied, setCopied] = useState<'page' | 'section' | null>(null);
 
@@ -42,38 +84,38 @@ function ShareButtons({ activeSectionId }: { activeSectionId: string | null }) {
     <div className="flex items-center gap-2 mb-4">
       <button
         onClick={copyPageLink}
-        className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg bg-gray-900/30 border border-gray-700 text-gray-300 hover:bg-gray-800/40 hover:border-gray-600 hover:text-cyan-300 transition-colors"
+        className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-mono rounded-md bg-[var(--bg-panel)] border border-[var(--border-subtle)] text-[var(--text-secondary)] hover:bg-[var(--bg-elevated)] hover:border-[var(--terminal-green-dim)] hover:text-[var(--terminal-green)] transition-all duration-200"
       >
         {copied === 'page' ? (
           <>
-            <span className="text-green-400">✓</span>
-            <span>已复制</span>
+            <span className="text-[var(--terminal-green)]">✓</span>
+            <span className="text-[var(--terminal-green)]">copied!</span>
           </>
         ) : (
           <>
-            <span>🔗</span>
-            <span>复制本页链接</span>
+            <span className="opacity-60">$</span>
+            <span>cp link</span>
           </>
         )}
       </button>
       <button
         onClick={copySectionLink}
         disabled={!activeSectionId}
-        className={`flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg border transition-colors ${
+        className={`flex items-center gap-1.5 px-3 py-1.5 text-xs font-mono rounded-md border transition-all duration-200 ${
           activeSectionId
-            ? 'bg-gray-900/30 border-gray-700 text-gray-300 hover:bg-gray-800/40 hover:border-gray-600 hover:text-cyan-300'
-            : 'bg-gray-900/10 border-gray-800 text-gray-600 cursor-not-allowed'
+            ? 'bg-[var(--bg-panel)] border-[var(--border-subtle)] text-[var(--text-secondary)] hover:bg-[var(--bg-elevated)] hover:border-[var(--amber-dim)] hover:text-[var(--amber)]'
+            : 'bg-[var(--bg-void)] border-[var(--border-subtle)] text-[var(--text-muted)] cursor-not-allowed opacity-50'
         }`}
       >
         {copied === 'section' ? (
           <>
-            <span className="text-green-400">✓</span>
-            <span>已复制</span>
+            <span className="text-[var(--terminal-green)]">✓</span>
+            <span className="text-[var(--terminal-green)]">copied!</span>
           </>
         ) : (
           <>
-            <span>#</span>
-            <span>复制当前章节链接</span>
+            <span className="opacity-60">#</span>
+            <span>cp section</span>
           </>
         )}
       </button>
@@ -98,26 +140,37 @@ function PageOutline({
   if (items.length === 0) return null;
 
   return (
-    <div className="bg-gray-900/30 border border-gray-700 rounded-xl p-4 mb-6">
-      <div className="flex items-center justify-between gap-3 mb-3">
-        <div className="text-sm font-semibold text-cyan-300">本页目录</div>
-        <div className="text-xs text-gray-500">点击快速跳转</div>
+    <div className="bg-[var(--bg-panel)] border border-[var(--border-subtle)] rounded-lg p-4 mb-6 relative overflow-hidden">
+      {/* Decorative corner accent */}
+      <div className="absolute top-0 left-0 w-16 h-16 opacity-20">
+        <div className="absolute top-0 left-0 w-full h-[1px] bg-gradient-to-r from-[var(--terminal-green)] to-transparent" />
+        <div className="absolute top-0 left-0 w-[1px] h-full bg-gradient-to-b from-[var(--terminal-green)] to-transparent" />
+      </div>
+
+      <div className="flex items-center justify-between gap-3 mb-4">
+        <div className="text-sm font-mono text-[var(--terminal-green)] flex items-center gap-2">
+          <span className="opacity-60">▸</span>
+          <span>目录索引</span>
+        </div>
+        <div className="text-xs text-[var(--text-muted)] font-mono">// 点击跳转</div>
       </div>
       <div className="flex flex-wrap gap-2">
-        {items.map((s) => (
+        {items.map((s, index) => (
           <a
             key={s.id}
             href={`#${s.id}`}
             onClick={(e) => {
               e.preventDefault();
               onSelectSection(s.id);
             }}
-            className={`px-3 py-1.5 rounded-lg text-sm border transition-colors ${
+            className={`px-3 py-1.5 rounded-md text-sm font-mono border transition-all duration-200 ${
               activeSectionId === s.id
-                ? 'bg-cyan-500/10 border-cyan-500/40 text-cyan-200'
-                : 'bg-gray-950/40 border-gray-700 text-gray-200 hover:bg-gray-800/40 hover:border-gray-600'
+                ? 'bg-[var(--terminal-green)]/10 border-[var(--terminal-green)]/40 text-[var(--terminal-green)] shadow-[0_0_10px_var(--terminal-green-glow)]'
+                : 'bg-[var(--bg-void)] border-[var(--border-subtle)] text-[var(--text-secondary)] hover:bg-[var(--bg-elevated)] hover:border-[var(--border-default)] hover:text-[var(--text-primary)]'
             }`}
+            style={{ animationDelay: `${index * 30}ms` }}
           >
+            <span className="opacity-50 mr-1">{String(index + 1).padStart(2, '0')}.</span>
             {s.title}
           </a>
         ))}
@@ -181,36 +234,45 @@ export function PageLayout({
 
   return (
     <OutlineProvider key={activeTab}>
+      <BackToTop />
       <OutlineHeader
         activeSectionId={activeSectionId}
         setActiveSectionId={setActiveSectionId}
         onSelectSection={onSelectSection}
       />
       {children}
 
-      <div className="mt-10 flex items-center justify-between gap-4">
-        <button
-          disabled={!prev}
-          onClick={() => prev && onNavigate(prev.id)}
-          className={`px-4 py-2 rounded-lg text-sm border transition-colors ${
-            prev
-              ? 'bg-gray-900/30 border-gray-700 text-gray-200 hover:bg-gray-800/40 hover:border-gray-600'
-              : 'bg-gray-900/10 border-gray-800 text-gray-600 cursor-not-allowed'
-          }`}
-        >
-          {prev ? `← ${prev.label}` : '← 没有上一页'}
-        </button>
-        <button
-          disabled={!next}
-          onClick={() => next && onNavigate(next.id)}
-          className={`px-4 py-2 rounded-lg text-sm border transition-colors ${
-            next
-              ? 'bg-gray-900/30 border-gray-700 text-gray-200 hover:bg-gray-800/40 hover:border-gray-600'
-              : 'bg-gray-900/10 border-gray-800 text-gray-600 cursor-not-allowed'
-          }`}
-        >
-          {next ? `${next.label} →` : '没有下一页 →'}
-        </button>
+      {/* Navigation Footer */}
+      <div className="mt-12 pt-6 border-t border-[var(--border-subtle)]">
+        <div className="flex items-center justify-between gap-4">
+          <button
+            disabled={!prev}
+            onClick={() => prev && onNavigate(prev.id)}
+            className={`group flex items-center gap-2 px-4 py-2.5 rounded-md text-sm font-mono border transition-all duration-200 ${
+              prev
+                ? 'bg-[var(--bg-panel)] border-[var(--border-subtle)] text-[var(--text-secondary)] hover:bg-[var(--bg-elevated)] hover:border-[var(--cyber-blue-dim)] hover:text-[var(--cyber-blue)]'
+                : 'bg-[var(--bg-void)] border-[var(--border-subtle)] text-[var(--text-muted)] cursor-not-allowed opacity-50'
+            }`}
+          >
+            <span className={`transition-transform duration-200 ${prev ? 'group-hover:-translate-x-1' : ''}`}>←</span>
+            <span className="max-w-[120px] truncate">{prev ? prev.label : 'EOF'}</span>
+          </button>
+          <div className="text-xs text-[var(--text-muted)] font-mono hidden sm:block">
+            // navigate
+          </div>
+          <button
+            disabled={!next}
+            onClick={() => next && onNavigate(next.id)}
+            className={`group flex items-center gap-2 px-4 py-2.5 rounded-md text-sm font-mono border transition-all duration-200 ${
+              next
+                ? 'bg-[var(--bg-panel)] border-[var(--border-subtle)] text-[var(--text-secondary)] hover:bg-[var(--bg-elevated)] hover:border-[var(--terminal-green-dim)] hover:text-[var(--terminal-green)]'
+                : 'bg-[var(--bg-void)] border-[var(--border-subtle)] text-[var(--text-muted)] cursor-not-allowed opacity-50'
+            }`}
+          >
+            <span className="max-w-[120px] truncate">{next ? next.label : 'EOF'}</span>
+            <span className={`transition-transform duration-200 ${next ? 'group-hover:translate-x-1' : ''}`}>→</span>
+          </button>
+        </div>
       </div>
     </OutlineProvider>
   );