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

- Add NavGrid.vue and NavCard.vue components for better navigation layout
- Restructure stage-0 index pages across languages into intro.md with new navigation components
- Remove old stage-0 index.md files and update stage-3 pages similarly
- Add new dependencies 'claude' and 'codex' to package.json
- Improve code formatting in multiple Vue components for better readability
- Update documentation content and structure for better user experience

docs/zh-cn/appendix/cache-design.md

@@ -21,6 +21,7 @@
 **场景 1：没有缓存的日子**
 
 每次想喝水，你都要：
+
 1. 走到厨房（相当于访问数据库）
 2. 打开柜子
 3. 拿出水壶
@@ -32,6 +33,7 @@
 **场景 2：有了缓存**
 
 你在客厅的茶几上放了一个水杯（这就是缓存！）：
+
 - 第一次喝水：你还是要去厨房倒水，但把水杯留在茶几上
 - 之后每次喝水：直接拿起茶几上的水杯喝就行
 
@@ -39,11 +41,11 @@
 
 回到计算机世界：
 
-| 生活中的例子 | 计算机中的对应 |
-| :--- | :--- |
-| **茶几上的水杯** | **内存缓存**（速度快，但容量小） |
-| **厨房的水壶** | **数据库**（速度慢，但容量大） |
-| **"我刚才用过这个水杯"** | **时间局部性**（刚用过的数据，很可能还会用） |
+| 生活中的例子                   | 计算机中的对应                                     |
+| :----------------------------- | :------------------------------------------------- |
+| **茶几上的水杯**               | **内存缓存**（速度快，但容量小）                   |
+| **厨房的水壶**                 | **数据库**（速度慢，但容量大）                     |
+| **"我刚才用过这个水杯"**       | **时间局部性**（刚用过的数据，很可能还会用）       |
 | **"把这些常用的都放在茶几上"** | **空间局部性**（用过的数据附近的数据，也可能用到） |
 
 ### 0.2 为什么要缓存？
@@ -52,14 +54,15 @@
 
 但有多快呢？我们用个形象的比喻：
 
-| 存储介质 | 访问时间 | 生活类比 | 能做什么 |
-| :--- | :--- | :--- | :--- |
-| **L1 CPU 缓存** | ~1 纳秒 | 眨一下眼睛（1/10秒）的 **十亿分之一** | CPU 执行一条指令 |
-| **内存 (Redis)** | ~100 纳秒 | 眨一下眼睛的 **千万分之一** | 存储热点数据 |
-| **SSD 数据库** | ~1 毫秒 | 眨一下眼睛 | 读写文件 |
-| **HDD 数据库** | ~10 毫秒 | 眨 10 下眼睛 | 传统硬盘操作 |
+| 存储介质         | 访问时间  | 生活类比                              | 能做什么         |
+| :--------------- | :-------- | :------------------------------------ | :--------------- |
+| **L1 CPU 缓存**  | ~1 纳秒   | 眨一下眼睛（1/10秒）的 **十亿分之一** | CPU 执行一条指令 |
+| **内存 (Redis)** | ~100 纳秒 | 眨一下眼睛的 **千万分之一**           | 存储热点数据     |
+| **SSD 数据库**   | ~1 毫秒   | 眨一下眼睛                            | 读写文件         |
+| **HDD 数据库**   | ~10 毫秒  | 眨 10 下眼睛                          | 传统硬盘操作     |
 
 **换个角度理解**：
+
 - 从内存读数据 = 从茶几拿水杯
 - 从 SSD 读数据 = 从厨房拿水壶
 - 从 HDD 读数据 = 从楼下便利店买水
@@ -71,17 +74,20 @@
 **案例 1：淘宝商品详情页**
 
 当你打开一个商品页面时：
+
 - **商品基本信息**（价格、标题）：从 Redis 缓存读取（~5 毫秒）
 - **商品大图**：从 CDN 缓存读取（~20 毫秒）
 - **用户浏览历史**：从本地缓存读取（~1 毫秒）
 
 如果这些都不用缓存，全部查数据库：
+
 - 查询时间可能从 **5 毫秒** 变成 **200 毫秒**
 - 数据库要同时处理几百万人的请求，直接"累垮"
 
 **案例 2：微信朋友圈**
 
 你刷朋友圈时：
+
 - **图片**：之前看过的图片，都在手机本地缓存里
 - **好友列表**：第一次加载后缓存在内存里
 - **点赞数据**：热点数据在 Redis 缓存中
@@ -145,31 +151,37 @@
 ### 学习路径建议（0基础小白版）
 
 **第一步：理解核心概念**（1-2 天）
+
 - 理解"为什么需要缓存"（茶几 vs 厨房的例子）
 - 记住性能数据：内存比数据库快 100 倍
 - 了解缓存的生命周期（写入 → 命中 → 过期 → 淘汰）
 
 **第二步：掌握最常用的模式**（2-3 天）
+
 - 重点学习 **Cache-Aside 模式**（90% 的场景都用这个）
 - 动手写代码：用 Redis 做简单的键值缓存
 - 理解"为什么删缓存而不是更新缓存"
 
 **第三步：学习多级缓存**（3-5 天）
+
 - 理解为什么需要"多层防御"（浏览器 → CDN → 本地 → Redis → 数据库）
 - 掌握每一层的用途和特点
 - 动手实践：给自己的项目加一层缓存
 
 **第四步：解决常见问题**（1 周）
+
 - 理解缓存三大问题（穿透、击穿、雪崩）
 - 学习解决方案（布隆过滤器、分布式锁、随机 TTL）
 - 实战演练：模拟高并发场景，看缓存如何保护数据库
 
 **第五步：深入一致性**（1-2 周）
+
 - 理解缓存和数据库可能不一致的场景
 - 掌握"先更数据库，再删缓存"的最佳实践
 - 进阶：学习 Binlog 订阅方案
 
 **第六步：实战项目**（2-4 周）
+
 - 设计一个完整的缓存系统（如商品详情页缓存）
 - 搭建监控系统，实时查看缓存命中率
 - 压测验证：看看性能提升了多少倍