diff --git a/src/pages/fileDoc/index.vue b/src/pages/fileDoc/index.vue
index 0256114..c46a494 100644
--- a/src/pages/fileDoc/index.vue
+++ b/src/pages/fileDoc/index.vue
@@ -12,7 +12,55 @@
           </template>
         </el-breadcrumb>
       </template>
+      <template #title-right>
+        <el-dropdown
+          style="margin-right: 4px"
+          @command="command => handleCommand(command)"
+        >
+          <span class="el-dropdown-link">
+            <EdfsButton
+              inner-text=""
+              :icon="createIcon"
+              type="primary"
+              size="small"
+              circle
+              style="width: 26px; height: 26px; padding-right: 1px"
+              plain
+              @click=""
+            />
+          </span>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <template v-for="item in dropdownMenu" :key="item.command">
+                <el-dropdown-item :command="item.command">
+                  <img v-if="item?.icon" :src="item?.icon" width="20" />
+                  {{ item.label }}
+                </el-dropdown-item>
+              </template>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+
+        <el-button-group class="layout-btns" size="small">
+          <EdfsButton
+            inner-text=""
+            type="primary"
+            :icon="cardIcons"
+            :plain="listLayout !== 'card'"
+            @click="listLayout = 'card'"
+          />
+          <EdfsButton
+            inner-text=""
+            type="primary"
+            :icon="listIcons"
+            :plain="listLayout !== 'list'"
+            @click="listLayout = 'list'"
+          />
+        </el-button-group>
+      </template>
+
       <EdfsContextMenu
+        v-show="listLayout === 'card'"
         eventSourceClass="SourceClass"
         :disabledEmpty="false"
         @visibleChange="onVisibleChange"
@@ -76,6 +124,48 @@
           </div>
         </template>
       </EdfsContextMenu>
+      <EdfsTable
+        class="table"
+        v-show="listLayout === 'list'"
+        :data="dataList"
+        @row-click="onFileOpen"
+      >
+        <template v-for="(col, idx) in folderCol" :key="idx">
+          <el-table-column :label="col.label" :prop="col.prop" v-if="col.prop === 'name'">
+            <template #default="scope">
+              <template v-if="scope.row.isEdit">
+                <el-input
+                  v-model="editFileName"
+                  @blur="onSaveRename(scope.row)"
+                  :key="scope.row.id + 'card' + '_edit'"
+                  :ref="el => setInputRefs(el, scope.row.id)"
+                  @keyup.enter="onSaveRename(scope.row)"
+                />
+              </template>
+              <div class="edit-name-col" v-else>
+                {{ scope.row[col.prop] }}
+                <Icon
+                  class="edit-icon"
+                  icon="gravity-ui:pencil-to-square"
+                  @click="onCommand('rename', scope.row)"
+                />
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column :label="col.label" :prop="col.prop" v-else />
+        </template>
+        <el-table-column label="操作" align="center">
+          <template #default="scope">
+            <el-button
+              v-if="!(isRootMd && scope.row.type === floeType.file)"
+              type="danger"
+              link
+              @click.stop="onCommand('delete', scope.row)"
+              >删除</el-button
+            >
+          </template>
+        </el-table-column></EdfsTable
+      >
     </EdfsWrap>
   </div>
   <markdownDrawer
@@ -98,6 +188,7 @@ import {
   operationDropdownMenu,
   breadcrumbList,
   fileDropdownMenu,
+  folderCol,
 } from './utils'
 import EdfsWrap from '@/components/dashboard/Edfs-wrap.vue'
 import {
@@ -120,10 +211,18 @@ import Upload from '@/assets/image/dashboard/file/upload.svg'
 import Document from '@/assets/image/dashboard/file/document.svg'
 import Document2 from '@/assets/image/dashboard/file/document2.svg'
 import UploadMDDlg from './components/uploadMDDlg.vue'
+import EdfsTable from '@/components/dashboard/Edfs-table/index.vue'
+import EdfsButton from '@/components/dashboard/Edfs-button/index.vue'
 
 import { Icon } from '@/components/dashboard/Icon'
 import EdfsContextMenu from '@/components/dashboard/Edfs-context-menu/index.vue'
 import markdownDrawer from './components/markdownDrawer.vue'
+import { useIcon } from '@/utils/useIcon'
+
+const listIcons = useIcon({ icon: 'gravity-ui:layout-list' })
+const cardIcons = useIcon({ icon: 'gravity-ui:credit-card' })
+const createIcon = useIcon({ icon: 'gravity-ui:plus' })
+const listLayout = ref<'card' | 'list'>('card')
 
 const dropdownMenu = computed(() => {
   if (isRootMd.value) {
@@ -211,6 +310,13 @@ function onNewMarkdown() {
   dataList.value.push(markdown)
   onRename(markdown)
 }
+
+async function handleCommand(command: string) {
+  setTimeout(() => {
+    onCommand(command, 'custom')
+  }, 800)
+}
+
 const curCommand = ref('')
 function onCommand(command: string, item: any) {
   curCommand.value = command
@@ -289,7 +395,7 @@ function onFileOpen(item: any) {
 const editInputRefs = ref<any>({})
 function setInputRefs(el: any, id: number) {
   if (el) {
-    editInputRefs.value[`editInputRef_${id}`] = el
+    editInputRefs.value[`editInputRef_${listLayout.value}_${id}`] = el
   }
 }
 
@@ -298,7 +404,6 @@ async function onSaveRename(item: any) {
   const find = findItem(item.id)
   if (!find.isEdit) return
   await nextTick()
-  debugger
   find.isEdit = false
   if (find.type === floeType.file && !editFileName.value.endsWith('.md')) {
     editFileName.value += '.md'
@@ -316,8 +421,8 @@ async function onRename(item: any) {
   find.isEdit = true
   editFileName.value = find.name
   await nextTick()
-  editInputRefs.value[`editInputRef_${item.id}`].focus()
-  editInputRefs.value[`editInputRef_${item.id}`].select()
+  editInputRefs.value[`editInputRef_${listLayout.value}_${item.id}`].focus()
+  editInputRefs.value[`editInputRef_${listLayout.value}_${item.id}`].select()
 }
 
 const findItem = (id: number) => dataList.value.find((v: any) => v.id === id)
@@ -517,5 +622,27 @@ onMounted(() => {
       }
     }
   }
+  .table {
+    .edit-name-col {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      column-gap: 4px;
+      .edit-icon {
+        display: none;
+        color: var(--icon-hover-color);
+        cursor: pointer;
+        :hover {
+          color: var(--icon-color);
+        }
+      }
+    }
+    :deep(.el-table__row) {
+      cursor: pointer;
+      &:hover .edit-icon {
+        display: block;
+      }
+    }
+  }
 }
 </style>
diff --git a/src/pages/fileDoc/utils.ts b/src/pages/fileDoc/utils.ts
index f87572d..a009c12 100644
--- a/src/pages/fileDoc/utils.ts
+++ b/src/pages/fileDoc/utils.ts
@@ -66,3 +66,21 @@ function removePrefixFromImages(str: string, prefix: string) {
     return `![${alt}](${url.replace(prefixPattern, '')})`
   })
 }
+
+export const folderCol = [
+  {
+    label: '名称',
+    prop: 'name',
+    width: '10%',
+  },
+  {
+    label: '类型',
+    prop: 'type',
+    width: '10%',
+  },
+  {
+    label: '发布状态',
+    prop: 'isDraft',
+    width: '10%',
+  },
+]