From ae3c2d6581ee9130fb6ff9018f19b1014e41dc0e Mon Sep 17 00:00:00 2001
From: zhouxin <zhou.xin@free-sun.com.cn>
Date: Thu, 15 Dec 2022 15:13:07 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9A=82=E5=AD=98=E8=B5=84=E6=96=99=E5=9F=B9?=
 =?UTF-8?q?=E8=AE=AD=E5=BA=93=E6=A1=86=E6=9E=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../containers/resourceRepository.jsx         | 139 +++++++++++++++++-
 .../src/sections/humanAffairs/style.less      |  12 ++
 2 files changed, 148 insertions(+), 3 deletions(-)

diff --git a/web/client/src/sections/humanAffairs/containers/resourceRepository.jsx b/web/client/src/sections/humanAffairs/containers/resourceRepository.jsx
index d822a8e..fc5f43e 100644
--- a/web/client/src/sections/humanAffairs/containers/resourceRepository.jsx
+++ b/web/client/src/sections/humanAffairs/containers/resourceRepository.jsx
@@ -1,10 +1,114 @@
 import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
-import Empty from '../components/empty';
+import { Button, Col, Row, Input, Tree, Space } from '@douyinfe/semi-ui';
+import { IconSearch } from '@douyinfe/semi-icons';
 import '../style.less'
 
 const ResourceRepository = (props) => {
-    const { dispatch, actions } = props
+    const { dispatch, actions } = props;
+    const treeData = [
+        {
+            label: '亚洲',
+            value: 'Asia',
+            key: '0',
+            children: [
+                {
+                    label: '中国',
+                    value: 'China',
+                    key: '0-0',
+                    children: [
+                        {
+                            label: '北京',
+                            value: 'Beijing',
+                            key: '0-0-0',
+                        },
+                        {
+                            label: '上海',
+                            value: 'Shanghai',
+                            key: '0-0-1',
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            label: '北美洲',
+            value: 'North America',
+            key: '1',
+            children: [
+                {
+                    label: '中国',
+                    value: 'China',
+                    key: '0-0',
+                    children: [
+                        {
+                            label: '北京',
+                            value: 'Beijing',
+                            key: '0-0-0',
+                        },
+                        {
+                            label: '上海',
+                            value: 'Shanghai',
+                            key: '0-0-1',
+                        },
+                    ],
+                },
+            ],
+        }, {
+            label: '亚洲',
+            value: 'Asia',
+            key: '3',
+            children: [
+                {
+                    label: '中国',
+                    value: 'China',
+                    key: '0-0',
+                    children: [
+                        {
+                            label: '北京',
+                            value: 'Beijing',
+                            key: '0-0-0',
+                        },
+                        {
+                            label: '上海',
+                            value: 'Shanghai',
+                            key: '0-0-1',
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            label: '北美洲',
+            value: 'North America',
+            key: '4',
+            children: [
+                {
+                    label: '中国',
+                    value: 'China',
+                    key: '0-0',
+                    children: [
+                        {
+                            label: '北京',
+                            value: 'Beijing',
+                            key: '0-0-0',
+                        },
+                        {
+                            label: '上海',
+                            value: 'Shanghai',
+                            key: '0-0-1',
+                        },
+                    ],
+                },
+            ],
+        }
+    ];
+
+    const style = {
+        width: 260,
+        height: 420,
+        border: '1px solid var(--semi-color-border)'
+    };
 
     return (
         <>
@@ -24,7 +128,35 @@ const ResourceRepository = (props) => {
                             <div style={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>RESOURCE REPOSITORY</div>
                         </div>
                     </div>
-                    <Empty />
+                    <Row className='resourceRepository'>
+                        {/* 左侧 */}
+                        <Col span={6}>
+                            <Button theme='solid' type='primary' >新建文件夹</Button>
+                            <br />
+                            <Input suffix={<IconSearch />} showClear placeholder="请输入"></Input>
+                            <Tree
+                                treeData={treeData}
+                                defaultExpandAll
+                                style={style}
+                            />
+                        </Col>
+                        {/* 右侧内容 */}
+                        <Col span={18}>
+                            <Row gutter={16}>
+                                <Col span={12}>
+                                    <Space>
+                                        <Button theme='solid' type='primary' >上传文件</Button>
+                                        <span><strong>当前文件夹：公司培训资源/人力资源部2/2022-11</strong></span>
+                                    </Space>
+                                </Col>
+                                <Col span={12} justify="end">
+                                    <Input suffix={<IconSearch />} showClear placeholder="文件名称、更新时间"></Input>
+                                </Col>
+                            </Row>
+
+                            <br />
+                        </Col>
+                    </Row>
                 </div>
             </div>
         </>
@@ -36,6 +168,7 @@ function mapStateToProps(state) {
     return {
         user: auth.user,
         actions: global.actions,
+        clientHeight: global.clientHeight,
     };
 }
 
diff --git a/web/client/src/sections/humanAffairs/style.less b/web/client/src/sections/humanAffairs/style.less
index a1290ea..e4bf3ca 100644
--- a/web/client/src/sections/humanAffairs/style.less
+++ b/web/client/src/sections/humanAffairs/style.less
@@ -7,3 +7,15 @@
         }
     }
 }
+.resourceRepository{
+    margin-top: 20px;
+    .semi-button{
+        margin-bottom: 20px;
+    }
+    .semi-input-wrapper{
+        width: 260px;
+    }
+    .semi-tree-wrapper{
+        margin-top: 20px;
+    }
+}