diff --git a/src/components/CronModal/index.vue b/src/components/CronModal/index.vue
index 5129a023..abd76ff7 100644
--- a/src/components/CronModal/index.vue
+++ b/src/components/CronModal/index.vue
@@ -1,9 +1,10 @@
 <template>
-  <a-modal
+  <ProModal
+    :drag="true"
+    :destroyOnClose="true"
     :title="t('components.CronModal.title')"
     :visible="props.visible"
     :body-style="{ padding: '0 24px' }"
-    :destroy-on-close="true"
     @cancel="fnCronModal(false)"
     @ok="fnCronModal(true)"
   >
@@ -31,7 +32,7 @@
       v-model:value="cronStr"
       disabled
     />
-  </a-modal>
+  </ProModal>
 </template>
 <script lang="ts" setup>
 import CronSecond from './components/Second.vue';
diff --git a/src/components/DraggableModal/index.vue b/src/components/DraggableModal/index.vue
deleted file mode 100644
index 447ecf92..00000000
--- a/src/components/DraggableModal/index.vue
+++ /dev/null
@@ -1,168 +0,0 @@
-<script setup lang="ts">
-import { ref, watch, watchEffect, CSSProperties, computed } from 'vue';
-import { useDraggable } from '@vueuse/core';
-const emit = defineEmits(['update:visible', 'ok', 'cancel']);
-/**于a-modal保持一致 */
-const props = defineProps({
-  /**是否弹出显示，必传 */
-  visible: {
-    type: Boolean,
-    required: true,
-  },
-  /**窗口标题 */
-  title: {
-    type: String,
-    default: '',
-  },
-  /**窗口宽度 */
-  width: {
-    type: [String, Number],
-    default: '520px',
-  },
-  bodyStyle: {
-    type: Object,
-    default: {},
-  },
-  keyboard: {
-    type: Boolean,
-    default: true,
-  },
-  mask: {
-    type: Boolean,
-    default: true,
-  },
-  maskClosable: {
-    type: Boolean,
-    default: true,
-  },
-  maskStyle: {
-    type: Object,
-    default: {},
-  },
-  destroyOnClose: {
-    type: Boolean,
-    default: false,
-  },
-  confirmLoading: {
-    type: Boolean,
-    default: false,
-  },
-  footer: {
-    type: Object as any,
-  },
-});
-
-// 对标题进行监听
-const modalTitleRef = ref<HTMLElement | null>(null);
-const { x, y, isDragging } = useDraggable(modalTitleRef);
-
-const startX = ref<number>(0);
-const startY = ref<number>(0);
-const startedDrag = ref(false);
-const transformX = ref(0);
-const transformY = ref(0);
-const preTransformX = ref(0);
-const preTransformY = ref(0);
-const dragRect = ref({ left: 0, right: 0, top: 0, bottom: 0 });
-
-watch([x, y], () => {
-  if (!startedDrag.value) {
-    startX.value = x.value;
-    startY.value = y.value;
-    const bodyRect = document.body.getBoundingClientRect();
-    const titleRectEl = modalTitleRef.value;
-    if (titleRectEl) {
-      const titleRect = titleRectEl.getBoundingClientRect();
-      dragRect.value.right = bodyRect.width - (titleRect.width + 24);
-      dragRect.value.bottom = bodyRect.height - (titleRect.height + 16);
-    }
-    preTransformX.value = transformX.value;
-    preTransformY.value = transformY.value;
-  }
-  startedDrag.value = true;
-});
-
-watchEffect(() => {
-  if (!isDragging.value) {
-    startedDrag.value = false;
-  }
-  if (startedDrag.value) {
-    const dragRectX = Math.min(
-      Math.max(dragRect.value.left + 24, x.value),
-      dragRect.value.right
-    );
-    transformX.value = preTransformX.value + dragRectX - startX.value;
-
-    const dragRectY = Math.min(
-      Math.max(dragRect.value.top + 16, y.value),
-      dragRect.value.bottom
-    );
-    transformY.value = preTransformY.value + dragRectY - startY.value;
-  }
-});
-
-// 位移
-const transformStyle = computed<CSSProperties>(() => {
-  return {
-    transform: `translate(${transformX.value}px, ${transformY.value}px)`,
-  };
-});
-
-/**监听是否显示，位置还原 */
-watch(
-  () => props.visible,
-  val => {
-    if (val) {
-      transformX.value = 0;
-      transformY.value = 0;
-    }
-  }
-);
-</script>
-
-<template>
-  <a-modal
-    wrapClassName="draggable-modal"
-    :width="props.width"
-    :keyboard="props.keyboard"
-    :mask="props.mask"
-    :mask-closable="props.maskClosable"
-    :visible="props.visible"
-    :confirm-loading="props.confirmLoading"
-    :body-style="props.bodyStyle"
-    :mask-style="props.maskStyle"
-    :destroy-on-close="props.destroyOnClose"
-    :footer="props.footer"
-    @ok="(e:any) => emit('ok', e)"
-    @cancel="(e:any) => emit('cancel', e)"
-  >
-    <template #title>
-      <div
-        ref="modalTitleRef"
-        class="draggable-modal-title"
-        v-text="title"
-      ></div>
-    </template>
-    <template #modalRender="{ originVNode }">
-      <div :style="transformStyle">
-        <component :is="originVNode" />
-      </div>
-    </template>
-    <slot></slot>
-  </a-modal>
-</template>
-
-<style lang="less">
-.draggable-modal {
-  // 穿透选择文字
-  // 给a-modal设置 get-container=".ant-pro-page-container"
-  // 防止跳转显示
-  // &.ant-modal-wrap {
-  //   pointer-events: none;
-  // }
-  &-title {
-    width: 100%;
-    cursor: move;
-  }
-}
-</style>
diff --git a/src/components/UploadModal/index.vue b/src/components/UploadModal/index.vue
index f8ad80f9..e4d65cc5 100644
--- a/src/components/UploadModal/index.vue
+++ b/src/components/UploadModal/index.vue
@@ -35,19 +35,22 @@ const props = defineProps({
 
 /**弹框关闭事件 */
 function fnModalClose() {
-  if(props.loading) return
+  if (props.loading) return;
   emit('close');
 }
 
 /**上传前检查或转换压缩 */
 function fnBeforeUpload(file: FileType) {
   if (props.loading) return false;
-    // 检查文件大小
-    if (props.size > 0) {
+  // 检查文件大小
+  if (props.size > 0) {
     const fileSize = file.size;
     const isLtM = fileSize / 1024 / 1024 < props.size;
     if (!isLtM) {
-      message.error(`${t('components.UploadModal.allowFilter')} ${props.size}MB`, 3);
+      message.error(
+        `${t('components.UploadModal.allowFilter')} ${props.size}MB`,
+        3
+      );
       return false;
     }
   }
@@ -56,7 +59,10 @@ function fnBeforeUpload(file: FileType) {
     const fileName = file.name;
     const isAllowType = props.ext.some(v => fileName.endsWith(v));
     if (!isAllowType) {
-      message.error(`${t('components.UploadModal.onlyAllow')} ${props.ext.join('、')}`, 3);
+      message.error(
+        `${t('components.UploadModal.onlyAllow')} ${props.ext.join('、')}`,
+        3
+      );
       return false;
     }
   }
@@ -65,13 +71,14 @@ function fnBeforeUpload(file: FileType) {
 
 /**上传请求发出 */
 function fnUpload(up: UploadRequestOption) {
-  emit('upload', up.file)
+  emit('upload', up.file);
 }
 </script>
 
 <template>
-  <a-modal
-    width="500px"
+  <ProModal
+    :drag="true"
+    :destroyOnClose="true"
     :title="props.title"
     :visible="props.visible"
     :keyboard="false"
@@ -93,20 +100,26 @@ function fnUpload(up: UploadRequestOption) {
         <p class="ant-upload-drag-icon">
           <inbox-outlined></inbox-outlined>
         </p>
-        <p class="ant-upload-text">{{t('components.UploadModal.uploadTip')}}</p>
+        <p class="ant-upload-text">
+          {{ t('components.UploadModal.uploadTip') }}
+        </p>
         <p class="ant-upload-hint">
-          <div v-if="props.size > 0">
-            {{t('components.UploadModal.allowSize')}} {{ props.size }} MB
-          </div>
-          <div v-if="props.ext.length > 0">
-            {{t('components.UploadModal.allowFormat')}}  {{ props.ext.join('、') }}
-          
-          </div>
+          <template v-if="props.size > 0">
+            <div>
+              {{ t('components.UploadModal.allowSize') }} {{ props.size }} MB
+            </div>
+          </template>
+          <template v-if="props.ext.length > 0">
+            <div>
+              {{ t('components.UploadModal.allowFormat') }}
+              {{ props.ext.join('、') }}
+            </div>
+          </template>
         </p>
       </a-upload-dragger>
       <slot></slot>
     </a-space>
-  </a-modal>
+  </ProModal>
 </template>
 
 <style lang="less" scoped></style>
diff --git a/src/layouts/components/RightContent.vue b/src/layouts/components/RightContent.vue
index e9a25a7a..f78d7eaa 100644
--- a/src/layouts/components/RightContent.vue
+++ b/src/layouts/components/RightContent.vue
@@ -96,8 +96,10 @@ function fnChangeLocale(e: any) {
           <LockOutlined />
         </template>
       </a-button>
-      <a-modal
+      <ProModal
+        :drag="true"
         :width="400"
+        :minHeight="200"
         :mask-closable="false"
         v-model:visible="lockConfirm"
         :title="t('loayouts.rightContent.lockTip')"
@@ -119,7 +121,7 @@ function fnChangeLocale(e: any) {
             </template>
           </a-input-password>
         </a-space>
-      </a-modal>
+      </ProModal>
     </a-tooltip>
 
     <a-tooltip placement="bottom">
diff --git a/src/main.ts b/src/main.ts
index 369e950a..358d7988 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,7 +4,9 @@ import App from './App.vue';
 import router from './router';
 import directive from './directive';
 import i18n from './i18n';
+import ProModal from "antdv-pro-modal";
 import 'antdv-pro-layout/dist/style.css';
+import 'antdv-pro-modal/dist/style.css';
 import 'ant-design-vue/dist/antd.variable.min.css';
 
 const app = createApp(App);
@@ -12,5 +14,6 @@ app.use(store);
 app.use(router);
 app.use(directive);
 app.use(i18n);
+app.use(ProModal);
 
 app.mount('#app');
diff --git a/src/views/account/components/base-info.vue b/src/views/account/components/base-info.vue
index 5eaea2b1..5f4a309f 100644
--- a/src/views/account/components/base-info.vue
+++ b/src/views/account/components/base-info.vue
@@ -15,9 +15,9 @@ const { getDict } = useDictStore();
 
 /**用户性别字典 */
 let sysUserSex = ref<DictType[]>([
-  { label: '未知', value: '0', elTagType: '', elTagClass: '' },
-  { label: '男', value: '1', elTagType: '', elTagClass: '' },
-  { label: '女', value: '2', elTagType: '', elTagClass: '' },
+  { label: '未知', value: '0', tagType: '', tagClass: '' },
+  { label: '男', value: '1', tagType: '', tagClass: '' },
+  { label: '女', value: '2', tagType: '', tagClass: '' },
 ]);
 
 /**表单数据状态 */
diff --git a/src/views/configManage/backupManage/index.vue b/src/views/configManage/backupManage/index.vue
index d4dede32..3df23d02 100644
--- a/src/views/configManage/backupManage/index.vue
+++ b/src/views/configManage/backupManage/index.vue
@@ -481,8 +481,10 @@ onMounted(() => {
     </a-card>
 
     <!-- 新增框或修改框 -->
-    <a-modal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
+      :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
       :visible="modalState.visibleByEdit"
@@ -505,7 +507,7 @@ onMounted(() => {
           />
         </a-form-item>
       </a-form>
-    </a-modal>
+    </ProModal>
   </PageContainer>
 </template>
 
diff --git a/src/views/configManage/configParamTreeTable/index.vue b/src/views/configManage/configParamTreeTable/index.vue
index d37cdde1..7a767392 100644
--- a/src/views/configManage/configParamTreeTable/index.vue
+++ b/src/views/configManage/configParamTreeTable/index.vue
@@ -1455,8 +1455,10 @@ onMounted(() => {
     </a-row>
 
     <!-- 新增框或修改框 -->
-    <DraggableModal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
+      :destroyOnClose="true"
       :body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
       :keyboard="false"
       :mask-closable="false"
@@ -1549,7 +1551,7 @@ onMounted(() => {
           </a-tooltip>
         </a-form-item>
       </a-form>
-    </DraggableModal>
+    </ProModal>
   </PageContainer>
 </template>
 
diff --git a/src/views/configManage/license/index.vue b/src/views/configManage/license/index.vue
index 55002fa8..f162b26a 100644
--- a/src/views/configManage/license/index.vue
+++ b/src/views/configManage/license/index.vue
@@ -430,8 +430,10 @@ onMounted(() => {
     </a-card>
 
     <!-- 上传框 -->
-    <a-modal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
+      :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
       :visible="modalState.visibleByEdit"
@@ -487,7 +489,7 @@ onMounted(() => {
           </a-upload>
         </a-form-item>
       </a-form>
-    </a-modal>
+    </ProModal>
   </PageContainer>
 </template>
 
diff --git a/src/views/configManage/neManage/index.vue b/src/views/configManage/neManage/index.vue
index 6d9f2b7b..a8b2173d 100644
--- a/src/views/configManage/neManage/index.vue
+++ b/src/views/configManage/neManage/index.vue
@@ -972,8 +972,10 @@ onMounted(() => {
     </a-card>
 
     <!-- 新增框或修改框 -->
-    <DraggableModal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
+      :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
       :visible="modalState.visibleByEdit"
@@ -1168,11 +1170,13 @@ onMounted(() => {
           </a-col>
         </a-row>
       </a-form>
-    </DraggableModal>
+    </ProModal>
 
     <!-- 导入框 -->
-    <a-modal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
+      :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
       :visible="modalState.visibleByImport"
@@ -1259,7 +1263,7 @@ onMounted(() => {
           </a-upload>
         </a-form-item>
       </a-form>
-    </a-modal>
+    </ProModal>
   </PageContainer>
 </template>
 
diff --git a/src/views/configManage/softwareManage/components/software-history.vue b/src/views/configManage/softwareManage/components/software-history.vue
index 67a44c95..3c5724ba 100644
--- a/src/views/configManage/softwareManage/components/software-history.vue
+++ b/src/views/configManage/softwareManage/components/software-history.vue
@@ -167,7 +167,11 @@ function fnGetList(pageNum?: number) {
     if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
       tablePagination.total = res.total;
       tableState.data = res.rows;
-      if (tablePagination.total <=(queryParams.pageNum - 1) * tablePagination.pageSize &&queryParams.pageNum !== 1) {
+      if (
+        tablePagination.total <=
+          (queryParams.pageNum - 1) * tablePagination.pageSize &&
+        queryParams.pageNum !== 1
+      ) {
         tableState.loading = false;
         fnGetList(queryParams.pageNum - 1);
       }
@@ -197,9 +201,10 @@ watch(
 </script>
 
 <template>
-  <a-modal
-    width="100%"
-    wrap-class-name="full-modal"
+  <ProModal
+    :drag="true"
+    :forceFullscreen="true"
+    :destroyOnClose="true"
     :title="props.title"
     :visible="props.visible"
     :keyboard="false"
@@ -265,7 +270,7 @@ watch(
       :pagination="tablePagination"
     >
     </a-table>
-  </a-modal>
+  </ProModal>
 </template>
 
 <style lang="less" scoped>
@@ -273,22 +278,3 @@ watch(
   padding: 0 24px;
 }
 </style>
-
-<style lang="less">
-.full-modal {
-  .ant-modal {
-    max-width: 100%;
-    top: 0;
-    padding-bottom: 0;
-    margin: 0;
-  }
-  .ant-modal-content {
-    display: flex;
-    flex-direction: column;
-    height: calc(100vh);
-  }
-  .ant-modal-body {
-    flex: 1;
-  }
-}
-</style>
diff --git a/src/views/configManage/softwareManage/index.vue b/src/views/configManage/softwareManage/index.vue
index 05581e5b..0ec309e4 100644
--- a/src/views/configManage/softwareManage/index.vue
+++ b/src/views/configManage/softwareManage/index.vue
@@ -919,8 +919,9 @@ onMounted(() => {
     </a-card>
 
     <!-- 上传框 -->
-    <DraggableModal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
       :keyboard="false"
       :mask-closable="false"
       :visible="modalState.visibleByEdit"
@@ -1012,7 +1013,7 @@ onMounted(() => {
           </a-upload>
         </a-form-item>
       </a-form>
-    </DraggableModal>
+    </ProModal>
 
     <!-- 上传激活历史 -->
     <SoftwareHistory
@@ -1022,8 +1023,8 @@ onMounted(() => {
     />
 
     <!-- 文件框 下发激活 -->
-    <a-modal
-      width="600px"
+    <ProModal
+      :drag="true"
       :keyboard="false"
       :mask-closable="false"
       :visible="fileModalState.visible"
@@ -1051,11 +1052,11 @@ onMounted(() => {
           />
         </a-form-item>
       </a-form>
-    </a-modal>
+    </ProModal>
 
     <!-- 回退框 -->
-    <a-modal
-      width="800px"
+    <ProModal
+      :drag="true"
       :keyboard="false"
       :mask-closable="false"
       :visible="fileModalState.visibleByBack"
@@ -1086,7 +1087,7 @@ onMounted(() => {
           />
         </a-form-item>
       </a-form>
-    </a-modal>
+    </ProModal>
   </PageContainer>
 </template>
 
diff --git a/src/views/dashboard/imsCDR/index.vue b/src/views/dashboard/imsCDR/index.vue
index 7544f351..ba134389 100644
--- a/src/views/dashboard/imsCDR/index.vue
+++ b/src/views/dashboard/imsCDR/index.vue
@@ -659,7 +659,7 @@ onBeforeUnmount(() => {
               <DictTag
                 :options="dict.cdrSipCode"
                 :value="record.cdrJSON.cause"
-                value-option="0"
+                value-default="0"
               />
             </span>
             <span v-else>
@@ -730,7 +730,7 @@ onBeforeUnmount(() => {
                 <DictTag
                   :options="dict.cdrSipCode"
                   :value="record.cdrJSON.cause"
-                  value-option="0"
+                  value-default="0"
                 />
               </span>
               <span v-else>
diff --git a/src/views/dashboard/mocn/components/setting.vue b/src/views/dashboard/mocn/components/setting.vue
index 24a70087..dcf19ae6 100644
--- a/src/views/dashboard/mocn/components/setting.vue
+++ b/src/views/dashboard/mocn/components/setting.vue
@@ -56,8 +56,9 @@ watch(
 </script>
 
 <template>
-  <a-modal
-    width="800px"
+  <ProModal
+    :drag="true"
+    :width="800"
     :title="props.title"
     :visible="props.visible"
     :keyboard="false"
@@ -82,7 +83,7 @@ watch(
         </a-input-number>
       </a-form-item>
     </a-form>
-  </a-modal>
+  </ProModal>
 </template>
 
 <style lang="less" scoped></style>
diff --git a/src/views/dashboard/overview/components/UserActivity/index.vue b/src/views/dashboard/overview/components/UserActivity/index.vue
index 30c1871a..e0f9fdca 100644
--- a/src/views/dashboard/overview/components/UserActivity/index.vue
+++ b/src/views/dashboard/overview/components/UserActivity/index.vue
@@ -121,7 +121,7 @@ onMounted(() => {
             <DictTag
               :options="dict.cdrSipCode"
               :value="item.data.cause"
-              value-option="0"
+              value-default="0"
             />
           </span>
           <span v-else>
diff --git a/src/views/faultManage/active-alarm/index.vue b/src/views/faultManage/active-alarm/index.vue
index 7b746ead..ed066bf7 100644
--- a/src/views/faultManage/active-alarm/index.vue
+++ b/src/views/faultManage/active-alarm/index.vue
@@ -1045,9 +1045,10 @@ onMounted(() => {
     </a-card>
 
     <!-- 帮助文档 -->
-    <a-modal
-      width="100%"
-      wrap-class-name="full-modal"
+    <ProModal
+      :drag="true"
+      :forceFullscreen="true"
+      :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
       :visible="modalState.helpShowView"
@@ -1067,11 +1068,12 @@ onMounted(() => {
         :scroll="{ x: 1700, y: '82vh' }"
       >
       </a-table>
-    </a-modal>
+    </ProModal>
 
     <!-- 详情框 -->
-    <a-modal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
       :body-style="{ height: '520px', overflowY: 'scroll' }"
       :keyboard="false"
       :mask-closable="false"
@@ -1274,11 +1276,12 @@ onMounted(() => {
           </a-col>
         </a-row>
       </a-form>
-    </a-modal>
+    </ProModal>
 
     <!-- 显示过滤框 -->
-    <a-modal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
       :keyboard="false"
       :mask-closable="false"
       :visible="modalState.visibleByShowSet"
@@ -1373,11 +1376,12 @@ onMounted(() => {
           </a-col>
         </a-row>
       </a-form>
-    </a-modal>
+    </ProModal>
 
     <!-- 个性化设置框 -->
-    <a-modal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
       :keyboard="false"
       :mask-closable="false"
       :visible="modalState.visibleByMyselfSet"
@@ -1471,7 +1475,7 @@ onMounted(() => {
           </a-col>
         </a-row>
       </a-form>
-    </a-modal>
+    </ProModal>
   </PageContainer>
 </template>
 
diff --git a/src/views/faultManage/event/index.vue b/src/views/faultManage/event/index.vue
index 95231a49..06390c5b 100644
--- a/src/views/faultManage/event/index.vue
+++ b/src/views/faultManage/event/index.vue
@@ -673,8 +673,9 @@ onMounted(() => {
     </a-card>
 
     <!-- 详情框 -->
-    <a-modal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
       :body-style="{ height: '520px', overflowY: 'scroll' }"
       :keyboard="false"
       :mask-closable="false"
@@ -836,7 +837,7 @@ onMounted(() => {
           {{ modalState.from.specificProblem }}
         </a-form-item>
       </a-form>
-    </a-modal>
+    </ProModal>
   </PageContainer>
 </template>
 
diff --git a/src/views/faultManage/history-alarm/index.vue b/src/views/faultManage/history-alarm/index.vue
index 9fee5908..1ed1b5b5 100644
--- a/src/views/faultManage/history-alarm/index.vue
+++ b/src/views/faultManage/history-alarm/index.vue
@@ -824,8 +824,8 @@ onMounted(() => {
     </a-card>
 
     <!-- 详情框 -->
-    <a-modal
-      width="800px"
+    <ProModal
+      :drag="true"
       :body-style="{ height: '520px', overflowY: 'scroll' }"
       :keyboard="false"
       :mask-closable="false"
@@ -1042,7 +1042,7 @@ onMounted(() => {
           </a-col>
         </a-row>
       </a-form>
-    </a-modal>
+    </ProModal>
   </PageContainer>
 </template>
 
diff --git a/src/views/monitor/job/index.vue b/src/views/monitor/job/index.vue
index ca5e5adb..f5c345f5 100644
--- a/src/views/monitor/job/index.vue
+++ b/src/views/monitor/job/index.vue
@@ -551,7 +551,11 @@ function fnGetList(pageNum?: number) {
       }
       tablePagination.total = res.total;
       tableState.data = res.rows;
-      if (tablePagination.total <=(queryParams.pageNum - 1) * tablePagination.pageSize &&queryParams.pageNum !== 1) {
+      if (
+        tablePagination.total <=
+          (queryParams.pageNum - 1) * tablePagination.pageSize &&
+        queryParams.pageNum !== 1
+      ) {
         tableState.loading = false;
         fnGetList(queryParams.pageNum - 1);
       }
@@ -841,8 +845,9 @@ onMounted(() => {
     </a-card>
 
     <!-- 详情框 -->
-    <a-modal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
       :visible="modalState.visibleByView"
       :title="modalState.title"
       @cancel="fnModalCancel"
@@ -949,11 +954,13 @@ onMounted(() => {
           {{ t('common.close') }}
         </a-button>
       </template>
-    </a-modal>
+    </ProModal>
 
     <!-- 新增框或修改框 -->
-    <a-modal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
+      :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
       :visible="modalState.visibleByEdit"
@@ -1110,7 +1117,7 @@ onMounted(() => {
           />
         </a-form-item>
       </a-form>
-    </a-modal>
+    </ProModal>
 
     <!-- 生成cron表达式 -->
     <CronModal
diff --git a/src/views/monitor/job/log.vue b/src/views/monitor/job/log.vue
index ab1b7ff7..022b7b45 100644
--- a/src/views/monitor/job/log.vue
+++ b/src/views/monitor/job/log.vue
@@ -373,12 +373,16 @@ function fnGetList(pageNum?: number) {
       }
       tablePagination.total = res.total;
       tableState.data = res.rows;
-      if (tablePagination.total <=(queryParams.pageNum - 1) * tablePagination.pageSize &&queryParams.pageNum !== 1) {
+      if (
+        tablePagination.total <=
+          (queryParams.pageNum - 1) * tablePagination.pageSize &&
+        queryParams.pageNum !== 1
+      ) {
         tableState.loading = false;
         fnGetList(queryParams.pageNum - 1);
       }
-    }   
-     tableState.loading = false;
+    }
+    tableState.loading = false;
   });
 }
 
@@ -628,8 +632,9 @@ onMounted(() => {
     </a-card>
 
     <!-- 详情框 -->
-    <a-modal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
       :visible="modalState.visibleByView"
       :title="modalState.title"
       @cancel="fnModalCancel"
@@ -728,7 +733,7 @@ onMounted(() => {
           {{ t('common.close') }}
         </a-button>
       </template>
-    </a-modal>
+    </ProModal>
   </PageContainer>
 </template>
 
diff --git a/src/views/monitor/topologyBuild/components/GraphEditModal.vue b/src/views/monitor/topologyBuild/components/GraphEditModal.vue
index 89dbd95b..79bc35f3 100644
--- a/src/views/monitor/topologyBuild/components/GraphEditModal.vue
+++ b/src/views/monitor/topologyBuild/components/GraphEditModal.vue
@@ -175,8 +175,10 @@ function fnModalCancel() {
 </script>
 
 <template>
-  <DraggableModal
-    width="800px"
+  <ProModal
+    :drag="true"
+    :width="800"
+    :destroyOnClose="true"
     :body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
     :keyboard="false"
     :mask-closable="false"
@@ -1269,7 +1271,7 @@ function fnModalCancel() {
         </a-col>
       </a-row>
     </a-form>
-  </DraggableModal>
+  </ProModal>
 </template>
 
 <style lang="less" scoped></style>
diff --git a/src/views/monitor/topologyBuild/index.vue b/src/views/monitor/topologyBuild/index.vue
index b68fbe1b..a5ba776a 100644
--- a/src/views/monitor/topologyBuild/index.vue
+++ b/src/views/monitor/topologyBuild/index.vue
@@ -142,7 +142,7 @@ function fnModalOk() {
       modalState.confirmLoading = true;
       const hide = message.loading(t('common.loading'), 0);
       // 根据类型选择函数
-      const groupName = from.group.trim()
+      const groupName = from.group.trim();
       saveGraphData(groupName, graphG6.value.save())
         .then((res: any) => {
           if (res.code === RESULT_CODE_SUCCESS) {
@@ -325,8 +325,8 @@ onMounted(() => {
     <GraphEditModal></GraphEditModal>
 
     <!-- 图保存图组名修改框 -->
-    <a-modal
-      width="500px"
+    <ProModal
+      :drag="true"
       :keyboard="false"
       :mask-closable="false"
       :visible="modalState.visible"
@@ -359,7 +359,7 @@ onMounted(() => {
           </a-col>
         </a-row>
       </a-form>
-    </a-modal>
+    </ProModal>
   </PageContainer>
 </template>
 
diff --git a/src/views/ne/neConfPara5G/index.vue b/src/views/ne/neConfPara5G/index.vue
index 0cd05e26..fb028ed0 100644
--- a/src/views/ne/neConfPara5G/index.vue
+++ b/src/views/ne/neConfPara5G/index.vue
@@ -231,8 +231,8 @@ onMounted(() => {
     </a-card>
 
     <!-- 保存选择同步网元 -->
-    <a-modal
-      width="500px"
+    <ProModal
+      :drag="true"
       :keyboard="false"
       :mask-closable="false"
       :visible="state.visible"
@@ -281,7 +281,7 @@ onMounted(() => {
           />
         </a-form-item>
       </a-form>
-    </a-modal>
+    </ProModal>
   </PageContainer>
 </template>
 
diff --git a/src/views/ne/neHost/index.vue b/src/views/ne/neHost/index.vue
index 0f47751f..31c0c4ae 100644
--- a/src/views/ne/neHost/index.vue
+++ b/src/views/ne/neHost/index.vue
@@ -414,7 +414,7 @@ function fnModalTest() {
   const validateArr = ['title', 'addr', 'port', 'user'];
   if (form.authMode === '0') {
     validateArr.push('password');
-  } 
+  }
   if (form.authMode === '1') {
     validateArr.push('privateKey');
   }
@@ -626,8 +626,10 @@ onMounted(() => {
       </a-table>
 
       <!-- 新增框或修改框 -->
-      <a-modal
-        width="800px"
+      <ProModal
+        :drag="true"
+        :width="800"
+        :destroyOnClose="true"
         :keyboard="false"
         :mask-closable="false"
         :visible="modalState.visibleByEdit"
@@ -828,7 +830,7 @@ onMounted(() => {
             </a-button>
           </a-form-item>
         </a-form>
-      </a-modal>
+      </ProModal>
     </a-card>
   </PageContainer>
 </template>
diff --git a/src/views/ne/neHostCommand/index.vue b/src/views/ne/neHostCommand/index.vue
index dd3abb3f..221b0742 100644
--- a/src/views/ne/neHostCommand/index.vue
+++ b/src/views/ne/neHostCommand/index.vue
@@ -497,8 +497,10 @@ onMounted(() => {
       </a-table>
 
       <!-- 新增框或修改框 -->
-      <a-modal
-        width="800px"
+      <ProModal
+        :drag="true"
+        :width="800"
+        :destroyOnClose="true"
         :keyboard="false"
         :mask-closable="false"
         :visible="modalState.visibleByEdit"
@@ -586,7 +588,7 @@ onMounted(() => {
             />
           </a-form-item>
         </a-form>
-      </a-modal>
+      </ProModal>
     </a-card>
   </PageContainer>
 </template>
diff --git a/src/views/ne/neInfo/components/BackConfModal.vue b/src/views/ne/neInfo/components/BackConfModal.vue
index 361c1229..3d6615dd 100644
--- a/src/views/ne/neInfo/components/BackConfModal.vue
+++ b/src/views/ne/neInfo/components/BackConfModal.vue
@@ -244,8 +244,9 @@ defineExpose({
 </script>
 
 <template>
-  <a-modal
-    width="800px"
+  <ProModal
+    :drag="true"
+    :width="800"
     :keyboard="false"
     :mask-closable="false"
     :visible="modalState.visibleByEdit"
@@ -331,7 +332,7 @@ defineExpose({
         </a-col>
       </a-row>
     </a-form>
-  </a-modal>
+  </ProModal>
 </template>
 
 <style lang="less" scoped></style>
diff --git a/src/views/ne/neInfo/components/EditModal.vue b/src/views/ne/neInfo/components/EditModal.vue
index 0365d348..ce7104d1 100644
--- a/src/views/ne/neInfo/components/EditModal.vue
+++ b/src/views/ne/neInfo/components/EditModal.vue
@@ -347,8 +347,10 @@ onMounted(() => {
 </script>
 
 <template>
-  <DraggableModal
-    width="800px"
+  <ProModal
+    :drag="true"
+    :width="800"
+    :destroyOnClose="true"
     :body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
     :keyboard="false"
     :mask-closable="false"
@@ -753,7 +755,7 @@ onMounted(() => {
         </a-collapse-panel>
       </a-collapse>
     </a-form>
-  </DraggableModal>
+  </ProModal>
 </template>
 
 <style lang="less" scoped>
diff --git a/src/views/ne/neInfo/components/OAMModal.vue b/src/views/ne/neInfo/components/OAMModal.vue
index fbcc3a31..5895ac94 100644
--- a/src/views/ne/neInfo/components/OAMModal.vue
+++ b/src/views/ne/neInfo/components/OAMModal.vue
@@ -161,8 +161,9 @@ watch(
 </script>
 
 <template>
-  <DraggableModal
-    width="500px"
+  <ProModal
+    :drag="true"
+    :destroyOnClose="true"
     :body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
     :keyboard="false"
     :mask-closable="false"
@@ -290,7 +291,7 @@ watch(
         </a-collapse-panel>
       </a-collapse>
     </a-form>
-  </DraggableModal>
+  </ProModal>
 </template>
 
 <style lang="less" scoped>
diff --git a/src/views/ne/neLicense/components/EditModal.vue b/src/views/ne/neLicense/components/EditModal.vue
index 58c98175..348a7a7d 100644
--- a/src/views/ne/neLicense/components/EditModal.vue
+++ b/src/views/ne/neLicense/components/EditModal.vue
@@ -282,8 +282,10 @@ onMounted(() => {});
 </script>
 
 <template>
-  <a-modal
-    width="800px"
+  <ProModal
+    :drag="true"
+    :width="800"
+    :destroyOnClose="true"
     :keyboard="false"
     :mask-closable="false"
     :visible="modalState.visibleByEdit"
@@ -387,7 +389,7 @@ onMounted(() => {});
         />
       </a-form-item>
     </a-form>
-  </a-modal>
+  </ProModal>
 </template>
 
 <style lang="less" scoped></style>
diff --git a/src/views/ne/neLicense/components/UploadLicenseFile.vue b/src/views/ne/neLicense/components/UploadLicenseFile.vue
index 1dd5cf07..265efb80 100644
--- a/src/views/ne/neLicense/components/UploadLicenseFile.vue
+++ b/src/views/ne/neLicense/components/UploadLicenseFile.vue
@@ -185,8 +185,9 @@ onMounted(() => {});
 </script>
 
 <template>
-  <a-modal
-    width="500px"
+  <ProModal
+    :drag="true"
+    :destroyOnClose="true"
     :keyboard="false"
     :mask-closable="false"
     :visible="modalState.visibleByUploadFile"
@@ -242,7 +243,7 @@ onMounted(() => {});
         </a-upload>
       </a-form-item>
     </a-form>
-  </a-modal>
+  </ProModal>
 </template>
 
 <style lang="less" scoped></style>
diff --git a/src/views/ne/neSoftware/components/EditModal.vue b/src/views/ne/neSoftware/components/EditModal.vue
index 8221bc81..f38b4165 100644
--- a/src/views/ne/neSoftware/components/EditModal.vue
+++ b/src/views/ne/neSoftware/components/EditModal.vue
@@ -344,8 +344,9 @@ onMounted(() => {});
 </script>
 
 <template>
-  <a-modal
-    width="550px"
+  <ProModal
+    :drag="true"
+    :destroyOnClose="true"
     :keyboard="false"
     :mask-closable="false"
     :visible="modalState.visibleByEdit"
@@ -464,7 +465,7 @@ onMounted(() => {});
         />
       </a-form-item>
     </a-form>
-  </a-modal>
+  </ProModal>
 </template>
 
 <style lang="less" scoped></style>
diff --git a/src/views/ne/neSoftware/components/UploadMoreFile.vue b/src/views/ne/neSoftware/components/UploadMoreFile.vue
index 93e7ee1b..eaebda82 100644
--- a/src/views/ne/neSoftware/components/UploadMoreFile.vue
+++ b/src/views/ne/neSoftware/components/UploadMoreFile.vue
@@ -348,8 +348,9 @@ onMounted(() => {});
 </script>
 
 <template>
-  <a-modal
-    width="800px"
+  <ProModal
+    :drag="true"
+    :width="800"
     :keyboard="false"
     :mask-closable="false"
     :visible="modalState.visibleByMoreFile"
@@ -478,7 +479,7 @@ onMounted(() => {});
         </a-form-item>
       </template>
     </a-form>
-  </a-modal>
+  </ProModal>
 </template>
 
 <style lang="less" scoped></style>
diff --git a/src/views/ne/neVersion/index.vue b/src/views/ne/neVersion/index.vue
index 9be1b73b..5458c6a2 100644
--- a/src/views/ne/neVersion/index.vue
+++ b/src/views/ne/neVersion/index.vue
@@ -657,8 +657,10 @@ onMounted(() => {
     ></UploadMoreFile>
 
     <!-- 勾选网元版本进行升级框 -->
-    <a-modal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
+      :destroyOnClose="true"
       :body-style="{ height: '520px', overflowY: 'scroll' }"
       :keyboard="false"
       :mask-closable="false"
@@ -705,7 +707,7 @@ onMounted(() => {
           </template>
         </a-alert>
       </p>
-    </a-modal>
+    </ProModal>
   </PageContainer>
 </template>
 
diff --git a/src/views/neUser/auth/index.vue b/src/views/neUser/auth/index.vue
index 7660c74b..8735da9a 100644
--- a/src/views/neUser/auth/index.vue
+++ b/src/views/neUser/auth/index.vue
@@ -998,8 +998,10 @@ onMounted(() => {
     </a-card>
 
     <!-- 新增框或修改框 -->
-    <DraggableModal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
+      :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
       :visible="modalState.visibleByEdit"
@@ -1148,11 +1150,13 @@ onMounted(() => {
           </a-col>
         </a-row>
       </a-form>
-    </DraggableModal>
+    </ProModal>
 
     <!-- 批量新增框 -->
-    <DraggableModal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
+      :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
       :visible="modalState.visibleByBatch"
@@ -1313,11 +1317,12 @@ onMounted(() => {
           </a-col>
         </a-row>
       </a-form>
-    </DraggableModal>
+    </ProModal>
 
     <!-- 批量删除框 -->
-    <DraggableModal
-      width="500px"
+    <ProModal
+      :drag="true"
+      :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
       :visible="modalState.visibleByBatchDel"
@@ -1371,7 +1376,7 @@ onMounted(() => {
           </a-col>
         </a-row>
       </a-form>
-    </DraggableModal>
+    </ProModal>
 
     <!-- 上传导入表格数据文件框 -->
     <UploadModal
diff --git a/src/views/neUser/pcf/index.vue b/src/views/neUser/pcf/index.vue
index 3ad0f5ad..6d84bfed 100644
--- a/src/views/neUser/pcf/index.vue
+++ b/src/views/neUser/pcf/index.vue
@@ -886,8 +886,10 @@ onMounted(() => {
     </a-card>
 
     <!-- 新增框或修改框 -->
-    <DraggableModal
-      :width="modalState.type === 'delete' ? '500px' : '800px'"
+    <ProModal
+      :drag="true"
+      :width="modalState.type === 'delete' ? 520 : 800"
+      :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
       :visible="modalState.visibleByEdit"
@@ -1127,7 +1129,7 @@ onMounted(() => {
           </a-row>
         </template>
       </a-form>
-    </DraggableModal>
+    </ProModal>
 
     <!-- 上传导入表格数据文件框 -->
     <UploadModal
diff --git a/src/views/neUser/sub/index.vue b/src/views/neUser/sub/index.vue
index 98bf9945..82d60124 100644
--- a/src/views/neUser/sub/index.vue
+++ b/src/views/neUser/sub/index.vue
@@ -1487,9 +1487,10 @@ onMounted(() => {
     </a-card>
 
     <!-- 新增框或修改框 -->
-    <DraggableModal
-      style="top: 0px"
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
+      :destroyOnClose="true"
       :body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
       :keyboard="false"
       :mask-closable="false"
@@ -2002,12 +2003,13 @@ onMounted(() => {
           </a-collapse-panel>
         </a-collapse>
       </a-form>
-    </DraggableModal>
+    </ProModal>
 
     <!-- 批量增加框 -->
-    <DraggableModal
-      style="top: 0px"
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
+      :destroyOnClose="true"
       :body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
       :keyboard="false"
       :mask-closable="false"
@@ -2543,12 +2545,12 @@ onMounted(() => {
           </a-collapse-panel>
         </a-collapse>
       </a-form>
-    </DraggableModal>
+    </ProModal>
 
     <!-- 批量删除框 -->
-    <DraggableModal
-      style="top: 0px"
-      width="500px"
+    <ProModal
+      :drag="true"
+      :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
       :visible="modalState.visibleByBatchDel"
@@ -2602,7 +2604,7 @@ onMounted(() => {
           </a-col>
         </a-row>
       </a-form>
-    </DraggableModal>
+    </ProModal>
 
     <!-- 上传导入表格数据文件框 -->
     <UploadModal
diff --git a/src/views/neUser/ue/index.vue b/src/views/neUser/ue/index.vue
index 587e85a1..b01d3eaf 100644
--- a/src/views/neUser/ue/index.vue
+++ b/src/views/neUser/ue/index.vue
@@ -407,8 +407,9 @@ onMounted(() => {
     </a-card>
 
     <!-- 详情框 -->
-    <DraggableModal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
       :visible="modalState.visibleByView"
       :title="modalState.title"
       @cancel="fnModalCancel"
@@ -464,7 +465,7 @@ onMounted(() => {
           </a-descriptions-item>
         </a-descriptions>
       </a-form>
-    </DraggableModal>
+    </ProModal>
   </PageContainer>
 </template>
 
diff --git a/src/views/perfManage/customTarget/index.vue b/src/views/perfManage/customTarget/index.vue
index f1db2900..2c5b78f3 100644
--- a/src/views/perfManage/customTarget/index.vue
+++ b/src/views/perfManage/customTarget/index.vue
@@ -295,7 +295,7 @@ function fnSelectPerformanceInit(value: any) {
     i => i.neType === value
   );
   if (modalState.from.objectType) modalState.from.objectType = '';
-  if(modalState.selectedPre.length > 0) modalState.selectedPre = [];
+  if (modalState.selectedPre.length > 0) modalState.selectedPre = [];
 
   modalState.from.expression = '';
   const arrSet = new Set<string>();
@@ -598,8 +598,10 @@ onMounted(() => {
     </a-card>
 
     <!-- 新增框或修改框 -->
-    <a-modal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
+      :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
       :visible="modalState.visibleByEdit"
@@ -689,7 +691,7 @@ onMounted(() => {
           name="expression"
           v-bind="modalStateFrom.validateInfos.expression"
         >
-          <a-input v-model:value="modalState.from.expression" allow-clear >
+          <a-input v-model:value="modalState.from.expression" allow-clear>
           </a-input>
         </a-form-item>
         <a-row :gutter="16">
@@ -721,7 +723,7 @@ onMounted(() => {
           />
         </a-form-item>
       </a-form>
-    </a-modal>
+    </ProModal>
   </PageContainer>
 </template>
 
diff --git a/src/views/perfManage/perfReport/index.vue b/src/views/perfManage/perfReport/index.vue
index aca5cddb..5d883b96 100644
--- a/src/views/perfManage/perfReport/index.vue
+++ b/src/views/perfManage/perfReport/index.vue
@@ -151,14 +151,18 @@ function fnTableSize({ key }: MenuInfo) {
 function fnGetList(pageNum?: number) {
   if (tableState.loading) return;
   tableState.loading = true;
-  if(pageNum){
+  if (pageNum) {
     queryParams.pageNum = pageNum;
   }
   listTraceData(toRaw(queryParams)).then(res => {
     if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
       tablePagination.total = res.total;
       tableState.data = res.rows;
-      if (tablePagination.total <=(queryParams.pageNum - 1) * tablePagination.pageSize &&queryParams.pageNum !== 1) {
+      if (
+        tablePagination.total <=
+          (queryParams.pageNum - 1) * tablePagination.pageSize &&
+        queryParams.pageNum !== 1
+      ) {
         tableState.loading = false;
         fnGetList(queryParams.pageNum - 1);
       }
@@ -470,8 +474,9 @@ onMounted(() => {
     </a-card>
 
     <!-- 详情框 -->
-    <a-modal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
       :title="modalState.title"
       :visible="modalState.visible"
       @cancel="fnModalVisibleClose"
@@ -505,7 +510,7 @@ onMounted(() => {
         </a-button>
       </div>
       <div class="raw-html" v-html="modalState.from.rawDataHTML"></div>
-    </a-modal>
+    </ProModal>
   </PageContainer>
 </template>
 
diff --git a/src/views/perfManage/perfSet/index.vue b/src/views/perfManage/perfSet/index.vue
index 1ffb3721..5d883b96 100644
--- a/src/views/perfManage/perfSet/index.vue
+++ b/src/views/perfManage/perfSet/index.vue
@@ -158,7 +158,11 @@ function fnGetList(pageNum?: number) {
     if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
       tablePagination.total = res.total;
       tableState.data = res.rows;
-      if (tablePagination.total <=(queryParams.pageNum - 1) * tablePagination.pageSize &&queryParams.pageNum !== 1) {
+      if (
+        tablePagination.total <=
+          (queryParams.pageNum - 1) * tablePagination.pageSize &&
+        queryParams.pageNum !== 1
+      ) {
         tableState.loading = false;
         fnGetList(queryParams.pageNum - 1);
       }
@@ -470,8 +474,9 @@ onMounted(() => {
     </a-card>
 
     <!-- 详情框 -->
-    <a-modal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
       :title="modalState.title"
       :visible="modalState.visible"
       @cancel="fnModalVisibleClose"
@@ -505,7 +510,7 @@ onMounted(() => {
         </a-button>
       </div>
       <div class="raw-html" v-html="modalState.from.rawDataHTML"></div>
-    </a-modal>
+    </ProModal>
   </PageContainer>
 </template>
 
diff --git a/src/views/perfManage/perfThreshold/index.vue b/src/views/perfManage/perfThreshold/index.vue
index 1cb3354d..16ebd3b9 100644
--- a/src/views/perfManage/perfThreshold/index.vue
+++ b/src/views/perfManage/perfThreshold/index.vue
@@ -670,8 +670,10 @@ onMounted(() => {
     </a-card>
 
     <!-- 新增框或修改框 -->
-    <a-modal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
+      :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
       :visible="modalState.visibleByEdit"
@@ -740,7 +742,7 @@ onMounted(() => {
           </a-col>
         </a-row>
       </a-form>
-    </a-modal>
+    </ProModal>
   </PageContainer>
 </template>
 
diff --git a/src/views/perfManage/taskManage/index.vue b/src/views/perfManage/taskManage/index.vue
index 4ac5d575..2db44f35 100644
--- a/src/views/perfManage/taskManage/index.vue
+++ b/src/views/perfManage/taskManage/index.vue
@@ -880,8 +880,9 @@ onMounted(() => {
     </a-card>
 
     <!-- 详情框 -->
-    <a-modal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
       :visible="modalState.visibleByView"
       :title="modalState.title"
       @cancel="fnModalCancel"
@@ -987,11 +988,13 @@ onMounted(() => {
           t('common.close')
         }}</a-button>
       </template>
-    </a-modal>
+    </ProModal>
 
     <!-- 新增框或修改框 -->
-    <a-modal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
+      :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
       :visible="modalState.visibleByEdit"
@@ -1137,7 +1140,7 @@ onMounted(() => {
           />
         </a-form-item>
       </a-form>
-    </a-modal>
+    </ProModal>
   </PageContainer>
 </template>
 
diff --git a/src/views/system/config/index.vue b/src/views/system/config/index.vue
index 0ceb9b2e..1f124e99 100644
--- a/src/views/system/config/index.vue
+++ b/src/views/system/config/index.vue
@@ -449,7 +449,11 @@ function fnGetList(pageNum?: number) {
       }
       tablePagination.total = res.total;
       tableState.data = res.rows;
-      if (tablePagination.total <=(queryParams.pageNum - 1) * tablePagination.pageSize &&queryParams.pageNum !== 1) {
+      if (
+        tablePagination.total <=
+          (queryParams.pageNum - 1) * tablePagination.pageSize &&
+        queryParams.pageNum !== 1
+      ) {
         tableState.loading = false;
         fnGetList(queryParams.pageNum - 1);
       }
@@ -698,8 +702,9 @@ onMounted(() => {
     </a-card>
 
     <!-- 详情框 -->
-    <a-modal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
       :visible="modalState.visibleByView"
       :title="modalState.title"
       @cancel="fnModalCancel"
@@ -762,11 +767,13 @@ onMounted(() => {
           {{ t('common.close') }}
         </a-button>
       </template>
-    </a-modal>
+    </ProModal>
 
     <!-- 新增框或修改框 -->
-    <a-modal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
+      :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
       :visible="modalState.visibleByEdit"
@@ -855,7 +862,7 @@ onMounted(() => {
           />
         </a-form-item>
       </a-form>
-    </a-modal>
+    </ProModal>
   </PageContainer>
 </template>
 
diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
index 52c940a9..fda54046 100644
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -602,8 +602,9 @@ onMounted(() => {
     </a-card>
 
     <!-- 详情框 -->
-    <a-modal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
       :visible="modalState.visibleByView"
       :title="modalState.title"
       @cancel="fnModalCancel"
@@ -691,11 +692,13 @@ onMounted(() => {
           t('common.cancel')
         }}</a-button>
       </template>
-    </a-modal>
+    </ProModal>
 
     <!-- 新增框或修改框 -->
-    <a-modal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
+      :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
       :visible="modalState.visibleByEdit"
@@ -818,7 +821,7 @@ onMounted(() => {
           </a-col>
         </a-row>
       </a-form>
-    </a-modal>
+    </ProModal>
   </PageContainer>
 </template>
 
diff --git a/src/views/system/dict/data.vue b/src/views/system/dict/data.vue
index 8959b006..7cb65d22 100644
--- a/src/views/system/dict/data.vue
+++ b/src/views/system/dict/data.vue
@@ -463,7 +463,11 @@ function fnGetList(pageNum?: number) {
       }
       tablePagination.total = res.total;
       tableState.data = res.rows;
-      if (tablePagination.total <=(queryParams.pageNum - 1) * tablePagination.pageSize &&queryParams.pageNum !== 1) {
+      if (
+        tablePagination.total <=
+          (queryParams.pageNum - 1) * tablePagination.pageSize &&
+        queryParams.pageNum !== 1
+      ) {
         tableState.loading = false;
         fnGetList(queryParams.pageNum - 1);
       }
@@ -714,8 +718,9 @@ onMounted(() => {
     </a-card>
 
     <!-- 详情框 -->
-    <a-modal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
       :visible="modalState.visibleByView"
       :title="modalState.title"
       @cancel="fnModalCancel"
@@ -844,11 +849,13 @@ onMounted(() => {
           {{ t('common.close') }}
         </a-button>
       </template>
-    </a-modal>
+    </ProModal>
 
     <!-- 新增框或修改框 -->
-    <a-modal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
+      :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
       :visible="modalState.visibleByEdit"
@@ -999,7 +1006,7 @@ onMounted(() => {
           />
         </a-form-item>
       </a-form>
-    </a-modal>
+    </ProModal>
   </PageContainer>
 </template>
 
diff --git a/src/views/system/dict/index.vue b/src/views/system/dict/index.vue
index 4f23a509..34ddef4b 100644
--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
@@ -452,7 +452,11 @@ function fnGetList(pageNum?: number) {
       }
       tablePagination.total = res.total;
       tableState.data = res.rows;
-      if (tablePagination.total <=(queryParams.pageNum - 1) * tablePagination.pageSize &&queryParams.pageNum !== 1) {
+      if (
+        tablePagination.total <=
+          (queryParams.pageNum - 1) * tablePagination.pageSize &&
+        queryParams.pageNum !== 1
+      ) {
         tableState.loading = false;
         fnGetList(queryParams.pageNum - 1);
       }
@@ -718,8 +722,9 @@ onMounted(() => {
     </a-card>
 
     <!-- 详情框 -->
-    <a-modal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
       :visible="modalState.visibleByView"
       :title="modalState.title"
       @cancel="fnModalCancel"
@@ -753,11 +758,13 @@ onMounted(() => {
           t('common.cancel')
         }}</a-button>
       </template>
-    </a-modal>
+    </ProModal>
 
     <!-- 新增框或修改框 -->
-    <a-modal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
+      :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
       :visible="modalState.visibleByEdit"
@@ -810,7 +817,7 @@ onMounted(() => {
           />
         </a-form-item>
       </a-form>
-    </a-modal>
+    </ProModal>
   </PageContainer>
 </template>
 
diff --git a/src/views/system/log/operate/index.vue b/src/views/system/log/operate/index.vue
index 3238b8b0..6712bbd0 100644
--- a/src/views/system/log/operate/index.vue
+++ b/src/views/system/log/operate/index.vue
@@ -606,8 +606,9 @@ onMounted(() => {
     </a-card>
 
     <!-- 详情框 -->
-    <a-modal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
       :visible="modalState.visibleByView"
       :title="modalState.title"
       @cancel="fnModalCancel"
@@ -729,7 +730,7 @@ onMounted(() => {
           {{ t('common.cancel') }}
         </a-button>
       </template>
-    </a-modal>
+    </ProModal>
   </PageContainer>
 </template>
 
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index b0515a8e..06f07173 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -717,8 +717,9 @@ onMounted(() => {
     </a-card>
 
     <!-- 详情框 -->
-    <a-modal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
       :visible="modalState.visibleByView"
       :title="modalState.title"
       @cancel="fnModalCancel"
@@ -907,11 +908,13 @@ onMounted(() => {
           t('common.cancel')
         }}</a-button>
       </template>
-    </a-modal>
+    </ProModal>
 
     <!-- 新增框或修改框 -->
-    <a-modal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
+      :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
       :visible="modalState.visibleByEdit"
@@ -1182,7 +1185,7 @@ onMounted(() => {
           />
         </a-form-item>
       </a-form>
-    </a-modal>
+    </ProModal>
   </PageContainer>
 </template>
 
diff --git a/src/views/system/post/index.vue b/src/views/system/post/index.vue
index 69bd54be..9e824675 100644
--- a/src/views/system/post/index.vue
+++ b/src/views/system/post/index.vue
@@ -631,8 +631,9 @@ onMounted(() => {
     </a-card>
 
     <!-- 详情框 -->
-    <a-modal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
       :visible="modalState.visibleByView"
       :title="modalState.title"
       @cancel="fnModalCancel"
@@ -715,11 +716,13 @@ onMounted(() => {
           t('common.cancel')
         }}</a-button>
       </template>
-    </a-modal>
+    </ProModal>
 
     <!-- 新增框或修改框 -->
-    <a-modal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
+      :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
       :visible="modalState.visibleByEdit"
@@ -804,7 +807,7 @@ onMounted(() => {
           />
         </a-form-item>
       </a-form>
-    </a-modal>
+    </ProModal>
   </PageContainer>
 </template>
 
diff --git a/src/views/system/quick-start/components/NeInfoSoftwareInstall.vue b/src/views/system/quick-start/components/NeInfoSoftwareInstall.vue
index bbce49d4..da463914 100644
--- a/src/views/system/quick-start/components/NeInfoSoftwareInstall.vue
+++ b/src/views/system/quick-start/components/NeInfoSoftwareInstall.vue
@@ -151,7 +151,7 @@ async function fnRecordInstall() {
     // 开始安装
     let preinput = {};
     if (row.neType.toUpperCase() === 'IMS') {
-      preinput = { pisCSCF: 'y', updateMFetc: 'No', updateMFshare: 'No' }
+      preinput = { pisCSCF: 'y', updateMFetc: 'No', updateMFshare: 'No' };
     }
     const installData = {
       neType: row.neType,
@@ -315,8 +315,9 @@ onMounted(() => {
   ></UploadMoreFile>
 
   <!-- 勾选网元版本进行安装框 -->
-  <a-modal
-    width="800px"
+  <ProModal
+    :drag="true"
+    :destroyOnClose="true"
     :body-style="{ height: '520px', overflowY: 'scroll' }"
     :keyboard="false"
     :mask-closable="false"
@@ -363,7 +364,7 @@ onMounted(() => {
         </template>
       </a-alert>
     </p>
-  </a-modal>
+  </ProModal>
 </template>
 
 <style lang="less" scoped>
diff --git a/src/views/system/role/components/auth-user-select.vue b/src/views/system/role/components/auth-user-select.vue
index 951116aa..ae09d448 100644
--- a/src/views/system/role/components/auth-user-select.vue
+++ b/src/views/system/role/components/auth-user-select.vue
@@ -183,7 +183,11 @@ function fnGetList(pageNum?: number) {
       }
       tablePagination.total = res.total;
       tableState.data = res.rows;
-      if (tablePagination.total <=(queryParams.pageNum - 1) * tablePagination.pageSize &&queryParams.pageNum !== 1) {
+      if (
+        tablePagination.total <=
+          (queryParams.pageNum - 1) * tablePagination.pageSize &&
+        queryParams.pageNum !== 1
+      ) {
         tableState.loading = false;
         fnGetList(queryParams.pageNum - 1);
       }
@@ -231,8 +235,11 @@ watch(
 </script>
 
 <template>
-  <a-modal
-    width="800px"
+  <ProModal
+    :drag="true"
+    :width="800"
+    :destroyOnClose="true"
+    :forceFullscreen="true"
     :title="props.title"
     :visible="props.visible"
     :keyboard="false"
@@ -309,7 +316,7 @@ watch(
         </template>
       </template>
     </a-table>
-  </a-modal>
+  </ProModal>
 </template>
 
 <style lang="less" scoped>
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 0ca104c1..71143a1e 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -999,8 +999,10 @@ onMounted(() => {
     </a-card>
 
     <!-- 详情框 -->
-    <a-modal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
+      :destroyOnClose="false"
       :visible="modalState.visibleByView"
       :title="modalState.title"
       @cancel="fnModalCancel"
@@ -1098,14 +1100,15 @@ onMounted(() => {
           t('common.cancel')
         }}</a-button>
       </template>
-    </a-modal>
+    </ProModal>
 
     <!-- 新增框或修改框 -->
-    <a-modal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
+      :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
-      :destroy-on-close="true"
       :visible="modalState.visibleByEdit"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
@@ -1242,14 +1245,15 @@ onMounted(() => {
           </a-tree>
         </a-form-item>
       </a-form>
-    </a-modal>
+    </ProModal>
 
     <!-- 分配角色数据权限修改框 -->
-    <a-modal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
+      :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
-      :destroy-on-close="true"
       :visible="modalState.visibleByDataScope"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
@@ -1388,7 +1392,7 @@ onMounted(() => {
           </a-tree>
         </a-form-item>
       </a-form>
-    </a-modal>
+    </ProModal>
   </PageContainer>
 </template>
 
diff --git a/src/views/system/setting/components/system-reset.vue b/src/views/system/setting/components/system-reset.vue
index 33c45d1f..265a8370 100644
--- a/src/views/system/setting/components/system-reset.vue
+++ b/src/views/system/setting/components/system-reset.vue
@@ -66,7 +66,11 @@ function fnModalCancel() {
         {{ t('common.reset') }}
       </a-button>
     </a-col>
-    <a-modal
+    <ProModal
+      :drag="true"
+      :width="400"
+      :minHeight="200"
+      :destroyOnClose="true"
       :mask-closable="false"
       v-model:visible="state.visible"
       :title="t('common.tipTitle')"
@@ -80,7 +84,7 @@ function fnModalCancel() {
       <div style="color: #f5222d">
         {{ t('views.system.setting.resetTipContent') }}
       </div>
-    </a-modal>
+    </ProModal>
 
     <a-col :lg="12" :md="12" :xs="24">
       <a-typography>
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 605ef452..261ce375 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -434,7 +434,7 @@ function fnModalOk() {
   let validateName = ['nickName', 'email', 'phonenumber'];
   if (!modalState.from.userId) {
     validateName.push('userName', 'password');
-  } 
+  }
   modalStateFrom
     .validate(validateName)
     .then(() => {
@@ -1070,8 +1070,10 @@ onMounted(() => {
     </a-card>
 
     <!-- 详情框 -->
-    <a-modal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
+      :destroyOnClose="false"
       :visible="modalState.visibleByView"
       :title="modalState.title"
       @cancel="fnModalCancel"
@@ -1248,11 +1250,13 @@ onMounted(() => {
           {{ t('common.close') }}
         </a-button>
       </template>
-    </a-modal>
+    </ProModal>
 
     <!-- 新增框或修改框 -->
-    <a-modal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
+      :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
       :visible="modalState.visibleByEdit"
@@ -1455,11 +1459,12 @@ onMounted(() => {
           />
         </a-form-item>
       </a-form>
-    </a-modal>
+    </ProModal>
 
     <!-- 重置密码修改框 -->
-    <a-modal
-      width="500px"
+    <ProModal
+      :drag="true"
+      :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
       :visible="modalState.visibleByResetPwd"
@@ -1495,7 +1500,7 @@ onMounted(() => {
           </a-input-password>
         </a-form-item>
       </a-form>
-    </a-modal>
+    </ProModal>
 
     <!-- 上传导入表格数据文件框 -->
     <UploadModal
diff --git a/src/views/traceManage/analysis/index.vue b/src/views/traceManage/analysis/index.vue
index 1172e3a7..23f78a50 100644
--- a/src/views/traceManage/analysis/index.vue
+++ b/src/views/traceManage/analysis/index.vue
@@ -151,14 +151,18 @@ function fnTableSize({ key }: MenuInfo) {
 function fnGetList(pageNum?: number) {
   if (tableState.loading) return;
   tableState.loading = true;
-  if(pageNum){
+  if (pageNum) {
     queryParams.pageNum = pageNum;
   }
   listTraceData(toRaw(queryParams)).then(res => {
     if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
       tablePagination.total = res.total;
       tableState.data = res.rows;
-      if (tablePagination.total <=(queryParams.pageNum - 1) * tablePagination.pageSize &&queryParams.pageNum !== 1) {
+      if (
+        tablePagination.total <=
+          (queryParams.pageNum - 1) * tablePagination.pageSize &&
+        queryParams.pageNum !== 1
+      ) {
         tableState.loading = false;
         fnGetList(queryParams.pageNum - 1);
       }
@@ -470,8 +474,9 @@ onMounted(() => {
     </a-card>
 
     <!-- 详情框 -->
-    <a-modal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
       :title="modalState.title"
       :visible="modalState.visible"
       @cancel="fnModalVisibleClose"
@@ -505,7 +510,7 @@ onMounted(() => {
         </a-button>
       </div>
       <div class="raw-html" v-html="modalState.from.rawDataHTML"></div>
-    </a-modal>
+    </ProModal>
   </PageContainer>
 </template>
 
diff --git a/src/views/traceManage/pcap/index.vue b/src/views/traceManage/pcap/index.vue
index 97e3faeb..19681b2f 100644
--- a/src/views/traceManage/pcap/index.vue
+++ b/src/views/traceManage/pcap/index.vue
@@ -535,8 +535,9 @@ onMounted(() => {
     </a-card>
 
     <!-- 详情框 -->
-    <a-modal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
       :visible="modalState.visibleByView"
       :footer="null"
       :maskClosable="false"
@@ -550,7 +551,7 @@ onMounted(() => {
         :disabled="true"
         style="color: rgba(0, 0, 0, 0.85)"
       />
-    </a-modal>
+    </ProModal>
   </PageContainer>
 </template>
 
diff --git a/src/views/traceManage/task/index.vue b/src/views/traceManage/task/index.vue
index 2737a0e7..d56dc00f 100644
--- a/src/views/traceManage/task/index.vue
+++ b/src/views/traceManage/task/index.vue
@@ -236,7 +236,11 @@ function fnGetList(pageNum?: number) {
       }
       tablePagination.total = res.total;
       tableState.data = res.rows;
-      if (tablePagination.total <=(queryParams.pageNum - 1) * tablePagination.pageSize &&queryParams.pageNum !== 1) {
+      if (
+        tablePagination.total <=
+          (queryParams.pageNum - 1) * tablePagination.pageSize &&
+        queryParams.pageNum !== 1
+      ) {
         tableState.loading = false;
         fnGetList(queryParams.pageNum - 1);
       }
@@ -727,8 +731,9 @@ onMounted(() => {
     </a-card>
 
     <!-- 详情框 -->
-    <a-modal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
       :visible="modalState.visibleByView"
       :title="modalState.title"
       @cancel="fnModalCancel"
@@ -834,11 +839,13 @@ onMounted(() => {
           t('common.close')
         }}</a-button>
       </template>
-    </a-modal>
+    </ProModal>
 
     <!-- 新增框或修改框 -->
-    <a-modal
-      width="800px"
+    <ProModal
+      :drag="true"
+      :width="800"
+      :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
       :visible="modalState.visibleByEdit"
@@ -1041,7 +1048,7 @@ onMounted(() => {
           />
         </a-form-item>
       </a-form>
-    </a-modal>
+    </ProModal>
   </PageContainer>
 </template>