fix: display activity categories in one row

pages/home.vue

@@ -137,8 +137,8 @@
 		userId:''
 	})
 
-	// 图标网格分页：每页 8 个（4 列 × 2 行），超过则分多页
-	const TYPEGRID_PAGE_SIZE = 8
+	// 图标网格分页：每页 4 个（单行），超过则分多页
+	const TYPEGRID_PAGE_SIZE = 4
 	const typeGridPages = computed(() => {
 		const pages = []
 		const list = typeGrid.value || []
@@ -198,7 +198,7 @@
 	const getTypeList = () => {
 		proxy.$api.get('/core/activity/category/list').then(({data:res})=>{
 			if(res.code!==0) return proxy.$showToast(res.msg)
-			// icon 网格：取所有配过 icon 的分类；超过 8 个会自动分页
+			// icon 网格：取所有配过 icon 的分类；超过 4 个会自动分页
 			typeGrid.value = res.data.filter(d=>d.iconUrl).map(d=>({id:d.id,name:d.categoryName,iconUrl:d.iconUrl}));
 			gridIndex.value = 0
 		})
@@ -355,13 +355,13 @@
 				box-sizing: border-box;
 				.typegrid-swiper{
 					width: 100%;
-					height: 360rpx;
+					height: 180rpx;
 				}
 				.typegrid-page{
 					width: 100%;
 					height: 100%;
 					display: flex;
-					flex-wrap: wrap;
+					flex-wrap: nowrap;
 				}
 				.typegrid-item{
 					width: 25%;
@@ -412,4 +412,4 @@
 			}
 		}
 	}
-</style>
+</style>

tests/home-activity-category-layout.test.js

@@ -0,0 +1,14 @@
+import test from 'node:test'
+import assert from 'node:assert/strict'
+import fs from 'node:fs'
+import path from 'node:path'
+
+const homeFile = path.resolve('pages/home.vue')
+
+test('首页活动分类每页只展示一行四个图标', () => {
+  const source = fs.readFileSync(homeFile, 'utf8')
+
+  assert.match(source, /const TYPEGRID_PAGE_SIZE\s*=\s*4/)
+  assert.match(source, /\.typegrid-swiper\s*\{[\s\S]*?height:\s*180rpx/)
+  assert.match(source, /\.typegrid-page\s*\{[\s\S]*?flex-wrap:\s*nowrap/)
+})