子项样式修改

src/api/home.ts

@@ -36,7 +36,9 @@ export interface HomeData {
 }
 
 /** 分类链接项（结构与 HomeLinkItem 相同，但不含 link_type / category_id，均为纯链接） */
-export type CategoryLinkItem = Omit<HomeLinkItem, 'link_type' | 'category_id'>
+export type CategoryLinkItem = Omit<HomeLinkItem, 'link_type' | 'category_id'> & {
+  tag: string[]
+}
 
 // ==================== API ====================
 

src/pages/category/index.less

@@ -1,9 +1,9 @@
 .category {
   min-height: 100vh;
-  background: #f7f8fa;
-  padding-top: 16px;
+  background: #fff;
+  padding: 30px;
 
-  // 加载 / 空状态
+  // 加载
   .category-state {
     display: flex;
     flex-direction: column;
@@ -18,26 +18,21 @@
     }
   }
 
-  // 宫格链接（与首页宫格导航样式一致）
-  .grid-wrapper {
-    margin: 16px 32px 20px;
-    background: rgb(255 255 255);
-    border-radius: 20px;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
-    padding-bottom: 24px;
-
-    .van-grid-item__content {
-      padding-top: 24px;
-      padding-bottom: 0;
-    }
-
-    .van-icon--image {
-      width: 60px !important;
-      height: 60px !important;
-    }
-
-    .van-grid-item__text {
-      font-size: 22px;
-    }
+  .grid-item {
+    display: flex;
+    margin-bottom: 10px;
+    padding: 14px 0;
+    border-bottom: 1px solid #ddd;
   }
+
+  .grid-item-title {
+
+  }
+
+  .grid-item-image {
+    margin-right: 30px;
+    width: 100px;
+    height: 100px;
+  }
+
 }

src/pages/category/index.tsx

@@ -1,5 +1,5 @@
 import { View, Text } from '@tarojs/components'
-import { Grid, GridItem, Loading } from '@antmjs/vantui'
+import {Image, Loading, Space, Tag} from '@antmjs/vantui'
 import { useState, useEffect } from 'react'
 import Taro from '@tarojs/taro'
 import { getCategoryLinks } from '@/api/home'
@@ -49,16 +49,23 @@ export default function Category() {
       ) : links.length > 0 ? (
         // 宫格链接（与首页宫格导航样式一致）
         <View className='grid-wrapper'>
-          <Grid columnNum={5} border={false} gutter={12} iconSize={48}>
-            {links.map((item) => (
-              <GridItem
-                key={item.id}
-                icon={item.image.preview_url}
-                text={item.title}
-                onClick={() => navigateToLink(item.link)}
-              />
-            ))}
-          </Grid>
+          {links.map((item) => (
+            <View
+              className='grid-item'
+              key={item.id}
+              onClick={() => navigateToLink(item.link)}
+            >
+              <Image className='grid-item-image' src={item.image.preview_url}></Image>
+              <Text className='grid-item-title'>
+                <View>{item.title}</View>
+                <Space>
+                  { item.tag && item.tag.length > 0 && item.tag.map((tag, index) => (
+                    <Tag type='danger' key={index}>{tag}</Tag>
+                  ))}
+                </Space>
+              </Text>
+            </View>
+          ))}
         </View>
       ) : (
         // 空状态