refactor(index): 重构首页网格布局并移除快速操作组件

- 移除 Divider 组件依赖并调整 Grid 组件样式配置
- 将网格列数从 3 列改为 4 列,调整内边距和字体大小
- 在 QuickActions 组件中添加 Avatar 组件支持
- 更新快速操作项的标题和图标显示逻辑
- 将 QuickActions 组件替换为 Grid 组件在首页中的位置
- 调整网格项目的间距和头像样式配置
This commit is contained in:
2026-03-30 23:21:32 +08:00
parent 49e2c567a1
commit 1d004ee35d
3 changed files with 15 additions and 14 deletions

View File

@@ -1,6 +1,6 @@
import {useEffect, useState} from 'react' import {useEffect, useState} from 'react'
import {Grid} from '@nutui/nutui-react-taro' import {Grid} from '@nutui/nutui-react-taro'
import {Avatar, Divider} from '@nutui/nutui-react-taro' import {Avatar} from '@nutui/nutui-react-taro'
import {View, Text} from '@tarojs/components' import {View, Text} from '@tarojs/components'
import {listCmsNavigation} from "@/api/cms/cmsNavigation"; import {listCmsNavigation} from "@/api/cms/cmsNavigation";
import {CmsNavigation} from "@/api/cms/cmsNavigation/model"; import {CmsNavigation} from "@/api/cms/cmsNavigation/model";
@@ -29,22 +29,20 @@ const MyGrid = () => {
// @ts-ignore // @ts-ignore
return ( return (
<> <>
<View className={'p-4'}> <View className={'p-0'}>
<View className={' bg-white rounded-2xl py-4'}> <View className={' bg-white py-1'}>
<View className={'title font-medium px-4'}></View> <Grid columns={4} square style={{
<Divider />
<Grid columns={3} square style={{
// @ts-ignore // @ts-ignore
'--nutui-grid-border-color': 'transparent', '--nutui-grid-border-color': 'transparent',
}}> }}>
{ {
list.map((item) => ( list.map((item) => (
<Grid.Item key={item.navigationId} onClick={() => navTo(`${item.path}`,true)}> <Grid.Item key={item.navigationId} onClick={() => navTo(`${item.path}`,true)}>
<Avatar src={item.icon} className={'mb-2'} shape="square" style={{ <Avatar src={item.icon} className={'mb-1'} shape="square" style={{
backgroundColor: 'transparent', backgroundColor: 'transparent',
}}/> }}/>
<Text className={'text-gray-600'} style={{ <Text className={'text-gray-600'} style={{
fontSize: '16px' fontSize: '14px'
}}>{item.title}</Text> }}>{item.title}</Text>
</Grid.Item> </Grid.Item>
)) ))

View File

@@ -1,5 +1,6 @@
import React from 'react' import React from 'react'
import { View, Text } from '@tarojs/components' import { View, Text } from '@tarojs/components'
import {Avatar} from '@nutui/nutui-react-taro'
import Taro from '@tarojs/taro' import Taro from '@tarojs/taro'
import { import {
Star, Star,
@@ -15,9 +16,10 @@ const QuickActions: React.FC = () => {
const actions = [ const actions = [
{ {
icon: <Star size={22} />, icon: <Star size={22} />,
title: '我要推荐', title: '我要推荐2',
path: '/dealer/index', path: '/dealer/index',
iconClass: 'qa-icon--orange' iconClass: 'qa-icon--orange',
avatar: 'https://oss.wsdns.cn/20260330/5f54527123864193b0a2078f812b117f.png?x-oss-process=image/resize,m_fixed,w_200/quality,Q_90'
}, },
{ {
icon: <People size={22} />, icon: <People size={22} />,
@@ -60,7 +62,9 @@ const QuickActions: React.FC = () => {
onClick={() => handleClick(action)} onClick={() => handleClick(action)}
> >
<View className={`quick-actions__icon ${action.iconClass}`}> <View className={`quick-actions__icon ${action.iconClass}`}>
{React.cloneElement(action.icon as React.ReactElement, { color: '#ffffff' })} <Avatar src={action.avatar} className={'mb-2'} shape="square" style={{
backgroundColor: 'transparent',
}}/>
</View> </View>
<Text className='quick-actions__label'>{action.title}</Text> <Text className='quick-actions__label'>{action.title}</Text>
</View> </View>

View File

@@ -11,7 +11,6 @@ import Banner from "./Banner";
import './index.scss' import './index.scss'
import Grid from "@/pages/index/Grid"; import Grid from "@/pages/index/Grid";
import PopUpAd from "@/pages/index/PopUpAd"; import PopUpAd from "@/pages/index/PopUpAd";
import QuickActions from "./QuickActions";
import {configWebsiteField} from "@/api/cms/cmsWebsiteField"; import {configWebsiteField} from "@/api/cms/cmsWebsiteField";
import type {Config} from "@/api/cms/cmsWebsiteField/model"; import type {Config} from "@/api/cms/cmsWebsiteField/model";
@@ -123,10 +122,10 @@ function Home() {
<View className={'flex flex-col mt-1'}> <View className={'flex flex-col mt-1'}>
<Menu/> <Menu/>
<Banner/> <Banner/>
<QuickActions/> {/*<QuickActions/>*/}
<Grid />
<NoticeBar content={config?.NoticeBar || '主营直购电售电业务,以更优惠电价、更全面的服务,致力为工商企业创造更优越经营环境,帮助企业减负排压,深度赋能'} /> <NoticeBar content={config?.NoticeBar || '主营直购电售电业务,以更优惠电价、更全面的服务,致力为工商企业创造更优越经营环境,帮助企业减负排压,深度赋能'} />
<BestSellers/> <BestSellers/>
<Grid />
</View> </View>
<PopUpAd /> <PopUpAd />
</> </>