chore: 相关页面配置

src/components/Footer/index.tsx

@@ -10,28 +10,29 @@ export default () => {
   });
 
   return (
-    <DefaultFooter
-      copyright={`2021 ${defaultMessage}`}
-      links={[
-        {
-          key: 'CLD.V2',
-          title: 'CLD.V2',
-          href: 'https://smartcost.com.cn/',
-          blankTarget: true,
-        },
-        {
-          key: 'github',
-          title: <GithubOutlined />,
-          href: 'https://github.com/ant-design/ant-design-pro',
-          blankTarget: true,
-        },
-        {
-          key: 'CLD.V2',
-          title: 'CLD.V2',
-          href: 'https://smartcost.com.cn/',
-          blankTarget: true,
-        },
-      ]}
-    />
+    <div></div>
+    // <DefaultFooter
+    //   copyright={`2021 ${defaultMessage}`}
+    //   links={[
+    //     {
+    //       key: 'CLD.V2',
+    //       title: 'CLD.V2',
+    //       href: 'https://smartcost.com.cn/',
+    //       blankTarget: true,
+    //     },
+    //     {
+    //       key: 'github',
+    //       title: <GithubOutlined />,
+    //       href: 'https://github.com/ant-design/ant-design-pro',
+    //       blankTarget: true,
+    //     },
+    //     {
+    //       key: 'CLD.V2',
+    //       title: 'CLD.V2',
+    //       href: 'https://smartcost.com.cn/',
+    //       blankTarget: true,
+    //     },
+    //   ]}
+    // />
   );
 };

src/global.less

@@ -55,3 +55,22 @@ ol {
     min-height: 100vh;
   }
 }
+
+.leftTitle{
+  height: 89.8vh;
+}
+.titleBorder{
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+.leftLihover{
+  background: #886ab5;
+  color:#fff;
+}
+.popoverList li{
+  padding: 5px;
+  display: block;
+  cursor: pointer;
+}
+.popoverList li:hover{
+  color: #886ab5;
+}

src/pages/Role/System/index.tsx

@@ -1,10 +1,83 @@
-import { Card } from 'antd'
+import { DownOutlined, PlusOutlined } from '@ant-design/icons';
+import { Button, Col, Row, Table, Tabs, List, Popover } from 'antd'
 import React from 'react'
 
 const index = () => {
+  const { TabPane } = Tabs
+  const data = [
+    '超级管理员',
+    '管理员A',
+    '管理员B'
+  ]
+  const dataSource = [
+    {
+      key: '1',
+      name: '胡彦斌',
+      age: 32,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '2',
+      name: '胡彦祖',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    },
+  ];
+  
+  const columns = [
+    {
+      title: '姓名',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '年龄',
+      dataIndex: 'age',
+      key: 'age',
+    },
+    {
+      title: '住址',
+      dataIndex: 'address',
+      key: 'address',
+    },
+  ];
+  const content = (
+    <div className="popoverList">
+      <ul>
+        <li>复制</li>
+        <li>粘贴</li>
+        <li className="text-red-500">删除</li>
+      </ul>
+    </div>
+  );
   return (
     <div>
-      <Card>系统管理</Card>
+      <Row>
+        <Col flex="260px">
+          <div className="leftTitle bg-white rounded">
+            <h2 className="titleBorder bg-[#f7f9fa] p-4">角色列表 <span className="float-right"><Button size="small" type="primary" ghost><PlusOutlined />创建角色</Button></span></h2>
+            <div className="p-4">
+            <List
+              dataSource={data}
+              renderItem={item => <List.Item>{item}<span className="float-right"><Popover placement="bottomRight" content={content} trigger="click"><DownOutlined></DownOutlined></Popover></span></List.Item>}
+            />
+            </div>
+          </div>
+        </Col>
+        <Col flex="auto">
+          <div className="ml-4 bg-white p-4">
+            <Tabs defaultActiveKey="1" type="card">
+              <TabPane tab="员工列表" key="1">
+                <Table
+                  dataSource={dataSource} 
+                  columns={columns}
+                />
+              </TabPane>
+              <TabPane tab="角色权限" key="2">角色权限</TabPane>
+            </Tabs>
+          </div>
+        </Col>
+      </Row>
     </div>
   )
 }