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/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;
+}