diff --git a/package.json b/package.json
index 0262dfc..071fe68 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "element-plus": "^2.3.5",
     "jsencrypt": "^3.3.2",
     "jsplumb": "^2.15.6",
+    "lodash.clonedeep": "^4.5.0",
     "mitt": "^3.0.0",
     "pinia": "^2.1.3",
     "sass": "^1.62.1",
diff --git a/public.zip b/public.zip
deleted file mode 100644
index 5086de3..0000000
Binary files a/public.zip and /dev/null differ
diff --git a/src/assets/images/sort-icon.png b/src/assets/images/sort-icon.png
new file mode 100644
index 0000000..78e7f4a
Binary files /dev/null and b/src/assets/images/sort-icon.png differ
diff --git a/src/components/FormDialog/FormDialog.vue b/src/components/FormDialog/FormDialog.vue
new file mode 100644
index 0000000..8bdc1f1
--- /dev/null
+++ b/src/components/FormDialog/FormDialog.vue
@@ -0,0 +1,139 @@
+<template>
+  <el-dialog v-model="dialogVisible" :title="title" :width="width" :before-close="handleClose">
+    <template v-if="formType == 'slot'">
+      <slot></slot>
+    </template>
+    <template v-if="formType == 'json'">
+      <el-form ref="formRef" :model="form" :rules="formJosnRules" :label-width="formJosnLabelWidth"
+        :disabled="formJosnDisabled">
+        <el-row :gutter="20">
+          <template v-for="item in formJosnElement">
+            <el-col :span="item.cloSpan || 24">
+              <el-form-item :label="item.label" :prop="item.model">
+                <!-- input -->
+                <el-input v-if="item.type == 'input'" :disabled="Boolean(item.disabled)" v-model="form[item.model]"
+                  :placeholder="item.placeholder" />
+
+                <!-- number -->
+                <el-input-number v-if="item.type == 'number'" :disabled="Boolean(item.disabled)"
+                  v-model="form[item.model]" :placeholder="item.placeholder" />
+
+                <!-- select -->
+                <el-select v-if="item.type == 'select'" :disabled="Boolean(item.disabled)" v-model="form[item.model]"
+                  :placeholder="item.placeholder">
+                  <el-option v-for="optionItem in item.options" :key="optionItem.value" :label="optionItem.label"
+                    :value="optionItem.value" />
+                </el-select>
+
+                <!-- date  -->
+                <el-date-picker v-if="item.type == 'date'" :disabled="Boolean(item.disabled)" v-model="form[item.model]"
+                  :type="item.dateType || date" :value-format="item.format || 'YYYY-MM-DD'"
+                  :placeholder="item.placeholder" />
+
+                <!-- tree-select -->
+                <el-tree-select v-if="item.type == 'tree-select'" v-model="form[item.model]" :data="item.options"
+                  check-strictly :render-after-expand="false" :disabled="Boolean(item.disabled)" />
+
+              </el-form-item>
+            </el-col>
+          </template>
+        </el-row>
+      </el-form>
+    </template>
+    <template #footer>
+      <span class="dialog-footer" v-if="!formJosnDisabled">
+        <el-button @click="handleClose">取消</el-button>
+        <el-button type="primary" @click="handleSubmit">
+          确认
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, reactive, toRefs, onMounted, onBeforeMount, watch, watchEffect, computed, getCurrentInstance } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import cloneDeep from "lodash.clonedeep";
+
+const props = defineProps({
+  /**
+   * @type {String}
+   * @description 表单弹框类型 'slot' 默认为 slot  | 'json' （后台接口返回就配置 json）
+   */
+  formType: {
+    type: String,
+    default: 'slot'
+  },
+  title: {
+    type: String,
+    required: true,
+  },
+  width: {
+    type: String,
+    default: '30%'
+  },
+  /* 以下配置在 formType 为 json 时有效 */
+  // 表单校验规则
+  formJosnRules: {
+    type: Object,
+    default: () => {
+      return {}
+    }
+  },
+  // 表单 label 宽度
+  formJosnLabelWidth: {
+    type: String,
+    default: '120px'
+  },
+  // 表单元素
+  formJosnElement: {
+    type: Array,
+    default: () => []
+  },
+  formJosnDisabled: {
+    type: Boolean,
+    default: false
+  },
+  // 表单校验规则
+  modelValue: {}
+})
+const emit = defineEmits(['update:modelValue', 'handleSubmit'])
+
+
+const dialogVisible = ref(false)
+const formRef = ref()
+const form = ref({})
+
+// 取消
+const handleClose = () => {
+  emit('update:modelValue', false)
+}
+
+// 确认
+const handleSubmit = async () => {
+  if (props.formType == 'json ') {
+    await formRef.value.validate((valid, fields) => {
+      if (valid) {
+        emit('handleSubmit', form.value)
+      } else {
+        console.log('error submit!', fields)
+      }
+    })
+  } else {
+    emit('handleSubmit', form.value)
+  }
+}
+
+watch(() => props.modelValue, (newValue) => {
+  // console.log(newValue, 'newValue')
+  dialogVisible.value = props.modelValue
+  if (props.formType == 'json' && newValue) {
+    nextTick(() => {
+      ruleFormRef.value.clearValidate() // 清除表单校验信息
+      formData.value = cloneDeep(props.formJsonData) // 表单赋值
+    })
+  }
+})
+</script>
+<style lang='scss' scoped></style>
\ No newline at end of file
diff --git a/src/components/TableBody/TableBody.vue b/src/components/TableBody/TableBody.vue
new file mode 100644
index 0000000..7c3cd7b
--- /dev/null
+++ b/src/components/TableBody/TableBody.vue
@@ -0,0 +1,128 @@
+<template>
+  <div class="table-body">
+    <!-- 组件头部 -->
+    <TableHeader :tableHeader="tableHeader" :disabledIf="disabledIf" :singleDisabledIf="singleDisabledIf"
+      :tableList="tableList" @filter="filter" @handle="handleHeader" ref="TableHeaderRef" :selectData="selectData">
+      <!-- 添加左侧插槽 -->
+      <template v-slot:TableHeaderLeft>
+        <slot :selectData="selectData" name="TableHeaderLeft" />
+      </template>
+      <!-- 添加右侧插槽 -->
+      <template v-slot:TableHeaderRight>
+        <slot :selectData="selectData" name="TableHeaderRight" />
+      </template>
+    </TableHeader>
+    <!-- 组件表格主体 -->
+    <TableData :tableList="tableList" :tableData="tableData" :tableType="tableType" @changeDisabledIf="changeDisabledIf"
+      @changeSingleDisabledIf="changeSingleDisabledIf" @handleSortChange="handleSortChange" ref="TableDataRef">
+      <!-- 添加插槽 -->
+      <template v-slot:default="{ currentCol, currentData }">
+        <slot :currentCol="currentCol" :currentData="currentData" :name="currentCol.name" />
+      </template>
+    </TableData>
+    <!-- 组件分页 -->
+    <TablePagination :pagination="pagination" @handle="handlePagination" v-if="!tableType.isHiddenPagination" />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from "vue";
+import TableData from "./TableData.vue";
+import TableHeader from "./TableHeader.vue";
+import TablePagination from "./TablePagination.vue";
+
+const props = defineProps({
+  tableHeader: {
+    type: Array,
+    required: true,
+  },
+  tableType: {
+    type: Object,
+    required: true,
+  },
+  tableList: {
+    type: Array,
+    required: true,
+  },
+  tableData: {
+    type: Array,
+    required: true,
+  },
+  pagination: {
+    type: Object,
+  },
+});
+
+const emit = defineEmits(["handleTableHeader", "handleTablePagination", "handleTableSort"]);
+
+const TableHeaderRef = ref(); // TableHeaderRef 的 ref
+const TableDataRef = ref(); // TableData 的 ref
+
+// 控制按钮是否禁用
+const disabledIf = ref(true);
+const singleDisabledIf = ref(true);
+// 修改 disabledIf 方法
+const changeDisabledIf = (val) => {
+  disabledIf.value = val;
+};
+const changeSingleDisabledIf = (val) => {
+  singleDisabledIf.value = val;
+};
+
+// 表格筛选显示方法
+const filter = (checkList) => {
+  props.tableList.map((item) => {
+    if (checkList.indexOf(item.name) != -1) {
+      item.show = true;
+    } else {
+      item.show = false;
+    }
+  });
+};
+
+// 表格顶部事件
+const handleHeader = (type, data) => {
+  if (type === "search") return emit("handleTableHeader", { type, data });
+  if (type === "mixInput") return emit("handleTableHeader", { type, data });
+  if (type === "sort") return emit("handleTableHeader", { type, data });
+  emit("handleTableHeader", { type, data: TableDataRef.value.selectData });
+};
+
+// 表格分页
+const handlePagination = (current) => {
+  emit("handleTablePagination", current);
+};
+
+// 表格自定义筛选
+const handleSortChange = (column, prop, order) => {
+  emit("handleTableSort", column, prop, order)
+}
+
+// 选中的值
+const selectData = ref([]);
+onMounted(() => {
+  watch(
+    () => TableDataRef.value.selectData,
+    (newValue) => {
+      selectData.value = newValue;
+    },
+    { deep: true }
+  );
+});
+
+// 清空混合搜索值
+const clearMixInput = () => {
+  TableHeaderRef.value.clearMixInput()
+}
+// 清空搜索值
+const clearSearch = () => {
+  TableHeaderRef.value.clearSearch()
+}
+defineExpose({
+  clearMixInput,
+  clearSearch
+})
+</script>
+<style lang="scss">
+@import "./table-body.scss";
+</style>
diff --git a/src/components/TableBody/TableData.vue b/src/components/TableBody/TableData.vue
new file mode 100644
index 0000000..9911a68
--- /dev/null
+++ b/src/components/TableBody/TableData.vue
@@ -0,0 +1,123 @@
+<template>
+  <div class="table-data">
+    <el-table :data="tableData" ref="multipleTableRef" style="width: 100%" :height="tableHeight"
+      v-loading="tableType.tableLoading" :row-class-name="rowClass" :row-key="tableType.tableTree ? 'id' : undefined"
+      :tree-props="{ children: tableType.tableTreeName ? tableType.tableTreeName : 'children' }"
+      :header-cell-style="{ background: '#eef1f6', color: '#606266' }" @row-click="handleCurrentChange"
+      @selection-change="handleSelectionChange" @sort-change="handleSortChange"
+      :default-expand-all="tableType.isExpand ? tableType.isExpand : false" :border="false"
+      :class="{ 'is-border': true }">
+      <el-table-column type="index" width="80" align="center" label="序号" v-if="tableType.tableIndex" />
+      <el-table-column type="selection" width="55" v-if="tableType.selection" />
+      <template v-for="item in tableList">
+        <template v-if="item.show">
+          <el-table-column v-if="item.type === 'slot'" :width="item.width" :label="item.label" :sortable="item.sortable"
+            :sort-method="item.sortableMethod" :prop="item.name">
+            <template #default="scope">
+              <slot :currentCol="item" :currentData="scope.row[item.name]"></slot>
+            </template>
+          </el-table-column>
+          <el-table-column :prop="item.name" :label="item.label" :width="item.width" :sortable="item.sortable"
+            :sort-method="item.sortableMethod" v-else />
+        </template>
+      </template>
+    </el-table>
+  </div>
+</template>
+
+<script setup>
+import { ref, nextTick, watch, computed } from 'vue'
+import { ElTable } from 'element-plus'
+const props = defineProps({
+  tableList: {
+    type: Array,
+    default: () => []
+  },
+  tableType: {
+    type: Object,
+    default: () => { return {} }
+  },
+  tableData: {
+    type: Array,
+    default: () => []
+  },
+})
+
+const emit = defineEmits(['changeDisabledIf', 'changeSingleDisabledIf', 'handleSortChange'])
+
+// 表格 ref
+const multipleTableRef = ref()
+
+/* 表格高度 */
+const tableHeight = ref(0)
+const changeHeight = ref(220)
+nextTick(() => {
+  if (props.tableType.changeHeight) {
+    changeHeight.value = props.tableType.changeHeight
+  }
+  tableHeight.value = window.innerHeight - changeHeight.value
+
+  window.addEventListener("resize", () => {
+    tableHeight.value = window.innerHeight - changeHeight.value
+  })
+})
+
+/* 表格选择 */
+const selectData = ref([]) // 选中行的数据
+// 勾选数据行的 Checkbox 时触发的 rowClass
+const rowClass = computed(() => {
+  return ({ row }) => {
+    if (selectData.value.includes(row)) {
+      return 'slecleRowColor ';
+    }
+  }
+})
+// 当选择项发生变化时会触发该事件
+const handleSelectionChange = (rows) => {
+  selectData.value = rows
+}
+
+// 监听多选的选择状态、数据
+watch(selectData, (data) => {
+  emit('changeDisabledIf', !(data.length > 0))
+  emit('changeSingleDisabledIf', !(data.length == 1))
+}, { deep: true })
+
+// 单行点击触发
+const handleCurrentChange = (row) => {
+  if (props.tableType.selection) {
+    if (selectData.value.indexOf(row) > -1) {
+      selectData.value.splice(selectData.value.indexOf(row), 1)
+      multipleTableRef.value.toggleRowSelection(row, false)
+    } else {
+      selectData.value.push(row)
+      multipleTableRef.value.toggleRowSelection(row, true)
+    }
+  } else {
+    selectData.value[0] = row
+  }
+
+}
+
+// 表格单选时，当数据发生变化时清空 selectData 数据
+watch(() => props.tableData, () => {
+  if (!props.tableType.selection) {
+    selectData.value = []
+  }
+})
+
+// 表格排序
+const handleSortChange = ({ column, prop, order }) => {
+  emit('handleSortChange', column, prop, order)
+}
+
+defineExpose({
+  selectData
+})
+</script>
+<style lang='scss' scoped>
+// table 选中高亮
+.el-table :deep(.slecleRowColor) td {
+  background: #ecf5ff !important;
+}
+</style>
diff --git a/src/components/TableBody/TableHeader.vue b/src/components/TableBody/TableHeader.vue
new file mode 100644
index 0000000..71bddd9
--- /dev/null
+++ b/src/components/TableBody/TableHeader.vue
@@ -0,0 +1,207 @@
+<template>
+  <el-scrollbar>
+    <div class="table-header">
+      <div class="table-header-left">
+        <template v-for="(item, index) in tableHeader[0].buttons">
+          <el-button v-permission="tableHeader[2]?.create" type="primary" icon="Plus" v-if="item === 'create'"
+            @click="emit('handle', 'create')" :key="index">新增</el-button>
+          <el-button type="primary" icon="Edit" :disabled="singleDisabledIf" v-if="item === 'edit'"
+            v-permission="tableHeader[2]?.edit" @click="emit('handle', 'edit')" :key="index">编辑</el-button>
+          <span v-if="item === 'delete'" v-permission="tableHeader[2]?.delete">
+            <el-popconfirm title="是否删除?" v-if="item === 'delete'" @confirm="emit('handle', 'delete')" :key="index">
+              <template #reference>
+                <el-button type="primary" icon="Delete" :disabled="disabledIf">删除</el-button>
+              </template>
+            </el-popconfirm>
+          </span>
+          <template v-if="Object.prototype.toString.call(item) === '[object Object]'">
+            <el-button type="primary" :disabled="customDisabled(item)" :icon="item.icon" v-permission="item.permission"
+              @click="emit('handle', item.name)" v-if="item.type === 'custom'" :key="index">{{ item.title }}</el-button>
+            <span v-if="item.type === 'popconfirm'" v-permission="item.permission">
+              <el-popconfirm :title="`是否${item.title}`" @confirm="emit('handle', item.name)" :key="index">
+                <template #reference>
+                  <el-button type="primary" :icon="item.icon" :disabled="customDisabled(item)">{{ item.title
+                  }}</el-button>
+                </template>
+              </el-popconfirm>
+            </span>
+          </template>
+        </template>
+        <!-- 添加左侧插槽 -->
+        <slot name="TableHeaderLeft" />
+      </div>
+      <div class="table-header-right">
+        <template v-for="(item, index) in tableHeader[1].buttons">
+          <el-input class="search-input" v-model="searchInput" v-if="item === 'search'" placeholder="搜索"
+            @keyup.enter="handleSearch" clearable :key="index" @clear="handleSearch"
+            v-permission="tableHeader[2]?.search">
+            <template #append>
+              <el-button :icon="Search" @click="handleSearch" />
+            </template>
+          </el-input>
+          <el-button type="primary" icon="Filter" @click="emit('handle', 'advanced')" v-if="item === 'advanced'"
+            v-permission="tableHeader[2]?.advanced" :key="index">高级筛选</el-button>
+          <el-button type="primary" icon="Refresh" @click="emit('handle', 'refresh')" v-if="item === 'refresh'"
+            :key="index" v-permission="tableHeader[2]?.refresh" />
+          <span v-if="item === 'bulkDelete'" v-permission="tableHeader[2]?.bulkDelete">
+            <el-popconfirm title="是否删除?" v-if="item === 'bulkDelete'" @confirm="emit('handle', 'bulkDelete')"
+              :key="index">
+              <template #reference>
+                <el-button type="primary" icon="Delete" :disabled="disabledIf">批量删除</el-button>
+              </template>
+            </el-popconfirm>
+          </span>
+          <el-dropdown v-if="item === 'filter'" :key="index" v-permission="tableHeader[2]?.filter">
+            <el-button type="success" icon="Filter" />
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-checkbox-group class="ydool_filter" v-model="checkList">
+                  <el-checkbox v-for="item in tableList" :label="item.name">
+                    {{ item.label }}
+                  </el-checkbox>
+                </el-checkbox-group>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+          <template v-if="Object.prototype.toString.call(item) === '[object Object]'">
+            <el-input class="mix-input" v-model="seachMixInput" v-permission="item.permission"
+              v-if="item.name === 'mixInput'" clearable placeholder="输入搜索内容" @keyup.enter="handleMixSearch"
+              @clear="handleMixSearch">
+              <template #prepend>
+                <el-select v-model="seachMixSelect" placeholder="请选择" style="width: 110px" clearable>
+                  <el-option v-for="option, index in item.options" :label="option.label" :value="option.value"
+                    :key="index" />
+                </el-select>
+              </template>
+              <template #append>
+                <el-button :icon="Search" @click="handleMixSearch" />
+              </template>
+            </el-input>
+            <div class="table-header-right-sort" v-if="item.name === 'sort'" v-permission="item.permission">
+              <el-select v-model="sortSearch" class="thrs-search" clearable
+                @change="emit('handle', 'sort', { sortType: sortActive, 'name': sortSearch })">
+                <template #prefix>
+                  <img src="@/assets/images/sort-icon.png" alt="" class="thrs-img">
+                </template>
+                <el-option-group v-for="i in ['排序']" :key="i" :label="i">
+                  <el-option v-for="k in item.options" :key="k.value" :label="k.label" :value="k.value" />
+                </el-option-group>
+              </el-select>
+              <div class="arrow-filter" @click="changeOrderSearch">
+                <i class="arrow-top" :class="sortActive === 'asc' ? 'arrow-active' : ''"></i>
+                <i class="arrow-bottom" :class="sortActive === 'desc' ? 'arrow-active' : ''"></i>
+              </div>
+            </div>
+            <el-button type="primary" :disabled="customDisabled(item)" v-permission="item.permission" :icon="item.icon"
+              @click="emit('handle', item.name)" v-if="item.type === 'custom'" :key="index">{{ item.title }}</el-button>
+
+            <span v-if="item.type === 'popconfirm'" v-permission="item.permission">
+              <el-popconfirm :title="`是否${item.title}`" @confirm="emit('handle', item.name)" :key="index">
+                <template #reference>
+                  <el-button type="primary" :icon="item.icon" :disabled="customDisabled(item)">{{ item.title
+                  }}</el-button>
+                </template>
+              </el-popconfirm>
+            </span>
+          </template>
+        </template>
+        <!-- 添加右侧插槽 -->
+        <slot name="TableHeaderRight" />
+      </div>
+    </div>
+  </el-scrollbar>
+</template>
+
+<script setup>
+import { ref, watch, computed } from 'vue'
+import { Download, Plus, Coordinate, Delete, Printer, Notification, Search } from '@element-plus/icons-vue'
+const props = defineProps({
+  disabledIf: {
+    type: Boolean
+  },
+  singleDisabledIf: {
+    type: Boolean
+  },
+  tableList: {
+    type: Array,
+    default: () => []
+  },
+  tableHeader: Object,
+  selectData: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const emit = defineEmits(['filter', 'handle'])
+
+// 搜索
+const searchInput = ref('')
+// 搜索触发事件
+const handleSearch = () => {
+  emit('handle', 'search', searchInput)
+}
+// 清空搜索值
+const clearSearch = () => {
+  searchInput.value = ''
+}
+
+// 混合搜索
+const seachMixInput = ref('')
+const seachMixSelect = ref('')
+// 搜索触发事件
+const handleMixSearch = () => {
+  emit('handle', 'mixInput', { seachMixSelect, seachMixInput })
+}
+// 清空混合搜索值
+const clearMixInput = () => {
+  seachMixInput.value = ''
+  seachMixSelect.value = ''
+}
+// 表格筛选显示
+const checkList = ref()
+checkList.value = props.tableList.map(item => {
+  return item.name
+})
+
+// watch(() => props.tableList, () => {
+//   checkList.value = props.tableList.map(item => {
+//     return item.name
+//   })
+// }, { deep: true, immediate: true })
+
+watch(checkList, (newValue) => {
+  emit('filter', newValue)
+})
+
+// 自定义按钮的禁用
+const customDisabled = computed(() => {
+  return (item) => {
+    if (!item.isOpen) return false
+    if (item.isOpen) {
+      let obj = {
+        custom: () => item.disabled,
+        single: () => props.singleDisabledIf,
+        Arbitrary: () => props.disabledIf
+      }
+      if (item.isOpen === 'custom' && typeof item.disabled == 'function') {
+        return obj[item.isOpen]()(props.selectData)
+      }
+      return obj[item.isOpen]()
+    }
+  }
+})
+
+// 表格排序
+const sortSearch = ref('')
+const sortActive = ref('asc')
+const changeOrderSearch = () => {
+  if (sortActive.value === 'asc') { sortActive.value = 'desc' } else { sortActive.value = 'asc' }
+  emit('handle', 'sort', { sortType: sortActive.value, 'name': sortSearch.value })
+}
+
+defineExpose({
+  clearMixInput,
+  clearSearch
+})
+</script>
diff --git a/src/components/TableBody/TablePagination.vue b/src/components/TableBody/TablePagination.vue
new file mode 100644
index 0000000..c1e1809
--- /dev/null
+++ b/src/components/TableBody/TablePagination.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="table-pagination">
+    <el-pagination class="ydool_pagination" :page-size="pagination.pageSize" hide-on-single-page
+      layout="->,total, prev, pager, next, jumper" :total="pagination.total" @current-change="handle"
+      :background="background" small />
+  </div>
+</template>
+
+<script setup >
+import { ref, watch, computed } from 'vue'
+const props = defineProps({
+  pagination: {
+    type: Object,
+    required: true,
+  }
+})
+const background = ref(true)
+const emit = defineEmits(['handle'])
+
+const handle = (current) => {
+  emit('handle', current)
+}
+</script>
diff --git a/src/components/TableBody/example.vue b/src/components/TableBody/example.vue
new file mode 100644
index 0000000..e5760f6
--- /dev/null
+++ b/src/components/TableBody/example.vue
@@ -0,0 +1,323 @@
+<template><!-- 使用示例 -->
+  <div class="example">
+    <TableBody v-bind="data" @handleTableHeader="handleTableHeader" @handleTablePagination="handleTablePagination"
+      @handleTableSort="handleTableSort" ref="TableBodyRef">
+
+      <!-- 左侧顶部插槽 -->
+      <template #TableHeaderLeft="{ selectData }">
+        <el-button @click="handleSlot(selectData)">插槽</el-button>
+      </template>
+
+      <!-- 右侧顶部插槽 -->
+      <template #TableHeaderRight="{ selectData }">
+        <el-button @click="handleSlot(selectData)">插槽</el-button>
+      </template>
+
+      <!-- 表格插槽使用 -->
+      <template #slotName="{ currentCol, currentData }">
+        <span style="color: #729880">{{ currentData }}</span>
+      </template>
+    </TableBody>
+
+    <!-- 更多弹框 -->
+    <el-dialog v-model="moreConditionsIf" title="搜索更多">
+      <el-form :model="moreConditionsForm">
+        <el-form-item label="企业名称" :label-width="formLabelWidth">
+          <el-input v-model="moreConditionsForm.name" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="公司地址" :label-width="formLabelWidth">
+          <el-input v-model="moreConditionsForm.name" autocomplete="off" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="closeDialog">取消</el-button>
+          <el-button type="primary" @click="closeDialog">
+            搜索
+          </el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from "vue"
+import TableBody from '@/components/TableBody/TableBody.vue'
+
+const TableBodyRef = ref()
+const data = reactive({
+  /**
+   * @type {Object}
+   * @description 表格头部
+   */
+  tableHeader: [
+    {
+      buttons: ["create", "edit", 'delete', {
+        type: 'custom', //  // 自定义按钮（支持 custom 默认按钮、popconfirm 气泡确认 ）,
+        name: 'customButton', // 为 handleTableHeader 事件的第一个返回值，注意不能重复
+        title: '自定义', // 按钮名称
+        icon: 'Message', // 自定义左侧按钮 （ 目前只支持 element 的 icon  ）
+        // 以哪种方式禁用按钮，组件自带两种禁用方式 1.只有选择一条时开启按钮 'single'，2. 有选择任意条数时开启按钮 'Arbitrary '
+        // 3.自定义方法 'custom '，4.默认无条件开启，不设置即可
+        isOpen: 'custom',
+        // 设置 isOpen 为 custom 时设置生效（切必须填写该字段），Boolean | 变量 | function
+        // disabled: false,
+        disabled: (selectData) => {
+          console.log(selectData, 'selectData121341')
+          if (selectData[0]?.id === 3) {
+            return false
+          }
+          return true
+        },
+        permission: undefined // 按钮权限，不设置，或设置为 undefined、false 默认显示
+      }],
+
+    },
+    {
+      buttons: ["search", "advanced", "refresh", 'filter', 'bulkDelete',
+        {
+          name: 'mixInput', // 混合筛选
+          options: [{ label: 1, value: 1 }, { label: 1, value: 1 }],
+          // permission: false, // 权限
+        },
+        {
+          name: 'sort', // 排序
+          options: [{ label: '按企业名称', value: 1 }, { label: '按姓名', value: 2 }],
+          // permission: false, // 权限
+        },
+        {
+          type: 'custom', // 自定义按钮（支持 custom 默认按钮、popconfirm 气泡确认 ）,
+          name: 'customButton', // 为 handleTableHeader 事件的第一个返回值，注意不能重复
+          title: '自定义', // 按钮名称
+          icon: 'Message', // 自定义左侧按钮 （ 目前只支持 element 的 icon  ）
+          // 以哪种方式禁用按钮，组件自带两种禁用方式 1.只有选择一条时开启按钮 'single'，2. 有选择任意条数时开启按钮 'Arbitrary '
+          // 3.自定义方法 'custom '，4.默认无条件开启，不设置即可
+          isOpen: 'custom',
+          // 设置 isOpen 为 custom 时设置生效（切必须填写该字段），Boolean | 变量 | function
+          disabled: false,
+          // permission: false, // 权限
+        }]
+    },
+    // 基础操作按钮权限（没有配置 permission 的按钮或者其他搜索等）
+    // 不设置，或设置为 undefined、false 默认显示
+    {
+      create: undefined,
+      edit: false,
+      delete: false,
+      search: false,
+      advanced: false,
+      refresh: false,
+      bulkDelete: false,
+      filter: false,
+    }
+  ],
+  /**
+   * @type {Array}
+   * @description 表格参数
+   */
+  tableType: {
+    selection: false, // Boolean 是否多选
+    tableLoading: false, // Boolean 表格 loading
+    tableIndex: true, // Boolean 是否序号
+    tableTree: true, // Boolean 是否树形显示 （注意：开启后必须每项有不同的 id 字段，树形显示一般关闭多选）
+    tableTreeName: 'children', // String 开启树形显示后才成效，子节点字段名称 （默认值为：'children'）
+    isExpand: true, // Boolean 是否默认展开（默认为 false）
+    isHiddenPagination: false, // Boolean是否隐藏分页 （默认为 false）
+    changeHeight: false, // String / Number 表格高度（ 默认为 false，自动设置根据窗口设置高度）
+  },
+  /**
+   * @type {Array}
+   * @description 表格配置
+   */
+  tableList: [
+    {
+      type: 'slot', // 设置为 slot 即可使用插槽
+      name: 'slotName', // name 是作用域插槽的名字
+      label: '插槽',
+      show: true, // 是否显示
+      sortable: true, // 排序方式 Boolean | 'custom' (设置为 'custom' 可以选中后端排序，组件需要绑定 handleTableSort 事件)
+      // 排序方法，使用示例 （仅当 sortable 设置为 true 时生效）
+      sortableMethod: (a, b) => {
+        console.log(a.date);
+        // a 和 b 就是表格数据 (a 是第后一条，b 是前一条)
+        // 如果返回值小于 0 那么 a 排在前 b 在之前，等于 0 位置不变， 大于 0 那么 a 排在 b 之后
+        return new Date(a.date).getTime() - new Date(b.date).getTime()
+      },
+      width: 100,
+    },
+    {
+      name: 'date',
+      label: '时间',
+      show: true,
+      sortable: 'custom',
+    },
+    {
+      name: 'name',
+      label: '姓名',
+      show: true
+    },
+    {
+      name: 'state',
+      label: '状态',
+      show: true
+    },
+    {
+      name: 'city',
+      label: '城市',
+      show: true
+    },
+    {
+      name: 'address',
+      label: '地址',
+      show: true
+    },
+    {
+      name: 'zip',
+      label: '邮编',
+      show: true
+    }],
+
+  /**
+   * @type {Array}
+   * @description 表格数据(模拟数据)
+   */
+  tableData: [
+    {
+      id: 1,
+      date: '2016-05-01',
+      name: 'Tom',
+      state: 'California',
+      city: 'Los Angeles',
+      address: 'No. 189, Grove St, Los Angeles',
+      zip: 'CA 90036',
+      slotName: '插槽',
+      children: [
+        {
+          id: 2,
+          date: '2016-05-01',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          slotName: '插槽',
+        },
+        {
+          id: 3,
+          date: '2016-05-01',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          slotName: '插槽',
+        }
+      ]
+    },
+    {
+      id: 4,
+      date: '2016-05-02',
+      name: 'Tom',
+      state: 'California',
+      city: 'Los Angeles',
+      address: 'No. 189, Grove St, Los Angeles',
+      zip: 'CA 90036',
+      slotName: '插槽',
+    },
+    {
+      id: 5,
+      date: '2016-05-03',
+      name: 'Tom',
+      state: 'California',
+      city: 'Los Angeles',
+      address: 'No. 189, Grove St, Los Angeles',
+      zip: 'CA 90036',
+      slotName: '插槽',
+    },
+    {
+      id: 6,
+      date: '2016-05-04',
+      name: 'Tom',
+      state: 'California',
+      city: 'Los Angeles',
+      address: 'No. 189, Grove St, Los Angeles',
+      zip: 'CA 90036',
+      slotName: '插槽',
+    },
+    {
+      id: 7,
+      date: '2016-05-05',
+      name: 'Tom',
+      state: 'California',
+      city: 'Los Angeles',
+      address: 'No. 189, Grove St, Los Angeles',
+      zip: 'CA 90036',
+      slotName: '插槽',
+    }
+  ],
+  /**
+   * @type {Object}
+   * @description 分页数据
+   */
+  pagination: {
+    pageSize: 10,
+    current: 1,
+    total: 0
+  }
+})
+// 表格头部处理事件
+const handleTableHeader = ({ type, data }) => {
+  console.log(type, data)
+  switch (type) {
+    case "create":
+      console.log(type, data)
+      break;
+    case "edit":
+      console.log(type, data)
+      break;
+    case "advanced":
+      opneDialog()
+      break;
+  }
+}
+// 表格分页事件
+const handleTablePagination = (current) => {
+  console.log(current)
+}
+
+// 表格自定义排序事件
+const handleTableSort = (column, prop, order) => {
+  console.log(column, prop, order)
+}
+
+// 插槽事件
+const handleSlot = (val) => {
+  console.log(val)
+}
+
+/* 更多弹框 */
+const formLabelWidth = ref(120)
+const moreConditionsForm = ref({
+  name: ''
+})
+
+const moreConditionsIf = ref(false)
+// 关闭弹框
+const closeDialog = () => {
+  moreConditionsIf.value = false
+}
+// 打开弹框
+const opneDialog = () => {
+  moreConditionsIf.value = true
+}
+
+// 清空混合搜索
+// TableBodyRef.value.clearMixInput()
+
+// 清空搜索
+// TableBodyRef.value.clearSearch()
+
+</script>
+<style lang='scss' scoped></style>
+
diff --git a/src/components/TableBody/table-body.scss b/src/components/TableBody/table-body.scss
new file mode 100644
index 0000000..e1b77c1
--- /dev/null
+++ b/src/components/TableBody/table-body.scss
@@ -0,0 +1,113 @@
+.table-header {
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .table-header-left {
+    display: flex;
+    align-items: center;
+    > * {
+      margin-right: 12px;
+    }
+
+    > .el-button {
+      padding: 8px 10px;
+      margin-left: 0;
+    }
+  }
+
+  .table-header-right {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    > * {
+      margin-left: 12px;
+    }
+
+    > .el-button {
+      padding: 8px 10px;
+    }
+    .search-input {
+      flex-basis: 220px;
+      min-width: 150px;
+    }
+    .mix-input {
+      flex-basis: 320px;
+      min-width: 280px;
+    }
+    .table-header-right-sort {
+      flex-basis: 180px;
+      display: flex;
+      align-items: center;
+      background-color: #fff;
+      border-radius: 5px;
+      box-sizing: border-box;
+      border: 1px solid #dcdfe6;
+      .thrs-img {
+        width: 16px;
+        height: 16px;
+      }
+      .thrs-search {
+        margin-right: 0 !important;
+        width: 160px !important;
+
+        .select-trigger .el-input .el-input__wrapper {
+          box-shadow: none !important;
+
+          // .el-input__suffix {
+          //   display: none;
+          // }
+        }
+      }
+      .arrow-filter {
+        width: 16px !important;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+        width: 10px;
+        height: 24px;
+        cursor: pointer;
+
+        .arrow-top {
+          cursor: pointer;
+          border: 5px solid transparent;
+          border-bottom: 5px solid #bfbfbf;
+
+          &.arrow-active {
+            border-bottom-color: #729880;
+          }
+        }
+
+        .arrow-bottom {
+          border: 5px solid transparent;
+          border-top: 5px solid #bfbfbf;
+
+          &.arrow-active {
+            border-top-color: #729880;
+          }
+        }
+      }
+    }
+  }
+}
+
+.ydool_filter {
+  padding: 0 12px;
+  display: flex;
+  flex-direction: column;
+}
+
+.ydool_pagination {
+  margin-top: 12px;
+}
+
+.table-body .el-table__inner-wrapper {
+  &::before {
+    content: none;
+  }
+  &.is-border::before {
+    content: "";
+  }
+}
diff --git a/src/main.js b/src/main.js
index 65ef138..d4d8206 100644
--- a/src/main.js
+++ b/src/main.js
@@ -15,6 +15,8 @@ import { appComponent } from "@/scripts/dynamicComponent";
 import "@/scripts/grape-import";
 import { table } from "@/compiler/testCode";
 import http from "@/utils/request.js";
+import { permission } from "@/utils/directive.js";
+
 const app = createApp(App);
 
 var loadDynamicComponent = false;
@@ -85,5 +87,6 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)
 }
 
+app.directive("permission", permission);
 
 app.use(ElementPlus).use(VForm3).use(createPinia()).use(router).mount("#app");
diff --git a/src/router/index.js b/src/router/index.js
index eab47af..9d0faa1 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -30,6 +30,17 @@ const routes = [
         name: "home",
         meta: { title: "欢迎" },
       },
+
+      /**
+       * 数据路由
+       */
+      // 项目管理
+      {
+        path: "/project-manage",
+        component: () => import("../views/projectManage/index.vue"),
+        name: "ProjectManage",
+        meta: { title: "项目管理" },
+      },
     ],
   },
   {
@@ -44,13 +55,13 @@ const routes = [
     path: "/codemirror",
     name: "codemirror",
     mete: {
-      title: "编辑器", 
+      title: "编辑器",
     },
     component: () => import("../views/codemirror/index.vue"),
-  }, 
+  },
   // {
   //   path: "/data-flow-editor",
-  //   name: "data-flow-editor", 
+  //   name: "data-flow-editor",
   //   mete: {
   //     title: "数据中台",
   //   },
diff --git a/src/store/perms.js b/src/store/perms.js
new file mode 100644
index 0000000..f50c6e5
--- /dev/null
+++ b/src/store/perms.js
@@ -0,0 +1,17 @@
+import { defineStore } from "pinia";
+import tools from "@/utils/tools";
+let user = tools.data.get("user");
+let ownPermission = user?.perms || [];
+
+export const usePerms = defineStore("perms", {
+  state: () => {
+    return {
+      perms: [...ownPermission],
+    };
+  },
+  actions: {
+    changePerms(val) {
+      this.perms = [...val];
+    },
+  },
+});
diff --git a/src/utils/directive.js b/src/utils/directive.js
new file mode 100644
index 0000000..5762a6d
--- /dev/null
+++ b/src/utils/directive.js
@@ -0,0 +1,20 @@
+// 全局指令
+import { usePerms } from "@/store/perms.js";
+let ownPermission = [];
+function toolPermission(el, permission) {
+  ownPermission = usePerms();
+  if (permission && !ownPermission.perms.includes(permission)) {
+    el.parentNode && el.parentNode.removeChild(el);
+  }
+}
+
+const permission = {
+  mounted(el, binding) {
+    toolPermission(el, binding.value);
+  },
+  updated(el, binding) {
+    toolPermission(el, binding.value);
+  },
+};
+
+export { permission };
diff --git a/src/views/projectManage/index.vue b/src/views/projectManage/index.vue
new file mode 100644
index 0000000..04045e5
--- /dev/null
+++ b/src/views/projectManage/index.vue
@@ -0,0 +1,367 @@
+<template>
+  <div class="example">
+    <TableBody v-bind="data" @handleTableHeader="handleTableHeader" @handleTablePagination="handleTablePagination"
+      @handleTableSort="handleTableSort" ref="TableBodyRef">
+      <!-- 左侧顶部插槽 -->
+      <template #TableHeaderLeft="{ selectData }">
+        <el-button @click="handleSlot(selectData)">插槽</el-button>
+      </template>
+
+      <!-- 右侧顶部插槽 -->
+      <template #TableHeaderRight="{ selectData }">
+        <el-button @click="handleSlot(selectData)">插槽</el-button>
+      </template>
+
+      <!-- 表格插槽使用 -->
+      <template #slotName="{ currentCol, currentData }">
+        <span style="color: #729880">{{ currentData }}</span>
+      </template>
+    </TableBody>
+
+    <FormDialog v-model="formDialog" v-bind="FormDialogData" @handleSubmit="handleSubmit">
+      <template #default>
+        <el-form :model="form" label-width="120px">
+          <el-form-item label="Activity name">
+            <el-input v-model="form.name" />
+          </el-form-item>
+          <el-form-item label="Activity zone">
+            <el-select v-model="form.region" placeholder="please select your zone">
+              <el-option label="Zone one" value="shanghai" />
+              <el-option label="Zone two" value="beijing" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="Activity time">
+            <el-col :span="11">
+              <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%" />
+            </el-col>
+            <el-col :span="2" class="text-center">
+              <span class="text-gray-500">-</span>
+            </el-col>
+            <el-col :span="11">
+              <el-time-picker v-model="form.date2" placeholder="Pick a time" style="width: 100%" />
+            </el-col>
+          </el-form-item>
+        </el-form>
+      </template>
+    </FormDialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from "vue";
+import TableBody from "@/components/TableBody/TableBody.vue";
+import FormDialog from "@/components/FormDialog/FormDialog.vue";
+
+const TableBodyRef = ref();
+const data = reactive({
+  /**
+   * @type {Object}
+   * @description 表格头部
+   */
+  tableHeader: [
+    {
+      buttons: [
+        "create",
+        "edit",
+        "delete",
+        {
+          type: "custom", //  // 自定义按钮（支持 custom 默认按钮、popconfirm 气泡确认 ）,
+          name: "customButton", // 为 handleTableHeader 事件的第一个返回值，注意不能重复
+          title: "自定义", // 按钮名称
+          icon: "Message", // 自定义左侧按钮 （ 目前只支持 element 的 icon  ）
+          // 以哪种方式禁用按钮，组件自带两种禁用方式 1.只有选择一条时开启按钮 'single'，2. 有选择任意条数时开启按钮 'Arbitrary '
+          // 3.自定义方法 'custom '，4.默认无条件开启，不设置即可
+          isOpen: "custom",
+          // 设置 isOpen 为 custom 时设置生效（切必须填写该字段），Boolean | 变量 | function
+          // disabled: false,
+          disabled: (selectData) => {
+            console.log(selectData, "selectData121341");
+            if (selectData[0]?.id === 3) {
+              return false;
+            }
+            return true;
+          },
+          permission: undefined, // 按钮权限，不设置，或设置为 undefined、false 默认显示
+        },
+      ],
+    },
+    {
+      buttons: [
+        "search",
+        "advanced",
+        "refresh",
+        "filter",
+        "bulkDelete",
+        {
+          name: "mixInput", // 混合筛选
+          options: [
+            { label: 1, value: 1 },
+            { label: 1, value: 1 },
+          ],
+          // permission: false, // 权限
+        },
+        {
+          name: "sort", // 排序
+          options: [
+            { label: "按企业名称", value: 1 },
+            { label: "按姓名", value: 2 },
+          ],
+          // permission: false, // 权限
+        },
+        {
+          type: "custom", // 自定义按钮（支持 custom 默认按钮、popconfirm 气泡确认 ）,
+          name: "customButton", // 为 handleTableHeader 事件的第一个返回值，注意不能重复
+          title: "自定义", // 按钮名称
+          icon: "Message", // 自定义左侧按钮 （ 目前只支持 element 的 icon  ）
+          // 以哪种方式禁用按钮，组件自带两种禁用方式 1.只有选择一条时开启按钮 'single'，2. 有选择任意条数时开启按钮 'Arbitrary '
+          // 3.自定义方法 'custom '，4.默认无条件开启，不设置即可
+          isOpen: "custom",
+          // 设置 isOpen 为 custom 时设置生效（切必须填写该字段），Boolean | 变量 | function
+          disabled: false,
+          // permission: false, // 权限
+        },
+      ],
+    },
+    // 基础操作按钮权限（没有配置 permission 的按钮或者其他搜索等）
+    // 不设置，或设置为 undefined、false 默认显示
+    {
+      create: undefined,
+      edit: false,
+      delete: false,
+      search: false,
+      advanced: false,
+      refresh: false,
+      bulkDelete: false,
+      filter: false,
+    },
+  ],
+  /**
+   * @type {Array}
+   * @description 表格参数
+   */
+  tableType: {
+    selection: false, // Boolean 是否多选
+    tableLoading: false, // Boolean 表格 loading
+    tableIndex: true, // Boolean 是否序号
+    tableTree: true, // Boolean 是否树形显示 （注意：开启后必须每项有不同的 id 字段，树形显示一般关闭多选）
+    tableTreeName: "children", // String 开启树形显示后才成效，子节点字段名称 （默认值为：'children'）
+    isExpand: true, // Boolean 是否默认展开（默认为 false）
+    isHiddenPagination: false, // Boolean是否隐藏分页 （默认为 false）
+    changeHeight: false, // String / Number 表格高度（ 默认为 false，自动设置根据窗口设置高度）
+  },
+  /**
+   * @type {Array}
+   * @description 表格配置
+   */
+  tableList: [
+    {
+      type: "slot", // 设置为 slot 即可使用插槽
+      name: "slotName", // name 是作用域插槽的名字
+      label: "插槽",
+      show: true, // 是否显示
+      sortable: true, // 排序方式 Boolean | 'custom' (设置为 'custom' 可以选中后端排序，组件需要绑定 handleTableSort 事件)
+      // 排序方法，使用示例 （仅当 sortable 设置为 true 时生效）
+      sortableMethod: (a, b) => {
+        console.log(a.date);
+        // a 和 b 就是表格数据 (a 是第后一条，b 是前一条)
+        // 如果返回值小于 0 那么 a 排在前 b 在之前，等于 0 位置不变， 大于 0 那么 a 排在 b 之后
+        return new Date(a.date).getTime() - new Date(b.date).getTime();
+      },
+      width: 100,
+    },
+    {
+      name: "date",
+      label: "时间",
+      show: true,
+      sortable: "custom",
+    },
+    {
+      name: "name",
+      label: "姓名",
+      show: true,
+    },
+    {
+      name: "state",
+      label: "状态",
+      show: true,
+    },
+    {
+      name: "city",
+      label: "城市",
+      show: true,
+    },
+    {
+      name: "address",
+      label: "地址",
+      show: true,
+    },
+    {
+      name: "zip",
+      label: "邮编",
+      show: true,
+    },
+  ],
+
+  /**
+   * @type {Array}
+   * @description 表格数据(模拟数据)
+   */
+  tableData: [
+    {
+      id: 1,
+      date: "2016-05-01",
+      name: "Tom",
+      state: "California",
+      city: "Los Angeles",
+      address: "No. 189, Grove St, Los Angeles",
+      zip: "CA 90036",
+      slotName: "插槽",
+      children: [
+        {
+          id: 2,
+          date: "2016-05-01",
+          name: "Tom",
+          state: "California",
+          city: "Los Angeles",
+          address: "No. 189, Grove St, Los Angeles",
+          zip: "CA 90036",
+          slotName: "插槽",
+        },
+        {
+          id: 3,
+          date: "2016-05-01",
+          name: "Tom",
+          state: "California",
+          city: "Los Angeles",
+          address: "No. 189, Grove St, Los Angeles",
+          zip: "CA 90036",
+          slotName: "插槽",
+        },
+      ],
+    },
+    {
+      id: 4,
+      date: "2016-05-02",
+      name: "Tom",
+      state: "California",
+      city: "Los Angeles",
+      address: "No. 189, Grove St, Los Angeles",
+      zip: "CA 90036",
+      slotName: "插槽",
+    },
+    {
+      id: 5,
+      date: "2016-05-03",
+      name: "Tom",
+      state: "California",
+      city: "Los Angeles",
+      address: "No. 189, Grove St, Los Angeles",
+      zip: "CA 90036",
+      slotName: "插槽",
+    },
+    {
+      id: 6,
+      date: "2016-05-04",
+      name: "Tom",
+      state: "California",
+      city: "Los Angeles",
+      address: "No. 189, Grove St, Los Angeles",
+      zip: "CA 90036",
+      slotName: "插槽",
+    },
+    {
+      id: 7,
+      date: "2016-05-05",
+      name: "Tom",
+      state: "California",
+      city: "Los Angeles",
+      address: "No. 189, Grove St, Los Angeles",
+      zip: "CA 90036",
+      slotName: "插槽",
+    },
+  ],
+  /**
+   * @type {Object}
+   * @description 分页数据
+   */
+  pagination: {
+    pageSize: 10,
+    current: 1,
+    total: 0,
+  },
+});
+// 表格头部处理事件
+const handleTableHeader = ({ type, data }) => {
+  console.log(type, data);
+  switch (type) {
+    case "create":
+      handleCreate();
+      console.log(type, data);
+      break;
+    case "edit":
+      console.log(type, data);
+      break;
+  }
+};
+// 表格分页事件
+const handleTablePagination = (current) => {
+  console.log(current);
+};
+
+// 表格自定义排序事件
+const handleTableSort = (column, prop, order) => {
+  console.log(column, prop, order);
+};
+
+// 插槽事件
+const handleSlot = (val) => {
+  console.log(val);
+};
+
+// 新增
+const handleCreate = () => {
+  console.log(12);
+  formDialog.value = true
+};
+
+// 清空混合搜索
+// TableBodyRef.value.clearMixInput()
+
+// 清空搜索
+// TableBodyRef.value.clearSearch()
+
+
+/* 表单弹框 */
+const formDialog = ref(false)
+const FormDialogData = reactive({
+  title: '新增', // String | 必填 | 标题
+  width: '30%', // String | 默认值 30% | 弹框宽度
+  formType: 'slot', // 'slot' 默认为 slot  | 'json' （后台接口返回就配置 json）
+  // 注意：以下配置为 json 时才有效
+  formJosnRules: {}, // 默认为{}，表单校验规则
+  formJosnLabelWidth: '120px', // 默认为 120px，表单 label 宽度
+  // form 元素
+  formJosnElement: [
+    {
+      type: 'input', // 元素类型
+      cloSpan: '24', // 栅格布局所占份数 （默认24）
+      disabled: false, // 元素是否禁用（默认为false）
+      label: '姓名', // 元素的 label
+      placeholder: '请填写姓名', // 元素的 placeholder
+      model: 'name', // 元素 form 的 key
+
+      // options: [] // type 为 select 生效 （默认为 [] ）
+
+      // dateType: [] // type 为 date 生效 （默认为 date ）
+      // dateValueformat: [] // type 为 date 生效 （默认为 YYYY-MM-DD ）
+    },
+  ],
+  formJosnDisabled: false, // 表单是否禁用
+  formJsonData: {}, // 新增或者编辑表单值 （编辑必须传）
+})
+const handleSubmit = (formJsonValue) => {
+  formDialog.value = false
+}
+const form = ref({})
+</script>
+<style lang="scss" scoped></style>
diff --git a/yarn.lock b/yarn.lock
index 683cf93..c318831 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -758,6 +758,11 @@ lodash-unified@^1.0.2:
   resolved "https://registry.yarnpkg.com/lodash-unified/-/lodash-unified-1.0.3.tgz#80b1eac10ed2eb02ed189f08614a29c27d07c894"
   integrity sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==
 
+lodash.clonedeep@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.npmmirror.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
+  integrity sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==
+
 lodash@^4.17.21:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"