diff --git a/web/admin-spa/src/views/TutorialView.vue b/web/admin-spa/src/views/TutorialView.vue
index bd95f00d..c04959f7 100644
--- a/web/admin-spa/src/views/TutorialView.vue
+++ b/web/admin-spa/src/views/TutorialView.vue
@@ -1613,21 +1613,49 @@
             VSCode Claude 插件配置
           </h6>
           <p class="mb-3 text-sm text-indigo-700">
-            如果使用 VSCode 的 Claude 插件，需要在配置文件中进行设置：
+            如果使用 VSCode 的 Claude 插件，请在 VSCode 设置中为扩展添加以下环境变量：
           </p>
           <div class="mb-3 space-y-2">
             <p class="text-sm text-indigo-700">
-              <strong>配置文件位置：</strong>
-              <code class="rounded bg-indigo-100 px-1">~/.claude/config.json</code>
+              <strong>操作步骤：</strong>
+              打开 VSCode，依次选择「文件」→「首选项」→「设置」，搜索
+              <code class="rounded bg-indigo-100 px-1">Claude Code: Environment Variables</code>
+              并点击「在 settings.json 中编辑」。
+            </p>
+            <p class="text-xs text-indigo-600">
+              💡 也可以直接编辑
+              <code class="rounded bg-indigo-100 px-1">~/.config/Code/User/settings.json</code>。
             </p>
-            <p class="text-xs text-indigo-600">💡 如果该文件不存在，请手动创建。</p>
           </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="whitespace-nowrap text-gray-300">"claude-code.environmentVariables": [</div>
             <div class="whitespace-nowrap text-gray-300">{</div>
-            <div class="whitespace-nowrap text-gray-300">"primaryApiKey": "crs"</div>
+            <div class="whitespace-nowrap text-gray-300">"name": "ANTHROPIC_BASE_URL",</div>
+            <div class="whitespace-nowrap text-gray-300">"value": "{{ currentBaseUrl }}"</div>
+            <div class="whitespace-nowrap text-gray-300">},</div>
+            <div class="whitespace-nowrap text-gray-300">{</div>
+            <div class="whitespace-nowrap text-gray-300">"name": "ANTHROPIC_AUTH_TOKEN",</div>
+            <div class="whitespace-nowrap text-gray-300">"value": "你的API密钥"</div>
             <div class="whitespace-nowrap text-gray-300">}</div>
+            <div class="whitespace-nowrap text-gray-300">]</div>
+          </div>
+          <p class="mt-3 text-xs text-indigo-600">
+            💡 保存后重启 VSCode。如果仍提示 “Invalid API key”，请确认所填密钥有效且未过期。
+          </p>
+          <div class="mt-4 rounded-lg border border-indigo-200 bg-white p-3 sm:p-4">
+            <p class="mb-3 text-sm text-indigo-700">
+              需要在配置文件中<code class="rounded bg-indigo-100 px-1">~/.claude/config.json</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">{</div>
+              <div class="whitespace-nowrap text-gray-300">"primaryApiKey": "crs"</div>
+              <div class="whitespace-nowrap text-gray-300">}</div>
+            </div>
           </div>
         </div>
       </div>