import { PlusOutlined } from '@ant-design/icons' ; import { Button , Card , List , Typography } from 'antd' ; import { PageContainer } from '@ant-design/pro-layout' ; import { useRequest } from 'umi' ; import { queryFakeList } from './service' ; import type { CardListItemDataType } from './data.d' ; import styles from './style.less' ; const { Paragraph } = Typography ; const PAGE_NAME_UPPER_CAMEL_CASE = ( ) => { const { data , loading } = useRequest ( ( ) => { return queryFakeList ( { count : 8 , } ) ; } ) ; const list = data ?. list || [ ] ; const content = ( < div className = { styles . pageHeaderContent } > < p > 段落示意 ： 蚂蚁金服务设计平台 ant . design ， 用最小的工作量 ， 无缝接入蚂蚁金服生态 ， 提供跨越设计与开发的体验解决方案 。 < /p> < div className = { styles . contentLink } > < a > < img alt = "" src = "https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg" / > { ' ' } 快速开始 < /a> < a > < img alt = "" src = "https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg" / > { ' ' } 产品简介 < /a> < a > < img alt = "" src = "https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg" / > { ' ' } 产品文档 < /a> < /div> < /div>); const extraContent = ( < div className = { styles . extraImg } > < img alt = "这是一个标题" src = "https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png" / > < /div>); const nullData = { } ; return ( < PageContainer content = { content } extraContent = { extraContent } > < div className = { styles . cardList } > < List < Partial < CardListItemDataType > > rowKey = "id" loading = { loading } grid = { { gutter : 16 , xs : 1 , sm : 2 , md : 3 , lg : 3 , xl : 4 , xxl : 4 , } } dataSource = { [ nullData , ... list ] } renderItem = { ( item ) => { if ( item && item . id ) { return ( < List . Item key = { item . id } > < Card hoverable className = { styles . card } actions = { [ < a key = "option1" > 操作一 < /a>, <a key="option2">操作二</a > ] } > < Card . Meta avatar = { < img alt = "" className = { styles . cardAvatar } src = { item . avatar } / > } title = { < a > { item . title } < /a>} description={<Paragraph className={styles.item} ellipsis={{ rows: 3 }}> { item . description } < /Paragraph>}/ > < /Card> < /List.Item>); } return ( < List . Item > < Button type = "dashed" className = { styles . newButton } > < PlusOutlined /> 新增产品 < /Button> < /List.Item>); } } /> < /div> < /PageContainer>); } ; export default PAGE_NAME_UPPER_CAMEL_CASE ;