diff --git a/ui/src/api/dataset.ts b/ui/src/api/dataset.ts
index a5de294f0..1442a77dd 100644
--- a/ui/src/api/dataset.ts
+++ b/ui/src/api/dataset.ts
@@ -82,11 +82,29 @@ const getDocument: (dataset_id: string, name?: string) => Promise<Result<any>> =
   return get(`${prefix}/${dataset_id}/document`, name && { name })
 }
 
+/**
+ * 修改文档
+ * @param 参数 
+ * dataset_id, document_id, 
+ * {
+      "name": "string",
+      "is_active": true
+    }
+ */
+const putDocument: (dataset_id: string, document_id: string, data: any) => Promise<Result<any>> = (
+  dataset_id,
+  document_id,
+  data: any
+) => {
+  return put(`${prefix}/${dataset_id}/document/${document_id}`, data)
+}
+
 export default {
   getDateset,
   getAllDateset,
   delDateset,
   postDateset,
   postSplitDocument,
-  getDocument
+  getDocument,
+  putDocument
 }
diff --git a/ui/src/components/app-table/index.vue b/ui/src/components/app-table/index.vue
new file mode 100644
index 000000000..6f1a7badb
--- /dev/null
+++ b/ui/src/components/app-table/index.vue
@@ -0,0 +1,96 @@
+<template>
+  <div class="app-table" :class="quickCreate ? 'table-quick-append' : ''">
+    <el-table v-bind="$attrs">
+      <template #append v-if="quickCreate">
+        <div v-if="showInput">
+          <el-input
+            ref="quickInputRef"
+            v-model="inputValue"
+            placeholder="请输入文档名称"
+            class="w-240 mr-12"
+          />
+
+          <el-button type="primary" @click="submitHandle">创建</el-button>
+          <el-button @click="showInput = false">取消</el-button>
+        </div>
+        <div v-else @click="quickCreateHandel" class="w-full">
+          <el-button type="primary" link>
+            <el-icon><Plus /></el-icon>
+            <span class="ml-4">快速创建空白文档</span>
+          </el-button>
+        </div>
+      </template>
+      <slot></slot>
+    </el-table>
+    <div class="app-table__pagination mt-16" v-if="$slots.pagination || paginationConfig">
+      <slot name="pagination">
+        <el-pagination
+          v-model:current-page="paginationConfig.currentPage"
+          v-model:page-size="paginationConfig.pageSize"
+          :page-sizes="pageSizes"
+          :total="paginationConfig.total"
+          layout="total, prev, pager, next, sizes"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </slot>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, nextTick, watch } from 'vue'
+defineOptions({ name: 'AppTable' })
+
+const props = defineProps({
+  paginationConfig: {
+    type: Object,
+    default: () => {}
+  },
+  quickCreate: {
+    type: Boolean,
+    default: false
+  }
+})
+const emit = defineEmits(['changePage', 'sizeChange', 'creatQuick'])
+
+const pageSizes = [10, 20, 50, 100]
+const quickInputRef = ref()
+
+const showInput = ref(false)
+const inputValue = ref('')
+
+watch(showInput, (bool) => {
+  if (!bool) {
+    inputValue.value = ''
+  }
+})
+
+function submitHandle() {
+  emit('creatQuick', inputValue.value)
+  showInput.value = false
+}
+
+function quickCreateHandel() {
+  showInput.value = true
+  nextTick(() => {
+    quickInputRef.value?.focus()
+  })
+}
+
+function handleSizeChange() {
+  emit('sizeChange')
+}
+function handleCurrentChange() {
+  emit('changePage')
+}
+defineExpose({})
+</script>
+
+<style lang="scss" scoped>
+.app-table {
+  &__pagination {
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+</style>
diff --git a/ui/src/components/index.ts b/ui/src/components/index.ts
index 5453020d8..e3ac6770a 100644
--- a/ui/src/components/index.ts
+++ b/ui/src/components/index.ts
@@ -8,6 +8,8 @@ import TagsInput from './tags-input/index.vue'
 import CardBox from './card-box/index.vue'
 import CardAdd from './card-add/index.vue'
 import BackButton from './back-button/index.vue'
+import AppTable from './app-table/index.vue'
+import ReadWrite from './read-write/index.vue'
 
 export default {
   install(app: App) {
@@ -20,5 +22,7 @@ export default {
     app.component(CardBox.name, CardBox)
     app.component(CardAdd.name, CardAdd)
     app.component(BackButton.name, BackButton)
+    app.component(AppTable.name, AppTable)
+    app.component(ReadWrite.name, ReadWrite)
   }
 }
diff --git a/ui/src/components/read-write/index.vue b/ui/src/components/read-write/index.vue
new file mode 100644
index 000000000..ec63523a3
--- /dev/null
+++ b/ui/src/components/read-write/index.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="cursor">
+    <slot name="read">
+      <div class="flex align-center" v-if="!isEdit">
+        <span>{{ data }}</span>
+        <el-button @click.prevent="editNameHandle" text v-if="showEditIcon">
+          <el-icon><Edit /></el-icon>
+        </el-button>
+      </div>
+    </slot>
+    <slot>
+      <div class="flex align-center" v-if="isEdit">
+        <el-input ref="inputRef" v-model="writeValue" placeholder="请输入"></el-input>
+        <span class="ml-4">
+          <el-button type="primary" text @click="submit">
+            <el-icon><Select /></el-icon>
+          </el-button>
+        </span>
+        <span>
+          <el-button text @click="isEdit = false">
+            <el-icon><CloseBold /></el-icon>
+          </el-button>
+        </span>
+      </div>
+    </slot>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+defineOptions({ name: 'ReadWrite' })
+const props = defineProps({
+  data: {
+    type: String,
+    default: ''
+  },
+  showEditIcon: {
+    type: Boolean,
+    default: false
+  }
+})
+const emit = defineEmits(['change'])
+const isEdit = ref(false)
+const writeValue = ref('')
+
+watch(isEdit, (bool) => {
+  if (!bool) {
+    writeValue.value = ''
+  }
+})
+
+function submit() { 
+  emit('change', writeValue.value)
+  isEdit.value = false
+}
+function editNameHandle(row: any) {
+  writeValue.value = props.data
+  isEdit.value = true
+}
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index ad1524cdf..380df65f1 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -258,7 +258,7 @@ h4 {
 }
 
 // 表格第一行插入自定义行
-.table-custom-append {
+.table-quick-append {
   .el-table__append-wrapper {
     position: absolute;
     top: 0;
@@ -269,6 +269,7 @@ h4 {
     align-items: center;
     display: flex;
     padding: 0 12px;
+    cursor: pointer;
     &:hover {
       background: var(--el-color-primary-light-9);
     }
@@ -277,3 +278,16 @@ h4 {
     margin-top: 49px;
   }
 }
+
+.success {
+  color: var(--el-color-success);
+}
+.danger {
+  color: var(--el-color-danger);
+}
+.warning {
+  color: var(--el-color-warning);
+}
+.primary {
+  color: var(--el-color-primary);
+}
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index 43a07b551..cffc38266 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -120,6 +120,10 @@
   }
 }
 
+.el-pagination .el-select .el-input {
+  width: 100px;
+}
+
 // el-steps
 .el-step__icon {
   background: none;
diff --git a/ui/src/views/dataset/CreateDataset.vue b/ui/src/views/dataset/CreateDataset.vue
index eced95a7b..89a43e157 100644
--- a/ui/src/views/dataset/CreateDataset.vue
+++ b/ui/src/views/dataset/CreateDataset.vue
@@ -21,39 +21,39 @@
     </div>
     <div class="create-dataset__footer text-right border-t">
       <el-button @click="router.go(-1)">取 消</el-button>
-      <el-button @click="prev">上一步</el-button>
-      <el-button @click="next" type="primary">下一步</el-button>
-      <el-button @click="next" type="primary">开始导入</el-button>
+      <el-button @click="prev" v-if="active === 1">上一步</el-button>
+      <el-button @click="next" type="primary" v-if="active === 0">下一步</el-button>
+      <el-button @click="next" type="primary" v-if="active === 1">开始导入</el-button>
     </div>
   </LayoutContainer>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
-import UploadDocument from './step/UploadDocument.vue'
-import SetRules from './step/SetRules.vue'
+import StepFirst from './step/StepFirst.vue'
+import StepSecond from './step/StepSecond.vue'
 
 const router = useRouter()
 
 const steps = [
   {
-    ref: 'UploadDocumentRef',
+    ref: 'StepFirstRef',
     name: '上传文档',
-    component: UploadDocument
+    component: StepFirst
   },
   {
     ref: 'SetRulesRef',
     name: '设置分段规则',
-    component: SetRules
+    component: StepSecond
   }
 ]
 
-const UploadDocumentRef = ref()
+const StepFirstRef = ref()
 
 const active = ref(0)
 
 async function next() {
-  if (await UploadDocumentRef.value.onSubmit()) {
+  if (await StepFirstRef.value.onSubmit()) {
     if (active.value++ > 2) active.value = 0
   }
 }
diff --git a/ui/src/views/dataset/DatasetDocument.vue b/ui/src/views/dataset/DatasetDocument.vue
index 09e28cfcf..49f30814a 100644
--- a/ui/src/views/dataset/DatasetDocument.vue
+++ b/ui/src/views/dataset/DatasetDocument.vue
@@ -3,7 +3,9 @@
     <div class="main-calc-height">
       <div class="p-24" v-loading="loading">
         <div class="flex-between">
-          <el-button type="primary" @click="router.push({ path: '/dataset/upload' })" >上传文档</el-button>
+          <el-button type="primary" @click="router.push({ path: '/dataset/upload' })"
+            >上传文档</el-button
+          >
           <el-input
             v-model="filterText"
             placeholder="按 文档名称 搜索"
@@ -11,22 +13,43 @@
             class="w-240"
           />
         </div>
-        <el-table :data="documentData" class="table-custom-append mt-16 cursor">
-          <template #append>
-            <el-button type="primary" link>
-              <el-icon><Plus /></el-icon>
-              <span class="ml-4">快速创建空白文档</span>
-            </el-button>
-          </template>
-          <el-table-column prop="name" label="文件名称" />
+        <app-table
+          class="mt-16"
+          :data="documentData"
+          :pagination-config="paginationConfig"
+          quick-create
+          @sizeChange="handleSizeChange"
+          @changePage="handleCurrentChange"
+          @cell-mouse-enter="cellMouseEnter"
+          @cell-mouse-leave="cellMouseLeave"
+        >
+          <el-table-column prop="name" label="文件名称" min-width="280">
+            <template #default="{ row }">
+              <ReadWrite
+                @change="editName"
+                :data="row.name"
+                :showEditIcon="row.id === currentMouseId"
+              />
+            </template>
+          </el-table-column>
           <el-table-column prop="char_length" label="字符数" align="right">
             <template #default="{ row }">
               {{ toThousands(row.char_length) }}
             </template>
           </el-table-column>
           <el-table-column prop="paragraph_count" label="分段" align="right" />
-          <el-table-column prop="status" label="文件状态">
-            <!-- <el-switch v-model="value1" /> -->
+          <el-table-column prop="status" label="文件状态" min-width="90">
+            <template #default="{ row }">
+              <el-text v-if="row.status === '1'">
+                <el-icon class="success"><SuccessFilled /></el-icon> 成功
+              </el-text>
+              <el-text v-else-if="row.status === '2'">
+                <el-icon class="danger"><CircleCloseFilled /></el-icon> 失败
+              </el-text>
+              <el-text v-else-if="row.status === '0'">
+                <el-icon class="is-loading primary"><Loading /></el-icon> 导入中
+              </el-text>
+            </template>
           </el-table-column>
           <el-table-column prop="name" label="启动状态">
             <template #default="{ row }">
@@ -49,8 +72,9 @@
                 <el-tooltip effect="dark" content="刷新" placement="top">
                   <el-button type="primary" text>
                     <el-icon><RefreshRight /></el-icon>
-                  </el-button> </el-tooltip
-              ></span>
+                  </el-button>
+                </el-tooltip>
+              </span>
               <span class="ml-4">
                 <el-tooltip effect="dark" content="删除" placement="top">
                   <el-button type="primary" text>
@@ -60,13 +84,13 @@
               </span>
             </template>
           </el-table-column>
-        </el-table>
+        </app-table>
       </div>
     </div>
   </LayoutContainer>
 </template>
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, reactive } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import datasetApi from '@/api/dataset'
 import { toThousands } from '@/utils/utils'
@@ -76,9 +100,34 @@ const route = useRoute()
 const { params } = route
 const { datasetId } = params
 
+const inputRef = ref()
+
 const loading = ref(false)
 const filterText = ref('')
 const documentData = ref<any[]>([])
+const currentMouseId = ref(null)
+
+const paginationConfig = reactive({
+  currentPage: 1,
+  pageSize: 10,
+  total: 0
+})
+
+function editName(val: string) {}
+
+function cellMouseEnter(row: any) {
+  currentMouseId.value = row.id
+}
+function cellMouseLeave() {
+  currentMouseId.value = null
+}
+
+function handleSizeChange(val: number) {
+  console.log(`${val} items per page`)
+}
+function handleCurrentChange(val: number) {
+  console.log(`current page: ${val}`)
+}
 
 function getList() {
   loading.value = true
@@ -86,6 +135,7 @@ function getList() {
     .getDocument(datasetId as string, filterText.value)
     .then((res) => {
       documentData.value = res.data
+      paginationConfig.total = res.data.length
       loading.value = false
     })
     .catch(() => {
diff --git a/ui/src/views/dataset/step/UploadDocument.vue b/ui/src/views/dataset/step/StepFirst.vue
similarity index 100%
rename from ui/src/views/dataset/step/UploadDocument.vue
rename to ui/src/views/dataset/step/StepFirst.vue
diff --git a/ui/src/views/dataset/step/SetRules.vue b/ui/src/views/dataset/step/StepSecond.vue
similarity index 100%
rename from ui/src/views/dataset/step/SetRules.vue
rename to ui/src/views/dataset/step/StepSecond.vue