feat: add card wrappers to error pages and buttons to sales tabs (#11513)

src/loading.tsx

@@ -1,7 +1,7 @@
 import { Skeleton } from 'antd';
 
 const Loading: React.FC = () => (
-  <Skeleton style={{ margin: '24px 40px' }} active />
+  <Skeleton style={{ margin: '24px 40px', height: '60vh' }} active />
 );
 
 export default Loading;

src/pages/404.tsx

@@ -1,8 +1,9 @@
 import { history, useIntl } from '@umijs/max';
-import { Button, Result } from 'antd';
+import { Button, Card, Result } from 'antd';
 import React from 'react';
 
 const NoFoundPage: React.FC = () => (
+  <Card variant="borderless">
     <Result
       status="404"
       title="404"
@@ -13,6 +14,7 @@ const NoFoundPage: React.FC = () => (
         </Button>
       }
     />
+  </Card>
 );
 
 export default NoFoundPage;

src/pages/dashboard/analysis/components/SalesCard.tsx

@@ -1,5 +1,5 @@
 import { Column } from '@ant-design/plots';
-import { Card, Col, DatePicker, Row, Tabs } from 'antd';
+import { Button, Card, Col, DatePicker, Row, Tabs } from 'antd';
 import type { RangePickerProps } from 'antd/es/date-picker';
 import numeral from 'numeral';
 import type { DataItem } from '../data.d';
@@ -51,30 +51,34 @@ const SalesCard = ({
         tabBarExtraContent={
           <div className={styles.salesExtraWrap}>
             <div className={styles.salesExtra}>
-              <a
+              <Button
+                type="text"
                 className={isActive('today')}
                 onClick={() => selectDate('today')}
               >
                 今日
-              </a>
+              </Button>
-              <a
+              <Button
+                type="text"
                 className={isActive('week')}
                 onClick={() => selectDate('week')}
               >
                 本周
-              </a>
+              </Button>
-              <a
+              <Button
+                type="text"
                 className={isActive('month')}
                 onClick={() => selectDate('month')}
               >
                 本月
-              </a>
+              </Button>
-              <a
+              <Button
+                type="text"
                 className={isActive('year')}
                 onClick={() => selectDate('year')}
               >
                 本年
-              </a>
+              </Button>
             </div>
             <RangePicker
               value={rangePickerValue}

src/pages/dashboard/analysis/style.style.ts

@@ -89,6 +89,7 @@ const useStyles = createStyles(({ token }) => {
     },
     currentDate: {
       color: token.colorPrimary,
+      fontWeight: 'bold',
     },
     salesBar: {
       padding: '0 0 32px 32px',

src/pages/exception/403/index.tsx

@@ -1,7 +1,8 @@
 import { Link } from '@umijs/max';
-import { Button, Result } from 'antd';
+import { Button, Card, Result } from 'antd';
 
 export default () => (
+  <Card variant="borderless">
     <Result
       status="403"
       title="403"
@@ -12,4 +13,5 @@ export default () => (
         </Link>
       }
     />
+  </Card>
 );

src/pages/exception/404/index.tsx

@@ -1,7 +1,8 @@
 import { Link } from '@umijs/max';
-import { Button, Result } from 'antd';
+import { Button, Card, Result } from 'antd';
 
 export default () => (
+  <Card variant="borderless">
     <Result
       status="404"
       title="404"
@@ -12,4 +13,5 @@ export default () => (
         </Link>
       }
     />
+  </Card>
 );

src/pages/exception/500/index.tsx

@@ -1,7 +1,8 @@
 import { Link } from '@umijs/max';
-import { Button, Result } from 'antd';
+import { Button, Card, Result } from 'antd';
 
 export default () => (
+  <Card variant="borderless">
     <Result
       status="500"
       title="500"
@@ -12,4 +13,5 @@ export default () => (
         </Link>
       }
     />
+  </Card>
 );