style: update zh-cn appendix index to use NavGrid/NavCard components

- Replace simple markdown links with NavGrid and NavCard components
- Match the same card-based layout as en-us version
- Improve visual consistency across all language versions

docs/zh-cn/appendix/index.md

@@ -1,41 +1,182 @@
 # 附录
 
-本附录涵盖从计算机基础到工程素养的完整知识体系。
+欢迎来到**附录**部分！这是一个人工智能基础和全栈开发基础的集合，是你学习旅程中的重要参考库。
 
-## 目录
+## 内容分类
 
-### [一、计算机是怎么回事](./1-computer-fundamentals/transistor-to-cpu/)
+### AI 基础
 
-从晶体管到操作系统，深入了解计算机如何工作。
+了解人工智能的核心概念、发展历程和前沿技术原理：
+<NavGrid>
+  <NavCard
+    href="/zh-cn/appendix/8-artificial-intelligence/prompt-engineering/"
+    title="提示工程"
+    description="掌握与 AI 高效对话的艺术，释放大模型的潜力"
+  />
+  <NavCard
+    href="/zh-cn/appendix/8-artificial-intelligence/ai-history"
+    title="AI 发展史"
+    description="回顾 AI 发展的关键里程碑，理解技术演进轨迹"
+  />
+  <NavCard
+    href="/zh-cn/appendix/8-artificial-intelligence/llm-principles"
+    title="大语言模型"
+    description="深入浅出地解释大语言模型（LLM）的工作原理及应用"
+  />
+  <NavCard
+    href="/zh-cn/appendix/8-artificial-intelligence/multimodal-models"
+    title="多模态大模型"
+    description="探索能够处理图像、音频等多种数据模态的先进模型"
+  />
+  <NavCard
+    href="/zh-cn/appendix/8-artificial-intelligence/image-generation"
+    title="AI 图像生成原理"
+    description="揭示 AI 图像生成的底层逻辑和技术实现"
+  />
+  <NavCard
+    href="/zh-cn/appendix/8-artificial-intelligence/speech-synthesis-recognition"
+    title="AI 音频模型"
+    description="了解 AI 在语音合成、识别和音乐生成中的应用"
+  />
+  <NavCard
+    href="/zh-cn/appendix/8-artificial-intelligence/context-engineering"
+    title="上下文工程"
+    description="学习如何优化上下文管理，提升 AI 任务的长程连贯性"
+  />
+  <NavCard
+    href="/zh-cn/appendix/8-artificial-intelligence/ai-agents"
+    title="Agent 智能体"
+    description="探索具有自主决策和执行能力的 AI 智能体架构"
+  />
+  <NavCard
+    href="/zh-cn/appendix/8-artificial-intelligence/ai-capability-dictionary"
+    title="AI 能力词典"
+    description="AI 领域常用术语和核心概念的快速参考手册"
+  />
+</NavGrid>
 
-### [二、开发环境与工具](./2-development-tools/command-line-shell/)
+### 前端基础
 
-掌握现代软件开发必备的命令行、Git、编辑器等工具。
+夯实前端开发的技术根基：
+<NavGrid>
+  <NavCard
+    href="/zh-cn/appendix/3-browser-and-frontend/html-css-layout"
+    title="HTML/CSS/JS 基础"
+    description="构建网页的三大支柱，前端开发入门必修"
+  />
+  <NavCard
+    href="/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks"
+    title="前端框架演进"
+    description="了解前端技术栈的演进历程，把握技术发展趋势"
+  />
+  <NavCard
+    href="/zh-cn/appendix/3-browser-and-frontend/web-performance"
+    title="前端性能优化"
+    description="学习提升网页加载速度和交互流畅度的关键策略"
+  />
+  <NavCard
+    href="/zh-cn/appendix/3-browser-and-frontend/graphics-animation"
+    title="Canvas 2D 基础"
+    description="掌握 Canvas 绑图 API，实现炫酷的图形和动画效果"
+  />
+  <NavCard
+    href="/zh-cn/appendix/3-browser-and-frontend/browser-as-os"
+    title="浏览器工作原理"
+    description="全链路分析浏览器渲染页面的完整过程"
+  />
+  <NavCard
+    href="/zh-cn/appendix/2-development-tools/debugging-art/"
+    title="浏览器开发者工具"
+    description="熟练使用开发者工具，高效定位和解决前端问题"
+  />
+</NavGrid>
 
-### [三、浏览器与前端](./3-browser-and-frontend/javascript-deep-dive/)
+### 后端基础
 
-全面了解浏览器原理、JavaScript、前端框架和工程化实践。
+掌握后端开发的核心概念：
+<NavGrid>
+  <NavCard
+    href="/zh-cn/appendix/4-server-and-backend/backend-layered-architecture"
+    title="后端架构演进"
+    description="从单体到微服务，探索后端架构的演进之路"
+  />
+  <NavCard
+    href="/zh-cn/appendix/4-server-and-backend/backend-languages"
+    title="后端编程语言"
+    description="比较主流后端语言的特点和适用场景，选择最佳技术栈"
+  />
+  <NavCard
+    href="/zh-cn/appendix/5-data/database-fundamentals"
+    title="数据库原理"
+    description="理解数据库核心原理，掌握数据存储与检索的艺术"
+  />
+  <NavCard
+    href="/zh-cn/appendix/4-server-and-backend/caching"
+    title="系统缓存设计"
+    description="学习缓存策略，提升系统高并发处理能力"
+  />
+  <NavCard
+    href="/zh-cn/appendix/4-server-and-backend/message-queues"
+    title="消息队列设计"
+    description="掌握消息队列在解耦和削峰填谷中的关键作用"
+  />
+  <NavCard
+    href="/zh-cn/appendix/4-server-and-backend/auth-authorization"
+    title="认证授权原理与实践"
+    description="构建安全的身份认证和权限管理系统"
+  />
+  <NavCard
+    href="/zh-cn/appendix/5-data/data-tracking"
+    title="数据埋点设计"
+    description="科学设计数据埋点，为产品决策提供数据支撑"
+  />
+  <NavCard
+    href="/zh-cn/appendix/7-infrastructure-and-operations/incident-response"
+    title="线上运维"
+    description="掌握系统部署、监控和故障排查的运维技能"
+  />
+</NavGrid>
 
-### [四、服务器与后端](./4-server-and-backend/backend-languages/)
+### 通用技能
 
-深入后端开发、API 设计、认证授权、缓存和消息队列等核心技术。
+软件开发的基础知识：
+<NavGrid>
+  <NavCard
+    href="/zh-cn/appendix/4-server-and-backend/api-intro"
+    title="API 基础"
+    description="API 接口设计与开发的基础知识"
+  />
+  <NavCard
+    href="/zh-cn/appendix/2-development-tools/ide-basics"
+    title="IDE 基础"
+    description="了解集成开发环境（IDE）的内部工作机制"
+  />
+  <NavCard
+    href="/zh-cn/appendix/2-development-tools/command-line-shell"
+    title="终端基础"
+    description="掌握基本的命令行终端操作，提升开发效率"
+  />
+  <NavCard
+    href="/zh-cn/appendix/2-development-tools/git-version-control"
+    title="Git 详解"
+    description="深入理解 Git 版本控制原理和高级用法"
+  />
+  <NavCard
+    href="/zh-cn/appendix/1-computer-fundamentals/computer-networks"
+    title="计算机网络"
+    description="网络协议和通信原理的基础知识"
+  />
+  <NavCard
+    href="/zh-cn/appendix/7-infrastructure-and-operations/ci-cd"
+    title="部署与上线"
+    description="应用部署和发布的完整流程与最佳实践"
+  />
+</NavGrid>
 
-### [五、数据](./5-data/sql/)
+## 使用建议
 
-从 SQL 到数据治理，全面掌握数据处理和分析技能。
+- 学习过程中作为参考资料，按需查阅
+- 遇到不熟悉的技术概念时，先在这里寻找解释
+- 建议通读一遍，建立完整的知识体系
 
-### [六、架构与系统设计](./6-architecture-and-system-design/monolith-to-microservices/)
-
-学习微服务架构、分布式系统和系统设计方法论。
-
-### [七、基础设施与运维](./7-infrastructure-and-operations/linux-basics/)
-
-掌握容器化、Kubernetes、CI/CD、云平台和监控告警。
-
-### [八、人工智能](./8-artificial-intelligence/ai-history/)
-
-从 AI 历史到 Agent 智能体，全面了解人工智能技术。
-
-### [九、工程素养](./9-engineering-excellence/code-quality-refactoring/)
-
-提升代码质量、测试策略、设计模式和工程实践能力。
+这是你的技术知识宝库，随时欢迎查阅！