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,18 +1,20 @@
 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 = () => (
-  <Result
+  <Card variant="borderless">
-    status="404"
+    <Result
-    title="404"
+      status="404"
-    subTitle={useIntl().formatMessage({ id: 'pages.404.subTitle' })}
+      title="404"
-    extra={
+      subTitle={useIntl().formatMessage({ id: 'pages.404.subTitle' })}
-      <Button type="primary" onClick={() => history.push('/')}>
+      extra={
-        {useIntl().formatMessage({ id: 'pages.404.buttonText' })}
+        <Button type="primary" onClick={() => history.push('/')}>
-      </Button>
+          {useIntl().formatMessage({ id: 'pages.404.buttonText' })}
-    }
+        </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,15 +1,17 @@
 import { Link } from '@umijs/max';
-import { Button, Result } from 'antd';
+import { Button, Card, Result } from 'antd';
 
 export default () => (
-  <Result
+  <Card variant="borderless">
-    status="403"
+    <Result
-    title="403"
+      status="403"
-    subTitle="Sorry, you are not authorized to access this page."
+      title="403"
-    extra={
+      subTitle="Sorry, you are not authorized to access this page."
-      <Link to="/">
+      extra={
-        <Button type="primary">Back to home</Button>
+        <Link to="/">
-      </Link>
+          <Button type="primary">Back to home</Button>
-    }
+        </Link>
-  />
+      }
+    />
+  </Card>
 );

src/pages/exception/404/index.tsx

@@ -1,15 +1,17 @@
 import { Link } from '@umijs/max';
-import { Button, Result } from 'antd';
+import { Button, Card, Result } from 'antd';
 
 export default () => (
-  <Result
+  <Card variant="borderless">
-    status="404"
+    <Result
-    title="404"
+      status="404"
-    subTitle="Sorry, the page you visited does not exist."
+      title="404"
-    extra={
+      subTitle="Sorry, the page you visited does not exist."
-      <Link to="/">
+      extra={
-        <Button type="primary">Back Home</Button>
+        <Link to="/">
-      </Link>
+          <Button type="primary">Back Home</Button>
-    }
+        </Link>
-  />
+      }
+    />
+  </Card>
 );

src/pages/exception/500/index.tsx

@@ -1,15 +1,17 @@
 import { Link } from '@umijs/max';
-import { Button, Result } from 'antd';
+import { Button, Card, Result } from 'antd';
 
 export default () => (
-  <Result
+  <Card variant="borderless">
-    status="500"
+    <Result
-    title="500"
+      status="500"
-    subTitle="Sorry, something went wrong."
+      title="500"
-    extra={
+      subTitle="Sorry, something went wrong."
-      <Link to="/">
+      extra={
-        <Button type="primary">Back Home</Button>
+        <Link to="/">
-      </Link>
+          <Button type="primary">Back Home</Button>
-    }
+        </Link>
-  />
+      }
+    />
+  </Card>
 );