diff --git a/src/api/dictionary.ts b/src/api/dictionary.ts
index efdd2d3dbbc8279cc9be96bf9ebcc2514237a1c1..5aeff5f61687220af0258729433a22a70a3ebf92 100644
--- a/src/api/dictionary.ts
+++ b/src/api/dictionary.ts
@@ -5,7 +5,7 @@ const Api = {
   list: '/api/dictionary/getList',
   add: '/api/dictionary/add',
   update: '/api/dictionary/update',
-  remove: '/api/dictionary/remove',
+  delete: '/api/dictionary/delete',
 }
 export const getDictionaryList = (
   dicTypeId: string
@@ -32,11 +32,11 @@ export const updateDictionary = (data: Dictionary) => {
     data,
   })
 }
-export const removeDictionary = (id: string) => {
+export const deleteDictionary = (id: string) => {
   return request({
-    url: Api.remove,
+    url: Api.delete,
     method: 'POST',
-    params: {
+    data: {
       id,
     },
   })
diff --git a/src/api/dictionaryType.ts b/src/api/dictionaryType.ts
index 388e1baaa69a242f9ba433423f979237b52b0c30..a9f399c3deafe041e76bcd6f54c1e13a5e5f6298 100644
--- a/src/api/dictionaryType.ts
+++ b/src/api/dictionaryType.ts
@@ -5,7 +5,7 @@ const Api = {
   list: '/api/dictionaryType/getList',
   add: '/api/dictionaryType/add',
   update: '/api/dictionaryType/update',
-  remove: '/api/dictionaryType/remove',
+  delete: '/api/dictionaryType/delete',
 }
 export const getDictionaryTypeList = (): Promise<
   QuickResponseData<Array<DictionaryType>>
@@ -30,11 +30,11 @@ export const updateDictionaryType = (data: DictionaryType) => {
     data,
   })
 }
-export const removeDictionaryType = (id: string) => {
+export const deleteDictionaryType = (id: string) => {
   return request({
-    url: Api.remove,
+    url: Api.delete,
     method: 'POST',
-    params: {
+    data: {
       id,
     },
   })
diff --git a/src/api/user.ts b/src/api/user.ts
index 842193f6ba83be8faa8bf397fb15126b6c02d98a..636bbc770ac2734a338a8fa64972dd14b63fbb5d 100644
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -7,7 +7,11 @@ const Api = {
   info: '/api/user/getInfo',
   add: '/api/user/add',
   update: '/api/user/update',
-  remove: '/api/user/remove',
+  delete: '/api/user/delete',
+  batchDeleteUser: '/api/user/batchRemove',
+  resetPassword: '/api/user/resetPassword',
+  enabled: '/api/user/enabled',
+  disable: '/api/user/disable',
 }
 export const getUserPageList = (
   params: object
@@ -49,12 +53,48 @@ export const updateUser = (data: User) => {
     data,
   })
 }
-export const deleteUser = (userId: string) => {
+export const deleteUser = (id: string) => {
   return request({
-    url: Api.remove,
+    url: Api.delete,
     method: 'POST',
-    params: {
-      userId,
+    data: {
+      id,
+    },
+  })
+}
+export const batchDeleteUser = (ids: string) => {
+  return request({
+    url: Api.batchDeleteUser,
+    method: 'POST',
+    data: {
+      ids,
+    },
+  })
+}
+export const resetUserPassword = (id: string) => {
+  return request({
+    url: Api.resetPassword,
+    method: 'POST',
+    data: {
+      id,
+    },
+  })
+}
+export const enableUser = (id: string) => {
+  return request({
+    url: Api.enabled,
+    method: 'POST',
+    data: {
+      id,
+    },
+  })
+}
+export const disableUser = (id: string) => {
+  return request({
+    url: Api.disable,
+    method: 'POST',
+    data: {
+      id,
     },
   })
 }
diff --git a/src/assets/audios/order.mp3 b/src/assets/audios/order.mp3
deleted file mode 100644
index f67c4e9569c9471f4412fd246e1d42c35f3b42f6..0000000000000000000000000000000000000000
Binary files a/src/assets/audios/order.mp3 and /dev/null differ
diff --git a/src/components/QuickCode/index.vue b/src/components/QuickCode/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..22aa2e7fb920cc6790b18fccb830b1ad4dd35df3
--- /dev/null
+++ b/src/components/QuickCode/index.vue
@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { defineProps, toRefs, ref, Ref, watch } from 'vue'
+
+const props = defineProps({
+  code: {
+    type: String,
+    default: '',
+  },
+  language: {
+    type: String,
+    default: '',
+  },
+  autodetect: {
+    type: Boolean,
+    default: true,
+  },
+})
+const { code, language, autodetect } = toRefs(props) as {
+  code: Ref<any>
+  language: Ref<string>
+  autodetect: Ref<boolean>
+}
+</script>
+<template>
+  <!-- :language="language" -->
+  <el-collapse>
+    <el-collapse-item title="查看源码">
+      <highlightjs :autodetect="autodetect" :code="code" />
+    </el-collapse-item>
+  </el-collapse>
+</template>
diff --git a/src/components/QuickCrud/index.scss b/src/components/QuickCrud/index.scss
deleted file mode 100644
index 5ed1aa9c874ff08a3936444f0b1eb4fc1ed012e8..0000000000000000000000000000000000000000
--- a/src/components/QuickCrud/index.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.action {
-    margin-bottom: 10px;
-  }
-  .demo-pagination-block + .demo-pagination-block {
-    margin-top: 10px;
-  }
-  .demo-pagination-block .demonstration {
-    margin-bottom: 16px;
-  }
-  .el-pagination {
-    margin-top: 10px;
-  }
\ No newline at end of file
diff --git a/src/components/QuickCrud/index.ts b/src/components/QuickCrud/index.ts
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/src/components/QuickCrud/index.vue b/src/components/QuickCrud/index.vue
index 99296b9ebe5378a2a3c0e1d33a06706fe26bd163..773ce8da534da634a3a8019cdce78baa3502dda9 100644
--- a/src/components/QuickCrud/index.vue
+++ b/src/components/QuickCrud/index.vue
@@ -1,36 +1,57 @@
 <script lang="ts" setup>
 import {
   defineProps,
-  defineEmits,
+  Ref,
+  toRefs,
+  reactive,
   ref,
+  defineEmits,
   onMounted,
-  toRefs,
-  Ref,
-  computed,
-  onActivated,
   nextTick,
+  onActivated,
 } from 'vue'
 import { ElMessage, ElTree, FormInstance } from 'element-plus'
-import { User } from '../../types/user'
-import { Column } from '../../types/table'
-import { FormItem } from '../../types/form'
-import QuickTable from '../QuickTable/index.vue'
-import QuickForm from '../QuickForm/index.vue'
-import { Tree } from '../../types/tree'
+import QuickSearch from '@/components/QuickSearch/index.vue'
+import QuickTable from '@/components/QuickTable/index.vue'
+import QuickToolbar from '@/components/QuickToolbar/index.vue'
+import QuickForm from '@/components/QuickForm/index.vue'
+import { Actionbar, Toolbar } from '@/types/table'
+import { FormItem } from '@/types/form'
+import { Page } from '@/types/page'
+import { LeftTree, Tree } from '@/types/tree'
 
+/**
+ * 属性
+ */
+const formTitle = reactive({
+  add: '添加',
+  edit: '编辑',
+  delete: '删除',
+  detail: '详情',
+})
+const title = ref('')
+const quickFormRef = ref<InstanceType<typeof QuickForm>>()
+const dialogFormVisible = ref(false)
+const dialogFormType = ref('')
+const checkDataList = reactive<Array<any>>([])
+/**
+ * props
+ */
 const props = defineProps({
-  tableData: {
-    type: Array,
-    default: () => {
-      return []
-    },
+  searchFormModel: {
+    type: [Boolean, Object],
+    default: false,
   },
-  tableColumns: {
+  searchFormItems: {
     type: Array,
     default: () => {
       return []
     },
   },
+  dialogTitle: {
+    type: [Boolean, Object],
+    default: false,
+  },
   formModel: {
     type: Object,
     default: () => {
@@ -43,147 +64,123 @@ const props = defineProps({
       return []
     },
   },
-  searchFormModel: {
-    type: Object,
-    default: () => {
-      return {}
-    },
+  leftTree: {
+    type: [Boolean, Object],
+    default: false,
   },
-  searchFormItems: {
+  tableData: {
     type: Array,
     default: () => {
       return []
     },
   },
-  formTitle: {
-    type: Object,
-    default: () => {
-      return {}
-    },
-  },
-  page: {
-    type: Object,
-    default: () => {
-      return {}
-    },
-  },
-  showSearch: {
-    type: Boolean,
-    default: false,
-  },
-  showPage: {
-    type: Boolean,
-    default: false,
-  },
-  showTree: {
-    type: Boolean,
-    default: false,
-  },
-  treeData: {
+  tableColumns: {
     type: Array,
     default: () => {
       return []
     },
   },
-  defaultTreeProps: {
-    type: Object,
-    default: () => {
-      return {
-        id: 'id',
-        label: 'label',
-        children: 'children',
-      }
-    },
-  },
-  treeSpan: {
-    type: Number,
-    default: 4,
+  tableActionbar: {
+    type: [Boolean, Object],
+    default: false,
   },
-  autoFefresh: {
-    type: Boolean,
+  tableToolbar: {
+    type: [Boolean, Object],
     default: false,
   },
-  interval: {
-    type: Number,
-    default: 1000 * 30,
+  page: {
+    type: [Boolean, Object],
+    default: false,
   },
 })
-
+/**
+ * props to ref
+ */
 const {
-  tableData,
-  tableColumns,
   searchFormModel,
   searchFormItems,
+  leftTree,
+  tableData,
+  tableColumns,
+  tableActionbar,
+  tableToolbar,
+  page,
+  dialogTitle,
   formModel,
   formItems,
-  formTitle,
-  page,
-  showSearch,
-  showPage,
-  showTree,
-  treeData,
-  defaultTreeProps,
-  treeSpan,
-  // autoReFefresh,
-  // autoRefreshTime,
 } = toRefs(props) as {
-  tableData: Ref<any>
-  tableColumns: Ref<Column[]>
-  searchFormModel: Ref<any>
+  searchFormModel: Ref<boolean | any>
   searchFormItems: Ref<FormItem[]>
+  dialogTitle: Ref<boolean | any>
   formModel: Ref<any>
   formItems: Ref<FormItem[]>
-  formTitle: Ref<any>
-  page: Ref<any>
-  showSearch: Ref<boolean>
-  showPage: Ref<boolean>
-  showTree: Ref<boolean>
-  treeData: Ref<any>
-  defaultTreeProps: Ref<any>
-  treeSpan: Ref<number>
-  // autoReFefresh: Ref<boolean>
-  // autoRefreshTime: Ref<number>
+  leftTree: Ref<any>
+  tableData: Ref<any>
+  tableColumns: Ref<any>
+  tableActionbar: Ref<boolean | Actionbar>
+  tableToolbar: Ref<boolean | Toolbar>
+  page: Ref<Page>
 }
-
-const emit = defineEmits([
+/**
+ * 类型转换
+ */
+const toolbar = tableToolbar.value as Toolbar
+const actionbar = tableActionbar.value as Actionbar
+const tree = leftTree.value as LeftTree
+const treeSpan = tree.treeSpan ? tree.treeSpan : 4
+const defaultTreeProps = tree.defaultTreeProps
+  ? tree.defaultTreeProps
+  : {
+      id: 'id',
+      label: 'label',
+      children: 'children',
+    }
+const treeData = tree.treeData ? tree.treeData : []
+/**
+ * emits
+ */
+const emits = defineEmits([
   'onTreeClick',
   'onLoad',
   'onTreeLoad',
   'onAdd',
   'onEdit',
   'onDelete',
+  'onDetail',
+  'onBatchDelete',
+  'onImport',
+  'onExport',
+  'onPrint',
+  'onRefresh',
   'onSearchFormSubmit',
   'onSearchFormClear',
   'onFormSubmit',
   'onFormCancel',
   'onSizeChange',
   'onCurrentChange',
+  'onSelectionChange',
 ])
-const quickFormRef = ref<InstanceType<typeof QuickForm>>()
+/**
+ * 常规属性
+ */
 const selectTree = ref<Tree>({})
 const treeRef = ref<InstanceType<typeof ElTree>>()
-const selectDataList = ref<Array<User>>([])
-const dialogFormVisible = ref(false)
-const dialogFormType = ref('')
-const autoReFefresh = ref(true)
-const timeCount = ref()
-const autoRefreshTime = ref(1000 * 60)
 /**
- * 函数
+ * 加载数据
  */
 const load = () => {
   const { current, size } = page.value
   const params = { ...searchFormModel.value, current, size }
-  emit('onLoad', params)
+  emits('onLoad', params)
 }
 const handleTreeNodeClick = (data: Tree) => {
   selectTree.value = data
-  emit('onTreeClick', data, () => {
+  emits('onTreeClick', data, () => {
     load()
   })
 }
 const treeLoad = () => {
-  emit('onTreeLoad', (id: string) => {
+  emits('onTreeLoad', (id: string) => {
     nextTick(() => {
       treeRef.value?.setCurrentKey(id)
       const node = treeRef.value?.getCurrentNode() as Tree
@@ -192,121 +189,231 @@ const treeLoad = () => {
     load()
   })
 }
-const handleSelectionChange = (val: User[]) => {
-  selectDataList.value = val
+/**
+ * 搜索
+ */
+const handleSearchSubmit = () => {
+  emits('onSearchFormSubmit', searchFormModel.value)
+  load()
 }
-const handleSearch = () => {
-  emit('onSearchFormSubmit', searchFormModel.value)
+const handleSearchClear = () => {
+  Object.keys(searchFormModel.value).forEach((key) => {
+    searchFormModel.value[key] = ''
+  })
+  emits('onSearchFormClear', searchFormModel.value)
   load()
 }
-const handleClear = () => {
-  emit('onSearchFormClear', searchFormModel.value)
+/**
+ * 操作栏
+ */
+const handleEdit = (row: any) => {
+  dialogFormType.value = 'edit'
+  formTitle.edit = dialogTitle.value ? dialogTitle.value.edit : formTitle.edit
+  title.value = formTitle.edit
+  Object.keys(formModel.value).forEach((key) => {
+    formModel.value[key] = row[key]
+  })
+  dialogFormVisible.value = true
+}
+const handleDelete = (row: any) => {
+  emits('onDelete', row, () => {
+    load()
+  })
+}
+const handleDetail = (row: any) => {
+  dialogFormType.value = 'detail'
+  formTitle.detail = dialogTitle.value
+    ? dialogTitle.value.detail
+    : formTitle.detail
+  title.value = formTitle.detail
+  Object.keys(formModel.value).forEach((key) => {
+    formModel.value[key] = row[key]
+  })
+  dialogFormVisible.value = true
+}
+/**
+ * 表单
+ */
+const handleOk = () => {
+  if (quickFormRef.value) {
+    quickFormRef.value.handleSubmit()
+  }
+}
+const handleCancel = () => {
+  dialogFormVisible.value = false
+}
+const handleSubmit = (formRef: FormInstance | undefined) => {
+  if (!formRef) return
+  formRef.validate((valid) => {
+    if (!valid) {
+      console.log('error submit!')
+      return false
+    }
+    console.log('submit!')
+    emits('onFormSubmit', formModel.value, () => {
+      dialogFormVisible.value = false
+      load()
+    })
+  })
 }
+/**
+ * 工具栏
+ */
 const handleAdd = () => {
-  dialogFormType.value = 'add'
-  if (showTree.value && !selectTree.value.id) {
+  if (leftTree.value && !selectTree.value.id) {
     ElMessage({
       type: 'warning',
       message: '请选择节点',
     })
     return
   }
+  Object.keys(formModel.value).forEach((key) => {
+    const index = formItems.value.findIndex(
+      (x) => x.vModel === key && x.type === 'select'
+    )
+    if (index !== -1) {
+      formModel.value[key] = selectTree.value.id
+    }
+  })
+  dialogFormType.value = 'add'
+  formTitle.add = dialogTitle.value ? dialogTitle.value.add : formTitle.add
+  title.value = formTitle.add
   dialogFormVisible.value = true
-  emit('onAdd')
 }
-const handleEdit = () => {
-  dialogFormType.value = 'edit'
-  if (showTree.value && !selectTree.value.id) {
+const handleBatchDelete = () => {
+  if (leftTree.value && !selectTree.value.id) {
     ElMessage({
       type: 'warning',
       message: '请选择节点',
     })
     return
   }
-  if (selectDataList.value.length !== 1) {
+  if (checkDataList.length < 1) {
     ElMessage({
       type: 'warning',
-      message: '请选择一行',
+      message: '至少选择一行',
     })
     return
   }
-  dialogFormVisible.value = true
-  const item = selectDataList.value[0]
-  emit('onEdit', item)
+  const ids = checkDataList
+    .map((x) => {
+      return x.id
+    })
+    .join(',')
+  emits('onBatchDelete', { checkDataList, ids }, () => {
+    load()
+  })
 }
-const handleDelete = () => {
-  if (selectDataList.value.length !== 1) {
+const handleImport = () => {
+  if (leftTree.value && !selectTree.value.id) {
     ElMessage({
       type: 'warning',
-      message: '请选择一行',
+      message: '请选择节点',
     })
     return
   }
-  const item = selectDataList.value[0]
-  emit('onDelete', item, () => {
+  console.log('handleImport')
+  emits('onImport', () => {
     load()
   })
 }
-const handleCancel = () => {
-  dialogFormVisible.value = false
-  emit('onFormCancel', formModel.value)
+const handleExport = () => {
+  if (leftTree.value && !selectTree.value.id) {
+    ElMessage({
+      type: 'warning',
+      message: '请选择节点',
+    })
+    return
+  }
+  console.log('handleExport')
+  emits('onExport')
 }
-const handleOk = () => {
-  if (quickFormRef.value) {
-    quickFormRef.value.handleSubmit()
+const handlePrint = () => {
+  if (leftTree.value && !selectTree.value.id) {
+    ElMessage({
+      type: 'warning',
+      message: '请选择节点',
+    })
+    return
   }
+  console.log('handlePrint')
+  emits('onPrint')
 }
-const handleSubmit = (formRef: FormInstance | undefined) => {
-  emit('onFormSubmit', formRef, formModel.value, () => {
-    dialogFormVisible.value = false
+const handleRefresh = () => {
+  console.log('handleRefresh')
+  load()
+  // emits('onRefresh', () => {
+  //   load()
+  // })
+}
+const handleCustomToolbarClick = (done: any) => {
+  if (leftTree.value && !selectTree.value.id) {
+    ElMessage({
+      type: 'warning',
+      message: '请选择节点',
+    })
+    return
+  }
+  if (checkDataList.length < 1) {
+    ElMessage({
+      type: 'warning',
+      message: '至少选择一行',
+    })
+    return
+  }
+  const ids = checkDataList
+    .map((x) => {
+      return x.id
+    })
+    .join(',')
+  done({ checkDataList, ids }, () => {
     load()
   })
 }
+/**
+ * 选中
+ */
+const handleSelectionChange = (userList: Array<any>) => {
+  checkDataList.length = 0
+  checkDataList.push(...userList)
+}
+/**
+ * 分页
+ */
 const handleSizeChange = (val: number) => {
   page.value.size = val
-  emit('onSizeChange', val)
+  emits('onSizeChange', val)
   load()
 }
 const handleCurrentChange = (val: number) => {
   page.value.current = val
-  emit('onCurrentChange', val)
+  emits('onCurrentChange', val)
+  load()
+}
+const handleDone = () => {
   load()
 }
-const dialogTitle = computed(() => {
-  if (dialogFormType.value === 'add') {
-    return formTitle.value.add
-  }
-  if (dialogFormType.value === 'edit') {
-    return formTitle.value.edit
-  }
-  if (dialogFormType.value === 'detail') {
-    return formTitle.value.detail
-  }
-  return '标题'
-})
 onMounted(() => {
-  // TODO:onMounted会执行两次，待解决
-  console.log('onMounted-crud')
-  if (showTree.value) {
+  if (leftTree.value) {
     treeLoad()
   } else {
     load()
   }
-  if (autoReFefresh.value) {
-    timeCount.value = setInterval(() => {
-      load()
-    }, autoRefreshTime.value)
-  }
+  // if (autoReFefresh.value) {
+  //   timeCount.value = setInterval(() => {
+  //     load()
+  //   }, autoRefreshTime.value)
+  // }
 })
 onActivated(() => {
-  clearInterval(timeCount.value)
+  // clearInterval(timeCount.value)
 })
 </script>
 <template>
   <el-row :gutter="40">
-    <el-col :span="showTree ? treeSpan : 0">
+    <el-col :span="leftTree ? treeSpan : 0">
       <el-tree
-        v-if="showTree"
+        v-if="leftTree"
         ref="treeRef"
         :data="treeData"
         :props="defaultTreeProps"
@@ -316,38 +423,56 @@ onActivated(() => {
       >
       </el-tree>
     </el-col>
-    <el-col :span="showTree ? 24 - treeSpan : 24">
-      <quick-form
-        v-if="showSearch"
-        :inline="true"
+    <el-col :span="leftTree ? 24 - treeSpan : 24">
+      <quick-search
+        v-if="searchFormModel"
         :model="searchFormModel"
-        class="demo-form-inline"
-        :form-items="searchFormItems"
-        form-type="search"
-        :action-slot="true"
+        :items="searchFormItems"
+        @on-search="handleSearchSubmit"
+        @on-clear="handleSearchClear"
       >
-        <template #action>
-          <el-form-item>
-            <el-button type="primary" @click="handleSearch">查询</el-button>
-          </el-form-item>
-          <el-form-item>
-            <el-button @click="handleClear">清空</el-button>
-          </el-form-item>
-        </template>
-      </quick-form>
-      <el-button-group class="ml-4 action">
-        <el-button type="primary" @click="handleAdd">新增</el-button>
-        <el-button type="primary" @click="handleEdit">编辑</el-button>
-        <el-button type="primary" @click="handleDelete">删除</el-button>
-      </el-button-group>
+      </quick-search>
+      <quick-toolbar
+        :table-toolbar="tableToolbar"
+        :add-button-name="toolbar?.addButtonName"
+        :batch-delete-button-name="toolbar?.batchDeleteButtonName"
+        :import-button-name="toolbar?.importButtonName"
+        :export-button-name="toolbar?.exportButtonName"
+        :print-button-name="toolbar?.printButtonName"
+        :refresh-button-name="toolbar?.refreshButtonName"
+        :hidden-add-button="toolbar?.hiddenAddButton"
+        :hidden-batch-delete-button="toolbar?.hiddenBatchDeleteButton"
+        :hidden-import-button="toolbar?.hiddenImportButton"
+        :hidden-export-button="toolbar?.hiddenExportButton"
+        :hidden-print-button="toolbar?.hiddenPrintButton"
+        :hidden-refres-hbutton="toolbar?.hiddenRefreshButton"
+        @on-add="handleAdd"
+        @on-batch-delete="handleBatchDelete"
+        @on-import="handleImport"
+        @on-export="handleExport"
+        @on-print="handlePrint"
+        @on-refresh="handleRefresh"
+        @on-custom-toolbar-click="handleCustomToolbarClick"
+      ></quick-toolbar>
       <quick-table
         :data="tableData"
         :columns="tableColumns"
-        @selection-change="handleSelectionChange"
+        :table-actionbar="tableActionbar"
+        :edit-button-name="actionbar?.editButtonName"
+        :delete-button-name="actionbar?.deleteButtonName"
+        :detail-button-name="actionbar?.detailButtonName"
+        :hidden-edit-button="actionbar?.hiddenEditButton"
+        :hidden-delete-button="actionbar?.hiddenDeleteButton"
+        :hidden-detail-button="actionbar?.hiddenDetailButton"
+        @on-row-edit="handleEdit"
+        @on-row-delete="handleDelete"
+        @on-row-detail="handleDetail"
+        @on-selection-change="handleSelectionChange"
+        @on-done="handleDone"
       >
       </quick-table>
       <el-pagination
-        v-if="showPage"
+        v-if="page"
         v-model:currentPage="page.current"
         v-model:page-size="page.size"
         :page-sizes="page.sizes"
@@ -361,7 +486,7 @@ onActivated(() => {
       />
       <el-dialog
         v-model="dialogFormVisible"
-        :title="dialogTitle"
+        :title="title"
         width="35%"
         @close="handleCancel()"
       >
@@ -370,20 +495,22 @@ onActivated(() => {
           :model="formModel"
           :form-items="formItems"
           :form-type="dialogFormType"
+          :hidden-action="true"
           @submit="handleSubmit"
-          @clear="handleClear"
         >
         </quick-form>
         <template #footer>
           <span class="dialog-footer">
-            <el-button @click="handleCancel()">取消</el-button>
-            <el-button type="primary" @click="handleOk()">确定</el-button>
+            <template v-if="dialogFormType === 'detail'">
+              <el-button type="primary" @click="handleCancel()">关闭</el-button>
+            </template>
+            <template v-else>
+              <el-button @click="handleCancel()">取消</el-button>
+              <el-button type="primary" @click="handleOk()">确定</el-button>
+            </template>
           </span>
         </template>
       </el-dialog>
     </el-col>
   </el-row>
 </template>
-<style lang="scss" scoped>
-@import './index.scss';
-</style>
diff --git a/src/components/QuickForm/index.scss b/src/components/QuickForm/index.scss
deleted file mode 100644
index a0c8268b50f7ed88bc5c8790b95132159f2a9a1b..0000000000000000000000000000000000000000
--- a/src/components/QuickForm/index.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.avatar-uploader .el-upload {
-    border: 1px dashed var(--el-border-color);
-    border-radius: 6px;
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
-    transition: var(--el-transition-duration-fast);
-  }
-  
-  .avatar-uploader .el-upload:hover {
-    border-color: var(--el-color-primary);
-  }
-  
-  .el-icon.avatar-uploader-icon {
-    font-size: 28px;
-    color: #8c939d;
-    width: 178px;
-    height: 178px;
-    text-align: center;
-  }
\ No newline at end of file
diff --git a/src/components/QuickForm/index.ts b/src/components/QuickForm/index.ts
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/src/components/QuickForm/index.vue b/src/components/QuickForm/index.vue
index af877b776b474f511d8ae7e8e070ec78ec58c175..45e41f741cc42b2d38cba8a8274675cc096693d4 100644
--- a/src/components/QuickForm/index.vue
+++ b/src/components/QuickForm/index.vue
@@ -1,10 +1,16 @@
 <script lang="ts" setup>
-import { defineProps, toRefs, Ref, defineEmits, ref, defineExpose } from 'vue'
+import { defineExpose, defineProps, toRefs, Ref, defineEmits, ref } from 'vue'
 import { Plus } from '@element-plus/icons-vue'
 import { FormInstance } from 'element-plus'
-import { FormItem } from '../../types/form'
+import { FormItem } from '@/types/form'
 
+/**
+ * form
+ */
 const formRef = ref<FormInstance>()
+/**
+ * props
+ */
 const props = defineProps({
   model: {
     type: Object,
@@ -24,38 +30,47 @@ const props = defineProps({
   },
   formType: {
     type: String,
-    default: '',
+    default: 'form',
   },
   actionSlot: {
     type: Boolean,
     default: false,
   },
-  showAction: {
+  hiddenAction: {
     type: Boolean,
     default: false,
   },
 })
+/**
+ * props toRefs
+ */
 const {
   model,
   inline = false,
   formItems,
   formType,
   actionSlot = false,
-  showAction = false,
+  hiddenAction = false,
 } = toRefs(props) as {
   model: Ref<any>
   inline: Ref<boolean>
   formItems: Ref<FormItem[]>
   formType: Ref<string>
   actionSlot: Ref<boolean>
-  showAction: Ref<boolean>
+  hiddenAction: Ref<boolean>
 }
-const emit = defineEmits(['submit', 'clear'])
+/**
+ * emits
+ */
+const emits = defineEmits(['submit', 'clear'])
+/**
+ * 函数
+ */
 const handleSubmit = () => {
-  emit('submit', formRef.value)
+  emits('submit', formRef.value)
 }
 const handleClear = () => {
-  emit('clear')
+  emits('clear')
 }
 defineExpose({ handleSubmit })
 </script>
@@ -68,12 +83,12 @@ defineExpose({ handleSubmit })
           (formType === 'add' && !item.addHidden) ||
           (formType === 'edit' && !item.editHidden) ||
           (formType === 'detail' && !item.detailHidden) ||
-          !formType
+          formType === 'form'
         "
         :label="item.label"
         :label-width="item.labelWidth"
-        :prop="item.prop"
-        :rules="item.rules"
+        :prop="formType === 'detail' ? undefined : item.prop"
+        :rules="formType === 'detail' ? undefined : item.rules"
       >
         <template v-if="item.type === 'select'">
           <el-select
@@ -82,7 +97,7 @@ defineExpose({ handleSubmit })
             :disabled="
               (formType === 'add' && item.addDisabled) ||
               (formType === 'edit' && item.editDisabled) ||
-              (formType === 'detail' && item.detailDisabled)
+              formType === 'detail'
             "
           >
             <el-option
@@ -113,7 +128,7 @@ defineExpose({ handleSubmit })
             :readonly="
               (formType === 'add' && item.addReadonly) ||
               (formType === 'edit' && item.editReadonly) ||
-              (formType === 'detail' && item.detailReadonly)
+              formType === 'detail'
             "
           />
         </template>
@@ -127,7 +142,7 @@ defineExpose({ handleSubmit })
             :readonly="
               (formType === 'add' && item.addReadonly) ||
               (formType === 'edit' && item.editReadonly) ||
-              (formType === 'detail' && item.detailReadonly)
+              formType === 'detail'
             "
           />
         </template>
@@ -145,14 +160,14 @@ defineExpose({ handleSubmit })
         </template>
         <template v-else-if="item.type === 'number'">
           <el-input
-            v-model="model[item.vModel]"
+            v-model.number="model[item.vModel]"
             type="number"
             :autocomplete="item.autocomplete"
             :placeholder="item.placeholder"
             :readonly="
               (formType === 'add' && item.addReadonly) ||
               (formType === 'edit' && item.editReadonly) ||
-              (formType === 'detail' && item.detailReadonly)
+              formType === 'detail'
             "
           />
         </template>
@@ -164,25 +179,44 @@ defineExpose({ handleSubmit })
             :readonly="
               (formType === 'add' && item.addReadonly) ||
               (formType === 'edit' && item.editReadonly) ||
-              (formType === 'detail' && item.detailReadonly)
+              formType === 'detail'
             "
           />
         </template>
       </el-form-item>
     </template>
-    <template v-if="showAction">
-      <template v-if="actionSlot">
-        <slot name="action" :form-ref="formRef">
-          {{ formRef }}
-        </slot>
-      </template>
-      <template v-else>
-        <el-button type="primary" @click="handleSubmit">提交</el-button>
-        <el-button @click="handleClear">清空</el-button>
-      </template>
+    <template v-if="!hiddenAction">
+      <el-form-item>
+        <template v-if="actionSlot">
+          <slot name="action" :form-ref="formRef"></slot>
+        </template>
+        <template v-else>
+          <el-button type="primary" @click="handleSubmit">提交</el-button>
+          <el-button @click="handleClear">清空</el-button>
+        </template>
+      </el-form-item>
     </template>
   </el-form>
 </template>
 <style lang="scss">
-@import './index.scss';
+.avatar-uploader .el-upload {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
+
+.el-icon.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  text-align: center;
+}
 </style>
diff --git a/src/components/QuickSearch/index.vue b/src/components/QuickSearch/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..583bb35f3778ef945ccfddd1c6f87eceb6efc18e
--- /dev/null
+++ b/src/components/QuickSearch/index.vue
@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+import { defineProps, defineEmits, toRefs, Ref } from 'vue'
+import QuickForm from '@/components/QuickForm/index.vue'
+import { FormItem } from '@/types/form'
+
+const props = defineProps({
+  model: {
+    type: Object,
+    default: () => {
+      return {}
+    },
+  },
+  items: {
+    type: Array,
+    default: () => {
+      return []
+    },
+  },
+  searchButtonName: {
+    type: String,
+    default: '查询',
+  },
+  resetButtonName: {
+    type: String,
+    default: '清空',
+  },
+  hiddenResetButton: {
+    type: Boolean,
+    default: false,
+  },
+})
+const { model, items, searchButtonName, resetButtonName, hiddenResetButton } =
+  toRefs(props) as {
+    model: Ref<any>
+    items: Ref<FormItem[]>
+    searchButtonName: Ref<any>
+    resetButtonName: Ref<any>
+    hiddenResetButton: Ref<any>
+  }
+const emits = defineEmits(['onSearch', 'onClear'])
+</script>
+<template>
+  <quick-form
+    :inline="true"
+    :model="model"
+    class="demo-form-inline"
+    :form-items="items"
+    form-type="search"
+    :show-action="true"
+    :action-slot="true"
+  >
+    <template #action>
+      <el-form-item>
+        <el-button type="primary" @click="emits('onSearch')">{{
+          searchButtonName
+        }}</el-button>
+      </el-form-item>
+      <el-form-item v-if="!hiddenResetButton">
+        <el-button @click="emits('onClear')">{{ resetButtonName }}</el-button>
+      </el-form-item>
+    </template>
+  </quick-form>
+</template>
diff --git a/src/components/QuickTable/index.scss b/src/components/QuickTable/index.scss
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/src/components/QuickTable/index.ts b/src/components/QuickTable/index.ts
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/src/components/QuickTable/index.vue b/src/components/QuickTable/index.vue
index 4b2ba7dd2c6eb07b7e5dd81ef3bc38767c656d54..20d89e46b530d95f3689a0877f4046161f398fe3 100644
--- a/src/components/QuickTable/index.vue
+++ b/src/components/QuickTable/index.vue
@@ -1,7 +1,9 @@
 <script lang="ts" setup>
 import { defineProps, defineEmits, toRefs, Ref } from 'vue'
-import { Column } from '../../types/table'
-
+import { Column, Actionbar } from '../../types/table'
+/**
+ * props
+ */
 const props = defineProps({
   data: {
     type: Array,
@@ -12,28 +14,100 @@ const props = defineProps({
   columns: {
     type: Array,
     default: () => {
-      return {}
+      return []
     },
   },
+  height: {
+    type: Number,
+    default: 575,
+  },
+  tableActionbar: {
+    type: [Boolean, Object],
+    default: false,
+  },
+  editButtonName: {
+    type: String,
+    default: '编辑',
+  },
+  deleteButtonName: {
+    type: String,
+    default: '删除',
+  },
+  detailButtonName: {
+    type: String,
+    default: '详情',
+  },
+  hiddenEditButton: {
+    type: Boolean,
+    default: false,
+  },
+  hiddenDeleteButton: {
+    type: Boolean,
+    default: false,
+  },
+  hiddenDetailButton: {
+    type: Boolean,
+    default: false,
+  },
 })
-
-const emit = defineEmits(['selectionChange'])
-
-const { data, columns } = toRefs(props) as {
+/**
+ * props toRefs
+ */
+const {
+  data,
+  columns,
+  height,
+  tableActionbar,
+  editButtonName,
+  deleteButtonName,
+  detailButtonName,
+  hiddenEditButton,
+  hiddenDeleteButton,
+  hiddenDetailButton,
+} = toRefs(props) as {
   data: Ref<any>
   columns: Ref<Column[]>
+  height: Ref<number>
+  tableActionbar: Ref<boolean | Actionbar>
+  editButtonName: Ref<string>
+  deleteButtonName: Ref<string>
+  detailButtonName: Ref<string>
+  hiddenEditButton: Ref<boolean>
+  hiddenDeleteButton: Ref<boolean>
+  hiddenDetailButton: Ref<boolean>
+}
+/**
+ * 类型转换
+ */
+const actionbar = tableActionbar.value as Actionbar
+/**
+ * emits
+ */
+const emits = defineEmits([
+  'onSelectionChange',
+  'onRowEdit',
+  'onRowDelete',
+  'onRowDetail',
+  'onDone',
+])
+/**
+ *函数
+ */
+const getActionbarWidth = () => {
+  if (actionbar.width) {
+    return actionbar.width
+  }
+  return 150
 }
-
 const handleSelectionChange = (val: any) => {
-  emit('selectionChange', val)
+  emits('onSelectionChange', val)
 }
 </script>
 <template>
-  <!-- show-summary 合计 -->
   <el-table
     :data="data"
     style="width: 100%"
-    :height="575"
+    :height="height"
     stripe
     border
     @selection-change="handleSelectionChange"
@@ -48,21 +122,80 @@ const handleSelectionChange = (val: any) => {
       :align="item.align"
       :formatter="item.format"
       show-overflow-tooltip
+    ></el-table-column>
+    <el-table-column
+      v-if="tableActionbar"
+      label="操作"
+      :width="getActionbarWidth()"
     >
-      <template v-if="item.slot" #default="scope">
-        <template v-if="item.type === 'link' && item.label === 'QQ号'">
-          <el-link
-            target="_blank"
-            :href="`http://wpa.qq.com/msgrd?v=3&uin=${
-              item.format && item.format(scope.row)
-            }&site=1841031740&menu=yes`"
-            >({{ item.format && item.format(scope.row) }})加好友</el-link
+      <template #default="scope">
+        <slot name="leftActionbar" :row="scope.row"></slot>
+        <template v-for="(item, index) in actionbar.btns" :key="index">
+          <el-button
+            v-if="
+              item.position &&
+              item.position === 'left' &&
+              (item.render ? item.render(scope.row) : true)
+            "
+            :link="!item.link ? true : false || item.link ? item.link : false"
+            :type="item.type ? item.type : 'text'"
+            :size="item.size ? item.size : 'small'"
+            @click.prevent="
+              item.click(scope.row, () => {
+                emits('onDone')
+              })
+            "
+          >
+            {{ item.name }}
+          </el-button>
+        </template>
+        <el-button
+          v-if="!hiddenEditButton"
+          :link="true"
+          type="primary"
+          size="small"
+          @click.prevent="emits('onRowEdit', scope.row)"
+        >
+          {{ editButtonName }}
+        </el-button>
+        <el-button
+          v-if="!hiddenDeleteButton"
+          :link="true"
+          type="primary"
+          size="small"
+          @click.prevent="emits('onRowDelete', scope.row)"
+        >
+          {{ deleteButtonName }}
+        </el-button>
+        <el-button
+          v-if="!hiddenDetailButton"
+          :link="true"
+          type="primary"
+          size="small"
+          @click.prevent="emits('onRowDetail', scope.row)"
+        >
+          {{ detailButtonName }}
+        </el-button>
+        <template v-for="(item, index) in actionbar.btns" :key="index">
+          <el-button
+            v-if="
+              item.position !== 'left' &&
+              (item.render ? item.render(scope.row) : true)
+            "
+            :link="!item.link ? true : false || item.link ? item.link : false"
+            :type="item.type ? item.type : 'text'"
+            :size="item.size ? item.size : 'small'"
+            @click.prevent="
+              item.click(scope.row, () => {
+                emits('onDone')
+              })
+            "
           >
+            {{ item.name }}
+          </el-button>
         </template>
+        <slot name="rightActionbar" :row="scope.row"></slot>
       </template>
     </el-table-column>
   </el-table>
 </template>
-<style lang="scss" scoped>
-@import './index.scss';
-</style>
diff --git a/src/components/QuickToolbar/index.vue b/src/components/QuickToolbar/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b924ee4600237897797093ef86a03b804879ab40
--- /dev/null
+++ b/src/components/QuickToolbar/index.vue
@@ -0,0 +1,181 @@
+<script lang="ts" setup>
+import { defineProps, defineEmits, toRefs, Ref } from 'vue'
+import { ToolBar } from '../../types/table'
+
+/**
+ * props
+ */
+const props = defineProps({
+  addButtonName: {
+    type: String,
+    default: '新增',
+  },
+  batchDeleteButtonName: {
+    type: String,
+    default: '批量删除',
+  },
+  importButtonName: {
+    type: String,
+    default: '导入',
+  },
+  exportButtonName: {
+    type: String,
+    default: '导出',
+  },
+  printtButtonName: {
+    type: String,
+    default: '打印',
+  },
+  refreshButtonName: {
+    type: String,
+    default: '刷新',
+  },
+  hiddenAddButton: {
+    type: Boolean,
+    default: false,
+  },
+  hiddenBatchDeleteButton: {
+    type: Boolean,
+    default: false,
+  },
+  hiddenImportButton: {
+    type: Boolean,
+    default: false,
+  },
+  hiddenExportButton: {
+    type: Boolean,
+    default: false,
+  },
+  hiddenPrintButton: {
+    type: Boolean,
+    default: false,
+  },
+  hiddenRefreshButton: {
+    type: Boolean,
+    default: false,
+  },
+  tableToolbar: {
+    type: [Boolean, Object],
+    default: false,
+  },
+})
+/**
+ * props toRefs
+ */
+const {
+  addButtonName,
+  batchDeleteButtonName,
+  importButtonName,
+  exportButtonName,
+  printtButtonName,
+  refreshButtonName,
+  hiddenAddButton,
+  hiddenBatchDeleteButton,
+  hiddenImportButton,
+  hiddenExportButton,
+  hiddenPrintButton,
+  hiddenRefreshButton,
+  tableToolbar,
+} = toRefs(props) as {
+  addButtonName: Ref<string>
+  batchDeleteButtonName: Ref<string>
+  importButtonName: Ref<string>
+  exportButtonName: Ref<string>
+  printtButtonName: Ref<string>
+  refreshButtonName: Ref<string>
+  hiddenAddButton: Ref<boolean>
+  hiddenBatchDeleteButton: Ref<boolean>
+  hiddenImportButton: Ref<boolean>
+  hiddenExportButton: Ref<boolean>
+  hiddenPrintButton: Ref<boolean>
+  hiddenRefreshButton: Ref<boolean>
+  tableToolbar: Ref<boolean | ToolBar>
+}
+/**
+ * 类型转换
+ */
+const toolbar = tableToolbar.value as ToolBar
+/**
+ * emits
+ */
+const emits = defineEmits([
+  'onAdd',
+  'onBatchDelete',
+  'onImport',
+  'onExport',
+  'onPrint',
+  'onRefresh',
+  'onCustomToolbarClick',
+])
+const handleCustomClick = (item: any) => {
+  // item.click(() => {
+  //   emits('onCustomToolbarClick', (data: any) => {
+  //     const { checkDataList, ids } = data
+  //     console.log('ids', ids)
+  //   })
+  // })
+  emits('onCustomToolbarClick', item.click)
+}
+</script>
+<template>
+  <div v-if="tableToolbar" class="ml-4 toobar">
+    <slot name="leftToolbar"></slot>
+    <el-button
+      v-if="!hiddenImportButton"
+      type="primary"
+      @click="emits('onImport')"
+      >{{ importButtonName }}</el-button
+    >
+    <el-button
+      v-if="!hiddenExportButton"
+      type="primary"
+      @click="emits('onExport')"
+      >{{ exportButtonName }}</el-button
+    >
+    <template v-for="(item, index) in toolbar.btns" :key="index">
+      <el-button
+        v-if="item.position === 'left'"
+        :type="item.type ? item.type : 'primary'"
+        @click.prevent="item.click()"
+      >
+        {{ item.name }}
+      </el-button>
+    </template>
+    <el-button v-if="!hiddenAddButton" type="primary" @click="emits('onAdd')">{{
+      addButtonName
+    }}</el-button>
+    <el-button
+      v-if="!hiddenBatchDeleteButton"
+      type="primary"
+      @click="emits('onBatchDelete')"
+      >{{ batchDeleteButtonName }}</el-button
+    >
+    <template v-for="(item, index) in toolbar.btns" :key="index">
+      <el-button
+        v-if="item.position !== 'left'"
+        :type="item.type ? item.type : 'primary'"
+        @click.prevent="handleCustomClick(item)"
+      >
+        {{ item.name }}
+      </el-button>
+    </template>
+    <el-button
+      v-if="!hiddenPrintButton"
+      type="primary"
+      @click="emits('onPrint')"
+      >{{ printtButtonName }}</el-button
+    >
+    <el-button
+      v-if="!hiddenRefreshButton"
+      type="primary"
+      @click="emits('onRefresh')"
+      >{{ refreshButtonName }}</el-button
+    >
+    <slot name="rightActions"></slot>
+  </div>
+</template>
+<style lang="scss" scoped>
+.toobar {
+  margin-bottom: 10px;
+}
+</style>
diff --git a/src/pages/login/index.vue b/src/pages/login/index.vue
index 5c8d80b146bc39b93a0b8a36768bdaa88a629658..e3b3539368376e28e453b721a5f7d4feb0b24140 100644
--- a/src/pages/login/index.vue
+++ b/src/pages/login/index.vue
@@ -5,7 +5,12 @@ import { form, formItems, handleLogin } from './idnex'
 
 <template>
   <div class="login">
-    <quick-form :model="form" :form-items="formItems" :action-slot="true">
+    <quick-form
+      :model="form"
+      :form-items="formItems"
+      :show-action="true"
+      :action-slot="true"
+    >
       <template #action>
         <el-button type="primary" @click="handleLogin">登录</el-button>
       </template>
diff --git a/src/router/index.ts b/src/router/index.ts
index 1a09d18c7e20927098ca398b86ebf15060e380ec..fae203726f7f3e2c00bf245baa05ee118826d8da 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -15,11 +15,25 @@ export const router = createRouter({
     },
     {
       path: '/personalInfo',
-      component: () => import('../views/personalInfo/index.vue'),
+      component: layout,
+      redirect: '/personalInfo/index',
+      children: [
+        {
+          path: 'index',
+          component: () => import('../views/personalInfo/index.vue'),
+        },
+      ],
     },
     {
       path: '/changePassword',
-      component: () => import('../views/changePassword/index.vue'),
+      component: layout,
+      redirect: '/changePassword/index',
+      children: [
+        {
+          path: 'index',
+          component: () => import('../views/changePassword/index.vue'),
+        },
+      ],
     },
     {
       path: '/',
diff --git a/src/types/table.ts b/src/types/table.ts
index deb11ac9504534ae0f797c7259afbac21b42aa1e..83b37100e5886707fe397ce618e9563f5d8d06ba 100644
--- a/src/types/table.ts
+++ b/src/types/table.ts
@@ -7,3 +7,26 @@ export interface Column {
   slot?: boolean
   format?(row: any, column?: any, cellValue?: any, index?: number): void
 }
+export interface Btns {
+  name: string
+  link?: boolean
+  type?: string
+  size?: string
+  hidden?: boolean
+  position?: string
+  click(item?: any, done?: any): void
+  render?(row: any): boolean
+}
+export interface Actionbar {
+  width: number
+  editButtonName: string
+  deleteButtonName: string
+  detailButtonName: string
+  hiddenEditButton: boolean
+  hiddenDeleteButton: boolean
+  hiddenDetailButton: boolean
+  btns: Array<Btns>
+}
+export interface ToolBar {
+  btns: Array<Btns>
+}
diff --git a/src/types/tree.ts b/src/types/tree.ts
index 0335a65f991c7c9ab0d9b41079d67bd12c33a2a4..5fa1c2320408340dde94707ae3448a75a9ed2260 100644
--- a/src/types/tree.ts
+++ b/src/types/tree.ts
@@ -3,3 +3,8 @@ export interface Tree {
   label: string
   children: Tree[]
 }
+export interface LeftTree {
+  treeSpan?: number
+  treeData: Tree[]
+  defaultTreeProps?: object
+}
diff --git a/src/views/changePassword/index.vue b/src/views/changePassword/index.vue
index 90e383dc69fad6edfeb62c67bd1ab7d24809155f..0fb035f6a75a908195cf6be02d887841cbf27b29 100644
--- a/src/views/changePassword/index.vue
+++ b/src/views/changePassword/index.vue
@@ -13,6 +13,7 @@ onMounted(() => {
     <quick-form
       :model="form"
       :form-items="formItems"
+      :show-action="true"
       @submit="handleSubmit"
       @clear="handleClear"
     >
diff --git a/src/views/dictionary/index.scss b/src/views/dictionary/index.scss
deleted file mode 100644
index 5ed1aa9c874ff08a3936444f0b1eb4fc1ed012e8..0000000000000000000000000000000000000000
--- a/src/views/dictionary/index.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.action {
-    margin-bottom: 10px;
-  }
-  .demo-pagination-block + .demo-pagination-block {
-    margin-top: 10px;
-  }
-  .demo-pagination-block .demonstration {
-    margin-bottom: 16px;
-  }
-  .el-pagination {
-    margin-top: 10px;
-  }
\ No newline at end of file
diff --git a/src/views/dictionary/index.ts b/src/views/dictionary/index.ts
deleted file mode 100644
index cecc4016439142faf3c5cff231d04ed4dba9518c..0000000000000000000000000000000000000000
--- a/src/views/dictionary/index.ts
+++ /dev/null
@@ -1,177 +0,0 @@
-import { reactive, ref } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { Column } from '../../types/table'
-import { FormItem, FormTitle } from '../../types/form'
-import { Dictionary } from '../../types/dictionary'
-import {
-  addDictionary,
-  updateDictionary,
-  removeDictionary,
-  getDictionaryList,
-} from '../../api/dictionary'
-import { dicFormat, treeFormat } from '../../utils'
-import { Tree } from '../../types/tree'
-import { getDictionaryTypeList } from '../../api/dictionaryType'
-import { Options } from '../../types/options'
-/**
- * 属性
- */
-export const currentTreeData = ref<Tree>({
-  id: '',
-  label: '',
-  children: [],
-})
-const dicTypeList = reactive<Array<Options>>([])
-export const treeDataList = reactive<Array<Tree>>([])
-export const dataList = reactive<Array<Dictionary>>([])
-export const form = reactive<Dictionary>({
-  id: '',
-  dicTypeId: '',
-  dicId: '',
-  name: '',
-})
-export const formTitle = reactive<FormTitle>({
-  add: '创建字典',
-  edit: '修改字典',
-  detail: '字典详情',
-})
-export const formItems = reactive<Array<FormItem>>([
-  // TODO:待字典类型完善后使用级联
-  // {
-  //   label: '字典类型',
-  //   labelWidth: '80px',
-  //   vModel: 'dicTypeId',
-  //   placeholder: '字典类型',
-  //   type: 'cascader',
-  //   treeOptions: treeDataList,
-  //   change: (val: string) => {
-  //     console.log('change', val)
-  //   },
-  // },
-  {
-    label: '字典类型',
-    labelWidth: '80px',
-    vModel: 'dicTypeId',
-    placeholder: '字典类型',
-    type: 'select',
-    options: dicTypeList,
-    change: (val: string) => {
-      console.log('change', val)
-    },
-  },
-  {
-    label: '字典编号',
-    labelWidth: '80px',
-    vModel: 'dicId',
-    placeholder: '字典编号',
-    editReadonly: true,
-  },
-  {
-    label: '字典名称',
-    labelWidth: '80px',
-    vModel: 'name',
-    placeholder: '字典名称',
-  },
-])
-export const columns = reactive<Array<Column>>([
-  {
-    width: '50',
-    type: 'selection',
-  },
-  {
-    label: '字典编号',
-    prop: 'dicId',
-    width: '200',
-  },
-  {
-    label: '字典名称',
-    prop: 'name',
-  },
-])
-/**
- * 函数
- */
-export const load = () => {
-  const { id } = currentTreeData.value
-  getDictionaryList(id).then((res) => {
-    const { data: dictionaryList } = res
-    dataList.length = 0
-    dataList.push(...dictionaryList)
-  })
-}
-export const treeLoad = (done: any) => {
-  getDictionaryTypeList().then((res) => {
-    const { data: dictionaryTypeList } = res
-    const data = treeFormat(dictionaryTypeList, {
-      id: 'dicTypeId',
-      label: 'name',
-      children: 'children',
-    })
-    treeDataList.length = 0
-    treeDataList.push(...data)
-
-    const data1 = dicFormat(dictionaryTypeList, {
-      value: 'dicTypeId',
-      label: 'name',
-    })
-    dicTypeList.length = 0
-    dicTypeList.push(...data1)
-
-    currentTreeData.value.id = treeDataList[0].id
-    done(currentTreeData.value.id)
-  })
-}
-export const handleAdd = () => {
-  form.dicTypeId = ''
-  form.id = ''
-  form.dicTypeId = currentTreeData.value.id
-  form.name = ''
-}
-export const handleEdit = (item: Dictionary) => {
-  form.dicTypeId = item.dicTypeId
-  form.id = item.id
-  form.dicId = item.dicId
-  form.name = item.name
-}
-
-export const handleDelete = (item: Dictionary, done: any) => {
-  ElMessageBox.confirm(`你真的删除【${item.name}】的字典吗？`, '警告', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  }).then(() => {
-    removeDictionary(item.id).then(() => {
-      ElMessage({
-        type: 'success',
-        message: '字典删除成功',
-      })
-      done()
-    })
-  })
-}
-export const handleCancel = () => {
-  console.log('handleCancel')
-}
-export const handleOk = (item: Dictionary, done: any) => {
-  if (item.id) {
-    updateDictionary(item).then(() => {
-      ElMessage({
-        type: 'success',
-        message: '字典修改成功',
-      })
-      done()
-    })
-  } else {
-    addDictionary(item).then(() => {
-      ElMessage({
-        type: 'success',
-        message: '字典创建成功',
-      })
-      done()
-    })
-  }
-}
-export const handleTreeClick = (data: Tree, done: any) => {
-  currentTreeData.value = data
-  done()
-}
diff --git a/src/views/dictionary/index.vue b/src/views/dictionary/index.vue
index b22dcf71754f6f1e1547852f4826fb1297deab80..4a0be6149096ec898a5cf26bbddc8fe0d86a9956 100644
--- a/src/views/dictionary/index.vue
+++ b/src/views/dictionary/index.vue
@@ -1,42 +1,222 @@
-<script setup lang="ts">
-import QuickCrud from '../../components/QuickCrud/index.vue'
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { dicFormat, treeFormat } from '@/utils'
+import QuickCrud from '@/components/QuickCrud/index.vue'
+import { Column, Actionbar, Toolbar } from '@/types/table'
+import { Dictionary } from '@/types/dictionary'
+import { FormItem } from '@/types/form'
+import { Options } from '@/types/options'
+import { Tree } from '@/types/tree'
+import { getDictionaryTypeList } from '@/api/dictionaryType'
 import {
-  treeDataList,
-  dataList,
-  columns,
-  formItems,
-  formTitle,
-  form,
-  treeLoad,
-  load,
-  handleAdd,
-  handleEdit,
-  handleDelete,
-  handleOk,
-  handleCancel,
-  handleTreeClick,
-} from './index'
+  getDictionaryList,
+  addDictionary,
+  updateDictionary,
+  deleteDictionary,
+} from '@/api/dictionary'
+import { LeftTree } from '../../types/tree'
+
+/**
+ * 常规属性
+ */
+const dicTypeList = reactive<Array<Options>>([])
+const treeDataList = reactive<Array<Tree>>([])
+const dataList = reactive<Array<Dictionary>>([])
+const currentTreeData = ref<Tree>({
+  id: '',
+  label: '',
+  children: [],
+})
+/**
+ * 表单
+ */
+const dialogTitle = reactive({
+  add: '创建字典',
+  edit: '修改字典',
+  detail: '字典详情',
+})
+const formModel = reactive<Dictionary>({
+  id: '',
+  dicTypeId: '',
+  dicId: '',
+  name: '',
+})
+const formItems = reactive<Array<FormItem>>([
+  {
+    label: '字典编号',
+    labelWidth: '80px',
+    vModel: 'dicId',
+    placeholder: '字典编号',
+    editReadonly: true,
+    prop: 'dicId',
+    rules: [
+      {
+        required: true,
+        message: '字典编号不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '字典名称',
+    labelWidth: '80px',
+    vModel: 'name',
+    placeholder: '字典名称',
+    prop: 'name',
+    rules: [
+      {
+        required: true,
+        message: '字典名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '字典类型',
+    labelWidth: '80px',
+    vModel: 'dicTypeId',
+    placeholder: '字典类型',
+    type: 'select',
+    addDisabled: true,
+    editDisabled: true,
+    detailDisabled: true,
+    options: dicTypeList,
+    change: (val: string) => {
+      console.log('change', val)
+    },
+  },
+])
+const handleFormSubmit = (form: Dictionary, done: any) => {
+  console.log('handleFormSubmit', form)
+  if (form.id) {
+    updateDictionary(form).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '用户修改成功',
+      })
+      done()
+    })
+  } else {
+    addDictionary(form).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '用户创建成功',
+      })
+      done()
+    })
+  }
+}
+/**
+ * 工具栏
+ */
+const tableToolbar = reactive<Toolbar>({
+  hiddenBatchDeleteButton: true,
+  hiddenImportButton: true,
+  hiddenExportButton: true,
+  hiddenPrintButton: true,
+})
+/**
+ * 表格
+ */
+const tableColumns = reactive<Array<Column>>([
+  {
+    width: '50',
+    type: 'selection',
+  },
+  {
+    label: '字典编号',
+    prop: 'dicId',
+    width: '200',
+  },
+  {
+    label: '字典名称',
+    prop: 'name',
+  },
+])
+const handleDelete = (item: Dictionary, done: any) => {
+  ElMessageBox.confirm(
+    `你真的删除【${item.dictionaryName}】的用户吗？`,
+    '警告',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  ).then(() => {
+    deleteDictionary(item.id).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '用户删除成功',
+      })
+      done()
+    })
+  })
+}
+const tableActionbar = reactive<Actionbar>({
+  width: 300,
+  hiddenDetailButton: true,
+})
+/**
+ * 加载数据
+ */
+const load = (parmas: object) => {
+  const { id } = currentTreeData.value
+  getDictionaryList(id).then((res: any) => {
+    const { data: dictionaryList } = res
+    dataList.length = 0
+    dataList.push(...dictionaryList)
+  })
+}
+/**
+ * 左树
+ */
+const leftTree = reactive<LeftTree>({
+  treeData: [],
+})
+const treeLoad = (done: any) => {
+  getDictionaryTypeList().then((res: any) => {
+    const { data: dictionaryTypeList } = res
+    const data = treeFormat(dictionaryTypeList, {
+      id: 'dicTypeId',
+      label: 'name',
+      children: 'children',
+    })
+    treeDataList.length = 0
+    treeDataList.push(...data)
+    leftTree.treeData.length = 0
+    leftTree.treeData.push(...treeDataList)
+    const data1 = dicFormat(dictionaryTypeList, {
+      value: 'dicTypeId',
+      label: 'name',
+    })
+    dicTypeList.length = 0
+    dicTypeList.push(...data1)
+
+    currentTreeData.value.id = treeDataList[0].id
+    done(currentTreeData.value.id)
+  })
+}
+const handleTreeClick = (data: Tree, done: any) => {
+  currentTreeData.value = data
+  done()
+}
 </script>
 <template>
   <quick-crud
-    :tree-span="5"
-    :show-tree="true"
-    :tree-data="treeDataList"
-    :table-data="dataList"
-    :table-columns="columns"
-    :form-model="form"
+    :dialog-title="dialogTitle"
+    :form-model="formModel"
     :form-items="formItems"
-    :form-title="formTitle"
+    :table-data="dataList"
+    :table-columns="tableColumns"
+    :table-actionbar="tableActionbar"
+    :table-toolbar="tableToolbar"
+    dialog-titles="dialogTitles"
+    :left-tree="leftTree"
+    @on-load="load"
     @on-tree-load="treeLoad"
     @on-tree-click="handleTreeClick"
-    @on-load="load"
-    @on-add="handleAdd"
-    @on-edit="handleEdit"
+    @on-form-submit="handleFormSubmit"
     @on-delete="handleDelete"
-    @on-form-submit="handleOk"
-    @on-form-cancel="handleCancel"
   ></quick-crud>
 </template>
-<style lang="scss" scoped>
-@import './index.scss';
-</style>
diff --git a/src/views/dictionaryType/index.scss b/src/views/dictionaryType/index.scss
deleted file mode 100644
index 5ed1aa9c874ff08a3936444f0b1eb4fc1ed012e8..0000000000000000000000000000000000000000
--- a/src/views/dictionaryType/index.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.action {
-    margin-bottom: 10px;
-  }
-  .demo-pagination-block + .demo-pagination-block {
-    margin-top: 10px;
-  }
-  .demo-pagination-block .demonstration {
-    margin-bottom: 16px;
-  }
-  .el-pagination {
-    margin-top: 10px;
-  }
\ No newline at end of file
diff --git a/src/views/dictionaryType/index.ts b/src/views/dictionaryType/index.ts
deleted file mode 100644
index ebf9ee58f779bd84bbeb511b5a6c4b575abded13..0000000000000000000000000000000000000000
--- a/src/views/dictionaryType/index.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-import { reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { Column } from '../../types/table'
-import { FormItem, FormTitle } from '../../types/form'
-import { DictionaryType } from '../../types/dictionaryType'
-import {
-  addDictionaryType,
-  updateDictionaryType,
-  removeDictionaryType,
-  getDictionaryTypeList,
-} from '../../api/dictionaryType'
-/**
- * 属性
- */
-export const dataList: DictionaryType[] = reactive([])
-export const form: DictionaryType = reactive({
-  id: '',
-  dicTypeId: '',
-  name: '',
-})
-export const formTitle: FormTitle = reactive({
-  add: '创建字典分类',
-  edit: '修改字典分类',
-  detail: '字典分类详情',
-})
-export const formItems: FormItem[] = reactive([
-  {
-    label: '分类编号',
-    labelWidth: '80px',
-    vModel: 'dicTypeId',
-    placeholder: '分类编号',
-    editReadonly: true,
-  },
-  {
-    label: '分类名称',
-    labelWidth: '80px',
-    vModel: 'name',
-    placeholder: '分类名称',
-  },
-])
-export const columns: Column[] = reactive([
-  {
-    width: '50',
-    type: 'selection',
-  },
-  {
-    label: '分类编号',
-    prop: 'dicTypeId',
-    width: '200',
-  },
-  {
-    label: '字典分类',
-    prop: 'name',
-  },
-])
-/**
- * 函数
- */
-export const load = () => {
-  getDictionaryTypeList().then((res) => {
-    const { data: dictionaryTypeList } = res
-    dataList.length = 0
-    dataList.push(...dictionaryTypeList)
-  })
-}
-export const handleAdd = () => {
-  form.dicTypeId = ''
-  form.id = ''
-  form.name = ''
-}
-export const handleEdit = (item: DictionaryType) => {
-  form.dicTypeId = item.dicTypeId
-  form.id = item.id
-  form.name = item.name
-}
-
-export const handleDelete = (item: DictionaryType, done: any) => {
-  ElMessageBox.confirm(`你真的删除【${item.name}】的字典分类吗？`, '警告', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  }).then(() => {
-    removeDictionaryType(item.id).then(() => {
-      ElMessage({
-        type: 'success',
-        message: '字典分类删除成功',
-      })
-      done()
-    })
-  })
-}
-export const handleCancel = () => {
-  console.log('handleCancel')
-}
-export const handleOk = (item: DictionaryType, done: any) => {
-  if (item.id) {
-    updateDictionaryType(item).then(() => {
-      ElMessage({
-        type: 'success',
-        message: '字典分类修改成功',
-      })
-      done()
-    })
-  } else {
-    addDictionaryType(item).then(() => {
-      ElMessage({
-        type: 'success',
-        message: '字典分类创建成功',
-      })
-      done()
-    })
-  }
-}
diff --git a/src/views/dictionaryType/index.vue b/src/views/dictionaryType/index.vue
index fa2859671119875e0970061812e2a8b3a48afee5..cc4e24874bfe9efbeb32b88b7873bde8c1912712 100644
--- a/src/views/dictionaryType/index.vue
+++ b/src/views/dictionaryType/index.vue
@@ -1,34 +1,151 @@
-<script setup lang="ts">
-import QuickCrud from '../../components/QuickCrud/index.vue'
+<script lang="ts" setup>
+import { reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import QuickCrud from '@/components/QuickCrud/index.vue'
+import { Column, Actionbar, Toolbar } from '@/types/table'
+import { DictionaryType } from '@/types/dictionaryType'
+import { FormItem } from '@/types/form'
 import {
-  dataList,
-  columns,
-  formItems,
-  formTitle,
-  form,
-  load,
-  handleAdd,
-  handleEdit,
-  handleDelete,
-  handleOk,
-  handleCancel,
-} from './index'
+  getDictionaryTypeList,
+  addDictionaryType,
+  updateDictionaryType,
+  deleteDictionaryType,
+} from '@/api/dictionaryType'
+
+const dataList = reactive<Array<DictionaryType>>([])
+/**
+ * 表单
+ */
+const dialogTitle = reactive({
+  add: '创建字典分类',
+  edit: '修改字典分类',
+  detail: '字典分类详情',
+})
+const formModel = reactive<DictionaryType>({
+  id: '',
+  dicTypeId: '',
+  name: '',
+})
+const formItems = reactive<Array<FormItem>>([
+  {
+    label: '分类编号',
+    labelWidth: '80px',
+    vModel: 'dicTypeId',
+    placeholder: '分类编号',
+    editReadonly: true,
+    prop: 'dicTypeId',
+    rules: [
+      {
+        required: true,
+        message: '分类编号不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '分类名称',
+    labelWidth: '80px',
+    vModel: 'name',
+    placeholder: '分类名称',
+    prop: 'name',
+    rules: [
+      {
+        required: true,
+        message: '分类名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+])
+const handleFormSubmit = (form: DictionaryType, done: any) => {
+  console.log('handleFormSubmit', form)
+  if (form.id) {
+    updateDictionaryType(form).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '用户修改成功',
+      })
+      done()
+    })
+  } else {
+    addDictionaryType(form).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '用户创建成功',
+      })
+      done()
+    })
+  }
+}
+/**
+ * 工具栏
+ */
+const tableToolbar = reactive<Toolbar>({
+  hiddenBatchDeleteButton: true,
+  hiddenImportButton: true,
+  hiddenExportButton: true,
+  hiddenPrintButton: true,
+})
+/**
+ * 表格
+ */
+const tableColumns = reactive<Array<Column>>([
+  {
+    width: '50',
+    type: 'selection',
+  },
+  {
+    label: '分类编号',
+    prop: 'dicTypeId',
+    width: '200',
+  },
+  {
+    label: '字典分类',
+    prop: 'name',
+  },
+])
+const handleDelete = (item: DictionaryType, done: any) => {
+  ElMessageBox.confirm(`你真的删除【${item.name}】的字典分类吗？`, '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    deleteDictionaryType(item.id).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '字典分类删除成功',
+      })
+      done()
+    })
+  })
+}
+const tableActionbar = reactive<Actionbar>({
+  width: 100,
+  hiddenDetailButton: true,
+})
+/**
+ * 加载数据
+ */
+const load = (parmas: object) => {
+  getDictionaryTypeList().then((res) => {
+    const { data: dictionaryTypeList } = res
+    dataList.length = 0
+    dataList.push(...dictionaryTypeList)
+  })
+}
 </script>
 <template>
   <quick-crud
-    :table-data="dataList"
-    :table-columns="columns"
-    :form-model="form"
+    :dialog-title="dialogTitle"
+    :form-model="formModel"
     :form-items="formItems"
-    :form-title="formTitle"
+    :table-data="dataList"
+    :table-columns="tableColumns"
+    :table-actionbar="tableActionbar"
+    :table-toolbar="tableToolbar"
+    dialog-titles="dialogTitles"
     @on-load="load"
-    @on-add="handleAdd"
-    @on-edit="handleEdit"
+    @on-form-submit="handleFormSubmit"
     @on-delete="handleDelete"
-    @on-form-submit="handleOk"
-    @on-form-cancel="handleCancel"
   ></quick-crud>
 </template>
-<style lang="scss" scoped>
-@import './index.scss';
-</style>
diff --git a/src/views/personalInfo/index.vue b/src/views/personalInfo/index.vue
index cc9edb492faab9681e9693352347027b08e0bc16..fbe48eecde7a36a84c03560f85d44ff77752d304 100644
--- a/src/views/personalInfo/index.vue
+++ b/src/views/personalInfo/index.vue
@@ -19,6 +19,7 @@ onMounted(() => {
     <quick-form
       :model="form"
       :form-items="formItems"
+      :show-action="true"
       @submit="handleSubmit"
       @clear="handleClear"
     >
diff --git a/src/views/user/index.scss b/src/views/user/index.scss
deleted file mode 100644
index 5ed1aa9c874ff08a3936444f0b1eb4fc1ed012e8..0000000000000000000000000000000000000000
--- a/src/views/user/index.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.action {
-    margin-bottom: 10px;
-  }
-  .demo-pagination-block + .demo-pagination-block {
-    margin-top: 10px;
-  }
-  .demo-pagination-block .demonstration {
-    margin-bottom: 16px;
-  }
-  .el-pagination {
-    margin-top: 10px;
-  }
\ No newline at end of file
diff --git a/src/views/user/index.ts b/src/views/user/index.ts
deleted file mode 100644
index 32b5c07fa8f99a1f7d549e75a084fce10138bebd..0000000000000000000000000000000000000000
--- a/src/views/user/index.ts
+++ /dev/null
@@ -1,266 +0,0 @@
-import { reactive, ref } from 'vue'
-import { ElMessage, ElMessageBox, FormInstance } from 'element-plus'
-import { Column } from '../../types/table'
-import { FormItem, FormTitle } from '../../types/form'
-import { Page } from '../../types/page'
-import { SearchUser, User } from '../../types/user'
-import { useUserStore } from '../../store/modules/user'
-import { addUser, updateUser, deleteUser } from '../../api/user'
-/**
- * 表单验证
- */
-const validateUserName = (rule: any, value: string, callback: any) => {
-  const reg = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/
-  if (!reg.test(value)) {
-    callback(new Error('非法用户名'))
-  }
-}
-const validateFullName = (rule: any, value: string, callback: any) => {
-  const reg = /^[\u4e00-\u9fa5]{2,4}$/
-  if (!reg.test(value)) {
-    callback(new Error('非法姓名'))
-  }
-}
-const validatePhone = (rule: any, value: string, callback: any) => {
-  const reg =
-    /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
-  if (!reg.test(value)) {
-    callback(new Error('非法手机号'))
-  }
-}
-const validateEmail = (rule: any, value: string, callback: any) => {
-  const reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
-  if (!reg.test(value)) {
-    callback(new Error('非法邮箱'))
-  }
-}
-
-/**
- * 属性
- */
-const userStore = useUserStore()
-export const dataList = reactive<Array<User>>([])
-export const searchForm = reactive<SearchUser>({
-  userName: '',
-})
-export const form = reactive<User>({
-  id: '',
-  userId: '',
-  userName: '',
-  password: '',
-  createTime: '',
-})
-export const page = reactive<Page>({
-  current: 1,
-  size: 10,
-  total: 0,
-  sizes: [10, 20, 30, 40],
-})
-export const formTitle = reactive<FormTitle>({
-  add: '创建用户',
-  edit: '修改用户',
-  detail: '用户详情',
-})
-export const searchFormItems = reactive<Array<FormItem>>([
-  {
-    label: '用户名',
-    vModel: 'userName',
-    placeholder: '用户名',
-  },
-])
-export const formItems = reactive<Array<FormItem>>([
-  {
-    label: '用户编号',
-    labelWidth: '80px',
-    vModel: 'userId',
-    editReadonly: true,
-    placeholder: '用户编号',
-    prop: 'userId',
-    rules: [
-      {
-        required: true,
-        message: '用户编号不能为空',
-        trigger: 'blur',
-      },
-    ],
-  },
-  {
-    label: '用户名',
-    labelWidth: '80px',
-    vModel: 'userName',
-    placeholder: '用户名',
-    prop: 'userName',
-    rules: [
-      {
-        required: true,
-        message: '用户名不能为空',
-        trigger: 'blur',
-        // validate: validateUserName,
-      },
-    ],
-  },
-  {
-    label: '姓名',
-    labelWidth: '80px',
-    vModel: 'fullName',
-    placeholder: '姓名',
-    // rules: [{ validator: validateFullName, trigger: 'blur' }],
-  },
-  {
-    label: '手机号',
-    labelWidth: '80px',
-    vModel: 'phone',
-    placeholder: '手机号',
-    // rules: [{ validator: validatePhone, trigger: 'blur' }],
-  },
-  {
-    label: '邮箱',
-    labelWidth: '80px',
-    vModel: 'email',
-    placeholder: '邮箱',
-    // rules: [{ validator: validateEmail, trigger: 'blur' }],
-  },
-  {
-    label: '地址',
-    labelWidth: '80px',
-    vModel: 'address',
-    placeholder: '地址',
-  },
-  {
-    label: '备注',
-    labelWidth: '80px',
-    vModel: 'remark',
-    placeholder: '备注',
-    type: 'textarea',
-  },
-])
-export const columns = reactive<Array<Column>>([
-  {
-    width: '100',
-    type: 'selection',
-    align: 'center',
-  },
-  {
-    label: '用户编号',
-    prop: 'userId',
-    width: '100',
-  },
-  {
-    label: '用户名',
-    prop: 'userName',
-    width: '100',
-  },
-  {
-    label: '姓名',
-    prop: 'fullName',
-    width: '100',
-  },
-  {
-    label: '手机号',
-    prop: 'phone',
-    width: '180',
-  },
-  {
-    label: '邮箱',
-    prop: 'email',
-    width: '200',
-  },
-  {
-    label: '创建时间',
-    prop: 'createTime',
-    width: '200',
-  },
-  {
-    label: '地址',
-    prop: 'address',
-    width: '200',
-  },
-  {
-    label: '备注',
-    prop: 'remark',
-  },
-])
-/**
- * 函数
- */
-export const load = (parmas: object) => {
-  userStore.getUserPageList(parmas).then((res) => {
-    const { page: pagination } = res
-    const { userList } = userStore.$state
-    if (userList) {
-      dataList.length = 0
-      dataList.push(...userList)
-    }
-    if (pagination) {
-      page.total = pagination.total
-    }
-  })
-}
-export const handleSearch = () => {
-  console.log('handleSearch!')
-}
-export const handleClear = () => {
-  console.log('handleClear!')
-}
-export const handleAdd = () => {
-  Object.keys(form).forEach((key) => {
-    form[key] = ''
-  })
-}
-export const handleEdit = (item: User) => {
-  Object.keys(item).forEach((key) => {
-    form[key] = item[key]
-  })
-}
-
-export const handleDelete = (item: User, done: any) => {
-  ElMessageBox.confirm(`你真的删除【${item.userName}】的用户吗？`, '警告', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  }).then(() => {
-    deleteUser(item.id).then(() => {
-      ElMessage({
-        type: 'success',
-        message: '用户删除成功',
-      })
-      done()
-    })
-  })
-}
-export const handleCancel = () => {
-  console.log('handleCancel')
-}
-export const handleOk = (formRef: FormInstance, item: User, done: any) => {
-  if (!formRef) return
-  formRef.validate((valid) => {
-    if (!valid) {
-      console.log('error submit!')
-      return false
-    }
-    console.log('submit!')
-    if (item.id) {
-      updateUser(item).then(() => {
-        ElMessage({
-          type: 'success',
-          message: '用户修改成功',
-        })
-        done()
-      })
-    } else {
-      addUser(item).then(() => {
-        ElMessage({
-          type: 'success',
-          message: '用户创建成功',
-        })
-        done()
-      })
-    }
-  })
-}
-export const handleSizeChange = (val: number) => {
-  console.log(`${val} items per page`)
-}
-export const handleCurrentChange = (val: number) => {
-  console.log(`current page: ${val}`)
-}
diff --git a/src/views/user/index.vue b/src/views/user/index.vue
index e9d2148fdfd776a51d25725763d6d91ea070793a..efa8bac8417651c9021e8f64b6bc88ec0c811bba 100644
--- a/src/views/user/index.vue
+++ b/src/views/user/index.vue
@@ -1,50 +1,433 @@
-<script setup lang="ts">
-import QuickCrud from '../../components/QuickCrud/index.vue'
+<script lang="ts" setup>
+import { reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import QuickCrud from '@/components/QuickCrud/index.vue'
+import { Column, Actionbar, Toolbar } from '@/types/table'
+import { User, SearchUser } from '@/types/user'
+import { FormItem } from '@/types/form'
+import { Page } from '@/types/page'
+import { useUserStore } from '@/store/modules/user'
 import {
-  dataList,
-  columns,
-  formItems,
-  searchFormItems,
-  formTitle,
-  page,
-  searchForm,
-  form,
-  load,
-  handleAdd,
-  handleEdit,
-  handleDelete,
-  handleSearch,
-  handleClear,
-  handleOk,
-  handleCancel,
-  handleSizeChange,
-  handleCurrentChange,
-} from './index'
+  addUser,
+  updateUser,
+  deleteUser,
+  batchDeleteUser,
+  resetUserPassword,
+  enableUser,
+  disableUser,
+} from '@/api/user'
+
+const userStore = useUserStore()
+const dataList = reactive<Array<User>>([])
+/**
+ * 表单
+ */
+const dialogTitle = reactive({
+  add: '添加用户',
+  edit: '编辑用户',
+  detail: '用户详情',
+})
+const validateUserId = (rule: any, value: string, callback: any) => {
+  const reg = /^YH_\d+$/
+  if (!reg.test(value)) {
+    callback(new Error('用户编号必须是以YH_开头和数字组合'))
+  } else {
+    callback()
+  }
+}
+const validateUserName = (rule: any, value: string, callback: any) => {
+  const reg = /^[a-zA-Z0-9]{4,16}$/
+  if (!reg.test(value)) {
+    callback(new Error('用户必须是4-16位的字母、数字'))
+  } else {
+    callback()
+  }
+}
+const validateFullName = (rule: any, value: string, callback: any) => {
+  const reg = /^[\u4e00-\u9fa5]{2,4}$/
+  if (!value) {
+    callback()
+  } else if (!reg.test(value)) {
+    callback(new Error('非法姓名'))
+  } else {
+    callback()
+  }
+}
+const validatePhone = (rule: any, value: string, callback: any) => {
+  const reg =
+    /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
+  if (!value) {
+    callback()
+  } else if (!reg.test(value)) {
+    callback(new Error('非法手机号'))
+  } else {
+    callback()
+  }
+}
+const validateEmail = (rule: any, value: string, callback: any) => {
+  const reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
+  if (!value) {
+    callback()
+  } else if (!reg.test(value)) {
+    callback(new Error('非法邮箱'))
+  } else {
+    callback()
+  }
+}
+const formModel = reactive<User>({
+  id: '',
+  userId: '',
+  userName: '',
+  password: '',
+  createTime: '',
+  remark: '',
+})
+const formItems = reactive<Array<FormItem>>([
+  {
+    label: '用户编号',
+    labelWidth: '80px',
+    vModel: 'userId',
+    editReadonly: true,
+    placeholder: '用户编号',
+    prop: 'userId',
+    rules: [
+      {
+        required: true,
+        message: '用户编号不能为空',
+        trigger: 'blur',
+      },
+      {
+        validator: validateUserId,
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '用户名',
+    labelWidth: '80px',
+    vModel: 'userName',
+    placeholder: '用户名',
+    prop: 'userName',
+    rules: [
+      {
+        required: true,
+        message: '用户名不能为空',
+        trigger: 'blur',
+      },
+      {
+        validator: validateUserName,
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '姓名',
+    labelWidth: '80px',
+    vModel: 'fullName',
+    placeholder: '姓名',
+    prop: 'fullName',
+    rules: [
+      {
+        validator: validateFullName,
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '手机号',
+    labelWidth: '80px',
+    vModel: 'phone',
+    placeholder: '手机号',
+    prop: 'phone',
+    rules: [
+      {
+        validator: validatePhone,
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '邮箱',
+    labelWidth: '80px',
+    vModel: 'email',
+    placeholder: '邮箱',
+    prop: 'email',
+    rules: [
+      {
+        validator: validateEmail,
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '地址',
+    labelWidth: '80px',
+    vModel: 'address',
+    placeholder: '地址',
+  },
+  {
+    label: '备注',
+    labelWidth: '80px',
+    vModel: 'remark',
+    placeholder: '备注',
+    type: 'textarea',
+  },
+])
+const handleFormSubmit = (form: User, done: any) => {
+  console.log('handleFormSubmit', form)
+  if (form.id) {
+    updateUser(form).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '用户修改成功',
+      })
+      done()
+    })
+  } else {
+    addUser(form).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '用户创建成功',
+      })
+      done()
+    })
+  }
+}
+/**
+ * 搜索
+ */
+const searchForm = reactive<SearchUser>({
+  userName: '',
+})
+const searchFormItems = reactive<Array<FormItem>>([
+  {
+    label: '用户名',
+    vModel: 'userName',
+    placeholder: '用户名',
+  },
+])
+/**
+ * 工具栏
+ */
+const tableToolbar = reactive<Toolbar>({
+  hiddenBatchDeleteButton: false,
+})
+const handleBatchDelete = (data: any, done: any) => {
+  const { checkDataList, ids } = data
+  ElMessageBox.confirm(`你真的删除选择的用户吗？`, '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    batchDeleteUser(ids).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '用户删除成功',
+      })
+      done()
+    })
+  })
+}
+const handleImport = (done: any) => {
+  done()
+}
+const handleExport = () => {
+  // window.open(`${window.location.origin}/用户报表.xlsx`)//TODO:导出bug
+}
+const handlePrint = () => {
+  window.print()
+}
+/**
+ * 表格
+ */
+const tableColumns = reactive<Array<Column>>([
+  {
+    width: '100',
+    type: 'selection',
+    align: 'center',
+  },
+  {
+    label: '用户编号',
+    prop: 'userId',
+    width: '100',
+  },
+  {
+    label: '用户名',
+    prop: 'userName',
+    width: '100',
+  },
+  {
+    label: '姓名',
+    prop: 'fullName',
+    width: '100',
+  },
+  {
+    label: '手机号',
+    prop: 'phone',
+    width: '180',
+  },
+  {
+    label: '邮箱',
+    prop: 'email',
+    width: '200',
+  },
+  {
+    label: '是否启用',
+    prop: 'enabled',
+    width: '200',
+    format: (row: User) => {
+      return row.enabled === 1 ? '禁用' : '启用'
+    },
+  },
+  {
+    label: '创建时间',
+    prop: 'createTime',
+    width: '200',
+  },
+  {
+    label: '地址',
+    prop: 'address',
+    width: '200',
+  },
+  {
+    label: '备注',
+    prop: 'remark',
+  },
+])
+const handleDelete = (item: User, done: any) => {
+  ElMessageBox.confirm(`你真的删除【${item.userName}】的用户吗？`, '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    deleteUser(item.id).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '用户删除成功',
+      })
+      done()
+    })
+  })
+}
+const handleResetPassword = (item: User, done: any) => {
+  ElMessageBox.confirm(`你真的重置【${item.userName}】用户的密码吗？`, '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    resetUserPassword(item.id).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '置用户密码重成功',
+      })
+      done()
+    })
+  })
+}
+const handleEnable = (item: User, done: any) => {
+  ElMessageBox.confirm(`你真的启用【${item.userName}】的用户吗？`, '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    enableUser(item.id).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '用户启用成功',
+      })
+      done()
+    })
+  })
+}
+const handleDisable = (item: User, done: any) => {
+  ElMessageBox.confirm(`你真的禁用【${item.userName}】的用户吗？`, '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    disableUser(item.id).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '用户禁用成功',
+      })
+      done()
+    })
+  })
+}
+const tableActionbar = reactive<Actionbar>({
+  width: 300,
+  btns: [
+    {
+      name: '重置密码',
+      click(item: any, done: any) {
+        handleResetPassword(item, done)
+      },
+    },
+    {
+      name: '启用',
+      click(item: any, done: any) {
+        handleEnable(item, done)
+      },
+      render(row: any) {
+        return row.enabled === 1
+      },
+    },
+    {
+      name: '禁用',
+      click(item: any, done: any) {
+        handleDisable(item, done)
+      },
+      render(row: any) {
+        return row.enabled !== 1
+      },
+    },
+  ],
+})
+/**
+ * 分页
+ */
+const page = reactive<Page>({
+  current: 1,
+  size: 10,
+  sizes: [10, 20, 30, 40, 50],
+  total: 100,
+})
+/**
+ * 加载数据
+ */
+const load = (parmas: object) => {
+  userStore.getUserPageList(parmas).then((res: any) => {
+    const { page: pagination } = res
+    const { userList } = userStore.$state
+    if (userList) {
+      dataList.length = 0
+      dataList.push(...userList)
+    }
+    if (pagination) {
+      page.total = pagination.total
+    }
+  })
+}
 </script>
 <template>
   <quick-crud
-    :table-data="dataList"
-    :table-columns="columns"
-    :form-model="form"
+    :dialog-title="dialogTitle"
+    :form-model="formModel"
     :form-items="formItems"
-    :search-form-model="searchForm"
+    :table-data="dataList"
+    :table-columns="tableColumns"
+    :table-actionbar="tableActionbar"
+    :table-toolbar="tableToolbar"
     :search-form-items="searchFormItems"
-    :form-title="formTitle"
-    :show-search="true"
-    :show-page="true"
+    :search-form-model="searchForm"
+    dialog-titles="dialogTitles"
     :page="page"
     @on-load="load"
-    @on-add="handleAdd"
-    @on-edit="handleEdit"
+    @on-form-submit="handleFormSubmit"
     @on-delete="handleDelete"
-    @on-search-form-submit="handleSearch"
-    @on-search-form-clear="handleClear"
-    @on-form-submit="handleOk"
-    @on-form-cancel="handleCancel"
-    @on-size-change="handleSizeChange"
-    @on-current-change="handleCurrentChange"
+    @on-batch-delete="handleBatchDelete"
+    @on-import="handleImport"
+    @on-export="handleExport"
+    @on-print="handlePrint"
   ></quick-crud>
 </template>
-<style lang="scss" scoped>
-@import './index.scss';
-</style>