修复了cookie的bug，基本完成上线

package.json

@@ -14,6 +14,7 @@
     "axios": "^0.21.4",
     "craco-less": "^1.20.0",
     "crypto-js": "^4.1.1",
+    "js-cookie": "^3.0.1",
     "js-file-download": "^0.4.12",
     "jsencrypt": "2.3.1",
     "qs": "^6.10.1",
@@ -50,5 +51,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "homepage": "http://cloud.shellmiao.com/"
 }

src/components/Forms/LoginForm.js

@@ -4,6 +4,7 @@ import {apiLogin} from "../../services/API/API";
 import {LockOutlined, UserOutlined} from "@ant-design/icons";
 import './UserForm.less'
 import deleteCookie from "../../utils/deleteCookie";
+import Cookies from 'js-cookie'
 import getCookie from "../../utils/getCookie";
 
 class LoginForm extends Component {
@@ -16,8 +17,12 @@ class LoginForm extends Component {
             if (res.data.code === 200) {
                 message.success('登陆成功');
                 this.props.handleLogged()
+                Cookies.remove('username')
+                Cookies.remove('token')
                 deleteCookie()
-                document.cookie = 'token=' + res.data.token
+                Cookies.set('username', params.username)
+                Cookies.set('token', res.data.token)
+                console.log(document.cookie)
             } else if (res.data.code === 303) {
                 message.error('用户名或密码错误')
             }

src/components/Forms/LogoutForm.js

@@ -24,12 +24,19 @@ class LogoutForm extends Component {
         })
     };
 
+    clickButton = () => {
+        let e = document.createEvent('MouseEvents');
+        e.initEvent('click', true, true)
+        document.getElementById('enter-link').dispatchEvent(e)
+    }
+
     render() {
         return (
             <div className={'logged-div'}>
                 <CheckCircleTwoTone className={'logged-logo'} twoToneColor="#52c41a"/>
-                <Button className={'enter-button'} size="large" type="primary" icon={<LoginOutlined />}>
-                    <Link to={'/cloud/file'} style={{color:'white'}}>
+                <Button className={'enter-button'} size="large" type="primary" icon={<LoginOutlined/>}
+                        onClick={this.clickButton}>
+                    <Link to={'/cloud/file'} style={{color: 'white'}} id={'enter-link'}>
                         &nbsp;&nbsp;&nbsp;Enter
                     </Link>
                 </Button>

src/components/Page/DiskPage.js

@@ -10,6 +10,7 @@ import UploadFileModal from "./UploadFileModal";
 import GroupModal from "./GroupModal";
 import {CopyTwoTone} from "@ant-design/icons";
 import encrypt from "../../utils/encrypt/encrypt";
+import QueueAnim from "rc-queue-anim";
 
 class DiskPage extends Component {
 
@@ -19,13 +20,17 @@ class DiskPage extends Component {
         size: 8,
         addressList: [],
         data: [],
+        haveFolder: false,
+        haveFile: false,
     }
 
     getRootFolderIdAndInter = () => {
+        console.log(document.cookie)
         let params = {
             username: getCookie('username'),
             token: getCookie('token'),
         }
+        console.log('获得参数:' + params.username + params.token)
         if (this.props.type === 'team') {
             params = {
                 group_id: this.props.group_id,
@@ -40,7 +45,6 @@ class DiskPage extends Component {
                     this.cdFolder(this.state.currentId, this.props.group_name)
                 } else if (res.data.code === 401) {
                     message.error('未登录')
-                    window.location.href = "";
                 } else if (res.data.code === 403) {
                     message.error('群不存在')
                     window.location.href = "";
@@ -59,7 +63,7 @@ class DiskPage extends Component {
                     this.cdFolder(this.state.currentId, getCookie('username'))
                 } else if (res.data.code === 401) {
                     message.error('未登录')
-                    window.location.href = "";
+                    // window.location.href = "";
                 } else {
                     message.error('错误')
                     window.location.href = "";
@@ -103,6 +107,20 @@ class DiskPage extends Component {
                     // }]
                     addressList: addressList
                 })
+                let haveFileTemp = false
+                let haveFolderTemp = false
+                res.data.children.forEach(ele => {
+                    if (ele.type === 'file') {
+                        haveFileTemp = true
+                    }
+                    if (ele.type === 'folder') {
+                        haveFolderTemp = true
+                    }
+                })
+                this.setState({
+                    haveFile: haveFileTemp,
+                    haveFolder: haveFolderTemp,
+                })
             } else if (res.data.code === 401) {
                 message.error('未登录')
                 // window.location.href = "";
@@ -140,6 +158,10 @@ class DiskPage extends Component {
         });
     }
 
+    getGroupList = () => {
+        this.props.getGroupList()
+    }
+
     render() {
         return (
             <div>
@@ -153,7 +175,8 @@ class DiskPage extends Component {
                     {this.renderBread(this.state.addressList)}
                     {
                         <div className={'group-modal'}>
-                            <GroupModal group_id={this.props.group_id} getGroupList={this.props.getGroupList}/>
+                            <GroupModal group_id={this.props.group_id}
+                                        getGroupList={this.getGroupList.bind(this)}/>
                         </div>
                     }
                 </div>
@@ -166,21 +189,23 @@ class DiskPage extends Component {
                         <UploadFileModal actionName={'Upload File'} fatherFolderId={this.state.currentId}
                                          cdFolder={this.cdFolder.bind(this)} className={'upload-file-button'}/>
                     </div>
-                    <Space className={'disk-content'} size={this.state.size} wrap>
-                        {
-                            this.state.data.length === 0 ?
-                                <div className={'no-files-div'}>
-                                    <CopyTwoTone/>
-                                    NO FILES
-                                </div>
-                                : this.renderFolderList(this.state.data)
-                        }
-                        {
-                            this.state.data.length === 0 ?
-                                null
-                                : this.renderFileList(this.state.data)
-                        }
-                    </Space>
+                    <div className={'folder-page'}>
+                        <Space className={'disk-content'} size={this.state.size} wrap>
+                            {
+                                this.state.data.length === 0 ?
+                                    <div className={'no-files-div'}>
+                                        <CopyTwoTone/>
+                                        &nbsp;&nbsp;NO&nbsp;&nbsp;FILES
+                                    </div>
+                                    : this.state.haveFolder ? this.renderFolderList(this.state.data) : null
+                            }
+                            {
+                                this.state.data.length === 0 ?
+                                    null
+                                    : this.state.haveFile ? this.renderFileList(this.state.data) : null
+                            }
+                        </Space>
+                    </div>
                 </div>
             </div>
         )
@@ -190,10 +215,7 @@ class DiskPage extends Component {
         return dataList.map((ele, index) => {
             return (
                 ele.type === 'folder' ?
-                    <div
-                        key={index}
-                        // onDoubleClick={ele.isFolder ? () => this.cdFolder(ele.Key, ele.Title) : null}
-                    >
+                    <div key={ele.folder_id + ele.folder_name + 'folder'}>
                         <Folder ele={ele}
                                 cdFolder={this.cdFolder.bind(this)}
                                 fatherFolderId={this.state.currentId}
@@ -207,7 +229,7 @@ class DiskPage extends Component {
         return dataList.map((ele, index) => {
             return (
                 ele.type === 'folder' ? null :
-                    <div>
+                    <div key={ele.file_id + ele.file_name + 'file'}>
                         <File ele={ele}
                               fatherFolderId={this.state.currentId}
                               cdFolder={this.cdFolder.bind(this)}/>

src/components/Page/DiskPage.less

@@ -27,10 +27,14 @@
   margin-top: 4vh;
 }
 
-.no-files-div{
+.no-files-div {
   font-weight: bolder;
-  font-size: 15vh;
-  margin-top: 10vh;
-  margin-left: 25vh;
+  font-size: 10vh;
+  margin-top: 15vh;
+  margin-left: 40vh;
   float: top;
+}
+
+.folder-page {
+  margin-top: 5vh;
 }

src/components/Page/File.js

@@ -1,5 +1,5 @@
 import React, {Component} from "react";
-import {FileTextTwoTone, FileTwoTone} from "@ant-design/icons";
+import {CloudDownloadOutlined, DeleteOutlined, FileTextTwoTone, FileTwoTone} from "@ant-design/icons";
 import './File.less'
 import {Button, Dropdown, Menu, message} from "antd";
 import {apiDelete, apiDownload, apiFolderList} from "../../services/API/API";
@@ -78,13 +78,13 @@ class File extends Component {
         const menu = (
             <Menu>
                 <Menu.Item key="download">
-                    <Button onClick={this.handleDownload}>
+                    <Button onClick={this.handleDownload} type="dashed" icon={<CloudDownloadOutlined />}>
                         DOWNLOAD
                     </Button>
                 </Menu.Item>
                 <Menu.Item key="delete">
-                    <Button onClick={this.handleDelete}>
-                        DELETE
+                    <Button onClick={this.handleDelete} type="dashed" icon={<DeleteOutlined />}>
+                        &nbsp;&nbsp;&nbsp;&nbsp;DELETE&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                     </Button>
                 </Menu.Item>
             </Menu>

src/components/Page/Folder.js

@@ -1,5 +1,5 @@
 import React, {Component} from "react";
-import {FolderOpenTwoTone, FolderTwoTone} from "@ant-design/icons";
+import {DeleteOutlined, FolderOpenTwoTone, FolderTwoTone, PicCenterOutlined} from "@ant-design/icons";
 import './Folder.less';
 import {Button, Dropdown, Menu, message} from "antd";
 import getCookie from "../../utils/getCookie";
@@ -56,13 +56,13 @@ class Folder extends Component {
         const menu = (
             <Menu>
                 <Menu.Item key="open">
-                    <Button onClick={this.handleOpenFolder}>
-                        OPEN
+                    <Button onClick={this.handleOpenFolder} type="dashed" icon={<PicCenterOutlined/>}>
+                        &nbsp;&nbsp;OPEN&nbsp;&nbsp;
                     </Button>
                 </Menu.Item>
                 <Menu.Item key="delete">
-                    <Button onClick={this.handleDeleteFolder}>
-                        DELETE
+                    <Button onClick={this.handleDeleteFolder} type="dashed" icon={<DeleteOutlined/>}>
+                        &nbsp;DELETE&nbsp;
                     </Button>
                 </Menu.Item>
             </Menu>

src/components/Page/GroupModal.js

@@ -1,7 +1,7 @@
 import {Modal, Button, Tabs, Form, Input, message} from 'antd';
 import React, {Component} from "react";
 import './add-folder-modal.less'
-import {SearchOutlined, UserOutlined} from "@ant-design/icons";
+import {UsergroupAddOutlined, UserOutlined} from "@ant-design/icons";
 import getCookie from "../../utils/getCookie";
 import {apiCreateGroup, apiJoinGroup, apiQuitGroup} from "../../services/API/API";
 
@@ -108,7 +108,7 @@ class GroupModal extends Component {
     render() {
         return (
             <div className={'group-modal'}>
-                <Button type="primary" shape="circle" icon={<SearchOutlined/>} onClick={this.showModal}/>
+                <Button type="primary" shape="circle" icon={<UsergroupAddOutlined/>} onClick={this.showModal}/>
                 <Modal
                     title='Join / Create Group'
                     visible={this.state.visible}
@@ -133,7 +133,7 @@ class GroupModal extends Component {
                                         rules={[{required: true, message: 'Please input Group Id!'}]}
                                     >
                                         <Input
-                                            prefix={<UserOutlined id="item-icon"/>}
+                                            prefix={<UsergroupAddOutlined id="item-icon"/>}
                                             placeholder="Group Id"
                                             size="large"
                                         />
@@ -153,7 +153,7 @@ class GroupModal extends Component {
                                         rules={[{required: true, message: 'Please input Group Name!'}]}
                                     >
                                         <Input
-                                            prefix={<UserOutlined id="item-icon"/>}
+                                            prefix={<UsergroupAddOutlined id="item-icon"/>}
                                             placeholder="Group Name"
                                             size="large"
                                         />

src/components/Page/TeamPage.js

@@ -5,6 +5,7 @@ import getCookie from "../../utils/getCookie";
 import {apiGetGroup} from "../../services/API/API";
 import './TeamPage.less'
 import GroupModal from "./GroupModal";
+import {TeamOutlined} from "@ant-design/icons";
 
 const {TabPane} = Tabs;
 
@@ -51,11 +52,11 @@ class TeamPage extends Component {
                     >
                         <TabPane tab={'User'} key={'User'}>
                             <div className={'TeamPage'}>
-                                <DiskPage type={'user'}/>
+                                <DiskPage type={'user'} getGroupList={this.getGroupList.bind(this)}/>
                             </div>
                         </TabPane>
                         {GroupList.map((ele, index) => (
-                            <TabPane tab={ele.group_name} key={ele.group_id}>
+                            <TabPane tab={ele.group_name} key={ele.group_id} closeIcon={<TeamOutlined/>}>
                                 <div className={'TeamPage'}>
                                     <DiskPage group_id={ele.group_id} group_name={ele.group_name}
                                               getGroupList={this.getGroupList.bind(this)} type={'team'}/>

src/components/Sider/MySider.js

@@ -1,8 +1,9 @@
 import React, {Component} from "react";
 import {Layout, Menu} from "antd";
-import {FolderOutlined, SettingOutlined, TeamOutlined, UserOutlined} from "@ant-design/icons";
+import {CloudServerOutlined, FolderOutlined, SettingOutlined, TeamOutlined, UserOutlined} from "@ant-design/icons";
 import {Link} from "react-router-dom";
 import './MySider.less'
+import QueueAnim from "rc-queue-anim";
 
 const {Sider} = Layout;
 const {SubMenu} = Menu;
@@ -21,12 +22,32 @@ class MySider extends Component {
         this.setState({collapsed});
     };
 
+    handleClickLogo = () => {
+        window.location.href = "";
+    }
+
     render() {
         return (
             <Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
-                <div className="logo"/>
+                <div className={'st-logo-div'} onClick={this.handleClickLogo}>
+                    <div className="st-logo">
+                        <a style={{color:'white'}}>
+                            <CloudServerOutlined/>
+                        </a>
+                        {
+                            this.state.collapsed ? null :
+                                <div className={'st-title'}>
+                                    <QueueAnim>
+                                        <div className={'st-title'} key={'st-title'}>
+                                            <a style={{color:'white'}}>&nbsp;STCloud</a>
+                                        </div>
+                                    </QueueAnim>
+                                </div>
+                        }
+                    </div>
+                </div>
                 <Menu theme="dark" defaultSelectedKeys={['file']} mode="inline" className={'sider-menu'}>
-                    <Menu.Item key="account" icon={<UserOutlined/>}>
+                    <Menu.Item key="account" icon={<UserOutlined/>} disabled={true}>
                         <Link to={'/cloud/account'}>
                             Account
                         </Link>

src/components/Sider/MySider.less

@@ -1,3 +1,26 @@
-.sider-menu{
+.sider-menu {
   margin-top: 4vh;
+}
+
+.st-logo {
+  font-size: 5vh;
+  font-weight: bolder;
+  color: white;
+  float: left;
+  margin-left: 3vh;
+  width: 20vh;
+  margin-top: 1vh;
+}
+
+.st-title {
+  font-size: 3vh;
+  font-weight: bolder;
+  float: right;
+  margin-left: 0.2vh;
+  margin-top: 0.9vh;
+}
+
+.st-logo-div {
+  height: 10vh;
+  width: 20vh;
 }

src/layouts/User/UserPage.js

@@ -1,10 +1,12 @@
 import React, {Component} from "react";
 import LoginForm from "../../components/Forms/LoginForm";
-import {Col, Tabs} from "antd";
+import {Col, message, Tabs} from "antd";
 import RegisterForm from "../../components/Forms/RegisterForm";
 import './UserPage.less'
 import ForgetPasswordForm from "../../components/Forms/ForgetPasswordForm";
 import LogoutForm from "../../components/Forms/LogoutForm";
+import getCookie from "../../utils/getCookie";
+import {apiRootFolderId} from "../../services/API/API";
 
 const {TabPane} = Tabs;
 
@@ -16,6 +18,24 @@ class UserPage extends Component {
         selectedKey: '1',
     };
 
+    componentWillMount() {
+        let params = {
+            username: getCookie('username'),
+            token: getCookie('token'),
+        }
+        apiRootFolderId(params).then(res => {
+            if (res.data.code === 200) {
+                this.setState({
+                    loginStatus: 'logged',
+                })
+            } else if (res.data.code === 401) {
+                message.error('未登录')
+            } else {
+                message.error('错误')
+            }
+        })
+    }
+
     handleLogged = () => {
         this.setState({
             loginStatus: this.state.loginStatus === 'login' ? 'logged' : 'login',

src/utils/Axios/Axios.js

@@ -4,7 +4,7 @@ import '../encrypt/rsa'
 import '../encrypt/aes'
 
 let fetch = axios.create({
-    baseURL: "http://30gz758467.51vip.biz:59173/", // 这里是本地express启动的服务地址
+    baseURL: "http://api.ignatz.xyz/", // 这里是本地express启动的服务地址
     timeout: 5000 // request timeout
 })
 // fetch.defaults.withCredentials = true

src/utils/Axios/UploadFile.js

@@ -3,7 +3,7 @@ import qs from 'qs'
 
 // 实例对象
 let instance = axios.create({
-    baseURL: "http://30gz758467.51vip.biz:59173/", // 这里是本地express启动的服务地址
+    baseURL: "http://api.ignatz.xyz/", // 这里是本地express启动的服务地址
     timeout: 5000, // request timeout
     headers: {
         // 'Content-Type': 'application/x-www-form-urlencoded'multipart/form-data

src/utils/encrypt/encrypt.js

@@ -15,7 +15,7 @@ class EncryptObj {
     cipherText = ''
 
     fetch = axios.create({
-        baseURL: "http://30gz758467.51vip.biz:59173/", // 这里是本地express启动的服务地址
+        baseURL: "http://api.ignatz.xyz/", // 这里是本地express启动的服务地址
         timeout: 5000 // request timeout
     })
 

yarn.lock

@@ -7048,6 +7048,11 @@ jest@26.6.0:
     import-local "^3.0.2"
     jest-cli "^26.6.0"
 
+js-cookie@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.nlark.com/js-cookie/download/js-cookie-3.0.1.tgz?cache=0&sync_timestamp=1630493056723&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fjs-cookie%2Fdownload%2Fjs-cookie-3.0.1.tgz#9e39b4c6c2f56563708d7d31f6f5f21873a92414"
+  integrity sha1-njm0xsL1ZWNwjX0x9vXyGHOpJBQ=
+
 js-file-download@^0.4.12:
   version "0.4.12"
   resolved "https://registry.npm.taobao.org/js-file-download/download/js-file-download-0.4.12.tgz#10c70ef362559a5b23cdbdc3bd6f399c3d91d821"