fix: 添加消息列表页面

config/routes/authConfigRoute.ts

@@ -119,7 +119,13 @@ const AuthConfigRoute: RouterChild = {
       component: '@/pages/accountSetting/editAccount',
       hideInMenu: true,
     },
-    //
+    //消息中心
+    {
+      path: '/memberCenter/systemSetting/message',
+      name: 'message',
+      component: '@/pages/systemSetting/message'
+    },
+    
   ],
 
 }

src/locales/zh-CN/menu.ts

@@ -451,6 +451,8 @@ export default {
   'menu.systemSetting.accountSetting': '账号安全设置',
   'menu.systemSetting.editAccount': '编辑账号信息',
 
+  'menu.systemSetting.message': '消息中心',
+
   // 加工能力, assign 指的是 指派生产通知单
   'menu.handling': '加工',
   'menu.handling.assign': '指派生产通知单',

src/pages/systemSetting/message/index.less

+.customList{
+  :global{
+    .ant-list-item-meta{
+      align-items: center;
+    }
+  }
+  .messageText{
+    font-size: 14px;
+    font-weight: 400;
+    color: #606266;
+  }
+  .messageTitle{
+    margin: 0 30px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #303133;
+  }
+}
\ No newline at end of file

src/pages/systemSetting/message/index.tsx

+import React from 'react';
+import { history } from 'umi';
+import { Button, Row, Col, Card, List, Avatar } from 'antd';
+import styles from './index.less'
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { PlusOutlined } from '@ant-design/icons';
+import StatusTag from '@/components/StatusTag';
+
+const Message: React.FC<{}> = () => {
+
+  const data = [
+    {
+      id: 1,
+      icon: '',
+      status: 'success',
+      type: '系统消息',
+      title: '订单发货',
+      message: '订单发货，请注意查收，清单发货，请注意查收！',
+      time: '2015-15-05',
+    },
+    {
+      id: 2,
+      icon: '',
+      status: 'success',
+      type: '系统消息',
+      title: '订单收货',
+      message: '订单发货，请注意查收，清单发货，请注意查收！',
+      time: '2015-15-05',
+    },
+    {
+      id: 3,
+      icon: '',
+      status: 'primary',
+      type: '系统消息',
+      title: '系统消息',
+      message: '账户异常，请注意账户资金安全！',
+      time: '2015-15-05',
+    },
+    {
+      id: 4,
+      icon: '',
+      status: 'primary',
+      type: '系统消息',
+      title: '系统消息',
+      message: '账户支出300元，请注意账户资金安全！',
+      time: '2015-15-05',
+    },
+  ];
+
+  const renderMessage = (data) => {
+
+    return (
+      <>
+        <StatusTag type={data.status} title={data.type} />
+        <span className={styles.messageTitle}>{data.title}</span>
+        <span className={styles.messageText}>{data.message}</span>
+      </>
+    )
+  }
+
+  const showTotal = (total) => {
+    return `共 ${total} 条`;
+  }
+
+  return (
+    <PageHeaderWrapper>
+      <Card
+        title="消息列表"
+      > 
+        <List
+          itemLayout="horizontal"
+          dataSource={data}
+          className={styles.customList}
+          pagination={{
+            onChange: page => {
+              console.log(page);
+            },
+            pageSize: 10,
+            size: "small",
+            showQuickJumper: true,
+            total: 4,
+            showTotal: showTotal
+          }}
+          renderItem={item => (
+            <List.Item>
+              <List.Item.Meta
+                avatar={<Avatar src={item.icon} />}
+                title={renderMessage(item)}
+              />
+              <div>{item.time}</div>
+            </List.Item>
+          )}
+        />
+      </Card>
+    </PageHeaderWrapper>
+  )
+}
+
+export default Message;