feat(ui): 为所有菜单组件添加nut-config-provider包装

增加themeVars配置以统一控制菜单项最大高度为650rpx

feat(ui): 为所有菜单组件添加nut-config-provider包装
增加themeVars配置以统一控制菜单项最大高度为650rpx
hookehuyr
Commit ac1c9dce473cdfc631088ebd4194ccbf3437ce97 ac1c9dce 1 parent 285f013b
Showing 6 changed files with 40 additions and 3 deletions
src/components/SearchPopup.vue
src/pages/goodCarList/index.vue
src/pages/newCarList/index.vue
src/pages/post/index.vue
src/pages/recommendCarList/index.vue
src/pages/search/index.vue
--- a/src/components/SearchPopup.vue
View file @ac1c9dc
+++ b/src/components/SearchPopup.vue
View file @ac1c9dc
@@ -34,11 +34,13 @@
                     </view>
                     <!-- Filter options -->
+                    <nut-config-provider :theme-vars="themeVars">
                         <nut-menu>
                             <nut-menu-item v-model="selectedBrand" :options="brandOptions" @change="onBrandChange" />
                             <nut-menu-item v-model="selectedYear" :options="yearOptions" @change="onYearChange" />
                             <nut-menu-item v-model="selectedSchool" :options="schoolOptions" @change="onSchoolChange" />
                         </nut-menu>
+                    </nut-config-provider>
                 </view>
                 <!-- Search Results -->
@@ -138,6 +140,10 @@ import { getVehicleBrandsAPI, getSchoolsAPI } from '@/api/other';
 import { getVehicleListAPI } from '@/api/car';
 import { DEFAULT_COVER_IMG } from '@/utils/config'
+const themeVars = {
+    menuItemContentMaxHeight: '650rpx',
+}
+
 // Props
 const props = defineProps({
     visible: {
--- a/src/pages/goodCarList/index.vue
View file @ac1c9dc
+++ b/src/pages/goodCarList/index.vue
View file @ac1c9dc
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-07-16 11:40:08
+ * @LastEditTime: 2025-07-16 13:52:14
  * @FilePath: /jgdl/src/pages/goodCarList/index.vue
  * @Description: 特价好车页面
 -->
@@ -27,11 +27,13 @@
                 </view>
                 <!-- Filter options -->
+                <nut-config-provider :theme-vars="themeVars">
                     <nut-menu>
                         <nut-menu-item v-model="selectedBrand" :options="brandOptions" @change="onBrandChange" />
                         <nut-menu-item v-model="selectedYear" :options="yearOptions" @change="onYearChange" />
                         <nut-menu-item v-model="selectedSchool" :options="schoolOptions" @change="onSchoolChange" />
                     </nut-menu>
+                </nut-config-provider>
             </nut-sticky>
             <!-- 特价好车列表 -->
@@ -143,6 +145,10 @@ import { getVehicleBrandsAPI, getSchoolsAPI } from '@/api/other';
 import { getRecommendVehicleAPI } from '@/api/car';
 import { DEFAULT_COVER_IMG } from '@/utils/config'
+const themeVars = {
+    menuItemContentMaxHeight: '650rpx',
+}
+
 // 响应式数据
 const searchValue = ref('')
 /**
--- a/src/pages/newCarList/index.vue
View file @ac1c9dc
+++ b/src/pages/newCarList/index.vue
View file @ac1c9dc
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-07-16 11:44:44
+ * @LastEditTime: 2025-07-16 13:52:32
  * @FilePath: /jgdl/src/pages/newCarList/index.vue
  * @Description: 最新上架页面
 -->
@@ -27,11 +27,13 @@
                 </view>
                 <!-- Filter options -->
+                <nut-config-provider :theme-vars="themeVars">
                     <nut-menu>
                         <nut-menu-item v-model="selectedBrand" :options="brandOptions" @change="onBrandChange" />
                         <nut-menu-item v-model="selectedYear" :options="yearOptions" @change="onYearChange" />
                         <nut-menu-item v-model="selectedSchool" :options="schoolOptions" @change="onSchoolChange" />
                     </nut-menu>
+                </nut-config-provider>
             </nut-sticky>
             <!-- 最新上架车辆列表 -->
@@ -129,6 +131,11 @@ import './index.less'
 import { getVehicleBrandsAPI, getSchoolsAPI } from '@/api/other';
 import { getVehicleListAPI } from '@/api/car';
 import { DEFAULT_COVER_IMG } from '@/utils/config'
+
+const themeVars = {
+    menuItemContentMaxHeight: '650rpx',
+}
+
 // 响应式数据
 const searchValue = ref('')
 /**
--- a/src/pages/post/index.vue
View file @ac1c9dc
+++ b/src/pages/post/index.vue
View file @ac1c9dc
@@ -20,11 +20,13 @@
                 </view>
                 <!-- Filter options -->
+                <nut-config-provider :theme-vars="themeVars">
                     <nut-menu>
                         <nut-menu-item v-model="selectedBrand" :options="brandOptions" @change="onBrandChange" />
                         <nut-menu-item v-model="selectedYear" :options="yearOptions" @change="onYearChange" />
                         <nut-menu-item v-model="selectedSchool" :options="schoolOptions" @change="onSchoolChange" />
                     </nut-menu>
+                </nut-config-provider>
             </nut-sticky>
             <!-- Scooter listings - 参考PostPage.tsx -->
@@ -119,6 +121,10 @@ import { getVehicleBrandsAPI, getSchoolsAPI } from '@/api/other';
 import { getVehicleListAPI } from '@/api/car';
 import { DEFAULT_COVER_IMG } from '@/utils/config'
+const themeVars = {
+    menuItemContentMaxHeight: '650rpx',
+}
+
 // 响应式数据
 const searchValue = ref('')
 /**
--- a/src/pages/recommendCarList/index.vue
View file @ac1c9dc
+++ b/src/pages/recommendCarList/index.vue
View file @ac1c9dc
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-07-16 11:45:18
+ * @LastEditTime: 2025-07-16 13:52:24
  * @FilePath: /jgdl/src/pages/recommendCarList/index.vue
  * @Description: 精品推荐页面
 -->
@@ -27,11 +27,13 @@
                 </view>
                 <!-- Filter options -->
+                <nut-config-provider :theme-vars="themeVars">
                     <nut-menu>
                         <nut-menu-item v-model="selectedBrand" :options="brandOptions" @change="onBrandChange" />
                         <nut-menu-item v-model="selectedYear" :options="yearOptions" @change="onYearChange" />
                         <nut-menu-item v-model="selectedSchool" :options="schoolOptions" @change="onSchoolChange" />
                     </nut-menu>
+                </nut-config-provider>
             </nut-sticky>
             <!-- 精品推荐车辆列表 -->
@@ -138,6 +140,10 @@ import { getVehicleBrandsAPI, getSchoolsAPI } from '@/api/other';
 import { getRecommendVehicleAPI } from '@/api/car';
 import { DEFAULT_COVER_IMG } from '@/utils/config'
+const themeVars = {
+    menuItemContentMaxHeight: '650rpx',
+}
+
 // 响应式数据
 const searchValue = ref('')
 /**
--- a/src/pages/search/index.vue
View file @ac1c9dc
+++ b/src/pages/search/index.vue
View file @ac1c9dc
@@ -27,11 +27,13 @@
                 </view>
                 <!-- Filter options -->
+                <nut-config-provider :theme-vars="themeVars">
                     <nut-menu>
                         <nut-menu-item v-model="selectedBrand" :options="brandOptions" @change="onBrandChange" />
                         <nut-menu-item v-model="selectedYear" :options="yearOptions" @change="onYearChange" />
                         <nut-menu-item v-model="selectedSchool" :options="schoolOptions" @change="onSchoolChange" />
                     </nut-menu>
+                </nut-config-provider>
             </nut-sticky>
             <!-- Search Results -->
@@ -126,6 +128,10 @@ import { Search2, Check, Heart1, HeartFill } from '@nutui/icons-vue-taro'
 import { useFavorite } from '@/composables/useFavorite'
 import "./index.less";
+const themeVars = {
+    menuItemContentMaxHeight: '650rpx',
+}
+
 // 响应式数据
 const searchValue = ref('')
 // 收藏功能现在使用基于对象属性的模式