refactor: 首页组件重构

src/layouts/BasicLayout.tsx

@@ -147,7 +147,7 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
   const prolayoutStyle = isHome
     ? {
         minHeight: '100vh',
-        minWidth: '1280px'
+        minWidth: '1380px'
       }
     : {}
 

src/pages/home/components/Authorize/index.tsx

@@ -2,18 +2,23 @@ import React from 'react';
 import { getAuth } from '@/utils/auth';
 
 interface Iprops {
+  /**
+   * 准入权限URL
+   */
   url: string,
-  canView?: boolean
+  canView?: boolean,
+  children: React.ReactNode
 }
 
-const Authorize: React.FC<Iprops> = (props) => {
+const Authorize: React.FC<Iprops> = (props: Iprops) => {
+  const { url, canView, children } = props;
   const auth = getAuth();
   const authUrls = auth.urls;
   return (
     <>
     {
-      authUrls.includes(props.url) || props.canView
-      ? props.children
+      authUrls.includes(url) || canView
+      ? children
       : null
     }
     </>

src/pages/home/components/Centers/AfterSoldCenter.tsx

@@ -6,6 +6,9 @@ import { PublicApi } from '@/services/api';
 import { Link } from 'umi'
 import Authorize from '../Authorize';
 import { getAuth } from '@/utils/auth';
+import useViewRequest from '../../hooks/useViewRequest';
+import { GetReportMemberHomeGetAfterSaleTallyResponse } from '@/services/ReportApi';
+import Layout from './layout';
 
 interface Iprops {};
 
@@ -20,18 +23,15 @@ const KEY_TITLE = {
 const EXCHANGE_APPLICATION = `/memberCenter/afterService/exchangeApplication/exchangeQuery`
 const EXCHANGE_HANDLE = '/memberCenter/afterService/exchangeManage/exchangeQuery';
 
-const SettlementAbility: React.FC<Iprops> = () => {
+const AfterSoldCenter: React.FC<Iprops> = () => {
+  const { loading, responseData, ref, isError } = useViewRequest<GetReportMemberHomeGetAfterSaleTallyResponse, any>(PublicApi.getReportMemberHomeGetAfterSaleTally, {})
   const auth = getAuth();
   const roleType = auth.memberRoleType;
-  const request = useCallback(async () => {
-    const res = await PublicApi.getReportMemberHomeGetAfterSaleTally();
-    return res;
-  }, [])
-
   return (
-    <AbilityContainer
+    <Layout
+      viewRef={ref}
       title="售后中心"
-      tips="轻松完成订单售后在线换货、退货、维修环节"
+      tips={"轻松完成订单售后在线换货、退货、维修环节"}
       extra={
         <Authorize
           url={roleType == 1 ? EXCHANGE_HANDLE : EXCHANGE_APPLICATION}
@@ -41,22 +41,17 @@ const SettlementAbility: React.FC<Iprops> = () => {
           </div>
         </Authorize>
       }
-      request={request}
+      loading={loading}
+      isError={isError}
     >
       {
-        ({loading, requestData}) => {
-          return (
-            <>
-              {
-                loading
-                ? <Skeleton active />
-                : Object.keys(requestData).map((record) => {
+         responseData && Object.keys(responseData).map((record: keyof GetReportMemberHomeGetAfterSaleTallyResponse) => {
           return (
             <div className={styles.wrapRow}  key={record}>
               <span className={styles.rowTitle}>{KEY_TITLE[record]}</span>
               <div className={styles.rowValues}>
                 {
-                            requestData[record].map((item, key) => {
+                  responseData[record].map((item, key) => {
                     return (
                       <div className={styles.wrapCol} key={key}>
                         <div className={styles.colTitle}>{item.name}</div>
@@ -74,12 +69,8 @@ const SettlementAbility: React.FC<Iprops> = () => {
           )
         })
       }
-            </>
-          )
-        }
-      }
-    </AbilityContainer>
+    </Layout>
   )
 }
 
-export default SettlementAbility
+export default AfterSoldCenter

src/pages/home/components/Centers/Contract.tsx

-import React, { useMemo } from 'react';
+import React, { Fragment, useMemo } from 'react';
 import { Button } from 'antd';
 import Layout from './layout';
 import useViewRequest from '../../hooks/useViewRequest';
 import { PublicApi } from '@/services/api';
 import { BellOutlined } from '@ant-design/icons';
 import theme from '@/../config/lingxi.theme.config';
+import { GetReportMemberHomeGetContractTallyResponse } from '@/services/ReportApi';
+import styles from './center.less'
+import { Link } from 'umi';
 
 interface Iprops {}
 
+const KEY_TITLE = {
+  "contractManageList": '合同管理',
+  "contractCoordinationList": '合同协同',
+  "applyAmountOrderList": '合同请款'
+}
+
 const Constract: React.FC<Iprops> = (props: Iprops) => {
-  const { loading, isError, hasRequest, responseData, ref } = useViewRequest(PublicApi.getReportMemberHomeGetEnhanceTally, {})
-  const constractTipsStyle = useMemo(() => ({
-    backgroundColor: theme["@secondary-color"],
-    color: theme["@primary-color"],
-    padding: '8px 12px',
-    fontSize: 12,
-    fontWeight: 500,
-    display: 'flex',
-    FlexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    // flexDirection: 'row',
-  }), [])
+  const { loading, isError, hasRequest, responseData, ref } = useViewRequest<GetReportMemberHomeGetContractTallyResponse, any>(PublicApi.getReportMemberHomeGetContractTally, {})
 
   return (
     <Layout
@@ -30,13 +27,40 @@ const Constract: React.FC<Iprops> = (props: Iprops) => {
       tips="提供在电子签章申请，合同管理、电子合同签订、合同请款、合同协同等功能"
       loading={loading}
     >
-      <div style={constractTipsStyle}>
+      <Fragment>
+        <div className={styles.ding_tips}>
           <div>
             <BellOutlined />
             <span style={{marginLeft: '12px'}}>您还没有申请电子签章，请先申请电子签章</span>
           </div>
           <Button size="small" type="primary">点击申请</Button>
         </div>
+        {
+          responseData && Object.keys(responseData).map((record: keyof GetReportMemberHomeGetContractTallyResponse) => {
+            return (
+              <div className={styles.wrapRow}  key={record}>
+                <span className={styles.rowTitle}>{KEY_TITLE[record]}</span>
+                <div className={styles.rowValues}>
+                  {
+                    responseData[record].map((item, key) => {
+                      return (
+                        <div className={styles.wrapCol} key={key}>
+                          <div className={styles.colTitle}>{item.name}</div>
+                          {
+                            item.link
+                            ? <Link to={item.link} className={styles.colValue}>{item.count}</Link>
+                            : <div className={styles.colValue}>{item.count}</div>
+                          }
+                        </div>
+                      )
+                    })
+                  }
+                </div>
+              </div>
+            )
+          })
+        }
+      </Fragment>
     </Layout>
   )
 }

src/pages/home/components/Centers/FundCenter.tsx

 import React, { useCallback} from 'react';
-import AbilityContainer from './Container';
 import styles from './center.less'
 import settlement_platformCollection from '@/assets/imgs/settlement_platformCollection.png';
 import settlement_integrate from '@/assets/imgs/settlement_integrate.png';
 import settlement_accountReceive from '@/assets/imgs/settlement_accountReceive.png';
 import settlement_accountPayable from '@/assets/imgs/settlement_accountPayable.png';
 import settlement_invoice from '@/assets/imgs/settlement_invoice.png';
-import { Row, Col, Skeleton } from 'antd';
 import { PublicApi } from '@/services/api';
 import { Link } from 'umi'
 import { getAuth } from '@/utils/auth';
+import useViewRequest from '../../hooks/useViewRequest';
+import Layout from './layout';
+import { GetReportMemberHomeGetAccountTallyResponse } from '@/services/ReportApi';
 interface Iprops {};
 
 const KEY_TO_TITLE = {
@@ -18,10 +19,7 @@ const KEY_TO_TITLE = {
 }
 
 const FundCenter: React.FC<Iprops> = () => {
-  const request = useCallback(async () => {
-    const res = await PublicApi.getReportMemberHomeGetAccountTally();
-    return res;
-  }, [])
+  const { loading, responseData, isError, ref } = useViewRequest<GetReportMemberHomeGetAccountTallyResponse, any>(PublicApi.getReportMemberHomeGetAccountTally, {})
 
   const userAuth = getAuth();
   const urls = userAuth.urls;
@@ -50,19 +48,12 @@ const FundCenter: React.FC<Iprops> = () => {
   ]
 
   return (
-    <AbilityContainer
+    <Layout
+      viewRef={ref}
       title="资金账户管理"
-      tips={"提供资金账户管理、授信额度管理等功能。"}
-      request={request}
+      tips="提供资金账户管理、授信额度管理等功能。"
+      loading={loading}
     >
-      {
-        ({loading, requestData}) => {
-          return (
-            <div>
-              {
-                loading
-                ? <Skeleton active />
-                : (
       <>
         <div className={styles.centerRow}>
           {
@@ -84,13 +75,13 @@ const FundCenter: React.FC<Iprops> = () => {
         </div>
         <div>
           {
-                          Object.keys(requestData).map((record) => {
+            responseData && Object.keys(responseData).map((record: keyof GetReportMemberHomeGetAccountTallyResponse) => {
               return (
                 <div className={styles.wrapRow}  key={record}>
                   <span className={styles.rowTitle}>{KEY_TO_TITLE[record]}</span>
                   <div className={styles.rowValues}>
                     {
-                                    requestData[record].map((item, key) => {
+                      responseData[record].map((item, key) => {
                         return (
                           <div className={styles.wrapCol} key={key}>
                             <div className={styles.colTitle}>{item.name}</div>
@@ -110,14 +101,7 @@ const FundCenter: React.FC<Iprops> = () => {
           }
         </div>
       </>
-                  )
-              }
-            </div>
-          )
-        }
-      }
-
-    </AbilityContainer>
+    </Layout>
   )
 }
 

src/pages/home/components/Centers/ProcessCenter.tsx

@@ -35,7 +35,7 @@ const ProcessCenter: React.FC<Iprops> = () => {
       isError={isError}
     >
       {
-        responseData && Object.keys(responseData).map((record) => {
+        responseData && Object.keys(responseData).map((record: keyof GetReportMemberHomeGetEnhanceTallyResponse) => {
           return (
             <div className={styles.wrapRow}  key={record}>
               <span className={styles.rowTitle}>{KEY_TITLE[record]}</span>

src/pages/home/components/Centers/ProductCenter.tsx

-import React, { useCallback } from 'react';
-import AbilityContainer from './Container';
-import { Row, Col, Space, Skeleton } from 'antd';
+import React, { useCallback, useMemo } from 'react';
+import { Space } from 'antd';
 import styles from './center.less';
 import { PublicApi } from '@/services/api';
 import { Link } from 'umi';
 import Authorize from '../Authorize';
+import useViewRequest from '../../hooks/useViewRequest';
+import { GetReportMemberHomeGetCommodityTallyResponse } from '@/services/ReportApi';
+import Layout from './layout';
 
 interface Iprops {};
 
@@ -13,55 +15,53 @@ const ADD_BRAND = "/memberCenter/commodityAbility/trademark/add";
 const ADD_PRODUCT = '/memberCenter/commodityAbility/commodity/products/add';
 
 const ProductCenter: React.FC<Iprops> = () => {
-  const request = useCallback(async () => {
-    const res = await PublicApi.getReportMemberHomeGetCommodityTally();
-    return res;
-  }, [])
+  const { loading, responseData, isError, ref } = useViewRequest<GetReportMemberHomeGetCommodityTallyResponse, any>(PublicApi.getReportMemberHomeGetCommodityTally, {})
+
+  const extraList = useMemo(() => [
+    {
+      title: '设置库存',
+      authUrl: ADD_REPOSITORIES
+    },
+    {
+      title: '创建品牌',
+      authUrl: ADD_BRAND
+    },
+    {
+      title: '创建商品',
+      authUrl: ADD_PRODUCT
+    }
+  ], [])
   return (
-    <AbilityContainer
-      tips="快速完成品牌、商品创建、发布、提供灵活的商品库存管理"
+    <Layout
+      viewRef={ref}
       title="商品中心"
+      tips="快速完成品牌、商品创建、发布、提供灵活的商品库存管理"
+      loading={loading}
+      isError={isError}
       extra={
-
         <Space>
+          {
+            extraList.map((_item) => {
+              return (
                 <Authorize
-            url={ADD_REPOSITORIES}
-          >
-            <div>
-              <Link to={ADD_REPOSITORIES}>设置库存</Link>
-            </div>
-          </Authorize>
-          <Authorize
-            url={ADD_BRAND}
-          >
-            <div>
-              <Link to={ADD_BRAND}>创建品牌</Link>
-            </div>
-          </Authorize>
-          <Authorize
-            url={ADD_PRODUCT}
+                  url={_item.authUrl}
+                  key={_item.authUrl}
                 >
                   <div>
-              <Link to={ADD_PRODUCT}>创建商品</Link>
+                    <Link to={_item.authUrl}>{_item.title}</Link>
                   </div>
                 </Authorize>
+              )
+            })
+          }
         </Space>
       }
-      request={request}
     >
-      {
-        ({loading, requestData}) => {
-          const isArray = Array.isArray(requestData);
-          return (
-            <>
-              {
-                loading
-                ? <Skeleton active />
-                : <div className={styles.wrapRow}>
+      <div className={styles.wrapRow}>
         <span className={styles.rowTitle}>商品</span>
         <div className={styles.rowValues}>
           {
-                        isArray && requestData.map((item, key) => {
+            responseData && responseData.map((item: GetReportMemberHomeGetCommodityTallyResponse[0], key) => {
               return (
                 <div className={styles.wrapCol} key={key}>
                   <div className={styles.colTitle}>{item.name}</div>
@@ -76,13 +76,7 @@ const ProductCenter: React.FC<Iprops> = () => {
           }
         </div>
       </div>
-
-              }
-            </>
-          )
-        }
-      }
-    </AbilityContainer>
+    </Layout>
   )
 }
 

src/pages/home/components/Centers/SettlementCenter.tsx

-import React, { useCallback } from 'react';
-import AbilityContainer from './Container';
-import { Row, Col, Skeleton } from 'antd';
+import React from 'react';
 import styles from './center.less'
 import settlement_platformCollection from '@/assets/imgs/settlement_platformCollection.png';
 import settlement_integrate from '@/assets/imgs/settlement_integrate.png';
@@ -10,6 +8,9 @@ import settlement_invoice from '@/assets/imgs/settlement_invoice.png';
 import { PublicApi } from '@/services/api'
 import { Link } from 'umi'
 import { getAuth } from '@/utils/auth';
+import useViewRequest from '../../hooks/useViewRequest';
+import { GetReportMemberHomeGetSettleAccountTallyResponse } from '@/services/ReportApi';
+import Layout from './layout';
 interface Iprops {};
 
 const KEY_TITLE = {
@@ -19,6 +20,8 @@ const KEY_TITLE = {
   receivableList: '应收账款结算'
 }
 const SettlementCenter: React.FC<Iprops> = () => {
+  const { loading, responseData, isError, ref } = useViewRequest<GetReportMemberHomeGetSettleAccountTallyResponse, any>(PublicApi.getReportMemberHomeGetSettleAccountTally, {})
+
   const userAuth = getAuth();
   const urls = userAuth.urls;
   const tagsList = [
@@ -48,24 +51,15 @@ const SettlementCenter: React.FC<Iprops> = () => {
       url: '/memberCenter/balance/accountsReceivable/invoice'
     }
   ]
-  const request = useCallback(async () => {
-    const res = await PublicApi.getReportMemberHomeGetSettleAccountTally();
-    return res;
-  }, [])
   return (
-    <AbilityContainer
+    <Layout
+      viewRef={ref}
       title="结算中心"
       tips="提供资资金结算、发票管理等功能"
-      request={request}
+      loading={loading}
+      isError={isError}
     >
-      {
-        ({loading, requestData}) => {
-          return (
       <>
-              {
-                loading
-                ? <Skeleton active />
-                : <>
         <div className={styles.centerRow}>
           {
             tagsList.map((item) => {
@@ -85,13 +79,13 @@ const SettlementCenter: React.FC<Iprops> = () => {
           }
         </div>
         {
-                      Object.keys(requestData).map((record) => {
+          responseData && Object.keys(responseData).map((record: keyof GetReportMemberHomeGetSettleAccountTallyResponse) => {
             return (
               <div className={styles.wrapRow}  key={record}>
                 <span className={styles.rowTitle}>{KEY_TITLE[record]}</span>
                 <div className={styles.rowValues}>
                   {
-                                requestData[record].map((item, key) => {
+                    responseData[record].map((item, key) => {
                       return (
                         <div className={styles.wrapCol} key={key}>
                           <div className={styles.colTitle}>{item.name}</div>
@@ -110,12 +104,7 @@ const SettlementCenter: React.FC<Iprops> = () => {
           })
         }
       </>
-              }
-            </>
-          )
-        }
-      }
-    </AbilityContainer>
+    </Layout>
   )
 }
 

src/pages/home/components/Centers/ShopCenter.tsx

-import React, { useCallback } from 'react';
-import AbilityContainer from './Container';
+import React, { Fragment, useMemo } from 'react';
 import styles from './center.less'
 import create_shop from '@/assets/imgs/create_shop.png';
-import { BellOutlined } from '@ant-design/icons'
+import { BellOutlined, RightOutlined } from '@ant-design/icons'
+import { Button } from 'antd';
 import { Link } from 'umi';
 import Authorize from '../Authorize';
 import { PublicApi } from '@/services/api';
-import { Skeleton, Row, Col } from 'antd';
 import { getAuth } from '@/utils/auth';
+import useViewRequest from '../../hooks/useViewRequest';
+import { GetTemplateWebMemberShopWebFindCurrMemberShopResponse } from '@/services/TemplateV2Api';
+import Layout from './layout';
 interface Iprops {}
 
 const SHOP_CENTER = '/memberCenter/shopAbility/template'
 const CREATE_SHOP = '/memberCenter/shopAbility/infoManage';
 
 const ShopCenter: React.FC<Iprops> = () => {
-  ///template/shop/findShopList
+  const { loading, responseData, isError, ref } = useViewRequest<GetTemplateWebMemberShopWebFindCurrMemberShopResponse, any>(PublicApi.getTemplateWebMemberShopWebFindCurrMemberShop, {})
   const userAuth = getAuth();
-  const request = useCallback(async () => {
-    const {code, data} = await PublicApi.getTemplateWebMemberShopWebFindCurrMemberShop();
-    return {
-      code: code,
-      data: {
-        totalCount: code === 1000  && data.id || 0
-      }
-    }
-  }, [])
 
+  const tagList = useMemo(() => [
+    {
+      icon: create_shop,
+      url: SHOP_CENTER,
+      title: "创建店铺"
+    },
+    {
+      icon: create_shop,
+      url: SHOP_CENTER,
+      title: "店铺模板"
+    },
+    {
+      icon: create_shop,
+      url: SHOP_CENTER,
+      title: "店铺装修"
+    }
+  ], [])
   return (
-    <AbilityContainer
+    <Layout
+      viewRef={ref}
       title="店铺中心"
       tips="轻松完成店铺的创建、店铺风格选择、店铺个性化装修"
       extra={
@@ -37,61 +48,43 @@ const ShopCenter: React.FC<Iprops> = () => {
           </div>
         </Authorize>
       }
-      request={request}
+      loading={loading}
     >
+      <Fragment>
         {
-        ({loading, requestData}) => {
-          return (
-            loading
-            ? <Skeleton active />
-            : <div className={styles.centerRow}>
-                <Authorize url={CREATE_SHOP} canView={true}>
-                  <div className={styles.tagsSpecial} >
-                    <Link to={CREATE_SHOP} className={styles.tagsItem}>
-                      <div className={styles.icon}>
-                        <img src={create_shop} />
-                      </div>
-                      <div className={styles.text}>创建店铺</div>
-                    </Link>
-                    {
-                      requestData.totalCount === 0
-                      ? <div className={styles.ding_tips}>
-                          <div className={styles.ding_icon}>
+          responseData && responseData.id && (
+            <div className={styles.ding_tips}>
+              <div>
                 <BellOutlined />
+                <span style={{marginLeft: '12px'}}>您还没有申请电子签章，请先申请电子签章</span>
               </div>
-                          <span>你还没有创建店铺，请先创建店铺</span>
+              <Button size="small" type="primary">点击申请</Button>
             </div>
-                      : null
+          )
         }
-
-                  </div>
-                </Authorize>
-                <Authorize url={SHOP_CENTER} canView={true}>
-                  <div className={styles.centerCol}>
-                    <Link to={SHOP_CENTER} className={styles.tagsItem} >
-                      <div className={styles.icon}>
-                        <img src={create_shop} />
+        <div className={styles.centerRow}>
+          {
+            tagList.map((_item) => {
+              return (
+                <Authorize url={_item.url} canView={true} key={_item.title}>
+                  <Link to={_item.url} className={styles.tagsItem}>
+                    <div className={styles.hoverLink}>
+                      <img src={create_shop} className={styles.icon}/>
+                      <div className={styles.text}>{_item.title}</div>
+                      <div className={styles.hoverIconConatiner}>
+                        <div className={styles.hoverIcon}>
+                          <RightOutlined style={{ color: '#fff', fontSize: '8px'}} />
                         </div>
-                      <div className={styles.text}>店铺模板</div>
-                    </Link>
                       </div>
-                </Authorize>
-                <Authorize url={SHOP_CENTER} canView={true}>
-                  <div className={styles.centerCol}>
-                    <Link to={SHOP_CENTER} className={styles.tagsItem} >
-                      <div className={styles.icon}>
-                        <img src={create_shop} />
                     </div>
-                      <div className={styles.text}>店铺装修</div>
                   </Link>
-                  </div>
                 </Authorize>
-              </div>
               )
+            })
           }
-      }
-
-    </AbilityContainer>
+        </div>
+      </Fragment>
+    </Layout>
   )
 }
 

src/pages/home/components/Centers/TradeCenter.tsx

 import React, {useCallback} from 'react';
-import AbilityContainer from './Container';
-import { Row, Col, Skeleton } from 'antd';
 import styles from './center.less'
 import { PublicApi } from '@/services/api';
 import { Link } from 'umi'
 import Authorize from '../Authorize';
 import { getAuth } from '@/utils/auth';
+import useViewRequest from '../../hooks/useViewRequest';
+import { GetReportMemberHomeGetTradeTallyResponse } from '@/services/ReportApi';
+import Layout from './layout';
+
 interface Iprops {};
+
 const KEY_TITLE = {
   'commodityInquiryList': '商品询价',
   'inquiryQuotationList': '询价报价',
@@ -22,14 +25,14 @@ const PURCHASE_URL = '/memberCenter/tranactionAbility/purchaseOrder/orderList';
 const SALE_URL = '/memberCenter/tranactionAbility/saleOrder/orderList';
 
 const TradeCenter: React.FC<Iprops> = () => {
+  const { loading, responseData, isError, ref } = useViewRequest<GetReportMemberHomeGetTradeTallyResponse, any>(PublicApi.getReportMemberHomeGetTradeTally, {})
+
   const auth = getAuth();
   const roleType = auth.memberRoleType;
-  const request = useCallback(async () => {
-    const res = await PublicApi.getReportMemberHomeGetTradeTally();
-    return res;
-  }, [])
+
   return (
-    <AbilityContainer
+    <Layout
+      viewRef={ref}
       title="交易中心"
       tips="提供在线发布需求，在线询价、在线报价、订单交易、签订电子合同等功能"
       extra={
@@ -40,26 +43,17 @@ const TradeCenter: React.FC<Iprops> = () => {
             <Link to={roleType == 1 ? SALE_URL : PURCHASE_URL}>进入交易中心</Link>
           </div>
         </Authorize>
-
       }
-      request={request}
+      loading={loading}
     >
       {
-        ({loading, requestData}) => {
-          return (
-            <>
-              {
-                loading
-                ? [1,2,3].map((item) => (
-                    <Skeleton active key={item} />
-                  ))
-                : Object.keys(requestData).map((record) => {
+        responseData && Object.keys(responseData).map((record: keyof GetReportMemberHomeGetTradeTallyResponse) => {
           return (
             <div className={styles.wrapRow}  key={record}>
               <span className={styles.rowTitle}>{KEY_TITLE[record]}</span>
               <div className={styles.rowValues}>
                 {
-                            requestData[record].map((item, key) => {
+                  responseData[record].map((item, key) => {
                     return (
                       <div className={styles.wrapCol} key={key}>
                         <div className={styles.colTitle}>{item.name}</div>
@@ -76,15 +70,8 @@ const TradeCenter: React.FC<Iprops> = () => {
             </div>
           )
         })
-
-              }
-            </>
-          )
       }
-
-      }
-
-    </AbilityContainer>
+    </Layout>
   )
 }
 

src/pages/home/components/Centers/center.less

 
-.tagsItem {
-  min-width: 160px;
+
+
+.ding_tips {
+  background-color: @secondary-color;
+  color: @primary-color;
+  padding: 8px 12px;
+  font-size: 12;
+  font-weight: 500;
   display: flex;
   flex-direction: row;
+  justify-content: space-between;
   align-items: center;
-  padding: 8px;
-  padding-left: 12px;
-  padding-right: 10px;
+}
+
+// .tagsSpecial {
+//   width: 160px;
+//   margin-right: 16px;
+//   .ding_tips {
+//     color: @main-color;
+//     background: rgba(0, 179, 122, 0.12);
+//     padding: 10px;
+//     display: flex;
+//     flex-direction: row;
+//     position: relative;
+//     margin-top: 20px;
+
+//     .ding_icon {
+//       margin-right: 10px;
+//     }
+
+//     &:before {
+//       content: '';
+//       position: absolute;
+//       top: -10px;
+//       left: 20px;
+//       width: 0;
+//       height: 0;
+//       border-left: 10px solid transparent;
+//       border-right: 10px solid transparent;
+//       border-bottom: 10px solid rgba(0, 179, 122, 0.12);;
+//     }
+//   }
+// }
+
+.centerRow {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  .centerCol {
+    // width: 256px;
+    margin-right: 16px;
+  }
+
+  .tagsItem {
+    min-width: 265px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 8px 12px;
     background: #FAFBFC;
     align-self: flex-start;
-  margin: 18px 16px 18px 0;
+    margin: @margin-md @margin-md 0px 0;
+
+
 
     .icon {
       width: 32px;
@@ -27,45 +81,42 @@
       margin: 0 0 15px 5px;
     }
 
-}
-
-.tagsSpecial {
-  width: 160px;
-  margin-right: 16px;
-  .ding_tips {
-    color: @main-color;
-    background: rgba(0, 179, 122, 0.12);
-    padding: 10px;
+    .hoverLink {
       display: flex;
       flex-direction: row;
-    position: relative;
-    margin-top: 20px;
+      align-items: center;
+      width: 100%;
 
-    .ding_icon {
-      margin-right: 10px;
+      &:hover {
+        .hoverIconConatiner {
+          display: block;
         }
-
-    &:before {
-      content: '';
-      position: absolute;
-      top: -10px;
-      left: 20px;
-      width: 0;
-      height: 0;
-      border-left: 10px solid transparent;
-      border-right: 10px solid transparent;
-      border-bottom: 10px solid rgba(0, 179, 122, 0.12);;
       }
+
+      .hoverIconConatiner {
+        display: none;
+        .hoverIcon {
+          background-color: #C0C4CC;
+          width: 16px;
+          height: 16px;
+          border-radius: 8px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
         }
-}
 
-.centerRow {
+        .hoverLink {
           display: flex;
           flex-direction: row;
+          align-items: center;
+          justify-content: center;
+        }
+      }
 
-  .centerCol {
-    width: 160px;
-    margin-right: 16px;
+      .text {
+        flex: 1;
+      }
+    }
   }
 }
 

src/pages/home/hooks/useViewRequest.tsx

-import { Loading3QuartersOutlined, TrophyOutlined } from '@ant-design/icons';
 import { useInViewport } from '@umijs/hooks';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 interface ResponseDataType {
   code: number,
@@ -14,13 +13,15 @@ function useViewRequest<T, P>(fn: (postData: P) => Promise<ResponseDataType & {
   const [loading, setLoading] = useState<boolean>(false);
   const [isError, setIsError] = useState<boolean>(false);
   const [inViewPort, ref] = useInViewport<HTMLDivElement>();
-  const [hasRequest, setHasRequest] = useState<boolean>()
+  const [hasRequest, setHasRequest] = useState<boolean>(false)
   const [responseData, setResponseData] = useState<T | null>(null);
+  // const hasFetchingRef = useRef(false);
 
   const fetchData = useCallback(async (params) => {
     setLoading(() => true);
     try {
       const { data, code, message } = await fn(params);
+      setHasRequest(() => true)
       // throw new Error("123");
       if (code === 1000) {
         setResponseData(data as T)
@@ -34,10 +35,11 @@ function useViewRequest<T, P>(fn: (postData: P) => Promise<ResponseDataType & {
   }, [fn])
 
   useEffect(() => {
-    if (!inViewPort || !fn || loading) {
+    if (!inViewPort || !fn || loading || hasRequest) {
       return;
     }
     async function init() {
+      // hasFetchingRef.current = true
       await fetchData(params)
     }
     init()

src/services/api.ts

@@ -22,6 +22,7 @@ import * as PlatformApi from './PlatformApi';
 import * as ProductV2Api from './ProductV2Api';
 import * as TemplateV2Api from './TemplateV2Api';
 import * as MemberV2Api from './MemberV2Api';
+import * as ReportV2Api from './ReportV2Api';
 
 
 /**
@@ -56,5 +57,6 @@ export const PublicApi = {
   ...PlatformApi,
   ...ProductV2Api,
   ...TemplateV2Api,
-  ...MemberV2Api
+  ...MemberV2Api,
+  ...ReportV2Api
 }

ytt.config.ts

@@ -23,7 +23,8 @@ const tokenList = [
   { name: 'Platform', token: 'cadc3b13452c3ec67b5ef0c57063f12142e857a9eaa64669e80165adf42f5861', categoryIds: [0] }, // 平台后台v2
   { name: 'ProductV2', token: 'b915026587fa1f6edf056f3335817fe2d4b350b0aa84da456786e15e83d45827', categoryIds: [0], },  // 商品服务V2
   { name: 'TemplateV2', token: 'f0187aed046ac19accbed5c780cade01cf11b50a37099dab9d456195a4abd0d3', categoryIds: [0], },  // 页面模板服务V2
-  { name: 'MemberV2', token: '87f86a297246fbf1c0dff7d34f13729cb194935a95db077a5009ac4ea48cea6f', categoryIds: [0]} //会员服务 V2
+  { name: 'MemberV2', token: '87f86a297246fbf1c0dff7d34f13729cb194935a95db077a5009ac4ea48cea6f', categoryIds: [0]}, //会员服务 V2
+  { name: 'ReportV2', token: 'dab50c384c27f1c981a03f2c44ad76d1e7e1f60b4520bd279cea67f5cf146cee', categoryIds: [0]}, // 报表服务v2 首页
 ]
 
 const getConfigMap = (tokens) => tokens.map(v => ({