From c7e1a3429d36cff800f95d08c9d18d1c50ac0043 Mon Sep 17 00:00:00 2001
From: Wangnov <w15365132161@gmail.com>
Date: Mon, 8 Sep 2025 17:50:17 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84=E6=95=99=E7=A8=8B?=
 =?UTF-8?q?=E7=B3=BB=E7=BB=9F=E5=9B=BD=E9=99=85=E5=8C=96=E6=9E=B6=E6=9E=84?=
 =?UTF-8?q?=E5=B9=B6=E5=AE=8C=E6=88=90=E8=8B=B1=E6=96=87=E6=95=99=E7=A8=8B?=
 =?UTF-8?q?=E7=BF=BB=E8=AF=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 创建分离式多语言教程组件架构
  - TutorialView-zh-cn.vue (简体中文教程)
  - TutorialView-zh-tw.vue (繁体中文教程，统一台湾语言习惯)
  - TutorialView-en.vue (英文教程，全面翻译用户界面和技术文档)

- 重构教程路由系统
  - 新的TutorialView.vue作为国际化代理组件
  - 根据用户语言设置动态选择合适的教程组件
  - 保持/tutorial路径可访问性，提升用户体验

- 完成英文教程完整翻译
  - Windows/macOS/Linux安装教程全英文化
  - 环境变量配置说明英文化
  - 故障排除章节英文化
  - JavaScript注释和用户界面文本英文化

- 优化国际化架构
  - ApiStatsView使用新的分离式教程组件
  - 统一的语言选择逻辑和组件复用
  - 更清晰的代码组织和维护性
---
 web/admin-spa/src/views/ApiStatsView.vue      |    6 +-
 web/admin-spa/src/views/TutorialView.vue      | 1698 +----------------
 .../src/views/tutorials/TutorialView-en.vue   | 1690 ++++++++++++++++
 .../views/tutorials/TutorialView-zh-cn.vue    | 1690 ++++++++++++++++
 .../views/tutorials/TutorialView-zh-tw.vue    | 1690 ++++++++++++++++
 5 files changed, 5089 insertions(+), 1685 deletions(-)
 create mode 100644 web/admin-spa/src/views/tutorials/TutorialView-en.vue
 create mode 100644 web/admin-spa/src/views/tutorials/TutorialView-zh-cn.vue
 create mode 100644 web/admin-spa/src/views/tutorials/TutorialView-zh-tw.vue

diff --git a/web/admin-spa/src/views/ApiStatsView.vue b/web/admin-spa/src/views/ApiStatsView.vue
index 104dd3a0..d96b3c50 100644
--- a/web/admin-spa/src/views/ApiStatsView.vue
+++ b/web/admin-spa/src/views/ApiStatsView.vue
@@ -168,9 +168,9 @@ import TokenDistribution from '@/components/apistats/TokenDistribution.vue'
 import LimitConfig from '@/components/apistats/LimitConfig.vue'
 import AggregatedStatsCard from '@/components/apistats/AggregatedStatsCard.vue'
 import ModelUsageStats from '@/components/apistats/ModelUsageStats.vue'
-import TutorialViewZhCn from './TutorialView.vue'
-import TutorialViewZhTw from './TutorialView.vue'
-import TutorialViewEn from './TutorialView.vue'
+import TutorialViewZhCn from './tutorials/TutorialView-zh-cn.vue'
+import TutorialViewZhTw from './tutorials/TutorialView-zh-tw.vue'
+import TutorialViewEn from './tutorials/TutorialView-en.vue'
 
 const route = useRoute()
 const { t } = useI18n()
diff --git a/web/admin-spa/src/views/TutorialView.vue b/web/admin-spa/src/views/TutorialView.vue
index ac938825..1401b520 100644
--- a/web/admin-spa/src/views/TutorialView.vue
+++ b/web/admin-spa/src/views/TutorialView.vue
@@ -1,1690 +1,24 @@
 <template>
-  <div class="card p-3 sm:p-6">
-    <div class="mb-4 sm:mb-8">
-      <h3
-        class="mb-3 flex items-center text-xl font-bold text-gray-900 dark:text-gray-100 sm:mb-4 sm:text-2xl"
-      >
-        <i class="fas fa-graduation-cap mr-2 text-blue-600 sm:mr-3" />
-        Claude Code 使用教程
-      </h3>
-      <p class="text-sm text-gray-600 dark:text-gray-400 sm:text-lg">
-        跟着这个教程，你可以轻松在自己的电脑上安装并使用 Claude Code。
-      </p>
-    </div>
-
-    <!-- 系统选择标签 -->
-    <div class="mb-4 sm:mb-8">
-      <div class="flex flex-wrap gap-1 rounded-xl bg-gray-100 p-1 dark:bg-gray-700 sm:gap-2 sm:p-2">
-        <button
-          v-for="system in tutorialSystems"
-          :key="system.key"
-          :class="[
-            'flex flex-1 items-center justify-center gap-1 rounded-lg px-3 py-2 text-xs font-semibold transition-all duration-300 sm:gap-2 sm:px-6 sm:py-3 sm:text-sm',
-            activeTutorialSystem === system.key
-              ? 'bg-white text-blue-600 shadow-sm dark:bg-gray-800'
-              : 'text-gray-600 hover:bg-white/50 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200'
-          ]"
-          @click="activeTutorialSystem = system.key"
-        >
-          <i :class="system.icon" />
-          {{ system.name }}
-        </button>
-      </div>
-    </div>
-
-    <!-- Windows 教程 -->
-    <div v-if="activeTutorialSystem === 'windows'" class="tutorial-content">
-      <!-- 第一步：安装 Node.js -->
-      <div class="mb-4 sm:mb-10 sm:mb-6">
-        <h4
-          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
-        >
-          <span
-            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-blue-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
-            >1</span
-          >
-          安装 Node.js 环境
-        </h4>
-        <p class="mb-4 text-sm text-gray-600 dark:text-gray-400 sm:mb-4 sm:mb-6 sm:text-base">
-          Claude Code 需要 Node.js 环境才能运行。
-        </p>
-
-        <div
-          class="mb-4 rounded-xl border border-blue-100 bg-gradient-to-r from-blue-50 to-indigo-50 p-4 sm:mb-4 sm:mb-6 sm:p-6"
-        >
-          <h5
-            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
-          >
-            <i class="fab fa-windows mr-2 text-blue-600" />
-            Windows 安装方法
-          </h5>
-          <div class="mb-3 sm:mb-4">
-            <p class="mb-2 text-sm text-gray-700 dark:text-gray-600 sm:mb-3 sm:text-base">
-              方法一：官网下载（推荐）
-            </p>
-            <ol
-              class="ml-2 list-inside list-decimal space-y-1 text-xs text-gray-600 dark:text-gray-600 sm:ml-4 sm:space-y-2 sm:text-sm"
-            >
-              <li>
-                打开浏览器访问
-                <code
-                  class="rounded bg-gray-100 px-1 py-1 text-xs dark:bg-gray-700 sm:px-2 sm:text-sm"
-                  >https://nodejs.org/</code
-                >
-              </li>
-              <li>点击 "LTS" 版本进行下载（推荐长期支持版本）</li>
-              <li>
-                下载完成后双击
-                <code
-                  class="rounded bg-gray-100 px-1 py-1 text-xs dark:bg-gray-700 sm:px-2 sm:text-sm"
-                  >.msi</code
-                >
-                文件
-              </li>
-              <li>按照安装向导完成安装，保持默认设置即可</li>
-            </ol>
-          </div>
-          <div class="mb-3 sm:mb-4">
-            <p class="mb-2 text-sm text-gray-700 dark:text-gray-600 sm:mb-3 sm:text-base">
-              方法二：使用包管理器
-            </p>
-            <p class="mb-2 text-xs text-gray-600 dark:text-gray-400 sm:text-sm">
-              如果你安装了 Chocolatey 或 Scoop，可以使用命令行安装：
-            </p>
-            <div
-              class="overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
-            >
-              <div class="mb-2"># 使用 Chocolatey</div>
-              <div class="whitespace-nowrap text-gray-300">choco install nodejs</div>
-              <div class="mb-2 mt-3"># 或使用 Scoop</div>
-              <div class="whitespace-nowrap text-gray-300">scoop install nodejs</div>
-            </div>
-          </div>
-          <div class="rounded-lg border border-blue-200 bg-blue-50 p-3 sm:p-4">
-            <h6 class="mb-2 text-sm font-medium text-blue-800 sm:text-base">Windows 注意事项</h6>
-            <ul class="space-y-1 text-xs text-blue-700 sm:text-sm sm:text-xs">
-              <li>• 建议使用 PowerShell 而不是 CMD</li>
-              <li>• 如果遇到权限问题，尝试以管理员身份运行</li>
-              <li>• 某些杀毒软件可能会误报，需要添加白名单</li>
-            </ul>
-          </div>
-        </div>
-
-        <!-- 验证安装 -->
-        <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
-          <h6 class="mb-2 text-sm font-medium text-green-800 sm:text-base">验证安装是否成功</h6>
-          <p class="mb-2 text-xs text-green-700 sm:mb-3 sm:text-sm">
-            安装完成后，打开 PowerShell 或 CMD，输入以下命令：
-          </p>
-          <div
-            class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
-          >
-            <div class="whitespace-nowrap text-gray-300">node --version</div>
-            <div class="whitespace-nowrap text-gray-300">npm --version</div>
-          </div>
-          <p class="mt-2 text-xs text-green-700 sm:text-sm">如果显示版本号，说明安装成功了！</p>
-        </div>
-      </div>
-
-      <!-- 第二步：安装 Claude Code -->
-      <div class="mb-4 sm:mb-10 sm:mb-6">
-        <h4
-          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
-        >
-          <span
-            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-green-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
-            >2</span
-          >
-          安装 Claude Code
-        </h4>
-
-        <div
-          class="mb-4 rounded-xl border border-green-100 bg-gradient-to-r from-green-50 to-emerald-50 p-4 sm:mb-6 sm:p-6"
-        >
-          <h5
-            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
-          >
-            <i class="fas fa-download mr-2 text-green-600" />
-            安装 Claude Code
-          </h5>
-          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
-            打开 PowerShell 或 CMD，运行以下命令：
-          </p>
-          <div
-            class="mb-4 overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
-          >
-            <div class="mb-2"># 全局安装 Claude Code</div>
-            <div class="whitespace-nowrap text-gray-300">
-              npm install -g @anthropic-ai/claude-code
-            </div>
-          </div>
-          <p class="text-sm text-gray-600 dark:text-gray-400">
-            这个命令会从 npm 官方仓库下载并安装最新版本的 Claude Code。
-          </p>
-
-          <div class="mt-4 rounded-lg border border-blue-200 bg-blue-50 p-3 sm:p-4">
-            <h6 class="mb-2 text-sm font-medium text-blue-800 sm:text-base">提示</h6>
-            <ul class="space-y-1 text-xs text-blue-700 sm:text-sm">
-              <li>• 建议使用 PowerShell 而不是 CMD，功能更强大</li>
-              <li>• 如果遇到权限问题，以管理员身份运行 PowerShell</li>
-            </ul>
-          </div>
-        </div>
-
-        <!-- 验证安装 -->
-        <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
-          <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">验证 Claude Code 安装</h6>
-          <p class="mb-3 text-sm text-green-700">安装完成后，输入以下命令检查是否安装成功：</p>
-          <div
-            class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
-          >
-            <div class="whitespace-nowrap text-gray-300">claude --version</div>
-          </div>
-          <p class="mt-2 text-sm text-green-700">
-            如果显示版本号，恭喜你！Claude Code 已经成功安装了。
-          </p>
-        </div>
-      </div>
-
-      <!-- 第三步：设置环境变量 -->
-      <div class="mb-6 sm:mb-10">
-        <h4
-          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
-        >
-          <span
-            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-purple-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
-            >3</span
-          >
-          设置环境变量
-        </h4>
-
-        <div
-          class="mb-4 rounded-xl border border-purple-100 bg-gradient-to-r from-purple-50 to-pink-50 p-4 sm:mb-6 sm:p-6"
-        >
-          <h5
-            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
-          >
-            <i class="fas fa-cog mr-2 text-purple-600" />
-            配置 Claude Code 环境变量
-          </h5>
-          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
-            为了让 Claude Code 连接到你的中转服务，需要设置两个环境变量：
-          </p>
-
-          <div class="space-y-4">
-            <div
-              class="rounded-lg border border-purple-200 bg-white p-3 dark:border-purple-700 dark:bg-gray-800 sm:p-4"
-            >
-              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
-                方法一：PowerShell 临时设置（当前会话）
-              </h6>
-              <p class="mb-3 text-sm text-gray-600">在 PowerShell 中运行以下命令：</p>
-              <div
-                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
-              >
-                <div class="whitespace-nowrap text-gray-300">
-                  $env:ANTHROPIC_BASE_URL = "{{ currentBaseUrl }}"
-                </div>
-                <div class="whitespace-nowrap text-gray-300">
-                  $env:ANTHROPIC_AUTH_TOKEN = "你的API密钥"
-                </div>
-              </div>
-              <p class="mt-2 text-xs text-yellow-700">
-                💡 记得将 "你的API密钥" 替换为在上方 "API Keys" 标签页中创建的实际密钥。
-              </p>
-            </div>
-
-            <div
-              class="rounded-lg border border-purple-200 bg-white p-3 dark:border-purple-700 dark:bg-gray-800 sm:p-4"
-            >
-              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
-                方法二：PowerShell 永久设置（用户级）
-              </h6>
-              <p class="mb-3 text-sm text-gray-600">
-                在 PowerShell 中运行以下命令设置用户级环境变量：
-              </p>
-              <div
-                class="mb-3 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
-              >
-                <div class="mb-2"># 设置用户级环境变量（永久生效）</div>
-                <div class="whitespace-nowrap text-gray-300">
-                  [System.Environment]::SetEnvironmentVariable("ANTHROPIC_BASE_URL", "{{
-                    currentBaseUrl
-                  }}", [System.EnvironmentVariableTarget]::User)
-                </div>
-                <div class="whitespace-nowrap text-gray-300">
-                  [System.Environment]::SetEnvironmentVariable("ANTHROPIC_AUTH_TOKEN",
-                  "你的API密钥", [System.EnvironmentVariableTarget]::User)
-                </div>
-              </div>
-              <p class="mb-3 text-sm text-gray-600">查看已设置的环境变量：</p>
-              <div
-                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
-              >
-                <div class="mb-2"># 查看用户级环境变量</div>
-                <div class="whitespace-nowrap text-gray-300">
-                  [System.Environment]::GetEnvironmentVariable("ANTHROPIC_BASE_URL",
-                  [System.EnvironmentVariableTarget]::User)
-                </div>
-                <div class="whitespace-nowrap text-gray-300">
-                  [System.Environment]::GetEnvironmentVariable("ANTHROPIC_AUTH_TOKEN",
-                  [System.EnvironmentVariableTarget]::User)
-                </div>
-              </div>
-              <p class="mt-2 text-xs text-blue-700">
-                💡 设置后需要重新打开 PowerShell 窗口才能生效。
-              </p>
-            </div>
-          </div>
-        </div>
-
-        <!-- 验证环境变量设置 -->
-        <div class="mt-6 rounded-lg border border-blue-200 bg-blue-50 p-3 sm:p-4">
-          <h6 class="mb-2 font-medium text-blue-800 dark:text-blue-300">验证环境变量设置</h6>
-          <p class="mb-3 text-sm text-blue-700">
-            设置完环境变量后，可以通过以下命令验证是否设置成功：
-          </p>
-
-          <div class="space-y-4">
-            <div>
-              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
-                在 PowerShell 中验证：
-              </h6>
-              <div
-                class="space-y-1 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
-              >
-                <div class="whitespace-nowrap text-gray-300">echo $env:ANTHROPIC_BASE_URL</div>
-                <div class="whitespace-nowrap text-gray-300">echo $env:ANTHROPIC_AUTH_TOKEN</div>
-              </div>
-            </div>
-
-            <div>
-              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
-                在 CMD 中验证：
-              </h6>
-              <div
-                class="space-y-1 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
-              >
-                <div class="whitespace-nowrap text-gray-300">echo %ANTHROPIC_BASE_URL%</div>
-                <div class="whitespace-nowrap text-gray-300">echo %ANTHROPIC_AUTH_TOKEN%</div>
-              </div>
-            </div>
-          </div>
-
-          <div class="mt-3 space-y-2">
-            <p class="text-sm text-blue-700">
-              <strong>预期输出示例：</strong>
-            </p>
-            <div class="rounded bg-gray-100 p-2 font-mono text-sm dark:bg-gray-700">
-              <div>{{ currentBaseUrl }}</div>
-              <div>cr_xxxxxxxxxxxxxxxxxx</div>
-            </div>
-            <p class="text-xs text-blue-700">
-              💡 如果输出为空或显示变量名本身，说明环境变量设置失败，请重新设置。
-            </p>
-          </div>
-        </div>
-
-        <!-- Gemini CLI 环境变量设置 -->
-        <div class="mt-8">
-          <h5
-            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
-          >
-            <i class="fas fa-robot mr-2 text-green-600" />
-            配置 Gemini CLI 环境变量
-          </h5>
-          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
-            如果你使用 Gemini CLI，需要设置以下环境变量：
-          </p>
-
-          <div class="space-y-4">
-            <div class="rounded-lg border border-green-200 bg-white p-3 sm:p-4">
-              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
-                PowerShell 设置方法
-              </h6>
-              <p class="mb-3 text-sm text-gray-600">在 PowerShell 中运行以下命令：</p>
-              <div
-                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
-              >
-                <div class="whitespace-nowrap text-gray-300">
-                  $env:CODE_ASSIST_ENDPOINT = "{{ geminiBaseUrl }}"
-                </div>
-                <div class="whitespace-nowrap text-gray-300">
-                  $env:GOOGLE_CLOUD_ACCESS_TOKEN = "你的API密钥"
-                </div>
-                <div class="whitespace-nowrap text-gray-300">
-                  $env:GOOGLE_GENAI_USE_GCA = "true"
-                </div>
-              </div>
-              <p class="mt-2 text-xs text-yellow-700">
-                💡 使用与 Claude Code 相同的 API 密钥即可。
-              </p>
-            </div>
-
-            <div class="rounded-lg border border-green-200 bg-white p-3 sm:p-4">
-              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
-                PowerShell 永久设置（用户级）
-              </h6>
-              <p class="mb-3 text-sm text-gray-600">在 PowerShell 中运行以下命令：</p>
-              <div
-                class="mb-3 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
-              >
-                <div class="mb-2"># 设置用户级环境变量（永久生效）</div>
-                <div class="whitespace-nowrap text-gray-300">
-                  [System.Environment]::SetEnvironmentVariable("CODE_ASSIST_ENDPOINT", "{{
-                    geminiBaseUrl
-                  }}", [System.EnvironmentVariableTarget]::User)
-                </div>
-                <div class="whitespace-nowrap text-gray-300">
-                  [System.Environment]::SetEnvironmentVariable("GOOGLE_CLOUD_ACCESS_TOKEN",
-                  "你的API密钥", [System.EnvironmentVariableTarget]::User)
-                </div>
-                <div class="whitespace-nowrap text-gray-300">
-                  [System.Environment]::SetEnvironmentVariable("GOOGLE_GENAI_USE_GCA", "true",
-                  [System.EnvironmentVariableTarget]::User)
-                </div>
-              </div>
-              <p class="mt-2 text-xs text-blue-700">
-                💡 设置后需要重新打开 PowerShell 窗口才能生效。
-              </p>
-            </div>
-
-            <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
-              <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">
-                验证 Gemini CLI 环境变量
-              </h6>
-              <p class="mb-3 text-sm text-green-700">在 PowerShell 中验证：</p>
-              <div
-                class="space-y-1 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
-              >
-                <div class="whitespace-nowrap text-gray-300">echo $env:CODE_ASSIST_ENDPOINT</div>
-                <div class="whitespace-nowrap text-gray-300">
-                  echo $env:GOOGLE_CLOUD_ACCESS_TOKEN
-                </div>
-                <div class="whitespace-nowrap text-gray-300">echo $env:GOOGLE_GENAI_USE_GCA</div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Codex 环境变量设置 -->
-        <div class="mt-8">
-          <h5
-            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
-          >
-            <i class="fas fa-code mr-2 text-indigo-600" />
-            配置 Codex 环境变量
-          </h5>
-          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
-            如果你使用支持 OpenAI API 的工具（如 Codex），需要设置以下环境变量：
-          </p>
-
-          <div class="space-y-4">
-            <div class="rounded-lg border border-yellow-200 bg-yellow-50 p-3 sm:p-4">
-              <h6 class="mb-2 font-medium text-yellow-800">Codex 配置文件</h6>
-              <p class="mb-3 text-sm text-yellow-700">
-                在
-                <code class="rounded bg-yellow-100 px-1">~/.codex/config.toml</code>
-                文件中添加以下配置：
-              </p>
-              <div
-                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
-              >
-                <div class="whitespace-nowrap text-gray-300">model_provider = "crs"</div>
-                <div class="whitespace-nowrap text-gray-300">model = "gpt-5"</div>
-                <div class="whitespace-nowrap text-gray-300">model_reasoning_effort = "high"</div>
-                <div class="whitespace-nowrap text-gray-300">disable_response_storage = true</div>
-                <div class="whitespace-nowrap text-gray-300">preferred_auth_method = "apikey"</div>
-                <div class="mt-2"></div>
-                <div class="whitespace-nowrap text-gray-300">[model_providers.crs]</div>
-                <div class="whitespace-nowrap text-gray-300">name = "crs"</div>
-                <div class="whitespace-nowrap text-gray-300">base_url = "{{ openaiBaseUrl }}"</div>
-                <div class="whitespace-nowrap text-gray-300">wire_api = "responses"</div>
-              </div>
-              <p class="mt-3 text-sm text-yellow-700">
-                在
-                <code class="rounded bg-yellow-100 px-1">~/.codex/auth.json</code>
-                文件中配置API密钥：
-              </p>
-              <div
-                class="mt-2 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
-              >
-                <div class="whitespace-nowrap text-gray-300">{</div>
-                <div class="whitespace-nowrap text-gray-300">"OPENAI_API_KEY": "你的API密钥"</div>
-                <div class="whitespace-nowrap text-gray-300">}</div>
-              </div>
-              <p class="mt-2 text-xs text-yellow-700">
-                💡 使用与 Claude Code 相同的 API 密钥即可，格式如 cr_xxxxxxxxxx。
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- 第四步：开始使用 -->
-      <div class="mb-6 sm:mb-8">
-        <h4
-          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
-        >
-          <span
-            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-orange-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
-            >4</span
-          >
-          开始使用 Claude Code
-        </h4>
-        <div
-          class="rounded-xl border border-orange-100 bg-gradient-to-r from-orange-50 to-yellow-50 p-4 sm:p-6"
-        >
-          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
-            现在你可以开始使用 Claude Code 了！
-          </p>
-
-          <div class="space-y-4">
-            <div>
-              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
-                启动 Claude Code
-              </h6>
-              <div
-                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
-              >
-                <div class="whitespace-nowrap text-gray-300">claude</div>
-              </div>
-            </div>
-
-            <div>
-              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
-                在特定项目中使用
-              </h6>
-              <div
-                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
-              >
-                <div class="mb-2"># 进入你的项目目录</div>
-                <div class="whitespace-nowrap text-gray-300">cd C:\path\to\your\project</div>
-                <div class="mb-2 mt-2"># 启动 Claude Code</div>
-                <div class="whitespace-nowrap text-gray-300">claude</div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Windows 故障排除 -->
-      <div class="mb-8">
-        <h4
-          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
-        >
-          <i class="fas fa-wrench mr-2 text-red-600 sm:mr-3" />
-          Windows 常见问题解决
-        </h4>
-        <div class="space-y-4">
-          <details class="rounded-lg border border-gray-200 bg-gray-50">
-            <summary
-              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
-            >
-              安装时提示 "permission denied" 错误
-            </summary>
-            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
-              <p class="mb-2">这通常是权限问题，尝试以下解决方法：</p>
-              <ul class="list-inside list-disc space-y-1 text-sm">
-                <li>以管理员身份运行 PowerShell</li>
-                <li>
-                  或者配置 npm 使用用户目录：<code
-                    class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
-                    >npm config set prefix %APPDATA%\npm</code
-                  >
-                </li>
-              </ul>
-            </div>
-          </details>
-
-          <details class="rounded-lg border border-gray-200 bg-gray-50">
-            <summary
-              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
-            >
-              PowerShell 执行策略错误
-            </summary>
-            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
-              <p class="mb-2">如果遇到执行策略限制，运行：</p>
-              <div
-                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
-              >
-                <div class="whitespace-nowrap text-gray-300">
-                  Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
-                </div>
-              </div>
-            </div>
-          </details>
-
-          <details class="rounded-lg border border-gray-200 bg-gray-50">
-            <summary
-              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
-            >
-              环境变量设置后不生效
-            </summary>
-            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
-              <p class="mb-2">设置永久环境变量后需要：</p>
-              <ul class="list-inside list-disc space-y-1 text-sm">
-                <li>重新启动 PowerShell 或 CMD</li>
-                <li>或者注销并重新登录 Windows</li>
-                <li>
-                  验证设置：<code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
-                    >echo $env:ANTHROPIC_BASE_URL</code
-                  >
-                </li>
-              </ul>
-            </div>
-          </details>
-        </div>
-      </div>
-    </div>
-
-    <!-- macOS 教程 -->
-    <div v-else-if="activeTutorialSystem === 'macos'" class="tutorial-content">
-      <!-- 第一步：安装 Node.js -->
-      <div class="mb-6 sm:mb-10">
-        <h4
-          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
-        >
-          <span
-            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-blue-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
-            >1</span
-          >
-          安装 Node.js 环境
-        </h4>
-        <p class="mb-4 text-gray-600 sm:mb-6">Claude Code 需要 Node.js 环境才能运行。</p>
-
-        <div
-          class="mb-4 rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4 sm:mb-6 sm:p-6"
-        >
-          <h5
-            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
-          >
-            <i class="fab fa-apple mr-2 text-gray-700" />
-            macOS 安装方法
-          </h5>
-          <div class="mb-4">
-            <p class="mb-3 text-gray-700">方法一：使用 Homebrew（推荐）</p>
-            <p class="mb-2 text-xs text-gray-600 dark:text-gray-400 sm:text-sm">
-              如果你已经安装了 Homebrew，使用它安装 Node.js 会更方便：
-            </p>
-            <div
-              class="overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
-            >
-              <div class="mb-2"># 更新 Homebrew</div>
-              <div class="whitespace-nowrap text-gray-300">brew update</div>
-              <div class="mb-2 mt-3"># 安装 Node.js</div>
-              <div class="whitespace-nowrap text-gray-300">brew install node</div>
-            </div>
-          </div>
-          <div class="mb-4">
-            <p class="mb-3 text-gray-700">方法二：官网下载</p>
-            <ol
-              class="ml-2 list-inside list-decimal space-y-1 text-xs text-gray-600 dark:text-gray-400 sm:ml-4 sm:space-y-2 sm:text-sm"
-            >
-              <li>
-                访问
-                <code
-                  class="rounded bg-gray-100 px-1 py-1 text-xs dark:bg-gray-700 sm:px-2 sm:text-sm"
-                  >https://nodejs.org/</code
-                >
-              </li>
-              <li>下载适合 macOS 的 LTS 版本</li>
-              <li>
-                打开下载的
-                <code
-                  class="rounded bg-gray-100 px-1 py-1 text-xs dark:bg-gray-700 sm:px-2 sm:text-sm"
-                  >.pkg</code
-                >
-                文件
-              </li>
-              <li>按照安装程序指引完成安装</li>
-            </ol>
-          </div>
-          <div class="rounded-lg border border-gray-200 bg-gray-50 p-3 sm:p-4">
-            <h6 class="mb-2 text-sm font-medium text-gray-800 sm:text-base">macOS 注意事项</h6>
-            <ul class="space-y-1 text-xs text-gray-700 sm:text-sm">
-              <li>
-                • 如果遇到权限问题，可能需要使用
-                <code class="rounded bg-gray-200 px-1 text-xs sm:text-sm">sudo</code>
-              </li>
-              <li>• 首次运行可能需要在系统偏好设置中允许</li>
-              <li>• 建议使用 Terminal 或 iTerm2</li>
-            </ul>
-          </div>
-        </div>
-
-        <!-- 验证安装 -->
-        <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
-          <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">验证安装是否成功</h6>
-          <p class="mb-3 text-sm text-green-700">安装完成后，打开 Terminal，输入以下命令：</p>
-          <div
-            class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
-          >
-            <div class="whitespace-nowrap text-gray-300">node --version</div>
-            <div class="whitespace-nowrap text-gray-300">npm --version</div>
-          </div>
-          <p class="mt-2 text-sm text-green-700">如果显示版本号，说明安装成功了！</p>
-        </div>
-      </div>
-
-      <!-- 第二步：安装 Claude Code -->
-      <div class="mb-6 sm:mb-10">
-        <h4
-          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
-        >
-          <span
-            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-green-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
-            >2</span
-          >
-          安装 Claude Code
-        </h4>
-
-        <div
-          class="mb-4 rounded-xl border border-purple-100 bg-gradient-to-r from-purple-50 to-pink-50 p-4 sm:mb-6 sm:p-6"
-        >
-          <h5
-            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
-          >
-            <i class="fas fa-download mr-2 text-purple-600" />
-            安装 Claude Code
-          </h5>
-          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
-            打开 Terminal，运行以下命令：
-          </p>
-          <div
-            class="mb-4 overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
-          >
-            <div class="mb-2"># 全局安装 Claude Code</div>
-            <div class="whitespace-nowrap text-gray-300">
-              npm install -g @anthropic-ai/claude-code
-            </div>
-          </div>
-          <p class="mb-2 text-sm text-gray-600">如果遇到权限问题，可以使用 sudo：</p>
-          <div
-            class="overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
-          >
-            <div class="whitespace-nowrap text-gray-300">
-              sudo npm install -g @anthropic-ai/claude-code
-            </div>
-          </div>
-        </div>
-
-        <!-- 验证安装 -->
-        <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
-          <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">验证 Claude Code 安装</h6>
-          <p class="mb-3 text-sm text-green-700">安装完成后，输入以下命令检查是否安装成功：</p>
-          <div
-            class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
-          >
-            <div class="whitespace-nowrap text-gray-300">claude --version</div>
-          </div>
-          <p class="mt-2 text-sm text-green-700">
-            如果显示版本号，恭喜你！Claude Code 已经成功安装了。
-          </p>
-        </div>
-      </div>
-
-      <!-- 第三步：设置环境变量 -->
-      <div class="mb-6 sm:mb-10">
-        <h4
-          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
-        >
-          <span
-            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-orange-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
-            >3</span
-          >
-          设置环境变量
-        </h4>
-
-        <div
-          class="mb-4 rounded-xl border border-orange-100 bg-gradient-to-r from-orange-50 to-yellow-50 p-4 sm:mb-6 sm:p-6"
-        >
-          <h5
-            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
-          >
-            <i class="fas fa-cog mr-2 text-orange-600" />
-            配置 Claude Code 环境变量
-          </h5>
-          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
-            为了让 Claude Code 连接到你的中转服务，需要设置两个环境变量：
-          </p>
-
-          <div class="space-y-4">
-            <div class="rounded-lg border border-orange-200 bg-white p-3 sm:p-4">
-              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
-                方法一：临时设置（当前会话）
-              </h6>
-              <p class="mb-3 text-sm text-gray-600">在 Terminal 中运行以下命令：</p>
-              <div
-                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
-              >
-                <div class="whitespace-nowrap text-gray-300">
-                  export ANTHROPIC_BASE_URL="{{ currentBaseUrl }}"
-                </div>
-                <div class="whitespace-nowrap text-gray-300">
-                  export ANTHROPIC_AUTH_TOKEN="你的API密钥"
-                </div>
-              </div>
-              <p class="mt-2 text-xs text-yellow-700">
-                💡 记得将 "你的API密钥" 替换为在上方 "API Keys" 标签页中创建的实际密钥。
-              </p>
-            </div>
-
-            <div class="rounded-lg border border-orange-200 bg-white p-3 sm:p-4">
-              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
-                方法二：永久设置
-              </h6>
-              <p class="mb-3 text-sm text-gray-600">
-                编辑你的 shell 配置文件（根据你使用的 shell）：
-              </p>
-              <div
-                class="mb-3 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
-              >
-                <div class="mb-2"># 对于 zsh (默认)</div>
-                <div class="whitespace-nowrap text-gray-300">
-                  echo 'export ANTHROPIC_BASE_URL="{{ currentBaseUrl }}"' >> ~/.zshrc
-                </div>
-                <div class="whitespace-nowrap text-gray-300">
-                  echo 'export ANTHROPIC_AUTH_TOKEN="你的API密钥"' >> ~/.zshrc
-                </div>
-                <div class="whitespace-nowrap text-gray-300">source ~/.zshrc</div>
-              </div>
-              <div
-                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
-              >
-                <div class="mb-2"># 对于 bash</div>
-                <div class="whitespace-nowrap text-gray-300">
-                  echo 'export ANTHROPIC_BASE_URL="{{ currentBaseUrl }}"' >> ~/.bash_profile
-                </div>
-                <div class="whitespace-nowrap text-gray-300">
-                  echo 'export ANTHROPIC_AUTH_TOKEN="你的API密钥"' >> ~/.bash_profile
-                </div>
-                <div class="whitespace-nowrap text-gray-300">source ~/.bash_profile</div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Gemini CLI 环境变量设置 -->
-        <div class="mt-8">
-          <h5
-            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
-          >
-            <i class="fas fa-robot mr-2 text-green-600" />
-            配置 Gemini CLI 环境变量
-          </h5>
-          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
-            如果你使用 Gemini CLI，需要设置以下环境变量：
-          </p>
-
-          <div class="space-y-4">
-            <div class="rounded-lg border border-green-200 bg-white p-3 sm:p-4">
-              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
-                Terminal 设置方法
-              </h6>
-              <p class="mb-3 text-sm text-gray-600">在 Terminal 中运行以下命令：</p>
-              <div
-                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
-              >
-                <div class="whitespace-nowrap text-gray-300">
-                  export CODE_ASSIST_ENDPOINT="{{ geminiBaseUrl }}"
-                </div>
-                <div class="whitespace-nowrap text-gray-300">
-                  export GOOGLE_CLOUD_ACCESS_TOKEN="你的API密钥"
-                </div>
-                <div class="whitespace-nowrap text-gray-300">
-                  export GOOGLE_GENAI_USE_GCA="true"
-                </div>
-              </div>
-              <p class="mt-2 text-xs text-yellow-700">
-                💡 使用与 Claude Code 相同的 API 密钥即可。
-              </p>
-            </div>
-
-            <div class="rounded-lg border border-green-200 bg-white p-3 sm:p-4">
-              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
-                永久设置方法
-              </h6>
-              <p class="mb-3 text-sm text-gray-600">添加到你的 shell 配置文件：</p>
-              <div
-                class="mb-3 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
-              >
-                <div class="mb-2"># 对于 zsh (默认)</div>
-                <div class="whitespace-nowrap text-gray-300">
-                  echo 'export CODE_ASSIST_ENDPOINT="{{ geminiBaseUrl }}"' >> ~/.zshrc
-                </div>
-                <div class="whitespace-nowrap text-gray-300">
-                  echo 'export GOOGLE_CLOUD_ACCESS_TOKEN="你的API密钥"' >> ~/.zshrc
-                </div>
-                <div class="whitespace-nowrap text-gray-300">
-                  echo 'export GOOGLE_GENAI_USE_GCA="true"' >> ~/.zshrc
-                </div>
-                <div class="whitespace-nowrap text-gray-300">source ~/.zshrc</div>
-              </div>
-              <div
-                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
-              >
-                <div class="mb-2"># 对于 bash</div>
-                <div class="whitespace-nowrap text-gray-300">
-                  echo 'export CODE_ASSIST_ENDPOINT="{{ geminiBaseUrl }}"' >> ~/.bash_profile
-                </div>
-                <div class="whitespace-nowrap text-gray-300">
-                  echo 'export GOOGLE_CLOUD_ACCESS_TOKEN="你的API密钥"' >> ~/.bash_profile
-                </div>
-                <div class="whitespace-nowrap text-gray-300">
-                  echo 'export GOOGLE_GENAI_USE_GCA="true"' >> ~/.bash_profile
-                </div>
-                <div class="whitespace-nowrap text-gray-300">source ~/.bash_profile</div>
-              </div>
-            </div>
-
-            <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
-              <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">
-                验证 Gemini CLI 环境变量
-              </h6>
-              <p class="mb-3 text-sm text-green-700">在 Terminal 中验证：</p>
-              <div
-                class="space-y-1 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
-              >
-                <div class="whitespace-nowrap text-gray-300">echo $CODE_ASSIST_ENDPOINT</div>
-                <div class="whitespace-nowrap text-gray-300">echo $GOOGLE_CLOUD_ACCESS_TOKEN</div>
-                <div class="whitespace-nowrap text-gray-300">echo $GOOGLE_GENAI_USE_GCA</div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Codex 环境变量设置 -->
-        <div class="mt-8">
-          <h5
-            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
-          >
-            <i class="fas fa-code mr-2 text-indigo-600" />
-            配置 Codex 环境变量
-          </h5>
-          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
-            如果你使用支持 OpenAI API 的工具（如 Codex），需要设置以下环境变量：
-          </p>
-
-          <div class="space-y-4">
-            <div class="rounded-lg border border-yellow-200 bg-yellow-50 p-3 sm:p-4">
-              <h6 class="mb-2 font-medium text-yellow-800">Codex 配置文件</h6>
-              <p class="mb-3 text-sm text-yellow-700">
-                在
-                <code class="rounded bg-yellow-100 px-1">~/.codex/config.toml</code>
-                文件中添加以下配置：
-              </p>
-              <div
-                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
-              >
-                <div class="whitespace-nowrap text-gray-300">model_provider = "crs"</div>
-                <div class="whitespace-nowrap text-gray-300">model = "gpt-5"</div>
-                <div class="whitespace-nowrap text-gray-300">model_reasoning_effort = "high"</div>
-                <div class="whitespace-nowrap text-gray-300">disable_response_storage = true</div>
-                <div class="whitespace-nowrap text-gray-300">preferred_auth_method = "apikey"</div>
-                <div class="mt-2"></div>
-                <div class="whitespace-nowrap text-gray-300">[model_providers.crs]</div>
-                <div class="whitespace-nowrap text-gray-300">name = "crs"</div>
-                <div class="whitespace-nowrap text-gray-300">base_url = "{{ openaiBaseUrl }}"</div>
-                <div class="whitespace-nowrap text-gray-300">wire_api = "responses"</div>
-              </div>
-              <p class="mt-3 text-sm text-yellow-700">
-                在
-                <code class="rounded bg-yellow-100 px-1">~/.codex/auth.json</code>
-                文件中配置API密钥：
-              </p>
-              <div
-                class="mt-2 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
-              >
-                <div class="whitespace-nowrap text-gray-300">{</div>
-                <div class="whitespace-nowrap text-gray-300">"OPENAI_API_KEY": "你的API密钥"</div>
-                <div class="whitespace-nowrap text-gray-300">}</div>
-              </div>
-              <p class="mt-2 text-xs text-yellow-700">
-                💡 使用与 Claude Code 相同的 API 密钥即可，格式如 cr_xxxxxxxxxx。
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- 第四步：开始使用 -->
-      <div class="mb-8">
-        <h4
-          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
-        >
-          <span
-            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-yellow-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
-            >4</span
-          >
-          开始使用 Claude Code
-        </h4>
-        <div
-          class="rounded-xl border border-yellow-100 bg-gradient-to-r from-yellow-50 to-amber-50 p-4 sm:p-6"
-        >
-          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
-            现在你可以开始使用 Claude Code 了！
-          </p>
-
-          <div class="space-y-4">
-            <div>
-              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
-                启动 Claude Code
-              </h6>
-              <div
-                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
-              >
-                <div class="whitespace-nowrap text-gray-300">claude</div>
-              </div>
-            </div>
-
-            <div>
-              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
-                在特定项目中使用
-              </h6>
-              <div
-                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
-              >
-                <div class="mb-2"># 进入你的项目目录</div>
-                <div class="whitespace-nowrap text-gray-300">cd /path/to/your/project</div>
-                <div class="mb-2 mt-2"># 启动 Claude Code</div>
-                <div class="whitespace-nowrap text-gray-300">claude</div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- macOS 故障排除 -->
-      <div class="mb-8">
-        <h4
-          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
-        >
-          <i class="fas fa-wrench mr-2 text-red-600 sm:mr-3" />
-          macOS 常见问题解决
-        </h4>
-        <div class="space-y-4">
-          <details class="rounded-lg border border-gray-200 bg-gray-50">
-            <summary
-              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
-            >
-              安装时提示权限错误
-            </summary>
-            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
-              <p class="mb-2">尝试以下解决方法：</p>
-              <ul class="list-inside list-disc space-y-1 text-sm">
-                <li>
-                  使用 sudo 安装：<code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
-                    >sudo npm install -g @anthropic-ai/claude-code</code
-                  >
-                </li>
-                <li>
-                  或者配置 npm 使用用户目录：<code
-                    class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
-                    >npm config set prefix ~/.npm-global</code
-                  >
-                </li>
-              </ul>
-            </div>
-          </details>
-
-          <details class="rounded-lg border border-gray-200 bg-gray-50">
-            <summary
-              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
-            >
-              macOS 安全设置阻止运行
-            </summary>
-            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
-              <p class="mb-2">如果系统阻止运行 Claude Code：</p>
-              <ul class="list-inside list-disc space-y-1 text-sm">
-                <li>打开"系统偏好设置" → "安全性与隐私"</li>
-                <li>点击"仍要打开"或"允许"</li>
-                <li>
-                  或者在 Terminal 中运行：<code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
-                    >sudo spctl --master-disable</code
-                  >
-                </li>
-              </ul>
-            </div>
-          </details>
-
-          <details class="rounded-lg border border-gray-200 bg-gray-50">
-            <summary
-              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
-            >
-              环境变量不生效
-            </summary>
-            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
-              <p class="mb-2">检查以下几点：</p>
-              <ul class="list-inside list-disc space-y-1 text-sm">
-                <li>确认修改了正确的配置文件（.zshrc 或 .bash_profile）</li>
-                <li>重新启动 Terminal</li>
-                <li>
-                  验证设置：<code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
-                    >echo $ANTHROPIC_BASE_URL</code
-                  >
-                </li>
-              </ul>
-            </div>
-          </details>
-        </div>
-      </div>
-    </div>
-
-    <!-- Linux 教程 -->
-    <div v-else-if="activeTutorialSystem === 'linux'" class="tutorial-content">
-      <!-- 第一步：安装 Node.js -->
-      <div class="mb-6 sm:mb-10">
-        <h4
-          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
-        >
-          <span
-            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-blue-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
-            >1</span
-          >
-          安装 Node.js 环境
-        </h4>
-        <p class="mb-4 text-gray-600 sm:mb-6">Claude Code 需要 Node.js 环境才能运行。</p>
-
-        <div
-          class="mb-4 rounded-xl border border-orange-100 bg-gradient-to-r from-orange-50 to-red-50 p-4 sm:mb-6 sm:p-6"
-        >
-          <h5
-            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
-          >
-            <i class="fab fa-ubuntu mr-2 text-orange-600" />
-            Linux 安装方法
-          </h5>
-          <div class="mb-4">
-            <p class="mb-3 text-gray-700">方法一：使用官方仓库（推荐）</p>
-            <div
-              class="overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
-            >
-              <div class="mb-2"># 添加 NodeSource 仓库</div>
-              <div class="whitespace-nowrap text-gray-300">
-                curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
-              </div>
-              <div class="mb-2 mt-3"># 安装 Node.js</div>
-              <div class="whitespace-nowrap text-gray-300">sudo apt-get install -y nodejs</div>
-            </div>
-          </div>
-          <div class="mb-4">
-            <p class="mb-3 text-gray-700">方法二：使用系统包管理器</p>
-            <p class="mb-2 text-xs text-gray-600 dark:text-gray-400 sm:text-sm">
-              虽然版本可能不是最新的，但对于基本使用已经足够：
-            </p>
-            <div
-              class="overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
-            >
-              <div class="mb-2"># Ubuntu/Debian</div>
-              <div class="whitespace-nowrap text-gray-300">sudo apt update</div>
-              <div class="whitespace-nowrap text-gray-300">sudo apt install nodejs npm</div>
-              <div class="mb-2 mt-3"># CentOS/RHEL/Fedora</div>
-              <div class="whitespace-nowrap text-gray-300">sudo dnf install nodejs npm</div>
-            </div>
-          </div>
-          <div class="rounded-lg border border-orange-200 bg-orange-50 p-3 sm:p-4">
-            <h6 class="mb-2 text-sm font-medium text-orange-800 sm:text-base">Linux 注意事项</h6>
-            <ul class="space-y-1 text-xs text-orange-700 sm:text-sm">
-              <li>• 某些发行版可能需要安装额外的依赖</li>
-              <li>• 如果遇到权限问题，使用 <code class="rounded bg-orange-200 px-1">sudo</code></li>
-              <li>• 确保你的用户在 npm 的全局目录有写权限</li>
-            </ul>
-          </div>
-        </div>
-
-        <!-- 验证安装 -->
-        <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
-          <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">验证安装是否成功</h6>
-          <p class="mb-3 text-sm text-green-700">安装完成后，打开终端，输入以下命令：</p>
-          <div
-            class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
-          >
-            <div class="whitespace-nowrap text-gray-300">node --version</div>
-            <div class="whitespace-nowrap text-gray-300">npm --version</div>
-          </div>
-          <p class="mt-2 text-sm text-green-700">如果显示版本号，说明安装成功了！</p>
-        </div>
-      </div>
-
-      <!-- 第二步：安装 Claude Code -->
-      <div class="mb-6 sm:mb-10">
-        <h4
-          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
-        >
-          <span
-            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-green-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
-            >2</span
-          >
-          安装 Claude Code
-        </h4>
-
-        <div
-          class="mb-4 rounded-xl border border-purple-100 bg-gradient-to-r from-purple-50 to-pink-50 p-4 sm:mb-6 sm:p-6"
-        >
-          <h5
-            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
-          >
-            <i class="fas fa-download mr-2 text-purple-600" />
-            安装 Claude Code
-          </h5>
-          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
-            打开终端，运行以下命令：
-          </p>
-          <div
-            class="mb-4 overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
-          >
-            <div class="mb-2"># 全局安装 Claude Code</div>
-            <div class="whitespace-nowrap text-gray-300">
-              npm install -g @anthropic-ai/claude-code
-            </div>
-          </div>
-          <p class="mb-2 text-sm text-gray-600">如果遇到权限问题，可以使用 sudo：</p>
-          <div
-            class="overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
-          >
-            <div class="whitespace-nowrap text-gray-300">
-              sudo npm install -g @anthropic-ai/claude-code
-            </div>
-          </div>
-        </div>
-
-        <!-- 验证安装 -->
-        <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
-          <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">验证 Claude Code 安装</h6>
-          <p class="mb-3 text-sm text-green-700">安装完成后，输入以下命令检查是否安装成功：</p>
-          <div
-            class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
-          >
-            <div class="whitespace-nowrap text-gray-300">claude --version</div>
-          </div>
-          <p class="mt-2 text-sm text-green-700">
-            如果显示版本号，恭喜你！Claude Code 已经成功安装了。
-          </p>
-        </div>
-      </div>
-
-      <!-- 第三步：设置环境变量 -->
-      <div class="mb-6 sm:mb-10">
-        <h4
-          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
-        >
-          <span
-            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-orange-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
-            >3</span
-          >
-          设置环境变量
-        </h4>
-
-        <div
-          class="mb-4 rounded-xl border border-orange-100 bg-gradient-to-r from-orange-50 to-yellow-50 p-4 sm:mb-6 sm:p-6"
-        >
-          <h5
-            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
-          >
-            <i class="fas fa-cog mr-2 text-orange-600" />
-            配置 Claude Code 环境变量
-          </h5>
-          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
-            为了让 Claude Code 连接到你的中转服务，需要设置两个环境变量：
-          </p>
-
-          <div class="space-y-4">
-            <div class="rounded-lg border border-orange-200 bg-white p-3 sm:p-4">
-              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
-                方法一：临时设置（当前会话）
-              </h6>
-              <p class="mb-3 text-sm text-gray-600">在终端中运行以下命令：</p>
-              <div
-                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
-              >
-                <div class="whitespace-nowrap text-gray-300">
-                  export ANTHROPIC_BASE_URL="{{ currentBaseUrl }}"
-                </div>
-                <div class="whitespace-nowrap text-gray-300">
-                  export ANTHROPIC_AUTH_TOKEN="你的API密钥"
-                </div>
-              </div>
-              <p class="mt-2 text-xs text-yellow-700">
-                💡 记得将 "你的API密钥" 替换为在上方 "API Keys" 标签页中创建的实际密钥。
-              </p>
-            </div>
-
-            <div class="rounded-lg border border-orange-200 bg-white p-3 sm:p-4">
-              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
-                方法二：永久设置
-              </h6>
-              <p class="mb-3 text-sm text-gray-600">编辑你的 shell 配置文件：</p>
-              <div
-                class="mb-3 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
-              >
-                <div class="mb-2"># 对于 bash (默认)</div>
-                <div class="whitespace-nowrap text-gray-300">
-                  echo 'export ANTHROPIC_BASE_URL="{{ currentBaseUrl }}"' >> ~/.bashrc
-                </div>
-                <div class="whitespace-nowrap text-gray-300">
-                  echo 'export ANTHROPIC_AUTH_TOKEN="你的API密钥"' >> ~/.bashrc
-                </div>
-                <div class="whitespace-nowrap text-gray-300">source ~/.bashrc</div>
-              </div>
-              <div
-                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
-              >
-                <div class="mb-2"># 对于 zsh</div>
-                <div class="whitespace-nowrap text-gray-300">
-                  echo 'export ANTHROPIC_BASE_URL="{{ currentBaseUrl }}"' >> ~/.zshrc
-                </div>
-                <div class="whitespace-nowrap text-gray-300">
-                  echo 'export ANTHROPIC_AUTH_TOKEN="你的API密钥"' >> ~/.zshrc
-                </div>
-                <div class="whitespace-nowrap text-gray-300">source ~/.zshrc</div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Gemini CLI 环境变量设置 -->
-        <div class="mt-8">
-          <h5
-            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
-          >
-            <i class="fas fa-robot mr-2 text-green-600" />
-            配置 Gemini CLI 环境变量
-          </h5>
-          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
-            如果你使用 Gemini CLI，需要设置以下环境变量：
-          </p>
-
-          <div class="space-y-4">
-            <div class="rounded-lg border border-green-200 bg-white p-3 sm:p-4">
-              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
-                终端设置方法
-              </h6>
-              <p class="mb-3 text-sm text-gray-600">在终端中运行以下命令：</p>
-              <div
-                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
-              >
-                <div class="whitespace-nowrap text-gray-300">
-                  export CODE_ASSIST_ENDPOINT="{{ geminiBaseUrl }}"
-                </div>
-                <div class="whitespace-nowrap text-gray-300">
-                  export GOOGLE_CLOUD_ACCESS_TOKEN="你的API密钥"
-                </div>
-                <div class="whitespace-nowrap text-gray-300">
-                  export GOOGLE_GENAI_USE_GCA="true"
-                </div>
-              </div>
-              <p class="mt-2 text-xs text-yellow-700">
-                💡 使用与 Claude Code 相同的 API 密钥即可。
-              </p>
-            </div>
-
-            <div class="rounded-lg border border-green-200 bg-white p-3 sm:p-4">
-              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
-                永久设置方法
-              </h6>
-              <p class="mb-3 text-sm text-gray-600">添加到你的 shell 配置文件：</p>
-              <div
-                class="mb-3 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
-              >
-                <div class="mb-2"># 对于 bash (默认)</div>
-                <div class="whitespace-nowrap text-gray-300">
-                  echo 'export CODE_ASSIST_ENDPOINT="{{ geminiBaseUrl }}"' >> ~/.bashrc
-                </div>
-                <div class="whitespace-nowrap text-gray-300">
-                  echo 'export GOOGLE_CLOUD_ACCESS_TOKEN="你的API密钥"' >> ~/.bashrc
-                </div>
-                <div class="whitespace-nowrap text-gray-300">
-                  echo 'export GOOGLE_GENAI_USE_GCA="true"' >> ~/.bashrc
-                </div>
-                <div class="whitespace-nowrap text-gray-300">source ~/.bashrc</div>
-              </div>
-              <div
-                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
-              >
-                <div class="mb-2"># 对于 zsh</div>
-                <div class="whitespace-nowrap text-gray-300">
-                  echo 'export CODE_ASSIST_ENDPOINT="{{ geminiBaseUrl }}"' >> ~/.zshrc
-                </div>
-                <div class="whitespace-nowrap text-gray-300">
-                  echo 'export GOOGLE_CLOUD_ACCESS_TOKEN="你的API密钥"' >> ~/.zshrc
-                </div>
-                <div class="whitespace-nowrap text-gray-300">
-                  echo 'export GOOGLE_GENAI_USE_GCA="true"' >> ~/.zshrc
-                </div>
-                <div class="whitespace-nowrap text-gray-300">source ~/.zshrc</div>
-              </div>
-            </div>
-
-            <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
-              <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">
-                验证 Gemini CLI 环境变量
-              </h6>
-              <p class="mb-3 text-sm text-green-700">在终端中验证：</p>
-              <div
-                class="space-y-1 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
-              >
-                <div class="whitespace-nowrap text-gray-300">echo $CODE_ASSIST_ENDPOINT</div>
-                <div class="whitespace-nowrap text-gray-300">echo $GOOGLE_CLOUD_ACCESS_TOKEN</div>
-                <div class="whitespace-nowrap text-gray-300">echo $GOOGLE_GENAI_USE_GCA</div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Codex 环境变量设置 -->
-        <div class="mt-8">
-          <h5
-            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
-          >
-            <i class="fas fa-code mr-2 text-indigo-600" />
-            配置 Codex 环境变量
-          </h5>
-          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
-            如果你使用支持 OpenAI API 的工具（如 Codex），需要设置以下环境变量：
-          </p>
-
-          <div class="space-y-4">
-            <div class="rounded-lg border border-yellow-200 bg-yellow-50 p-3 sm:p-4">
-              <h6 class="mb-2 font-medium text-yellow-800">Codex 配置文件</h6>
-              <p class="mb-3 text-sm text-yellow-700">
-                在
-                <code class="rounded bg-yellow-100 px-1">~/.codex/config.toml</code>
-                文件中添加以下配置：
-              </p>
-              <div
-                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
-              >
-                <div class="whitespace-nowrap text-gray-300">model_provider = "crs"</div>
-                <div class="whitespace-nowrap text-gray-300">model = "gpt-5"</div>
-                <div class="whitespace-nowrap text-gray-300">model_reasoning_effort = "high"</div>
-                <div class="whitespace-nowrap text-gray-300">disable_response_storage = true</div>
-                <div class="whitespace-nowrap text-gray-300">preferred_auth_method = "apikey"</div>
-                <div class="mt-2"></div>
-                <div class="whitespace-nowrap text-gray-300">[model_providers.crs]</div>
-                <div class="whitespace-nowrap text-gray-300">name = "crs"</div>
-                <div class="whitespace-nowrap text-gray-300">base_url = "{{ openaiBaseUrl }}"</div>
-                <div class="whitespace-nowrap text-gray-300">wire_api = "responses"</div>
-              </div>
-              <p class="mt-3 text-sm text-yellow-700">
-                在
-                <code class="rounded bg-yellow-100 px-1">~/.codex/auth.json</code>
-                文件中配置API密钥：
-              </p>
-              <div
-                class="mt-2 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
-              >
-                <div class="whitespace-nowrap text-gray-300">{</div>
-                <div class="whitespace-nowrap text-gray-300">"OPENAI_API_KEY": "你的API密钥"</div>
-                <div class="whitespace-nowrap text-gray-300">}</div>
-              </div>
-              <p class="mt-2 text-xs text-yellow-700">
-                💡 使用与 Claude Code 相同的 API 密钥即可，格式如 cr_xxxxxxxxxx。
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- 第四步：开始使用 -->
-      <div class="mb-8">
-        <h4
-          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
-        >
-          <span
-            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-yellow-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
-            >4</span
-          >
-          开始使用 Claude Code
-        </h4>
-        <div
-          class="rounded-xl border border-yellow-100 bg-gradient-to-r from-yellow-50 to-amber-50 p-4 sm:p-6"
-        >
-          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
-            现在你可以开始使用 Claude Code 了！
-          </p>
-
-          <div class="space-y-4">
-            <div>
-              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
-                启动 Claude Code
-              </h6>
-              <div
-                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
-              >
-                <div class="whitespace-nowrap text-gray-300">claude</div>
-              </div>
-            </div>
-
-            <div>
-              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
-                在特定项目中使用
-              </h6>
-              <div
-                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
-              >
-                <div class="mb-2"># 进入你的项目目录</div>
-                <div class="whitespace-nowrap text-gray-300">cd /path/to/your/project</div>
-                <div class="mb-2 mt-2"># 启动 Claude Code</div>
-                <div class="whitespace-nowrap text-gray-300">claude</div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Linux 故障排除 -->
-      <div class="mb-8">
-        <h4
-          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
-        >
-          <i class="fas fa-wrench mr-2 text-red-600 sm:mr-3" />
-          Linux 常见问题解决
-        </h4>
-        <div class="space-y-4">
-          <details class="rounded-lg border border-gray-200 bg-gray-50">
-            <summary
-              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
-            >
-              安装时提示权限错误
-            </summary>
-            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
-              <p class="mb-2">尝试以下解决方法：</p>
-              <ul class="list-inside list-disc space-y-1 text-sm">
-                <li>
-                  使用 sudo 安装：<code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
-                    >sudo npm install -g @anthropic-ai/claude-code</code
-                  >
-                </li>
-                <li>
-                  或者配置 npm 使用用户目录：<code
-                    class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
-                    >npm config set prefix ~/.npm-global</code
-                  >
-                </li>
-                <li>
-                  然后添加到 PATH：<code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
-                    >export PATH=~/.npm-global/bin:$PATH</code
-                  >
-                </li>
-              </ul>
-            </div>
-          </details>
-
-          <details class="rounded-lg border border-gray-200 bg-gray-50">
-            <summary
-              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
-            >
-              缺少依赖库
-            </summary>
-            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
-              <p class="mb-2">某些 Linux 发行版需要安装额外依赖：</p>
-              <div
-                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
-              >
-                <div class="mb-2"># Ubuntu/Debian</div>
-                <div class="whitespace-nowrap text-gray-300">sudo apt install build-essential</div>
-                <div class="mb-2 mt-2"># CentOS/RHEL</div>
-                <div class="whitespace-nowrap text-gray-300">
-                  sudo dnf groupinstall "Development Tools"
-                </div>
-              </div>
-            </div>
-          </details>
-
-          <details class="rounded-lg border border-gray-200 bg-gray-50">
-            <summary
-              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
-            >
-              环境变量不生效
-            </summary>
-            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
-              <p class="mb-2">检查以下几点：</p>
-              <ul class="list-inside list-disc space-y-1 text-sm">
-                <li>确认修改了正确的配置文件（.bashrc 或 .zshrc）</li>
-                <li>
-                  重新启动终端或运行
-                  <code class="rounded bg-gray-200 px-1 text-xs sm:text-sm">source ~/.bashrc</code>
-                </li>
-                <li>
-                  验证设置：<code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
-                    >echo $ANTHROPIC_BASE_URL</code
-                  >
-                </li>
-              </ul>
-            </div>
-          </details>
-        </div>
-      </div>
-    </div>
-
-    <!-- 结尾 -->
-    <div
-      class="rounded-xl bg-gradient-to-r from-blue-500 to-purple-600 p-4 text-center text-white sm:p-6"
-    >
-      <h5 class="mb-2 text-lg font-semibold sm:text-xl">🎉 恭喜你！</h5>
-      <p class="mb-3 text-sm text-blue-100 sm:mb-4 sm:text-base">
-        你已经成功安装并配置了 Claude Code，现在可以开始享受 AI 编程助手带来的便利了。
-      </p>
-      <p class="text-xs text-blue-200 sm:text-sm">
-        如果在使用过程中遇到任何问题，可以查看官方文档或社区讨论获取帮助。
-      </p>
-    </div>
-  </div>
+  <component :is="currentTutorialComponent" />
 </template>
 
 <script setup>
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
+import { useLocaleStore } from '@/stores/locale'
+import TutorialViewZhCn from './tutorials/TutorialView-zh-cn.vue'
+import TutorialViewZhTw from './tutorials/TutorialView-zh-tw.vue'
+import TutorialViewEn from './tutorials/TutorialView-en.vue'
 
-// 当前系统选择
-const activeTutorialSystem = ref('windows')
+const localeStore = useLocaleStore()
 
-// 系统列表
-const tutorialSystems = [
-  { key: 'windows', name: 'Windows', icon: 'fab fa-windows' },
-  { key: 'macos', name: 'macOS', icon: 'fab fa-apple' },
-  { key: 'linux', name: 'Linux / WSL2', icon: 'fab fa-linux' }
-]
-
-// 获取基础URL前缀
-const getBaseUrlPrefix = () => {
-  // 优先使用环境变量配置的自定义前缀
-  const customPrefix = import.meta.env.VITE_API_BASE_PREFIX
-  if (customPrefix) {
-    // 去除末尾的斜杠
-    return customPrefix.replace(/\/$/, '')
+// 根据当前语言选择教程组件
+const currentTutorialComponent = computed(() => {
+  const locale = localeStore.currentLocale
+  const components = {
+    'zh-cn': TutorialViewZhCn,
+    'zh-tw': TutorialViewZhTw,
+    'en': TutorialViewEn
   }
-
-  // 否则使用当前浏览器访问地址
-  // 更健壮的获取 origin 的方法，兼容旧版浏览器和特殊环境
-  let origin = ''
-
-  if (window.location.origin) {
-    // 现代浏览器直接支持 origin
-    origin = window.location.origin
-  } else {
-    // 旧版浏览器或特殊环境的兼容处理
-    const protocol = window.location.protocol
-    const hostname = window.location.hostname
-    const port = window.location.port
-
-    origin = protocol + '//' + hostname
-
-    // 只有在非默认端口时才添加端口号
-    if (
-      port &&
-      ((protocol === 'http:' && port !== '80') || (protocol === 'https:' && port !== '443'))
-    ) {
-      origin += ':' + port
-    }
-  }
-
-  // 如果还是获取不到，使用当前页面的 URL 推导
-  if (!origin) {
-    const currentUrl = window.location.href
-    const pathStart = currentUrl.indexOf('/', 8) // 跳过 http:// 或 https://
-    if (pathStart !== -1) {
-      origin = currentUrl.substring(0, pathStart)
-    } else {
-      // 最后的降级方案，使用相对路径
-      console.warn('无法获取完整的 origin，将使用相对路径')
-      return ''
-    }
-  }
-
-  return origin
-}
-
-// 当前基础URL - Claude Code
-const currentBaseUrl = computed(() => {
-  return getBaseUrlPrefix() + '/api'
+  return components[locale] || TutorialViewZhCn
 })
-
-// Gemini CLI 基础URL
-const geminiBaseUrl = computed(() => {
-  return getBaseUrlPrefix() + '/gemini'
-})
-
-// OpenAI/Codex 基础URL
-const openaiBaseUrl = computed(() => {
-  return getBaseUrlPrefix() + '/openai'
-})
-</script>
-
-<style scoped>
-.tutorial-container {
-  min-height: calc(100vh - 300px);
-}
-
-.tutorial-content {
-  animation: fadeIn 0.3s ease-in-out;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-code {
-  font-family: 'Fira Code', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-}
-
-.tutorial-content h4 {
-  scroll-margin-top: 100px;
-}
-
-.tutorial-content .bg-gradient-to-r {
-  transition: all 0.2s ease;
-}
-
-.tutorial-content .bg-gradient-to-r:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-</style>
+</script>
\ No newline at end of file
diff --git a/web/admin-spa/src/views/tutorials/TutorialView-en.vue b/web/admin-spa/src/views/tutorials/TutorialView-en.vue
new file mode 100644
index 00000000..ca0a8c65
--- /dev/null
+++ b/web/admin-spa/src/views/tutorials/TutorialView-en.vue
@@ -0,0 +1,1690 @@
+<template>
+  <div class="card p-3 sm:p-6">
+    <div class="mb-4 sm:mb-8">
+      <h3
+        class="mb-3 flex items-center text-xl font-bold text-gray-900 dark:text-gray-100 sm:mb-4 sm:text-2xl"
+      >
+        <i class="fas fa-graduation-cap mr-2 text-blue-600 sm:mr-3" />
+        Claude Code Tutorial
+      </h3>
+      <p class="text-sm text-gray-600 dark:text-gray-400 sm:text-lg">
+        Follow this tutorial to easily install and use Claude Code on your computer.
+      </p>
+    </div>
+
+    <!-- System Selection -->
+    <div class="mb-4 sm:mb-8">
+      <div class="flex flex-wrap gap-1 rounded-xl bg-gray-100 p-1 dark:bg-gray-700 sm:gap-2 sm:p-2">
+        <button
+          v-for="system in tutorialSystems"
+          :key="system.key"
+          :class="[
+            'flex flex-1 items-center justify-center gap-1 rounded-lg px-3 py-2 text-xs font-semibold transition-all duration-300 sm:gap-2 sm:px-6 sm:py-3 sm:text-sm',
+            activeTutorialSystem === system.key
+              ? 'bg-white text-blue-600 shadow-sm dark:bg-gray-800'
+              : 'text-gray-600 hover:bg-white/50 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200'
+          ]"
+          @click="activeTutorialSystem = system.key"
+        >
+          <i :class="system.icon" />
+          {{ system.name }}
+        </button>
+      </div>
+    </div>
+
+    <!-- Windows Tutorial -->
+    <div v-if="activeTutorialSystem === 'windows'" class="tutorial-content">
+      <!-- Step 1: Install Node.js -->
+      <div class="mb-4 sm:mb-10 sm:mb-6">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <span
+            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-blue-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
+            >1</span
+          >
+          Install Node.js Environment
+        </h4>
+        <p class="mb-4 text-sm text-gray-600 dark:text-gray-400 sm:mb-4 sm:mb-6 sm:text-base">
+          Claude Code requires Node.js environment to run.
+        </p>
+
+        <div
+          class="mb-4 rounded-xl border border-blue-100 bg-gradient-to-r from-blue-50 to-indigo-50 p-4 sm:mb-4 sm:mb-6 sm:p-6"
+        >
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fab fa-windows mr-2 text-blue-600" />
+            Windows Installation Methods
+          </h5>
+          <div class="mb-3 sm:mb-4">
+            <p class="mb-2 text-sm text-gray-700 dark:text-gray-600 sm:mb-3 sm:text-base">
+              Method 1: Download from Official Website (Recommended)
+            </p>
+            <ol
+              class="ml-2 list-inside list-decimal space-y-1 text-xs text-gray-600 dark:text-gray-600 sm:ml-4 sm:space-y-2 sm:text-sm"
+            >
+              <li>
+                Open your browser and visit
+                <code
+                  class="rounded bg-gray-100 px-1 py-1 text-xs dark:bg-gray-700 sm:px-2 sm:text-sm"
+                  >https://nodejs.org/</code
+                >
+              </li>
+              <li>Click "LTS" version to download (recommended long-term support version)</li>
+              <li>
+                After download completes, double-click the
+                <code
+                  class="rounded bg-gray-100 px-1 py-1 text-xs dark:bg-gray-700 sm:px-2 sm:text-sm"
+                  >.msi</code
+                >
+                file
+              </li>
+              <li>Follow the installation wizard to complete installation, keep default settings</li>
+            </ol>
+          </div>
+          <div class="mb-3 sm:mb-4">
+            <p class="mb-2 text-sm text-gray-700 dark:text-gray-600 sm:mb-3 sm:text-base">
+              Method 2: Using Package Managers
+            </p>
+            <p class="mb-2 text-xs text-gray-600 dark:text-gray-400 sm:text-sm">
+              If you have Chocolatey or Scoop installed, you can use the command line to install:
+            </p>
+            <div
+              class="overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
+            >
+              <div class="mb-2"># Using Chocolatey</div>
+              <div class="whitespace-nowrap text-gray-300">choco install nodejs</div>
+              <div class="mb-2 mt-3"># Or using Scoop</div>
+              <div class="whitespace-nowrap text-gray-300">scoop install nodejs</div>
+            </div>
+          </div>
+          <div class="rounded-lg border border-blue-200 bg-blue-50 p-3 sm:p-4">
+            <h6 class="mb-2 text-sm font-medium text-blue-800 sm:text-base">Windows Notes</h6>
+            <ul class="space-y-1 text-xs text-blue-700 sm:text-sm sm:text-xs">
+              <li>• Recommend using PowerShell instead of CMD</li>
+              <li>• If you encounter permission issues, try running as administrator</li>
+              <li>• Some antivirus software may flag as false positive, need to add to whitelist</li>
+            </ul>
+          </div>
+        </div>
+
+        <!-- Verify Installation -->
+        <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
+          <h6 class="mb-2 text-sm font-medium text-green-800 sm:text-base">Verify Installation Success</h6>
+          <p class="mb-2 text-xs text-green-700 sm:mb-3 sm:text-sm">
+            After installation completes, open PowerShell or CMD and enter the following commands:
+          </p>
+          <div
+            class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+          >
+            <div class="whitespace-nowrap text-gray-300">node --version</div>
+            <div class="whitespace-nowrap text-gray-300">npm --version</div>
+          </div>
+          <p class="mt-2 text-xs text-green-700 sm:text-sm">If version numbers are displayed, installation was successful!</p>
+        </div>
+      </div>
+
+      <!-- Step 2: Install Claude Code -->
+      <div class="mb-4 sm:mb-10 sm:mb-6">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <span
+            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-green-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
+            >2</span
+          >
+          Install Claude Code
+        </h4>
+
+        <div
+          class="mb-4 rounded-xl border border-green-100 bg-gradient-to-r from-green-50 to-emerald-50 p-4 sm:mb-6 sm:p-6"
+        >
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fas fa-download mr-2 text-green-600" />
+            Install Claude Code
+          </h5>
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            Open PowerShell or CMD and run the following command:
+          </p>
+          <div
+            class="mb-4 overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
+          >
+            <div class="mb-2"># Install Claude Code globally</div>
+            <div class="whitespace-nowrap text-gray-300">
+              npm install -g @anthropic-ai/claude-code
+            </div>
+          </div>
+          <p class="text-sm text-gray-600 dark:text-gray-400">
+            This command will download and install the latest version of Claude Code from the official npm repository.
+          </p>
+
+          <div class="mt-4 rounded-lg border border-blue-200 bg-blue-50 p-3 sm:p-4">
+            <h6 class="mb-2 text-sm font-medium text-blue-800 sm:text-base">Tips</h6>
+            <ul class="space-y-1 text-xs text-blue-700 sm:text-sm">
+              <li>• Recommend using PowerShell instead of CMD for more powerful features</li>
+              <li>• If you encounter permission issues, run PowerShell as administrator</li>
+            </ul>
+          </div>
+        </div>
+
+        <!-- Verify Installation -->
+        <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
+          <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">Verify Claude Code Installation</h6>
+          <p class="mb-3 text-sm text-green-700">After installation completes, enter the following command to check if installation was successful:</p>
+          <div
+            class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+          >
+            <div class="whitespace-nowrap text-gray-300">claude --version</div>
+          </div>
+          <p class="mt-2 text-sm text-green-700">
+            If version number is displayed, congratulations! Claude Code has been successfully installed.
+          </p>
+        </div>
+      </div>
+
+      <!-- Step 3: Set Environment Variables -->
+      <div class="mb-6 sm:mb-10">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <span
+            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-purple-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
+            >3</span
+          >
+          Set Environment Variables
+        </h4>
+
+        <div
+          class="mb-4 rounded-xl border border-purple-100 bg-gradient-to-r from-purple-50 to-pink-50 p-4 sm:mb-6 sm:p-6"
+        >
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fas fa-cog mr-2 text-purple-600" />
+            Configure Claude Code Environment Variables
+          </h5>
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            To connect Claude Code to your relay service, you need to set two environment variables:
+          </p>
+
+          <div class="space-y-4">
+            <div
+              class="rounded-lg border border-purple-200 bg-white p-3 dark:border-purple-700 dark:bg-gray-800 sm:p-4"
+            >
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                Method 1: PowerShell Temporary Setup (Current Session)
+              </h6>
+              <p class="mb-3 text-sm text-gray-600">Run the following commands in PowerShell:</p>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">
+                  $env:ANTHROPIC_BASE_URL = "{{ currentBaseUrl }}"
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  $env:ANTHROPIC_AUTH_TOKEN = "your-api-key"
+                </div>
+              </div>
+              <p class="mt-2 text-xs text-yellow-700">
+                💡 Remember to replace "your-api-key" with the actual key created in the "API Keys" tab above.
+              </p>
+            </div>
+
+            <div
+              class="rounded-lg border border-purple-200 bg-white p-3 dark:border-purple-700 dark:bg-gray-800 sm:p-4"
+            >
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                Method 2: PowerShell Permanent Setup (User Level)
+              </h6>
+              <p class="mb-3 text-sm text-gray-600">
+                Run the following commands in PowerShell to set user-level environment variables:
+              </p>
+              <div
+                class="mb-3 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># Set user-level environment variables (permanent)</div>
+                <div class="whitespace-nowrap text-gray-300">
+                  [System.Environment]::SetEnvironmentVariable("ANTHROPIC_BASE_URL", "{{
+                    currentBaseUrl
+                  }}", [System.EnvironmentVariableTarget]::User)
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  [System.Environment]::SetEnvironmentVariable("ANTHROPIC_AUTH_TOKEN",
+                  "your-api-key", [System.EnvironmentVariableTarget]::User)
+                </div>
+              </div>
+              <p class="mb-3 text-sm text-gray-600">View configured environment variables:</p>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># View user-level environment variables</div>
+                <div class="whitespace-nowrap text-gray-300">
+                  [System.Environment]::GetEnvironmentVariable("ANTHROPIC_BASE_URL",
+                  [System.EnvironmentVariableTarget]::User)
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  [System.Environment]::GetEnvironmentVariable("ANTHROPIC_AUTH_TOKEN",
+                  [System.EnvironmentVariableTarget]::User)
+                </div>
+              </div>
+              <p class="mt-2 text-xs text-blue-700">
+                💡 After setting, you need to reopen PowerShell window for changes to take effect.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Verify Environment Variable Setup -->
+        <div class="mt-6 rounded-lg border border-blue-200 bg-blue-50 p-3 sm:p-4">
+          <h6 class="mb-2 font-medium text-blue-800 dark:text-blue-300">Verify Environment Variable Setup</h6>
+          <p class="mb-3 text-sm text-blue-700">
+            After setting environment variables, you can verify if they were set successfully with the following commands:
+          </p>
+
+          <div class="space-y-4">
+            <div>
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                Verify in PowerShell:
+              </h6>
+              <div
+                class="space-y-1 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">echo $env:ANTHROPIC_BASE_URL</div>
+                <div class="whitespace-nowrap text-gray-300">echo $env:ANTHROPIC_AUTH_TOKEN</div>
+              </div>
+            </div>
+
+            <div>
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                Verify in CMD:
+              </h6>
+              <div
+                class="space-y-1 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">echo %ANTHROPIC_BASE_URL%</div>
+                <div class="whitespace-nowrap text-gray-300">echo %ANTHROPIC_AUTH_TOKEN%</div>
+              </div>
+            </div>
+          </div>
+
+          <div class="mt-3 space-y-2">
+            <p class="text-sm text-blue-700">
+              <strong>Expected Output Example:</strong>
+            </p>
+            <div class="rounded bg-gray-100 p-2 font-mono text-sm dark:bg-gray-700">
+              <div>{{ currentBaseUrl }}</div>
+              <div>cr_xxxxxxxxxxxxxxxxxx</div>
+            </div>
+            <p class="text-xs text-blue-700">
+              💡 If output is empty or shows variable name itself, environment variable setup failed, please reconfigure.
+            </p>
+          </div>
+        </div>
+
+        <!-- Gemini CLI Environment Variable Setup -->
+        <div class="mt-8">
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fas fa-robot mr-2 text-green-600" />
+            Configure Gemini CLI Environment Variables
+          </h5>
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            If you use Gemini CLI, you need to set the following environment variables:
+          </p>
+
+          <div class="space-y-4">
+            <div class="rounded-lg border border-green-200 bg-white p-3 sm:p-4">
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                PowerShell Setup Method
+              </h6>
+              <p class="mb-3 text-sm text-gray-600">Run the following commands in PowerShell:</p>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">
+                  $env:CODE_ASSIST_ENDPOINT = "{{ geminiBaseUrl }}"
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  $env:GOOGLE_CLOUD_ACCESS_TOKEN = "your-api-key"
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  $env:GOOGLE_GENAI_USE_GCA = "true"
+                </div>
+              </div>
+              <p class="mt-2 text-xs text-yellow-700">
+                💡 You can use the same API key as Claude Code.
+              </p>
+            </div>
+
+            <div class="rounded-lg border border-green-200 bg-white p-3 sm:p-4">
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                PowerShell Permanent Setup (User Level)
+              </h6>
+              <p class="mb-3 text-sm text-gray-600">Run the following commands in PowerShell:</p>
+              <div
+                class="mb-3 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># Set user-level environment variables (permanent)</div>
+                <div class="whitespace-nowrap text-gray-300">
+                  [System.Environment]::SetEnvironmentVariable("CODE_ASSIST_ENDPOINT", "{{
+                    geminiBaseUrl
+                  }}", [System.EnvironmentVariableTarget]::User)
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  [System.Environment]::SetEnvironmentVariable("GOOGLE_CLOUD_ACCESS_TOKEN",
+                  "your-api-key", [System.EnvironmentVariableTarget]::User)
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  [System.Environment]::SetEnvironmentVariable("GOOGLE_GENAI_USE_GCA", "true",
+                  [System.EnvironmentVariableTarget]::User)
+                </div>
+              </div>
+              <p class="mt-2 text-xs text-blue-700">
+                💡 After setting, you need to reopen PowerShell window for changes to take effect.
+              </p>
+            </div>
+
+            <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
+              <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">
+                Verify Gemini CLI Environment Variables
+              </h6>
+              <p class="mb-3 text-sm text-green-700">Verify in PowerShell:</p>
+              <div
+                class="space-y-1 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">echo $env:CODE_ASSIST_ENDPOINT</div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo $env:GOOGLE_CLOUD_ACCESS_TOKEN
+                </div>
+                <div class="whitespace-nowrap text-gray-300">echo $env:GOOGLE_GENAI_USE_GCA</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Codex Environment Variables Setup -->
+        <div class="mt-8">
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fas fa-code mr-2 text-indigo-600" />
+            Configure Codex Environment Variables
+          </h5>
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            If you use tools that support OpenAI API (such as Codex), you need to set the following environment variables:
+          </p>
+
+          <div class="space-y-4">
+            <div class="rounded-lg border border-yellow-200 bg-yellow-50 p-3 sm:p-4">
+              <h6 class="mb-2 font-medium text-yellow-800">Codex Configuration File</h6>
+              <p class="mb-3 text-sm text-yellow-700">
+                In your
+                <code class="rounded bg-yellow-100 px-1">~/.codex/config.toml</code>
+                file, add the following configuration:
+              </p>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">model_provider = "crs"</div>
+                <div class="whitespace-nowrap text-gray-300">model = "gpt-5"</div>
+                <div class="whitespace-nowrap text-gray-300">model_reasoning_effort = "high"</div>
+                <div class="whitespace-nowrap text-gray-300">disable_response_storage = true</div>
+                <div class="whitespace-nowrap text-gray-300">preferred_auth_method = "apikey"</div>
+                <div class="mt-2"></div>
+                <div class="whitespace-nowrap text-gray-300">[model_providers.crs]</div>
+                <div class="whitespace-nowrap text-gray-300">name = "crs"</div>
+                <div class="whitespace-nowrap text-gray-300">base_url = "{{ openaiBaseUrl }}"</div>
+                <div class="whitespace-nowrap text-gray-300">wire_api = "responses"</div>
+              </div>
+              <p class="mt-3 text-sm text-yellow-700">
+                In your
+                <code class="rounded bg-yellow-100 px-1">~/.codex/auth.json</code>
+                file, configure the API key:
+              </p>
+              <div
+                class="mt-2 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">{</div>
+                <div class="whitespace-nowrap text-gray-300">"OPENAI_API_KEY": "your-api-key"</div>
+                <div class="whitespace-nowrap text-gray-300">}</div>
+              </div>
+              <p class="mt-2 text-xs text-yellow-700">
+                💡 You can use the same API key as Claude Code, in the format cr_xxxxxxxxxx.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Step 4: Start Using -->
+      <div class="mb-6 sm:mb-8">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <span
+            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-orange-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
+            >4</span
+          >
+          Start Using Claude Code
+        </h4>
+        <div
+          class="rounded-xl border border-orange-100 bg-gradient-to-r from-orange-50 to-yellow-50 p-4 sm:p-6"
+        >
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            Now you can start using Claude Code!
+          </p>
+
+          <div class="space-y-4">
+            <div>
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                Launch Claude Code
+              </h6>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">claude</div>
+              </div>
+            </div>
+
+            <div>
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                Using in Specific Projects
+              </h6>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># Navigate to your project directory</div>
+                <div class="whitespace-nowrap text-gray-300">cd C:\path\to\your\project</div>
+                <div class="mb-2 mt-2"># Launch Claude Code</div>
+                <div class="whitespace-nowrap text-gray-300">claude</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Windows Troubleshooting -->
+      <div class="mb-8">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <i class="fas fa-wrench mr-2 text-red-600 sm:mr-3" />
+          Windows Common Issues Resolution
+        </h4>
+        <div class="space-y-4">
+          <details class="rounded-lg border border-gray-200 bg-gray-50">
+            <summary
+              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
+            >
+              "permission denied" error during installation
+            </summary>
+            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
+              <p class="mb-2">This is usually a permission issue. Try the following solutions:</p>
+              <ul class="list-inside list-disc space-y-1 text-sm">
+                <li>Run PowerShell as Administrator</li>
+                <li>
+                  Or configure npm to use user directory: <code
+                    class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                    >npm config set prefix %APPDATA%\npm</code
+                  >
+                </li>
+              </ul>
+            </div>
+          </details>
+
+          <details class="rounded-lg border border-gray-200 bg-gray-50">
+            <summary
+              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
+            >
+              PowerShell Execution Policy Error
+            </summary>
+            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
+              <p class="mb-2">If you encounter execution policy restrictions, run:</p>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">
+                  Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
+                </div>
+              </div>
+            </div>
+          </details>
+
+          <details class="rounded-lg border border-gray-200 bg-gray-50">
+            <summary
+              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
+            >
+              Environment variables not taking effect
+            </summary>
+            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
+              <p class="mb-2">After setting permanent environment variables, you need to:</p>
+              <ul class="list-inside list-disc space-y-1 text-sm">
+                <li>Restart PowerShell or CMD</li>
+                <li>Or log out and log back into Windows</li>
+                <li>
+                  Verify settings: <code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                    >echo $env:ANTHROPIC_BASE_URL</code
+                  >
+                </li>
+              </ul>
+            </div>
+          </details>
+        </div>
+      </div>
+    </div>
+
+    <!-- macOS Tutorial -->
+    <div v-else-if="activeTutorialSystem === 'macos'" class="tutorial-content">
+      <!-- Step 1: Install Node.js -->
+      <div class="mb-6 sm:mb-10">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <span
+            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-blue-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
+            >1</span
+          >
+          Install Node.js Environment
+        </h4>
+        <p class="mb-4 text-gray-600 sm:mb-6">Claude Code requires Node.js environment to run.</p>
+
+        <div
+          class="mb-4 rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4 sm:mb-6 sm:p-6"
+        >
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fab fa-apple mr-2 text-gray-700" />
+            macOS Installation Methods
+          </h5>
+          <div class="mb-4">
+            <p class="mb-3 text-gray-700">Method 1: Using Homebrew (Recommended)</p>
+            <p class="mb-2 text-xs text-gray-600 dark:text-gray-400 sm:text-sm">
+              If you already have Homebrew installed, using it to install Node.js will be more convenient:
+            </p>
+            <div
+              class="overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
+            >
+              <div class="mb-2"># Update Homebrew</div>
+              <div class="whitespace-nowrap text-gray-300">brew update</div>
+              <div class="mb-2 mt-3"># Install Node.js</div>
+              <div class="whitespace-nowrap text-gray-300">brew install node</div>
+            </div>
+          </div>
+          <div class="mb-4">
+            <p class="mb-3 text-gray-700">Method 2: Download from Official Website</p>
+            <ol
+              class="ml-2 list-inside list-decimal space-y-1 text-xs text-gray-600 dark:text-gray-400 sm:ml-4 sm:space-y-2 sm:text-sm"
+            >
+              <li>
+                Visit
+                <code
+                  class="rounded bg-gray-100 px-1 py-1 text-xs dark:bg-gray-700 sm:px-2 sm:text-sm"
+                  >https://nodejs.org/</code
+                >
+              </li>
+              <li>Download the LTS version suitable for macOS</li>
+              <li>
+                Open the downloaded
+                <code
+                  class="rounded bg-gray-100 px-1 py-1 text-xs dark:bg-gray-700 sm:px-2 sm:text-sm"
+                  >.pkg</code
+                >
+                file
+              </li>
+              <li>Follow the installer instructions to complete installation</li>
+            </ol>
+          </div>
+          <div class="rounded-lg border border-gray-200 bg-gray-50 p-3 sm:p-4">
+            <h6 class="mb-2 text-sm font-medium text-gray-800 sm:text-base">macOS Notes</h6>
+            <ul class="space-y-1 text-xs text-gray-700 sm:text-sm">
+              <li>
+                • If you encounter permission issues, you may need to use
+                <code class="rounded bg-gray-200 px-1 text-xs sm:text-sm">sudo</code>
+              </li>
+              <li>• First run may require permission in System Preferences</li>
+              <li>• Recommend using Terminal or iTerm2</li>
+            </ul>
+          </div>
+        </div>
+
+        <!-- Verify Installation -->
+        <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
+          <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">Verify Installation Success</h6>
+          <p class="mb-3 text-sm text-green-700">After installation, open Terminal and enter the following commands:</p>
+          <div
+            class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+          >
+            <div class="whitespace-nowrap text-gray-300">node --version</div>
+            <div class="whitespace-nowrap text-gray-300">npm --version</div>
+          </div>
+          <p class="mt-2 text-sm text-green-700">If version numbers are displayed, the installation was successful!</p>
+        </div>
+      </div>
+
+      <!-- Step 2: Install Claude Code -->
+      <div class="mb-6 sm:mb-10">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <span
+            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-green-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
+            >2</span
+          >
+          Install Claude Code
+        </h4>
+
+        <div
+          class="mb-4 rounded-xl border border-purple-100 bg-gradient-to-r from-purple-50 to-pink-50 p-4 sm:mb-6 sm:p-6"
+        >
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fas fa-download mr-2 text-purple-600" />
+            Install Claude Code
+          </h5>
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            Open Terminal and run the following command:
+          </p>
+          <div
+            class="mb-4 overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
+          >
+            <div class="mb-2"># Install Claude Code globally</div>
+            <div class="whitespace-nowrap text-gray-300">
+              npm install -g @anthropic-ai/claude-code
+            </div>
+          </div>
+          <p class="mb-2 text-sm text-gray-600">If you encounter permission issues, you can use sudo:</p>
+          <div
+            class="overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
+          >
+            <div class="whitespace-nowrap text-gray-300">
+              sudo npm install -g @anthropic-ai/claude-code
+            </div>
+          </div>
+        </div>
+
+        <!-- Verify Installation -->
+        <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
+          <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">Verify Claude Code Installation</h6>
+          <p class="mb-3 text-sm text-green-700">After installation completes, enter the following command to check if installation was successful:</p>
+          <div
+            class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+          >
+            <div class="whitespace-nowrap text-gray-300">claude --version</div>
+          </div>
+          <p class="mt-2 text-sm text-green-700">
+            If version number is displayed, congratulations! Claude Code has been successfully installed.
+          </p>
+        </div>
+      </div>
+
+      <!-- Step 3: Set Environment Variables -->
+      <div class="mb-6 sm:mb-10">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <span
+            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-orange-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
+            >3</span
+          >
+          Set Environment Variables
+        </h4>
+
+        <div
+          class="mb-4 rounded-xl border border-orange-100 bg-gradient-to-r from-orange-50 to-yellow-50 p-4 sm:mb-6 sm:p-6"
+        >
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fas fa-cog mr-2 text-orange-600" />
+            Configure Claude Code Environment Variables
+          </h5>
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            To connect Claude Code to your relay service, you need to set two environment variables:
+          </p>
+
+          <div class="space-y-4">
+            <div class="rounded-lg border border-orange-200 bg-white p-3 sm:p-4">
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                Method 1: Temporary Setup (Current Session)
+              </h6>
+              <p class="mb-3 text-sm text-gray-600">Run the following commands in Terminal:</p>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">
+                  export ANTHROPIC_BASE_URL="{{ currentBaseUrl }}"
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  export ANTHROPIC_AUTH_TOKEN="your-api-key"
+                </div>
+              </div>
+              <p class="mt-2 text-xs text-yellow-700">
+                💡 Remember to replace "your-api-key" with the actual key created in the "API Keys" tab above.
+              </p>
+            </div>
+
+            <div class="rounded-lg border border-orange-200 bg-white p-3 sm:p-4">
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                Method 2: Permanent Setup
+              </h6>
+              <p class="mb-3 text-sm text-gray-600">
+                Edit your shell configuration file (depending on your shell):
+              </p>
+              <div
+                class="mb-3 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># For zsh (default)</div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export ANTHROPIC_BASE_URL="{{ currentBaseUrl }}"' >> ~/.zshrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export ANTHROPIC_AUTH_TOKEN="your-api-key"' >> ~/.zshrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">source ~/.zshrc</div>
+              </div>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># For bash</div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export ANTHROPIC_BASE_URL="{{ currentBaseUrl }}"' >> ~/.bash_profile
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export ANTHROPIC_AUTH_TOKEN="your-api-key"' >> ~/.bash_profile
+                </div>
+                <div class="whitespace-nowrap text-gray-300">source ~/.bash_profile</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Gemini CLI Environment Variable Setup -->
+        <div class="mt-8">
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fas fa-robot mr-2 text-green-600" />
+            Configure Gemini CLI Environment Variables
+          </h5>
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            If you use Gemini CLI, you need to set the following environment variables:
+          </p>
+
+          <div class="space-y-4">
+            <div class="rounded-lg border border-green-200 bg-white p-3 sm:p-4">
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                Terminal Setup Method
+              </h6>
+              <p class="mb-3 text-sm text-gray-600">Run the following commands in Terminal:</p>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">
+                  export CODE_ASSIST_ENDPOINT="{{ geminiBaseUrl }}"
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  export GOOGLE_CLOUD_ACCESS_TOKEN="your-api-key"
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  export GOOGLE_GENAI_USE_GCA="true"
+                </div>
+              </div>
+              <p class="mt-2 text-xs text-yellow-700">
+                💡 You can use the same API key as Claude Code.
+              </p>
+            </div>
+
+            <div class="rounded-lg border border-green-200 bg-white p-3 sm:p-4">
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                Permanent Setup Method
+              </h6>
+              <p class="mb-3 text-sm text-gray-600">Add to your shell configuration file:</p>
+              <div
+                class="mb-3 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># For zsh (default)</div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export CODE_ASSIST_ENDPOINT="{{ geminiBaseUrl }}"' >> ~/.zshrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export GOOGLE_CLOUD_ACCESS_TOKEN="your-api-key"' >> ~/.zshrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export GOOGLE_GENAI_USE_GCA="true"' >> ~/.zshrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">source ~/.zshrc</div>
+              </div>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># For bash</div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export CODE_ASSIST_ENDPOINT="{{ geminiBaseUrl }}"' >> ~/.bash_profile
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export GOOGLE_CLOUD_ACCESS_TOKEN="your-api-key"' >> ~/.bash_profile
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export GOOGLE_GENAI_USE_GCA="true"' >> ~/.bash_profile
+                </div>
+                <div class="whitespace-nowrap text-gray-300">source ~/.bash_profile</div>
+              </div>
+            </div>
+
+            <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
+              <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">
+                Verify Gemini CLI Environment Variables
+              </h6>
+              <p class="mb-3 text-sm text-green-700">Verify in Terminal:</p>
+              <div
+                class="space-y-1 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">echo $CODE_ASSIST_ENDPOINT</div>
+                <div class="whitespace-nowrap text-gray-300">echo $GOOGLE_CLOUD_ACCESS_TOKEN</div>
+                <div class="whitespace-nowrap text-gray-300">echo $GOOGLE_GENAI_USE_GCA</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Codex Environment Variables Setup -->
+        <div class="mt-8">
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fas fa-code mr-2 text-indigo-600" />
+            Configure Codex Environment Variables
+          </h5>
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            If you use tools that support OpenAI API (such as Codex), you need to set the following environment variables:
+          </p>
+
+          <div class="space-y-4">
+            <div class="rounded-lg border border-yellow-200 bg-yellow-50 p-3 sm:p-4">
+              <h6 class="mb-2 font-medium text-yellow-800">Codex Configuration File</h6>
+              <p class="mb-3 text-sm text-yellow-700">
+                In your
+                <code class="rounded bg-yellow-100 px-1">~/.codex/config.toml</code>
+                file, add the following configuration:
+              </p>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">model_provider = "crs"</div>
+                <div class="whitespace-nowrap text-gray-300">model = "gpt-5"</div>
+                <div class="whitespace-nowrap text-gray-300">model_reasoning_effort = "high"</div>
+                <div class="whitespace-nowrap text-gray-300">disable_response_storage = true</div>
+                <div class="whitespace-nowrap text-gray-300">preferred_auth_method = "apikey"</div>
+                <div class="mt-2"></div>
+                <div class="whitespace-nowrap text-gray-300">[model_providers.crs]</div>
+                <div class="whitespace-nowrap text-gray-300">name = "crs"</div>
+                <div class="whitespace-nowrap text-gray-300">base_url = "{{ openaiBaseUrl }}"</div>
+                <div class="whitespace-nowrap text-gray-300">wire_api = "responses"</div>
+              </div>
+              <p class="mt-3 text-sm text-yellow-700">
+                In your
+                <code class="rounded bg-yellow-100 px-1">~/.codex/auth.json</code>
+                file, configure the API key:
+              </p>
+              <div
+                class="mt-2 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">{</div>
+                <div class="whitespace-nowrap text-gray-300">"OPENAI_API_KEY": "your-api-key"</div>
+                <div class="whitespace-nowrap text-gray-300">}</div>
+              </div>
+              <p class="mt-2 text-xs text-yellow-700">
+                💡 You can use the same API key as Claude Code, in the format cr_xxxxxxxxxx.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Step 4: Start Using -->
+      <div class="mb-8">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <span
+            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-yellow-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
+            >4</span
+          >
+          Start Using Claude Code
+        </h4>
+        <div
+          class="rounded-xl border border-yellow-100 bg-gradient-to-r from-yellow-50 to-amber-50 p-4 sm:p-6"
+        >
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            Now you can start using Claude Code!
+          </p>
+
+          <div class="space-y-4">
+            <div>
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                Launch Claude Code
+              </h6>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">claude</div>
+              </div>
+            </div>
+
+            <div>
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                Using in Specific Projects
+              </h6>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># Navigate to your project directory</div>
+                <div class="whitespace-nowrap text-gray-300">cd /path/to/your/project</div>
+                <div class="mb-2 mt-2"># Launch Claude Code</div>
+                <div class="whitespace-nowrap text-gray-300">claude</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- macOS Troubleshooting -->
+      <div class="mb-8">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <i class="fas fa-wrench mr-2 text-red-600 sm:mr-3" />
+          macOS Common Issues Resolution
+        </h4>
+        <div class="space-y-4">
+          <details class="rounded-lg border border-gray-200 bg-gray-50">
+            <summary
+              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
+            >
+              Permission error during installation
+            </summary>
+            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
+              <p class="mb-2">Try the following solutions:</p>
+              <ul class="list-inside list-disc space-y-1 text-sm">
+                <li>
+                  Install with sudo: <code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                    >sudo npm install -g @anthropic-ai/claude-code</code
+                  >
+                </li>
+                <li>
+                  Or configure npm to use user directory: <code
+                    class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                    >npm config set prefix ~/.npm-global</code
+                  >
+                </li>
+              </ul>
+            </div>
+          </details>
+
+          <details class="rounded-lg border border-gray-200 bg-gray-50">
+            <summary
+              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
+            >
+              macOS security settings blocking execution
+            </summary>
+            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
+              <p class="mb-2">If the system blocks Claude Code from running:</p>
+              <ul class="list-inside list-disc space-y-1 text-sm">
+                <li>Open "System Preferences" → "Security & Privacy"</li>
+                <li>Click "Allow Anyway" or "Open Anyway"</li>
+                <li>
+                  Or run in Terminal: <code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                    >sudo spctl --master-disable</code
+                  >
+                </li>
+              </ul>
+            </div>
+          </details>
+
+          <details class="rounded-lg border border-gray-200 bg-gray-50">
+            <summary
+              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
+            >
+              Environment variables not taking effect
+            </summary>
+            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
+              <p class="mb-2">Check the following points:</p>
+              <ul class="list-inside list-disc space-y-1 text-sm">
+                <li>Confirm you modified the correct configuration file (.zshrc or .bash_profile)</li>
+                <li>Restart Terminal</li>
+                <li>
+                  Verify settings: <code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                    >echo $ANTHROPIC_BASE_URL</code
+                  >
+                </li>
+              </ul>
+            </div>
+          </details>
+        </div>
+      </div>
+    </div>
+
+    <!-- Linux Tutorial -->
+    <div v-else-if="activeTutorialSystem === 'linux'" class="tutorial-content">
+      <!-- Step 1: Install Node.js -->
+      <div class="mb-6 sm:mb-10">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <span
+            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-blue-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
+            >1</span
+          >
+          Install Node.js Environment
+        </h4>
+        <p class="mb-4 text-gray-600 sm:mb-6">Claude Code requires Node.js environment to run.</p>
+
+        <div
+          class="mb-4 rounded-xl border border-orange-100 bg-gradient-to-r from-orange-50 to-red-50 p-4 sm:mb-6 sm:p-6"
+        >
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fab fa-ubuntu mr-2 text-orange-600" />
+            Linux Installation Methods
+          </h5>
+          <div class="mb-4">
+            <p class="mb-3 text-gray-700">Method 1: Using Official Repository (Recommended)</p>
+            <div
+              class="overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
+            >
+              <div class="mb-2"># Add NodeSource repository</div>
+              <div class="whitespace-nowrap text-gray-300">
+                curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
+              </div>
+              <div class="mb-2 mt-3"># Install Node.js</div>
+              <div class="whitespace-nowrap text-gray-300">sudo apt-get install -y nodejs</div>
+            </div>
+          </div>
+          <div class="mb-4">
+            <p class="mb-3 text-gray-700">Method 2: Using System Package Manager</p>
+            <p class="mb-2 text-xs text-gray-600 dark:text-gray-400 sm:text-sm">
+              Although the version may not be the latest, it's sufficient for basic use:
+            </p>
+            <div
+              class="overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
+            >
+              <div class="mb-2"># Ubuntu/Debian</div>
+              <div class="whitespace-nowrap text-gray-300">sudo apt update</div>
+              <div class="whitespace-nowrap text-gray-300">sudo apt install nodejs npm</div>
+              <div class="mb-2 mt-3"># CentOS/RHEL/Fedora</div>
+              <div class="whitespace-nowrap text-gray-300">sudo dnf install nodejs npm</div>
+            </div>
+          </div>
+          <div class="rounded-lg border border-orange-200 bg-orange-50 p-3 sm:p-4">
+            <h6 class="mb-2 text-sm font-medium text-orange-800 sm:text-base">Linux Notes</h6>
+            <ul class="space-y-1 text-xs text-orange-700 sm:text-sm">
+              <li>• Some distributions may require additional dependencies</li>
+              <li>• If you encounter permission issues, use <code class="rounded bg-orange-200 px-1">sudo</code></li>
+              <li>• Ensure your user has write permissions to npm's global directory</li>
+            </ul>
+          </div>
+        </div>
+
+        <!-- Verify Installation -->
+        <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
+          <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">Verify Installation Success</h6>
+          <p class="mb-3 text-sm text-green-700">After installation, open terminal and enter the following commands:</p>
+          <div
+            class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+          >
+            <div class="whitespace-nowrap text-gray-300">node --version</div>
+            <div class="whitespace-nowrap text-gray-300">npm --version</div>
+          </div>
+          <p class="mt-2 text-sm text-green-700">If version numbers are displayed, the installation was successful!</p>
+        </div>
+      </div>
+
+      <!-- Step 2: Install Claude Code -->
+      <div class="mb-6 sm:mb-10">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <span
+            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-green-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
+            >2</span
+          >
+          Install Claude Code
+        </h4>
+
+        <div
+          class="mb-4 rounded-xl border border-purple-100 bg-gradient-to-r from-purple-50 to-pink-50 p-4 sm:mb-6 sm:p-6"
+        >
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fas fa-download mr-2 text-purple-600" />
+            Install Claude Code
+          </h5>
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            Open terminal and run the following command:
+          </p>
+          <div
+            class="mb-4 overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
+          >
+            <div class="mb-2"># Install Claude Code globally</div>
+            <div class="whitespace-nowrap text-gray-300">
+              npm install -g @anthropic-ai/claude-code
+            </div>
+          </div>
+          <p class="mb-2 text-sm text-gray-600">If you encounter permission issues, you can use sudo:</p>
+          <div
+            class="overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
+          >
+            <div class="whitespace-nowrap text-gray-300">
+              sudo npm install -g @anthropic-ai/claude-code
+            </div>
+          </div>
+        </div>
+
+        <!-- Verify Installation -->
+        <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
+          <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">Verify Claude Code Installation</h6>
+          <p class="mb-3 text-sm text-green-700">After installation completes, enter the following command to check if installation was successful:</p>
+          <div
+            class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+          >
+            <div class="whitespace-nowrap text-gray-300">claude --version</div>
+          </div>
+          <p class="mt-2 text-sm text-green-700">
+            If version number is displayed, congratulations! Claude Code has been successfully installed.
+          </p>
+        </div>
+      </div>
+
+      <!-- Step 3: Set Environment Variables -->
+      <div class="mb-6 sm:mb-10">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <span
+            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-orange-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
+            >3</span
+          >
+          Set Environment Variables
+        </h4>
+
+        <div
+          class="mb-4 rounded-xl border border-orange-100 bg-gradient-to-r from-orange-50 to-yellow-50 p-4 sm:mb-6 sm:p-6"
+        >
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fas fa-cog mr-2 text-orange-600" />
+            Configure Claude Code Environment Variables
+          </h5>
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            To connect Claude Code to your relay service, you need to set two environment variables:
+          </p>
+
+          <div class="space-y-4">
+            <div class="rounded-lg border border-orange-200 bg-white p-3 sm:p-4">
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                Method 1: Temporary Setup (Current Session)
+              </h6>
+              <p class="mb-3 text-sm text-gray-600">Run the following commands in terminal:</p>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">
+                  export ANTHROPIC_BASE_URL="{{ currentBaseUrl }}"
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  export ANTHROPIC_AUTH_TOKEN="your-api-key"
+                </div>
+              </div>
+              <p class="mt-2 text-xs text-yellow-700">
+                💡 Remember to replace "your-api-key" with the actual key created in the "API Keys" tab above.
+              </p>
+            </div>
+
+            <div class="rounded-lg border border-orange-200 bg-white p-3 sm:p-4">
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                Method 2: Permanent Setup
+              </h6>
+              <p class="mb-3 text-sm text-gray-600">Edit your shell configuration file:</p>
+              <div
+                class="mb-3 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># For bash (default)</div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export ANTHROPIC_BASE_URL="{{ currentBaseUrl }}"' >> ~/.bashrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export ANTHROPIC_AUTH_TOKEN="your-api-key"' >> ~/.bashrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">source ~/.bashrc</div>
+              </div>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># For zsh</div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export ANTHROPIC_BASE_URL="{{ currentBaseUrl }}"' >> ~/.zshrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export ANTHROPIC_AUTH_TOKEN="your-api-key"' >> ~/.zshrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">source ~/.zshrc</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Gemini CLI Environment Variable Setup -->
+        <div class="mt-8">
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fas fa-robot mr-2 text-green-600" />
+            Configure Gemini CLI Environment Variables
+          </h5>
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            If you use Gemini CLI, you need to set the following environment variables:
+          </p>
+
+          <div class="space-y-4">
+            <div class="rounded-lg border border-green-200 bg-white p-3 sm:p-4">
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                Terminal Setup Method
+              </h6>
+              <p class="mb-3 text-sm text-gray-600">Run the following commands in terminal:</p>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">
+                  export CODE_ASSIST_ENDPOINT="{{ geminiBaseUrl }}"
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  export GOOGLE_CLOUD_ACCESS_TOKEN="your-api-key"
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  export GOOGLE_GENAI_USE_GCA="true"
+                </div>
+              </div>
+              <p class="mt-2 text-xs text-yellow-700">
+                💡 You can use the same API key as Claude Code.
+              </p>
+            </div>
+
+            <div class="rounded-lg border border-green-200 bg-white p-3 sm:p-4">
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                Permanent Setup Method
+              </h6>
+              <p class="mb-3 text-sm text-gray-600">Add to your shell configuration file:</p>
+              <div
+                class="mb-3 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># For bash (default)</div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export CODE_ASSIST_ENDPOINT="{{ geminiBaseUrl }}"' >> ~/.bashrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export GOOGLE_CLOUD_ACCESS_TOKEN="your-api-key"' >> ~/.bashrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export GOOGLE_GENAI_USE_GCA="true"' >> ~/.bashrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">source ~/.bashrc</div>
+              </div>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># For zsh</div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export CODE_ASSIST_ENDPOINT="{{ geminiBaseUrl }}"' >> ~/.zshrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export GOOGLE_CLOUD_ACCESS_TOKEN="your-api-key"' >> ~/.zshrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export GOOGLE_GENAI_USE_GCA="true"' >> ~/.zshrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">source ~/.zshrc</div>
+              </div>
+            </div>
+
+            <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
+              <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">
+                Verify Gemini CLI Environment Variables
+              </h6>
+              <p class="mb-3 text-sm text-green-700">Verify in terminal:</p>
+              <div
+                class="space-y-1 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">echo $CODE_ASSIST_ENDPOINT</div>
+                <div class="whitespace-nowrap text-gray-300">echo $GOOGLE_CLOUD_ACCESS_TOKEN</div>
+                <div class="whitespace-nowrap text-gray-300">echo $GOOGLE_GENAI_USE_GCA</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Codex Environment Variables Setup -->
+        <div class="mt-8">
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fas fa-code mr-2 text-indigo-600" />
+            Configure Codex Environment Variables
+          </h5>
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            If you use tools that support OpenAI API (such as Codex), you need to set the following environment variables:
+          </p>
+
+          <div class="space-y-4">
+            <div class="rounded-lg border border-yellow-200 bg-yellow-50 p-3 sm:p-4">
+              <h6 class="mb-2 font-medium text-yellow-800">Codex Configuration File</h6>
+              <p class="mb-3 text-sm text-yellow-700">
+                In your
+                <code class="rounded bg-yellow-100 px-1">~/.codex/config.toml</code>
+                file, add the following configuration:
+              </p>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">model_provider = "crs"</div>
+                <div class="whitespace-nowrap text-gray-300">model = "gpt-5"</div>
+                <div class="whitespace-nowrap text-gray-300">model_reasoning_effort = "high"</div>
+                <div class="whitespace-nowrap text-gray-300">disable_response_storage = true</div>
+                <div class="whitespace-nowrap text-gray-300">preferred_auth_method = "apikey"</div>
+                <div class="mt-2"></div>
+                <div class="whitespace-nowrap text-gray-300">[model_providers.crs]</div>
+                <div class="whitespace-nowrap text-gray-300">name = "crs"</div>
+                <div class="whitespace-nowrap text-gray-300">base_url = "{{ openaiBaseUrl }}"</div>
+                <div class="whitespace-nowrap text-gray-300">wire_api = "responses"</div>
+              </div>
+              <p class="mt-3 text-sm text-yellow-700">
+                In your
+                <code class="rounded bg-yellow-100 px-1">~/.codex/auth.json</code>
+                file, configure the API key:
+              </p>
+              <div
+                class="mt-2 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">{</div>
+                <div class="whitespace-nowrap text-gray-300">"OPENAI_API_KEY": "your-api-key"</div>
+                <div class="whitespace-nowrap text-gray-300">}</div>
+              </div>
+              <p class="mt-2 text-xs text-yellow-700">
+                💡 You can use the same API key as Claude Code, in the format cr_xxxxxxxxxx.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Step 4: Start Using -->
+      <div class="mb-8">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <span
+            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-yellow-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
+            >4</span
+          >
+          Start Using Claude Code
+        </h4>
+        <div
+          class="rounded-xl border border-yellow-100 bg-gradient-to-r from-yellow-50 to-amber-50 p-4 sm:p-6"
+        >
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            Now you can start using Claude Code!
+          </p>
+
+          <div class="space-y-4">
+            <div>
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                Launch Claude Code
+              </h6>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">claude</div>
+              </div>
+            </div>
+
+            <div>
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                Using in Specific Projects
+              </h6>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># Navigate to your project directory</div>
+                <div class="whitespace-nowrap text-gray-300">cd /path/to/your/project</div>
+                <div class="mb-2 mt-2"># Launch Claude Code</div>
+                <div class="whitespace-nowrap text-gray-300">claude</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Linux Troubleshooting -->
+      <div class="mb-8">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <i class="fas fa-wrench mr-2 text-red-600 sm:mr-3" />
+          Linux Common Issues Resolution
+        </h4>
+        <div class="space-y-4">
+          <details class="rounded-lg border border-gray-200 bg-gray-50">
+            <summary
+              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
+            >
+              Permission error during installation
+            </summary>
+            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
+              <p class="mb-2">Try the following solutions:</p>
+              <ul class="list-inside list-disc space-y-1 text-sm">
+                <li>
+                  Install with sudo: <code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                    >sudo npm install -g @anthropic-ai/claude-code</code
+                  >
+                </li>
+                <li>
+                  Or configure npm to use user directory: <code
+                    class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                    >npm config set prefix ~/.npm-global</code
+                  >
+                </li>
+                <li>
+                  Then add to PATH: <code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                    >export PATH=~/.npm-global/bin:$PATH</code
+                  >
+                </li>
+              </ul>
+            </div>
+          </details>
+
+          <details class="rounded-lg border border-gray-200 bg-gray-50">
+            <summary
+              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
+            >
+              Missing dependencies
+            </summary>
+            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
+              <p class="mb-2">Some Linux distributions need additional dependencies:</p>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># Ubuntu/Debian</div>
+                <div class="whitespace-nowrap text-gray-300">sudo apt install build-essential</div>
+                <div class="mb-2 mt-2"># CentOS/RHEL</div>
+                <div class="whitespace-nowrap text-gray-300">
+                  sudo dnf groupinstall "Development Tools"
+                </div>
+              </div>
+            </div>
+          </details>
+
+          <details class="rounded-lg border border-gray-200 bg-gray-50">
+            <summary
+              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
+            >
+              Environment variables not taking effect
+            </summary>
+            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
+              <p class="mb-2">Check the following points:</p>
+              <ul class="list-inside list-disc space-y-1 text-sm">
+                <li>Confirm you modified the correct configuration file (.bashrc or .zshrc)</li>
+                <li>
+                  Restart terminal or run
+                  <code class="rounded bg-gray-200 px-1 text-xs sm:text-sm">source ~/.bashrc</code>
+                </li>
+                <li>
+                  Verify settings: <code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                    >echo $ANTHROPIC_BASE_URL</code
+                  >
+                </li>
+              </ul>
+            </div>
+          </details>
+        </div>
+      </div>
+    </div>
+
+    <!-- Conclusion -->
+    <div
+      class="rounded-xl bg-gradient-to-r from-blue-500 to-purple-600 p-4 text-center text-white sm:p-6"
+    >
+      <h5 class="mb-2 text-lg font-semibold sm:text-xl">🎉 Congratulations!</h5>
+      <p class="mb-3 text-sm text-blue-100 sm:mb-4 sm:text-base">
+        You have successfully installed and configured Claude Code. Now you can start enjoying the convenience brought by AI programming assistant.
+      </p>
+      <p class="text-xs text-blue-200 sm:text-sm">
+        If you encounter any issues during use, you can check the official documentation or community discussions for help.
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+
+// Current system selection
+const activeTutorialSystem = ref('windows')
+
+// System list
+const tutorialSystems = [
+  { key: 'windows', name: 'Windows', icon: 'fab fa-windows' },
+  { key: 'macos', name: 'macOS', icon: 'fab fa-apple' },
+  { key: 'linux', name: 'Linux / WSL2', icon: 'fab fa-linux' }
+]
+
+// Get base URL prefix
+const getBaseUrlPrefix = () => {
+  // Prioritize custom prefix configured by environment variables
+  const customPrefix = import.meta.env.VITE_API_BASE_PREFIX
+  if (customPrefix) {
+    // Remove trailing slash
+    return customPrefix.replace(/\/$/, '')
+  }
+
+  // Otherwise use current browser access address
+  // More robust method to get origin, compatible with older browsers and special environments
+  let origin = ''
+
+  if (window.location.origin) {
+    // Modern browsers directly support origin
+    origin = window.location.origin
+  } else {
+    // Compatibility handling for older browsers or special environments
+    const protocol = window.location.protocol
+    const hostname = window.location.hostname
+    const port = window.location.port
+
+    origin = protocol + '//' + hostname
+
+    // Only add port number when it's not the default port
+    if (
+      port &&
+      ((protocol === 'http:' && port !== '80') || (protocol === 'https:' && port !== '443'))
+    ) {
+      origin += ':' + port
+    }
+  }
+
+  // If still can't get it, deduce from current page URL
+  if (!origin) {
+    const currentUrl = window.location.href
+    const pathStart = currentUrl.indexOf('/', 8) // Skip http:// or https://
+    if (pathStart !== -1) {
+      origin = currentUrl.substring(0, pathStart)
+    } else {
+      // Final fallback solution, use relative path
+      console.warn('Unable to get complete origin, will use relative path')
+      return ''
+    }
+  }
+
+  return origin
+}
+
+// Current base URL - Claude Code
+const currentBaseUrl = computed(() => {
+  return getBaseUrlPrefix() + '/api'
+})
+
+// Gemini CLI base URL
+const geminiBaseUrl = computed(() => {
+  return getBaseUrlPrefix() + '/gemini'
+})
+
+// OpenAI/Codex base URL
+const openaiBaseUrl = computed(() => {
+  return getBaseUrlPrefix() + '/openai'
+})
+</script>
+
+<style scoped>
+.tutorial-container {
+  min-height: calc(100vh - 300px);
+}
+
+.tutorial-content {
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+code {
+  font-family: 'Fira Code', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+}
+
+.tutorial-content h4 {
+  scroll-margin-top: 100px;
+}
+
+.tutorial-content .bg-gradient-to-r {
+  transition: all 0.2s ease;
+}
+
+.tutorial-content .bg-gradient-to-r:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+</style>
diff --git a/web/admin-spa/src/views/tutorials/TutorialView-zh-cn.vue b/web/admin-spa/src/views/tutorials/TutorialView-zh-cn.vue
new file mode 100644
index 00000000..ac938825
--- /dev/null
+++ b/web/admin-spa/src/views/tutorials/TutorialView-zh-cn.vue
@@ -0,0 +1,1690 @@
+<template>
+  <div class="card p-3 sm:p-6">
+    <div class="mb-4 sm:mb-8">
+      <h3
+        class="mb-3 flex items-center text-xl font-bold text-gray-900 dark:text-gray-100 sm:mb-4 sm:text-2xl"
+      >
+        <i class="fas fa-graduation-cap mr-2 text-blue-600 sm:mr-3" />
+        Claude Code 使用教程
+      </h3>
+      <p class="text-sm text-gray-600 dark:text-gray-400 sm:text-lg">
+        跟着这个教程，你可以轻松在自己的电脑上安装并使用 Claude Code。
+      </p>
+    </div>
+
+    <!-- 系统选择标签 -->
+    <div class="mb-4 sm:mb-8">
+      <div class="flex flex-wrap gap-1 rounded-xl bg-gray-100 p-1 dark:bg-gray-700 sm:gap-2 sm:p-2">
+        <button
+          v-for="system in tutorialSystems"
+          :key="system.key"
+          :class="[
+            'flex flex-1 items-center justify-center gap-1 rounded-lg px-3 py-2 text-xs font-semibold transition-all duration-300 sm:gap-2 sm:px-6 sm:py-3 sm:text-sm',
+            activeTutorialSystem === system.key
+              ? 'bg-white text-blue-600 shadow-sm dark:bg-gray-800'
+              : 'text-gray-600 hover:bg-white/50 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200'
+          ]"
+          @click="activeTutorialSystem = system.key"
+        >
+          <i :class="system.icon" />
+          {{ system.name }}
+        </button>
+      </div>
+    </div>
+
+    <!-- Windows 教程 -->
+    <div v-if="activeTutorialSystem === 'windows'" class="tutorial-content">
+      <!-- 第一步：安装 Node.js -->
+      <div class="mb-4 sm:mb-10 sm:mb-6">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <span
+            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-blue-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
+            >1</span
+          >
+          安装 Node.js 环境
+        </h4>
+        <p class="mb-4 text-sm text-gray-600 dark:text-gray-400 sm:mb-4 sm:mb-6 sm:text-base">
+          Claude Code 需要 Node.js 环境才能运行。
+        </p>
+
+        <div
+          class="mb-4 rounded-xl border border-blue-100 bg-gradient-to-r from-blue-50 to-indigo-50 p-4 sm:mb-4 sm:mb-6 sm:p-6"
+        >
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fab fa-windows mr-2 text-blue-600" />
+            Windows 安装方法
+          </h5>
+          <div class="mb-3 sm:mb-4">
+            <p class="mb-2 text-sm text-gray-700 dark:text-gray-600 sm:mb-3 sm:text-base">
+              方法一：官网下载（推荐）
+            </p>
+            <ol
+              class="ml-2 list-inside list-decimal space-y-1 text-xs text-gray-600 dark:text-gray-600 sm:ml-4 sm:space-y-2 sm:text-sm"
+            >
+              <li>
+                打开浏览器访问
+                <code
+                  class="rounded bg-gray-100 px-1 py-1 text-xs dark:bg-gray-700 sm:px-2 sm:text-sm"
+                  >https://nodejs.org/</code
+                >
+              </li>
+              <li>点击 "LTS" 版本进行下载（推荐长期支持版本）</li>
+              <li>
+                下载完成后双击
+                <code
+                  class="rounded bg-gray-100 px-1 py-1 text-xs dark:bg-gray-700 sm:px-2 sm:text-sm"
+                  >.msi</code
+                >
+                文件
+              </li>
+              <li>按照安装向导完成安装，保持默认设置即可</li>
+            </ol>
+          </div>
+          <div class="mb-3 sm:mb-4">
+            <p class="mb-2 text-sm text-gray-700 dark:text-gray-600 sm:mb-3 sm:text-base">
+              方法二：使用包管理器
+            </p>
+            <p class="mb-2 text-xs text-gray-600 dark:text-gray-400 sm:text-sm">
+              如果你安装了 Chocolatey 或 Scoop，可以使用命令行安装：
+            </p>
+            <div
+              class="overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
+            >
+              <div class="mb-2"># 使用 Chocolatey</div>
+              <div class="whitespace-nowrap text-gray-300">choco install nodejs</div>
+              <div class="mb-2 mt-3"># 或使用 Scoop</div>
+              <div class="whitespace-nowrap text-gray-300">scoop install nodejs</div>
+            </div>
+          </div>
+          <div class="rounded-lg border border-blue-200 bg-blue-50 p-3 sm:p-4">
+            <h6 class="mb-2 text-sm font-medium text-blue-800 sm:text-base">Windows 注意事项</h6>
+            <ul class="space-y-1 text-xs text-blue-700 sm:text-sm sm:text-xs">
+              <li>• 建议使用 PowerShell 而不是 CMD</li>
+              <li>• 如果遇到权限问题，尝试以管理员身份运行</li>
+              <li>• 某些杀毒软件可能会误报，需要添加白名单</li>
+            </ul>
+          </div>
+        </div>
+
+        <!-- 验证安装 -->
+        <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
+          <h6 class="mb-2 text-sm font-medium text-green-800 sm:text-base">验证安装是否成功</h6>
+          <p class="mb-2 text-xs text-green-700 sm:mb-3 sm:text-sm">
+            安装完成后，打开 PowerShell 或 CMD，输入以下命令：
+          </p>
+          <div
+            class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+          >
+            <div class="whitespace-nowrap text-gray-300">node --version</div>
+            <div class="whitespace-nowrap text-gray-300">npm --version</div>
+          </div>
+          <p class="mt-2 text-xs text-green-700 sm:text-sm">如果显示版本号，说明安装成功了！</p>
+        </div>
+      </div>
+
+      <!-- 第二步：安装 Claude Code -->
+      <div class="mb-4 sm:mb-10 sm:mb-6">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <span
+            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-green-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
+            >2</span
+          >
+          安装 Claude Code
+        </h4>
+
+        <div
+          class="mb-4 rounded-xl border border-green-100 bg-gradient-to-r from-green-50 to-emerald-50 p-4 sm:mb-6 sm:p-6"
+        >
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fas fa-download mr-2 text-green-600" />
+            安装 Claude Code
+          </h5>
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            打开 PowerShell 或 CMD，运行以下命令：
+          </p>
+          <div
+            class="mb-4 overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
+          >
+            <div class="mb-2"># 全局安装 Claude Code</div>
+            <div class="whitespace-nowrap text-gray-300">
+              npm install -g @anthropic-ai/claude-code
+            </div>
+          </div>
+          <p class="text-sm text-gray-600 dark:text-gray-400">
+            这个命令会从 npm 官方仓库下载并安装最新版本的 Claude Code。
+          </p>
+
+          <div class="mt-4 rounded-lg border border-blue-200 bg-blue-50 p-3 sm:p-4">
+            <h6 class="mb-2 text-sm font-medium text-blue-800 sm:text-base">提示</h6>
+            <ul class="space-y-1 text-xs text-blue-700 sm:text-sm">
+              <li>• 建议使用 PowerShell 而不是 CMD，功能更强大</li>
+              <li>• 如果遇到权限问题，以管理员身份运行 PowerShell</li>
+            </ul>
+          </div>
+        </div>
+
+        <!-- 验证安装 -->
+        <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
+          <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">验证 Claude Code 安装</h6>
+          <p class="mb-3 text-sm text-green-700">安装完成后，输入以下命令检查是否安装成功：</p>
+          <div
+            class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+          >
+            <div class="whitespace-nowrap text-gray-300">claude --version</div>
+          </div>
+          <p class="mt-2 text-sm text-green-700">
+            如果显示版本号，恭喜你！Claude Code 已经成功安装了。
+          </p>
+        </div>
+      </div>
+
+      <!-- 第三步：设置环境变量 -->
+      <div class="mb-6 sm:mb-10">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <span
+            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-purple-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
+            >3</span
+          >
+          设置环境变量
+        </h4>
+
+        <div
+          class="mb-4 rounded-xl border border-purple-100 bg-gradient-to-r from-purple-50 to-pink-50 p-4 sm:mb-6 sm:p-6"
+        >
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fas fa-cog mr-2 text-purple-600" />
+            配置 Claude Code 环境变量
+          </h5>
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            为了让 Claude Code 连接到你的中转服务，需要设置两个环境变量：
+          </p>
+
+          <div class="space-y-4">
+            <div
+              class="rounded-lg border border-purple-200 bg-white p-3 dark:border-purple-700 dark:bg-gray-800 sm:p-4"
+            >
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                方法一：PowerShell 临时设置（当前会话）
+              </h6>
+              <p class="mb-3 text-sm text-gray-600">在 PowerShell 中运行以下命令：</p>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">
+                  $env:ANTHROPIC_BASE_URL = "{{ currentBaseUrl }}"
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  $env:ANTHROPIC_AUTH_TOKEN = "你的API密钥"
+                </div>
+              </div>
+              <p class="mt-2 text-xs text-yellow-700">
+                💡 记得将 "你的API密钥" 替换为在上方 "API Keys" 标签页中创建的实际密钥。
+              </p>
+            </div>
+
+            <div
+              class="rounded-lg border border-purple-200 bg-white p-3 dark:border-purple-700 dark:bg-gray-800 sm:p-4"
+            >
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                方法二：PowerShell 永久设置（用户级）
+              </h6>
+              <p class="mb-3 text-sm text-gray-600">
+                在 PowerShell 中运行以下命令设置用户级环境变量：
+              </p>
+              <div
+                class="mb-3 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># 设置用户级环境变量（永久生效）</div>
+                <div class="whitespace-nowrap text-gray-300">
+                  [System.Environment]::SetEnvironmentVariable("ANTHROPIC_BASE_URL", "{{
+                    currentBaseUrl
+                  }}", [System.EnvironmentVariableTarget]::User)
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  [System.Environment]::SetEnvironmentVariable("ANTHROPIC_AUTH_TOKEN",
+                  "你的API密钥", [System.EnvironmentVariableTarget]::User)
+                </div>
+              </div>
+              <p class="mb-3 text-sm text-gray-600">查看已设置的环境变量：</p>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># 查看用户级环境变量</div>
+                <div class="whitespace-nowrap text-gray-300">
+                  [System.Environment]::GetEnvironmentVariable("ANTHROPIC_BASE_URL",
+                  [System.EnvironmentVariableTarget]::User)
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  [System.Environment]::GetEnvironmentVariable("ANTHROPIC_AUTH_TOKEN",
+                  [System.EnvironmentVariableTarget]::User)
+                </div>
+              </div>
+              <p class="mt-2 text-xs text-blue-700">
+                💡 设置后需要重新打开 PowerShell 窗口才能生效。
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <!-- 验证环境变量设置 -->
+        <div class="mt-6 rounded-lg border border-blue-200 bg-blue-50 p-3 sm:p-4">
+          <h6 class="mb-2 font-medium text-blue-800 dark:text-blue-300">验证环境变量设置</h6>
+          <p class="mb-3 text-sm text-blue-700">
+            设置完环境变量后，可以通过以下命令验证是否设置成功：
+          </p>
+
+          <div class="space-y-4">
+            <div>
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                在 PowerShell 中验证：
+              </h6>
+              <div
+                class="space-y-1 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">echo $env:ANTHROPIC_BASE_URL</div>
+                <div class="whitespace-nowrap text-gray-300">echo $env:ANTHROPIC_AUTH_TOKEN</div>
+              </div>
+            </div>
+
+            <div>
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                在 CMD 中验证：
+              </h6>
+              <div
+                class="space-y-1 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">echo %ANTHROPIC_BASE_URL%</div>
+                <div class="whitespace-nowrap text-gray-300">echo %ANTHROPIC_AUTH_TOKEN%</div>
+              </div>
+            </div>
+          </div>
+
+          <div class="mt-3 space-y-2">
+            <p class="text-sm text-blue-700">
+              <strong>预期输出示例：</strong>
+            </p>
+            <div class="rounded bg-gray-100 p-2 font-mono text-sm dark:bg-gray-700">
+              <div>{{ currentBaseUrl }}</div>
+              <div>cr_xxxxxxxxxxxxxxxxxx</div>
+            </div>
+            <p class="text-xs text-blue-700">
+              💡 如果输出为空或显示变量名本身，说明环境变量设置失败，请重新设置。
+            </p>
+          </div>
+        </div>
+
+        <!-- Gemini CLI 环境变量设置 -->
+        <div class="mt-8">
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fas fa-robot mr-2 text-green-600" />
+            配置 Gemini CLI 环境变量
+          </h5>
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            如果你使用 Gemini CLI，需要设置以下环境变量：
+          </p>
+
+          <div class="space-y-4">
+            <div class="rounded-lg border border-green-200 bg-white p-3 sm:p-4">
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                PowerShell 设置方法
+              </h6>
+              <p class="mb-3 text-sm text-gray-600">在 PowerShell 中运行以下命令：</p>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">
+                  $env:CODE_ASSIST_ENDPOINT = "{{ geminiBaseUrl }}"
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  $env:GOOGLE_CLOUD_ACCESS_TOKEN = "你的API密钥"
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  $env:GOOGLE_GENAI_USE_GCA = "true"
+                </div>
+              </div>
+              <p class="mt-2 text-xs text-yellow-700">
+                💡 使用与 Claude Code 相同的 API 密钥即可。
+              </p>
+            </div>
+
+            <div class="rounded-lg border border-green-200 bg-white p-3 sm:p-4">
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                PowerShell 永久设置（用户级）
+              </h6>
+              <p class="mb-3 text-sm text-gray-600">在 PowerShell 中运行以下命令：</p>
+              <div
+                class="mb-3 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># 设置用户级环境变量（永久生效）</div>
+                <div class="whitespace-nowrap text-gray-300">
+                  [System.Environment]::SetEnvironmentVariable("CODE_ASSIST_ENDPOINT", "{{
+                    geminiBaseUrl
+                  }}", [System.EnvironmentVariableTarget]::User)
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  [System.Environment]::SetEnvironmentVariable("GOOGLE_CLOUD_ACCESS_TOKEN",
+                  "你的API密钥", [System.EnvironmentVariableTarget]::User)
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  [System.Environment]::SetEnvironmentVariable("GOOGLE_GENAI_USE_GCA", "true",
+                  [System.EnvironmentVariableTarget]::User)
+                </div>
+              </div>
+              <p class="mt-2 text-xs text-blue-700">
+                💡 设置后需要重新打开 PowerShell 窗口才能生效。
+              </p>
+            </div>
+
+            <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
+              <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">
+                验证 Gemini CLI 环境变量
+              </h6>
+              <p class="mb-3 text-sm text-green-700">在 PowerShell 中验证：</p>
+              <div
+                class="space-y-1 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">echo $env:CODE_ASSIST_ENDPOINT</div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo $env:GOOGLE_CLOUD_ACCESS_TOKEN
+                </div>
+                <div class="whitespace-nowrap text-gray-300">echo $env:GOOGLE_GENAI_USE_GCA</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Codex 环境变量设置 -->
+        <div class="mt-8">
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fas fa-code mr-2 text-indigo-600" />
+            配置 Codex 环境变量
+          </h5>
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            如果你使用支持 OpenAI API 的工具（如 Codex），需要设置以下环境变量：
+          </p>
+
+          <div class="space-y-4">
+            <div class="rounded-lg border border-yellow-200 bg-yellow-50 p-3 sm:p-4">
+              <h6 class="mb-2 font-medium text-yellow-800">Codex 配置文件</h6>
+              <p class="mb-3 text-sm text-yellow-700">
+                在
+                <code class="rounded bg-yellow-100 px-1">~/.codex/config.toml</code>
+                文件中添加以下配置：
+              </p>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">model_provider = "crs"</div>
+                <div class="whitespace-nowrap text-gray-300">model = "gpt-5"</div>
+                <div class="whitespace-nowrap text-gray-300">model_reasoning_effort = "high"</div>
+                <div class="whitespace-nowrap text-gray-300">disable_response_storage = true</div>
+                <div class="whitespace-nowrap text-gray-300">preferred_auth_method = "apikey"</div>
+                <div class="mt-2"></div>
+                <div class="whitespace-nowrap text-gray-300">[model_providers.crs]</div>
+                <div class="whitespace-nowrap text-gray-300">name = "crs"</div>
+                <div class="whitespace-nowrap text-gray-300">base_url = "{{ openaiBaseUrl }}"</div>
+                <div class="whitespace-nowrap text-gray-300">wire_api = "responses"</div>
+              </div>
+              <p class="mt-3 text-sm text-yellow-700">
+                在
+                <code class="rounded bg-yellow-100 px-1">~/.codex/auth.json</code>
+                文件中配置API密钥：
+              </p>
+              <div
+                class="mt-2 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">{</div>
+                <div class="whitespace-nowrap text-gray-300">"OPENAI_API_KEY": "你的API密钥"</div>
+                <div class="whitespace-nowrap text-gray-300">}</div>
+              </div>
+              <p class="mt-2 text-xs text-yellow-700">
+                💡 使用与 Claude Code 相同的 API 密钥即可，格式如 cr_xxxxxxxxxx。
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 第四步：开始使用 -->
+      <div class="mb-6 sm:mb-8">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <span
+            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-orange-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
+            >4</span
+          >
+          开始使用 Claude Code
+        </h4>
+        <div
+          class="rounded-xl border border-orange-100 bg-gradient-to-r from-orange-50 to-yellow-50 p-4 sm:p-6"
+        >
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            现在你可以开始使用 Claude Code 了！
+          </p>
+
+          <div class="space-y-4">
+            <div>
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                启动 Claude Code
+              </h6>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">claude</div>
+              </div>
+            </div>
+
+            <div>
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                在特定项目中使用
+              </h6>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># 进入你的项目目录</div>
+                <div class="whitespace-nowrap text-gray-300">cd C:\path\to\your\project</div>
+                <div class="mb-2 mt-2"># 启动 Claude Code</div>
+                <div class="whitespace-nowrap text-gray-300">claude</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Windows 故障排除 -->
+      <div class="mb-8">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <i class="fas fa-wrench mr-2 text-red-600 sm:mr-3" />
+          Windows 常见问题解决
+        </h4>
+        <div class="space-y-4">
+          <details class="rounded-lg border border-gray-200 bg-gray-50">
+            <summary
+              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
+            >
+              安装时提示 "permission denied" 错误
+            </summary>
+            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
+              <p class="mb-2">这通常是权限问题，尝试以下解决方法：</p>
+              <ul class="list-inside list-disc space-y-1 text-sm">
+                <li>以管理员身份运行 PowerShell</li>
+                <li>
+                  或者配置 npm 使用用户目录：<code
+                    class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                    >npm config set prefix %APPDATA%\npm</code
+                  >
+                </li>
+              </ul>
+            </div>
+          </details>
+
+          <details class="rounded-lg border border-gray-200 bg-gray-50">
+            <summary
+              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
+            >
+              PowerShell 执行策略错误
+            </summary>
+            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
+              <p class="mb-2">如果遇到执行策略限制，运行：</p>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">
+                  Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
+                </div>
+              </div>
+            </div>
+          </details>
+
+          <details class="rounded-lg border border-gray-200 bg-gray-50">
+            <summary
+              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
+            >
+              环境变量设置后不生效
+            </summary>
+            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
+              <p class="mb-2">设置永久环境变量后需要：</p>
+              <ul class="list-inside list-disc space-y-1 text-sm">
+                <li>重新启动 PowerShell 或 CMD</li>
+                <li>或者注销并重新登录 Windows</li>
+                <li>
+                  验证设置：<code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                    >echo $env:ANTHROPIC_BASE_URL</code
+                  >
+                </li>
+              </ul>
+            </div>
+          </details>
+        </div>
+      </div>
+    </div>
+
+    <!-- macOS 教程 -->
+    <div v-else-if="activeTutorialSystem === 'macos'" class="tutorial-content">
+      <!-- 第一步：安装 Node.js -->
+      <div class="mb-6 sm:mb-10">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <span
+            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-blue-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
+            >1</span
+          >
+          安装 Node.js 环境
+        </h4>
+        <p class="mb-4 text-gray-600 sm:mb-6">Claude Code 需要 Node.js 环境才能运行。</p>
+
+        <div
+          class="mb-4 rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4 sm:mb-6 sm:p-6"
+        >
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fab fa-apple mr-2 text-gray-700" />
+            macOS 安装方法
+          </h5>
+          <div class="mb-4">
+            <p class="mb-3 text-gray-700">方法一：使用 Homebrew（推荐）</p>
+            <p class="mb-2 text-xs text-gray-600 dark:text-gray-400 sm:text-sm">
+              如果你已经安装了 Homebrew，使用它安装 Node.js 会更方便：
+            </p>
+            <div
+              class="overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
+            >
+              <div class="mb-2"># 更新 Homebrew</div>
+              <div class="whitespace-nowrap text-gray-300">brew update</div>
+              <div class="mb-2 mt-3"># 安装 Node.js</div>
+              <div class="whitespace-nowrap text-gray-300">brew install node</div>
+            </div>
+          </div>
+          <div class="mb-4">
+            <p class="mb-3 text-gray-700">方法二：官网下载</p>
+            <ol
+              class="ml-2 list-inside list-decimal space-y-1 text-xs text-gray-600 dark:text-gray-400 sm:ml-4 sm:space-y-2 sm:text-sm"
+            >
+              <li>
+                访问
+                <code
+                  class="rounded bg-gray-100 px-1 py-1 text-xs dark:bg-gray-700 sm:px-2 sm:text-sm"
+                  >https://nodejs.org/</code
+                >
+              </li>
+              <li>下载适合 macOS 的 LTS 版本</li>
+              <li>
+                打开下载的
+                <code
+                  class="rounded bg-gray-100 px-1 py-1 text-xs dark:bg-gray-700 sm:px-2 sm:text-sm"
+                  >.pkg</code
+                >
+                文件
+              </li>
+              <li>按照安装程序指引完成安装</li>
+            </ol>
+          </div>
+          <div class="rounded-lg border border-gray-200 bg-gray-50 p-3 sm:p-4">
+            <h6 class="mb-2 text-sm font-medium text-gray-800 sm:text-base">macOS 注意事项</h6>
+            <ul class="space-y-1 text-xs text-gray-700 sm:text-sm">
+              <li>
+                • 如果遇到权限问题，可能需要使用
+                <code class="rounded bg-gray-200 px-1 text-xs sm:text-sm">sudo</code>
+              </li>
+              <li>• 首次运行可能需要在系统偏好设置中允许</li>
+              <li>• 建议使用 Terminal 或 iTerm2</li>
+            </ul>
+          </div>
+        </div>
+
+        <!-- 验证安装 -->
+        <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
+          <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">验证安装是否成功</h6>
+          <p class="mb-3 text-sm text-green-700">安装完成后，打开 Terminal，输入以下命令：</p>
+          <div
+            class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+          >
+            <div class="whitespace-nowrap text-gray-300">node --version</div>
+            <div class="whitespace-nowrap text-gray-300">npm --version</div>
+          </div>
+          <p class="mt-2 text-sm text-green-700">如果显示版本号，说明安装成功了！</p>
+        </div>
+      </div>
+
+      <!-- 第二步：安装 Claude Code -->
+      <div class="mb-6 sm:mb-10">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <span
+            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-green-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
+            >2</span
+          >
+          安装 Claude Code
+        </h4>
+
+        <div
+          class="mb-4 rounded-xl border border-purple-100 bg-gradient-to-r from-purple-50 to-pink-50 p-4 sm:mb-6 sm:p-6"
+        >
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fas fa-download mr-2 text-purple-600" />
+            安装 Claude Code
+          </h5>
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            打开 Terminal，运行以下命令：
+          </p>
+          <div
+            class="mb-4 overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
+          >
+            <div class="mb-2"># 全局安装 Claude Code</div>
+            <div class="whitespace-nowrap text-gray-300">
+              npm install -g @anthropic-ai/claude-code
+            </div>
+          </div>
+          <p class="mb-2 text-sm text-gray-600">如果遇到权限问题，可以使用 sudo：</p>
+          <div
+            class="overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
+          >
+            <div class="whitespace-nowrap text-gray-300">
+              sudo npm install -g @anthropic-ai/claude-code
+            </div>
+          </div>
+        </div>
+
+        <!-- 验证安装 -->
+        <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
+          <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">验证 Claude Code 安装</h6>
+          <p class="mb-3 text-sm text-green-700">安装完成后，输入以下命令检查是否安装成功：</p>
+          <div
+            class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+          >
+            <div class="whitespace-nowrap text-gray-300">claude --version</div>
+          </div>
+          <p class="mt-2 text-sm text-green-700">
+            如果显示版本号，恭喜你！Claude Code 已经成功安装了。
+          </p>
+        </div>
+      </div>
+
+      <!-- 第三步：设置环境变量 -->
+      <div class="mb-6 sm:mb-10">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <span
+            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-orange-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
+            >3</span
+          >
+          设置环境变量
+        </h4>
+
+        <div
+          class="mb-4 rounded-xl border border-orange-100 bg-gradient-to-r from-orange-50 to-yellow-50 p-4 sm:mb-6 sm:p-6"
+        >
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fas fa-cog mr-2 text-orange-600" />
+            配置 Claude Code 环境变量
+          </h5>
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            为了让 Claude Code 连接到你的中转服务，需要设置两个环境变量：
+          </p>
+
+          <div class="space-y-4">
+            <div class="rounded-lg border border-orange-200 bg-white p-3 sm:p-4">
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                方法一：临时设置（当前会话）
+              </h6>
+              <p class="mb-3 text-sm text-gray-600">在 Terminal 中运行以下命令：</p>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">
+                  export ANTHROPIC_BASE_URL="{{ currentBaseUrl }}"
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  export ANTHROPIC_AUTH_TOKEN="你的API密钥"
+                </div>
+              </div>
+              <p class="mt-2 text-xs text-yellow-700">
+                💡 记得将 "你的API密钥" 替换为在上方 "API Keys" 标签页中创建的实际密钥。
+              </p>
+            </div>
+
+            <div class="rounded-lg border border-orange-200 bg-white p-3 sm:p-4">
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                方法二：永久设置
+              </h6>
+              <p class="mb-3 text-sm text-gray-600">
+                编辑你的 shell 配置文件（根据你使用的 shell）：
+              </p>
+              <div
+                class="mb-3 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># 对于 zsh (默认)</div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export ANTHROPIC_BASE_URL="{{ currentBaseUrl }}"' >> ~/.zshrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export ANTHROPIC_AUTH_TOKEN="你的API密钥"' >> ~/.zshrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">source ~/.zshrc</div>
+              </div>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># 对于 bash</div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export ANTHROPIC_BASE_URL="{{ currentBaseUrl }}"' >> ~/.bash_profile
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export ANTHROPIC_AUTH_TOKEN="你的API密钥"' >> ~/.bash_profile
+                </div>
+                <div class="whitespace-nowrap text-gray-300">source ~/.bash_profile</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Gemini CLI 环境变量设置 -->
+        <div class="mt-8">
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fas fa-robot mr-2 text-green-600" />
+            配置 Gemini CLI 环境变量
+          </h5>
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            如果你使用 Gemini CLI，需要设置以下环境变量：
+          </p>
+
+          <div class="space-y-4">
+            <div class="rounded-lg border border-green-200 bg-white p-3 sm:p-4">
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                Terminal 设置方法
+              </h6>
+              <p class="mb-3 text-sm text-gray-600">在 Terminal 中运行以下命令：</p>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">
+                  export CODE_ASSIST_ENDPOINT="{{ geminiBaseUrl }}"
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  export GOOGLE_CLOUD_ACCESS_TOKEN="你的API密钥"
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  export GOOGLE_GENAI_USE_GCA="true"
+                </div>
+              </div>
+              <p class="mt-2 text-xs text-yellow-700">
+                💡 使用与 Claude Code 相同的 API 密钥即可。
+              </p>
+            </div>
+
+            <div class="rounded-lg border border-green-200 bg-white p-3 sm:p-4">
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                永久设置方法
+              </h6>
+              <p class="mb-3 text-sm text-gray-600">添加到你的 shell 配置文件：</p>
+              <div
+                class="mb-3 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># 对于 zsh (默认)</div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export CODE_ASSIST_ENDPOINT="{{ geminiBaseUrl }}"' >> ~/.zshrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export GOOGLE_CLOUD_ACCESS_TOKEN="你的API密钥"' >> ~/.zshrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export GOOGLE_GENAI_USE_GCA="true"' >> ~/.zshrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">source ~/.zshrc</div>
+              </div>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># 对于 bash</div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export CODE_ASSIST_ENDPOINT="{{ geminiBaseUrl }}"' >> ~/.bash_profile
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export GOOGLE_CLOUD_ACCESS_TOKEN="你的API密钥"' >> ~/.bash_profile
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export GOOGLE_GENAI_USE_GCA="true"' >> ~/.bash_profile
+                </div>
+                <div class="whitespace-nowrap text-gray-300">source ~/.bash_profile</div>
+              </div>
+            </div>
+
+            <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
+              <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">
+                验证 Gemini CLI 环境变量
+              </h6>
+              <p class="mb-3 text-sm text-green-700">在 Terminal 中验证：</p>
+              <div
+                class="space-y-1 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">echo $CODE_ASSIST_ENDPOINT</div>
+                <div class="whitespace-nowrap text-gray-300">echo $GOOGLE_CLOUD_ACCESS_TOKEN</div>
+                <div class="whitespace-nowrap text-gray-300">echo $GOOGLE_GENAI_USE_GCA</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Codex 环境变量设置 -->
+        <div class="mt-8">
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fas fa-code mr-2 text-indigo-600" />
+            配置 Codex 环境变量
+          </h5>
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            如果你使用支持 OpenAI API 的工具（如 Codex），需要设置以下环境变量：
+          </p>
+
+          <div class="space-y-4">
+            <div class="rounded-lg border border-yellow-200 bg-yellow-50 p-3 sm:p-4">
+              <h6 class="mb-2 font-medium text-yellow-800">Codex 配置文件</h6>
+              <p class="mb-3 text-sm text-yellow-700">
+                在
+                <code class="rounded bg-yellow-100 px-1">~/.codex/config.toml</code>
+                文件中添加以下配置：
+              </p>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">model_provider = "crs"</div>
+                <div class="whitespace-nowrap text-gray-300">model = "gpt-5"</div>
+                <div class="whitespace-nowrap text-gray-300">model_reasoning_effort = "high"</div>
+                <div class="whitespace-nowrap text-gray-300">disable_response_storage = true</div>
+                <div class="whitespace-nowrap text-gray-300">preferred_auth_method = "apikey"</div>
+                <div class="mt-2"></div>
+                <div class="whitespace-nowrap text-gray-300">[model_providers.crs]</div>
+                <div class="whitespace-nowrap text-gray-300">name = "crs"</div>
+                <div class="whitespace-nowrap text-gray-300">base_url = "{{ openaiBaseUrl }}"</div>
+                <div class="whitespace-nowrap text-gray-300">wire_api = "responses"</div>
+              </div>
+              <p class="mt-3 text-sm text-yellow-700">
+                在
+                <code class="rounded bg-yellow-100 px-1">~/.codex/auth.json</code>
+                文件中配置API密钥：
+              </p>
+              <div
+                class="mt-2 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">{</div>
+                <div class="whitespace-nowrap text-gray-300">"OPENAI_API_KEY": "你的API密钥"</div>
+                <div class="whitespace-nowrap text-gray-300">}</div>
+              </div>
+              <p class="mt-2 text-xs text-yellow-700">
+                💡 使用与 Claude Code 相同的 API 密钥即可，格式如 cr_xxxxxxxxxx。
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 第四步：开始使用 -->
+      <div class="mb-8">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <span
+            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-yellow-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
+            >4</span
+          >
+          开始使用 Claude Code
+        </h4>
+        <div
+          class="rounded-xl border border-yellow-100 bg-gradient-to-r from-yellow-50 to-amber-50 p-4 sm:p-6"
+        >
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            现在你可以开始使用 Claude Code 了！
+          </p>
+
+          <div class="space-y-4">
+            <div>
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                启动 Claude Code
+              </h6>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">claude</div>
+              </div>
+            </div>
+
+            <div>
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                在特定项目中使用
+              </h6>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># 进入你的项目目录</div>
+                <div class="whitespace-nowrap text-gray-300">cd /path/to/your/project</div>
+                <div class="mb-2 mt-2"># 启动 Claude Code</div>
+                <div class="whitespace-nowrap text-gray-300">claude</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- macOS 故障排除 -->
+      <div class="mb-8">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <i class="fas fa-wrench mr-2 text-red-600 sm:mr-3" />
+          macOS 常见问题解决
+        </h4>
+        <div class="space-y-4">
+          <details class="rounded-lg border border-gray-200 bg-gray-50">
+            <summary
+              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
+            >
+              安装时提示权限错误
+            </summary>
+            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
+              <p class="mb-2">尝试以下解决方法：</p>
+              <ul class="list-inside list-disc space-y-1 text-sm">
+                <li>
+                  使用 sudo 安装：<code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                    >sudo npm install -g @anthropic-ai/claude-code</code
+                  >
+                </li>
+                <li>
+                  或者配置 npm 使用用户目录：<code
+                    class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                    >npm config set prefix ~/.npm-global</code
+                  >
+                </li>
+              </ul>
+            </div>
+          </details>
+
+          <details class="rounded-lg border border-gray-200 bg-gray-50">
+            <summary
+              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
+            >
+              macOS 安全设置阻止运行
+            </summary>
+            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
+              <p class="mb-2">如果系统阻止运行 Claude Code：</p>
+              <ul class="list-inside list-disc space-y-1 text-sm">
+                <li>打开"系统偏好设置" → "安全性与隐私"</li>
+                <li>点击"仍要打开"或"允许"</li>
+                <li>
+                  或者在 Terminal 中运行：<code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                    >sudo spctl --master-disable</code
+                  >
+                </li>
+              </ul>
+            </div>
+          </details>
+
+          <details class="rounded-lg border border-gray-200 bg-gray-50">
+            <summary
+              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
+            >
+              环境变量不生效
+            </summary>
+            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
+              <p class="mb-2">检查以下几点：</p>
+              <ul class="list-inside list-disc space-y-1 text-sm">
+                <li>确认修改了正确的配置文件（.zshrc 或 .bash_profile）</li>
+                <li>重新启动 Terminal</li>
+                <li>
+                  验证设置：<code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                    >echo $ANTHROPIC_BASE_URL</code
+                  >
+                </li>
+              </ul>
+            </div>
+          </details>
+        </div>
+      </div>
+    </div>
+
+    <!-- Linux 教程 -->
+    <div v-else-if="activeTutorialSystem === 'linux'" class="tutorial-content">
+      <!-- 第一步：安装 Node.js -->
+      <div class="mb-6 sm:mb-10">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <span
+            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-blue-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
+            >1</span
+          >
+          安装 Node.js 环境
+        </h4>
+        <p class="mb-4 text-gray-600 sm:mb-6">Claude Code 需要 Node.js 环境才能运行。</p>
+
+        <div
+          class="mb-4 rounded-xl border border-orange-100 bg-gradient-to-r from-orange-50 to-red-50 p-4 sm:mb-6 sm:p-6"
+        >
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fab fa-ubuntu mr-2 text-orange-600" />
+            Linux 安装方法
+          </h5>
+          <div class="mb-4">
+            <p class="mb-3 text-gray-700">方法一：使用官方仓库（推荐）</p>
+            <div
+              class="overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
+            >
+              <div class="mb-2"># 添加 NodeSource 仓库</div>
+              <div class="whitespace-nowrap text-gray-300">
+                curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
+              </div>
+              <div class="mb-2 mt-3"># 安装 Node.js</div>
+              <div class="whitespace-nowrap text-gray-300">sudo apt-get install -y nodejs</div>
+            </div>
+          </div>
+          <div class="mb-4">
+            <p class="mb-3 text-gray-700">方法二：使用系统包管理器</p>
+            <p class="mb-2 text-xs text-gray-600 dark:text-gray-400 sm:text-sm">
+              虽然版本可能不是最新的，但对于基本使用已经足够：
+            </p>
+            <div
+              class="overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
+            >
+              <div class="mb-2"># Ubuntu/Debian</div>
+              <div class="whitespace-nowrap text-gray-300">sudo apt update</div>
+              <div class="whitespace-nowrap text-gray-300">sudo apt install nodejs npm</div>
+              <div class="mb-2 mt-3"># CentOS/RHEL/Fedora</div>
+              <div class="whitespace-nowrap text-gray-300">sudo dnf install nodejs npm</div>
+            </div>
+          </div>
+          <div class="rounded-lg border border-orange-200 bg-orange-50 p-3 sm:p-4">
+            <h6 class="mb-2 text-sm font-medium text-orange-800 sm:text-base">Linux 注意事项</h6>
+            <ul class="space-y-1 text-xs text-orange-700 sm:text-sm">
+              <li>• 某些发行版可能需要安装额外的依赖</li>
+              <li>• 如果遇到权限问题，使用 <code class="rounded bg-orange-200 px-1">sudo</code></li>
+              <li>• 确保你的用户在 npm 的全局目录有写权限</li>
+            </ul>
+          </div>
+        </div>
+
+        <!-- 验证安装 -->
+        <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
+          <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">验证安装是否成功</h6>
+          <p class="mb-3 text-sm text-green-700">安装完成后，打开终端，输入以下命令：</p>
+          <div
+            class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+          >
+            <div class="whitespace-nowrap text-gray-300">node --version</div>
+            <div class="whitespace-nowrap text-gray-300">npm --version</div>
+          </div>
+          <p class="mt-2 text-sm text-green-700">如果显示版本号，说明安装成功了！</p>
+        </div>
+      </div>
+
+      <!-- 第二步：安装 Claude Code -->
+      <div class="mb-6 sm:mb-10">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <span
+            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-green-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
+            >2</span
+          >
+          安装 Claude Code
+        </h4>
+
+        <div
+          class="mb-4 rounded-xl border border-purple-100 bg-gradient-to-r from-purple-50 to-pink-50 p-4 sm:mb-6 sm:p-6"
+        >
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fas fa-download mr-2 text-purple-600" />
+            安装 Claude Code
+          </h5>
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            打开终端，运行以下命令：
+          </p>
+          <div
+            class="mb-4 overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
+          >
+            <div class="mb-2"># 全局安装 Claude Code</div>
+            <div class="whitespace-nowrap text-gray-300">
+              npm install -g @anthropic-ai/claude-code
+            </div>
+          </div>
+          <p class="mb-2 text-sm text-gray-600">如果遇到权限问题，可以使用 sudo：</p>
+          <div
+            class="overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
+          >
+            <div class="whitespace-nowrap text-gray-300">
+              sudo npm install -g @anthropic-ai/claude-code
+            </div>
+          </div>
+        </div>
+
+        <!-- 验证安装 -->
+        <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
+          <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">验证 Claude Code 安装</h6>
+          <p class="mb-3 text-sm text-green-700">安装完成后，输入以下命令检查是否安装成功：</p>
+          <div
+            class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+          >
+            <div class="whitespace-nowrap text-gray-300">claude --version</div>
+          </div>
+          <p class="mt-2 text-sm text-green-700">
+            如果显示版本号，恭喜你！Claude Code 已经成功安装了。
+          </p>
+        </div>
+      </div>
+
+      <!-- 第三步：设置环境变量 -->
+      <div class="mb-6 sm:mb-10">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <span
+            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-orange-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
+            >3</span
+          >
+          设置环境变量
+        </h4>
+
+        <div
+          class="mb-4 rounded-xl border border-orange-100 bg-gradient-to-r from-orange-50 to-yellow-50 p-4 sm:mb-6 sm:p-6"
+        >
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fas fa-cog mr-2 text-orange-600" />
+            配置 Claude Code 环境变量
+          </h5>
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            为了让 Claude Code 连接到你的中转服务，需要设置两个环境变量：
+          </p>
+
+          <div class="space-y-4">
+            <div class="rounded-lg border border-orange-200 bg-white p-3 sm:p-4">
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                方法一：临时设置（当前会话）
+              </h6>
+              <p class="mb-3 text-sm text-gray-600">在终端中运行以下命令：</p>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">
+                  export ANTHROPIC_BASE_URL="{{ currentBaseUrl }}"
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  export ANTHROPIC_AUTH_TOKEN="你的API密钥"
+                </div>
+              </div>
+              <p class="mt-2 text-xs text-yellow-700">
+                💡 记得将 "你的API密钥" 替换为在上方 "API Keys" 标签页中创建的实际密钥。
+              </p>
+            </div>
+
+            <div class="rounded-lg border border-orange-200 bg-white p-3 sm:p-4">
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                方法二：永久设置
+              </h6>
+              <p class="mb-3 text-sm text-gray-600">编辑你的 shell 配置文件：</p>
+              <div
+                class="mb-3 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># 对于 bash (默认)</div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export ANTHROPIC_BASE_URL="{{ currentBaseUrl }}"' >> ~/.bashrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export ANTHROPIC_AUTH_TOKEN="你的API密钥"' >> ~/.bashrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">source ~/.bashrc</div>
+              </div>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># 对于 zsh</div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export ANTHROPIC_BASE_URL="{{ currentBaseUrl }}"' >> ~/.zshrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export ANTHROPIC_AUTH_TOKEN="你的API密钥"' >> ~/.zshrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">source ~/.zshrc</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Gemini CLI 环境变量设置 -->
+        <div class="mt-8">
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fas fa-robot mr-2 text-green-600" />
+            配置 Gemini CLI 环境变量
+          </h5>
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            如果你使用 Gemini CLI，需要设置以下环境变量：
+          </p>
+
+          <div class="space-y-4">
+            <div class="rounded-lg border border-green-200 bg-white p-3 sm:p-4">
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                终端设置方法
+              </h6>
+              <p class="mb-3 text-sm text-gray-600">在终端中运行以下命令：</p>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">
+                  export CODE_ASSIST_ENDPOINT="{{ geminiBaseUrl }}"
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  export GOOGLE_CLOUD_ACCESS_TOKEN="你的API密钥"
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  export GOOGLE_GENAI_USE_GCA="true"
+                </div>
+              </div>
+              <p class="mt-2 text-xs text-yellow-700">
+                💡 使用与 Claude Code 相同的 API 密钥即可。
+              </p>
+            </div>
+
+            <div class="rounded-lg border border-green-200 bg-white p-3 sm:p-4">
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                永久设置方法
+              </h6>
+              <p class="mb-3 text-sm text-gray-600">添加到你的 shell 配置文件：</p>
+              <div
+                class="mb-3 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># 对于 bash (默认)</div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export CODE_ASSIST_ENDPOINT="{{ geminiBaseUrl }}"' >> ~/.bashrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export GOOGLE_CLOUD_ACCESS_TOKEN="你的API密钥"' >> ~/.bashrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export GOOGLE_GENAI_USE_GCA="true"' >> ~/.bashrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">source ~/.bashrc</div>
+              </div>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># 对于 zsh</div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export CODE_ASSIST_ENDPOINT="{{ geminiBaseUrl }}"' >> ~/.zshrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export GOOGLE_CLOUD_ACCESS_TOKEN="你的API密钥"' >> ~/.zshrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export GOOGLE_GENAI_USE_GCA="true"' >> ~/.zshrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">source ~/.zshrc</div>
+              </div>
+            </div>
+
+            <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
+              <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">
+                验证 Gemini CLI 环境变量
+              </h6>
+              <p class="mb-3 text-sm text-green-700">在终端中验证：</p>
+              <div
+                class="space-y-1 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">echo $CODE_ASSIST_ENDPOINT</div>
+                <div class="whitespace-nowrap text-gray-300">echo $GOOGLE_CLOUD_ACCESS_TOKEN</div>
+                <div class="whitespace-nowrap text-gray-300">echo $GOOGLE_GENAI_USE_GCA</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Codex 环境变量设置 -->
+        <div class="mt-8">
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fas fa-code mr-2 text-indigo-600" />
+            配置 Codex 环境变量
+          </h5>
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            如果你使用支持 OpenAI API 的工具（如 Codex），需要设置以下环境变量：
+          </p>
+
+          <div class="space-y-4">
+            <div class="rounded-lg border border-yellow-200 bg-yellow-50 p-3 sm:p-4">
+              <h6 class="mb-2 font-medium text-yellow-800">Codex 配置文件</h6>
+              <p class="mb-3 text-sm text-yellow-700">
+                在
+                <code class="rounded bg-yellow-100 px-1">~/.codex/config.toml</code>
+                文件中添加以下配置：
+              </p>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">model_provider = "crs"</div>
+                <div class="whitespace-nowrap text-gray-300">model = "gpt-5"</div>
+                <div class="whitespace-nowrap text-gray-300">model_reasoning_effort = "high"</div>
+                <div class="whitespace-nowrap text-gray-300">disable_response_storage = true</div>
+                <div class="whitespace-nowrap text-gray-300">preferred_auth_method = "apikey"</div>
+                <div class="mt-2"></div>
+                <div class="whitespace-nowrap text-gray-300">[model_providers.crs]</div>
+                <div class="whitespace-nowrap text-gray-300">name = "crs"</div>
+                <div class="whitespace-nowrap text-gray-300">base_url = "{{ openaiBaseUrl }}"</div>
+                <div class="whitespace-nowrap text-gray-300">wire_api = "responses"</div>
+              </div>
+              <p class="mt-3 text-sm text-yellow-700">
+                在
+                <code class="rounded bg-yellow-100 px-1">~/.codex/auth.json</code>
+                文件中配置API密钥：
+              </p>
+              <div
+                class="mt-2 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">{</div>
+                <div class="whitespace-nowrap text-gray-300">"OPENAI_API_KEY": "你的API密钥"</div>
+                <div class="whitespace-nowrap text-gray-300">}</div>
+              </div>
+              <p class="mt-2 text-xs text-yellow-700">
+                💡 使用与 Claude Code 相同的 API 密钥即可，格式如 cr_xxxxxxxxxx。
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 第四步：开始使用 -->
+      <div class="mb-8">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <span
+            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-yellow-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
+            >4</span
+          >
+          开始使用 Claude Code
+        </h4>
+        <div
+          class="rounded-xl border border-yellow-100 bg-gradient-to-r from-yellow-50 to-amber-50 p-4 sm:p-6"
+        >
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            现在你可以开始使用 Claude Code 了！
+          </p>
+
+          <div class="space-y-4">
+            <div>
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                启动 Claude Code
+              </h6>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">claude</div>
+              </div>
+            </div>
+
+            <div>
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                在特定项目中使用
+              </h6>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># 进入你的项目目录</div>
+                <div class="whitespace-nowrap text-gray-300">cd /path/to/your/project</div>
+                <div class="mb-2 mt-2"># 启动 Claude Code</div>
+                <div class="whitespace-nowrap text-gray-300">claude</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Linux 故障排除 -->
+      <div class="mb-8">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <i class="fas fa-wrench mr-2 text-red-600 sm:mr-3" />
+          Linux 常见问题解决
+        </h4>
+        <div class="space-y-4">
+          <details class="rounded-lg border border-gray-200 bg-gray-50">
+            <summary
+              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
+            >
+              安装时提示权限错误
+            </summary>
+            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
+              <p class="mb-2">尝试以下解决方法：</p>
+              <ul class="list-inside list-disc space-y-1 text-sm">
+                <li>
+                  使用 sudo 安装：<code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                    >sudo npm install -g @anthropic-ai/claude-code</code
+                  >
+                </li>
+                <li>
+                  或者配置 npm 使用用户目录：<code
+                    class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                    >npm config set prefix ~/.npm-global</code
+                  >
+                </li>
+                <li>
+                  然后添加到 PATH：<code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                    >export PATH=~/.npm-global/bin:$PATH</code
+                  >
+                </li>
+              </ul>
+            </div>
+          </details>
+
+          <details class="rounded-lg border border-gray-200 bg-gray-50">
+            <summary
+              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
+            >
+              缺少依赖库
+            </summary>
+            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
+              <p class="mb-2">某些 Linux 发行版需要安装额外依赖：</p>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># Ubuntu/Debian</div>
+                <div class="whitespace-nowrap text-gray-300">sudo apt install build-essential</div>
+                <div class="mb-2 mt-2"># CentOS/RHEL</div>
+                <div class="whitespace-nowrap text-gray-300">
+                  sudo dnf groupinstall "Development Tools"
+                </div>
+              </div>
+            </div>
+          </details>
+
+          <details class="rounded-lg border border-gray-200 bg-gray-50">
+            <summary
+              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
+            >
+              环境变量不生效
+            </summary>
+            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
+              <p class="mb-2">检查以下几点：</p>
+              <ul class="list-inside list-disc space-y-1 text-sm">
+                <li>确认修改了正确的配置文件（.bashrc 或 .zshrc）</li>
+                <li>
+                  重新启动终端或运行
+                  <code class="rounded bg-gray-200 px-1 text-xs sm:text-sm">source ~/.bashrc</code>
+                </li>
+                <li>
+                  验证设置：<code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                    >echo $ANTHROPIC_BASE_URL</code
+                  >
+                </li>
+              </ul>
+            </div>
+          </details>
+        </div>
+      </div>
+    </div>
+
+    <!-- 结尾 -->
+    <div
+      class="rounded-xl bg-gradient-to-r from-blue-500 to-purple-600 p-4 text-center text-white sm:p-6"
+    >
+      <h5 class="mb-2 text-lg font-semibold sm:text-xl">🎉 恭喜你！</h5>
+      <p class="mb-3 text-sm text-blue-100 sm:mb-4 sm:text-base">
+        你已经成功安装并配置了 Claude Code，现在可以开始享受 AI 编程助手带来的便利了。
+      </p>
+      <p class="text-xs text-blue-200 sm:text-sm">
+        如果在使用过程中遇到任何问题，可以查看官方文档或社区讨论获取帮助。
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+
+// 当前系统选择
+const activeTutorialSystem = ref('windows')
+
+// 系统列表
+const tutorialSystems = [
+  { key: 'windows', name: 'Windows', icon: 'fab fa-windows' },
+  { key: 'macos', name: 'macOS', icon: 'fab fa-apple' },
+  { key: 'linux', name: 'Linux / WSL2', icon: 'fab fa-linux' }
+]
+
+// 获取基础URL前缀
+const getBaseUrlPrefix = () => {
+  // 优先使用环境变量配置的自定义前缀
+  const customPrefix = import.meta.env.VITE_API_BASE_PREFIX
+  if (customPrefix) {
+    // 去除末尾的斜杠
+    return customPrefix.replace(/\/$/, '')
+  }
+
+  // 否则使用当前浏览器访问地址
+  // 更健壮的获取 origin 的方法，兼容旧版浏览器和特殊环境
+  let origin = ''
+
+  if (window.location.origin) {
+    // 现代浏览器直接支持 origin
+    origin = window.location.origin
+  } else {
+    // 旧版浏览器或特殊环境的兼容处理
+    const protocol = window.location.protocol
+    const hostname = window.location.hostname
+    const port = window.location.port
+
+    origin = protocol + '//' + hostname
+
+    // 只有在非默认端口时才添加端口号
+    if (
+      port &&
+      ((protocol === 'http:' && port !== '80') || (protocol === 'https:' && port !== '443'))
+    ) {
+      origin += ':' + port
+    }
+  }
+
+  // 如果还是获取不到，使用当前页面的 URL 推导
+  if (!origin) {
+    const currentUrl = window.location.href
+    const pathStart = currentUrl.indexOf('/', 8) // 跳过 http:// 或 https://
+    if (pathStart !== -1) {
+      origin = currentUrl.substring(0, pathStart)
+    } else {
+      // 最后的降级方案，使用相对路径
+      console.warn('无法获取完整的 origin，将使用相对路径')
+      return ''
+    }
+  }
+
+  return origin
+}
+
+// 当前基础URL - Claude Code
+const currentBaseUrl = computed(() => {
+  return getBaseUrlPrefix() + '/api'
+})
+
+// Gemini CLI 基础URL
+const geminiBaseUrl = computed(() => {
+  return getBaseUrlPrefix() + '/gemini'
+})
+
+// OpenAI/Codex 基础URL
+const openaiBaseUrl = computed(() => {
+  return getBaseUrlPrefix() + '/openai'
+})
+</script>
+
+<style scoped>
+.tutorial-container {
+  min-height: calc(100vh - 300px);
+}
+
+.tutorial-content {
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+code {
+  font-family: 'Fira Code', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+}
+
+.tutorial-content h4 {
+  scroll-margin-top: 100px;
+}
+
+.tutorial-content .bg-gradient-to-r {
+  transition: all 0.2s ease;
+}
+
+.tutorial-content .bg-gradient-to-r:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+</style>
diff --git a/web/admin-spa/src/views/tutorials/TutorialView-zh-tw.vue b/web/admin-spa/src/views/tutorials/TutorialView-zh-tw.vue
new file mode 100644
index 00000000..f24feab3
--- /dev/null
+++ b/web/admin-spa/src/views/tutorials/TutorialView-zh-tw.vue
@@ -0,0 +1,1690 @@
+<template>
+  <div class="card p-3 sm:p-6">
+    <div class="mb-4 sm:mb-8">
+      <h3
+        class="mb-3 flex items-center text-xl font-bold text-gray-900 dark:text-gray-100 sm:mb-4 sm:text-2xl"
+      >
+        <i class="fas fa-graduation-cap mr-2 text-blue-600 sm:mr-3" />
+        Claude Code 使用教程
+      </h3>
+      <p class="text-sm text-gray-600 dark:text-gray-400 sm:text-lg">
+        跟著這個教程，你可以輕鬆在自己的電腦上安裝並使用 Claude Code。
+      </p>
+    </div>
+
+    <!-- 系統選擇標籤 -->
+    <div class="mb-4 sm:mb-8">
+      <div class="flex flex-wrap gap-1 rounded-xl bg-gray-100 p-1 dark:bg-gray-700 sm:gap-2 sm:p-2">
+        <button
+          v-for="system in tutorialSystems"
+          :key="system.key"
+          :class="[
+            'flex flex-1 items-center justify-center gap-1 rounded-lg px-3 py-2 text-xs font-semibold transition-all duration-300 sm:gap-2 sm:px-6 sm:py-3 sm:text-sm',
+            activeTutorialSystem === system.key
+              ? 'bg-white text-blue-600 shadow-sm dark:bg-gray-800'
+              : 'text-gray-600 hover:bg-white/50 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200'
+          ]"
+          @click="activeTutorialSystem = system.key"
+        >
+          <i :class="system.icon" />
+          {{ system.name }}
+        </button>
+      </div>
+    </div>
+
+    <!-- Windows 教程 -->
+    <div v-if="activeTutorialSystem === 'windows'" class="tutorial-content">
+      <!-- 第一步：安装 Node.js -->
+      <div class="mb-4 sm:mb-10 sm:mb-6">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <span
+            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-blue-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
+            >1</span
+          >
+          安裝 Node.js 環境
+        </h4>
+        <p class="mb-4 text-sm text-gray-600 dark:text-gray-400 sm:mb-4 sm:mb-6 sm:text-base">
+          Claude Code 需要 Node.js 環境才能運行。
+        </p>
+
+        <div
+          class="mb-4 rounded-xl border border-blue-100 bg-gradient-to-r from-blue-50 to-indigo-50 p-4 sm:mb-4 sm:mb-6 sm:p-6"
+        >
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fab fa-windows mr-2 text-blue-600" />
+            Windows 安裝方法
+          </h5>
+          <div class="mb-3 sm:mb-4">
+            <p class="mb-2 text-sm text-gray-700 dark:text-gray-600 sm:mb-3 sm:text-base">
+              方法一：官網下載（推薦）
+            </p>
+            <ol
+              class="ml-2 list-inside list-decimal space-y-1 text-xs text-gray-600 dark:text-gray-600 sm:ml-4 sm:space-y-2 sm:text-sm"
+            >
+              <li>
+                打開瀏覽器訪問
+                <code
+                  class="rounded bg-gray-100 px-1 py-1 text-xs dark:bg-gray-700 sm:px-2 sm:text-sm"
+                  >https://nodejs.org/</code
+                >
+              </li>
+              <li>點擊 "LTS" 版本進行下載（推薦長期支持版本）</li>
+              <li>
+                下載完成後雙擊
+                <code
+                  class="rounded bg-gray-100 px-1 py-1 text-xs dark:bg-gray-700 sm:px-2 sm:text-sm"
+                  >.msi</code
+                >
+                檔案
+              </li>
+              <li>按照安裝嚮導完成安裝，保持預設設定即可</li>
+            </ol>
+          </div>
+          <div class="mb-3 sm:mb-4">
+            <p class="mb-2 text-sm text-gray-700 dark:text-gray-600 sm:mb-3 sm:text-base">
+              方法二：使用套件管理器
+            </p>
+            <p class="mb-2 text-xs text-gray-600 dark:text-gray-400 sm:text-sm">
+              如果你安裝了 Chocolatey 或 Scoop，可以使用命令行安裝：
+            </p>
+            <div
+              class="overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
+            >
+              <div class="mb-2"># 使用 Chocolatey</div>
+              <div class="whitespace-nowrap text-gray-300">choco install nodejs</div>
+              <div class="mb-2 mt-3"># 或使用 Scoop</div>
+              <div class="whitespace-nowrap text-gray-300">scoop install nodejs</div>
+            </div>
+          </div>
+          <div class="rounded-lg border border-blue-200 bg-blue-50 p-3 sm:p-4">
+            <h6 class="mb-2 text-sm font-medium text-blue-800 sm:text-base">Windows 注意事項</h6>
+            <ul class="space-y-1 text-xs text-blue-700 sm:text-sm sm:text-xs">
+              <li>• 建議使用 PowerShell 而不是 CMD</li>
+              <li>• 如果遇到權限問題，嘗試以管理員身份運行</li>
+              <li>• 某些防毒軟體可能會誤報，需要新增白名單</li>
+            </ul>
+          </div>
+        </div>
+
+        <!-- 驗證安裝 -->
+        <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
+          <h6 class="mb-2 text-sm font-medium text-green-800 sm:text-base">驗證安裝是否成功</h6>
+          <p class="mb-2 text-xs text-green-700 sm:mb-3 sm:text-sm">
+            安裝完成後，打開 PowerShell 或 CMD，輸入以下命令：
+          </p>
+          <div
+            class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+          >
+            <div class="whitespace-nowrap text-gray-300">node --version</div>
+            <div class="whitespace-nowrap text-gray-300">npm --version</div>
+          </div>
+          <p class="mt-2 text-xs text-green-700 sm:text-sm">如果顯示版本號，說明安裝成功了！</p>
+        </div>
+      </div>
+
+      <!-- 第二步：安裝 Claude Code -->
+      <div class="mb-4 sm:mb-10 sm:mb-6">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <span
+            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-green-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
+            >2</span
+          >
+          安裝 Claude Code
+        </h4>
+
+        <div
+          class="mb-4 rounded-xl border border-green-100 bg-gradient-to-r from-green-50 to-emerald-50 p-4 sm:mb-6 sm:p-6"
+        >
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fas fa-download mr-2 text-green-600" />
+            安裝 Claude Code
+          </h5>
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            打開 PowerShell 或 CMD，運行以下命令：
+          </p>
+          <div
+            class="mb-4 overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
+          >
+            <div class="mb-2"># 全局安裝 Claude Code</div>
+            <div class="whitespace-nowrap text-gray-300">
+              npm install -g @anthropic-ai/claude-code
+            </div>
+          </div>
+          <p class="text-sm text-gray-600 dark:text-gray-400">
+            這個命令會從 npm 官方倉庫下載並安裝最新版本的 Claude Code。
+          </p>
+
+          <div class="mt-4 rounded-lg border border-blue-200 bg-blue-50 p-3 sm:p-4">
+            <h6 class="mb-2 text-sm font-medium text-blue-800 sm:text-base">提示</h6>
+            <ul class="space-y-1 text-xs text-blue-700 sm:text-sm">
+              <li>• 建議使用 PowerShell 而不是 CMD，功能更強大</li>
+              <li>• 如果遇到權限問題，以管理員身份運行 PowerShell</li>
+            </ul>
+          </div>
+        </div>
+
+        <!-- 驗證安裝 -->
+        <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
+          <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">驗證 Claude Code 安裝</h6>
+          <p class="mb-3 text-sm text-green-700">安裝完成後，輸入以下命令檢查是否安裝成功：</p>
+          <div
+            class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+          >
+            <div class="whitespace-nowrap text-gray-300">claude --version</div>
+          </div>
+          <p class="mt-2 text-sm text-green-700">
+            如果顯示版本號，恭喜你！Claude Code 已經成功安裝了。
+          </p>
+        </div>
+      </div>
+
+      <!-- 第三步：設定環境變數 -->
+      <div class="mb-6 sm:mb-10">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <span
+            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-purple-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
+            >3</span
+          >
+          設定環境變數
+        </h4>
+
+        <div
+          class="mb-4 rounded-xl border border-purple-100 bg-gradient-to-r from-purple-50 to-pink-50 p-4 sm:mb-6 sm:p-6"
+        >
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fas fa-cog mr-2 text-purple-600" />
+            設定 Claude Code 環境變數
+          </h5>
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            為了讓 Claude Code 連接到你的中轉服務，需要設定兩個環境變數：
+          </p>
+
+          <div class="space-y-4">
+            <div
+              class="rounded-lg border border-purple-200 bg-white p-3 dark:border-purple-700 dark:bg-gray-800 sm:p-4"
+            >
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                方法一：PowerShell 臨時設定（當前會話）
+              </h6>
+              <p class="mb-3 text-sm text-gray-600">在 PowerShell 中運行以下命令：</p>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">
+                  $env:ANTHROPIC_BASE_URL = "{{ currentBaseUrl }}"
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  $env:ANTHROPIC_AUTH_TOKEN = "你的API密鑰"
+                </div>
+              </div>
+              <p class="mt-2 text-xs text-yellow-700">
+                💡 記得將 "你的API密鑰" 替換為在上方 "API Keys" 標籤頁中創建的實際密鑰。
+              </p>
+            </div>
+
+            <div
+              class="rounded-lg border border-purple-200 bg-white p-3 dark:border-purple-700 dark:bg-gray-800 sm:p-4"
+            >
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                方法二：PowerShell 永久設定（用戶級）
+              </h6>
+              <p class="mb-3 text-sm text-gray-600">
+                在 PowerShell 中運行以下命令設定用戶級環境變數：
+              </p>
+              <div
+                class="mb-3 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># 設定用戶級環境變數（永久生效）</div>
+                <div class="whitespace-nowrap text-gray-300">
+                  [System.Environment]::SetEnvironmentVariable("ANTHROPIC_BASE_URL", "{{
+                    currentBaseUrl
+                  }}", [System.EnvironmentVariableTarget]::User)
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  [System.Environment]::SetEnvironmentVariable("ANTHROPIC_AUTH_TOKEN",
+                  "你的API密鑰", [System.EnvironmentVariableTarget]::User)
+                </div>
+              </div>
+              <p class="mb-3 text-sm text-gray-600">查看已設定的環境變數：</p>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># 查看用戶級環境變數</div>
+                <div class="whitespace-nowrap text-gray-300">
+                  [System.Environment]::GetEnvironmentVariable("ANTHROPIC_BASE_URL",
+                  [System.EnvironmentVariableTarget]::User)
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  [System.Environment]::GetEnvironmentVariable("ANTHROPIC_AUTH_TOKEN",
+                  [System.EnvironmentVariableTarget]::User)
+                </div>
+              </div>
+              <p class="mt-2 text-xs text-blue-700">
+                💡 設定後需要重新打開 PowerShell 視窗才能生效。
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <!-- 驗證環境變數設定 -->
+        <div class="mt-6 rounded-lg border border-blue-200 bg-blue-50 p-3 sm:p-4">
+          <h6 class="mb-2 font-medium text-blue-800 dark:text-blue-300">驗證環境變數設定</h6>
+          <p class="mb-3 text-sm text-blue-700">
+            設定完環境變數後，可以通過以下命令驗證是否設定成功：
+          </p>
+
+          <div class="space-y-4">
+            <div>
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                在 PowerShell 中驗證：
+              </h6>
+              <div
+                class="space-y-1 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">echo $env:ANTHROPIC_BASE_URL</div>
+                <div class="whitespace-nowrap text-gray-300">echo $env:ANTHROPIC_AUTH_TOKEN</div>
+              </div>
+            </div>
+
+            <div>
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                在 CMD 中驗證：
+              </h6>
+              <div
+                class="space-y-1 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">echo %ANTHROPIC_BASE_URL%</div>
+                <div class="whitespace-nowrap text-gray-300">echo %ANTHROPIC_AUTH_TOKEN%</div>
+              </div>
+            </div>
+          </div>
+
+          <div class="mt-3 space-y-2">
+            <p class="text-sm text-blue-700">
+              <strong>預期輸出示例：</strong>
+            </p>
+            <div class="rounded bg-gray-100 p-2 font-mono text-sm dark:bg-gray-700">
+              <div>{{ currentBaseUrl }}</div>
+              <div>cr_xxxxxxxxxxxxxxxxxx</div>
+            </div>
+            <p class="text-xs text-blue-700">
+              💡 如果輸出為空或顯示變數名本身，說明環境變數設定失敗，請重新設定。
+            </p>
+          </div>
+        </div>
+
+        <!-- Gemini CLI 环境变量设置 -->
+        <div class="mt-8">
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fas fa-robot mr-2 text-green-600" />
+            設定 Gemini CLI 環境變數
+          </h5>
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            如果你使用 Gemini CLI，需要設定以下環境變數：
+          </p>
+
+          <div class="space-y-4">
+            <div class="rounded-lg border border-green-200 bg-white p-3 sm:p-4">
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                PowerShell 設定方法
+              </h6>
+              <p class="mb-3 text-sm text-gray-600">在 PowerShell 中運行以下命令：</p>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">
+                  $env:CODE_ASSIST_ENDPOINT = "{{ geminiBaseUrl }}"
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  $env:GOOGLE_CLOUD_ACCESS_TOKEN = "你的API密鑰"
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  $env:GOOGLE_GENAI_USE_GCA = "true"
+                </div>
+              </div>
+              <p class="mt-2 text-xs text-yellow-700">
+                💡 使用與 Claude Code 相同的 API 密鑰即可。
+              </p>
+            </div>
+
+            <div class="rounded-lg border border-green-200 bg-white p-3 sm:p-4">
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                PowerShell 永久設定（用戶級）
+              </h6>
+              <p class="mb-3 text-sm text-gray-600">在 PowerShell 中運行以下命令：</p>
+              <div
+                class="mb-3 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># 設定用戶級環境變數（永久生效）</div>
+                <div class="whitespace-nowrap text-gray-300">
+                  [System.Environment]::SetEnvironmentVariable("CODE_ASSIST_ENDPOINT", "{{
+                    geminiBaseUrl
+                  }}", [System.EnvironmentVariableTarget]::User)
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  [System.Environment]::SetEnvironmentVariable("GOOGLE_CLOUD_ACCESS_TOKEN",
+                  "你的API密鑰", [System.EnvironmentVariableTarget]::User)
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  [System.Environment]::SetEnvironmentVariable("GOOGLE_GENAI_USE_GCA", "true",
+                  [System.EnvironmentVariableTarget]::User)
+                </div>
+              </div>
+              <p class="mt-2 text-xs text-blue-700">
+                💡 設定後需要重新打開 PowerShell 視窗才能生效。
+              </p>
+            </div>
+
+            <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
+              <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">
+                驗證 Gemini CLI 環境變數
+              </h6>
+              <p class="mb-3 text-sm text-green-700">在 PowerShell 中驗證：</p>
+              <div
+                class="space-y-1 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">echo $env:CODE_ASSIST_ENDPOINT</div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo $env:GOOGLE_CLOUD_ACCESS_TOKEN
+                </div>
+                <div class="whitespace-nowrap text-gray-300">echo $env:GOOGLE_GENAI_USE_GCA</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Codex 环境变量设置 -->
+        <div class="mt-8">
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fas fa-code mr-2 text-indigo-600" />
+            設定 Codex 環境變數
+          </h5>
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            如果你使用支援 OpenAI API 的工具（如 Codex），需要設定以下環境變數：
+          </p>
+
+          <div class="space-y-4">
+            <div class="rounded-lg border border-yellow-200 bg-yellow-50 p-3 sm:p-4">
+              <h6 class="mb-2 font-medium text-yellow-800">Codex 設定檔案</h6>
+              <p class="mb-3 text-sm text-yellow-700">
+                在
+                <code class="rounded bg-yellow-100 px-1">~/.codex/config.toml</code>
+                檔案中新增以下設定：
+              </p>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">model_provider = "crs"</div>
+                <div class="whitespace-nowrap text-gray-300">model = "gpt-5"</div>
+                <div class="whitespace-nowrap text-gray-300">model_reasoning_effort = "high"</div>
+                <div class="whitespace-nowrap text-gray-300">disable_response_storage = true</div>
+                <div class="whitespace-nowrap text-gray-300">preferred_auth_method = "apikey"</div>
+                <div class="mt-2"></div>
+                <div class="whitespace-nowrap text-gray-300">[model_providers.crs]</div>
+                <div class="whitespace-nowrap text-gray-300">name = "crs"</div>
+                <div class="whitespace-nowrap text-gray-300">base_url = "{{ openaiBaseUrl }}"</div>
+                <div class="whitespace-nowrap text-gray-300">wire_api = "responses"</div>
+              </div>
+              <p class="mt-3 text-sm text-yellow-700">
+                在
+                <code class="rounded bg-yellow-100 px-1">~/.codex/auth.json</code>
+                檔案中設定API密鑰：
+              </p>
+              <div
+                class="mt-2 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">{</div>
+                <div class="whitespace-nowrap text-gray-300">"OPENAI_API_KEY": "你的API密鑰"</div>
+                <div class="whitespace-nowrap text-gray-300">}</div>
+              </div>
+              <p class="mt-2 text-xs text-yellow-700">
+                💡 使用與 Claude Code 相同的 API 密鑰即可，格式如 cr_xxxxxxxxxx。
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 第四步：开始使用 -->
+      <div class="mb-6 sm:mb-8">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <span
+            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-orange-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
+            >4</span
+          >
+          開始使用 Claude Code
+        </h4>
+        <div
+          class="rounded-xl border border-orange-100 bg-gradient-to-r from-orange-50 to-yellow-50 p-4 sm:p-6"
+        >
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            現在你可以開始使用 Claude Code 了！
+          </p>
+
+          <div class="space-y-4">
+            <div>
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                啟動 Claude Code
+              </h6>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">claude</div>
+              </div>
+            </div>
+
+            <div>
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                在特定項目中使用
+              </h6>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># 進入你的項目目錄</div>
+                <div class="whitespace-nowrap text-gray-300">cd C:\path\to\your\project</div>
+                <div class="mb-2 mt-2"># 啟動 Claude Code</div>
+                <div class="whitespace-nowrap text-gray-300">claude</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Windows 故障排除 -->
+      <div class="mb-8">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <i class="fas fa-wrench mr-2 text-red-600 sm:mr-3" />
+          Windows 常見問題解決
+        </h4>
+        <div class="space-y-4">
+          <details class="rounded-lg border border-gray-200 bg-gray-50">
+            <summary
+              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
+            >
+              安裝時提示 "permission denied" 錯誤
+            </summary>
+            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
+              <p class="mb-2">這通常是權限問題，嘗試以下解決方法：</p>
+              <ul class="list-inside list-disc space-y-1 text-sm">
+                <li>以管理員身份運行 PowerShell</li>
+                <li>
+                  或者設定 npm 使用用戶目錄：<code
+                    class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                    >npm config set prefix %APPDATA%\npm</code
+                  >
+                </li>
+              </ul>
+            </div>
+          </details>
+
+          <details class="rounded-lg border border-gray-200 bg-gray-50">
+            <summary
+              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
+            >
+              PowerShell 執行策略錯誤
+            </summary>
+            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
+              <p class="mb-2">如果遇到執行策略限制，運行：</p>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">
+                  Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
+                </div>
+              </div>
+            </div>
+          </details>
+
+          <details class="rounded-lg border border-gray-200 bg-gray-50">
+            <summary
+              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
+            >
+              環境變數設定後不生效
+            </summary>
+            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
+              <p class="mb-2">設定永久環境變數後需要：</p>
+              <ul class="list-inside list-disc space-y-1 text-sm">
+                <li>重新啟動 PowerShell 或 CMD</li>
+                <li>或者注销并重新登录 Windows</li>
+                <li>
+                  驗證設定：<code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                    >echo $env:ANTHROPIC_BASE_URL</code
+                  >
+                </li>
+              </ul>
+            </div>
+          </details>
+        </div>
+      </div>
+    </div>
+
+    <!-- macOS 教程 -->
+    <div v-else-if="activeTutorialSystem === 'macos'" class="tutorial-content">
+      <!-- 第一步：安装 Node.js -->
+      <div class="mb-6 sm:mb-10">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <span
+            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-blue-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
+            >1</span
+          >
+          安裝 Node.js 環境
+        </h4>
+        <p class="mb-4 text-gray-600 sm:mb-6">Claude Code 需要 Node.js 環境才能運行。</p>
+
+        <div
+          class="mb-4 rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4 sm:mb-6 sm:p-6"
+        >
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fab fa-apple mr-2 text-gray-700" />
+            macOS 安裝方法
+          </h5>
+          <div class="mb-4">
+            <p class="mb-3 text-gray-700">方法一：使用 Homebrew（推薦）</p>
+            <p class="mb-2 text-xs text-gray-600 dark:text-gray-400 sm:text-sm">
+              如果你已經安裝了 Homebrew，使用它安裝 Node.js 會更方便：
+            </p>
+            <div
+              class="overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
+            >
+              <div class="mb-2"># 更新 Homebrew</div>
+              <div class="whitespace-nowrap text-gray-300">brew update</div>
+              <div class="mb-2 mt-3"># 安裝 Node.js</div>
+              <div class="whitespace-nowrap text-gray-300">brew install node</div>
+            </div>
+          </div>
+          <div class="mb-4">
+            <p class="mb-3 text-gray-700">方法二：官網下載</p>
+            <ol
+              class="ml-2 list-inside list-decimal space-y-1 text-xs text-gray-600 dark:text-gray-400 sm:ml-4 sm:space-y-2 sm:text-sm"
+            >
+              <li>
+                訪問
+                <code
+                  class="rounded bg-gray-100 px-1 py-1 text-xs dark:bg-gray-700 sm:px-2 sm:text-sm"
+                  >https://nodejs.org/</code
+                >
+              </li>
+              <li>下載適合 macOS 的 LTS 版本</li>
+              <li>
+                打開下載的
+                <code
+                  class="rounded bg-gray-100 px-1 py-1 text-xs dark:bg-gray-700 sm:px-2 sm:text-sm"
+                  >.pkg</code
+                >
+                檔案
+              </li>
+              <li>按照安裝程序指引完成安裝</li>
+            </ol>
+          </div>
+          <div class="rounded-lg border border-gray-200 bg-gray-50 p-3 sm:p-4">
+            <h6 class="mb-2 text-sm font-medium text-gray-800 sm:text-base">macOS 注意事項</h6>
+            <ul class="space-y-1 text-xs text-gray-700 sm:text-sm">
+              <li>
+                • 如果遇到權限問題，可能需要使用
+                <code class="rounded bg-gray-200 px-1 text-xs sm:text-sm">sudo</code>
+              </li>
+              <li>• 首次運行可能需要在系統偏好設定中允許</li>
+              <li>• 建議使用 Terminal 或 iTerm2</li>
+            </ul>
+          </div>
+        </div>
+
+        <!-- 驗證安裝 -->
+        <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
+          <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">驗證安裝是否成功</h6>
+          <p class="mb-3 text-sm text-green-700">安裝完成後，打開 Terminal，輸入以下命令：</p>
+          <div
+            class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+          >
+            <div class="whitespace-nowrap text-gray-300">node --version</div>
+            <div class="whitespace-nowrap text-gray-300">npm --version</div>
+          </div>
+          <p class="mt-2 text-sm text-green-700">如果顯示版本號，說明安裝成功了！</p>
+        </div>
+      </div>
+
+      <!-- 第二步：安裝 Claude Code -->
+      <div class="mb-6 sm:mb-10">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <span
+            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-green-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
+            >2</span
+          >
+          安裝 Claude Code
+        </h4>
+
+        <div
+          class="mb-4 rounded-xl border border-purple-100 bg-gradient-to-r from-purple-50 to-pink-50 p-4 sm:mb-6 sm:p-6"
+        >
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fas fa-download mr-2 text-purple-600" />
+            安裝 Claude Code
+          </h5>
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            打開 Terminal，運行以下命令：
+          </p>
+          <div
+            class="mb-4 overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
+          >
+            <div class="mb-2"># 全局安裝 Claude Code</div>
+            <div class="whitespace-nowrap text-gray-300">
+              npm install -g @anthropic-ai/claude-code
+            </div>
+          </div>
+          <p class="mb-2 text-sm text-gray-600">如果遇到權限問題，可以使用 sudo：</p>
+          <div
+            class="overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
+          >
+            <div class="whitespace-nowrap text-gray-300">
+              sudo npm install -g @anthropic-ai/claude-code
+            </div>
+          </div>
+        </div>
+
+        <!-- 驗證安裝 -->
+        <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
+          <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">驗證 Claude Code 安裝</h6>
+          <p class="mb-3 text-sm text-green-700">安裝完成後，輸入以下命令檢查是否安裝成功：</p>
+          <div
+            class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+          >
+            <div class="whitespace-nowrap text-gray-300">claude --version</div>
+          </div>
+          <p class="mt-2 text-sm text-green-700">
+            如果顯示版本號，恭喜你！Claude Code 已經成功安裝了。
+          </p>
+        </div>
+      </div>
+
+      <!-- 第三步：設定環境變數 -->
+      <div class="mb-6 sm:mb-10">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <span
+            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-orange-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
+            >3</span
+          >
+          設定環境變數
+        </h4>
+
+        <div
+          class="mb-4 rounded-xl border border-orange-100 bg-gradient-to-r from-orange-50 to-yellow-50 p-4 sm:mb-6 sm:p-6"
+        >
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fas fa-cog mr-2 text-orange-600" />
+            設定 Claude Code 環境變數
+          </h5>
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            為了讓 Claude Code 連接到你的中轉服務，需要設定兩個環境變數：
+          </p>
+
+          <div class="space-y-4">
+            <div class="rounded-lg border border-orange-200 bg-white p-3 sm:p-4">
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                方法一：臨時設定（當前會話）
+              </h6>
+              <p class="mb-3 text-sm text-gray-600">在 Terminal 中運行以下命令：</p>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">
+                  export ANTHROPIC_BASE_URL="{{ currentBaseUrl }}"
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  export ANTHROPIC_AUTH_TOKEN="你的API密鑰"
+                </div>
+              </div>
+              <p class="mt-2 text-xs text-yellow-700">
+                💡 記得將 "你的API密鑰" 替換為在上方 "API Keys" 標籤頁中創建的實際密鑰。
+              </p>
+            </div>
+
+            <div class="rounded-lg border border-orange-200 bg-white p-3 sm:p-4">
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                方法二：永久設定
+              </h6>
+              <p class="mb-3 text-sm text-gray-600">
+                編輯你的 shell 設定檔案（根據你使用的 shell）：
+              </p>
+              <div
+                class="mb-3 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># 對於 zsh (預設)</div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export ANTHROPIC_BASE_URL="{{ currentBaseUrl }}"' >> ~/.zshrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export ANTHROPIC_AUTH_TOKEN="你的API密鑰"' >> ~/.zshrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">source ~/.zshrc</div>
+              </div>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># 對於 bash</div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export ANTHROPIC_BASE_URL="{{ currentBaseUrl }}"' >> ~/.bash_profile
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export ANTHROPIC_AUTH_TOKEN="你的API密鑰"' >> ~/.bash_profile
+                </div>
+                <div class="whitespace-nowrap text-gray-300">source ~/.bash_profile</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Gemini CLI 环境变量设置 -->
+        <div class="mt-8">
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fas fa-robot mr-2 text-green-600" />
+            設定 Gemini CLI 環境變數
+          </h5>
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            如果你使用 Gemini CLI，需要設定以下環境變數：
+          </p>
+
+          <div class="space-y-4">
+            <div class="rounded-lg border border-green-200 bg-white p-3 sm:p-4">
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                Terminal 設定方法
+              </h6>
+              <p class="mb-3 text-sm text-gray-600">在 Terminal 中運行以下命令：</p>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">
+                  export CODE_ASSIST_ENDPOINT="{{ geminiBaseUrl }}"
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  export GOOGLE_CLOUD_ACCESS_TOKEN="你的API密鑰"
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  export GOOGLE_GENAI_USE_GCA="true"
+                </div>
+              </div>
+              <p class="mt-2 text-xs text-yellow-700">
+                💡 使用與 Claude Code 相同的 API 密鑰即可。
+              </p>
+            </div>
+
+            <div class="rounded-lg border border-green-200 bg-white p-3 sm:p-4">
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                永久設定方法
+              </h6>
+              <p class="mb-3 text-sm text-gray-600">新增到你的 shell 設定檔案：</p>
+              <div
+                class="mb-3 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># 對於 zsh (預設)</div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export CODE_ASSIST_ENDPOINT="{{ geminiBaseUrl }}"' >> ~/.zshrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export GOOGLE_CLOUD_ACCESS_TOKEN="你的API密鑰"' >> ~/.zshrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export GOOGLE_GENAI_USE_GCA="true"' >> ~/.zshrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">source ~/.zshrc</div>
+              </div>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># 對於 bash</div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export CODE_ASSIST_ENDPOINT="{{ geminiBaseUrl }}"' >> ~/.bash_profile
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export GOOGLE_CLOUD_ACCESS_TOKEN="你的API密鑰"' >> ~/.bash_profile
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export GOOGLE_GENAI_USE_GCA="true"' >> ~/.bash_profile
+                </div>
+                <div class="whitespace-nowrap text-gray-300">source ~/.bash_profile</div>
+              </div>
+            </div>
+
+            <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
+              <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">
+                驗證 Gemini CLI 環境變數
+              </h6>
+              <p class="mb-3 text-sm text-green-700">在 Terminal 中驗證：</p>
+              <div
+                class="space-y-1 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">echo $CODE_ASSIST_ENDPOINT</div>
+                <div class="whitespace-nowrap text-gray-300">echo $GOOGLE_CLOUD_ACCESS_TOKEN</div>
+                <div class="whitespace-nowrap text-gray-300">echo $GOOGLE_GENAI_USE_GCA</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Codex 环境变量设置 -->
+        <div class="mt-8">
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fas fa-code mr-2 text-indigo-600" />
+            設定 Codex 環境變數
+          </h5>
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            如果你使用支援 OpenAI API 的工具（如 Codex），需要設定以下環境變數：
+          </p>
+
+          <div class="space-y-4">
+            <div class="rounded-lg border border-yellow-200 bg-yellow-50 p-3 sm:p-4">
+              <h6 class="mb-2 font-medium text-yellow-800">Codex 設定檔案</h6>
+              <p class="mb-3 text-sm text-yellow-700">
+                在
+                <code class="rounded bg-yellow-100 px-1">~/.codex/config.toml</code>
+                檔案中新增以下設定：
+              </p>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">model_provider = "crs"</div>
+                <div class="whitespace-nowrap text-gray-300">model = "gpt-5"</div>
+                <div class="whitespace-nowrap text-gray-300">model_reasoning_effort = "high"</div>
+                <div class="whitespace-nowrap text-gray-300">disable_response_storage = true</div>
+                <div class="whitespace-nowrap text-gray-300">preferred_auth_method = "apikey"</div>
+                <div class="mt-2"></div>
+                <div class="whitespace-nowrap text-gray-300">[model_providers.crs]</div>
+                <div class="whitespace-nowrap text-gray-300">name = "crs"</div>
+                <div class="whitespace-nowrap text-gray-300">base_url = "{{ openaiBaseUrl }}"</div>
+                <div class="whitespace-nowrap text-gray-300">wire_api = "responses"</div>
+              </div>
+              <p class="mt-3 text-sm text-yellow-700">
+                在
+                <code class="rounded bg-yellow-100 px-1">~/.codex/auth.json</code>
+                檔案中設定API密鑰：
+              </p>
+              <div
+                class="mt-2 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">{</div>
+                <div class="whitespace-nowrap text-gray-300">"OPENAI_API_KEY": "你的API密鑰"</div>
+                <div class="whitespace-nowrap text-gray-300">}</div>
+              </div>
+              <p class="mt-2 text-xs text-yellow-700">
+                💡 使用與 Claude Code 相同的 API 密鑰即可，格式如 cr_xxxxxxxxxx。
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 第四步：开始使用 -->
+      <div class="mb-8">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <span
+            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-yellow-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
+            >4</span
+          >
+          開始使用 Claude Code
+        </h4>
+        <div
+          class="rounded-xl border border-yellow-100 bg-gradient-to-r from-yellow-50 to-amber-50 p-4 sm:p-6"
+        >
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            現在你可以開始使用 Claude Code 了！
+          </p>
+
+          <div class="space-y-4">
+            <div>
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                啟動 Claude Code
+              </h6>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">claude</div>
+              </div>
+            </div>
+
+            <div>
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                在特定項目中使用
+              </h6>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># 進入你的項目目錄</div>
+                <div class="whitespace-nowrap text-gray-300">cd /path/to/your/project</div>
+                <div class="mb-2 mt-2"># 啟動 Claude Code</div>
+                <div class="whitespace-nowrap text-gray-300">claude</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- macOS 故障排除 -->
+      <div class="mb-8">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <i class="fas fa-wrench mr-2 text-red-600 sm:mr-3" />
+          macOS 常見問題解決
+        </h4>
+        <div class="space-y-4">
+          <details class="rounded-lg border border-gray-200 bg-gray-50">
+            <summary
+              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
+            >
+              安裝時提示權限錯誤
+            </summary>
+            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
+              <p class="mb-2">嘗試以下解決方法：</p>
+              <ul class="list-inside list-disc space-y-1 text-sm">
+                <li>
+                  使用 sudo 安裝：<code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                    >sudo npm install -g @anthropic-ai/claude-code</code
+                  >
+                </li>
+                <li>
+                  或者設定 npm 使用用戶目錄：<code
+                    class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                    >npm config set prefix ~/.npm-global</code
+                  >
+                </li>
+              </ul>
+            </div>
+          </details>
+
+          <details class="rounded-lg border border-gray-200 bg-gray-50">
+            <summary
+              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
+            >
+              macOS 安全設定阻止運行
+            </summary>
+            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
+              <p class="mb-2">如果系統阻止運行 Claude Code：</p>
+              <ul class="list-inside list-disc space-y-1 text-sm">
+                <li>打開"系統偏好設定" → "安全性與隱私"</li>
+                <li>點擊"仍要打開"或"允許"</li>
+                <li>
+                  或者在 Terminal 中運行：<code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                    >sudo spctl --master-disable</code
+                  >
+                </li>
+              </ul>
+            </div>
+          </details>
+
+          <details class="rounded-lg border border-gray-200 bg-gray-50">
+            <summary
+              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
+            >
+              環境變數不生效
+            </summary>
+            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
+              <p class="mb-2">檢查以下幾點：</p>
+              <ul class="list-inside list-disc space-y-1 text-sm">
+                <li>確認修改了正確的設定檔案（.zshrc 或 .bash_profile）</li>
+                <li>重新啟動 Terminal</li>
+                <li>
+                  驗證設定：<code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                    >echo $ANTHROPIC_BASE_URL</code
+                  >
+                </li>
+              </ul>
+            </div>
+          </details>
+        </div>
+      </div>
+    </div>
+
+    <!-- Linux 教程 -->
+    <div v-else-if="activeTutorialSystem === 'linux'" class="tutorial-content">
+      <!-- 第一步：安装 Node.js -->
+      <div class="mb-6 sm:mb-10">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <span
+            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-blue-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
+            >1</span
+          >
+          安裝 Node.js 環境
+        </h4>
+        <p class="mb-4 text-gray-600 sm:mb-6">Claude Code 需要 Node.js 環境才能運行。</p>
+
+        <div
+          class="mb-4 rounded-xl border border-orange-100 bg-gradient-to-r from-orange-50 to-red-50 p-4 sm:mb-6 sm:p-6"
+        >
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fab fa-ubuntu mr-2 text-orange-600" />
+            Linux 安裝方法
+          </h5>
+          <div class="mb-4">
+            <p class="mb-3 text-gray-700">方法一：使用官方倉庫（推薦）</p>
+            <div
+              class="overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
+            >
+              <div class="mb-2"># 新增 NodeSource 倉庫</div>
+              <div class="whitespace-nowrap text-gray-300">
+                curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
+              </div>
+              <div class="mb-2 mt-3"># 安裝 Node.js</div>
+              <div class="whitespace-nowrap text-gray-300">sudo apt-get install -y nodejs</div>
+            </div>
+          </div>
+          <div class="mb-4">
+            <p class="mb-3 text-gray-700">方法二：使用系統套件管理器</p>
+            <p class="mb-2 text-xs text-gray-600 dark:text-gray-400 sm:text-sm">
+              雖然版本可能不是最新的，但對於基本使用已經足夠：
+            </p>
+            <div
+              class="overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
+            >
+              <div class="mb-2"># Ubuntu/Debian</div>
+              <div class="whitespace-nowrap text-gray-300">sudo apt update</div>
+              <div class="whitespace-nowrap text-gray-300">sudo apt install nodejs npm</div>
+              <div class="mb-2 mt-3"># CentOS/RHEL/Fedora</div>
+              <div class="whitespace-nowrap text-gray-300">sudo dnf install nodejs npm</div>
+            </div>
+          </div>
+          <div class="rounded-lg border border-orange-200 bg-orange-50 p-3 sm:p-4">
+            <h6 class="mb-2 text-sm font-medium text-orange-800 sm:text-base">Linux 注意事項</h6>
+            <ul class="space-y-1 text-xs text-orange-700 sm:text-sm">
+              <li>• 某些發行版可能需要安裝額外的依賴</li>
+              <li>• 如果遇到權限問題，使用 <code class="rounded bg-orange-200 px-1">sudo</code></li>
+              <li>• 確保你的用戶在 npm 的全局目錄有寫權限</li>
+            </ul>
+          </div>
+        </div>
+
+        <!-- 驗證安裝 -->
+        <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
+          <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">驗證安裝是否成功</h6>
+          <p class="mb-3 text-sm text-green-700">安裝完成後，打開終端，輸入以下命令：</p>
+          <div
+            class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+          >
+            <div class="whitespace-nowrap text-gray-300">node --version</div>
+            <div class="whitespace-nowrap text-gray-300">npm --version</div>
+          </div>
+          <p class="mt-2 text-sm text-green-700">如果顯示版本號，說明安裝成功了！</p>
+        </div>
+      </div>
+
+      <!-- 第二步：安裝 Claude Code -->
+      <div class="mb-6 sm:mb-10">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <span
+            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-green-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
+            >2</span
+          >
+          安裝 Claude Code
+        </h4>
+
+        <div
+          class="mb-4 rounded-xl border border-purple-100 bg-gradient-to-r from-purple-50 to-pink-50 p-4 sm:mb-6 sm:p-6"
+        >
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fas fa-download mr-2 text-purple-600" />
+            安裝 Claude Code
+          </h5>
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            打開終端，運行以下命令：
+          </p>
+          <div
+            class="mb-4 overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
+          >
+            <div class="mb-2"># 全局安裝 Claude Code</div>
+            <div class="whitespace-nowrap text-gray-300">
+              npm install -g @anthropic-ai/claude-code
+            </div>
+          </div>
+          <p class="mb-2 text-sm text-gray-600">如果遇到權限問題，可以使用 sudo：</p>
+          <div
+            class="overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
+          >
+            <div class="whitespace-nowrap text-gray-300">
+              sudo npm install -g @anthropic-ai/claude-code
+            </div>
+          </div>
+        </div>
+
+        <!-- 驗證安裝 -->
+        <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
+          <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">驗證 Claude Code 安裝</h6>
+          <p class="mb-3 text-sm text-green-700">安裝完成後，輸入以下命令檢查是否安裝成功：</p>
+          <div
+            class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+          >
+            <div class="whitespace-nowrap text-gray-300">claude --version</div>
+          </div>
+          <p class="mt-2 text-sm text-green-700">
+            如果顯示版本號，恭喜你！Claude Code 已經成功安裝了。
+          </p>
+        </div>
+      </div>
+
+      <!-- 第三步：設定環境變數 -->
+      <div class="mb-6 sm:mb-10">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <span
+            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-orange-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
+            >3</span
+          >
+          設定環境變數
+        </h4>
+
+        <div
+          class="mb-4 rounded-xl border border-orange-100 bg-gradient-to-r from-orange-50 to-yellow-50 p-4 sm:mb-6 sm:p-6"
+        >
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fas fa-cog mr-2 text-orange-600" />
+            設定 Claude Code 環境變數
+          </h5>
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            為了讓 Claude Code 連接到你的中轉服務，需要設定兩個環境變數：
+          </p>
+
+          <div class="space-y-4">
+            <div class="rounded-lg border border-orange-200 bg-white p-3 sm:p-4">
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                方法一：臨時設定（當前會話）
+              </h6>
+              <p class="mb-3 text-sm text-gray-600">在終端中運行以下命令：</p>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">
+                  export ANTHROPIC_BASE_URL="{{ currentBaseUrl }}"
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  export ANTHROPIC_AUTH_TOKEN="你的API密鑰"
+                </div>
+              </div>
+              <p class="mt-2 text-xs text-yellow-700">
+                💡 記得將 "你的API密鑰" 替換為在上方 "API Keys" 標籤頁中創建的實際密鑰。
+              </p>
+            </div>
+
+            <div class="rounded-lg border border-orange-200 bg-white p-3 sm:p-4">
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                方法二：永久設定
+              </h6>
+              <p class="mb-3 text-sm text-gray-600">編輯你的 shell 設定檔案：</p>
+              <div
+                class="mb-3 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># 對於 bash (預設)</div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export ANTHROPIC_BASE_URL="{{ currentBaseUrl }}"' >> ~/.bashrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export ANTHROPIC_AUTH_TOKEN="你的API密鑰"' >> ~/.bashrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">source ~/.bashrc</div>
+              </div>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># 對於 zsh</div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export ANTHROPIC_BASE_URL="{{ currentBaseUrl }}"' >> ~/.zshrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export ANTHROPIC_AUTH_TOKEN="你的API密鑰"' >> ~/.zshrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">source ~/.zshrc</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Gemini CLI 环境变量设置 -->
+        <div class="mt-8">
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fas fa-robot mr-2 text-green-600" />
+            設定 Gemini CLI 環境變數
+          </h5>
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            如果你使用 Gemini CLI，需要設定以下環境變數：
+          </p>
+
+          <div class="space-y-4">
+            <div class="rounded-lg border border-green-200 bg-white p-3 sm:p-4">
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                終端設定方法
+              </h6>
+              <p class="mb-3 text-sm text-gray-600">在終端中運行以下命令：</p>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">
+                  export CODE_ASSIST_ENDPOINT="{{ geminiBaseUrl }}"
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  export GOOGLE_CLOUD_ACCESS_TOKEN="你的API密鑰"
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  export GOOGLE_GENAI_USE_GCA="true"
+                </div>
+              </div>
+              <p class="mt-2 text-xs text-yellow-700">
+                💡 使用與 Claude Code 相同的 API 密鑰即可。
+              </p>
+            </div>
+
+            <div class="rounded-lg border border-green-200 bg-white p-3 sm:p-4">
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                永久設定方法
+              </h6>
+              <p class="mb-3 text-sm text-gray-600">新增到你的 shell 設定檔案：</p>
+              <div
+                class="mb-3 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># 對於 bash (預設)</div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export CODE_ASSIST_ENDPOINT="{{ geminiBaseUrl }}"' >> ~/.bashrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export GOOGLE_CLOUD_ACCESS_TOKEN="你的API密鑰"' >> ~/.bashrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export GOOGLE_GENAI_USE_GCA="true"' >> ~/.bashrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">source ~/.bashrc</div>
+              </div>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># 對於 zsh</div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export CODE_ASSIST_ENDPOINT="{{ geminiBaseUrl }}"' >> ~/.zshrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export GOOGLE_CLOUD_ACCESS_TOKEN="你的API密鑰"' >> ~/.zshrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  echo 'export GOOGLE_GENAI_USE_GCA="true"' >> ~/.zshrc
+                </div>
+                <div class="whitespace-nowrap text-gray-300">source ~/.zshrc</div>
+              </div>
+            </div>
+
+            <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
+              <h6 class="mb-2 font-medium text-green-800 dark:text-green-300">
+                驗證 Gemini CLI 環境變數
+              </h6>
+              <p class="mb-3 text-sm text-green-700">在終端中驗證：</p>
+              <div
+                class="space-y-1 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">echo $CODE_ASSIST_ENDPOINT</div>
+                <div class="whitespace-nowrap text-gray-300">echo $GOOGLE_CLOUD_ACCESS_TOKEN</div>
+                <div class="whitespace-nowrap text-gray-300">echo $GOOGLE_GENAI_USE_GCA</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Codex 环境变量设置 -->
+        <div class="mt-8">
+          <h5
+            class="mb-2 flex items-center text-base font-semibold text-gray-800 dark:text-gray-600 sm:mb-3 sm:text-lg"
+          >
+            <i class="fas fa-code mr-2 text-indigo-600" />
+            設定 Codex 環境變數
+          </h5>
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            如果你使用支援 OpenAI API 的工具（如 Codex），需要設定以下環境變數：
+          </p>
+
+          <div class="space-y-4">
+            <div class="rounded-lg border border-yellow-200 bg-yellow-50 p-3 sm:p-4">
+              <h6 class="mb-2 font-medium text-yellow-800">Codex 設定檔案</h6>
+              <p class="mb-3 text-sm text-yellow-700">
+                在
+                <code class="rounded bg-yellow-100 px-1">~/.codex/config.toml</code>
+                檔案中新增以下設定：
+              </p>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">model_provider = "crs"</div>
+                <div class="whitespace-nowrap text-gray-300">model = "gpt-5"</div>
+                <div class="whitespace-nowrap text-gray-300">model_reasoning_effort = "high"</div>
+                <div class="whitespace-nowrap text-gray-300">disable_response_storage = true</div>
+                <div class="whitespace-nowrap text-gray-300">preferred_auth_method = "apikey"</div>
+                <div class="mt-2"></div>
+                <div class="whitespace-nowrap text-gray-300">[model_providers.crs]</div>
+                <div class="whitespace-nowrap text-gray-300">name = "crs"</div>
+                <div class="whitespace-nowrap text-gray-300">base_url = "{{ openaiBaseUrl }}"</div>
+                <div class="whitespace-nowrap text-gray-300">wire_api = "responses"</div>
+              </div>
+              <p class="mt-3 text-sm text-yellow-700">
+                在
+                <code class="rounded bg-yellow-100 px-1">~/.codex/auth.json</code>
+                檔案中設定API密鑰：
+              </p>
+              <div
+                class="mt-2 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">{</div>
+                <div class="whitespace-nowrap text-gray-300">"OPENAI_API_KEY": "你的API密鑰"</div>
+                <div class="whitespace-nowrap text-gray-300">}</div>
+              </div>
+              <p class="mt-2 text-xs text-yellow-700">
+                💡 使用與 Claude Code 相同的 API 密鑰即可，格式如 cr_xxxxxxxxxx。
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 第四步：开始使用 -->
+      <div class="mb-8">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <span
+            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-yellow-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
+            >4</span
+          >
+          開始使用 Claude Code
+        </h4>
+        <div
+          class="rounded-xl border border-yellow-100 bg-gradient-to-r from-yellow-50 to-amber-50 p-4 sm:p-6"
+        >
+          <p class="mb-3 text-sm text-gray-700 dark:text-gray-300 sm:mb-4 sm:text-base">
+            現在你可以開始使用 Claude Code 了！
+          </p>
+
+          <div class="space-y-4">
+            <div>
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                啟動 Claude Code
+              </h6>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="whitespace-nowrap text-gray-300">claude</div>
+              </div>
+            </div>
+
+            <div>
+              <h6 class="mb-2 text-sm font-medium text-gray-800 dark:text-gray-600 sm:text-base">
+                在特定項目中使用
+              </h6>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># 進入你的項目目錄</div>
+                <div class="whitespace-nowrap text-gray-300">cd /path/to/your/project</div>
+                <div class="mb-2 mt-2"># 啟動 Claude Code</div>
+                <div class="whitespace-nowrap text-gray-300">claude</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Linux 故障排除 -->
+      <div class="mb-8">
+        <h4
+          class="mb-3 flex items-center text-lg font-semibold text-gray-800 dark:text-gray-300 sm:mb-4 sm:text-xl"
+        >
+          <i class="fas fa-wrench mr-2 text-red-600 sm:mr-3" />
+          Linux 常見問題解決
+        </h4>
+        <div class="space-y-4">
+          <details class="rounded-lg border border-gray-200 bg-gray-50">
+            <summary
+              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
+            >
+              安裝時提示權限錯誤
+            </summary>
+            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
+              <p class="mb-2">嘗試以下解決方法：</p>
+              <ul class="list-inside list-disc space-y-1 text-sm">
+                <li>
+                  使用 sudo 安裝：<code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                    >sudo npm install -g @anthropic-ai/claude-code</code
+                  >
+                </li>
+                <li>
+                  或者設定 npm 使用用戶目錄：<code
+                    class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                    >npm config set prefix ~/.npm-global</code
+                  >
+                </li>
+                <li>
+                  然後新增到 PATH：<code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                    >export PATH=~/.npm-global/bin:$PATH</code
+                  >
+                </li>
+              </ul>
+            </div>
+          </details>
+
+          <details class="rounded-lg border border-gray-200 bg-gray-50">
+            <summary
+              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
+            >
+              缺少依賴庫
+            </summary>
+            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
+              <p class="mb-2">某些 Linux 發行版需要安裝額外依賴：</p>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># Ubuntu/Debian</div>
+                <div class="whitespace-nowrap text-gray-300">sudo apt install build-essential</div>
+                <div class="mb-2 mt-2"># CentOS/RHEL</div>
+                <div class="whitespace-nowrap text-gray-300">
+                  sudo dnf groupinstall "Development Tools"
+                </div>
+              </div>
+            </div>
+          </details>
+
+          <details class="rounded-lg border border-gray-200 bg-gray-50">
+            <summary
+              class="cursor-pointer p-3 text-sm font-medium text-gray-800 hover:bg-gray-100 sm:p-4 sm:text-base"
+            >
+              環境變數不生效
+            </summary>
+            <div class="px-3 pb-3 text-gray-600 sm:px-4 sm:pb-4">
+              <p class="mb-2">檢查以下幾點：</p>
+              <ul class="list-inside list-disc space-y-1 text-sm">
+                <li>確認修改了正確的設定檔案（.bashrc 或 .zshrc）</li>
+                <li>
+                  重新啟動終端或運行
+                  <code class="rounded bg-gray-200 px-1 text-xs sm:text-sm">source ~/.bashrc</code>
+                </li>
+                <li>
+                  驗證設定：<code class="rounded bg-gray-200 px-1 text-xs sm:text-sm"
+                    >echo $ANTHROPIC_BASE_URL</code
+                  >
+                </li>
+              </ul>
+            </div>
+          </details>
+        </div>
+      </div>
+    </div>
+
+    <!-- 结尾 -->
+    <div
+      class="rounded-xl bg-gradient-to-r from-blue-500 to-purple-600 p-4 text-center text-white sm:p-6"
+    >
+      <h5 class="mb-2 text-lg font-semibold sm:text-xl">🎉 恭喜你！</h5>
+      <p class="mb-3 text-sm text-blue-100 sm:mb-4 sm:text-base">
+        你已經成功安裝並設定了 Claude Code，現在可以開始享受 AI 編程助手帶來的便利了。
+      </p>
+      <p class="text-xs text-blue-200 sm:text-sm">
+        如果在使用過程中遇到任何問題，可以查看官方文檔或社區討論獲取幫助。
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+
+// 当前系统选择
+const activeTutorialSystem = ref('windows')
+
+// 系统列表
+const tutorialSystems = [
+  { key: 'windows', name: 'Windows', icon: 'fab fa-windows' },
+  { key: 'macos', name: 'macOS', icon: 'fab fa-apple' },
+  { key: 'linux', name: 'Linux / WSL2', icon: 'fab fa-linux' }
+]
+
+// 获取基础URL前缀
+const getBaseUrlPrefix = () => {
+  // 优先使用环境变量配置的自定义前缀
+  const customPrefix = import.meta.env.VITE_API_BASE_PREFIX
+  if (customPrefix) {
+    // 去除末尾的斜杠
+    return customPrefix.replace(/\/$/, '')
+  }
+
+  // 否则使用当前浏览器訪問地址
+  // 更健壮的获取 origin 的方法，兼容旧版浏览器和特殊环境
+  let origin = ''
+
+  if (window.location.origin) {
+    // 现代浏览器直接支持 origin
+    origin = window.location.origin
+  } else {
+    // 旧版浏览器或特殊环境的兼容处理
+    const protocol = window.location.protocol
+    const hostname = window.location.hostname
+    const port = window.location.port
+
+    origin = protocol + '//' + hostname
+
+    // 只有在非預設埠號時才新增埠號
+    if (
+      port &&
+      ((protocol === 'http:' && port !== '80') || (protocol === 'https:' && port !== '443'))
+    ) {
+      origin += ':' + port
+    }
+  }
+
+  // 如果还是获取不到，使用当前页面的 URL 推导
+  if (!origin) {
+    const currentUrl = window.location.href
+    const pathStart = currentUrl.indexOf('/', 8) // 跳过 http:// 或 https://
+    if (pathStart !== -1) {
+      origin = currentUrl.substring(0, pathStart)
+    } else {
+      // 最後的降級方案，使用相對路徑
+      console.warn('無法獲取完整的 origin，將使用相對路徑')
+      return ''
+    }
+  }
+
+  return origin
+}
+
+// 当前基础URL - Claude Code
+const currentBaseUrl = computed(() => {
+  return getBaseUrlPrefix() + '/api'
+})
+
+// Gemini CLI 基础URL
+const geminiBaseUrl = computed(() => {
+  return getBaseUrlPrefix() + '/gemini'
+})
+
+// OpenAI/Codex 基础URL
+const openaiBaseUrl = computed(() => {
+  return getBaseUrlPrefix() + '/openai'
+})
+</script>
+
+<style scoped>
+.tutorial-container {
+  min-height: calc(100vh - 300px);
+}
+
+.tutorial-content {
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+code {
+  font-family: 'Fira Code', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+}
+
+.tutorial-content h4 {
+  scroll-margin-top: 100px;
+}
+
+.tutorial-content .bg-gradient-to-r {
+  transition: all 0.2s ease;
+}
+
+.tutorial-content .bg-gradient-to-r:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+</style>