Hooke / jgdl

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
ac1c9dce 1 parent 285f013b

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

增加themeVars配置以统一控制菜单项最大高度为650rpx
Inline Side-by-side
Showing 6 changed files with 72 additions and 35 deletions
...@@ -34,11 +34,13 @@ ...@@ -34,11 +34,13 @@
34 </view> 34 </view>
35 35
36 <!-- Filter options --> 36 <!-- Filter options -->
37 - <nut-menu> 37 + <nut-config-provider :theme-vars="themeVars">
38 - <nut-menu-item v-model="selectedBrand" :options="brandOptions" @change="onBrandChange" /> 38 + <nut-menu>
39 - <nut-menu-item v-model="selectedYear" :options="yearOptions" @change="onYearChange" /> 39 + <nut-menu-item v-model="selectedBrand" :options="brandOptions" @change="onBrandChange" />
40 - <nut-menu-item v-model="selectedSchool" :options="schoolOptions" @change="onSchoolChange" /> 40 + <nut-menu-item v-model="selectedYear" :options="yearOptions" @change="onYearChange" />
41 - </nut-menu> 41 + <nut-menu-item v-model="selectedSchool" :options="schoolOptions" @change="onSchoolChange" />
42 + </nut-menu>
43 + </nut-config-provider>
42 </view> 44 </view>
43 45
44 <!-- Search Results --> 46 <!-- Search Results -->
...@@ -138,6 +140,10 @@ import { getVehicleBrandsAPI, getSchoolsAPI } from '@/api/other'; ...@@ -138,6 +140,10 @@ import { getVehicleBrandsAPI, getSchoolsAPI } from '@/api/other';
138 import { getVehicleListAPI } from '@/api/car'; 140 import { getVehicleListAPI } from '@/api/car';
139 import { DEFAULT_COVER_IMG } from '@/utils/config' 141 import { DEFAULT_COVER_IMG } from '@/utils/config'
140 142
143 +const themeVars = {
144 + menuItemContentMaxHeight: '650rpx',
145 +}
146 +
141 // Props 147 // Props
142 const props = defineProps({ 148 const props = defineProps({
143 visible: { 149 visible: {
...@@ -405,7 +411,7 @@ const initFilterOptions = async () => { ...@@ -405,7 +411,7 @@ const initFilterOptions = async () => {
405 value: '' 411 value: ''
406 }, ...brandOptions.value] 412 }, ...brandOptions.value]
407 } 413 }
408 - 414 +
409 // 生成从当前日期开始往前10年的年份 415 // 生成从当前日期开始往前10年的年份
410 yearOptions.value = Array.from({ length: 10 }, (_, i) => ({ 416 yearOptions.value = Array.from({ length: 10 }, (_, i) => ({
411 text: (new Date().getFullYear() - i).toString() + '年', 417 text: (new Date().getFullYear() - i).toString() + '年',
...@@ -415,7 +421,7 @@ const initFilterOptions = async () => { ...@@ -415,7 +421,7 @@ const initFilterOptions = async () => {
415 text: '全部年份', 421 text: '全部年份',
416 value: '' 422 value: ''
417 }, ...yearOptions.value] 423 }, ...yearOptions.value]
418 - 424 +
419 // 获取全部学校数据 425 // 获取全部学校数据
420 const schoolData = await getSchoolsAPI() 426 const schoolData = await getSchoolsAPI()
421 if (schoolData.code) { 427 if (schoolData.code) {
......
1 <!-- 1 <!--
2 * @Date: 2022-09-19 14:11:06 2 * @Date: 2022-09-19 14:11:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-07-16 11:40:08 4 + * @LastEditTime: 2025-07-16 13:52:14
5 * @FilePath: /jgdl/src/pages/goodCarList/index.vue 5 * @FilePath: /jgdl/src/pages/goodCarList/index.vue
6 * @Description: 特价好车页面 6 * @Description: 特价好车页面
7 --> 7 -->
...@@ -27,11 +27,13 @@ ...@@ -27,11 +27,13 @@
27 </view> 27 </view>
28 28
29 <!-- Filter options --> 29 <!-- Filter options -->
30 - <nut-menu> 30 + <nut-config-provider :theme-vars="themeVars">
31 - <nut-menu-item v-model="selectedBrand" :options="brandOptions" @change="onBrandChange" /> 31 + <nut-menu>
32 - <nut-menu-item v-model="selectedYear" :options="yearOptions" @change="onYearChange" /> 32 + <nut-menu-item v-model="selectedBrand" :options="brandOptions" @change="onBrandChange" />
33 - <nut-menu-item v-model="selectedSchool" :options="schoolOptions" @change="onSchoolChange" /> 33 + <nut-menu-item v-model="selectedYear" :options="yearOptions" @change="onYearChange" />
34 - </nut-menu> 34 + <nut-menu-item v-model="selectedSchool" :options="schoolOptions" @change="onSchoolChange" />
35 + </nut-menu>
36 + </nut-config-provider>
35 </nut-sticky> 37 </nut-sticky>
36 38
37 <!-- 特价好车列表 --> 39 <!-- 特价好车列表 -->
...@@ -143,6 +145,10 @@ import { getVehicleBrandsAPI, getSchoolsAPI } from '@/api/other'; ...@@ -143,6 +145,10 @@ import { getVehicleBrandsAPI, getSchoolsAPI } from '@/api/other';
143 import { getRecommendVehicleAPI } from '@/api/car'; 145 import { getRecommendVehicleAPI } from '@/api/car';
144 import { DEFAULT_COVER_IMG } from '@/utils/config' 146 import { DEFAULT_COVER_IMG } from '@/utils/config'
145 147
148 +const themeVars = {
149 + menuItemContentMaxHeight: '650rpx',
150 +}
151 +
146 // 响应式数据 152 // 响应式数据
147 const searchValue = ref('') 153 const searchValue = ref('')
148 /** 154 /**
......
1 <!-- 1 <!--
2 * @Date: 2022-09-19 14:11:06 2 * @Date: 2022-09-19 14:11:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-07-16 11:44:44 4 + * @LastEditTime: 2025-07-16 13:52:32
5 * @FilePath: /jgdl/src/pages/newCarList/index.vue 5 * @FilePath: /jgdl/src/pages/newCarList/index.vue
6 * @Description: 最新上架页面 6 * @Description: 最新上架页面
7 --> 7 -->
...@@ -27,11 +27,13 @@ ...@@ -27,11 +27,13 @@
27 </view> 27 </view>
28 28
29 <!-- Filter options --> 29 <!-- Filter options -->
30 - <nut-menu> 30 + <nut-config-provider :theme-vars="themeVars">
31 - <nut-menu-item v-model="selectedBrand" :options="brandOptions" @change="onBrandChange" /> 31 + <nut-menu>
32 - <nut-menu-item v-model="selectedYear" :options="yearOptions" @change="onYearChange" /> 32 + <nut-menu-item v-model="selectedBrand" :options="brandOptions" @change="onBrandChange" />
33 - <nut-menu-item v-model="selectedSchool" :options="schoolOptions" @change="onSchoolChange" /> 33 + <nut-menu-item v-model="selectedYear" :options="yearOptions" @change="onYearChange" />
34 - </nut-menu> 34 + <nut-menu-item v-model="selectedSchool" :options="schoolOptions" @change="onSchoolChange" />
35 + </nut-menu>
36 + </nut-config-provider>
35 </nut-sticky> 37 </nut-sticky>
36 38
37 <!-- 最新上架车辆列表 --> 39 <!-- 最新上架车辆列表 -->
...@@ -129,6 +131,11 @@ import './index.less' ...@@ -129,6 +131,11 @@ import './index.less'
129 import { getVehicleBrandsAPI, getSchoolsAPI } from '@/api/other'; 131 import { getVehicleBrandsAPI, getSchoolsAPI } from '@/api/other';
130 import { getVehicleListAPI } from '@/api/car'; 132 import { getVehicleListAPI } from '@/api/car';
131 import { DEFAULT_COVER_IMG } from '@/utils/config' 133 import { DEFAULT_COVER_IMG } from '@/utils/config'
134 +
135 +const themeVars = {
136 + menuItemContentMaxHeight: '650rpx',
137 +}
138 +
132 // 响应式数据 139 // 响应式数据
133 const searchValue = ref('') 140 const searchValue = ref('')
134 /** 141 /**
......
...@@ -20,11 +20,13 @@ ...@@ -20,11 +20,13 @@
20 </view> 20 </view>
21 21
22 <!-- Filter options --> 22 <!-- Filter options -->
23 - <nut-menu> 23 + <nut-config-provider :theme-vars="themeVars">
24 - <nut-menu-item v-model="selectedBrand" :options="brandOptions" @change="onBrandChange" /> 24 + <nut-menu>
25 - <nut-menu-item v-model="selectedYear" :options="yearOptions" @change="onYearChange" /> 25 + <nut-menu-item v-model="selectedBrand" :options="brandOptions" @change="onBrandChange" />
26 - <nut-menu-item v-model="selectedSchool" :options="schoolOptions" @change="onSchoolChange" /> 26 + <nut-menu-item v-model="selectedYear" :options="yearOptions" @change="onYearChange" />
27 - </nut-menu> 27 + <nut-menu-item v-model="selectedSchool" :options="schoolOptions" @change="onSchoolChange" />
28 + </nut-menu>
29 + </nut-config-provider>
28 </nut-sticky> 30 </nut-sticky>
29 31
30 <!-- Scooter listings - 参考PostPage.tsx --> 32 <!-- Scooter listings - 参考PostPage.tsx -->
...@@ -119,6 +121,10 @@ import { getVehicleBrandsAPI, getSchoolsAPI } from '@/api/other'; ...@@ -119,6 +121,10 @@ import { getVehicleBrandsAPI, getSchoolsAPI } from '@/api/other';
119 import { getVehicleListAPI } from '@/api/car'; 121 import { getVehicleListAPI } from '@/api/car';
120 import { DEFAULT_COVER_IMG } from '@/utils/config' 122 import { DEFAULT_COVER_IMG } from '@/utils/config'
121 123
124 +const themeVars = {
125 + menuItemContentMaxHeight: '650rpx',
126 +}
127 +
122 // 响应式数据 128 // 响应式数据
123 const searchValue = ref('') 129 const searchValue = ref('')
124 /** 130 /**
......
1 <!-- 1 <!--
2 * @Date: 2022-09-19 14:11:06 2 * @Date: 2022-09-19 14:11:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-07-16 11:45:18 4 + * @LastEditTime: 2025-07-16 13:52:24
5 * @FilePath: /jgdl/src/pages/recommendCarList/index.vue 5 * @FilePath: /jgdl/src/pages/recommendCarList/index.vue
6 * @Description: 精品推荐页面 6 * @Description: 精品推荐页面
7 --> 7 -->
...@@ -27,11 +27,13 @@ ...@@ -27,11 +27,13 @@
27 </view> 27 </view>
28 28
29 <!-- Filter options --> 29 <!-- Filter options -->
30 - <nut-menu> 30 + <nut-config-provider :theme-vars="themeVars">
31 - <nut-menu-item v-model="selectedBrand" :options="brandOptions" @change="onBrandChange" /> 31 + <nut-menu>
32 - <nut-menu-item v-model="selectedYear" :options="yearOptions" @change="onYearChange" /> 32 + <nut-menu-item v-model="selectedBrand" :options="brandOptions" @change="onBrandChange" />
33 - <nut-menu-item v-model="selectedSchool" :options="schoolOptions" @change="onSchoolChange" /> 33 + <nut-menu-item v-model="selectedYear" :options="yearOptions" @change="onYearChange" />
34 - </nut-menu> 34 + <nut-menu-item v-model="selectedSchool" :options="schoolOptions" @change="onSchoolChange" />
35 + </nut-menu>
36 + </nut-config-provider>
35 </nut-sticky> 37 </nut-sticky>
36 38
37 <!-- 精品推荐车辆列表 --> 39 <!-- 精品推荐车辆列表 -->
...@@ -138,6 +140,10 @@ import { getVehicleBrandsAPI, getSchoolsAPI } from '@/api/other'; ...@@ -138,6 +140,10 @@ import { getVehicleBrandsAPI, getSchoolsAPI } from '@/api/other';
138 import { getRecommendVehicleAPI } from '@/api/car'; 140 import { getRecommendVehicleAPI } from '@/api/car';
139 import { DEFAULT_COVER_IMG } from '@/utils/config' 141 import { DEFAULT_COVER_IMG } from '@/utils/config'
140 142
143 +const themeVars = {
144 + menuItemContentMaxHeight: '650rpx',
145 +}
146 +
141 // 响应式数据 147 // 响应式数据
142 const searchValue = ref('') 148 const searchValue = ref('')
143 /** 149 /**
......
...@@ -27,11 +27,13 @@ ...@@ -27,11 +27,13 @@
27 </view> 27 </view>
28 28
29 <!-- Filter options --> 29 <!-- Filter options -->
30 - <nut-menu> 30 + <nut-config-provider :theme-vars="themeVars">
31 - <nut-menu-item v-model="selectedBrand" :options="brandOptions" @change="onBrandChange" /> 31 + <nut-menu>
32 - <nut-menu-item v-model="selectedYear" :options="yearOptions" @change="onYearChange" /> 32 + <nut-menu-item v-model="selectedBrand" :options="brandOptions" @change="onBrandChange" />
33 - <nut-menu-item v-model="selectedSchool" :options="schoolOptions" @change="onSchoolChange" /> 33 + <nut-menu-item v-model="selectedYear" :options="yearOptions" @change="onYearChange" />
34 - </nut-menu> 34 + <nut-menu-item v-model="selectedSchool" :options="schoolOptions" @change="onSchoolChange" />
35 + </nut-menu>
36 + </nut-config-provider>
35 </nut-sticky> 37 </nut-sticky>
36 38
37 <!-- Search Results --> 39 <!-- Search Results -->
...@@ -126,6 +128,10 @@ import { Search2, Check, Heart1, HeartFill } from '@nutui/icons-vue-taro' ...@@ -126,6 +128,10 @@ import { Search2, Check, Heart1, HeartFill } from '@nutui/icons-vue-taro'
126 import { useFavorite } from '@/composables/useFavorite' 128 import { useFavorite } from '@/composables/useFavorite'
127 import "./index.less"; 129 import "./index.less";
128 130
131 +const themeVars = {
132 + menuItemContentMaxHeight: '650rpx',
133 +}
134 +
129 // 响应式数据 135 // 响应式数据
130 const searchValue = ref('') 136 const searchValue = ref('')
131 // 收藏功能现在使用基于对象属性的模式 137 // 收藏功能现在使用基于对象属性的模式
......