diff --git a/src/App.js b/src/App.js
index e3bf1fb..759fad5 100644
--- a/src/App.js
+++ b/src/App.js
@@ -30,7 +30,9 @@ import ResetForm from "./component/Login/ResetForm";
 import Reset from "./component/Login/Reset";
 import PageLoading from "./component/Placeholder/PageLoading";
 import CodeViewer from "./component/Viewer/Code";
-const PDFViewer = React.lazy(() => import(/* webpackChunkName: "pdf" */ "./component/Viewer/PDF"));
+const PDFViewer = React.lazy(() =>
+    import(/* webpackChunkName: "pdf" */ "./component/Viewer/PDF")
+);
 
 export default function App() {
     const themeConfig = useSelector(state => state.siteConfig.theme);
@@ -101,10 +103,7 @@ export default function App() {
                                 <FileManager />
                             </AuthRoute>
 
-                            <AuthRoute
-                                path={`${path}video`}
-                                isLogin={isLogin}
-                            >
+                            <AuthRoute path={`${path}video`} isLogin={isLogin}>
                                 <VideoPreview />
                             </AuthRoute>
 
@@ -117,7 +116,7 @@ export default function App() {
                             </AuthRoute>
 
                             <AuthRoute path={`${path}pdf`} isLogin={isLogin}>
-                                <Suspense fallback={<PageLoading/>}>
+                                <Suspense fallback={<PageLoading />}>
                                     <PDFViewer />
                                 </Suspense>
                             </AuthRoute>
@@ -137,11 +136,8 @@ export default function App() {
                             <Route path={`${path}search`} isLogin={isLogin}>
                                 <SearchResult />
                             </Route>
-                            
-                            <Route
-                                path={`${path}setting`}
-                                isLogin={isLogin}
-                            >
+
+                            <Route path={`${path}setting`} isLogin={isLogin}>
                                 <UserSetting />
                             </Route>
 
@@ -197,7 +193,7 @@ export default function App() {
                             </Route>
 
                             <Route path={`${path}s/:id/pdf(/)*`}>
-                                <Suspense fallback={<PageLoading/>}>
+                                <Suspense fallback={<PageLoading />}>
                                     <PDFViewer />
                                 </Suspense>
                             </Route>
diff --git a/src/actions/index.js b/src/actions/index.js
index 7435295..035bdbd 100644
--- a/src/actions/index.js
+++ b/src/actions/index.js
@@ -1,30 +1,30 @@
-export * from './explorer'
+export * from "./explorer";
 
 export const setNavigator = (path, navigatorLoading) => {
-  return {
-    type: 'SET_NAVIGATOR',
-    path,
-    navigatorLoading
-  }
-}
+    return {
+        type: "SET_NAVIGATOR",
+        path,
+        navigatorLoading
+    };
+};
 
 export const navigateTo = path => {
-  return (dispatch, getState) => {
-    const state = getState()
-    const navigatorLoading = path !== state.navigator.path
-    dispatch(setNavigator(path, navigatorLoading))
-  }
+    return (dispatch, getState) => {
+        const state = getState();
+        const navigatorLoading = path !== state.navigator.path;
+        dispatch(setNavigator(path, navigatorLoading));
+    };
 };
 
 export const navigateUp = () => {
-  return (dispatch, getState) => {
-    const state = getState()
-    const pathSplit = state.navigator.path.split("/");
-    pathSplit.pop();
-    const newPath = pathSplit.length===1? "/":pathSplit.join("/");
-    const navigatorLoading = newPath !== state.navigator.path
-    dispatch(setNavigator(newPath, navigatorLoading))
-  }
+    return (dispatch, getState) => {
+        const state = getState();
+        const pathSplit = state.navigator.path.split("/");
+        pathSplit.pop();
+        const newPath = pathSplit.length === 1 ? "/" : pathSplit.join("/");
+        const navigatorLoading = newPath !== state.navigator.path;
+        dispatch(setNavigator(newPath, navigatorLoading));
+    };
 };
 
 export const drawerToggleAction = open => {
@@ -34,11 +34,11 @@ export const drawerToggleAction = open => {
     };
 };
 
-export const dragAndDrop = (source,target) => {
+export const dragAndDrop = (source, target) => {
     return {
         type: "DRAG_AND_DROP",
         source: source,
-        target: target,
+        target: target
     };
 };
 
@@ -49,9 +49,9 @@ export const changeViewMethod = method => {
     };
 };
 
-export const toggleDaylightMode = ()=>{
+export const toggleDaylightMode = () => {
     return {
-        type: "TOGGLE_DAYLIGHT_MODE",
+        type: "TOGGLE_DAYLIGHT_MODE"
     };
 };
 
@@ -110,10 +110,10 @@ export const openRenameDialog = () => {
     };
 };
 
-export const openResaveDialog = (key) => {
+export const openResaveDialog = key => {
     return {
         type: "OPEN_RESAVE_DIALOG",
-        key:key,
+        key: key
     };
 };
 
@@ -135,21 +135,20 @@ export const openShareDialog = () => {
     };
 };
 
-export const applyThemes = (theme)=>{
+export const applyThemes = theme => {
     return {
-        type:'APPLY_THEME',
-        theme:theme,
+        type: "APPLY_THEME",
+        theme: theme
     };
 };
 
-export const setSessionStatus = (status)=>{
+export const setSessionStatus = status => {
     return {
-        type:'SET_SESSION_STATUS',
-        status:status,
+        type: "SET_SESSION_STATUS",
+        status: status
     };
 };
 
-
 export const openMusicDialog = () => {
     return {
         type: "OPEN_MUSIC_DIALOG"
@@ -192,11 +191,11 @@ export const openCopyDialog = () => {
     };
 };
 
-export const openLoadingDialog = (text) => {
+export const openLoadingDialog = text => {
     return {
         type: "OPEN_LOADING_DIALOG",
-        text: text,
-    }
+        text: text
+    };
 };
 
 export const closeAllModals = () => {
@@ -265,4 +264,4 @@ export const setSiteConfig = config => {
         type: "SET_SITE_CONFIG",
         config: config
     };
-};
\ No newline at end of file
+};
diff --git a/src/component/Admin/Common/SizeInput.js b/src/component/Admin/Common/SizeInput.js
index 5628eca..f590caa 100644
--- a/src/component/Admin/Common/SizeInput.js
+++ b/src/component/Admin/Common/SizeInput.js
@@ -8,23 +8,34 @@ import React, { useCallback, useState } from "react";
 import { useDispatch } from "react-redux";
 import { toggleSnackbar } from "../../../actions";
 
-const unitTransform = (v)=>{
-    if(v<1024){
-        return [Math.round(v),1]
+const unitTransform = v => {
+    if (v < 1024) {
+        return [Math.round(v), 1];
     }
-    if(v<1024*1024){
-        return [Math.round(v/1024),1024]
+    if (v < 1024 * 1024) {
+        return [Math.round(v / 1024), 1024];
     }
-    if(v<1024*1024*1024){
-        return [Math.round(v/(1024*1024)),1024*1024]
+    if (v < 1024 * 1024 * 1024) {
+        return [Math.round(v / (1024 * 1024)), 1024 * 1024];
     }
-    if(v<1024*1024*1024*1024){
-        return [Math.round(v/(1024*1024*1024)),1024*1024*1024]
+    if (v < 1024 * 1024 * 1024 * 1024) {
+        return [Math.round(v / (1024 * 1024 * 1024)), 1024 * 1024 * 1024];
     }
-    return [Math.round(v/(1024*1024*1024*1024)),1024*1024*1024*1024]
-}
+    return [
+        Math.round(v / (1024 * 1024 * 1024 * 1024)),
+        1024 * 1024 * 1024 * 1024
+    ];
+};
 
-export default function SizeInput({onChange,min,value,required,label,max,suffix}){
+export default function SizeInput({
+    onChange,
+    min,
+    value,
+    required,
+    label,
+    max,
+    suffix
+}) {
     const dispatch = useDispatch();
     const ToggleSnackbar = useCallback(
         (vertical, horizontal, msg, color) =>
@@ -32,67 +43,86 @@ export default function SizeInput({onChange,min,value,required,label,max,suffix}
         [dispatch]
     );
 
-
-    const [unit,setUnit] = useState(1);
+    const [unit, setUnit] = useState(1);
     let first = true;
 
-    const transform = useCallback(()=>{
+    const transform = useCallback(() => {
         const res = unitTransform(value);
-        if(first && value !== 0){
+        if (first && value !== 0) {
             setUnit(res[1]);
             first = false;
         }
         return res;
-    },[value]);
+    }, [value]);
 
     return (
         <FormControl>
-            <InputLabel htmlFor="component-helper">
-                {label}
-            </InputLabel>
+            <InputLabel htmlFor="component-helper">{label}</InputLabel>
             <Input
-                style={{width:200,}}
+                style={{ width: 200 }}
                 value={transform()[0]}
                 type={"number"}
-                inputProps={{min:min,step:1}}
-                onChange={e=>{
-                    if (e.target.value * unit < max){
+                inputProps={{ min: min, step: 1 }}
+                onChange={e => {
+                    if (e.target.value * unit < max) {
                         onChange({
-                            target:{value:(e.target.value * unit).toString()}
-                        })
-                    }else{
-                        ToggleSnackbar("top", "right", "超出最大尺寸限制", "warning");
+                            target: {
+                                value: (e.target.value * unit).toString()
+                            }
+                        });
+                    } else {
+                        ToggleSnackbar(
+                            "top",
+                            "right",
+                            "超出最大尺寸限制",
+                            "warning"
+                        );
                     }
-
                 }}
-                required = {required}
+                required={required}
                 endAdornment={
                     <InputAdornment position="end">
                         <Select
                             labelId="demo-simple-select-label"
                             id="demo-simple-select"
                             value={unit}
-                            onChange={(e)=>{
-                                if (transform()[0] * e.target.value < max){
+                            onChange={e => {
+                                if (transform()[0] * e.target.value < max) {
                                     onChange({
-                                        target:{value:(transform()[0] * e.target.value).toString()}
-                                    })
+                                        target: {
+                                            value: (
+                                                transform()[0] * e.target.value
+                                            ).toString()
+                                        }
+                                    });
                                     setUnit(e.target.value);
-                                }else{
-                                    ToggleSnackbar("top", "right", "超出最大尺寸限制", "warning");
+                                } else {
+                                    ToggleSnackbar(
+                                        "top",
+                                        "right",
+                                        "超出最大尺寸限制",
+                                        "warning"
+                                    );
                                 }
-
                             }}
                         >
                             <MenuItem value={1}>B{suffix && suffix}</MenuItem>
-                            <MenuItem value={1024}>KB{suffix && suffix}</MenuItem>
-                            <MenuItem value={1024*1024}>MB{suffix && suffix}</MenuItem>
-                            <MenuItem value={1024*1024*1024}>GB{suffix && suffix}</MenuItem>
-                            <MenuItem value={1024*1024*1024*1024}>TB{suffix && suffix}</MenuItem>
+                            <MenuItem value={1024}>
+                                KB{suffix && suffix}
+                            </MenuItem>
+                            <MenuItem value={1024 * 1024}>
+                                MB{suffix && suffix}
+                            </MenuItem>
+                            <MenuItem value={1024 * 1024 * 1024}>
+                                GB{suffix && suffix}
+                            </MenuItem>
+                            <MenuItem value={1024 * 1024 * 1024 * 1024}>
+                                TB{suffix && suffix}
+                            </MenuItem>
                         </Select>
                     </InputAdornment>
                 }
             />
         </FormControl>
-    )
-}
\ No newline at end of file
+    );
+}
diff --git a/src/component/Admin/Dashboard.js b/src/component/Admin/Dashboard.js
index 687f6cc..d73a46d 100644
--- a/src/component/Admin/Dashboard.js
+++ b/src/component/Admin/Dashboard.js
@@ -13,7 +13,24 @@ import ListItemText from "@material-ui/core/ListItemText";
 import { lighten, makeStyles, useTheme } from "@material-ui/core/styles";
 import Toolbar from "@material-ui/core/Toolbar";
 import Typography from "@material-ui/core/Typography";
-import { Assignment, CloudDownload, Contacts, Group, Home, Image, InsertDriveFile, Language, ListAlt, Mail, Palette, Person, Settings, SettingsEthernet, Share, Storage } from "@material-ui/icons";
+import {
+    Assignment,
+    CloudDownload,
+    Contacts,
+    Group,
+    Home,
+    Image,
+    InsertDriveFile,
+    Language,
+    ListAlt,
+    Mail,
+    Palette,
+    Person,
+    Settings,
+    SettingsEthernet,
+    Share,
+    Storage
+} from "@material-ui/icons";
 import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
 import ChevronRightIcon from "@material-ui/icons/ChevronRight";
 import MenuIcon from "@material-ui/icons/Menu";
@@ -139,21 +156,21 @@ const useStyles = makeStyles(theme => ({
     },
     subMenu: {
         backgroundColor: theme.palette.background.default,
-        paddingTop:0,
-        paddingBottom:0,
+        paddingTop: 0,
+        paddingBottom: 0
     },
     active: {
         backgroundColor: lighten(theme.palette.primary.main, 0.8),
         color: theme.palette.primary.main,
-        "&:hover":{
-            backgroundColor: lighten(theme.palette.primary.main, 0.7),
-        },
+        "&:hover": {
+            backgroundColor: lighten(theme.palette.primary.main, 0.7)
+        }
     },
-    activeText:{
-        fontWeight: 500,
+    activeText: {
+        fontWeight: 500
     },
-    activeIcon:{
-        color: theme.palette.primary.main,
+    activeIcon: {
+        color: theme.palette.primary.main
     }
 }));
 
@@ -201,7 +218,7 @@ const items = [
                 title: "图像处理",
                 path: "image",
                 icon: <Image />
-            },
+            }
         ]
     },
     {
@@ -242,9 +259,9 @@ const items = [
                 title: "常规任务",
                 path: "task",
                 icon: <ListAlt />
-            },
-            ],
-    },
+            }
+        ]
+    }
 ];
 
 export default function Dashboard({ content }) {
@@ -339,19 +356,29 @@ export default function Dashboard({ content }) {
                                     }
                                     button
                                     className={clsx({
-                                        [classes.active]:
-                                        location.pathname.startsWith("/admin/" + item.path)
+                                        [classes.active]: location.pathname.startsWith(
+                                            "/admin/" + item.path
+                                        )
                                     })}
                                     key={item.title}
                                 >
-                                    <ListItemIcon  className={clsx({
-                                        [classes.activeIcon]:
-                                            location.pathname.startsWith("/admin/" + item.path)
-                                    })}>{item.icon}</ListItemIcon>
-                                    <ListItemText className={clsx({
-                                        [classes.activeText]:
-                                            location.pathname.startsWith("/admin/" + item.path)
-                                    })} primary={item.title} />
+                                    <ListItemIcon
+                                        className={clsx({
+                                            [classes.activeIcon]: location.pathname.startsWith(
+                                                "/admin/" + item.path
+                                            )
+                                        })}
+                                    >
+                                        {item.icon}
+                                    </ListItemIcon>
+                                    <ListItemText
+                                        className={clsx({
+                                            [classes.activeText]: location.pathname.startsWith(
+                                                "/admin/" + item.path
+                                            )
+                                        })}
+                                        primary={item.title}
+                                    />
                                 </ListItem>
                             );
                         }
@@ -384,16 +411,20 @@ export default function Dashboard({ content }) {
                                                 }
                                                 className={clsx({
                                                     [classes.sub]: open,
-                                                    [classes.active]:
-                                                        location.pathname.startsWith("/admin/" + sub.path)
+                                                    [classes.active]: location.pathname.startsWith(
+                                                        "/admin/" + sub.path
+                                                    )
                                                 })}
                                                 button
                                                 key={sub.title}
                                             >
-                                                <ListItemIcon className={clsx({
-                                                    [classes.activeIcon]:
-                                                        location.pathname.startsWith("/admin/" + sub.path)
-                                                })}>
+                                                <ListItemIcon
+                                                    className={clsx({
+                                                        [classes.activeIcon]: location.pathname.startsWith(
+                                                            "/admin/" + sub.path
+                                                        )
+                                                    })}
+                                                >
                                                     {sub.icon}
                                                 </ListItemIcon>
                                                 <ListItemText
diff --git a/src/component/Admin/Dialogs/AddGroupk.js b/src/component/Admin/Dialogs/AddGroupk.js
index 48aba1d..dfb7f75 100644
--- a/src/component/Admin/Dialogs/AddGroupk.js
+++ b/src/component/Admin/Dialogs/AddGroupk.js
@@ -63,11 +63,11 @@ export default function AddGroup({ open, onClose, onSubmit }) {
 
     const submit = e => {
         e.preventDefault();
-        const groupCopy = {...group};
+        const groupCopy = { ...group };
         groupCopy.time = parseInt(groupCopy.time) * 86400;
         groupCopy.price = parseInt(groupCopy.price) * 100;
         groupCopy.score = parseInt(groupCopy.score);
-        groupCopy.id = (new Date()).valueOf();
+        groupCopy.id = new Date().valueOf();
         groupCopy.des = groupCopy.des.split("\n");
         onSubmit(groupCopy);
     };
@@ -218,7 +218,9 @@ export default function AddGroup({ open, onClose, onSubmit }) {
                                     control={
                                         <Switch
                                             checked={group.highlight}
-                                            onChange={handleCheckChange("highlight")}
+                                            onChange={handleCheckChange(
+                                                "highlight"
+                                            )}
                                         />
                                     }
                                     label="突出展示"
diff --git a/src/component/Admin/Dialogs/AddPack.js b/src/component/Admin/Dialogs/AddPack.js
index 40cda88..e4cdeb1 100644
--- a/src/component/Admin/Dialogs/AddPack.js
+++ b/src/component/Admin/Dialogs/AddPack.js
@@ -10,16 +10,15 @@ import Input from "@material-ui/core/Input";
 import FormHelperText from "@material-ui/core/FormHelperText";
 import FormControl from "@material-ui/core/FormControl";
 import SizeInput from "../Common/SizeInput";
-import {makeStyles} from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 
 const useStyles = makeStyles(() => ({
-
     formContainer: {
-        margin:"8px 0 8px 0",
+        margin: "8px 0 8px 0"
     }
 }));
 
-export default function AddPack({ open, onClose,onSubmit }) {
+export default function AddPack({ open, onClose, onSubmit }) {
     const classes = useStyles();
     const [pack, setPack] = useState({
         name: "",
@@ -38,14 +37,14 @@ export default function AddPack({ open, onClose,onSubmit }) {
 
     const submit = e => {
         e.preventDefault();
-        const packCopy = {...pack};
+        const packCopy = { ...pack };
         packCopy.size = parseInt(packCopy.size);
         packCopy.time = parseInt(packCopy.time) * 86400;
         packCopy.price = parseInt(packCopy.price) * 100;
         packCopy.score = parseInt(packCopy.score);
-        packCopy.id = (new Date()).valueOf();
+        packCopy.id = new Date().valueOf();
         onSubmit(packCopy);
-    }
+    };
 
     return (
         <Dialog
@@ -99,8 +98,8 @@ export default function AddPack({ open, onClose,onSubmit }) {
                                 <Input
                                     type={"number"}
                                     inputProps={{
-                                        min:1,
-                                        step:1
+                                        min: 1,
+                                        step: 1
                                     }}
                                     value={pack.time}
                                     onChange={handleChange("time")}
@@ -120,8 +119,8 @@ export default function AddPack({ open, onClose,onSubmit }) {
                                 <Input
                                     type={"number"}
                                     inputProps={{
-                                        min:0.01,
-                                        step:0.01
+                                        min: 0.01,
+                                        step: 0.01
                                     }}
                                     value={pack.price}
                                     onChange={handleChange("price")}
@@ -141,19 +140,19 @@ export default function AddPack({ open, onClose,onSubmit }) {
                                 <Input
                                     type={"number"}
                                     inputProps={{
-                                        min:0,
-                                        step:1
+                                        min: 0,
+                                        step: 1
                                     }}
                                     value={pack.score}
                                     onChange={handleChange("score")}
                                     required
                                 />
                                 <FormHelperText id="component-helper-text">
-                                    使用积分购买时的价格，填写为 0 表示不能使用积分购买
+                                    使用积分购买时的价格，填写为 0
+                                    表示不能使用积分购买
                                 </FormHelperText>
                             </FormControl>
                         </div>
-
                     </DialogContentText>
                 </DialogContent>
                 <DialogActions>
diff --git a/src/component/Admin/Dialogs/AddRedeem.js b/src/component/Admin/Dialogs/AddRedeem.js
index dad6aab..4de79b6 100644
--- a/src/component/Admin/Dialogs/AddRedeem.js
+++ b/src/component/Admin/Dialogs/AddRedeem.js
@@ -17,20 +17,19 @@ import { toggleSnackbar } from "../../../actions";
 import API from "../../../middleware/Api";
 
 const useStyles = makeStyles(() => ({
-
     formContainer: {
-        margin:"8px 0 8px 0",
+        margin: "8px 0 8px 0"
     }
 }));
 
-export default function AddRedeem({ open, onClose,products ,onSuccess}) {
+export default function AddRedeem({ open, onClose, products, onSuccess }) {
     const classes = useStyles();
     const [input, setInput] = useState({
-        num:1,
-        id:0,
-        time:1,
+        num: 1,
+        id: 0,
+        time: 1
     });
-    const [loading,setLoading] = useState(false);
+    const [loading, setLoading] = useState(false);
 
     const dispatch = useDispatch();
     const ToggleSnackbar = useCallback(
@@ -52,13 +51,13 @@ export default function AddRedeem({ open, onClose,products ,onSuccess}) {
         input.num = parseInt(input.num);
         input.id = parseInt(input.id);
         input.time = parseInt(input.time);
-        input.type=2;
-        for (let i=0;i<products.length;i++){
-            if (products[i].id === input.id){
-                if(products[i].group_id !== undefined){
-                    input.type = 1
-                }else{
-                    input.type = 0
+        input.type = 2;
+        for (let i = 0; i < products.length; i++) {
+            if (products[i].id === input.id) {
+                if (products[i].group_id !== undefined) {
+                    input.type = 1;
+                } else {
+                    input.type = 0;
                 }
                 break;
             }
@@ -71,10 +70,10 @@ export default function AddRedeem({ open, onClose,products ,onSuccess}) {
             })
             .catch(error => {
                 ToggleSnackbar("top", "right", error.message, "error");
-            }).then(()=>{
+            })
+            .then(() => {
                 setLoading(false);
-        });
-
+            });
     };
 
     return (
@@ -97,9 +96,9 @@ export default function AddRedeem({ open, onClose,products ,onSuccess}) {
                                 <Input
                                     type={"number"}
                                     inputProps={{
-                                        step:1,
-                                        min:1,
-                                        max:100,
+                                        step: 1,
+                                        min: 1,
+                                        max: 100
                                     }}
                                     value={input.num}
                                     onChange={handleChange("num")}
@@ -118,12 +117,18 @@ export default function AddRedeem({ open, onClose,products ,onSuccess}) {
                                 </InputLabel>
                                 <Select
                                     value={input.id}
-                                    onChange={e=>{
-                                        handleChange("id")(e)
+                                    onChange={e => {
+                                        handleChange("id")(e);
                                     }}
                                 >
-                                    {products.map(v=>(
-                                        <MenuItem key={v.id} value={v.id} data-type={"1"}>{v.name}</MenuItem>
+                                    {products.map(v => (
+                                        <MenuItem
+                                            key={v.id}
+                                            value={v.id}
+                                            data-type={"1"}
+                                        >
+                                            {v.name}
+                                        </MenuItem>
                                     ))}
                                     <MenuItem value={0}>积分</MenuItem>
                                 </Select>
@@ -138,8 +143,8 @@ export default function AddRedeem({ open, onClose,products ,onSuccess}) {
                                 <Input
                                     type={"number"}
                                     inputProps={{
-                                        step:1,
-                                        min:1,
+                                        step: 1,
+                                        min: 1
                                     }}
                                     value={input.time}
                                     onChange={handleChange("time")}
@@ -150,12 +155,14 @@ export default function AddRedeem({ open, onClose,products ,onSuccess}) {
                                 </FormHelperText>
                             </FormControl>
                         </div>
-
-
                     </DialogContentText>
                 </DialogContent>
                 <DialogActions>
-                    <Button disabled={loading} onClick={onClose} color="default">
+                    <Button
+                        disabled={loading}
+                        onClick={onClose}
+                        color="default"
+                    >
                         取消
                     </Button>
                     <Button disabled={loading} type={"submit"} color="primary">
diff --git a/src/component/Admin/Dialogs/Alert.js b/src/component/Admin/Dialogs/Alert.js
index 1439f10..b838835 100644
--- a/src/component/Admin/Dialogs/Alert.js
+++ b/src/component/Admin/Dialogs/Alert.js
@@ -7,7 +7,7 @@ import DialogActions from "@material-ui/core/DialogActions";
 import Button from "@material-ui/core/Button";
 import Dialog from "@material-ui/core/Dialog";
 
-export default function AlertDialog({title, msg, open, onClose }) {
+export default function AlertDialog({ title, msg, open, onClose }) {
     return (
         <Dialog
             open={open}
@@ -15,14 +15,10 @@ export default function AlertDialog({title, msg, open, onClose }) {
             aria-labelledby="alert-dialog-title"
             aria-describedby="alert-dialog-description"
         >
-            <DialogTitle id="alert-dialog-title">
-                {title}
-            </DialogTitle>
+            <DialogTitle id="alert-dialog-title">{title}</DialogTitle>
             <DialogContent>
                 <DialogContentText id="alert-dialog-description">
-                    <Typography>
-                        {msg}
-                    </Typography>
+                    <Typography>{msg}</Typography>
                 </DialogContentText>
             </DialogContent>
             <DialogActions>
diff --git a/src/component/Admin/Dialogs/CreateTheme.js b/src/component/Admin/Dialogs/CreateTheme.js
index f4ed7b4..d9b5980 100644
--- a/src/component/Admin/Dialogs/CreateTheme.js
+++ b/src/component/Admin/Dialogs/CreateTheme.js
@@ -36,7 +36,7 @@ const useStyles = makeStyles(theme => ({
     }
 }));
 
-export default function CreateTheme({ open, onClose,onSubmit }) {
+export default function CreateTheme({ open, onClose, onSubmit }) {
     const classes = useStyles();
     const [theme, setTheme] = useState({
         palette: {
@@ -121,7 +121,7 @@ export default function CreateTheme({ open, onClose,onSubmit }) {
                                         "#9c27b0"
                                     ]}
                                     color={theme.palette.primary.main}
-                                    onChangeComplete={(c) => {
+                                    onChangeComplete={c => {
                                         setTheme({
                                             ...theme,
                                             palette: {
@@ -197,7 +197,7 @@ export default function CreateTheme({ open, onClose,onSubmit }) {
                                         "#d500f9"
                                     ]}
                                     color={theme.palette.secondary.main}
-                                    onChangeComplete={(c) => {
+                                    onChangeComplete={c => {
                                         setTheme({
                                             ...theme,
                                             palette: {
@@ -235,7 +235,7 @@ export default function CreateTheme({ open, onClose,onSubmit }) {
                             <div className={classes.picker}>
                                 <CompactPicker
                                     color={theme.palette.primary.contrastText}
-                                    onChangeComplete={(c) => {
+                                    onChangeComplete={c => {
                                         setTheme({
                                             ...theme,
                                             palette: {
@@ -273,7 +273,7 @@ export default function CreateTheme({ open, onClose,onSubmit }) {
                             <div className={classes.picker}>
                                 <CompactPicker
                                     color={theme.palette.secondary.contrastText}
-                                    onChangeComplete={(c) => {
+                                    onChangeComplete={c => {
                                         setTheme({
                                             ...theme,
                                             palette: {
@@ -339,7 +339,7 @@ export default function CreateTheme({ open, onClose,onSubmit }) {
                 <Button onClick={onClose} color="default">
                     取消
                 </Button>
-                <Button onClick={()=>onSubmit(theme)} color="primary">
+                <Button onClick={() => onSubmit(theme)} color="primary">
                     创建
                 </Button>
             </DialogActions>
diff --git a/src/component/Admin/Dialogs/FileFilter.js b/src/component/Admin/Dialogs/FileFilter.js
index 224dc78..3d8bb30 100644
--- a/src/component/Admin/Dialogs/FileFilter.js
+++ b/src/component/Admin/Dialogs/FileFilter.js
@@ -13,13 +13,13 @@ import { useDispatch } from "react-redux";
 import { toggleSnackbar } from "../../../actions";
 import API from "../../../middleware/Api";
 
-export default function FileFilter({setFilter,setSearch,open, onClose }) {
-    const [input,setInput] = useState({
-        policy_id:"all",
-        user_id:"",
+export default function FileFilter({ setFilter, setSearch, open, onClose }) {
+    const [input, setInput] = useState({
+        policy_id: "all",
+        user_id: ""
     });
-    const [policies,setPolicies] = useState([]);
-    const [keywords,setKeywords] = useState("");
+    const [policies, setPolicies] = useState([]);
+    const [keywords, setKeywords] = useState("");
 
     const dispatch = useDispatch();
     const ToggleSnackbar = useCallback(
@@ -29,10 +29,10 @@ export default function FileFilter({setFilter,setSearch,open, onClose }) {
     );
 
     const handleChange = name => event => {
-        setInput({...input,[name]:event.target.value})
-    }
+        setInput({ ...input, [name]: event.target.value });
+    };
 
-    useEffect(()=>{
+    useEffect(() => {
         API.post("/admin/policy/list", {
             page: 1,
             page_size: 10000,
@@ -45,25 +45,25 @@ export default function FileFilter({setFilter,setSearch,open, onClose }) {
             .catch(error => {
                 ToggleSnackbar("top", "right", error.message, "error");
             });
-    },[])
+    }, []);
 
     const submit = () => {
         const res = {};
-        Object.keys(input).forEach(v=>{
-            if(input[v] !== "all" && input[v] !== ""){
+        Object.keys(input).forEach(v => {
+            if (input[v] !== "all" && input[v] !== "") {
                 res[v] = input[v];
             }
-        })
+        });
         setFilter(res);
-        if (keywords !== ""){
+        if (keywords !== "") {
             setSearch({
-                name:keywords,
+                name: keywords
             });
-        }else{
+        } else {
             setSearch({});
         }
         onClose();
-    }
+    };
 
     return (
         <Dialog
@@ -74,12 +74,12 @@ export default function FileFilter({setFilter,setSearch,open, onClose }) {
             fullWidth
             maxWidth={"xs"}
         >
-            <DialogTitle id="alert-dialog-title">
-                过滤条件
-            </DialogTitle>
+            <DialogTitle id="alert-dialog-title">过滤条件</DialogTitle>
             <DialogContent>
                 <FormControl fullWidth>
-                    <InputLabel id="demo-simple-select-label">存储策略</InputLabel>
+                    <InputLabel id="demo-simple-select-label">
+                        存储策略
+                    </InputLabel>
                     <Select
                         labelId="demo-simple-select-label"
                         id="demo-simple-select"
@@ -92,21 +92,28 @@ export default function FileFilter({setFilter,setSearch,open, onClose }) {
                                 return null;
                             }
                             return (
-                                <MenuItem
-                                    key={v.ID}
-                                    value={v.ID.toString()}
-                                >
+                                <MenuItem key={v.ID} value={v.ID.toString()}>
                                     {v.Name}
                                 </MenuItem>
                             );
                         })}
                     </Select>
                 </FormControl>
-                <FormControl fullWidth style={{marginTop:16}}>
-                    <TextField value={input.user_id} onChange={handleChange("user_id")} id="standard-basic" label="上传者ID" />
+                <FormControl fullWidth style={{ marginTop: 16 }}>
+                    <TextField
+                        value={input.user_id}
+                        onChange={handleChange("user_id")}
+                        id="standard-basic"
+                        label="上传者ID"
+                    />
                 </FormControl>
-                <FormControl fullWidth style={{marginTop:16}}>
-                    <TextField value={keywords} onChange={e=>setKeywords(e.target.value)} id="standard-basic" label="搜索 文件名" />
+                <FormControl fullWidth style={{ marginTop: 16 }}>
+                    <TextField
+                        value={keywords}
+                        onChange={e => setKeywords(e.target.value)}
+                        id="standard-basic"
+                        label="搜索 文件名"
+                    />
                 </FormControl>
             </DialogContent>
             <DialogActions>
diff --git a/src/component/Admin/Dialogs/MagicVar.js b/src/component/Admin/Dialogs/MagicVar.js
index 178055d..a2b4a83 100644
--- a/src/component/Admin/Dialogs/MagicVar.js
+++ b/src/component/Admin/Dialogs/MagicVar.js
@@ -11,7 +11,7 @@ import TableHead from "@material-ui/core/TableHead";
 import TableRow from "@material-ui/core/TableRow";
 import React from "react";
 
-export default function MagicVar({isFile, open, onClose, isSlave }) {
+export default function MagicVar({ isFile, open, onClose, isSlave }) {
     return (
         <Dialog
             open={open}
@@ -20,7 +20,7 @@ export default function MagicVar({isFile, open, onClose, isSlave }) {
             aria-describedby="alert-dialog-description"
         >
             <DialogTitle id="alert-dialog-title">
-                {isFile?"文件名魔法变量":"路径魔法变量"}
+                {isFile ? "文件名魔法变量" : "路径魔法变量"}
             </DialogTitle>
             <DialogContent>
                 <TableContainer>
@@ -34,77 +34,113 @@ export default function MagicVar({isFile, open, onClose, isSlave }) {
                         </TableHead>
                         <TableBody>
                             <TableRow>
-                                <TableCell component="th" scope="row">{"{randomkey16}"}</TableCell>
+                                <TableCell component="th" scope="row">
+                                    {"{randomkey16}"}
+                                </TableCell>
                                 <TableCell>16位随机字符</TableCell>
                                 <TableCell>N6IimT5XZP324ACK</TableCell>
                             </TableRow>
                             <TableRow>
-                                <TableCell component="th" scope="row">{"{randomkey8}"}</TableCell>
+                                <TableCell component="th" scope="row">
+                                    {"{randomkey8}"}
+                                </TableCell>
                                 <TableCell>8位随机字符</TableCell>
                                 <TableCell>gWz78q30</TableCell>
                             </TableRow>
                             <TableRow>
-                                <TableCell component="th" scope="row">{"{timestamp}"}</TableCell>
+                                <TableCell component="th" scope="row">
+                                    {"{timestamp}"}
+                                </TableCell>
                                 <TableCell>秒级时间戳</TableCell>
                                 <TableCell>1582692933</TableCell>
                             </TableRow>
                             <TableRow>
-                                <TableCell component="th" scope="row">{"{timestamp_nano}"}</TableCell>
+                                <TableCell component="th" scope="row">
+                                    {"{timestamp_nano}"}
+                                </TableCell>
                                 <TableCell>纳秒级时间戳</TableCell>
                                 <TableCell>1582692933231834600</TableCell>
                             </TableRow>
-                            {!isSlave && <TableRow>
-                                <TableCell component="th" scope="row">{"{uid}"}</TableCell>
-                                <TableCell>用户ID</TableCell>
-                                <TableCell>1</TableCell>
-                            </TableRow>}
-                            {isFile && <TableRow>
-                                <TableCell component="th" scope="row">{"{originname}"}</TableCell>
-                                <TableCell>原始文件名</TableCell>
-                                <TableCell>MyPico.mp4</TableCell>
-                            </TableRow>}
-                            {!isFile && !isSlave && <TableRow>
-                                <TableCell component="th" scope="row">{"{path}"}</TableCell>
-                                <TableCell>用户上传路径</TableCell>
-                                <TableCell>/我的文件/学习资料/</TableCell>
-                            </TableRow>}
+                            {!isSlave && (
+                                <TableRow>
+                                    <TableCell component="th" scope="row">
+                                        {"{uid}"}
+                                    </TableCell>
+                                    <TableCell>用户ID</TableCell>
+                                    <TableCell>1</TableCell>
+                                </TableRow>
+                            )}
+                            {isFile && (
+                                <TableRow>
+                                    <TableCell component="th" scope="row">
+                                        {"{originname}"}
+                                    </TableCell>
+                                    <TableCell>原始文件名</TableCell>
+                                    <TableCell>MyPico.mp4</TableCell>
+                                </TableRow>
+                            )}
+                            {!isFile && !isSlave && (
+                                <TableRow>
+                                    <TableCell component="th" scope="row">
+                                        {"{path}"}
+                                    </TableCell>
+                                    <TableCell>用户上传路径</TableCell>
+                                    <TableCell>/我的文件/学习资料/</TableCell>
+                                </TableRow>
+                            )}
                             <TableRow>
-                                <TableCell component="th" scope="row">{"{date}"}</TableCell>
+                                <TableCell component="th" scope="row">
+                                    {"{date}"}
+                                </TableCell>
                                 <TableCell>日期</TableCell>
                                 <TableCell>20060102</TableCell>
                             </TableRow>
                             <TableRow>
-                                <TableCell component="th" scope="row">{"{datetime}"}</TableCell>
+                                <TableCell component="th" scope="row">
+                                    {"{datetime}"}
+                                </TableCell>
                                 <TableCell>日期时间</TableCell>
                                 <TableCell>20060102150405</TableCell>
                             </TableRow>
                             <TableRow>
-                                <TableCell component="th" scope="row">{"{year}"}</TableCell>
+                                <TableCell component="th" scope="row">
+                                    {"{year}"}
+                                </TableCell>
                                 <TableCell>年份</TableCell>
                                 <TableCell>2006</TableCell>
                             </TableRow>
                             <TableRow>
-                                <TableCell component="th" scope="row">{"{month}"}</TableCell>
+                                <TableCell component="th" scope="row">
+                                    {"{month}"}
+                                </TableCell>
                                 <TableCell>月份</TableCell>
                                 <TableCell>01</TableCell>
                             </TableRow>
                             <TableRow>
-                                <TableCell component="th" scope="row">{"{day}"}</TableCell>
+                                <TableCell component="th" scope="row">
+                                    {"{day}"}
+                                </TableCell>
                                 <TableCell>日</TableCell>
                                 <TableCell>02</TableCell>
                             </TableRow>
                             <TableRow>
-                                <TableCell component="th" scope="row">{"{hour}"}</TableCell>
+                                <TableCell component="th" scope="row">
+                                    {"{hour}"}
+                                </TableCell>
                                 <TableCell>小时</TableCell>
                                 <TableCell>15</TableCell>
                             </TableRow>
                             <TableRow>
-                                <TableCell component="th" scope="row">{"{minute}"}</TableCell>
+                                <TableCell component="th" scope="row">
+                                    {"{minute}"}
+                                </TableCell>
                                 <TableCell>分钟</TableCell>
                                 <TableCell>04</TableCell>
                             </TableRow>
                             <TableRow>
-                                <TableCell component="th" scope="row">{"{second}"}</TableCell>
+                                <TableCell component="th" scope="row">
+                                    {"{second}"}
+                                </TableCell>
                                 <TableCell>秒</TableCell>
                                 <TableCell>05</TableCell>
                             </TableRow>
diff --git a/src/component/Admin/Dialogs/ShareFilter.js b/src/component/Admin/Dialogs/ShareFilter.js
index 7a118a7..b68d185 100644
--- a/src/component/Admin/Dialogs/ShareFilter.js
+++ b/src/component/Admin/Dialogs/ShareFilter.js
@@ -10,34 +10,34 @@ import Select from "@material-ui/core/Select";
 import TextField from "@material-ui/core/TextField";
 import React, { useState } from "react";
 
-export default function ShareFilter({setFilter,setSearch,open, onClose }) {
-    const [input,setInput] = useState({
-        is_dir:"all",
-        user_id:"",
+export default function ShareFilter({ setFilter, setSearch, open, onClose }) {
+    const [input, setInput] = useState({
+        is_dir: "all",
+        user_id: ""
     });
-    const [keywords,setKeywords] = useState("");
+    const [keywords, setKeywords] = useState("");
 
     const handleChange = name => event => {
-        setInput({...input,[name]:event.target.value})
-    }
+        setInput({ ...input, [name]: event.target.value });
+    };
 
     const submit = () => {
         const res = {};
-        Object.keys(input).forEach(v=>{
-            if(input[v] !== "all" && input[v] !== ""){
+        Object.keys(input).forEach(v => {
+            if (input[v] !== "all" && input[v] !== "") {
                 res[v] = input[v];
             }
-        })
+        });
         setFilter(res);
-        if (keywords !== ""){
+        if (keywords !== "") {
             setSearch({
-                source_name:keywords,
+                source_name: keywords
             });
-        }else{
+        } else {
             setSearch({});
         }
         onClose();
-    }
+    };
 
     return (
         <Dialog
@@ -48,12 +48,12 @@ export default function ShareFilter({setFilter,setSearch,open, onClose }) {
             fullWidth
             maxWidth={"xs"}
         >
-            <DialogTitle id="alert-dialog-title">
-                过滤条件
-            </DialogTitle>
+            <DialogTitle id="alert-dialog-title">过滤条件</DialogTitle>
             <DialogContent>
                 <FormControl fullWidth>
-                    <InputLabel id="demo-simple-select-label">源文件类型</InputLabel>
+                    <InputLabel id="demo-simple-select-label">
+                        源文件类型
+                    </InputLabel>
                     <Select
                         labelId="demo-simple-select-label"
                         id="demo-simple-select"
@@ -65,11 +65,21 @@ export default function ShareFilter({setFilter,setSearch,open, onClose }) {
                         <MenuItem value={"0"}>文件</MenuItem>
                     </Select>
                 </FormControl>
-                <FormControl fullWidth style={{marginTop:16}}>
-                    <TextField value={input.user_id} onChange={handleChange("user_id")} id="standard-basic" label="上传者ID" />
+                <FormControl fullWidth style={{ marginTop: 16 }}>
+                    <TextField
+                        value={input.user_id}
+                        onChange={handleChange("user_id")}
+                        id="standard-basic"
+                        label="上传者ID"
+                    />
                 </FormControl>
-                <FormControl fullWidth style={{marginTop:16}}>
-                    <TextField value={keywords} onChange={e=>setKeywords(e.target.value)} id="standard-basic" label="搜索 文件名" />
+                <FormControl fullWidth style={{ marginTop: 16 }}>
+                    <TextField
+                        value={keywords}
+                        onChange={e => setKeywords(e.target.value)}
+                        id="standard-basic"
+                        label="搜索 文件名"
+                    />
                 </FormControl>
             </DialogContent>
             <DialogActions>
diff --git a/src/component/Admin/Dialogs/UserFilter.js b/src/component/Admin/Dialogs/UserFilter.js
index 2b548c0..9e3a3e5 100644
--- a/src/component/Admin/Dialogs/UserFilter.js
+++ b/src/component/Admin/Dialogs/UserFilter.js
@@ -13,13 +13,13 @@ import { useDispatch } from "react-redux";
 import { toggleSnackbar } from "../../../actions";
 import API from "../../../middleware/Api";
 
-export default function UserFilter({setFilter,setSearch,open, onClose }) {
-    const [input,setInput] = useState({
-        group_id:"all",
-        status:"all",
+export default function UserFilter({ setFilter, setSearch, open, onClose }) {
+    const [input, setInput] = useState({
+        group_id: "all",
+        status: "all"
     });
-    const [groups,setGroups] = useState([]);
-    const [keywords,setKeywords] = useState("");
+    const [groups, setGroups] = useState([]);
+    const [keywords, setKeywords] = useState("");
 
     const dispatch = useDispatch();
     const ToggleSnackbar = useCallback(
@@ -29,10 +29,10 @@ export default function UserFilter({setFilter,setSearch,open, onClose }) {
     );
 
     const handleChange = name => event => {
-        setInput({...input,[name]:event.target.value})
-    }
+        setInput({ ...input, [name]: event.target.value });
+    };
 
-    useEffect(()=>{
+    useEffect(() => {
         API.get("/admin/groups")
             .then(response => {
                 setGroups(response.data);
@@ -40,26 +40,26 @@ export default function UserFilter({setFilter,setSearch,open, onClose }) {
             .catch(error => {
                 ToggleSnackbar("top", "right", error.message, "error");
             });
-    },[])
+    }, []);
 
     const submit = () => {
         const res = {};
-        Object.keys(input).forEach(v=>{
-            if(input[v] !== "all"){
+        Object.keys(input).forEach(v => {
+            if (input[v] !== "all") {
                 res[v] = input[v];
             }
-        })
+        });
         setFilter(res);
-        if (keywords !== ""){
+        if (keywords !== "") {
             setSearch({
-                nick:keywords,
-                email:keywords,
+                nick: keywords,
+                email: keywords
             });
-        }else{
+        } else {
             setSearch({});
         }
         onClose();
-    }
+    };
 
     return (
         <Dialog
@@ -70,12 +70,12 @@ export default function UserFilter({setFilter,setSearch,open, onClose }) {
             fullWidth
             maxWidth={"xs"}
         >
-            <DialogTitle id="alert-dialog-title">
-                过滤条件
-            </DialogTitle>
+            <DialogTitle id="alert-dialog-title">过滤条件</DialogTitle>
             <DialogContent>
                 <FormControl fullWidth>
-                    <InputLabel id="demo-simple-select-label">用户组</InputLabel>
+                    <InputLabel id="demo-simple-select-label">
+                        用户组
+                    </InputLabel>
                     <Select
                         labelId="demo-simple-select-label"
                         id="demo-simple-select"
@@ -88,18 +88,17 @@ export default function UserFilter({setFilter,setSearch,open, onClose }) {
                                 return null;
                             }
                             return (
-                                <MenuItem
-                                    key={v.ID}
-                                    value={v.ID.toString()}
-                                >
+                                <MenuItem key={v.ID} value={v.ID.toString()}>
                                     {v.Name}
                                 </MenuItem>
                             );
                         })}
                     </Select>
                 </FormControl>
-                <FormControl fullWidth style={{marginTop:16}}>
-                    <InputLabel id="demo-simple-select-label">用户状态</InputLabel>
+                <FormControl fullWidth style={{ marginTop: 16 }}>
+                    <InputLabel id="demo-simple-select-label">
+                        用户状态
+                    </InputLabel>
                     <Select
                         labelId="demo-simple-select-label"
                         id="demo-simple-select"
@@ -113,8 +112,13 @@ export default function UserFilter({setFilter,setSearch,open, onClose }) {
                         <MenuItem value={"3"}>超额使用被封禁</MenuItem>
                     </Select>
                 </FormControl>
-                <FormControl fullWidth style={{marginTop:16}}>
-                    <TextField value={keywords} onChange={e=>setKeywords(e.target.value)} id="standard-basic" label="搜索 昵称 / 用户名" />
+                <FormControl fullWidth style={{ marginTop: 16 }}>
+                    <TextField
+                        value={keywords}
+                        onChange={e => setKeywords(e.target.value)}
+                        id="standard-basic"
+                        label="搜索 昵称 / 用户名"
+                    />
                 </FormControl>
             </DialogContent>
             <DialogActions>
diff --git a/src/component/Admin/Group/EditGroup.js b/src/component/Admin/Group/EditGroup.js
index 4a3d7d9..8569cd9 100644
--- a/src/component/Admin/Group/EditGroup.js
+++ b/src/component/Admin/Group/EditGroup.js
@@ -1,14 +1,14 @@
-import React, {useCallback, useEffect, useState} from "react";
-import {useParams} from "react-router";
+import React, { useCallback, useEffect, useState } from "react";
+import { useParams } from "react-router";
 import API from "../../../middleware/Api";
-import {useDispatch} from "react-redux";
-import {toggleSnackbar} from "../../../actions";
+import { useDispatch } from "react-redux";
+import { toggleSnackbar } from "../../../actions";
 import GroupForm from "./GroupForm";
 
-export default function EditGroupPreload( ) {
-    const [group,setGroup] = useState({});
+export default function EditGroupPreload() {
+    const [group, setGroup] = useState({});
 
-    const {id } = useParams();
+    const { id } = useParams();
 
     const dispatch = useDispatch();
     const ToggleSnackbar = useCallback(
@@ -17,14 +17,13 @@ export default function EditGroupPreload( ) {
         [dispatch]
     );
 
-
-    useEffect(()=>{
+    useEffect(() => {
         setGroup({});
         API.get("/admin/group/" + id)
             .then(response => {
                 // 布尔值转换
                 ["ShareEnabled", "WebDAVEnabled"].forEach(v => {
-                    response.data[v] = response.data[v]?"true":"false";
+                    response.data[v] = response.data[v] ? "true" : "false";
                 });
                 [
                     "archive_download",
@@ -33,8 +32,11 @@ export default function EditGroupPreload( ) {
                     "share_download",
                     "aria2"
                 ].forEach(v => {
-                    if (response.data.OptionsSerialized[v] !== undefined){
-                        response.data.OptionsSerialized[v] = response.data.OptionsSerialized[v]?"true":"false";
+                    if (response.data.OptionsSerialized[v] !== undefined) {
+                        response.data.OptionsSerialized[v] = response.data
+                            .OptionsSerialized[v]
+                            ? "true"
+                            : "false";
                     }
                 });
 
@@ -42,40 +44,41 @@ export default function EditGroupPreload( ) {
                 ["MaxStorage", "SpeedLimit"].forEach(v => {
                     response.data[v] = response.data[v].toString();
                 });
-                [
-                    "compress_size",
-                    "decompress_size",
-                ].forEach(v => {
-                    if (response.data.OptionsSerialized[v] !== undefined){
-                        response.data.OptionsSerialized[v] = response.data.OptionsSerialized[v].toString();
+                ["compress_size", "decompress_size"].forEach(v => {
+                    if (response.data.OptionsSerialized[v] !== undefined) {
+                        response.data.OptionsSerialized[
+                            v
+                        ] = response.data.OptionsSerialized[v].toString();
                     }
                 });
                 response.data.PolicyList = response.data.PolicyList[0];
 
                 // JSON转换
-                if(response.data.OptionsSerialized.aria2_options === undefined){
-                    response.data.OptionsSerialized.aria2_options = "{}"
-                }else{
+                if (
+                    response.data.OptionsSerialized.aria2_options === undefined
+                ) {
+                    response.data.OptionsSerialized.aria2_options = "{}";
+                } else {
                     try {
-                        response.data.OptionsSerialized.aria2_options = JSON.stringify(response.data.OptionsSerialized.aria2_options);
-                    }catch (e) {
-                        ToggleSnackbar("top", "right", "Aria2 设置项格式错误", "warning");
+                        response.data.OptionsSerialized.aria2_options = JSON.stringify(
+                            response.data.OptionsSerialized.aria2_options
+                        );
+                    } catch (e) {
+                        ToggleSnackbar(
+                            "top",
+                            "right",
+                            "Aria2 设置项格式错误",
+                            "warning"
+                        );
                         return;
                     }
-
                 }
                 setGroup(response.data);
             })
             .catch(error => {
                 ToggleSnackbar("top", "right", error.message, "error");
             });
-    },[id]);
+    }, [id]);
 
-    return (
-        <div>
-            {group.ID !== undefined &&
-                <GroupForm group={group}/>
-            }
-        </div>
-    );
+    return <div>{group.ID !== undefined && <GroupForm group={group} />}</div>;
 }
diff --git a/src/component/Admin/Group/Group.js b/src/component/Admin/Group/Group.js
index 415ba87..91648ab 100644
--- a/src/component/Admin/Group/Group.js
+++ b/src/component/Admin/Group/Group.js
@@ -69,7 +69,6 @@ function useQuery() {
     return new URLSearchParams(useLocation().search);
 }
 
-
 export default function Group() {
     const classes = useStyles();
     const [groups, setGroups] = useState([]);
@@ -91,37 +90,41 @@ export default function Group() {
     );
 
     const loadList = () => {
-      API.post("/admin/group/list", {
-          page: page,
-          page_size: pageSize,
-          order_by: "id desc",
-      })
-          .then(response => {
-              setGroups(response.data.items);
-              setStatics(response.data.statics);
-              setTotal(response.data.total);
-              setPolicies(response.data.policies);
-          })
-          .catch(error => {
-              ToggleSnackbar("top", "right", error.message, "error");
-          });
+        API.post("/admin/group/list", {
+            page: page,
+            page_size: pageSize,
+            order_by: "id desc"
+        })
+            .then(response => {
+                setGroups(response.data.items);
+                setStatics(response.data.statics);
+                setTotal(response.data.total);
+                setPolicies(response.data.policies);
+            })
+            .catch(error => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
     };
 
-    useEffect(()=>{
-        if(query.get("code") === "0"){
+    useEffect(() => {
+        if (query.get("code") === "0") {
             ToggleSnackbar("top", "right", "授权成功", "success");
-        }else if (query.get("msg") && query.get("msg")!==""){
-            ToggleSnackbar("top", "right", query.get("msg") + ", "+ query.get("err"), "warning");
+        } else if (query.get("msg") && query.get("msg") !== "") {
+            ToggleSnackbar(
+                "top",
+                "right",
+                query.get("msg") + ", " + query.get("err"),
+                "warning"
+            );
         }
-
-    },[location])
+    }, [location]);
 
     useEffect(() => {
         loadList();
     }, [page, pageSize]);
 
-    const deletePolicy = (id) =>{
-        API.delete("/admin/group/" + id,)
+    const deletePolicy = id => {
+        API.delete("/admin/group/" + id)
             .then(() => {
                 loadList();
                 ToggleSnackbar("top", "right", "用户组已删除", "success");
@@ -129,7 +132,7 @@ export default function Group() {
             .catch(error => {
                 ToggleSnackbar("top", "right", error.message, "error");
             });
-    }
+    };
 
     return (
         <div>
@@ -156,7 +159,7 @@ export default function Group() {
                 <TableContainer className={classes.container}>
                     <Table aria-label="sticky table" size={"small"}>
                         <TableHead>
-                            <TableRow style={{height:52}}>
+                            <TableRow style={{ height: 52 }}>
                                 {columns.map(column => (
                                     <TableCell
                                         key={column.id}
@@ -174,16 +177,20 @@ export default function Group() {
                                     <TableCell>{row.ID}</TableCell>
                                     <TableCell>{row.Name}</TableCell>
                                     <TableCell>
-                                        {row.PolicyList !== null && row.PolicyList.map((pid,key)=>{
-                                            let res = "";
-                                            if (policies[pid]){
-                                                res += policies[pid].Name;
-                                            }
-                                            if (key !== row.PolicyList.length-1){
-                                                res += " / ";
-                                            }
-                                            return res
-                                        })}
+                                        {row.PolicyList !== null &&
+                                            row.PolicyList.map((pid, key) => {
+                                                let res = "";
+                                                if (policies[pid]) {
+                                                    res += policies[pid].Name;
+                                                }
+                                                if (
+                                                    key !==
+                                                    row.PolicyList.length - 1
+                                                ) {
+                                                    res += " / ";
+                                                }
+                                                return res;
+                                            })}
                                     </TableCell>
                                     <TableCell align={"right"}>
                                         {statics[row.ID] !== undefined &&
@@ -195,16 +202,28 @@ export default function Group() {
                                     </TableCell>
                                     <TableCell align={"right"}>
                                         <Tooltip title={"删除"}>
-                                            <IconButton onClick={()=>deletePolicy(row.ID)} size={"small"}>
-                                                <Delete/>
+                                            <IconButton
+                                                onClick={() =>
+                                                    deletePolicy(row.ID)
+                                                }
+                                                size={"small"}
+                                            >
+                                                <Delete />
                                             </IconButton>
                                         </Tooltip>
                                         <Tooltip title={"编辑"}>
-                                            <IconButton onClick={()=>history.push("/admin/group/edit/" + row.ID)} size={"small"}>
-                                                <Edit/>
+                                            <IconButton
+                                                onClick={() =>
+                                                    history.push(
+                                                        "/admin/group/edit/" +
+                                                            row.ID
+                                                    )
+                                                }
+                                                size={"small"}
+                                            >
+                                                <Edit />
                                             </IconButton>
                                         </Tooltip>
-
                                     </TableCell>
                                 </TableRow>
                             ))}
diff --git a/src/component/Admin/Group/GroupForm.js b/src/component/Admin/Group/GroupForm.js
index 3492edc..5ca4f41 100644
--- a/src/component/Admin/Group/GroupForm.js
+++ b/src/component/Admin/Group/GroupForm.js
@@ -152,8 +152,9 @@ export default function GroupForm(props) {
             "share_download",
             "aria2"
         ].forEach(v => {
-            if (groupCopy.OptionsSerialized[v] !== undefined){
-                groupCopy.OptionsSerialized[v] = groupCopy.OptionsSerialized[v] === "true";
+            if (groupCopy.OptionsSerialized[v] !== undefined) {
+                groupCopy.OptionsSerialized[v] =
+                    groupCopy.OptionsSerialized[v] === "true";
             }
         });
 
@@ -161,19 +162,20 @@ export default function GroupForm(props) {
         ["MaxStorage", "SpeedLimit"].forEach(v => {
             groupCopy[v] = parseInt(groupCopy[v]);
         });
-        [
-            "compress_size",
-            "decompress_size",
-        ].forEach(v => {
-            if (groupCopy.OptionsSerialized[v] !== undefined){
-                groupCopy.OptionsSerialized[v] = parseInt(groupCopy.OptionsSerialized[v]);
+        ["compress_size", "decompress_size"].forEach(v => {
+            if (groupCopy.OptionsSerialized[v] !== undefined) {
+                groupCopy.OptionsSerialized[v] = parseInt(
+                    groupCopy.OptionsSerialized[v]
+                );
             }
         });
         groupCopy.PolicyList = [parseInt(groupCopy.PolicyList)];
         // JSON转换
         try {
-            groupCopy.OptionsSerialized.aria2_options = JSON.parse(groupCopy.OptionsSerialized.aria2_options);
-        }catch (e) {
+            groupCopy.OptionsSerialized.aria2_options = JSON.parse(
+                groupCopy.OptionsSerialized.aria2_options
+            );
+        } catch (e) {
             ToggleSnackbar("top", "right", "Aria2 设置项格式错误", "warning");
             return;
         }
@@ -184,7 +186,12 @@ export default function GroupForm(props) {
         })
             .then(() => {
                 history.push("/admin/group");
-                ToggleSnackbar("top", "right", "用户组已"+ (props.group ? "保存" : "添加"), "success");
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    "用户组已" + (props.group ? "保存" : "添加"),
+                    "success"
+                );
             })
             .catch(error => {
                 ToggleSnackbar("top", "right", error.message, "error");
@@ -192,7 +199,6 @@ export default function GroupForm(props) {
             .then(() => {
                 setLoading(false);
             });
-
     };
 
     return (
@@ -205,68 +211,71 @@ export default function GroupForm(props) {
                     </Typography>
 
                     <div className={classes.formContainer}>
+                        {group.ID !== 3 && (
+                            <>
+                                <div className={classes.form}>
+                                    <FormControl fullWidth>
+                                        <InputLabel htmlFor="component-helper">
+                                            用户组名
+                                        </InputLabel>
+                                        <Input
+                                            value={group.Name}
+                                            onChange={handleChange("Name")}
+                                            required
+                                        />
+                                        <FormHelperText id="component-helper-text">
+                                            用户组的名称
+                                        </FormHelperText>
+                                    </FormControl>
+                                </div>
 
-                        {group.ID !== 3 && <>
-                            <div className={classes.form}>
-                                <FormControl fullWidth>
-                                    <InputLabel htmlFor="component-helper">
-                                        用户组名
-                                    </InputLabel>
-                                    <Input
-                                        value={group.Name}
-                                        onChange={handleChange("Name")}
-                                        required
-                                    />
+                                <div className={classes.form}>
+                                    <FormControl fullWidth>
+                                        <InputLabel htmlFor="component-helper">
+                                            存储策略
+                                        </InputLabel>
+                                        <Select
+                                            labelId="demo-mutiple-chip-label"
+                                            id="demo-mutiple-chip"
+                                            value={group.PolicyList}
+                                            onChange={handleChange(
+                                                "PolicyList"
+                                            )}
+                                            input={
+                                                <Input id="select-multiple-chip" />
+                                            }
+                                        >
+                                            {Object.keys(policies).map(pid => (
+                                                <MenuItem key={pid} value={pid}>
+                                                    {policies[pid]}
+                                                </MenuItem>
+                                            ))}
+                                        </Select>
+                                        <FormHelperText id="component-helper-text">
+                                            指定用户组的存储策略。
+                                        </FormHelperText>
+                                    </FormControl>
+                                </div>
+
+                                <div className={classes.form}>
+                                    <FormControl fullWidth>
+                                        <SizeInput
+                                            value={group.MaxStorage}
+                                            onChange={handleChange(
+                                                "MaxStorage"
+                                            )}
+                                            min={0}
+                                            max={9223372036854775807}
+                                            label={"初始容量"}
+                                            required
+                                        />
+                                    </FormControl>
                                     <FormHelperText id="component-helper-text">
-                                        用户组的名称
+                                        用户组下的用户初始可用最大容量
                                     </FormHelperText>
-                                </FormControl>
-                            </div>
-
-                            <div className={classes.form}>
-                                <FormControl fullWidth>
-                                    <InputLabel htmlFor="component-helper">
-                                        存储策略
-                                    </InputLabel>
-                                    <Select
-                                        labelId="demo-mutiple-chip-label"
-                                        id="demo-mutiple-chip"
-                                        value={group.PolicyList}
-                                        onChange={handleChange("PolicyList")}
-                                        input={<Input id="select-multiple-chip" />}
-                                    >
-                                        {Object.keys(policies).map(pid => (
-                                            <MenuItem
-                                                key={pid}
-                                                value={pid}
-                                            >
-                                                {policies[pid]}
-                                            </MenuItem>
-                                        ))}
-                                    </Select>
-                                    <FormHelperText id="component-helper-text">
-                                        指定用户组的存储策略。
-                                    </FormHelperText>
-                                </FormControl>
-                            </div>
-
-                            <div className={classes.form}>
-                                <FormControl fullWidth>
-                                    <SizeInput
-                                        value={group.MaxStorage}
-                                        onChange={handleChange("MaxStorage")}
-                                        min={0}
-                                        max={9223372036854775807}
-                                        label={"初始容量"}
-                                        required
-                                    />
-                                </FormControl>
-                                <FormHelperText id="component-helper-text">
-                                    用户组下的用户初始可用最大容量
-                                </FormHelperText>
-                            </div>
-                        </>}
-
+                                </div>
+                            </>
+                        )}
 
                         <div className={classes.form}>
                             <FormControl fullWidth>
@@ -286,27 +295,29 @@ export default function GroupForm(props) {
                             </FormHelperText>
                         </div>
 
-                        {group.ID !== 3 && <div className={classes.form}>
-                            <FormControl fullWidth>
-                                <FormControlLabel
-                                    control={
-                                        <Switch
-                                            checked={
-                                                group.ShareEnabled === "true"
-                                            }
-                                            onChange={handleCheckChange(
-                                                "ShareEnabled"
-                                            )}
-                                        />
-                                    }
-                                    label="允许创建分享"
-                                />
-                                <FormHelperText id="component-helper-text">
-                                    关闭后，用户无法创建分享链接
-                                </FormHelperText>
-                            </FormControl>
-                        </div>}
-
+                        {group.ID !== 3 && (
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <FormControlLabel
+                                        control={
+                                            <Switch
+                                                checked={
+                                                    group.ShareEnabled ===
+                                                    "true"
+                                                }
+                                                onChange={handleCheckChange(
+                                                    "ShareEnabled"
+                                                )}
+                                            />
+                                        }
+                                        label="允许创建分享"
+                                    />
+                                    <FormHelperText id="component-helper-text">
+                                        关闭后，用户无法创建分享链接
+                                    </FormHelperText>
+                                </FormControl>
+                            </div>
+                        )}
 
                         <div className={classes.form}>
                             <FormControl fullWidth>
@@ -330,26 +341,30 @@ export default function GroupForm(props) {
                             </FormControl>
                         </div>
 
-                        {group.ID !== 3 && <div className={classes.form}>
-                            <FormControl fullWidth>
-                                <FormControlLabel
-                                    control={
-                                        <Switch
-                                            checked={
-                                                group.WebDAVEnabled === "true"
-                                            }
-                                            onChange={handleCheckChange(
-                                                "WebDAVEnabled"
-                                            )}
-                                        />
-                                    }
-                                    label="WebDAV"
-                                />
-                                <FormHelperText id="component-helper-text">
-                                    关闭后，用户无法通过 WebDAV 协议连接至网盘
-                                </FormHelperText>
-                            </FormControl>
-                        </div>}
+                        {group.ID !== 3 && (
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <FormControlLabel
+                                        control={
+                                            <Switch
+                                                checked={
+                                                    group.WebDAVEnabled ===
+                                                    "true"
+                                                }
+                                                onChange={handleCheckChange(
+                                                    "WebDAVEnabled"
+                                                )}
+                                            />
+                                        }
+                                        label="WebDAV"
+                                    />
+                                    <FormHelperText id="component-helper-text">
+                                        关闭后，用户无法通过 WebDAV
+                                        协议连接至网盘
+                                    </FormHelperText>
+                                </FormControl>
+                            </div>
+                        )}
 
                         <div className={classes.form}>
                             <FormControl fullWidth>
@@ -374,28 +389,29 @@ export default function GroupForm(props) {
                             </FormControl>
                         </div>
 
-                        {group.ID !== 3 && <div className={classes.form}>
-                            <FormControl fullWidth>
-                                <FormControlLabel
-                                    control={
-                                        <Switch
-                                            checked={
-                                                group.OptionsSerialized
-                                                    .aria2 === "true"
-                                            }
-                                            onChange={handleOptionCheckChange(
-                                                "aria2"
-                                            )}
-                                        />
-                                    }
-                                    label="离线下载"
-                                />
-                                <FormHelperText id="component-helper-text">
-                                    是否允许用户创建离线下载任务
-                                </FormHelperText>
-                            </FormControl>
-                        </div>}
-
+                        {group.ID !== 3 && (
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <FormControlLabel
+                                        control={
+                                            <Switch
+                                                checked={
+                                                    group.OptionsSerialized
+                                                        .aria2 === "true"
+                                                }
+                                                onChange={handleOptionCheckChange(
+                                                    "aria2"
+                                                )}
+                                            />
+                                        }
+                                        label="离线下载"
+                                    />
+                                    <FormHelperText id="component-helper-text">
+                                        是否允许用户创建离线下载任务
+                                    </FormHelperText>
+                                </FormControl>
+                            </div>
+                        )}
 
                         <Collapse in={group.OptionsSerialized.aria2 === "true"}>
                             <div className={classes.form}>
@@ -445,27 +461,29 @@ export default function GroupForm(props) {
                             </FormControl>
                         </div>
 
-                        {group.ID !== 3 && <div className={classes.form}>
-                            <FormControl fullWidth>
-                                <FormControlLabel
-                                    control={
-                                        <Switch
-                                            checked={
-                                                group.OptionsSerialized
-                                                    .archive_task === "true"
-                                            }
-                                            onChange={handleOptionCheckChange(
-                                                "archive_task"
-                                            )}
-                                        />
-                                    }
-                                    label="压缩/解压缩 任务"
-                                />
-                                <FormHelperText id="component-helper-text">
-                                    是否用户创建 压缩/解压缩 任务
-                                </FormHelperText>
-                            </FormControl>
-                        </div>}
+                        {group.ID !== 3 && (
+                            <div className={classes.form}>
+                                <FormControl fullWidth>
+                                    <FormControlLabel
+                                        control={
+                                            <Switch
+                                                checked={
+                                                    group.OptionsSerialized
+                                                        .archive_task === "true"
+                                                }
+                                                onChange={handleOptionCheckChange(
+                                                    "archive_task"
+                                                )}
+                                            />
+                                        }
+                                        label="压缩/解压缩 任务"
+                                    />
+                                    <FormHelperText id="component-helper-text">
+                                        是否用户创建 压缩/解压缩 任务
+                                    </FormHelperText>
+                                </FormControl>
+                            </div>
+                        )}
 
                         <Collapse
                             in={group.OptionsSerialized.archive_task === "true"}
diff --git a/src/component/Admin/Index.js b/src/component/Admin/Index.js
index 1447fbf..993aac1 100644
--- a/src/component/Admin/Index.js
+++ b/src/component/Admin/Index.js
@@ -17,11 +17,31 @@ import ListItemText from "@material-ui/core/ListItemText";
 import Paper from "@material-ui/core/Paper";
 import { makeStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
-import { Description, Favorite, FileCopy, Forum, GitHub, Home, Launch, Lock, People, Public, Telegram } from "@material-ui/icons";
+import {
+    Description,
+    Favorite,
+    FileCopy,
+    Forum,
+    GitHub,
+    Home,
+    Launch,
+    Lock,
+    People,
+    Public,
+    Telegram
+} from "@material-ui/icons";
 import axios from "axios";
 import React, { useCallback, useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
-import { CartesianGrid, Legend, Line, LineChart, Tooltip, XAxis, YAxis } from "recharts";
+import {
+    CartesianGrid,
+    Legend,
+    Line,
+    LineChart,
+    Tooltip,
+    XAxis,
+    YAxis
+} from "recharts";
 import ResponsiveContainer from "recharts/lib/component/ResponsiveContainer";
 import TimeAgo from "timeago-react";
 import { toggleSnackbar } from "../../actions";
@@ -98,13 +118,15 @@ export default function Index() {
         [dispatch]
     );
 
-    const ResetSiteURL = ()=>{
+    const ResetSiteURL = () => {
         setOpen(false);
-        API.patch("/admin/setting",{
-            options:[{
-                key:"siteURL",
-                value:window.location.origin,
-            }],
+        API.patch("/admin/setting", {
+            options: [
+                {
+                    key: "siteURL",
+                    value: window.location.origin
+                }
+            ]
         })
             .then(() => {
                 setSiteURL(window.location.origin);
@@ -113,7 +135,7 @@ export default function Index() {
             .catch(error => {
                 ToggleSnackbar("top", "right", error.message, "error");
             });
-    }
+    };
 
     useEffect(() => {
         API.get("/admin/summary")
@@ -136,7 +158,10 @@ export default function Index() {
                 });
                 setVersion(response.data.version);
                 setSiteURL(response.data.siteURL);
-                if (response.data.siteURL === "" || response.data.siteURL !== window.location.origin){
+                if (
+                    response.data.siteURL === "" ||
+                    response.data.siteURL !== window.location.origin
+                ) {
                     setOpen(true);
                 }
             })
@@ -165,27 +190,36 @@ export default function Index() {
         <Grid container spacing={3}>
             <Dialog
                 open={open}
-                onClose={()=>setOpen(false)}
+                onClose={() => setOpen(false)}
                 aria-labelledby="alert-dialog-title"
                 aria-describedby="alert-dialog-description"
             >
-                <DialogTitle id="alert-dialog-title">{"确定站点URL设置"}</DialogTitle>
+                <DialogTitle id="alert-dialog-title">
+                    {"确定站点URL设置"}
+                </DialogTitle>
                 <DialogContent>
                     <DialogContentText id="alert-dialog-description">
                         <Typography>
-                            {siteURL === "" && "您尚未设定站点URL，是否要将其设定为当前的 "+ window.location.origin + " ?"}
-                            {siteURL !== "" && "您设置的站点URL与当前实际不一致，是否要将其设定为当前的 "+ window.location.origin + " ?"}
+                            {siteURL === "" &&
+                                "您尚未设定站点URL，是否要将其设定为当前的 " +
+                                    window.location.origin +
+                                    " ?"}
+                            {siteURL !== "" &&
+                                "您设置的站点URL与当前实际不一致，是否要将其设定为当前的 " +
+                                    window.location.origin +
+                                    " ?"}
                         </Typography>
                         <Typography>
-                            此设置非常重要，请确保其与您站点的实际地址一致。你可以在 参数设置 - 站点信息 中更改此设置。
+                            此设置非常重要，请确保其与您站点的实际地址一致。你可以在
+                            参数设置 - 站点信息 中更改此设置。
                         </Typography>
-                        </DialogContentText>
+                    </DialogContentText>
                 </DialogContent>
                 <DialogActions>
-                    <Button onClick={()=>setOpen(false)} color="default">
+                    <Button onClick={() => setOpen(false)} color="default">
                         忽略
                     </Button>
-                    <Button onClick={()=>ResetSiteURL()} color="primary">
+                    <Button onClick={() => ResetSiteURL()} color="primary">
                         更改
                     </Button>
                 </DialogActions>
@@ -294,7 +328,10 @@ export default function Index() {
                                 Cloudreve
                             </Typography>
                             <Typography className={classes.version}>
-                                {version.backend} {version.is_pro === "true" && <Chip size="small" label="Pro" />}
+                                {version.backend}{" "}
+                                {version.is_pro === "true" && (
+                                    <Chip size="small" label="Pro" />
+                                )}
                             </Typography>
                         </div>
                     </div>
@@ -334,9 +371,7 @@ export default function Index() {
                             <ListItem
                                 button
                                 onClick={() =>
-                                    window.open(
-                                        "https://docs.cloudreve.org/"
-                                    )
+                                    window.open("https://docs.cloudreve.org/")
                                 }
                             >
                                 <ListItemIcon>
@@ -385,7 +420,7 @@ export default function Index() {
                                     )
                                 }
                             >
-                                <ListItemIcon style={{color:"#ff789d"}}>
+                                <ListItemIcon style={{ color: "#ff789d" }}>
                                     <Favorite />
                                 </ListItemIcon>
                                 <ListItemText primary="捐助开发者" />
@@ -400,58 +435,72 @@ export default function Index() {
             <Grid item xs={12} md={8} lg={9}>
                 <Paper className={classes.paper}>
                     <List>
-                        {news && news.map((v) => (
-                            <>
-                                <ListItem button alignItems="flex-start"
-                                          onClick={()=>window.open("https://forum.cloudreve.org/d/" + v.id)}
-                                >
-                                    <ListItemAvatar>
-                                        <Avatar
-                                            alt="Travis Howard"
-                                            src={
-                                                newsUsers[
-                                                    v.relationships.startUser
-                                                        .data.id
-                                                ] &&
-                                                newsUsers[
-                                                    v.relationships.startUser
-                                                        .data.id
-                                                ].avatarUrl
-                                            }
-                                        />
-                                    </ListItemAvatar>
-                                    <ListItemText
-                                        primary={v.attributes.title}
-                                        secondary={
-                                            <React.Fragment>
-                                                <Typography
-                                                    component="span"
-                                                    variant="body2"
-                                                    className={classes.inline}
-                                                    color="textPrimary"
-                                                >
-                                                    {newsUsers[
+                        {news &&
+                            news.map(v => (
+                                <>
+                                    <ListItem
+                                        button
+                                        alignItems="flex-start"
+                                        onClick={() =>
+                                            window.open(
+                                                "https://forum.cloudreve.org/d/" +
+                                                    v.id
+                                            )
+                                        }
+                                    >
+                                        <ListItemAvatar>
+                                            <Avatar
+                                                alt="Travis Howard"
+                                                src={
+                                                    newsUsers[
                                                         v.relationships
                                                             .startUser.data.id
                                                     ] &&
-                                                        newsUsers[
+                                                    newsUsers[
+                                                        v.relationships
+                                                            .startUser.data.id
+                                                    ].avatarUrl
+                                                }
+                                            />
+                                        </ListItemAvatar>
+                                        <ListItemText
+                                            primary={v.attributes.title}
+                                            secondary={
+                                                <React.Fragment>
+                                                    <Typography
+                                                        component="span"
+                                                        variant="body2"
+                                                        className={
+                                                            classes.inline
+                                                        }
+                                                        color="textPrimary"
+                                                    >
+                                                        {newsUsers[
                                                             v.relationships
                                                                 .startUser.data
                                                                 .id
-                                                        ].username}{" "}
-                                                </Typography>
-                                                发表于{" "}
-                                                <TimeAgo
-                                                    datetime={v.attributes.startTime}
-                                                    locale='zh_CN'
-                                                />
-                                            </React.Fragment>
-                                        }
-                                    />
-                                </ListItem>
-                                <Divider />
-                            </>
-                        ))}
+                                                        ] &&
+                                                            newsUsers[
+                                                                v.relationships
+                                                                    .startUser
+                                                                    .data.id
+                                                            ].username}{" "}
+                                                    </Typography>
+                                                    发表于{" "}
+                                                    <TimeAgo
+                                                        datetime={
+                                                            v.attributes
+                                                                .startTime
+                                                        }
+                                                        locale="zh_CN"
+                                                    />
+                                                </React.Fragment>
+                                            }
+                                        />
+                                    </ListItem>
+                                    <Divider />
+                                </>
+                            ))}
                     </List>
                 </Paper>
             </Grid>
diff --git a/src/component/Admin/Policy/AddPolicy.js b/src/component/Admin/Policy/AddPolicy.js
index bca62eb..fff9f6f 100644
--- a/src/component/Admin/Policy/AddPolicy.js
+++ b/src/component/Admin/Policy/AddPolicy.js
@@ -20,11 +20,10 @@ const useStyles = makeStyles(theme => ({
     },
     content: {
         padding: theme.spacing(2)
-    },
+    }
 }));
 
-
-export default function AddPolicyParent( ) {
+export default function AddPolicyParent() {
     const classes = useStyles();
 
     const { type } = useParams();
@@ -32,14 +31,14 @@ export default function AddPolicyParent( ) {
     return (
         <div>
             <Paper square className={classes.content}>
-                {type==="local"&&<LocalGuide/>}
-                {type==="remote"&&<RemoteGuide/>}
-                {type==="qiniu"&&<QiniuGuide/>}
-                {type==="oss"&&<OSSGuide/>}
-                {type==="upyun"&&<UpyunGuide/>}
-                {type==="cos"&&<COSGuide/>}
-                {type==="onedrive"&&<OneDriveGuide/>}
-                {type==="s3"&&(<S3Guide/>)}
+                {type === "local" && <LocalGuide />}
+                {type === "remote" && <RemoteGuide />}
+                {type === "qiniu" && <QiniuGuide />}
+                {type === "oss" && <OSSGuide />}
+                {type === "upyun" && <UpyunGuide />}
+                {type === "cos" && <COSGuide />}
+                {type === "onedrive" && <OneDriveGuide />}
+                {type === "s3" && <S3Guide />}
             </Paper>
         </div>
     );
diff --git a/src/component/Admin/Policy/EditPolicy.js b/src/component/Admin/Policy/EditPolicy.js
index f53d19c..e7b80ff 100644
--- a/src/component/Admin/Policy/EditPolicy.js
+++ b/src/component/Admin/Policy/EditPolicy.js
@@ -24,16 +24,15 @@ const useStyles = makeStyles(theme => ({
     },
     content: {
         padding: theme.spacing(2)
-    },
+    }
 }));
 
-
-export default function EditPolicyPreload( ) {
+export default function EditPolicyPreload() {
     const classes = useStyles();
-    const [type,setType] = useState("");
-    const [policy,setPolicy] = useState({});
+    const [type, setType] = useState("");
+    const [policy, setPolicy] = useState({});
 
-    const { mode,id } = useParams();
+    const { mode, id } = useParams();
 
     const dispatch = useDispatch();
     const ToggleSnackbar = useCallback(
@@ -42,46 +41,52 @@ export default function EditPolicyPreload( ) {
         [dispatch]
     );
 
-
-    useEffect(()=>{
+    useEffect(() => {
         setType("");
         API.get("/admin/policy/" + id)
             .then(response => {
-                response.data.IsOriginLinkEnable =  response.data.IsOriginLinkEnable ? "true" : "false";
-                response.data.AutoRename =  response.data.AutoRename ? "true" : "false";
-                response.data.MaxSize =  response.data.MaxSize.toString();
-                response.data.IsPrivate =  response.data.IsPrivate ? "true" : "false";
-                response.data.OptionsSerialized.file_type =
-                    response.data.OptionsSerialized.file_type ?
-                    response.data.OptionsSerialized.file_type.join(","):
-                        "";
+                response.data.IsOriginLinkEnable = response.data
+                    .IsOriginLinkEnable
+                    ? "true"
+                    : "false";
+                response.data.AutoRename = response.data.AutoRename
+                    ? "true"
+                    : "false";
+                response.data.MaxSize = response.data.MaxSize.toString();
+                response.data.IsPrivate = response.data.IsPrivate
+                    ? "true"
+                    : "false";
+                response.data.OptionsSerialized.file_type = response.data
+                    .OptionsSerialized.file_type
+                    ? response.data.OptionsSerialized.file_type.join(",")
+                    : "";
                 setPolicy(response.data);
                 setType(response.data.Type);
             })
             .catch(error => {
                 ToggleSnackbar("top", "right", error.message, "error");
             });
-    },[id]);
+    }, [id]);
 
     return (
         <div>
             <Paper square className={classes.content}>
-                {mode === "guide" &&
+                {mode === "guide" && (
                     <>
-                        {type==="local"&&<LocalGuide policy={policy}/>}
-                        {type==="remote"&&<RemoteGuide policy={policy}/>}
-                        {type==="qiniu"&&<QiniuGuide policy={policy}/>}
-                        {type==="oss"&&<OSSGuide policy={policy}/>}
-                        {type==="upyun"&&<UpyunGuide policy={policy}/>}
-                        {type==="cos"&&<COSGuide policy={policy}/>}
-                        {type==="onedrive"&&<OneDriveGuide policy={policy}/>}
-                        {type==="s3"&&<S3Guide policy={policy}/>}
+                        {type === "local" && <LocalGuide policy={policy} />}
+                        {type === "remote" && <RemoteGuide policy={policy} />}
+                        {type === "qiniu" && <QiniuGuide policy={policy} />}
+                        {type === "oss" && <OSSGuide policy={policy} />}
+                        {type === "upyun" && <UpyunGuide policy={policy} />}
+                        {type === "cos" && <COSGuide policy={policy} />}
+                        {type === "onedrive" && (
+                            <OneDriveGuide policy={policy} />
+                        )}
+                        {type === "s3" && <S3Guide policy={policy} />}
                     </>
-                }
+                )}
 
-                {mode === "pro" && type !== "" &&
-                    <EditPro policy={policy}/>
-                }
+                {mode === "pro" && type !== "" && <EditPro policy={policy} />}
             </Paper>
         </div>
     );
diff --git a/src/component/Admin/Policy/Guid/COSGuide.js b/src/component/Admin/Policy/Guid/COSGuide.js
index 9ad5cd0..d134bc5 100644
--- a/src/component/Admin/Policy/Guid/COSGuide.js
+++ b/src/component/Admin/Policy/Guid/COSGuide.js
@@ -67,16 +67,17 @@ const useStyles = makeStyles(theme => ({
         marginRight: theme.spacing(1)
     },
     viewButtonLabel: { textTransform: "none" },
-    "@global":{
-        "code":{
+    "@global": {
+        code: {
             color: "rgba(0, 0, 0, 0.87)",
             display: "inline-block",
             padding: "2px 6px",
-            fontFamily:" Consolas, \"Liberation Mono\", Menlo, Courier, monospace",
+            fontFamily:
+                ' Consolas, "Liberation Mono", Menlo, Courier, monospace',
             borderRadius: "2px",
-            backgroundColor: "rgba(255,229,100,0.1)",
-        },
-    },
+            backgroundColor: "rgba(255,229,100,0.1)"
+        }
+    }
 }));
 
 const steps = [
@@ -119,25 +120,31 @@ export default function COSGuide(props) {
     const [skipped, setSkipped] = React.useState(new Set());
     const [magicVar, setMagicVar] = useState("");
     const [useCDN, setUseCDN] = useState("false");
-    const [policy, setPolicy] = useState(props.policy?props.policy:{
-        Type: "cos",
-        Name: "",
-        SecretKey: "",
-        AccessKey: "",
-        BaseURL: "",
-        Server: "",
-        IsPrivate: "true",
-        DirNameRule: "uploads/{year}/{month}/{day}",
-        AutoRename: "true",
-        FileNameRule: "{randomkey8}_{originname}",
-        IsOriginLinkEnable: "false",
-        MaxSize: "0",
-        OptionsSerialized: {
-            file_type: "",
-        }
-    });
-    const [policyID,setPolicyID] = useState(props.policy?props.policy.ID:0);
-    const [region,setRegion] = useState("ap-chengdu");
+    const [policy, setPolicy] = useState(
+        props.policy
+            ? props.policy
+            : {
+                  Type: "cos",
+                  Name: "",
+                  SecretKey: "",
+                  AccessKey: "",
+                  BaseURL: "",
+                  Server: "",
+                  IsPrivate: "true",
+                  DirNameRule: "uploads/{year}/{month}/{day}",
+                  AutoRename: "true",
+                  FileNameRule: "{randomkey8}_{originname}",
+                  IsOriginLinkEnable: "false",
+                  MaxSize: "0",
+                  OptionsSerialized: {
+                      file_type: ""
+                  }
+              }
+    );
+    const [policyID, setPolicyID] = useState(
+        props.policy ? props.policy.ID : 0
+    );
+    const [region, setRegion] = useState("ap-chengdu");
 
     const handleChange = name => event => {
         setPolicy({
@@ -174,8 +181,8 @@ export default function COSGuide(props) {
         const policyCopy = { ...policy };
         policyCopy.OptionsSerialized = { ...policyCopy.OptionsSerialized };
 
-        if (useCDN === "false"){
-            policyCopy.BaseURL = policy.Server
+        if (useCDN === "false") {
+            policyCopy.BaseURL = policy.Server;
         }
 
         // 类型转换
@@ -198,7 +205,12 @@ export default function COSGuide(props) {
             policy: policyCopy
         })
             .then(response => {
-                ToggleSnackbar("top", "right", "存储策略已"+ (props.policy ? "保存" : "添加"), "success");
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    "存储策略已" + (props.policy ? "保存" : "添加"),
+                    "success"
+                );
                 setActiveStep(4);
                 setPolicyID(response.data);
             })
@@ -212,7 +224,7 @@ export default function COSGuide(props) {
         setLoading(false);
     };
 
-    const createCORS = ()=>{
+    const createCORS = () => {
         setLoading(true);
         API.post("/admin/policy/cors", {
             id: policyID
@@ -227,14 +239,13 @@ export default function COSGuide(props) {
             .then(() => {
                 setLoading(false);
             });
+    };
 
-    }
-
-    const creatCallback = ()=>{
+    const creatCallback = () => {
         setLoading(true);
         API.post("/admin/policy/scf", {
             id: policyID,
-            region:region,
+            region: region
         })
             .then(() => {
                 ToggleSnackbar("top", "right", "回调云函数已添加", "success");
@@ -246,11 +257,13 @@ export default function COSGuide(props) {
             .then(() => {
                 setLoading(false);
             });
-    }
+    };
 
     return (
         <div>
-            <Typography variant={"h6"}>{props.policy ? "修改" : "添加"} 腾讯云 COS 存储策略</Typography>
+            <Typography variant={"h6"}>
+                {props.policy ? "修改" : "添加"} 腾讯云 COS 存储策略
+            </Typography>
             <Stepper activeStep={activeStep}>
                 {steps.map((label, index) => {
                     const stepProps = {};
@@ -279,15 +292,15 @@ export default function COSGuide(props) {
                         setActiveStep(1);
                     }}
                 >
-
                     <div className={classes.subStepContainer}>
                         <div className={classes.stepNumberContainer}>
                             <div className={classes.stepNumber}>0</div>
                         </div>
                         <div className={classes.subStepContent}>
                             <Typography variant={"body2"}>
-                                在使用 腾讯云 COS 储策略前，请确保您在 参数设置 - 站点信息
-                                - 站点URL 中填写的 地址与实际相符，并且
+                                在使用 腾讯云 COS 储策略前，请确保您在 参数设置
+                                - 站点信息 - 站点URL 中填写的
+                                地址与实际相符，并且
                                 <strong>能够被外网正常访问</strong>。
                             </Typography>
                         </div>
@@ -301,7 +314,9 @@ export default function COSGuide(props) {
                             <Typography variant={"body2"}>
                                 前往
                                 <Link
-                                    href={"https://console.cloud.tencent.com/cos5"}
+                                    href={
+                                        "https://console.cloud.tencent.com/cos5"
+                                    }
                                     target={"_blank"}
                                 >
                                     COS 管理控制台
@@ -317,7 +332,8 @@ export default function COSGuide(props) {
                         </div>
                         <div className={classes.subStepContent}>
                             <Typography variant={"body2"}>
-                                转到所创建存储桶的基础配置页面，将<code>空间名称</code>填写在下方：
+                                转到所创建存储桶的基础配置页面，将
+                                <code>空间名称</code>填写在下方：
                             </Typography>
                             <div className={classes.form}>
                                 <FormControl fullWidth>
@@ -326,8 +342,9 @@ export default function COSGuide(props) {
                                     </InputLabel>
                                     <Input
                                         inputProps={{
-                                            pattern:"[a-z0-9-]+-[0-9]+",
-                                            title:"空间名格式不正确, 举例：ccc-1252109809"
+                                            pattern: "[a-z0-9-]+-[0-9]+",
+                                            title:
+                                                "空间名格式不正确, 举例：ccc-1252109809"
                                         }}
                                         required
                                         value={policy.BucketName}
@@ -382,8 +399,9 @@ export default function COSGuide(props) {
                         </div>
                         <div className={classes.subStepContent}>
                             <Typography variant={"body2"}>
-                                转到所创建 Bucket 的基础配置，填写<code>基本信息</code>栏目下
-                                给出的 <code>访问域名</code>
+                                转到所创建 Bucket 的基础配置，填写
+                                <code>基本信息</code>栏目下 给出的{" "}
+                                <code>访问域名</code>
                             </Typography>
                             <div className={classes.form}>
                                 <DomainInput
@@ -409,8 +427,8 @@ export default function COSGuide(props) {
                                     <RadioGroup
                                         required
                                         value={useCDN}
-                                        onChange={e=>{
-                                            setUseCDN(e.target.value)
+                                        onChange={e => {
+                                            setUseCDN(e.target.value);
                                         }}
                                         row
                                     >
@@ -442,11 +460,17 @@ export default function COSGuide(props) {
                             <div className={classes.subStepContent}>
                                 <Typography variant={"body2"}>
                                     前往
-                                    <Link href={"https://console.cloud.tencent.com/cdn/access/guid"} target={"_blank"}>
+                                    <Link
+                                        href={
+                                            "https://console.cloud.tencent.com/cdn/access/guid"
+                                        }
+                                        target={"_blank"}
+                                    >
                                         腾讯云 CDN 管理控制台
                                     </Link>
-                                    创建 CDN 加速域名，并设定源站为刚创建的 COS 存储桶。在下方填写
-                                    CDN 加速域名，并选择是否使用 HTTPS：
+                                    创建 CDN 加速域名，并设定源站为刚创建的 COS
+                                    存储桶。在下方填写 CDN
+                                    加速域名，并选择是否使用 HTTPS：
                                 </Typography>
                                 <div className={classes.form}>
                                     <DomainInput
@@ -462,17 +486,24 @@ export default function COSGuide(props) {
 
                     <div className={classes.subStepContainer}>
                         <div className={classes.stepNumberContainer}>
-                            <div className={classes.stepNumber}>{getNumber(6,[
-                                useCDN === "true"
-                            ])}</div>
+                            <div className={classes.stepNumber}>
+                                {getNumber(6, [useCDN === "true"])}
+                            </div>
                         </div>
                         <div className={classes.subStepContent}>
                             <Typography variant={"body2"}>
                                 在腾讯云
-                                <Link href={"https://console.cloud.tencent.com/cam/capi"} target={"_blank"}>
+                                <Link
+                                    href={
+                                        "https://console.cloud.tencent.com/cam/capi"
+                                    }
+                                    target={"_blank"}
+                                >
                                     访问密钥
                                 </Link>
-                                页面获取 一对访问密钥，并填写在下方。请确保这对密钥拥有 COS 和 SCF 服务的访问权限。
+                                页面获取
+                                一对访问密钥，并填写在下方。请确保这对密钥拥有
+                                COS 和 SCF 服务的访问权限。
                             </Typography>
                             <div className={classes.form}>
                                 <FormControl fullWidth>
@@ -482,8 +513,8 @@ export default function COSGuide(props) {
                                     <Input
                                         required
                                         inputProps={{
-                                            pattern:"\\S+" ,
-                                            title:"不能含有空格"
+                                            pattern: "\\S+",
+                                            title: "不能含有空格"
                                         }}
                                         value={policy.AccessKey}
                                         onChange={handleChange("AccessKey")}
@@ -498,8 +529,8 @@ export default function COSGuide(props) {
                                     <Input
                                         required
                                         inputProps={{
-                                            pattern:"\\S+" ,
-                                            title:"不能含有空格"
+                                            pattern: "\\S+",
+                                            title: "不能含有空格"
                                         }}
                                         value={policy.SecretKey}
                                         onChange={handleChange("SecretKey")}
@@ -511,9 +542,9 @@ export default function COSGuide(props) {
 
                     <div className={classes.subStepContainer}>
                         <div className={classes.stepNumberContainer}>
-                            <div className={classes.stepNumber}>{getNumber(7,[
-                                useCDN === "true"
-                            ])}</div>
+                            <div className={classes.stepNumber}>
+                                {getNumber(7, [useCDN === "true"])}
+                            </div>
                         </div>
                         <div className={classes.subStepContent}>
                             <Typography variant={"body2"}>
@@ -567,9 +598,9 @@ export default function COSGuide(props) {
                                 可用魔法变量可参考{" "}
                                 <Link
                                     color={"secondary"}
-                                    onClick={(e) => {
-                                      e.preventDefault()
-                                      setMagicVar("path")
+                                    onClick={e => {
+                                        e.preventDefault();
+                                        setMagicVar("path");
                                     }}
                                 >
                                     路径魔法变量列表
@@ -602,9 +633,9 @@ export default function COSGuide(props) {
                                 可用魔法变量可参考{" "}
                                 <Link
                                     color={"secondary"}
-                                    onClick={(e) => {
-                                      e.preventDefault()
-                                      setMagicVar("file")
+                                    onClick={e => {
+                                        e.preventDefault();
+                                        setMagicVar("file");
                                     }}
                                 >
                                     文件名魔法变量列表
@@ -703,14 +734,22 @@ export default function COSGuide(props) {
                                     <RadioGroup
                                         required
                                         value={policy.IsOriginLinkEnable}
-                                        onChange={e=>{
-                                            if (policy.IsPrivate === "true" && e.target.value==="true"){
-                                                ToggleSnackbar("top", "right","私有空间无法开启此功能", "warning");
-                                                return
+                                        onChange={e => {
+                                            if (
+                                                policy.IsPrivate === "true" &&
+                                                e.target.value === "true"
+                                            ) {
+                                                ToggleSnackbar(
+                                                    "top",
+                                                    "right",
+                                                    "私有空间无法开启此功能",
+                                                    "warning"
+                                                );
+                                                return;
                                             }
-                                            handleChange(
-                                            "IsOriginLinkEnable"
-                                            )(e)
+                                            handleChange("IsOriginLinkEnable")(
+                                                e
+                                            );
                                         }}
                                         row
                                     >
@@ -755,10 +794,7 @@ export default function COSGuide(props) {
             )}
 
             {activeStep === 3 && (
-                <form
-                    className={classes.stepContent}
-                    onSubmit={submitPolicy}
-                >
+                <form className={classes.stepContent} onSubmit={submitPolicy}>
                     <div className={classes.subStepContainer}>
                         <div className={classes.stepNumberContainer}>
                             <div className={classes.stepNumber}>1</div>
@@ -952,11 +988,13 @@ export default function COSGuide(props) {
             {activeStep === 4 && (
                 <form className={classes.stepContent}>
                     <div className={classes.subStepContainer}>
-                        <div className={classes.stepNumberContainer}/>
+                        <div className={classes.stepNumberContainer} />
                         <div className={classes.subStepContent}>
                             <Typography variant={"body2"}>
-                                COS 存储桶 需要正确配置跨域策略后才能使用 Web 端上传文件，Cloudreve
-                                可以帮您自动设置，您也可以参考文档步骤手动设置。如果您已设置过此 Bucket 的跨域策略，此步骤可以跳过。
+                                COS 存储桶 需要正确配置跨域策略后才能使用 Web
+                                端上传文件，Cloudreve
+                                可以帮您自动设置，您也可以参考文档步骤手动设置。如果您已设置过此
+                                Bucket 的跨域策略，此步骤可以跳过。
                             </Typography>
                             <div className={classes.form}>
                                 <Button
@@ -964,7 +1002,7 @@ export default function COSGuide(props) {
                                     color={"secondary"}
                                     variant={"contained"}
                                     className={classes.button}
-                                    onClick={()=>createCORS()}
+                                    onClick={() => createCORS()}
                                     classes={{ label: classes.viewButtonLabel }}
                                 >
                                     让 Cloudreve 帮我设置
@@ -976,16 +1014,18 @@ export default function COSGuide(props) {
                         <Button
                             color={"default"}
                             className={classes.button}
-                            onClick={()=>{
-                                setActiveStep(prevActiveStep => prevActiveStep + 1);
+                            onClick={() => {
+                                setActiveStep(
+                                    prevActiveStep => prevActiveStep + 1
+                                );
                                 setSkipped(prevSkipped => {
-                                    const newSkipped = new Set(prevSkipped.values());
+                                    const newSkipped = new Set(
+                                        prevSkipped.values()
+                                    );
                                     newSkipped.add(activeStep);
                                     return newSkipped;
                                 });
-                            }
-
-                            }
+                            }}
                         >
                             跳过
                         </Button>{" "}
@@ -996,16 +1036,28 @@ export default function COSGuide(props) {
             {activeStep === 5 && (
                 <form className={classes.stepContent}>
                     <div className={classes.subStepContainer}>
-                        <div className={classes.stepNumberContainer}/>
+                        <div className={classes.stepNumberContainer} />
                         <div className={classes.subStepContent}>
                             <Typography variant={"body2"}>
                                 COS 存储桶 客户端直传需要借助腾讯云的
-                                 <Link href={"https://console.cloud.tencent.com/scf/index?rid=16"} target={"_blank"}>云函数</Link>
-                                 产品以确保上传回调可控。如果您打算将此存储策略自用，或者分配给可信赖用户组，此步骤可以跳过。
-                                如果是作为公有使用，请务必创建回调云函数。<br/><br/>
+                                <Link
+                                    href={
+                                        "https://console.cloud.tencent.com/scf/index?rid=16"
+                                    }
+                                    target={"_blank"}
+                                >
+                                    云函数
+                                </Link>
+                                产品以确保上传回调可控。如果您打算将此存储策略自用，或者分配给可信赖用户组，此步骤可以跳过。
+                                如果是作为公有使用，请务必创建回调云函数。
+                                <br />
+                                <br />
+                            </Typography>
+                            <Typography variant={"body2"}>
+                                Cloudreve 可以尝试帮你自动创建回调云函数，请选择
+                                COS 存储桶 所在地域后继续。
+                                创建可能会花费数秒钟，请耐心等待。创建前请确保您的腾讯云账号已开启云函数服务。
                             </Typography>
-                            <Typography variant={"body2"}>Cloudreve 可以尝试帮你自动创建回调云函数，请选择 COS 存储桶 所在地域后继续。
-                                创建可能会花费数秒钟，请耐心等待。创建前请确保您的腾讯云账号已开启云函数服务。</Typography>
 
                             <div className={classes.form}>
                                 <FormControl>
@@ -1014,19 +1066,41 @@ export default function COSGuide(props) {
                                     </InputLabel>
                                     <Select
                                         value={region}
-                                        onChange={e=>setRegion(e.target.value)}
+                                        onChange={e =>
+                                            setRegion(e.target.value)
+                                        }
                                         required
                                     >
-                                        <MenuItem value={"ap-beijing"}>华北地区(北京)</MenuItem>
-                                        <MenuItem value={"ap-chengdu"}>西南地区(成都)</MenuItem>
-                                        <MenuItem value={"ap-guangzhou"}>华南地区(广州)</MenuItem>
-                                        <MenuItem value={"ap-guangzhou-open"}>华南地区(广州Open)</MenuItem>
-                                        <MenuItem value={"ap-hongkong"}>港澳台地区(中国香港)</MenuItem>
-                                        <MenuItem value={"ap-mumbai"}>亚太南部(孟买)</MenuItem>
-                                        <MenuItem value={"ap-shanghai"}>华东地区(上海)</MenuItem>
-                                        <MenuItem value={"ap-singapore"}>亚太东南(新加坡)</MenuItem>
-                                        <MenuItem value={"na-siliconvalley"}>美国西部(硅谷)</MenuItem>
-                                        <MenuItem value={"na-toronto"}>北美地区(多伦多)</MenuItem>
+                                        <MenuItem value={"ap-beijing"}>
+                                            华北地区(北京)
+                                        </MenuItem>
+                                        <MenuItem value={"ap-chengdu"}>
+                                            西南地区(成都)
+                                        </MenuItem>
+                                        <MenuItem value={"ap-guangzhou"}>
+                                            华南地区(广州)
+                                        </MenuItem>
+                                        <MenuItem value={"ap-guangzhou-open"}>
+                                            华南地区(广州Open)
+                                        </MenuItem>
+                                        <MenuItem value={"ap-hongkong"}>
+                                            港澳台地区(中国香港)
+                                        </MenuItem>
+                                        <MenuItem value={"ap-mumbai"}>
+                                            亚太南部(孟买)
+                                        </MenuItem>
+                                        <MenuItem value={"ap-shanghai"}>
+                                            华东地区(上海)
+                                        </MenuItem>
+                                        <MenuItem value={"ap-singapore"}>
+                                            亚太东南(新加坡)
+                                        </MenuItem>
+                                        <MenuItem value={"na-siliconvalley"}>
+                                            美国西部(硅谷)
+                                        </MenuItem>
+                                        <MenuItem value={"na-toronto"}>
+                                            北美地区(多伦多)
+                                        </MenuItem>
                                     </Select>
                                 </FormControl>
                             </div>
@@ -1037,7 +1111,7 @@ export default function COSGuide(props) {
                                     color={"secondary"}
                                     variant={"contained"}
                                     className={classes.button}
-                                    onClick={()=>creatCallback()}
+                                    onClick={() => creatCallback()}
                                     classes={{ label: classes.viewButtonLabel }}
                                 >
                                     让 Cloudreve 帮我创建
@@ -1049,16 +1123,18 @@ export default function COSGuide(props) {
                         <Button
                             color={"default"}
                             className={classes.button}
-                            onClick={()=>{
-                                setActiveStep(prevActiveStep => prevActiveStep + 1);
+                            onClick={() => {
+                                setActiveStep(
+                                    prevActiveStep => prevActiveStep + 1
+                                );
                                 setSkipped(prevSkipped => {
-                                    const newSkipped = new Set(prevSkipped.values());
+                                    const newSkipped = new Set(
+                                        prevSkipped.values()
+                                    );
                                     newSkipped.add(activeStep);
                                     return newSkipped;
                                 });
-                            }
-
-                            }
+                            }}
                         >
                             跳过
                         </Button>{" "}
@@ -1069,7 +1145,9 @@ export default function COSGuide(props) {
             {activeStep === 6 && (
                 <>
                     <form className={classes.stepContent}>
-                        <Typography>存储策略已{props.policy ? "保存" : "添加"}！</Typography>
+                        <Typography>
+                            存储策略已{props.policy ? "保存" : "添加"}！
+                        </Typography>
                         <Typography variant={"body2"} color={"textSecondary"}>
                             要使用此存储策略，请到用户组管理页面，为相应用户组绑定此存储策略。
                         </Typography>
diff --git a/src/component/Admin/Policy/Guid/LocalGuide.js b/src/component/Admin/Policy/Guid/LocalGuide.js
index 0b5307d..b193d17 100644
--- a/src/component/Admin/Policy/Guid/LocalGuide.js
+++ b/src/component/Admin/Policy/Guid/LocalGuide.js
@@ -104,7 +104,7 @@ export default function LocalGuide(props) {
                   FileNameRule: "{randomkey8}_{originname}",
                   IsOriginLinkEnable: "false",
                   BaseURL: "",
-                IsPrivate:"true",
+                  IsPrivate: "true",
                   MaxSize: "0",
                   OptionsSerialized: {
                       file_type: ""
@@ -249,9 +249,9 @@ export default function LocalGuide(props) {
                                 可用魔法变量可参考{" "}
                                 <Link
                                     color={"secondary"}
-                                    onClick={(e) => {
-                                      e.preventDefault()
-                                      setMagicVar("path")
+                                    onClick={e => {
+                                        e.preventDefault();
+                                        setMagicVar("path");
                                     }}
                                 >
                                     路径魔法变量列表
@@ -284,9 +284,9 @@ export default function LocalGuide(props) {
                                 可用魔法变量可参考{" "}
                                 <Link
                                     color={"secondary"}
-                                    onClick={(e) => {
-                                      e.preventDefault()
-                                      setMagicVar("file")
+                                    onClick={e => {
+                                        e.preventDefault();
+                                        setMagicVar("file");
                                     }}
                                 >
                                     文件名魔法变量列表
diff --git a/src/component/Admin/Policy/Guid/QiniuGuide.js b/src/component/Admin/Policy/Guid/QiniuGuide.js
index 2b1d8f8..8b17255 100644
--- a/src/component/Admin/Policy/Guid/QiniuGuide.js
+++ b/src/component/Admin/Policy/Guid/QiniuGuide.js
@@ -95,26 +95,30 @@ export default function RemoteGuide(props) {
 
     const [activeStep, setActiveStep] = useState(0);
     const [loading, setLoading] = useState(false);
-    const [skipped,] = React.useState(new Set());
+    const [skipped] = React.useState(new Set());
     const [magicVar, setMagicVar] = useState("");
     // const [useCDN, setUseCDN] = useState("false");
-    const [policy, setPolicy] = useState(props.policy?props.policy:{
-        Type: "qiniu",
-        Name: "",
-        SecretKey: "",
-        AccessKey: "",
-        BaseURL: "",
-        IsPrivate: "true",
-        DirNameRule: "uploads/{year}/{month}/{day}",
-        AutoRename: "true",
-        FileNameRule: "{randomkey8}_{originname}",
-        IsOriginLinkEnable: "false",
-        MaxSize: "0",
-        OptionsSerialized: {
-            file_type: "",
-            mimetype:"",
-        }
-    });
+    const [policy, setPolicy] = useState(
+        props.policy
+            ? props.policy
+            : {
+                  Type: "qiniu",
+                  Name: "",
+                  SecretKey: "",
+                  AccessKey: "",
+                  BaseURL: "",
+                  IsPrivate: "true",
+                  DirNameRule: "uploads/{year}/{month}/{day}",
+                  AutoRename: "true",
+                  FileNameRule: "{randomkey8}_{originname}",
+                  IsOriginLinkEnable: "false",
+                  MaxSize: "0",
+                  OptionsSerialized: {
+                      file_type: "",
+                      mimetype: ""
+                  }
+              }
+    );
 
     const handleChange = name => event => {
         setPolicy({
@@ -171,7 +175,12 @@ export default function RemoteGuide(props) {
             policy: policyCopy
         })
             .then(() => {
-                ToggleSnackbar("top", "right", "存储策略已"+ (props.policy ? "保存" : "添加"), "success");
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    "存储策略已" + (props.policy ? "保存" : "添加"),
+                    "success"
+                );
                 setActiveStep(5);
             })
             .catch(error => {
@@ -186,7 +195,9 @@ export default function RemoteGuide(props) {
 
     return (
         <div>
-            <Typography variant={"h6"}>{props.policy ? "修改" : "添加"} 七牛 存储策略</Typography>
+            <Typography variant={"h6"}>
+                {props.policy ? "修改" : "添加"} 七牛 存储策略
+            </Typography>
             <Stepper activeStep={activeStep}>
                 {steps.map((label, index) => {
                     const stepProps = {};
@@ -215,15 +226,14 @@ export default function RemoteGuide(props) {
                         setActiveStep(1);
                     }}
                 >
-
                     <div className={classes.subStepContainer}>
                         <div className={classes.stepNumberContainer}>
                             <div className={classes.stepNumber}>0</div>
                         </div>
                         <div className={classes.subStepContent}>
                             <Typography variant={"body2"}>
-                                在使用七牛存储策略前，请确保您在 参数设置 - 站点信息
-                                - 站点URL 中填写的 地址与实际相符，并且
+                                在使用七牛存储策略前，请确保您在 参数设置 -
+                                站点信息 - 站点URL 中填写的 地址与实际相符，并且
                                 <strong>能够被外网正常访问</strong>。
                             </Typography>
                         </div>
@@ -394,9 +404,9 @@ export default function RemoteGuide(props) {
                                 可用魔法变量可参考{" "}
                                 <Link
                                     color={"secondary"}
-                                    onClick={(e) => {
-                                      e.preventDefault()
-                                      setMagicVar("path")
+                                    onClick={e => {
+                                        e.preventDefault();
+                                        setMagicVar("path");
                                     }}
                                 >
                                     路径魔法变量列表
@@ -429,9 +439,9 @@ export default function RemoteGuide(props) {
                                 可用魔法变量可参考{" "}
                                 <Link
                                     color={"secondary"}
-                                    onClick={(e) => {
-                                      e.preventDefault()
-                                      setMagicVar("file")
+                                    onClick={e => {
+                                        e.preventDefault();
+                                        setMagicVar("file");
                                     }}
                                 >
                                     文件名魔法变量列表
@@ -530,14 +540,22 @@ export default function RemoteGuide(props) {
                                     <RadioGroup
                                         required
                                         value={policy.IsOriginLinkEnable}
-                                        onChange={e=>{
-                                            if (policy.IsPrivate === "true" && e.target.value==="true"){
-                                                ToggleSnackbar("top", "right","私有空间无法开启此功能", "warning");
-                                                return
+                                        onChange={e => {
+                                            if (
+                                                policy.IsPrivate === "true" &&
+                                                e.target.value === "true"
+                                            ) {
+                                                ToggleSnackbar(
+                                                    "top",
+                                                    "right",
+                                                    "私有空间无法开启此功能",
+                                                    "warning"
+                                                );
+                                                return;
                                             }
-                                            handleChange(
-                                            "IsOriginLinkEnable"
-                                            )(e)
+                                            handleChange("IsOriginLinkEnable")(
+                                                e
+                                            );
                                         }}
                                         row
                                     >
@@ -762,9 +780,9 @@ export default function RemoteGuide(props) {
                     <div className={classes.subStepContainer}>
                         <div className={classes.stepNumberContainer}>
                             <div className={classes.stepNumber}>
-                                {getNumber(3,[
+                                {getNumber(3, [
                                     policy.MaxSize !== "0",
-                                    policy.OptionsSerialized.file_type !== "",
+                                    policy.OptionsSerialized.file_type !== ""
                                 ])}
                             </div>
                         </div>
@@ -789,8 +807,7 @@ export default function RemoteGuide(props) {
                                                     ...policy,
                                                     OptionsSerialized: {
                                                         ...policy.OptionsSerialized,
-                                                        mimetype:
-                                                            "image/*"
+                                                        mimetype: "image/*"
                                                     }
                                                 });
                                             } else {
@@ -829,16 +846,18 @@ export default function RemoteGuide(props) {
                         <div className={classes.subStepContainer}>
                             <div className={classes.stepNumberContainer}>
                                 <div className={classes.stepNumber}>
-                                    {getNumber(4,[
+                                    {getNumber(4, [
                                         policy.MaxSize !== "0",
-                                        policy.OptionsSerialized.file_type !== "",
+                                        policy.OptionsSerialized.file_type !==
+                                            ""
                                     ])}
                                 </div>
                             </div>
                             <div className={classes.subStepContent}>
                                 <Typography variant={"body2"}>
                                     输入允许上传的 MimeType，多个请以半角逗号 ,
-                                    隔开。七牛服务器会侦测文件内容以判断 MimeType，再用判断值跟指定值进行匹配，匹配成功则允许上传
+                                    隔开。七牛服务器会侦测文件内容以判断
+                                    MimeType，再用判断值跟指定值进行匹配，匹配成功则允许上传
                                 </Typography>
                                 <div className={classes.form}>
                                     <FormControl fullWidth>
@@ -925,7 +944,9 @@ export default function RemoteGuide(props) {
             {activeStep === 5 && (
                 <>
                     <form className={classes.stepContent}>
-                        <Typography>存储策略已{props.policy ? "保存" : "添加"}！</Typography>
+                        <Typography>
+                            存储策略已{props.policy ? "保存" : "添加"}！
+                        </Typography>
                         <Typography variant={"body2"} color={"textSecondary"}>
                             要使用此存储策略，请到用户组管理页面，为相应用户组绑定此存储策略。
                         </Typography>
diff --git a/src/component/Admin/Policy/Guid/RemoteGuide.js b/src/component/Admin/Policy/Guid/RemoteGuide.js
index 37a59e8..5e50943 100644
--- a/src/component/Admin/Policy/Guid/RemoteGuide.js
+++ b/src/component/Admin/Policy/Guid/RemoteGuide.js
@@ -39,13 +39,13 @@ const useStyles = makeStyles(theme => ({
     subStepContainer: {
         display: "flex",
         marginBottom: 20,
-        padding:10,
+        padding: 10,
         transition: theme.transitions.create("background-color", {
             easing: theme.transitions.easing.sharp,
             duration: theme.transitions.duration.leavingScreen
         }),
-        "&:focus-within":{
-            backgroundColor:theme.palette.background.default,
+        "&:focus-within": {
+            backgroundColor: theme.palette.background.default
         }
     },
     stepNumber: {
@@ -57,35 +57,35 @@ const useStyles = makeStyles(theme => ({
         borderRadius: " 50%"
     },
     stepNumberContainer: {
-        marginRight: 10,
+        marginRight: 10
     },
-    stepFooter:{
-        marginTop: 32,
+    stepFooter: {
+        marginTop: 32
     },
     button: {
-        marginRight: theme.spacing(1),
+        marginRight: theme.spacing(1)
     },
-    "@global":{
-        "code":{
+    "@global": {
+        code: {
             color: "rgba(0, 0, 0, 0.87)",
             display: "inline-block",
             padding: "2px 6px",
             fontSize: "14px",
-            fontFamily:" Consolas, \"Liberation Mono\", Menlo, Courier, monospace",
+            fontFamily:
+                ' Consolas, "Liberation Mono", Menlo, Courier, monospace',
             borderRadius: "2px",
-            backgroundColor: "rgba(255,229,100,0.1)",
+            backgroundColor: "rgba(255,229,100,0.1)"
         },
-        "pre":{
+        pre: {
             margin: "24px 0",
             padding: "12px 18px",
             overflow: "auto",
             direction: "ltr",
             borderRadius: "4px",
             backgroundColor: "#272c34",
-            color:"#fff",
+            color: "#fff"
         }
-    },
-
+    }
 }));
 
 const steps = [
@@ -117,25 +117,29 @@ export default function RemoteGuide(props) {
 
     const [activeStep, setActiveStep] = useState(0);
     const [loading, setLoading] = useState(false);
-    const [skipped,] = React.useState(new Set());
-    const [magicVar,setMagicVar] = useState("");
-    const [useCDN,setUseCDN] = useState("false");
-    const [policy, setPolicy] = useState(props.policy?props.policy:{
-        Type:"remote",
-        Name:"",
-        Server:"https://example.com:5212",
-        SecretKey:randomStr(64),
-        DirNameRule: "uploads/{year}/{month}/{day}",
-        AutoRename: "true",
-        FileNameRule: "{randomkey8}_{originname}",
-        IsOriginLinkEnable:"false",
-        BaseURL:"",
-        IsPrivate:"true",
-        MaxSize:"0",
-        OptionsSerialized:{
-            file_type:"",
-        },
-    });
+    const [skipped] = React.useState(new Set());
+    const [magicVar, setMagicVar] = useState("");
+    const [useCDN, setUseCDN] = useState("false");
+    const [policy, setPolicy] = useState(
+        props.policy
+            ? props.policy
+            : {
+                  Type: "remote",
+                  Name: "",
+                  Server: "https://example.com:5212",
+                  SecretKey: randomStr(64),
+                  DirNameRule: "uploads/{year}/{month}/{day}",
+                  AutoRename: "true",
+                  FileNameRule: "{randomkey8}_{originname}",
+                  IsOriginLinkEnable: "false",
+                  BaseURL: "",
+                  IsPrivate: "true",
+                  MaxSize: "0",
+                  OptionsSerialized: {
+                      file_type: ""
+                  }
+              }
+    );
 
     const handleChange = name => event => {
         setPolicy({
@@ -147,10 +151,10 @@ export default function RemoteGuide(props) {
     const handleOptionChange = name => event => {
         setPolicy({
             ...policy,
-            OptionsSerialized:{
+            OptionsSerialized: {
                 ...policy.OptionsSerialized,
                 [name]: event.target.value
-            },
+            }
         });
     };
 
@@ -165,13 +169,13 @@ export default function RemoteGuide(props) {
         [dispatch]
     );
 
-    const testSlave = ()=>{
+    const testSlave = () => {
         setLoading(true);
 
         // 测试路径是否可用
         API.post("/admin/policy/test/slave", {
             server: policy.Server,
-            secret:policy.SecretKey,
+            secret: policy.SecretKey
         })
             .then(() => {
                 ToggleSnackbar("top", "right", "通信正常", "success");
@@ -188,21 +192,27 @@ export default function RemoteGuide(props) {
         e.preventDefault();
         setLoading(true);
 
-        const policyCopy = {...policy};
-        policyCopy.OptionsSerialized = {...policyCopy.OptionsSerialized};
+        const policyCopy = { ...policy };
+        policyCopy.OptionsSerialized = { ...policyCopy.OptionsSerialized };
 
         // 处理存储策略
-        if (useCDN === "false" || policy.IsOriginLinkEnable === "false"){
-            policyCopy.BaseURL = ""
+        if (useCDN === "false" || policy.IsOriginLinkEnable === "false") {
+            policyCopy.BaseURL = "";
         }
 
         // 类型转换
         policyCopy.AutoRename = policyCopy.AutoRename === "true";
-        policyCopy.IsOriginLinkEnable = policyCopy.IsOriginLinkEnable === "true";
+        policyCopy.IsOriginLinkEnable =
+            policyCopy.IsOriginLinkEnable === "true";
         policyCopy.MaxSize = parseInt(policyCopy.MaxSize);
         policyCopy.IsPrivate = policyCopy.IsPrivate === "true";
-        policyCopy.OptionsSerialized.file_type = policyCopy.OptionsSerialized.file_type.split(",");
-        if (policyCopy.OptionsSerialized.file_type.length === 1 && policyCopy.OptionsSerialized.file_type[0] === ""){
+        policyCopy.OptionsSerialized.file_type = policyCopy.OptionsSerialized.file_type.split(
+            ","
+        );
+        if (
+            policyCopy.OptionsSerialized.file_type.length === 1 &&
+            policyCopy.OptionsSerialized.file_type[0] === ""
+        ) {
             policyCopy.OptionsSerialized.file_type = [];
         }
 
@@ -210,7 +220,12 @@ export default function RemoteGuide(props) {
             policy: policyCopy
         })
             .then(() => {
-                ToggleSnackbar("top", "right", "存储策略已" + (props.policy ? "保存" : "添加"), "success");
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    "存储策略已" + (props.policy ? "保存" : "添加"),
+                    "success"
+                );
                 setActiveStep(5);
             })
             .catch(error => {
@@ -221,12 +236,13 @@ export default function RemoteGuide(props) {
             });
 
         setLoading(false);
-
-    }
+    };
 
     return (
         <div>
-            <Typography variant={"h6"}>{props.policy ? "修改" : "添加"}从机存储策略</Typography>
+            <Typography variant={"h6"}>
+                {props.policy ? "修改" : "添加"}从机存储策略
+            </Typography>
             <Stepper activeStep={activeStep}>
                 {steps.map((label, index) => {
                     const stepProps = {};
@@ -250,14 +266,14 @@ export default function RemoteGuide(props) {
             {activeStep === 0 && (
                 <form
                     className={classes.stepContent}
-                    onSubmit={e=>{
+                    onSubmit={e => {
                         e.preventDefault();
                         setActiveStep(1);
                     }}
                 >
-                    <Alert severity="info" style={{marginBottom:10,}}>
-                        从机存储策略允许你使用同样运行了 Cloudreve 的服务器作为存储端，
-                        用户上传下载流量通过 HTTP 直传。
+                    <Alert severity="info" style={{ marginBottom: 10 }}>
+                        从机存储策略允许你使用同样运行了 Cloudreve
+                        的服务器作为存储端， 用户上传下载流量通过 HTTP 直传。
                     </Alert>
 
                     <div className={classes.subStepContainer}>
@@ -266,7 +282,8 @@ export default function RemoteGuide(props) {
                         </div>
                         <div className={classes.subStepContent}>
                             <Typography variant={"body2"}>
-                                将和主站相同版本的 Cloudreve 程序拷贝至要作为从机的服务器上。
+                                将和主站相同版本的 Cloudreve
+                                程序拷贝至要作为从机的服务器上。
                             </Typography>
                         </div>
                     </div>
@@ -288,7 +305,7 @@ export default function RemoteGuide(props) {
                                     <Input
                                         required
                                         inputProps={{
-                                            minlength:64,
+                                            minlength: 64
                                         }}
                                         value={policy.SecretKey}
                                         onChange={handleChange("SecretKey")}
@@ -304,23 +321,33 @@ export default function RemoteGuide(props) {
                         </div>
                         <div className={classes.subStepContent}>
                             <Typography variant={"body2"}>
-                                修改从机配置文件。<br/>在从机端 Cloudreve 的同级目录下新建
-                                <code>conf.ini</code>文件，填入从机配置，启动/重启从机端 Cloudreve。
+                                修改从机配置文件。
+                                <br />
+                                在从机端 Cloudreve 的同级目录下新建
+                                <code>conf.ini</code>
+                                文件，填入从机配置，启动/重启从机端 Cloudreve。
                                 以下为一个可供参考的配置例子，其中密钥部分已帮您填写为上一步所生成的。
                             </Typography>
-                                <pre>
-                                    [System]<br/>
-                                    Mode = slave<br/>
-                                    Listen = :5212<br/>
-                                    <br/>
-                                    [Slave]<br/>
-                                    Secret = {policy.SecretKey}<br/>
-                                    <br/>
-                                    [CORS]<br/>
-                                    AllowOrigins = *<br/>
-                                    AllowMethods = OPTIONS,GET,POST<br/>
-                                    AllowHeaders = *<br/>
-                                </pre>
+                            <pre>
+                                [System]
+                                <br />
+                                Mode = slave
+                                <br />
+                                Listen = :5212
+                                <br />
+                                <br />
+                                [Slave]
+                                <br />
+                                Secret = {policy.SecretKey}
+                                <br />
+                                <br />
+                                [CORS]
+                                <br />
+                                AllowOrigins = *<br />
+                                AllowMethods = OPTIONS,GET,POST
+                                <br />
+                                AllowHeaders = *<br />
+                            </pre>
                             <Typography variant={"body2"}>
                                 从机端配置文件格式大致与主站端相同，区别在于：
                                 <ul>
@@ -331,11 +358,15 @@ export default function RemoteGuide(props) {
                                         字段必须更改为<code>slave</code>
                                     </li>
                                     <li>
-                                        必须指定<code>Slave</code>分区下的<code>Secret</code>
+                                        必须指定<code>Slave</code>分区下的
+                                        <code>Secret</code>
                                         字段，其值为第二步里填写或生成的密钥。
                                     </li>
-                                    <li>必须启动跨域配置，即<code>CORS</code>字段的内容，
-                                    具体可参考上文范例或官方文档。如果配置不正确，用户将无法通过 Web 端向从机上传文件。
+                                    <li>
+                                        必须启动跨域配置，即<code>CORS</code>
+                                        字段的内容，
+                                        具体可参考上文范例或官方文档。如果配置不正确，用户将无法通过
+                                        Web 端向从机上传文件。
                                     </li>
                                 </ul>
                             </Typography>
@@ -348,8 +379,11 @@ export default function RemoteGuide(props) {
                         </div>
                         <div className={classes.subStepContent}>
                             <Typography variant={"body2"}>
-                                填写从机地址。<br/>
-                                如果主站启用了 HTTPS，从机也需要启用，并在下方填入 HTTPS 协议的地址。
+                                填写从机地址。
+                                <br />
+                                如果主站启用了
+                                HTTPS，从机也需要启用，并在下方填入 HTTPS
+                                协议的地址。
                             </Typography>
                             <div className={classes.form}>
                                 <FormControl fullWidth>
@@ -379,7 +413,7 @@ export default function RemoteGuide(props) {
                             <div className={classes.form}>
                                 <Button
                                     disabled={loading}
-                                    onClick={()=>testSlave()}
+                                    onClick={() => testSlave()}
                                     variant={"outlined"}
                                     color={"primary"}
                                 >
@@ -399,14 +433,13 @@ export default function RemoteGuide(props) {
                             下一步
                         </Button>
                     </div>
-
                 </form>
             )}
 
             {activeStep === 1 && (
                 <form
                     className={classes.stepContent}
-                    onSubmit={e=> {
+                    onSubmit={e => {
                         e.preventDefault();
                         setActiveStep(2);
                     }}
@@ -418,13 +451,14 @@ export default function RemoteGuide(props) {
                         <div className={classes.subStepContent}>
                             <Typography variant={"body2"}>
                                 请在下方输入文件的存储目录路径，可以为绝对路径或相对路径（相对于
-                                从机的 Cloudreve）。路径中可以使用魔法变量，文件在上传时会自动替换这些变量为相应值；
+                                从机的
+                                Cloudreve）。路径中可以使用魔法变量，文件在上传时会自动替换这些变量为相应值；
                                 可用魔法变量可参考{" "}
                                 <Link
                                     color={"secondary"}
-                                    onClick={(e) => {
-                                      e.preventDefault()
-                                      setMagicVar("path")
+                                    onClick={e => {
+                                        e.preventDefault();
+                                        setMagicVar("path");
                                     }}
                                 >
                                     路径魔法变量列表
@@ -457,9 +491,9 @@ export default function RemoteGuide(props) {
                                 可用魔法变量可参考{" "}
                                 <Link
                                     color={"secondary"}
-                                    onClick={(e) => {
-                                      e.preventDefault()
-                                      setMagicVar("file")
+                                    onClick={e => {
+                                        e.preventDefault();
+                                        setMagicVar("file");
                                     }}
                                 >
                                     文件名魔法变量列表
@@ -500,7 +534,9 @@ export default function RemoteGuide(props) {
                                             命名规则
                                         </InputLabel>
                                         <Input
-                                            required={policy.AutoRename === "true"}
+                                            required={
+                                                policy.AutoRename === "true"
+                                            }
                                             value={policy.FileNameRule}
                                             onChange={handleChange(
                                                 "FileNameRule"
@@ -516,7 +552,7 @@ export default function RemoteGuide(props) {
                         <Button
                             color={"default"}
                             className={classes.button}
-                            onClick={()=> setActiveStep(0)}
+                            onClick={() => setActiveStep(0)}
                         >
                             上一步
                         </Button>
@@ -535,9 +571,9 @@ export default function RemoteGuide(props) {
             {activeStep === 2 && (
                 <form
                     className={classes.stepContent}
-                    onSubmit={e=> {
+                    onSubmit={e => {
                         e.preventDefault();
-                       setActiveStep(3);
+                        setActiveStep(3);
                     }}
                 >
                     <div className={classes.subStepContainer}>
@@ -590,7 +626,8 @@ export default function RemoteGuide(props) {
                                 <Typography variant={"body2"}>
                                     是否要对下载/直链使用 CDN？
                                     <br />
-                                    开启后，用户访问文件时的 URL 中的域名部分会被替换为 CDN 域名。
+                                    开启后，用户访问文件时的 URL
+                                    中的域名部分会被替换为 CDN 域名。
                                 </Typography>
 
                                 <div className={classes.form}>
@@ -598,14 +635,16 @@ export default function RemoteGuide(props) {
                                         <RadioGroup
                                             required
                                             value={useCDN}
-                                            onChange={e=>{
-                                                if (e.target.value === "false"){
+                                            onChange={e => {
+                                                if (
+                                                    e.target.value === "false"
+                                                ) {
                                                     setPolicy({
                                                         ...policy,
                                                         BaseURL: ""
                                                     });
                                                 }
-                                                setUseCDN(e.target.value)
+                                                setUseCDN(e.target.value);
                                             }}
                                             row
                                         >
@@ -626,7 +665,6 @@ export default function RemoteGuide(props) {
                                         </RadioGroup>
                                     </FormControl>
                                 </div>
-
                             </div>
                         </div>
 
@@ -644,26 +682,26 @@ export default function RemoteGuide(props) {
                                         <DomainInput
                                             value={policy.BaseURL}
                                             onChange={handleChange("BaseURL")}
-                                            required={policy.IsOriginLinkEnable === "true" && useCDN === "true"}
+                                            required={
+                                                policy.IsOriginLinkEnable ===
+                                                    "true" && useCDN === "true"
+                                            }
                                             label={"CDN 前缀"}
                                         />
                                     </div>
-
                                 </div>
                             </div>
                         </Collapse>
-
                     </Collapse>
 
                     <div className={classes.stepFooter}>
                         <Button
                             color={"default"}
                             className={classes.button}
-                            onClick={()=> setActiveStep(1)}
+                            onClick={() => setActiveStep(1)}
                         >
                             上一步
-                        </Button>
-                        {" "}
+                        </Button>{" "}
                         <Button
                             disabled={loading}
                             type={"submit"}
@@ -673,18 +711,17 @@ export default function RemoteGuide(props) {
                             下一步
                         </Button>
                     </div>
-
                 </form>
             )}
 
             {activeStep === 3 && (
-                <form className={classes.stepContent}
-                      onSubmit={e=> {
-                    e.preventDefault();
-                    setActiveStep(4)
-                }}
+                <form
+                    className={classes.stepContent}
+                    onSubmit={e => {
+                        e.preventDefault();
+                        setActiveStep(4);
+                    }}
                 >
-
                     <div className={classes.subStepContainer}>
                         <div className={classes.stepNumberContainer}>
                             <div className={classes.stepNumber}>1</div>
@@ -698,17 +735,21 @@ export default function RemoteGuide(props) {
                                 <FormControl required component="fieldset">
                                     <RadioGroup
                                         required
-                                        value={policy.MaxSize === "0" ? "false" : "true"}
-                                        onChange={e=>{
-                                            if(e.target.value === "true"){
+                                        value={
+                                            policy.MaxSize === "0"
+                                                ? "false"
+                                                : "true"
+                                        }
+                                        onChange={e => {
+                                            if (e.target.value === "true") {
                                                 setPolicy({
                                                     ...policy,
-                                                    MaxSize: "10485760",
+                                                    MaxSize: "10485760"
                                                 });
-                                            }else{
+                                            } else {
                                                 setPolicy({
                                                     ...policy,
-                                                    MaxSize: "0",
+                                                    MaxSize: "0"
                                                 });
                                             }
                                         }}
@@ -752,15 +793,15 @@ export default function RemoteGuide(props) {
                                         label={"单文件大小限制"}
                                     />
                                 </div>
-
                             </div>
                         </div>
-
                     </Collapse>
 
                     <div className={classes.subStepContainer}>
                         <div className={classes.stepNumberContainer}>
-                            <div className={classes.stepNumber}>{policy.MaxSize !== "0" ? "3" : "2"}</div>
+                            <div className={classes.stepNumber}>
+                                {policy.MaxSize !== "0" ? "3" : "2"}
+                            </div>
                         </div>
                         <div className={classes.subStepContent}>
                             <Typography variant={"body2"}>
@@ -771,23 +812,29 @@ export default function RemoteGuide(props) {
                                 <FormControl required component="fieldset">
                                     <RadioGroup
                                         required
-                                        value={policy.OptionsSerialized.file_type === "" ? "false" : "true"}
-                                        onChange={e=>{
-                                            if(e.target.value === "true"){
+                                        value={
+                                            policy.OptionsSerialized
+                                                .file_type === ""
+                                                ? "false"
+                                                : "true"
+                                        }
+                                        onChange={e => {
+                                            if (e.target.value === "true") {
                                                 setPolicy({
                                                     ...policy,
                                                     OptionsSerialized: {
                                                         ...policy.OptionsSerialized,
-                                                        file_type:"jpg,png,mp4,zip,rar",
-                                                    },
+                                                        file_type:
+                                                            "jpg,png,mp4,zip,rar"
+                                                    }
                                                 });
-                                            }else{
+                                            } else {
                                                 setPolicy({
                                                     ...policy,
                                                     OptionsSerialized: {
                                                         ...policy.OptionsSerialized,
-                                                        file_type:"",
-                                                    },
+                                                        file_type: ""
+                                                    }
                                                 });
                                             }
                                         }}
@@ -816,11 +863,14 @@ export default function RemoteGuide(props) {
                     <Collapse in={policy.OptionsSerialized.file_type !== ""}>
                         <div className={classes.subStepContainer}>
                             <div className={classes.stepNumberContainer}>
-                                <div className={classes.stepNumber}>{policy.MaxSize !== "0" ? "4" : "3"}</div>
+                                <div className={classes.stepNumber}>
+                                    {policy.MaxSize !== "0" ? "4" : "3"}
+                                </div>
                             </div>
                             <div className={classes.subStepContent}>
                                 <Typography variant={"body2"}>
-                                    输入允许上传的文件扩展名，多个请以半角逗号 , 隔开
+                                    输入允许上传的文件扩展名，多个请以半角逗号 ,
+                                    隔开
                                 </Typography>
                                 <div className={classes.form}>
                                     <FormControl fullWidth>
@@ -828,28 +878,28 @@ export default function RemoteGuide(props) {
                                             扩展名列表
                                         </InputLabel>
                                         <Input
-                                            value={policy.OptionsSerialized.file_type}
+                                            value={
+                                                policy.OptionsSerialized
+                                                    .file_type
+                                            }
                                             onChange={handleOptionChange(
                                                 "file_type"
                                             )}
                                         />
                                     </FormControl>
                                 </div>
-
                             </div>
                         </div>
-
                     </Collapse>
 
                     <div className={classes.stepFooter}>
                         <Button
                             color={"default"}
                             className={classes.button}
-                            onClick={()=> setActiveStep(2)}
+                            onClick={() => setActiveStep(2)}
                         >
                             上一步
-                        </Button>
-                        {" "}
+                        </Button>{" "}
                         <Button
                             disabled={loading}
                             type={"submit"}
@@ -859,16 +909,13 @@ export default function RemoteGuide(props) {
                             下一步
                         </Button>
                     </div>
-
                 </form>
             )}
 
             {activeStep === 4 && (
                 <form className={classes.stepContent} onSubmit={submitPolicy}>
                     <div className={classes.subStepContainer}>
-                        <div className={classes.stepNumberContainer}>
-
-                        </div>
+                        <div className={classes.stepNumberContainer}></div>
                         <div className={classes.subStepContent}>
                             <Typography variant={"body2"}>
                                 最后一步，为此存储策略命名：
@@ -891,11 +938,10 @@ export default function RemoteGuide(props) {
                         <Button
                             color={"default"}
                             className={classes.button}
-                            onClick={()=> setActiveStep(3)}
+                            onClick={() => setActiveStep(3)}
                         >
                             上一步
-                        </Button>
-                        {" "}
+                        </Button>{" "}
                         <Button
                             disabled={loading}
                             type={"submit"}
@@ -905,31 +951,30 @@ export default function RemoteGuide(props) {
                             完成
                         </Button>
                     </div>
-
                 </form>
             )}
 
             {activeStep === 5 && (
                 <>
-                <form className={classes.stepContent}>
-                    <Typography>
-                        存储策略已{props.policy ? "保存" : "添加"}！
-                    </Typography>
-                    <Typography variant={"body2"} color={"textSecondary"}>
-                        要使用此存储策略，请到用户组管理页面，为相应用户组绑定此存储策略。
-                    </Typography>
-                </form>
+                    <form className={classes.stepContent}>
+                        <Typography>
+                            存储策略已{props.policy ? "保存" : "添加"}！
+                        </Typography>
+                        <Typography variant={"body2"} color={"textSecondary"}>
+                            要使用此存储策略，请到用户组管理页面，为相应用户组绑定此存储策略。
+                        </Typography>
+                    </form>
                     <div className={classes.stepFooter}>
                         <Button
                             color={"primary"}
                             className={classes.button}
-                            onClick={()=> history.push("/admin/policy")}
+                            onClick={() => history.push("/admin/policy")}
                         >
                             返回存储策略列表
                         </Button>
                     </div>
-</>
-             )}
+                </>
+            )}
 
             <MagicVar
                 open={magicVar === "file"}
diff --git a/src/component/Admin/Policy/Guid/S3Guide.js b/src/component/Admin/Policy/Guid/S3Guide.js
index b722ca7..f4f52d4 100644
--- a/src/component/Admin/Policy/Guid/S3Guide.js
+++ b/src/component/Admin/Policy/Guid/S3Guide.js
@@ -118,29 +118,29 @@ const steps = [
 ];
 
 const regions = {
-    "us-east-2":"US East (Ohio)",
-    "us-east-1":"US East (N. Virginia)",
-    "us-west-1":"US West (N. California)",
-    "us-west-2":"US West (Oregon)",
-    "af-south-1":"Africa (Cape Town)",
-    "ap-east-1":"Asia Pacific (Hong Kong)",
-    "ap-south-1":"Asia Pacific (Mumbai)",
-    "ap-northeast-3":"Asia Pacific (Osaka-Local)",
-    "ap-northeast-2":"Asia Pacific (Seoul)",
-    "ap-southeast-1":"Asia Pacific (Singapore)",
-    "ap-southeast-2":"Asia Pacific (Sydney)",
-    "ap-northeast-1":"Asia Pacific (Tokyo)",
-    "ca-central-1":"Canada (Central)",
-    "cn-north-1":"China (Beijing)",
-    "cn-northwest-1":"China (Ningxia)",
-    "eu-central-1":"Europe (Frankfurt)",
-    "eu-west-1":"Europe (Ireland)",
-    "eu-west-2":"Europe (London)",
-    "eu-south-1":"Europe (Milan)",
-    "eu-west-3":"Europe (Paris)",
-    "eu-north-1":"Europe (Stockholm)",
-    "me-south-1":"Middle East (Bahrain)",
-    "sa-east-1":"South America (São Paulo)",
+    "us-east-2": "US East (Ohio)",
+    "us-east-1": "US East (N. Virginia)",
+    "us-west-1": "US West (N. California)",
+    "us-west-2": "US West (Oregon)",
+    "af-south-1": "Africa (Cape Town)",
+    "ap-east-1": "Asia Pacific (Hong Kong)",
+    "ap-south-1": "Asia Pacific (Mumbai)",
+    "ap-northeast-3": "Asia Pacific (Osaka-Local)",
+    "ap-northeast-2": "Asia Pacific (Seoul)",
+    "ap-southeast-1": "Asia Pacific (Singapore)",
+    "ap-southeast-2": "Asia Pacific (Sydney)",
+    "ap-northeast-1": "Asia Pacific (Tokyo)",
+    "ca-central-1": "Canada (Central)",
+    "cn-north-1": "China (Beijing)",
+    "cn-northwest-1": "China (Ningxia)",
+    "eu-central-1": "Europe (Frankfurt)",
+    "eu-west-1": "Europe (Ireland)",
+    "eu-west-2": "Europe (London)",
+    "eu-south-1": "Europe (Milan)",
+    "eu-west-3": "Europe (Paris)",
+    "eu-north-1": "Europe (Stockholm)",
+    "me-south-1": "Middle East (Bahrain)",
+    "sa-east-1": "South America (São Paulo)"
 };
 
 export default function S3Guide(props) {
@@ -171,7 +171,7 @@ export default function S3Guide(props) {
                   MaxSize: "0",
                   OptionsSerialized: {
                       file_type: "",
-                      region: "us-east-2",
+                      region: "us-east-2"
                   }
               }
     );
@@ -278,9 +278,11 @@ export default function S3Guide(props) {
         <div>
             <AlertDialog
                 open={alertOpen}
-                onClose={()=>setAlertOpen(false)}
+                onClose={() => setAlertOpen(false)}
                 title={"警告"}
-                msg={"S3 类型存储策略目前仅可用于自己使用，或者是给受信任的用户组使用。"}
+                msg={
+                    "S3 类型存储策略目前仅可用于自己使用，或者是给受信任的用户组使用。"
+                }
             />
             <Typography variant={"h6"}>
                 {props.policy ? "修改" : "添加"} Amazon S3 存储策略
@@ -436,9 +438,11 @@ export default function S3Guide(props) {
                                         freeSolo
                                         value={policy.OptionsSerialized.region}
                                         onInputChange={(_, value) =>
-                                            handleOptionChange("region")({target:{value:value}})
+                                            handleOptionChange("region")({
+                                                target: { value: value }
+                                            })
                                         }
-                                        renderOption={(option) => (
+                                        renderOption={option => (
                                             <React.Fragment>
                                                 {regions[option]}
                                             </React.Fragment>
diff --git a/src/component/Admin/Policy/Guid/UpyunGuide.js b/src/component/Admin/Policy/Guid/UpyunGuide.js
index fdb8305..8f8bec7 100644
--- a/src/component/Admin/Policy/Guid/UpyunGuide.js
+++ b/src/component/Admin/Policy/Guid/UpyunGuide.js
@@ -94,25 +94,29 @@ export default function UpyunGuide(props) {
 
     const [activeStep, setActiveStep] = useState(0);
     const [loading, setLoading] = useState(false);
-    const [skipped,] = React.useState(new Set());
+    const [skipped] = React.useState(new Set());
     const [magicVar, setMagicVar] = useState("");
-    const [policy, setPolicy] = useState(props.policy?props.policy:{
-        Type: "upyun",
-        Name: "",
-        SecretKey: "",
-        AccessKey: "",
-        BaseURL: "",
-        IsPrivate: "false",
-        DirNameRule: "uploads/{year}/{month}/{day}",
-        AutoRename: "true",
-        FileNameRule: "{randomkey8}_{originname}",
-        IsOriginLinkEnable: "false",
-        MaxSize: "0",
-        OptionsSerialized: {
-            file_type: "",
-            token:"",
-        }
-    });
+    const [policy, setPolicy] = useState(
+        props.policy
+            ? props.policy
+            : {
+                  Type: "upyun",
+                  Name: "",
+                  SecretKey: "",
+                  AccessKey: "",
+                  BaseURL: "",
+                  IsPrivate: "false",
+                  DirNameRule: "uploads/{year}/{month}/{day}",
+                  AutoRename: "true",
+                  FileNameRule: "{randomkey8}_{originname}",
+                  IsOriginLinkEnable: "false",
+                  MaxSize: "0",
+                  OptionsSerialized: {
+                      file_type: "",
+                      token: ""
+                  }
+              }
+    );
 
     const handleChange = name => event => {
         setPolicy({
@@ -169,7 +173,12 @@ export default function UpyunGuide(props) {
             policy: policyCopy
         })
             .then(() => {
-                ToggleSnackbar("top", "right", "存储策略已"+ (props.policy ? "保存" : "添加"), "success");
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    "存储策略已" + (props.policy ? "保存" : "添加"),
+                    "success"
+                );
                 setActiveStep(5);
             })
             .catch(error => {
@@ -184,7 +193,9 @@ export default function UpyunGuide(props) {
 
     return (
         <div>
-            <Typography variant={"h6"}>{props.policy ? "修改" : "添加"} 又拍云 存储策略</Typography>
+            <Typography variant={"h6"}>
+                {props.policy ? "修改" : "添加"} 又拍云 存储策略
+            </Typography>
             <Stepper activeStep={activeStep}>
                 {steps.map((label, index) => {
                     const stepProps = {};
@@ -213,15 +224,14 @@ export default function UpyunGuide(props) {
                         setActiveStep(1);
                     }}
                 >
-
                     <div className={classes.subStepContainer}>
                         <div className={classes.stepNumberContainer}>
                             <div className={classes.stepNumber}>0</div>
                         </div>
                         <div className={classes.subStepContent}>
                             <Typography variant={"body2"}>
-                                在使用又拍云存储策略前，请确保您在 参数设置 - 站点信息
-                                - 站点URL 中填写的 地址与实际相符，并且
+                                在使用又拍云存储策略前，请确保您在 参数设置 -
+                                站点信息 - 站点URL 中填写的 地址与实际相符，并且
                                 <strong>能够被外网正常访问</strong>。
                             </Typography>
                         </div>
@@ -235,7 +245,9 @@ export default function UpyunGuide(props) {
                             <Typography variant={"body2"}>
                                 前往
                                 <Link
-                                    href={"https://console.upyun.com/services/create/file/"}
+                                    href={
+                                        "https://console.upyun.com/services/create/file/"
+                                    }
                                     target={"_blank"}
                                 >
                                     又拍云面板
@@ -309,7 +321,8 @@ export default function UpyunGuide(props) {
                         </div>
                         <div className={classes.subStepContent}>
                             <Typography variant={"body2"}>
-                                填写为云存储服务绑定的域名，并根据实际情况选择是否使用 HTTPS：
+                                填写为云存储服务绑定的域名，并根据实际情况选择是否使用
+                                HTTPS：
                             </Typography>
                             <div className={classes.form}>
                                 <DomainInput
@@ -328,8 +341,10 @@ export default function UpyunGuide(props) {
                         </div>
                         <div className={classes.subStepContent}>
                             <Typography variant={"body2"}>
-                                此步骤可保持默认并跳过，但是强烈建议您跟随此步骤操作。<br/>
-                                前往所创建云存储服务的 功能配置 面板，转到 访问配置 选项卡，开启 Token 防盗链并设定密码。
+                                此步骤可保持默认并跳过，但是强烈建议您跟随此步骤操作。
+                                <br />
+                                前往所创建云存储服务的 功能配置 面板，转到
+                                访问配置 选项卡，开启 Token 防盗链并设定密码。
                             </Typography>
                             <div className={classes.form}>
                                 <FormControl required component="fieldset">
@@ -362,9 +377,7 @@ export default function UpyunGuide(props) {
                     <Collapse in={policy.IsPrivate === "true"}>
                         <div className={classes.subStepContainer}>
                             <div className={classes.stepNumberContainer}>
-                                <div className={classes.stepNumber}>
-                                    6
-                                </div>
+                                <div className={classes.stepNumber}>6</div>
                             </div>
                             <div className={classes.subStepContent}>
                                 <Typography variant={"body2"}>
@@ -377,13 +390,14 @@ export default function UpyunGuide(props) {
                                         </InputLabel>
                                         <Input
                                             value={
-                                                policy.OptionsSerialized
-                                                    .token
+                                                policy.OptionsSerialized.token
                                             }
                                             onChange={handleOptionChange(
                                                 "token"
                                             )}
-                                            required={policy.IsPrivate === "true"}
+                                            required={
+                                                policy.IsPrivate === "true"
+                                            }
                                         />
                                     </FormControl>
                                 </div>
@@ -391,7 +405,6 @@ export default function UpyunGuide(props) {
                         </div>
                     </Collapse>
 
-
                     <div className={classes.stepFooter}>
                         <Button
                             disabled={loading}
@@ -425,9 +438,9 @@ export default function UpyunGuide(props) {
                                 可用魔法变量可参考{" "}
                                 <Link
                                     color={"secondary"}
-                                    onClick={(e) => {
-                                      e.preventDefault()
-                                      setMagicVar("path")
+                                    onClick={e => {
+                                        e.preventDefault();
+                                        setMagicVar("path");
                                     }}
                                 >
                                     路径魔法变量列表
@@ -460,9 +473,9 @@ export default function UpyunGuide(props) {
                                 可用魔法变量可参考{" "}
                                 <Link
                                     color={"secondary"}
-                                    onClick={(e) => {
-                                      e.preventDefault()
-                                      setMagicVar("file")
+                                    onClick={e => {
+                                        e.preventDefault();
+                                        setMagicVar("file");
                                     }}
                                 >
                                     文件名魔法变量列表
@@ -561,14 +574,22 @@ export default function UpyunGuide(props) {
                                     <RadioGroup
                                         required
                                         value={policy.IsOriginLinkEnable}
-                                        onChange={e=>{
-                                            if (policy.IsPrivate === "true" && e.target.value==="true"){
-                                                ToggleSnackbar("top", "right","开启 Token 防盗链后无法使用直链功能", "warning");
-                                                return
+                                        onChange={e => {
+                                            if (
+                                                policy.IsPrivate === "true" &&
+                                                e.target.value === "true"
+                                            ) {
+                                                ToggleSnackbar(
+                                                    "top",
+                                                    "right",
+                                                    "开启 Token 防盗链后无法使用直链功能",
+                                                    "warning"
+                                                );
+                                                return;
                                             }
-                                            handleChange(
-                                            "IsOriginLinkEnable"
-                                            )(e)
+                                            handleChange("IsOriginLinkEnable")(
+                                                e
+                                            );
                                         }}
                                         row
                                     >
@@ -855,7 +876,9 @@ export default function UpyunGuide(props) {
             {activeStep === 5 && (
                 <>
                     <form className={classes.stepContent}>
-                        <Typography>存储策略已{props.policy ? "保存" : "添加"}！</Typography>
+                        <Typography>
+                            存储策略已{props.policy ? "保存" : "添加"}！
+                        </Typography>
                         <Typography variant={"body2"} color={"textSecondary"}>
                             要使用此存储策略，请到用户组管理页面，为相应用户组绑定此存储策略。
                         </Typography>
diff --git a/src/component/Admin/Policy/Policy.js b/src/component/Admin/Policy/Policy.js
index dcf4842..4061068 100644
--- a/src/component/Admin/Policy/Policy.js
+++ b/src/component/Admin/Policy/Policy.js
@@ -74,7 +74,6 @@ function useQuery() {
     return new URLSearchParams(useLocation().search);
 }
 
-
 export default function Policy() {
     const classes = useStyles();
     // const [loading, setLoading] = useState(false);
@@ -108,38 +107,42 @@ export default function Policy() {
         [dispatch]
     );
 
-    useEffect(()=>{
-        if(query.get("code") === "0"){
+    useEffect(() => {
+        if (query.get("code") === "0") {
             ToggleSnackbar("top", "right", "授权成功", "success");
-        }else if (query.get("msg") && query.get("msg")!==""){
-            ToggleSnackbar("top", "right", query.get("msg") + ", "+ query.get("err"), "warning");
+        } else if (query.get("msg") && query.get("msg") !== "") {
+            ToggleSnackbar(
+                "top",
+                "right",
+                query.get("msg") + ", " + query.get("err"),
+                "warning"
+            );
         }
-
-    },[location])
+    }, [location]);
 
     const loadList = () => {
-      API.post("/admin/policy/list", {
-          page: page,
-          page_size: pageSize,
-          order_by: "id desc",
-          conditions: filter === "all" ? {} : { type: filter }
-      })
-          .then(response => {
-              setPolicies(response.data.items);
-              setStatics(response.data.statics);
-              setTotal(response.data.total);
-          })
-          .catch(error => {
-              ToggleSnackbar("top", "right", error.message, "error");
-          });
+        API.post("/admin/policy/list", {
+            page: page,
+            page_size: pageSize,
+            order_by: "id desc",
+            conditions: filter === "all" ? {} : { type: filter }
+        })
+            .then(response => {
+                setPolicies(response.data.items);
+                setStatics(response.data.statics);
+                setTotal(response.data.total);
+            })
+            .catch(error => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
     };
 
     useEffect(() => {
         loadList();
-    }, [page, pageSize,filter]);
+    }, [page, pageSize, filter]);
 
-    const deletePolicy = (id) =>{
-        API.delete("/admin/policy/" + id,)
+    const deletePolicy = id => {
+        API.delete("/admin/policy/" + id)
             .then(() => {
                 loadList();
                 ToggleSnackbar("top", "right", "存储策略已删除", "success");
@@ -147,7 +150,7 @@ export default function Policy() {
             .catch(error => {
                 ToggleSnackbar("top", "right", error.message, "error");
             });
-    }
+    };
 
     const open = Boolean(anchorEl);
 
@@ -165,10 +168,10 @@ export default function Policy() {
                 <div className={classes.headerRight}>
                     <Select
                         style={{
-                            marginRight:8,
+                            marginRight: 8
                         }}
                         value={filter}
-                        onChange={e=>setFilter(e.target.value)}
+                        onChange={e => setFilter(e.target.value)}
                     >
                         <MenuItem value={"all"}>全部</MenuItem>
                         <MenuItem value={"local"}>本机</MenuItem>
@@ -194,7 +197,7 @@ export default function Policy() {
                 <TableContainer className={classes.container}>
                     <Table aria-label="sticky table" size={"small"}>
                         <TableHead>
-                            <TableRow style={{height:52}}>
+                            <TableRow style={{ height: 52 }}>
                                 {columns.map(column => (
                                     <TableCell
                                         key={column.id}
@@ -226,19 +229,26 @@ export default function Policy() {
                                     </TableCell>
                                     <TableCell align={"right"}>
                                         <Tooltip title={"删除"}>
-                                            <IconButton onClick={()=>deletePolicy(row.ID)} size={"small"}>
-                                                <Delete/>
+                                            <IconButton
+                                                onClick={() =>
+                                                    deletePolicy(row.ID)
+                                                }
+                                                size={"small"}
+                                            >
+                                                <Delete />
                                             </IconButton>
                                         </Tooltip>
                                         <Tooltip title={"编辑"}>
-                                            <IconButton onClick={(e)=>{
-                                                setEditID(row.ID)
-                                                handleClick(e)
-                                            }} size={"small"}>
-                                                <Edit/>
+                                            <IconButton
+                                                onClick={e => {
+                                                    setEditID(row.ID);
+                                                    handleClick(e);
+                                                }}
+                                                size={"small"}
+                                            >
+                                                <Edit />
                                             </IconButton>
                                         </Tooltip>
-
                                     </TableCell>
                                 </TableRow>
                             ))}
@@ -264,14 +274,22 @@ export default function Policy() {
                 onClose={handleClose}
                 keepMounted
             >
-                <MenuItem onClick={e=>{
-                    handleClose(e);
-                    history.push("/admin/policy/edit/pro/"+editID);
-                }}>专家模式编辑</MenuItem>
-                <MenuItem onClick={e=>{
-                    handleClose(e);
-                    history.push("/admin/policy/edit/guide/"+editID);
-                }}>向导模式编辑</MenuItem>
+                <MenuItem
+                    onClick={e => {
+                        handleClose(e);
+                        history.push("/admin/policy/edit/pro/" + editID);
+                    }}
+                >
+                    专家模式编辑
+                </MenuItem>
+                <MenuItem
+                    onClick={e => {
+                        handleClose(e);
+                        history.push("/admin/policy/edit/guide/" + editID);
+                    }}
+                >
+                    向导模式编辑
+                </MenuItem>
             </Menu>
         </div>
     );
diff --git a/src/component/Admin/Setting/Access.js b/src/component/Admin/Setting/Access.js
index ef1153c..0e25758 100644
--- a/src/component/Admin/Setting/Access.js
+++ b/src/component/Admin/Setting/Access.js
@@ -320,7 +320,8 @@ export default function Access() {
                                                 target={"_blank"}
                                             >
                                                 应用管理页面
-                                            </Link>{" "}获取到的的 秘钥
+                                            </Link>{" "}
+                                            获取到的的 秘钥
                                         </FormHelperText>
                                     </FormControl>
                                 </div>
diff --git a/src/component/Admin/Setting/Aria2.js b/src/component/Admin/Setting/Aria2.js
index 602e381..24d438f 100644
--- a/src/component/Admin/Setting/Aria2.js
+++ b/src/component/Admin/Setting/Aria2.js
@@ -152,7 +152,9 @@ export default function Aria2() {
                                     Aria2 的配置文件中开启 RPC
                                     服务。更多信息及指引请参考文档的{" "}
                                     <Link
-                                        href={"https://docs.cloudreve.org/use/aria2"}
+                                        href={
+                                            "https://docs.cloudreve.org/use/aria2"
+                                        }
                                         target={"_blank"}
                                     >
                                         离线下载
diff --git a/src/component/Admin/Setting/Image.js b/src/component/Admin/Setting/Image.js
index 13716fa..e933baa 100644
--- a/src/component/Admin/Setting/Image.js
+++ b/src/component/Admin/Setting/Image.js
@@ -36,18 +36,18 @@ export default function ImageSetting() {
     const classes = useStyles();
     const [loading, setLoading] = useState(false);
     const [options, setOptions] = useState({
-        gravatar_server:"",
-        avatar_path:"",
-        avatar_size:"",
-        avatar_size_l:"",
-        avatar_size_m:"",
-        avatar_size_s:"",
-        thumb_width:"",
-        thumb_height:"",
-        captcha_height:"1",
-        captcha_width:"1",
-        captcha_mode:"3",
-        captcha_CaptchaLen:"",
+        gravatar_server: "",
+        avatar_path: "",
+        avatar_size: "",
+        avatar_size_l: "",
+        avatar_size_m: "",
+        avatar_size_s: "",
+        thumb_width: "",
+        thumb_height: "",
+        captcha_height: "1",
+        captcha_width: "1",
+        captcha_mode: "3",
+        captcha_CaptchaLen: ""
     });
 
     const handleChange = name => event => {
@@ -77,34 +77,33 @@ export default function ImageSetting() {
         // eslint-disable-next-line
     }, []);
 
-
     const submit = e => {
         e.preventDefault();
         setLoading(true);
         const option = [];
-        Object.keys(options).forEach(k=>{
+        Object.keys(options).forEach(k => {
             option.push({
-                key:k,
-                value:options[k],
+                key: k,
+                value: options[k]
             });
-        })
-        API.patch("/admin/setting",{
-            options:option,
+        });
+        API.patch("/admin/setting", {
+            options: option
         })
             .then(() => {
                 ToggleSnackbar("top", "right", "设置已更改", "success");
             })
             .catch(error => {
                 ToggleSnackbar("top", "right", error.message, "error");
-            }).then(()=>{
+            })
+            .then(() => {
                 setLoading(false);
-        });
+            });
     };
 
     return (
         <div>
             <form onSubmit={submit}>
-
                 <div className={classes.root}>
                     <Typography variant="h6" gutterBottom>
                         头像
@@ -167,8 +166,8 @@ export default function ImageSetting() {
                                 <Input
                                     type={"number"}
                                     inputProps={{
-                                        min:1,
-                                        step:1,
+                                        min: 1,
+                                        step: 1
                                     }}
                                     value={options.avatar_size_s}
                                     onChange={handleChange("avatar_size_s")}
@@ -185,8 +184,8 @@ export default function ImageSetting() {
                                 <Input
                                     type={"number"}
                                     inputProps={{
-                                        min:1,
-                                        step:1,
+                                        min: 1,
+                                        step: 1
                                     }}
                                     value={options.avatar_size_m}
                                     onChange={handleChange("avatar_size_m")}
@@ -203,8 +202,8 @@ export default function ImageSetting() {
                                 <Input
                                     type={"number"}
                                     inputProps={{
-                                        min:1,
-                                        step:1,
+                                        min: 1,
+                                        step: 1
                                     }}
                                     value={options.avatar_size_l}
                                     onChange={handleChange("avatar_size_l")}
@@ -212,7 +211,6 @@ export default function ImageSetting() {
                                 />
                             </FormControl>
                         </div>
-
                     </div>
                 </div>
 
@@ -230,8 +228,8 @@ export default function ImageSetting() {
                                 <Input
                                     type={"number"}
                                     inputProps={{
-                                        min:1,
-                                        step:1,
+                                        min: 1,
+                                        step: 1
                                     }}
                                     value={options.thumb_width}
                                     onChange={handleChange("thumb_width")}
@@ -250,8 +248,8 @@ export default function ImageSetting() {
                                 <Input
                                     type={"number"}
                                     inputProps={{
-                                        min:1,
-                                        step:1,
+                                        min: 1,
+                                        step: 1
                                     }}
                                     value={options.thumb_height}
                                     onChange={handleChange("thumb_height")}
@@ -260,7 +258,6 @@ export default function ImageSetting() {
                             </FormControl>
                         </div>
                     </div>
-
                 </div>
 
                 <div className={classes.root}>
@@ -276,8 +273,8 @@ export default function ImageSetting() {
                                 <Input
                                     type={"number"}
                                     inputProps={{
-                                        min:1,
-                                        step:1,
+                                        min: 1,
+                                        step: 1
                                     }}
                                     value={options.captcha_width}
                                     onChange={handleChange("captcha_width")}
@@ -294,8 +291,8 @@ export default function ImageSetting() {
                                 <Input
                                     type={"number"}
                                     inputProps={{
-                                        min:1,
-                                        step:1,
+                                        min: 1,
+                                        step: 1
                                     }}
                                     value={options.captcha_height}
                                     onChange={handleChange("captcha_height")}
@@ -324,7 +321,6 @@ export default function ImageSetting() {
                                 </FormHelperText>
                             </FormControl>
                         </div>
-
                     </div>
                 </div>
 
diff --git a/src/component/Admin/Setting/Mail.js b/src/component/Admin/Setting/Mail.js
index e9ec11e..e0d597b 100644
--- a/src/component/Admin/Setting/Mail.js
+++ b/src/component/Admin/Setting/Mail.js
@@ -53,7 +53,7 @@ export default function Mail() {
         replyTo: "",
         smtpUser: "",
         smtpPass: "",
-        smtpEncryption:"",
+        smtpEncryption: "",
         mail_keepalive: "30",
         mail_activation_template: "",
         mail_reset_pwd_template: ""
@@ -254,7 +254,7 @@ export default function Mail() {
                                     SMTP 端口
                                 </InputLabel>
                                 <Input
-                                    inputProps={{ min: 1 ,step:1}}
+                                    inputProps={{ min: 1, step: 1 }}
                                     type={"number"}
                                     value={options.smtpPort}
                                     onChange={handleChange("smtpPort")}
@@ -342,7 +342,7 @@ export default function Mail() {
                                     SMTP 连接有效期 (秒)
                                 </InputLabel>
                                 <Input
-                                    inputProps={{ min: 1 ,step:1}}
+                                    inputProps={{ min: 1, step: 1 }}
                                     type={"number"}
                                     value={options.mail_keepalive}
                                     onChange={handleChange("mail_keepalive")}
@@ -363,7 +363,6 @@ export default function Mail() {
                     </Typography>
 
                     <div className={classes.formContainer}>
-
                         <div className={classes.form}>
                             <FormControl fullWidth>
                                 <InputLabel htmlFor="component-helper">
@@ -403,7 +402,6 @@ export default function Mail() {
                                 </FormHelperText>
                             </FormControl>
                         </div>
-
                     </div>
                 </div>
 
diff --git a/src/component/Admin/Setting/SiteInformation.js b/src/component/Admin/Setting/SiteInformation.js
index b6f9ac3..a03f520 100644
--- a/src/component/Admin/Setting/SiteInformation.js
+++ b/src/component/Admin/Setting/SiteInformation.js
@@ -76,28 +76,28 @@ export default function SiteInformation() {
         // eslint-disable-next-line
     }, []);
 
-
     const submit = e => {
         e.preventDefault();
         setLoading(true);
         const option = [];
-        Object.keys(options).forEach(k=>{
+        Object.keys(options).forEach(k => {
             option.push({
-                key:k,
-                value:options[k],
+                key: k,
+                value: options[k]
             });
-        })
-        API.patch("/admin/setting",{
-            options:option,
+        });
+        API.patch("/admin/setting", {
+            options: option
         })
             .then(() => {
                 ToggleSnackbar("top", "right", "设置已更改", "success");
             })
             .catch(error => {
                 ToggleSnackbar("top", "right", error.message, "error");
-            }).then(()=>{
+            })
+            .then(() => {
                 setLoading(false);
-        });
+            });
     };
 
     return (
@@ -254,7 +254,6 @@ export default function SiteInformation() {
                                     value={options.pwa_display}
                                     onChange={handleChange("pwa_display")}
                                 >
-
                                     <MenuItem value={"fullscreen"}>
                                         fullscreen
                                     </MenuItem>
diff --git a/src/component/Admin/Setting/Theme.js b/src/component/Admin/Setting/Theme.js
index b6a740b..f4944f1 100644
--- a/src/component/Admin/Setting/Theme.js
+++ b/src/component/Admin/Setting/Theme.js
@@ -56,9 +56,9 @@ export default function Theme() {
     const [theme, setTheme] = useState({});
     const [options, setOptions] = useState({
         themes: "{}",
-        defaultTheme:"",
-        home_view_method:"icon",
-        share_view_method:"list",
+        defaultTheme: "",
+        home_view_method: "icon",
+        share_view_method: "list"
     });
     const [themeConfig, setThemeConfig] = useState({});
     const [themeConfigError, setThemeConfigError] = useState({});
@@ -72,39 +72,44 @@ export default function Theme() {
     );
 
     const deleteTheme = color => {
-        if(color === options.defaultTheme){
+        if (color === options.defaultTheme) {
             ToggleSnackbar("top", "right", "不能删除默认配色", "warning");
-            return
+            return;
         }
-        if (Object.keys(theme).length <=1){
+        if (Object.keys(theme).length <= 1) {
             ToggleSnackbar("top", "right", "请至少保留一个配色方案", "warning");
-            return
+            return;
         }
-        const themeCopy = {...theme};
+        const themeCopy = { ...theme };
         delete themeCopy[color];
         const resStr = JSON.stringify(themeCopy);
         setOptions({
             ...options,
-            themes:resStr,
-        })
-    }
+            themes: resStr
+        });
+    };
 
     const addTheme = newTheme => {
         setCreate(false);
-        if (theme[newTheme.palette.primary.main] !== undefined){
-            ToggleSnackbar("top", "right", "主色调不能与已有配色重复", "warning");
-            return
+        if (theme[newTheme.palette.primary.main] !== undefined) {
+            ToggleSnackbar(
+                "top",
+                "right",
+                "主色调不能与已有配色重复",
+                "warning"
+            );
+            return;
         }
         const res = {
             ...theme,
-            [newTheme.palette.primary.main]:newTheme,
+            [newTheme.palette.primary.main]: newTheme
         };
         const resStr = JSON.stringify(res);
         setOptions({
             ...options,
-            themes:resStr,
-        })
-    }
+            themes: resStr
+        });
+    };
 
     useEffect(() => {
         const res = JSON.parse(options.themes);
@@ -165,7 +170,6 @@ export default function Theme() {
     return (
         <div>
             <form onSubmit={submit}>
-
                 <div className={classes.root}>
                     <Typography variant="h6" gutterBottom>
                         主题配色
@@ -236,14 +240,31 @@ export default function Theme() {
                                                             const res = JSON.parse(
                                                                 e.target.value
                                                             );
-                                                            if(
-                                                                !('palette' in res) ||
-                                                                !('primary' in res.palette) ||
-                                                                !('main' in res.palette.primary) ||
-                                                                !('secondary' in res.palette) ||
-                                                                !('main' in res.palette.secondary)
-                                                            ){
-                                                                throw e
+                                                            if (
+                                                                !(
+                                                                    "palette" in
+                                                                    res
+                                                                ) ||
+                                                                !(
+                                                                    "primary" in
+                                                                    res.palette
+                                                                ) ||
+                                                                !(
+                                                                    "main" in
+                                                                    res.palette
+                                                                        .primary
+                                                                ) ||
+                                                                !(
+                                                                    "secondary" in
+                                                                    res.palette
+                                                                ) ||
+                                                                !(
+                                                                    "main" in
+                                                                    res.palette
+                                                                        .secondary
+                                                                )
+                                                            ) {
+                                                                throw e;
                                                             }
                                                             setTheme({
                                                                 ...theme,
@@ -267,7 +288,11 @@ export default function Theme() {
                                                 />
                                             </TableCell>
                                             <TableCell>
-                                                <IconButton onClick={()=>deleteTheme(k)}>
+                                                <IconButton
+                                                    onClick={() =>
+                                                        deleteTheme(k)
+                                                    }
+                                                >
                                                     <Delete />
                                                 </IconButton>
                                             </TableCell>
@@ -279,17 +304,19 @@ export default function Theme() {
                                 <Button
                                     variant="outlined"
                                     color="primary"
-                                    style={{marginTop:8}}
-                                    onClick={()=>setCreate(true)}
+                                    style={{ marginTop: 8 }}
+                                    onClick={() => setCreate(true)}
                                 >
                                     新建配色方案
                                 </Button>
                             </div>
-                            <Alert severity="info" style={{marginTop:8}}>
+                            <Alert severity="info" style={{ marginTop: 8 }}>
                                 <Typography variant="body2">
-                                    完整的配置项可在 {" "}
+                                    完整的配置项可在{" "}
                                     <Link
-                                        href={"https://material-ui.com/zh/customization/default-theme/"}
+                                        href={
+                                            "https://material-ui.com/zh/customization/default-theme/"
+                                        }
                                         target={"_blank"}
                                     >
                                         默认主题 - Material-UI
@@ -297,7 +324,6 @@ export default function Theme() {
                                     查阅。
                                 </Typography>
                             </Alert>
-
                         </div>
 
                         <div className={classes.form}>
@@ -309,7 +335,7 @@ export default function Theme() {
                                     value={options.defaultTheme}
                                     onChange={handleChange("defaultTheme")}
                                 >
-                                    {Object.keys(theme).map(k=>(
+                                    {Object.keys(theme).map(k => (
                                         <MenuItem key={k} value={k}>
                                             <div
                                                 className={
@@ -319,24 +345,18 @@ export default function Theme() {
                                                 <div
                                                     style={{
                                                         backgroundColor:
-                                                        theme[k].palette
-                                                            .primary
-                                                            .main
+                                                            theme[k].palette
+                                                                .primary.main
                                                     }}
-                                                    className={
-                                                        classes.colorDot
-                                                    }
+                                                    className={classes.colorDot}
                                                 />
                                                 <div
                                                     style={{
                                                         backgroundColor:
-                                                        theme[k].palette
-                                                            .secondary
-                                                            .main
+                                                            theme[k].palette
+                                                                .secondary.main
                                                     }}
-                                                    className={
-                                                        classes.colorDot
-                                                    }
+                                                    className={classes.colorDot}
                                                 />
                                             </div>
                                         </MenuItem>
@@ -347,7 +367,6 @@ export default function Theme() {
                                 </FormHelperText>
                             </FormControl>
                         </div>
-
                     </div>
                 </div>
 
@@ -368,7 +387,9 @@ export default function Theme() {
                                     required
                                 >
                                     <MenuItem value={"icon"}>大图标</MenuItem>
-                                    <MenuItem value={"smallIcon"}>小图标</MenuItem>
+                                    <MenuItem value={"smallIcon"}>
+                                        小图标
+                                    </MenuItem>
                                     <MenuItem value={"list"}>列表</MenuItem>
                                 </Select>
                                 <FormHelperText id="component-helper-text">
@@ -390,7 +411,9 @@ export default function Theme() {
                                     required
                                 >
                                     <MenuItem value={"icon"}>大图标</MenuItem>
-                                    <MenuItem value={"smallIcon"}>小图标</MenuItem>
+                                    <MenuItem value={"smallIcon"}>
+                                        小图标
+                                    </MenuItem>
                                     <MenuItem value={"list"}>列表</MenuItem>
                                 </Select>
                                 <FormHelperText id="component-helper-text">
@@ -399,7 +422,6 @@ export default function Theme() {
                             </FormControl>
                         </div>
                     </div>
-
                 </div>
 
                 <div className={classes.root}>
@@ -414,7 +436,11 @@ export default function Theme() {
                 </div>
             </form>
 
-            <CreateTheme onSubmit={addTheme} open={create} onClose={()=>setCreate(false)}/>
+            <CreateTheme
+                onSubmit={addTheme}
+                open={create}
+                onClose={() => setCreate(false)}
+            />
         </div>
     );
 }
diff --git a/src/component/Admin/Setting/UploadDownload.js b/src/component/Admin/Setting/UploadDownload.js
index 7b9600b..b8576ca 100644
--- a/src/component/Admin/Setting/UploadDownload.js
+++ b/src/component/Admin/Setting/UploadDownload.js
@@ -37,26 +37,26 @@ export default function UploadDownload() {
     const [loading, setLoading] = useState(false);
     const [options, setOptions] = useState({
         max_worker_num: "1",
-        max_parallel_transfer:"1",
-        temp_path:"",
-        maxEditSize:"0",
-        onedrive_chunk_retries:"0",
-        archive_timeout:"0",
-        download_timeout:"0",
-        preview_timeout:"0",
-        doc_preview_timeout:"0",
-        upload_credential_timeout:"0",
-        upload_session_timeout:"0",
-        slave_api_timeout:"0",
-        onedrive_monitor_timeout:"0",
-        share_download_session_timeout:"0",
-        onedrive_callback_check:"0",
-        reset_after_upload_failed:"0",
-        onedrive_source_timeout:"0",
+        max_parallel_transfer: "1",
+        temp_path: "",
+        maxEditSize: "0",
+        onedrive_chunk_retries: "0",
+        archive_timeout: "0",
+        download_timeout: "0",
+        preview_timeout: "0",
+        doc_preview_timeout: "0",
+        upload_credential_timeout: "0",
+        upload_session_timeout: "0",
+        slave_api_timeout: "0",
+        onedrive_monitor_timeout: "0",
+        share_download_session_timeout: "0",
+        onedrive_callback_check: "0",
+        reset_after_upload_failed: "0",
+        onedrive_source_timeout: "0"
     });
 
     const handleCheckChange = name => event => {
-        const value= event.target.checked ? "1" : "0";
+        const value = event.target.checked ? "1" : "0";
         setOptions({
             ...options,
             [name]: value
@@ -90,57 +90,56 @@ export default function UploadDownload() {
         // eslint-disable-next-line
     }, []);
 
-
     const submit = e => {
         e.preventDefault();
         setLoading(true);
         const option = [];
-        Object.keys(options).forEach(k=>{
+        Object.keys(options).forEach(k => {
             option.push({
-                key:k,
-                value:options[k],
+                key: k,
+                value: options[k]
             });
-        })
-        API.patch("/admin/setting",{
-            options:option,
+        });
+        API.patch("/admin/setting", {
+            options: option
         })
             .then(() => {
                 ToggleSnackbar("top", "right", "设置已更改", "success");
             })
             .catch(error => {
                 ToggleSnackbar("top", "right", error.message, "error");
-            }).then(()=>{
+            })
+            .then(() => {
                 setLoading(false);
-        });
+            });
     };
 
     return (
         <div>
             <form onSubmit={submit}>
-
                 <div className={classes.root}>
                     <Typography variant="h6" gutterBottom>
                         存储与传输
                     </Typography>
                     <div className={classes.formContainer}>
-
                         <div className={classes.form}>
-                            <FormControl >
+                            <FormControl>
                                 <InputLabel htmlFor="component-helper">
                                     Worker 数量
                                 </InputLabel>
                                 <Input
                                     type={"number"}
                                     inputProps={{
-                                        min:1,
-                                        step:1,
+                                        min: 1,
+                                        step: 1
                                     }}
                                     value={options.max_worker_num}
                                     onChange={handleChange("max_worker_num")}
                                     required
                                 />
                                 <FormHelperText id="component-helper-text">
-                                    任务队列最多并行执行的任务数，保存后需要重启 Cloudreve 生效
+                                    任务队列最多并行执行的任务数，保存后需要重启
+                                    Cloudreve 生效
                                 </FormHelperText>
                             </FormControl>
                         </div>
@@ -153,11 +152,13 @@ export default function UploadDownload() {
                                 <Input
                                     type={"number"}
                                     inputProps={{
-                                        min:1,
-                                        step:1,
+                                        min: 1,
+                                        step: 1
                                     }}
                                     value={options.max_parallel_transfer}
-                                    onChange={handleChange("max_parallel_transfer")}
+                                    onChange={handleChange(
+                                        "max_parallel_transfer"
+                                    )}
                                     required
                                 />
                                 <FormHelperText id="component-helper-text">
@@ -199,22 +200,25 @@ export default function UploadDownload() {
                         </div>
 
                         <div className={classes.form}>
-                            <FormControl >
+                            <FormControl>
                                 <InputLabel htmlFor="component-helper">
                                     OneDrive 分片错误重试
                                 </InputLabel>
                                 <Input
                                     type={"number"}
                                     inputProps={{
-                                        min:0,
-                                        step:1,
+                                        min: 0,
+                                        step: 1
                                     }}
                                     value={options.onedrive_chunk_retries}
-                                    onChange={handleChange("onedrive_chunk_retries")}
+                                    onChange={handleChange(
+                                        "onedrive_chunk_retries"
+                                    )}
                                     required
                                 />
                                 <FormHelperText id="component-helper-text">
-                                    OneDrive 存储策略分片上传失败后重试的最大次数，只适用于服务端上传或中转
+                                    OneDrive
+                                    存储策略分片上传失败后重试的最大次数，只适用于服务端上传或中转
                                 </FormHelperText>
                             </FormControl>
                         </div>
@@ -225,7 +229,8 @@ export default function UploadDownload() {
                                     control={
                                         <Switch
                                             checked={
-                                                options.reset_after_upload_failed === "1"
+                                                options.reset_after_upload_failed ===
+                                                "1"
                                             }
                                             onChange={handleCheckChange(
                                                 "reset_after_upload_failed"
@@ -239,7 +244,6 @@ export default function UploadDownload() {
                                 </FormHelperText>
                             </FormControl>
                         </div>
-
                     </div>
                 </div>
 
@@ -249,17 +253,16 @@ export default function UploadDownload() {
                     </Typography>
 
                     <div className={classes.formContainer}>
-
                         <div className={classes.form}>
-                            <FormControl >
+                            <FormControl>
                                 <InputLabel htmlFor="component-helper">
                                     打包下载
                                 </InputLabel>
                                 <Input
                                     type={"number"}
                                     inputProps={{
-                                        min:1,
-                                        step:1,
+                                        min: 1,
+                                        step: 1
                                     }}
                                     value={options.archive_timeout}
                                     onChange={handleChange("archive_timeout")}
@@ -269,15 +272,15 @@ export default function UploadDownload() {
                         </div>
 
                         <div className={classes.form}>
-                            <FormControl >
+                            <FormControl>
                                 <InputLabel htmlFor="component-helper">
                                     下载会话
                                 </InputLabel>
                                 <Input
                                     type={"number"}
                                     inputProps={{
-                                        min:1,
-                                        step:1,
+                                        min: 1,
+                                        step: 1
                                     }}
                                     value={options.download_timeout}
                                     onChange={handleChange("download_timeout")}
@@ -287,15 +290,15 @@ export default function UploadDownload() {
                         </div>
 
                         <div className={classes.form}>
-                            <FormControl >
+                            <FormControl>
                                 <InputLabel htmlFor="component-helper">
                                     预览链接
                                 </InputLabel>
                                 <Input
                                     type={"number"}
                                     inputProps={{
-                                        min:1,
-                                        step:1,
+                                        min: 1,
+                                        step: 1
                                     }}
                                     value={options.preview_timeout}
                                     onChange={handleChange("preview_timeout")}
@@ -305,54 +308,60 @@ export default function UploadDownload() {
                         </div>
 
                         <div className={classes.form}>
-                            <FormControl >
+                            <FormControl>
                                 <InputLabel htmlFor="component-helper">
                                     Office 文档预览连接
                                 </InputLabel>
                                 <Input
                                     type={"number"}
                                     inputProps={{
-                                        min:1,
-                                        step:1,
+                                        min: 1,
+                                        step: 1
                                     }}
                                     value={options.doc_preview_timeout}
-                                    onChange={handleChange("doc_preview_timeout")}
+                                    onChange={handleChange(
+                                        "doc_preview_timeout"
+                                    )}
                                     required
                                 />
                             </FormControl>
                         </div>
 
                         <div className={classes.form}>
-                            <FormControl >
+                            <FormControl>
                                 <InputLabel htmlFor="component-helper">
                                     上传凭证
                                 </InputLabel>
                                 <Input
                                     type={"number"}
                                     inputProps={{
-                                        min:1,
-                                        step:1,
+                                        min: 1,
+                                        step: 1
                                     }}
                                     value={options.upload_credential_timeout}
-                                    onChange={handleChange("upload_credential_timeout")}
+                                    onChange={handleChange(
+                                        "upload_credential_timeout"
+                                    )}
                                     required
                                 />
                             </FormControl>
                         </div>
 
                         <div className={classes.form}>
-                            <FormControl >
+                            <FormControl>
                                 <InputLabel htmlFor="component-helper">
                                     上传会话
                                 </InputLabel>
                                 <Input
                                     type={"number"}
                                     inputProps={{
-                                        min:1,
-                                        step:1,
+                                        min: 1,
+                                        step: 1
                                     }}
                                     value={options.upload_session_timeout}
-                                    onChange={handleChange("upload_session_timeout")}
+                                    onChange={handleChange(
+                                        "upload_session_timeout"
+                                    )}
                                     required
                                 />
                                 <FormHelperText id="component-helper-text">
@@ -362,15 +371,15 @@ export default function UploadDownload() {
                         </div>
 
                         <div className={classes.form}>
-                            <FormControl >
+                            <FormControl>
                                 <InputLabel htmlFor="component-helper">
                                     从机API请求
                                 </InputLabel>
                                 <Input
                                     type={"number"}
                                     inputProps={{
-                                        min:1,
-                                        step:1,
+                                        min: 1,
+                                        step: 1
                                     }}
                                     value={options.slave_api_timeout}
                                     onChange={handleChange("slave_api_timeout")}
@@ -380,18 +389,22 @@ export default function UploadDownload() {
                         </div>
 
                         <div className={classes.form}>
-                            <FormControl >
+                            <FormControl>
                                 <InputLabel htmlFor="component-helper">
                                     分享下载会话
                                 </InputLabel>
                                 <Input
                                     type={"number"}
                                     inputProps={{
-                                        min:1,
-                                        step:1,
+                                        min: 1,
+                                        step: 1
                                     }}
-                                    value={options.share_download_session_timeout}
-                                    onChange={handleChange("share_download_session_timeout")}
+                                    value={
+                                        options.share_download_session_timeout
+                                    }
+                                    onChange={handleChange(
+                                        "share_download_session_timeout"
+                                    )}
                                     required
                                 />
                                 <FormHelperText id="component-helper-text">
@@ -401,69 +414,77 @@ export default function UploadDownload() {
                         </div>
 
                         <div className={classes.form}>
-                            <FormControl >
+                            <FormControl>
                                 <InputLabel htmlFor="component-helper">
                                     OneDrive 客户端上传监控间隔
                                 </InputLabel>
                                 <Input
                                     type={"number"}
                                     inputProps={{
-                                        min:1,
-                                        step:1,
+                                        min: 1,
+                                        step: 1
                                     }}
                                     value={options.onedrive_monitor_timeout}
-                                    onChange={handleChange("onedrive_monitor_timeout")}
+                                    onChange={handleChange(
+                                        "onedrive_monitor_timeout"
+                                    )}
                                     required
                                 />
                                 <FormHelperText id="component-helper-text">
-                                    每间隔所设定时间，Cloudreve 会向 OneDrive 请求检查客户端上传情况已确保客户端上传可控
+                                    每间隔所设定时间，Cloudreve 会向 OneDrive
+                                    请求检查客户端上传情况已确保客户端上传可控
                                 </FormHelperText>
                             </FormControl>
                         </div>
 
                         <div className={classes.form}>
-                            <FormControl >
+                            <FormControl>
                                 <InputLabel htmlFor="component-helper">
                                     OneDrive 回调等待
                                 </InputLabel>
                                 <Input
                                     type={"number"}
                                     inputProps={{
-                                        min:1,
-                                        step:1,
+                                        min: 1,
+                                        step: 1
                                     }}
                                     value={options.onedrive_callback_check}
-                                    onChange={handleChange("onedrive_callback_check")}
+                                    onChange={handleChange(
+                                        "onedrive_callback_check"
+                                    )}
                                     required
                                 />
                                 <FormHelperText id="component-helper-text">
-                                    OneDrive 客户端上传完成后，等待回调的最大时间，如果超出会被认为上传失败
+                                    OneDrive
+                                    客户端上传完成后，等待回调的最大时间，如果超出会被认为上传失败
                                 </FormHelperText>
                             </FormControl>
                         </div>
 
                         <div className={classes.form}>
-                            <FormControl >
+                            <FormControl>
                                 <InputLabel htmlFor="component-helper">
                                     OneDrive 下载请求缓存
                                 </InputLabel>
                                 <Input
                                     type={"number"}
                                     inputProps={{
-                                        min:1,
-                                        max:3659,
-                                        step:1,
+                                        min: 1,
+                                        max: 3659,
+                                        step: 1
                                     }}
                                     value={options.onedrive_source_timeout}
-                                    onChange={handleChange("onedrive_source_timeout")}
+                                    onChange={handleChange(
+                                        "onedrive_source_timeout"
+                                    )}
                                     required
                                 />
                                 <FormHelperText id="component-helper-text">
-                                    OneDrive 获取文件下载 URL 后可将结果缓存，减轻热门文件下载API请求频率
+                                    OneDrive 获取文件下载 URL
+                                    后可将结果缓存，减轻热门文件下载API请求频率
                                 </FormHelperText>
                             </FormControl>
                         </div>
-
                     </div>
                 </div>
 
diff --git a/src/component/Admin/User/EditUser.js b/src/component/Admin/User/EditUser.js
index bc0ab2a..2c91918 100644
--- a/src/component/Admin/User/EditUser.js
+++ b/src/component/Admin/User/EditUser.js
@@ -1,14 +1,14 @@
-import React, {useCallback, useEffect, useState} from "react";
-import {useParams} from "react-router";
+import React, { useCallback, useEffect, useState } from "react";
+import { useParams } from "react-router";
 import API from "../../../middleware/Api";
-import {useDispatch} from "react-redux";
-import {toggleSnackbar} from "../../../actions";
+import { useDispatch } from "react-redux";
+import { toggleSnackbar } from "../../../actions";
 import UserForm from "./UserForm";
 
-export default function EditUserPreload( ) {
-    const [user,setUser] = useState({});
+export default function EditUserPreload() {
+    const [user, setUser] = useState({});
 
-    const {id } = useParams();
+    const { id } = useParams();
 
     const dispatch = useDispatch();
     const ToggleSnackbar = useCallback(
@@ -17,8 +17,7 @@ export default function EditUserPreload( ) {
         [dispatch]
     );
 
-
-    useEffect(()=>{
+    useEffect(() => {
         setUser({});
         API.get("/admin/user/" + id)
             .then(response => {
@@ -31,13 +30,7 @@ export default function EditUserPreload( ) {
             .catch(error => {
                 ToggleSnackbar("top", "right", error.message, "error");
             });
-    },[id]);
+    }, [id]);
 
-    return (
-        <div>
-            {user.ID !== undefined &&
-                <UserForm user={user}/>
-            }
-        </div>
-    );
+    return <div>{user.ID !== undefined && <UserForm user={user} />}</div>;
 }
diff --git a/src/component/Admin/User/UserForm.js b/src/component/Admin/User/UserForm.js
index eb2d0da..e4ce713 100644
--- a/src/component/Admin/User/UserForm.js
+++ b/src/component/Admin/User/UserForm.js
@@ -43,7 +43,7 @@ export default function UserForm(props) {
                   Nick: "",
                   Password: "", // 为空时只读
                   Status: "0", // 转换类型
-                  GroupID: "2", // 转换类型
+                  GroupID: "2" // 转换类型
               }
     );
     const [groups, setGroups] = useState([]);
@@ -76,21 +76,26 @@ export default function UserForm(props) {
 
     const submit = e => {
         e.preventDefault();
-        const userCopy = {...user};
+        const userCopy = { ...user };
 
         // 整型转换
-        ["Status", "GroupID","Score"].forEach(v => {
+        ["Status", "GroupID", "Score"].forEach(v => {
             userCopy[v] = parseInt(userCopy[v]);
         });
 
         setLoading(true);
         API.post("/admin/user", {
             user: userCopy,
-            password:userCopy.Password,
+            password: userCopy.Password
         })
             .then(() => {
                 history.push("/admin/user");
-                ToggleSnackbar("top", "right", "用户已"+ (props.user ? "保存" : "添加"), "success");
+                ToggleSnackbar(
+                    "top",
+                    "right",
+                    "用户已" + (props.user ? "保存" : "添加"),
+                    "success"
+                );
             })
             .catch(error => {
                 ToggleSnackbar("top", "right", error.message, "error");
@@ -110,7 +115,6 @@ export default function UserForm(props) {
                     </Typography>
 
                     <div className={classes.formContainer}>
-
                         <div className={classes.form}>
                             <FormControl fullWidth>
                                 <InputLabel htmlFor="component-helper">
@@ -162,9 +166,7 @@ export default function UserForm(props) {
                                 </InputLabel>
                                 <Select
                                     value={user.GroupID}
-                                    onChange={handleChange(
-                                        "GroupID"
-                                    )}
+                                    onChange={handleChange("GroupID")}
                                     required
                                 >
                                     {groups.map(v => {
@@ -194,19 +196,18 @@ export default function UserForm(props) {
                                 </InputLabel>
                                 <Select
                                     value={user.Status}
-                                    onChange={handleChange(
-                                        "Status"
-                                    )}
+                                    onChange={handleChange("Status")}
                                     required
                                 >
                                     <MenuItem value={"0"}>正常</MenuItem>
                                     <MenuItem value={"1"}>未激活</MenuItem>
                                     <MenuItem value={"2"}>被封禁</MenuItem>
-                                    <MenuItem value={"3"}>超额使用被封禁</MenuItem>
+                                    <MenuItem value={"3"}>
+                                        超额使用被封禁
+                                    </MenuItem>
                                 </Select>
                             </FormControl>
                         </div>
-
                     </div>
                 </div>
                 <div className={classes.root}>
diff --git a/src/component/Common/Snackbar.js b/src/component/Common/Snackbar.js
index b4fb928..bda7621 100644
--- a/src/component/Common/Snackbar.js
+++ b/src/component/Common/Snackbar.js
@@ -1,148 +1,153 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux'
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import {} from "../../actions";
+import classNames from "classnames";
+import ErrorIcon from "@material-ui/icons/Error";
+import InfoIcon from "@material-ui/icons/Info";
+import CloseIcon from "@material-ui/icons/Close";
+import CheckCircleIcon from "@material-ui/icons/CheckCircle";
+import WarningIcon from "@material-ui/icons/Warning";
+
+import { green, amber } from "@material-ui/core/colors";
+
 import {
- } from "../../actions"
-import classNames from 'classnames';
-import ErrorIcon from '@material-ui/icons/Error';
-import InfoIcon from '@material-ui/icons/Info';
-import CloseIcon from '@material-ui/icons/Close';
-import CheckCircleIcon from '@material-ui/icons/CheckCircle';
-import WarningIcon from '@material-ui/icons/Warning';
-
-import { green, amber } from '@material-ui/core/colors';
-
-import { withStyles, SnackbarContent, Snackbar, IconButton } from '@material-ui/core';
+    withStyles,
+    SnackbarContent,
+    Snackbar,
+    IconButton
+} from "@material-ui/core";
 
 const mapStateToProps = state => {
     return {
-        snackbar:state.viewUpdate.snackbar,
-    }
-}
+        snackbar: state.viewUpdate.snackbar
+    };
+};
 
 const mapDispatchToProps = () => {
-    return {
-    }
-}
+    return {};
+};
 
 const variantIcon = {
     success: CheckCircleIcon,
     warning: WarningIcon,
     error: ErrorIcon,
-    info: InfoIcon,
-  };
+    info: InfoIcon
+};
 
 const styles1 = theme => ({
     success: {
-        backgroundColor: green[600],
-      },
-      error: {
-        backgroundColor: theme.palette.error.dark,
-      },
-      info: {
-        backgroundColor: theme.palette.primary.dark,
-      },
-      warning: {
-        backgroundColor: amber[700],
-      },
-      icon: {
-        fontSize: 20,
-      },
-      iconVariant: {
+        backgroundColor: green[600]
+    },
+    error: {
+        backgroundColor: theme.palette.error.dark
+    },
+    info: {
+        backgroundColor: theme.palette.primary.dark
+    },
+    warning: {
+        backgroundColor: amber[700]
+    },
+    icon: {
+        fontSize: 20
+    },
+    iconVariant: {
         opacity: 0.9,
-        marginRight: theme.spacing(1),
-      },
-      message: {
-        display: 'flex',
-        alignItems: 'center',
-      },
-})
+        marginRight: theme.spacing(1)
+    },
+    message: {
+        display: "flex",
+        alignItems: "center"
+    }
+});
 
 function MySnackbarContent(props) {
     const { classes, className, message, onClose, variant, ...other } = props;
     const Icon = variantIcon[variant];
-  
+
     return (
-      <SnackbarContent
-        className={classNames(classes[variant], className)}
-        aria-describedby="client-snackbar"
-        message={
-          <span id="client-snackbar" className={classes.message}>
-            <Icon className={classNames(classes.icon, classes.iconVariant)} />
-            {message}
-          </span>
-        }
-        action={[
-          <IconButton
-            key="close"
-            aria-label="Close"
-            color="inherit"
-            className={classes.close}
-            onClick={onClose}
-          >
-            <CloseIcon className={classes.icon} />
-          </IconButton>,
-        ]}
-        {...other}
-      />
+        <SnackbarContent
+            className={classNames(classes[variant], className)}
+            aria-describedby="client-snackbar"
+            message={
+                <span id="client-snackbar" className={classes.message}>
+                    <Icon
+                        className={classNames(
+                            classes.icon,
+                            classes.iconVariant
+                        )}
+                    />
+                    {message}
+                </span>
+            }
+            action={[
+                <IconButton
+                    key="close"
+                    aria-label="Close"
+                    color="inherit"
+                    className={classes.close}
+                    onClick={onClose}
+                >
+                    <CloseIcon className={classes.icon} />
+                </IconButton>
+            ]}
+            {...other}
+        />
     );
-  }
+}
 MySnackbarContent.propTypes = {
-  classes: PropTypes.object.isRequired,
-  className: PropTypes.string,
-  message: PropTypes.node,
-  onClose: PropTypes.func,
-  variant: PropTypes.oneOf(['success', 'warning', 'error', 'info']).isRequired,
+    classes: PropTypes.object.isRequired,
+    className: PropTypes.string,
+    message: PropTypes.node,
+    onClose: PropTypes.func,
+    variant: PropTypes.oneOf(["success", "warning", "error", "info"]).isRequired
 };
 
 const MySnackbarContentWrapper = withStyles(styles1)(MySnackbarContent);
 const styles = theme => ({
     margin: {
-        margin: theme.spacing(1),
-    },
-})
+        margin: theme.spacing(1)
+    }
+});
 class SnackbarCompoment extends Component {
+    state = {
+        open: false
+    };
 
-    state={
-        open:false,
-    }
-
-    UNSAFE_componentWillReceiveProps = (nextProps)=>{
-        if(nextProps.snackbar.toggle !== this.props.snackbar.toggle){
-            this.setState({open:true});
+    UNSAFE_componentWillReceiveProps = nextProps => {
+        if (nextProps.snackbar.toggle !== this.props.snackbar.toggle) {
+            this.setState({ open: true });
         }
-    }
+    };
+
+    handleClose = () => {
+        this.setState({ open: false });
+    };
 
-    handleClose= ()=>{
-        this.setState({open:false});
-    } 
-    
     render() {
-
         return (
             <Snackbar
-            anchorOrigin={{
-                vertical: this.props.snackbar.vertical,
-                horizontal: this.props.snackbar.horizontal,
-            }}
-            open={this.state.open}
-            autoHideDuration={6000}
-            onClose={this.handleClose}
-            >
-            <MySnackbarContentWrapper
+                anchorOrigin={{
+                    vertical: this.props.snackbar.vertical,
+                    horizontal: this.props.snackbar.horizontal
+                }}
+                open={this.state.open}
+                autoHideDuration={6000}
                 onClose={this.handleClose}
-                variant={this.props.snackbar.color}
-                message={this.props.snackbar.msg} 
-            />
-        </Snackbar>
+            >
+                <MySnackbarContentWrapper
+                    onClose={this.handleClose}
+                    variant={this.props.snackbar.color}
+                    message={this.props.snackbar.msg}
+                />
+            </Snackbar>
         );
     }
-
 }
 
 const AlertBar = connect(
     mapStateToProps,
     mapDispatchToProps
-)( withStyles(styles)(SnackbarCompoment))
+)(withStyles(styles)(SnackbarCompoment));
 
-export default AlertBar
\ No newline at end of file
+export default AlertBar;
diff --git a/src/component/Dial/Aria2.js b/src/component/Dial/Aria2.js
index 37cee66..34eff8f 100644
--- a/src/component/Dial/Aria2.js
+++ b/src/component/Dial/Aria2.js
@@ -16,11 +16,10 @@ const useStyles = makeStyles(() => ({
         left: "auto",
         zIndex: 5,
         position: "fixed"
-    },
+    }
 }));
 
 export default function RemoteDownloadButton() {
-
     const classes = useStyles();
     const dispatch = useDispatch();
 
@@ -29,19 +28,18 @@ export default function RemoteDownloadButton() {
         [dispatch]
     );
 
-
     return (
         <>
-        <Modals/>
-        <AutoHidden enable>
-            <Fab
-                className={classes.fab}
-                color="secondary"
-                onClick={()=>OpenRemoteDownloadDialog()}
-            >
-                <Add/>
-            </Fab>
-        </AutoHidden>
-            </>
+            <Modals />
+            <AutoHidden enable>
+                <Fab
+                    className={classes.fab}
+                    color="secondary"
+                    onClick={() => OpenRemoteDownloadDialog()}
+                >
+                    <Add />
+                </Fab>
+            </AutoHidden>
+        </>
     );
 }
diff --git a/src/component/Dial/AutoHidden.js b/src/component/Dial/AutoHidden.js
index 422b279..ab1e975 100644
--- a/src/component/Dial/AutoHidden.js
+++ b/src/component/Dial/AutoHidden.js
@@ -1,8 +1,7 @@
-import React, {  useState, useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import Zoom from "@material-ui/core/Zoom";
 
-
-function AutoHidden  ({ children, enable }){
+function AutoHidden({ children, enable }) {
     const [hidden, setHidden] = useState(false);
 
     let prev = window.scrollY;
@@ -10,33 +9,29 @@ function AutoHidden  ({ children, enable }){
     const show = 50;
 
     useEffect(() => {
-        const handleNavigation = (e) => {
+        const handleNavigation = e => {
             const window = e.currentTarget;
 
             if (prev > window.scrollY) {
-                if (lastUpdate - window.scrollY > show){
+                if (lastUpdate - window.scrollY > show) {
                     lastUpdate = window.scrollY;
                     setHidden(false);
                 }
             } else if (prev < window.scrollY) {
-                if (window.scrollY - lastUpdate > show){
+                if (window.scrollY - lastUpdate > show) {
                     lastUpdate = window.scrollY;
                     setHidden(true);
                 }
             }
             prev = window.scrollY;
         };
-        if (enable){
-            window.addEventListener('scroll', e => handleNavigation(e));
+        if (enable) {
+            window.addEventListener("scroll", e => handleNavigation(e));
         }
         // eslint-disable-next-line
-    }, [enable])
+    }, [enable]);
 
-    return (
-        <Zoom in={!hidden}>
-            {children}
-        </Zoom>
-    )
+    return <Zoom in={!hidden}>{children}</Zoom>;
 }
 
-export default AutoHidden
\ No newline at end of file
+export default AutoHidden;
diff --git a/src/component/Dial/Create.js b/src/component/Dial/Create.js
index 387a55b..b77b759 100644
--- a/src/component/Dial/Create.js
+++ b/src/component/Dial/Create.js
@@ -5,12 +5,16 @@ import SpeedDialIcon from "@material-ui/lab/SpeedDialIcon";
 import SpeedDialAction from "@material-ui/lab/SpeedDialAction";
 import CreateNewFolderIcon from "@material-ui/icons/CreateNewFolder";
 import PublishIcon from "@material-ui/icons/Publish";
-import { openCreateFileDialog, openCreateFolderDialog, toggleSnackbar } from "../../actions";
-import {useDispatch} from "react-redux";
+import {
+    openCreateFileDialog,
+    openCreateFolderDialog,
+    toggleSnackbar
+} from "../../actions";
+import { useDispatch } from "react-redux";
 import AutoHidden from "./AutoHidden";
-import statusHelper from "../../utils/page"
+import statusHelper from "../../utils/page";
 import Backdrop from "@material-ui/core/Backdrop";
-import {FolderUpload,FilePlus} from "mdi-material-ui";
+import { FolderUpload, FilePlus } from "mdi-material-ui";
 
 const useStyles = makeStyles(() => ({
     fab: {
@@ -29,11 +33,11 @@ const useStyles = makeStyles(() => ({
         zIndex: 9999,
         right: 7
     },
-    '@global': {
-        '.MuiSpeedDialAction-staticTooltipLabel': {
-            width:100,
-        },
-    },
+    "@global": {
+        ".MuiSpeedDialAction-staticTooltipLabel": {
+            width: 100
+        }
+    }
 }));
 
 export default function UploadButton(props) {
@@ -49,13 +53,11 @@ export default function UploadButton(props) {
         [dispatch]
     );
     const OpenNewFolderDialog = useCallback(
-        () =>
-            dispatch(openCreateFolderDialog()),
+        () => dispatch(openCreateFolderDialog()),
         [dispatch]
     );
     const OpenNewFileDialog = useCallback(
-        () =>
-            dispatch(openCreateFileDialog()),
+        () => dispatch(openCreateFileDialog()),
         [dispatch]
     );
 
@@ -63,20 +65,13 @@ export default function UploadButton(props) {
         setQueued(props.Queued);
     }, [props.Queued]);
 
-    const openUpload = id =>{
-      const uploadButton = document.getElementsByClassName(
-          id
-      )[0];
-      if (document.body.contains(uploadButton)) {
-          uploadButton.click();
-      } else {
-          ToggleSnackbar(
-              "top",
-              "right",
-              "上传组件还未加载完成",
-              "warning"
-          );
-      }
+    const openUpload = id => {
+        const uploadButton = document.getElementsByClassName(id)[0];
+        if (document.body.contains(uploadButton)) {
+            uploadButton.click();
+        } else {
+            ToggleSnackbar("top", "right", "上传组件还未加载完成", "warning");
+        }
     };
     const uploadClicked = () => {
         if (open) {
@@ -112,44 +107,58 @@ export default function UploadButton(props) {
                     ariaLabel="SpeedDial openIcon example"
                     hidden={false}
                     tooltipTitle="上传文件"
-                    icon={<SpeedDialIcon openIcon={!statusHelper.isMobile()&&<PublishIcon />} />}
+                    icon={
+                        <SpeedDialIcon
+                            openIcon={
+                                !statusHelper.isMobile() && <PublishIcon />
+                            }
+                        />
+                    }
                     onClose={handleClose}
                     FabProps={{
-                        onClick: () => !statusHelper.isMobile() && uploadClicked(),
-                        color: "secondary",
+                        onClick: () =>
+                            !statusHelper.isMobile() && uploadClicked(),
+                        color: "secondary"
                     }}
                     onOpen={handleOpen}
                     open={open}
                 >
-                    {statusHelper.isMobile() && <SpeedDialAction
-                        key="UploadFile"
-                        icon={<PublishIcon />}
-                        tooltipOpen
-                        tooltipTitle="上传文件"
-                        onClick= {() => uploadClicked()}
-                        title={"上传文件"}/>}
-                    {!statusHelper.isMobile() && <SpeedDialAction
-                        key="UploadFolder"
-                        icon={<FolderUpload />}
-                        tooltipOpen
-                        tooltipTitle="上传目录"
-                        onClick= {() => openUpload("uploadFolderForm")}
-                        title={"上传目录"}/>}
+                    {statusHelper.isMobile() && (
+                        <SpeedDialAction
+                            key="UploadFile"
+                            icon={<PublishIcon />}
+                            tooltipOpen
+                            tooltipTitle="上传文件"
+                            onClick={() => uploadClicked()}
+                            title={"上传文件"}
+                        />
+                    )}
+                    {!statusHelper.isMobile() && (
+                        <SpeedDialAction
+                            key="UploadFolder"
+                            icon={<FolderUpload />}
+                            tooltipOpen
+                            tooltipTitle="上传目录"
+                            onClick={() => openUpload("uploadFolderForm")}
+                            title={"上传目录"}
+                        />
+                    )}
                     <SpeedDialAction
                         key="NewFolder"
                         icon={<CreateNewFolderIcon />}
                         tooltipOpen
                         tooltipTitle="新建目录"
-                        onClick= {() => OpenNewFolderDialog()}
-                        title={"新建目录"}/>
+                        onClick={() => OpenNewFolderDialog()}
+                        title={"新建目录"}
+                    />
                     <SpeedDialAction
                         key="NewFile"
                         icon={<FilePlus />}
                         tooltipOpen
                         tooltipTitle="新建文件"
-                        onClick= {() => OpenNewFileDialog()}
-                        title={"新建文件"}/>
-
+                        onClick={() => OpenNewFileDialog()}
+                        title={"新建文件"}
+                    />
                 </SpeedDial>
             </Badge>
         </AutoHidden>
diff --git a/src/component/Dial/Save.js b/src/component/Dial/Save.js
index e9f2f53..a030501 100644
--- a/src/component/Dial/Save.js
+++ b/src/component/Dial/Save.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { makeStyles } from "@material-ui/core";
 import SaveIcon from "@material-ui/icons/Save";
-import CheckIcon from '@material-ui/icons/Check';
+import CheckIcon from "@material-ui/icons/Check";
 import AutoHidden from "./AutoHidden";
 import statusHelper from "../../utils/page";
 import Fab from "@material-ui/core/Fab";
@@ -40,16 +40,16 @@ const useStyles = makeStyles(theme => ({
     },
     buttonSuccess: {
         backgroundColor: green[500],
-        '&:hover': {
-            backgroundColor: green[700],
-        },
-    },
+        "&:hover": {
+            backgroundColor: green[700]
+        }
+    }
 }));
 
 export default function SaveButton(props) {
     const classes = useStyles();
     const buttonClassname = clsx({
-        [classes.buttonSuccess]: props.status==="success",
+        [classes.buttonSuccess]: props.status === "success"
     });
 
     return (
@@ -64,14 +64,19 @@ export default function SaveButton(props) {
                             disabled={props.status === "loading"}
                             aria-label="add"
                         >
-                            {props.status==="success" ? <CheckIcon /> : <SaveIcon />}
+                            {props.status === "success" ? (
+                                <CheckIcon />
+                            ) : (
+                                <SaveIcon />
+                            )}
                         </Fab>
                     </Tooltip>
-                    {props.status === "loading"&&<CircularProgress
-                        size={68}
-                        className={classes.fabProgress}
-                    />}
-
+                    {props.status === "loading" && (
+                        <CircularProgress
+                            size={68}
+                            className={classes.fabProgress}
+                        />
+                    )}
                 </div>
             </div>
         </AutoHidden>
diff --git a/src/component/Download/Download.js b/src/component/Download/Download.js
index 64ed5b8..45147fc 100644
--- a/src/component/Download/Download.js
+++ b/src/component/Download/Download.js
@@ -53,8 +53,8 @@ const styles = theme => ({
         marginTop: "20px",
         marginBottom: "20px"
     },
-    margin:{
-        marginTop:theme.spacing(2),
+    margin: {
+        marginTop: theme.spacing(2)
     }
 });
 const mapStateToProps = () => {
@@ -101,8 +101,11 @@ class DownloadComponent extends Component {
                 });
                 // 设定自动更新
                 clearTimeout(this.interval);
-                if(response.data.length > 0){
-                    this.interval = setTimeout(this.loadDownloading,1000 * response.data[0].interval);
+                if (response.data.length > 0) {
+                    this.interval = setTimeout(
+                        this.loadDownloading,
+                        1000 * response.data[0].interval
+                    );
                 }
             })
             .catch(error => {
@@ -119,11 +122,13 @@ class DownloadComponent extends Component {
         this.setState({
             loading: true
         });
-        API
-            .get("/aria2/finished?page=" + ++this.page)
+        API.get("/aria2/finished?page=" + ++this.page)
             .then(response => {
                 this.setState({
-                    finishedList: [...this.state.finishedList,...response.data],
+                    finishedList: [
+                        ...this.state.finishedList,
+                        ...response.data
+                    ],
                     loading: false,
                     continue: response.data.length >= 10
                 });
@@ -142,7 +147,7 @@ class DownloadComponent extends Component {
 
         return (
             <div className={classes.layout}>
-                {user.group.allowRemoteDownload&& <RemoteDownloadButton/>}
+                {user.group.allowRemoteDownload && <RemoteDownloadButton />}
                 <Typography
                     color="textSecondary"
                     variant="h4"
@@ -157,7 +162,7 @@ class DownloadComponent extends Component {
                     </IconButton>
                 </Typography>
                 {this.state.downloading.map((value, k) => (
-                    <DownloadingCard key={ k } task={value} />
+                    <DownloadingCard key={k} task={value} />
                 ))}
                 <Typography
                     color="textSecondary"
@@ -169,12 +174,9 @@ class DownloadComponent extends Component {
                 <div className={classes.loadMore}>
                     {this.state.finishedList.map((value, k) => {
                         if (value.files) {
-                            return (
-                                <FinishedCard key={k} task={value}/>
-                            )
+                            return <FinishedCard key={k} task={value} />;
                         }
-                        return null
-
+                        return null;
                     })}
                     <Button
                         size="large"
diff --git a/src/component/FileManager/ContextMenu.js b/src/component/FileManager/ContextMenu.js
index 172e74d..441bcb8 100644
--- a/src/component/FileManager/ContextMenu.js
+++ b/src/component/FileManager/ContextMenu.js
@@ -1,4 +1,10 @@
-import { Divider, ListItemIcon, MenuItem, Typography, withStyles } from "@material-ui/core";
+import {
+    Divider,
+    ListItemIcon,
+    MenuItem,
+    Typography,
+    withStyles
+} from "@material-ui/core";
 import Menu from "@material-ui/core/Menu";
 import { Archive, Unarchive } from "@material-ui/icons";
 import RenameIcon from "@material-ui/icons/BorderColor";
@@ -12,27 +18,49 @@ import MoveIcon from "@material-ui/icons/Input";
 import LinkIcon from "@material-ui/icons/InsertLink";
 import OpenIcon from "@material-ui/icons/OpenInNew";
 import ShareIcon from "@material-ui/icons/Share";
-import { FolderUpload, MagnetOn ,FilePlus} from "mdi-material-ui";
+import { FolderUpload, MagnetOn, FilePlus } from "mdi-material-ui";
 import PropTypes from "prop-types";
 import React, { Component } from "react";
 import { connect } from "react-redux";
 import { withRouter } from "react-router-dom";
-import { openCompressDialog,openCreateFileDialog ,refreshFileList} from "../../actions";
-import { changeContextMenu, navigateTo, openCopyDialog, openCreateFolderDialog, openDecompressDialog, openGetSourceDialog, openLoadingDialog, openMoveDialog, openMusicDialog, openRemoteDownloadDialog, openRemoveDialog, openRenameDialog, openShareDialog, openTorrentDownloadDialog, setNavigatorLoadingStatus, setSelectedTarget, showImgPreivew, toggleSnackbar } from "../../actions/index";
+import {
+    openCompressDialog,
+    openCreateFileDialog,
+    refreshFileList
+} from "../../actions";
+import {
+    changeContextMenu,
+    navigateTo,
+    openCopyDialog,
+    openCreateFolderDialog,
+    openDecompressDialog,
+    openGetSourceDialog,
+    openLoadingDialog,
+    openMoveDialog,
+    openMusicDialog,
+    openRemoteDownloadDialog,
+    openRemoveDialog,
+    openRenameDialog,
+    openShareDialog,
+    openTorrentDownloadDialog,
+    setNavigatorLoadingStatus,
+    setSelectedTarget,
+    showImgPreivew,
+    toggleSnackbar
+} from "../../actions/index";
 import { isCompressFile, isPreviewable, isTorrent } from "../../config";
 import Auth from "../../middleware/Auth";
 import { allowSharePreview } from "../../utils/index";
 import pathHelper from "../../utils/page";
 import RefreshIcon from "@material-ui/icons/Refresh";
 
-
 const styles = () => ({
     propover: {
         minWidth: "200px!important"
     },
-    divider:{
-        marginTop:4,
-        marginBottom:4,
+    divider: {
+        marginTop: 4,
+        marginBottom: 4
     }
 });
 
@@ -45,7 +73,7 @@ const mapStateToProps = state => {
         withFile: state.explorer.selectProps.withFile,
         path: state.navigator.path,
         selected: state.explorer.selected,
-        keywords: state.explorer.keywords,
+        keywords: state.explorer.keywords
     };
 };
 
@@ -113,7 +141,7 @@ const mapDispatchToProps = dispatch => {
         },
         refreshFileList: () => {
             dispatch(refreshFileList());
-        },
+        }
     };
 };
 
@@ -195,8 +223,8 @@ class ContextMenuCompoment extends Component {
             this.props.selected[0].path === "/"
                 ? this.props.selected[0].path + this.props.selected[0].name
                 : this.props.selected[0].path +
-                "/" +
-                this.props.selected[0].name;
+                  "/" +
+                  this.props.selected[0].name;
         switch (isPreviewable(this.props.selected[0].name)) {
             case "img":
                 this.props.showImgPreivew(this.props.selected[0]);
@@ -205,15 +233,18 @@ class ContextMenuCompoment extends Component {
                 if (isShare) {
                     this.props.history.push(
                         this.props.selected[0].key +
-                        "/doc?name=" +
-                        encodeURIComponent(this.props.selected[0].name) +
-                        "&share_path=" +
-                        encodeURIComponent(previewPath)
+                            "/doc?name=" +
+                            encodeURIComponent(this.props.selected[0].name) +
+                            "&share_path=" +
+                            encodeURIComponent(previewPath)
                     );
                     return;
                 }
                 this.props.history.push(
-                    "/doc?p=" + encodeURIComponent(previewPath) + "&id=" + this.props.selected[0].id
+                    "/doc?p=" +
+                        encodeURIComponent(previewPath) +
+                        "&id=" +
+                        this.props.selected[0].id
                 );
                 return;
             case "audio":
@@ -223,60 +254,72 @@ class ContextMenuCompoment extends Component {
                 if (isShare) {
                     this.props.history.push(
                         this.props.selected[0].key +
-                        "/video?name=" +
-                        encodeURIComponent(this.props.selected[0].name) +
-                        "&share_path=" +
-                        encodeURIComponent(previewPath)
+                            "/video?name=" +
+                            encodeURIComponent(this.props.selected[0].name) +
+                            "&share_path=" +
+                            encodeURIComponent(previewPath)
                     );
                     return;
                 }
                 this.props.history.push(
-                    "/video?p=" + encodeURIComponent(previewPath) + "&id=" + this.props.selected[0].id
+                    "/video?p=" +
+                        encodeURIComponent(previewPath) +
+                        "&id=" +
+                        this.props.selected[0].id
                 );
                 return;
             case "pdf":
                 if (isShare) {
                     this.props.history.push(
                         this.props.selected[0].key +
-                        "/pdf?name=" +
-                        encodeURIComponent(this.props.selected[0].name) +
-                        "&share_path=" +
-                        encodeURIComponent(previewPath)
+                            "/pdf?name=" +
+                            encodeURIComponent(this.props.selected[0].name) +
+                            "&share_path=" +
+                            encodeURIComponent(previewPath)
                     );
                     return;
                 }
                 this.props.history.push(
-                    "/pdf?p=" + encodeURIComponent(previewPath) + "&id=" + this.props.selected[0].id
+                    "/pdf?p=" +
+                        encodeURIComponent(previewPath) +
+                        "&id=" +
+                        this.props.selected[0].id
                 );
                 return;
             case "edit":
                 if (isShare) {
                     this.props.history.push(
                         this.props.selected[0].key +
-                        "/text?name=" +
-                        encodeURIComponent(this.props.selected[0].name) +
-                        "&share_path=" +
-                        encodeURIComponent(previewPath)
+                            "/text?name=" +
+                            encodeURIComponent(this.props.selected[0].name) +
+                            "&share_path=" +
+                            encodeURIComponent(previewPath)
                     );
                     return;
                 }
                 this.props.history.push(
-                    "/text?p=" + encodeURIComponent(previewPath) + "&id=" + this.props.selected[0].id
+                    "/text?p=" +
+                        encodeURIComponent(previewPath) +
+                        "&id=" +
+                        this.props.selected[0].id
                 );
                 return;
             case "code":
                 if (isShare) {
                     this.props.history.push(
                         this.props.selected[0].key +
-                        "/code?name=" +
-                        encodeURIComponent(this.props.selected[0].name) +
-                        "&share_path=" +
-                        encodeURIComponent(previewPath)
+                            "/code?name=" +
+                            encodeURIComponent(this.props.selected[0].name) +
+                            "&share_path=" +
+                            encodeURIComponent(previewPath)
                     );
                     return;
                 }
                 this.props.history.push(
-                    "/code?p=" + encodeURIComponent(previewPath) + "&id=" + this.props.selected[0].id
+                    "/code?p=" +
+                        encodeURIComponent(previewPath) +
+                        "&id=" +
+                        this.props.selected[0].id
                 );
                 return;
             default:
@@ -310,21 +353,26 @@ class ContextMenuCompoment extends Component {
                 >
                     {this.props.menuType === "empty" && (
                         <div>
-                            <MenuItem onClick={()=>{
-                                this.props.refreshFileList();
-                                this.props.changeContextMenu(this.props.menuType, false)
-                            }
-
-                            }>
+                            <MenuItem
+                                onClick={() => {
+                                    this.props.refreshFileList();
+                                    this.props.changeContextMenu(
+                                        this.props.menuType,
+                                        false
+                                    );
+                                }}
+                            >
                                 <ListItemIcon>
                                     <RefreshIcon />
                                 </ListItemIcon>
-                                <Typography variant="inherit">
-                                    刷新
-                                </Typography>
+                                <Typography variant="inherit">刷新</Typography>
                             </MenuItem>
-                            <Divider className={classes.divider}/>
-                            <MenuItem onClick={()=>this.clickUpload("uploadFileForm")}>
+                            <Divider className={classes.divider} />
+                            <MenuItem
+                                onClick={() =>
+                                    this.clickUpload("uploadFileForm")
+                                }
+                            >
                                 <ListItemIcon>
                                     <UploadIcon />
                                 </ListItemIcon>
@@ -332,7 +380,11 @@ class ContextMenuCompoment extends Component {
                                     上传文件
                                 </Typography>
                             </MenuItem>
-                            <MenuItem onClick={()=>this.clickUpload("uploadFolderForm")}>
+                            <MenuItem
+                                onClick={() =>
+                                    this.clickUpload("uploadFolderForm")
+                                }
+                            >
                                 <ListItemIcon>
                                     <FolderUpload />
                                 </ListItemIcon>
@@ -355,7 +407,7 @@ class ContextMenuCompoment extends Component {
                                 </MenuItem>
                             )}
 
-                            <Divider className={classes.divider}/>
+                            <Divider className={classes.divider} />
                             <MenuItem
                                 onClick={() =>
                                     this.props.openCreateFolderDialog()
@@ -394,7 +446,9 @@ class ContextMenuCompoment extends Component {
                                             进入
                                         </Typography>
                                     </MenuItem>
-                                    {isHomePage && <Divider className={classes.divider} />}
+                                    {isHomePage && (
+                                        <Divider className={classes.divider} />
+                                    )}
                                 </div>
                             )}
                             {!this.props.isMultiple &&
@@ -428,7 +482,9 @@ class ContextMenuCompoment extends Component {
                                             下载
                                         </Typography>
                                     </MenuItem>
-                                    {isHomePage && <Divider className={classes.divider} />}
+                                    {isHomePage && (
+                                        <Divider className={classes.divider} />
+                                    )}
                                 </div>
                             )}
 
@@ -546,7 +602,7 @@ class ContextMenuCompoment extends Component {
                                             重命名
                                         </Typography>
                                     </MenuItem>
-                                    {this.props.keywords === "" &&
+                                    {this.props.keywords === "" && (
                                         <MenuItem
                                             onClick={() =>
                                                 this.props.openCopyDialog()
@@ -559,13 +615,12 @@ class ContextMenuCompoment extends Component {
                                                 复制
                                             </Typography>
                                         </MenuItem>
-                                    }
-
+                                    )}
                                 </div>
                             )}
                             {isHomePage && (
                                 <div>
-                                    {this.props.keywords === "" &&
+                                    {this.props.keywords === "" && (
                                         <MenuItem
                                             onClick={() =>
                                                 this.props.openMoveDialog()
@@ -578,7 +633,7 @@ class ContextMenuCompoment extends Component {
                                                 移动
                                             </Typography>
                                         </MenuItem>
-                                    }
+                                    )}
 
                                     <Divider className={classes.divider} />
                                     <MenuItem
diff --git a/src/component/FileManager/DnD/DragLayer.js b/src/component/FileManager/DnD/DragLayer.js
index dcec0d7..80cc0bf 100644
--- a/src/component/FileManager/DnD/DragLayer.js
+++ b/src/component/FileManager/DnD/DragLayer.js
@@ -1,74 +1,78 @@
-import React from 'react'
-import { useDragLayer } from 'react-dnd'
-import Preview from './Preview'
+import React from "react";
+import { useDragLayer } from "react-dnd";
+import Preview from "./Preview";
 const layerStyles = {
-  position: 'fixed',
-  pointerEvents: 'none',
-  zIndex: 100,
-  left: 0,
-  top: 0,
-  width: '100%',
-  height: '100%',
-}
+    position: "fixed",
+    pointerEvents: "none",
+    zIndex: 100,
+    left: 0,
+    top: 0,
+    width: "100%",
+    height: "100%"
+};
 function snapToGrid(x, y) {
-    const snappedX = Math.round(x / 32) * 32
-    const snappedY = Math.round(y / 32) * 32
-    return [snappedX, snappedY]
+    const snappedX = Math.round(x / 32) * 32;
+    const snappedY = Math.round(y / 32) * 32;
+    return [snappedX, snappedY];
 }
 function getItemStyles(initialOffset, currentOffset, isSnapToGrid) {
-  if (!initialOffset || !currentOffset) {
-    return {
-      display: 'none',
+    if (!initialOffset || !currentOffset) {
+        return {
+            display: "none"
+        };
     }
-  }
-  let { x, y } = currentOffset
-  if (isSnapToGrid) {
-    x -= initialOffset.x
-    y -= initialOffset.y
-    ;[x, y] = snapToGrid(x, y)
-    x += initialOffset.x
-    y += initialOffset.y
-  }
-  const transform = `translate(${x}px, ${y}px)`
-  return {
-    transform,
-    WebkitTransform: transform,
-    opacity:y>200?1:0.4,
-  }
+    let { x, y } = currentOffset;
+    if (isSnapToGrid) {
+        x -= initialOffset.x;
+        y -= initialOffset.y;
+        [x, y] = snapToGrid(x, y);
+        x += initialOffset.x;
+        y += initialOffset.y;
+    }
+    const transform = `translate(${x}px, ${y}px)`;
+    return {
+        transform,
+        WebkitTransform: transform,
+        opacity: y > 200 ? 1 : 0.4
+    };
 }
 const CustomDragLayer = props => {
-  const {
-    itemType,
-    isDragging,
-    item,
-    initialOffset,
-    currentOffset,
-  } = useDragLayer(monitor => ({
-    item: monitor.getItem(),
-    itemType: monitor.getItemType(),
-    initialOffset: monitor.getInitialSourceClientOffset(),
-    currentOffset: monitor.getSourceClientOffset(),
-    isDragging: monitor.isDragging(),
-  }))
-  function renderItem() {
-    switch (itemType) {
-      case "object":
-        return <Preview object={item.object} />
-      default:
-        return null
+    const {
+        itemType,
+        isDragging,
+        item,
+        initialOffset,
+        currentOffset
+    } = useDragLayer(monitor => ({
+        item: monitor.getItem(),
+        itemType: monitor.getItemType(),
+        initialOffset: monitor.getInitialSourceClientOffset(),
+        currentOffset: monitor.getSourceClientOffset(),
+        isDragging: monitor.isDragging()
+    }));
+    function renderItem() {
+        switch (itemType) {
+            case "object":
+                return <Preview object={item.object} />;
+            default:
+                return null;
+        }
     }
-  }
-  if (!isDragging) {
-    return null
-  }
-  return (
-    <div style={layerStyles}>
-      <div
-        style={getItemStyles(initialOffset, currentOffset, props.snapToGrid)}
-      >
-        {renderItem()}
-      </div>
-    </div>
-  )
-}
-export default CustomDragLayer
+    if (!isDragging) {
+        return null;
+    }
+    return (
+        <div style={layerStyles}>
+            <div
+                style={getItemStyles(
+                    initialOffset,
+                    currentOffset,
+                    props.snapToGrid
+                )}
+            >
+                {renderItem()}
+            </div>
+        </div>
+    );
+};
+export default CustomDragLayer;
diff --git a/src/component/FileManager/DnD/DropWarpper.js b/src/component/FileManager/DnD/DropWarpper.js
index 4921440..15b6333 100644
--- a/src/component/FileManager/DnD/DropWarpper.js
+++ b/src/component/FileManager/DnD/DropWarpper.js
@@ -1,19 +1,19 @@
 import React from "react";
 import { useDrop } from "react-dnd";
-import Folder from "../Folder"
-export default function FolderDropWarpper({ folder}) {
+import Folder from "../Folder";
+export default function FolderDropWarpper({ folder }) {
     const [{ canDrop, isOver }, drop] = useDrop({
         accept: "object",
         drop: () => ({ folder }),
         collect: monitor => ({
             isOver: monitor.isOver(),
-            canDrop: (monitor.canDrop())
+            canDrop: monitor.canDrop()
         })
     });
     const isActive = canDrop && isOver;
     return (
         <div ref={drop}>
-        <Folder folder={folder} isActive={isActive}/></div>
+            <Folder folder={folder} isActive={isActive} />
+        </div>
     );
 }
-  
\ No newline at end of file
diff --git a/src/component/FileManager/DnD/Preview.js b/src/component/FileManager/DnD/Preview.js
index 92e92c1..02313dc 100644
--- a/src/component/FileManager/DnD/Preview.js
+++ b/src/component/FileManager/DnD/Preview.js
@@ -5,21 +5,21 @@ import { useSelector } from "react-redux";
 import { makeStyles } from "@material-ui/core";
 
 const useStyles = makeStyles(() => ({
-    dragging:{
-        width:"200px",
+    dragging: {
+        width: "200px"
     },
     cardDragged: {
         position: "absolute",
-        "transform-origin": "bottom left",
-    },
+        "transform-origin": "bottom left"
+    }
 }));
 
-const diliverIcon = (object,viewMethod,classes)=>{
+const diliverIcon = (object, viewMethod, classes) => {
     return (
         <>
             {object.type === "dir" && viewMethod !== "list" && (
                 <div className={classes.dragging}>
-                <SmallIcon file={object} />
+                    <SmallIcon file={object} />
                 </div>
             )}
             {object.type === "file" && viewMethod === "icon" && (
@@ -27,15 +27,14 @@ const diliverIcon = (object,viewMethod,classes)=>{
                     <FileIcon file={object} />
                 </div>
             )}
-            {object.type === "file" &&
-                viewMethod === "smallIcon" && (
-                    <div className={classes.dragging}>
+            {object.type === "file" && viewMethod === "smallIcon" && (
+                <div className={classes.dragging}>
                     <SmallIcon file={object} />
-                    </div>
-                )}
+                </div>
+            )}
         </>
-    )
-}
+    );
+};
 
 const Preview = props => {
     const selected = useSelector(state => state.explorer.selected);
@@ -45,22 +44,24 @@ const Preview = props => {
     const classes = useStyles();
     return (
         <>
-            {selected.length === 0 && diliverIcon(props.object,viewMethod,classes)}
-            {selected.length>0&&<>
-                {selected.slice(0, 3).map((card, i) => (
-                    <div
-                    key={card.id}
-                    className={classes.cardDragged}
-                    style={{
-                      zIndex: selected.length - i,
-                      transform: `rotateZ(${-i * 2.5}deg)`,
-                    }}
-                  >
-                    {diliverIcon(card,viewMethod,classes)}
-                  </div>
-                ))}
+            {selected.length === 0 &&
+                diliverIcon(props.object, viewMethod, classes)}
+            {selected.length > 0 && (
+                <>
+                    {selected.slice(0, 3).map((card, i) => (
+                        <div
+                            key={card.id}
+                            className={classes.cardDragged}
+                            style={{
+                                zIndex: selected.length - i,
+                                transform: `rotateZ(${-i * 2.5}deg)`
+                            }}
+                        >
+                            {diliverIcon(card, viewMethod, classes)}
+                        </div>
+                    ))}
                 </>
-            }
+            )}
         </>
     );
 };
diff --git a/src/component/FileManager/Explorer.js b/src/component/FileManager/Explorer.js
index 5d6a950..c28ce63 100644
--- a/src/component/FileManager/Explorer.js
+++ b/src/component/FileManager/Explorer.js
@@ -1,4 +1,15 @@
-import { CircularProgress, Grid, Paper, Table, TableBody, TableCell, TableHead, TableRow, Typography, withStyles } from "@material-ui/core";
+import {
+    CircularProgress,
+    Grid,
+    Paper,
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableRow,
+    Typography,
+    withStyles
+} from "@material-ui/core";
 import TableSortLabel from "@material-ui/core/TableSortLabel";
 import SadIcon from "@material-ui/icons/SentimentVeryDissatisfied";
 import EmptyIcon from "@material-ui/icons/Unarchive";
@@ -8,8 +19,14 @@ import React, { Component } from "react";
 import { configure, GlobalHotKeys } from "react-hotkeys";
 import { connect } from "react-redux";
 import { withRouter } from "react-router-dom";
-import { changeContextMenu, navigateTo, navigateUp, openRemoveDialog, setSelectedTarget } from "../../actions/index";
-import explorer from "../../redux/explorer"
+import {
+    changeContextMenu,
+    navigateTo,
+    navigateUp,
+    openRemoveDialog,
+    setSelectedTarget
+} from "../../actions/index";
+import explorer from "../../redux/explorer";
 import { isMac } from "../../utils";
 import pathHelper from "../../utils/page";
 import ContextMenu from "./ContextMenu";
@@ -161,7 +178,7 @@ class ExplorerCompoment extends Component {
         super();
         this.keyMap = {
             DELETE_FILE: "del",
-            SELECT_ALL: `${isMac() ? 'command' : 'ctrl'}+a`
+            SELECT_ALL: `${isMac() ? "command" : "ctrl"}+a`
         };
 
         this.handlers = {
@@ -187,8 +204,8 @@ class ExplorerCompoment extends Component {
         };
 
         configure({
-            ignoreTags: ['input', 'select', 'textarea'],
-        })
+            ignoreTags: ["input", "select", "textarea"]
+        });
     }
 
     contextMenu = e => {
@@ -218,236 +235,198 @@ class ExplorerCompoment extends Component {
         const { classes } = this.props;
         const isHomePage = pathHelper.isHomePage(this.props.location.pathname);
 
-        const showView = !this.props.loading && (this.props.dirList.length !== 0 ||
-          this.props.fileList.length !== 0)
+        const showView =
+            !this.props.loading &&
+            (this.props.dirList.length !== 0 ||
+                this.props.fileList.length !== 0);
         const listView = (
-          <Table className={classes.table}>
-            <TableHead>
-              <TableRow>
-                <TableCell>
-                  <TableSortLabel
-                    active={
-                      this.props.sortMethod ===
-                      "namePos" ||
-                      this.props.sortMethod ===
-                      "nameRev"
-                    }
-                    direction={
-                      this.props.sortMethod ===
-                        "namePos"
-                        ? "asc"
-                        : "des"
-                    }
-                    onClick={() => {
-                      this.props.changeSort(
-                        this.props.sortMethod ===
-                          "namePos"
-                          ? "nameRev"
-                          : "namePos"
-                      );
-                    }}
-                  >
-                    名称
-                    {this.props.sortMethod ===
-                      "namePos" ||
-                      this.props.sortMethod ===
-                      "nameRev" ? (
-                        <span
-                          className={
-                            classes.visuallyHidden
-                          }
-                        >
-                          {this.props.sortMethod ===
-                            "nameRev"
-                            ? "sorted descending"
-                            : "sorted ascending"}
-                        </span>
-                      ) : null}
-                  </TableSortLabel>
-                </TableCell>
-                <TableCell className={classes.hideAuto}>
-                  <TableSortLabel
-                    active={
-                      this.props.sortMethod ===
-                      "sizePos" ||
-                      this.props.sortMethod ===
-                      "sizeRes"
-                    }
-                    direction={
-                      this.props.sortMethod ===
-                        "sizePos"
-                        ? "asc"
-                        : "des"
-                    }
-                    onClick={() => {
-                      this.props.changeSort(
-                        this.props.sortMethod ===
-                          "sizePos"
-                          ? "sizeRes"
-                          : "sizePos"
-                      );
-                    }}
-                  >
-                    大小
-                    {this.props.sortMethod ===
-                      "sizePos" ||
-                      this.props.sortMethod ===
-                      "sizeRes" ? (
-                        <span
-                          className={
-                            classes.visuallyHidden
-                          }
-                        >
-                          {this.props.sortMethod ===
-                            "sizeRes"
-                            ? "sorted descending"
-                            : "sorted ascending"}
-                        </span>
-                      ) : null}
-                  </TableSortLabel>
-                </TableCell>
-                <TableCell className={classes.hideAuto}>
-                  <TableSortLabel
-                    active={
-                      this.props.sortMethod ===
-                      "timePos" ||
-                      this.props.sortMethod ===
-                      "timeRev"
-                    }
-                    direction={
-                      this.props.sortMethod ===
-                        "timePos"
-                        ? "asc"
-                        : "des"
-                    }
-                    onClick={() => {
-                      this.props.changeSort(
-                        this.props.sortMethod ===
-                          "timePos"
-                          ? "timeRev"
-                          : "timePos"
-                      );
-                    }}
-                  >
-                    日期
-                    {this.props.sortMethod ===
-                      "timePos" ||
-                      this.props.sortMethod ===
-                      "timeRev" ? (
-                        <span
-                          className={
-                            classes.visuallyHidden
-                          }
-                        >
-                          {this.props.sortMethod ===
-                            "sizeRes"
-                            ? "sorted descending"
-                            : "sorted ascending"}
-                        </span>
-                      ) : null}
-                  </TableSortLabel>
-                </TableCell>
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {pathHelper.isMobile() &&
-                this.props.path !== "/" && (
-                  <ObjectIcon
-                    file={{
-                      type: "up",
-                      name: "上级目录"
-                    }}
-                  />
-                )}
-              {this.props.dirList.map((value, index) => (
-                <ObjectIcon key={value.id} file={value} index={index}/>
-              ))}
-              {this.props.fileList.map((value, index) => (
-                <ObjectIcon key={value.id} file={value} index={index}/>
-              ))}
-            </TableBody>
-          </Table>
-        )
+            <Table className={classes.table}>
+                <TableHead>
+                    <TableRow>
+                        <TableCell>
+                            <TableSortLabel
+                                active={
+                                    this.props.sortMethod === "namePos" ||
+                                    this.props.sortMethod === "nameRev"
+                                }
+                                direction={
+                                    this.props.sortMethod === "namePos"
+                                        ? "asc"
+                                        : "des"
+                                }
+                                onClick={() => {
+                                    this.props.changeSort(
+                                        this.props.sortMethod === "namePos"
+                                            ? "nameRev"
+                                            : "namePos"
+                                    );
+                                }}
+                            >
+                                名称
+                                {this.props.sortMethod === "namePos" ||
+                                this.props.sortMethod === "nameRev" ? (
+                                    <span className={classes.visuallyHidden}>
+                                        {this.props.sortMethod === "nameRev"
+                                            ? "sorted descending"
+                                            : "sorted ascending"}
+                                    </span>
+                                ) : null}
+                            </TableSortLabel>
+                        </TableCell>
+                        <TableCell className={classes.hideAuto}>
+                            <TableSortLabel
+                                active={
+                                    this.props.sortMethod === "sizePos" ||
+                                    this.props.sortMethod === "sizeRes"
+                                }
+                                direction={
+                                    this.props.sortMethod === "sizePos"
+                                        ? "asc"
+                                        : "des"
+                                }
+                                onClick={() => {
+                                    this.props.changeSort(
+                                        this.props.sortMethod === "sizePos"
+                                            ? "sizeRes"
+                                            : "sizePos"
+                                    );
+                                }}
+                            >
+                                大小
+                                {this.props.sortMethod === "sizePos" ||
+                                this.props.sortMethod === "sizeRes" ? (
+                                    <span className={classes.visuallyHidden}>
+                                        {this.props.sortMethod === "sizeRes"
+                                            ? "sorted descending"
+                                            : "sorted ascending"}
+                                    </span>
+                                ) : null}
+                            </TableSortLabel>
+                        </TableCell>
+                        <TableCell className={classes.hideAuto}>
+                            <TableSortLabel
+                                active={
+                                    this.props.sortMethod === "timePos" ||
+                                    this.props.sortMethod === "timeRev"
+                                }
+                                direction={
+                                    this.props.sortMethod === "timePos"
+                                        ? "asc"
+                                        : "des"
+                                }
+                                onClick={() => {
+                                    this.props.changeSort(
+                                        this.props.sortMethod === "timePos"
+                                            ? "timeRev"
+                                            : "timePos"
+                                    );
+                                }}
+                            >
+                                日期
+                                {this.props.sortMethod === "timePos" ||
+                                this.props.sortMethod === "timeRev" ? (
+                                    <span className={classes.visuallyHidden}>
+                                        {this.props.sortMethod === "sizeRes"
+                                            ? "sorted descending"
+                                            : "sorted ascending"}
+                                    </span>
+                                ) : null}
+                            </TableSortLabel>
+                        </TableCell>
+                    </TableRow>
+                </TableHead>
+                <TableBody>
+                    {pathHelper.isMobile() && this.props.path !== "/" && (
+                        <ObjectIcon
+                            file={{
+                                type: "up",
+                                name: "上级目录"
+                            }}
+                        />
+                    )}
+                    {this.props.dirList.map((value, index) => (
+                        <ObjectIcon key={value.id} file={value} index={index} />
+                    ))}
+                    {this.props.fileList.map((value, index) => (
+                        <ObjectIcon key={value.id} file={value} index={index} />
+                    ))}
+                </TableBody>
+            </Table>
+        );
 
         const normalView = (
-          <div className={classes.flexFix}>
-              {this.props.dirList.length !== 0 &&
-              (
-                <>
-                  <Typography
-                      data-clickAway={"true"}
-                      variant="body2"
-                      className={classes.typeHeader}
-                  >
-                      文件夹
-                  </Typography>
-                  <Grid
-                      data-clickAway={"true"}
-                      container
-                      spacing={0}
-                      alignItems="flex-start"
-                  >
-                      {this.props.dirList.map(
-                          (value, index) => (
-                              <Grid
-                                  key={value.id}
-                                  item
-                                  xs={6}
-                                  md={3}
-                                  sm={4}
-                                  lg={2}
-                              >
-                                  <ObjectIcon
-                                      key={value.id}
-                                      file={value}
-                                      index={index}
-                                  />
-                              </Grid>
-                          )
-                      )}
-                  </Grid>
-                </>
-              )}
-              {this.props.fileList.length !== 0 &&
-              (
-                <>
-                  <Typography
-                      data-clickAway={"true"}
-                      variant="body2"
-                      className={classes.typeHeader}
-                  >
-                      文件
-                  </Typography>
-                  <Grid
-                      data-clickAway={"true"}
-                      container
-                      spacing={0}
-                      alignItems="flex-start"
-                  >
-                      {this.props.fileList.map(
-                          (value, index) => (
-                              <Grid
-                                  key={value.id}
-                                  item
-                                  xs={6}
-                                  md={3}
-                                  sm={4}
-                                  lg={2}
-                              >
-                                  <ObjectIcon
-                                      key={value.id}
-                                      index={index}
-                                      file={value}
-                                  />
-                              </Grid>
-                          )
-                      )}
-                  </Grid>
-                </>
-            )}
-          </div>
-        )
-        const view = this.props.viewMethod === "list" ? listView : normalView
+            <div className={classes.flexFix}>
+                {this.props.dirList.length !== 0 && (
+                    <>
+                        <Typography
+                            data-clickAway={"true"}
+                            variant="body2"
+                            className={classes.typeHeader}
+                        >
+                            文件夹
+                        </Typography>
+                        <Grid
+                            data-clickAway={"true"}
+                            container
+                            spacing={0}
+                            alignItems="flex-start"
+                        >
+                            {this.props.dirList.map((value, index) => (
+                                <Grid
+                                    key={value.id}
+                                    item
+                                    xs={6}
+                                    md={3}
+                                    sm={4}
+                                    lg={2}
+                                >
+                                    <ObjectIcon
+                                        key={value.id}
+                                        file={value}
+                                        index={index}
+                                    />
+                                </Grid>
+                            ))}
+                        </Grid>
+                    </>
+                )}
+                {this.props.fileList.length !== 0 && (
+                    <>
+                        <Typography
+                            data-clickAway={"true"}
+                            variant="body2"
+                            className={classes.typeHeader}
+                        >
+                            文件
+                        </Typography>
+                        <Grid
+                            data-clickAway={"true"}
+                            container
+                            spacing={0}
+                            alignItems="flex-start"
+                        >
+                            {this.props.fileList.map((value, index) => (
+                                <Grid
+                                    key={value.id}
+                                    item
+                                    xs={6}
+                                    md={3}
+                                    sm={4}
+                                    lg={2}
+                                >
+                                    <ObjectIcon
+                                        key={value.id}
+                                        index={index}
+                                        file={value}
+                                    />
+                                </Grid>
+                            ))}
+                        </Grid>
+                    </>
+                )}
+            </div>
+        );
+        const view = this.props.viewMethod === "list" ? listView : normalView;
         return (
             <div
                 onContextMenu={this.contextMenu}
diff --git a/src/component/FileManager/FileIcon.js b/src/component/FileManager/FileIcon.js
index 11f5dee..f4623e1 100644
--- a/src/component/FileManager/FileIcon.js
+++ b/src/component/FileManager/FileIcon.js
@@ -1,4 +1,10 @@
-import { ButtonBase, Divider, Tooltip, Typography, withStyles } from "@material-ui/core";
+import {
+    ButtonBase,
+    Divider,
+    Tooltip,
+    Typography,
+    withStyles
+} from "@material-ui/core";
 import { lighten } from "@material-ui/core/styles";
 import classNames from "classnames";
 import PropTypes from "prop-types";
@@ -95,7 +101,7 @@ const styles = theme => ({
         backgroundColor: theme.palette.background.paper,
         borderRadius: "90%",
         paddingTop: "2px",
-        color: theme.palette.text.secondary,
+        color: theme.palette.text.secondary
     },
     hide: {
         display: "none"
diff --git a/src/component/FileManager/FileManager.js b/src/component/FileManager/FileManager.js
index 762f2b6..6434d64 100644
--- a/src/component/FileManager/FileManager.js
+++ b/src/component/FileManager/FileManager.js
@@ -1,17 +1,22 @@
-import React, { Component } from 'react'
-import { DndProvider } from 'react-dnd'
-import HTML5Backend from 'react-dnd-html5-backend'
-import { connect } from "react-redux"
-import { withRouter } from "react-router-dom"
-import { closeAllModals, navigateTo, setSelectedTarget, toggleSnackbar } from "../../actions"
+import React, { Component } from "react";
+import { DndProvider } from "react-dnd";
+import HTML5Backend from "react-dnd-html5-backend";
+import { connect } from "react-redux";
+import { withRouter } from "react-router-dom";
+import {
+    closeAllModals,
+    navigateTo,
+    setSelectedTarget,
+    toggleSnackbar
+} from "../../actions";
 import { changeSubTitle } from "../../redux/viewUpdate/action";
-import pathHelper from "../../utils/page"
-import DragLayer from "./DnD/DragLayer"
-import Explorer from "./Explorer"
-import Modals from "./Modals"
-import Navigator from "./Navigator/Navigator"
+import pathHelper from "../../utils/page";
+import DragLayer from "./DnD/DragLayer";
+import Explorer from "./Explorer";
+import Modals from "./Modals";
+import Navigator from "./Navigator/Navigator";
 
-const mapStateToProps = ()=>({});
+const mapStateToProps = () => ({});
 
 const mapDispatchToProps = dispatch => {
     return {
@@ -27,14 +32,14 @@ const mapDispatchToProps = dispatch => {
         closeAllModals: () => {
             dispatch(closeAllModals());
         },
-        navigateTo:path=>{
+        navigateTo: path => {
             dispatch(navigateTo(path));
-        },
+        }
     };
 };
 
 class FileManager extends Component {
-    constructor(props){
+    constructor(props) {
         super(props);
         this.image = React.createRef();
     }
@@ -45,28 +50,28 @@ class FileManager extends Component {
     }
 
     componentDidMount() {
-        if (pathHelper.isHomePage(this.props.location.pathname)){
+        if (pathHelper.isHomePage(this.props.location.pathname)) {
             this.props.changeSubTitle(null);
         }
-
     }
     render() {
         return (
             <DndProvider backend={HTML5Backend}>
-                <Modals share={this.props.share}/>
-                <Navigator isShare={this.props.isShare} share={this.props.share}/>
-                <Explorer share={this.props.share}/>
-                <DragLayer/>
-             </DndProvider>
+                <Modals share={this.props.share} />
+                <Navigator
+                    isShare={this.props.isShare}
+                    share={this.props.share}
+                />
+                <Explorer share={this.props.share} />
+                <DragLayer />
+            </DndProvider>
         );
     }
-
 }
 
-FileManager.propTypes = {
-};
+FileManager.propTypes = {};
 
 export default connect(
     mapStateToProps,
     mapDispatchToProps
-)((withRouter(FileManager)));
\ No newline at end of file
+)(withRouter(FileManager));
diff --git a/src/component/FileManager/Folder.js b/src/component/FileManager/Folder.js
index fe53e96..ab5bfdc 100644
--- a/src/component/FileManager/Folder.js
+++ b/src/component/FileManager/Folder.js
@@ -1,9 +1,9 @@
-import React  from "react";
+import React from "react";
 import FolderIcon from "@material-ui/icons/Folder";
 import classNames from "classnames";
 import { ButtonBase, Typography, Tooltip, makeStyles } from "@material-ui/core";
 import { useSelector } from "react-redux";
-import {lighten} from "@material-ui/core/styles";
+import { lighten } from "@material-ui/core/styles";
 const useStyles = makeStyles(theme => ({
     container: {
         padding: "7px"
@@ -46,7 +46,7 @@ const useStyles = makeStyles(theme => ({
         backgroundColor: theme.palette.background.paper,
         borderRadius: "90%",
         paddingTop: "2px",
-        color: theme.palette.text.secondary,
+        color: theme.palette.text.secondary
     },
     folderNameSelected: {
         color:
@@ -65,12 +65,12 @@ const useStyles = makeStyles(theme => ({
         overflow: "hidden",
         marginRight: "20px"
     },
-    active:{
-        border: "2px solid " + theme.palette.primary.light,
-    },
+    active: {
+        border: "2px solid " + theme.palette.primary.light
+    }
 }));
 
-export default function Folder({ folder,isActive }) {
+export default function Folder({ folder, isActive }) {
     const selected = useSelector(state => state.explorer.selected);
 
     const classes = useStyles();
@@ -87,9 +87,9 @@ export default function Folder({ folder,isActive }) {
                 {
                     [classes.selected]: isSelected,
                     [classes.notSelected]: !isSelected,
-                    [classes.active]: isActive,
+                    [classes.active]: isActive
                 },
-                classes.button,
+                classes.button
             )}
         >
             <div
diff --git a/src/component/FileManager/ImgPreview.js b/src/component/FileManager/ImgPreview.js
index 8a6dcc2..0d9d3aa 100644
--- a/src/component/FileManager/ImgPreview.js
+++ b/src/component/FileManager/ImgPreview.js
@@ -6,9 +6,9 @@ import { showImgPreivew } from "../../actions/index";
 import { imgPreviewSuffix } from "../../config";
 import { withStyles } from "@material-ui/core";
 import pathHelper from "../../utils/page";
-import {withRouter} from "react-router";
-import {PhotoSlider} from "react-photo-view";
-import 'react-photo-view/dist/index.css';
+import { withRouter } from "react-router";
+import { PhotoSlider } from "react-photo-view";
+import "react-photo-view/dist/index.css";
 import * as explorer from "../../redux/explorer/reducer";
 
 const styles = () => ({});
@@ -39,21 +39,22 @@ class ImagPreviewComponent extends Component {
         const items = [];
         let firstOne = 0;
         if (nextProps.first.id !== "") {
-            if (pathHelper.isSharePage(this.props.location.pathname) && !nextProps.first.path){
+            if (
+                pathHelper.isSharePage(this.props.location.pathname) &&
+                !nextProps.first.path
+            ) {
                 const newImg = {
                     intro: nextProps.first.name,
-                    src:
-                        baseURL +
-                        "/share/preview/" +nextProps.first.key
+                    src: baseURL + "/share/preview/" + nextProps.first.key
                 };
                 firstOne = 0;
                 items.push(newImg);
                 this.setState({
-                    photoIndex:firstOne,
+                    photoIndex: firstOne,
                     items: items,
                     isOpen: true
                 });
-                return
+                return;
             }
             // eslint-disable-next-line
             nextProps.other.map(value => {
@@ -63,21 +64,22 @@ class ImagPreviewComponent extends Component {
                     .toLowerCase();
                 if (imgPreviewSuffix.indexOf(fileType) !== -1) {
                     let src = "";
-                    if (pathHelper.isSharePage(this.props.location.pathname)){
-                        src = baseURL +
-                            "/share/preview/" + value.key
-                        src = src + "?path=" + encodeURIComponent( (value.path === "/"
-                                ? value.path + value.name
-                                : value.path + "/" + value.name))
-
-                    }else{
-                        src = baseURL +
-                            "/file/preview/" +
-                            value.id
+                    if (pathHelper.isSharePage(this.props.location.pathname)) {
+                        src = baseURL + "/share/preview/" + value.key;
+                        src =
+                            src +
+                            "?path=" +
+                            encodeURIComponent(
+                                value.path === "/"
+                                    ? value.path + value.name
+                                    : value.path + "/" + value.name
+                            );
+                    } else {
+                        src = baseURL + "/file/preview/" + value.id;
                     }
                     const newImg = {
                         intro: value.name,
-                        src:src,
+                        src: src
                     };
                     if (
                         value.path === nextProps.first.path &&
@@ -89,7 +91,7 @@ class ImagPreviewComponent extends Component {
                 }
             });
             this.setState({
-                photoIndex:firstOne,
+                photoIndex: firstOne,
                 items: items,
                 isOpen: true
             });
@@ -104,22 +106,23 @@ class ImagPreviewComponent extends Component {
     };
 
     render() {
-        const { photoIndex, isOpen,items } = this.state;
+        const { photoIndex, isOpen, items } = this.state;
 
         return (
             <div>
-                 {isOpen && (<PhotoSlider
-                     images={items}
-                     visible={isOpen}
-                     onClose={() => this.handleClose()}
-                     index={photoIndex}
-                     onIndexChange={(n) =>
-                         this.setState({
-                             photoIndex: n,
-                         })
-                     }
-
-                />)}
+                {isOpen && (
+                    <PhotoSlider
+                        images={items}
+                        visible={isOpen}
+                        onClose={() => this.handleClose()}
+                        index={photoIndex}
+                        onIndexChange={n =>
+                            this.setState({
+                                photoIndex: n
+                            })
+                        }
+                    />
+                )}
             </div>
         );
     }
diff --git a/src/component/FileManager/ImgPreview_old.js b/src/component/FileManager/ImgPreview_old.js
index 21d7a13..5489b11 100644
--- a/src/component/FileManager/ImgPreview_old.js
+++ b/src/component/FileManager/ImgPreview_old.js
@@ -8,7 +8,7 @@ import { withStyles } from "@material-ui/core";
 import Lightbox from "react-image-lightbox";
 import "react-image-lightbox/style.css";
 import pathHelper from "../../utils/page";
-import {withRouter} from "react-router";
+import { withRouter } from "react-router";
 
 const styles = () => ({});
 
@@ -38,21 +38,22 @@ class ImgPreviewCompoment extends Component {
         const items = [];
         let firstOne = 0;
         if (nextProps.first !== null) {
-            if (pathHelper.isSharePage(this.props.location.pathname) && !nextProps.first.path){
+            if (
+                pathHelper.isSharePage(this.props.location.pathname) &&
+                !nextProps.first.path
+            ) {
                 const newImg = {
                     title: nextProps.first.name,
-                    src:
-                        baseURL +
-                        "/share/preview/" +nextProps.first.key
+                    src: baseURL + "/share/preview/" + nextProps.first.key
                 };
                 firstOne = 0;
                 items.push(newImg);
                 this.setState({
-                    photoIndex:firstOne,
+                    photoIndex: firstOne,
                     items: items,
                     isOpen: true
                 });
-                return
+                return;
             }
             // eslint-disable-next-line
             nextProps.other.map(value => {
@@ -62,21 +63,22 @@ class ImgPreviewCompoment extends Component {
                     .toLowerCase();
                 if (imgPreviewSuffix.indexOf(fileType) !== -1) {
                     let src = "";
-                    if (pathHelper.isSharePage(this.props.location.pathname)){
-                        src = baseURL +
-                            "/share/preview/" + value.key
-                        src = src + "?path=" + encodeURIComponent( (value.path === "/"
-                                ? value.path + value.name
-                                : value.path + "/" + value.name))
-
-                    }else{
-                        src = baseURL +
-                            "/file/preview/" +
-                            value.id
+                    if (pathHelper.isSharePage(this.props.location.pathname)) {
+                        src = baseURL + "/share/preview/" + value.key;
+                        src =
+                            src +
+                            "?path=" +
+                            encodeURIComponent(
+                                value.path === "/"
+                                    ? value.path + value.name
+                                    : value.path + "/" + value.name
+                            );
+                    } else {
+                        src = baseURL + "/file/preview/" + value.id;
                     }
                     const newImg = {
                         title: value.name,
-                        src:src,
+                        src: src
                     };
                     if (
                         value.path === nextProps.first.path &&
@@ -88,7 +90,7 @@ class ImgPreviewCompoment extends Component {
                 }
             });
             this.setState({
-                photoIndex:firstOne,
+                photoIndex: firstOne,
                 items: items,
                 isOpen: true
             });
@@ -103,34 +105,42 @@ class ImgPreviewCompoment extends Component {
     };
 
     render() {
-        const { photoIndex, isOpen,items } = this.state;
+        const { photoIndex, isOpen, items } = this.state;
 
         return (
             <div>
-                 {isOpen && (<Lightbox
-                    mainSrc={items[photoIndex].src}
-                    nextSrc={items[(photoIndex + 1) % items.length].src}
-                    prevSrc={items[(photoIndex + items.length - 1) % items.length].src}
-                    onCloseRequest={() => this.handleClose()}
-                    imageLoadErrorMessage = "无法加载此图像"
-                    imageCrossOrigin = "anonymous"
-                    imageTitle = {items[photoIndex].title}
-                    onMovePrevRequest={() =>
-                      this.setState({
-                        photoIndex: (photoIndex + items.length - 1) % items.length,
-                      })
-                    }
-                    reactModalStyle={{
-                        overlay:{
-                            zIndex:10000
-                        },
-                    }}
-                    onMoveNextRequest={() =>
-                      this.setState({
-                        photoIndex: (photoIndex + 1) % items.length,
-                      })
-                    }
-                />)}
+                {isOpen && (
+                    <Lightbox
+                        mainSrc={items[photoIndex].src}
+                        nextSrc={items[(photoIndex + 1) % items.length].src}
+                        prevSrc={
+                            items[
+                                (photoIndex + items.length - 1) % items.length
+                            ].src
+                        }
+                        onCloseRequest={() => this.handleClose()}
+                        imageLoadErrorMessage="无法加载此图像"
+                        imageCrossOrigin="anonymous"
+                        imageTitle={items[photoIndex].title}
+                        onMovePrevRequest={() =>
+                            this.setState({
+                                photoIndex:
+                                    (photoIndex + items.length - 1) %
+                                    items.length
+                            })
+                        }
+                        reactModalStyle={{
+                            overlay: {
+                                zIndex: 10000
+                            }
+                        }}
+                        onMoveNextRequest={() =>
+                            this.setState({
+                                photoIndex: (photoIndex + 1) % items.length
+                            })
+                        }
+                    />
+                )}
             </div>
         );
     }
diff --git a/src/component/FileManager/Modals.js b/src/component/FileManager/Modals.js
index f1e620d..3e190ac 100644
--- a/src/component/FileManager/Modals.js
+++ b/src/component/FileManager/Modals.js
@@ -20,7 +20,7 @@ import {
     DialogContent,
     DialogTitle,
     DialogContentText,
-    CircularProgress,
+    CircularProgress
 } from "@material-ui/core";
 import Loading from "../Modals/Loading";
 import CopyDialog from "../Modals/Copy";
@@ -100,7 +100,7 @@ class ModalsCompoment extends Component {
         downloadURL: "",
         remoteDownloadPathSelect: false,
         source: "",
-        purchaseCallback:null,
+        purchaseCallback: null
     };
 
     handleInputChange = e => {
@@ -121,17 +121,25 @@ class ModalsCompoment extends Component {
             // 打包下载
             if (nextProps.loading === true) {
                 if (nextProps.loadingText === "打包中...") {
-                    if (pathHelper.isSharePage(this.props.location.pathname) && this.props.share && this.props.share.score > 0){
+                    if (
+                        pathHelper.isSharePage(this.props.location.pathname) &&
+                        this.props.share &&
+                        this.props.share.score > 0
+                    ) {
                         this.scoreHandler(this.archiveDownload);
-                        return
+                        return;
                     }
                     this.archiveDownload();
                 } else if (nextProps.loadingText === "获取下载地址...") {
-                    if (pathHelper.isSharePage(this.props.location.pathname) && this.props.share && this.props.share.score > 0){
+                    if (
+                        pathHelper.isSharePage(this.props.location.pathname) &&
+                        this.props.share &&
+                        this.props.share.score > 0
+                    ) {
                         this.scoreHandler(this.Download);
-                        return
+                        return;
                     }
-                        this.Download();
+                    this.Download();
                 }
             }
             return;
@@ -165,9 +173,9 @@ class ModalsCompoment extends Component {
         }
     };
 
-    scoreHandler = callback =>{
-            callback();
-    }
+    scoreHandler = callback => {
+        callback();
+    };
 
     Download = () => {
         let reqURL = "";
@@ -176,8 +184,8 @@ class ModalsCompoment extends Component {
                 this.props.selected[0].path === "/"
                     ? this.props.selected[0].path + this.props.selected[0].name
                     : this.props.selected[0].path +
-                    "/" +
-                    this.props.selected[0].name;
+                      "/" +
+                      this.props.selected[0].name;
             reqURL =
                 "/share/download/" +
                 this.props.selected[0].key +
@@ -213,7 +221,7 @@ class ModalsCompoment extends Component {
             } else {
                 items.push(value.id);
             }
-            return null
+            return null;
         });
 
         let reqURL = "/file/archive";
@@ -221,13 +229,9 @@ class ModalsCompoment extends Component {
             items: items,
             dirs: dirs
         };
-        if (pathHelper.isSharePage(
-            this.props.location.pathname
-        )) {
-            reqURL =
-                "/share/archive/" +
-                window.shareInfo.key;
-            postBody["path"] = this.props.selected[0].path
+        if (pathHelper.isSharePage(this.props.location.pathname)) {
+            reqURL = "/share/archive/" + window.shareInfo.key;
+            postBody["path"] = this.props.selected[0].path;
         }
 
         API.post(reqURL, postBody)
@@ -279,7 +283,7 @@ class ModalsCompoment extends Component {
             .then(response => {
                 if (response.rawData.code === 0) {
                     this.onClose();
-                    setTimeout(this.props.refreshFileList,500);
+                    setTimeout(this.props.refreshFileList, 500);
                 } else {
                     this.props.toggleSnackbar(
                         "top",
@@ -401,10 +405,10 @@ class ModalsCompoment extends Component {
 
         // 检查重名
         if (
-            this.props.dirList.findIndex((value) => {
+            this.props.dirList.findIndex(value => {
                 return value.name === newName;
             }) !== -1 ||
-            this.props.fileList.findIndex((value) => {
+            this.props.fileList.findIndex(value => {
                 return value.name === newName;
             }) !== -1
         ) {
@@ -442,7 +446,7 @@ class ModalsCompoment extends Component {
         e.preventDefault();
         this.props.setModalsLoading(true);
         if (
-            this.props.dirList.findIndex((value) => {
+            this.props.dirList.findIndex(value => {
                 return value.name === this.state.newFolderName;
             }) !== -1
         ) {
@@ -483,7 +487,7 @@ class ModalsCompoment extends Component {
         e.preventDefault();
         this.props.setModalsLoading(true);
         if (
-            this.props.dirList.findIndex((value) => {
+            this.props.dirList.findIndex(value => {
                 return value.name === this.state.newFileName;
             }) !== -1
         ) {
@@ -523,18 +527,18 @@ class ModalsCompoment extends Component {
     submitTorrentDownload = e => {
         e.preventDefault();
         this.props.setModalsLoading(true);
-        API
-            .post("/aria2/torrent/" + this.props.selected[0].id, {
-                dst: this.state.selectedPath === "//" ? "/" : this.state.selectedPath
-            })
+        API.post("/aria2/torrent/" + this.props.selected[0].id, {
+            dst:
+                this.state.selectedPath === "//" ? "/" : this.state.selectedPath
+        })
             .then(() => {
-                    this.props.toggleSnackbar(
-                        "top",
-                        "right",
-                        "任务已创建",
-                        "success"
-                    );
-                    this.onClose();
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    "任务已创建",
+                    "success"
+                );
+                this.onClose();
                 this.props.setModalsLoading(false);
             })
             .catch(error => {
@@ -551,19 +555,19 @@ class ModalsCompoment extends Component {
     submitDownload = e => {
         e.preventDefault();
         this.props.setModalsLoading(true);
-        API
-            .post("/aria2/url", {
-                url: this.state.downloadURL,
-                dst: this.state.selectedPath === "//" ? "/" : this.state.selectedPath
-            })
+        API.post("/aria2/url", {
+            url: this.state.downloadURL,
+            dst:
+                this.state.selectedPath === "//" ? "/" : this.state.selectedPath
+        })
             .then(() => {
-                    this.props.toggleSnackbar(
-                        "top",
-                        "right",
-                        "任务已创建",
-                        "success"
-                    );
-                    this.onClose();
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    "任务已创建",
+                    "success"
+                );
+                this.onClose();
                 this.props.setModalsLoading(false);
             })
             .catch(error => {
@@ -607,7 +611,7 @@ class ModalsCompoment extends Component {
             downloadURL: "",
             shareUrl: "",
             remoteDownloadPathSelect: false,
-            source: "",
+            source: ""
         });
         this.newNameSuffix = "";
         this.props.closeAllModals();
@@ -930,7 +934,7 @@ class ModalsCompoment extends Component {
                                                   : "")
                                             : baseURL +
                                               "/file/preview/" +
-                                                    this.props.selected[0].id
+                                              this.props.selected[0].id
                                     }
                                 />
                             )}
diff --git a/src/component/FileManager/Navigator/DropDown.js b/src/component/FileManager/Navigator/DropDown.js
index 053aeef..b6cb08f 100644
--- a/src/component/FileManager/Navigator/DropDown.js
+++ b/src/component/FileManager/Navigator/DropDown.js
@@ -1,41 +1,37 @@
 import React from "react";
 import DropDownItem from "./DropDownItem";
 
-
 export default function DropDown(props) {
-
     let timer;
     let first = props.folders.length;
     const status = [];
     for (let index = 0; index < props.folders.length; index++) {
         status[index] = false;
-        
     }
 
-    const setActiveStatus = (id,value)=>{
+    const setActiveStatus = (id, value) => {
         status[id] = value;
-        if (value){
+        if (value) {
             clearTimeout(timer);
-        }else{
+        } else {
             let shouldClose = true;
             status.forEach(element => {
-                if (element){
+                if (element) {
                     shouldClose = false;
                 }
             });
-            if (shouldClose){
-                if (first<=0){
-                    timer = setTimeout(()=>{
+            if (shouldClose) {
+                if (first <= 0) {
+                    timer = setTimeout(() => {
                         props.onClose();
-                    },100)
-                }else{
+                    }, 100);
+                } else {
                     first--;
                 }
-            
             }
         }
         console.log(status);
-    }
+    };
 
     return (
         <>
@@ -45,7 +41,7 @@ export default function DropDown(props) {
                     path={"/" + props.folders.slice(0, id).join("/")}
                     navigateTo={props.navigateTo}
                     id={id}
-                    setActiveStatus = {setActiveStatus}
+                    setActiveStatus={setActiveStatus}
                     folder={folder}
                 />
             ))}
diff --git a/src/component/FileManager/Navigator/DropDownItem.js b/src/component/FileManager/Navigator/DropDownItem.js
index 5cb506b..bb0b949 100644
--- a/src/component/FileManager/Navigator/DropDownItem.js
+++ b/src/component/FileManager/Navigator/DropDownItem.js
@@ -1,11 +1,7 @@
 import React, { useEffect } from "react";
 import { makeStyles } from "@material-ui/core";
 import FolderIcon from "@material-ui/icons/Folder";
-import {
-    MenuItem,
-    ListItemIcon,
-    ListItemText
-} from "@material-ui/core";
+import { MenuItem, ListItemIcon, ListItemText } from "@material-ui/core";
 import { useDrop } from "react-dnd";
 import classNames from "classnames";
 
@@ -36,9 +32,9 @@ export default function DropDownItem(props) {
     const isActive = canDrop && isOver;
 
     useEffect(() => {
-        props.setActiveStatus(props.id,isActive);
+        props.setActiveStatus(props.id, isActive);
         // eslint-disable-next-line
-    }, [isActive])
+    }, [isActive]);
 
     const classes = useStyles();
     return (
diff --git a/src/component/FileManager/Navigator/Navigator.js b/src/component/FileManager/Navigator/Navigator.js
index b2ecd43..a491991 100644
--- a/src/component/FileManager/Navigator/Navigator.js
+++ b/src/component/FileManager/Navigator/Navigator.js
@@ -21,9 +21,11 @@ import {
     openCreateFolderDialog,
     openShareDialog,
     drawerToggleAction,
-    setShareUserPopover, openResaveDialog, openCompressDialog
+    setShareUserPopover,
+    openResaveDialog,
+    openCompressDialog
 } from "../../../actions/index";
-import explorer from "../../../redux/explorer"
+import explorer from "../../../redux/explorer";
 import API from "../../../middleware/Api";
 import { setCookie, setGetParameter, fixUrlHash } from "../../../utils/index";
 import {
@@ -40,11 +42,10 @@ import pathHelper from "../../../utils/page";
 import classNames from "classnames";
 import Auth from "../../../middleware/Auth";
 import Avatar from "@material-ui/core/Avatar";
-import {Archive} from "@material-ui/icons";
+import { Archive } from "@material-ui/icons";
 import { FilePlus } from "mdi-material-ui";
 import { openCreateFileDialog } from "../../../actions";
 
-
 const mapStateToProps = state => {
     return {
         path: state.navigator.path,
@@ -100,12 +101,12 @@ const mapDispatchToProps = dispatch => {
         setShareUserPopover: e => {
             dispatch(setShareUserPopover(e));
         },
-        openResave: (key) => {
+        openResave: key => {
             dispatch(openResaveDialog(key));
         },
-        openCompressDialog: ()=>{
-            dispatch(openCompressDialog())
-        },
+        openCompressDialog: () => {
+            dispatch(openCompressDialog());
+        }
     };
 };
 
@@ -182,7 +183,7 @@ class NavigatorComponent extends Component {
     componentDidMount = () => {
         const url = new URL(fixUrlHash(window.location.href));
         const c = url.searchParams.get("path");
-        this.renderPath(c === null ? "/":c);
+        this.renderPath(c === null ? "/" : c);
 
         if (!this.props.isShare) {
             // 如果是在个人文件管理页，首次加载时打开侧边栏
@@ -330,7 +331,7 @@ class NavigatorComponent extends Component {
         const presentPath = this.props.path.split("/");
         const newTarget = [
             {
-                id:this.currentID,
+                id: this.currentID,
                 type: "dir",
                 name: presentPath.pop(),
                 path: presentPath.length === 1 ? "/" : presentPath.join("/")
@@ -384,7 +385,7 @@ class NavigatorComponent extends Component {
 
     render() {
         const { classes } = this.props;
-        const isHomePage =  pathHelper.isHomePage(this.props.location.pathname);
+        const isHomePage = pathHelper.isHomePage(this.props.location.pathname);
         const user = Auth.GetUser();
 
         const presentFolderMenu = (
@@ -401,45 +402,42 @@ class NavigatorComponent extends Component {
                     </ListItemIcon>
                     刷新
                 </MenuItem>
-                {this.props.keywords === "" &&
-                isHomePage && (
-                        <div>
-                            <Divider />
+                {this.props.keywords === "" && isHomePage && (
+                    <div>
+                        <Divider />
+                        <MenuItem onClick={() => this.performAction("share")}>
+                            <ListItemIcon>
+                                <ShareIcon />
+                            </ListItemIcon>
+                            分享
+                        </MenuItem>
+                        {user.group.compress && (
                             <MenuItem
-                                onClick={() => this.performAction("share")}
-                            >
-                                <ListItemIcon>
-                                    <ShareIcon />
-                                </ListItemIcon>
-                                分享
-                            </MenuItem>
-                            {user.group.compress && <MenuItem
                                 onClick={() => this.performAction("compress")}
                             >
                                 <ListItemIcon>
                                     <Archive />
                                 </ListItemIcon>
                                 压缩
-                            </MenuItem>}
-                            <Divider />
-                            <MenuItem
-                                onClick={() => this.performAction("newfolder")}
-                            >
-                                <ListItemIcon>
-                                    <NewFolderIcon />
-                                </ListItemIcon>
-                                创建文件夹
                             </MenuItem>
-                            <MenuItem
-                                onClick={() => this.performAction("newFile")}
-                            >
-                                <ListItemIcon>
-                                    <FilePlus />
-                                </ListItemIcon>
-                                创建文件
-                            </MenuItem>
-                        </div>
-                    )}
+                        )}
+                        <Divider />
+                        <MenuItem
+                            onClick={() => this.performAction("newfolder")}
+                        >
+                            <ListItemIcon>
+                                <NewFolderIcon />
+                            </ListItemIcon>
+                            创建文件夹
+                        </MenuItem>
+                        <MenuItem onClick={() => this.performAction("newFile")}>
+                            <ListItemIcon>
+                                <FilePlus />
+                            </ListItemIcon>
+                            创建文件
+                        </MenuItem>
+                    </div>
+                )}
             </Menu>
         );
 
@@ -614,7 +612,11 @@ class NavigatorComponent extends Component {
                             >
                                 <Avatar
                                     style={{ height: 23, width: 23 }}
-                                    src={"/api/v3/user/avatar/"+this.props.share.creator.key + "/s"}
+                                    src={
+                                        "/api/v3/user/avatar/" +
+                                        this.props.share.creator.key +
+                                        "/s"
+                                    }
                                 />
                             </IconButton>
                         )}
diff --git a/src/component/FileManager/Navigator/PathButton.js b/src/component/FileManager/Navigator/PathButton.js
index fb6ef13..e8346f4 100644
--- a/src/component/FileManager/Navigator/PathButton.js
+++ b/src/component/FileManager/Navigator/PathButton.js
@@ -1,4 +1,4 @@
-import React,{useEffect} from "react";
+import React, { useEffect } from "react";
 import ExpandMore from "@material-ui/icons/ExpandMore";
 import { Button } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core";
@@ -13,14 +13,14 @@ const useStyles = makeStyles(theme => ({
     active: {
         border: "2px solid " + theme.palette.primary.light
     },
-    button:{
-        textTransform: "none",
+    button: {
+        textTransform: "none"
     }
 }));
 
 export default function PathButton(props) {
-    const inputRef = React.useRef(null)
-    
+    const inputRef = React.useRef(null);
+
     const [{ canDrop, isOver }, drop] = useDrop({
         accept: "object",
         drop: () => {
@@ -45,35 +45,36 @@ export default function PathButton(props) {
     const isActive = canDrop && isOver;
 
     useEffect(() => {
-        if(props.more && isActive){
+        if (props.more && isActive) {
             inputRef.current.click();
         }
         // eslint-disable-next-line
-    }, [isActive])
+    }, [isActive]);
 
     const classes = useStyles();
     return (
-        
-        <span onClick={props.onClick}  ref={inputRef} >
-        <Button
-            ref={drop}
-            className={classNames({
-                [classes.active]: isActive
-            },classes.button)}
-            component="span"
-            title={props.title}
-        >
-            {props.more && <MoreIcon />}
-            {!props.more && (
-                <>
-                    {props.folder}
-                    {props.last && (
-                        <ExpandMore className={classes.expandMore} />
-                    )}
-                </>
-            )}
-        </Button>
+        <span onClick={props.onClick} ref={inputRef}>
+            <Button
+                ref={drop}
+                className={classNames(
+                    {
+                        [classes.active]: isActive
+                    },
+                    classes.button
+                )}
+                component="span"
+                title={props.title}
+            >
+                {props.more && <MoreIcon />}
+                {!props.more && (
+                    <>
+                        {props.folder}
+                        {props.last && (
+                            <ExpandMore className={classes.expandMore} />
+                        )}
+                    </>
+                )}
+            </Button>
         </span>
-        
     );
 }
diff --git a/src/component/FileManager/ObjectIcon.js b/src/component/FileManager/ObjectIcon.js
index bc45c71..9ad4a7e 100644
--- a/src/component/FileManager/ObjectIcon.js
+++ b/src/component/FileManager/ObjectIcon.js
@@ -99,12 +99,12 @@ export default function ObjectIcon(props) {
     };
 
     const selectFile = e => {
-        dispatch(selectFileAction(props.file, e, props.index))
+        dispatch(selectFileAction(props.file, e, props.index));
     };
     const enterFolder = () => {
-      NavitateTo(
-          path === "/" ? path + props.file.name : path + "/" + props.file.name
-      );
+        NavitateTo(
+            path === "/" ? path + props.file.name : path + "/" + props.file.name
+        );
     };
     const handleClick = e => {
         if (props.file.type === "up") {
@@ -156,18 +156,18 @@ export default function ObjectIcon(props) {
                 if (isShare) {
                     history.push(
                         selected[0].key +
-                        "/doc?name=" +
-                        encodeURIComponent(selected[0].name) +
-                        "&share_path=" +
-                        encodeURIComponent(previewPath)
+                            "/doc?name=" +
+                            encodeURIComponent(selected[0].name) +
+                            "&share_path=" +
+                            encodeURIComponent(previewPath)
                     );
                     return;
                 }
                 history.push(
                     "/doc?p=" +
-                    encodeURIComponent(previewPath) +
-                    "&id=" +
-                    selected[0].id
+                        encodeURIComponent(previewPath) +
+                        "&id=" +
+                        selected[0].id
                 );
                 return;
             case "audio":
@@ -177,58 +177,73 @@ export default function ObjectIcon(props) {
                 if (isShare) {
                     history.push(
                         selected[0].key +
-                        "/video?name=" +
-                        encodeURIComponent(selected[0].name) +
-                        "&share_path=" +
-                        encodeURIComponent(previewPath)
+                            "/video?name=" +
+                            encodeURIComponent(selected[0].name) +
+                            "&share_path=" +
+                            encodeURIComponent(previewPath)
                     );
                     return;
                 }
                 history.push(
                     "/video?p=" +
-                    encodeURIComponent(previewPath) +
-                    "&id=" +
-                    selected[0].id
+                        encodeURIComponent(previewPath) +
+                        "&id=" +
+                        selected[0].id
                 );
                 return;
             case "edit":
                 if (isShare) {
                     history.push(
                         selected[0].key +
-                        "/text?name=" +
-                        encodeURIComponent(selected[0].name) +
-                        "&share_path=" +
-                        encodeURIComponent(previewPath)
+                            "/text?name=" +
+                            encodeURIComponent(selected[0].name) +
+                            "&share_path=" +
+                            encodeURIComponent(previewPath)
                     );
                     return;
                 }
-                history.push("/text?p=" + encodeURIComponent(previewPath) + "&id=" + selected[0].id);
+                history.push(
+                    "/text?p=" +
+                        encodeURIComponent(previewPath) +
+                        "&id=" +
+                        selected[0].id
+                );
                 return;
             case "pdf":
                 if (isShare) {
                     history.push(
                         selected[0].key +
-                        "/pdf?name=" +
-                        encodeURIComponent(selected[0].name) +
-                        "&share_path=" +
-                        encodeURIComponent(previewPath)
+                            "/pdf?name=" +
+                            encodeURIComponent(selected[0].name) +
+                            "&share_path=" +
+                            encodeURIComponent(previewPath)
                     );
                     return;
                 }
-                history.push("/pdf?p=" + encodeURIComponent(previewPath) + "&id=" + selected[0].id);
+                history.push(
+                    "/pdf?p=" +
+                        encodeURIComponent(previewPath) +
+                        "&id=" +
+                        selected[0].id
+                );
                 return;
             case "code":
                 if (isShare) {
                     history.push(
                         selected[0].key +
-                        "/code?name=" +
-                        encodeURIComponent(selected[0].name) +
-                        "&share_path=" +
-                        encodeURIComponent(previewPath)
+                            "/code?name=" +
+                            encodeURIComponent(selected[0].name) +
+                            "&share_path=" +
+                            encodeURIComponent(previewPath)
                     );
                     return;
                 }
-                history.push("/code?p=" + encodeURIComponent(previewPath) + "&id=" + selected[0].id);
+                history.push(
+                    "/code?p=" +
+                        encodeURIComponent(previewPath) +
+                        "&id=" +
+                        selected[0].id
+                );
                 return;
             default:
                 OpenLoadingDialog("获取下载地址...");
diff --git a/src/component/FileManager/PathSelector.js b/src/component/FileManager/PathSelector.js
index f94e9bc..225e38f 100644
--- a/src/component/FileManager/PathSelector.js
+++ b/src/component/FileManager/PathSelector.js
@@ -1,13 +1,11 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types';
-import FolderIcon from '@material-ui/icons/Folder'
-import RightIcon from "@material-ui/icons/KeyboardArrowRight"
-import UpIcon from "@material-ui/icons/ArrowUpward"
-import { connect } from 'react-redux'
-import classNames from 'classnames';
-import {
-    toggleSnackbar,
-} from "../../actions/index"
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import FolderIcon from "@material-ui/icons/Folder";
+import RightIcon from "@material-ui/icons/KeyboardArrowRight";
+import UpIcon from "@material-ui/icons/ArrowUpward";
+import { connect } from "react-redux";
+import classNames from "classnames";
+import { toggleSnackbar } from "../../actions/index";
 
 import {
     MenuList,
@@ -16,130 +14,162 @@ import {
     ListItemIcon,
     ListItemText,
     withStyles,
-    ListItemSecondaryAction,
-} from '@material-ui/core';
-import API from '../../middleware/Api'
+    ListItemSecondaryAction
+} from "@material-ui/core";
+import API from "../../middleware/Api";
 
 const mapStateToProps = state => {
     return {
-        keywords: state.explorer.keywords,
-    }
-}
+        keywords: state.explorer.keywords
+    };
+};
 
 const mapDispatchToProps = dispatch => {
     return {
-        toggleSnackbar:(vertical,horizontal,msg,color)=>{
-            dispatch(toggleSnackbar(vertical,horizontal,msg,color))
-        },
-    }
-}
-
+        toggleSnackbar: (vertical, horizontal, msg, color) => {
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color));
+        }
+    };
+};
 
 const styles = theme => ({
-    iconWhite:{
-        color: theme.palette.common.white,
+    iconWhite: {
+        color: theme.palette.common.white
     },
     selected: {
-          backgroundColor: theme.palette.primary.main+"!important",
-          '& $primary, & $icon': {
-            color: theme.palette.common.white,
-          },
-      },
+        backgroundColor: theme.palette.primary.main + "!important",
+        "& $primary, & $icon": {
+            color: theme.palette.common.white
+        }
+    },
     primary: {},
     icon: {},
-    buttonIcon:{},
-    selector:{
-        minWidth: "300px",
+    buttonIcon: {},
+    selector: {
+        minWidth: "300px"
     },
-    container:{
+    container: {
         maxHeight: "330px",
-        overflowY:" auto",
+        overflowY: " auto"
     }
-})
-
+});
 
 class PathSelectorCompoment extends Component {
-
     state = {
-        presentPath:"/",
-        dirList:[],
-        selectedTarget:null,
-    }
+        presentPath: "/",
+        dirList: [],
+        selectedTarget: null
+    };
 
-    componentDidMount= ()=>{
+    componentDidMount = () => {
         const toBeLoad = this.props.presentPath;
         this.enterFolder(this.props.keywords === "" ? toBeLoad : "/");
-    }
+    };
 
-    back = ()=>{
+    back = () => {
         const paths = this.state.presentPath.split("/");
         paths.pop();
         const toBeLoad = paths.join("/");
-        this.enterFolder(toBeLoad===""?"/":toBeLoad);
-    }
+        this.enterFolder(toBeLoad === "" ? "/" : toBeLoad);
+    };
 
-    enterFolder = (toBeLoad)=>{
-        API.get((this.props.api ? this.props.api : '/directory')+encodeURIComponent(toBeLoad),)
-        .then( (response)=> {
-            const dirList =  response.data.objects.filter( (x)=> {
-                return (x.type === "dir" && (this.props.selected.findIndex((value)=>{
-                    return (value.name === x.name )&&(value.path === x.path);
-                }))===-1);
-            });
-            if(toBeLoad ==="/"){
-                dirList.unshift({name:"/",path:""})
-            }
-            this.setState({
-                presentPath:toBeLoad,
-                dirList:dirList,
-                selectedTarget:null,
+    enterFolder = toBeLoad => {
+        API.get(
+            (this.props.api ? this.props.api : "/directory") +
+                encodeURIComponent(toBeLoad)
+        )
+            .then(response => {
+                const dirList = response.data.objects.filter(x => {
+                    return (
+                        x.type === "dir" &&
+                        this.props.selected.findIndex(value => {
+                            return (
+                                value.name === x.name && value.path === x.path
+                            );
+                        }) === -1
+                    );
+                });
+                if (toBeLoad === "/") {
+                    dirList.unshift({ name: "/", path: "" });
+                }
+                this.setState({
+                    presentPath: toBeLoad,
+                    dirList: dirList,
+                    selectedTarget: null
+                });
             })
-        })
-        .catch((error) =>{
-            this.props.toggleSnackbar("top","right",error.message,"warning");
-        });
-    }
+            .catch(error => {
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    error.message,
+                    "warning"
+                );
+            });
+    };
 
-    handleSelect = (index) =>{
-        this.setState({selectedTarget:index});
+    handleSelect = index => {
+        this.setState({ selectedTarget: index });
         this.props.onSelect(this.state.dirList[index]);
-    }
+    };
 
     render() {
-        
-        const { classes} = this.props;
+        const { classes } = this.props;
 
         return (
             <div className={classes.container}>
-            <MenuList className={classes.selector}>
-                {this.state.presentPath!=="/"&&
-                <MenuItem onClick={this.back}>
-                    <ListItemIcon >
-                        <UpIcon />
-                    </ListItemIcon>
-                    <ListItemText  primary="返回上一层" />
-                </MenuItem>
-                }
-                {this.state.dirList.map((value,index)=>(
-                    <MenuItem classes={{
-                        selected:classes.selected
-                    }} key={index} selected={this.state.selectedTarget === index} onClick={()=>this.handleSelect(index)}>
-                        <ListItemIcon className={classes.icon}>
-                            <FolderIcon />
-                        </ListItemIcon>
-                        <ListItemText classes={{ primary: classes.primary }}  primary={value.name} />
-                        {value.name!=="/"&&<ListItemSecondaryAction className={classes.buttonIcon}>
-                            <IconButton className={classNames({
-                                [classes.iconWhite]:this.state.selectedTarget === index,
-                            })} onClick={()=>this.enterFolder(value.path === "/"?value.path+value.name:value.path+"/"+value.name)}>
-                                <RightIcon  />
-                            </IconButton>
-                        </ListItemSecondaryAction>}
-                    </MenuItem>
-                ))}
-                
-            </MenuList>
-                
+                <MenuList className={classes.selector}>
+                    {this.state.presentPath !== "/" && (
+                        <MenuItem onClick={this.back}>
+                            <ListItemIcon>
+                                <UpIcon />
+                            </ListItemIcon>
+                            <ListItemText primary="返回上一层" />
+                        </MenuItem>
+                    )}
+                    {this.state.dirList.map((value, index) => (
+                        <MenuItem
+                            classes={{
+                                selected: classes.selected
+                            }}
+                            key={index}
+                            selected={this.state.selectedTarget === index}
+                            onClick={() => this.handleSelect(index)}
+                        >
+                            <ListItemIcon className={classes.icon}>
+                                <FolderIcon />
+                            </ListItemIcon>
+                            <ListItemText
+                                classes={{ primary: classes.primary }}
+                                primary={value.name}
+                            />
+                            {value.name !== "/" && (
+                                <ListItemSecondaryAction
+                                    className={classes.buttonIcon}
+                                >
+                                    <IconButton
+                                        className={classNames({
+                                            [classes.iconWhite]:
+                                                this.state.selectedTarget ===
+                                                index
+                                        })}
+                                        onClick={() =>
+                                            this.enterFolder(
+                                                value.path === "/"
+                                                    ? value.path + value.name
+                                                    : value.path +
+                                                          "/" +
+                                                          value.name
+                                            )
+                                        }
+                                    >
+                                        <RightIcon />
+                                    </IconButton>
+                                </ListItemSecondaryAction>
+                            )}
+                        </MenuItem>
+                    ))}
+                </MenuList>
             </div>
         );
     }
@@ -147,12 +177,11 @@ class PathSelectorCompoment extends Component {
 
 PathSelectorCompoment.propTypes = {
     classes: PropTypes.object.isRequired,
-    presentPath:PropTypes.string.isRequired,
-    selected:PropTypes.array.isRequired,
+    presentPath: PropTypes.string.isRequired,
+    selected: PropTypes.array.isRequired
 };
 
 export default connect(
     mapStateToProps,
     mapDispatchToProps
-
-)(withStyles(styles)(PathSelectorCompoment))
\ No newline at end of file
+)(withStyles(styles)(PathSelectorCompoment));
diff --git a/src/component/FileManager/SmallIcon.js b/src/component/FileManager/SmallIcon.js
index fafe1ec..ad5bf5e 100644
--- a/src/component/FileManager/SmallIcon.js
+++ b/src/component/FileManager/SmallIcon.js
@@ -1,43 +1,44 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux'
-import classNames from 'classnames';
-import { withStyles, ButtonBase, Typography, Tooltip } from '@material-ui/core';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import classNames from "classnames";
+import { withStyles, ButtonBase, Typography, Tooltip } from "@material-ui/core";
 import TypeIcon from "./TypeIcon";
-import {lighten} from "@material-ui/core/styles";
+import { lighten } from "@material-ui/core/styles";
 
 const styles = theme => ({
     container: {
-        padding: "7px",
+        padding: "7px"
     },
 
     selected: {
         "&:hover": {
-            border: "1px solid #d0d0d0",
+            border: "1px solid #d0d0d0"
         },
         backgroundColor:
             theme.palette.type === "dark"
                 ? "#fff"
-                : lighten(theme.palette.primary.main,0.8),
+                : lighten(theme.palette.primary.main, 0.8)
     },
     notSelected: {
         "&:hover": {
             backgroundColor: theme.palette.background.default,
-            border: "1px solid #d0d0d0",
+            border: "1px solid #d0d0d0"
         },
-        backgroundColor: theme.palette.background.paper,
+        backgroundColor: theme.palette.background.paper
     },
 
     button: {
         height: "50px",
-        border: "1px solid "+theme.palette.divider,
+        border: "1px solid " + theme.palette.divider,
         width: "100%",
         borderRadius: "6px",
         boxSizing: "border-box",
-        transition: "background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
+        transition:
+            "background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
         display: "flex",
         justifyContent: "left",
-        alignItems: "initial",
+        alignItems: "initial"
     },
     icon: {
         margin: "10px 10px 10px 16px",
@@ -46,83 +47,94 @@ const styles = theme => ({
         backgroundColor: theme.palette.background.paper,
         borderRadius: "90%",
         paddingTop: "2px",
-        color: theme.palette.text.secondary,
+        color: theme.palette.text.secondary
     },
     folderNameSelected: {
-        color: theme.palette.type === "dark" ? theme.palette.background.paper : theme.palette.primary.dark,
-        fontWeight: "500",
+        color:
+            theme.palette.type === "dark"
+                ? theme.palette.background.paper
+                : theme.palette.primary.dark,
+        fontWeight: "500"
     },
     folderNameNotSelected: {
-        color: theme.palette.text.secondary,
+        color: theme.palette.text.secondary
     },
     folderName: {
         marginTop: "15px",
         textOverflow: "ellipsis",
         whiteSpace: "nowrap",
         overflow: "hidden",
-        marginRight: "20px",
-    },
-})
+        marginRight: "20px"
+    }
+});
 
 const mapStateToProps = state => {
     return {
-        selected: state.explorer.selected,
-    }
-}
+        selected: state.explorer.selected
+    };
+};
 
 const mapDispatchToProps = () => {
-    return {
-    }
-}
+    return {};
+};
 
 class SmallIconCompoment extends Component {
-
-    state = {
-    }
-
+    state = {};
 
     render() {
-
         const { classes } = this.props;
 
-        const isSelected = (this.props.selected.findIndex((value) => {
-            return value === this.props.file;
-        })) !== -1;
+        const isSelected =
+            this.props.selected.findIndex(value => {
+                return value === this.props.file;
+            }) !== -1;
 
         return (
-                <ButtonBase
-                    focusRipple
-                    className={classNames({
+            <ButtonBase
+                focusRipple
+                className={classNames(
+                    {
                         [classes.selected]: isSelected,
-                        [classes.notSelected]: !isSelected,
-                    }, classes.button)}
-                >
-                    <div className={classNames(classes.icon, {
+                        [classes.notSelected]: !isSelected
+                    },
+                    classes.button
+                )}
+            >
+                <div
+                    className={classNames(classes.icon, {
                         [classes.iconSelected]: isSelected,
-                        [classes.iconNotSelected]: !isSelected,
-                    })}><TypeIcon fileName={this.props.file.name}/></div>
-                    <Tooltip title={this.props.file.name} aria-label={this.props.file.name}>
-                        <Typography className={classNames(classes.folderName, {
+                        [classes.iconNotSelected]: !isSelected
+                    })}
+                >
+                    <TypeIcon fileName={this.props.file.name} />
+                </div>
+                <Tooltip
+                    title={this.props.file.name}
+                    aria-label={this.props.file.name}
+                >
+                    <Typography
+                        className={classNames(classes.folderName, {
                             [classes.folderNameSelected]: isSelected,
-                            [classes.folderNameNotSelected]: !isSelected,
+                            [classes.folderNameNotSelected]: !isSelected
                         })}
                         variant="body2"
-                        >{this.props.file.name}</Typography>
-                    </Tooltip>
-                </ButtonBase>
+                    >
+                        {this.props.file.name}
+                    </Typography>
+                </Tooltip>
+            </ButtonBase>
         );
     }
 }
 
 SmallIconCompoment.propTypes = {
     classes: PropTypes.object.isRequired,
-    file: PropTypes.object.isRequired,
+    file: PropTypes.object.isRequired
 };
 
-
 const SmallIcon = connect(
     mapStateToProps,
     mapDispatchToProps
-)(withStyles(styles)(SmallIconCompoment))
+)(withStyles(styles)(SmallIconCompoment));
 
-export default SmallIcon
\ No newline at end of file
+export default SmallIcon;
diff --git a/src/component/FileManager/TableRow.js b/src/component/FileManager/TableRow.js
index 5e52eb1..258ab53 100644
--- a/src/component/FileManager/TableRow.js
+++ b/src/component/FileManager/TableRow.js
@@ -7,10 +7,10 @@ import classNames from "classnames";
 import { sizeToString } from "../../utils/index";
 import { withStyles, TableCell, TableRow, Typography } from "@material-ui/core";
 import TypeIcon from "./TypeIcon";
-import {lighten} from "@material-ui/core/styles";
+import { lighten } from "@material-ui/core/styles";
 import pathHelper from "../../utils/page";
-import {withRouter} from "react-router";
-import KeyboardReturnIcon from '@material-ui/icons/KeyboardReturn';
+import { withRouter } from "react-router";
+import KeyboardReturnIcon from "@material-ui/icons/KeyboardReturn";
 
 const styles = theme => ({
     selected: {
@@ -18,20 +18,20 @@ const styles = theme => ({
         backgroundColor:
             theme.palette.type === "dark"
                 ? theme.palette.background.paper
-                : lighten(theme.palette.primary.main,0.8),
+                : lighten(theme.palette.primary.main, 0.8)
     },
 
     selectedShared: {
         "&:hover": {},
         backgroundColor:
             theme.palette.type === "dark"
-                ? lighten(theme.palette.background.paper,0.15)
-                : lighten(theme.palette.primary.main,0.8),
+                ? lighten(theme.palette.background.paper, 0.15)
+                : lighten(theme.palette.primary.main, 0.8)
     },
 
     notSelected: {
         "&:hover": {
-            backgroundColor: theme.palette.background.default,
+            backgroundColor: theme.palette.background.default
         }
     },
     icon: {
@@ -39,12 +39,13 @@ const styles = theme => ({
         marginRight: "20px",
         color: theme.palette.text.secondary
     },
-    tableIcon:{
+    tableIcon: {
         marginRight: "20px",
-        verticalAlign: "middle",
+        verticalAlign: "middle"
     },
     folderNameSelected: {
-        color: theme.palette.type === "dark" ? "#fff" : theme.palette.primary.dark,
+        color:
+            theme.palette.type === "dark" ? "#fff" : theme.palette.primary.dark,
         fontWeight: "500",
         userSelect: "none"
     },
@@ -54,7 +55,7 @@ const styles = theme => ({
     },
     folderName: {
         marginRight: "20px",
-        display: "flex",
+        display: "flex"
     },
     hideAuto: {
         [theme.breakpoints.down("sm")]: {
@@ -86,10 +87,15 @@ class TableRowCompoment extends Component {
         let icon;
         if (this.props.file.type === "dir") {
             icon = <FolderIcon className={classes.icon} />;
-        }else if (this.props.file.type === "up"){
-            icon = <KeyboardReturnIcon className={classes.icon}/>
+        } else if (this.props.file.type === "up") {
+            icon = <KeyboardReturnIcon className={classes.icon} />;
         } else {
-           icon = <TypeIcon className={classes.tableIcon} fileName={this.props.file.name}/>
+            icon = (
+                <TypeIcon
+                    className={classes.tableIcon}
+                    fileName={this.props.file.name}
+                />
+            );
         }
 
         const isSelected =
@@ -102,15 +108,17 @@ class TableRowCompoment extends Component {
                 onContextMenu={this.props.contextMenu}
                 onClick={this.props.handleClick}
                 onDoubleClick={this.props.handleDoubleClick.bind(this)}
-                className={classNames(
-                    {
-                        [classes.selected]: isSelected&&!isShare,
-                        [classes.selectedShared]: isSelected&&isShare,
-                        [classes.notSelected]: !isSelected
-                    }
-                )}
+                className={classNames({
+                    [classes.selected]: isSelected && !isShare,
+                    [classes.selectedShared]: isSelected && isShare,
+                    [classes.notSelected]: !isSelected
+                })}
             >
-                <TableCell component="th" scope="row" className={classes.tableRow}>
+                <TableCell
+                    component="th"
+                    scope="row"
+                    className={classes.tableRow}
+                >
                     <Typography
                         variant="body2"
                         className={classNames(classes.folderName, {
@@ -122,7 +130,9 @@ class TableRowCompoment extends Component {
                         {this.props.file.name}
                     </Typography>
                 </TableCell>
-                <TableCell className={classNames(classes.hideAuto,classes.tableRow)}>
+                <TableCell
+                    className={classNames(classes.hideAuto, classes.tableRow)}
+                >
                     <Typography
                         variant="body2"
                         className={classNames(classes.folderName, {
@@ -131,11 +141,14 @@ class TableRowCompoment extends Component {
                         })}
                     >
                         {" "}
-                        {this.props.file.type !== "dir" &&this.props.file.type !== "up"&&
+                        {this.props.file.type !== "dir" &&
+                            this.props.file.type !== "up" &&
                             sizeToString(this.props.file.size)}
                     </Typography>
                 </TableCell>
-                <TableCell className={classNames(classes.hideAuto,classes.tableRow)}>
+                <TableCell
+                    className={classNames(classes.hideAuto, classes.tableRow)}
+                >
                     <Typography
                         variant="body2"
                         className={classNames(classes.folderName, {
diff --git a/src/component/FileManager/TypeIcon.js b/src/component/FileManager/TypeIcon.js
index 7e8645e..b7757c4 100644
--- a/src/component/FileManager/TypeIcon.js
+++ b/src/component/FileManager/TypeIcon.js
@@ -8,7 +8,13 @@ import {
     Android,
     FileExcelBox,
     FilePowerpointBox,
-    FileWordBox, LanguageC, LanguageCpp, LanguageGo, LanguageJavascript, LanguagePhp, LanguagePython,
+    FileWordBox,
+    LanguageC,
+    LanguageCpp,
+    LanguageGo,
+    LanguageJavascript,
+    LanguagePhp,
+    LanguagePython,
     MagnetOn,
     ScriptText,
     WindowRestore,
@@ -80,22 +86,22 @@ const icons = {
         color: "#16b3da",
         icon: LanguageGo
     },
-    python:{
+    python: {
         color: "#3776ab",
         icon: LanguagePython
     },
-    c:{
+    c: {
         color: "#a8b9cc",
-        icon: LanguageC,
+        icon: LanguageC
     },
-    cpp:{
+    cpp: {
         color: "#004482",
-        icon: LanguageCpp,
+        icon: LanguageCpp
     },
-    js:{
+    js: {
         color: "#f4d003",
-        icon: LanguageJavascript,
-    },
+        icon: LanguageJavascript
+    }
 };
 
 const getColor = (theme, color) =>
@@ -133,7 +139,7 @@ const TypeIcon = props => {
                 >
                     <IconComponent
                         style={{
-                            color: theme.palette.background.paper,
+                            color: theme.palette.background.paper
                         }}
                     />
                 </Avatar>
diff --git a/src/component/Login/Activication.js b/src/component/Login/Activication.js
index cd5f5f8..9d319a5 100644
--- a/src/component/Login/Activication.js
+++ b/src/component/Login/Activication.js
@@ -1,19 +1,12 @@
 import React, { useCallback, useState, useEffect } from "react";
 import { useDispatch } from "react-redux";
 import { makeStyles } from "@material-ui/core";
-import {
-    toggleSnackbar,
-} from "../../actions/index";
+import { toggleSnackbar } from "../../actions/index";
 import { useHistory } from "react-router-dom";
 import API from "../../middleware/Api";
-import {
-    Button,
-    Paper,
-    Avatar,
-    Typography
-} from "@material-ui/core";
+import { Button, Paper, Avatar, Typography } from "@material-ui/core";
 import EmailIcon from "@material-ui/icons/EmailOutlined";
-import {useLocation} from "react-router";
+import { useLocation } from "react-router";
 const useStyles = makeStyles(theme => ({
     layout: {
         width: "auto",
@@ -42,7 +35,7 @@ const useStyles = makeStyles(theme => ({
     },
     submit: {
         marginTop: theme.spacing(3)
-    },
+    }
 }));
 
 function useQuery() {
@@ -53,8 +46,8 @@ function Activation() {
     const query = useQuery();
     const location = useLocation();
 
-    const [success,setSuccess] = useState(false);
-    const [email,setEmail] = useState("");
+    const [success, setSuccess] = useState(false);
+    const [email, setEmail] = useState("");
 
     const dispatch = useDispatch();
     const ToggleSnackbar = useCallback(
@@ -66,10 +59,10 @@ function Activation() {
 
     const classes = useStyles();
 
-
-
     useEffect(() => {
-        API.get("/user/activate/" + query.get("id") + "?sign=" + query.get("sign"))
+        API.get(
+            "/user/activate/" + query.get("id") + "?sign=" + query.get("sign")
+        )
             .then(response => {
                 setEmail(response.data);
                 setSuccess(true);
@@ -83,28 +76,29 @@ function Activation() {
 
     return (
         <div className={classes.layout}>
-            {success && <Paper className={classes.paper}>
-                <Avatar className={classes.avatar}>
-                    <EmailIcon />
-                </Avatar>
-                <Typography component="h1" variant="h5">
-                    激活成功
-                </Typography>
-                <Typography style={{marginTop:"20px"}}>您的账号已被成功激活。</Typography>
-                <Button
-                    type="submit"
-                    fullWidth
-                    variant="contained"
-                    color="primary"
-                    className={classes.submit}
-                    onClick={()=>history.push("/login?username="+email)}
-                >
-                    返回登录
-                </Button>
-
-            </Paper>}
-
-
+            {success && (
+                <Paper className={classes.paper}>
+                    <Avatar className={classes.avatar}>
+                        <EmailIcon />
+                    </Avatar>
+                    <Typography component="h1" variant="h5">
+                        激活成功
+                    </Typography>
+                    <Typography style={{ marginTop: "20px" }}>
+                        您的账号已被成功激活。
+                    </Typography>
+                    <Button
+                        type="submit"
+                        fullWidth
+                        variant="contained"
+                        color="primary"
+                        className={classes.submit}
+                        onClick={() => history.push("/login?username=" + email)}
+                    >
+                        返回登录
+                    </Button>
+                </Paper>
+            )}
         </div>
     );
 }
diff --git a/src/component/Login/ReCaptcha.js b/src/component/Login/ReCaptcha.js
index e07f2c4..678ebc1 100644
--- a/src/component/Login/ReCaptcha.js
+++ b/src/component/Login/ReCaptcha.js
@@ -11,5 +11,5 @@ function getURL() {
 
 export default makeAsyncScriptLoader(getURL, {
     callbackName,
-    globalName,
-})(ReCAPTCHA);
\ No newline at end of file
+    globalName
+})(ReCAPTCHA);
diff --git a/src/component/Login/ReCaptchaWrapper.js b/src/component/Login/ReCaptchaWrapper.js
index 7a8d21b..56c6623 100644
--- a/src/component/Login/ReCaptchaWrapper.js
+++ b/src/component/Login/ReCaptchaWrapper.js
@@ -57,7 +57,11 @@ export default class ReCAPTCHA extends React.Component {
     }
 
     explicitRender() {
-        if (this.props.grecaptcha && this.props.grecaptcha.render && this._widgetId === undefined) {
+        if (
+            this.props.grecaptcha &&
+            this.props.grecaptcha.render &&
+            this._widgetId === undefined
+        ) {
             const wrapper = document.createElement("div");
             this._widgetId = this.props.grecaptcha.render(wrapper, {
                 sitekey: this.props.sitekey,
@@ -70,11 +74,15 @@ export default class ReCAPTCHA extends React.Component {
                 size: this.props.size,
                 stoken: this.props.stoken,
                 hl: this.props.hl,
-                badge: this.props.badge,
+                badge: this.props.badge
             });
             this.captcha.appendChild(wrapper);
         }
-        if (this._executeRequested && this.props.grecaptcha && this._widgetId !== undefined) {
+        if (
+            this._executeRequested &&
+            this.props.grecaptcha &&
+            this._widgetId !== undefined
+        ) {
             this._executeRequested = false;
             this.execute();
         }
@@ -152,7 +160,7 @@ ReCAPTCHA.propTypes = {
     size: PropTypes.oneOf(["compact", "normal", "invisible"]),
     stoken: PropTypes.string,
     hl: PropTypes.string,
-    badge: PropTypes.oneOf(["bottomright", "bottomleft", "inline"]),
+    badge: PropTypes.oneOf(["bottomright", "bottomleft", "inline"])
 };
 ReCAPTCHA.defaultProps = {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -161,5 +169,5 @@ ReCAPTCHA.defaultProps = {
     type: "image",
     tabindex: 0,
     size: "normal",
-    badge: "bottomright",
-};
\ No newline at end of file
+    badge: "bottomright"
+};
diff --git a/src/component/Login/ResetForm.js b/src/component/Login/ResetForm.js
index 9f3bb3f..9b5a562 100644
--- a/src/component/Login/ResetForm.js
+++ b/src/component/Login/ResetForm.js
@@ -51,7 +51,7 @@ const useStyles = makeStyles(theme => ({
         display: "flex",
         width: "100%",
         justifyContent: "space-between"
-    },
+    }
 }));
 
 function useQuery() {
@@ -68,9 +68,9 @@ function ResetForm() {
     const handleInputChange = name => e => {
         setInput({
             ...input,
-            [name]:e.target.value
-        })
-    }
+            [name]: e.target.value
+        });
+    };
     const dispatch = useDispatch();
     const ToggleSnackbar = useCallback(
         (vertical, horizontal, msg, color) =>
@@ -81,15 +81,15 @@ function ResetForm() {
 
     const submit = e => {
         e.preventDefault();
-        if (input.password !== input.password_repeat){
+        if (input.password !== input.password_repeat) {
             ToggleSnackbar("top", "right", "两次密码输入不一致", "warning");
-            return
+            return;
         }
         setLoading(true);
         API.patch("/user/reset", {
             secret: query.get("sign"),
             id: query.get("id"),
-            Password: input.password,
+            Password: input.password
         })
             .then(() => {
                 setLoading(false);
@@ -100,7 +100,7 @@ function ResetForm() {
                 setLoading(false);
                 ToggleSnackbar("top", "right", error.message, "warning");
             });
-    }
+    };
 
     const classes = useStyles();
 
diff --git a/src/component/Login/ResetPwdForm.js b/src/component/Login/ResetPwdForm.js
index 23e3335..dab0e1c 100644
--- a/src/component/Login/ResetPwdForm.js
+++ b/src/component/Login/ResetPwdForm.js
@@ -1,8 +1,8 @@
-import React, { Component } from 'react'
-import { connect } from 'react-redux'
-import KeyIcon from '@material-ui/icons/VpnKeyOutlined';
-import { toggleSnackbar, } from "../../actions/index"
-import axios from 'axios'
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import KeyIcon from "@material-ui/icons/VpnKeyOutlined";
+import { toggleSnackbar } from "../../actions/index";
+import axios from "axios";
 
 import {
     withStyles,
@@ -14,120 +14,138 @@ import {
     InputLabel,
     Paper,
     Avatar,
-    Typography,
-} from '@material-ui/core';
+    Typography
+} from "@material-ui/core";
 
 const styles = theme => ({
     layout: {
-        width: 'auto',
-        marginTop: '110px',
+        width: "auto",
+        marginTop: "110px",
         marginLeft: theme.spacing(3),
         marginRight: theme.spacing(3),
         [theme.breakpoints.up(1100 + theme.spacing(3) * 2)]: {
             width: 400,
-            marginLeft: 'auto',
-            marginRight: 'auto',
-        },
+            marginLeft: "auto",
+            marginRight: "auto"
+        }
     },
     paper: {
         marginTop: theme.spacing(8),
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        padding: `${theme.spacing(2)}px ${theme.spacing(3)}px ${theme.spacing(3)}px`,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        padding: `${theme.spacing(2)}px ${theme.spacing(3)}px ${theme.spacing(
+            3
+        )}px`
     },
     avatar: {
         margin: theme.spacing(1),
-        backgroundColor: theme.palette.secondary.main,
+        backgroundColor: theme.palette.secondary.main
     },
     form: {
-        width: '100%', // Fix IE 11 issue.
-        marginTop: theme.spacing(1),
+        width: "100%", // Fix IE 11 issue.
+        marginTop: theme.spacing(1)
     },
     submit: {
-        marginTop: theme.spacing(3),
+        marginTop: theme.spacing(3)
     },
     link: {
         marginTop: "10px",
-        display:"flex",
+        display: "flex",
         width: "100%",
-        justifyContent: "space-between",
+        justifyContent: "space-between"
     },
-    captchaContainer:{
-        display:"flex",
+    captchaContainer: {
+        display: "flex",
         marginTop: "10px",
         [theme.breakpoints.down("sm")]: {
-            display: "block",
-        },
+            display: "block"
+        }
     }
-})
+});
 const mapStateToProps = () => {
-    return {
-    }
-}
+    return {};
+};
 
 const mapDispatchToProps = dispatch => {
     return {
         toggleSnackbar: (vertical, horizontal, msg, color) => {
-            dispatch(toggleSnackbar(vertical, horizontal, msg, color))
-        },
-    }
-}
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color));
+        }
+    };
+};
 
 class ResetPwdFormCompoment extends Component {
+    state = {
+        pwd: "",
+        pwdRepeat: "",
+        loading: false
+    };
 
-    state={
-        pwd:"",
-        pwdRepeat:"",
-        loading:false,
-    }
-
-    login = e=>{
+    login = e => {
         e.preventDefault();
-        if(this.state.pwdRepeat !== this.state.pwd){
-            this.props.toggleSnackbar("top","right","两次密码输入不一致","warning");
+        if (this.state.pwdRepeat !== this.state.pwd) {
+            this.props.toggleSnackbar(
+                "top",
+                "right",
+                "两次密码输入不一致",
+                "warning"
+            );
             return;
         }
         this.setState({
-            loading:true,
+            loading: true
         });
-        axios.post('/Member/Reset',{
-            pwd:this.state.pwd,
-            key:window.resetKey,
-        }).then( (response)=> {
-            if(response.data.code!=="200"){
+        axios
+            .post("/Member/Reset", {
+                pwd: this.state.pwd,
+                key: window.resetKey
+            })
+            .then(response => {
+                if (response.data.code !== "200") {
+                    this.setState({
+                        loading: false
+                    });
+                    this.props.toggleSnackbar(
+                        "top",
+                        "right",
+                        response.data.message,
+                        "warning"
+                    );
+                } else {
+                    this.setState({
+                        loading: false,
+                        pwd: "",
+                        pwdRepeat: ""
+                    });
+                    this.props.toggleSnackbar(
+                        "top",
+                        "right",
+                        "密码重设成功",
+                        "success"
+                    );
+                }
+            })
+            .catch(error => {
                 this.setState({
-                    loading:false,
+                    loading: false
                 });
-                this.props.toggleSnackbar("top","right",response.data.message,"warning");
-            }else{
-                this.setState({
-                    loading:false,
-                    pwd:"",
-                    pwdRepeat:"",
-                });
-                this.props.toggleSnackbar("top","right","密码重设成功","success");
-            }
-        })
-        .catch((error) =>{
-            this.setState({
-                loading:false,
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    error.message,
+                    "error"
+                );
             });
-            this.props.toggleSnackbar("top","right",error.message,"error");
-            
-            
-        });
-    }
+    };
 
     handleChange = name => event => {
         this.setState({ [name]: event.target.value });
     };
-    
 
     render() {
         const { classes } = this.props;
 
-
         return (
             <div className={classes.layout}>
                 <Paper className={classes.paper}>
@@ -140,25 +158,27 @@ class ResetPwdFormCompoment extends Component {
                     <form className={classes.form} onSubmit={this.login}>
                         <FormControl margin="normal" required fullWidth>
                             <InputLabel htmlFor="email">新密码</InputLabel>
-                            <Input 
-                            id="pwd" 
-                            type="password" 
-                            name="pwd" 
-                            onChange={this.handleChange("pwd")} 
-                            autoComplete
-                            value={this.state.pwd}
-                            autoFocus />
+                            <Input
+                                id="pwd"
+                                type="password"
+                                name="pwd"
+                                onChange={this.handleChange("pwd")}
+                                autoComplete
+                                value={this.state.pwd}
+                                autoFocus
+                            />
                         </FormControl>
                         <FormControl margin="normal" required fullWidth>
                             <InputLabel htmlFor="email">重复新密码</InputLabel>
-                            <Input 
-                            id="pwdRepeat" 
-                            type="password" 
-                            name="pwdRepeat" 
-                            onChange={this.handleChange("pwdRepeat")} 
-                            autoComplete
-                            value={this.state.pwdRepeat}
-                            autoFocus />
+                            <Input
+                                id="pwdRepeat"
+                                type="password"
+                                name="pwdRepeat"
+                                onChange={this.handleChange("pwdRepeat")}
+                                autoComplete
+                                value={this.state.pwdRepeat}
+                                autoFocus
+                            />
                         </FormControl>
                         <Button
                             type="submit"
@@ -169,30 +189,26 @@ class ResetPwdFormCompoment extends Component {
                             className={classes.submit}
                         >
                             重设密码
-                        </Button>  </form>                          <Divider/>
-                        <div className={classes.link}>
-                            <div>
-                                <Link href={"/Login"}>
-                                    返回登录
-                                </Link>
-                            </div>
-                            <div>
-                                <Link href={"/SignUp"}>
-                                    注册账号
-                                </Link>
-                            </div>
+                        </Button>{" "}
+                    </form>{" "}
+                    <Divider />
+                    <div className={classes.link}>
+                        <div>
+                            <Link href={"/Login"}>返回登录</Link>
                         </div>
-                    
+                        <div>
+                            <Link href={"/SignUp"}>注册账号</Link>
+                        </div>
+                    </div>
                 </Paper>
             </div>
         );
     }
-
 }
 
 const ResetPwdForm = connect(
     mapStateToProps,
     mapDispatchToProps
-)(withStyles(styles)(ResetPwdFormCompoment))
+)(withStyles(styles)(ResetPwdFormCompoment));
 
-export default ResetPwdForm
+export default ResetPwdForm;
diff --git a/src/component/Modals/AddTag.js b/src/component/Modals/AddTag.js
index 171c67b..6b5a400 100644
--- a/src/component/Modals/AddTag.js
+++ b/src/component/Modals/AddTag.js
@@ -8,9 +8,7 @@ import {
     DialogTitle,
     CircularProgress
 } from "@material-ui/core";
-import {
-    toggleSnackbar,
-} from "../../actions/index";
+import { toggleSnackbar } from "../../actions/index";
 import PathSelector from "../FileManager/PathSelector";
 import { useDispatch } from "react-redux";
 import API from "../../middleware/Api";
@@ -35,7 +33,7 @@ import {
     RhombusOutline,
     Square,
     SquareOutline,
-    Triangle,
+    Triangle
 } from "mdi-material-ui";
 
 const useStyles = makeStyles(theme => ({
@@ -148,12 +146,12 @@ export default function AddTag(props) {
         [dispatch]
     );
 
-    const submitNewLink = ()=>{
+    const submitNewLink = () => {
         setLoading(true);
 
         API.post("/tag/link", {
             path: input.path,
-            name:input.tagName
+            name: input.tagName
         })
             .then(response => {
                 setLoading(false);
@@ -161,7 +159,7 @@ export default function AddTag(props) {
                 props.onSuccess({
                     type: 1,
                     name: input.tagName,
-                    expression:input.path,
+                    expression: input.path,
                     color: theme.palette.text.secondary,
                     icon: "FolderHeartOutline",
                     id: response.data
@@ -173,7 +171,7 @@ export default function AddTag(props) {
             .then(() => {
                 setLoading(false);
             });
-    }
+    };
 
     const submitNewTag = () => {
         setLoading(true);
@@ -203,19 +201,19 @@ export default function AddTag(props) {
             });
     };
     const submit = () => {
-      if (value === 0) {
-          submitNewTag();
-      }else{
-          submitNewLink();
-      }
+        if (value === 0) {
+            submitNewTag();
+        } else {
+            submitNewLink();
+        }
     };
-    const selectPath = ()=>{
+    const selectPath = () => {
         setInput({
             ...input,
             path: selectedPath === "//" ? "/" : selectedPath
         });
         setPathSelectDialog(false);
-    }
+    };
 
     const classes = useStyles();
 
@@ -232,13 +230,21 @@ export default function AddTag(props) {
                 aria-labelledby="form-dialog-title"
             >
                 <DialogTitle id="form-dialog-title">选择目录</DialogTitle>
-                <PathSelector presentPath="/" selected={[]} onSelect={setMoveTarget} />
+                <PathSelector
+                    presentPath="/"
+                    selected={[]}
+                    onSelect={setMoveTarget}
+                />
 
                 <DialogActions>
                     <Button onClick={() => setPathSelectDialog(false)}>
                         取消
                     </Button>
-                    <Button onClick={selectPath} color="primary" disabled={selectedPath === ""}>
+                    <Button
+                        onClick={selectPath}
+                        color="primary"
+                        disabled={selectedPath === ""}
+                    >
                         确定
                     </Button>
                 </DialogActions>
@@ -355,7 +361,7 @@ export default function AddTag(props) {
                             className={classes.textField}
                         />
                         <Button
-                            onClick={()=>setPathSelectDialog(true)}
+                            onClick={() => setPathSelectDialog(true)}
                             style={{
                                 marginLeft: theme.spacing(1),
                                 alignSelf: "flex-end"
@@ -379,8 +385,8 @@ export default function AddTag(props) {
                             (value === 0 &&
                                 (input.filename === "" ||
                                     input.tagName === "")) ||
-                            (value === 1 && (input.tagName === "" ||
-                                input.path === ""))
+                            (value === 1 &&
+                                (input.tagName === "" || input.path === ""))
                         }
                     >
                         确定
diff --git a/src/component/Modals/Compress.js b/src/component/Modals/Compress.js
index 2ee02af..d67881a 100644
--- a/src/component/Modals/Compress.js
+++ b/src/component/Modals/Compress.js
@@ -9,10 +9,7 @@ import {
     DialogContentText,
     CircularProgress
 } from "@material-ui/core";
-import {
-    toggleSnackbar,
-    setModalsLoading,
-} from "../../actions/index";
+import { toggleSnackbar, setModalsLoading } from "../../actions/index";
 import PathSelector from "../FileManager/PathSelector";
 import { useDispatch } from "react-redux";
 import API from "../../middleware/Api";
@@ -21,7 +18,7 @@ import TextField from "@material-ui/core/TextField";
 const useStyles = makeStyles(theme => ({
     contentFix: {
         padding: "10px 24px 0px 24px",
-        backgroundColor:theme.palette.background.default,
+        backgroundColor: theme.palette.background.default
     },
     wrapper: {
         margin: theme.spacing(1),
@@ -85,11 +82,11 @@ export default function CompressDialog(props) {
         });
 
         API.post("/file/compress", {
-            src:{
-                dirs:dirs,
-                items:items,
+            src: {
+                dirs: dirs,
+                items: items
             },
-            name:fileName,
+            name: fileName,
             dst: selectedPath === "//" ? "/" : selectedPath
         })
             .then(() => {
@@ -121,7 +118,14 @@ export default function CompressDialog(props) {
             {selectedPath !== "" && (
                 <DialogContent className={classes.contentFix}>
                     <DialogContentText>
-                        <TextField onChange={e=>setFileName(e.target.value)} value={fileName} fullWidth autoFocus id="standard-basic" label="压缩文件名" />
+                        <TextField
+                            onChange={e => setFileName(e.target.value)}
+                            value={fileName}
+                            fullWidth
+                            autoFocus
+                            id="standard-basic"
+                            label="压缩文件名"
+                        />
                     </DialogContentText>
                 </DialogContent>
             )}
@@ -131,7 +135,11 @@ export default function CompressDialog(props) {
                     <Button
                         onClick={submitMove}
                         color="primary"
-                        disabled={selectedPath === "" || fileName ==="" || props.modalsLoading}
+                        disabled={
+                            selectedPath === "" ||
+                            fileName === "" ||
+                            props.modalsLoading
+                        }
                     >
                         确定
                         {props.modalsLoading && (
diff --git a/src/component/Modals/Copy.js b/src/component/Modals/Copy.js
index 91bb987..d1202b6 100644
--- a/src/component/Modals/Copy.js
+++ b/src/component/Modals/Copy.js
@@ -12,7 +12,7 @@ import {
 import {
     toggleSnackbar,
     setModalsLoading,
-    refreshFileList,
+    refreshFileList
 } from "../../actions/index";
 import PathSelector from "../FileManager/PathSelector";
 import { useDispatch } from "react-redux";
diff --git a/src/component/Modals/CreateShare.js b/src/component/Modals/CreateShare.js
index 454b7f9..f0b7158 100644
--- a/src/component/Modals/CreateShare.js
+++ b/src/component/Modals/CreateShare.js
@@ -120,12 +120,12 @@ export default function CreatShare(props) {
         password: "",
         downloads: 1,
         expires: 24 * 3600,
-        showPassword: false,
+        showPassword: false
     });
     const [shareOption, setShareOption] = React.useState({
         password: false,
         expire: false,
-        preview:true,
+        preview: true
     });
 
     const handleChange = prop => event => {
@@ -180,10 +180,9 @@ export default function CreatShare(props) {
 
     const onClose = () => {
         props.onClose();
-        setTimeout(()=>{
+        setTimeout(() => {
             setShareURL("");
-        },500)
-
+        }, 500);
     };
 
     const submitShare = e => {
@@ -195,7 +194,7 @@ export default function CreatShare(props) {
             password: values.password,
             downloads: shareOption.expire ? values.downloads : -1,
             expire: values.expires,
-            preview:shareOption.preview,
+            preview: shareOption.preview
         };
 
         API.post("/share", submitFormBody)
@@ -205,11 +204,11 @@ export default function CreatShare(props) {
                     password: "",
                     downloads: 1,
                     expires: 24 * 3600,
-                    showPassword: false,
+                    showPassword: false
                 });
                 setShareOption({
                     password: false,
-                    expire: false,
+                    expire: false
                 });
                 props.setModalsLoading(false);
             })
@@ -412,7 +411,9 @@ export default function CreatShare(props) {
                                 </ListItem>
                             </ExpansionPanelSummary>
                             <ExpansionPanelDetails>
-                                <Typography>是否允许在分享页面预览文件内容</Typography>
+                                <Typography>
+                                    是否允许在分享页面预览文件内容
+                                </Typography>
                             </ExpansionPanelDetails>
                         </ExpansionPanel>
                     </List>
diff --git a/src/component/Modals/CreateWebDAVAccount.js b/src/component/Modals/CreateWebDAVAccount.js
index d0239ce..d71dacd 100644
--- a/src/component/Modals/CreateWebDAVAccount.js
+++ b/src/component/Modals/CreateWebDAVAccount.js
@@ -1,4 +1,4 @@
-import React, {useState} from "react";
+import React, { useState } from "react";
 import { makeStyles } from "@material-ui/core";
 import { Dialog } from "@material-ui/core";
 import DialogTitle from "@material-ui/core/DialogTitle";
@@ -15,7 +15,7 @@ const useStyles = makeStyles(theme => ({
     formIcon: {
         marginTop: 21,
         marginRight: 19,
-        color:theme.palette.text.secondary,
+        color: theme.palette.text.secondary
     },
     input: {
         width: 250
@@ -54,17 +54,17 @@ export default function CreateWebDAVAccount(props) {
     const handleInputChange = name => e => {
         setValue({
             ...value,
-            [name]: e.target.value,
+            [name]: e.target.value
         });
     };
 
-    const selectPath = ()=>{
+    const selectPath = () => {
         setValue({
             ...value,
             path: selectedPath === "//" ? "/" : selectedPath
         });
         setPathSelectDialog(false);
-    }
+    };
 
     return (
         <Dialog
@@ -78,13 +78,21 @@ export default function CreateWebDAVAccount(props) {
                 aria-labelledby="form-dialog-title"
             >
                 <DialogTitle id="form-dialog-title">选择目录</DialogTitle>
-                <PathSelector presentPath="/" selected={[]} onSelect={setMoveTarget} />
+                <PathSelector
+                    presentPath="/"
+                    selected={[]}
+                    onSelect={setMoveTarget}
+                />
 
                 <DialogActions>
                     <Button onClick={() => setPathSelectDialog(false)}>
                         取消
                     </Button>
-                    <Button onClick={selectPath} color="primary" disabled={selectedPath === ""}>
+                    <Button
+                        onClick={selectPath}
+                        color="primary"
+                        disabled={selectedPath === ""}
+                    >
                         确定
                     </Button>
                 </DialogActions>
@@ -115,7 +123,11 @@ export default function CreateWebDAVAccount(props) {
                                 label="相对根目录"
                             />
                             <br />
-                            <Button className={classes.button} color="primary"  onClick={()=>setPathSelectDialog(true)}>
+                            <Button
+                                className={classes.button}
+                                color="primary"
+                                onClick={() => setPathSelectDialog(true)}
+                            >
                                 选择目录
                             </Button>
                         </div>
@@ -124,7 +136,11 @@ export default function CreateWebDAVAccount(props) {
             </div>
             <DialogActions>
                 <Button onClick={props.onClose}>取消</Button>
-                <Button disabled={value.path === "" || value.name === ""} color="primary" onClick={()=>props.callback(value)}>
+                <Button
+                    disabled={value.path === "" || value.name === ""}
+                    color="primary"
+                    onClick={() => props.callback(value)}
+                >
                     确定
                 </Button>
             </DialogActions>
diff --git a/src/component/Modals/Decompress.js b/src/component/Modals/Decompress.js
index bf780be..35947d5 100644
--- a/src/component/Modals/Decompress.js
+++ b/src/component/Modals/Decompress.js
@@ -9,14 +9,11 @@ import {
     DialogContentText,
     CircularProgress
 } from "@material-ui/core";
-import {
-    toggleSnackbar,
-    setModalsLoading,
-} from "../../actions/index";
+import { toggleSnackbar, setModalsLoading } from "../../actions/index";
 import PathSelector from "../FileManager/PathSelector";
 import { useDispatch } from "react-redux";
 import API from "../../middleware/Api";
-import {filePath} from "../../utils";
+import { filePath } from "../../utils";
 
 const useStyles = makeStyles(theme => ({
     contentFix: {
@@ -68,7 +65,7 @@ export default function DecompressDialog(props) {
         }
         SetModalsLoading(true);
         API.post("/file/decompress", {
-            src:filePath(props.selected[0]),
+            src: filePath(props.selected[0]),
             dst: selectedPath === "//" ? "/" : selectedPath
         })
             .then(() => {
diff --git a/src/component/Modals/Loading.js b/src/component/Modals/Loading.js
index 0a2c027..a434eb2 100644
--- a/src/component/Modals/Loading.js
+++ b/src/component/Modals/Loading.js
@@ -5,7 +5,7 @@ import DialogContent from "@material-ui/core/DialogContent";
 import Dialog from "@material-ui/core/Dialog";
 import DialogContentText from "@material-ui/core/DialogContentText";
 import { blue } from "@material-ui/core/colors";
-import {useSelector} from "react-redux";
+import { useSelector } from "react-redux";
 
 const useStyles = makeStyles({
     avatar: {
@@ -23,24 +23,17 @@ const useStyles = makeStyles({
 
 export default function LoadingDialog() {
     const classes = useStyles();
-    const open = useSelector(
-        state => state.viewUpdate.modals.loading,
-    );
-    const text = useSelector(
-        state => state.viewUpdate.modals.loadingText,
-    );
-
+    const open = useSelector(state => state.viewUpdate.modals.loading);
+    const text = useSelector(state => state.viewUpdate.modals.loadingText);
 
     return (
         <Dialog aria-labelledby="simple-dialog-title" open={open}>
             <DialogContent>
                 <DialogContentText className={classes.loadingContainer}>
                     <CircularProgress color="secondary" />
-                    <div className={classes.loading}>
-                        {text}
-                    </div>
+                    <div className={classes.loading}>{text}</div>
                 </DialogContentText>
             </DialogContent>
         </Dialog>
     );
-}
\ No newline at end of file
+}
diff --git a/src/component/Modals/SelectFile.js b/src/component/Modals/SelectFile.js
index 2216454..1be8709 100644
--- a/src/component/Modals/SelectFile.js
+++ b/src/component/Modals/SelectFile.js
@@ -1,4 +1,4 @@
-import React, {useState, useEffect} from "react";
+import React, { useState, useEffect } from "react";
 import { makeStyles } from "@material-ui/core";
 import {
     Button,
@@ -29,35 +29,37 @@ const useStyles = makeStyles(theme => ({
         marginTop: -12,
         marginLeft: -12
     },
-    content:{
-        padding:0,
+    content: {
+        padding: 0
     }
 }));
 
 export default function SelectFileDialog(props) {
-    const [files,setFiles] = useState(props.files);
+    const [files, setFiles] = useState(props.files);
 
-    useEffect(()=>{
+    useEffect(() => {
         setFiles(props.files);
-    },[props.files]);
+    }, [props.files]);
 
-
-    const handleChange = index => event =>{
+    const handleChange = index => event => {
         const filesCopy = [...files];
         // eslint-disable-next-line
-        filesCopy.map((v,k)=>{
-            if (v.index === index){
-                filesCopy[k] = {...filesCopy[k],selected:event.target.checked ? "true" : "false"};
+        filesCopy.map((v, k) => {
+            if (v.index === index) {
+                filesCopy[k] = {
+                    ...filesCopy[k],
+                    selected: event.target.checked ? "true" : "false"
+                };
             }
         });
         setFiles(filesCopy);
     };
 
-    const submit = () =>{
+    const submit = () => {
         const index = [];
         // eslint-disable-next-line
-        files.map(v=>{
-            if(v.selected === "true"){
+        files.map(v => {
+            if (v.selected === "true") {
                 index.push(parseInt(v.index));
             }
         });
@@ -77,25 +79,30 @@ export default function SelectFileDialog(props) {
                 {files.map((v, k) => {
                     return (
                         <MenuItem key={k}>
-                        <FormGroup row>
-                            <FormControlLabel
-                                control={
-                                    <Checkbox
-                                        onChange={handleChange(v.index)}
-                                        checked={v.selected === "true"}
-                                        value="checkedA"
-                                    />
-                                }
-                                label={v.path}
-                            />
-                        </FormGroup></MenuItem>
+                            <FormGroup row>
+                                <FormControlLabel
+                                    control={
+                                        <Checkbox
+                                            onChange={handleChange(v.index)}
+                                            checked={v.selected === "true"}
+                                            value="checkedA"
+                                        />
+                                    }
+                                    label={v.path}
+                                />
+                            </FormGroup>
+                        </MenuItem>
                     );
                 })}
             </DialogContent>
             <DialogActions>
                 <Button onClick={props.onClose}>取消</Button>
                 <div className={classes.wrapper}>
-                    <Button color="primary" onClick={submit} disabled={props.modalsLoading}>
+                    <Button
+                        color="primary"
+                        onClick={submit}
+                        disabled={props.modalsLoading}
+                    >
                         确定
                         {props.modalsLoading && (
                             <CircularProgress
diff --git a/src/component/Navbar/DarkModeSwitcher.js b/src/component/Navbar/DarkModeSwitcher.js
index 55f0379..b695a17 100644
--- a/src/component/Navbar/DarkModeSwitcher.js
+++ b/src/component/Navbar/DarkModeSwitcher.js
@@ -10,9 +10,9 @@ import classNames from "classnames";
 
 const useStyles = makeStyles(() => ({
     icon: {
-        color: 'rgb(255, 255, 255)',
-        opacity: "0.54",
-    },
+        color: "rgb(255, 255, 255)",
+        opacity: "0.54"
+    }
 }));
 
 const DarkModeSwitcher = ({ position }) => {
@@ -24,8 +24,8 @@ const DarkModeSwitcher = ({ position }) => {
     const isDayLight = (ThemeType && ThemeType === "light") || !ThemeType;
     const isDark = ThemeType && ThemeType === "dark";
     const toggleMode = () => {
-      Auth.SetPreference("theme_mode",isDayLight?"dark":"light");
-      ToggleThemeMode();
+        Auth.SetPreference("theme_mode", isDayLight ? "dark" : "light");
+        ToggleThemeMode();
     };
     const classes = useStyles();
     return (
@@ -35,9 +35,11 @@ const DarkModeSwitcher = ({ position }) => {
         >
             <IconButton
                 className={classNames({
-                    [classes.icon]: "left" === position,
+                    [classes.icon]: "left" === position
                 })}
-                onClick={toggleMode} color="inherit">
+                onClick={toggleMode}
+                color="inherit"
+            >
                 {isDayLight && <NightIcon />}
                 {isDark && <DayIcon />}
             </IconButton>
diff --git a/src/component/Navbar/FileTags.js b/src/component/Navbar/FileTags.js
index 17a0a37..2e501f8 100644
--- a/src/component/Navbar/FileTags.js
+++ b/src/component/Navbar/FileTags.js
@@ -1,4 +1,4 @@
-import React, {useCallback, useState, Suspense} from "react";
+import React, { useCallback, useState, Suspense } from "react";
 import {
     Divider,
     List,
@@ -8,7 +8,7 @@ import {
     makeStyles,
     withStyles
 } from "@material-ui/core";
-import { Clear, KeyboardArrowRight} from "@material-ui/icons";
+import { Clear, KeyboardArrowRight } from "@material-ui/icons";
 import classNames from "classnames";
 import FolderShared from "@material-ui/icons/FolderShared";
 import UploadIcon from "@material-ui/icons/CloudUpload";
@@ -106,12 +106,11 @@ const useStyles = makeStyles(theme => ({
     subMenu: {
         marginLeft: theme.spacing(2)
     },
-    overFlow:{
+    overFlow: {
         whiteSpace: "nowrap",
         overflow: "hidden",
-        textOverflow: "ellipsis",
+        textOverflow: "ellipsis"
     }
-
 }));
 
 const icons = {
@@ -132,7 +131,7 @@ const icons = {
     FolderHeartOutline: FolderHeartOutline
 };
 
-const AddTag = React.lazy(() => import ("../Modals/AddTag" ));
+const AddTag = React.lazy(() => import("../Modals/AddTag"));
 
 export default function FileTag() {
     const classes = useStyles();
@@ -143,9 +142,11 @@ export default function FileTag() {
     const isHomePage = pathHelper.isHomePage(location.pathname);
 
     const [tagOpen, setTagOpen] = useState(true);
-    const [addTagModal,setAddTagModal] = useState(false);
-    const [tagHover,setTagHover] = useState(null);
-    const [tags,setTags] = useState(Auth.GetUser().tags?Auth.GetUser().tags:[]);
+    const [addTagModal, setAddTagModal] = useState(false);
+    const [tagHover, setTagHover] = useState(null);
+    const [tags, setTags] = useState(
+        Auth.GetUser().tags ? Auth.GetUser().tags : []
+    );
 
     const dispatch = useDispatch();
     const SearchMyFile = useCallback(k => dispatch(searchMyFile(k)), [
@@ -159,7 +160,6 @@ export default function FileTag() {
         [dispatch]
     );
 
-
     const getIcon = (icon, color) => {
         if (icons[icon]) {
             const IconComponent = icons[icon];
@@ -179,19 +179,21 @@ export default function FileTag() {
         return <Circle className={[classes.iconFix]} />;
     };
 
-    const submitSuccess = tag =>{
-        const newTags = [...tags,tag];
+    const submitSuccess = tag => {
+        const newTags = [...tags, tag];
         setTags(newTags);
         const user = Auth.GetUser();
         user.tags = newTags;
         Auth.SetUser(user);
     };
 
-    const submitDelete = id =>{
-        API.delete("/tag/"+id)
+    const submitDelete = id => {
+        API.delete("/tag/" + id)
             .then(() => {
-                const newTags = tags.filter((v)=>{return v.id !== id});
-                setTags(newTags)
+                const newTags = tags.filter(v => {
+                    return v.id !== id;
+                });
+                setTags(newTags);
                 const user = Auth.GetUser();
                 user.tags = newTags;
                 Auth.SetUser(user);
@@ -204,131 +206,136 @@ export default function FileTag() {
     return (
         <>
             <Suspense fallback={""}>
-                <AddTag onSuccess={submitSuccess} open={addTagModal} onClose={()=>setAddTagModal(false)}/>
+                <AddTag
+                    onSuccess={submitSuccess}
+                    open={addTagModal}
+                    onClose={() => setAddTagModal(false)}
+                />
             </Suspense>
-        <ExpansionPanel
-            square
-            expanded={tagOpen && isHomePage}
-            onChange={() => isHomePage && setTagOpen(!tagOpen)}
-        >
-            <ExpansionPanelSummary
-                aria-controls="panel1d-content"
-                id="panel1d-header"
+            <ExpansionPanel
+                square
+                expanded={tagOpen && isHomePage}
+                onChange={() => isHomePage && setTagOpen(!tagOpen)}
             >
-                <ListItem
-                    button
-                    key="我的文件"
-                    onClick={() =>
-                        !isHomePage && history.push("/home?path=%2F")
-                    }
+                <ExpansionPanelSummary
+                    aria-controls="panel1d-content"
+                    id="panel1d-header"
                 >
-                    <ListItemIcon>
-                        <KeyboardArrowRight
-                            className={classNames(
-                                {
-                                    [classes.expanded]: tagOpen && isHomePage,
-                                    [classes.iconFix]: true
-                                },
-                                classes.expand
-                            )}
-                        />
-                        {!(tagOpen && isHomePage) && (
-                            <FolderShared className={classes.iconFix} />
-                        )}
-                    </ListItemIcon>
-                    <ListItemText primary="我的文件" />
-                </ListItem>
-                <Divider />
-            </ExpansionPanelSummary>
-
-            <ExpansionPanelDetails>
-                <List onMouseLeave={()=>setTagHover(null)}>
                     <ListItem
                         button
-                        id="pickfiles"
-                        className={classes.hiddenButton}
-                    >
-                        <ListItemIcon>
-                            <UploadIcon />
-                        </ListItemIcon>
-                        <ListItemText />
-                    </ListItem>
-                    <ListItem
-                        button
-                        id="pickfolder"
-                        className={classes.hiddenButton}
-                    >
-                        <ListItemIcon>
-                            <UploadIcon />
-                        </ListItemIcon>
-                        <ListItemText />
-                    </ListItem>
-                    {[
-                        {
-                            key: "视频",
-                            id: "video",
-                            icon: (
-                                <VideoIcon
-                                    className={[
-                                        classes.iconFix,
-                                        classes.iconVideo
-                                    ]}
-                                />
-                            )
-                        },
-                        {
-                            key: "图片",
-                            id: "image",
-                            icon: (
-                                <ImageIcon
-                                    className={[
-                                        classes.iconFix,
-                                        classes.iconImg
-                                    ]}
-                                />
-                            )
-                        },
-                        {
-                            key: "音频",
-                            id: "audio",
-                            icon: (
-                                <MusicIcon
-                                    className={[
-                                        classes.iconFix,
-                                        classes.iconAudio
-                                    ]}
-                                />
-                            )
-                        },
-                        {
-                            key: "文档",
-                            id: "doc",
-                            icon: (
-                                <DocIcon
-                                    className={[
-                                        classes.iconFix,
-                                        classes.iconDoc
-                                    ]}
-                                />
-                            )
+                        key="我的文件"
+                        onClick={() =>
+                            !isHomePage && history.push("/home?path=%2F")
                         }
-                    ].map(v => (
+                    >
+                        <ListItemIcon>
+                            <KeyboardArrowRight
+                                className={classNames(
+                                    {
+                                        [classes.expanded]:
+                                            tagOpen && isHomePage,
+                                        [classes.iconFix]: true
+                                    },
+                                    classes.expand
+                                )}
+                            />
+                            {!(tagOpen && isHomePage) && (
+                                <FolderShared className={classes.iconFix} />
+                            )}
+                        </ListItemIcon>
+                        <ListItemText primary="我的文件" />
+                    </ListItem>
+                    <Divider />
+                </ExpansionPanelSummary>
+
+                <ExpansionPanelDetails>
+                    <List onMouseLeave={() => setTagHover(null)}>
                         <ListItem
                             button
-                            key={v.key}
-                            onClick={() => SearchMyFile(v.id + "/internal")}
+                            id="pickfiles"
+                            className={classes.hiddenButton}
                         >
-                            <ListItemIcon className={classes.subMenu}>
-                                {v.icon}
+                            <ListItemIcon>
+                                <UploadIcon />
                             </ListItemIcon>
-                            <ListItemText primary={v.key} />
+                            <ListItemText />
                         </ListItem>
-                    ))}
-                    {tags.map(v => (
+                        <ListItem
+                            button
+                            id="pickfolder"
+                            className={classes.hiddenButton}
+                        >
+                            <ListItemIcon>
+                                <UploadIcon />
+                            </ListItemIcon>
+                            <ListItemText />
+                        </ListItem>
+                        {[
+                            {
+                                key: "视频",
+                                id: "video",
+                                icon: (
+                                    <VideoIcon
+                                        className={[
+                                            classes.iconFix,
+                                            classes.iconVideo
+                                        ]}
+                                    />
+                                )
+                            },
+                            {
+                                key: "图片",
+                                id: "image",
+                                icon: (
+                                    <ImageIcon
+                                        className={[
+                                            classes.iconFix,
+                                            classes.iconImg
+                                        ]}
+                                    />
+                                )
+                            },
+                            {
+                                key: "音频",
+                                id: "audio",
+                                icon: (
+                                    <MusicIcon
+                                        className={[
+                                            classes.iconFix,
+                                            classes.iconAudio
+                                        ]}
+                                    />
+                                )
+                            },
+                            {
+                                key: "文档",
+                                id: "doc",
+                                icon: (
+                                    <DocIcon
+                                        className={[
+                                            classes.iconFix,
+                                            classes.iconDoc
+                                        ]}
+                                    />
+                                )
+                            }
+                        ].map(v => (
+                            <ListItem
+                                button
+                                key={v.key}
+                                onClick={() => SearchMyFile(v.id + "/internal")}
+                            >
+                                <ListItemIcon className={classes.subMenu}>
+                                    {v.icon}
+                                </ListItemIcon>
+                                <ListItemText primary={v.key} />
+                            </ListItem>
+                        ))}
+                        {tags.map(v => (
                             <ListItem
                                 button
                                 key={v.id}
-                                onMouseEnter={()=>setTagHover(v.id)}
+                                onMouseEnter={() => setTagHover(v.id)}
                                 onClick={() => {
                                     if (v.type === 0) {
                                         SearchMyFile("tag/" + v.id);
@@ -345,26 +352,37 @@ export default function FileTag() {
                                         v.type === 0 ? v.color : null
                                     )}
                                 </ListItemIcon>
-                                <ListItemText className={classes.overFlow} primary={v.name} />
+                                <ListItemText
+                                    className={classes.overFlow}
+                                    primary={v.name}
+                                />
 
-                                {tagHover === v.id && <ListItemSecondaryAction onClick={()=>submitDelete(v.id)}>
-                                        <IconButton size={"small"} edge="end" aria-label="delete">
+                                {tagHover === v.id && (
+                                    <ListItemSecondaryAction
+                                        onClick={() => submitDelete(v.id)}
+                                    >
+                                        <IconButton
+                                            size={"small"}
+                                            edge="end"
+                                            aria-label="delete"
+                                        >
                                             <Clear />
                                         </IconButton>
-                                    </ListItemSecondaryAction>}
+                                    </ListItemSecondaryAction>
+                                )}
                             </ListItem>
                         ))}
 
-                    <ListItem button onClick={()=>setAddTagModal(true)}>
-                        <ListItemIcon className={classes.subMenu}>
-                            <TagPlus className={classes.iconFix} />
-                        </ListItemIcon>
-                        <ListItemText primary={"添加标签..."} />
-                    </ListItem>
-                </List>{" "}
-                <Divider />
-            </ExpansionPanelDetails>
-        </ExpansionPanel>
-            </>
+                        <ListItem button onClick={() => setAddTagModal(true)}>
+                            <ListItemIcon className={classes.subMenu}>
+                                <TagPlus className={classes.iconFix} />
+                            </ListItemIcon>
+                            <ListItemText primary={"添加标签..."} />
+                        </ListItem>
+                    </List>{" "}
+                    <Divider />
+                </ExpansionPanelDetails>
+            </ExpansionPanel>
+        </>
     );
 }
diff --git a/src/component/Navbar/Navbar.js b/src/component/Navbar/Navbar.js
index 1dcb970..f1ee1f7 100644
--- a/src/component/Navbar/Navbar.js
+++ b/src/component/Navbar/Navbar.js
@@ -68,7 +68,7 @@ import FileTag from "./FileTags";
 import { Assignment, Devices, Settings } from "@material-ui/icons";
 import Divider from "@material-ui/core/Divider";
 
-vhCheck()
+vhCheck();
 const drawerWidth = 240;
 const drawerWidthMobile = 270;
 
@@ -365,15 +365,18 @@ class NavbarCompoment extends Component {
                 if (isShare) {
                     this.props.history.push(
                         this.props.selected[0].key +
-                        "/doc?name=" +
-                        encodeURIComponent(this.props.selected[0].name) +
-                        "&share_path=" +
-                        encodeURIComponent(previewPath)
+                            "/doc?name=" +
+                            encodeURIComponent(this.props.selected[0].name) +
+                            "&share_path=" +
+                            encodeURIComponent(previewPath)
                     );
                     return;
                 }
                 this.props.history.push(
-                    "/doc?p=" + encodeURIComponent(previewPath) + "&id=" + this.props.selected[0].id
+                    "/doc?p=" +
+                        encodeURIComponent(previewPath) +
+                        "&id=" +
+                        this.props.selected[0].id
                 );
                 return;
             case "audio":
@@ -383,60 +386,72 @@ class NavbarCompoment extends Component {
                 if (isShare) {
                     this.props.history.push(
                         this.props.selected[0].key +
-                        "/video?name=" +
-                        encodeURIComponent(this.props.selected[0].name) +
-                        "&share_path=" +
-                        encodeURIComponent(previewPath)
+                            "/video?name=" +
+                            encodeURIComponent(this.props.selected[0].name) +
+                            "&share_path=" +
+                            encodeURIComponent(previewPath)
                     );
                     return;
                 }
                 this.props.history.push(
-                    "/video?p=" +encodeURIComponent(previewPath) + "&id=" + this.props.selected[0].id
+                    "/video?p=" +
+                        encodeURIComponent(previewPath) +
+                        "&id=" +
+                        this.props.selected[0].id
                 );
                 return;
             case "edit":
                 if (isShare) {
                     this.props.history.push(
                         this.props.selected[0].key +
-                        "/text?name=" +
-                        encodeURIComponent(this.props.selected[0].name) +
-                        "&share_path=" +
-                        encodeURIComponent(previewPath)
+                            "/text?name=" +
+                            encodeURIComponent(this.props.selected[0].name) +
+                            "&share_path=" +
+                            encodeURIComponent(previewPath)
                     );
                     return;
                 }
                 this.props.history.push(
-                    "/text?p=" + encodeURIComponent(previewPath) + "&id=" + this.props.selected[0].id
+                    "/text?p=" +
+                        encodeURIComponent(previewPath) +
+                        "&id=" +
+                        this.props.selected[0].id
                 );
                 return;
             case "pdf":
                 if (isShare) {
                     this.props.history.push(
                         this.props.selected[0].key +
-                        "/pdf?name=" +
-                        encodeURIComponent(this.props.selected[0].name) +
-                        "&share_path=" +
-                        encodeURIComponent(previewPath)
+                            "/pdf?name=" +
+                            encodeURIComponent(this.props.selected[0].name) +
+                            "&share_path=" +
+                            encodeURIComponent(previewPath)
                     );
                     return;
                 }
                 this.props.history.push(
-                    "/pdf?p=" + encodeURIComponent(previewPath) + "&id=" + this.props.selected[0].id
+                    "/pdf?p=" +
+                        encodeURIComponent(previewPath) +
+                        "&id=" +
+                        this.props.selected[0].id
                 );
                 return;
             case "code":
                 if (isShare) {
                     this.props.history.push(
                         this.props.selected[0].key +
-                        "/code?name=" +
-                        encodeURIComponent(this.props.selected[0].name) +
-                        "&share_path=" +
-                        encodeURIComponent(previewPath)
+                            "/code?name=" +
+                            encodeURIComponent(this.props.selected[0].name) +
+                            "&share_path=" +
+                            encodeURIComponent(previewPath)
                     );
                     return;
                 }
                 this.props.history.push(
-                    "/code?p=" + encodeURIComponent(previewPath) + "&id=" + this.props.selected[0].id
+                    "/code?p=" +
+                        encodeURIComponent(previewPath) +
+                        "&id=" +
+                        this.props.selected[0].id
                 );
                 return;
             default:
@@ -568,7 +583,7 @@ class NavbarCompoment extends Component {
 
                         {pathHelper.isMobile() && (
                             <>
-                                <Divider/>
+                                <Divider />
                                 <List>
                                     <ListItem
                                         button
@@ -591,7 +606,9 @@ class NavbarCompoment extends Component {
                                         onClick={this.signOut}
                                     >
                                         <ListItemIcon>
-                                            <LogoutVariant className={classes.iconFix} />
+                                            <LogoutVariant
+                                                className={classes.iconFix}
+                                            />
                                         </ListItemIcon>
                                         <ListItemText primary="退出登录" />
                                     </ListItem>
@@ -736,8 +753,13 @@ class NavbarCompoment extends Component {
                             !(
                                 !this.props.isMultiple && this.props.withFile
                             ) && (
-                                <Typography variant="h6" color="inherit" noWrap
-                                            onClick={() => {this.props.history.push("/")}}
+                                <Typography
+                                    variant="h6"
+                                    color="inherit"
+                                    noWrap
+                                    onClick={() => {
+                                        this.props.history.push("/");
+                                    }}
                                 >
                                     {this.props.subTitle
                                         ? this.props.subTitle
@@ -799,8 +821,7 @@ class NavbarCompoment extends Component {
                             (isHomePage || isSharePage) && (
                                 <div className={classes.sectionForFile}>
                                     {!this.props.isMultiple &&
-                                        this.props.withFile
-                                        &&
+                                        this.props.withFile &&
                                         isPreviewable(
                                             this.props.selected[0].name
                                         ) && (
diff --git a/src/component/Navbar/SearchBar.js b/src/component/Navbar/SearchBar.js
index c201b59..3c2379a 100644
--- a/src/component/Navbar/SearchBar.js
+++ b/src/component/Navbar/SearchBar.js
@@ -18,12 +18,12 @@ import {
     ListItemText,
     Typography
 } from "@material-ui/core";
-import {withRouter} from "react-router";
+import { withRouter } from "react-router";
 import pathHelper from "../../utils/page";
-import {HotKeys,configure} from "react-hotkeys";
+import { HotKeys, configure } from "react-hotkeys";
 
 configure({
-    ignoreTags:[],
+    ignoreTags: []
 });
 
 const mapStateToProps = () => {
@@ -91,11 +91,10 @@ const styles = theme => ({
 });
 
 const keyMap = {
-    SEARCH: "enter",
+    SEARCH: "enter"
 };
 
 class SearchBarCompoment extends Component {
-
     constructor(props) {
         super(props);
         this.state = {
@@ -104,15 +103,15 @@ class SearchBarCompoment extends Component {
         };
     }
 
-    handlers={
-        SEARCH:(e)=>{
-            if(pathHelper.isHomePage(this.props.location.pathname)){
+    handlers = {
+        SEARCH: e => {
+            if (pathHelper.isHomePage(this.props.location.pathname)) {
                 this.searchMyFile();
-            }else{
+            } else {
                 this.searchShare();
             }
             e.target.blur();
-        },
+        }
     };
 
     handleChange = event => {
@@ -131,14 +130,15 @@ class SearchBarCompoment extends Component {
     };
 
     searchMyFile = () => {
-        this.props.searchMyFile("keywords/"+this.input);
+        this.props.searchMyFile("keywords/" + this.input);
     };
 
     searchShare = () => {
-        this.props.history.push("/search?keywords="+encodeURIComponent(this.input));
+        this.props.history.push(
+            "/search?keywords=" + encodeURIComponent(this.input)
+        );
     };
 
-
     render() {
         const { classes } = this.props;
         const { anchorEl } = this.state;
@@ -146,22 +146,22 @@ class SearchBarCompoment extends Component {
         const isHomePage = pathHelper.isHomePage(this.props.location.pathname);
 
         return (
-                <div className={classes.search}>
+            <div className={classes.search}>
                 <div className={classes.searchIcon}>
                     <SearchIcon />
                 </div>
-                    <HotKeys keyMap={keyMap} handlers={this.handlers}>
-                        <InputBase
-                            placeholder="搜索..."
-                            classes={{
-                                root: classes.inputRoot,
-                                input: classes.inputInput
-                            }}
-                            onChange={this.handleChange}
-                            onBlur={this.cancelSuggest}
-                            value={this.state.input}
-                        />
-                    </HotKeys>
+                <HotKeys keyMap={keyMap} handlers={this.handlers}>
+                    <InputBase
+                        placeholder="搜索..."
+                        classes={{
+                            root: classes.inputRoot,
+                            input: classes.inputInput
+                        }}
+                        onChange={this.handleChange}
+                        onBlur={this.cancelSuggest}
+                        value={this.state.input}
+                    />
+                </HotKeys>
                 <Popper
                     id={id}
                     open={this.state.input !== ""}
diff --git a/src/component/Navbar/SideDrawer.js b/src/component/Navbar/SideDrawer.js
index c232d82..a2fbb2a 100644
--- a/src/component/Navbar/SideDrawer.js
+++ b/src/component/Navbar/SideDrawer.js
@@ -9,7 +9,7 @@ import {
     ListItemIcon,
     ListItemText,
     List,
-    Hidden,
+    Hidden
 } from "@material-ui/core";
 const drawerWidth = 240;
 const styles = theme => ({
diff --git a/src/component/Navbar/UserAvatarPopover.js b/src/component/Navbar/UserAvatarPopover.js
index 1afb773..47e0068 100644
--- a/src/component/Navbar/UserAvatarPopover.js
+++ b/src/component/Navbar/UserAvatarPopover.js
@@ -8,7 +8,11 @@ import {
     AccountArrowRight,
     AccountPlus
 } from "mdi-material-ui";
-import {setSessionStatus, setUserPopover, toggleSnackbar} from "../../actions";
+import {
+    setSessionStatus,
+    setUserPopover,
+    toggleSnackbar
+} from "../../actions";
 import { withRouter } from "react-router-dom";
 import Auth from "../../middleware/Auth";
 import {
@@ -38,9 +42,9 @@ const mapDispatchToProps = dispatch => {
         toggleSnackbar: (vertical, horizontal, msg, color) => {
             dispatch(toggleSnackbar(vertical, horizontal, msg, color));
         },
-        setSessionStatus:status=>{
+        setSessionStatus: status => {
             dispatch(setSessionStatus(status));
-        },
+        }
     };
 };
 const styles = () => ({
@@ -106,7 +110,9 @@ class UserAvatarPopoverCompoment extends Component {
     render() {
         const { classes } = this.props;
         const user = Auth.GetUser();
-        const isAdminPage = pathHelper.isAdminPage(this.props.location.pathname);
+        const isAdminPage = pathHelper.isAdminPage(
+            this.props.location.pathname
+        );
 
         return (
             <Popover
@@ -125,17 +131,17 @@ class UserAvatarPopoverCompoment extends Component {
                 {!Auth.Check() && (
                     <div className={classes.visitorMenu}>
                         <Divider />
-                        <MenuItem onClick={() =>
-                            this.props.history.push("/login")
-                        }>
+                        <MenuItem
+                            onClick={() => this.props.history.push("/login")}
+                        >
                             <ListItemIcon>
                                 <AccountArrowRight />
                             </ListItemIcon>
                             登录
                         </MenuItem>
-                        <MenuItem onClick={() =>
-                            this.props.history.push("/signup")
-                        }>
+                        <MenuItem
+                            onClick={() => this.props.history.push("/signup")}
+                        >
                             <ListItemIcon>
                                 <AccountPlus />
                             </ListItemIcon>
@@ -149,16 +155,20 @@ class UserAvatarPopoverCompoment extends Component {
                             <div className={classes.largeAvatarContainer}>
                                 <Avatar
                                     className={classes.largeAvatar}
-                                    src={"/api/v3/user/avatar/"+user.id + "/l"}
+                                    src={
+                                        "/api/v3/user/avatar/" + user.id + "/l"
+                                    }
                                 />
                             </div>
                             <div className={classes.info}>
                                 <Typography noWrap>{user.nickname}</Typography>
-                                <Typography color="textSecondary"
-                                            style={{
-                                                fontSize: "0.875rem",
-                                            }}
-                                            noWrap>
+                                <Typography
+                                    color="textSecondary"
+                                    style={{
+                                        fontSize: "0.875rem"
+                                    }}
+                                    noWrap
+                                >
                                     {user.user_name}
                                 </Typography>
                                 <Chip
@@ -174,33 +184,33 @@ class UserAvatarPopoverCompoment extends Component {
                         </div>
                         <div>
                             <Divider />
-                            {!isAdminPage && <MenuItem
-                                style={{
-                                    padding:" 11px 16px 11px 16px",
-                                }}
-                                onClick={() =>{
-                                    this.handleClose();
-                                    this.props.history.push("/profile/"+user.id);
-                                }
-
-                                }
-                            >
-                                <ListItemIcon>
-                                    <HomeAccount />
-                                </ListItemIcon>
-                                个人主页
-                            </MenuItem>}
+                            {!isAdminPage && (
+                                <MenuItem
+                                    style={{
+                                        padding: " 11px 16px 11px 16px"
+                                    }}
+                                    onClick={() => {
+                                        this.handleClose();
+                                        this.props.history.push(
+                                            "/profile/" + user.id
+                                        );
+                                    }}
+                                >
+                                    <ListItemIcon>
+                                        <HomeAccount />
+                                    </ListItemIcon>
+                                    个人主页
+                                </MenuItem>
+                            )}
                             {user.group.id === 1 && (
                                 <MenuItem
                                     style={{
-                                        padding:" 11px 16px 11px 16px",
+                                        padding: " 11px 16px 11px 16px"
                                     }}
-                                    onClick={() =>{
+                                    onClick={() => {
                                         this.handleClose();
                                         this.props.history.push("/admin/home");
-                                    }
-
-                                    }
+                                    }}
                                 >
                                     <ListItemIcon>
                                         <DesktopMacDashboard />
@@ -209,9 +219,12 @@ class UserAvatarPopoverCompoment extends Component {
                                 </MenuItem>
                             )}
 
-                            <MenuItem  style={{
-                                padding:" 11px 16px 11px 16px",
-                            }} onClick={this.sigOut}>
+                            <MenuItem
+                                style={{
+                                    padding: " 11px 16px 11px 16px"
+                                }}
+                                onClick={this.sigOut}
+                            >
                                 <ListItemIcon>
                                     <LogoutVariant />
                                 </ListItemIcon>
diff --git a/src/component/Navbar/UserInfo.js b/src/component/Navbar/UserInfo.js
index 4ef8376..e32afaf 100644
--- a/src/component/Navbar/UserInfo.js
+++ b/src/component/Navbar/UserInfo.js
@@ -4,12 +4,12 @@ import { connect } from "react-redux";
 import { setUserPopover } from "../../actions";
 import { withStyles, Typography } from "@material-ui/core";
 import Auth from "../../middleware/Auth";
-import DarkModeSwitcher from "./DarkModeSwitcher"
+import DarkModeSwitcher from "./DarkModeSwitcher";
 import Avatar from "@material-ui/core/Avatar";
 
 const mapStateToProps = state => {
     return {
-        isLogin:state.viewUpdate.isLogin,
+        isLogin: state.viewUpdate.isLogin
     };
 };
 
@@ -76,12 +76,12 @@ const styles = theme => ({
     flexAvatar: {
         display: "flex",
         justifyContent: "space-between",
-        alignItems: "end",
+        alignItems: "end"
     },
     groupName: {
         marginLeft: "10px",
         color: "#ffffff",
-        opacity: "0.54",
+        opacity: "0.54"
     },
     storageCircle: {
         width: "200px"
@@ -101,13 +101,11 @@ class UserInfoCompoment extends Component {
         return (
             <div className={classes.userNav}>
                 <div className={classes.flexAvatar}>
-                    { /* eslint-disable-next-line */}
+                    {/* eslint-disable-next-line */}
                     <a onClick={this.showUserInfo} className={classes.avatar}>
                         {isLogin && (
                             <Avatar
-                                src={
-                                    "/api/v3/user/avatar/"+user.id + "/l"
-                                }
+                                src={"/api/v3/user/avatar/" + user.id + "/l"}
                                 className={classes.avatarImg}
                             />
                         )}
@@ -118,7 +116,7 @@ class UserInfoCompoment extends Component {
                             />
                         )}
                     </a>
-                    <DarkModeSwitcher position="left"/>
+                    <DarkModeSwitcher position="left" />
                 </div>
                 <div className={classes.storageCircle}>
                     <Typography
@@ -126,7 +124,7 @@ class UserInfoCompoment extends Component {
                         component="h2"
                         noWrap
                     >
-                        {isLogin?user.nickname:"未登录"}
+                        {isLogin ? user.nickname : "未登录"}
                     </Typography>
                     <Typography
                         className={classes.groupName}
@@ -134,7 +132,7 @@ class UserInfoCompoment extends Component {
                         color="textSecondary"
                         noWrap
                     >
-                        {isLogin?user.group.name:"游客"}
+                        {isLogin ? user.group.name : "游客"}
                     </Typography>
                 </div>
             </div>
diff --git a/src/component/Placeholder/Captcha.js b/src/component/Placeholder/Captcha.js
index 1b552c4..d266687 100644
--- a/src/component/Placeholder/Captcha.js
+++ b/src/component/Placeholder/Captcha.js
@@ -1,20 +1,20 @@
-import React from "react"
-import ContentLoader from "react-content-loader"
+import React from "react";
+import ContentLoader from "react-content-loader";
 
 const MyLoader = () => (
-    <ContentLoader 
-      height={80}
-      width={200}
-      speed={2}
-      primaryColor="#f3f3f3"
-      secondaryColor="#e4e4e4"
+    <ContentLoader
+        height={80}
+        width={200}
+        speed={2}
+        primaryColor="#f3f3f3"
+        secondaryColor="#e4e4e4"
     >
-      <rect x="4" y="4" rx="7" ry="7" width="392" height="116" />
+        <rect x="4" y="4" rx="7" ry="7" width="392" height="116" />
     </ContentLoader>
-)
+);
 
-function captchaPlacholder (){
-    return (<MyLoader />)
+function captchaPlacholder() {
+    return <MyLoader />;
 }
 
-export default captchaPlacholder
\ No newline at end of file
+export default captchaPlacholder;
diff --git a/src/component/Placeholder/ErrorBoundary.js b/src/component/Placeholder/ErrorBoundary.js
index b7b9cb1..82a4072 100644
--- a/src/component/Placeholder/ErrorBoundary.js
+++ b/src/component/Placeholder/ErrorBoundary.js
@@ -1,4 +1,4 @@
-import React  from "react";
+import React from "react";
 
 class ErrorBoundary extends React.Component {
     constructor(props) {
@@ -25,4 +25,4 @@ class ErrorBoundary extends React.Component {
     }
 }
 
-export default ErrorBoundary
\ No newline at end of file
+export default ErrorBoundary;
diff --git a/src/component/Placeholder/PageLoading.js b/src/component/Placeholder/PageLoading.js
index 8c0e59c..b17c34f 100644
--- a/src/component/Placeholder/PageLoading.js
+++ b/src/component/Placeholder/PageLoading.js
@@ -1,5 +1,5 @@
 import React from "react";
-import  { Facebook } from "react-content-loader";
+import { Facebook } from "react-content-loader";
 import { makeStyles } from "@material-ui/core/styles";
 
 const useStyles = makeStyles(theme => ({
@@ -14,9 +14,7 @@ const useStyles = makeStyles(theme => ({
 }));
 
 const MyLoader = props => {
-    return (
-        <Facebook className={props.className} />
-    );
+    return <Facebook className={props.className} />;
 };
 
 function PageLoading() {
diff --git a/src/component/Placeholder/TextLoading.js b/src/component/Placeholder/TextLoading.js
index 0ae4679..7b5fbdf 100644
--- a/src/component/Placeholder/TextLoading.js
+++ b/src/component/Placeholder/TextLoading.js
@@ -1,33 +1,28 @@
-import React from "react"
-import  { Code  } from "react-content-loader"
-import {makeStyles} from "@material-ui/core/styles";
+import React from "react";
+import { Code } from "react-content-loader";
+import { makeStyles } from "@material-ui/core/styles";
 
 const useStyles = makeStyles(theme => ({
-    loader:{
+    loader: {
         width: "70%",
         padding: 40,
         [theme.breakpoints.down("md")]: {
             width: "100%",
-            padding: 10,
-        },
-    },
+            padding: 10
+        }
+    }
 }));
 
+const MyLoader = props => <Code className={props.className} />;
 
-const MyLoader = (props) => (
-    <Code   className={props.className}/>
-)
-
-function TextLoading (){
-
+function TextLoading() {
     const classes = useStyles();
 
     return (
         <div>
-            <MyLoader className={classes.loader}/>
+            <MyLoader className={classes.loader} />
         </div>
-
-    )
+    );
 }
 
-export default TextLoading
\ No newline at end of file
+export default TextLoading;
diff --git a/src/component/Setting/Authn.js b/src/component/Setting/Authn.js
index 7dbe960..8ac05a5 100644
--- a/src/component/Setting/Authn.js
+++ b/src/component/Setting/Authn.js
@@ -1,6 +1,7 @@
 import React, { useState, useCallback } from "react";
 import {
-    Button, Dialog,
+    Button,
+    Dialog,
     DialogActions,
     DialogContent,
     DialogTitle,
@@ -17,9 +18,9 @@ import {
 import { useDispatch } from "react-redux";
 import { toggleSnackbar } from "../../actions";
 import RightIcon from "@material-ui/icons/KeyboardArrowRight";
-import {Add, Fingerprint, HighlightOff} from "@material-ui/icons";
+import { Add, Fingerprint, HighlightOff } from "@material-ui/icons";
 import API from "../../middleware/Api";
-import {bufferDecode, bufferEncode} from "../../utils";
+import { bufferDecode, bufferEncode } from "../../utils";
 
 const useStyles = makeStyles(theme => ({
     sectionTitle: {
@@ -46,8 +47,8 @@ const useStyles = makeStyles(theme => ({
 }));
 
 export default function Authn(props) {
-    const [selected,setSelected] = useState("");
-    const [confirm,setConfirm] = useState(false);
+    const [selected, setSelected] = useState("");
+    const [confirm, setConfirm] = useState(false);
     const dispatch = useDispatch();
     const ToggleSnackbar = useCallback(
         (vertical, horizontal, msg, color) =>
@@ -57,41 +58,27 @@ export default function Authn(props) {
 
     const deleteCredential = id => {
         API.patch("/user/setting/authn", {
-            id:id,
+            id: id
         })
             .then(() => {
-                ToggleSnackbar(
-                    "top",
-                    "right",
-                    "凭证已删除",
-                    "success"
-                );
-                props.remove(id)
+                ToggleSnackbar("top", "right", "凭证已删除", "success");
+                props.remove(id);
             })
             .catch(error => {
-                ToggleSnackbar(
-                    "top",
-                    "right",
-                    error.message,
-                    "error"
-                );
-            }).then(()=>{
-            setConfirm(false);
-        });
+                ToggleSnackbar("top", "right", error.message, "error");
+            })
+            .then(() => {
+                setConfirm(false);
+            });
     };
 
     const classes = useStyles();
 
-    const  addCredential = () =>{
-        if (!navigator.credentials){
-                ToggleSnackbar(
-                    "top",
-                    "right",
-                    "当前浏览器或环境不支持",
-                    "warning"
-                );
+    const addCredential = () => {
+        if (!navigator.credentials) {
+            ToggleSnackbar("top", "right", "当前浏览器或环境不支持", "warning");
 
-            return
+            return;
         }
         API.put("/user/authn", {})
             .then(response => {
@@ -112,7 +99,7 @@ export default function Authn(props) {
                     ) {
                         credentialCreationOptions.publicKey.excludeCredentials[
                             i
-                            ].id = bufferDecode(
+                        ].id = bufferDecode(
                             credentialCreationOptions.publicKey
                                 .excludeCredentials[i].id
                         );
@@ -142,41 +129,28 @@ export default function Authn(props) {
             })
             .then(response => {
                 props.add(response.data);
-                ToggleSnackbar(
-                    "top",
-                    "right",
-                    "验证器已添加",
-                    "success"
-                );
+                ToggleSnackbar("top", "right", "验证器已添加", "success");
                 return;
             })
             .catch(error => {
                 console.log(error);
-                ToggleSnackbar(
-                    "top",
-                    "right",
-                    error.message,
-                    "error"
-                );
+                ToggleSnackbar("top", "right", error.message, "error");
             });
     };
 
     return (
         <div>
-
-            <Dialog
-                open={confirm}
-                onClose={()=>setConfirm(false)}
-            >
+            <Dialog open={confirm} onClose={() => setConfirm(false)}>
                 <DialogTitle>删除凭证</DialogTitle>
-                <DialogContent>
-                    确定要吊销这个凭证吗？
-                </DialogContent>
+                <DialogContent>确定要吊销这个凭证吗？</DialogContent>
                 <DialogActions>
-                    <Button onClick={()=>setConfirm(false)} color="default">
+                    <Button onClick={() => setConfirm(false)} color="default">
                         取消
                     </Button>
-                    <Button onClick={()=>deleteCredential(selected)} color="primary">
+                    <Button
+                        onClick={() => deleteCredential(selected)}
+                        color="primary"
+                    >
                         确定
                     </Button>
                 </DialogActions>
@@ -187,32 +161,36 @@ export default function Authn(props) {
             </Typography>
             <Paper>
                 <List className={classes.desenList}>
-                    {props.list.map((v) => (
+                    {props.list.map(v => (
                         <>
-                            <ListItem button
-                                      style={{
-                                          paddingRight:60,
-                                      }}
-                                      onClick={()=>{
-                                setConfirm(true);
-                                setSelected(v.id);
-                            }}>
+                            <ListItem
+                                button
+                                style={{
+                                    paddingRight: 60
+                                }}
+                                onClick={() => {
+                                    setConfirm(true);
+                                    setSelected(v.id);
+                                }}
+                            >
                                 <ListItemIcon className={classes.iconFix}>
                                     <Fingerprint />
                                 </ListItemIcon>
                                 <ListItemText primary={v.fingerprint} />
 
                                 <ListItemSecondaryAction
-                                    onClick={()=>deleteCredential(v.id)}
+                                    onClick={() => deleteCredential(v.id)}
                                     className={classes.flexContainer}
                                 >
-                                    <HighlightOff className={classes.rightIcon} />
+                                    <HighlightOff
+                                        className={classes.rightIcon}
+                                    />
                                 </ListItemSecondaryAction>
                             </ListItem>
                             <Divider />
                         </>
                     ))}
-                    <ListItem button onClick={()=>addCredential()}>
+                    <ListItem button onClick={() => addCredential()}>
                         <ListItemIcon className={classes.iconFix}>
                             <Add />
                         </ListItemIcon>
diff --git a/src/component/Setting/Profile.js b/src/component/Setting/Profile.js
index beb2212..700138a 100644
--- a/src/component/Setting/Profile.js
+++ b/src/component/Setting/Profile.js
@@ -17,7 +17,7 @@ import {
     TableRow,
     Grid
 } from "@material-ui/core";
-import {withRouter} from "react-router";
+import { withRouter } from "react-router";
 import Pagination from "@material-ui/lab/Pagination";
 
 const styles = theme => ({
@@ -83,7 +83,7 @@ const styles = theme => ({
         marginTop: "1px",
         fontSize: "25px",
         color: "#ffffff",
-        opacity: "0.81",
+        opacity: "0.81"
     },
     th: {
         minWidth: "106px"
@@ -97,7 +97,7 @@ const styles = theme => ({
         cursor: "pointer"
     },
     navigator: {
-        padding:theme.spacing(2),
+        padding: theme.spacing(2)
     },
     pageInfo: {
         marginTop: "14px",
@@ -110,8 +110,8 @@ const styles = theme => ({
     infoContainer: {
         marginTop: "30px"
     },
-    tableContainer:{
-        overflowX:"auto",
+    tableContainer: {
+        overflowX: "auto"
     }
 });
 const mapStateToProps = () => {
@@ -131,8 +131,8 @@ class ProfileCompoment extends Component {
         listType: 0,
         shareList: [],
         page: 1,
-        user:null,
-        total:0,
+        user: null,
+        total: 0
     };
 
     handleChange = (event, listType) => {
@@ -148,18 +148,29 @@ class ProfileCompoment extends Component {
         this.loadList(1, "default");
     };
 
-    loadList = (page,order) => {
-        API
-            .get("/user/profile/" + this.props.match.params.id + "?page=" + page + "&type=" + order)
+    loadList = (page, order) => {
+        API.get(
+            "/user/profile/" +
+                this.props.match.params.id +
+                "?page=" +
+                page +
+                "&type=" +
+                order
+        )
             .then(response => {
                 this.setState({
                     shareList: response.data.items,
-                    user:response.data.user,
-                    total:response.data.total,
+                    user: response.data.user,
+                    total: response.data.total
                 });
             })
             .catch(error => {
-                this.props.toggleSnackbar("top", "right", error.message, "error");
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    error.message,
+                    "error"
+                );
             });
     };
 
@@ -182,17 +193,17 @@ class ProfileCompoment extends Component {
 
         return (
             <div className={classes.layout}>
-                {this.state.user === null &&
-                    <div></div>
-                }
-                {this.state.user !== null &&
+                {this.state.user === null && <div></div>}
+                {this.state.user !== null && (
                     <Paper square>
                         <div className={classes.userNav}>
                             <div>
                                 <Avatar
                                     className={classes.avatarContainer}
                                     src={
-                                        "/api/v3/user/avatar/"+this.state.user.id + "/l"
+                                        "/api/v3/user/avatar/" +
+                                        this.state.user.id +
+                                        "/l"
                                     }
                                 />
                             </div>
@@ -303,88 +314,109 @@ class ProfileCompoment extends Component {
                             this.state.listType === 1) && (
                             <div>
                                 <div className={classes.tableContainer}>
-                                <Table className={classes.table}>
-                                    <TableHead>
-                                        <TableRow>
-                                            <TableCell>文件名</TableCell>
-                                            <TableCell
-                                                className={classes.mobileHide}
-                                            >
-                                                分享日期
-                                            </TableCell>
-                                            <TableCell
-                                                className={[
-                                                    classes.th,
-                                                    classes.mobileHide
-                                                ]}
-                                            >
-                                                下载次数
-                                            </TableCell>
-                                            <TableCell
-                                                className={[
-                                                    classes.th,
-                                                    classes.mobileHide
-                                                ]}
-                                            >
-                                                浏览次数
-                                            </TableCell>
-                                        </TableRow>
-                                    </TableHead>
-                                    <TableBody>
-                                        {this.state.shareList.map((row,id) => (
-                                            <TableRow
-                                                key={id}
-                                                className={classes.tableLink}
-                                                onClick={() =>
-                                                    this.props.history.push(
-                                                        "/s/" + row.key
-                                                    )
-                                                }
-                                            >
-                                                <TableCell>
-                                                    <Typography>
-                                                        {row.source?row.source.name:"[已失效]"}
-                                                    </Typography>
+                                    <Table className={classes.table}>
+                                        <TableHead>
+                                            <TableRow>
+                                                <TableCell>文件名</TableCell>
+                                                <TableCell
+                                                    className={
+                                                        classes.mobileHide
+                                                    }
+                                                >
+                                                    分享日期
                                                 </TableCell>
                                                 <TableCell
-                                                    nowrap={"nowrap"}
-                                                    className={classes.mobileHide}
+                                                    className={[
+                                                        classes.th,
+                                                        classes.mobileHide
+                                                    ]}
                                                 >
-                                                    {row.create_date}
+                                                    下载次数
                                                 </TableCell>
                                                 <TableCell
-                                                    className={classes.mobileHide}
+                                                    className={[
+                                                        classes.th,
+                                                        classes.mobileHide
+                                                    ]}
                                                 >
-                                                    {row.downloads}
-                                                </TableCell>
-                                                <TableCell
-                                                    className={classes.mobileHide}
-                                                >
-                                                    {row.views}
+                                                    浏览次数
                                                 </TableCell>
                                             </TableRow>
-                                        ))}
-                                    </TableBody>
-                                </Table>
+                                        </TableHead>
+                                        <TableBody>
+                                            {this.state.shareList.map(
+                                                (row, id) => (
+                                                    <TableRow
+                                                        key={id}
+                                                        className={
+                                                            classes.tableLink
+                                                        }
+                                                        onClick={() =>
+                                                            this.props.history.push(
+                                                                "/s/" + row.key
+                                                            )
+                                                        }
+                                                    >
+                                                        <TableCell>
+                                                            <Typography>
+                                                                {row.source
+                                                                    ? row.source
+                                                                          .name
+                                                                    : "[已失效]"}
+                                                            </Typography>
+                                                        </TableCell>
+                                                        <TableCell
+                                                            nowrap={"nowrap"}
+                                                            className={
+                                                                classes.mobileHide
+                                                            }
+                                                        >
+                                                            {row.create_date}
+                                                        </TableCell>
+                                                        <TableCell
+                                                            className={
+                                                                classes.mobileHide
+                                                            }
+                                                        >
+                                                            {row.downloads}
+                                                        </TableCell>
+                                                        <TableCell
+                                                            className={
+                                                                classes.mobileHide
+                                                            }
+                                                        >
+                                                            {row.views}
+                                                        </TableCell>
+                                                    </TableRow>
+                                                )
+                                            )}
+                                        </TableBody>
+                                    </Table>
                                 </div>
                                 {this.state.shareList.length !== 0 &&
-                                this.state.listType === 0 && (
-                                    <div className={classes.navigator}>
-                                        <Pagination
-                                            count={Math.ceil(this.state.total / 10)}
-                                            onChange={(e,v)=>this.loadList(
-                                                v,
-                                                this.state.listType === 0 ? "default" : "hot"
-                                            )}
-                                            color="secondary"
-                                        />
-                                    </div>
-                                )}
+                                    this.state.listType === 0 && (
+                                        <div className={classes.navigator}>
+                                            <Pagination
+                                                count={Math.ceil(
+                                                    this.state.total / 10
+                                                )}
+                                                onChange={(e, v) =>
+                                                    this.loadList(
+                                                        v,
+                                                        this.state.listType ===
+                                                            0
+                                                            ? "default"
+                                                            : "hot"
+                                                    )
+                                                }
+                                                color="secondary"
+                                            />
+                                        </div>
+                                    )}
                             </div>
                         )}
                     </Paper>
-                }
-
+                )}
             </div>
         );
     }
diff --git a/src/component/Setting/Tasks.js b/src/component/Setting/Tasks.js
index 7fe8fae..1d69c50 100644
--- a/src/component/Setting/Tasks.js
+++ b/src/component/Setting/Tasks.js
@@ -10,7 +10,7 @@ import TableCell from "@material-ui/core/TableCell";
 import TableBody from "@material-ui/core/TableBody";
 import API from "../../middleware/Api";
 import TimeAgo from "timeago-react";
-import {getTaskProgress, getTaskStatus, getTaskType} from "../../config";
+import { getTaskProgress, getTaskStatus, getTaskType } from "../../config";
 import Pagination from "@material-ui/lab/Pagination";
 
 const useStyles = makeStyles(theme => ({
@@ -28,7 +28,7 @@ const useStyles = makeStyles(theme => ({
     },
     content: {
         marginTop: theme.spacing(4),
-        overflowX:"auto",
+        overflowX: "auto"
     },
     cardContent: {
         padding: theme.spacing(2)
@@ -39,11 +39,11 @@ const useStyles = makeStyles(theme => ({
     create: {
         marginTop: theme.spacing(2)
     },
-    noWrap:{
-        wordBreak: "keepAll",
+    noWrap: {
+        wordBreak: "keepAll"
     },
-    footer:{
-        padding:theme.spacing(2),
+    footer: {
+        padding: theme.spacing(2)
     }
 }));
 
@@ -60,33 +60,32 @@ export default function Tasks() {
     );
 
     const loadList = page => {
-      API.get("/user/setting/tasks?page=" + page)
-          .then(response => {
-              setTasks(response.data.tasks);
-              setTotal(response.data.total);
-          })
-          .catch(error => {
-              ToggleSnackbar("top", "right", error.message, "error");
-          });
+        API.get("/user/setting/tasks?page=" + page)
+            .then(response => {
+                setTasks(response.data.tasks);
+                setTotal(response.data.total);
+            })
+            .catch(error => {
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
     };
-    
+
     useEffect(() => {
         loadList(page);
         // eslint-disable-next-line
     }, [page]);
 
     const getError = error => {
-        if (error === ""){
-            return "-"
+        if (error === "") {
+            return "-";
         }
         try {
-            const res = JSON.parse(error)
-            return res.msg
-        }catch (e) {
-            return "未知"
+            const res = JSON.parse(error);
+            return res.msg;
+        } catch (e) {
+            return "未知";
         }
-
-    }
+    };
 
     const classes = useStyles();
 
@@ -100,16 +99,26 @@ export default function Tasks() {
                     <TableHead>
                         <TableRow>
                             <TableCell nowrap="nowrap">创建于</TableCell>
-                            <TableCell nowrap="nowrap" align="right">任务类型</TableCell>
-                            <TableCell nowrap="nowrap" align="right">状态</TableCell>
-                            <TableCell nowrap="nowrap" align="right">最后进度</TableCell>
+                            <TableCell nowrap="nowrap" align="right">
+                                任务类型
+                            </TableCell>
+                            <TableCell nowrap="nowrap" align="right">
+                                状态
+                            </TableCell>
+                            <TableCell nowrap="nowrap" align="right">
+                                最后进度
+                            </TableCell>
                             <TableCell nowrap="nowrap">错误信息</TableCell>
                         </TableRow>
                     </TableHead>
                     <TableBody>
                         {tasks.map((row, id) => (
                             <TableRow key={id}>
-                                <TableCell nowrap="nowrap" component="th" scope="row">
+                                <TableCell
+                                    nowrap="nowrap"
+                                    component="th"
+                                    scope="row"
+                                >
                                     <TimeAgo
                                         datetime={row.create_date}
                                         locale="zh_CN"
@@ -118,22 +127,25 @@ export default function Tasks() {
                                 <TableCell nowrap="nowrap" align="right">
                                     {getTaskType(row.type)}
                                 </TableCell>
-                                <TableCell nowrap="nowrap" align="right">{getTaskStatus(row.status)}</TableCell>
                                 <TableCell nowrap="nowrap" align="right">
-                                    {getTaskProgress(row.type,row.progress)}
+                                    {getTaskStatus(row.status)}
+                                </TableCell>
+                                <TableCell nowrap="nowrap" align="right">
+                                    {getTaskProgress(row.type, row.progress)}
                                 </TableCell>
                                 <TableCell className={classes.noWrap}>
                                     {getError(row.error)}
                                 </TableCell>
-
                             </TableRow>
                         ))}
                     </TableBody>
                 </Table>
                 <div className={classes.footer}>
-                    <Pagination   count={Math.ceil(total / 10)}
-                                  onChange={(e,v)=>setPage(v)}
-                                  color="secondary"/>
+                    <Pagination
+                        count={Math.ceil(total / 10)}
+                        onChange={(e, v) => setPage(v)}
+                        color="secondary"
+                    />
                 </div>
             </Paper>
         </div>
diff --git a/src/component/Setting/UserSetting.js b/src/component/Setting/UserSetting.js
index 0397ff6..33c5b8e 100644
--- a/src/component/Setting/UserSetting.js
+++ b/src/component/Setting/UserSetting.js
@@ -12,7 +12,12 @@ import NickIcon from "@material-ui/icons/PermContactCalendar";
 import LockIcon from "@material-ui/icons/Lock";
 import VerifyIcon from "@material-ui/icons/VpnKey";
 import ColorIcon from "@material-ui/icons/Palette";
-import {applyThemes, changeViewMethod, toggleDaylightMode, toggleSnackbar} from "../../actions";
+import {
+    applyThemes,
+    changeViewMethod,
+    toggleDaylightMode,
+    toggleSnackbar
+} from "../../actions";
 import axios from "axios";
 import FingerprintIcon from "@material-ui/icons/Fingerprint";
 import ToggleButton from "@material-ui/lab/ToggleButton";
@@ -43,7 +48,7 @@ import API from "../../middleware/Api";
 import Auth from "../../middleware/Auth";
 import { withRouter } from "react-router";
 import QRCode from "qrcode-react";
-import {Brightness3, ListAlt, PermContactCalendar} from "@material-ui/icons";
+import { Brightness3, ListAlt, PermContactCalendar } from "@material-ui/icons";
 import { transformTime } from "../../utils";
 import Authn from "./Authn";
 
@@ -136,18 +141,18 @@ const styles = theme => ({
     paddingText: {
         paddingRight: theme.spacing(2)
     },
-    qrcode:{
+    qrcode: {
         width: 128,
         marginTop: 16,
-        marginRight: 16,
-    },
+        marginRight: 16
+    }
 });
 
 const mapStateToProps = state => {
     return {
         title: state.siteConfig.title,
-        authn:state.siteConfig.authn,
-        viewMethod: state.viewUpdate.explorerViewMethod,
+        authn: state.siteConfig.authn,
+        viewMethod: state.viewUpdate.explorerViewMethod
     };
 };
 
@@ -156,15 +161,15 @@ const mapDispatchToProps = dispatch => {
         toggleSnackbar: (vertical, horizontal, msg, color) => {
             dispatch(toggleSnackbar(vertical, horizontal, msg, color));
         },
-        applyThemes: (color) => {
+        applyThemes: color => {
             dispatch(applyThemes(color));
         },
-        toggleDaylightMode:()=>{
-            dispatch(toggleDaylightMode())
+        toggleDaylightMode: () => {
+            dispatch(toggleDaylightMode());
         },
         changeView: method => {
             dispatch(changeViewMethod(method));
-        },
+        }
     };
 };
 
@@ -208,7 +213,7 @@ class UserSettingCompoment extends Component {
             two_fa_secret: "",
             prefer_theme: "",
             themes: {},
-            authn:[],
+            authn: []
         }
     };
 
@@ -432,10 +437,9 @@ class UserSettingCompoment extends Component {
         this.setState({
             loading: "changeTheme"
         });
-        API
-            .patch("/user/setting/theme", {
-                theme: this.state.chosenTheme
-            })
+        API.patch("/user/setting/theme", {
+            theme: this.state.chosenTheme
+        })
             .then(() => {
                 this.props.toggleSnackbar(
                     "top",
@@ -507,7 +511,7 @@ class UserSettingCompoment extends Component {
     };
 
     init2FA = () => {
-        if (this.state.settings.two_factor){
+        if (this.state.settings.two_factor) {
             this.setState({ twoFactor: true });
             return;
         }
@@ -515,7 +519,7 @@ class UserSettingCompoment extends Component {
             .then(response => {
                 this.setState({
                     two_fa_secret: response.data,
-                    twoFactor: true,
+                    twoFactor: true
                 });
             })
             .catch(error => {
@@ -533,8 +537,8 @@ class UserSettingCompoment extends Component {
             loading: "twoFactor"
         });
         API.patch("/user/setting/2fa", {
-                code: this.state.authCode
-            })
+            code: this.state.authCode
+        })
             .then(() => {
                 this.props.toggleSnackbar(
                     "top",
@@ -544,9 +548,9 @@ class UserSettingCompoment extends Component {
                 );
                 this.setState({
                     loading: "",
-                    settings:{
+                    settings: {
                         ...this.state.settings,
-                        two_factor:!this.state.settings.two_factor,
+                        two_factor: !this.state.settings.two_factor
                     }
                 });
                 this.handleClose();
@@ -570,17 +574,17 @@ class UserSettingCompoment extends Component {
 
     handleAlignment = (event, chosenTheme) => this.setState({ chosenTheme });
 
-    toggleThemeMode = (current) => {
-        if (current !== null){
+    toggleThemeMode = current => {
+        if (current !== null) {
             this.props.toggleDaylightMode();
-            Auth.SetPreference("theme_mode",null);
+            Auth.SetPreference("theme_mode", null);
         }
-    }
+    };
 
     render() {
         const { classes } = this.props;
         const user = Auth.GetUser();
-        const dark = Auth.GetPreference("theme_mode")
+        const dark = Auth.GetPreference("theme_mode");
 
         return (
             <div>
@@ -675,9 +679,7 @@ class UserSettingCompoment extends Component {
                                 </ListItemSecondaryAction>
                             </ListItem>
                             <Divider />
-                            <ListItem
-                                button
-                            >
+                            <ListItem button>
                                 <ListItemIcon className={classes.iconFix}>
                                     <GroupIcon />
                                 </ListItemIcon>
@@ -779,30 +781,29 @@ class UserSettingCompoment extends Component {
 
                     <Authn
                         list={this.state.settings.authn}
-                        add = {
-                            (credential)=>{
-                                this.setState({
-                                    settings:{
-                                        ...this.state.settings,
-                                        authn: [...this.state.settings.authn,credential],
-                                    }
-                                })
-                            }
-                        }
-                        remove={
-                            (id)=>{
-                                let credentials = [...this.state.settings.authn];
-                                credentials = credentials.filter((v)=>{
-                                    return v.id !== id
-                                })
-                                this.setState({
-                                    settings:{
-                                        ...this.state.settings,
-                                        authn: credentials,
-                                    }
-                                })
-                            }
-                        }
+                        add={credential => {
+                            this.setState({
+                                settings: {
+                                    ...this.state.settings,
+                                    authn: [
+                                        ...this.state.settings.authn,
+                                        credential
+                                    ]
+                                }
+                            });
+                        }}
+                        remove={id => {
+                            let credentials = [...this.state.settings.authn];
+                            credentials = credentials.filter(v => {
+                                return v.id !== id;
+                            });
+                            this.setState({
+                                settings: {
+                                    ...this.state.settings,
+                                    authn: credentials
+                                }
+                            });
+                        }}
                     />
 
                     <Typography
@@ -831,8 +832,11 @@ class UserSettingCompoment extends Component {
                                     <div className={classes.secondColor}></div>
                                 </ListItemSecondaryAction>
                             </ListItem>
-                            <Divider/>
-                            <ListItem button onClick={()=>this.toggleThemeMode(dark)}>
+                            <Divider />
+                            <ListItem
+                                button
+                                onClick={() => this.toggleThemeMode(dark)}
+                            >
                                 <ListItemIcon className={classes.iconFix}>
                                     <Brightness3 />
                                 </ListItemIcon>
@@ -845,18 +849,22 @@ class UserSettingCompoment extends Component {
                                         className={classes.infoTextWithIcon}
                                         color="textSecondary"
                                     >
-                                        {dark&&(dark==="dark"
-                                            ? "偏好开启"
-                                            : "偏好关闭")}
-                                        {dark === null&&"跟随系统"}
+                                        {dark &&
+                                            (dark === "dark"
+                                                ? "偏好开启"
+                                                : "偏好关闭")}
+                                        {dark === null && "跟随系统"}
                                     </Typography>
                                     <RightIcon
                                         className={classes.rightIconWithText}
                                     />
                                 </ListItemSecondaryAction>
                             </ListItem>
-                            <Divider/>
-                            <ListItem button onClick={()=>this.toggleViewMethod()}>
+                            <Divider />
+                            <ListItem
+                                button
+                                onClick={() => this.toggleViewMethod()}
+                            >
                                 <ListItemIcon className={classes.iconFix}>
                                     <ListAlt />
                                 </ListItemIcon>
@@ -869,9 +877,12 @@ class UserSettingCompoment extends Component {
                                         className={classes.infoTextWithIcon}
                                         color="textSecondary"
                                     >
-                                        {this.props.viewMethod === "icon" && "大图标"}
-                                        {this.props.viewMethod === "list" && "列表"}
-                                        {this.props.viewMethod === "smallIcon" && "小图标"}
+                                        {this.props.viewMethod === "icon" &&
+                                            "大图标"}
+                                        {this.props.viewMethod === "list" &&
+                                            "列表"}
+                                        {this.props.viewMethod ===
+                                            "smallIcon" && "小图标"}
                                     </Typography>
                                     <RightIcon
                                         className={classes.rightIconWithText}
@@ -1101,26 +1112,36 @@ class UserSettingCompoment extends Component {
                     </DialogActions>
                 </Dialog>
                 <Dialog open={this.state.twoFactor} onClose={this.handleClose}>
-                    <DialogTitle>{this.state.settings.two_factor?"关闭":"启用"}二步验证</DialogTitle>
+                    <DialogTitle>
+                        {this.state.settings.two_factor ? "关闭" : "启用"}
+                        二步验证
+                    </DialogTitle>
                     <DialogContent>
                         <div className={classes.flexContainerResponse}>
-
-                                {!this.state.settings.two_factor && <div className={classes.qrcode}><QRCode
-                                    value={
-                                        "otpauth://totp/" +
-                                        this.props.title +
-                                        "?secret=" +
-                                        this.state.two_fa_secret
-                                    }
-                                /></div>}
+                            {!this.state.settings.two_factor && (
+                                <div className={classes.qrcode}>
+                                    <QRCode
+                                        value={
+                                            "otpauth://totp/" +
+                                            this.props.title +
+                                            "?secret=" +
+                                            this.state.two_fa_secret
+                                        }
+                                    />
+                                </div>
+                            )}
 
                             <div className={classes.desText}>
-                                {!this.state.settings.two_factor && <Typography>
-                                请使用任意二步验证APP或者支持二步验证的密码管理软件扫描左侧二维码添加本站。扫描完成后请填写二步验证APP给出的6位验证码以开启二步验证。
-                            </Typography>}
-                                {this.state.settings.two_factor && <Typography>
-                                    请验证当前二步验证代码。
-                                </Typography>}
+                                {!this.state.settings.two_factor && (
+                                    <Typography>
+                                        请使用任意二步验证APP或者支持二步验证的密码管理软件扫描左侧二维码添加本站。扫描完成后请填写二步验证APP给出的6位验证码以开启二步验证。
+                                    </Typography>
+                                )}
+                                {this.state.settings.two_factor && (
+                                    <Typography>
+                                        请验证当前二步验证代码。
+                                    </Typography>
+                                )}
                                 <TextField
                                     id="standard-name"
                                     label="6位验证码"
@@ -1147,7 +1168,8 @@ class UserSettingCompoment extends Component {
                                 this.state.authCode === ""
                             }
                         >
-                            {this.state.settings.two_factor?"关闭":"启用"}二步验证
+                            {this.state.settings.two_factor ? "关闭" : "启用"}
+                            二步验证
                         </Button>
                     </DialogActions>
                 </Dialog>
@@ -1199,10 +1221,7 @@ class UserSettingCompoment extends Component {
                         <TextField
                             id="standard-name"
                             className={classes.textField}
-                            value={
-                                window.location.origin +
-                                "/dav"
-                            }
+                            value={window.location.origin + "/dav"}
                             margin="normal"
                             autoFocus
                         />
diff --git a/src/component/Setting/WebDAV.js b/src/component/Setting/WebDAV.js
index d4b00eb..0f14d63 100644
--- a/src/component/Setting/WebDAV.js
+++ b/src/component/Setting/WebDAV.js
@@ -58,8 +58,8 @@ export default function WebDAV() {
             dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
         [dispatch]
     );
-    
-    const loadList = () =>{
+
+    const loadList = () => {
         API.get("/webdav/accounts")
             .then(response => {
                 setAccounts(response.data.accounts);
@@ -67,10 +67,10 @@ export default function WebDAV() {
             .catch(error => {
                 ToggleSnackbar("top", "right", error.message, "error");
             });
-    }
+    };
     useEffect(() => {
-      loadList();
-      // eslint-disable-next-line
+        loadList();
+        // eslint-disable-next-line
     }, []);
 
     const deleteAccount = id => {
@@ -138,7 +138,9 @@ export default function WebDAV() {
                     {tab === 0 && (
                         <div>
                             <Alert severity="info">
-                                WebDAV的地址为：{window.location.origin + "/dav"}；登陆用户名统一为：{user.user_name}{" "}
+                                WebDAV的地址为：
+                                {window.location.origin + "/dav"}
+                                ；登陆用户名统一为：{user.user_name}{" "}
                                 ；密码为所创建账号的密码。
                             </Alert>
                             <TableContainer className={classes.tableContainer}>
diff --git a/src/component/Share/LockedFile.js b/src/component/Share/LockedFile.js
index 2112685..fd45863 100644
--- a/src/component/Share/LockedFile.js
+++ b/src/component/Share/LockedFile.js
@@ -13,7 +13,7 @@ import {
     TextField,
     Avatar
 } from "@material-ui/core";
-import { withRouter} from "react-router";
+import { withRouter } from "react-router";
 
 const styles = theme => ({
     card: {
@@ -57,9 +57,8 @@ class LockedFileCompoment extends Component {
         super(props);
         const query = new URLSearchParams(this.props.location.search);
         this.state = {
-            pwd: query.get("password"),
+            pwd: query.get("password")
         };
-
     }
 
     handleChange = name => event => {
@@ -85,7 +84,9 @@ class LockedFileCompoment extends Component {
                             <Avatar
                                 aria-label="Recipe"
                                 src={
-                                    "/api/v3/user/avatar/"+this.props.share.creator.key + "/l"
+                                    "/api/v3/user/avatar/" +
+                                    this.props.share.creator.key +
+                                    "/l"
                                 }
                             />
                         }
diff --git a/src/component/Share/MyShare.js b/src/component/Share/MyShare.js
index 5510a16..595755f 100644
--- a/src/component/Share/MyShare.js
+++ b/src/component/Share/MyShare.js
@@ -34,7 +34,7 @@ import { VisibilityOff, VpnKey } from "@material-ui/icons";
 import Select from "@material-ui/core/Select";
 import MenuItem from "@material-ui/core/MenuItem";
 import FormControl from "@material-ui/core/FormControl";
-import {withRouter} from "react-router-dom";
+import { withRouter } from "react-router-dom";
 
 const styles = theme => ({
     cardContainer: {
@@ -79,9 +79,9 @@ const styles = theme => ({
         marginLeft: theme.spacing(1),
         height: 17
     },
-    orderSelect:{
-        textAlign:"right",
-        marginTop: 5,
+    orderSelect: {
+        textAlign: "right",
+        marginTop: 5
     }
 });
 const mapStateToProps = () => {
@@ -102,11 +102,11 @@ class MyShareCompoment extends Component {
         total: 0,
         shareList: [],
         showPwd: null,
-        orderBy:"created_at DESC",
+        orderBy: "created_at DESC"
     };
 
     componentDidMount = () => {
-        this.loadList(1,this.state.orderBy);
+        this.loadList(1, this.state.orderBy);
     };
 
     showPwd = pwd => {
@@ -117,31 +117,34 @@ class MyShareCompoment extends Component {
         this.setState({ showPwd: null });
     };
 
-    removeShare = (id) => {
-        API
-            .delete("/share/"+id)
+    removeShare = id => {
+        API.delete("/share/" + id)
             .then(() => {
-                    let oldList = this.state.shareList;
-                    oldList = oldList.filter(value => {
-                        return value.key !== id;
-                    });
-                    this.setState({
-                        shareList: oldList,
-                        total:this.state.total-1,
-                    });
-                    this.props.toggleSnackbar(
-                        "top",
-                        "right",
-                        "分享已取消",
-                        "success"
-                    );
-                    if (oldList.length === 0){
-                        this.loadList(1,this.state.orderBy);
-                    }
-
+                let oldList = this.state.shareList;
+                oldList = oldList.filter(value => {
+                    return value.key !== id;
+                });
+                this.setState({
+                    shareList: oldList,
+                    total: this.state.total - 1
+                });
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    "分享已取消",
+                    "success"
+                );
+                if (oldList.length === 0) {
+                    this.loadList(1, this.state.orderBy);
+                }
             })
             .catch(error => {
-                this.props.toggleSnackbar("top", "right", error.message, "error");
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    error.message,
+                    "error"
+                );
             });
     };
 
@@ -154,11 +157,10 @@ class MyShareCompoment extends Component {
         const shareIndex = oldList.findIndex(value => {
             return value.key === id;
         });
-        API
-            .patch("/share/"+id, {
-                prop:"password",
-                value:oldList[shareIndex].password === "" ? newPwd : "",
-            })
+        API.patch("/share/" + id, {
+            prop: "password",
+            value: oldList[shareIndex].password === "" ? newPwd : ""
+        })
             .then(response => {
                 oldList[shareIndex].password = response.data;
                 this.setState({
@@ -166,7 +168,12 @@ class MyShareCompoment extends Component {
                 });
             })
             .catch(error => {
-                this.props.toggleSnackbar("top", "right", error.message, "error");
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    error.message,
+                    "error"
+                );
             });
     };
 
@@ -175,11 +182,10 @@ class MyShareCompoment extends Component {
         const shareIndex = oldList.findIndex(value => {
             return value.key === id;
         });
-        API
-            .patch("/share/"+id, {
-                prop:"preview_enabled",
-                value:oldList[shareIndex].preview?"false":"true",
-            })
+        API.patch("/share/" + id, {
+            prop: "preview_enabled",
+            value: oldList[shareIndex].preview ? "false" : "true"
+        })
             .then(response => {
                 oldList[shareIndex].preview = response.data;
                 this.setState({
@@ -187,13 +193,25 @@ class MyShareCompoment extends Component {
                 });
             })
             .catch(error => {
-                this.props.toggleSnackbar("top", "right", error.message, "error");
+                this.props.toggleSnackbar(
+                    "top",
+                    "right",
+                    error.message,
+                    "error"
+                );
             });
     };
 
-    loadList = (page,orderBy) => {
+    loadList = (page, orderBy) => {
         const order = orderBy.split(" ");
-        API.get("/share?page=" + page + "&order_by=" + order[0] + "&order=" + order[1])
+        API.get(
+            "/share?page=" +
+                page +
+                "&order_by=" +
+                order[0] +
+                "&order=" +
+                order[1]
+        )
             .then(response => {
                 if (response.data.items.length === 0) {
                     this.props.toggleSnackbar(
@@ -217,14 +235,14 @@ class MyShareCompoment extends Component {
         this.setState({
             page: value
         });
-        this.loadList(value,this.state.orderBy);
+        this.loadList(value, this.state.orderBy);
     };
 
-    handleOrderChange =  event => {
+    handleOrderChange = event => {
         this.setState({
-            orderBy:event.target.value,
+            orderBy: event.target.value
         });
-        this.loadList(this.state.page,event.target.value);
+        this.loadList(this.state.page, event.target.value);
     };
 
     isExpired = share => {
@@ -239,19 +257,34 @@ class MyShareCompoment extends Component {
                 <Grid container>
                     <Grid sm={6} xs={6}>
                         <Typography color="textSecondary" variant="h4">
-
                             我的分享
                         </Typography>
-                        </Grid>
+                    </Grid>
                     <Grid sm={6} xs={6} className={classes.orderSelect}>
                         <FormControl>
-                            <Select color={"secondary"}  onChange={this.handleOrderChange} value={this.state.orderBy}>
-                                <MenuItem value={"created_at DESC"}>创建日期由晚到早</MenuItem>
-                                <MenuItem value={"created_at ASC"}>创建日期由早到晚</MenuItem>
-                                <MenuItem value={"downloads DESC"}>下载次数由大到小</MenuItem>
-                                <MenuItem value={"downloads ASC"}>下载次数由小到大</MenuItem>
-                                <MenuItem value={"views DESC"}>浏览次数由大到小</MenuItem>
-                                <MenuItem value={"views ASC"}>浏览次数由小到大</MenuItem>
+                            <Select
+                                color={"secondary"}
+                                onChange={this.handleOrderChange}
+                                value={this.state.orderBy}
+                            >
+                                <MenuItem value={"created_at DESC"}>
+                                    创建日期由晚到早
+                                </MenuItem>
+                                <MenuItem value={"created_at ASC"}>
+                                    创建日期由早到晚
+                                </MenuItem>
+                                <MenuItem value={"downloads DESC"}>
+                                    下载次数由大到小
+                                </MenuItem>
+                                <MenuItem value={"downloads ASC"}>
+                                    下载次数由小到大
+                                </MenuItem>
+                                <MenuItem value={"views DESC"}>
+                                    浏览次数由大到小
+                                </MenuItem>
+                                <MenuItem value={"views ASC"}>
+                                    浏览次数由小到大
+                                </MenuItem>
                             </Select>
                         </FormControl>
                     </Grid>
@@ -333,7 +366,14 @@ class MyShareCompoment extends Component {
                                     <Tooltip placement="top" title="打开">
                                         <IconButton
                                             onClick={() =>
-                                                this.props.history.push("/s/"+value.key + (value.password === "" ?"":"?password=" + value.password))
+                                                this.props.history.push(
+                                                    "/s/" +
+                                                        value.key +
+                                                        (value.password === ""
+                                                            ? ""
+                                                            : "?password=" +
+                                                              value.password)
+                                                )
                                             }
                                         >
                                             <OpenIcon />
@@ -358,9 +398,7 @@ class MyShareCompoment extends Component {
                                                 placement="top"
                                                 title="查看密码"
                                                 onClick={() =>
-                                                    this.showPwd(
-                                                        value.password
-                                                    )
+                                                    this.showPwd(value.password)
                                                 }
                                             >
                                                 <IconButton>
@@ -374,9 +412,7 @@ class MyShareCompoment extends Component {
                                             placement="top"
                                             title="变更为私密分享"
                                             onClick={() =>
-                                                this.changePermission(
-                                                    value.key
-                                                )
+                                                this.changePermission(value.key)
                                             }
                                         >
                                             <IconButton>
@@ -392,9 +428,7 @@ class MyShareCompoment extends Component {
                                                 : "允许预览"
                                         }
                                         onClick={() =>
-                                            this.changePreviewOption(
-                                                value.key
-                                            )
+                                            this.changePreviewOption(value.key)
                                         }
                                     >
                                         <IconButton>
@@ -423,10 +457,10 @@ class MyShareCompoment extends Component {
                 </Grid>
                 <div className={classes.loadMore}>
                     <Pagination
-                            count={Math.ceil(this.state.total / 18)}
-                            onChange={this.handlePageChange}
-                            color="secondary"
-                        />
+                        count={Math.ceil(this.state.total / 18)}
+                        onChange={this.handlePageChange}
+                        color="secondary"
+                    />
                 </div>{" "}
                 <Dialog
                     open={this.state.showPwd !== null}
diff --git a/src/component/Share/NotFound.js b/src/component/Share/NotFound.js
index e26c8a3..4a27adc 100644
--- a/src/component/Share/NotFound.js
+++ b/src/component/Share/NotFound.js
@@ -1,35 +1,32 @@
 import React from "react";
-import SentimentVeryDissatisfiedIcon from '@material-ui/icons/SentimentVeryDissatisfied';
-import {lighten, makeStyles} from "@material-ui/core/styles";
+import SentimentVeryDissatisfiedIcon from "@material-ui/icons/SentimentVeryDissatisfied";
+import { lighten, makeStyles } from "@material-ui/core/styles";
 
-const useStyles = makeStyles(theme=>({
-    icon:{
-        fontSize: "160px",
+const useStyles = makeStyles(theme => ({
+    icon: {
+        fontSize: "160px"
     },
     emptyContainer: {
         bottom: "0",
         height: "300px",
         margin: "50px auto",
         width: "300px",
-        color: lighten(theme.palette.text.disabled,0.4),
+        color: lighten(theme.palette.text.disabled, 0.4),
         textAlign: "center",
         paddingTop: "20px"
     },
     emptyInfoBig: {
         fontSize: "25px",
-        color: lighten(theme.palette.text.disabled,0.4),
-    },
+        color: lighten(theme.palette.text.disabled, 0.4)
+    }
 }));
 
 export default function Notice(props) {
     const classes = useStyles();
     return (
         <div className={classes.emptyContainer}>
-            <SentimentVeryDissatisfiedIcon className={classes.icon}/>
-            <div className={classes.emptyInfoBig}>
-                {props.msg}
-            </div>
+            <SentimentVeryDissatisfiedIcon className={classes.icon} />
+            <div className={classes.emptyInfoBig}>{props.msg}</div>
         </div>
-
-    )
-}
\ No newline at end of file
+    );
+}
diff --git a/src/component/Share/ReadMe.js b/src/component/Share/ReadMe.js
index 7ed7ad4..cf476a5 100644
--- a/src/component/Share/ReadMe.js
+++ b/src/component/Share/ReadMe.js
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from "react";
-import {  makeStyles, useTheme } from "@material-ui/core/styles";
+import { makeStyles, useTheme } from "@material-ui/core/styles";
 import { MenuBook } from "@material-ui/icons";
 import { Typography } from "@material-ui/core";
 import Divider from "@material-ui/core/Divider";
@@ -14,8 +14,8 @@ const useStyles = makeStyles(theme => ({
     readMeContainer: {
         marginTop: 30,
         [theme.breakpoints.down("sm")]: {
-            marginTop: theme.spacing(2),
-        },
+            marginTop: theme.spacing(2)
+        }
     },
     readMeHeader: {
         padding: "10px 16px",
@@ -44,18 +44,24 @@ const useStyles = makeStyles(theme => ({
         },
         ".for-container .for-markdown-preview pre": {
             backgroundColor: theme.palette.background.default + "!important",
-            color: theme.palette.type ==="dark"?"#fff !important":"rgba(0, 0, 0, 0.87);!important",
+            color:
+                theme.palette.type === "dark"
+                    ? "#fff !important"
+                    : "rgba(0, 0, 0, 0.87);!important"
         },
 
         ".for-container .for-markdown-preview code": {
             backgroundColor: theme.palette.background.default + "!important"
         },
         ".for-container .for-markdown-preview a": {
-            color: theme.palette.type==="dark"?"#67aeff !important":"#0366d6 !important",
-        },
-        ".for-container .for-markdown-preview table th":{
-            backgroundColor: theme.palette.background.default + "!important",
+            color:
+                theme.palette.type === "dark"
+                    ? "#67aeff !important"
+                    : "#0366d6 !important"
         },
+        ".for-container .for-markdown-preview table th": {
+            backgroundColor: theme.palette.background.default + "!important"
+        }
     }
 }));
 
diff --git a/src/component/Share/SearchResult.js b/src/component/Share/SearchResult.js
index a357660..1074449 100644
--- a/src/component/Share/SearchResult.js
+++ b/src/component/Share/SearchResult.js
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from "react";
-import {  useDispatch } from "react-redux";
+import { useDispatch } from "react-redux";
 import { toggleSnackbar } from "../../actions";
 import OpenIcon from "@material-ui/icons/OpenInNew";
 import Pagination from "@material-ui/lab/Pagination";
@@ -12,14 +12,14 @@ import {
     CardHeader,
     Typography,
     Grid,
-    IconButton,
+    IconButton
 } from "@material-ui/core";
 import API from "../../middleware/Api";
 import TypeIcon from "../FileManager/TypeIcon";
 import Select from "@material-ui/core/Select";
 import MenuItem from "@material-ui/core/MenuItem";
 import FormControl from "@material-ui/core/FormControl";
-import {useHistory} from "react-router-dom";
+import { useHistory } from "react-router-dom";
 import { makeStyles } from "@material-ui/core/styles";
 import { useLocation } from "react-router";
 import TimeAgo from "timeago-react";
@@ -126,13 +126,13 @@ export default function SearchResult() {
     }, []);
 
     useEffect(() => {
-      const keywords = query.get("keywords");
-      if (keywords) {
-          search(keywords, page, orderBy);
-      } else {
-          ToggleSnackbar("top", "right", "请输入搜索关键词", "warning");
-      }
-  }, [location]);
+        const keywords = query.get("keywords");
+        if (keywords) {
+            search(keywords, page, orderBy);
+        } else {
+            ToggleSnackbar("top", "right", "请输入搜索关键词", "warning");
+        }
+    }, [location]);
 
     const handlePageChange = (event, value) => {
         setPage(value);
@@ -219,10 +219,7 @@ export default function SearchResult() {
                                     <Tooltip placement="top" title="打开">
                                         <IconButton
                                             onClick={() =>
-                                                history.push(
-                                                    "/s/" +
-                                                        value.key
-                                                )
+                                                history.push("/s/" + value.key)
                                             }
                                         >
                                             <OpenIcon />
@@ -248,10 +245,15 @@ export default function SearchResult() {
                                         </Typography>
                                     </Tooltip>
                                 }
-                                subheader={<span>分享于{" "}<TimeAgo
-                                    datetime={value.create_date}
-                                    locale="zh_CN"
-                                /></span>}
+                                subheader={
+                                    <span>
+                                        分享于{" "}
+                                        <TimeAgo
+                                            datetime={value.create_date}
+                                            locale="zh_CN"
+                                        />
+                                    </span>
+                                }
                             />
                         </Card>
                     </Grid>
diff --git a/src/component/Share/SharePreload.js b/src/component/Share/SharePreload.js
index 35da695..ed33aed 100644
--- a/src/component/Share/SharePreload.js
+++ b/src/component/Share/SharePreload.js
@@ -41,12 +41,12 @@ export default function SharePreload() {
         } else {
             SetSubTitle();
         }
-    }, [share,SetSubTitle,ToggleSnackbar]);
+    }, [share, SetSubTitle, ToggleSnackbar]);
 
     useEffect(() => {
         return () => {
             SetSubTitle();
-        }
+        };
         // eslint-disable-next-line
     }, []);
 
@@ -69,12 +69,12 @@ export default function SharePreload() {
                     ToggleSnackbar("top", "right", error.message, "error");
                 }
             });
-    }, [id, password,ToggleSnackbar]);
+    }, [id, password, ToggleSnackbar]);
 
     return (
         <Suspense fallback={<PageLoading />}>
             {share === undefined && <PageLoading />}
-            {share === null && <Notice msg={"分享不存在或已过期"}/>}
+            {share === null && <Notice msg={"分享不存在或已过期"} />}
             {share && share.locked && (
                 <LockedFile
                     loading={loading}
@@ -82,8 +82,12 @@ export default function SharePreload() {
                     share={share}
                 />
             )}
-            {share&&!share.locked&&!share.is_dir&&<SharedFile share={share}/>}
-            {share&&!share.locked&&share.is_dir&&<SharedFolder share={share}/>}
+            {share && !share.locked && !share.is_dir && (
+                <SharedFile share={share} />
+            )}
+            {share && !share.locked && share.is_dir && (
+                <SharedFolder share={share} />
+            )}
         </Suspense>
     );
 }
diff --git a/src/component/Share/SharedFile.js b/src/component/Share/SharedFile.js
index 644f93a..b6903db 100644
--- a/src/component/Share/SharedFile.js
+++ b/src/component/Share/SharedFile.js
@@ -2,7 +2,8 @@ import React, { Component } from "react";
 import { connect } from "react-redux";
 import { sizeToString, vhCheck } from "../../utils";
 import {
-    openMusicDialog, openResaveDialog,
+    openMusicDialog,
+    openResaveDialog,
     setSelectedTarget,
     showImgPreivew,
     toggleSnackbar
@@ -17,8 +18,7 @@ import { withRouter } from "react-router-dom";
 import Creator from "./Creator";
 import pathHelper from "../../utils/page";
 
-
-vhCheck()
+vhCheck();
 const styles = theme => ({
     layout: {
         width: "auto",
@@ -113,9 +113,9 @@ const mapDispatchToProps = dispatch => {
         showImgPreivew: first => {
             dispatch(showImgPreivew(first));
         },
-        openResave: (key) => {
+        openResave: key => {
             dispatch(openResaveDialog(key));
-        },
+        }
     };
 };
 
@@ -156,8 +156,8 @@ class SharedFileCompoment extends Component {
             case "msDoc":
                 this.props.history.push(
                     this.props.share.key +
-                    "/doc?name=" +
-                    encodeURIComponent(this.props.share.source.name)
+                        "/doc?name=" +
+                        encodeURIComponent(this.props.share.source.name)
                 );
                 return;
             case "audio":
@@ -177,20 +177,26 @@ class SharedFileCompoment extends Component {
                 );
                 return;
             case "edit":
-                this.props.history.push(this.props.share.key +
-                    "/text?name=" +
-                    encodeURIComponent(this.props.share.source.name));
-                return
+                this.props.history.push(
+                    this.props.share.key +
+                        "/text?name=" +
+                        encodeURIComponent(this.props.share.source.name)
+                );
+                return;
             case "pdf":
-                this.props.history.push(this.props.share.key +
-                    "/pdf?name=" +
-                    encodeURIComponent(this.props.share.source.name));
-                return
+                this.props.history.push(
+                    this.props.share.key +
+                        "/pdf?name=" +
+                        encodeURIComponent(this.props.share.source.name)
+                );
+                return;
             case "code":
-                this.props.history.push(this.props.share.key +
-                    "/code?name=" +
-                    encodeURIComponent(this.props.share.source.name));
-                return
+                this.props.history.push(
+                    this.props.share.key +
+                        "/code?name=" +
+                        encodeURIComponent(this.props.share.source.name)
+                );
+                return;
             default:
                 this.props.toggleSnackbar(
                     "top",
@@ -237,7 +243,7 @@ class SharedFileCompoment extends Component {
                 <Modals />
                 <ImgPreview />
                 <div className={classes.box}>
-                   <Creator share={this.props.share}/>
+                    <Creator share={this.props.share} />
                     <Divider />
                     <div className={classes.boxContent}>
                         <TypeIcon
@@ -258,18 +264,17 @@ class SharedFileCompoment extends Component {
                     <div className={classes.boxFooter}>
                         <div className={classes.actionLeft}>
                             {this.props.share.preview && (
-                            <Button
-                                variant="outlined"
-                                color="secondary"
-                                onClick={this.scoreHandle(this.preview)}
-                                disabled={this.state.loading}
-                            >
-                                预览
-                            </Button>
-                        )}
+                                <Button
+                                    variant="outlined"
+                                    color="secondary"
+                                    onClick={this.scoreHandle(this.preview)}
+                                    disabled={this.state.loading}
+                                >
+                                    预览
+                                </Button>
+                            )}
                         </div>
                         <div className={classes.actions}>
-
                             <Button
                                 variant="contained"
                                 color="secondary"
diff --git a/src/component/Upload/FileList.js b/src/component/Upload/FileList.js
index 5a60dd4..c32a765 100644
--- a/src/component/Upload/FileList.js
+++ b/src/component/Upload/FileList.js
@@ -71,8 +71,8 @@ const styles = theme => ({
         left: 0,
         top: 0
     },
-    fileName:{
-        wordBreak: "break-all",
+    fileName: {
+        wordBreak: "break-all"
     }
 });
 class FileList extends Component {
diff --git a/src/component/Upload/UploadIcon.js b/src/component/Upload/UploadIcon.js
index 69683e3..ab078b4 100644
--- a/src/component/Upload/UploadIcon.js
+++ b/src/component/Upload/UploadIcon.js
@@ -1 +1 @@
-// import React from 'react'
\ No newline at end of file
+// import React from 'react'
diff --git a/src/component/Viewer/Code.js b/src/component/Viewer/Code.js
index 8ba26f8..a7a0fca 100644
--- a/src/component/Viewer/Code.js
+++ b/src/component/Viewer/Code.js
@@ -40,10 +40,10 @@ const useStyles = makeStyles(theme => ({
         }
     },
     formControl: {
-        margin: "8px 16px 8px 16px",
+        margin: "8px 16px 8px 16px"
     },
-    toobar:{
-        textAlign:"right",
+    toobar: {
+        textAlign: "right"
     }
 }));
 
@@ -145,9 +145,11 @@ export default function CodeViewer() {
                             onChange={e => setSuffix(e.target.value)}
                         >
                             {Array.from(
-                                new Set(Object.keys(codePreviewSuffix).map(k=>{
-                                    return codePreviewSuffix[k]
-                                }))
+                                new Set(
+                                    Object.keys(codePreviewSuffix).map(k => {
+                                        return codePreviewSuffix[k];
+                                    })
+                                )
                             ).map((extension, index) => (
                                 <MenuItem value={extension} key={index}>
                                     {extension}
diff --git a/src/component/Viewer/Doc.js b/src/component/Viewer/Doc.js
index 43258a4..071701a 100644
--- a/src/component/Viewer/Doc.js
+++ b/src/component/Viewer/Doc.js
@@ -1,24 +1,23 @@
-import React, {useCallback, useEffect, useState} from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { makeStyles } from "@material-ui/core/styles";
-import {useLocation, useParams, useRouteMatch} from "react-router";
+import { useLocation, useParams, useRouteMatch } from "react-router";
 import API from "../../middleware/Api";
-import {useDispatch} from "react-redux";
-import {toggleSnackbar} from "../../actions";
+import { useDispatch } from "react-redux";
+import { toggleSnackbar } from "../../actions";
 import { changeSubTitle } from "../../redux/viewUpdate/action";
 import pathHelper from "../../utils/page";
 
 const useStyles = makeStyles(() => ({
     layout: {
         width: "auto",
-        marginTop: "-48px",
-
+        marginTop: "-48px"
     },
 
-    container:{
-        border:"none",
-        width:"100%",
+    container: {
+        border: "none",
+        width: "100%",
         height: "calc(100vh - 18px)",
-        marginBottom: -3,
+        marginBottom: -3
     }
 }));
 
@@ -27,7 +26,7 @@ function useQuery() {
 }
 
 export default function DocViewer() {
-    const [url,setURL] = useState("");
+    const [url, setURL] = useState("");
     const math = useRouteMatch();
     const location = useLocation();
     const query = useQuery();
@@ -35,10 +34,9 @@ export default function DocViewer() {
 
     const dispatch = useDispatch();
 
-    const SetSubTitle = useCallback(
-        title=>dispatch(changeSubTitle(title)),
-        [dispatch]
-    );
+    const SetSubTitle = useCallback(title => dispatch(changeSubTitle(title)), [
+        dispatch
+    ]);
 
     const ToggleSnackbar = useCallback(
         (vertical, horizontal, msg, color) =>
@@ -56,33 +54,31 @@ export default function DocViewer() {
         // eslint-disable-next-line
     }, [math.params[0], location]);
 
-    useEffect(()=>{
+    useEffect(() => {
         let requestURL = "/file/doc/" + query.get("id");
-        if (pathHelper.isSharePage(location.pathname)){
+        if (pathHelper.isSharePage(location.pathname)) {
             requestURL = "/share/doc/" + id;
-            if(query.get("share_path") !== ""){
-                requestURL +=("?path=" +encodeURIComponent(query.get("share_path")))
+            if (query.get("share_path") !== "") {
+                requestURL +=
+                    "?path=" + encodeURIComponent(query.get("share_path"));
             }
         }
         API.get(requestURL)
             .then(response => {
-                setURL(response.data)
+                setURL(response.data);
             })
             .catch(error => {
-                ToggleSnackbar(
-                    "top",
-                    "right",
-                    error.message,
-                    "error"
-                )
+                ToggleSnackbar("top", "right", error.message, "error");
             });
         // eslint-disable-next-line
-    },[math.params[0],location]);
+    }, [math.params[0], location]);
 
     const classes = useStyles();
     return (
         <div className={classes.layout}>
-            {url !== "" && <iframe title={"ms"} className={classes.container} src={url} />}
+            {url !== "" && (
+                <iframe title={"ms"} className={classes.container} src={url} />
+            )}
         </div>
     );
 }
diff --git a/src/component/Viewer/PDF.js b/src/component/Viewer/PDF.js
index 077d3f0..82fd4dd 100644
--- a/src/component/Viewer/PDF.js
+++ b/src/component/Viewer/PDF.js
@@ -82,7 +82,7 @@ export default function PDFViewer() {
         <div className={classes.layout}>
             <Document
                 onLoadSuccess={({ numPages }) => setPageNumber(numPages)}
-                onLoadError = {error=>{
+                onLoadError={error => {
                     ToggleSnackbar(
                         "top",
                         "right",
diff --git a/src/component/Viewer/Text.js b/src/component/Viewer/Text.js
index c3172fb..460de73 100644
--- a/src/component/Viewer/Text.js
+++ b/src/component/Viewer/Text.js
@@ -1,12 +1,12 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { Paper } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
-import {useLocation, useParams, useRouteMatch} from "react-router";
+import { useLocation, useParams, useRouteMatch } from "react-router";
 import API from "../../middleware/Api";
 import { useDispatch } from "react-redux";
 import { toggleSnackbar } from "../../actions";
 import { changeSubTitle } from "../../redux/viewUpdate/action";
-import Editor from 'for-editor'
+import Editor from "for-editor";
 import SaveButton from "../Dial/Save";
 import pathHelper from "../../utils/page";
 import TextLoading from "../Placeholder/TextLoading";
@@ -26,22 +26,21 @@ const useStyles = makeStyles(theme => ({
     player: {
         borderRadius: "4px"
     },
-    root:{
-        backgroundColor:"white",
-        borderRadius: "8px",
+    root: {
+        backgroundColor: "white",
+        borderRadius: "8px"
     },
     "@global": {
-        ".for-toolbar":{
-            overflowX:"auto!important",
-        },
-    },
+        ".for-toolbar": {
+            overflowX: "auto!important"
+        }
+    }
 }));
 
 function useQuery() {
     return new URLSearchParams(useLocation().search);
 }
 
-
 export default function TextViewer() {
     const [content, setContent] = useState("");
     const [status, setStatus] = useState("");
@@ -74,17 +73,18 @@ export default function TextViewer() {
 
     useEffect(() => {
         let requestURL = "/file/content/" + query.get("id");
-        if (pathHelper.isSharePage(location.pathname)){
+        if (pathHelper.isSharePage(location.pathname)) {
             requestURL = "/share/content/" + id;
-            if(query.get("share_path") !== ""){
-                requestURL +=("?path=" +encodeURIComponent(query.get("share_path")))
+            if (query.get("share_path") !== "") {
+                requestURL +=
+                    "?path=" + encodeURIComponent(query.get("share_path"));
             }
         }
 
         setLoading(true);
-        API.get(requestURL, { responseType: 'arraybuffer' })
+        API.get(requestURL, { responseType: "arraybuffer" })
             .then(response => {
-                const buffer = new Buffer(response.rawData, 'binary');
+                const buffer = new Buffer(response.rawData, "binary");
                 const textdata = buffer.toString(); // for string
                 setContent(textdata);
             })
@@ -94,75 +94,75 @@ export default function TextViewer() {
                     "right",
                     "无法读取文件内容，" + error.message,
                     "error"
-                )
-            }).then(()=>{
-            setLoading(false);
-        });
+                );
+            })
+            .then(() => {
+                setLoading(false);
+            });
         // eslint-disable-next-line
     }, [math.params[0]]);
 
-    const toBase64 = file => new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.readAsDataURL(file);
-        reader.onload = () => resolve(reader.result);
-        reader.onerror = error => reject(error);
-    });
+    const toBase64 = file =>
+        new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = () => resolve(reader.result);
+            reader.onerror = error => reject(error);
+        });
 
-    const save = ()=>{
+    const save = () => {
         setStatus("loading");
-        API.put("/file/update/" + query.get("id"),content)
+        API.put("/file/update/" + query.get("id"), content)
             .then(() => {
                 setStatus("success");
-                setTimeout(()=>setStatus(""),2000);
+                setTimeout(() => setStatus(""), 2000);
             })
             .catch(error => {
                 setStatus("");
-                ToggleSnackbar(
-                    "top",
-                    "right",
-                    error.message,
-                    "error"
-                )
+                ToggleSnackbar("top", "right", error.message, "error");
             });
     };
 
-    const addImg = async ($file) => {
+    const addImg = async $file => {
         $vm.current.$img2Url($file.name, await toBase64($file));
-        console.log($file)
+        console.log($file);
     };
 
     const classes = useStyles();
     return (
         <div className={classes.layout}>
-
             <Paper className={classes.root} elevation={1}>
-                {loading && <TextLoading/>}
-                {!loading && <Editor
-                    ref={$vm}
-                    value={content}
-                    onSave = {()=>save()}
-                    addImg={($file) => addImg($file)}
-                    onChange={value => setContent(value)}
-                    toolbar = {{
-                        h1: true, // h1
-                        h2: true, // h2
-                        h3: true, // h3
-                        h4: true, // h4
-                        img: true, // 图片
-                        link: true, // 链接
-                        code: true, // 代码块
-                        preview: true, // 预览
-                        expand: true, // 全屏
-                        /* v0.0.9 */
-                        undo: true, // 撤销
-                        redo: true, // 重做
-                        save: false, // 保存
-                        /* v0.2.3 */
-                        subfield: true, // 单双栏模式
-                    }}
-                />}
+                {loading && <TextLoading />}
+                {!loading && (
+                    <Editor
+                        ref={$vm}
+                        value={content}
+                        onSave={() => save()}
+                        addImg={$file => addImg($file)}
+                        onChange={value => setContent(value)}
+                        toolbar={{
+                            h1: true, // h1
+                            h2: true, // h2
+                            h3: true, // h3
+                            h4: true, // h4
+                            img: true, // 图片
+                            link: true, // 链接
+                            code: true, // 代码块
+                            preview: true, // 预览
+                            expand: true, // 全屏
+                            /* v0.0.9 */
+                            undo: true, // 撤销
+                            redo: true, // 重做
+                            save: false, // 保存
+                            /* v0.2.3 */
+                            subfield: true // 单双栏模式
+                        }}
+                    />
+                )}
             </Paper>
-            {!pathHelper.isSharePage(location.pathname) && <SaveButton onClick={save} status={status}/>}
+            {!pathHelper.isSharePage(location.pathname) && (
+                <SaveButton onClick={save} status={status} />
+            )}
         </div>
     );
 }
diff --git a/src/component/Viewer/Video.js b/src/component/Viewer/Video.js
index 1288824..c27618a 100644
--- a/src/component/Viewer/Video.js
+++ b/src/component/Viewer/Video.js
@@ -23,7 +23,7 @@ const useStyles = makeStyles(theme => ({
     },
     player: {
         borderRadius: "4px",
-        maxHeight:600,
+        maxHeight: 600
     }
 }));
 
@@ -62,13 +62,13 @@ export default function VideoViewer() {
                                 getBaseURL() +
                                 (pathHelper.isSharePage(location.pathname)
                                     ? "/share/preview/" +
-                                    id +
-                                    (query.get("share_path") !== ""
-                                        ? "?path=" +
-                                        encodeURIComponent(
-                                            query.get("share_path")
-                                        )
-                                        : "")
+                                      id +
+                                      (query.get("share_path") !== ""
+                                          ? "?path=" +
+                                            encodeURIComponent(
+                                                query.get("share_path")
+                                            )
+                                          : "")
                                     : "/file/preview/" + query.get("id"))
                         }
                     }}
diff --git a/src/config.js b/src/config.js
index a01f200..fa43dcf 100644
--- a/src/config.js
+++ b/src/config.js
@@ -1,109 +1,142 @@
-export const imgPreviewSuffix = ["bmp","png","gif","jpg","jpeg","svg","webp"];
-export const msDocPreviewSuffix = ["ppt","pptx","pps","doc","docx","xlsx","xls"];
-export const audioPreviewSuffix = ["mp3","ogg"];
-export const videoPreviewSuffix = ["mp4","mkv","webm"];
+export const imgPreviewSuffix = [
+    "bmp",
+    "png",
+    "gif",
+    "jpg",
+    "jpeg",
+    "svg",
+    "webp"
+];
+export const msDocPreviewSuffix = [
+    "ppt",
+    "pptx",
+    "pps",
+    "doc",
+    "docx",
+    "xlsx",
+    "xls"
+];
+export const audioPreviewSuffix = ["mp3", "ogg"];
+export const videoPreviewSuffix = ["mp4", "mkv", "webm"];
 export const pdfPreviewSuffix = ["pdf"];
-export const editSuffix = ["md","txt"];
+export const editSuffix = ["md", "txt"];
 export const codePreviewSuffix = {
-    "json":"json",
-    "php":"php",
-    "bat":"bat",
-    "cpp":"cpp",
-    "c":"cpp",
-    "h":"cpp",
-    "cs":"csharp",
-    "css":"css",
-    "dockerfile":"dockerfile",
-    "go":"go",
-    "html":"html",
-    "ini":"ini",
-    "java":"java",
-    "js":"javascript",
-    "jsx":"javascript",
-    "less":"less",
-    "lua":"lua",
-    "sh":"shell",
-    "sql":"sql",
-    "xml":"xml",
-    "yaml":"yaml",
+    json: "json",
+    php: "php",
+    bat: "bat",
+    cpp: "cpp",
+    c: "cpp",
+    h: "cpp",
+    cs: "csharp",
+    css: "css",
+    dockerfile: "dockerfile",
+    go: "go",
+    html: "html",
+    ini: "ini",
+    java: "java",
+    js: "javascript",
+    jsx: "javascript",
+    less: "less",
+    lua: "lua",
+    sh: "shell",
+    sql: "sql",
+    xml: "xml",
+    yaml: "yaml"
 };
 export const mediaType = {
-    audio:["mp3","flac","ape","wav","acc","ogg"],
-    video:["mp4","flv","avi","wmv","mkv","rm","rmvb","mov","ogv"],
-    image:["bmp","iff","png","gif","jpg","jpeg","psd","svg","webp"],
-    pdf:["pdf"],
-    word:["doc","docx"],
-    ppt:["ppt","pptx"],
-    excel:["xls","xlsx","csv"],
-    text:["txt","md","html"],
-    torrent:["torrent"],
-    zip:["zip","gz","tar","rar","7z"],
-    excute:["exe"],
-    android:["apk"],
-    php:["php"],
-    go:["go"],
-    python:["py"],
-    cpp:["cpp"],
-    c:["c"],
-    js:["js","jsx"],
+    audio: ["mp3", "flac", "ape", "wav", "acc", "ogg"],
+    video: ["mp4", "flv", "avi", "wmv", "mkv", "rm", "rmvb", "mov", "ogv"],
+    image: ["bmp", "iff", "png", "gif", "jpg", "jpeg", "psd", "svg", "webp"],
+    pdf: ["pdf"],
+    word: ["doc", "docx"],
+    ppt: ["ppt", "pptx"],
+    excel: ["xls", "xlsx", "csv"],
+    text: ["txt", "md", "html"],
+    torrent: ["torrent"],
+    zip: ["zip", "gz", "tar", "rar", "7z"],
+    excute: ["exe"],
+    android: ["apk"],
+    php: ["php"],
+    go: ["go"],
+    python: ["py"],
+    cpp: ["cpp"],
+    c: ["c"],
+    js: ["js", "jsx"]
 };
 export const policyTypeMap = {
-    local:"本机",
-    remote:"从机",
-    qiniu:"七牛",
-    upyun:"又拍云",
-    oss:"阿里云 OSS",
-    cos:"腾讯云",
-    onedrive:"OneDrive",
-    s3:"Amazon S3",
+    local: "本机",
+    remote: "从机",
+    qiniu: "七牛",
+    upyun: "又拍云",
+    oss: "阿里云 OSS",
+    cos: "腾讯云",
+    onedrive: "OneDrive",
+    s3: "Amazon S3"
 };
-export const isPreviewable = name=>{
-    const suffix = name.split(".").pop().toLowerCase();
-    if(imgPreviewSuffix.indexOf(suffix)!==-1){
+export const isPreviewable = name => {
+    const suffix = name
+        .split(".")
+        .pop()
+        .toLowerCase();
+    if (imgPreviewSuffix.indexOf(suffix) !== -1) {
         return "img";
-    }else if(msDocPreviewSuffix.indexOf(suffix)!==-1){
+    } else if (msDocPreviewSuffix.indexOf(suffix) !== -1) {
         return "msDoc";
-    }else if(audioPreviewSuffix.indexOf(suffix)!==-1){
+    } else if (audioPreviewSuffix.indexOf(suffix) !== -1) {
         return "audio";
-    }else if(videoPreviewSuffix.indexOf(suffix)!==-1){
+    } else if (videoPreviewSuffix.indexOf(suffix) !== -1) {
         return "video";
-    }else if(editSuffix.indexOf(suffix)!==-1){
+    } else if (editSuffix.indexOf(suffix) !== -1) {
         return "edit";
-    }else if(pdfPreviewSuffix.indexOf(suffix)!==-1){
+    } else if (pdfPreviewSuffix.indexOf(suffix) !== -1) {
         return "pdf";
-    }else if(Object.keys(codePreviewSuffix).indexOf(suffix)!==-1){
+    } else if (Object.keys(codePreviewSuffix).indexOf(suffix) !== -1) {
         return "code";
     }
     return false;
-}
-export const isTorrent = name=>{
-    const suffix = name.split(".").pop().toLowerCase();
-    if(mediaType.torrent.indexOf(suffix)!==-1){
+};
+export const isTorrent = name => {
+    const suffix = name
+        .split(".")
+        .pop()
+        .toLowerCase();
+    if (mediaType.torrent.indexOf(suffix) !== -1) {
         return true;
     }
     return false;
-}
+};
 
-export const isCompressFile = name=>{
-    const suffix = name.split(".").pop().toLowerCase();
-    return suffix === "zip"
-}
+export const isCompressFile = name => {
+    const suffix = name
+        .split(".")
+        .pop()
+        .toLowerCase();
+    return suffix === "zip";
+};
 
-const taskStatus = ["排队中","处理中","失败","取消","已完成"];
-const taskType = ["压缩","解压缩","文件中转","导入外部目录"];
-const taskProgress = ["等待中","压缩中","解压缩中","下载中","转存中","索引中","插入中"];
+const taskStatus = ["排队中", "处理中", "失败", "取消", "已完成"];
+const taskType = ["压缩", "解压缩", "文件中转", "导入外部目录"];
+const taskProgress = [
+    "等待中",
+    "压缩中",
+    "解压缩中",
+    "下载中",
+    "转存中",
+    "索引中",
+    "插入中"
+];
 
-export const getTaskStatus = status =>{
+export const getTaskStatus = status => {
     return taskStatus[status];
-}
+};
 
-export const getTaskType = status =>{
+export const getTaskType = status => {
     return taskType[status];
-}
+};
 
-export const getTaskProgress = (type,status) =>{
-    if (type === 2){
-        return "已完成 " + (status+1) + " 个文件"
+export const getTaskProgress = (type, status) => {
+    if (type === 2) {
+        return "已完成 " + (status + 1) + " 个文件";
     }
     return taskProgress[status];
-}
\ No newline at end of file
+};
diff --git a/src/loader/index.js b/src/loader/index.js
index dfdd31b..35904c3 100644
--- a/src/loader/index.js
+++ b/src/loader/index.js
@@ -27,41 +27,41 @@ const removeFailedScript = () => {
 };
 
 export function startLoadingScripts(scripts, onComplete = noop) {
-  // sequence load
-  const loadNewScript = script => {
-      const src = typeof script === "object" ? script.src : script;
-      if (loadedScript.indexOf(src) < 0) {
-          return taskComplete => {
-              const callbacks = pendingScripts[src] || [];
-              callbacks.push(taskComplete);
-              pendingScripts[src] = callbacks;
-              if (callbacks.length === 1) {
-                  return newScript(script)(err => {
-                      pendingScripts[src].forEach(cb => cb(err, src));
-                      delete pendingScripts[src];
-                  });
-              }
-          };
-      }
-  };
-  const tasks = scripts.map(src => {
-      if (Array.isArray(src)) {
-          return src.map(loadNewScript);
-      } else return loadNewScript(src);
-  });
+    // sequence load
+    const loadNewScript = script => {
+        const src = typeof script === "object" ? script.src : script;
+        if (loadedScript.indexOf(src) < 0) {
+            return taskComplete => {
+                const callbacks = pendingScripts[src] || [];
+                callbacks.push(taskComplete);
+                pendingScripts[src] = callbacks;
+                if (callbacks.length === 1) {
+                    return newScript(script)(err => {
+                        pendingScripts[src].forEach(cb => cb(err, src));
+                        delete pendingScripts[src];
+                    });
+                }
+            };
+        }
+    };
+    const tasks = scripts.map(src => {
+        if (Array.isArray(src)) {
+            return src.map(loadNewScript);
+        } else return loadNewScript(src);
+    });
 
-  series(...tasks)((err, src) => {
-      if (err) {
-          failedScript.push(src);
-      } else {
-          if (Array.isArray(src)) {
-              src.forEach(addCache);
-          } else addCache(src);
-      }
-  })(err => {
-      removeFailedScript();
-      onComplete(err);
-  });
+    series(...tasks)((err, src) => {
+        if (err) {
+            failedScript.push(src);
+        } else {
+            if (Array.isArray(src)) {
+                src.forEach(addCache);
+            } else addCache(src);
+        }
+    })(err => {
+        removeFailedScript();
+        onComplete(err);
+    });
 }
 
 const uploaderLoader = () => WrappedComponent => {
diff --git a/src/loader/utils.js b/src/loader/utils.js
index 51a5960..39434bb 100644
--- a/src/loader/utils.js
+++ b/src/loader/utils.js
@@ -1,106 +1,109 @@
-export const isDefined = val => val != null
-export const isFunction = val => typeof val === 'function'
+export const isDefined = val => val != null;
+export const isFunction = val => typeof val === "function";
 // eslint-disable-next-line @typescript-eslint/no-empty-function
-export const noop = () => { }
+export const noop = () => {};
 
-export const newScript = (src) => (cb) => {
-  const scriptElem = document.createElement('script')
-  if (typeof src === 'object') {
-    // copy every property to the element
-    for (const key in src) {
-      if (Object.prototype.hasOwnProperty.call(src, key)) {
-        scriptElem[key] = src[key];
-      }
+export const newScript = src => cb => {
+    const scriptElem = document.createElement("script");
+    if (typeof src === "object") {
+        // copy every property to the element
+        for (const key in src) {
+            if (Object.prototype.hasOwnProperty.call(src, key)) {
+                scriptElem[key] = src[key];
+            }
+        }
+        src = src.src;
+    } else {
+        scriptElem.src = src;
     }
-    src = src.src;
-  } else {
-    scriptElem.src = src
-  }
-  scriptElem.addEventListener('load', () => cb(null, src))
-  scriptElem.addEventListener('error', () => cb(true, src))
-  document.body.appendChild(scriptElem)
-  return scriptElem
-}
+    scriptElem.addEventListener("load", () => cb(null, src));
+    scriptElem.addEventListener("error", () => cb(true, src));
+    document.body.appendChild(scriptElem);
+    return scriptElem;
+};
 
-const keyIterator = (cols) => {
-  const keys = Object.keys(cols)
-  let i = -1
-  return {
-    next () {
-      i++ // inc
-      if (i >= keys.length) return null
-      else return keys[i]
-    }
-  }
-}
+const keyIterator = cols => {
+    const keys = Object.keys(cols);
+    let i = -1;
+    return {
+        next() {
+            i++; // inc
+            if (i >= keys.length) return null;
+            else return keys[i];
+        }
+    };
+};
 
 // tasks should be a collection of thunk
-export const parallel = (...tasks) => (each) => (cb) => {
-  let hasError = false
-  let successed = 0
-  const ret = []
-  tasks = tasks.filter(isFunction)
+export const parallel = (...tasks) => each => cb => {
+    let hasError = false;
+    let successed = 0;
+    const ret = [];
+    tasks = tasks.filter(isFunction);
 
-  if (tasks.length <= 0) cb(null)
-  else {
-    tasks.forEach((task, i) => {
-      const thunk = task
-      thunk((err, ...args) => {
-        if (err) hasError = true
-        else {
-          // collect result
-          if (args.length <= 1) args = args[0]
+    if (tasks.length <= 0) cb(null);
+    else {
+        tasks.forEach((task, i) => {
+            const thunk = task;
+            thunk((err, ...args) => {
+                if (err) hasError = true;
+                else {
+                    // collect result
+                    if (args.length <= 1) args = args[0];
 
-          ret[i] = args
-          successed ++
-        }
+                    ret[i] = args;
+                    successed++;
+                }
 
-        if (isFunction(each)) each.call(null, err, args, i)
+                if (isFunction(each)) each.call(null, err, args, i);
 
-        if (hasError) cb(true)
-        else if (tasks.length === successed) {
-          cb(null, ret)
-        }
-      })
-    })
-  }
-}
+                if (hasError) cb(true);
+                else if (tasks.length === successed) {
+                    cb(null, ret);
+                }
+            });
+        });
+    }
+};
 
 // tasks should be a collection of thunk
-export const series = (...tasks) => (each) => (cb) => {
-  tasks = tasks.filter(val => val != null)
-  const nextKey = keyIterator(tasks)
-  const nextThunk = () => {
-    const key = nextKey.next()
-    let thunk = tasks[key]
-    // eslint-disable-next-line prefer-spread
-    if (Array.isArray(thunk)) thunk = parallel.apply(null, thunk).call(null, each)
-    return [ +key, thunk ] // convert `key` to number
-  }
-  let key, thunk
-  let next = nextThunk()
-  key = next[0]
-  thunk = next[1]
-  if (thunk == null) return cb(null)
+export const series = (...tasks) => each => cb => {
+    tasks = tasks.filter(val => val != null);
+    const nextKey = keyIterator(tasks);
+    const nextThunk = () => {
+        const key = nextKey.next();
+        let thunk = tasks[key];
+        // eslint-disable-next-line prefer-spread
+        if (Array.isArray(thunk))
+            // eslint-disable-next-line prefer-spread
+            thunk = parallel.apply(null, thunk).call(null, each);
+        return [+key, thunk]; // convert `key` to number
+    };
+    let key, thunk;
+    let next = nextThunk();
+    key = next[0];
+    thunk = next[1];
+    if (thunk == null) return cb(null);
 
-  const ret = []
-  const iterator = () => {
-    thunk((err, ...args) => {
-      if (args.length <= 1) args = args[0]
-      if (isFunction(each)) each.call(null, err, args, key)
+    const ret = [];
+    const iterator = () => {
+        thunk((err, ...args) => {
+            if (args.length <= 1) args = args[0];
+            if (isFunction(each)) each.call(null, err, args, key);
 
-      if (err) cb(err)
-      else {
-        // collect result
-        ret.push(args)
+            if (err) cb(err);
+            else {
+                // collect result
+                ret.push(args);
 
-        next = nextThunk()
-        key = next[0]
-        thunk = next[1]
-        if (thunk == null) return cb(null, ret) // finished
-        else iterator()
-      }
-    })
-  }
-  iterator()
-}
+                next = nextThunk();
+                key = next[0];
+                thunk = next[1];
+                if (thunk == null) return cb(null, ret);
+                // finished
+                else iterator();
+            }
+        });
+    };
+    iterator();
+};
diff --git a/src/middleware/Auth.ts b/src/middleware/Auth.ts
index 5b69c1b..7709f8b 100644
--- a/src/middleware/Auth.ts
+++ b/src/middleware/Auth.ts
@@ -4,21 +4,20 @@ const Auth = {
         Auth.SetUser(cb);
         Auth.isAuthenticated = true;
     },
-    GetUser(){
-        return JSON.parse(localStorage.getItem("user") || "null")
+    GetUser() {
+        return JSON.parse(localStorage.getItem("user") || "null");
     },
-    SetUser(newUser: any){
+    SetUser(newUser: any) {
         localStorage.setItem("user", JSON.stringify(newUser));
     },
     Check(): boolean {
         if (Auth.isAuthenticated) {
             return true;
         }
-        if (localStorage.getItem("user") !== null){
+        if (localStorage.getItem("user") !== null) {
             return !Auth.GetUser().anonymous;
         }
-        return false
-
+        return false;
     },
     signout() {
         Auth.isAuthenticated = false;
@@ -26,19 +25,23 @@ const Auth = {
         oldUser.id = 0;
         localStorage.setItem("user", JSON.stringify(oldUser));
     },
-    SetPreference(key: string,value: any){
-        let preference = JSON.parse(localStorage.getItem("user_preference") || '{}');
-        preference = (preference == null) ? {} : preference;
+    SetPreference(key: string, value: any) {
+        let preference = JSON.parse(
+            localStorage.getItem("user_preference") || "{}"
+        );
+        preference = preference == null ? {} : preference;
         preference[key] = value;
         localStorage.setItem("user_preference", JSON.stringify(preference));
     },
-    GetPreference(key: string): any | null{
-        const preference = JSON.parse(localStorage.getItem("user_preference") || '{}');
-        if (preference && preference[key]){
+    GetPreference(key: string): any | null {
+        const preference = JSON.parse(
+            localStorage.getItem("user_preference") || "{}"
+        );
+        if (preference && preference[key]) {
             return preference[key];
         }
         return null;
-    },
+    }
 };
 
 export default Auth;
diff --git a/src/middleware/AuthRoute.js b/src/middleware/AuthRoute.js
index 9e25845..b0cd095 100644
--- a/src/middleware/AuthRoute.js
+++ b/src/middleware/AuthRoute.js
@@ -1,28 +1,25 @@
 import React from "react";
-import Auth from "./Auth"
-import {
-    Route,
-    Redirect,
-  } from "react-router-dom";
+import Auth from "./Auth";
+import { Route, Redirect } from "react-router-dom";
 
 function AuthRoute({ children, ...rest }) {
     return (
-      <Route
-        {...rest}
-        render={({ location }) =>
-        Auth.Check(rest.isLogin) ? (
-            children
-          ) : (
-            <Redirect
-              to={{
-                pathname: "/login",
-                state: { from: location }
-              }}
-            />
-          )
-        }
-      />
+        <Route
+            {...rest}
+            render={({ location }) =>
+                Auth.Check(rest.isLogin) ? (
+                    children
+                ) : (
+                    <Redirect
+                        to={{
+                            pathname: "/login",
+                            state: { from: location }
+                        }}
+                    />
+                )
+            }
+        />
     );
-  }
+}
 
-export default AuthRoute
\ No newline at end of file
+export default AuthRoute;
diff --git a/src/middleware/NoAuthRoute.js b/src/middleware/NoAuthRoute.js
index 23613ef..622626e 100644
--- a/src/middleware/NoAuthRoute.js
+++ b/src/middleware/NoAuthRoute.js
@@ -1,28 +1,25 @@
 import React from "react";
-import Auth from "./Auth"
-import {
-    Route,
-    Redirect,
-  } from "react-router-dom";
+import Auth from "./Auth";
+import { Route, Redirect } from "react-router-dom";
 
 function NoAuthRoute({ children, ...rest }) {
     return (
-      <Route
-        {...rest}
-        render={({ location }) =>
-        !Auth.Check(rest.isLogin) ? (
-            children
-          ) : (
-            <Redirect
-              to={{
-                pathname: "/home",
-                state: { from: location }
-              }}
-            />
-          )
-        }
-      />
+        <Route
+            {...rest}
+            render={({ location }) =>
+                !Auth.Check(rest.isLogin) ? (
+                    children
+                ) : (
+                    <Redirect
+                        to={{
+                            pathname: "/home",
+                            state: { from: location }
+                        }}
+                    />
+                )
+            }
+        />
     );
-  }
+}
 
-export default NoAuthRoute
\ No newline at end of file
+export default NoAuthRoute;
diff --git a/src/pages/download.app.js b/src/pages/download.app.js
index d14015a..37ae1ac 100644
--- a/src/pages/download.app.js
+++ b/src/pages/download.app.js
@@ -1,47 +1,46 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Navbar from "../component/Navbar/Navbar.js"
-import AlertBar from "../component/Common/Snackbar"
-import { createMuiTheme } from '@material-ui/core/styles';
-import Download from '../component/Download/Download'
-import { CssBaseline, withStyles, MuiThemeProvider } from '@material-ui/core';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import Navbar from "../component/Navbar/Navbar.js";
+import AlertBar from "../component/Common/Snackbar";
+import { createMuiTheme } from "@material-ui/core/styles";
+import Download from "../component/Download/Download";
+import { CssBaseline, withStyles, MuiThemeProvider } from "@material-ui/core";
 const theme = createMuiTheme(window.colorTheme);
 const styles = theme => ({
-
-	root: {
-		display: 'flex',
-	},
-	content: {
-		flexGrow: 1,
-		padding: theme.spacing(0),
-		minWidth: 0,
-	},
-	toolbar: theme.mixins.toolbar,
+    root: {
+        display: "flex"
+    },
+    content: {
+        flexGrow: 1,
+        padding: theme.spacing(0),
+        minWidth: 0
+    },
+    toolbar: theme.mixins.toolbar
 });
 
 class DownloadList extends Component {
-
-	render() {
-		const { classes } = this.props;
-		return (
-			<React.Fragment>
-				<MuiThemeProvider theme={theme}>
-					<div className={classes.root} id="container">
-						<CssBaseline />
-						<AlertBar/>
-						<Navbar />
-						<main className={classes.content}>
-							<div className={classes.toolbar} />
-							<Download/>
-						</main>
-					</div></MuiThemeProvider>
-			</React.Fragment>
-		);
-	}
+    render() {
+        const { classes } = this.props;
+        return (
+            <React.Fragment>
+                <MuiThemeProvider theme={theme}>
+                    <div className={classes.root} id="container">
+                        <CssBaseline />
+                        <AlertBar />
+                        <Navbar />
+                        <main className={classes.content}>
+                            <div className={classes.toolbar} />
+                            <Download />
+                        </main>
+                    </div>
+                </MuiThemeProvider>
+            </React.Fragment>
+        );
+    }
 }
 
 DownloadList.propTypes = {
-	classes: PropTypes.object.isRequired,
+    classes: PropTypes.object.isRequired
 };
 
 export default withStyles(styles)(DownloadList);
diff --git a/src/pages/download.js b/src/pages/download.js
index cd5d01c..848caf2 100644
--- a/src/pages/download.js
+++ b/src/pages/download.js
@@ -1,66 +1,66 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React from "react";
+import ReactDOM from "react-dom";
 
-import { Provider } from 'react-redux'
-import { createStore } from 'redux'
-import DownloadApp from "./download.app"
-import cloureveApp from '../reducers'
+import { Provider } from "react-redux";
+import { createStore } from "redux";
+import DownloadApp from "./download.app";
+import cloureveApp from "../reducers";
 
 const defaultStatus = {
-    navigator:{
-        path:window.path,
-        refresh:true,
+    navigator: {
+        path: window.path,
+        refresh: true
     },
-    viewUpdate:{
-        open:window.isHomePage,
+    viewUpdate: {
+        open: window.isHomePage,
         explorerViewMethod: "icon",
-        sortMethod:"timePos",
-        contextType:"none",  
-        menuOpen:false,
-        navigatorLoading:true,
-        navigatorError:false,
-        navigatorErrorMsg:null,
-        modalsLoading:false,
-        storageRefresh:false,
-        modals:{
-            createNewFolder:false,
-            rename:false,
-            move:false,
-            remove:false,
-            share:false,
-            music:false,
-            remoteDownload:false,
-            torrentDownload:false,
+        sortMethod: "timePos",
+        contextType: "none",
+        menuOpen: false,
+        navigatorLoading: true,
+        navigatorError: false,
+        navigatorErrorMsg: null,
+        modalsLoading: false,
+        storageRefresh: false,
+        modals: {
+            createNewFolder: false,
+            rename: false,
+            move: false,
+            remove: false,
+            share: false,
+            music: false,
+            remoteDownload: false,
+            torrentDownload: false
         },
-        snackbar:{
-            toggle:false,
-            vertical:"top",
-            horizontal:"center",
-            msg:"",
-            color:"",
+        snackbar: {
+            toggle: false,
+            vertical: "top",
+            horizontal: "center",
+            msg: "",
+            color: ""
         }
     },
-    explorer:{
-        fileList:[],
-        dirList:[
-        ],
-        selected:[],
-        selectProps:{
-            isMultiple:false,
-            withFolder:false,
-            withFile:false,
+    explorer: {
+        fileList: [],
+        dirList: [],
+        selected: [],
+        selectProps: {
+            isMultiple: false,
+            withFolder: false,
+            withFile: false
         },
-        imgPreview:{
-            first:null,
-            other:[],
+        imgPreview: {
+            first: null,
+            other: []
         },
-        keywords:null,
+        keywords: null
     }
 };
 
-const store = createStore(cloureveApp,defaultStatus)
+const store = createStore(cloureveApp, defaultStatus);
 ReactDOM.render(
     <Provider store={store}>
-        <DownloadApp/>
-    </Provider>
-, document.getElementById('root'));
+        <DownloadApp />
+    </Provider>,
+    document.getElementById("root")
+);
diff --git a/src/pages/fileShare.app.js b/src/pages/fileShare.app.js
index dcceead..768c5f3 100644
--- a/src/pages/fileShare.app.js
+++ b/src/pages/fileShare.app.js
@@ -1,47 +1,46 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Navbar from "../component/Navbar/Navbar.js"
-import AlertBar from "../component/Common/Snackbar"
-import { createMuiTheme } from '@material-ui/core/styles';
-import SharedFile from '../component/Share/SharedFile'
-import { CssBaseline, withStyles, MuiThemeProvider } from '@material-ui/core';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import Navbar from "../component/Navbar/Navbar.js";
+import AlertBar from "../component/Common/Snackbar";
+import { createMuiTheme } from "@material-ui/core/styles";
+import SharedFile from "../component/Share/SharedFile";
+import { CssBaseline, withStyles, MuiThemeProvider } from "@material-ui/core";
 const theme = createMuiTheme(window.colorTheme);
 const styles = theme => ({
-
-	root: {
-		display: 'flex',
-	},
-	content: {
-		flexGrow: 1,
-		padding: theme.spacing(0),
-		minWidth: 0,
-	},
-	toolbar: theme.mixins.toolbar,
+    root: {
+        display: "flex"
+    },
+    content: {
+        flexGrow: 1,
+        padding: theme.spacing(0),
+        minWidth: 0
+    },
+    toolbar: theme.mixins.toolbar
 });
 
 class FileShareApp extends Component {
-
-	render() {
-		const { classes } = this.props;
-		return (
-			<React.Fragment>
-				<MuiThemeProvider theme={theme}>
-					<div className={classes.root} id="container">
-						<CssBaseline />
-						<AlertBar/>
-						<Navbar />
-						<main className={classes.content}>
-							<div className={classes.toolbar} />
-							<SharedFile/>
-						</main>
-					</div></MuiThemeProvider>
-			</React.Fragment>
-		);
-	}
+    render() {
+        const { classes } = this.props;
+        return (
+            <React.Fragment>
+                <MuiThemeProvider theme={theme}>
+                    <div className={classes.root} id="container">
+                        <CssBaseline />
+                        <AlertBar />
+                        <Navbar />
+                        <main className={classes.content}>
+                            <div className={classes.toolbar} />
+                            <SharedFile />
+                        </main>
+                    </div>
+                </MuiThemeProvider>
+            </React.Fragment>
+        );
+    }
 }
 
 FileShareApp.propTypes = {
-	classes: PropTypes.object.isRequired,
+    classes: PropTypes.object.isRequired
 };
 
 export default withStyles(styles)(FileShareApp);
diff --git a/src/pages/fileShare.js b/src/pages/fileShare.js
index 83d1eb6..ac2930a 100644
--- a/src/pages/fileShare.js
+++ b/src/pages/fileShare.js
@@ -1,67 +1,67 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React from "react";
+import ReactDOM from "react-dom";
 
-import { Provider } from 'react-redux'
-import { createStore } from 'redux'
-import FileShareApp from "./fileShare.app"
-import cloureveApp from '../reducers'
+import { Provider } from "react-redux";
+import { createStore } from "redux";
+import FileShareApp from "./fileShare.app";
+import cloureveApp from "../reducers";
 
 const defaultStatus = {
-    navigator:{
-        path:window.path,
-        refresh:true,
+    navigator: {
+        path: window.path,
+        refresh: true
     },
-    viewUpdate:{
-        open:window.isHomePage,
+    viewUpdate: {
+        open: window.isHomePage,
         explorerViewMethod: "icon",
-        sortMethod:"timePos",
-        contextType:"none",  
-        menuOpen:false,
-        navigatorLoading:true,
-        navigatorError:false,
-        navigatorErrorMsg:null,
-        modalsLoading:false,
-        storageRefresh:false,
-        modals:{
-            createNewFolder:false,
-            rename:false,
-            move:false,
-            remove:false,
-            share:false,
-            music:false,
-            remoteDownload:false,
-            torrentDownload:false,
-            resave:false,
+        sortMethod: "timePos",
+        contextType: "none",
+        menuOpen: false,
+        navigatorLoading: true,
+        navigatorError: false,
+        navigatorErrorMsg: null,
+        modalsLoading: false,
+        storageRefresh: false,
+        modals: {
+            createNewFolder: false,
+            rename: false,
+            move: false,
+            remove: false,
+            share: false,
+            music: false,
+            remoteDownload: false,
+            torrentDownload: false,
+            resave: false
         },
-        snackbar:{
-            toggle:false,
-            vertical:"top",
-            horizontal:"center",
-            msg:"",
-            color:"",
+        snackbar: {
+            toggle: false,
+            vertical: "top",
+            horizontal: "center",
+            msg: "",
+            color: ""
         }
     },
-    explorer:{
-        fileList:[],
-        dirList:[
-        ],
-        selected:[],
-        selectProps:{
-            isMultiple:false,
-            withFolder:false,
-            withFile:false,
+    explorer: {
+        fileList: [],
+        dirList: [],
+        selected: [],
+        selectProps: {
+            isMultiple: false,
+            withFolder: false,
+            withFile: false
         },
-        imgPreview:{
-            first:null,
-            other:[],
+        imgPreview: {
+            first: null,
+            other: []
         },
-        keywords:null,
+        keywords: null
     }
 };
 
-const store = createStore(cloureveApp,defaultStatus)
+const store = createStore(cloureveApp, defaultStatus);
 ReactDOM.render(
     <Provider store={store}>
-        <FileShareApp/>
-    </Provider>
-, document.getElementById('root'));
+        <FileShareApp />
+    </Provider>,
+    document.getElementById("root")
+);
diff --git a/src/pages/folderShare.app.js b/src/pages/folderShare.app.js
index 05bd443..9511282 100644
--- a/src/pages/folderShare.app.js
+++ b/src/pages/folderShare.app.js
@@ -1,50 +1,49 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
 
-import Navbar from "../component/Navbar/Navbar.js"
-import AlertBar from "../component/Common/Snackbar"
-import FileManager from "../component/FileManager/FileManager"
-import { createMuiTheme } from '@material-ui/core/styles';
+import Navbar from "../component/Navbar/Navbar.js";
+import AlertBar from "../component/Common/Snackbar";
+import FileManager from "../component/FileManager/FileManager";
+import { createMuiTheme } from "@material-ui/core/styles";
 
-import { CssBaseline, withStyles, MuiThemeProvider } from '@material-ui/core';
+import { CssBaseline, withStyles, MuiThemeProvider } from "@material-ui/core";
 
 const theme = createMuiTheme(window.colorTheme);
 const styles = theme => ({
-
-	root: {
-		display: 'flex',
-	},
-	content: {
-		flexGrow: 1,
-		padding: theme.spacing(0),
-		minWidth: 0,
-	},
-	toolbar: theme.mixins.toolbar,
+    root: {
+        display: "flex"
+    },
+    content: {
+        flexGrow: 1,
+        padding: theme.spacing(0),
+        minWidth: 0
+    },
+    toolbar: theme.mixins.toolbar
 });
 
 class FolderShareApp extends Component {
-
-	render() {
-		const { classes } = this.props;
-		return (
-			<React.Fragment>
-				<MuiThemeProvider theme={theme}>
-					<div className={classes.root} id="container">
-						<CssBaseline />
-						<AlertBar/>
-						<Navbar />
-						<main className={classes.content}>
-							<div className={classes.toolbar} />
-							<FileManager/>
-						</main>
-					</div></MuiThemeProvider>
-			</React.Fragment>
-		);
-	}
+    render() {
+        const { classes } = this.props;
+        return (
+            <React.Fragment>
+                <MuiThemeProvider theme={theme}>
+                    <div className={classes.root} id="container">
+                        <CssBaseline />
+                        <AlertBar />
+                        <Navbar />
+                        <main className={classes.content}>
+                            <div className={classes.toolbar} />
+                            <FileManager />
+                        </main>
+                    </div>
+                </MuiThemeProvider>
+            </React.Fragment>
+        );
+    }
 }
 
 FolderShareApp.propTypes = {
-	classes: PropTypes.object.isRequired,
+    classes: PropTypes.object.isRequired
 };
 
 export default withStyles(styles)(FolderShareApp);
diff --git a/src/pages/folderShare.js b/src/pages/folderShare.js
index 207a1ae..97e27b9 100644
--- a/src/pages/folderShare.js
+++ b/src/pages/folderShare.js
@@ -1,67 +1,67 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React from "react";
+import ReactDOM from "react-dom";
 
-import { Provider } from 'react-redux'
-import { createStore } from 'redux'
-import FolderShareApp from "./folderShare.app"
-import cloureveApp from '../reducers'
+import { Provider } from "react-redux";
+import { createStore } from "redux";
+import FolderShareApp from "./folderShare.app";
+import cloureveApp from "../reducers";
 const defaultStatus = {
-    navigator:{
-        path:window.path,
-        refresh:true,
+    navigator: {
+        path: window.path,
+        refresh: true
     },
-    viewUpdate:{
-        open:window.isHomePage,
+    viewUpdate: {
+        open: window.isHomePage,
         explorerViewMethod: "icon",
-        sortMethod:"timePos",
-        contextType:"none",  
-        menuOpen:false,
-        navigatorLoading:true,
-        navigatorError:false,
-        navigatorErrorMsg:null,
-        modalsLoading:false,
-        storageRefresh:false,
-        modals:{
-            createNewFolder:false,
-            rename:false,
-            move:false,
-            remove:false,
-            share:false,
-            music:false,
-            remoteDownload:false,
-            torrentDownload:false,
-            getSource:false,
+        sortMethod: "timePos",
+        contextType: "none",
+        menuOpen: false,
+        navigatorLoading: true,
+        navigatorError: false,
+        navigatorErrorMsg: null,
+        modalsLoading: false,
+        storageRefresh: false,
+        modals: {
+            createNewFolder: false,
+            rename: false,
+            move: false,
+            remove: false,
+            share: false,
+            music: false,
+            remoteDownload: false,
+            torrentDownload: false,
+            getSource: false
         },
-        snackbar:{
-            toggle:false,
-            vertical:"top",
-            horizontal:"center",
-            msg:"",
-            color:"",
+        snackbar: {
+            toggle: false,
+            vertical: "top",
+            horizontal: "center",
+            msg: "",
+            color: ""
         }
     },
-    explorer:{
-        fileList:[],
-        fileSave:false,
-        dirList:[
-        ],
-        selected:[],
-        selectProps:{
-            isMultiple:false,
-            withFolder:false,
-            withFile:false,
+    explorer: {
+        fileList: [],
+        fileSave: false,
+        dirList: [],
+        selected: [],
+        selectProps: {
+            isMultiple: false,
+            withFolder: false,
+            withFile: false
         },
-        imgPreview:{
-            first:null,
-            other:[],
+        imgPreview: {
+            first: null,
+            other: []
         },
-        keywords:null,
+        keywords: null
     }
 };
 
-const store = createStore(cloureveApp,defaultStatus)
+const store = createStore(cloureveApp, defaultStatus);
 ReactDOM.render(
     <Provider store={store}>
-        <FolderShareApp/>
-    </Provider>
-, document.getElementById('root'));
+        <FolderShareApp />
+    </Provider>,
+    document.getElementById("root")
+);
diff --git a/src/pages/lock.app.js b/src/pages/lock.app.js
index 875474a..c970428 100644
--- a/src/pages/lock.app.js
+++ b/src/pages/lock.app.js
@@ -1,47 +1,46 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Navbar from "../component/Navbar/Navbar.js"
-import AlertBar from "../component/Common/Snackbar"
-import { createMuiTheme } from '@material-ui/core/styles';
-import LockedFile from '../component/Share/LockedFile'
-import { CssBaseline, withStyles, MuiThemeProvider } from '@material-ui/core';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import Navbar from "../component/Navbar/Navbar.js";
+import AlertBar from "../component/Common/Snackbar";
+import { createMuiTheme } from "@material-ui/core/styles";
+import LockedFile from "../component/Share/LockedFile";
+import { CssBaseline, withStyles, MuiThemeProvider } from "@material-ui/core";
 const theme = createMuiTheme(window.colorTheme);
 const styles = theme => ({
-
-	root: {
-		display: 'flex',
-	},
-	content: {
-		flexGrow: 1,
-		padding: theme.spacing(0),
-		minWidth: 0,
-	},
-	toolbar: theme.mixins.toolbar,
+    root: {
+        display: "flex"
+    },
+    content: {
+        flexGrow: 1,
+        padding: theme.spacing(0),
+        minWidth: 0
+    },
+    toolbar: theme.mixins.toolbar
 });
 
 class LockApp extends Component {
-
-	render() {
-		const { classes } = this.props;
-		return (
-			<React.Fragment>
-				<MuiThemeProvider theme={theme}>
-					<div className={classes.root} id="container">
-						<CssBaseline />
-						<AlertBar/>
-						<Navbar />
-						<main className={classes.content}>
-							<div className={classes.toolbar} />
-							<LockedFile/>
-						</main>
-					</div></MuiThemeProvider>
-			</React.Fragment>
-		);
-	}
+    render() {
+        const { classes } = this.props;
+        return (
+            <React.Fragment>
+                <MuiThemeProvider theme={theme}>
+                    <div className={classes.root} id="container">
+                        <CssBaseline />
+                        <AlertBar />
+                        <Navbar />
+                        <main className={classes.content}>
+                            <div className={classes.toolbar} />
+                            <LockedFile />
+                        </main>
+                    </div>
+                </MuiThemeProvider>
+            </React.Fragment>
+        );
+    }
 }
 
 LockApp.propTypes = {
-	classes: PropTypes.object.isRequired,
+    classes: PropTypes.object.isRequired
 };
 
 export default withStyles(styles)(LockApp);
diff --git a/src/pages/lock.js b/src/pages/lock.js
index 5bf9b76..30ddaad 100644
--- a/src/pages/lock.js
+++ b/src/pages/lock.js
@@ -1,66 +1,66 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React from "react";
+import ReactDOM from "react-dom";
 
-import { Provider } from 'react-redux'
-import { createStore } from 'redux'
-import LockApp from "./lock.app"
-import cloureveApp from '../reducers'
+import { Provider } from "react-redux";
+import { createStore } from "redux";
+import LockApp from "./lock.app";
+import cloureveApp from "../reducers";
 
 const defaultStatus = {
-    navigator:{
-        path:window.path,
-        refresh:true,
+    navigator: {
+        path: window.path,
+        refresh: true
     },
-    viewUpdate:{
-        open:window.isHomePage,
+    viewUpdate: {
+        open: window.isHomePage,
         explorerViewMethod: "icon",
-        sortMethod:"timePos",
-        contextType:"none",  
-        menuOpen:false,
-        navigatorLoading:true,
-        navigatorError:false,
-        navigatorErrorMsg:null,
-        modalsLoading:false,
-        storageRefresh:false,
-        modals:{
-            createNewFolder:false,
-            rename:false,
-            move:false,
-            remove:false,
-            share:false,
-            music:false,
-            remoteDownload:false,
-            torrentDownload:false,
+        sortMethod: "timePos",
+        contextType: "none",
+        menuOpen: false,
+        navigatorLoading: true,
+        navigatorError: false,
+        navigatorErrorMsg: null,
+        modalsLoading: false,
+        storageRefresh: false,
+        modals: {
+            createNewFolder: false,
+            rename: false,
+            move: false,
+            remove: false,
+            share: false,
+            music: false,
+            remoteDownload: false,
+            torrentDownload: false
         },
-        snackbar:{
-            toggle:false,
-            vertical:"top",
-            horizontal:"center",
-            msg:"",
-            color:"",
+        snackbar: {
+            toggle: false,
+            vertical: "top",
+            horizontal: "center",
+            msg: "",
+            color: ""
         }
     },
-    explorer:{
-        fileList:[],
-        dirList:[
-        ],
-        selected:[],
-        selectProps:{
-            isMultiple:false,
-            withFolder:false,
-            withFile:false,
+    explorer: {
+        fileList: [],
+        dirList: [],
+        selected: [],
+        selectProps: {
+            isMultiple: false,
+            withFolder: false,
+            withFile: false
         },
-        imgPreview:{
-            first:null,
-            other:[],
+        imgPreview: {
+            first: null,
+            other: []
         },
-        keywords:null,
+        keywords: null
     }
 };
 
-const store = createStore(cloureveApp,defaultStatus)
+const store = createStore(cloureveApp, defaultStatus);
 ReactDOM.render(
     <Provider store={store}>
-        <LockApp/>
-    </Provider>
-, document.getElementById('root'));
+        <LockApp />
+    </Provider>,
+    document.getElementById("root")
+);
diff --git a/src/pages/login.app.js b/src/pages/login.app.js
index 4db3c9f..57fdbdf 100644
--- a/src/pages/login.app.js
+++ b/src/pages/login.app.js
@@ -1,59 +1,62 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Navbar from "../component/Navbar/Navbar.js"
-import AlertBar from "../component/Common/Snackbar"
-import { createMuiTheme } from '@material-ui/core/styles';
-import LoginForm from "../component/Login/LoginForm"
-import TwoStep from "../component/Login/TwoStep"
-import RegisterForm from "../component/Login/RegisterForm"
-import EmailActivication from "../component/Login/EmailActivication"
-import ResetPwd from "../component/Login/ResetPwd"
-import ResetPwdForm from "../component/Login/ResetPwdForm"
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import Navbar from "../component/Navbar/Navbar.js";
+import AlertBar from "../component/Common/Snackbar";
+import { createMuiTheme } from "@material-ui/core/styles";
+import LoginForm from "../component/Login/LoginForm";
+import TwoStep from "../component/Login/TwoStep";
+import RegisterForm from "../component/Login/RegisterForm";
+import EmailActivication from "../component/Login/EmailActivication";
+import ResetPwd from "../component/Login/ResetPwd";
+import ResetPwdForm from "../component/Login/ResetPwdForm";
 
-import { CssBaseline, withStyles, MuiThemeProvider } from '@material-ui/core';
+import { CssBaseline, withStyles, MuiThemeProvider } from "@material-ui/core";
 
 const theme = createMuiTheme(window.colorTheme);
 const styles = theme => ({
-
-	root: {
-		display: 'flex',
-	},
-	content: {
-		flexGrow: 1,
-		padding: theme.spacing(0),
-		minWidth: 0,
-	},
-	toolbar: theme.mixins.toolbar,
+    root: {
+        display: "flex"
+    },
+    content: {
+        flexGrow: 1,
+        padding: theme.spacing(0),
+        minWidth: 0
+    },
+    toolbar: theme.mixins.toolbar
 });
 
 class LoginApp extends Component {
-
-	render() {
-		const { classes } = this.props;
-		return (
-			<React.Fragment>
-				<MuiThemeProvider theme={theme}>
-					<div className={classes.root} id="container">
-						<CssBaseline />
-						<AlertBar/>
-						<Navbar />
-						<main className={classes.content}>
-							<div className={classes.toolbar} />
-							{window.pageId==="login"&&<LoginForm/>}
-							{window.pageId==="TwoStep"&&<TwoStep/>}
-							{window.pageId==="register"&&<RegisterForm/>}
-							{window.pageId==="emailActivate"&&<EmailActivication/>}
-							{window.pageId==="resetPwd"&&<ResetPwd/>}
-							{window.pageId==="resetPwdForm"&&<ResetPwdForm/>}
-						</main>
-					</div></MuiThemeProvider>
-			</React.Fragment>
-		);
-	}
+    render() {
+        const { classes } = this.props;
+        return (
+            <React.Fragment>
+                <MuiThemeProvider theme={theme}>
+                    <div className={classes.root} id="container">
+                        <CssBaseline />
+                        <AlertBar />
+                        <Navbar />
+                        <main className={classes.content}>
+                            <div className={classes.toolbar} />
+                            {window.pageId === "login" && <LoginForm />}
+                            {window.pageId === "TwoStep" && <TwoStep />}
+                            {window.pageId === "register" && <RegisterForm />}
+                            {window.pageId === "emailActivate" && (
+                                <EmailActivication />
+                            )}
+                            {window.pageId === "resetPwd" && <ResetPwd />}
+                            {window.pageId === "resetPwdForm" && (
+                                <ResetPwdForm />
+                            )}
+                        </main>
+                    </div>
+                </MuiThemeProvider>
+            </React.Fragment>
+        );
+    }
 }
 
 LoginApp.propTypes = {
-	classes: PropTypes.object.isRequired,
+    classes: PropTypes.object.isRequired
 };
 
 export default withStyles(styles)(LoginApp);
diff --git a/src/pages/login.js b/src/pages/login.js
index 20bcc45..e7664c6 100644
--- a/src/pages/login.js
+++ b/src/pages/login.js
@@ -1,66 +1,66 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React from "react";
+import ReactDOM from "react-dom";
 
-import { Provider } from 'react-redux'
-import { createStore } from 'redux'
-import LoginApp from "./login.app"
-import cloureveApp from '../reducers'
+import { Provider } from "react-redux";
+import { createStore } from "redux";
+import LoginApp from "./login.app";
+import cloureveApp from "../reducers";
 
 const defaultStatus = {
-    navigator:{
-        path:window.path,
-        refresh:true,
+    navigator: {
+        path: window.path,
+        refresh: true
     },
-    viewUpdate:{
-        open:window.isHomePage,
+    viewUpdate: {
+        open: window.isHomePage,
         explorerViewMethod: "icon",
-        sortMethod:"timePos",
-        contextType:"none",  
-        menuOpen:false,
-        navigatorLoading:true,
-        navigatorError:false,
-        navigatorErrorMsg:null,
-        modalsLoading:false,
-        storageRefresh:false,
-        modals:{
-            createNewFolder:false,
-            rename:false,
-            move:false,
-            remove:false,
-            share:false,
-            music:false,
-            remoteDownload:false,
-            torrentDownload:false,
+        sortMethod: "timePos",
+        contextType: "none",
+        menuOpen: false,
+        navigatorLoading: true,
+        navigatorError: false,
+        navigatorErrorMsg: null,
+        modalsLoading: false,
+        storageRefresh: false,
+        modals: {
+            createNewFolder: false,
+            rename: false,
+            move: false,
+            remove: false,
+            share: false,
+            music: false,
+            remoteDownload: false,
+            torrentDownload: false
         },
-        snackbar:{
-            toggle:false,
-            vertical:"top",
-            horizontal:"center",
-            msg:"",
-            color:"",
+        snackbar: {
+            toggle: false,
+            vertical: "top",
+            horizontal: "center",
+            msg: "",
+            color: ""
         }
     },
-    explorer:{
-        fileList:[],
-        dirList:[
-        ],
-        selected:[],
-        selectProps:{
-            isMultiple:false,
-            withFolder:false,
-            withFile:false,
+    explorer: {
+        fileList: [],
+        dirList: [],
+        selected: [],
+        selectProps: {
+            isMultiple: false,
+            withFolder: false,
+            withFile: false
         },
-        imgPreview:{
-            first:null,
-            other:[],
+        imgPreview: {
+            first: null,
+            other: []
         },
-        keywords:null,
+        keywords: null
     }
 };
 
-const store = createStore(cloureveApp,defaultStatus)
+const store = createStore(cloureveApp, defaultStatus);
 ReactDOM.render(
     <Provider store={store}>
-        <LoginApp/>
-    </Provider>
-, document.getElementById('root'));
+        <LoginApp />
+    </Provider>,
+    document.getElementById("root")
+);
diff --git a/src/pages/markdown.app.js b/src/pages/markdown.app.js
index 116de00..d6a4c37 100644
--- a/src/pages/markdown.app.js
+++ b/src/pages/markdown.app.js
@@ -1,50 +1,49 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
 
-import Navbar from "../component/Navbar/Navbar.js"
-import AlertBar from "../component/Common/Snackbar"
-import MarkdownViewer from "../component/Viewer/Markdown"
-import { createMuiTheme } from '@material-ui/core/styles';
+import Navbar from "../component/Navbar/Navbar.js";
+import AlertBar from "../component/Common/Snackbar";
+import MarkdownViewer from "../component/Viewer/Markdown";
+import { createMuiTheme } from "@material-ui/core/styles";
 
-import { CssBaseline, withStyles, MuiThemeProvider } from '@material-ui/core';
+import { CssBaseline, withStyles, MuiThemeProvider } from "@material-ui/core";
 
 const theme = createMuiTheme(window.colorTheme);
 const styles = theme => ({
-
-	root: {
-		display: 'flex',
-	},
-	content: {
-		flexGrow: 1,
-		padding: theme.spacing(0),
-		minWidth: 0,
-	},
-	toolbar: theme.mixins.toolbar,
+    root: {
+        display: "flex"
+    },
+    content: {
+        flexGrow: 1,
+        padding: theme.spacing(0),
+        minWidth: 0
+    },
+    toolbar: theme.mixins.toolbar
 });
 
 class MarkdownApp extends Component {
-
-	render() {
-		const { classes } = this.props;
-		return (
-			<React.Fragment>
-				<MuiThemeProvider theme={theme}>
-					<div className={classes.root} id="container">
-						<CssBaseline />
-						<AlertBar/>
-						<Navbar />
-						<main className={classes.content}>
-							<div className={classes.toolbar} />
-							<MarkdownViewer/>
-						</main>
-					</div></MuiThemeProvider>
-			</React.Fragment>
-		);
-	}
+    render() {
+        const { classes } = this.props;
+        return (
+            <React.Fragment>
+                <MuiThemeProvider theme={theme}>
+                    <div className={classes.root} id="container">
+                        <CssBaseline />
+                        <AlertBar />
+                        <Navbar />
+                        <main className={classes.content}>
+                            <div className={classes.toolbar} />
+                            <MarkdownViewer />
+                        </main>
+                    </div>
+                </MuiThemeProvider>
+            </React.Fragment>
+        );
+    }
 }
 
 MarkdownApp.propTypes = {
-	classes: PropTypes.object.isRequired,
+    classes: PropTypes.object.isRequired
 };
 
 export default withStyles(styles)(MarkdownApp);
diff --git a/src/pages/markdown.js b/src/pages/markdown.js
index 133b894..fe1027f 100644
--- a/src/pages/markdown.js
+++ b/src/pages/markdown.js
@@ -1,66 +1,66 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React from "react";
+import ReactDOM from "react-dom";
 
-import { Provider } from 'react-redux'
-import { createStore } from 'redux'
-import cloureveApp from '../reducers'
-import MarkdownApp from "./markdown.app"
+import { Provider } from "react-redux";
+import { createStore } from "redux";
+import cloureveApp from "../reducers";
+import MarkdownApp from "./markdown.app";
 const defaultStatus = {
-    navigator:{
-        path:window.path,
-        refresh:true,
+    navigator: {
+        path: window.path,
+        refresh: true
     },
-    viewUpdate:{
-        open:window.isHomePage,
+    viewUpdate: {
+        open: window.isHomePage,
         explorerViewMethod: "icon",
-        sortMethod:"timePos",
-        contextType:"none",  
-        menuOpen:false,
-        navigatorLoading:true,
-        navigatorError:false,
-        navigatorErrorMsg:null,
-        modalsLoading:false,
-        storageRefresh:false,
-        modals:{
-            createNewFolder:false,
-            rename:false,
-            move:false,
-            remove:false,
-            share:false,
-            music:false,
-            remoteDownload:false,
-            torrentDownload:false,
+        sortMethod: "timePos",
+        contextType: "none",
+        menuOpen: false,
+        navigatorLoading: true,
+        navigatorError: false,
+        navigatorErrorMsg: null,
+        modalsLoading: false,
+        storageRefresh: false,
+        modals: {
+            createNewFolder: false,
+            rename: false,
+            move: false,
+            remove: false,
+            share: false,
+            music: false,
+            remoteDownload: false,
+            torrentDownload: false
         },
-        snackbar:{
-            toggle:false,
-            vertical:"top",
-            horizontal:"center",
-            msg:"",
-            color:"",
+        snackbar: {
+            toggle: false,
+            vertical: "top",
+            horizontal: "center",
+            msg: "",
+            color: ""
         }
     },
-    explorer:{
-        fileList:[],
-        fileSave:false,
-        dirList:[
-        ],
-        selected:[{path:"/",name:window.fileInfo.name,type:"file"}],
-        selectProps:{
-            isMultiple:false,
-            withFolder:false,
-            withFile:true,
+    explorer: {
+        fileList: [],
+        fileSave: false,
+        dirList: [],
+        selected: [{ path: "/", name: window.fileInfo.name, type: "file" }],
+        selectProps: {
+            isMultiple: false,
+            withFolder: false,
+            withFile: true
         },
-        imgPreview:{
-            first:null,
-            other:[],
+        imgPreview: {
+            first: null,
+            other: []
         },
-        keywords:null,
+        keywords: null
     }
 };
 
-const store = createStore(cloureveApp,defaultStatus)
+const store = createStore(cloureveApp, defaultStatus);
 ReactDOM.render(
     <Provider store={store}>
-        <MarkdownApp/>
-    </Provider>
-, document.getElementById('root'));
+        <MarkdownApp />
+    </Provider>,
+    document.getElementById("root")
+);
diff --git a/src/pages/myShare.app.js b/src/pages/myShare.app.js
index 44ec095..50d3dc9 100644
--- a/src/pages/myShare.app.js
+++ b/src/pages/myShare.app.js
@@ -1,47 +1,46 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Navbar from "../component/Navbar/Navbar.js"
-import AlertBar from "../component/Common/Snackbar"
-import { createMuiTheme } from '@material-ui/core/styles';
-import MyShare from '../component/Share/MyShare'
-import { CssBaseline, withStyles, MuiThemeProvider } from '@material-ui/core';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import Navbar from "../component/Navbar/Navbar.js";
+import AlertBar from "../component/Common/Snackbar";
+import { createMuiTheme } from "@material-ui/core/styles";
+import MyShare from "../component/Share/MyShare";
+import { CssBaseline, withStyles, MuiThemeProvider } from "@material-ui/core";
 const theme = createMuiTheme(window.colorTheme);
 const styles = theme => ({
-
-	root: {
-		display: 'flex',
-	},
-	content: {
-		flexGrow: 1,
-		padding: theme.spacing(0),
-		minWidth: 0,
-	},
-	toolbar: theme.mixins.toolbar,
+    root: {
+        display: "flex"
+    },
+    content: {
+        flexGrow: 1,
+        padding: theme.spacing(0),
+        minWidth: 0
+    },
+    toolbar: theme.mixins.toolbar
 });
 
 class MyShareApp extends Component {
-
-	render() {
-		const { classes } = this.props;
-		return (
-			<React.Fragment>
-				<MuiThemeProvider theme={theme}>
-					<div className={classes.root} id="container">
-						<CssBaseline />
-						<AlertBar/>
-						<Navbar />
-						<main className={classes.content}>
-							<div className={classes.toolbar} />
-							<MyShare/>
-						</main>
-					</div></MuiThemeProvider>
-			</React.Fragment>
-		);
-	}
+    render() {
+        const { classes } = this.props;
+        return (
+            <React.Fragment>
+                <MuiThemeProvider theme={theme}>
+                    <div className={classes.root} id="container">
+                        <CssBaseline />
+                        <AlertBar />
+                        <Navbar />
+                        <main className={classes.content}>
+                            <div className={classes.toolbar} />
+                            <MyShare />
+                        </main>
+                    </div>
+                </MuiThemeProvider>
+            </React.Fragment>
+        );
+    }
 }
 
 MyShareApp.propTypes = {
-	classes: PropTypes.object.isRequired,
+    classes: PropTypes.object.isRequired
 };
 
 export default withStyles(styles)(MyShareApp);
diff --git a/src/pages/myShare.js b/src/pages/myShare.js
index 8acb30d..e0257fd 100644
--- a/src/pages/myShare.js
+++ b/src/pages/myShare.js
@@ -1,66 +1,66 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React from "react";
+import ReactDOM from "react-dom";
 
-import { Provider } from 'react-redux'
-import { createStore } from 'redux'
-import MyShareApp from "./myShare.app"
-import cloureveApp from '../reducers'
+import { Provider } from "react-redux";
+import { createStore } from "redux";
+import MyShareApp from "./myShare.app";
+import cloureveApp from "../reducers";
 
 const defaultStatus = {
-    navigator:{
-        path:window.path,
-        refresh:true,
+    navigator: {
+        path: window.path,
+        refresh: true
     },
-    viewUpdate:{
-        open:window.isHomePage,
+    viewUpdate: {
+        open: window.isHomePage,
         explorerViewMethod: "icon",
-        sortMethod:"timePos",
-        contextType:"none",  
-        menuOpen:false,
-        navigatorLoading:true,
-        navigatorError:false,
-        navigatorErrorMsg:null,
-        modalsLoading:false,
-        storageRefresh:false,
-        modals:{
-            createNewFolder:false,
-            rename:false,
-            move:false,
-            remove:false,
-            share:false,
-            music:false,
-            remoteDownload:false,
-            torrentDownload:false,
+        sortMethod: "timePos",
+        contextType: "none",
+        menuOpen: false,
+        navigatorLoading: true,
+        navigatorError: false,
+        navigatorErrorMsg: null,
+        modalsLoading: false,
+        storageRefresh: false,
+        modals: {
+            createNewFolder: false,
+            rename: false,
+            move: false,
+            remove: false,
+            share: false,
+            music: false,
+            remoteDownload: false,
+            torrentDownload: false
         },
-        snackbar:{
-            toggle:false,
-            vertical:"top",
-            horizontal:"center",
-            msg:"",
-            color:"",
+        snackbar: {
+            toggle: false,
+            vertical: "top",
+            horizontal: "center",
+            msg: "",
+            color: ""
         }
     },
-    explorer:{
-        fileList:[],
-        dirList:[
-        ],
-        selected:[],
-        selectProps:{
-            isMultiple:false,
-            withFolder:false,
-            withFile:false,
+    explorer: {
+        fileList: [],
+        dirList: [],
+        selected: [],
+        selectProps: {
+            isMultiple: false,
+            withFolder: false,
+            withFile: false
         },
-        imgPreview:{
-            first:null,
-            other:[],
+        imgPreview: {
+            first: null,
+            other: []
         },
-        keywords:null,
+        keywords: null
     }
 };
 
-const store = createStore(cloureveApp,defaultStatus)
+const store = createStore(cloureveApp, defaultStatus);
 ReactDOM.render(
     <Provider store={store}>
-        <MyShareApp/>
-    </Provider>
-, document.getElementById('root'));
+        <MyShareApp />
+    </Provider>,
+    document.getElementById("root")
+);
diff --git a/src/pages/profile.app.js b/src/pages/profile.app.js
index 2d30ba2..78b40fe 100644
--- a/src/pages/profile.app.js
+++ b/src/pages/profile.app.js
@@ -1,47 +1,46 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Navbar from "../component/Navbar/Navbar.js"
-import AlertBar from "../component/Common/Snackbar"
-import { createMuiTheme } from '@material-ui/core/styles';
-import Profile from '../component/Setting/Profile'
-import { CssBaseline, withStyles, MuiThemeProvider } from '@material-ui/core';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import Navbar from "../component/Navbar/Navbar.js";
+import AlertBar from "../component/Common/Snackbar";
+import { createMuiTheme } from "@material-ui/core/styles";
+import Profile from "../component/Setting/Profile";
+import { CssBaseline, withStyles, MuiThemeProvider } from "@material-ui/core";
 const theme = createMuiTheme(window.colorTheme);
 const styles = theme => ({
-
-	root: {
-		display: 'flex',
-	},
-	content: {
-		flexGrow: 1,
-		padding: theme.spacing(0),
-		minWidth: 0,
-	},
-	toolbar: theme.mixins.toolbar,
+    root: {
+        display: "flex"
+    },
+    content: {
+        flexGrow: 1,
+        padding: theme.spacing(0),
+        minWidth: 0
+    },
+    toolbar: theme.mixins.toolbar
 });
 
 class ProfileApp extends Component {
-
-	render() {
-		const { classes } = this.props;
-		return (
-			<React.Fragment>
-				<MuiThemeProvider theme={theme}>
-					<div className={classes.root} id="container">
-						<CssBaseline />
-						<AlertBar/>
-						<Navbar />
-						<main className={classes.content}>
-							<div className={classes.toolbar} />
-							<Profile/>
-						</main>
-					</div></MuiThemeProvider>
-			</React.Fragment>
-		);
-	}
+    render() {
+        const { classes } = this.props;
+        return (
+            <React.Fragment>
+                <MuiThemeProvider theme={theme}>
+                    <div className={classes.root} id="container">
+                        <CssBaseline />
+                        <AlertBar />
+                        <Navbar />
+                        <main className={classes.content}>
+                            <div className={classes.toolbar} />
+                            <Profile />
+                        </main>
+                    </div>
+                </MuiThemeProvider>
+            </React.Fragment>
+        );
+    }
 }
 
 ProfileApp.propTypes = {
-	classes: PropTypes.object.isRequired,
+    classes: PropTypes.object.isRequired
 };
 
 export default withStyles(styles)(ProfileApp);
diff --git a/src/pages/profile.js b/src/pages/profile.js
index 22e8f5e..afe6fbb 100644
--- a/src/pages/profile.js
+++ b/src/pages/profile.js
@@ -1,66 +1,66 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React from "react";
+import ReactDOM from "react-dom";
 
-import { Provider } from 'react-redux'
-import { createStore } from 'redux'
-import ProfileApp from "./profile.app"
-import cloureveApp from '../reducers'
+import { Provider } from "react-redux";
+import { createStore } from "redux";
+import ProfileApp from "./profile.app";
+import cloureveApp from "../reducers";
 
 const defaultStatus = {
-    navigator:{
-        path:window.path,
-        refresh:true,
+    navigator: {
+        path: window.path,
+        refresh: true
     },
-    viewUpdate:{
-        open:window.isHomePage,
+    viewUpdate: {
+        open: window.isHomePage,
         explorerViewMethod: "icon",
-        sortMethod:"timePos",
-        contextType:"none",  
-        menuOpen:false,
-        navigatorLoading:true,
-        navigatorError:false,
-        navigatorErrorMsg:null,
-        modalsLoading:false,
-        storageRefresh:false,
-        modals:{
-            createNewFolder:false,
-            rename:false,
-            move:false,
-            remove:false,
-            share:false,
-            music:false,
-            remoteDownload:false,
-            torrentDownload:false,
+        sortMethod: "timePos",
+        contextType: "none",
+        menuOpen: false,
+        navigatorLoading: true,
+        navigatorError: false,
+        navigatorErrorMsg: null,
+        modalsLoading: false,
+        storageRefresh: false,
+        modals: {
+            createNewFolder: false,
+            rename: false,
+            move: false,
+            remove: false,
+            share: false,
+            music: false,
+            remoteDownload: false,
+            torrentDownload: false
         },
-        snackbar:{
-            toggle:false,
-            vertical:"top",
-            horizontal:"center",
-            msg:"",
-            color:"",
+        snackbar: {
+            toggle: false,
+            vertical: "top",
+            horizontal: "center",
+            msg: "",
+            color: ""
         }
     },
-    explorer:{
-        fileList:[],
-        dirList:[
-        ],
-        selected:[],
-        selectProps:{
-            isMultiple:false,
-            withFolder:false,
-            withFile:false,
+    explorer: {
+        fileList: [],
+        dirList: [],
+        selected: [],
+        selectProps: {
+            isMultiple: false,
+            withFolder: false,
+            withFile: false
         },
-        imgPreview:{
-            first:null,
-            other:[],
+        imgPreview: {
+            first: null,
+            other: []
         },
-        keywords:null,
+        keywords: null
     }
 };
 
-const store = createStore(cloureveApp,defaultStatus)
+const store = createStore(cloureveApp, defaultStatus);
 ReactDOM.render(
     <Provider store={store}>
-        <ProfileApp/>
-    </Provider>
-, document.getElementById('root'));
+        <ProfileApp />
+    </Provider>,
+    document.getElementById("root")
+);
diff --git a/src/pages/quota.app.js b/src/pages/quota.app.js
index 2f9e07e..42384d4 100644
--- a/src/pages/quota.app.js
+++ b/src/pages/quota.app.js
@@ -1,62 +1,63 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Navbar from "../component/Navbar/Navbar.js"
-import AlertBar from "../component/Common/Snackbar"
-import Quota from "../component/VAS/Quota"
-import BuyQuota from "../component/VAS/BuyQuota"
-import { createMuiTheme } from '@material-ui/core/styles';
-import { checkGetParameters } from '../utils/index';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import Navbar from "../component/Navbar/Navbar.js";
+import AlertBar from "../component/Common/Snackbar";
+import Quota from "../component/VAS/Quota";
+import BuyQuota from "../component/VAS/BuyQuota";
+import { createMuiTheme } from "@material-ui/core/styles";
+import { checkGetParameters } from "../utils/index";
 
-import { CssBaseline, withStyles, MuiThemeProvider } from '@material-ui/core';
+import { CssBaseline, withStyles, MuiThemeProvider } from "@material-ui/core";
 
 const theme = createMuiTheme(window.colorTheme);
 const styles = theme => ({
-
-	root: {
-		display: 'flex',
-	},
-	content: {
-		flexGrow: 1,
-		padding: theme.spacing(0),
-		minWidth: 0,
-	},
-	toolbar: theme.mixins.toolbar,
+    root: {
+        display: "flex"
+    },
+    content: {
+        flexGrow: 1,
+        padding: theme.spacing(0),
+        minWidth: 0
+    },
+    toolbar: theme.mixins.toolbar
 });
 
 class QuatoApp extends Component {
-
-	render() {
-		const { classes } = this.props;
-		return (
-			<React.Fragment>
-				<MuiThemeProvider theme={theme}>
-					<div className={classes.root} id="container">
-						<CssBaseline />
-						<AlertBar/>
-						<Navbar />
-						<main className={classes.content}>
-							<div className={classes.toolbar} />
-							{checkGetParameters("buyPack")&&
-								<BuyQuota tabID={0}/>
-							}
-							{checkGetParameters("buyGroup")&&
-								<BuyQuota tabID={1}/>
-							}
-							{checkGetParameters("redeem")&&
-								<BuyQuota tabID={2}/>
-							}
-							{!checkGetParameters("redeem")&&!(checkGetParameters("buyGroup")||checkGetParameters("buyPack"))&&
-								<Quota/>
-							}
-						</main>
-					</div></MuiThemeProvider>
-			</React.Fragment>
-		);
-	}
+    render() {
+        const { classes } = this.props;
+        return (
+            <React.Fragment>
+                <MuiThemeProvider theme={theme}>
+                    <div className={classes.root} id="container">
+                        <CssBaseline />
+                        <AlertBar />
+                        <Navbar />
+                        <main className={classes.content}>
+                            <div className={classes.toolbar} />
+                            {checkGetParameters("buyPack") && (
+                                <BuyQuota tabID={0} />
+                            )}
+                            {checkGetParameters("buyGroup") && (
+                                <BuyQuota tabID={1} />
+                            )}
+                            {checkGetParameters("redeem") && (
+                                <BuyQuota tabID={2} />
+                            )}
+                            {!checkGetParameters("redeem") &&
+                                !(
+                                    checkGetParameters("buyGroup") ||
+                                    checkGetParameters("buyPack")
+                                ) && <Quota />}
+                        </main>
+                    </div>
+                </MuiThemeProvider>
+            </React.Fragment>
+        );
+    }
 }
 
 QuatoApp.propTypes = {
-	classes: PropTypes.object.isRequired,
+    classes: PropTypes.object.isRequired
 };
 
 export default withStyles(styles)(QuatoApp);
diff --git a/src/pages/quota.js b/src/pages/quota.js
index be03d07..c3e5677 100644
--- a/src/pages/quota.js
+++ b/src/pages/quota.js
@@ -1,66 +1,66 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React from "react";
+import ReactDOM from "react-dom";
 
-import { Provider } from 'react-redux'
-import { createStore } from 'redux'
-import QuotaApp from "./quota.app"
-import cloureveApp from '../reducers'
+import { Provider } from "react-redux";
+import { createStore } from "redux";
+import QuotaApp from "./quota.app";
+import cloureveApp from "../reducers";
 
 const defaultStatus = {
-    navigator:{
-        path:window.path,
-        refresh:true,
+    navigator: {
+        path: window.path,
+        refresh: true
     },
-    viewUpdate:{
-        open:window.isHomePage,
+    viewUpdate: {
+        open: window.isHomePage,
         explorerViewMethod: "icon",
-        sortMethod:"timePos",
-        contextType:"none",  
-        menuOpen:false,
-        navigatorLoading:true,
-        navigatorError:false,
-        navigatorErrorMsg:null,
-        modalsLoading:false,
-        storageRefresh:false,
-        modals:{
-            createNewFolder:false,
-            rename:false,
-            move:false,
-            remove:false,
-            share:false,
-            music:false,
-            remoteDownload:false,
-            torrentDownload:false,
+        sortMethod: "timePos",
+        contextType: "none",
+        menuOpen: false,
+        navigatorLoading: true,
+        navigatorError: false,
+        navigatorErrorMsg: null,
+        modalsLoading: false,
+        storageRefresh: false,
+        modals: {
+            createNewFolder: false,
+            rename: false,
+            move: false,
+            remove: false,
+            share: false,
+            music: false,
+            remoteDownload: false,
+            torrentDownload: false
         },
-        snackbar:{
-            toggle:false,
-            vertical:"top",
-            horizontal:"center",
-            msg:"",
-            color:"",
+        snackbar: {
+            toggle: false,
+            vertical: "top",
+            horizontal: "center",
+            msg: "",
+            color: ""
         }
     },
-    explorer:{
-        fileList:[],
-        dirList:[
-        ],
-        selected:[],
-        selectProps:{
-            isMultiple:false,
-            withFolder:false,
-            withFile:false,
+    explorer: {
+        fileList: [],
+        dirList: [],
+        selected: [],
+        selectProps: {
+            isMultiple: false,
+            withFolder: false,
+            withFile: false
         },
-        imgPreview:{
-            first:null,
-            other:[],
+        imgPreview: {
+            first: null,
+            other: []
         },
-        keywords:null,
+        keywords: null
     }
 };
 
-const store = createStore(cloureveApp,defaultStatus)
+const store = createStore(cloureveApp, defaultStatus);
 ReactDOM.render(
     <Provider store={store}>
-        <QuotaApp/>
-    </Provider>
-, document.getElementById('root'));
+        <QuotaApp />
+    </Provider>,
+    document.getElementById("root")
+);
diff --git a/src/pages/search.app.js b/src/pages/search.app.js
index aa7010c..cdedcce 100644
--- a/src/pages/search.app.js
+++ b/src/pages/search.app.js
@@ -1,47 +1,46 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Navbar from "../component/Navbar/Navbar.js"
-import AlertBar from "../component/Common/Snackbar"
-import { createMuiTheme } from '@material-ui/core/styles';
-import Search from '../component/Search'
-import { CssBaseline, withStyles, MuiThemeProvider } from '@material-ui/core';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import Navbar from "../component/Navbar/Navbar.js";
+import AlertBar from "../component/Common/Snackbar";
+import { createMuiTheme } from "@material-ui/core/styles";
+import Search from "../component/Search";
+import { CssBaseline, withStyles, MuiThemeProvider } from "@material-ui/core";
 const theme = createMuiTheme(window.colorTheme);
 const styles = theme => ({
-
-	root: {
-		display: 'flex',
-	},
-	content: {
-		flexGrow: 1,
-		padding: theme.spacing(0),
-		minWidth: 0,
-	},
-	toolbar: theme.mixins.toolbar,
+    root: {
+        display: "flex"
+    },
+    content: {
+        flexGrow: 1,
+        padding: theme.spacing(0),
+        minWidth: 0
+    },
+    toolbar: theme.mixins.toolbar
 });
 
 class SearchApp extends Component {
-
-	render() {
-		const { classes } = this.props;
-		return (
-			<React.Fragment>
-				<MuiThemeProvider theme={theme}>
-					<div className={classes.root} id="container">
-						<CssBaseline />
-						<AlertBar/>
-						<Navbar />
-						<main className={classes.content}>
-							<div className={classes.toolbar} />
-							<Search/>
-						</main>
-					</div></MuiThemeProvider>
-			</React.Fragment>
-		);
-	}
+    render() {
+        const { classes } = this.props;
+        return (
+            <React.Fragment>
+                <MuiThemeProvider theme={theme}>
+                    <div className={classes.root} id="container">
+                        <CssBaseline />
+                        <AlertBar />
+                        <Navbar />
+                        <main className={classes.content}>
+                            <div className={classes.toolbar} />
+                            <Search />
+                        </main>
+                    </div>
+                </MuiThemeProvider>
+            </React.Fragment>
+        );
+    }
 }
 
 SearchApp.propTypes = {
-	classes: PropTypes.object.isRequired,
+    classes: PropTypes.object.isRequired
 };
 
 export default withStyles(styles)(SearchApp);
diff --git a/src/pages/search.js b/src/pages/search.js
index 7eb0916..6653bb7 100644
--- a/src/pages/search.js
+++ b/src/pages/search.js
@@ -1,66 +1,66 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React from "react";
+import ReactDOM from "react-dom";
 
-import { Provider } from 'react-redux'
-import { createStore } from 'redux'
-import SearchApp from "./search.app"
-import cloureveApp from '../reducers'
+import { Provider } from "react-redux";
+import { createStore } from "redux";
+import SearchApp from "./search.app";
+import cloureveApp from "../reducers";
 
 const defaultStatus = {
-    navigator:{
-        path:window.path,
-        refresh:true,
+    navigator: {
+        path: window.path,
+        refresh: true
     },
-    viewUpdate:{
-        open:window.isHomePage,
+    viewUpdate: {
+        open: window.isHomePage,
         explorerViewMethod: "icon",
-        sortMethod:"timePos",
-        contextType:"none",  
-        menuOpen:false,
-        navigatorLoading:true,
-        navigatorError:false,
-        navigatorErrorMsg:null,
-        modalsLoading:false,
-        storageRefresh:false,
-        modals:{
-            createNewFolder:false,
-            rename:false,
-            move:false,
-            remove:false,
-            share:false,
-            music:false,
-            remoteDownload:false,
-            torrentDownload:false,
+        sortMethod: "timePos",
+        contextType: "none",
+        menuOpen: false,
+        navigatorLoading: true,
+        navigatorError: false,
+        navigatorErrorMsg: null,
+        modalsLoading: false,
+        storageRefresh: false,
+        modals: {
+            createNewFolder: false,
+            rename: false,
+            move: false,
+            remove: false,
+            share: false,
+            music: false,
+            remoteDownload: false,
+            torrentDownload: false
         },
-        snackbar:{
-            toggle:false,
-            vertical:"top",
-            horizontal:"center",
-            msg:"",
-            color:"",
+        snackbar: {
+            toggle: false,
+            vertical: "top",
+            horizontal: "center",
+            msg: "",
+            color: ""
         }
     },
-    explorer:{
-        fileList:[],
-        dirList:[
-        ],
-        selected:[],
-        selectProps:{
-            isMultiple:false,
-            withFolder:false,
-            withFile:false,
+    explorer: {
+        fileList: [],
+        dirList: [],
+        selected: [],
+        selectProps: {
+            isMultiple: false,
+            withFolder: false,
+            withFile: false
         },
-        imgPreview:{
-            first:null,
-            other:[],
+        imgPreview: {
+            first: null,
+            other: []
         },
-        keywords:null,
+        keywords: null
     }
 };
 
-const store = createStore(cloureveApp,defaultStatus)
+const store = createStore(cloureveApp, defaultStatus);
 ReactDOM.render(
     <Provider store={store}>
-        <SearchApp/>
-    </Provider>
-, document.getElementById('root'));
+        <SearchApp />
+    </Provider>,
+    document.getElementById("root")
+);
diff --git a/src/pages/setting.app.js b/src/pages/setting.app.js
index e133a2f..9b25a3b 100644
--- a/src/pages/setting.app.js
+++ b/src/pages/setting.app.js
@@ -1,47 +1,46 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Navbar from "../component/Navbar/Navbar.js"
-import AlertBar from "../component/Common/Snackbar"
-import { createMuiTheme } from '@material-ui/core/styles';
-import UserSetting from '../component/Setting/UserSetting'
-import { CssBaseline, withStyles, MuiThemeProvider } from '@material-ui/core';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import Navbar from "../component/Navbar/Navbar.js";
+import AlertBar from "../component/Common/Snackbar";
+import { createMuiTheme } from "@material-ui/core/styles";
+import UserSetting from "../component/Setting/UserSetting";
+import { CssBaseline, withStyles, MuiThemeProvider } from "@material-ui/core";
 const theme = createMuiTheme(window.colorTheme);
 const styles = theme => ({
-
-	root: {
-		display: 'flex',
-	},
-	content: {
-		flexGrow: 1,
-		padding: theme.spacing(0),
-		minWidth: 0,
-	},
-	toolbar: theme.mixins.toolbar,
+    root: {
+        display: "flex"
+    },
+    content: {
+        flexGrow: 1,
+        padding: theme.spacing(0),
+        minWidth: 0
+    },
+    toolbar: theme.mixins.toolbar
 });
 
 class SettingApp extends Component {
-
-	render() {
-		const { classes } = this.props;
-		return (
-			<React.Fragment>
-				<MuiThemeProvider theme={theme}>
-					<div className={classes.root} id="container">
-						<CssBaseline />
-						<AlertBar/>
-						<Navbar />
-						<main className={classes.content}>
-							<div className={classes.toolbar} />
-							<UserSetting/>
-						</main>
-					</div></MuiThemeProvider>
-			</React.Fragment>
-		);
-	}
+    render() {
+        const { classes } = this.props;
+        return (
+            <React.Fragment>
+                <MuiThemeProvider theme={theme}>
+                    <div className={classes.root} id="container">
+                        <CssBaseline />
+                        <AlertBar />
+                        <Navbar />
+                        <main className={classes.content}>
+                            <div className={classes.toolbar} />
+                            <UserSetting />
+                        </main>
+                    </div>
+                </MuiThemeProvider>
+            </React.Fragment>
+        );
+    }
 }
 
 SettingApp.propTypes = {
-	classes: PropTypes.object.isRequired,
+    classes: PropTypes.object.isRequired
 };
 
 export default withStyles(styles)(SettingApp);
diff --git a/src/pages/setting.js b/src/pages/setting.js
index e7a229b..5a359b3 100644
--- a/src/pages/setting.js
+++ b/src/pages/setting.js
@@ -1,66 +1,66 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React from "react";
+import ReactDOM from "react-dom";
 
-import { Provider } from 'react-redux'
-import { createStore } from 'redux'
-import SettingApp from "./setting.app"
-import cloureveApp from '../reducers'
+import { Provider } from "react-redux";
+import { createStore } from "redux";
+import SettingApp from "./setting.app";
+import cloureveApp from "../reducers";
 
 const defaultStatus = {
-    navigator:{
-        path:window.path,
-        refresh:true,
+    navigator: {
+        path: window.path,
+        refresh: true
     },
-    viewUpdate:{
-        open:window.isHomePage,
+    viewUpdate: {
+        open: window.isHomePage,
         explorerViewMethod: "icon",
-        sortMethod:"timePos",
-        contextType:"none",  
-        menuOpen:false,
-        navigatorLoading:true,
-        navigatorError:false,
-        navigatorErrorMsg:null,
-        modalsLoading:false,
-        storageRefresh:false,
-        modals:{
-            createNewFolder:false,
-            rename:false,
-            move:false,
-            remove:false,
-            share:false,
-            music:false,
-            remoteDownload:false,
-            torrentDownload:false,
+        sortMethod: "timePos",
+        contextType: "none",
+        menuOpen: false,
+        navigatorLoading: true,
+        navigatorError: false,
+        navigatorErrorMsg: null,
+        modalsLoading: false,
+        storageRefresh: false,
+        modals: {
+            createNewFolder: false,
+            rename: false,
+            move: false,
+            remove: false,
+            share: false,
+            music: false,
+            remoteDownload: false,
+            torrentDownload: false
         },
-        snackbar:{
-            toggle:false,
-            vertical:"top",
-            horizontal:"center",
-            msg:"",
-            color:"",
+        snackbar: {
+            toggle: false,
+            vertical: "top",
+            horizontal: "center",
+            msg: "",
+            color: ""
         }
     },
-    explorer:{
-        fileList:[],
-        dirList:[
-        ],
-        selected:[],
-        selectProps:{
-            isMultiple:false,
-            withFolder:false,
-            withFile:false,
+    explorer: {
+        fileList: [],
+        dirList: [],
+        selected: [],
+        selectProps: {
+            isMultiple: false,
+            withFolder: false,
+            withFile: false
         },
-        imgPreview:{
-            first:null,
-            other:[],
+        imgPreview: {
+            first: null,
+            other: []
         },
-        keywords:null,
+        keywords: null
     }
 };
 
-const store = createStore(cloureveApp,defaultStatus)
+const store = createStore(cloureveApp, defaultStatus);
 ReactDOM.render(
     <Provider store={store}>
-        <SettingApp/>
-    </Provider>
-, document.getElementById('root'));
+        <SettingApp />
+    </Provider>,
+    document.getElementById("root")
+);
diff --git a/src/pages/video.app.js b/src/pages/video.app.js
index d3c33b1..122cdf0 100644
--- a/src/pages/video.app.js
+++ b/src/pages/video.app.js
@@ -1,50 +1,49 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
 
-import Navbar from "../component/Navbar/Navbar.js"
-import AlertBar from "../component/Common/Snackbar"
-import VideoViewer from "../component/Viewer/Video"
-import { createMuiTheme } from '@material-ui/core/styles';
+import Navbar from "../component/Navbar/Navbar.js";
+import AlertBar from "../component/Common/Snackbar";
+import VideoViewer from "../component/Viewer/Video";
+import { createMuiTheme } from "@material-ui/core/styles";
 
-import { CssBaseline, withStyles, MuiThemeProvider } from '@material-ui/core';
+import { CssBaseline, withStyles, MuiThemeProvider } from "@material-ui/core";
 
 const theme = createMuiTheme(window.colorTheme);
 const styles = theme => ({
-
-	root: {
-		display: 'flex',
-	},
-	content: {
-		flexGrow: 1,
-		padding: theme.spacing(0),
-		minWidth: 0,
-	},
-	toolbar: theme.mixins.toolbar,
+    root: {
+        display: "flex"
+    },
+    content: {
+        flexGrow: 1,
+        padding: theme.spacing(0),
+        minWidth: 0
+    },
+    toolbar: theme.mixins.toolbar
 });
 
 class VideoApp extends Component {
-
-	render() {
-		const { classes } = this.props;
-		return (
-			<React.Fragment>
-				<MuiThemeProvider theme={theme}>
-					<div className={classes.root} id="container">
-						<CssBaseline />
-						<AlertBar/>
-						<Navbar />
-						<main className={classes.content}>
-							<div className={classes.toolbar} />
-							<VideoViewer/>
-						</main>
-					</div></MuiThemeProvider>
-			</React.Fragment>
-		);
-	}
+    render() {
+        const { classes } = this.props;
+        return (
+            <React.Fragment>
+                <MuiThemeProvider theme={theme}>
+                    <div className={classes.root} id="container">
+                        <CssBaseline />
+                        <AlertBar />
+                        <Navbar />
+                        <main className={classes.content}>
+                            <div className={classes.toolbar} />
+                            <VideoViewer />
+                        </main>
+                    </div>
+                </MuiThemeProvider>
+            </React.Fragment>
+        );
+    }
 }
 
 VideoApp.propTypes = {
-	classes: PropTypes.object.isRequired,
+    classes: PropTypes.object.isRequired
 };
 
 export default withStyles(styles)(VideoApp);
diff --git a/src/pages/video.js b/src/pages/video.js
index c91b6af..2463ce8 100644
--- a/src/pages/video.js
+++ b/src/pages/video.js
@@ -1,66 +1,66 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React from "react";
+import ReactDOM from "react-dom";
 
-import { Provider } from 'react-redux'
-import { createStore } from 'redux'
-import VideoApp from "./video.app"
-import cloureveApp from '../reducers'
+import { Provider } from "react-redux";
+import { createStore } from "redux";
+import VideoApp from "./video.app";
+import cloureveApp from "../reducers";
 
 const defaultStatus = {
-    navigator:{
-        path:window.path,
-        refresh:true,
+    navigator: {
+        path: window.path,
+        refresh: true
     },
-    viewUpdate:{
-        open:window.isHomePage,
+    viewUpdate: {
+        open: window.isHomePage,
         explorerViewMethod: "icon",
-        sortMethod:"timePos",
-        contextType:"none",  
-        menuOpen:false,
-        navigatorLoading:true,
-        navigatorError:false,
-        navigatorErrorMsg:null,
-        modalsLoading:false,
-        storageRefresh:false,
-        modals:{
-            createNewFolder:false,
-            rename:false,
-            move:false,
-            remove:false,
-            share:false,
-            music:false,
-            remoteDownload:false,
-            torrentDownload:false,
+        sortMethod: "timePos",
+        contextType: "none",
+        menuOpen: false,
+        navigatorLoading: true,
+        navigatorError: false,
+        navigatorErrorMsg: null,
+        modalsLoading: false,
+        storageRefresh: false,
+        modals: {
+            createNewFolder: false,
+            rename: false,
+            move: false,
+            remove: false,
+            share: false,
+            music: false,
+            remoteDownload: false,
+            torrentDownload: false
         },
-        snackbar:{
-            toggle:false,
-            vertical:"top",
-            horizontal:"center",
-            msg:"",
-            color:"",
+        snackbar: {
+            toggle: false,
+            vertical: "top",
+            horizontal: "center",
+            msg: "",
+            color: ""
         }
     },
-    explorer:{
-        fileList:[],
-        dirList:[
-        ],
-        selected:[],
-        selectProps:{
-            isMultiple:false,
-            withFolder:false,
-            withFile:false,
+    explorer: {
+        fileList: [],
+        dirList: [],
+        selected: [],
+        selectProps: {
+            isMultiple: false,
+            withFolder: false,
+            withFile: false
         },
-        imgPreview:{
-            first:null,
-            other:[],
+        imgPreview: {
+            first: null,
+            other: []
         },
-        keywords:null,
+        keywords: null
     }
 };
 
-const store = createStore(cloureveApp,defaultStatus)
+const store = createStore(cloureveApp, defaultStatus);
 ReactDOM.render(
     <Provider store={store}>
-        <VideoApp/>
-    </Provider>
-, document.getElementById('root'));
+        <VideoApp />
+    </Provider>,
+    document.getElementById("root")
+);
diff --git a/src/reducers/index.js b/src/reducers/index.js
index 31b9d95..28306eb 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -1,155 +1,165 @@
 /* eslint-disable no-case-declarations */
 import { InitSiteConfig } from "../middleware/Init";
-import { combineReducers } from '../redux/combineReducers'
-import viewUpdate from '../redux/viewUpdate/reducer'
-import explorer from '../redux/explorer/reducer'
+import { combineReducers } from "../redux/combineReducers";
+import viewUpdate from "../redux/viewUpdate/reducer";
+import explorer from "../redux/explorer/reducer";
 
-const doNavigate = (path, state)=>{
+const doNavigate = (path, state) => {
     window.currntPath = path;
     return Object.assign({}, state, {
-        navigator:Object.assign({}, state.navigator, {
+        navigator: Object.assign({}, state.navigator, {
             path: path
-        }),
+        })
     });
-}
+};
 
 export const initState = {
-  siteConfig: {
-      title: window.subTitle,
-      siteICPId: "",
-      loginCaptcha: false,
-      regCaptcha: false,
-      forgetCaptcha: false,
-      emailActive: false,
-      QQLogin: false,
-      themes:null,
-      authn:false,
-      theme: {
-          palette: {
-              common: { black: "#000", white: "#fff" },
-              background: { paper: "#fff", default: "#fafafa" },
-              primary: {
-                  light: "#7986cb",
-                  main: "#3f51b5",
-                  dark: "#303f9f",
-                  contrastText: "#fff"
-              },
-              secondary: {
-                  light: "#ff4081",
-                  main: "#f50057",
-                  dark: "#c51162",
-                  contrastText: "#fff"
-              },
-              error: {
-                  light: "#e57373",
-                  main: "#f44336",
-                  dark: "#d32f2f",
-                  contrastText: "#fff"
-              },
-              text: {
-                  primary: "rgba(0, 0, 0, 0.87)",
-                  secondary: "rgba(0, 0, 0, 0.54)",
-                  disabled: "rgba(0, 0, 0, 0.38)",
-                  hint: "rgba(0, 0, 0, 0.38)"
-              },
-              explorer: {
-                  filename: "#474849",
-                  icon: "#8f8f8f",
-                  bgSelected: "#D5DAF0",
-                  emptyIcon: "#e8e8e8"
-              }
-          }
-      },
-      captcha_IsUseReCaptcha: false,
-      captcha_ReCaptchaKey: "defaultKey"
-  },
-  navigator: {
-      path: "/",
-      refresh: true
-  },
-}
+    siteConfig: {
+        title: window.subTitle,
+        siteICPId: "",
+        loginCaptcha: false,
+        regCaptcha: false,
+        forgetCaptcha: false,
+        emailActive: false,
+        QQLogin: false,
+        themes: null,
+        authn: false,
+        theme: {
+            palette: {
+                common: { black: "#000", white: "#fff" },
+                background: { paper: "#fff", default: "#fafafa" },
+                primary: {
+                    light: "#7986cb",
+                    main: "#3f51b5",
+                    dark: "#303f9f",
+                    contrastText: "#fff"
+                },
+                secondary: {
+                    light: "#ff4081",
+                    main: "#f50057",
+                    dark: "#c51162",
+                    contrastText: "#fff"
+                },
+                error: {
+                    light: "#e57373",
+                    main: "#f44336",
+                    dark: "#d32f2f",
+                    contrastText: "#fff"
+                },
+                text: {
+                    primary: "rgba(0, 0, 0, 0.87)",
+                    secondary: "rgba(0, 0, 0, 0.54)",
+                    disabled: "rgba(0, 0, 0, 0.38)",
+                    hint: "rgba(0, 0, 0, 0.38)"
+                },
+                explorer: {
+                    filename: "#474849",
+                    icon: "#8f8f8f",
+                    bgSelected: "#D5DAF0",
+                    emptyIcon: "#e8e8e8"
+                }
+            }
+        },
+        captcha_IsUseReCaptcha: false,
+        captcha_ReCaptchaKey: "defaultKey"
+    },
+    navigator: {
+        path: "/",
+        refresh: true
+    }
+};
 
 const defaultStatus = InitSiteConfig(initState);
 
 // TODO: 将cloureveApp切分成小的reducer
 const cloudreveApp = (state = defaultStatus, action) => {
     switch (action.type) {
-        case 'SET_NAVIGATOR':
-            return doNavigate(action.path,state);
-        case 'TOGGLE_DAYLIGHT_MODE':{
+        case "SET_NAVIGATOR":
+            return doNavigate(action.path, state);
+        case "TOGGLE_DAYLIGHT_MODE": {
             const copy = Object.assign({}, state);
-            if (copy.siteConfig.theme.palette.type === undefined || copy.siteConfig.theme.palette.type === "light"){
+            if (
+                copy.siteConfig.theme.palette.type === undefined ||
+                copy.siteConfig.theme.palette.type === "light"
+            ) {
                 return {
                     ...state,
                     siteConfig: {
                         ...state.siteConfig,
-                        theme:{
+                        theme: {
                             ...state.siteConfig.theme,
-                            palette:{
+                            palette: {
                                 ...state.siteConfig.theme.palette,
-                                type:"dark",
+                                type: "dark"
                             }
-                        },
-                    },
+                        }
+                    }
                 };
             }
             return {
                 ...state,
                 siteConfig: {
                     ...state.siteConfig,
-                    theme:{
+                    theme: {
                         ...state.siteConfig.theme,
-                        palette:{
+                        palette: {
                             ...state.siteConfig.theme.palette,
-                            type:"light",
+                            type: "light"
                         }
-                    },
-                },
+                    }
+                }
             };
         }
-        case 'APPLY_THEME':
-            if (state.siteConfig.themes !== null){
+        case "APPLY_THEME":
+            if (state.siteConfig.themes !== null) {
                 const themes = JSON.parse(state.siteConfig.themes);
-                if (themes[action.theme] === undefined){
+                if (themes[action.theme] === undefined) {
                     return state;
                 }
                 return Object.assign({}, state, {
                     siteConfig: Object.assign({}, state.siteConfig, {
-                        theme:themes[action.theme],
-                    }),
+                        theme: themes[action.theme]
+                    })
                 });
             }
-            break
-        case 'NAVIGATOR_UP':
+            break;
+        case "NAVIGATOR_UP":
             return doNavigate(action.path, state);
-        case 'SET_SITE_CONFIG':
+        case "SET_SITE_CONFIG":
             return Object.assign({}, state, {
-                siteConfig: action.config,
+                siteConfig: action.config
             });
-        case 'REFRESH_FILE_LIST':
+        case "REFRESH_FILE_LIST":
             return Object.assign({}, state, {
                 navigator: Object.assign({}, state.navigator, {
-                    refresh:!state.navigator.refresh,
-                }),
+                    refresh: !state.navigator.refresh
+                })
             });
-        case 'SEARCH_MY_FILE':
+        case "SEARCH_MY_FILE":
             return Object.assign({}, state, {
                 navigator: Object.assign({}, state.navigator, {
                     path: "/搜索结果",
-                    refresh:state.explorer.keywords === ""? state.navigator.refresh:!state.navigator.refresh,
-                }),
+                    refresh:
+                        state.explorer.keywords === ""
+                            ? state.navigator.refresh
+                            : !state.navigator.refresh
+                })
             });
         default:
-            return state
+            return state;
     }
-}
+};
 
 export default (state, action) => {
-  const { viewUpdate: viewUpdateState, explorer: explorerState } = state || {}
-  const appState = cloudreveApp(state, action)
-  const combinedState = combineReducers({ viewUpdate, explorer })({ viewUpdate: viewUpdateState, explorer: explorerState }, action)
-  return {
-    ...appState,
-    ...combinedState,
-  }
-}
\ No newline at end of file
+    const { viewUpdate: viewUpdateState, explorer: explorerState } =
+        state || {};
+    const appState = cloudreveApp(state, action);
+    const combinedState = combineReducers({ viewUpdate, explorer })(
+        { viewUpdate: viewUpdateState, explorer: explorerState },
+        action
+    );
+    return {
+        ...appState,
+        ...combinedState
+    };
+};
diff --git a/src/reducers/index.test.js b/src/reducers/index.test.js
index 211cd63..37c896b 100644
--- a/src/reducers/index.test.js
+++ b/src/reducers/index.test.js
@@ -1,1149 +1,1247 @@
-import configureMockStore from 'redux-mock-store'
-import thunk from 'redux-thunk'
-import cloudreveApp, { initState as cloudreveState } from './index'
-import { initState as viewUpdateState } from '../redux/viewUpdate/reducer'
-import { initState as explorerState } from '../redux/explorer/reducer'
+import configureMockStore from "redux-mock-store";
+import thunk from "redux-thunk";
+import cloudreveApp, { initState as cloudreveState } from "./index";
+import { initState as viewUpdateState } from "../redux/viewUpdate/reducer";
+import { initState as explorerState } from "../redux/explorer/reducer";
 
-import { setModalsLoading, openLoadingDialog, openGetSourceDialog,
-  openShareDialog, openMoveDialog, navigateUp, navigateTo,
-  drawerToggleAction, changeViewMethod,
-  changeContextMenu, dragAndDrop, setNavigatorLoadingStatus,
-  setNavigatorError, addSelectedTargets, setNavigator,
-  setSelectedTarget, removeSelectedTargets, toggleDaylightMode,
-  applyThemes, openCreateFolderDialog, openRenameDialog,
-  openRemoveDialog, openResaveDialog, setUserPopover,
-  setShareUserPopover, setSiteConfig, openMusicDialog,
-  openRemoteDownloadDialog, openTorrentDownloadDialog,
-  openDecompressDialog, openCompressDialog, openCopyDialog,
-  closeAllModals, toggleSnackbar, setSessionStatus,
-  enableLoadUploader, refreshFileList, searchMyFile, showImgPreivew,
-  refreshStorage, saveFile, setLastSelect, setShiftSelectedIds
-} from '../actions/index'
-import { changeSubTitle, setSubtitle } from "../redux/viewUpdate/action"
-import { updateFileList, setFileList, setDirList, setSortMethod, changeSortMethod } from "../redux/explorer/action"
+import {
+    setModalsLoading,
+    openLoadingDialog,
+    openGetSourceDialog,
+    openShareDialog,
+    openMoveDialog,
+    navigateUp,
+    navigateTo,
+    drawerToggleAction,
+    changeViewMethod,
+    changeContextMenu,
+    dragAndDrop,
+    setNavigatorLoadingStatus,
+    setNavigatorError,
+    addSelectedTargets,
+    setNavigator,
+    setSelectedTarget,
+    removeSelectedTargets,
+    toggleDaylightMode,
+    applyThemes,
+    openCreateFolderDialog,
+    openRenameDialog,
+    openRemoveDialog,
+    openResaveDialog,
+    setUserPopover,
+    setShareUserPopover,
+    setSiteConfig,
+    openMusicDialog,
+    openRemoteDownloadDialog,
+    openTorrentDownloadDialog,
+    openDecompressDialog,
+    openCompressDialog,
+    openCopyDialog,
+    closeAllModals,
+    toggleSnackbar,
+    setSessionStatus,
+    enableLoadUploader,
+    refreshFileList,
+    searchMyFile,
+    showImgPreivew,
+    refreshStorage,
+    saveFile,
+    setLastSelect,
+    setShiftSelectedIds
+} from "../actions/index";
+import { changeSubTitle, setSubtitle } from "../redux/viewUpdate/action";
+import {
+    updateFileList,
+    setFileList,
+    setDirList,
+    setSortMethod,
+    changeSortMethod
+} from "../redux/explorer/action";
 
 const initState = {
-  ...cloudreveState,
-  viewUpdate: viewUpdateState,
-  explorer: explorerState,
-}
-const middlewares = [thunk]
-const mockStore = configureMockStore(middlewares)
+    ...cloudreveState,
+    viewUpdate: viewUpdateState,
+    explorer: explorerState
+};
+const middlewares = [thunk];
+const mockStore = configureMockStore(middlewares);
 
-describe('index reducer', () => {
-  it('should return the initial state', () => {
-      expect(cloudreveApp(undefined, { type: '@@INIT'})).toEqual(initState)
-    })
+describe("index reducer", () => {
+    it("should return the initial state", () => {
+        expect(cloudreveApp(undefined, { type: "@@INIT" })).toEqual(initState);
+    });
 
-    it('should handle redux init', () => {
-      expect(cloudreveApp(undefined, { type: '@@redux/INIT'})).toEqual(initState)
-    })
+    it("should handle redux init", () => {
+        expect(cloudreveApp(undefined, { type: "@@redux/INIT" })).toEqual(
+            initState
+        );
+    });
 
-  it('should handle DRAWER_TOGGLE', () => {
-    const openAction = drawerToggleAction(true)
-    expect(cloudreveApp(initState, openAction)).toEqual({
-      ...initState,
-      viewUpdate: {
-        ...initState.viewUpdate,
-        open: true,
-      }
-    })
-
-    const clossAction = drawerToggleAction(false)
-    expect(cloudreveApp(initState, clossAction)).toEqual({
-      ...initState,
-      viewUpdate: {
-        ...initState.viewUpdate,
-        open: false,
-      }
-    })
-  })
-
-  it('should handle CHANGE_VIEW_METHOD', () => {
-    const action = changeViewMethod('list')
-    expect(cloudreveApp(initState, action)).toEqual({
-      ...initState,
-      viewUpdate: {
-        ...initState.viewUpdate,
-        explorerViewMethod: 'list',
-      }
-    })
-  })
-
-  it('should handle SET_SORT_METHOD', () => {
-    const action = setSortMethod('sizeRes')
-    expect(cloudreveApp(initState, action)).toEqual({
-      ...initState,
-      viewUpdate: {
-        ...initState.viewUpdate,
-        sortMethod: 'sizeRes',
-      }
-    })
-  })
-
-  describe('CHANGE_SORT_METHOD', () => {
-    const explorerState = {
-      fileList: [{
-        type: 'file',
-        name: 'b',
-        size: 10,
-        date: "2020/04/30"
-      }, {
-        type: 'file',
-        name: 'a',
-        size: 11,
-        date: "2020/05/01"
-      }, {
-        type: 'file',
-        name: 'z',
-        size: 110,
-        date: "2020/04/29"
-      }],
-      dirList: [{
-        type: 'dir',
-        name: 'b_dir',
-        size: 10,
-        date: "2020/04/30"
-      }, {
-        type: 'dir',
-        name: 'a_dir',
-        size: 11,
-        date: "2020/05/01"
-      }, {
-        type: 'dir',
-        name: 'z_dir',
-        size: 110,
-        date: "2020/04/29"
-      }],
-    }
-
-    const state = {
-      ...initState,
-      explorer: {
-        ...initState.explorer,
-        ...explorerState,
-      },
-    }
-    it('should handle sizePos', async () => {
-      const action = changeSortMethod('sizePos')
-      const sortFunc = (a, b) => {
-        return a.size-b.size
-      }
-      const fileList = explorerState.fileList
-      const dirList = explorerState.dirList
-      const store = mockStore(state)
-      await store.dispatch(action)
-      expect(store.getActions()).toEqual([
-        setSortMethod('sizePos'),
-        setDirList(dirList.sort(sortFunc)),
-        setFileList(fileList.sort(sortFunc)),
-      ])
-    })
-
-    it('should handle sizeRes', async () => {
-      const action = changeSortMethod('sizePos')
-      const sortFunc = (a, b) => {
-        return b.size-a.size
-      }
-      const fileList = explorerState.fileList
-      const dirList = explorerState.dirList
-      const store = mockStore(state)
-      await store.dispatch(action)
-      expect(store.getActions()).toEqual([
-        setSortMethod('sizePos'),
-        setDirList(dirList.sort(sortFunc)),
-        setFileList(fileList.sort(sortFunc)),
-      ])
-    })
-
-    it('should handle namePos', async () => {
-      const action = changeSortMethod('namePos')
-      const sortFunc = (a, b) => {
-        return a.name.localeCompare(b.name)
-      }
-      const fileList = explorerState.fileList
-      const dirList = explorerState.dirList
-      const store = mockStore(state)
-      await store.dispatch(action)
-      expect(store.getActions()).toEqual([
-        setSortMethod('namePos'),
-        setDirList(dirList.sort(sortFunc)),
-        setFileList(fileList.sort(sortFunc)),
-      ])
-    })
-
-    it('should handle nameRev', async () => {
-      const action = changeSortMethod('nameRev')
-      const sortFunc = (a, b) => {
-        return b.name.localeCompare(a.name)
-      }
-      const fileList = explorerState.fileList
-      const dirList = explorerState.dirList
-      const store = mockStore(state)
-      await store.dispatch(action)
-      expect(store.getActions()).toEqual([
-        setSortMethod('nameRev'),
-        setDirList(dirList.sort(sortFunc)),
-        setFileList(fileList.sort(sortFunc)),
-      ])
-    })
-
-    it('should handle timePos', async () => {
-      const action = changeSortMethod('timePos')
-      const sortFunc = (a, b) => {
-        return Date.parse(a.date)-Date.parse(b.date)
-      }
-      const fileList = explorerState.fileList
-      const dirList = explorerState.dirList
-      const store = mockStore(state)
-      await store.dispatch(action)
-      expect(store.getActions()).toEqual([
-        setSortMethod('timePos'),
-        setDirList(dirList.sort(sortFunc)),
-        setFileList(fileList.sort(sortFunc)),
-      ])
-    })
-
-    it('should handle timeRev', async () => {
-      const action = changeSortMethod('timeRev')
-      const sortFunc = (a, b) => {
-        return Date.parse(b.date)-Date.parse(a.date)
-      }
-      const fileList = explorerState.fileList
-      const dirList = explorerState.dirList
-      const store = mockStore(state)
-      await store.dispatch(action)
-      expect(store.getActions()).toEqual([
-        setSortMethod('timeRev'),
-        setDirList(dirList.sort(sortFunc)),
-        setFileList(fileList.sort(sortFunc)),
-      ])
-    })
-  })
-
-  it('should handle CHANGE_CONTEXT_MENU', () => {
-    const action1 = changeContextMenu('empty', false)
-    expect(cloudreveApp(initState, action1)).toEqual({
-      ...initState,
-      viewUpdate: {
-        ...initState.viewUpdate,
-        contextOpen: false,
-        contextType: 'empty'
-      }
-    })
-    const action2 = changeContextMenu('aa', true)
-    expect(cloudreveApp(initState, action2)).toEqual({
-      ...initState,
-      viewUpdate: {
-        ...initState.viewUpdate,
-        contextOpen: true,
-        contextType: 'aa'
-      }
-    })
-  })
-
-  it('should handle DRAG_AND_DROP', () => {
-    const action = dragAndDrop('source', 'target')
-    expect(cloudreveApp(initState, action)).toEqual({
-      ...initState,
-      explorer: {
-        ...initState.explorer,
-        dndSignal: true,
-        dndTarget: 'target',
-        dndSource: 'source'
-      }
-    })
-  })
-
-  it('should handle SET_NAVIGATOR_LOADING_STATUE', () => {
-    const action = setNavigatorLoadingStatus(true)
-    expect(cloudreveApp(initState, action)).toEqual({
-      ...initState,
-      viewUpdate: {
-        ...initState.viewUpdate,
-        navigatorLoading: true
-      }
-    })
-  })
-
-  it('should handle SET_NAVIGATOR_ERROR', () => {
-    const action = setNavigatorError(true, 'Error Message')
-    expect(cloudreveApp(initState, action)).toEqual({
-      ...initState,
-      viewUpdate: {
-        ...initState.viewUpdate,
-        navigatorError: true,
-        navigatorErrorMsg: 'Error Message'
-      }
-    })
-  })
-
-  describe('UPDATE_FILE_LIST', () => {
-    const fileList = [{
-        type: 'file',
-        name: 'b',
-        size: 10,
-        date: "2020/04/30"
-      }, {
-        type: 'file',
-        name: 'a',
-        size: 11,
-        date: "2020/05/01"
-      }, {
-        type: 'file',
-        name: 'z',
-        size: 110,
-        date: "2020/04/29"
-      }]
-    const dirList = [{
-        type: 'dir',
-        name: 'b_dir',
-        size: 10,
-        date: "2020/04/30"
-      }, {
-        type: 'dir',
-        name: 'a_dir',
-        size: 11,
-        date: "2020/05/01"
-      }, {
-        type: 'dir',
-        name: 'z_dir',
-        size: 110,
-        date: "2020/04/29"
-      }]
-    const updateAction = updateFileList([...fileList, ...dirList])
-    it('should handle sizePos', async () => {
-      const sortFun = (a, b) => {
-        return a.size-b.size
-      }
-      const state = {
-        ...initState,
-        viewUpdate: {
-          ...initState.viewUpdate,
-          sortMethod: 'sizePos'
-        }
-      }
-      const store = mockStore(state)
-      await store.dispatch(updateAction)
-      expect(store.getActions()).toEqual([
-        setDirList(dirList.sort(sortFun)),
-        setFileList(fileList.sort(sortFun)),
-      ])
-    })
-
-    it('should handle sizeRes', async () => {
-      const sortFun = (a, b) => {
-        return b.size-a.size
-      }
-      const state = {
-        ...initState,
-        viewUpdate: {
-          ...initState.viewUpdate,
-          sortMethod: 'sizeRes'
-        }
-      }
-      const store = mockStore(state)
-      await store.dispatch(updateAction)
-      expect(store.getActions()).toEqual([
-        setDirList(dirList.sort(sortFun)),
-        setFileList(fileList.sort(sortFun)),
-      ])
-    })
-
-    it('should handle namePos', async () => {
-      const sortFun = (a, b) => {
-        return a.name.localeCompare(b.name)
-      }
-      const state = {
-        ...initState,
-        viewUpdate: {
-          ...initState.viewUpdate,
-          sortMethod: 'namePos'
-        }
-      }
-      const store = mockStore(state)
-      await store.dispatch(updateAction)
-      expect(store.getActions()).toEqual([
-        setDirList(dirList.sort(sortFun)),
-        setFileList(fileList.sort(sortFun)),
-      ])
-    })
-
-    it('should handle nameRev', async () => {
-      const sortFun = (a, b) => {
-        return b.name.localeCompare(a.name)
-      }
-      const state = {
-        ...initState,
-        viewUpdate: {
-          ...initState.viewUpdate,
-          sortMethod: 'nameRev'
-        }
-      }
-      const store = mockStore(state)
-      await store.dispatch(updateAction)
-      expect(store.getActions()).toEqual([
-        setDirList(dirList.sort(sortFun)),
-        setFileList(fileList.sort(sortFun)),
-      ])
-    })
-
-    it('should handle timePos', async () => {
-      const sortFun = (a, b) => {
-        return Date.parse(a.date)-Date.parse(b.date)
-      }
-      const state = {
-        ...initState,
-        viewUpdate: {
-          ...initState.viewUpdate,
-          sortMethod: 'timePos'
-        }
-      }
-      const store = mockStore(state)
-      await store.dispatch(updateAction)
-      expect(store.getActions()).toEqual([
-        setDirList(dirList.sort(sortFun)),
-        setFileList(fileList.sort(sortFun)),
-      ])
-    })
-
-    it('should handle timeRev', async () => {
-      const sortFun = (a, b) => {
-        return Date.parse(b.date)-Date.parse(a.date)
-      }
-      const state = {
-        ...initState,
-        viewUpdate: {
-          ...initState.viewUpdate,
-          sortMethod: 'timeRev'
-        }
-      }
-      const store = mockStore(state)
-      await store.dispatch(updateAction)
-      expect(store.getActions()).toEqual([
-        setDirList(dirList.sort(sortFun)),
-        setFileList(fileList.sort(sortFun)),
-      ])
-    })
-  })
-
-  it('should handle SET_FILE_LIST', () => {
-    const action = setFileList([{
-      type: 'file',
-      id: 'a'
-    }, {
-      type: 'file',
-      id: 'b'
-    }])
-    expect(cloudreveApp({
-      ...initState,
-      explorer: {
-        ...initState.explorer,
-        fileList: [{ type: 'file', id: 'test' }]
-      }
-    }, action)).toEqual({
-      ...initState,
-      explorer: {
-        ...initState.explorer,
-        fileList: [{
-          type: 'file',
-          id: 'a'
-        }, {
-          type: 'file',
-          id: 'b'
-        }]
-      }
-    })
-  })
-
-  it('should handle SET_DIR_LIST', () => {
-    const action = setDirList([{
-      type: 'dir',
-      id: 'a'
-    }, {
-      type: 'dir',
-      id: 'b'
-    }])
-    expect(cloudreveApp({
-      ...initState,
-      explorer: {
-        ...initState.explorer,
-        dirList: [{ type: 'dir', id: 'test' }]
-      }
-    }, action)).toEqual({
-      ...initState,
-      explorer: {
-        ...initState.explorer,
-        dirList: [{
-          type: 'dir',
-          id: 'a'
-        }, {
-          type: 'dir',
-          id: 'b'
-        }]
-      }
-    })
-  })
-
-  it('should handle ADD_SELECTED_TARGETS', () => {
-    const newSelect = [{
-      type: 'file',
-    }, {
-      type: 'dir'
-    }]
-    const action = addSelectedTargets(newSelect)
-    expect(cloudreveApp({
-      ...initState,
-      explorer: {
-        ...initState.explorer,
-        selected: [{ type: 'file' }]
-      }
-    }, action)).toEqual({
-      ...initState,
-      explorer: {
-        ...initState.explorer,
-        selected: [{type: 'file'}, ...newSelect],
-        selectProps: {
-          isMultiple: true,
-          withFolder: true,
-          withFile: true
-        }
-      }
-    })
-  })
-
-  it('should handle SET_SELECTED_TARGET', () => {
-    const newSelect = [{
-      type: 'file',
-    }, {
-      type: 'dir'
-    }]
-    const action = setSelectedTarget(newSelect)
-    expect(cloudreveApp({
-      ...initState,
-      explorer: {
-        ...initState.explorer,
-        selected: [{ type: 'file' }]
-      }
-    }, action)).toEqual({
-      ...initState,
-      explorer: {
-        ...initState.explorer,
-        selected: newSelect,
-        selectProps: {
-          isMultiple: true,
-          withFolder: true,
-          withFile: true
-        }
-      }
-    })
-  })
-
-  it('should handle RMOVE_SELECTED_TARGETS', () => {
-    const remove = ['1']
-    const action = removeSelectedTargets(remove)
-    expect(cloudreveApp({
-      ...initState,
-      explorer: {
-        ...initState.explorer,
-        selected: [{ id: '1', type: 'file' }, { id: '2', type: 'file' }]
-      }
-    }, action)).toEqual({
-      ...initState,
-      explorer: {
-        ...initState.explorer,
-        selected: [{ id: '2', type: 'file' }],
-        selectProps: {
-          isMultiple: false,
-          withFolder: false,
-          withFile: true
-        }
-      }
-    })
-  })
-
-  it('should handle NAVIGATOR_TO', async () => {
-    const store = mockStore(initState)
-    const action = navigateTo('/somewhere')
-    await store.dispatch(action)
-    expect(store.getActions()).toEqual([
-      setNavigator('/somewhere', true)
-    ])
-  })
-
-  it('should handle NAVIGATOR_UP', async () => {
-    const navState = {
-      ...initState,
-      navigator: {
-        ...initState.navigator,
-        path: '/to/somewhere'
-      }
-    }
-    const store = mockStore(navState)
-    const action = navigateUp()
-    await store.dispatch(action)
-    expect(store.getActions()).toEqual([
-      setNavigator('/to', true)
-    ])
-  })
-
-  it('should handle SET_NAVIGATOR', () => {
-    const navState = {
-      ...initState,
-      navigator: {
-        ...initState.navigator,
-        path: '/to/somewhere'
-      }
-    }
-    const action = setNavigator('/newpath', true)
-    expect(cloudreveApp(navState, action)).toEqual({
-      ...initState,
-      navigator: {
-        ...initState.navigator,
-        path: '/newpath'
-      },
-      viewUpdate: {
-        ...initState.viewUpdate,
-        contextOpen:false,
-        navigatorError:false,
-        navigatorLoading: true,
-      },
-      explorer: {
-        ...initState.explorer,
-        selected: [],
-        selectProps: {
-          isMultiple:false,
-          withFolder:false,
-          withFile:false,
-        },
-        keywords:"",
-      }
-    })
-    expect(window.currntPath).toEqual('/newpath')
-  })
-  
-  it('should handle TOGGLE_DAYLIGHT_MODE', () => {
-    const action = toggleDaylightMode()
-    const darkState = {
-      ...initState,
-      siteConfig: {
-        ...initState.siteConfig,
-        theme:{
-            ...initState.siteConfig.theme,
-            palette:{
-                ...initState.siteConfig.theme.palette,
-                type:"dark",
+    it("should handle DRAWER_TOGGLE", () => {
+        const openAction = drawerToggleAction(true);
+        expect(cloudreveApp(initState, openAction)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                open: true
             }
-        },
-      },
-    }
-    const lightState = {
-      ...initState,
-      siteConfig: {
-        ...initState.siteConfig,
-        theme:{
-            ...initState.siteConfig.theme,
-            palette:{
-                ...initState.siteConfig.theme.palette,
-                type:"light",
+        });
+
+        const clossAction = drawerToggleAction(false);
+        expect(cloudreveApp(initState, clossAction)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                open: false
             }
-        },
-      },
-    }
-    expect(cloudreveApp(initState, action)).toEqual(darkState)
-    expect(cloudreveApp(darkState, action)).toEqual(lightState)
-  })
+        });
+    });
 
-  it('should handle APPLY_THEME', () => {
-    const action = applyThemes('foo')
-    const stateWithThemes = {
-      ...initState,
-      siteConfig: {
-        ...initState.siteConfig,
-        themes: JSON.stringify({foo:'bar'}),
-      },
-    }
-    expect(cloudreveApp(stateWithThemes, action)).toEqual({
-      ...stateWithThemes,
-      siteConfig: {
-        ...stateWithThemes.siteConfig,
-        theme: 'bar'
-      }
-    })
+    it("should handle CHANGE_VIEW_METHOD", () => {
+        const action = changeViewMethod("list");
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                explorerViewMethod: "list"
+            }
+        });
+    });
 
+    it("should handle SET_SORT_METHOD", () => {
+        const action = setSortMethod("sizeRes");
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                sortMethod: "sizeRes"
+            }
+        });
+    });
 
-  })
+    describe("CHANGE_SORT_METHOD", () => {
+        const explorerState = {
+            fileList: [
+                {
+                    type: "file",
+                    name: "b",
+                    size: 10,
+                    date: "2020/04/30"
+                },
+                {
+                    type: "file",
+                    name: "a",
+                    size: 11,
+                    date: "2020/05/01"
+                },
+                {
+                    type: "file",
+                    name: "z",
+                    size: 110,
+                    date: "2020/04/29"
+                }
+            ],
+            dirList: [
+                {
+                    type: "dir",
+                    name: "b_dir",
+                    size: 10,
+                    date: "2020/04/30"
+                },
+                {
+                    type: "dir",
+                    name: "a_dir",
+                    size: 11,
+                    date: "2020/05/01"
+                },
+                {
+                    type: "dir",
+                    name: "z_dir",
+                    size: 110,
+                    date: "2020/04/29"
+                }
+            ]
+        };
 
-  it('should handle OPEN_CREATE_FOLDER_DIALOG', () => {
-    const action = openCreateFolderDialog()
-    expect(cloudreveApp(initState, action)).toEqual({
-      ...initState,
-      viewUpdate: {
-        ...initState.viewUpdate,
-        modals: {
-          ...initState.viewUpdate.modals,
-          createNewFolder: true,
-        },
-        contextOpen:false,
-      }
-    })
-  })
+        const state = {
+            ...initState,
+            explorer: {
+                ...initState.explorer,
+                ...explorerState
+            }
+        };
+        it("should handle sizePos", async () => {
+            const action = changeSortMethod("sizePos");
+            const sortFunc = (a, b) => {
+                return a.size - b.size;
+            };
+            const fileList = explorerState.fileList;
+            const dirList = explorerState.dirList;
+            const store = mockStore(state);
+            await store.dispatch(action);
+            expect(store.getActions()).toEqual([
+                setSortMethod("sizePos"),
+                setDirList(dirList.sort(sortFunc)),
+                setFileList(fileList.sort(sortFunc))
+            ]);
+        });
 
-  it('should handle OPEN_RENAME_DIALOG', () => {
-    const action = openRenameDialog()
-    expect(cloudreveApp(initState, action)).toEqual({
-      ...initState,
-      viewUpdate: {
-        ...initState.viewUpdate,
-        modals: {
-          ...initState.viewUpdate.modals,
-          rename: true,
-        },
-        contextOpen:false,
-      }
-    })
-  })
+        it("should handle sizeRes", async () => {
+            const action = changeSortMethod("sizePos");
+            const sortFunc = (a, b) => {
+                return b.size - a.size;
+            };
+            const fileList = explorerState.fileList;
+            const dirList = explorerState.dirList;
+            const store = mockStore(state);
+            await store.dispatch(action);
+            expect(store.getActions()).toEqual([
+                setSortMethod("sizePos"),
+                setDirList(dirList.sort(sortFunc)),
+                setFileList(fileList.sort(sortFunc))
+            ]);
+        });
 
-  it('should handle OPEN_REMOVE_DIALOG', () => {
-    const action = openRemoveDialog()
-    expect(cloudreveApp(initState, action)).toEqual({
-      ...initState,
-      viewUpdate: {
-        ...initState.viewUpdate,
-        modals: {
-          ...initState.viewUpdate.modals,
-          remove:true,
-        },
-        contextOpen:false,
-      }
-    })
-  })
+        it("should handle namePos", async () => {
+            const action = changeSortMethod("namePos");
+            const sortFunc = (a, b) => {
+                return a.name.localeCompare(b.name);
+            };
+            const fileList = explorerState.fileList;
+            const dirList = explorerState.dirList;
+            const store = mockStore(state);
+            await store.dispatch(action);
+            expect(store.getActions()).toEqual([
+                setSortMethod("namePos"),
+                setDirList(dirList.sort(sortFunc)),
+                setFileList(fileList.sort(sortFunc))
+            ]);
+        });
 
-  it('should handle OPEN_MOVE_DIALOG', () => {
-    const action = openMoveDialog()
-    expect(cloudreveApp(initState, action)).toEqual({
-      ...initState,
-      viewUpdate: {
-        ...initState.viewUpdate,
-        modals: {
-          ...initState.viewUpdate.modals,
-          move:true,
-        },
-        contextOpen:false,
-      }
-    })
-  })
+        it("should handle nameRev", async () => {
+            const action = changeSortMethod("nameRev");
+            const sortFunc = (a, b) => {
+                return b.name.localeCompare(a.name);
+            };
+            const fileList = explorerState.fileList;
+            const dirList = explorerState.dirList;
+            const store = mockStore(state);
+            await store.dispatch(action);
+            expect(store.getActions()).toEqual([
+                setSortMethod("nameRev"),
+                setDirList(dirList.sort(sortFunc)),
+                setFileList(fileList.sort(sortFunc))
+            ]);
+        });
 
-  it('should handle OPEN_RESAVE_DIALOG', () => {
-    const action = openResaveDialog()
-    expect(cloudreveApp(initState, action)).toEqual({
-      ...initState,
-      viewUpdate: {
-        ...initState.viewUpdate,
-        modals: {
-          ...initState.viewUpdate.modals,
-          resave:true,
-        },
-        contextOpen:false,
-      }
-    })
-  })
+        it("should handle timePos", async () => {
+            const action = changeSortMethod("timePos");
+            const sortFunc = (a, b) => {
+                return Date.parse(a.date) - Date.parse(b.date);
+            };
+            const fileList = explorerState.fileList;
+            const dirList = explorerState.dirList;
+            const store = mockStore(state);
+            await store.dispatch(action);
+            expect(store.getActions()).toEqual([
+                setSortMethod("timePos"),
+                setDirList(dirList.sort(sortFunc)),
+                setFileList(fileList.sort(sortFunc))
+            ]);
+        });
 
-  it('should handle SET_USER_POPOVER', () => {
-    // TODO: update to real anchor
-    const action = setUserPopover('anchor')
-    expect(cloudreveApp(initState, action)).toEqual({
-      ...initState,
-      viewUpdate: {
-        ...initState.viewUpdate,
-        userPopoverAnchorEl: 'anchor',
-      }
-    })
-  })
+        it("should handle timeRev", async () => {
+            const action = changeSortMethod("timeRev");
+            const sortFunc = (a, b) => {
+                return Date.parse(b.date) - Date.parse(a.date);
+            };
+            const fileList = explorerState.fileList;
+            const dirList = explorerState.dirList;
+            const store = mockStore(state);
+            await store.dispatch(action);
+            expect(store.getActions()).toEqual([
+                setSortMethod("timeRev"),
+                setDirList(dirList.sort(sortFunc)),
+                setFileList(fileList.sort(sortFunc))
+            ]);
+        });
+    });
 
-  it('should handle SET_SHARE_USER_POPOVER', () => {
-    // TODO: update to real anchor
-    const action = setShareUserPopover('anchor')
-    expect(cloudreveApp(initState, action)).toEqual({
-      ...initState,
-      viewUpdate: {
-        ...initState.viewUpdate,
-        shareUserPopoverAnchorEl: 'anchor',
-      }
-    })
-  })
+    it("should handle CHANGE_CONTEXT_MENU", () => {
+        const action1 = changeContextMenu("empty", false);
+        expect(cloudreveApp(initState, action1)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                contextOpen: false,
+                contextType: "empty"
+            }
+        });
+        const action2 = changeContextMenu("aa", true);
+        expect(cloudreveApp(initState, action2)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                contextOpen: true,
+                contextType: "aa"
+            }
+        });
+    });
 
-  it('should handle OPEN_SHARE_DIALOG', () => {
-    // TODO: update to real anchor
-    const action = openShareDialog()
-    expect(cloudreveApp(initState, action)).toEqual({
-      ...initState,
-      viewUpdate: {
-        ...initState.viewUpdate,
-        modals: {
-          ...initState.viewUpdate.modals,
-          share: true,
-        },
-        contextOpen:false,
-      }
-    })
-  })
+    it("should handle DRAG_AND_DROP", () => {
+        const action = dragAndDrop("source", "target");
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            explorer: {
+                ...initState.explorer,
+                dndSignal: true,
+                dndTarget: "target",
+                dndSource: "source"
+            }
+        });
+    });
 
-  it('should handle SET_SITE_CONFIG', () => {
-    // TODO: update to real anchor
-    const action = setSiteConfig({foo: 'bar'})
-    expect(cloudreveApp(initState, action)).toEqual({
-      ...initState,
-      siteConfig: {
-        foo: 'bar'
-      }
-    })
-  })
+    it("should handle SET_NAVIGATOR_LOADING_STATUE", () => {
+        const action = setNavigatorLoadingStatus(true);
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                navigatorLoading: true
+            }
+        });
+    });
 
-  it('should handle SET_SITE_CONFIG', () => {
-    // TODO: update to real anchor
-    const action = setSiteConfig({foo: 'bar'})
-    expect(cloudreveApp(initState, action)).toEqual({
-      ...initState,
-      siteConfig: {
-        foo: 'bar'
-      }
-    })
-  })
+    it("should handle SET_NAVIGATOR_ERROR", () => {
+        const action = setNavigatorError(true, "Error Message");
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                navigatorError: true,
+                navigatorErrorMsg: "Error Message"
+            }
+        });
+    });
 
-  it('should handle OPEN_MUSIC_DIALOG', () => {
-    const action = openMusicDialog()
-    expect(cloudreveApp(initState, action)).toEqual({
-      ...initState,
-      viewUpdate: {
-        ...initState.viewUpdate,
-        modals: {
-          ...initState.viewUpdate.modals,
-          music:true,
-        },
-        contextOpen:false,
-      }
-    })
-  })
+    describe("UPDATE_FILE_LIST", () => {
+        const fileList = [
+            {
+                type: "file",
+                name: "b",
+                size: 10,
+                date: "2020/04/30"
+            },
+            {
+                type: "file",
+                name: "a",
+                size: 11,
+                date: "2020/05/01"
+            },
+            {
+                type: "file",
+                name: "z",
+                size: 110,
+                date: "2020/04/29"
+            }
+        ];
+        const dirList = [
+            {
+                type: "dir",
+                name: "b_dir",
+                size: 10,
+                date: "2020/04/30"
+            },
+            {
+                type: "dir",
+                name: "a_dir",
+                size: 11,
+                date: "2020/05/01"
+            },
+            {
+                type: "dir",
+                name: "z_dir",
+                size: 110,
+                date: "2020/04/29"
+            }
+        ];
+        const updateAction = updateFileList([...fileList, ...dirList]);
+        it("should handle sizePos", async () => {
+            const sortFun = (a, b) => {
+                return a.size - b.size;
+            };
+            const state = {
+                ...initState,
+                viewUpdate: {
+                    ...initState.viewUpdate,
+                    sortMethod: "sizePos"
+                }
+            };
+            const store = mockStore(state);
+            await store.dispatch(updateAction);
+            expect(store.getActions()).toEqual([
+                setDirList(dirList.sort(sortFun)),
+                setFileList(fileList.sort(sortFun))
+            ]);
+        });
 
-  it('should handle OPEN_REMOTE_DOWNLOAD_DIALOG', () => {
-    const action = openRemoteDownloadDialog()
-    expect(cloudreveApp(initState, action)).toEqual({
-      ...initState,
-      viewUpdate: {
-        ...initState.viewUpdate,
-        modals: {
-          ...initState.viewUpdate.modals,
-          remoteDownload:true,
-        },
-        contextOpen:false,
-      }
-    })
-  })
+        it("should handle sizeRes", async () => {
+            const sortFun = (a, b) => {
+                return b.size - a.size;
+            };
+            const state = {
+                ...initState,
+                viewUpdate: {
+                    ...initState.viewUpdate,
+                    sortMethod: "sizeRes"
+                }
+            };
+            const store = mockStore(state);
+            await store.dispatch(updateAction);
+            expect(store.getActions()).toEqual([
+                setDirList(dirList.sort(sortFun)),
+                setFileList(fileList.sort(sortFun))
+            ]);
+        });
 
-  it('should handle OPEN_TORRENT_DOWNLOAD_DIALOG', () => {
-    const action = openTorrentDownloadDialog()
-    expect(cloudreveApp(initState, action)).toEqual({
-      ...initState,
-      viewUpdate: {
-        ...initState.viewUpdate,
-        modals: {
-          ...initState.viewUpdate.modals,
-          torrentDownload:true,
-        },
-        contextOpen:false,
-      }
-    })
-  })
+        it("should handle namePos", async () => {
+            const sortFun = (a, b) => {
+                return a.name.localeCompare(b.name);
+            };
+            const state = {
+                ...initState,
+                viewUpdate: {
+                    ...initState.viewUpdate,
+                    sortMethod: "namePos"
+                }
+            };
+            const store = mockStore(state);
+            await store.dispatch(updateAction);
+            expect(store.getActions()).toEqual([
+                setDirList(dirList.sort(sortFun)),
+                setFileList(fileList.sort(sortFun))
+            ]);
+        });
 
-  it('should handle OPEN_DECOMPRESS_DIALOG', () => {
-    const action = openDecompressDialog()
-    expect(cloudreveApp(initState, action)).toEqual({
-      ...initState,
-      viewUpdate: {
-        ...initState.viewUpdate,
-        modals: {
-          ...initState.viewUpdate.modals,
-          decompress:true,
-        },
-        contextOpen:false,
-      }
-    })
-  })
+        it("should handle nameRev", async () => {
+            const sortFun = (a, b) => {
+                return b.name.localeCompare(a.name);
+            };
+            const state = {
+                ...initState,
+                viewUpdate: {
+                    ...initState.viewUpdate,
+                    sortMethod: "nameRev"
+                }
+            };
+            const store = mockStore(state);
+            await store.dispatch(updateAction);
+            expect(store.getActions()).toEqual([
+                setDirList(dirList.sort(sortFun)),
+                setFileList(fileList.sort(sortFun))
+            ]);
+        });
 
-  it('should handle OPEN_COMPRESS_DIALOG', () => {
-    const action = openCompressDialog()
-    expect(cloudreveApp(initState, action)).toEqual({
-      ...initState,
-      viewUpdate: {
-        ...initState.viewUpdate,
-        modals: {
-          ...initState.viewUpdate.modals,
-          compress:true,
-        },
-        contextOpen:false,
-      }
-    })
-  })
+        it("should handle timePos", async () => {
+            const sortFun = (a, b) => {
+                return Date.parse(a.date) - Date.parse(b.date);
+            };
+            const state = {
+                ...initState,
+                viewUpdate: {
+                    ...initState.viewUpdate,
+                    sortMethod: "timePos"
+                }
+            };
+            const store = mockStore(state);
+            await store.dispatch(updateAction);
+            expect(store.getActions()).toEqual([
+                setDirList(dirList.sort(sortFun)),
+                setFileList(fileList.sort(sortFun))
+            ]);
+        });
 
-  it('should handle OPEN_GET_SOURCE_DIALOG', () => {
-    const action = openGetSourceDialog()
-    expect(cloudreveApp(initState, action)).toEqual({
-      ...initState,
-      viewUpdate: {
-        ...initState.viewUpdate,
-        modals: {
-          ...initState.viewUpdate.modals,
-          getSource:true,
-        },
-        contextOpen:false,
-      }
-    })
-  })
+        it("should handle timeRev", async () => {
+            const sortFun = (a, b) => {
+                return Date.parse(b.date) - Date.parse(a.date);
+            };
+            const state = {
+                ...initState,
+                viewUpdate: {
+                    ...initState.viewUpdate,
+                    sortMethod: "timeRev"
+                }
+            };
+            const store = mockStore(state);
+            await store.dispatch(updateAction);
+            expect(store.getActions()).toEqual([
+                setDirList(dirList.sort(sortFun)),
+                setFileList(fileList.sort(sortFun))
+            ]);
+        });
+    });
 
-  it('should handle OPEN_COPY_DIALOG', () => {
-    const action = openCopyDialog()
-    expect(cloudreveApp(initState, action)).toEqual({
-      ...initState,
-      viewUpdate: {
-        ...initState.viewUpdate,
-        modals: {
-          ...initState.viewUpdate.modals,
-          copy:true,
-        },
-        contextOpen:false,
-      }
-    })
-  })
+    it("should handle SET_FILE_LIST", () => {
+        const action = setFileList([
+            {
+                type: "file",
+                id: "a"
+            },
+            {
+                type: "file",
+                id: "b"
+            }
+        ]);
+        expect(
+            cloudreveApp(
+                {
+                    ...initState,
+                    explorer: {
+                        ...initState.explorer,
+                        fileList: [{ type: "file", id: "test" }]
+                    }
+                },
+                action
+            )
+        ).toEqual({
+            ...initState,
+            explorer: {
+                ...initState.explorer,
+                fileList: [
+                    {
+                        type: "file",
+                        id: "a"
+                    },
+                    {
+                        type: "file",
+                        id: "b"
+                    }
+                ]
+            }
+        });
+    });
 
-  it('should handle OPEN_LOADING_DIALOG', () => {
-    const action = openLoadingDialog('loading')
-    expect(cloudreveApp(initState, action)).toEqual({
-      ...initState,
-      viewUpdate: {
-        ...initState.viewUpdate,
-        modals: {
-          ...initState.viewUpdate.modals,
-          loading:true,
-          loadingText: 'loading',
-        },
-        contextOpen:false,
-      }
-    })
-  })
+    it("should handle SET_DIR_LIST", () => {
+        const action = setDirList([
+            {
+                type: "dir",
+                id: "a"
+            },
+            {
+                type: "dir",
+                id: "b"
+            }
+        ]);
+        expect(
+            cloudreveApp(
+                {
+                    ...initState,
+                    explorer: {
+                        ...initState.explorer,
+                        dirList: [{ type: "dir", id: "test" }]
+                    }
+                },
+                action
+            )
+        ).toEqual({
+            ...initState,
+            explorer: {
+                ...initState.explorer,
+                dirList: [
+                    {
+                        type: "dir",
+                        id: "a"
+                    },
+                    {
+                        type: "dir",
+                        id: "b"
+                    }
+                ]
+            }
+        });
+    });
 
-  it('should handle CLOSE_ALL_MODALS', () => {
-    const action = closeAllModals()
-    expect(cloudreveApp(initState, action)).toEqual({
-      ...initState,
-      viewUpdate: {
-        ...initState.viewUpdate,
-        modals: {
-          ...initState.viewUpdate.modals,
-          createNewFolder:false,
-          rename:false,
-          move:false,
-          remove:false,
-          share:false,
-          music:false,
-          remoteDownload:false,
-          torrentDownload:false,
-          getSource:false,
-          resave:false,
-          copy:false,
-          loading:false,
-          compress:false,
-          decompress:false,
-        },
-      }
-    })
-  })
+    it("should handle ADD_SELECTED_TARGETS", () => {
+        const newSelect = [
+            {
+                type: "file"
+            },
+            {
+                type: "dir"
+            }
+        ];
+        const action = addSelectedTargets(newSelect);
+        expect(
+            cloudreveApp(
+                {
+                    ...initState,
+                    explorer: {
+                        ...initState.explorer,
+                        selected: [{ type: "file" }]
+                    }
+                },
+                action
+            )
+        ).toEqual({
+            ...initState,
+            explorer: {
+                ...initState.explorer,
+                selected: [{ type: "file" }, ...newSelect],
+                selectProps: {
+                    isMultiple: true,
+                    withFolder: true,
+                    withFile: true
+                }
+            }
+        });
+    });
 
-  it('should handle CHANGE_SUB_TITLE', async () => {
-    const store = mockStore(initState)
-    const action = changeSubTitle('test sub title')
-    await store.dispatch(action)
-    expect(store.getActions()).toEqual([setSubtitle('test sub title')])
-    expect(document.title).toEqual('test sub title - Cloudreve')
-  })
+    it("should handle SET_SELECTED_TARGET", () => {
+        const newSelect = [
+            {
+                type: "file"
+            },
+            {
+                type: "dir"
+            }
+        ];
+        const action = setSelectedTarget(newSelect);
+        expect(
+            cloudreveApp(
+                {
+                    ...initState,
+                    explorer: {
+                        ...initState.explorer,
+                        selected: [{ type: "file" }]
+                    }
+                },
+                action
+            )
+        ).toEqual({
+            ...initState,
+            explorer: {
+                ...initState.explorer,
+                selected: newSelect,
+                selectProps: {
+                    isMultiple: true,
+                    withFolder: true,
+                    withFile: true
+                }
+            }
+        });
+    });
 
-  it('should handle SET_SUBTITLE', () => {
-    const action = setSubtitle('test sub title 2')
-    expect(cloudreveApp(initState, action)).toEqual({
-      ...initState,
-      viewUpdate: {
-        ...initState.viewUpdate,
-        subTitle: 'test sub title 2',
-      }
-    })
-  })
+    it("should handle RMOVE_SELECTED_TARGETS", () => {
+        const remove = ["1"];
+        const action = removeSelectedTargets(remove);
+        expect(
+            cloudreveApp(
+                {
+                    ...initState,
+                    explorer: {
+                        ...initState.explorer,
+                        selected: [
+                            { id: "1", type: "file" },
+                            { id: "2", type: "file" }
+                        ]
+                    }
+                },
+                action
+            )
+        ).toEqual({
+            ...initState,
+            explorer: {
+                ...initState.explorer,
+                selected: [{ id: "2", type: "file" }],
+                selectProps: {
+                    isMultiple: false,
+                    withFolder: false,
+                    withFile: true
+                }
+            }
+        });
+    });
 
-  it('should handle TOGGLE_SNACKBAR', () => {
-    const action = toggleSnackbar("top", "right", "something wrong", "error")
-    expect(cloudreveApp(initState, action)).toEqual({
-      ...initState,
-      viewUpdate: {
-        ...initState.viewUpdate,
-        snackbar:{
-          toggle: true,
-          vertical: 'top',
-          horizontal: 'right',
-          msg: 'something wrong',
-          color: 'error',
-        },
-      }
-    })
-  })
+    it("should handle NAVIGATOR_TO", async () => {
+        const store = mockStore(initState);
+        const action = navigateTo("/somewhere");
+        await store.dispatch(action);
+        expect(store.getActions()).toEqual([setNavigator("/somewhere", true)]);
+    });
 
-  it('should handle SET_MODALS_LOADING', () => {
-    const action = setModalsLoading('test loading status')
-    expect(cloudreveApp(initState, action)).toEqual({
-      ...initState,
-      viewUpdate: {
-        ...initState.viewUpdate,
-        modalsLoading: 'test loading status'
-      }
-    })
-  })
+    it("should handle NAVIGATOR_UP", async () => {
+        const navState = {
+            ...initState,
+            navigator: {
+                ...initState.navigator,
+                path: "/to/somewhere"
+            }
+        };
+        const store = mockStore(navState);
+        const action = navigateUp();
+        await store.dispatch(action);
+        expect(store.getActions()).toEqual([setNavigator("/to", true)]);
+    });
 
-  it('should handle SET_SESSION_STATUS', () => {
-    const action = setSessionStatus(true)
-    expect(cloudreveApp(initState, action)).toEqual({
-      ...initState,
-      viewUpdate: {
-        ...initState.viewUpdate,
-        isLogin: true
-      }
-    })
-  })
+    it("should handle SET_NAVIGATOR", () => {
+        const navState = {
+            ...initState,
+            navigator: {
+                ...initState.navigator,
+                path: "/to/somewhere"
+            }
+        };
+        const action = setNavigator("/newpath", true);
+        expect(cloudreveApp(navState, action)).toEqual({
+            ...initState,
+            navigator: {
+                ...initState.navigator,
+                path: "/newpath"
+            },
+            viewUpdate: {
+                ...initState.viewUpdate,
+                contextOpen: false,
+                navigatorError: false,
+                navigatorLoading: true
+            },
+            explorer: {
+                ...initState.explorer,
+                selected: [],
+                selectProps: {
+                    isMultiple: false,
+                    withFolder: false,
+                    withFile: false
+                },
+                keywords: ""
+            }
+        });
+        expect(window.currntPath).toEqual("/newpath");
+    });
 
-  it('should handle ENABLE_LOAD_UPLOADER', () => {
-    const action = enableLoadUploader()
-    expect(cloudreveApp(initState, action)).toEqual({
-      ...initState,
-      viewUpdate: {
-        ...initState.viewUpdate,
-        loadUploader: true
-      }
-    })
-  })
+    it("should handle TOGGLE_DAYLIGHT_MODE", () => {
+        const action = toggleDaylightMode();
+        const darkState = {
+            ...initState,
+            siteConfig: {
+                ...initState.siteConfig,
+                theme: {
+                    ...initState.siteConfig.theme,
+                    palette: {
+                        ...initState.siteConfig.theme.palette,
+                        type: "dark"
+                    }
+                }
+            }
+        };
+        const lightState = {
+            ...initState,
+            siteConfig: {
+                ...initState.siteConfig,
+                theme: {
+                    ...initState.siteConfig.theme,
+                    palette: {
+                        ...initState.siteConfig.theme.palette,
+                        type: "light"
+                    }
+                }
+            }
+        };
+        expect(cloudreveApp(initState, action)).toEqual(darkState);
+        expect(cloudreveApp(darkState, action)).toEqual(lightState);
+    });
 
-  it('should handle REFRESH_FILE_LIST', () => {
-    const action = refreshFileList()
-    expect(cloudreveApp(initState, action)).toEqual({
-      ...initState,
-      navigator: {
-        ...initState.navigator,
-        refresh: false,
-      },
-      explorer: {
-        ...initState.explorer,
-        selected:[],
-        selectProps: {
-            isMultiple:false,
-            withFolder:false,
-            withFile:false,
-        }
-      }
-    })
-  })
+    it("should handle APPLY_THEME", () => {
+        const action = applyThemes("foo");
+        const stateWithThemes = {
+            ...initState,
+            siteConfig: {
+                ...initState.siteConfig,
+                themes: JSON.stringify({ foo: "bar" })
+            }
+        };
+        expect(cloudreveApp(stateWithThemes, action)).toEqual({
+            ...stateWithThemes,
+            siteConfig: {
+                ...stateWithThemes.siteConfig,
+                theme: "bar"
+            }
+        });
+    });
 
-  it('should handle SEARCH_MY_FILE', () => {
-    const action = searchMyFile('keyword')
-    expect(cloudreveApp(initState, action)).toEqual({
-      ...initState,
-      navigator: {
-        ...initState.navigator,
-        path: "/搜索结果",
-        refresh: true,
-      },
-      viewUpdate: {
-        ...initState.viewUpdate,
-        contextOpen:false,
-        navigatorError:false,
-        navigatorLoading:true,
-      },
-      explorer: {
-        ...initState.explorer,
-        selected:[],
-        selectProps: {
-            isMultiple:false,
-            withFolder:false,
-            withFile:false,
-        },
-        keywords: 'keyword'
-      }
-    })
-  })
+    it("should handle OPEN_CREATE_FOLDER_DIALOG", () => {
+        const action = openCreateFolderDialog();
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                modals: {
+                    ...initState.viewUpdate.modals,
+                    createNewFolder: true
+                },
+                contextOpen: false
+            }
+        });
+    });
 
+    it("should handle OPEN_RENAME_DIALOG", () => {
+        const action = openRenameDialog();
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                modals: {
+                    ...initState.viewUpdate.modals,
+                    rename: true
+                },
+                contextOpen: false
+            }
+        });
+    });
 
-  it('should handle SHOW_IMG_PREIVEW', () => {
-    const action = showImgPreivew({type: 'file'})
-    const showImgState = {
-      ...initState,
-      explorer: {
-        ...initState.explorer,
-        fileList: [{type: 'file'}, {type: 'dir'}]
-      }
-    }
-    expect(cloudreveApp(showImgState, action)).toEqual({
-      ...showImgState,
-      explorer: {
-        ...showImgState.explorer,
-        imgPreview: {
-          ...showImgState.explorer.imgPreview,
-          first: {type: 'file'},
-          other: [{type: 'file'}, {type: 'dir'}],
-        }
-      },
-    })
-  })
+    it("should handle OPEN_REMOVE_DIALOG", () => {
+        const action = openRemoveDialog();
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                modals: {
+                    ...initState.viewUpdate.modals,
+                    remove: true
+                },
+                contextOpen: false
+            }
+        });
+    });
 
-  it('should handle REFRESH_STORAGE', () => {
-    const action = refreshStorage()
+    it("should handle OPEN_MOVE_DIALOG", () => {
+        const action = openMoveDialog();
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                modals: {
+                    ...initState.viewUpdate.modals,
+                    move: true
+                },
+                contextOpen: false
+            }
+        });
+    });
 
-    expect(cloudreveApp(initState, action)).toEqual({
-      ...initState,
-      viewUpdate: {
-        ...initState.viewUpdate,
-        storageRefresh: true
-      },
-    })
-  })
+    it("should handle OPEN_RESAVE_DIALOG", () => {
+        const action = openResaveDialog();
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                modals: {
+                    ...initState.viewUpdate.modals,
+                    resave: true
+                },
+                contextOpen: false
+            }
+        });
+    });
 
-  it('should handle SAVE_FILE', () => {
-    const action = saveFile()
-    expect(cloudreveApp(initState, action)).toEqual({
-      ...initState,
-      explorer: {
-        ...initState.explorer,
-        fileSave: true
-      },
-    })
-  })
+    it("should handle SET_USER_POPOVER", () => {
+        // TODO: update to real anchor
+        const action = setUserPopover("anchor");
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                userPopoverAnchorEl: "anchor"
+            }
+        });
+    });
 
-  it('should handle SET_LAST_SELECT', () => {
-    const action = setLastSelect({type: 'file'}, 1)
-    expect(cloudreveApp(initState, action)).toEqual({
-      ...initState,
-      explorer: {
-        ...initState.explorer,
-        lastSelect: {
-          file: {type: 'file'},
-          index: 1,
-        }
-      },
-    })
-  })
+    it("should handle SET_SHARE_USER_POPOVER", () => {
+        // TODO: update to real anchor
+        const action = setShareUserPopover("anchor");
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                shareUserPopoverAnchorEl: "anchor"
+            }
+        });
+    });
 
-  it('should handle SET_SHIFT_SELECTED_IDS', () => {
-    const action = setShiftSelectedIds(['1', '2'])
-    expect(cloudreveApp(initState, action)).toEqual({
-      ...initState,
-      explorer: {
-        ...initState.explorer,
-        shiftSelectedIds: ['1', '2']
-      },
-    })
-  })
-})
+    it("should handle OPEN_SHARE_DIALOG", () => {
+        // TODO: update to real anchor
+        const action = openShareDialog();
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                modals: {
+                    ...initState.viewUpdate.modals,
+                    share: true
+                },
+                contextOpen: false
+            }
+        });
+    });
+
+    it("should handle SET_SITE_CONFIG", () => {
+        // TODO: update to real anchor
+        const action = setSiteConfig({ foo: "bar" });
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            siteConfig: {
+                foo: "bar"
+            }
+        });
+    });
+
+    it("should handle SET_SITE_CONFIG", () => {
+        // TODO: update to real anchor
+        const action = setSiteConfig({ foo: "bar" });
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            siteConfig: {
+                foo: "bar"
+            }
+        });
+    });
+
+    it("should handle OPEN_MUSIC_DIALOG", () => {
+        const action = openMusicDialog();
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                modals: {
+                    ...initState.viewUpdate.modals,
+                    music: true
+                },
+                contextOpen: false
+            }
+        });
+    });
+
+    it("should handle OPEN_REMOTE_DOWNLOAD_DIALOG", () => {
+        const action = openRemoteDownloadDialog();
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                modals: {
+                    ...initState.viewUpdate.modals,
+                    remoteDownload: true
+                },
+                contextOpen: false
+            }
+        });
+    });
+
+    it("should handle OPEN_TORRENT_DOWNLOAD_DIALOG", () => {
+        const action = openTorrentDownloadDialog();
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                modals: {
+                    ...initState.viewUpdate.modals,
+                    torrentDownload: true
+                },
+                contextOpen: false
+            }
+        });
+    });
+
+    it("should handle OPEN_DECOMPRESS_DIALOG", () => {
+        const action = openDecompressDialog();
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                modals: {
+                    ...initState.viewUpdate.modals,
+                    decompress: true
+                },
+                contextOpen: false
+            }
+        });
+    });
+
+    it("should handle OPEN_COMPRESS_DIALOG", () => {
+        const action = openCompressDialog();
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                modals: {
+                    ...initState.viewUpdate.modals,
+                    compress: true
+                },
+                contextOpen: false
+            }
+        });
+    });
+
+    it("should handle OPEN_GET_SOURCE_DIALOG", () => {
+        const action = openGetSourceDialog();
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                modals: {
+                    ...initState.viewUpdate.modals,
+                    getSource: true
+                },
+                contextOpen: false
+            }
+        });
+    });
+
+    it("should handle OPEN_COPY_DIALOG", () => {
+        const action = openCopyDialog();
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                modals: {
+                    ...initState.viewUpdate.modals,
+                    copy: true
+                },
+                contextOpen: false
+            }
+        });
+    });
+
+    it("should handle OPEN_LOADING_DIALOG", () => {
+        const action = openLoadingDialog("loading");
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                modals: {
+                    ...initState.viewUpdate.modals,
+                    loading: true,
+                    loadingText: "loading"
+                },
+                contextOpen: false
+            }
+        });
+    });
+
+    it("should handle CLOSE_ALL_MODALS", () => {
+        const action = closeAllModals();
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                modals: {
+                    ...initState.viewUpdate.modals,
+                    createNewFolder: false,
+                    rename: false,
+                    move: false,
+                    remove: false,
+                    share: false,
+                    music: false,
+                    remoteDownload: false,
+                    torrentDownload: false,
+                    getSource: false,
+                    resave: false,
+                    copy: false,
+                    loading: false,
+                    compress: false,
+                    decompress: false
+                }
+            }
+        });
+    });
+
+    it("should handle CHANGE_SUB_TITLE", async () => {
+        const store = mockStore(initState);
+        const action = changeSubTitle("test sub title");
+        await store.dispatch(action);
+        expect(store.getActions()).toEqual([setSubtitle("test sub title")]);
+        expect(document.title).toEqual("test sub title - Cloudreve");
+    });
+
+    it("should handle SET_SUBTITLE", () => {
+        const action = setSubtitle("test sub title 2");
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                subTitle: "test sub title 2"
+            }
+        });
+    });
+
+    it("should handle TOGGLE_SNACKBAR", () => {
+        const action = toggleSnackbar(
+            "top",
+            "right",
+            "something wrong",
+            "error"
+        );
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                snackbar: {
+                    toggle: true,
+                    vertical: "top",
+                    horizontal: "right",
+                    msg: "something wrong",
+                    color: "error"
+                }
+            }
+        });
+    });
+
+    it("should handle SET_MODALS_LOADING", () => {
+        const action = setModalsLoading("test loading status");
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                modalsLoading: "test loading status"
+            }
+        });
+    });
+
+    it("should handle SET_SESSION_STATUS", () => {
+        const action = setSessionStatus(true);
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                isLogin: true
+            }
+        });
+    });
+
+    it("should handle ENABLE_LOAD_UPLOADER", () => {
+        const action = enableLoadUploader();
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                loadUploader: true
+            }
+        });
+    });
+
+    it("should handle REFRESH_FILE_LIST", () => {
+        const action = refreshFileList();
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            navigator: {
+                ...initState.navigator,
+                refresh: false
+            },
+            explorer: {
+                ...initState.explorer,
+                selected: [],
+                selectProps: {
+                    isMultiple: false,
+                    withFolder: false,
+                    withFile: false
+                }
+            }
+        });
+    });
+
+    it("should handle SEARCH_MY_FILE", () => {
+        const action = searchMyFile("keyword");
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            navigator: {
+                ...initState.navigator,
+                path: "/搜索结果",
+                refresh: true
+            },
+            viewUpdate: {
+                ...initState.viewUpdate,
+                contextOpen: false,
+                navigatorError: false,
+                navigatorLoading: true
+            },
+            explorer: {
+                ...initState.explorer,
+                selected: [],
+                selectProps: {
+                    isMultiple: false,
+                    withFolder: false,
+                    withFile: false
+                },
+                keywords: "keyword"
+            }
+        });
+    });
+
+    it("should handle SHOW_IMG_PREIVEW", () => {
+        const action = showImgPreivew({ type: "file" });
+        const showImgState = {
+            ...initState,
+            explorer: {
+                ...initState.explorer,
+                fileList: [{ type: "file" }, { type: "dir" }]
+            }
+        };
+        expect(cloudreveApp(showImgState, action)).toEqual({
+            ...showImgState,
+            explorer: {
+                ...showImgState.explorer,
+                imgPreview: {
+                    ...showImgState.explorer.imgPreview,
+                    first: { type: "file" },
+                    other: [{ type: "file" }, { type: "dir" }]
+                }
+            }
+        });
+    });
+
+    it("should handle REFRESH_STORAGE", () => {
+        const action = refreshStorage();
+
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            viewUpdate: {
+                ...initState.viewUpdate,
+                storageRefresh: true
+            }
+        });
+    });
+
+    it("should handle SAVE_FILE", () => {
+        const action = saveFile();
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            explorer: {
+                ...initState.explorer,
+                fileSave: true
+            }
+        });
+    });
+
+    it("should handle SET_LAST_SELECT", () => {
+        const action = setLastSelect({ type: "file" }, 1);
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            explorer: {
+                ...initState.explorer,
+                lastSelect: {
+                    file: { type: "file" },
+                    index: 1
+                }
+            }
+        });
+    });
+
+    it("should handle SET_SHIFT_SELECTED_IDS", () => {
+        const action = setShiftSelectedIds(["1", "2"]);
+        expect(cloudreveApp(initState, action)).toEqual({
+            ...initState,
+            explorer: {
+                ...initState.explorer,
+                shiftSelectedIds: ["1", "2"]
+            }
+        });
+    });
+});
diff --git a/src/reducers/navigator.js b/src/reducers/navigator.js
index e970143..b5ca14d 100644
--- a/src/reducers/navigator.js
+++ b/src/reducers/navigator.js
@@ -1,12 +1,12 @@
 const navigator = (state = [], action) => {
     switch (action.type) {
-        case 'NAVIGATOR_TO':
+        case "NAVIGATOR_TO":
             return Object.assign({}, state, {
                 path: action.path
             });
         default:
-            return state
+            return state;
     }
-  }
-  
-  export default navigator
\ No newline at end of file
+};
+
+export default navigator;
diff --git a/src/redux/combineReducers.ts b/src/redux/combineReducers.ts
index e34a222..8897cc9 100644
--- a/src/redux/combineReducers.ts
+++ b/src/redux/combineReducers.ts
@@ -1,16 +1,24 @@
-import { combineReducers as combine, ReducersMapObject, AnyAction } from 'redux'
-import invariant from 'invariant'
+import {
+    combineReducers as combine,
+    ReducersMapObject,
+    AnyAction
+} from "redux";
+import invariant from "invariant";
 
 export const combineReducers = (reducers: ReducersMapObject) => {
-  const combinedReducer = combine(reducers)
-  // TODO: define state type
-  return (state: any, action: AnyAction) => {
-    if (action.type && !action.type.startsWith("@@") && action.type.split('/').length > 1) {
-      const namespace = action.type.split('/')[0]
-      const reducer = reducers[namespace]
-      invariant(!!reducer, `reducer ${namespace} doesn't exist`)
-      return reducer && reducer(state, action)
-    }
-    return combinedReducer(state, action)
-  }
-}
\ No newline at end of file
+    const combinedReducer = combine(reducers);
+    // TODO: define state type
+    return (state: any, action: AnyAction) => {
+        if (
+            action.type &&
+            !action.type.startsWith("@@") &&
+            action.type.split("/").length > 1
+        ) {
+            const namespace = action.type.split("/")[0];
+            const reducer = reducers[namespace];
+            invariant(!!reducer, `reducer ${namespace} doesn't exist`);
+            return reducer && reducer(state, action);
+        }
+        return combinedReducer(state, action);
+    };
+};
diff --git a/src/redux/explorer/index.ts b/src/redux/explorer/index.ts
index d23fc0b..c21d6af 100644
--- a/src/redux/explorer/index.ts
+++ b/src/redux/explorer/index.ts
@@ -1,7 +1,7 @@
-import * as actions from './action'
-import * as reducers from './reducer'
+import * as actions from "./action";
+import * as reducers from "./reducer";
 
 export default {
-  actions,
-  reducers,
-}
+    actions,
+    reducers
+};
diff --git a/src/redux/explorer/reducer.ts b/src/redux/explorer/reducer.ts
index 6109435..9593ef4 100644
--- a/src/redux/explorer/reducer.ts
+++ b/src/redux/explorer/reducer.ts
@@ -1,186 +1,189 @@
 /* eslint-disable no-case-declarations */
-import { AnyAction } from "redux"
+import { AnyAction } from "redux";
 import { CloudreveFile } from "../../types";
 
 interface SelectProps {
-  isMultiple: boolean;
-  withFolder: boolean;
-  withFile: boolean;
+    isMultiple: boolean;
+    withFolder: boolean;
+    withFile: boolean;
 }
 
 export interface ExplorerState {
-  dndSignal: boolean;
-  dndTarget: any;
-  dndSource: any;
-  fileList: CloudreveFile[];
-  dirList: CloudreveFile[];
-  selected: CloudreveFile[];
-  selectProps: SelectProps;
-  lastSelect: {
-    file: CloudreveFile;
-    index: number;
-  };
-  shiftSelectedIds: string[];
-  imgPreview: {
-      first: CloudreveFile;
-      other: [];
-  };
-  keywords: string;
-  fileSave: boolean;
+    dndSignal: boolean;
+    dndTarget: any;
+    dndSource: any;
+    fileList: CloudreveFile[];
+    dirList: CloudreveFile[];
+    selected: CloudreveFile[];
+    selectProps: SelectProps;
+    lastSelect: {
+        file: CloudreveFile;
+        index: number;
+    };
+    shiftSelectedIds: string[];
+    imgPreview: {
+        first: CloudreveFile;
+        other: [];
+    };
+    keywords: string;
+    fileSave: boolean;
 }
 
 export const initState: ExplorerState = {
-  dndSignal: false,
-  dndTarget: null,
-  dndSource: null,
-  fileList: [],
-  dirList: [],
-  selected: [],
-  selectProps: {
-      isMultiple: false,
-      withFolder: false,
-      withFile: false
-  },
-  lastSelect: {
-    file: {
-      id: '',
-      name: '',
-      size: 0,
-      type: 'file',
-      date: ''
+    dndSignal: false,
+    dndTarget: null,
+    dndSource: null,
+    fileList: [],
+    dirList: [],
+    selected: [],
+    selectProps: {
+        isMultiple: false,
+        withFolder: false,
+        withFile: false
     },
-    index: -1,
-  },
-  shiftSelectedIds: [],
-  imgPreview: {
-      first: {
-        id: '',
-        name: '',
-        size: 0,
-        type: 'file',
-        date: ''
-      },
-      other: []
-  },
-  keywords: '',
-  fileSave: false
-}
-
-const checkSelectedProps = (selected: CloudreveFile[]): SelectProps =>{
-  const isMultiple = selected.length > 1;
-  let withFolder = false
-  let withFile = false
-  selected.forEach((value)=>{
-      if(value.type === "dir"){
-          withFolder = true;
-      }else if(value.type === "file"){
-          withFile = true;
-      }
-  })
-  return {
-    isMultiple,
-    withFolder,
-    withFile,
-  }
-}
-
-const explorer = (state: ExplorerState = initState, action: AnyAction): ExplorerState => {
-  switch (action.type) {
-    case 'DRAG_AND_DROP':
-      return Object.assign({}, state, {
-        dndSignal: !state.dndSignal,
-        dndTarget: action.target,
-        dndSource: action.source,
-      });
-    case 'SET_FILE_LIST':
-      return Object.assign({}, state, {
-        fileList: action.list,
-      });
-    case 'SET_DIR_LIST':
-      return Object.assign({}, state, {
-        dirList: action.list,
-      });
-    case 'ADD_SELECTED_TARGETS':
-      const addedSelected = [...state.selected,...action.targets]
-      return Object.assign({}, state, {
-        selected: addedSelected,
-        selectProps: checkSelectedProps(addedSelected)
-      });
-    case 'SET_SELECTED_TARGET':
-      const newSelected = action.targets
-      return Object.assign({}, state, {
-        selected: newSelected,
-        selectProps: checkSelectedProps(newSelected)
-      });
-    case 'RMOVE_SELECTED_TARGETS':
-      const { fileIds } = action
-      const filteredSelected = state.selected.filter((file) => {
-        return !fileIds.includes(file.id)
-      })
-      return Object.assign({}, state, {
-        selected: filteredSelected,
-        selectProps: checkSelectedProps(filteredSelected)
-      });
-    case 'REFRESH_FILE_LIST':
-      return Object.assign({}, state, {
-        selected:[],
-        selectProps: {
-            isMultiple: false,
-            withFolder: false,
-            withFile: false,
-        }
-      });
-    case 'SEARCH_MY_FILE':
-      return Object.assign({}, state, {
-        selected:[],
-        selectProps: {
-            isMultiple: false,
-            withFolder: false,
-            withFile: false,
+    lastSelect: {
+        file: {
+            id: "",
+            name: "",
+            size: 0,
+            type: "file",
+            date: ""
         },
-        keywords: action.keywords,
-      });
-    case 'SHOW_IMG_PREIVEW':
-        return Object.assign({}, state, {
-          imgPreview: {
-            first: action.first,
-            other: state.fileList,
-          },
-        });
-    case 'SAVE_FILE':
-        return {
-          ...state,
-          fileSave: !state.fileSave,
+        index: -1
+    },
+    shiftSelectedIds: [],
+    imgPreview: {
+        first: {
+            id: "",
+            name: "",
+            size: 0,
+            type: "file",
+            date: ""
+        },
+        other: []
+    },
+    keywords: "",
+    fileSave: false
+};
+
+const checkSelectedProps = (selected: CloudreveFile[]): SelectProps => {
+    const isMultiple = selected.length > 1;
+    let withFolder = false;
+    let withFile = false;
+    selected.forEach(value => {
+        if (value.type === "dir") {
+            withFolder = true;
+        } else if (value.type === "file") {
+            withFile = true;
         }
-    case 'SET_LAST_SELECT':
-          const { file, index } = action
-          return {
-            ...state,
-            lastSelect: {
-              file,
-              index,
-            },
-          }
-    case 'SET_SHIFT_SELECTED_IDS':
-            const { shiftSelectedIds } = action
+    });
+    return {
+        isMultiple,
+        withFolder,
+        withFile
+    };
+};
+
+const explorer = (
+    state: ExplorerState = initState,
+    action: AnyAction
+): ExplorerState => {
+    switch (action.type) {
+        case "DRAG_AND_DROP":
+            return Object.assign({}, state, {
+                dndSignal: !state.dndSignal,
+                dndTarget: action.target,
+                dndSource: action.source
+            });
+        case "SET_FILE_LIST":
+            return Object.assign({}, state, {
+                fileList: action.list
+            });
+        case "SET_DIR_LIST":
+            return Object.assign({}, state, {
+                dirList: action.list
+            });
+        case "ADD_SELECTED_TARGETS":
+            const addedSelected = [...state.selected, ...action.targets];
+            return Object.assign({}, state, {
+                selected: addedSelected,
+                selectProps: checkSelectedProps(addedSelected)
+            });
+        case "SET_SELECTED_TARGET":
+            const newSelected = action.targets;
+            return Object.assign({}, state, {
+                selected: newSelected,
+                selectProps: checkSelectedProps(newSelected)
+            });
+        case "RMOVE_SELECTED_TARGETS":
+            const { fileIds } = action;
+            const filteredSelected = state.selected.filter(file => {
+                return !fileIds.includes(file.id);
+            });
+            return Object.assign({}, state, {
+                selected: filteredSelected,
+                selectProps: checkSelectedProps(filteredSelected)
+            });
+        case "REFRESH_FILE_LIST":
+            return Object.assign({}, state, {
+                selected: [],
+                selectProps: {
+                    isMultiple: false,
+                    withFolder: false,
+                    withFile: false
+                }
+            });
+        case "SEARCH_MY_FILE":
+            return Object.assign({}, state, {
+                selected: [],
+                selectProps: {
+                    isMultiple: false,
+                    withFolder: false,
+                    withFile: false
+                },
+                keywords: action.keywords
+            });
+        case "SHOW_IMG_PREIVEW":
+            return Object.assign({}, state, {
+                imgPreview: {
+                    first: action.first,
+                    other: state.fileList
+                }
+            });
+        case "SAVE_FILE":
             return {
-              ...state,
-              shiftSelectedIds,
-            }
-    case 'SET_NAVIGATOR':
-      return {
-        ...state,
-        selected:[],
-        selectProps: {
-            isMultiple: false,
-            withFolder: false,
-            withFile: false,
-        },
-        keywords: '',
-      }
-    default:
-      return state
-  }
-}
+                ...state,
+                fileSave: !state.fileSave
+            };
+        case "SET_LAST_SELECT":
+            const { file, index } = action;
+            return {
+                ...state,
+                lastSelect: {
+                    file,
+                    index
+                }
+            };
+        case "SET_SHIFT_SELECTED_IDS":
+            const { shiftSelectedIds } = action;
+            return {
+                ...state,
+                shiftSelectedIds
+            };
+        case "SET_NAVIGATOR":
+            return {
+                ...state,
+                selected: [],
+                selectProps: {
+                    isMultiple: false,
+                    withFolder: false,
+                    withFile: false
+                },
+                keywords: ""
+            };
+        default:
+            return state;
+    }
+};
 
-export default explorer
\ No newline at end of file
+export default explorer;
diff --git a/src/redux/viewUpdate/action.ts b/src/redux/viewUpdate/action.ts
index 646dcbc..6d5c28d 100644
--- a/src/redux/viewUpdate/action.ts
+++ b/src/redux/viewUpdate/action.ts
@@ -1,22 +1,26 @@
-import { ThunkAction } from 'redux-thunk'
-import { AnyAction } from 'redux'
+import { ThunkAction } from "redux-thunk";
+import { AnyAction } from "redux";
 export interface ActionSetSubtitle extends AnyAction {
-  type: "SET_SUBTITLE";
-  title: string;
+    type: "SET_SUBTITLE";
+    title: string;
 }
 
 export const setSubtitle = (title: string): ActionSetSubtitle => {
-  return {
-    type: 'SET_SUBTITLE',
-    title,
-  }
-}
+    return {
+        type: "SET_SUBTITLE",
+        title
+    };
+};
 
-export const changeSubTitle = (title: string):
-ThunkAction<any, any, any, any> => {
-  return (dispatch, getState) => {
-    const state = getState()
-    document.title = (title === null || title === undefined) ? state.siteConfig.title : (title + " - " +state.siteConfig.title);
-    dispatch(setSubtitle(title))
-  }
-}
+export const changeSubTitle = (
+    title: string
+): ThunkAction<any, any, any, any> => {
+    return (dispatch, getState) => {
+        const state = getState();
+        document.title =
+            title === null || title === undefined
+                ? state.siteConfig.title
+                : title + " - " + state.siteConfig.title;
+        dispatch(setSubtitle(title));
+    };
+};
diff --git a/src/redux/viewUpdate/index.ts b/src/redux/viewUpdate/index.ts
index 2c2801b..c21d6af 100644
--- a/src/redux/viewUpdate/index.ts
+++ b/src/redux/viewUpdate/index.ts
@@ -1,7 +1,7 @@
-import * as actions from './action'
-import * as reducers from './reducer'
+import * as actions from "./action";
+import * as reducers from "./reducer";
 
 export default {
-  actions,
-  reducers,
-}
\ No newline at end of file
+    actions,
+    reducers
+};
diff --git a/src/redux/viewUpdate/reducer.ts b/src/redux/viewUpdate/reducer.ts
index f4d8c82..6cc8049 100644
--- a/src/redux/viewUpdate/reducer.ts
+++ b/src/redux/viewUpdate/reducer.ts
@@ -1,307 +1,313 @@
-import { AnyAction } from "redux"
-import Auth from "../../middleware/Auth"
+import { AnyAction } from "redux";
+import Auth from "../../middleware/Auth";
 
 export interface ViewUpdateState {
-  isLogin: boolean;
-  loadUploader: boolean;
-  open: boolean;
-  explorerViewMethod: string;
-  sortMethod: 'sizePos' | 'sizeRes' | 'namePos' | 'nameRev' | 'timePos' | 'timeRev';
-  subTitle: string | null;
-  contextType: string;
-  contextOpen: boolean;
-  menuOpen: boolean;
-  navigatorLoading: boolean;
-  navigatorError: boolean;
-  navigatorErrorMsg: string | null;
-  modalsLoading: boolean;
-  storageRefresh: boolean;
-  userPopoverAnchorEl: any;
-  shareUserPopoverAnchorEl: any;
-  modals: {
-      createNewFolder: boolean;
-      createNewFile: boolean;
-      rename: boolean;
-      move: boolean;
-      remove: boolean;
-      share: boolean;
-      music: boolean;
-      remoteDownload: boolean;
-      torrentDownload: boolean;
-      getSource: boolean;
-      copy: boolean;
-      resave: boolean;
-      compress: boolean;
-      decompress: boolean;
-      loading: boolean;
-      loadingText: string;
-  };
-  snackbar: {
-      toggle: boolean;
-      vertical: string;
-      horizontal: string;
-      msg: string;
-      color: string;
-  };
+    isLogin: boolean;
+    loadUploader: boolean;
+    open: boolean;
+    explorerViewMethod: string;
+    sortMethod:
+        | "sizePos"
+        | "sizeRes"
+        | "namePos"
+        | "nameRev"
+        | "timePos"
+        | "timeRev";
+    subTitle: string | null;
+    contextType: string;
+    contextOpen: boolean;
+    menuOpen: boolean;
+    navigatorLoading: boolean;
+    navigatorError: boolean;
+    navigatorErrorMsg: string | null;
+    modalsLoading: boolean;
+    storageRefresh: boolean;
+    userPopoverAnchorEl: any;
+    shareUserPopoverAnchorEl: any;
+    modals: {
+        createNewFolder: boolean;
+        createNewFile: boolean;
+        rename: boolean;
+        move: boolean;
+        remove: boolean;
+        share: boolean;
+        music: boolean;
+        remoteDownload: boolean;
+        torrentDownload: boolean;
+        getSource: boolean;
+        copy: boolean;
+        resave: boolean;
+        compress: boolean;
+        decompress: boolean;
+        loading: boolean;
+        loadingText: string;
+    };
+    snackbar: {
+        toggle: boolean;
+        vertical: string;
+        horizontal: string;
+        msg: string;
+        color: string;
+    };
 }
 export const initState: ViewUpdateState = {
-  // 是否登录
-  isLogin: Auth.Check(),
-  loadUploader:false,
-  open: false,
-  explorerViewMethod: "icon",
-  sortMethod: "timePos",
-  subTitle: null,
-  contextType: "none",
-  contextOpen: false,
-  menuOpen: false,
-  navigatorLoading: true,
-  navigatorError: false,
-  navigatorErrorMsg: null,
-  modalsLoading: false,
-  storageRefresh: false,
-  userPopoverAnchorEl: null,
-  shareUserPopoverAnchorEl: null,
-  modals: {
-      createNewFolder: false,
-      createNewFile: false,
-      rename: false,
-      move: false,
-      remove: false,
-      share: false,
-      music: false,
-      remoteDownload: false,
-      torrentDownload: false,
-      getSource: false,
-      copy:false,
-      resave: false,
-      compress:false,
-      decompress:false,
-      loading: false,
-      loadingText: ''
-  },
-  snackbar: {
-      toggle: false,
-      vertical: "top",
-      horizontal: "center",
-      msg: "",
-      color: ""
-  }
-}
+    // 是否登录
+    isLogin: Auth.Check(),
+    loadUploader: false,
+    open: false,
+    explorerViewMethod: "icon",
+    sortMethod: "timePos",
+    subTitle: null,
+    contextType: "none",
+    contextOpen: false,
+    menuOpen: false,
+    navigatorLoading: true,
+    navigatorError: false,
+    navigatorErrorMsg: null,
+    modalsLoading: false,
+    storageRefresh: false,
+    userPopoverAnchorEl: null,
+    shareUserPopoverAnchorEl: null,
+    modals: {
+        createNewFolder: false,
+        createNewFile: false,
+        rename: false,
+        move: false,
+        remove: false,
+        share: false,
+        music: false,
+        remoteDownload: false,
+        torrentDownload: false,
+        getSource: false,
+        copy: false,
+        resave: false,
+        compress: false,
+        decompress: false,
+        loading: false,
+        loadingText: ""
+    },
+    snackbar: {
+        toggle: false,
+        vertical: "top",
+        horizontal: "center",
+        msg: "",
+        color: ""
+    }
+};
 const viewUpdate = (state: ViewUpdateState = initState, action: AnyAction) => {
     switch (action.type) {
-      case 'DRAWER_TOGGLE':
-        return Object.assign({}, state, {
-          open: action.open,
-        });
-      case 'CHANGE_VIEW_METHOD':
-        return Object.assign({}, state, {
-          explorerViewMethod: action.method,
-      });
-      case 'SET_NAVIGATOR_LOADING_STATUE':
-          return Object.assign({}, state, {
-            navigatorLoading:action.status,
-          });
-      case 'SET_NAVIGATOR_ERROR':
-          return Object.assign({}, state, {
-            navigatorError: action.status,
-            navigatorErrorMsg: action.msg,
-          })
-      case 'OPEN_CREATE_FOLDER_DIALOG':
-          return Object.assign({}, state, {
-            modals: Object.assign({}, state.modals, {
-                createNewFolder:true,
-            }),
-            contextOpen:false,
-          });
-        case 'OPEN_CREATE_FILE_DIALOG':
-          return Object.assign({}, state, {
-            modals: Object.assign({}, state.modals, {
-                createNewFile:true,
-            }),
-            contextOpen:false,
-          });
-      case 'OPEN_RENAME_DIALOG':
-          return Object.assign({}, state, {
-            modals: Object.assign({}, state.modals, {
-                rename:true,
-            }),
-            contextOpen:false,
-          });
-      case 'OPEN_REMOVE_DIALOG':
-          return  Object.assign({}, state, {
-            modals: Object.assign({}, state.modals, {
-                remove:true,
-            }),
-            contextOpen:false,
-          });
-      case 'OPEN_MOVE_DIALOG':
-          return Object.assign({}, state, {
-            modals: Object.assign({}, state.modals, {
-                move:true,
-            }),
-            contextOpen:false,
-          });
-      case 'OPEN_RESAVE_DIALOG':
-          // window.shareKey = action.key;
-          return Object.assign({}, state, {
-            modals: Object.assign({}, state.modals, {
-                resave:true,
-            }),
-            contextOpen:false,
-          });
-      case 'SET_USER_POPOVER':
-          return Object.assign({}, state, {
-            userPopoverAnchorEl:action.anchor,
-          });
-      case 'SET_SHARE_USER_POPOVER':
-          return Object.assign({}, state, {
-            shareUserPopoverAnchorEl:action.anchor,
-          });
-      case 'OPEN_SHARE_DIALOG':
-          return Object.assign({}, state, {
-            modals: Object.assign({}, state.modals, {
-                share:true,
-            }),
-            contextOpen:false,
-          });
-      case 'OPEN_MUSIC_DIALOG':
-        return Object.assign({}, state, {
-          modals: Object.assign({}, state.modals, {
-              music:true,
-          }),
-          contextOpen:false,
-        });
-      case 'OPEN_REMOTE_DOWNLOAD_DIALOG':
-          return Object.assign({}, state, {
-            modals: Object.assign({}, state.modals, {
-                remoteDownload:true,
-            }),
-            contextOpen:false,
-        });
-      case 'OPEN_TORRENT_DOWNLOAD_DIALOG':
-          return Object.assign({}, state, {
-            modals: Object.assign({}, state.modals, {
-                torrentDownload:true,
-            }),
-            contextOpen:false,
-          });
-      case 'OPEN_DECOMPRESS_DIALOG':
-          return Object.assign({}, state, {
-            modals: Object.assign({}, state.modals, {
-                decompress:true,
-            }),
-            contextOpen:false,
-          });
-      case 'OPEN_COMPRESS_DIALOG':
-          return  Object.assign({}, state, {
-            modals: Object.assign({}, state.modals, {
-                compress:true,
-            }),
-            contextOpen:false,
-          });
-      case 'OPEN_GET_SOURCE_DIALOG':
-          return Object.assign({}, state, {
-            modals: Object.assign({}, state.modals, {
-                getSource:true,
-            }),
-            contextOpen:false,
-          });
-      case 'OPEN_COPY_DIALOG':
-          return Object.assign({}, state, {
-            modals: Object.assign({}, state.modals, {
-                copy:true,
-            }),
-            contextOpen:false,
-          });
-      case 'OPEN_LOADING_DIALOG':
-          return Object.assign({}, state, {
-            modals: Object.assign({}, state.modals, {
-                loading:true,
-                loadingText:action.text,
-            }),
-            contextOpen:false,
-          });
-      case 'CLOSE_ALL_MODALS':
-          return Object.assign({}, state, {
-            modals: Object.assign({}, state.modals, {
-                createNewFolder:false,
-                createNewFile:false,
-                rename:false,
-                move:false,
-                remove:false,
-                share:false,
-                music:false,
-                remoteDownload:false,
-                torrentDownload:false,
-                getSource:false,
-                resave:false,
-                copy:false,
-                loading:false,
-                compress:false,
-                decompress:false,
-            }),
-          });
-        case 'TOGGLE_SNACKBAR':
+        case "DRAWER_TOGGLE":
             return Object.assign({}, state, {
-              snackbar:{
-                  toggle:!state.snackbar.toggle,
-                  vertical:action.vertical,
-                  horizontal:action.horizontal,
-                  msg:action.msg,
-                  color:action.color,
-              },
+                open: action.open
             });
-        case 'SET_MODALS_LOADING':
+        case "CHANGE_VIEW_METHOD":
             return Object.assign({}, state, {
-              modalsLoading:action.status,
+                explorerViewMethod: action.method
             });
-        case 'SET_SESSION_STATUS':
+        case "SET_NAVIGATOR_LOADING_STATUE":
+            return Object.assign({}, state, {
+                navigatorLoading: action.status
+            });
+        case "SET_NAVIGATOR_ERROR":
+            return Object.assign({}, state, {
+                navigatorError: action.status,
+                navigatorErrorMsg: action.msg
+            });
+        case "OPEN_CREATE_FOLDER_DIALOG":
+            return Object.assign({}, state, {
+                modals: Object.assign({}, state.modals, {
+                    createNewFolder: true
+                }),
+                contextOpen: false
+            });
+        case "OPEN_CREATE_FILE_DIALOG":
+            return Object.assign({}, state, {
+                modals: Object.assign({}, state.modals, {
+                    createNewFile: true
+                }),
+                contextOpen: false
+            });
+        case "OPEN_RENAME_DIALOG":
+            return Object.assign({}, state, {
+                modals: Object.assign({}, state.modals, {
+                    rename: true
+                }),
+                contextOpen: false
+            });
+        case "OPEN_REMOVE_DIALOG":
+            return Object.assign({}, state, {
+                modals: Object.assign({}, state.modals, {
+                    remove: true
+                }),
+                contextOpen: false
+            });
+        case "OPEN_MOVE_DIALOG":
+            return Object.assign({}, state, {
+                modals: Object.assign({}, state.modals, {
+                    move: true
+                }),
+                contextOpen: false
+            });
+        case "OPEN_RESAVE_DIALOG":
+            // window.shareKey = action.key;
+            return Object.assign({}, state, {
+                modals: Object.assign({}, state.modals, {
+                    resave: true
+                }),
+                contextOpen: false
+            });
+        case "SET_USER_POPOVER":
+            return Object.assign({}, state, {
+                userPopoverAnchorEl: action.anchor
+            });
+        case "SET_SHARE_USER_POPOVER":
+            return Object.assign({}, state, {
+                shareUserPopoverAnchorEl: action.anchor
+            });
+        case "OPEN_SHARE_DIALOG":
+            return Object.assign({}, state, {
+                modals: Object.assign({}, state.modals, {
+                    share: true
+                }),
+                contextOpen: false
+            });
+        case "OPEN_MUSIC_DIALOG":
+            return Object.assign({}, state, {
+                modals: Object.assign({}, state.modals, {
+                    music: true
+                }),
+                contextOpen: false
+            });
+        case "OPEN_REMOTE_DOWNLOAD_DIALOG":
+            return Object.assign({}, state, {
+                modals: Object.assign({}, state.modals, {
+                    remoteDownload: true
+                }),
+                contextOpen: false
+            });
+        case "OPEN_TORRENT_DOWNLOAD_DIALOG":
+            return Object.assign({}, state, {
+                modals: Object.assign({}, state.modals, {
+                    torrentDownload: true
+                }),
+                contextOpen: false
+            });
+        case "OPEN_DECOMPRESS_DIALOG":
+            return Object.assign({}, state, {
+                modals: Object.assign({}, state.modals, {
+                    decompress: true
+                }),
+                contextOpen: false
+            });
+        case "OPEN_COMPRESS_DIALOG":
+            return Object.assign({}, state, {
+                modals: Object.assign({}, state.modals, {
+                    compress: true
+                }),
+                contextOpen: false
+            });
+        case "OPEN_GET_SOURCE_DIALOG":
+            return Object.assign({}, state, {
+                modals: Object.assign({}, state.modals, {
+                    getSource: true
+                }),
+                contextOpen: false
+            });
+        case "OPEN_COPY_DIALOG":
+            return Object.assign({}, state, {
+                modals: Object.assign({}, state.modals, {
+                    copy: true
+                }),
+                contextOpen: false
+            });
+        case "OPEN_LOADING_DIALOG":
+            return Object.assign({}, state, {
+                modals: Object.assign({}, state.modals, {
+                    loading: true,
+                    loadingText: action.text
+                }),
+                contextOpen: false
+            });
+        case "CLOSE_ALL_MODALS":
+            return Object.assign({}, state, {
+                modals: Object.assign({}, state.modals, {
+                    createNewFolder: false,
+                    createNewFile: false,
+                    rename: false,
+                    move: false,
+                    remove: false,
+                    share: false,
+                    music: false,
+                    remoteDownload: false,
+                    torrentDownload: false,
+                    getSource: false,
+                    resave: false,
+                    copy: false,
+                    loading: false,
+                    compress: false,
+                    decompress: false
+                })
+            });
+        case "TOGGLE_SNACKBAR":
+            return Object.assign({}, state, {
+                snackbar: {
+                    toggle: !state.snackbar.toggle,
+                    vertical: action.vertical,
+                    horizontal: action.horizontal,
+                    msg: action.msg,
+                    color: action.color
+                }
+            });
+        case "SET_MODALS_LOADING":
+            return Object.assign({}, state, {
+                modalsLoading: action.status
+            });
+        case "SET_SESSION_STATUS":
             return {
-              ...state,
-              isLogin: action.status,
-            }
-        case 'ENABLE_LOAD_UPLOADER':
+                ...state,
+                isLogin: action.status
+            };
+        case "ENABLE_LOAD_UPLOADER":
             return Object.assign({}, state, {
-              loadUploader:true,
+                loadUploader: true
             });
-        case 'REFRESH_STORAGE':
-          return Object.assign({}, state, {
-            storageRefresh:!state.storageRefresh,
-          });
-        case 'SEARCH_MY_FILE':
-          return Object.assign({}, state, {
-            contextOpen:false,
-            navigatorError:false,
-            navigatorLoading:true,
-          })
-        case 'CHANGE_CONTEXT_MENU':
-          if(state.contextOpen && action.open){
-              return Object.assign({}, state);
-          }
-          return Object.assign({}, state, {
-            contextOpen: action.open,
-            contextType: action.menuType,
-          });
-        case 'SET_SUBTITLE':
-          return Object.assign({}, state, {
-            subTitle: action.title,
-          });
-        case 'SET_SORT_METHOD':
-          return {
-            ...state,
-            sortMethod: action.method
-          }
-        case 'SET_NAVIGATOR':
-          return {
-            ...state,
-            contextOpen:false,
-            navigatorError:false,
-            navigatorLoading: action.navigatorLoading
-          }
-      default:
-        return state
+        case "REFRESH_STORAGE":
+            return Object.assign({}, state, {
+                storageRefresh: !state.storageRefresh
+            });
+        case "SEARCH_MY_FILE":
+            return Object.assign({}, state, {
+                contextOpen: false,
+                navigatorError: false,
+                navigatorLoading: true
+            });
+        case "CHANGE_CONTEXT_MENU":
+            if (state.contextOpen && action.open) {
+                return Object.assign({}, state);
+            }
+            return Object.assign({}, state, {
+                contextOpen: action.open,
+                contextType: action.menuType
+            });
+        case "SET_SUBTITLE":
+            return Object.assign({}, state, {
+                subTitle: action.title
+            });
+        case "SET_SORT_METHOD":
+            return {
+                ...state,
+                sortMethod: action.method
+            };
+        case "SET_NAVIGATOR":
+            return {
+                ...state,
+                contextOpen: false,
+                navigatorError: false,
+                navigatorLoading: action.navigatorLoading
+            };
+        default:
+            return state;
     }
-  }
-  
-  export default viewUpdate
\ No newline at end of file
+};
+
+export default viewUpdate;
diff --git a/src/serviceWorker.js b/src/serviceWorker.js
index 42aa0d1..7562040 100644
--- a/src/serviceWorker.js
+++ b/src/serviceWorker.js
@@ -10,125 +10,126 @@
 // To learn more about the benefits of this model and instructions on how to
 // opt-in, read https://bit.ly/CRA-PWA
 function registerValidSW(swUrl, config) {
-  navigator.serviceWorker
-    .register(swUrl)
-    .then(registration => {
-      registration.onupdatefound = () => {
-        const installingWorker = registration.installing;
-        if (installingWorker == null) {
-          return;
-        }
-        installingWorker.onstatechange = () => {
-          if (installingWorker.state === 'installed') {
-            if (navigator.serviceWorker.controller) {
-              // At this point, the updated precached content has been fetched,
-              // but the previous service worker will still serve the older
-              // content until all client tabs are closed.
-              console.log(
-                'New content is available and will be used when all ' +
-                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
-              );
+    navigator.serviceWorker
+        .register(swUrl)
+        .then(registration => {
+            registration.onupdatefound = () => {
+                const installingWorker = registration.installing;
+                if (installingWorker == null) {
+                    return;
+                }
+                installingWorker.onstatechange = () => {
+                    if (installingWorker.state === "installed") {
+                        if (navigator.serviceWorker.controller) {
+                            // At this point, the updated precached content has been fetched,
+                            // but the previous service worker will still serve the older
+                            // content until all client tabs are closed.
+                            console.log(
+                                "New content is available and will be used when all " +
+                                    "tabs for this page are closed. See https://bit.ly/CRA-PWA."
+                            );
 
-              // Execute callback
-              if (config && config.onUpdate) {
-                config.onUpdate(registration);
-              }
-            } else {
-              // At this point, everything has been precached.
-              // It's the perfect time to display a
-              // "Content is cached for offline use." message.
-              console.log('Content is cached for offline use.');
+                            // Execute callback
+                            if (config && config.onUpdate) {
+                                config.onUpdate(registration);
+                            }
+                        } else {
+                            // At this point, everything has been precached.
+                            // It's the perfect time to display a
+                            // "Content is cached for offline use." message.
+                            console.log("Content is cached for offline use.");
 
-              // Execute callback
-              if (config && config.onSuccess) {
-                config.onSuccess(registration);
-              }
-            }
-          }
-        };
-      };
-    })
-    .catch(error => {
-      console.error('Error during service worker registration:', error);
-    });
+                            // Execute callback
+                            if (config && config.onSuccess) {
+                                config.onSuccess(registration);
+                            }
+                        }
+                    }
+                };
+            };
+        })
+        .catch(error => {
+            console.error("Error during service worker registration:", error);
+        });
 }
 
 function checkValidServiceWorker(swUrl, config) {
-  // Check if the service worker can be found. If it can't reload the page.
-  fetch(swUrl)
-    .then(response => {
-      // Ensure service worker exists, and that we really are getting a JS file.
-      const contentType = response.headers.get('content-type');
-      if (
-        response.status === 404 ||
-        (contentType != null && contentType.indexOf('javascript') === -1)
-      ) {
-        // No service worker found. Probably a different app. Reload the page.
-        navigator.serviceWorker.ready.then(registration => {
-          registration.unregister().then(() => {
-            window.location.reload();
-          });
+    // Check if the service worker can be found. If it can't reload the page.
+    fetch(swUrl)
+        .then(response => {
+            // Ensure service worker exists, and that we really are getting a JS file.
+            const contentType = response.headers.get("content-type");
+            if (
+                response.status === 404 ||
+                (contentType != null &&
+                    contentType.indexOf("javascript") === -1)
+            ) {
+                // No service worker found. Probably a different app. Reload the page.
+                navigator.serviceWorker.ready.then(registration => {
+                    registration.unregister().then(() => {
+                        window.location.reload();
+                    });
+                });
+            } else {
+                // Service worker found. Proceed as normal.
+                registerValidSW(swUrl, config);
+            }
+        })
+        .catch(() => {
+            console.log(
+                "No internet connection found. App is running in offline mode."
+            );
         });
-      } else {
-        // Service worker found. Proceed as normal.
-        registerValidSW(swUrl, config);
-      }
-    })
-    .catch(() => {
-      console.log(
-        'No internet connection found. App is running in offline mode.'
-      );
-    });
 }
 
 const isLocalhost = Boolean(
-  window.location.hostname === 'localhost' ||
-    // [::1] is the IPv6 localhost address.
-    window.location.hostname === '[::1]' ||
-    // 127.0.0.1/8 is considered localhost for IPv4.
-    window.location.hostname.match(
-      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-    )
+    window.location.hostname === "localhost" ||
+        // [::1] is the IPv6 localhost address.
+        window.location.hostname === "[::1]" ||
+        // 127.0.0.1/8 is considered localhost for IPv4.
+        window.location.hostname.match(
+            /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+        )
 );
 
 export function register(config) {
-  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
-    // The URL constructor is available in all browsers that support SW.
-    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
-    if (publicUrl.origin !== window.location.origin) {
-      // Our service worker won't work if PUBLIC_URL is on a different origin
-      // from what our page is served on. This might happen if a CDN is used to
-      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
-      return;
-    }
+    if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
+        // The URL constructor is available in all browsers that support SW.
+        const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+        if (publicUrl.origin !== window.location.origin) {
+            // Our service worker won't work if PUBLIC_URL is on a different origin
+            // from what our page is served on. This might happen if a CDN is used to
+            // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+            return;
+        }
 
-    window.addEventListener('load', () => {
-      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+        window.addEventListener("load", () => {
+            const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 
-      if (isLocalhost) {
-        // This is running on localhost. Let's check if a service worker still exists or not.
-        checkValidServiceWorker(swUrl, config);
+            if (isLocalhost) {
+                // This is running on localhost. Let's check if a service worker still exists or not.
+                checkValidServiceWorker(swUrl, config);
 
-        // Add some additional logging to localhost, pointing developers to the
-        // service worker/PWA documentation.
-        navigator.serviceWorker.ready.then(() => {
-          console.log(
-            'This web app is being served cache-first by a service ' +
-              'worker. To learn more, visit https://bit.ly/CRA-PWA'
-          );
+                // Add some additional logging to localhost, pointing developers to the
+                // service worker/PWA documentation.
+                navigator.serviceWorker.ready.then(() => {
+                    console.log(
+                        "This web app is being served cache-first by a service " +
+                            "worker. To learn more, visit https://bit.ly/CRA-PWA"
+                    );
+                });
+            } else {
+                // Is not localhost. Just register service worker
+                registerValidSW(swUrl, config);
+            }
         });
-      } else {
-        // Is not localhost. Just register service worker
-        registerValidSW(swUrl, config);
-      }
-    });
-  }
+    }
 }
 
 export function unregister() {
-  if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.ready.then(registration => {
-      registration.unregister();
-    });
-  }
+    if ("serviceWorker" in navigator) {
+        navigator.serviceWorker.ready.then(registration => {
+            registration.unregister();
+        });
+    }
 }
diff --git a/src/setupProxy.js b/src/setupProxy.js
index c985b7b..bb476f6 100644
--- a/src/setupProxy.js
+++ b/src/setupProxy.js
@@ -1,19 +1,19 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-const proxy = require('http-proxy-middleware');
+const proxy = require("http-proxy-middleware");
 module.exports = function(app) {
-  app.use(
-    '/api',
-    proxy({
-      target: 'http://localhost:5212',
-      changeOrigin: true,
-    })
-  );
-
     app.use(
-        '/custom',
+        "/api",
         proxy({
-            target: 'http://localhost:5212',
-            changeOrigin: true,
+            target: "http://localhost:5212",
+            changeOrigin: true
         })
     );
-};
\ No newline at end of file
+
+    app.use(
+        "/custom",
+        proxy({
+            target: "http://localhost:5212",
+            changeOrigin: true
+        })
+    );
+};
diff --git a/src/types/index.ts b/src/types/index.ts
index a9810c5..3fd133f 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,9 +1,15 @@
 export interface CloudreveFile {
-  id: string,
-  name: string,
-  size: number,
-  date: string,
-  type: 'up' | 'file' | 'dir'
+    id: string;
+    name: string;
+    size: number;
+    date: string;
+    type: "up" | "file" | "dir";
 }
 
-export type SortMethod = 'sizePos' | 'sizeRes' | 'namePos' | 'nameRev' | 'timePos' | 'timeRev'
\ No newline at end of file
+export type SortMethod =
+    | "sizePos"
+    | "sizeRes"
+    | "namePos"
+    | "nameRev"
+    | "timePos"
+    | "timeRev";
diff --git a/src/utils/page.js b/src/utils/page.js
index 881770d..cd3bf13 100644
--- a/src/utils/page.js
+++ b/src/utils/page.js
@@ -1,19 +1,18 @@
 const statusHelper = {
-
-    isHomePage(path){
-        return path === "/home"
+    isHomePage(path) {
+        return path === "/home";
     },
-    isSharePage(path){
-        return path && path.startsWith("/s/")
+    isSharePage(path) {
+        return path && path.startsWith("/s/");
     },
-    isAdminPage(path){
-        return path && path.startsWith("/admin")
+    isAdminPage(path) {
+        return path && path.startsWith("/admin");
     },
-    isLoginPage(path){
-        return path && path.startsWith("/login")
+    isLoginPage(path) {
+        return path && path.startsWith("/login");
     },
-    isMobile(){
+    isMobile() {
         return window.innerWidth < 600;
-    },
-}
-export default statusHelper
\ No newline at end of file
+    }
+};
+export default statusHelper;