feat(docs): add NavGrid/NavCard components and restructure stage pages

- Add NavGrid.vue and NavCard.vue components for better navigation layout - Restructure stage-0 index pages across languages into intro.md with new navigation components - Remove old stage-0 index.md files and update stage-3 pages similarly - Add new dependencies 'claude' and 'codex' to package.json - Improve code formatting in multiple Vue components for better readability - Update documentation content and structure for better user experience
2026-02-01 23:42:12 +08:00
parent a9a5c5c8a7
commit ad95658a11
171 changed files with 16366 additions and 7946 deletions
@@ -72,7 +72,10 @@
          <div class="detail-section">
            <h4>核心特点</h4>
            <ul>
-              <li v-for="feature in getLangDetail(selectedLang).features" :key="feature">
+              <li
+                v-for="feature in getLangDetail(selectedLang).features"
+                :key="feature"
+              >
                {{ feature }}
              </li>
            </ul>
@@ -80,7 +83,10 @@
          <div class="detail-section">
            <h4>典型应用</h4>
            <ul>
-              <li v-for="app in getLangDetail(selectedLang).applications" :key="app">
+              <li
+                v-for="app in getLangDetail(selectedLang).applications"
+                :key="app"
+              >
                {{ app }}
              </li>
            </ul>
@@ -91,7 +97,10 @@
              <div class="pros">
                <strong>优势：</strong>
                <ul>
-                  <li v-for="pro in getLangDetail(selectedLang).pros" :key="pro">
+                  <li
+                    v-for="pro in getLangDetail(selectedLang).pros"
+                    :key="pro"
+                  >
                    {{ pro }}
                  </li>
                </ul>
@@ -99,7 +108,10 @@
              <div class="cons">
                <strong>劣势：</strong>
                <ul>
-                  <li v-for="con in getLangDetail(selectedLang).cons" :key="con">
+                  <li
+                    v-for="con in getLangDetail(selectedLang).cons"
+                    :key="con"
+                  >
                    {{ con }}
                  </li>
                </ul>
@@ -325,7 +337,7 @@ const langDetails = {
      '❌ 版本兼容性问题多'
    ]
  },
-  "C#": {
+  'C#': {
    title: 'C# - Windows 生态的王者',
    features: [
      '微软 Visual Studio 极其强大',
@@ -393,12 +405,7 @@ const langDetails = {
      '浏览器引擎（Chrome V8）',
      'AI 框架底层（PyTorch、TF）'
    ],
-    pros: [
-      '✅ 性能极致',
-      '✅ 底层控制力强',
-      '✅ 游戏开发标准',
-      '✅ 生态成熟'
-    ],
+    pros: ['✅ 性能极致', '✅ 底层控制力强', '✅ 游戏开发标准', '✅ 生态成熟'],
    cons: [
      '❌ 学习曲线极其陡峭',
      '❌ 内存管理复杂（易泄漏）',
@@ -408,12 +415,7 @@ const langDetails = {
  },
  Ruby: {
    title: 'Ruby - 快速开发的典范',
-    features: [
-      'Ruby on Rails 框架',
-      '约定优于配置',
-      '代码优雅',
-      '快速开发'
-    ],
+    features: ['Ruby on Rails 框架', '约定优于配置', '代码优雅', '快速开发'],
    applications: [
      '初创公司（GitHub、Airbnb）',
      '快速原型（MVP、黑客松）',
@@ -30,7 +30,9 @@
              <div class="stat-bar">
                <div
                  class="stat-fill"
-                  :style="{ width: getModelDetail(selectedModel).concurrency + '%' }"
+                  :style="{
+                    width: getModelDetail(selectedModel).concurrency + '%'
+                  }"
                ></div>
              </div>
            </div>
@@ -155,7 +155,16 @@ const tasks = [
  { id: 'micro', name: '微服务' }
 ]

-const languages = ['Python', 'Ruby', 'Go', 'Node.js', 'Java', 'C#', 'Rust', 'C++']
+const languages = [
+  'Python',
+  'Ruby',
+  'Go',
+  'Node.js',
+  'Java',
+  'C#',
+  'Rust',
+  'C++'
+]

 const taskMetrics = {
  rest: {
@@ -164,7 +173,7 @@ const taskMetrics = {
    Go: { lines: 80, time: 5, debug: 1.5 },
    'Node.js': { lines: 60, time: 4.5, debug: 2 },
    Java: { lines: 150, time: 8, debug: 2 },
-    "C#": { lines: 120, time: 7, debug: 2 },
+    'C#': { lines: 120, time: 7, debug: 2 },
    Rust: { lines: 100, time: 10, debug: 3 },
    'C++': { lines: 180, time: 12, debug: 5 },
    linesInsight:
@@ -180,7 +189,7 @@ const taskMetrics = {
    Go: { lines: 300, time: 12, debug: 4 },
    'Node.js': { lines: 250, time: 11, debug: 5 },
    Java: { lines: 500, time: 20, debug: 6 },
-    "C#": { lines: 400, time: 18, debug: 6 },
+    'C#': { lines: 400, time: 18, debug: 6 },
    Rust: { lines: 350, time: 25, debug: 8 },
    'C++': { lines: 600, time: 30, debug: 12 },
    linesInsight:
@@ -196,7 +205,7 @@ const taskMetrics = {
    Go: { lines: 40, time: 2, debug: 0.5 },
    'Node.js': { lines: 25, time: 1.5, debug: 0.5 },
    Java: { lines: 80, time: 4, debug: 1 },
-    "C#": { lines: 70, time: 3.5, debug: 1 },
+    'C#': { lines: 70, time: 3.5, debug: 1 },
    Rust: { lines: 50, time: 4, debug: 1 },
    'C++': { lines: 100, time: 5, debug: 2 },
    linesInsight:
@@ -212,7 +221,7 @@ const taskMetrics = {
    Go: { lines: 120, time: 7, debug: 2 },
    'Node.js': { lines: 110, time: 6.5, debug: 3 },
    Java: { lines: 250, time: 15, debug: 4 },
-    "C#": { lines: 200, time: 13, debug: 4 },
+    'C#': { lines: 200, time: 13, debug: 4 },
    Rust: { lines: 140, time: 18, debug: 5 },
    'C++': { lines: 300, time: 22, debug: 8 },
    linesInsight:
@@ -238,7 +247,13 @@ const sortedLanguages = computed(() => {
 })

 const getBarWidth = (value) => {
-  const max = Math.max(...Object.values(currentMetrics.value).flatMap((v) => [v.lines, v.time * 20, v.debug * 20]))
+  const max = Math.max(
+    ...Object.values(currentMetrics.value).flatMap((v) => [
+      v.lines,
+      v.time * 20,
+      v.debug * 20
+    ])
+  )
  return (value / max) * 100
 }

@@ -248,9 +263,15 @@ const getTaskDetail = (taskId) => {

 const getRadarPosition = (langName) => {
  const metrics = currentMetrics.value[langName]
-  const avgLines = Object.values(currentMetrics.value).reduce((sum, v) => sum + v.lines, 0) / languages.length
-  const avgTime = Object.values(currentMetrics.value).reduce((sum, v) => sum + v.time, 0) / languages.length
-  const avgDebug = Object.values(currentMetrics.value).reduce((sum, v) => sum + v.debug, 0) / languages.length
+  const avgLines =
+    Object.values(currentMetrics.value).reduce((sum, v) => sum + v.lines, 0) /
+    languages.length
+  const avgTime =
+    Object.values(currentMetrics.value).reduce((sum, v) => sum + v.time, 0) /
+    languages.length
+  const avgDebug =
+    Object.values(currentMetrics.value).reduce((sum, v) => sum + v.debug, 0) /
+    languages.length

  // Normalize metrics (lower is better, so we invert)
  const linesScore = 1 - metrics.lines / 300 // Max lines ~300
@@ -41,7 +41,9 @@
                </div>
                <div class="stat">
                  <span class="stat-label">周下载量</span>
-                  <span class="stat-value">{{ formatDownloads(pkg.downloads) }}</span>
+                  <span class="stat-value">{{
+                    formatDownloads(pkg.downloads)
+                  }}</span>
                </div>
              </div>
              <div class="pkg-command">
@@ -61,7 +63,10 @@
        </div>

        <!-- Web Frameworks -->
-        <div v-else-if="selectedTab === 'frameworks'" class="frameworks-section">
+        <div
+          v-else-if="selectedTab === 'frameworks'"
+          class="frameworks-section"
+        >
          <div class="frameworks-table-wrapper">
            <table class="frameworks-table">
              <thead>
@@ -134,7 +139,7 @@
                  <div class="bar-container">
                    <div
                      class="bar-fill"
-                      :style="{ width: (lang.stars / 100) + '%' }"
+                      :style="{ width: lang.stars / 100 + '%' }"
                    >
                      <span class="bar-value">{{ lang.stars }}M</span>
                    </div>
@@ -158,7 +163,7 @@
                  <div class="bar-container">
                    <div
                      class="bar-fill questions"
-                      :style="{ width: (lang.questions / 30) + '%' }"
+                      :style="{ width: lang.questions / 30 + '%' }"
                    >
                      <span class="bar-value">{{ lang.questions }}M</span>
                    </div>
@@ -173,15 +178,22 @@
            <div class="insight-grid">
              <div class="insight-card">
                <h6>最活跃</h6>
-                <p>JavaScript/Node.js 社区最活跃，NPM 每周新增数万个包，问题响应速度最快。</p>
+                <p>
+                  JavaScript/Node.js 社区最活跃，NPM
+                  每周新增数万个包，问题响应速度最快。
+                </p>
              </div>
              <div class="insight-card">
                <h6>最专业</h6>
-                <p>Java 社区最专业，企业级问题讨论深入，Stack Overflow 质量最高。</p>
+                <p>
+                  Java 社区最专业，企业级问题讨论深入，Stack Overflow 质量最高。
+                </p>
              </div>
              <div class="insight-card">
                <h6>增长最快</h6>
-                <p>Rust 和 Go 社区增长最快，新一代开发者涌入，问题讨论质量高。</p>
+                <p>
+                  Rust 和 Go 社区增长最快，新一代开发者涌入，问题讨论质量高。
+                </p>
              </div>
              <div class="insight-card">
                <h6>最友好</h6>
@@ -221,7 +233,9 @@
                <div class="resource-section">
                  <h6>推荐书籍</h6>
                  <ul>
-                    <li v-for="book in resource.books" :key="book">{{ book }}</li>
+                    <li v-for="book in resource.books" :key="book">
+                      {{ book }}
+                    </li>
                  </ul>
                </div>
                <div class="resource-section">
@@ -460,7 +474,7 @@ const learningResources = [
    icon: '💚',
    docQuality: 4,
    docComment: 'MDN 文档权威，但碎片化',
-    books: ['Eloquent JavaScript', 'You Don\'t Know JS'],
+    books: ['Eloquent JavaScript', "You Don't Know JS"],
    courses: ['freeCodeCamp', 'Udemy', 'Codecademy'],
    learningCurve: 75,
    curveLabel: '中等'
@@ -167,7 +167,12 @@ const timeConstraints = [
 ]

 const recommendation = computed(() => {
-  if (!answers.value.projectType || !answers.value.performance || !answers.value.team || !answers.value.time) {
+  if (
+    !answers.value.projectType ||
+    !answers.value.performance ||
+    !answers.value.team ||
+    !answers.value.time
+  ) {
    return null
  }

@@ -178,7 +183,8 @@ const recommendation = computed(() => {
    return {
      language: 'Python',
      icon: '🐍',
-      reason: 'AI/ML 领域的绝对统治地位，生态无与伦比（NumPy、PyTorch、TensorFlow）。虽然性能不如 C++/Rust，但 95% 的 AI 项目都在用 Python。',
+      reason:
+        'AI/ML 领域的绝对统治地位，生态无与伦比（NumPy、PyTorch、TensorFlow）。虽然性能不如 C++/Rust，但 95% 的 AI 项目都在用 Python。',
      alternatives: ['C++ (模型部署)', 'Julia (科学计算)']
    }
  }
@@ -187,7 +193,8 @@ const recommendation = computed(() => {
    return {
      language: 'C++',
      icon: '⚡',
-      reason: '游戏开发的行业标准（Unreal Engine）。极致性能，底层控制力强。如果使用 Unity 引擎，则 C# 是首选。',
+      reason:
+        '游戏开发的行业标准（Unreal Engine）。极致性能，底层控制力强。如果使用 Unity 引擎，则 C# 是首选。',
      alternatives: ['C# (Unity)', 'Rust (独立游戏)']
    }
  }
@@ -197,14 +204,16 @@ const recommendation = computed(() => {
      return {
        language: 'Rust',
        icon: '🦀',
-        reason: '内存安全 + 极致性能，现代化系统语言。虽然学习曲线陡峭，但编译时保证无内存泄漏，适合长期维护的基础设施。',
+        reason:
+          '内存安全 + 极致性能，现代化系统语言。虽然学习曲线陡峭，但编译时保证无内存泄漏，适合长期维护的基础设施。',
        alternatives: ['C++ (传统选择)', 'Go (云原生)']
      }
    }
    return {
      language: 'Go',
      icon: '🐹',
-      reason: '云原生时代的宠儿（Docker、K8s 都是 Go 写的）。简洁语法 + 原生并发 + 快速编译，非常适合系统编程和 DevOps 工具。',
+      reason:
+        '云原生时代的宠儿（Docker、K8s 都是 Go 写的）。简洁语法 + 原生并发 + 快速编译，非常适合系统编程和 DevOps 工具。',
      alternatives: ['Rust (更安全)', 'C++ (更成熟)']
    }
  }
@@ -214,14 +223,16 @@ const recommendation = computed(() => {
      return {
        language: 'Go',
        icon: '🐹',
-        reason: '云原生的首选语言。Goroutine 轻量级并发可轻松处理百万级请求，编译后的单一可执行文件部署极其简单。',
+        reason:
+          '云原生的首选语言。Goroutine 轻量级并发可轻松处理百万级请求，编译后的单一可执行文件部署极其简单。',
        alternatives: ['Java (Spring Cloud)', 'Rust (极致性能)']
      }
    }
    return {
      language: 'Node.js',
      icon: '💚',
-      reason: '前后端统一，减少语言切换成本。NPM 生态丰富，适合 I/O 密集型的微服务。',
+      reason:
+        '前后端统一，减少语言切换成本。NPM 生态丰富，适合 I/O 密集型的微服务。',
      alternatives: ['Go (更高性能)', 'Python (快速开发)']
    }
  }
@@ -230,7 +241,8 @@ const recommendation = computed(() => {
    return {
      language: 'Node.js',
      icon: '💚',
-      reason: '前端团队零学习成本，TypeScript 提供类型安全。全栈开发减少沟通成本，适合快速迭代和 MVP 开发。',
+      reason:
+        '前端团队零学习成本，TypeScript 提供类型安全。全栈开发减少沟通成本，适合快速迭代和 MVP 开发。',
      alternatives: ['Go (后端性能优化)', 'TypeScript (类型安全)']
    }
  }
@@ -239,7 +251,8 @@ const recommendation = computed(() => {
    return {
      language: 'Python',
      icon: '🐍',
-      reason: '利用团队现有技能，快速开发。Django/FastAPI 生态成熟，适合数据驱动的 Web 应用。',
+      reason:
+        '利用团队现有技能，快速开发。Django/FastAPI 生态成熟，适合数据驱动的 Web 应用。',
      alternatives: ['Go (性能提升)', 'Node.js (全栈)']
    }
  }
@@ -248,7 +261,8 @@ const recommendation = computed(() => {
    return {
      language: 'Java',
      icon: '☕',
-      reason: '企业级开发的最佳选择。Spring Boot 生态极其成熟，团队熟悉度高，维护成本最低。',
+      reason:
+        '企业级开发的最佳选择。Spring Boot 生态极其成熟，团队熟悉度高，维护成本最低。',
      alternatives: ['Go (云原生)', 'Kotlin (更现代)']
    }
  }
@@ -258,7 +272,8 @@ const recommendation = computed(() => {
      return {
        language: 'Python',
        icon: '🐍',
-        reason: '开发速度最快的语言。FastAPI/Django 让你在几天内就能搭建起完整的 Web 应用，适合快速验证想法和 MVP。',
+        reason:
+          '开发速度最快的语言。FastAPI/Django 让你在几天内就能搭建起完整的 Web 应用，适合快速验证想法和 MVP。',
        alternatives: ['Ruby (Rails)', 'Node.js (全栈)']
      }
    }
@@ -269,7 +284,8 @@ const recommendation = computed(() => {
    return {
      language: 'Go',
      icon: '🐹',
-      reason: '高性能 + 简洁语法 + 快速开发的最佳平衡点。Goroutine 并发模型让处理高并发变得简单，而不会像 Java 那么复杂。',
+      reason:
+        '高性能 + 简洁语法 + 快速开发的最佳平衡点。Goroutine 并发模型让处理高并发变得简单，而不会像 Java 那么复杂。',
      alternatives: ['Rust (更安全)', 'C++ (更极致)']
    }
  }
@@ -278,7 +294,8 @@ const recommendation = computed(() => {
    return {
      language: 'Go',
      icon: '🐹',
-      reason: '云原生时代的高性能语言。相比 Java 更简洁，相比 Node.js 性能更好，相比 C++ 更容易维护。',
+      reason:
+        '云原生时代的高性能语言。相比 Java 更简洁，相比 Node.js 性能更好，相比 C++ 更容易维护。',
      alternatives: ['Java (更成熟)', 'Node.js (更灵活)']
    }
  }
@@ -287,7 +304,8 @@ const recommendation = computed(() => {
  return {
    language: 'Node.js',
    icon: '💚',
-    reason: '前后端统一，生态庞大，适合大多数 Web 应用和 API 服务。NPM 拥有世界最大的包仓库，几乎任何功能都能找到现成的库。',
+    reason:
+      '前后端统一，生态庞大，适合大多数 Web 应用和 API 服务。NPM 拥有世界最大的包仓库，几乎任何功能都能找到现成的库。',
    alternatives: ['Go (更高性能)', 'Python (更简单)']
  }
 })
@@ -111,10 +111,12 @@ const benchmarkData = {
 }

 const explanations = {
-  hello: '简单的 Hello World HTTP 响应测试。C++ 和 Rust 在这个测试中展现出接近硬件的性能优势。Go 和 Node.js 表现也很优秀，因为它们的 HTTP 栈经过高度优化。Python 和 Ruby 由于解释器开销，性能相对较低。',
+  hello:
+    '简单的 Hello World HTTP 响应测试。C++ 和 Rust 在这个测试中展现出接近硬件的性能优势。Go 和 Node.js 表现也很优秀，因为它们的 HTTP 栈经过高度优化。Python 和 Ruby 由于解释器开销，性能相对较低。',
  json: 'JSON 序列化/反序列化测试。这个测试考验语言的 JSON 处理能力。C++ 和 Rust 依然领先，但 Node.js 的表现也不错（V8 引擎优化）。Python 的标准库 json 模块性能尚可，但比编译型语言慢很多。',
  db: '模拟数据库查询（连接池 + 查询）。这个测试更接近真实应用。性能差距缩小了，因为瓶颈主要在数据库 I/O 而非语言本身。但依然能看到编译型语言（C++、Rust、Go）的优势。',
-  compute: 'CPU 密集型计算（斐波那契数列）。这个测试充分暴露了 Node.js 的短板：单线程 + V8 编译优化不如静态语言。Python 和 Ruby 表现最差，因为它们是解释型语言，且 GIL 限制了多线程性能。C++ 和 Rust 几乎是唯一选择。'
+  compute:
+    'CPU 密集型计算（斐波那契数列）。这个测试充分暴露了 Node.js 的短板：单线程 + V8 编译优化不如静态语言。Python 和 Ruby 表现最差，因为它们是解释型语言，且 GIL 限制了多线程性能。C++ 和 Rust 几乎是唯一选择。'
 }

 const currentResults = ref([])
@@ -38,7 +38,9 @@
          </div>
          <div class="stat-item">
            <span class="stat-label">字符数：</span>
-            <span class="stat-value">{{ getCharCount(selectedLang) }} 字符</span>
+            <span class="stat-value"
+              >{{ getCharCount(selectedLang) }} 字符</span
+            >
          </div>
          <div class="stat-item">
            <span class="stat-label">复杂度：</span>
@@ -129,7 +131,7 @@ func main() {
    filename: 'HelloWorld.java',
    complexity: '冗长'
  },
-  "C#": {
+  'C#': {
    code: `using System;

 class Program {
@@ -160,14 +162,17 @@ int main() {
 }

 const analyses = {
-  Python: 'Python 的语法极其简洁，只有一行代码。这也是为什么它被称为"伪代码语言"——读起来就像英语一样自然。没有任何样板代码，直接表达意图。',
+  Python:
+    'Python 的语法极其简洁，只有一行代码。这也是为什么它被称为"伪代码语言"——读起来就像英语一样自然。没有任何样板代码，直接表达意图。',
  Ruby: 'Ruby 受 Perl 影响，语法非常优雅。puts 是 "put string" 的缩写，字符串不需要括号（虽然可以加）。Ruby 哲学是"程序员快乐至上"。',
  Go: 'Go 的语法虽然比 Python 冗长，但非常清晰。package main、import、func main() 都是必要的显式声明，这让代码更容易理解和维护。',
-  'Node.js': 'Node.js 使用 JavaScript，语法简单直接。console.log() 是浏览器和 Node.js 通用的输出方式。前端开发者零学习成本。',
+  'Node.js':
+    'Node.js 使用 JavaScript，语法简单直接。console.log() 是浏览器和 Node.js 通用的输出方式。前端开发者零学习成本。',
  Java: 'Java 是典型的"仪式感"语言。class、public static void main、String[] args 都是必须的样板代码。虽然冗长，但结构清晰，适合大型项目。',
  'C#': 'C# 和 Java 非常相似，同样需要 class 和 Main 方法。using System 类似 Java 的 import，但更现代一些。.NET Core 后跨平台能力大幅提升。',
  Rust: 'Rust 的 fn main() 和 println! 宏看起来简洁，但 println! 后面的 ! 表示这是一个宏（不是函数）。Rust 的简洁来自于零成本抽象的设计哲学。',
-  'C++': 'C++ 需要 #include 头文件，std::cout 使用流操作符 <<，return 0 表示程序成功退出。虽然比 C 语言简洁（printf），但依然保留了很多底层细节。'
+  'C++':
+    'C++ 需要 #include 头文件，std::cout 使用流操作符 <<，return 0 表示程序成功退出。虽然比 C 语言简洁（printf），但依然保留了很多底层细节。'
 }

 const getCode = (lang) => {