diff --git a/app/Http/Controllers/Api/FileController.php b/app/Http/Controllers/Api/FileController.php
index 09c861c8..8675a659 100755
--- a/app/Http/Controllers/Api/FileController.php
+++ b/app/Http/Controllers/Api/FileController.php
@@ -222,7 +222,7 @@ class FileController extends AbstractController
             $content->save();
         }
         //
-        $content->content = $content->getFormatContent();
+        $content->content = $content->formatContent($file->type, $content->content);
         return Base::retSuccess('success', $content);
     }
 
@@ -278,7 +278,7 @@ class FileController extends AbstractController
         $file->size = $content->size;
         $file->save();
         //
-        $content->content = $content->getFormatContent();
+        $content->content = $content->formatContent($file->type, $content->content);
         return Base::retSuccess('保存成功', $content);
     }
 }
diff --git a/app/Models/FileContent.php b/app/Models/FileContent.php
index 71ead09b..7aaaff48 100644
--- a/app/Models/FileContent.php
+++ b/app/Models/FileContent.php
@@ -42,13 +42,15 @@ class FileContent extends AbstractModel
 
     /**
      * 获取格式内容
+     * @param $type
+     * @param $content
      * @return array|array[]|mixed|string[]
      */
-    public function getFormatContent()
+    public static function formatContent($type, $content)
     {
-        $content = Base::json2array($this->content);
+        $content = Base::json2array($content);
         if (empty($content)) {
-            switch ($this->type) {
+            switch ($type) {
                 case 'document':
                     $content = [
                         "type" => "text",
diff --git a/resources/assets/js/components/QuickEdit.vue b/resources/assets/js/components/QuickEdit.vue
index d49c4d16..053389a6 100644
--- a/resources/assets/js/components/QuickEdit.vue
+++ b/resources/assets/js/components/QuickEdit.vue
@@ -6,7 +6,7 @@
         </div>
         <template v-else>
             <div class="quick-text"><slot></slot></div>
-            <Icon class="quick-icon" type="ios-create-outline" @click="onClick"/>
+            <Icon class="quick-icon" type="ios-create-outline" @click.stop="onClick"/>
         </template>
     </div>
 </template>
@@ -26,8 +26,10 @@ export default {
         }
     },
 
-    mounted() {
-
+    watch: {
+        isEdit(val) {
+            this.$emit("on-edit", val);
+        }
     },
 
     methods: {
diff --git a/resources/assets/js/pages/login.vue b/resources/assets/js/pages/login.vue
index 9cb78a41..71ea57f0 100644
--- a/resources/assets/js/pages/login.vue
+++ b/resources/assets/js/pages/login.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="page-login">
         <PageTitle :title="$L('登录')"/>
-        <div class="login-body overlay-y">
+        <div class="login-body">
             <div class="login-logo"></div>
             <div class="login-box">
                 <div class="login-title">Welcome Dootask</div>
diff --git a/resources/assets/js/pages/manage.vue b/resources/assets/js/pages/manage.vue
index 52491d0a..a5ca025f 100644
--- a/resources/assets/js/pages/manage.vue
+++ b/resources/assets/js/pages/manage.vue
@@ -25,7 +25,7 @@
                     <DropdownItem divided name="signout" style="color:#f40">{{$L('退出登录')}}</DropdownItem>
                 </DropdownMenu>
             </Dropdown>
-            <ul>
+            <ul class="overlay-y">
                 <li @click="toggleRoute('dashboard')" :class="classNameRoute('dashboard')">
                     <i class="iconfont">&#xe6fb;</i>
                     <div class="menu-title">{{$L('仪表盘')}}</div>
diff --git a/resources/assets/js/pages/manage/components/ProjectList.vue b/resources/assets/js/pages/manage/components/ProjectList.vue
index aaa3be07..741241da 100644
--- a/resources/assets/js/pages/manage/components/ProjectList.vue
+++ b/resources/assets/js/pages/manage/components/ProjectList.vue
@@ -60,7 +60,7 @@
                 </div>
             </div>
         </div>
-        <div v-if="tablePanel('card')" class="project-column overlay-x">
+        <div v-if="tablePanel('card')" class="project-column">
             <Draggable
                 :list="projectData.columns"
                 :animation="150"
diff --git a/resources/assets/js/pages/manage/components/TaskDetail.vue b/resources/assets/js/pages/manage/components/TaskDetail.vue
index 8b98d5fe..7bf60c7b 100644
--- a/resources/assets/js/pages/manage/components/TaskDetail.vue
+++ b/resources/assets/js/pages/manage/components/TaskDetail.vue
@@ -562,7 +562,7 @@ export default {
                 return {};
             }
             return {
-                maxHeight: (innerHeight - 70 - 66 - 30) + 'px'
+                maxHeight: (innerHeight - (innerHeight > 900 ? 200 : 70) - 66 - 30) + 'px'
             }
         },
 
@@ -573,7 +573,7 @@ export default {
             }
             if (taskDetail.dialog_id) {
                 return {
-                    minHeight: (innerHeight - 70 - 48) + 'px'
+                    minHeight: (innerHeight - (innerHeight > 900 ? 200 : 70) - 48) + 'px'
                 }
             } else {
                 return {};
diff --git a/resources/assets/js/pages/manage/file.vue b/resources/assets/js/pages/manage/file.vue
index 03db0185..6045a3f0 100644
--- a/resources/assets/js/pages/manage/file.vue
+++ b/resources/assets/js/pages/manage/file.vue
@@ -35,44 +35,60 @@
                         "<em>{{shearFile.name}}</em>"
                     </div>
                 </Button>
+                <div class="flex-full"></div>
+                <div :class="['switch-button', tableMode ? 'table' : '']" @click="tableMode=!tableMode">
+                    <div><i class="iconfont">&#xe60c;</i></div>
+                    <div><i class="iconfont">&#xe66a;</i></div>
+                </div>
             </div>
-            <div v-if="fileList.length == 0 && loadIng == 0" class="file-no">
-                <i class="iconfont">&#xe60b;</i>
-                <p>{{$L('没有任何文件')}}</p>
+            <div v-if="tableMode" class="file-table">
+                <Table
+                    :columns="columns"
+                    :data="fileList"
+                    :height="tableHeight"
+                    :no-data-text="$L('没有任何文件')"
+                    @on-cell-click="clickRow"
+                    stripe/>
             </div>
-            <div v-else class="file-list">
-                <ul class="clearfix">
-                    <li v-for="item in fileList" :class="[item.type, item.id && shearId == item.id ? 'shear' : '']" @click="openFile(item)">
-                        <EDropdown
-                            trigger="click"
-                            size="small"
-                            placement="bottom"
-                            class="file-menu"
-                            @command="dropFile(item, $event)">
-                            <Icon @click.stop="" type="ios-more" />
-                            <EDropdownMenu slot="dropdown">
-                                <EDropdownItem command="open">{{$L('打开')}}</EDropdownItem>
-                                <EDropdownItem divided command="rename">{{$L('重命名')}}</EDropdownItem>
-                                <EDropdownItem :disabled="item.type=='folder'" command="copy">{{$L('复制')}}</EDropdownItem>
-                                <EDropdownItem command="shear">{{$L('剪切')}}</EDropdownItem>
-                                <EDropdownItem divided command="delete" style="color:red">{{$L('删除')}}</EDropdownItem>
-                            </EDropdownMenu>
-                        </EDropdown>
-                        <div class="file-icon"></div>
-                        <div v-if="item._edit" class="file-input">
-                            <Input
-                                :ref="'input_' + item.id"
-                                v-model="item.newname"
+            <template v-else>
+                <div v-if="fileList.length == 0 && loadIng == 0" class="file-no">
+                    <i class="iconfont">&#xe60b;</i>
+                    <p>{{$L('没有任何文件')}}</p>
+                </div>
+                <div v-else class="file-list">
+                    <ul class="clearfix">
+                        <li v-for="item in fileList" :class="[item.type, item.id && shearId == item.id ? 'shear' : '']" @click="openFile(item)">
+                            <EDropdown
+                                trigger="click"
                                 size="small"
-                                :disabled="item._load"
-                                @on-blur="onBlur(item)"
-                                @on-enter="onEnter(item)"/>
-                            <div v-if="item._load" class="file-load"><Loading/></div>
-                        </div>
-                        <div v-else class="file-name" :title="item.name">{{item.name}}</div>
-                    </li>
-                </ul>
-            </div>
+                                placement="bottom"
+                                class="file-menu"
+                                @command="dropFile(item, $event)">
+                                <Icon @click.stop="" type="ios-more" />
+                                <EDropdownMenu slot="dropdown">
+                                    <EDropdownItem command="open">{{$L('打开')}}</EDropdownItem>
+                                    <EDropdownItem divided command="rename">{{$L('重命名')}}</EDropdownItem>
+                                    <EDropdownItem :disabled="item.type=='folder'" command="copy">{{$L('复制')}}</EDropdownItem>
+                                    <EDropdownItem command="shear">{{$L('剪切')}}</EDropdownItem>
+                                    <EDropdownItem divided command="delete" style="color:red">{{$L('删除')}}</EDropdownItem>
+                                </EDropdownMenu>
+                            </EDropdown>
+                            <div class="file-icon"></div>
+                            <div v-if="item._edit" class="file-input">
+                                <Input
+                                    :ref="'input_' + item.id"
+                                    v-model="item.newname"
+                                    size="small"
+                                    :disabled="item._load"
+                                    @on-blur="onBlur(item)"
+                                    @on-enter="onEnter(item)"/>
+                                <div v-if="item._load" class="file-load"><Loading/></div>
+                            </div>
+                            <div v-else class="file-name" :title="item.name">{{item.name}}</div>
+                        </li>
+                    </ul>
+                </div>
+            </template>
         </div>
 
         <!--查看修改文件-->
@@ -100,7 +116,7 @@ export default {
             loadIng: 0,
             searchKey: '',
 
-            pid: 0,
+            pid: this.$store.state.method.getStorageInt("fileOpenPid"),
             shearId: 0,
 
             types: [
@@ -111,6 +127,10 @@ export default {
                 {value: 'flow', name: "流程图"},
             ],
 
+            tableHeight: 500,
+            tableMode: this.$store.state.method.getStorageBoolean("fileTableMode"),
+            columns: [],
+
             editShow: false,
             editHeight: 0,
             editInfo: {},
@@ -118,6 +138,7 @@ export default {
     },
 
     mounted() {
+        this.tableHeight = window.innerHeight - 160;
         this.editHeight = window.innerHeight - 40;
     },
 
@@ -155,6 +176,8 @@ export default {
                 if (file) {
                     array.unshift(file);
                     pid = file.pid;
+                } else {
+                    pid = 0;
                 }
             }
             return array;
@@ -167,16 +190,99 @@ export default {
                 this.loadIng++;
                 this.$store.dispatch("getFiles", this.pid).then(() => {
                     this.loadIng--;
+                    this.$store.state.method.setStorage("fileOpenPid", this.pid)
                 }).catch(({msg}) => {
                     $A.modalError(msg);
                     this.loadIng--;
-                })
+                });
             },
             immediate: true
+        },
+
+        tableMode(val) {
+            this.$store.state.method.setStorage("fileTableMode", val)
         }
     },
 
     methods: {
+        initLanguage() {
+            this.columns = [
+                {
+                    title: this.$L('文件名'),
+                    key: 'name',
+                    minWidth: 200,
+                    resizable: true,
+                    sortable: true,
+                    render: (h, {row}) => {
+                        return h('div', {
+                            class: 'file-name ' + row.type
+                        }, [
+                            h('QuickEdit', {
+                                props: {
+                                    value: row.name,
+                                },
+                                on: {
+                                    'on-edit': (b) => {
+                                        const file = this.files.find(({id}) => id == row.id);
+                                        if (file) {
+                                            setTimeout(() => {
+                                                this.$set(file, '_edit', b);
+                                            }, 100);
+                                        }
+                                    },
+                                    'on-update': (val, cb) => {
+                                        const file = this.files.find(({id}) => id == row.id);
+                                        if (file) {
+                                            file.newname = val
+                                            this.onEnter(file);
+                                        }
+                                        cb();
+                                    }
+                                }
+                            }, [
+                                h('AutoTip', row.name)
+                            ])
+                        ]);
+                    }
+                },
+                {
+                    title: this.$L('大小'),
+                    key: 'size',
+                    width: 120,
+                    resizable: true,
+                    sortable: true,
+                    render: (h, {row}) => {
+                        if (row.type == 'folder') {
+                            return h('div', '-')
+                        }
+                        return h('AutoTip', $A.bytesToSize(row.size));
+                    }
+                },
+                {
+                    title: this.$L('类型'),
+                    key: 'type',
+                    width: 120,
+                    resizable: true,
+                    sortable: true,
+                    render: (h, {row}) => {
+                        let type = this.types.find(({value}) => value == row.type);
+                        if (type) {
+                            return h('AutoTip', type.name);
+                        } else {
+                            return h('div', '-')
+                        }
+                    }
+                },
+                {
+                    title: this.$L('最后修改'),
+                    key: 'updated_at',
+                    width: 168,
+                    resizable: true,
+                    sortable: true,
+                },
+            ]
+        },
+
         addFile(command) {
             let id = $A.randomString(8);
             this.files.push({
@@ -195,7 +301,10 @@ export default {
         },
 
         openFile(item) {
-            if (item._edit || item._load) {
+            if (this.fileList.findIndex((file) => file._edit === true) > -1) {
+                return;
+            }
+            if (item._load) {
                 return;
             }
             if (item.type == 'folder') {
@@ -208,6 +317,10 @@ export default {
             }
         },
 
+        clickRow(row) {
+            this.dropFile(row, 'open');
+        },
+
         dropFile(item, command) {
             switch (command) {
                 case 'open':
diff --git a/resources/assets/sass/pages/page-file.scss b/resources/assets/sass/pages/page-file.scss
index 024507e5..98a3bb37 100644
--- a/resources/assets/sass/pages/page-file.scss
+++ b/resources/assets/sass/pages/page-file.scss
@@ -5,6 +5,7 @@
     flex-direction: column;
     .file-wrapper {
         flex: 1;
+        height: 0;
         display: flex;
         flex-direction: column;
         .file-head {
@@ -120,28 +121,142 @@
                     text-overflow: ellipsis;
                 }
             }
+            .flex-full {
+                flex: 1;
+            }
+            .switch-button {
+                display: flex;
+                align-items: center;
+                background-color: #ffffff;
+                border-radius: 6px;
+                position: relative;
+                transition: box-shadow 0.2s;
+                &:hover {
+                    box-shadow: 0 0 10px #e6ecfa;
+                }
+                &:before {
+                    content: "";
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    width: 50%;
+                    height: 100%;
+                    z-index: 0;
+                    color: $primary-color;
+                    border-radius: 6px;
+                    border: 1px solid $primary-color;
+                    background-color: rgba($primary-color, 0.1);
+                    transition: left 0.2s;
+                }
+                > div {
+                    z-index: 1;
+                    width: 32px;
+                    height: 30px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    border-radius: 6px;
+                    cursor: pointer;
+                    color: #515a6e;
+                    > i {
+                        font-size: 17px;
+                    }
+                    &:first-child {
+                        color: $primary-color;
+                    }
+                }
+                &.table {
+                    &:before {
+                        left: 50%;
+                    }
+                    > div:first-child {
+                        color: #515a6e;
+                    }
+                    > div:last-child {
+                        color: $primary-color;
+                    }
+                }
+            }
+        }
+        .file-table {
+            flex: 1;
+            cursor: default;
+            margin: 16px 32px 32px;
+            .ivu-table {
+                &:before {
+                    display: none;
+                }
+                .ivu-table-tip {
+                    opacity: 0.8;
+                    span {
+                        font-size: 14px;
+                        font-weight: 500;
+                        line-height: 1.8;
+                        &:before {
+                            display: block;
+                            content: "\e60b";
+                            font-family: "iconfont", "serif" !important;
+                            font-size: 64px;
+                            font-style: normal;
+                            -webkit-font-smoothing: antialiased;
+                            -webkit-text-stroke-width: 0.2px;
+                        }
+                    }
+                }
+            }
+            .file-name {
+                display: flex;
+                align-items: center;
+                position: relative;
+                padding-right: 26px;
+                &:before {
+                    flex-shrink: 0;
+                    content: "";
+                    width: 18px;
+                    height: 18px;
+                    background-repeat: no-repeat;
+                    background-size: contain;
+                    margin-right: 8px;
+                }
+                &.folder:before {
+                    background-image: url("../images/file/folder.svg");
+                }
+                &.document:before {
+                    background-image: url("../images/file/document.svg");
+                }
+                &.mind:before {
+                    background-image: url("../images/file/mind.svg");
+                }
+                &.sheet:before {
+                    background-image: url("../images/file/sheet.svg");
+                }
+                &.flow:before {
+                    background-image: url("../images/file/flow.svg");
+                }
+            }
         }
         .file-list {
             flex: 1;
             padding: 0 20px 20px;
+            margin-top: 16px;
+            overflow: auto;
             > ul {
+                margin-top: -12px;
                 > li {
                     list-style: none;
                     float: left;
                     margin: 12px;
-                    width: 94px;
-                    height: 100px;
-                    text-align: center;
+                    width: 100px;
+                    height: 110px;
                     position: relative;
-                    overflow: visible;
-                    border: 1px dashed transparent;
                     border-radius: 5px;
                     display: flex;
                     flex-direction: column;
                     align-items: center;
                     justify-content: space-between;
+                    cursor: pointer;
                     .file-input {
-                        margin: 0 2px 2px;
+                        margin: 0 4px 4px;
                         position: relative;
                         input {
                             margin: 0;
@@ -168,8 +283,7 @@
                         color: #515a6e;
                         font-size: 12px;
                         text-align: center;
-                        margin-top: 5px;
-                        margin-bottom: 3px;
+                        margin-bottom: 5px;
                         padding: 0 6px;
                         overflow: hidden;
                         white-space: nowrap;
@@ -194,8 +308,8 @@
                     }
                     .file-icon {
                         display: inline-block;
-                        width: 52px;
-                        height: 52px;
+                        width: 64px;
+                        height: 64px;
                         background-repeat: no-repeat;
                         background-size: contain;
                         margin-top: 12px;
@@ -236,6 +350,7 @@
         align-items: center;
         position: relative;
         &:before {
+            flex-shrink: 0;
             content: "";
             width: 18px;
             height: 18px;
diff --git a/resources/assets/sass/scrollbar.scss b/resources/assets/sass/scrollbar.scss
index 72a26f32..e07142d3 100644
--- a/resources/assets/sass/scrollbar.scss
+++ b/resources/assets/sass/scrollbar.scss
@@ -1,48 +1,40 @@
-/* 滚动条美化 */
-::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
-}
-
-/*滚动条滑块隐藏*/
-::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    background: rgba(0, 0, 0, 0);
-}
-
-/*按下滚动条，颜色加深*/
-::-webkit-scrollbar-thumb:active {
-    border-radius: 10px;
-    background: rgba(0, 0, 0, .5);
-}
-
-/*鼠标浮到容器上，让该容器的滚动条滑块显示*/
-:hover::-webkit-scrollbar-thumb {
-    border: 2px solid transparent;
-    background: rgba(0, 0, 0, .2);
-    background-clip: content-box;
-}
-
-/*鼠标浮到容器上，让该容器的滚动条滑块显示*/
-:hover::-webkit-scrollbar-thumb:hover {
-    border-top-width: 0;
-    border-bottom-width: 0;
-}
-
-/*滚动条轨道*/
-::-webkit-scrollbar-track {
-    border-radius: 10px;
-    background: rgba(0, 0, 0, 0);
-}
-
-.overlay {
-    overflow: overlay !important;
-}
-
-.overlay-x {
-    overflow-x: overlay !important;
-}
-
 .overlay-y {
     overflow-y: overlay !important;
+
+    /* 滚动条美化 */
+    &::-webkit-scrollbar {
+        width: 10px;
+        height: 10px;
+    }
+
+    /*滚动条滑块隐藏*/
+    &::-webkit-scrollbar-thumb {
+        border-radius: 10px;
+        background: rgba(0, 0, 0, 0);
+    }
+
+    /*按下滚动条，颜色加深*/
+    &::-webkit-scrollbar-thumb:active {
+        border-radius: 10px;
+        background: rgba(0, 0, 0, .5);
+    }
+
+    /*鼠标浮到容器上，让该容器的滚动条滑块显示*/
+    &:hover::-webkit-scrollbar-thumb {
+        border: 2px solid transparent;
+        background: rgba(0, 0, 0, .2);
+        background-clip: content-box;
+    }
+
+    /*鼠标浮到容器上，让该容器的滚动条滑块显示*/
+    &:hover::-webkit-scrollbar-thumb:hover {
+        border-top-width: 0;
+        border-bottom-width: 0;
+    }
+
+    /*滚动条轨道*/
+    &::-webkit-scrollbar-track {
+        border-radius: 10px;
+        background: rgba(0, 0, 0, 0);
+    }
 }