debug complete

src/components/Page/DiskPage.js

@@ -1,19 +1,18 @@
-import React, {Component} from "react";
-import {Space, Slider, message, Breadcrumb, Tooltip} from 'antd';
-import Folder from "./Folder";
-import File from "./File";
-import {apiFolderList, apiGroupRoot, apiRootFolderId} from "../../services/API/API";
-import getCookie from "../../utils/getCookie";
-import './DiskPage.less'
-import AddFolderModal from "./AddFolderModal";
-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";
+import React, { Component } from 'react';
+import { Space, Slider, message, Breadcrumb, Tooltip } from 'antd';
+import Folder from './Folder';
+import File from './File';
+import { apiFolderList, apiGroupRoot, apiRootFolderId } from '../../services/API/API';
+import getCookie from '../../utils/getCookie';
+import './DiskPage.less';
+import AddFolderModal from './AddFolderModal';
+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 {
-
     state = {
         type: this.props.type,
         currentId: -1,
@@ -22,80 +21,79 @@ class DiskPage extends Component {
         data: [],
         haveFolder: false,
         haveFile: false,
-    }
+    };
 
     getRootFolderIdAndInter = () => {
-        console.log(document.cookie)
+        console.log(document.cookie);
         let params = {
             username: getCookie('username'),
             token: getCookie('token'),
-        }
-        console.log('获得参数:' + params.username + params.token)
+        };
+        console.log('获得参数:' + params.username + params.token);
         if (this.props.type === 'team') {
             params = {
                 group_id: this.props.group_id,
-                ...params
-            }
-            apiGroupRoot(params).then(res => {
+                ...params,
+            };
+            apiGroupRoot(params).then((res) => {
                 if (res.data.code === 200) {
-                    console.log('成功')
+                    console.log('成功');
                     this.setState({
                         currentId: res.data.root_folder_id,
-                    })
-                    this.cdFolder(this.state.currentId, this.props.group_name)
+                    });
+                    this.cdFolder(this.state.currentId, this.props.group_name);
                 } else if (res.data.code === 401) {
-                    message.error('未登录')
+                    message.error('未登录');
                 } else if (res.data.code === 403) {
-                    message.error('群不存在')
-                    window.location.href = "";
+                    message.error('群不存在');
+                    window.location.href = '';
                 } else {
-                    message.error('错误')
-                    window.location.href = "";
+                    message.error('错误');
+                    window.location.href = '';
                 }
-            })
+            });
         } else {
-            apiRootFolderId(params).then(res => {
+            apiRootFolderId(params).then((res) => {
                 if (res.data.code === 200) {
-                    console.log('成功')
+                    console.log('成功');
                     this.setState({
                         currentId: res.data.root_folder_id,
-                    })
-                    this.cdFolder(this.state.currentId, getCookie('username'))
+                    });
+                    this.cdFolder(this.state.currentId, getCookie('username'));
                 } else if (res.data.code === 401) {
-                    message.error('未登录')
+                    message.error('未登录');
                     // window.location.href = "";
                 } else {
-                    message.error('错误')
-                    window.location.href = "";
+                    message.error('错误');
+                    window.location.href = '';
                 }
-            })
+            });
         }
-    }
-
+    };
 
     cdFolder = (FolderId, FolderName) => {
-        console.log('正在进入' + FolderId)
+        console.log('正在进入' + FolderId);
         let params = {
             username: getCookie('username'),
             token: getCookie('token'),
-            folder_id: FolderId
-        }
-        apiFolderList(params).then(res => {
-            let addressList = this.state.addressList
-            let temp = -1
+            folder_id: FolderId,
+        };
+        apiFolderList(params).then((res) => {
+            let addressList = this.state.addressList;
+            let temp = -1;
             for (let i = 0; i < addressList.length; i++) {
                 if (addressList[i].id === FolderId) {
-                    temp = i
-                    break
+                    temp = i;
+                    break;
                 }
             }
             if (temp === -1) {
                 addressList.push({
                     name: FolderName,
-                    id: FolderId
-                })
+                    id: FolderId,
+                });
             } else {
-                addressList.splice(temp + 1, addressList.length - temp - 1)
+                addressList.splice(temp + 1, addressList.length - temp - 1);
             }
             if (res.data.code === 200) {
                 this.setState({
@@ -105,60 +103,54 @@ class DiskPage extends Component {
                     //     name: FolderName,
                     //     id: FolderId
                     // }]
-                    addressList: addressList
-                })
-                let haveFileTemp = false
-                let haveFolderTemp = false
-                res.data.children.forEach(ele => {
+                    addressList: addressList,
+                });
+                let haveFileTemp = false;
+                let haveFolderTemp = false;
+                res.data.children.forEach((ele) => {
                     if (ele.type === 'file') {
-                        haveFileTemp = true
+                        haveFileTemp = true;
                     }
                     if (ele.type === 'folder') {
-                        haveFolderTemp = true
+                        haveFolderTemp = true;
                     }
-                })
+                });
                 this.setState({
                     haveFile: haveFileTemp,
                     haveFolder: haveFolderTemp,
-                })
+                });
             } else if (res.data.code === 401) {
-                message.error('未登录')
+                message.error('未登录');
                 // window.location.href = "";
             } else {
-                message.error('错误')
+                message.error('错误');
                 // window.location.href = "";
             }
-        })
-    }
+        });
+    };
 
     componentWillMount() {
-        this.getRootFolderIdAndInter()
+        this.getRootFolderIdAndInter();
     }
 
-    componentDidMount() {
-
-    }
+    componentDidMount() {}
 
-    setSize = size => {
+    setSize = (size) => {
         this.setState({
-            size: size
-        })
-    }
+            size: size,
+        });
+    };
 
     renderBread(addressList) {
         return addressList.map((ele, index) => {
-            return (
-                this.props.type === 'team' ? <Tooltip title={'Current Group ID : ' + this.props.group_id}>
-                    <Breadcrumb.Item
-                        key={ele.name}
-                        className="breadcrumb-line"
-                        onClick={(ev) => this.cdFolder(ele.id, ele.name)}>
+            return this.props.type === 'team' ? (
+                <Tooltip title={'Current Group ID : ' + this.props.group_id}>
+                    <Breadcrumb.Item key={ele.name} className="breadcrumb-line" onClick={(ev) => this.cdFolder(ele.id, ele.name)}>
                         <a>{ele.name}</a>
                     </Breadcrumb.Item>
-                </Tooltip> : <Breadcrumb.Item
-                    key={ele.name}
-                    className="breadcrumb-line"
-                    onClick={(ev) => this.cdFolder(ele.id, ele.name)}>
+                </Tooltip>
+            ) : (
+                <Breadcrumb.Item key={ele.name} className="breadcrumb-line" onClick={(ev) => this.cdFolder(ele.id, ele.name)}>
                     <a>{ele.name}</a>
                 </Breadcrumb.Item>
             );
@@ -166,84 +158,66 @@ class DiskPage extends Component {
     }
 
     getGroupList = () => {
-        this.props.getGroupList()
-    }
+        if (this.props.getGroupList) {
+            this.props.getGroupList();
+        }
+    };
 
     render() {
         return (
             <div>
                 <div className={'disk-header'}>
-                    <Breadcrumb.Item
-                        key={'root'}
-                        className="breadcrumb-line"
-                    >
-                        >
-                    </Breadcrumb.Item>
+                    <Breadcrumb.Item key={'root'} className="breadcrumb-line"></Breadcrumb.Item>
                     {this.renderBread(this.state.addressList)}
                     {
                         <div className={'group-modal'}>
-                            <GroupModal group_id={this.props.group_id}
-                                        getGroupList={this.getGroupList.bind(this)}/>
+                            <GroupModal group_id={this.props.group_id} getGroupList={this.getGroupList.bind(this)} />
                         </div>
                     }
                 </div>
-                <div className="site-layout-background" style={{marginTop: 10, padding: 24, minHeight: '82vh'}}>
+                <div className="site-layout-background" style={{ marginTop: 10, padding: 24, minHeight: '82vh' }}>
                     <div>
-                        <Slider value={this.state.size} onChange={value => this.setSize(value)}
-                                className={'disk-slider'}/>
-                        <AddFolderModal actionName={'Add Folder'} fatherFolderId={this.state.currentId}
-                                        cdFolder={this.cdFolder.bind(this)} className={'add-folder-button'}/>
-                        <UploadFileModal actionName={'Upload File'} fatherFolderId={this.state.currentId}
-                                         cdFolder={this.cdFolder.bind(this)} className={'upload-file-button'}/>
+                        <Slider value={this.state.size} onChange={(value) => this.setSize(value)} className={'disk-slider'} />
+                        <AddFolderModal actionName={'Add Folder'} fatherFolderId={this.state.currentId} cdFolder={this.cdFolder.bind(this)} className={'add-folder-button'} />
+                        <UploadFileModal actionName={'Upload File'} fatherFolderId={this.state.currentId} cdFolder={this.cdFolder.bind(this)} className={'upload-file-button'} />
                     </div>
                     <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
-                            }
+                            {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>
-        )
+        );
     }
 
     renderFolderList(dataList) {
         return dataList.map((ele, index) => {
-            return (
-                ele.type === 'folder' ?
-                    <div key={ele.folder_id + ele.folder_name + 'folder'}>
-                        <Folder ele={ele}
-                                cdFolder={this.cdFolder.bind(this)}
-                                fatherFolderId={this.state.currentId}
-                        />
-                    </div> : null
-            );
+            return ele.type === 'folder' ? (
+                <div key={ele.folder_id + ele.folder_name + 'folder'}>
+                    <Folder ele={ele} cdFolder={this.cdFolder.bind(this)} fatherFolderId={this.state.currentId} />
+                </div>
+            ) : null;
         });
     }
 
     renderFileList(dataList) {
         return dataList.map((ele, index) => {
-            return (
-                ele.type === 'folder' ? null :
-                    <div key={ele.file_id + ele.file_name + 'file'}>
-                        <File ele={ele}
-                              fatherFolderId={this.state.currentId}
-                              cdFolder={this.cdFolder.bind(this)}/>
-                    </div>
+            return ele.type === 'folder' ? null : (
+                <div key={ele.file_id + ele.file_name + 'file'}>
+                    <File ele={ele} fatherFolderId={this.state.currentId} cdFolder={this.cdFolder.bind(this)} />
+                </div>
             );
         });
     }
 }
 
-export default DiskPage;
+export default DiskPage;

src/components/Page/File.js

@@ -1,124 +1,125 @@
-import React, {Component} from "react";
-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";
-import getCookie from "../../utils/getCookie";
-import {dataURLtoFile} from "../../utils/base64ToFile";
+import React, { Component } from 'react';
+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';
+import getCookie from '../../utils/getCookie';
+import { dataURLtoFile } from '../../utils/base64ToFile';
 
 const fileDownload = require('js-file-download');
 
 class File extends Component {
     state = {
-        isOver: false
-    }
+        isOver: false,
+    };
     onMouseOver = () => {
         this.setState({
-            isOver: true
-        })
-    }
+            isOver: true,
+        });
+    };
     onMouseOut = () => {
         this.setState({
-            isOver: false
-        })
-    }
+            isOver: false,
+        });
+    };
 
     handleDownload = () => {
+        console.log('下载');
         let params = {
             username: getCookie('username'),
             token: getCookie('token'),
             file_id: this.props.ele.file_id,
-        }
-        apiDownload(params).then(res => {
+        };
+        apiDownload(params).then((res) => {
+            console.log('下载');
             if (res.data.code === 401) {
-                message.error('未登录')
-                window.location.href = "";
+                message.error('未登录');
+                window.location.href = '';
             } else if (res.data.code === 402) {
-                message.error('文件不存在')
+                message.error('文件不存在');
                 // window.location.href = "";
             } else if (res.data.code === 404) {
-                message.error('没有下载文件的权限')
+                message.error('没有下载文件的权限');
                 // window.location.href = "";
             } else {
                 message.success('下载开始');
-                console.log(res.data.file_b64)
-                let file_b = dataURLtoFile(res.data.file_b64, this.props.ele.file_name)
-                fileDownload(file_b, this.props.ele.file_name)
+                console.log('下载开始');
+                console.log(res.data.file_b64);
+                if (res.data.file_b64) {
+                    let file_b = dataURLtoFile(res.data.file_b64, this.props.ele.file_name);
+                    fileDownload(file_b, this.props.ele.file_name);
+                } else {
+                    let file_b = dataURLtoFile(res.data, this.props.ele.file_name);
+                    fileDownload(file_b, this.props.ele.file_name);
+                }
+
                 // window.location.href = "";
             }
-        })
-    }
+        });
+    };
 
     handleDelete = () => {
         let params = {
             username: getCookie('username'),
             token: getCookie('token'),
             file_id: this.props.ele.file_id,
-        }
-        apiDelete(params).then(res => {
+        };
+        apiDelete(params).then((res) => {
             if (res.data.code === 200) {
                 message.success('删除成功');
-                this.props.cdFolder(this.props.fatherFolderId)
+                this.props.cdFolder(this.props.fatherFolderId);
             } else if (res.data.code === 401) {
-                message.error('未登录')
-                window.location.href = "";
+                message.error('未登录');
+                window.location.href = '';
             } else if (res.data.code === 402) {
-                message.error('文件不存在')
+                message.error('文件不存在');
                 // window.location.href = "";
             } else if (res.data.code === 404) {
-                message.error('没有删除文件的权限')
+                message.error('没有删除文件的权限');
                 // window.location.href = "";
             } else {
-                message.error('错误')
+                message.error('错误');
                 // window.location.href = "";
             }
-        })
-    }
+        });
+    };
 
     render() {
-        let {isOver} = this.state
-        const ele = this.props.ele
+        let { isOver } = this.state;
+        const ele = this.props.ele;
         const menu = (
             <Menu>
                 <Menu.Item key="download">
-                    <Button onClick={this.handleDownload} type="dashed" icon={<CloudDownloadOutlined/>}>
+                    <Button onClick={this.handleDownload} type="dashed" icon={<CloudDownloadOutlined />}>
                         DOWNLOAD
                     </Button>
                 </Menu.Item>
                 <Menu.Item key="delete">
-                    <Button onClick={this.handleDelete} type="dashed" icon={<DeleteOutlined/>}>
+                    <Button onClick={this.handleDelete} type="dashed" icon={<DeleteOutlined />}>
                         &nbsp;&nbsp;&nbsp;&nbsp;DELETE&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                     </Button>
                 </Menu.Item>
             </Menu>
         );
         return (
-            <div className={'file' + (isOver ? '-over' : '')} onMouseEnter={this.onMouseOver}
-                 onMouseLeave={this.onMouseOut}>
-                {
-                    isOver ? <div className={'file-options'}>
+            <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()}>
+                            <a className="dropdown-link" onClick={(e) => e.preventDefault()}>
                                 &nbsp;·&nbsp;·&nbsp;·&nbsp;
                             </a>
                         </Dropdown>
-                    </div> : <div>
-
                     </div>
-                }
-                {
-                    isOver ? <FileTextTwoTone className={'file-logo'} twoToneColor="#71B8FB"/> :
-                        <FileTwoTone className={'file-logo'} twoToneColor="#71B8FB"/>
-                }
-                <div className={'file-name'}>
-                    {ele.file_name}
-                </div>
-                <div className={'file-date'}>
-                    {ele.update_time.substring(0, 10)}
-                </div>
+                ) : (
+                    <div></div>
+                )}
+                {isOver ? <FileTextTwoTone className={'file-logo'} twoToneColor="#71B8FB" /> : <FileTwoTone className={'file-logo'} twoToneColor="#71B8FB" />}
+                <div className={'file-name'}>{ele.file_name}</div>
+                <div className={'file-date'}>{ele.update_time.substring(0, 10)}</div>
             </div>
-        )
+        );
     }
 }
 
-export default File;
+export default File;

src/components/Page/GroupModal.js

@@ -1,105 +1,107 @@
-import {Modal, Button, Tabs, Form, Input, message, Tooltip} from 'antd';
-import React, {Component} from "react";
-import './add-folder-modal.less'
-import {UsergroupAddOutlined, UserOutlined} from "@ant-design/icons";
-import getCookie from "../../utils/getCookie";
-import {apiCreateGroup, apiJoinGroup, apiQuitGroup} from "../../services/API/API";
+import { Modal, Button, Tabs, Form, Input, message, Tooltip } from 'antd';
+import React, { Component } from 'react';
+import './add-folder-modal.less';
+import { UsergroupAddOutlined, UserOutlined } from '@ant-design/icons';
+import getCookie from '../../utils/getCookie';
+import { apiCreateGroup, apiJoinGroup, apiQuitGroup } from '../../services/API/API';
+import { notification } from 'antd';
 
-const {TabPane} = Tabs;
+const { TabPane } = Tabs;
 
 class GroupModal extends Component {
     state = {
         visible: false,
-    }
+    };
 
     showModal = () => {
         this.setState({
-            visible: true
-        })
-    }
+            visible: true,
+        });
+    };
 
-    setVisible = visible => {
+    setVisible = (visible) => {
         this.setState({
-            visible: visible
-        })
-    }
+            visible: visible,
+        });
+    };
 
     handleOk = () => {
-        this.Child.clickButton()
+        this.Child.clickButton();
         setTimeout(() => {
             this.setVisible(false);
         }, 1000);
     };
 
-    handleJoinGroup = values => {
+    handleJoinGroup = (values) => {
         let params = {
             username: getCookie('username'),
             token: getCookie('token'),
-            ...values
-        }
-        apiJoinGroup(params).then(res => {
+            ...values,
+        };
+        apiJoinGroup(params).then((res) => {
             if (res.data.code === 200) {
                 message.success('加入成功');
-                this.props.getGroupList()
-                this.handleCancel()
+                this.props.getGroupList();
+                this.handleCancel();
             } else if (res.data.code === 401) {
-                message.error('未登录')
-                window.location.href = "";
+                message.error('未登录');
+                window.location.href = '';
             } else if (res.data.code === 402) {
-                message.error('你已在群内')
+                message.error('你已在群内');
             } else if (res.data.code === 403) {
-                message.error('该群不存在')
+                message.error('该群不存在');
             } else {
-                message.error('错误')
+                message.error('错误');
             }
-        })
-    }
+        });
+    };
 
-    handleCreateGroup = values => {
+    handleCreateGroup = (values) => {
         let params = {
             username: getCookie('username'),
             token: getCookie('token'),
-            ...values
-        }
-        apiCreateGroup(params).then(res => {
+            ...values,
+        };
+        apiCreateGroup(params).then((res) => {
             if (res.data.code === 200) {
                 message.success('建群成功');
-                this.props.getGroupList()
-                this.handleCancel()
+                console.log(res.data);
+                this.props.getGroupList();
+                this.handleCancel();
             } else if (res.data.code === 401) {
-                message.error('未登录')
-                window.location.href = "";
+                message.error('未登录');
+                window.location.href = '';
             } else if (res.data.code === 500) {
-                message.error('新建失败')
+                message.error('新建失败');
             } else {
-                message.error('错误')
+                message.error('错误');
             }
-        })
-    }
+        });
+    };
 
     handleQuitGroup = () => {
         let params = {
             username: getCookie('username'),
             token: getCookie('token'),
             group_id: this.props.group_id,
-        }
-        apiQuitGroup(params).then(res => {
+        };
+        apiQuitGroup(params).then((res) => {
             if (res.data.code === 200) {
                 message.success('退出成功');
-                this.props.getGroupList()
-                this.handleCancel()
+                this.props.getGroupList();
+                this.handleCancel();
             } else if (res.data.code === 401) {
-                message.error('未登录')
-                window.location.href = "";
+                message.error('未登录');
+                window.location.href = '';
             } else if (res.data.code === 403) {
-                message.error('该群不存在')
+                message.error('该群不存在');
             } else if (res.data.code === 421) {
-                message.error('群主不可退群')
+                message.error('群主不可退群');
             } else {
-                message.error('错误')
+                message.error('错误');
             }
-        })
-    }
+        });
+    };
 
     handleCancel = () => {
         this.setVisible(false);
@@ -108,85 +110,53 @@ class GroupModal extends Component {
     render() {
         return (
             <div className={'group-modal'}>
-                <Button type="primary" shape="circle" icon={<UsergroupAddOutlined/>} onClick={this.showModal}/>
-                <Modal
-                    title='Join / Create Group'
-                    visible={this.state.visible}
-                    footer={null}
-                    onCancel={this.handleCancel}
-                >
+                <Button type="primary" shape="circle" icon={<UsergroupAddOutlined />} onClick={this.showModal} />
+                <Modal title="Join / Create Group" visible={this.state.visible} footer={null} onCancel={this.handleCancel}>
                     <div>
-                        <Tabs
-                            defaultActiveKey="1"
-                            size={'large'}
-                            animated={true}
-                            centered={true}
-                            tabBarGutter={50}
-                        >
-                            <TabPane
-                                tab='Join'
-                                key="1"
-                                style={{padding: "20px 30px 10px"}}>
-                                <Form onFinish={this.handleJoinGroup} initialValues={{remember: true}}>
-                                    <Form.Item
-                                        name="group_id"
-                                        rules={[{required: true, message: 'Please input Group Id!'}]}
-                                    >
-                                        <Input
-                                            prefix={<UsergroupAddOutlined id="item-icon"/>}
-                                            placeholder="Group Id"
-                                            size="large"
-                                        />
+                        <Tabs defaultActiveKey="1" size={'large'} animated={true} centered={true} tabBarGutter={50}>
+                            <TabPane tab="Join" key="1" style={{ padding: '20px 30px 10px' }}>
+                                <Form onFinish={this.handleJoinGroup} initialValues={{ remember: true }}>
+                                    <Form.Item name="group_id" rules={[{ required: true, message: 'Please input Group Id!' }]}>
+                                        <Input prefix={<UsergroupAddOutlined id="item-icon" />} placeholder="Group Id" size="large" />
                                     </Form.Item>
-                                    <Form.Item style={{marginBottom: '10px'}}>
+                                    <Form.Item style={{ marginBottom: '10px' }}>
                                         {
-                                            <Button size="large" type="primary" htmlType="submit"
-                                                    style={{width: '100%',}}>
+                                            <Button size="large" type="primary" htmlType="submit" style={{ width: '100%' }}>
                                                 Join
                                             </Button>
                                         }
                                     </Form.Item>
                                 </Form>
                             </TabPane>
-                            <TabPane tab="Create" key="2" style={{padding: "20px 30px 0"}}>
-                                <Form onFinish={this.handleCreateGroup} initialValues={{remember: true}}>
-                                    <Form.Item
-                                        name="group_name"
-                                        rules={[{required: true, message: 'Please input Group Name!'}]}
-                                    >
-                                        <Input
-                                            prefix={<UsergroupAddOutlined id="item-icon"/>}
-                                            placeholder="Group Name"
-                                            size="large"
-                                        />
+                            <TabPane tab="Create" key="2" style={{ padding: '20px 30px 0' }}>
+                                <Form onFinish={this.handleCreateGroup} initialValues={{ remember: true }}>
+                                    <Form.Item name="group_name" rules={[{ required: true, message: 'Please input Group Name!' }]}>
+                                        <Input prefix={<UsergroupAddOutlined id="item-icon" />} placeholder="Group Name" size="large" />
                                     </Form.Item>
-                                    <Form.Item style={{marginBottom: '10px'}}>
-                                        <Button size="large" type="primary" htmlType="submit"
-                                                style={{width: '100%',}}>
+                                    <Form.Item style={{ marginBottom: '10px' }}>
+                                        <Button size="large" type="primary" htmlType="submit" style={{ width: '100%' }}>
                                             Create
                                         </Button>
                                     </Form.Item>
                                 </Form>
                             </TabPane>
-                            {
-                                this.props.group_id ? <TabPane tab="Quit" key="3" style={{padding: "20px 30px 0"}}>
-                                    <Form onFinish={this.handleQuitGroup}
-                                          initialValues={{remember: true}}>
-                                        <Form.Item style={{marginBottom: '10px'}}>
-                                            <Button size="large" type="primary" htmlType="submit"
-                                                    style={{width: '100%',}}>
+                            {this.props.group_id ? (
+                                <TabPane tab="Quit" key="3" style={{ padding: '20px 30px 0' }}>
+                                    <Form onFinish={this.handleQuitGroup} initialValues={{ remember: true }}>
+                                        <Form.Item style={{ marginBottom: '10px' }}>
+                                            <Button size="large" type="primary" htmlType="submit" style={{ width: '100%' }}>
                                                 Quit Group
                                             </Button>
                                         </Form.Item>
                                     </Form>
-                                </TabPane> : null
-                            }
+                                </TabPane>
+                            ) : null}
                         </Tabs>
                     </div>
                 </Modal>
             </div>
-        )
+        );
     }
 }
 
-export default GroupModal;
+export default GroupModal;

src/components/Page/TeamPage.js

@@ -1,13 +1,13 @@
-import React, {Component} from "react";
-import DiskPage from "./DiskPage";
-import {message, Tabs} from "antd";
-import getCookie from "../../utils/getCookie";
-import {apiGetGroup} from "../../services/API/API";
-import './TeamPage.less'
-import GroupModal from "./GroupModal";
-import {TeamOutlined} from "@ant-design/icons";
+import React, { Component } from 'react';
+import DiskPage from './DiskPage';
+import { message, Tabs } from 'antd';
+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;
+const { TabPane } = Tabs;
 
 class TeamPage extends Component {
     state = {
@@ -15,51 +15,47 @@ class TeamPage extends Component {
         size: 8,
         GroupList: [],
         data: [],
-    }
+    };
 
     componentWillMount() {
-        this.getGroupList()
+        this.getGroupList();
     }
 
     getGroupList = () => {
         let params = {
             username: getCookie('username'),
             token: getCookie('token'),
-        }
-        apiGetGroup(params).then(res => {
+        };
+        apiGetGroup(params).then((res) => {
             if (res.data.code === 200) {
-                console.log('成功')
+                console.log('成功');
                 this.setState({
                     GroupList: res.data.group_list,
-                })
+                });
             } else if (res.data.code === 401) {
-                message.error('未登录')
-                window.location.href = "";
+                message.error('未登录');
+                window.location.href = '';
             } else {
-                message.error('错误')
+                message.error('错误');
             }
-        })
-    }
+        });
+    };
 
     render() {
-        const {GroupList} = this.state
+        const { GroupList } = this.state;
         return (
             <div className={'TeamDiv'}>
                 <div className={'TeamsTags'}>
-                    <Tabs
-                        tabPosition='right'
-                        centered={true}
-                    >
+                    <Tabs tabPosition="right" centered={true}>
                         <TabPane tab={'User'} key={'User'}>
                             <div className={'TeamPage'}>
-                                <DiskPage type={'user'} getGroupList={this.getGroupList.bind(this)}/>
+                                <DiskPage type={'user'} getGroupList={this.getGroupList.bind(this)} />
                             </div>
                         </TabPane>
                         {GroupList.map((ele, index) => (
-                            <TabPane tab={ele.group_name} key={ele.group_id} closeIcon={<TeamOutlined/>}>
+                            <TabPane tab={ele.group_name + '[' + ele.group_id + ']'} 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'}/>
+                                    <DiskPage group_id={ele.group_id} group_name={ele.group_name} getGroupList={this.getGroupList.bind(this)} type={'team'} />
                                 </div>
                             </TabPane>
                         ))}
@@ -70,4 +66,4 @@ class TeamPage extends Component {
     }
 }
 
-export default TeamPage;
+export default TeamPage;

src/services/API/API.js

@@ -1,185 +1,187 @@
-import Qs from 'qs'
-import instance from "../../utils/Axios/UploadFile";
-import EncryptObj from "../../utils/encrypt/encrypt";
-import fetch from "../../utils/Axios/Axios";
+import Qs from 'qs';
+import instance from '../../utils/Axios/UploadFile';
+import EncryptObj from '../../utils/encrypt/encrypt';
+import fetch from '../../utils/Axios/Axios';
 
 // example 获取数据json模拟
 export function apiRegister(params) {
-    let encryptobj = new EncryptObj()
+    let encryptobj = new EncryptObj();
     return encryptobj.postData({
         url: '/account/register/',
         method: 'post',
         data: Qs.stringify(params),
-    })
+    });
 }
 
 // 登录校验
 export function apiLogin(params) {
-    let encryptobj = new EncryptObj()
+    let encryptobj = new EncryptObj();
     return encryptobj.postData({
         url: '/account/login/',
         method: 'post',
         data: Qs.stringify(params),
-    })
+    });
 }
 
 export function apiIsLogged() {
-    let encryptobj = new EncryptObj()
+    let encryptobj = new EncryptObj();
     return encryptobj.postData({
         url: '/profile/islogged/',
         method: 'get',
-    })
+    });
 }
 
 export function apiLogout(params) {
-    let encryptobj = new EncryptObj()
+    let encryptobj = new EncryptObj();
     return encryptobj.postData({
         url: '/account/logout/',
         method: 'post',
         data: Qs.stringify(params),
-    })
+    });
 }
 
 export function apiRootFolderId(params) {
-    let encryptobj = new EncryptObj()
+    let encryptobj = new EncryptObj();
     return encryptobj.postData({
         url: '/folder/get_root_folder/',
         method: 'post',
         data: Qs.stringify(params),
-    })
+    });
 }
 
 export function apiFolderList(params) {
-    let encryptobj = new EncryptObj()
+    let encryptobj = new EncryptObj();
     return encryptobj.postData({
         url: '/folder/folder_list/',
         method: 'post',
         data: Qs.stringify(params),
-    })
+    });
 }
 
 export function apiAddFolder(params) {
-    let encryptobj = new EncryptObj()
+    let encryptobj = new EncryptObj();
     return encryptobj.postData({
         url: '/folder/add_folder/',
         method: 'post',
         data: Qs.stringify(params),
-    })
+    });
 }
 
 export function apiUploadFile(params) {
-    console.log(params.get('username'))
+    console.log(params.get('username'));
     return instance({
         url: '/file/upload_file/',
         method: 'post',
         data: params,
-    })
+    });
 }
 
 export function apiGetGroup(params) {
-    let encryptobj = new EncryptObj()
+    let encryptobj = new EncryptObj();
     return encryptobj.postData({
         url: '/group/group_list/',
         method: 'post',
         data: Qs.stringify(params),
-    })
+    });
 }
 
 export function apiJoinGroup(params) {
-    let encryptobj = new EncryptObj()
+    let encryptobj = new EncryptObj();
     return encryptobj.postData({
         url: '/group/join_group/',
         method: 'post',
         data: Qs.stringify(params),
-    })
+    });
 }
 
 export function apiCreateGroup(params) {
-    let encryptobj = new EncryptObj()
+    let encryptobj = new EncryptObj();
     return encryptobj.postData({
         url: '/group/create_group/',
         method: 'post',
         data: Qs.stringify(params),
-    })
+    });
 }
 
 export function apiGroupRoot(params) {
-    let encryptobj = new EncryptObj()
+    let encryptobj = new EncryptObj();
     return encryptobj.postData({
         url: '/group/get_group_root_folder/',
         method: 'post',
         data: Qs.stringify(params),
-    })
+    });
 }
 
 export function apiConfirm(params) {
-    let encryptobj = new EncryptObj()
+    let encryptobj = new EncryptObj();
     return encryptobj.postData({
         url: '/account/check_token/',
         method: 'post',
         data: Qs.stringify(params),
-    })
+    });
 }
 
 export function apiCheck(params) {
-    let encryptobj = new EncryptObj()
+    let encryptobj = new EncryptObj();
     return encryptobj.postData({
         url: '/account/send_email_verification_code/',
         method: 'post',
         data: Qs.stringify(params),
-    })
+    });
 }
 
 export function apiReset(params) {
-    let encryptobj = new EncryptObj()
+    let encryptobj = new EncryptObj();
     return encryptobj.postData({
         url: '/account/reset_password/',
         method: 'post',
         data: Qs.stringify(params),
-    })
+    });
 }
 
 export function apiDownload(params) {
-    let encryptobj = new EncryptObj()
+    let encryptobj = new EncryptObj();
+    console.log('2333');
+    console.log(encryptobj.cipherText);
     return encryptobj.postData({
         url: '/file/download_file/',
         method: 'post',
         data: Qs.stringify(params),
-    })
+    });
 }
 
 export function apiDelete(params) {
-    let encryptobj = new EncryptObj()
+    let encryptobj = new EncryptObj();
     return encryptobj.postData({
         url: '/file/delete_file/',
         method: 'post',
         data: Qs.stringify(params),
-    })
+    });
 }
 
 export function apiDeleteFolder(params) {
-    let encryptobj = new EncryptObj()
+    let encryptobj = new EncryptObj();
     return encryptobj.postData({
         url: '/folder/delete_folder/',
         method: 'post',
         data: Qs.stringify(params),
-    })
+    });
 }
 
 export function apiQuitGroup(params) {
-    let encryptobj = new EncryptObj()
+    let encryptobj = new EncryptObj();
     return encryptobj.postData({
         url: '/group/quit_group/',
         method: 'post',
         data: Qs.stringify(params),
-    })
+    });
 }
 
 export function apiUpload(params) {
-    let encryptobj = new EncryptObj()
+    let encryptobj = new EncryptObj();
     return encryptobj.postData({
         url: '/file/upload_file/',
         method: 'post',
         data: Qs.stringify(params),
-    })
-}
+    });
+}

src/utils/Axios/Axios.js

@@ -1,40 +1,46 @@
-import axios from 'axios'
-import qs from 'qs'
-import '../encrypt/rsa'
-import '../encrypt/aes'
+import axios from 'axios';
+import qs from 'qs';
+import '../encrypt/rsa';
+import '../encrypt/aes';
 
 let fetch = axios.create({
-    baseURL: "http://api.ignatz.xyz/", // 这里是本地express启动的服务地址
+    baseURL: 'http://127.0.0.1:2333/', // 这里是本地express启动的服务地址
     // timeout: 5000 // request timeout
-})
+});
 // fetch.defaults.withCredentials = true
-fetch.interceptors.request.use(config => {
-    config.headers['X-Requested-With'] = 'XMLHttpRequest'
-    // let regex = /.*csrftoken=([^;.]*).*$/
-    // config.headers['X-CSRFToken'] = document.cookie.match(regex) === null ? null : document.cookie.match(regex)[1]
-    if (config.method === 'post' || config.method === 'put' || config.method === 'delete') {
-        if (typeof (config.data) !== 'string' && config.headers['Content-Type'] !== 'multipart/form-data') {
-            config.data = qs.stringify(config.data)
+fetch.interceptors.request.use(
+    (config) => {
+        config.headers['X-Requested-With'] = 'XMLHttpRequest';
+        // let regex = /.*csrftoken=([^;.]*).*$/
+        // config.headers['X-CSRFToken'] = document.cookie.match(regex) === null ? null : document.cookie.match(regex)[1]
+        if (config.method === 'post' || config.method === 'put' || config.method === 'delete') {
+            if (typeof config.data !== 'string' && config.headers['Content-Type'] !== 'multipart/form-data') {
+                config.data = qs.stringify(config.data);
+            }
         }
+        return config;
+    },
+    (error) => {
+        Promise.reject(error);
     }
-    return config
-}, error => {
-    Promise.reject(error)
-})
+);
 
-fetch.interceptors.response.use(async data => {
-    return data
-}, error => {
-    if (error.response) {
-        if (error.response.status === 500) {
-            console.log('服务器错误，请联系管理员处理')
+fetch.interceptors.response.use(
+    async (data) => {
+        return data;
+    },
+    (error) => {
+        if (error.response) {
+            if (error.response.status === 500) {
+                console.log('服务器错误，请联系管理员处理');
+            }
+            console.log('1服务器错误，请联系管理员处理');
+            return Promise.reject(error.response.data);
+        } else {
+            console.log('2服务器错误，请联系管理员处理');
+            return Promise.reject(error);
         }
-        console.log('1服务器错误，请联系管理员处理')
-        return Promise.reject(error.response.data)
-    } else {
-        console.log('2服务器错误，请联系管理员处理')
-        return Promise.reject(error)
     }
-})
+);
 
-export default fetch
+export default fetch;

src/utils/Axios/UploadFile.js

@@ -1,23 +1,23 @@
-import axios from 'axios'
-import qs from 'qs'
+import axios from 'axios';
+import qs from 'qs';
 
 // 实例对象
 let instance = axios.create({
-    baseURL: "http://api.ignatz.xyz/", // 这里是本地express启动的服务地址
+    baseURL: 'http://127.0.0.1:2333/', // 这里是本地express启动的服务地址
     // timeout: 5000, // request timeout
     headers: {
         // 'Content-Type': 'application/x-www-form-urlencoded'multipart/form-data
-        'Content-Type': 'multipart/form-data;charset=UTF-8'
-    }
-})
+        'Content-Type': 'multipart/form-data;charset=UTF-8',
+    },
+});
 
 // 请求拦截器
 instance.interceptors.request.use(
-    config => {
+    (config) => {
         // config.data = qs.stringify(config.data) // 转为formdata数据格式
-        return config
+        return config;
     },
-    error => Promise.error(error)
-)
+    (error) => Promise.error(error)
+);
 
-export default instance;
+export default instance;

src/utils/base64ToFile.js

@@ -1,11 +1,17 @@
 export function dataURLtoFile(dataurl, filename) {
-    let arr = dataurl.split(","),
-        mime = arr[0].match(/:(.*?);/)[1],
+    console.log(dataurl);
+    let arr = dataurl.split(','),
         bstr = atob(arr[1]),
         n = bstr.length,
         u8arr = new Uint8Array(n);
+    let mime;
+    if (arr[0].match(/:(.*?);/)) {
+        mime = arr[0].match(/:(.*?);/)[1];
+    } else {
+        mime = arr[0];
+    }
     while (n--) {
         u8arr[n] = bstr.charCodeAt(n);
     }
-    return new File([u8arr], filename, {type: mime});
-}
+    return new File([u8arr], filename, { type: mime });
+}

src/utils/encrypt/encrypt.js

@@ -1,74 +1,87 @@
-import './rsa'
-import './aes'
-import {AESDec, AESEnc, getKey} from "./aes";
-import {RSA} from "./rsa";
-import Qs from "qs";
-import axios from "axios";
-import qs from "qs";
-
+import './rsa';
+import './aes';
+import { AESDec, AESEnc, getKey } from './aes';
+import { RSA } from './rsa';
+import Qs from 'qs';
+import axios from 'axios';
+import qs from 'qs';
 
 class EncryptObj {
-    key = ''
+    key = '';
 
-    encryptKey = ''
+    encryptKey = '';
 
-    cipherText = ''
+    cipherText = '';
 
     fetch = axios.create({
-        baseURL: "http://api.ignatz.xyz/", // 这里是本地express启动的服务地址
+        baseURL: 'http://127.0.0.1:2333/', // 这里是本地express启动的服务地址
         // timeout: 5000 // request timeout
-    })
+    });
 
-    encrypt = content => {
-        this.key = getKey()
-        this.encryptKey = RSA(this.key)
-        this.cipherText = AESEnc(this.key, content)
-        this.fetch.interceptors.request.use(config => {
-            config.headers['X-Requested-With'] = 'XMLHttpRequest'
-            // let regex = /.*csrftoken=([^;.]*).*$/
-            // config.headers['X-CSRFToken'] = document.cookie.match(regex) === null ? null : document.cookie.match(regex)[1]
-            if (config.method === 'post' || config.method === 'put' || config.method === 'delete') {
-                if (typeof (config.data) !== 'string' && config.headers['Content-Type'] !== 'multipart/form-data') {
-                    config.data = qs.stringify(config.data)
+    encrypt = (content) => {
+        console.log('2333333okokokok');
+        this.key = getKey();
+        this.encryptKey = RSA(this.key);
+        this.cipherText = AESEnc(this.key, content);
+        console.log(this.cipherText);
+        this.fetch.interceptors.request.use(
+            (config) => {
+                config.headers['X-Requested-With'] = 'XMLHttpRequest';
+                // let regex = /.*csrftoken=([^;.]*).*$/
+                // config.headers['X-CSRFToken'] = document.cookie.match(regex) === null ? null : document.cookie.match(regex)[1]
+                if (config.method === 'post' || config.method === 'put' || config.method === 'delete') {
+                    if (typeof config.data !== 'string' && config.headers['Content-Type'] !== 'multipart/form-data') {
+                        config.data = qs.stringify(config.data);
+                    }
                 }
+                return config;
+            },
+            (error) => {
+                Promise.reject(error);
             }
-            return config
-        }, error => {
-            Promise.reject(error)
-        })
+        );
 
-        this.fetch.interceptors.response.use(async data => {
-            console.log(data.data.enc_content)
-            console.log(this.key)
-            console.log("明文: " + AESDec(this.key, data.data.enc_content))
-            return JSON.parse(AESDec(this.key, data.data.enc_content))
-        }, error => {
-            if (error.response) {
-                if (error.response.status === 500) {
-                    console.log('服务器错误，请联系管理员处理')
+        this.fetch.interceptors.response.use(
+            async (data) => {
+                console.log(data);
+                console.log(data.data.enc_content);
+                console.log(this.key);
+                if (data.data.enc_content) {
+                    console.log('明文: ' + AESDec(this.key, data.data.enc_content));
+                    return JSON.parse(AESDec(this.key, data.data.enc_content));
+                } else {
+                    return data;
+                }
+            },
+            (error) => {
+                if (error.response) {
+                    if (error.response.status === 500) {
+                        console.log('服务器错误，请联系管理员处理');
+                    }
+                    console.log('1服务器错误，请联系管理员处理');
+                    return Promise.reject(error.response.data);
+                } else {
+                    console.log('2服务器错误，请联系管理员处理');
+                    return Promise.reject(error);
                 }
-                console.log('1服务器错误，请联系管理员处理')
-                return Promise.reject(error.response.data)
-            } else {
-                console.log('2服务器错误，请联系管理员处理')
-                return Promise.reject(error)
             }
-        })
-    }
+        );
+    };
 
-    postData = param => {
-        this.encrypt(param.data)
+    postData = (param) => {
+        this.encrypt(param.data);
         let e_param = {
             cipher_text: this.cipherText,
             enc_key: this.encryptKey,
-        }
-        console.log(this.key + "233ok")
+        };
+        console.log(this.key + '233ok');
+        console.log(e_param);
         return this.fetch({
             url: param.url,
             method: param.method,
             data: Qs.stringify(e_param),
-        })
-    }
+        });
+    };
 }
 
-export default EncryptObj;
+export default EncryptObj;