From ab90283e1bfe0b4c37140d311501cf2d0fbf8887 Mon Sep 17 00:00:00 2001
From: sanbuphy <physicoada@gmail.com>
Date: Mon, 12 Jan 2026 15:31:23 +0800
Subject: [PATCH] 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      |  9 +++++++++
 docs/.vitepress/theme/index.js  | 13 +++++++++++--
 docs/.vitepress/theme/style.css | 19 ++++++++++++++++++-
 3 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/docs/.vitepress/config.mjs b/docs/.vitepress/config.mjs
index 317a30b..aee7b0c 100644
--- a/docs/.vitepress/config.mjs
+++ b/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/': [
         {
diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
index ddde568..2c7c5e4 100644
--- a/docs/.vitepress/theme/index.js
+++ b/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 = ''
       }
     }
 
diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
index be49d2e..c4c3ae6 100644
--- a/docs/.vitepress/theme/style.css
+++ b/docs/.vitepress/theme/style.css
@@ -37,4 +37,21 @@
 /* 压缩子项的行高 */
 .VPSidebarItem.level-1 .text {
   line-height: 1.4;
-}
\ No newline at end of file
+}
+
+/* 图片高度限制策略：根据长宽比调整最大高度 */
+/* 越高的图片（长宽比越大），限制的高度越小，避免占用过多纵向空间 */
+.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;
+}