feat(docs): improve image sizing and add global stylesheet

- Add style.css to head config for global styling
- Refactor image height/width constraints with new classes
- Adjust font size and image ratio thresholds
- Add max-width constraints to prevent overflow

docs/.vitepress/config.mjs

@@ -9,7 +9,8 @@ export default defineConfig({
   title: 'Easy-Vibe Tutorial',
   description: 'Easy-Vibe 中文实战课',
   head: [
-    ['link', { rel: 'icon', href: `${base}logo.png`.replace('//', '/') }]
+    ['link', { rel: 'icon', href: `${base}logo.png`.replace('//', '/') }],
+    ['link', { rel: 'stylesheet', href: `${base}style.css`.replace('//', '/') }]
   ],
   themeConfig: {
     logo: `${base}logo.png`.replace('//', '/'),

docs/.vitepress/theme/index.js

@@ -99,21 +99,29 @@ export default {
       if (!naturalWidth || !naturalHeight) return
 
       const ratio = naturalHeight / naturalWidth
-      img.classList.remove('img-tall', 'img-very-tall', 'img-ultra-tall')
-      img.style.width = 'auto' // 确保宽度自动，防止拉伸
+      img.classList.remove(
+        'img-tall',
+        'img-very-tall',
+        'img-ultra-tall',
+        'img-limit-width',
+        'img-limit-height'
+      )
 
-      if (ratio > 3) {
+      img.style.maxWidth = ''
+      img.style.maxHeight = ''
+      img.style.width = ''
+      img.style.height = ''
+
+      if (ratio <= 1) {
+        img.classList.add('img-limit-width')
+        return
+      }
+
+      img.classList.add('img-tall')
+      if (ratio > 2.2) {
         img.classList.add('img-ultra-tall')
-        img.style.maxHeight = '250px'
-      } else if (ratio > 2) {
+      } else if (ratio > 1.3) {
         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

@@ -4,6 +4,10 @@
   --vp-sidebar-nav-section-gap: 8px;
 }
 
+.vp-doc {
+  font-size: 15px;
+}
+
 /* 生产环境（带 data-v-* 的 scoped 样式）会比 class 选择器更高优先级。
    为避免 build/preview 时被覆盖，这里显式匹配 scoped 属性并加 !important。 */
 :where(html) .VPSidebarItem.level-0,
@@ -78,18 +82,38 @@
 /* 图片高度限制策略：根据长宽比调整最大高度 */
 /* 越高的图片（长宽比越大），限制的高度越小，避免占用过多纵向空间 */
 .vp-doc img.img-tall {
-  max-height: 450px !important;
+  max-height: 380px !important;
+  max-width: 100% !important;
   width: auto !important;
+  height: auto !important;
 }
 
 .vp-doc img.img-very-tall {
-  max-height: 350px !important;
+  max-height: 280px !important;
+  max-width: 100% !important;
   width: auto !important;
+  height: auto !important;
 }
 
 .vp-doc img.img-ultra-tall {
-  max-height: 250px !important;
+  max-height: 200px !important;
+  max-width: 100% !important;
   width: auto !important;
+  height: auto !important;
+}
+
+.vp-doc img.img-limit-width {
+  max-width: 100% !important;
+  max-height: 320px !important;
+  width: auto !important;
+  height: auto !important;
+}
+
+.vp-doc img.img-limit-height {
+  max-height: 450px !important;
+  max-width: 100% !important;
+  width: auto !important;
+  height: auto !important;
 }
 
 /* Fix tagline wrapping issues */

docs/public/style.css

@@ -3,6 +3,10 @@
   --vp-sidebar-nav-section-gap: 8px;
 }
 
+.vp-doc {
+  font-size: 15px;
+}
+
 /* 减少一级标题（如"前端开发"）底部的间距 */
 .VPSidebarItem.level-0 {
   padding-bottom: 4px !important;
@@ -57,18 +61,38 @@
 /* 图片高度限制策略：根据长宽比调整最大高度 */
 /* 越高的图片（长宽比越大），限制的高度越小，避免占用过多纵向空间 */
 .vp-doc img.img-tall {
-  max-height: 450px !important;
+  max-height: 380px !important;
+  max-width: 100% !important;
   width: auto !important;
+  height: auto !important;
 }
 
 .vp-doc img.img-very-tall {
-  max-height: 350px !important;
+  max-height: 280px !important;
+  max-width: 100% !important;
   width: auto !important;
+  height: auto !important;
 }
 
 .vp-doc img.img-ultra-tall {
-  max-height: 250px !important;
+  max-height: 200px !important;
+  max-width: 100% !important;
   width: auto !important;
+  height: auto !important;
+}
+
+.vp-doc img.img-limit-width {
+  max-width: 100% !important;
+  max-height: 320px !important;
+  width: auto !important;
+  height: auto !important;
+}
+
+.vp-doc img.img-limit-height {
+  max-height: 450px !important;
+  max-width: 100% !important;
+  width: auto !important;
+  height: auto !important;
 }
 
 /* Fix tagline wrapping issues */