diff --git a/build/vite/index.ts b/build/vite/index.ts
index dcec1aeda227ac5558b04efef9a31e505ed36b29..3e8c4d892c9e505332e76883c029eb795771e49f 100644
--- a/build/vite/index.ts
+++ b/build/vite/index.ts
@@ -6,21 +6,25 @@ import progress from 'vite-plugin-progress'
 import EslintPlugin from 'vite-plugin-eslint'
 import PurgeIcons from 'vite-plugin-purge-icons'
 import { ViteEjsPlugin } from 'vite-plugin-ejs'
+// @ts-ignore
 import ElementPlus from 'unplugin-element-plus/vite'
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 import viteCompression from 'vite-plugin-compression'
-import vueSetupExtend from 'vite-plugin-vue-setup-extend'
+import topLevelAwait from 'vite-plugin-top-level-await'
+import vueSetupExtend from 'vite-plugin-vue-setup-extend-plus'
 import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 
 export function createVitePlugins() {
   const root = process.cwd()
+
   // 路径查找
   function pathResolve(dir: string) {
     return resolve(root, '.', dir)
   }
+
   return [
     Vue(),
     VueJsx(),
@@ -46,6 +50,7 @@ export function createVitePlugins() {
           '@/hooks/web/useXTable': ['useXTable'],
           '@/hooks/web/useVxeCrudSchemas': ['useVxeCrudSchemas'],
           '@/hooks/web/useTable': ['useTable'],
+          '@/hooks/web/useAdaptiveXTable': ['useAdaptiveXTable'],
           '@/hooks/web/useCrudSchemas': ['useCrudSchemas'],
           '@/utils/formRules': ['required'],
           '@/utils/dict': ['DICT_TYPE']
@@ -95,6 +100,13 @@ export function createVitePlugins() {
       ext: '.gz', // 生成的压缩包后缀
       deleteOriginFile: false //压缩后是否删除源文件
     }),
-    ViteEjsPlugin()
+    ViteEjsPlugin(),
+    topLevelAwait({
+      // https://juejin.cn/post/7152191742513512485
+      // The export name of top-level await promise for each chunk module
+      promiseExportName: '__tla',
+      // The function to generate import names of top-level await promise in each chunk module
+      promiseImportName: (i) => `__tla_${i}`
+    })
   ]
 }
diff --git a/package.json b/package.json
index 683d09eb4675c4d4de91878e3d6bc914c585d589..0ac7f19c186b9ba47ab778b02f812223157319f8 100644
--- a/package.json
+++ b/package.json
@@ -122,7 +122,8 @@
     "vite-plugin-progress": "^0.0.6",
     "vite-plugin-purge-icons": "^0.9.2",
     "vite-plugin-svg-icons": "^2.0.1",
-    "vite-plugin-vue-setup-extend": "^0.4.0",
+    "vite-plugin-top-level-await": "^1.3.0",
+    "vite-plugin-vue-setup-extend-plus": "^0.1.0",
     "vite-plugin-windicss": "^1.8.10",
     "vue-tsc": "^1.2.0",
     "windicss": "^3.5.6"
diff --git a/src/components/XTable/src/XTable.vue b/src/components/XTable/src/XTable.vue
index fac292d4604c0592a4620ad969f7513fa9a3d042..1cbe69fafa5ec9ff812bdccd9b9cd6b431a5e9f5 100644
--- a/src/components/XTable/src/XTable.vue
+++ b/src/components/XTable/src/XTable.vue
@@ -1,11 +1,11 @@
 <template>
-  <VxeGrid v-bind="getProps" ref="xGrid" :class="`${prefixCls}`" class="xtable-scrollbar">
-    <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+  <VxeGrid ref="xGrid" :class="`${prefixCls}`" class="xtable-scrollbar" v-bind="getProps">
+    <template v-for="item in Object.keys($slots)" :key="item" #[item]="data">
       <slot :name="item" v-bind="data || {}"></slot>
     </template>
   </VxeGrid>
 </template>
-<script setup lang="ts" name="XTable">
+<script lang="ts" name="XTable" setup>
 import { PropType } from 'vue'
 import { SizeType, VxeGridInstance } from 'vxe-table'
 import { useAppStore } from '@/store/modules/app'
@@ -37,7 +37,6 @@ const removeStyles = () => {
       allsuspects[i].getAttribute(targetattr) != null &&
       allsuspects[i].getAttribute(targetattr)?.indexOf(filename) != -1
     ) {
-      console.log(allsuspects[i], 'node')
       allsuspects[i].parentNode?.removeChild(allsuspects[i])
     }
   }
@@ -90,7 +89,6 @@ const innerProps = ref<Partial<XTableProps>>()
 const getProps = computed(() => {
   const options = innerProps.value || props.options
   options.size = currentSize as any
-  options.height = 700
   getOptionInitConfig(options)
   getColumnsConfig(options)
   getProxyConfig(options)
@@ -254,7 +252,7 @@ const getPageConfig = (options: XTableProps) => {
         background: false, // 带背景颜色
         perfect: false, // 配套的样式
         pageSize: 10, // 每页大小
-        pagerCount: 7, // 显示页码按钮的数量
+        pagerCount: 5, // 显示页码按钮的数量
         autoHidden: false, // 当只有一页时自动隐藏
         pageSizes: [5, 10, 20, 30, 50, 100], // 每页大小选项列表
         layouts: [
@@ -272,7 +270,7 @@ const getPageConfig = (options: XTableProps) => {
   }
 }
 
-// tool bar
+// toolbar
 const getToolBarConfig = (options: XTableProps) => {
   const { toolBar, toolbarConfig, topActionSlots } = options
   if (toolbarConfig) return
@@ -421,7 +419,8 @@ const getCheckboxRecords = () => {
   return g.getCheckboxRecords(false)
 }
 const setProps = (prop: Partial<XTableProps>) => {
-  innerProps.value = { ...unref(innerProps), ...prop }
+  // 重新赋值的时候保留旧值，如果有新的值则覆盖
+  innerProps.value = { ...innerProps.value, ...prop, ...props.options }
 }
 
 defineExpose({ reload, Ref: xGrid, getSearchData, deleteData, exportList })
diff --git a/src/hooks/web/useAdaptiveXTable.ts b/src/hooks/web/useAdaptiveXTable.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2e362635e8af5cc0fd2bf906e5ee7df39ae48738
--- /dev/null
+++ b/src/hooks/web/useAdaptiveXTable.ts
@@ -0,0 +1,64 @@
+/**
+ * 使表格自适应屏幕，铺满可视区域
+ * @param setPropsFunctions [useXTable中返回的函数setProps],设计为列表是为了兼容一个页面有两个列表的情况
+ * @param container 包裹XTable的容器名称，默认为ContentWrap
+ */
+export const useAdaptiveXTable = (setPropsFunctions: Function[], container = 'ContentWrap') => {
+  // 最终的表格高度
+  const height = ref(0)
+  // header区域和tags区域的高度和
+  const htHeight = ref(126)
+  // vxe-grid类名
+  const vxeGridClassName = ref('.vxe-grid')
+  // 精确计算vxe表格所在cart的可用高度
+  const getTableHeight = () => {
+    // 找到vxe(目的获取vex-grid所在el-cart的高度)
+    const vxeElement = document.querySelector(vxeGridClassName.value)
+    if (vxeElement) {
+      // ========== 计算容器可用高度(tag: 不使用元素获取的方式是怕类名有变化) ==========
+      // 父元素el-card__body(ContentWrap要获取两次parentElement因为还有一层div包裹)
+      let parent
+      if ('ContentWrap' === container) {
+        parent = vxeElement?.parentElement?.parentElement
+      } else {
+        parent = vxeElement?.parentElement
+      }
+      // 父元素的兄弟元素也就是el-card__header
+      const previous = parent?.previousElementSibling as HTMLElement
+      let previousHeight
+      // 如果有标题获取高度
+      if (previous) {
+        previousHeight = previous?.offsetHeight
+      }
+      //获取浏览器窗口内容高度
+      const vh = window.innerHeight
+      // 计算容器可用高度，如果有标题话减去标题占用的高度, 最后减去header区域和tags区域的高度
+      height.value = (previousHeight && vh ? vh - previousHeight : vh) - htHeight.value
+      for (const setProps of setPropsFunctions) {
+        setProps({ height: height.value })
+      }
+    }
+  }
+  const initOnresize = () => {
+    // 监听浏览器窗口变化重新计算高度
+    window.onresize = () => {
+      getTableHeight()
+    }
+    getTableHeight()
+  }
+  onMounted(() => {
+    initOnresize()
+  })
+
+  //页面卸载之前干掉onresize
+  onBeforeUnmount(() => {
+    window.onresize = () => {}
+  })
+  // 针对缓存了的页面
+  onActivated(() => {
+    // 调用时机为首次挂载
+    // 以及每次从缓存中被重新插入时,重新更新onresize和计算高度
+    initOnresize()
+  })
+  return { height }
+}
diff --git a/src/hooks/web/useXTable.ts b/src/hooks/web/useXTable.ts
index 501f982b3172f78ed94f933f9461e0cf13f3044a..e8911d7d832f3bd49f99099645f11bed11499107 100644
--- a/src/hooks/web/useXTable.ts
+++ b/src/hooks/web/useXTable.ts
@@ -27,7 +27,7 @@ export const useXTable = (props: XTableProps): [Function, tableMethod] => {
   }
   const methods: tableMethod = {
     reload: () => getInstance().reload(),
-    setProps: (props) => getInstance().setProps(props),
+    setProps: (props) => getInstance()?.setProps(props),
     deleteData: (id: string | number) => getInstance().deleteData(id),
     deleteBatch: () => getInstance().deleteBatch(),
     exportList: (fileName?: string) => getInstance().exportList(fileName),
diff --git a/src/types/auto-components.d.ts b/src/types/auto-components.d.ts
index 80a5900fbd9536a33d4702aac3607c57a15f9d09..c39091075245602f5d363c5cb079aa7bcfc5706e 100644
--- a/src/types/auto-components.d.ts
+++ b/src/types/auto-components.d.ts
@@ -23,7 +23,6 @@ declare module '@vue/runtime-core' {
     DictTag: typeof import('./../components/DictTag/src/DictTag.vue')['default']
     Echart: typeof import('./../components/Echart/src/Echart.vue')['default']
     Editor: typeof import('./../components/Editor/src/Editor.vue')['default']
-    ElAutoResizer: typeof import('element-plus/es')['ElAutoResizer']
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
@@ -34,7 +33,6 @@ declare module '@vue/runtime-core' {
     ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
     ElCollapseTransition: typeof import('element-plus/es')['ElCollapseTransition']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
-    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
     ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']
@@ -53,7 +51,6 @@ declare module '@vue/runtime-core' {
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
-    ElImage: typeof import('element-plus/es')['ElImage']
     ElImageViewer: typeof import('element-plus/es')['ElImageViewer']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
@@ -71,12 +68,9 @@ declare module '@vue/runtime-core' {
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
-    ElTableV2: typeof import('element-plus/es')['ElTableV2']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
-    ElTimeline: typeof import('element-plus/es')['ElTimeline']
-    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTransfer: typeof import('element-plus/es')['ElTransfer']
     ElTree: typeof import('element-plus/es')['ElTree']
diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts
index 75cf16d9a22fc2749831b43537cebf5f21ac7c91..9713e05a21cc5e510c0e921f2901d7c2b65939b7 100644
--- a/src/types/auto-imports.d.ts
+++ b/src/types/auto-imports.d.ts
@@ -51,6 +51,7 @@ declare global {
   const toRefs: typeof import('vue')['toRefs']
   const triggerRef: typeof import('vue')['triggerRef']
   const unref: typeof import('vue')['unref']
+  const useAdaptiveXTable: typeof import('@/hooks/web/useAdaptiveXTable')['useAdaptiveXTable']
   const useAttrs: typeof import('vue')['useAttrs']
   const useCrudSchemas: typeof import('@/hooks/web/useCrudSchemas')['useCrudSchemas']
   const useCssModule: typeof import('vue')['useCssModule']
diff --git a/src/views/bpm/form/index.vue b/src/views/bpm/form/index.vue
index b4b208a98475f3715244b8f38470b611eb6d61fb..22c6c572c01b7fa2b6d455c5f49702f7f9177eb0 100644
--- a/src/views/bpm/form/index.vue
+++ b/src/views/bpm/form/index.vue
@@ -54,12 +54,12 @@ const { t } = useI18n() // 国际化
 const { push } = useRouter() // 路由
 
 // 列表相关的变量
-const [registerTable, { deleteData }] = useXTable({
+const [registerTable, { deleteData, setProps }] = useXTable({
   allSchemas: allSchemas,
   getListApi: FormApi.getFormPageApi,
   deleteApi: FormApi.deleteFormApi
 })
-
+useAdaptiveXTable([setProps])
 // 新增操作
 const handleCreate = () => {
   push({
diff --git a/src/views/bpm/group/index.vue b/src/views/bpm/group/index.vue
index b0f085163fc4a2bea17bda22afe2eaa51e5cc16c..9a8ece3e557af9ca4c8c6b1c3f5ead257a2bb99c 100644
--- a/src/views/bpm/group/index.vue
+++ b/src/views/bpm/group/index.vue
@@ -95,11 +95,12 @@ import { FormExpose } from '@/components/Form'
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 // 列表相关的变量
-const [registerTable, { reload, deleteData }] = useXTable({
+const [registerTable, { reload, deleteData, setProps }] = useXTable({
   allSchemas: allSchemas,
   getListApi: UserGroupApi.getUserGroupPageApi,
   deleteApi: UserGroupApi.deleteUserGroupApi
 })
+useAdaptiveXTable([setProps])
 // 用户列表
 const users = ref<UserVO[]>([])
 
diff --git a/src/views/bpm/model/index.vue b/src/views/bpm/model/index.vue
index 25136e1312388aa8b3bdc40f99bb4abaa05249c9..3e73a3d33e8bb28cc7510e9ead07689d61c737f5 100644
--- a/src/views/bpm/model/index.vue
+++ b/src/views/bpm/model/index.vue
@@ -338,10 +338,11 @@ const bpmnControlForm = ref({
   prefix: 'flowable'
 })
 // ========== 列表相关 ==========
-const [registerTable, { reload }] = useXTable({
+const [registerTable, { reload, setProps }] = useXTable({
   allSchemas: allSchemas,
   getListApi: ModelApi.getModelPageApi
 })
+useAdaptiveXTable([setProps])
 const forms = ref() // 流程表单的下拉框的数据
 
 // 设计流程
diff --git a/src/views/bpm/oa/leave/index.vue b/src/views/bpm/oa/leave/index.vue
index 91e7ccdafae358d073827868430f5f32c5ac30f5..eb4a00ada630e69776400a2e28f36617cf355093 100644
--- a/src/views/bpm/oa/leave/index.vue
+++ b/src/views/bpm/oa/leave/index.vue
@@ -35,11 +35,11 @@ const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 const { push } = useRouter() // 路由
 
-const [registerTable, { reload }] = useXTable({
+const [registerTable, { reload, setProps }] = useXTable({
   allSchemas: allSchemas,
   getListApi: LeaveApi.getLeavePageApi
 })
-
+useAdaptiveXTable([setProps])
 // 发起请假
 const handleCreate = () => {
   push({
diff --git a/src/views/bpm/processInstance/index.vue b/src/views/bpm/processInstance/index.vue
index f43e53ef1517a86fe958816779c0701f7fb7dac8..9bd87b6cd541018e356e0fa6e4b7028840b34ddd 100644
--- a/src/views/bpm/processInstance/index.vue
+++ b/src/views/bpm/processInstance/index.vue
@@ -55,10 +55,11 @@ const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 
 // ========== 列表相关 ==========
-const [registerTable, { reload }] = useXTable({
+const [registerTable, { reload, setProps }] = useXTable({
   allSchemas: allSchemas,
   getListApi: ProcessInstanceApi.getMyProcessInstancePageApi
 })
+useAdaptiveXTable([setProps])
 
 /** 发起流程操作 **/
 const handleCreate = () => {
diff --git a/src/views/bpm/taskAssignRule/index.vue b/src/views/bpm/taskAssignRule/index.vue
index 6a09b147e22e04a88b3bde30eae0b1a65b5d8d34..52f9999b3575c53b0ec974653393891d67af80ef 100644
--- a/src/views/bpm/taskAssignRule/index.vue
+++ b/src/views/bpm/taskAssignRule/index.vue
@@ -173,13 +173,13 @@ const queryParams = reactive({
   modelId: modelId,
   processDefinitionId: processDefinitionId
 })
-const [registerTable, { reload }] = useXTable({
+const [registerTable, { reload, setProps }] = useXTable({
   allSchemas: allSchemas,
   params: queryParams,
   getListApi: TaskAssignRuleApi.getTaskAssignRuleList,
   isList: true
 })
-
+useAdaptiveXTable([setProps])
 // 翻译规则范围
 const getAssignRuleOptionName = (type, option) => {
   if (type === 10) {
diff --git a/src/views/infra/apiErrorLog/index.vue b/src/views/infra/apiErrorLog/index.vue
index 4193351a3c48a61fc5c32a05903ac88339e9d1d9..f4d5acb87058685ca4509bc919afd380f4005d37 100644
--- a/src/views/infra/apiErrorLog/index.vue
+++ b/src/views/infra/apiErrorLog/index.vue
@@ -60,11 +60,12 @@ const { t } = useI18n() // 国际化
 const message = useMessage()
 
 // ========== 列表相关 ==========
-const [registerTable, { reload, exportList }] = useXTable({
+const [registerTable, { reload, exportList, setProps }] = useXTable({
   allSchemas: allSchemas,
   getListApi: ApiErrorLogApi.getApiErrorLogPageApi,
   exportListApi: ApiErrorLogApi.exportApiErrorLogApi
 })
+useAdaptiveXTable([setProps])
 // ========== 详情相关 ==========
 const detailData = ref() // 详情 Ref
 const dialogVisible = ref(false) // 是否显示弹出层
diff --git a/src/views/infra/codegen/index.vue b/src/views/infra/codegen/index.vue
index 8337d2d45a25f54248317baa6a65ebe21371e0b6..17547b52b46239e27478ec26dbdeebe1005648d9 100644
--- a/src/views/infra/codegen/index.vue
+++ b/src/views/infra/codegen/index.vue
@@ -67,12 +67,12 @@ const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 const { push } = useRouter() // 路由跳转
 // 列表相关的变量
-const [registerTable, { reload, deleteData }] = useXTable({
+const [registerTable, { reload, deleteData, setProps }] = useXTable({
   allSchemas: allSchemas,
   getListApi: CodegenApi.getCodegenTablePageApi,
   deleteApi: CodegenApi.deleteCodegenTableApi
 })
-
+useAdaptiveXTable([setProps])
 // 导入操作
 const importRef = ref()
 const openImportTable = () => {
diff --git a/src/views/infra/config/index.vue b/src/views/infra/config/index.vue
index ddf9eebae4d028843e56b4f62115434455b492f3..3e343481c551b21ced0884649497c40177395fe8 100644
--- a/src/views/infra/config/index.vue
+++ b/src/views/infra/config/index.vue
@@ -91,13 +91,13 @@ import { rules, allSchemas } from './config.data'
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 // 列表相关的变量
-const [registerTable, { reload, deleteData, exportList }] = useXTable({
+const [registerTable, { reload, deleteData, exportList, setProps }] = useXTable({
   allSchemas: allSchemas,
   getListApi: ConfigApi.getConfigPage,
   deleteApi: ConfigApi.deleteConfig,
   exportListApi: ConfigApi.exportConfigApi
 })
-
+useAdaptiveXTable([setProps])
 // ========== CRUD 相关 ==========
 const actionLoading = ref(false) // 遮罩层
 const actionType = ref('') // 操作按钮的类型
diff --git a/src/views/infra/dataSourceConfig/index.vue b/src/views/infra/dataSourceConfig/index.vue
index 1e3db49d447cefa3242b86454876ae8a41325583..48a12f7aef6dbfb0b13d12469ca698dcfb768fc2 100644
--- a/src/views/infra/dataSourceConfig/index.vue
+++ b/src/views/infra/dataSourceConfig/index.vue
@@ -74,12 +74,13 @@ import { rules, allSchemas } from './dataSourceConfig.data'
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 // 列表相关的变量
-const [registerTable, { reload, deleteData }] = useXTable({
+const [registerTable, { reload, deleteData, setProps }] = useXTable({
   allSchemas: allSchemas,
   isList: true,
   getListApi: DataSourceConfiggApi.getDataSourceConfigListApi,
   deleteApi: DataSourceConfiggApi.deleteDataSourceConfigApi
 })
+useAdaptiveXTable([setProps])
 // ========== CRUD 相关 ==========
 const loading = ref(false) // 遮罩层
 const actionType = ref('') // 操作按钮的类型
diff --git a/src/views/infra/fileConfig/index.vue b/src/views/infra/fileConfig/index.vue
index bd9a978ac8372b88abc6fc619eb7761214e64572..41d680111eb74e6d6f62e689b14ea3434747f6e6 100644
--- a/src/views/infra/fileConfig/index.vue
+++ b/src/views/infra/fileConfig/index.vue
@@ -167,12 +167,12 @@ import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 // 列表相关的变量
-const [registerTable, { reload, deleteData }] = useXTable({
+const [registerTable, { reload, deleteData, setProps }] = useXTable({
   allSchemas: allSchemas,
   getListApi: FileConfigApi.getFileConfigPageApi,
   deleteApi: FileConfigApi.deleteFileConfigApi
 })
-
+useAdaptiveXTable([setProps])
 // ========== CRUD 相关 ==========
 const actionLoading = ref(false) // 遮罩层
 const actionType = ref('') // 操作按钮的类型
diff --git a/src/views/infra/fileList/index.vue b/src/views/infra/fileList/index.vue
index 1d79cb9eed35e07e46d815ada0dc1f877dc7cd62..7e77a9f610597aefef9aa38765ac7c70b2f1a460 100644
--- a/src/views/infra/fileList/index.vue
+++ b/src/views/infra/fileList/index.vue
@@ -90,12 +90,12 @@ const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
 // 列表相关的变量
-const [registerTable, { reload, deleteData }] = useXTable({
+const [registerTable, { reload, deleteData, setProps }] = useXTable({
   allSchemas: allSchemas,
   getListApi: FileApi.getFilePageApi,
   deleteApi: FileApi.deleteFileApi
 })
-
+useAdaptiveXTable([setProps])
 const detailData = ref() // 详情 Ref
 const dialogVisible = ref(false) // 是否显示弹出层
 const dialogTitle = ref('') // 弹出层标题
diff --git a/src/views/infra/job/JobLog.vue b/src/views/infra/job/JobLog.vue
index 1771bbd74442baab21a973e78e774695944b0612..49a81b6f446573bcb8bc30a8437793e02351fa70 100644
--- a/src/views/infra/job/JobLog.vue
+++ b/src/views/infra/job/JobLog.vue
@@ -54,11 +54,12 @@ import { allSchemas } from './jobLog.data'
 
 const { t } = useI18n() // 国际化
 // 列表相关的变量
-const [registerTable, { exportList }] = useXTable({
+const [registerTable, { exportList, setProps }] = useXTable({
   allSchemas: allSchemas,
   getListApi: JobLogApi.getJobLogPageApi,
   exportListApi: JobLogApi.exportJobLogApi
 })
+useAdaptiveXTable([setProps])
 // ========== CRUD 相关 ==========
 const dialogVisible = ref(false) // 是否显示弹出层
 const dialogTitle = ref('') // 弹出层标题
diff --git a/src/views/infra/job/index.vue b/src/views/infra/job/index.vue
index 613f84c43eee0c83e1ed8c9c2232b9f58e29227d..059af39ae93952e645e8ad293e7ab97e67660498 100644
--- a/src/views/infra/job/index.vue
+++ b/src/views/infra/job/index.vue
@@ -139,13 +139,13 @@ const message = useMessage() // 消息弹窗
 const { push } = useRouter()
 
 // 列表相关的变量
-const [registerTable, { reload, deleteData, exportList }] = useXTable({
+const [registerTable, { reload, deleteData, exportList, setProps }] = useXTable({
   allSchemas: allSchemas,
   getListApi: JobApi.getJobPageApi,
   deleteApi: JobApi.deleteJobApi,
   exportListApi: JobApi.exportJobApi
 })
-
+useAdaptiveXTable([setProps])
 // ========== CRUD 相关 ==========
 const actionLoading = ref(false) // 遮罩层
 const actionType = ref('') // 操作按钮的类型
diff --git a/src/views/pay/app/index.vue b/src/views/pay/app/index.vue
index 8972a8bbc5cb3f175156ecef3957431e033a7b99..2ce10181c02de4133fb420911b5bddcf4f7b440d 100644
--- a/src/views/pay/app/index.vue
+++ b/src/views/pay/app/index.vue
@@ -84,13 +84,13 @@ const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
 // 列表相关的变量
-const [registerTable, { reload, deleteData, exportList }] = useXTable({
+const [registerTable, { reload, deleteData, exportList, setProps }] = useXTable({
   allSchemas: allSchemas,
   getListApi: AppApi.getAppPageApi,
   deleteApi: AppApi.deleteAppApi,
   exportListApi: AppApi.exportAppApi
 })
-
+useAdaptiveXTable([setProps])
 // ========== CRUD 相关 ==========
 const actionLoading = ref(false) // 遮罩层
 const actionType = ref('') // 操作按钮的类型
diff --git a/src/views/pay/merchant/index.vue b/src/views/pay/merchant/index.vue
index 1ea460ec9d5a7aa9c30828a1a45059ce559eafaf..cb54e4765cb2316d03146f932f4cc67d35e30be6 100644
--- a/src/views/pay/merchant/index.vue
+++ b/src/views/pay/merchant/index.vue
@@ -82,13 +82,13 @@ import * as MerchantApi from '@/api/pay/merchant'
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 // 列表相关的变量
-const [registerTable, { reload, deleteData, exportList }] = useXTable({
+const [registerTable, { reload, deleteData, exportList, setProps }] = useXTable({
   allSchemas: allSchemas,
   getListApi: MerchantApi.getMerchantPageApi,
   deleteApi: MerchantApi.deleteMerchantApi,
   exportListApi: MerchantApi.exportMerchantApi
 })
-
+useAdaptiveXTable([setProps])
 // ========== CRUD 相关 ==========
 const actionLoading = ref(false) // 遮罩层
 const actionType = ref('') // 操作按钮的类型
diff --git a/src/views/pay/order/index.vue b/src/views/pay/order/index.vue
index 2edf5785db4156fbded012217cb3ecfb0ad21a7b..f393c70ef6ec1267b5be5986937202e49eecde57 100644
--- a/src/views/pay/order/index.vue
+++ b/src/views/pay/order/index.vue
@@ -47,11 +47,12 @@ import * as OrderApi from '@/api/pay/order'
 
 const { t } = useI18n() // 国际化
 // 列表相关的变量
-const [registerTable, { exportList }] = useXTable({
+const [registerTable, { exportList, setProps }] = useXTable({
   allSchemas: allSchemas,
   getListApi: OrderApi.getOrderPageApi,
   exportListApi: OrderApi.exportOrderApi
 })
+useAdaptiveXTable([setProps])
 // ========== CRUD 相关 ==========
 const actionLoading = ref(false) // 遮罩层
 const actionType = ref('') // 操作按钮的类型
diff --git a/src/views/pay/refund/index.vue b/src/views/pay/refund/index.vue
index 6b7b3d46a51d62f3f1fce33410ee73587570f032..1820b667e9bde0cec13e3633198c977f37d360c0 100644
--- a/src/views/pay/refund/index.vue
+++ b/src/views/pay/refund/index.vue
@@ -40,12 +40,12 @@ import * as RefundApi from '@/api/pay/refund'
 const { t } = useI18n() // 国际化
 
 // 列表相关的变量
-const [registerTable, { exportList }] = useXTable({
+const [registerTable, { exportList, setProps }] = useXTable({
   allSchemas: allSchemas,
   getListApi: RefundApi.getRefundPageApi,
   exportListApi: RefundApi.exportRefundApi
 })
-
+useAdaptiveXTable([setProps])
 // ========== CRUD 相关 ==========
 const dialogVisible = ref(false) // 是否显示弹出层
 const detailData = ref() // 详情 Ref
diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
index 3b182e2afcf8ef5aae488cc36a6c99140355f0c4..14198f91a2cf32c29137be3cd3a46f1127f733b1 100644
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -75,7 +75,7 @@
   </XModal>
 </template>
 <script setup lang="ts" name="Dept">
-import { handleTree, defaultProps } from '@/utils/tree'
+import { defaultProps, handleTree } from '@/utils/tree'
 import type { FormExpose } from '@/components/Form'
 import { allSchemas, rules } from './dept.data'
 import * as DeptApi from '@/api/system/dept'
@@ -102,8 +102,7 @@ const deptOptions = ref() // 树形结构
 const userOption = ref<UserVO[]>([])
 
 const getUserList = async () => {
-  const res = await getListSimpleUsersApi()
-  userOption.value = res
+  userOption.value = await getListSimpleUsersApi()
 }
 // 获取下拉框[上级]的数据
 const getTree = async () => {
@@ -113,12 +112,13 @@ const getTree = async () => {
   dept.children = handleTree(res)
   deptOptions.value.push(dept)
 }
-const [registerTable, { reload, deleteData }] = useXTable({
+const [registerTable, { reload, deleteData, setProps }] = useXTable({
   allSchemas: allSchemas,
   treeConfig: treeConfig,
   getListApi: DeptApi.getDeptPageApi,
   deleteApi: DeptApi.deleteDeptApi
 })
+useAdaptiveXTable([setProps])
 // ========== 新增/修改 ==========
 
 // 设置标题
diff --git a/src/views/system/dict/index.vue b/src/views/system/dict/index.vue
index 713fde97795ee2661210f574f50b12caa4687f42..a2a77f43e0e63635862f6ddff5db850409e6f204 100644
--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
@@ -133,21 +133,24 @@ import { DictDataVO, DictTypeVO } from '@/api/system/dict/types'
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
-const [registerType, { reload: typeGetList, deleteData: typeDeleteData }] = useXTable({
-  allSchemas: DictTypeSchemas.allSchemas,
-  getListApi: DictTypeApi.getDictTypePageApi,
-  deleteApi: DictTypeApi.deleteDictTypeApi
-})
+const [registerType, { reload: typeGetList, deleteData: typeDeleteData, setProps: typeSetProps }] =
+  useXTable({
+    allSchemas: DictTypeSchemas.allSchemas,
+    getListApi: DictTypeApi.getDictTypePageApi,
+    deleteApi: DictTypeApi.deleteDictTypeApi
+  })
 
 const queryParams = reactive({
   dictType: null
 })
-const [registerData, { reload: dataGetList, deleteData: dataDeleteData }] = useXTable({
-  allSchemas: DictDataSchemas.allSchemas,
-  params: queryParams,
-  getListApi: DictDataApi.getDictDataPageApi,
-  deleteApi: DictDataApi.deleteDictDataApi
-})
+const [registerData, { reload: dataGetList, deleteData: dataDeleteData, setProps: dataSetProps }] =
+  useXTable({
+    allSchemas: DictDataSchemas.allSchemas,
+    params: queryParams,
+    getListApi: DictDataApi.getDictDataPageApi,
+    deleteApi: DictDataApi.deleteDictDataApi
+  })
+const { height } = useAdaptiveXTable([typeSetProps, dataSetProps], 'Card')
 // ========== 字典分类列表相关 ==========
 const dictTypeValue = ref('')
 // 字典分类修改操作
@@ -180,6 +183,7 @@ const cellClickEvent: VxeTableEvents.CellClick = async ({ row }) => {
   tableTypeSelect.value = true
   queryParams.dictType = row['type']
   await nextTick()
+  dataSetProps({ height })
   await dataGetList()
   parentType.value = row['type']
 }
diff --git a/src/views/system/errorCode/index.vue b/src/views/system/errorCode/index.vue
index 1ff3d103d47dedb49f719bdfa311578fe468a43f..a9ae608220552c1fdede7409a23968ee24fe6667 100644
--- a/src/views/system/errorCode/index.vue
+++ b/src/views/system/errorCode/index.vue
@@ -75,11 +75,12 @@ import * as ErrorCodeApi from '@/api/system/errorCode'
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 // 列表相关的变量
-const [registerTable, { reload, deleteData }] = useXTable({
+const [registerTable, { reload, deleteData, setProps }] = useXTable({
   allSchemas: allSchemas,
   getListApi: ErrorCodeApi.getErrorCodePageApi,
   deleteApi: ErrorCodeApi.deleteErrorCodeApi
 })
+useAdaptiveXTable([setProps])
 // 弹窗相关的变量
 const dialogVisible = ref(false) // 是否显示弹出层
 const dialogTitle = ref('edit') // 弹出层标题
diff --git a/src/views/system/loginlog/index.vue b/src/views/system/loginlog/index.vue
index f2bb8c6777066ffa446191d77b0affa61973df13..77bcda7c53d6655ad8d19750ad4e2d64920216e0 100644
--- a/src/views/system/loginlog/index.vue
+++ b/src/views/system/loginlog/index.vue
@@ -34,12 +34,12 @@ import { getLoginLogPageApi, exportLoginLogApi, LoginLogVO } from '@/api/system/
 
 const { t } = useI18n() // 国际化
 // 列表相关的变量
-const [registerTable, { exportList }] = useXTable({
+const [registerTable, { exportList, setProps }] = useXTable({
   allSchemas: allSchemas,
   getListApi: getLoginLogPageApi,
   exportListApi: exportLoginLogApi
 })
-
+useAdaptiveXTable([setProps])
 // 详情操作
 const detailData = ref() // 详情 Ref
 const dialogVisible = ref(false) // 是否显示弹出层
diff --git a/src/views/system/mail/account/index.vue b/src/views/system/mail/account/index.vue
index 7c4ad0f9dff8321eb024c3dd72359341682d23e6..2ddff633e8a7765a113ba90eb53d142356788d12 100644
--- a/src/views/system/mail/account/index.vue
+++ b/src/views/system/mail/account/index.vue
@@ -76,12 +76,12 @@ const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
 // 列表相关的变量
-const [registerTable, { reload, deleteData }] = useXTable({
+const [registerTable, { reload, deleteData, setProps }] = useXTable({
   allSchemas: allSchemas,
   getListApi: MailAccountApi.getMailAccountPageApi,
   deleteApi: MailAccountApi.deleteMailAccountApi
 })
-
+useAdaptiveXTable([setProps])
 // 弹窗相关的变量
 const modelVisible = ref(false) // 是否显示弹出层
 const modelTitle = ref('edit') // 弹出层标题
diff --git a/src/views/system/mail/template/index.vue b/src/views/system/mail/template/index.vue
index cb4a7e5d82332b5424e08e1cafa71aa01d0e4927..008b1b751b149aa4fa733dd0630e7cb7775e9bc0 100644
--- a/src/views/system/mail/template/index.vue
+++ b/src/views/system/mail/template/index.vue
@@ -146,12 +146,13 @@ const message = useMessage() // 消息弹窗
 const queryParams = reactive({
   accountId: null
 })
-const [registerTable, { reload, deleteData }] = useXTable({
+const [registerTable, { reload, deleteData, setProps }] = useXTable({
   allSchemas: allSchemas,
   params: queryParams,
   getListApi: MailTemplateApi.getMailTemplatePageApi,
   deleteApi: MailTemplateApi.deleteMailTemplateApi
 })
+useAdaptiveXTable([setProps])
 const accountOptions = ref<any[]>([]) // 账号下拉选项
 
 // 弹窗相关的变量
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index 0604aa93faa4955d85572a07e02d9aa85744d242..ea18d6142094ee5643b8c2a1ddaab9daea15d592 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -222,12 +222,13 @@ const treeConfig = {
   parentField: 'parentId',
   expandAll: false
 }
-const [registerTable, { reload, deleteData }] = useXTable({
+const [registerTable, { reload, deleteData, setProps }] = useXTable({
   allSchemas: allSchemas,
   treeConfig: treeConfig,
   getListApi: MenuApi.getMenuListApi,
   deleteApi: MenuApi.deleteMenuApi
 })
+useAdaptiveXTable([setProps])
 // 弹窗相关的变量
 const dialogVisible = ref(false) // 是否显示弹出层
 const dialogTitle = ref('edit') // 弹出层标题
diff --git a/src/views/system/notice/index.vue b/src/views/system/notice/index.vue
index aceadbbaa12651eba590395a4a0dfa76f1cb1d9f..cd380b7017c54d600eaf17b3b3b80bea2efe4d5b 100644
--- a/src/views/system/notice/index.vue
+++ b/src/views/system/notice/index.vue
@@ -79,11 +79,12 @@ import { rules, allSchemas } from './notice.data'
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 // 列表相关的变量
-const [registerTable, { reload, deleteData }] = useXTable({
+const [registerTable, { reload, deleteData, setProps }] = useXTable({
   allSchemas: allSchemas,
   getListApi: NoticeApi.getNoticePageApi,
   deleteApi: NoticeApi.deleteNoticeApi
 })
+useAdaptiveXTable([setProps])
 // 弹窗相关的变量
 const dialogVisible = ref(false) // 是否显示弹出层
 const dialogTitle = ref('edit') // 弹出层标题
diff --git a/src/views/system/notify/my/index.vue b/src/views/system/notify/my/index.vue
index 9f3e9b102a0def47855a12a8f236f8d080580e06..43992967cbac8ad7a3845103bb8ff121f069abb6 100644
--- a/src/views/system/notify/my/index.vue
+++ b/src/views/system/notify/my/index.vue
@@ -29,11 +29,11 @@ import * as NotifyMessageApi from '@/api/system/notify/message'
 const message = useMessage() // 消息
 
 // 列表相关的变量
-const [registerTable, { reload, getCheckboxRecords }] = useXTable({
+const [registerTable, { reload, getCheckboxRecords, setProps }] = useXTable({
   allSchemas: allSchemas,
   getListApi: NotifyMessageApi.getMyNotifyMessagePage
 })
-
+useAdaptiveXTable([setProps])
 const handleUpdateList = async () => {
   const list = getCheckboxRecords() as any as any[]
   if (list.length === 0) {
diff --git a/src/views/system/notify/template/index.vue b/src/views/system/notify/template/index.vue
index 4ec16a0abebeb586b7b0fe4ba97002260589f96a..93a0d6edb14e6c110c4557f1ee6f7d4aabc4118c 100644
--- a/src/views/system/notify/template/index.vue
+++ b/src/views/system/notify/template/index.vue
@@ -125,12 +125,12 @@ const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
 // 列表相关的变量
-const [registerTable, { reload, deleteData }] = useXTable({
+const [registerTable, { reload, deleteData, setProps }] = useXTable({
   allSchemas: allSchemas,
   getListApi: NotifyTemplateApi.getNotifyTemplatePageApi,
   deleteApi: NotifyTemplateApi.deleteNotifyTemplateApi
 })
-
+useAdaptiveXTable([setProps])
 // 弹窗相关的变量
 const modelVisible = ref(false) // 是否显示弹出层
 const modelTitle = ref('edit') // 弹出层标题
diff --git a/src/views/system/oauth2/client/index.vue b/src/views/system/oauth2/client/index.vue
index 9ff446926fe1caddd0d838007acf35e8e6aa7be1..983f7bed9f586924acbd019c68d02a9ea2005a08 100644
--- a/src/views/system/oauth2/client/index.vue
+++ b/src/views/system/oauth2/client/index.vue
@@ -139,11 +139,12 @@ const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
 // 列表相关的变量
-const [registerTable, { reload, deleteData }] = useXTable({
+const [registerTable, { reload, deleteData, setProps }] = useXTable({
   allSchemas: allSchemas,
   getListApi: ClientApi.getOAuth2ClientPageApi,
   deleteApi: ClientApi.deleteOAuth2ClientApi
 })
+useAdaptiveXTable([setProps])
 // 弹窗相关的变量
 const dialogVisible = ref(false) // 是否显示弹出层
 const dialogTitle = ref('edit') // 弹出层标题
diff --git a/src/views/system/oauth2/token/index.vue b/src/views/system/oauth2/token/index.vue
index f0dfbd9ca9d60dba13019a174b64834b0f3a2c6e..5561917f9a95f0e7cf6199948fbe98e47c49d9de 100644
--- a/src/views/system/oauth2/token/index.vue
+++ b/src/views/system/oauth2/token/index.vue
@@ -31,12 +31,12 @@ import * as TokenApi from '@/api/system/oauth2/token'
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 // 列表相关的变量
-const [registerTable, { reload }] = useXTable({
+const [registerTable, { reload, setProps }] = useXTable({
   allSchemas: allSchemas,
   topActionSlots: false,
   getListApi: TokenApi.getAccessTokenPageApi
 })
-
+useAdaptiveXTable([setProps])
 // ========== 详情相关 ==========
 const detailData = ref() // 详情 Ref
 const dialogVisible = ref(false) // 是否显示弹出层
diff --git a/src/views/system/operatelog/index.vue b/src/views/system/operatelog/index.vue
index 7f1e9bb444139e7dfaf894d65bbb1d0ea8ef13a0..1e9e64737f0a2cd9a6495d6abc7772f063f748f6 100644
--- a/src/views/system/operatelog/index.vue
+++ b/src/views/system/operatelog/index.vue
@@ -48,12 +48,12 @@ import { allSchemas } from './operatelog.data'
 
 const { t } = useI18n() // 国际化
 // 列表相关的变量
-const [registerTable, { exportList }] = useXTable({
+const [registerTable, { exportList, setProps }] = useXTable({
   allSchemas: allSchemas,
   getListApi: OperateLogApi.getOperateLogPageApi,
   exportListApi: OperateLogApi.exportOperateLogApi
 })
-
+useAdaptiveXTable([setProps])
 // 弹窗相关的变量
 const dialogVisible = ref(false) // 是否显示弹出层
 const actionLoading = ref(false) // 按钮 Loading
diff --git a/src/views/system/post/index.vue b/src/views/system/post/index.vue
index c5a13e1ef36cd83487355926756d0876ebc31780..74d6f4e9ab9da86537dfa00146a6135da9920906 100644
--- a/src/views/system/post/index.vue
+++ b/src/views/system/post/index.vue
@@ -56,13 +56,13 @@ import PostForm from './form.vue'
 const { t } = useI18n() // 国际化
 
 // 列表相关的变量
-const [registerTable, { reload, deleteData, exportList }] = useXTable({
+const [registerTable, { reload, deleteData, exportList, setProps }] = useXTable({
   allSchemas: allSchemas, // 列表配置
   getListApi: PostApi.getPostPageApi, // 加载列表的 API
   deleteApi: PostApi.deletePostApi, // 删除数据的 API
   exportListApi: PostApi.exportPostApi // 导出数据的 API
 })
-
+useAdaptiveXTable([setProps])
 // 表单相关的变量
 const modalRef = ref()
 const openModal = (type: string, id?: number) => {
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index da4b83893850d9ddc85a81c44b7d6c3a50293998..c871e5bd2b7707eec21f4f566179cda14390951c 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -137,8 +137,9 @@
                 empty-text="加载中，请稍后"
               />
             </el-card>
-          </el-form-item> </el-col
-      ></el-row>
+          </el-form-item>
+        </el-col>
+      </el-row>
     </el-form>
     <!-- 操作按钮 -->
     <template #footer>
@@ -159,10 +160,10 @@
 <script setup lang="ts" name="Role">
 import type { ElTree } from 'element-plus'
 import type { FormExpose } from '@/components/Form'
-import { handleTree, defaultProps } from '@/utils/tree'
+import { defaultProps, handleTree } from '@/utils/tree'
 import { SystemDataScopeEnum } from '@/utils/constants'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
-import { rules, allSchemas } from './role.data'
+import { allSchemas, rules } from './role.data'
 import * as RoleApi from '@/api/system/role'
 import { listSimpleMenusApi } from '@/api/system/menu'
 import { listSimpleDeptApi } from '@/api/system/dept'
@@ -171,12 +172,12 @@ import * as PermissionApi from '@/api/system/permission'
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 // 列表相关的变量
-const [registerTable, { reload, deleteData }] = useXTable({
+const [registerTable, { reload, deleteData, setProps }] = useXTable({
   allSchemas: allSchemas,
   getListApi: RoleApi.getRolePageApi,
   deleteApi: RoleApi.deleteRoleApi
 })
-
+useAdaptiveXTable([setProps])
 // ========== CRUD 相关 ==========
 const actionLoading = ref(false) // 遮罩层
 const actionType = ref('') // 操作按钮的类型
diff --git a/src/views/system/sensitiveWord/index.vue b/src/views/system/sensitiveWord/index.vue
index c3de895db8a92740ef3f3ed264a63d1c98c63677..07da2a325026c9841ddaf58a18399bfe4333b48d 100644
--- a/src/views/system/sensitiveWord/index.vue
+++ b/src/views/system/sensitiveWord/index.vue
@@ -110,12 +110,13 @@ import { rules, allSchemas } from './sensitiveWord.data'
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 // 列表相关的变量
-const [registerTable, { reload, deleteData, exportList }] = useXTable({
+const [registerTable, { reload, deleteData, exportList, setProps }] = useXTable({
   allSchemas: allSchemas,
   getListApi: SensitiveWordApi.getSensitiveWordPageApi,
   deleteApi: SensitiveWordApi.deleteSensitiveWordApi,
   exportListApi: SensitiveWordApi.exportSensitiveWordApi
 })
+useAdaptiveXTable([setProps])
 const actionLoading = ref(false) // 遮罩层
 const actionType = ref('') // 操作按钮的类型
 const dialogVisible = ref(false) // 是否显示弹出层
diff --git a/src/views/system/sms/smsChannel/index.vue b/src/views/system/sms/smsChannel/index.vue
index ee47a51aa7b33b8e86d859e66def41a40276023d..1a229ccf588ed746e8edbfbb5d0a68d6c29913dc 100644
--- a/src/views/system/sms/smsChannel/index.vue
+++ b/src/views/system/sms/smsChannel/index.vue
@@ -77,12 +77,12 @@ const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
 // 列表相关的变量
-const [registerTable, { reload, deleteData }] = useXTable({
+const [registerTable, { reload, deleteData, setProps }] = useXTable({
   allSchemas: allSchemas,
   getListApi: SmsChannelApi.getSmsChannelPageApi,
   deleteApi: SmsChannelApi.deleteSmsChannelApi
 })
-
+useAdaptiveXTable([setProps])
 // 弹窗相关的变量
 const dialogVisible = ref(false) // 是否显示弹出层
 const dialogTitle = ref('edit') // 弹出层标题
diff --git a/src/views/system/sms/smsLog/index.vue b/src/views/system/sms/smsLog/index.vue
index 334da2ad831292d043e52740ad87e44e22978f8c..b5689e22c9140da6addcaf34d6986bd8c3f1cdaa 100644
--- a/src/views/system/sms/smsLog/index.vue
+++ b/src/views/system/sms/smsLog/index.vue
@@ -36,12 +36,12 @@ import * as SmsLoglApi from '@/api/system/sms/smsLog'
 const { t } = useI18n() // 国际化
 
 // 列表相关的变量
-const [registerTable, { exportList }] = useXTable({
+const [registerTable, { exportList, setProps }] = useXTable({
   allSchemas: allSchemas,
   getListApi: SmsLoglApi.getSmsLogPageApi,
   exportListApi: SmsLoglApi.exportSmsLogApi
 })
-
+useAdaptiveXTable([setProps])
 // 弹窗相关的变量
 const dialogVisible = ref(false) // 是否显示弹出层
 const dialogTitle = ref(t('action.detail')) // 弹出层标题
diff --git a/src/views/system/sms/smsTemplate/index.vue b/src/views/system/sms/smsTemplate/index.vue
index bbc7c86369e8bcec3b31172eff6e137bc0c27652..611f5746a344c1ef47dcbf3a1afdf6a9d6675cdf 100644
--- a/src/views/system/sms/smsTemplate/index.vue
+++ b/src/views/system/sms/smsTemplate/index.vue
@@ -112,18 +112,18 @@
 import type { FormExpose } from '@/components/Form'
 // 业务相关的 import
 import * as SmsTemplateApi from '@/api/system/sms/smsTemplate'
-import { rules, allSchemas } from './sms.template.data'
+import { allSchemas, rules } from './sms.template.data'
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
 // 列表相关的变量
-const [registerTable, { reload, deleteData }] = useXTable({
+const [registerTable, { reload, deleteData, setProps }] = useXTable({
   allSchemas: allSchemas,
   getListApi: SmsTemplateApi.getSmsTemplatePageApi,
   deleteApi: SmsTemplateApi.deleteSmsTemplateApi
 })
-
+useAdaptiveXTable([setProps])
 // 弹窗相关的变量
 const dialogVisible = ref(false) // 是否显示弹出层
 const dialogTitle = ref('edit') // 弹出层标题
@@ -156,8 +156,7 @@ const handleUpdate = async (rowId: number) => {
 const handleDetail = async (rowId: number) => {
   setDialogTile('detail')
   // 设置数据
-  const res = await SmsTemplateApi.getSmsTemplateApi(rowId)
-  detailData.value = res
+  detailData.value = await SmsTemplateApi.getSmsTemplateApi(rowId)
 }
 
 // 提交按钮
diff --git a/src/views/system/tenant/index.vue b/src/views/system/tenant/index.vue
index bb1ca1a321b65975c02432842dba06065dc2c0c7..ebd8e6dffb200d42b1ebada62b95ffa7333db539 100644
--- a/src/views/system/tenant/index.vue
+++ b/src/views/system/tenant/index.vue
@@ -93,13 +93,13 @@ import { rules, allSchemas, tenantPackageOption } from './tenant.data'
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 // 列表相关的变量
-const [registerTable, { reload, deleteData, exportList }] = useXTable({
+const [registerTable, { reload, deleteData, exportList, setProps }] = useXTable({
   allSchemas: allSchemas,
   getListApi: TenantApi.getTenantPageApi,
   deleteApi: TenantApi.deleteTenantApi,
   exportListApi: TenantApi.exportTenantApi
 })
-
+useAdaptiveXTable([setProps])
 const actionLoading = ref(false) // 遮罩层
 const actionType = ref('') // 操作按钮的类型
 const dialogVisible = ref(false) // 是否显示弹出层
diff --git a/src/views/system/tenantPackage/index.vue b/src/views/system/tenantPackage/index.vue
index c8f5756a14a0abedf02234bc0b5f298541e816bc..eb656c59d40eb2a466f597bdd077c31d56dcc027 100644
--- a/src/views/system/tenantPackage/index.vue
+++ b/src/views/system/tenantPackage/index.vue
@@ -106,12 +106,12 @@ const getTree = async () => {
   menuOptions.value = handleTree(res)
 }
 
-const [registerTable, { reload, deleteData }] = useXTable({
+const [registerTable, { reload, deleteData, setProps }] = useXTable({
   allSchemas: allSchemas,
   getListApi: TenantPackageApi.getTenantPackageTypePageApi,
   deleteApi: TenantPackageApi.deleteTenantPackageTypeApi
 })
-
+useAdaptiveXTable([setProps])
 // 设置标题
 const setDialogTile = (type: string) => {
   dialogTitle.value = t('action.' + type)
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 6d65fa1ce10070089562cd34355b22f5ccfb2734..9dbb4fb1a4cf9467caefab9522694213dabf5352 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex">
-    <el-card class="w-1/5 user" :gutter="12" shadow="always">
+    <el-card class="w-1/5" :gutter="12" shadow="always">
       <template #header>
         <div class="card-header">
           <span>部门列表</span>
@@ -8,7 +8,7 @@
         </div>
       </template>
       <el-input v-model="filterText" placeholder="搜索部门" />
-      <el-scrollbar height="650">
+      <el-scrollbar>
         <el-tree
           ref="treeRef"
           node-key="id"
@@ -22,7 +22,7 @@
         />
       </el-scrollbar>
     </el-card>
-    <el-card class="w-4/5 user" style="margin-left: 10px" :gutter="12" shadow="hover">
+    <el-card class="w-4/5" style="margin-left: 10px" :gutter="12" shadow="hover">
       <template #header>
         <div class="card-header">
           <span>{{ tableTitle }}</span>
@@ -147,7 +147,7 @@
             v-for="item in postOptions"
             :key="item.id"
             :label="item.name"
-            :value="(item.id as unknown as number)"
+            :value="item.id"
           />
         </el-select>
       </template>
@@ -169,7 +169,7 @@
             </template>
           </el-tag>
         </template>
-        <template v-else> </template>
+        <template v-else></template>
       </template>
     </Descriptions>
     <!-- 操作按钮 -->
@@ -289,13 +289,14 @@ const queryParams = reactive({
 // ========== 列表相关 ==========
 const tableTitle = ref('用户列表')
 // 列表相关的变量
-const [registerTable, { reload, deleteData, exportList }] = useXTable({
+const [registerTable, { reload, deleteData, exportList, setProps }] = useXTable({
   allSchemas: allSchemas,
   params: queryParams,
   getListApi: UserApi.getUserPageApi,
   deleteApi: UserApi.deleteUserApi,
   exportListApi: UserApi.exportUserApi
 })
+useAdaptiveXTable([setProps], 'Card')
 // ========== 创建部门树结构 ==========
 const filterText = ref('')
 const deptOptions = ref<Tree[]>([]) // 树形结构
@@ -332,26 +333,24 @@ const getPostOptions = async () => {
   const res = await listSimplePostsApi()
   postOptions.value.push(...res)
 }
-const dataFormater = (val) => {
-  return deptFormater(deptOptions.value, val)
-}
+const dataFormater = computed(() => (deptId: number) => deptFormater(deptOptions.value, deptId))
+
 //部门回显
-const deptFormater = (ary, val: any) => {
-  var o = ''
-  if (ary && val) {
-    for (const v of ary) {
-      if (v.id == val) {
-        o = v.name
-        if (o) return o
-      } else if (v.children?.length) {
-        o = deptFormater(v.children, val)
-        if (o) return o
+const deptFormater = (arr: Tree[], deptId: number) => {
+  let deptName = ''
+  if (arr && deptId) {
+    for (const item of arr) {
+      if (item.id === deptId) {
+        deptName = item.name
+        break
+      }
+      if (item.children) {
+        deptName = deptFormater(item.children, deptId) ?? ''
+        break
       }
     }
-    return o
-  } else {
-    return val
   }
+  return deptName
 }
 
 // 设置标题
@@ -363,7 +362,7 @@ const setDialogTile = async (type: string) => {
 
 // 新增操作
 const handleCreate = async () => {
-  setDialogTile('create')
+  await setDialogTile('create')
   // 重置表单
   await nextTick()
   if (allSchemas.formSchema[0].field !== 'username') {
@@ -388,7 +387,7 @@ const handleCreate = async () => {
 
 // 修改操作
 const handleUpdate = async (rowId: number) => {
-  setDialogTile('update')
+  await setDialogTile('update')
   await nextTick()
   unref(formRef)?.delSchema('username')
   unref(formRef)?.delSchema('password')
@@ -569,10 +568,6 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-.user {
-  height: 780px;
-  max-height: 800px;
-}
 .card-header {
   display: flex;
   justify-content: space-between;
diff --git a/src/views/system/user/user.data.ts b/src/views/system/user/user.data.ts
index fd8a36775d0ca754bb16a237f4acb20cbab09a32..b81825542c058ff8f5965bab7b600da48ceaa1d3 100644
--- a/src/views/system/user/user.data.ts
+++ b/src/views/system/user/user.data.ts
@@ -1,7 +1,7 @@
 import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
 // 国际化
 const { t } = useI18n()
-const validateMobile = (rule: any, value: any, callback: any) => {
+const validateMobile = (_, value: any, callback: any) => {
   const reg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
   if (value === '') {
     callback(new Error('请输入联系手机'))
@@ -13,7 +13,7 @@ const validateMobile = (rule: any, value: any, callback: any) => {
     }
   }
 }
-const validatePassword = (rule: any, value: any, callback: any) => {
+const validatePassword = (_, value: any, callback: any) => {
   const reg = /^(?! +$).+/
   if (value === '') {
     callback(new Error('请输入用户密码'))