From 27d14a4bcc6d2096e4f095cb3865a77a07b0f152 Mon Sep 17 00:00:00 2001
From: sanbuphy <physicoada@gmail.com>
Date: Tue, 13 Jan 2026 20:16:33 +0800
Subject: [PATCH] fix(docs): update language-specific stage card links to use
 dynamic base

Standardize stage card links across language versions by using dynamic base path
Convert static div elements to anchor tags in Japanese and English versions
---
 docs/en-us/index.md | 31 +++++++++++++++++++------------
 docs/ja-jp/index.md | 31 +++++++++++++++++++------------
 docs/zh-cn/index.md |  8 ++++----
 3 files changed, 42 insertions(+), 28 deletions(-)

diff --git a/docs/en-us/index.md b/docs/en-us/index.md
index fa50519..7ac41a3 100644
--- a/docs/en-us/index.md
+++ b/docs/en-us/index.md
@@ -34,31 +34,38 @@ features:
   </p>
 </div>
 
+<script setup>
+import { useData } from 'vitepress'
+
+const { site } = useData()
+const base = site.value.base
+</script>
+
 <div class="stage-container">
-  <div class="stage-card">
+  <a :href="base + 'en-us/stage-0/0.1-learning-map/'" class="stage-card">
     <div class="stage-icon">🌱</div>
     <h3>Stage 0: Getting Started</h3>
     <p>Suitable for product, operations, and non-technical backgrounds. Understand AI programming logic through games and build confidence.</p>
-    <a href="./stage-0/0.1-learning-map/">Learn More →</a>
-  </div>
-  <div class="stage-card">
+    <span>Learn More →</span>
+  </a>
+  <a :href="base + 'en-us/stage-1/1.1-introduction-to-ai-ide/'" class="stage-card">
     <div class="stage-icon">🎨</div>
     <h3>Stage 1: AI Product Manager</h3>
     <p>Master the Vibe Coding workflow. Learn to break down requirements and independently complete high-fidelity web application prototypes.</p>
-    <a href="./stage-1/1.1-introduction-to-ai-ide/">Learn More →</a>
-  </div>
-  <div class="stage-card">
+    <span>Learn More →</span>
+  </a>
+  <a :href="base + 'en-us/stage-2/frontend/2.0-lovart-assets/'" class="stage-card">
     <div class="stage-icon">💻</div>
     <h3>Stage 2: Full-Stack Development</h3>
     <p>Dive deep into full-stack development. Frontend componentization, database design, backend API development, and deployment.</p>
-    <a href="./stage-2/frontend/2.0-lovart-assets/">Learn More →</a>
-  </div>
-  <div class="stage-card">
+    <span>Learn More →</span>
+  </a>
+  <a :href="base + 'en-us/stage-3/core-skills/3.1-mcp-claudecode-skills/'" class="stage-card">
     <div class="stage-icon">🚀</div>
     <h3>Stage 3: Advanced Development</h3>
     <p>Build complex cross-platform applications. WeChat mini-program practical实战, challenge higher-level AI-native application development.</p>
-    <a href="./stage-3/core-skills/3.1-mcp-claudecode-skills/">Learn More →</a>
-  </div>
+    <span>Learn More →</span>
+  </a>
 </div>
 
 <style>
diff --git a/docs/ja-jp/index.md b/docs/ja-jp/index.md
index 2acc149..45f2d50 100644
--- a/docs/ja-jp/index.md
+++ b/docs/ja-jp/index.md
@@ -34,31 +34,38 @@ features:
   </p>
 </div>
 
+<script setup>
+import { useData } from 'vitepress'
+
+const { site } = useData()
+const base = site.value.base
+</script>
+
 <div class="stage-container">
-  <div class="stage-card">
+  <a :href="base + 'ja-jp/stage-0/0.1-learning-map/'" class="stage-card">
     <div class="stage-icon">🌱</div>
     <h3>Stage 0: 入門</h3>
     <p>プロダクト、運用、非技術的背景に適しています。ゲームを通じて AI プログラミングロジックを理解し、自信を構築しましょう。</p>
-    <a href="./stage-0/0.1-learning-map/">詳しく見る →</a>
-  </div>
-  <div class="stage-card">
+    <span>詳しく見る →</span>
+  </a>
+  <a :href="base + 'ja-jp/stage-1/1.1-introduction-to-ai-ide/'" class="stage-card">
     <div class="stage-icon">🎨</div>
     <h3>Stage 1: AI プロダクトマネージャー</h3>
     <p>Vibe Coding ワークフローをマスターしましょう。要件を分解し、高品質な Web アプリケーションプロトタイプを独立して完成させる方法を学びます。</p>
-    <a href="./stage-1/1.1-introduction-to-ai-ide/">詳しく見る →</a>
-  </div>
-  <div class="stage-card">
+    <span>詳しく見る →</span>
+  </a>
+  <a :href="base + 'ja-jp/stage-2/frontend/2.0-lovart-assets/'" class="stage-card">
     <div class="stage-icon">💻</div>
     <h3>Stage 2: フルスタック開発</h3>
     <p>フルスタック開発に深く潜り込みましょう。フロントエンドコンポーネント化、データベース設計、バックエンド API 開発、デプロイメント。</p>
-    <a href="./stage-2/frontend/2.0-lovart-assets/">詳しく見る →</a>
-  </div>
-  <div class="stage-card">
+    <span>詳しく見る →</span>
+  </a>
+  <a :href="base + 'ja-jp/stage-3/core-skills/3.1-mcp-claudecode-skills/'" class="stage-card">
     <div class="stage-icon">🚀</div>
     <h3>Stage 3: 上級開発</h3>
     <p>複雑なクロスプラットフォームアプリケーションを構築しましょう。WeChat ミニプログラム実戦、より高レベルの AI ネイティブアプリケーション開発に挑戦します。</p>
-    <a href="./stage-3/core-skills/3.1-mcp-claudecode-skills/">詳しく見る →</a>
-  </div>
+    <span>詳しく見る →</span>
+  </a>
 </div>
 
 <style>
diff --git a/docs/zh-cn/index.md b/docs/zh-cn/index.md
index 5bdc803..b2be983 100644
--- a/docs/zh-cn/index.md
+++ b/docs/zh-cn/index.md
@@ -42,25 +42,25 @@ const base = site.value.base
 </script>
 
 <div class="stage-container">
-  <a :href="base + 'cn/stage-0/0.1-learning-map/'" class="stage-card">
+  <a :href="base + 'zh-cn/stage-0/0.1-learning-map/'" class="stage-card">
     <div class="stage-icon">🌱</div>
     <h3>Stage 0: 新手入门</h3>
     <p>适合产品、运营及非技术背景。通过做游戏理解 AI 编程逻辑，建立信心。</p>
     <span>查看详情 →</span>
   </a>
-  <a :href="base + 'cn/stage-1/1.1-introduction-to-ai-ide/'" class="stage-card">
+  <a :href="base + 'zh-cn/stage-1/1.1-introduction-to-ai-ide/'" class="stage-card">
     <div class="stage-icon">🎨</div>
     <h3>Stage 1: AI 产品经理</h3>
     <p>掌握 Vibe Coding 工作流。学会拆解需求，独立完成高保真 Web 应用原型。</p>
     <span>查看详情 →</span>
   </a>
-  <a :href="base + 'cn/stage-2/frontend/2.0-lovart-assets/'" class="stage-card">
+  <a :href="base + 'zh-cn/stage-2/frontend/2.0-lovart-assets/'" class="stage-card">
     <div class="stage-icon">💻</div>
     <h3>Stage 2: 初中级开发</h3>
     <p>深入全栈开发。前端组件化、数据库设计、后端 API 开发与部署上线。</p>
     <span>查看详情 →</span>
   </a>
-  <a :href="base + 'cn/stage-3/core-skills/3.1-mcp-claudecode-skills/'" class="stage-card">
+  <a :href="base + 'zh-cn/stage-3/core-skills/3.1-mcp-claudecode-skills/'" class="stage-card">
     <div class="stage-icon">🚀</div>
     <h3>Stage 3: 高级开发</h3>
     <p>构建复杂跨平台应用。微信小程序实战，挑战更高阶的 AI 原生应用开发。</p>