完成了文件夹，文件等动态效果和调试，接下来做做join team的弹窗以及setting（坐等后端测试完）

package.json

@@ -13,6 +13,7 @@
     "axios": "^0.21.4",
     "craco-less": "^1.20.0",
     "qs": "^6.10.1",
+    "rc-queue-anim": "^2.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router": "^5.2.1",

src/components/Forms/ForgetPasswordForm.js

@@ -1,6 +1,6 @@
 import React, {Component} from "react";
 import {Button, Form, Input, Steps, Row, Col} from "antd";
-import './Form.less'
+import './UserForm.less'
 import {LockOutlined, MailOutlined, SecurityScanOutlined, UserOutlined} from "@ant-design/icons";
 
 const {Step} = Steps;
@@ -48,7 +48,7 @@ class ForgetPasswordForm extends Component {
                                     rules={[{required: true, message: 'Please input your Username!'}]}
                                 >
                                     <Input
-                                        prefix={<UserOutlined className="site-form-item-icon"/>}
+                                        prefix={<UserOutlined id="item-icon"/>}
                                         placeholder="Username"
                                         size="large"
                                     />
@@ -67,7 +67,7 @@ class ForgetPasswordForm extends Component {
                                     ]}
                                 >
                                     <Input
-                                        prefix={<MailOutlined className="site-form-item-icon"/>}
+                                        prefix={<MailOutlined id="item-icon"/>}
                                         placeholder="E-mail"
                                         size="large"
                                     />
@@ -93,7 +93,7 @@ class ForgetPasswordForm extends Component {
                                         rules={[{required: true, message: 'Please input your Verification Code!'}]}
                                     >
                                         <Input
-                                            prefix={<SecurityScanOutlined className="site-form-item-icon"/>}
+                                            prefix={<SecurityScanOutlined id="item-icon"/>}
                                             placeholder="Verification Code"
                                             size="large"
                                         />
@@ -118,7 +118,7 @@ class ForgetPasswordForm extends Component {
                                         hasFeedback
                                     >
                                         <Input.Password placeholder="Password"
-                                                        prefix={<LockOutlined className="site-form-item-icon"/>}
+                                                        prefix={<LockOutlined id="item-icon"/>}
                                                         size="large"
                                         />
                                     </Form.Item>
@@ -141,7 +141,7 @@ class ForgetPasswordForm extends Component {
                                             }),
                                         ]}
                                     >
-                                        <Input.Password prefix={<LockOutlined className="site-form-item-icon"/>}
+                                        <Input.Password prefix={<LockOutlined id="item-icon"/>}
                                                         placeholder="Confirm Password"
                                                         size="large"
                                         />

src/components/Forms/LoginForm.js

@@ -2,7 +2,7 @@ import React, {Component} from "react";
 import {Button, Form, Input, message} from "antd";
 import {apiLogin} from "../../services/API/API";
 import {LockOutlined, UserOutlined} from "@ant-design/icons";
-import './Form.less'
+import './UserForm.less'
 
 class LoginForm extends Component {
     handleSubmitLogin = values => {
@@ -27,7 +27,7 @@ class LoginForm extends Component {
                     rules={[{required: true, message: 'Please input your Username or E-mail!'}]}
                 >
                     <Input
-                        prefix={<UserOutlined className="site-form-item-icon"/>}
+                        prefix={<UserOutlined id="item-icon"/>}
                         placeholder="Username or E-mail"
                         size="large"
                     />
@@ -37,7 +37,7 @@ class LoginForm extends Component {
                     rules={[{required: true, message: 'Please input your Password!'}]}
                 >
                     <Input
-                        prefix={<LockOutlined className="site-form-item-icon"/>}
+                        prefix={<LockOutlined id="item-icon"/>}
                         type="password"
                         placeholder="Password"
                         size="large"
@@ -46,14 +46,14 @@ class LoginForm extends Component {
                 <Form.Item style={{marginBottom: '10px'}}>
                     <Button size="large" type="primary" htmlType="submit" className="login-form-button"
                             style={{width: '100%'}}>
-                        LOGIN
+                        Login
                     </Button>
                 </Form.Item>
                 <Form.Item style={{marginBottom: '0'}}>
                     <Button type="link" block style={{textAlign: 'right'}} onClick={() => {
                         this.props.handleLoginStatus('forget')
                     }}>
-                        FORGET YOUR PASSWORD？
+                        Forget your password？
                     </Button>
                 </Form.Item>
             </Form>

src/components/Forms/RegisterForm.js

@@ -1,7 +1,7 @@
 import React, {Component} from "react";
 import {Button, Form, Input} from "antd";
 import {LockOutlined, MailOutlined, UserOutlined} from "@ant-design/icons";
-import './Form.less'
+import './UserForm.less'
 
 class RegisterForm extends Component {
     render() {
@@ -12,7 +12,7 @@ class RegisterForm extends Component {
                     rules={[{required: true, message: 'Please input your Username!'}]}
                 >
                     <Input
-                        prefix={<UserOutlined className="site-form-item-icon"/>}
+                        prefix={<UserOutlined id="item-icon"/>}
                         placeholder="Username"
                         size="large"
                     />
@@ -31,7 +31,7 @@ class RegisterForm extends Component {
                     ]}
                 >
                     <Input
-                        prefix={<MailOutlined className="site-form-item-icon"/>}
+                        prefix={<MailOutlined id="item-icon"/>}
                         placeholder="E-mail"
                         size="large"
                     />
@@ -47,7 +47,7 @@ class RegisterForm extends Component {
                     hasFeedback
                 >
                     <Input.Password placeholder="Password"
-                                    prefix={<LockOutlined className="site-form-item-icon"/>}
+                                    prefix={<LockOutlined id="item-icon"/>}
                                     size="large"
                     />
                 </Form.Item>
@@ -70,7 +70,7 @@ class RegisterForm extends Component {
                         }),
                     ]}
                 >
-                    <Input.Password prefix={<LockOutlined className="site-form-item-icon"/>}
+                    <Input.Password prefix={<LockOutlined id="item-icon"/>}
                                     placeholder="Confirm Password"
                                     size="large"
                     />
@@ -78,7 +78,7 @@ class RegisterForm extends Component {
                 <Form.Item>
                     <Button size="large" type="primary" htmlType="submit"
                             className="register-form-button" style={{width: '100%'}}>
-                        REGISTER
+                        Register
                     </Button>
                 </Form.Item>
             </Form>

src/components/Forms/Form.less → src/components/Forms/UserForm.less

@@ -1,3 +1,7 @@
 .site-form-item-icon {
   color: rgba(0, 0, 0, .25)
+}
+
+#item-icon {
+  color: rgba(0, 0, 0, .25)
 }

src/components/MyBreadCrumb/MyBreadCrumb.js

@@ -3,12 +3,20 @@ import {Breadcrumb} from "antd";
 
 class MyBreadCrumb extends Component {
     render() {
-        return (
-            <Breadcrumb style={{margin: '16px 0'}}>
-                <Breadcrumb.Item>User</Breadcrumb.Item>
-                <Breadcrumb.Item>Bill</Breadcrumb.Item>
-            </Breadcrumb>
-        )
+        return this.address.split('/').map((ele, index) => {
+            let key = this.address.split('/').slice(0, index + 1);
+            key = key.join('/');
+            // 保证最有'/'结尾
+            key = key.slice(-1) === '/' ? key : key + '/';
+            return (
+                <Breadcrumb.Item
+                    key={key}
+                    className="breadcrumb-line"
+                    onClick={(ev) => this.cdFolder(key)}>
+                    <a>{ele}</a>
+                </Breadcrumb.Item>
+            );
+        });
     }
 }
 

src/components/Page/DiskPage.js

@@ -1,159 +1,85 @@
 import React, {Component} from "react";
-import {Table, Tag, Space} from 'antd';
-import {FileTextOutlined, FolderOpenOutlined} from "@ant-design/icons";
-
-const columns = [
-    {
-        title: 'Type',
-        dataIndex: 'type',
-        key: 'type',
-        width: '15%',
-        render: text => {
-            if (text === 'file') {
-                return (
-                    <div>
-                        <FileTextOutlined/>
-                        &nbsp; FILE
-                    </div>
-                )
-            } else if (text === 'folder') {
-                return (
-                    <div>
-                        <FolderOpenOutlined/>
-                        &nbsp; FOLDER
-                    </div>
-                )
-            }
-        }
-    },
-    {
-        title: 'Name',
-        dataIndex: 'name',
-        key: 'name',
-        render: (text, record) => {
-            if (record.type === 'file') {
-                return (
-                    <div>
-                        {text}
-                    </div>
-                )
-            } else {
-                return (
-                    <a>{text}</a>
-                )
-            }
-        },
-    },
-    {
-        title: 'Tags',
-        key: 'tags',
-        dataIndex: 'tags',
-        render: tags => (
-            <>
-                {tags.map(tag => {
-                    let color = tag.length > 5 ? 'geekblue' : 'green';
-                    if (tag === 'loser') {
-                        color = 'volcano';
-                    }
-                    return (
-                        <Tag color={color} key={tag}>
-                            {tag.toUpperCase()}
-                        </Tag>
-                    );
-                })}
-            </>
-        ),
-    },
-    {
-        title: 'Action',
-        key: 'action',
-        render: (text, record) => {
-            if (record.type === 'file') {
-                return (
-                    <Space size="middle">
-                        <a>Download {record.name}</a>
-                        <a>Delete</a>
-                    </Space>
-                )
-            } else {
-                return (
-                    <a>Get In</a>
-                )
-            }
-        }
-    },
-];
+import {Space, Slider, Button} from 'antd';
+import Folder from "./Folder";
+import MyBreadCrumb from "../MyBreadCrumb/MyBreadCrumb";
+import File from "./File";
 
 const data = [
     {
         key: '1',
-        type: 'file',
+        isFolder: true,
         name: '高等数学',
         tags: ['nice', 'developer'],
     },
     {
         key: '2',
-        type: 'file',
+        isFolder: false,
         name: 'Jim Green',
         tags: ['loser'],
     },
     {
         key: '3',
-        type: 'folder',
+        isFolder: true,
         name: 'Joe Black',
         tags: ['cool', 'teacher'],
     },
-    {
-        key: '3',
-        type: 'folder',
-        name: 'Joe Black',
-        tags: ['cool', 'teacher'],
-    },
-    {
-        key: '3',
-        type: 'folder',
-        name: 'Joe Black',
-        tags: ['cool', 'teacher'],
-    },
-    {
-        key: '3',
-        type: 'folder',
-        name: 'Joe Black',
-        tags: ['cool', 'teacher'],
-    },
-    {
-        key: '3',
-        type: 'folder',
-        name: 'Joe Black',
-        tags: ['cool', 'teacher'],
-    },
-    {
-        key: '3',
-        type: 'folder',
-        name: 'Joe Black',
-        tags: ['cool', 'teacher'],
-    },
-    {
-        key: '3',
-        type: 'folder',
-        name: 'Joe Black',
-        tags: ['cool', 'teacher'],
-    },
-    {
-        key: '3',
-        type: 'folder',
-        name: 'Joe Black',
-        tags: ['cool', 'teacher'],
-    },
-
 ];
 
 class DiskPage extends Component {
+
+    state = {
+        size: 8
+    }
+
+    setSize = size => {
+        this.setState({
+            size: size
+        })
+    }
+
     render() {
         return (
-            <Table columns={columns} dataSource={data}/>
+            <div>
+                {/*<MyBreadCrumb/>*/}
+                <div className="site-layout-background" style={{marginTop: 20, padding: 24, minHeight: '82vh'}}>
+                    <Slider value={this.state.size} onChange={value => this.setSize(value)}/>
+                    <Space size={this.state.size}>
+                        {
+                            this.renderFolderList(data)
+                        }
+                        {
+                            this.renderFileList(data)
+                        }
+                    </Space>
+                </div>
+            </div>
         )
     }
+
+    renderFolderList(dataList) {
+        return dataList.map((ele, index) => {
+            return (
+                ele.isFolder ?
+                    <div
+                        key={index}
+                        // onDoubleClick={ele.isFolder ? () => this.cdFolder(ele.Key, ele.Title) : null}
+                    >
+                        <Folder ele={ele}/>
+                    </div> : null
+            );
+        });
+    }
+
+    renderFileList(dataList) {
+        return dataList.map((ele, index) => {
+            return (
+                ele.isFolder ? null :
+                    <div>
+                        <File ele={ele}/>
+                    </div>
+            );
+        });
+    }
 }
 
 export default DiskPage;

src/components/Page/File.js

@@ -0,0 +1,60 @@
+import React, {Component} from "react";
+import {FileTextTwoTone, FileTwoTone} from "@ant-design/icons";
+import './File.less'
+import {Dropdown, Menu} from "antd";
+
+class File extends Component {
+    state = {
+        isOver: false
+    }
+    onMouseOver = () => {
+        this.setState({
+            isOver: true
+        })
+    }
+    onMouseOut = () => {
+        this.setState({
+            isOver: false
+        })
+    }
+
+    render() {
+        let {isOver} = this.state
+        const ele = this.props.ele
+        const menu = (
+            <Menu>
+                <Menu.Item key="open">
+                    <a href="https://www.antgroup.com">Open Folder</a>
+                </Menu.Item>
+            </Menu>
+        );
+        return (
+            <div className={'file' + (isOver ? '-over' : '')} onMouseEnter={this.onMouseOver}
+                 onMouseLeave={this.onMouseOut}>
+                {
+                    isOver ? <div className={'file-options'}>
+                        <Dropdown overlay={menu} trigger={['click']} placement="bottomLeft" arrow>
+                            <a className="dropdown-link" onClick={e => e.preventDefault()}>
+                                &nbsp;·&nbsp;·&nbsp;·&nbsp;
+                            </a>
+                        </Dropdown>
+                    </div> : <div>
+
+                    </div>
+                }
+                {
+                    isOver ? <FileTextTwoTone className={'file-logo'}/> :
+                        <FileTwoTone className={'file-logo'}/>
+                }
+                <div className={'file-name'}>
+                    {ele.name}
+                </div>
+                <div className={'file-date'}>
+                    2019/8/8
+                </div>
+            </div>
+        )
+    }
+}
+
+export default File;

src/components/Page/File.less

@@ -0,0 +1,47 @@
+.file {
+  width: 20vh;
+  height: 20vh;
+  border-radius: 15px;
+  text-align: center;
+}
+
+.file-over {
+  width: 20vh;
+  height: 20vh;
+  border-radius: 15px;
+  background-color: rgba(145, 229, 255, 0.63);
+  text-align: center;
+  border: 3px solid rgba(80, 167, 255, 0.76);
+}
+
+.file-options {
+  float: right;
+  margin-right: 1vh;
+  margin-top: 0.5vh;
+  border-radius: 5px;
+  background-color: rgba(230, 247, 255, 0.76);
+  color: white;
+  font-weight: bold;
+}
+
+.file-logo {
+  font-size: 8vh;
+  margin-top: 1vh;
+}
+
+.file-name {
+  font-size: 20px;
+  font-weight: bolder;
+  text-align: center;
+  margin-top: 1vh;
+}
+
+.file-date {
+  text-align: center;
+  color: rgba(0, 0, 0, .25)
+}
+
+.dropdown-link {
+  color: rgba(80, 167, 255, 0.76);
+  font-weight: bold;
+}

src/components/Page/Folder.js

@@ -0,0 +1,60 @@
+import React, {Component} from "react";
+import {FolderOpenTwoTone, FolderTwoTone} from "@ant-design/icons";
+import './Folder.less';
+import {Dropdown, Menu} from "antd";
+
+class Folder extends Component {
+    state = {
+        isOver: false
+    }
+    onMouseOver = () => {
+        this.setState({
+            isOver: true
+        })
+    }
+    onMouseOut = () => {
+        this.setState({
+            isOver: false
+        })
+    }
+
+    render() {
+        let {isOver} = this.state
+        const ele = this.props.ele
+        const menu = (
+            <Menu>
+                <Menu.Item key="open">
+                    <a href="https://www.antgroup.com">Open Folder</a>
+                </Menu.Item>
+            </Menu>
+        );
+        return (
+            <div className={'folder' + (isOver ? '-over' : '')} onMouseEnter={this.onMouseOver}
+                 onMouseLeave={this.onMouseOut}>
+                {
+                    isOver ? <div className={'folder-options'}>
+                        <Dropdown overlay={menu} trigger={['click']} placement="bottomLeft" arrow>
+                            <a className="dropdown-link" onClick={e => e.preventDefault()}>
+                                &nbsp;·&nbsp;·&nbsp;·&nbsp;
+                            </a>
+                        </Dropdown>
+                    </div> : <div>
+
+                    </div>
+                }
+                {
+                    isOver ? <FolderOpenTwoTone className={'folder-logo'}/> :
+                        <FolderTwoTone className={'folder-logo'}/>
+                }
+                <div className={'folder-name'}>
+                    {ele.name}
+                </div>
+                <div className={'folder-date'}>
+                    2019/8/8
+                </div>
+            </div>
+        )
+    }
+}
+
+export default Folder;

src/components/Page/Folder.less

@@ -0,0 +1,45 @@
+.folder-logo {
+  font-size: 10vh;
+}
+
+.folder {
+  width: 20vh;
+  height: 20vh;
+  border-radius: 15px;
+  text-align: center;
+}
+
+.folder-over {
+  width: 20vh;
+  height: 20vh;
+  border-radius: 15px;
+  background-color: rgba(145, 229, 255, 0.63);
+  text-align: center;
+  border: 3px solid rgba(80, 167, 255, 0.76);
+}
+
+.folder-name {
+  font-size: 20px;
+  font-weight: bolder;
+  text-align: center;
+}
+
+.folder-date {
+  text-align: center;
+  color: rgba(0, 0, 0, .25)
+}
+
+.folder-options{
+  float: right;
+  margin-right: 1vh;
+  margin-top: 0.5vh;
+  border-radius: 5px;
+  background-color: rgba(230, 247, 255, 0.76);
+  color: white;
+  font-weight: bold;
+}
+
+.dropdown-link{
+  color: rgba(80, 167, 255, 0.76);
+  font-weight: bold;
+}

src/components/Page/TestDataPage.js

@@ -0,0 +1,158 @@
+// import React from 'react';
+// import 'antd/dist/antd.css';
+// import {Icon, Checkbox, Breadcrumb, message} from 'antd';
+//
+// class TestDataPage extends React.Component {
+//     constructor(props) {
+//         super(props);
+//         this.address = 'root/'; // 当前目录地址
+//         this.state = {
+//             selectedKeys: [], // ['root/app/']
+//             dataList: [] // 该目录下的文件及文件夹 [{Key: 'root/app/',Title: 'app',isFolder: true}]
+//         };
+//     }
+//
+//     /**
+//      * 进入另一个目录
+//      * @param {string} key
+//      */
+//     cdFolder = (key, title) => {
+//         if (key === '') {
+//             this.address = 'root/';
+//         } else {
+//             this.address += title + '/';
+//         }
+//         this.getFileList();
+//     };
+//
+//     returnFolder=(title)=>{
+//
+//     }
+//
+//     /**
+//      * 获取当前目录的文件和文件夹
+//      */
+//     getFileList = async () => {
+//         try {
+//             let Prefix = this.address;
+//             let data = await reqwest({
+//                 url: `http://localhost:8080/sts`,
+//                 method: 'get',
+//                 data: {
+//                     prefix: Prefix
+//                 }
+//             });
+//             if (!(data.status === 200)) {
+//                 message.error(data.message);
+//                 return;
+//             }
+//             let contents = data.fileList;
+//             if (Array.isArray(contents)) {
+//                 contents = this.tags(contents);
+//             } else {
+//                 contents = [];
+//             }
+//             this.setState({dataList: contents});
+//         } catch (err) {
+//             console.log('Error', err);
+//             message.error('Get list of files failed');
+//         }
+//     };
+//
+//     componentDidMount() {
+//         this.getFileList();
+//     }
+//
+//     getSelectedKeys = () => {
+//         let newArr = this.state.dataList;
+//         newArr = newArr.filter((ele, index) => {
+//             return ele.checked === true;
+//         });
+//         let selectedKeys = [];
+//         newArr.forEach((ele) => {
+//             selectedKeys.push(ele.Key);
+//         });
+//         console.log('selectedKeys', selectedKeys);
+//         this.setState({selectedKeys: selectedKeys});
+//     };
+//
+//     onSelect = (index) => {
+//         let files = this.state.dataList.slice(0);
+//         files[index].checked = !files[index].checked;
+//         this.setState({dataFilesList: files}, this.getSelectedKeys);
+//     };
+//
+//     /**
+//      * 头部地址栏
+//      */
+//     renderHeader() {
+//         return this.address.split('/').map((ele, index) => {
+//             let key = this.address.split('/').slice(0, index + 1);
+//             key = key.join('/');
+//             // 保证最有'/'结尾
+//             key = key.slice(-1) === '/' ? key : key + '/';
+//             return (
+//                 <Breadcrumb.Item
+//                     key={key}
+//                     className="breadcrumb-line"
+//                     onClick={(ev) => this.cdFolder(key)}>
+//                     <a>{ele}</a>
+//                 </Breadcrumb.Item>
+//             );
+//         });
+//     }
+//
+//     render() {
+//         const {dataList} = this.state;
+//         return (
+//             <div className="oprate-table">
+//                 <div className="oprate-table-breadcrumb clearfix">
+//                     <div className="breadcrumb">
+//                         <Breadcrumb separator=">">{this.renderHeader()}</Breadcrumb>
+//                     </div>
+//                     <p>当前位置共{dataList.length}个内容</p>
+//                 </div>
+//                 <div className="file-list clearfix">
+//                     <ul>
+//                         <li className="file-name">名字</li>
+//                         <li className="file-size">大小</li>
+//                         <li className="file-right">权限</li>
+//                         <li className="file-edit">编辑</li>
+//                         <li className="file-final-time">最后修改日期</li>
+//                         <li className="file-create-time">创建日期</li>
+//                     </ul>
+//                     {this.renderList(dataList)}
+//                 </div>
+//             </div>
+//         );
+//     }
+//
+//     /**
+//      * 文件及文件夹列表
+//      * @param {[{Key: 'root/app/',Title: 'app',isFolder: true}]} dataList
+//      */
+//     renderList(dataList) {
+//         return dataList.map((ele, index) => {
+//             return (
+//                 <div
+//                     className={
+//                         (ele.checked ? 'checked' : '') + ' file-list-item clearfix'
+//                     }
+//                     key={index}
+//                     onDoubleClick={ele.isFolder ? () => this.cdFolder(ele.Key, ele.Title) : null}>
+//                     <div className="file-list-name">
+//                         {/*<Icon type={ele.isFolder ? 'folder' : 'file'}/>*/}
+//                         &nbsp;&nbsp;{ele.Title}
+//                     </div>
+//                     <div className="file-list-size">-</div>
+//                     <div className="file-list-right">-</div>
+//                     <div className="file-list-edit">-</div>
+//                     <div className="file-list-final-time">-</div>
+//                     <div className="file-list-create-time">-</div>
+//                 </div>
+//             );
+//         });
+//     }
+// }
+//
+// export default TestDataPage;

src/layouts/DefaultLayout/DefaultLayout.js

@@ -14,10 +14,7 @@ class DefaultLayout extends Component {
                 <MySider/>
                 <Layout className="site-layout">
                     <Content style={{margin: '0 16px'}}>
-                        {/*<MyBreadCrumb/>*/}
-                        <div className="site-layout-background" style={{marginTop: 20, padding: 24, minHeight: '80vh'}}>
-                            <PageRouter/>
-                        </div>
+                        <PageRouter/>
                     </Content>
                     <Footer style={{textAlign: 'center'}}>STCloud ©2021 Created by STeam</Footer>
                 </Layout>

src/layouts/HomePage/HomePage.js

@@ -1,8 +1,9 @@
 import React, {Component} from "react";
-import {Layout, Row, Col} from 'antd';
+import {Layout} from 'antd';
 import {CloudServerOutlined} from "@ant-design/icons";
 import './HomePage.less'
 import UserPage from "../User/UserPage";
+import QueueAnim from 'rc-queue-anim';
 
 const {Header, Footer, Content} = Layout;
 
@@ -16,7 +17,11 @@ class HomePage extends Component {
                      STCloud
                 </Header>
                 <Content className={'HomeContent'}>
-                    <UserPage/>
+                    <QueueAnim forcedReplay={false}>
+                        <div key="UserPage">
+                            <UserPage/>
+                        </div>
+                    </QueueAnim>
                 </Content>
                 <Footer style={{textAlign: 'center'}}>STCloud ©2021 Created by STeam</Footer>
             </Layout>

src/layouts/User/UserPage.js

@@ -55,7 +55,7 @@ class UserPage extends Component {
                     renderTabBar={renderTabBar}
                     defaultActiveKey="1"
                 >
-                    <TabPane tab={loginStatus === 'forget' ? "重置密码" : "登录"} key="1"
+                    <TabPane tab={loginStatus === 'forget' ? "RESET PASSWORD" : "LOGIN"} key="1"
                              style={{padding: "20px 30px 10px"}}>
                         {
                             loginStatus === 'login' ?
@@ -64,7 +64,7 @@ class UserPage extends Component {
                                 <ForgetPasswordForm handleLoginStatus={this.handleLoginStatus.bind(this)}/>
                         }
                     </TabPane>
-                    <TabPane tab="注册" key="2" style={{padding: "20px 30px 0"}}>
+                    <TabPane tab="REGISTER" key="2" style={{padding: "20px 30px 0"}}>
                         <RegisterForm/>
                     </TabPane>
                 </Tabs>

src/routes/PageRouter/PageRouter.js

@@ -2,6 +2,8 @@ import React, {Component} from "react";
 import {HashRouter, Route, Switch} from "react-router-dom";
 import DiskPage from "../../components/Page/DiskPage";
 import TeamPage from "../../components/Page/TeamPage";
+import TestDataPage from "../../components/Page/TestDataPage";
+import Folder from "../../components/Page/Folder";
 
 class PageRouter extends Component {
     render() {
@@ -11,6 +13,8 @@ class PageRouter extends Component {
                     <Switch>
                         <Route path={'/cloud/file'} component={DiskPage}/>
                         <Route path={'/cloud/teams'} component={TeamPage}/>
+                        <Route path={'/cloud/test'} component={TestDataPage}/>
+                        <Route path={'/cloud/folder'} component={Folder}/>
                     </Switch>
                 </HashRouter>
             </div>

yarn.lock

@@ -3470,7 +3470,7 @@ combined-stream@^1.0.6, combined-stream@~1.0.6:
   dependencies:
     delayed-stream "~1.0.0"
 
-commander@^2.20.0:
+commander@2, commander@^2.20.0:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
@@ -3998,6 +3998,16 @@ cyclist@^1.0.1:
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
   integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=
 
+d3-array@^1.2.0:
+  version "1.2.4"
+  resolved "https://registry.nlark.com/d3-array/download/d3-array-1.2.4.tgz?cache=0&sync_timestamp=1629145700024&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fd3-array%2Fdownload%2Fd3-array-1.2.4.tgz#635ce4d5eea759f6f605863dbcfc30edc737f71f"
+  integrity sha1-Y1zk1e6nWfb2BYY9vPww7cc39x8=
+
+d3-polygon@^1.0.3:
+  version "1.0.6"
+  resolved "https://registry.nlark.com/d3-polygon/download/d3-polygon-1.0.6.tgz?cache=0&sync_timestamp=1622918433767&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fd3-polygon%2Fdownload%2Fd3-polygon-1.0.6.tgz#0bf8cb8180a6dc107f518ddf7975e12abbfbd38e"
+  integrity sha1-C/jLgYCm3BB/UY3feXXhKrv7044=
+
 d@1, d@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/d/-/d-1.0.1.tgz#8698095372d58dbee346ffd0c7093f99f8f9eb5a"
@@ -4361,6 +4371,11 @@ duplexify@^3.4.2, duplexify@^3.6.0:
     readable-stream "^2.0.0"
     stream-shift "^1.0.0"
 
+earcut@^2.1.1:
+  version "2.2.3"
+  resolved "https://registry.nlark.com/earcut/download/earcut-2.2.3.tgz#d44ced2ff5a18859568e327dd9c7d46b16f55cf4"
+  integrity sha1-1EztL/WhiFlWjjJ92cfUaxb1XPQ=
+
 ecc-jsbn@~0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
@@ -5179,6 +5194,18 @@ flatten@^1.0.2:
   resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.3.tgz#c1283ac9f27b368abc1e36d1ff7b04501a30356b"
   integrity sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==
 
+flubber@^0.4.2:
+  version "0.4.2"
+  resolved "https://registry.nlark.com/flubber/download/flubber-0.4.2.tgz#14452d4a838cc3b9f2fb6175da94e35acd55fbaa"
+  integrity sha1-FEUtSoOMw7ny+2F12pTjWs1V+6o=
+  dependencies:
+    d3-array "^1.2.0"
+    d3-polygon "^1.0.3"
+    earcut "^2.1.1"
+    svg-path-properties "^0.2.1"
+    svgpath "^2.2.1"
+    topojson-client "^3.0.0"
+
 flush-write-stream@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8"
@@ -9417,6 +9444,14 @@ rc-progress@~3.1.0:
     "@babel/runtime" "^7.10.1"
     classnames "^2.2.6"
 
+rc-queue-anim@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.nlark.com/rc-queue-anim/download/rc-queue-anim-2.0.0.tgz?cache=0&sync_timestamp=1626935301481&other_urls=https%3A%2F%2Fregistry.nlark.com%2Frc-queue-anim%2Fdownload%2Frc-queue-anim-2.0.0.tgz#e78cf9c0f333cb41327e9ed603357f156d0ddce2"
+  integrity sha1-54z5wPMzy0Eyfp7WAzV/FW0N3OI=
+  dependencies:
+    "@babel/runtime" "^7.11.1"
+    tween-one "^1.0.52"
+
 rc-rate@~2.9.0:
   version "2.9.1"
   resolved "https://registry.npm.taobao.org/rc-rate/download/rc-rate-2.9.1.tgz#e43cb95c4eb90a2c1e0b16ec6614d8c43530a731"
@@ -10957,6 +10992,11 @@ style-loader@1.3.0:
     loader-utils "^2.0.0"
     schema-utils "^2.7.0"
 
+style-utils@^0.3.0:
+  version "0.3.4"
+  resolved "https://registry.npm.taobao.org/style-utils/download/style-utils-0.3.4.tgz#ff407c360d3b5c1a0971279586e39ce27251064f"
+  integrity sha1-/0B8Ng07XBoJcSeVhuOc4nJRBk8=
+
 stylehacks@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5"
@@ -11000,6 +11040,16 @@ svg-parser@^2.0.2:
   resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.4.tgz#fdc2e29e13951736140b76cb122c8ee6630eb6b5"
   integrity sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==
 
+svg-path-properties@^0.2.1:
+  version "0.2.2"
+  resolved "https://registry.npm.taobao.org/svg-path-properties/download/svg-path-properties-0.2.2.tgz#b073d81be7292eae0e233ab8a83f58dc27113296"
+  integrity sha1-sHPYG+cpLq4OIzq4qD9Y3CcRMpY=
+
+svg-path-properties@^1.0.4:
+  version "1.0.11"
+  resolved "https://registry.npm.taobao.org/svg-path-properties/download/svg-path-properties-1.0.11.tgz#d804b77dea286ddd56bd182548b9c4f5980dcf83"
+  integrity sha1-2AS3feoobd1WvRglSLnE9ZgNz4M=
+
 svgo@^1.0.0, svgo@^1.2.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"
@@ -11019,6 +11069,11 @@ svgo@^1.0.0, svgo@^1.2.2:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
+svgpath@^2.2.1:
+  version "2.3.1"
+  resolved "https://registry.npm.taobao.org/svgpath/download/svgpath-2.3.1.tgz#b102334bebd2244b4818460ba2ebad52716a0d43"
+  integrity sha1-sQIzS+vSJEtIGEYLouutUnFqDUM=
+
 symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
@@ -11232,6 +11287,13 @@ toidentifier@1.0.0:
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
   integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
 
+topojson-client@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.npm.taobao.org/topojson-client/download/topojson-client-3.1.0.tgz#22e8b1ed08a2b922feeb4af6f53b6ef09a467b99"
+  integrity sha1-Iuix7QiiuSL+60r29Ttu8JpGe5k=
+  dependencies:
+    commander "2"
+
 tough-cookie@^2.3.3, tough-cookie@~2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"
@@ -11305,6 +11367,23 @@ tunnel-agent@^0.6.0:
   dependencies:
     safe-buffer "^5.0.1"
 
+tween-functions@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.npm.taobao.org/tween-functions/download/tween-functions-1.2.0.tgz#1ae3a50e7c60bb3def774eac707acbca73bbc3ff"
+  integrity sha1-GuOlDnxguz3vd06scHrLynO7w/8=
+
+tween-one@^1.0.52:
+  version "1.0.52"
+  resolved "https://registry.nlark.com/tween-one/download/tween-one-1.0.52.tgz#b44b5115c310df14bb19aed24a3eab49c79fe0a3"
+  integrity sha1-tEtRFcMQ3xS7Ga7SSj6rScef4KM=
+  dependencies:
+    "@babel/runtime" "^7.11.1"
+    flubber "^0.4.2"
+    raf "^3.4.1"
+    style-utils "^0.3.0"
+    svg-path-properties "^1.0.4"
+    tween-functions "^1.2.0"
+
 tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   version "0.14.5"
   resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"