diff --git a/.vscode/settings.json b/.vscode/settings.json
index ed5df1889..477a696c0 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,7 +2,7 @@
   "typescript.tsdk": "./node_modules/typescript/lib",
   "volar.tsPlugin": true,
   "volar.tsPluginStatus": false,
-  "npm.packageManager": "pnpm",
+  "npm.packageManager": "yarn",
   "editor.tabSize": 2,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "files.eol": "\n",
@@ -107,4 +107,4 @@
     "vue",
     "react"
   ]
-}
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 5264b516f..4b7787e43 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "@vueuse/core": "^7.3.0",
     "ant-design-vue": "3.0.0-alpha.15",
     "axios": "^0.24.0",
-    "core-js": "^3.19.3",
+    "core-js": "^3.20.0",
     "dayjs": "^1.10.7",
     "lodash": "^4.17.21",
     "mitt": "^3.0.0",
@@ -35,7 +35,7 @@
     "@commitlint/cli": "^15.0.0",
     "@commitlint/config-conventional": "^15.0.0",
     "@types/lodash": "^4.14.178",
-    "@types/node": "^16.11.13",
+    "@types/node": "^17.0.0",
     "@types/webpack-env": "^1.16.3",
     "@typescript-eslint/eslint-plugin": "^5.7.0",
     "@typescript-eslint/parser": "^5.7.0",
@@ -50,7 +50,7 @@
     "babel-plugin-import": "^1.13.3",
     "babel-plugin-lodash": "^3.3.4",
     "commitizen": "^4.2.4",
-    "compression-webpack-plugin": "^9.1.2",
+    "compression-webpack-plugin": "^9.2.0",
     "eslint": "^8.4.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
diff --git a/src/api/system/user/index.ts b/src/api/system/user/index.ts
index 6c0689e09..5c19e0ab1 100644
--- a/src/api/system/user/index.ts
+++ b/src/api/system/user/index.ts
@@ -1,18 +1,12 @@
 import { request } from '@/utils/request';
 import Api from '@/core/permission/modules/sys/user';
-import { generatePermCode } from '@/core/permission/modules';
 
 export function getUserListPage(data: API.PageParams<{ departmentIds: number[] }>) {
-  return request<API.TableListResult<API.UserListPageResult>>(
-    {
-      url: Api.page,
-      method: 'post',
-      data,
-    },
-    {
-      permCode: generatePermCode(Api.page),
-    },
-  );
+  return request<API.TableListResult<API.UserListPageResult>>({
+    url: Api.page,
+    method: 'post',
+    data,
+  });
 }
 
 export function createUser(data: API.CreateUserParams) {
@@ -23,23 +17,17 @@ export function createUser(data: API.CreateUserParams) {
       data,
     },
     {
-      permCode: generatePermCode(Api.add),
       successMsg: '创建用户成功',
     },
   );
 }
 
 export function getUserInfo(query: { userId: number }) {
-  return request<API.AdminUserInfo>(
-    {
-      url: Api.info,
-      method: 'get',
-      params: query,
-    },
-    {
-      permCode: generatePermCode(Api.info),
-    },
-  );
+  return request<API.AdminUserInfo>({
+    url: Api.info,
+    method: 'get',
+    params: query,
+  });
 }
 
 export function updateUser(data: API.UpdateAdminInfoParams) {
@@ -50,34 +38,23 @@ export function updateUser(data: API.UpdateAdminInfoParams) {
       data,
     },
     {
-      permCode: generatePermCode(Api.update),
       successMsg: '修改用户成功',
     },
   );
 }
 
 export function updateUserPassword(data: API.UpdateAdminUserPassword) {
-  return request(
-    {
-      url: Api.password,
-      method: 'post',
-      data,
-    },
-    {
-      permCode: generatePermCode(Api.password),
-    },
-  );
+  return request({
+    url: Api.password,
+    method: 'post',
+    data,
+  });
 }
 
 export function deleteUsers(data: { userIds: number[] }) {
-  return request(
-    {
-      url: Api.delete,
-      method: 'post',
-      data,
-    },
-    {
-      permCode: generatePermCode(Api.delete),
-    },
-  );
+  return request({
+    url: Api.delete,
+    method: 'post',
+    data,
+  });
 }
diff --git a/src/components/basic/BasicHelp.vue b/src/components/basic/BasicHelp.vue
index 7d50191ad..744508f6e 100644
--- a/src/components/basic/BasicHelp.vue
+++ b/src/components/basic/BasicHelp.vue
@@ -86,3 +86,9 @@
     },
   });
 </script>
+
+<style lang="less">
+  .basic-help__wrap p {
+    margin-bottom: 0;
+  }
+</style>
diff --git a/src/components/check-box/index.vue b/src/components/check-box/index.vue
new file mode 100644
index 000000000..18f259a7b
--- /dev/null
+++ b/src/components/check-box/index.vue
@@ -0,0 +1,56 @@
+<template>
+  <Checkbox v-bind="getProps" v-model:checked="checkedModel" @change="handleChange">
+    <slot></slot>
+  </Checkbox>
+</template>
+
+<script lang="ts">
+  export default {
+    inheritAttrs: false,
+  };
+</script>
+
+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import { Checkbox } from 'ant-design-vue';
+  import { checkboxProps } from 'ant-design-vue/lib/checkbox';
+  import { omit } from 'lodash';
+
+  const props = defineProps({
+    ...checkboxProps(),
+    trueValue: {
+      type: [Number, Boolean, String],
+      default: true,
+    },
+    falseValue: {
+      type: [Number, Boolean, String],
+      default: false,
+    },
+  });
+
+  const emit = defineEmits(['update:checked', 'change']);
+
+  const getProps = computed(() => {
+    return omit(props, ['onUpdate:checked', 'onChange']);
+  });
+
+  const checkedModel = computed<boolean>({
+    get() {
+      return props.checked === props.trueValue;
+    },
+    set(val) {
+      emit('update:checked', val ? props.trueValue : props.falseValue);
+    },
+  });
+
+  const handleChange = (e) => {
+    const evt = {
+      ...e,
+      target: {
+        ...e.target,
+        checked: e.target.checked ? props.trueValue : props.falseValue,
+      },
+    };
+    emit('change', evt);
+  };
+</script>
diff --git a/src/components/dynamic-table/components/table-settings/column-setting.vue b/src/components/dynamic-table/components/table-settings/column-setting.vue
index e552340b1..e9ca34d80 100644
--- a/src/components/dynamic-table/components/table-settings/column-setting.vue
+++ b/src/components/dynamic-table/components/table-settings/column-setting.vue
@@ -1,7 +1,7 @@
 <template>
   <Tooltip placement="top">
     <template #title>
-      <span>密度</span>
+      <span>列设置</span>
     </template>
 
     <Popover
@@ -12,13 +12,7 @@
     >
       <template #title>
         <div class="popover-title">
-          <Checkbox
-            :indeterminate="indeterminate"
-            v-model:checked="checkAll"
-            @change="onCheckAllChange"
-          >
-            列展示
-          </Checkbox>
+          <Checkbox :indeterminate="indeterminate" v-model:checked="checkAll"> 列展示 </Checkbox>
 
           <Checkbox v-model:checked="checkIndex" @change="handleIndexCheckChange">
             序号列
@@ -29,26 +23,42 @@
       </template>
 
       <template #content>
-        <Checkbox.Group v-model:value="checkedList" @change="onChange" ref="columnListRef">
-          <template v-for="item in plainOptions" :key="item.value">
+        <div ref="columnListRef">
+          <template v-for="item in tableColumns" :key="table.getColumnKey(item)">
             <div class="check-item">
-              <DragOutlined class="table-column-drag-icon" />
-              <Checkbox :value="item.value">
-                {{ item.label }}
-              </Checkbox>
-
-              <Tooltip placement="bottomLeft" :mouseLeaveDelay="0.4">
-                <template #title> 固定到左侧 </template>
-                <VerticalLeftOutlined />
-              </Tooltip>
-              <Divider type="vertical" />
-              <Tooltip placement="bottomLeft" :mouseLeaveDelay="0.4">
-                <template #title> 固定到右侧 </template>
-                <VerticalRightOutlined />
-              </Tooltip>
+              <div style="padding: 4px 16px 8px 0">
+                <DragOutlined class="table-column-drag-icon pr-6px cursor-pointer" />
+                <Checkbox
+                  v-model:checked="item.hideInTable"
+                  :true-value="false"
+                  :false-value="true"
+                >
+                  {{ item.title }}
+                </Checkbox>
+              </div>
+
+              <div class="column-fixed">
+                <Tooltip placement="bottomLeft" :mouseLeaveDelay="0.4">
+                  <template #title> 固定到左侧 </template>
+                  <VerticalRightOutlined
+                    class="fixed-left"
+                    :class="{ active: item.fixed === 'left' }"
+                    @click="handleColumnFixed(item, 'left')"
+                  />
+                </Tooltip>
+                <Divider type="vertical" />
+                <Tooltip placement="bottomLeft" :mouseLeaveDelay="0.4">
+                  <template #title> 固定到右侧 </template>
+                  <VerticalLeftOutlined
+                    class="fixed-right"
+                    :class="{ active: item.fixed === 'right' }"
+                    @click="handleColumnFixed(item, 'right')"
+                  />
+                </Tooltip>
+              </div>
             </div>
           </template>
-        </Checkbox.Group>
+        </div>
       </template>
       <SettingOutlined />
     </Popover>
@@ -56,9 +66,8 @@
 </template>
 
 <script lang="ts" setup>
-  import { computed, ref, unref } from 'vue';
-  import { Tooltip, Popover, Checkbox, Divider } from 'ant-design-vue';
-  // import type { TableProps } from 'ant-design-vue';
+  import { computed, nextTick, ref, unref, watch } from 'vue';
+  import { Tooltip, Popover, Divider } from 'ant-design-vue';
   import {
     SettingOutlined,
     VerticalRightOutlined,
@@ -66,41 +75,108 @@
     DragOutlined,
   } from '@ant-design/icons-vue';
   import { useTableContext } from '../../hooks/useTableContext';
-
-  interface Options {
-    label: string;
-    value: string;
-    fixed?: boolean | 'left' | 'right';
-  }
+  import { cloneDeep } from 'lodash';
+  import Checkbox from '@/components/check-box/index.vue';
+  import type { TableColumn } from '../../typing';
+  import { useSortable } from '@/hooks/useSortable';
+  import { isNullAndUnDef } from '@/utils/is';
 
   const table = useTableContext();
+  let inited = false;
+  const defaultColumns = cloneDeep(table.columns);
+  const defaultShowIndex = !!table.showIndex;
+
+  const tableColumns = ref<TableColumn[]>([]);
+
+  const checkAll = computed<boolean>({
+    get() {
+      return tableColumns.value.length > 0 && tableColumns.value.every((n) => !n.hideInTable);
+    },
+    set(value) {
+      tableColumns.value.forEach((item) => (item.hideInTable = !value));
+    },
+  });
 
-  // const cachePlainOptions = ref<Options[]>([]);
-  const plainOptions = ref<Options[]>([]);
-
-  // const plainSortOptions = ref<Options[]>([]);
+  const checkIndex = ref(defaultShowIndex);
+  const columnListRef = ref<HTMLDivElement>();
 
-  const columnListRef = ref();
-  const checkedList = ref<string[]>([]);
-  const checkAll = ref<boolean>(true);
-  // const defaultCheckList = ref<string[]>([]);
-  const checkIndex = ref<boolean>(false);
+  // 初始化选中状态
+  const initCheckStatus = () => {
+    tableColumns.value = cloneDeep(defaultColumns);
+    checkIndex.value = defaultShowIndex;
+    tableColumns.value.forEach((item) => (item.hideInTable ??= false));
+  };
+  initCheckStatus();
 
   const indeterminate = computed(() => {
-    const len = plainOptions.value.length;
-    let checkedLen = checkedList.value.length;
-    unref(checkIndex) && checkedLen--;
-    return checkedLen > 0 && checkedLen < len;
+    return (
+      tableColumns.value.length > 0 &&
+      tableColumns.value.some((n) => n.hideInTable) &&
+      tableColumns.value.some((n) => !n.hideInTable)
+    );
   });
 
-  const handleIndexCheckChange = () => {};
+  watch(tableColumns.value, (columns) => {
+    table.setProps({ columns });
+  });
 
-  const onCheckAllChange = () => {};
+  const handleIndexCheckChange = (e) => {
+    table.setProps({ showIndex: e.target.checked });
+  };
 
-  const handleVisibleChange = () => {
-    table.setProps({});
+  const handleColumnFixed = (columItem: TableColumn, direction: 'left' | 'right') => {
+    columItem.fixed = columItem.fixed === direction ? false : direction;
+    table.setProps({ columns: tableColumns.value });
   };
 
-  const onChange = () => {};
-  const reset = () => {};
+  async function handleVisibleChange() {
+    if (inited) return;
+    await nextTick();
+    const columnListEl = unref(columnListRef);
+    if (!columnListEl) return;
+
+    // Drag and drop sort
+    const { initSortable } = useSortable(columnListEl, {
+      handle: '.table-column-drag-icon',
+      onEnd: (evt) => {
+        const { oldIndex, newIndex } = evt;
+
+        if (isNullAndUnDef(oldIndex) || isNullAndUnDef(newIndex) || oldIndex === newIndex) {
+          return;
+        }
+        // Sort column
+        const columns = tableColumns.value;
+        if (oldIndex > newIndex) {
+          columns.splice(newIndex, 0, columns[oldIndex]);
+          columns.splice(oldIndex + 1, 1);
+        } else {
+          columns.splice(newIndex + 1, 0, columns[oldIndex]);
+          columns.splice(oldIndex, 1);
+        }
+        table.setProps({ columns });
+      },
+    });
+    initSortable();
+    inited = true;
+  }
+
+  const reset = () => {
+    table.setProps({ columns: cloneDeep(defaultColumns), showIndex: defaultShowIndex });
+    initCheckStatus();
+  };
 </script>
+
+<style lang="less" scoped>
+  .check-item {
+    @apply flex justify-between;
+  }
+  .column-fixed {
+    .fixed-right,
+    .fixed-left {
+      &.active,
+      &:hover {
+        color: #1890ff;
+      }
+    }
+  }
+</style>
diff --git a/src/components/dynamic-table/components/tool-bar/index.vue b/src/components/dynamic-table/components/tool-bar/index.vue
index 622c8ac2b..a5665f7e3 100644
--- a/src/components/dynamic-table/components/tool-bar/index.vue
+++ b/src/components/dynamic-table/components/tool-bar/index.vue
@@ -3,7 +3,7 @@
     <slot name="headerTitle">
       <div class="title">
         {{ title }}
-        <BasicHelp v-if="titleTooltip" :text="titleTooltip" />
+        <BasicHelp v-if="titleTooltip" class="ml-6px pt-3px" :text="titleTooltip" />
       </div>
     </slot>
 
diff --git a/src/components/dynamic-table/dynamic-table.vue b/src/components/dynamic-table/dynamic-table.vue
index 5200079bd..e540b1f9e 100644
--- a/src/components/dynamic-table/dynamic-table.vue
+++ b/src/components/dynamic-table/dynamic-table.vue
@@ -2,7 +2,12 @@
   <div>
     <QueryForm v-if="search" :columns="columns" :formProps="formProps" @query="queryTable" />
     <div class="bg-white">
-      <ToolBar v-if="showToolBar" :title="headerTitle">
+      <ToolBar
+        v-if="showToolBar"
+        :title="headerTitle"
+        :titleTooltip="titleTooltip"
+        :showTableSetting="showTableSetting"
+      >
         <template #headerTitle v-if="$slots.headerTitle">
           <slot name="headerTitle"></slot>
         </template>
@@ -37,7 +42,7 @@
           </template>
           <!-- 表格行操作end -->
           <template
-            v-for="slotItem in columns.filter((item) => item[slotName])"
+            v-for="slotItem in getBindValues.columns?.filter((item) => item[slotName])"
             :key="getColumnKey(slotItem)"
           >
             <component
@@ -52,11 +57,10 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="tsx">
   import {
     defineComponent,
     reactive,
-    PropType,
     ref,
     toRefs,
     watch,
@@ -65,14 +69,13 @@
     unref,
   } from 'vue';
   import { Table, Space } from 'ant-design-vue';
-  import { tableProps } from 'ant-design-vue/lib/table';
-  import type { TableProps, FormProps } from 'ant-design-vue';
   import { usePagination } from './hooks/usePagination';
-  import type { LoadDataParams, TableColumn, OnChangeCallbackParams } from './typing';
-  import { isObject } from '@/utils/is';
+  import type { TableColumn, OnChangeCallbackParams } from './typing';
+  import { isBoolean, isObject } from '@/utils/is';
   import { createTableContext } from './hooks/useTableContext';
   import { omit } from 'lodash';
   import { TableAction, QueryForm, ToolBar } from './components';
+  import dynamicTableProps, { TableProps } from './props';
 
   export default defineComponent({
     name: 'DynamicTable',
@@ -84,40 +87,8 @@
       ToolBar,
     },
     inheritAttrs: false,
-    props: {
-      ...tableProps(),
-      /** 表单属性配置 */
-      formProps: {
-        type: Object as PropType<FormProps>,
-        default: () => ({}),
-      },
-      columns: {
-        type: Object as PropType<TableColumn[]>,
-        required: true,
-      },
-      dataRequest: {
-        // 获取列表数据函数API
-        type: Function as PropType<
-          (
-            params?: LoadDataParams,
-            onChangeParams?: OnChangeCallbackParams,
-          ) => Promise<API.TableListResult>
-        >,
-      },
-      /** 是否显示表格工具栏 */
-      showToolBar: {
-        type: Boolean,
-        default: true,
-      },
-      /** 表格标题 */
-      headerTitle: String,
-      /** 是否显示搜索表单 */
-      search: {
-        type: Boolean,
-        default: true,
-      },
-    },
-    emits: ['change', 'update:pageOption'],
+    props: dynamicTableProps,
+    emits: ['change'],
     setup(props, { emit, slots }) {
       createTableContext(getCurrentInstance()!);
 
@@ -187,11 +158,13 @@
           Object.is(props.dataSource, undefined) &&
           Object.prototype.toString.call(props.dataRequest).includes('Function')
         ) {
-          const _pagination = unref(paginationRef);
+          const _pagination = unref(paginationRef)!;
+          // 是否启用了分页
+          const enablePagination = isObject(_pagination);
           const queryParams = {
             ...params,
           };
-          if (isObject(_pagination)) {
+          if (enablePagination) {
             Object.assign(queryParams, {
               page: _pagination.current,
               limit: _pagination.pageSize,
@@ -203,10 +176,20 @@
             .finally(() => (state.loading = false));
 
           if (data?.pagination) {
+            const { page, size, total } = data.pagination;
+
+            if (enablePagination && _pagination?.current) {
+              // 有分页时,删除当前页最后一条数据时 往前一页查询
+              if (data?.list.length === 0 && total > 0 && page > 1) {
+                _pagination.current--;
+                return refreshTable();
+              }
+            }
+
             Object.assign(unref(paginationRef), {
-              current: ~~data?.pagination.page,
-              pageSize: ~~data?.pagination.size,
-              total: ~~data?.pagination.total,
+              current: ~~page,
+              pageSize: ~~size,
+              total: ~~total,
             });
           }
 
@@ -244,8 +227,27 @@
 
       const getBindValues = computed(() => {
         const props = unref(getProps);
+        const columns = (props.columns as TableColumn[]).filter((n) => !n.hideInTable);
+        // 是否添加序号列
+        if (props.showIndex) {
+          columns.unshift({
+            dataIndex: '$$index',
+            title: '序号',
+            width: 60,
+            align: 'center',
+            bodyCell: ({ index }) => {
+              const getPagination = unref(paginationRef);
+              if (isBoolean(getPagination)) {
+                return <>{`${index + 1}`}</>;
+              }
+              const { current = 1, pageSize = 10 } = getPagination!;
+              return <>{((current < 1 ? 1 : current) - 1) * pageSize + index + 1}</>;
+            },
+          });
+        }
         let propsData: Recordable = {
           ...props,
+          columns,
           rowKey: props.rowKey ?? 'id',
           loading: state.loading,
           tableLayout: 'fixed',
@@ -259,20 +261,6 @@
         return propsData;
       });
 
-      // 操作事件
-      // const actionEvent = async (record, func, actionType = '') => {
-      //   try {
-      //     // 将reloadTableData放入宏任务中,等待当前微任务拿到结果进行判断操作，再请求表格数据
-      //     await func({ record, props }, () => setTimeout(reloadTableData));
-      //     // 如果为删除操作,并且删除成功，当前的表格数据条数小于2条,则当前页数减一,即请求前一页
-      //     if (actionType == 'del' && state.tableData.length < 2) {
-      //       unref(paginationRef).current = Math.max(1, unref(paginationRef).current - 1);
-      //     }
-      //   } catch (error) {
-      //     console.log(error);
-      //   }
-      // };
-
       /**
        * @description 分页改变
        */
@@ -291,7 +279,7 @@
 
       // 获取表格列key
       const getColumnKey = (column: TableColumn) => {
-        return column.key || column.dataIndex;
+        return column?.key || column?.dataIndex;
       };
 
       return {
diff --git a/src/components/dynamic-table/hooks/usePagination.ts b/src/components/dynamic-table/hooks/usePagination.ts
index cefd99c78..2590c3b6b 100644
--- a/src/components/dynamic-table/hooks/usePagination.ts
+++ b/src/components/dynamic-table/hooks/usePagination.ts
@@ -2,20 +2,6 @@ import { ref } from 'vue';
 // import Pagination from 'ant-design-vue/lib/pagination/Pagination'
 import type { TableProps } from 'ant-design-vue';
 
-// export interface PageOption {
-//   current?: number;
-//   pageSize?: number;
-//   total?: number;
-//   pageSizeOptions?: string[]; // 指定每页可以显示多少条
-//   showSizeChanger?: boolean; // 显示可改变每页数量
-//   showQuickJumper?: boolean; // 是否显示跳转
-//   showTotal?: () => string;
-//   onChange?: (current, pageSize) => void; // 页码改变
-//   onShowSizeChange?: (current, pageSize) => void; // pageSize变化
-//   pageChange?: (current, pageSize) => void; // 页码或pageSize变化触发
-//   [key: string]: any;
-// }
-
 export type Pagination = TableProps['pagination'];
 
 export function usePagination(pageOption: Pagination) {
diff --git a/src/components/dynamic-table/hooks/useTableContext.ts b/src/components/dynamic-table/hooks/useTableContext.ts
index 73f0f7e12..a765af86d 100644
--- a/src/components/dynamic-table/hooks/useTableContext.ts
+++ b/src/components/dynamic-table/hooks/useTableContext.ts
@@ -1,14 +1,12 @@
-import DynamicTable from '../dynamic-table.vue';
+import { DynamicTableInstance } from '../';
 import { provide, inject, ComponentInternalInstance } from 'vue';
 
 const key = Symbol('dynamic-table');
 
-export type TableInstance = InstanceType<typeof DynamicTable>;
-
 export function createTableContext(instance: ComponentInternalInstance) {
   provide(key, instance.proxy);
 }
 
-export function useTableContext(): TableInstance {
-  return inject(key) as TableInstance;
+export function useTableContext(): DynamicTableInstance {
+  return inject(key) as DynamicTableInstance;
 }
diff --git a/src/components/dynamic-table/props.ts b/src/components/dynamic-table/props.ts
new file mode 100644
index 000000000..61660ce38
--- /dev/null
+++ b/src/components/dynamic-table/props.ts
@@ -0,0 +1,55 @@
+import type { PropType } from 'vue';
+import { tableProps } from 'ant-design-vue/lib/table';
+import type { FormProps } from 'ant-design-vue';
+import type { LoadDataParams, TableColumn, OnChangeCallbackParams } from './typing';
+
+export const props = {
+  ...tableProps(),
+  /** 表单属性配置 */
+  formProps: {
+    type: Object as PropType<FormProps>,
+    default: () => ({}),
+  },
+  columns: {
+    type: Array as PropType<TableColumn[]>,
+    required: true,
+    default: () => [] as TableColumn[],
+  },
+  dataRequest: {
+    // 获取列表数据函数API
+    type: Function as PropType<
+      (
+        params?: LoadDataParams,
+        onChangeParams?: OnChangeCallbackParams,
+      ) => Promise<API.TableListResult>
+    >,
+  },
+  /** 是否显示索引号 */
+  showIndex: {
+    type: Boolean as PropType<boolean>,
+    default: false,
+  },
+  /** 是否显示表格工具栏 */
+  showToolBar: {
+    type: Boolean as PropType<boolean>,
+    default: true,
+  },
+  /** 是否显示表格设置 */
+  showTableSetting: {
+    type: Boolean as PropType<boolean>,
+    default: true,
+  },
+  /** 表格标题 */
+  headerTitle: String as PropType<string>,
+  /** 表格标题提示信息 */
+  titleTooltip: String as PropType<string>,
+  /** 是否显示搜索表单 */
+  search: {
+    type: Boolean as PropType<boolean>,
+    default: true,
+  },
+};
+
+export type TableProps = typeof props;
+
+export default props;
diff --git a/src/hooks/useSortable.ts b/src/hooks/useSortable.ts
new file mode 100644
index 000000000..4c66b6af1
--- /dev/null
+++ b/src/hooks/useSortable.ts
@@ -0,0 +1,21 @@
+import { nextTick, unref } from 'vue';
+import type { Ref } from 'vue';
+import type { Options } from 'sortablejs';
+
+export function useSortable(el: HTMLElement | Ref<HTMLElement>, options?: Options) {
+  function initSortable() {
+    nextTick(async () => {
+      if (!el) return;
+
+      const Sortable = (await import('sortablejs')).default;
+      Sortable.create(unref(el), {
+        animation: 500,
+        delay: 400,
+        delayOnTouchOnly: true,
+        ...options,
+      });
+    });
+  }
+
+  return { initSortable };
+}
diff --git a/src/views/system/permission/user/columns.tsx b/src/views/system/permission/user/columns.tsx
index ce0d2bb9b..0d9e77675 100644
--- a/src/views/system/permission/user/columns.tsx
+++ b/src/views/system/permission/user/columns.tsx
@@ -104,7 +104,7 @@ export const getColumns = (columnParams: ColumnsParams): TableColumn<TableListIt
     },
     {
       title: '操作',
-      width: 190,
+      width: 220,
       dataIndex: '$action',
       hideInSearch: true,
       align: 'center',
diff --git a/src/views/system/permission/user/index.vue b/src/views/system/permission/user/index.vue
index b1274b995..2a410e102 100644
--- a/src/views/system/permission/user/index.vue
+++ b/src/views/system/permission/user/index.vue
@@ -45,6 +45,8 @@
       <DynamicTable
         ref="dynamicTableRef"
         header-title="用户管理"
+        show-index
+        titleTooltip="请不要随意删除用户，避免到影响其他用户的使用。"
         :data-request="loadTableData"
         :columns="columns"
         :scroll="{ x: 2000 }"
diff --git a/yarn.lock b/yarn.lock
index 9830f3079..4c5364d81 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1342,11 +1342,16 @@
   resolved "https://registry.npmmirror.com/@types/minimist/download/@types/minimist-1.2.2.tgz#ee771e2ba4b3dc5b372935d549fd9617bf345b8c"
   integrity sha1-7nceK6Sz3Fs3KTXVSf2WF780W4w=
 
-"@types/node@*", "@types/node@^16.11.13":
+"@types/node@*":
   version "16.11.13"
   resolved "https://registry.npmmirror.com/@types/node/download/@types/node-16.11.13.tgz#6b71641b81a98c6a538d89892440c06f147edddc"
   integrity sha512-eUXZzHLHoZqj1frtUetNkUetYoJ6X55UmrVnFD4DMhVeAmwLjniZhtBmsRiemQh4uq4G3vUra/Ws/hs9vEvL3Q==
 
+"@types/node@^17.0.0":
+  version "17.0.0"
+  resolved "https://registry.npmmirror.com/@types/node/download/@types/node-17.0.0.tgz#62797cee3b8b497f6547503b2312254d4fe3c2bb"
+  integrity sha512-eMhwJXc931Ihh4tkU+Y7GiLzT/y/DBNpNtr4yU9O2w3SYBsr9NaOPhQlLKRmoWtI54uNwuo0IOUFQjVOTZYRvw==
+
 "@types/normalize-package-data@^2.4.0":
   version "2.4.1"
   resolved "https://registry.npmmirror.com/@types/normalize-package-data/download/@types/normalize-package-data-2.4.1.tgz?cache=0&sync_timestamp=1637268858625&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40types%2Fnormalize-package-data%2Fdownload%2F%40types%2Fnormalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301"
@@ -2983,10 +2988,10 @@ compressible@~2.0.16:
   dependencies:
     mime-db ">= 1.43.0 < 2"
 
-compression-webpack-plugin@^9.1.2:
-  version "9.1.2"
-  resolved "https://registry.npmmirror.com/compression-webpack-plugin/download/compression-webpack-plugin-9.1.2.tgz#55490e6eca44f93024c26a235ac28f8f938cdd9b"
-  integrity sha512-mRVfU0G9tlZhCN/DUQm4Kcq0QdZOYd6E2FeJUvKM9hTUUYtBffHNnfkGvUuZXfv/zPlVau4v7goMUkuDL/noBg==
+compression-webpack-plugin@^9.2.0:
+  version "9.2.0"
+  resolved "https://registry.npmmirror.com/compression-webpack-plugin/download/compression-webpack-plugin-9.2.0.tgz#57fd539d17c5907eebdeb4e83dcfe2d7eceb9ef6"
+  integrity sha512-R/Oi+2+UHotGfu72fJiRoVpuRifZT0tTC6UqFD/DUo+mv8dbOow9rVOuTvDv5nPPm3GZhHL/fKkwxwIHnJ8Nyw==
   dependencies:
     schema-utils "^4.0.0"
     serialize-javascript "^6.0.0"
@@ -3121,11 +3126,16 @@ core-js-compat@^3.18.0, core-js-compat@^3.19.1, core-js-compat@^3.8.3:
     browserslist "^4.18.1"
     semver "7.0.0"
 
-core-js@^3.15.1, core-js@^3.19.3, core-js@^3.8.3:
+core-js@^3.15.1, core-js@^3.8.3:
   version "3.19.3"
   resolved "https://registry.npmmirror.com/core-js/download/core-js-3.19.3.tgz#6df8142a996337503019ff3235a7022d7cdf4559"
   integrity sha512-LeLBMgEGSsG7giquSzvgBrTS7V5UL6ks3eQlUSbN8dJStlLFiRzUm5iqsRyzUB8carhfKjkJ2vzKqE6z1Vga9g==
 
+core-js@^3.20.0:
+  version "3.20.0"
+  resolved "https://registry.npmmirror.com/core-js/download/core-js-3.20.0.tgz#1c5ac07986b8d15473ab192e45a2e115a4a95b79"
+  integrity sha512-KjbKU7UEfg4YPpskMtMXPhUKn7m/1OdTHTVjy09ScR2LVaoUXe8Jh0UdvN2EKUR6iKTJph52SJP95mAB0MnVLQ==
+
 core-util-is@~1.0.0:
   version "1.0.3"
   resolved "https://registry.nlark.com/core-util-is/download/core-util-is-1.0.3.tgz?cache=0&sync_timestamp=1630420570787&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcore-util-is%2Fdownload%2Fcore-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
@@ -7632,7 +7642,7 @@ sockjs@^0.3.21:
 
 sortablejs@^1.14.0:
   version "1.14.0"
-  resolved "https://registry.nlark.com/sortablejs/download/sortablejs-1.14.0.tgz?cache=0&sync_timestamp=1625423971526&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsortablejs%2Fdownload%2Fsortablejs-1.14.0.tgz#6d2e17ccbdb25f464734df621d4f35d4ab35b3d8"
+  resolved "https://registry.nlark.com/sortablejs/download/sortablejs-1.14.0.tgz#6d2e17ccbdb25f464734df621d4f35d4ab35b3d8"
   integrity sha1-bS4XzL2yX0ZHNN9iHU811Ks1s9g=
 
 source-map-js@^1.0.1: