feats

src/components/GlobalHeader/AvatarDropdown.jsx

@@ -2,6 +2,7 @@ import { LogoutOutlined } from '@ant-design/icons';
 import { Avatar, Menu, Spin } from 'antd';
 import React from 'react';
 import { history, connect } from 'umi';
+import { defaultAvatar } from '@/utils/utils';
 import HeaderDropdown from '../HeaderDropdown';
 import styles from './index.less';
 
@@ -45,10 +46,7 @@ class AvatarDropdown extends React.Component {
           <Avatar
             size="small"
             className={styles.avatar}
-            src={
-              currentUser.avatar ||
-              'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png'
-            }
+            src={ currentUser.avatar || defaultAvatar }
             alt="avatar"
           />
           <span className={`${styles.name} anticon`}>{currentUser.userName}</span>

src/pages/Welcome.less

@@ -1,8 +0,0 @@
-@import '~antd/lib/style/themes/default.less';
-
-.pre {
-  margin: 12px 0;
-  padding: 12px 20px;
-  background: @input-bg;
-  box-shadow: @card-shadow;
-}

src/pages/Welcome/components/HeaderContent.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Image, Statistic, Row, Col, Badge, Divider } from 'antd'
+import { connect } from 'umi'
+import { defaultAvatar } from '@/utils/utils';
+import Styles from '../style.less'
+
+const HeaderContent = (props) => {
+  return (
+    <div className={Styles['header-content']}>
+      <div className={Styles['ctt-header']}>
+        <Image width="100%" src={props.user.avatar || defaultAvatar} />
+      </div>
+      <div className={Styles['ctt-body']}>
+        <h3>{`你好, ${props.user.userName}, 祝你开心每一天！`}</h3>
+        <p>
+          <span className={Styles['sub-title']}>{`登录名: ${props.user.loginName}`}</span>
+          <span className={Styles['sub-title']}>状态: 正常 <Badge status="success" /></span>
+        </p>
+      </div>
+      <div className={Styles['ctt-footer']}>
+        <div className={Styles['st-wrapper']}>
+          <div className={Styles['st-item']}><Statistic title="科普数量" value={112893} /></div>
+          <div className={Styles['st-item']}><Statistic title="浏览总数" value={112893} /></div>
+          <div className={Styles['st-item']}><Statistic title="学生总数" value={112893} /></div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default connect((s) => ({ user: s.user.currentUser }))(HeaderContent)

src/pages/Welcome.jsx → src/pages/Welcome/index.jsx

@@ -2,20 +2,18 @@ import React from 'react';
 import { PageContainer } from '@ant-design/pro-layout';
 import { Card, Alert, Typography } from 'antd';
 // import { useIntl, FormattedMessage } from 'umi';
-import styles from './Welcome.less';
-
-const CodePreview = ({ children }) => (
-  <pre className={styles.pre}>
-    <code>
-      <Typography.Text copyable>{children}</Typography.Text>
-    </code>
-  </pre>
-);
+import HeaderContent from './components/HeaderContent';
+import styles from './style.less';
 
 export default () => {
   // const intl = useIntl();
   return (
-    <PageContainer>
+    <PageContainer
+      header={{
+        title: '工作台'
+      }}
+      content={<HeaderContent />}
+    >
       <Card>
         <Alert
           // message={intl.formatMessage({
@@ -43,7 +41,7 @@ export default () => {
             欢迎使用
           </a>
         </Typography.Text>
-        <CodePreview>yarn add @ant-design/pro-table</CodePreview>
+    
         <Typography.Text
           strong
           style={{
@@ -61,7 +59,7 @@ export default () => {
             欢迎使用
           </a>
         </Typography.Text>
-        <CodePreview>yarn add @ant-design/pro-layout</CodePreview>
+
       </Card>
     </PageContainer>
   );

src/pages/Welcome/style.less

@@ -0,0 +1,55 @@
+@import '~antd/lib/style/themes/default.less';
+
+.header-content {
+  display: flex;
+  
+  .ctt-header {
+    flex: none;
+    width: 72px;
+    height: 72px;
+    
+    img {
+      border-radius: 50%;
+      overflow: hidden;
+    }
+  }
+
+  .ctt-body {
+    flex: auto;
+    margin: 0 2em;
+
+    .sub-title {
+      display: inline-block;
+      size: 1em;
+      color: #666;
+      margin-right: 2em;
+    }
+  }
+
+  .ctt-footer {
+    flex: none;
+  }
+
+  .st-wrapper {
+    display: flex;
+
+    .st-item {
+      flex: none;
+      position: relative;
+
+      & + .st-item {
+        margin-left: 1em;
+        padding-left: 1em;
+
+        &::before {
+          position: absolute;
+          content: '';
+          border-left: 1px solid rgba(0, 0, 0, .2);
+          height: 60%;
+          top: 20%;
+          left: 0;
+        }
+      }
+    }
+  }
+}

src/utils/utils.js

@@ -43,3 +43,5 @@ export function getCurrentRoute(pathname) {
 
   return routeArr.filter((x) => x.path === pathname)[0];
 }
+
+export const defaultAvatar = 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png'