feat(docs): add image height constraints and appendix examples

- Implement dynamic image height constraints based on aspect ratio to prevent vertical space issues
- Add new ultra-tall category for images with ratio > 3
- Include two new appendix examples in sidebar navigation

docs/.vitepress/config.mjs

@@ -65,6 +65,15 @@ export default defineConfig({
           text: '附录 B：常见报错及解决方案',
           link: '/stage-1/appendix-b-common-errors/'
         }
+        ,
+        {
+          text: '附录示例：贪吃蛇游戏教程',
+          link: '/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial'
+        },
+        {
+          text: '附录示例：用 AI 搭建完整网站',
+          link: '/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents'
+        }
       ],
       '/stage-2/': [
         {

docs/.vitepress/theme/index.js

@@ -92,12 +92,21 @@ export default {
       if (!naturalWidth || !naturalHeight) return
 
       const ratio = naturalHeight / naturalWidth
-      img.classList.remove('img-tall', 'img-very-tall')
+      img.classList.remove('img-tall', 'img-very-tall', 'img-ultra-tall')
+      img.style.width = 'auto' // 确保宽度自动，防止拉伸
 
-      if (ratio > 2) {
+      if (ratio > 3) {
+        img.classList.add('img-ultra-tall')
+        img.style.maxHeight = '250px'
+      } else if (ratio > 2) {
         img.classList.add('img-very-tall')
+        img.style.maxHeight = '350px'
       } else if (ratio > 1.2) {
         img.classList.add('img-tall')
+        img.style.maxHeight = '450px'
+      } else {
+        // 普通图片重置，避免复用 dom 时残留样式
+        img.style.maxHeight = ''
       }
     }
 

docs/.vitepress/theme/style.css

@@ -37,4 +37,21 @@
 /* 压缩子项的行高 */
 .VPSidebarItem.level-1 .text {
   line-height: 1.4;
-}
+}
+
+/* 图片高度限制策略：根据长宽比调整最大高度 */
+/* 越高的图片（长宽比越大），限制的高度越小，避免占用过多纵向空间 */
+.vp-doc img.img-tall {
+  max-height: 450px !important;
+  width: auto !important;
+}
+
+.vp-doc img.img-very-tall {
+  max-height: 350px !important;
+  width: auto !important;
+}
+
+.vp-doc img.img-ultra-tall {
+  max-height: 250px !important;
+  width: auto !important;
+}