From da0d49d306034137208c14e22866f87c8425094e Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Mon, 28 Oct 2024 11:02:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A1=B5=E9=9D=A2=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=B1=9E=E6=80=A7=E5=8D=87=E7=BA=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/account/components/base-info.vue    |    8 +-
 src/views/account/components/reset-passwd.vue |    4 +-
 src/views/account/components/style-layout.vue |   52 +-
 src/views/account/profile.vue                 |    3 +-
 src/views/configManage/backupManage/index.vue |  518 --------
 src/views/configManage/neManage/index.vue     |   67 +-
 src/views/configManage/neOverview/index.vue   |   12 +-
 .../components/software-history.vue           |  280 -----
 .../configManage/softwareManage/index.vue     | 1111 -----------------
 src/views/dashboard/amfUE/index.vue           |    8 +-
 src/views/dashboard/imsCDR/index.vue          |    8 +-
 .../dashboard/mocn/components/setting.vue     |   13 +-
 src/views/dashboard/mocn/index.vue            |   10 +-
 .../overview/components/Topology/index.vue    |    2 +-
 src/views/dashboard/smscCDR/index.vue         |    8 +-
 src/views/faultManage/active-alarm/index.vue  |  104 +-
 src/views/faultManage/event/index.vue         |   67 +-
 src/views/faultManage/fault-setting/index.vue |    4 +-
 src/views/faultManage/history-alarm/index.vue |   78 +-
 src/views/logManage/alarm/index.vue           |    6 +-
 src/views/logManage/exportFile/index.vue      |    8 +-
 src/views/logManage/forwarding/index.vue      |    6 +-
 src/views/logManage/logSet/index.vue          |    4 +-
 src/views/logManage/mml/index.vue             |    6 +-
 .../neFile/components/ViewDrawer.vue          |   22 +-
 src/views/logManage/neFile/index.vue          |   74 +-
 src/views/login.vue                           |   40 +-
 src/views/mmlManage/mmlSet/index.vue          |    4 +-
 src/views/mmlManage/neOperate/index.vue       |    4 +-
 src/views/mmlManage/omcOperate/index.vue      |    4 +-
 src/views/mmlManage/udmOperate/index.vue      |    4 +-
 src/views/monitor/cache/index.vue             |    6 +-
 src/views/monitor/job/index.vue               |   63 +-
 src/views/monitor/job/log.vue                 |   33 +-
 src/views/monitor/monitor/index.vue           |    6 +-
 src/views/monitor/online/index.vue            |    8 +-
 src/views/monitor/system/info.vue             |    2 +-
 src/views/monitor/topology/index.vue          |    6 +-
 .../monitor/topologyArchitecture/index.vue    |   12 +-
 .../components/GraphEditModal.vue             |   87 +-
 .../monitor/topologyBuild/hooks/useCombo.ts   |    2 +-
 .../monitor/topologyBuild/hooks/useEdge.ts    |    2 +-
 .../monitor/topologyBuild/hooks/useNode.ts    |    2 +-
 src/views/monitor/topologyBuild/index.vue     |   80 +-
 src/views/ne/neConfig/hooks/useConfigArray.ts |    9 +-
 .../ne/neConfig/hooks/useConfigArrayChild.ts  |    9 +-
 src/views/ne/neConfig/hooks/useConfigList.ts  |    4 +-
 src/views/ne/neConfig/index.vue               |   19 +-
 src/views/ne/neConfigBackup/index.vue         |   19 +-
 src/views/ne/neHost/index.vue                 |   27 +-
 src/views/ne/neHostCommand/index.vue          |   23 +-
 .../ne/neInfo/components/BackConfModal.vue    |   29 +-
 src/views/ne/neInfo/components/EditModal.vue  |   58 +-
 src/views/ne/neInfo/components/OAMModal.vue   |   29 +-
 src/views/ne/neInfo/hooks/useNeOptions.ts     |    2 +-
 src/views/ne/neInfo/index.vue                 |   40 +-
 .../ne/neLicense/components/EditModal.vue     |   29 +-
 .../components/UploadLicenseFile.vue          |   27 +-
 src/views/ne/neLicense/index.vue              |   16 +-
 .../neQuickSetup/components/NeInfoConfig.vue  |   14 +-
 .../components/NeInfoSoftwareInstall.vue      |   14 +-
 .../components/NeInfoSoftwareLicense.vue      |   12 +-
 .../ne/neQuickSetup/components/Para5GForm.vue |   44 +-
 .../ne/neQuickSetup/components/Start.vue      |    8 +-
 .../ne/neSoftware/components/EditModal.vue    |   29 +-
 .../neSoftware/components/UploadMoreFile.vue  |   25 +-
 src/views/ne/neSoftware/index.vue             |   27 +-
 src/views/ne/neVersion/index.vue              |   39 +-
 src/views/neUser/base5G/index.vue             |    6 +-
 src/views/neUser/ims/index.vue                |    8 +-
 src/views/neUser/n3iwf/index.vue              |    8 +-
 src/views/neUser/nssf/index.vue               |    8 +-
 src/views/neUser/nssfAmf/index.vue            |   13 +-
 src/views/neUser/ue/index.vue                 |   27 +-
 src/views/perfManage/customTarget/index.vue   |   40 +-
 src/views/perfManage/goldTarget/index.vue     |   63 +-
 src/views/perfManage/kpiCReport/index.vue     |   13 +-
 src/views/perfManage/kpiKeyTarget/index.vue   |  613 +++++----
 src/views/perfManage/perfData/index.vue       |    6 +-
 src/views/perfManage/perfThreshold/index.vue  |   38 +-
 src/views/perfManage/taskManage/index.vue     |   60 +-
 src/views/register.vue                        |    2 +-
 src/views/system/config/index.vue             |   49 +-
 src/views/system/dept/index.vue               |   43 +-
 src/views/system/dict/data.vue                |   59 +-
 src/views/system/dict/index.vue               |   41 +-
 src/views/system/log/login/index.vue          |    8 +-
 src/views/system/log/operate/index.vue        |   27 +-
 src/views/system/menu/index.vue               |   62 +-
 src/views/system/post/index.vue               |   51 +-
 .../system/quick-start/components/Done.vue    |    2 +-
 .../quick-start/components/NeInfoConfig.vue   |   29 +-
 .../components/NeInfoConfigPara5G.vue         |    5 +-
 .../components/NeInfoSoftwareInstall.vue      |   25 +-
 .../components/NeInfoSoftwareLicense.vue      |   12 +-
 .../quick-start/components/SystemConfig.vue   |    6 +-
 src/views/system/quick-start/index.vue        |    7 +-
 src/views/system/role/auth-user.vue           |   26 +-
 .../role/components/auth-user-select.vue      |   19 +-
 src/views/system/role/index.vue               |   71 +-
 .../setting/components/change-copyright.vue   |    7 +-
 .../setting/components/change-help-doc.vue    |    8 +-
 .../setting/components/change-home-index.vue  |    4 +-
 .../system/setting/components/change-i18n.vue |    4 +-
 .../setting/components/change-login-bg.vue    |    8 +-
 .../system/setting/components/change-logo.vue |    8 +-
 .../components/change-official-url.vue        |    4 +-
 .../setting/components/change-title.vue       |    7 +-
 .../setting/components/system-reset.vue       |   14 +-
 src/views/system/user/index.vue               |   87 +-
 src/views/tool/iperf/index.vue                |    6 +-
 src/views/tool/lockScreen/index.vue           |    2 +-
 src/views/tool/net/index.vue                  |    2 +-
 src/views/tool/ping/index.vue                 |    4 +-
 src/views/tool/ps/index.vue                   |    2 +-
 src/views/tool/terminal/index.vue             |    2 +-
 src/views/tool/upload/index.vue               |   10 +-
 src/views/traceManage/analysis/index.vue      |   20 +-
 src/views/traceManage/pcap/file.vue           |   86 +-
 src/views/traceManage/pcap/index.vue          |   15 +-
 src/views/traceManage/task-hlr/index.vue      |   31 +-
 src/views/traceManage/task/analyze.vue        |    6 +-
 src/views/traceManage/task/index.vue          |   43 +-
 src/views/traceManage/tshark/index.vue        |    8 +-
 src/views/traceManage/wireshark/index.vue     |    4 +-
 125 files changed, 1775 insertions(+), 3464 deletions(-)
 delete mode 100644 src/views/configManage/backupManage/index.vue
 delete mode 100644 src/views/configManage/softwareManage/components/software-history.vue
 delete mode 100644 src/views/configManage/softwareManage/index.vue

diff --git a/src/views/account/components/base-info.vue b/src/views/account/components/base-info.vue
index 5f4a309f..7287b028 100644
--- a/src/views/account/components/base-info.vue
+++ b/src/views/account/components/base-info.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { Modal, message } from 'ant-design-vue/lib';
-import { FileType } from 'ant-design-vue/lib/upload/interface';
-import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
+import { Modal, message } from 'ant-design-vue/es';
+import { FileType } from 'ant-design-vue/es/upload/interface';
+import { UploadRequestOption } from 'ant-design-vue/es/vc-upload/interface';
 import { onMounted, reactive, ref, toRaw } from 'vue';
 import { updateUserProfile, uploadAvatar } from '@/api/profile';
 import { regExpEmail, regExpMobile, regExpNick } from '@/utils/regular-utils';
@@ -27,7 +27,7 @@ let stateForm = reactive({
     nickName: '',
     email: '',
     phonenumber: '',
-    sex: undefined,
+    sex: '0',
   },
   /**表单提交点击状态 */
   formClick: false,
diff --git a/src/views/account/components/reset-passwd.vue b/src/views/account/components/reset-passwd.vue
index 5e15a71f..87e6ba0f 100644
--- a/src/views/account/components/reset-passwd.vue
+++ b/src/views/account/components/reset-passwd.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Modal, message } from 'ant-design-vue/lib';
+import { Modal, message } from 'ant-design-vue/es';
 import { reactive } from 'vue';
 import { updateUserPwd } from '@/api/profile';
 import { regExpPasswd } from '@/utils/regular-utils';
@@ -147,7 +147,7 @@ function fnFinish() {
       </a-input-password>
     </a-form-item>
 
-    <a-form-item :wrapper-col="{ span: 3 }">
+    <a-form-item :wrapper-col="{ span: 4 }">
       <a-button
         block
         type="primary"
diff --git a/src/views/account/components/style-layout.vue b/src/views/account/components/style-layout.vue
index 1aed25dd..3ad7a3e1 100644
--- a/src/views/account/components/style-layout.vue
+++ b/src/views/account/components/style-layout.vue
@@ -1,22 +1,32 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
-import { getLocalColor, changePrimaryColor } from '@/hooks/useTheme';
+import { viewTransitionTheme } from 'antdv-pro-layout';
 import useLayoutStore from '@/store/modules/layout';
 import useI18n from '@/hooks/useI18n';
 const { t } = useI18n();
-const { proConfig, changeConf } = useLayoutStore();
+const { proConfig, changeConf, themeConfig, changePrimaryColor } =
+  useLayoutStore();
 
-let color = ref<string>(getLocalColor());
+let timerId: any = null;
 
 /**改变主题色 */
 function fnColorChange(e: Event) {
   const target = e.target as HTMLInputElement;
-  if (target.nodeName === 'INPUT') {
-    changePrimaryColor(target.value ?? '#1890ff');
-  } else {
-    changePrimaryColor();
-  }
-  color.value = getLocalColor();
+  // 需要防抖函数处理
+  clearTimeout(timerId);
+  timerId = setTimeout(() => {
+    if (target.nodeName === 'INPUT') {
+      changePrimaryColor(target.value ?? '#1890ff');
+    } else {
+      changePrimaryColor();
+    }
+  }, 300);
+}
+
+/**手动变更主题-过渡动画 */
+function changeTheme(e: any) {
+  viewTransitionTheme(isDarkMode => {
+    changeConf('theme', isDarkMode ? 'light' : 'dark');
+  }, e);
 }
 </script>
 
@@ -56,13 +66,31 @@ function fnColorChange(e: Event) {
       <template #extra>
         <a-space :size="16" align="end" direction="horizontal">
           <a-button type="primary" size="small" @click="fnColorChange">
-            <BgColorsOutlined />
             {{ t('views.account.settings.colorRandomly') }}
           </a-button>
-          <input type="color" :value="color" @input="fnColorChange" />
+          <input
+            type="color"
+            :value="themeConfig?.token?.colorPrimary"
+            @input="fnColorChange"
+          />
         </a-space>
       </template>
     </a-list-item>
+    <a-list-item>
+      {{ t('views.account.settings.theme') }}
+      <template #actions>
+        {{ t('views.account.settings.themeActions') }}
+      </template>
+      <template #extra>
+        <a-button
+          :type="proConfig.theme === 'dark' ? 'primary' : 'default'"
+          size="small"
+          @click="changeTheme"
+        >
+          {{ proConfig.theme }}
+        </a-button>
+      </template>
+    </a-list-item>
     <a-list-item>
       {{ t('views.account.settings.navTheme') }}
       <template #actions>
diff --git a/src/views/account/profile.vue b/src/views/account/profile.vue
index 31451ead..4d8d57e6 100644
--- a/src/views/account/profile.vue
+++ b/src/views/account/profile.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { PageContainer } from 'antdv-pro-layout';
-import { message } from 'ant-design-vue/lib';
+import { message } from 'ant-design-vue/es';
 import { getUserProfile } from '@/api/profile';
 import { reactive, ref, onMounted } from 'vue';
 import { parseDateToStr } from '@/utils/date-utils';
@@ -205,6 +205,7 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   align-items: center;
+  padding: 16px 0;
   &-no {
     align-self: flex-start;
     font-size: 14px;
diff --git a/src/views/configManage/backupManage/index.vue b/src/views/configManage/backupManage/index.vue
deleted file mode 100644
index 3df23d02..00000000
--- a/src/views/configManage/backupManage/index.vue
+++ /dev/null
@@ -1,518 +0,0 @@
-<script setup lang="ts">
-import { reactive, ref, onMounted, toRaw } from 'vue';
-import { PageContainer } from 'antdv-pro-layout';
-import { Form, message, Modal } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
-import { parseDateToStr } from '@/utils/date-utils';
-import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import {
-  listNeBackup,
-  delNeBackup,
-  downloadNeBackup,
-} from '@/api/configManage/backupManage';
-import { saveAs } from 'file-saver';
-import useI18n from '@/hooks/useI18n';
-import { updateBackInfo } from '@/api/configManage/backupManage';
-import useNeInfoStore from '@/store/modules/neinfo';
-const { t } = useI18n();
-
-/**查询参数 */
-let queryParams = reactive({
-  /**网元类型 */
-  neType: '',
-  /**当前页数 */
-  pageNum: 1,
-  /**每页条数 */
-  pageSize: 20,
-});
-
-/**查询参数重置 */
-function fnQueryReset() {
-  queryParams = Object.assign(queryParams, {
-    neType: '',
-    pageNum: 1,
-    pageSize: 20,
-  });
-  tablePagination.current = 1;
-  tablePagination.pageSize = 20;
-  fnGetList();
-}
-
-/**表格状态类型 */
-type TabeStateType = {
-  /**加载等待 */
-  loading: boolean;
-  /**紧凑型 */
-  size: SizeType;
-  /**搜索栏 */
-  seached: boolean;
-  /**记录数据 */
-  data: object[];
-  /**勾选记录 */
-  selectedRowKeys: (string | number)[];
-};
-
-/**表格状态 */
-let tableState: TabeStateType = reactive({
-  loading: false,
-  size: 'middle',
-  seached: true,
-  data: [],
-  selectedRowKeys: [],
-});
-
-/**表格字段列 */
-let tableColumns: ColumnsType = [
-  {
-    title: t('common.rowId'),
-    dataIndex: 'id',
-    align: 'center',
-    width: 1,
-  },
-  {
-    title: t('views.configManage.backupManage.neType'),
-    dataIndex: 'neType',
-    align: 'center',
-    width: 2,
-  },
-  {
-    title: t('views.configManage.backupManage.neID'),
-    dataIndex: 'neId',
-    align: 'center',
-    width: 2,
-  },
-  {
-    title: t('views.configManage.backupManage.fileName'),
-    dataIndex: 'fileName',
-    align: 'center',
-    width: 3,
-  },
-  {
-    title: t('views.configManage.backupManage.remark'),
-    dataIndex: 'comment',
-    align: 'center',
-    width: 3,
-  },
-  {
-    title: t('views.configManage.backupManage.createAt'),
-    dataIndex: 'createTime',
-    align: 'center',
-    customRender(opt) {
-      if (!opt.value) return '';
-      return parseDateToStr(opt.value);
-    },
-    width: 3,
-  },
-  {
-    title: t('common.operate'),
-    key: 'id',
-    align: 'center',
-    fixed: 'right',
-    width: 2,
-  },
-];
-
-/**表格分页器参数 */
-let tablePagination = reactive({
-  /**当前页数 */
-  current: 1,
-  /**每页条数 */
-  pageSize: 20,
-  /**默认的每页条数 */
-  defaultPageSize: 20,
-  /**指定每页可以显示多少条 */
-  pageSizeOptions: ['10', '20', '50', '100'],
-  /**只有一页时是否隐藏分页器 */
-  hideOnSinglePage: false,
-  /**是否可以快速跳转至某页 */
-  showQuickJumper: true,
-  /**是否可以改变 pageSize */
-  showSizeChanger: true,
-  /**数据总数 */
-  total: 0,
-  showTotal: (total: number) => t('common.tablePaginationTotal', { total }),
-  onChange: (page: number, pageSize: number) => {
-    tablePagination.current = page;
-    tablePagination.pageSize = pageSize;
-    queryParams.pageNum = page;
-    queryParams.pageSize = pageSize;
-    fnGetList();
-  },
-});
-
-/**表格紧凑型变更操作 */
-function fnTableSize({ key }: MenuInfo) {
-  tableState.size = key as SizeType;
-}
-
-/**信息文件下载 */
-function fnDownloadFile(row: Record<string, any>) {
-  Modal.confirm({
-    title: t('common.tipTitle'),
-    content: t('views.configManage.backupManage.totalSure', {
-      oper: t('common.downloadText'),
-      id: row.id,
-    }),
-    onOk() {
-      const key = 'downloadNeBackup';
-      message.loading({ content: t('common.loading'), key });
-      downloadNeBackup(toRaw(row)).then(res => {
-        if (res.code === RESULT_CODE_SUCCESS) {
-          message.success({
-            content: t('common.msgSuccess', { msg: t('common.downloadText') }),
-            key,
-            duration: 2,
-          });
-          saveAs(res.data, `${row.fileName}`);
-        } else {
-          message.error({
-            content: `${res.msg}`,
-            key,
-            duration: 2,
-          });
-        }
-      });
-    },
-  });
-}
-
-/**
- * 备份信息删除
- * @param row 记录编号ID
- */
-function fnRecordDelete(row: Record<string, any>) {
-  Modal.confirm({
-    title: t('common.tipTitle'),
-    content: t('views.configManage.backupManage.totalSure', {
-      oper: t('common.deleteText'),
-      id: row.id,
-    }),
-    onOk() {
-      const key = 'delNeBackup';
-      message.loading({ content: t('common.loading'), key });
-      delNeBackup(toRaw(row)).then(res => {
-        if (res.code === RESULT_CODE_SUCCESS) {
-          message.success({
-            content: t('common.msgSuccess', { msg: t('common.deleteText') }),
-            key,
-            duration: 2,
-          });
-          fnGetList();
-        } else {
-          message.error({
-            content: `${res.msg}`,
-            key: key,
-            duration: 2,
-          });
-        }
-      });
-    },
-  });
-}
-
-/**查询备份信息列表, pageNum初始页数 */
-function fnGetList(pageNum?: number) {
-  if (tableState.loading) return;
-  tableState.loading = true;
-  if (pageNum) {
-    queryParams.pageNum = pageNum;
-  }
-  listNeBackup(toRaw(queryParams)).then(res => {
-    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
-      // 取消勾选
-      if (tableState.selectedRowKeys.length > 0) {
-        tableState.selectedRowKeys = [];
-      }
-      tablePagination.total = res.total;
-      tableState.data = res.rows;
-      if (
-        tablePagination.total <=
-          (queryParams.pageNum - 1) * tablePagination.pageSize &&
-        queryParams.pageNum !== 1
-      ) {
-        tableState.loading = false;
-        fnGetList(queryParams.pageNum - 1);
-      }
-    }
-    tableState.loading = false;
-  });
-}
-
-/**对话框对象信息状态类型 */
-type ModalStateType = {
-  /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
-  /**标题 */
-  title: string;
-  /**表单数据 */
-  from: Record<string, any>;
-  /**确定按钮 loading */
-  confirmLoading: boolean;
-};
-
-/**对话框对象信息状态 */
-let modalState: ModalStateType = reactive({
-  visibleByEdit: false,
-  title: '任务设置',
-  from: {
-    id: 0,
-    backupInfo: '',
-  },
-  confirmLoading: false,
-});
-
-/**
- * 对话框弹出显示为 新增或者修改
- * @param noticeId 网元id, 不传为新增
- */
-function fnModalVisibleByEdit(row: Record<string, any>) {
-  if (modalState.confirmLoading) return;
-  modalState.from.backupInfo = row.comment;
-  modalState.from.id = row.id;
-  modalState.title = t('views.configManage.backupManage.edit');
-  modalState.visibleByEdit = true;
-}
-
-/**对话框内表单属性和校验规则 */
-const modalStateFrom = Form.useForm(
-  modalState.from,
-  reactive({
-    backupInfo: [
-      {
-        required: true,
-        message:
-          t('views.configManage.backupManage.remark') + t('common.unableNull'),
-      },
-    ],
-  })
-);
-/**
- * 对话框弹出确认执行函数
- * 进行表达规则校验
- */
-function fnModalOk() {
-  modalStateFrom
-    .validate()
-    .then(e => {
-      modalState.confirmLoading = true;
-      const from = toRaw(modalState.from);
-      const hide = message.loading(t('common.loading'), 0);
-      updateBackInfo(from)
-        .then(res => {
-          if (res.code === RESULT_CODE_SUCCESS) {
-            message.success({
-              content: t('common.msgSuccess', { msg: modalState.title }),
-              duration: 3,
-            });
-            modalState.visibleByEdit = false;
-            modalStateFrom.resetFields();
-            fnGetList();
-          } else {
-            message.error({
-              content: `${res.msg}`,
-              duration: 3,
-            });
-            fnGetList();
-          }
-        })
-        .finally(() => {
-          hide();
-          modalState.confirmLoading = false;
-        });
-    })
-    .catch(e => {
-      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
-    });
-}
-
-/**
- * 对话框弹出关闭执行函数
- * 进行表达规则校验
- */
-function fnModalCancel() {
-  modalState.visibleByEdit = false;
-  modalStateFrom.resetFields();
-}
-
-onMounted(() => {
-  // 获取列表数据
-  fnGetList();
-});
-</script>
-
-<template>
-  <PageContainer>
-    <a-card
-      v-show="tableState.seached"
-      :bordered="false"
-      :body-style="{ marginBottom: '24px', paddingBottom: 0 }"
-    >
-      <!-- 表格搜索栏 -->
-      <a-form :model="queryParams" name="queryParams" layout="horizontal">
-        <a-row :gutter="16">
-          <a-col :lg="6" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.configManage.backupManage.neType')"
-              name="neType "
-            >
-              <a-auto-complete
-                v-model:value="queryParams.neType"
-                :options="useNeInfoStore().getNeSelectOtions"
-                allow-clear
-                :placeholder="t('views.configManage.backupManage.neTypePlease')"
-              />
-            </a-form-item>
-          </a-col>
-          <a-col :lg="6" :md="12" :xs="24">
-            <a-form-item>
-              <a-space :size="8">
-                <a-button type="primary" @click.prevent="fnGetList(1)">
-                  <template #icon><SearchOutlined /></template>
-                  {{ t('common.search') }}
-                </a-button>
-                <a-button type="default" @click.prevent="fnQueryReset">
-                  <template #icon><ClearOutlined /></template>
-                  {{ t('common.reset') }}
-                </a-button>
-              </a-space>
-            </a-form-item>
-          </a-col>
-        </a-row>
-      </a-form>
-    </a-card>
-
-    <a-card :bordered="false" :body-style="{ padding: '0px' }">
-      <!-- 插槽-卡片左侧侧 -->
-      <template #title>
-        <a-space :size="8" align="center">
-          <!-- <a-button type="primary" @click.prevent="fnModalVisibleByEdit()">
-            <template #icon><FieldTimeOutlined /></template>
-            {{ t('views.configManage.backupManage.setBackupTask') }}
-          </a-button> -->
-        </a-space>
-      </template>
-
-      <!-- 插槽-卡片右侧 -->
-      <template #extra>
-        <a-space :size="8" align="center">
-          <a-tooltip>
-            <template #title>{{ t('common.searchBarText') }}</template>
-            <a-switch
-              v-model:checked="tableState.seached"
-              :checked-children="t('common.switch.show')"
-              :un-checked-children="t('common.switch.hide')"
-              size="small"
-            />
-          </a-tooltip>
-          <a-tooltip>
-            <template #title>{{ t('common.reloadText') }}</template>
-            <a-button type="text" @click.prevent="fnGetList(1)">
-              <template #icon><ReloadOutlined /></template>
-            </a-button>
-          </a-tooltip>
-          <a-tooltip>
-            <template #title>{{ t('common.sizeText') }}</template>
-            <a-dropdown trigger="click">
-              <a-button type="text">
-                <template #icon><ColumnHeightOutlined /></template>
-              </a-button>
-              <template #overlay>
-                <a-menu
-                  :selected-keys="[tableState.size as string]"
-                  @click="fnTableSize"
-                >
-                  <a-menu-item key="default">
-                    {{ t('common.size.default') }}
-                  </a-menu-item>
-                  <a-menu-item key="middle">
-                    {{ t('common.size.middle') }}
-                  </a-menu-item>
-                  <a-menu-item key="small">
-                    {{ t('common.size.small') }}
-                  </a-menu-item>
-                </a-menu>
-              </template>
-            </a-dropdown>
-          </a-tooltip>
-        </a-space>
-      </template>
-
-      <!-- 表格列表 -->
-      <a-table
-        class="table"
-        row-key="id"
-        :columns="tableColumns"
-        :loading="tableState.loading"
-        :data-source="tableState.data"
-        :size="tableState.size"
-        :pagination="tablePagination"
-        :scroll="{ x: 1200, y: 400 }"
-      >
-        <template #bodyCell="{ column, record }">
-          <template v-if="column.key === 'id'">
-            <a-space :size="8" align="center">
-              <a-tooltip>
-                <template #title>{{ t('common.downloadText') }}</template>
-                <a-button type="link" @click.prevent="fnDownloadFile(record)">
-                  <template #icon><DownloadOutlined /></template>
-                </a-button>
-              </a-tooltip>
-              <a-tooltip>
-                <template #title>{{ t('common.deleteText') }}</template>
-                <a-button type="link" @click.prevent="fnRecordDelete(record)">
-                  <template #icon><DeleteOutlined /></template>
-                </a-button>
-              </a-tooltip>
-              <a-tooltip>
-                <template #title>{{ t('common.editText') }}</template>
-                <a-button
-                  type="link"
-                  @click.prevent="fnModalVisibleByEdit(record)"
-                >
-                  <template #icon><FormOutlined /></template>
-                </a-button>
-              </a-tooltip>
-            </a-space>
-          </template>
-        </template>
-      </a-table>
-    </a-card>
-
-    <!-- 新增框或修改框 -->
-    <ProModal
-      :drag="true"
-      :width="800"
-      :destroyOnClose="true"
-      :keyboard="false"
-      :mask-closable="false"
-      :visible="modalState.visibleByEdit"
-      :title="modalState.title"
-      :confirm-loading="modalState.confirmLoading"
-      @ok="fnModalOk"
-      @cancel="fnModalCancel"
-    >
-      <a-form name="modalStateFrom" layout="horizontal">
-        <a-form-item
-          :label="t('views.configManage.backupManage.remark')"
-          name="backupInfo"
-          v-bind="modalStateFrom.validateInfos.backupInfo"
-        >
-          <a-textarea
-            v-model:value="modalState.from.backupInfo"
-            :auto-size="{ minRows: 2, maxRows: 6 }"
-            :maxlength="250"
-            :show-count="true"
-          />
-        </a-form-item>
-      </a-form>
-    </ProModal>
-  </PageContainer>
-</template>
-
-<style lang="less" scoped>
-.table :deep(.ant-pagination) {
-  padding: 0 24px;
-}
-</style>
diff --git a/src/views/configManage/neManage/index.vue b/src/views/configManage/neManage/index.vue
index a8b2173d..de374d4a 100644
--- a/src/views/configManage/neManage/index.vue
+++ b/src/views/configManage/neManage/index.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { reactive, onMounted, toRaw, ref } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Modal, Form } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { ProModal } from 'antdv-pro-modal';
+import { message, Modal, Form } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import {
   listNeInfo,
   getNeInfo,
@@ -20,8 +21,8 @@ import {
 } from '@/api/configManage/neManage';
 import { updateNeConfigReload } from '@/api/configManage/configParam';
 import useI18n from '@/hooks/useI18n';
-import { FileType } from 'ant-design-vue/lib/upload/interface';
-import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
+import { FileType } from 'ant-design-vue/es/upload/interface';
+import { UploadRequestOption } from 'ant-design-vue/es/vc-upload/interface';
 import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { NE_TYPE_LIST } from '@/constants/ne-constants';
@@ -194,11 +195,11 @@ function fnTableSize({ key }: MenuInfo) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**详情框是否显示 */
-  visibleByView: boolean;
+  openByView: boolean;
   /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**导入是否显示 */
-  visibleByImport: boolean;
+  openByImport: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -211,9 +212,9 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByView: false,
-  visibleByEdit: false,
-  visibleByImport: false,
+  openByView: false,
+  openByEdit: false,
+  openByImport: false,
   title: '网元',
   from: {
     id: undefined,
@@ -326,7 +327,7 @@ function fnModalVisibleByEdit(row?: Record<string, any>) {
   if (!row) {
     modalStateFrom.resetFields();
     modalState.title = t('views.configManage.neManage.addNe');
-    modalState.visibleByEdit = true;
+    modalState.openByEdit = true;
   } else {
     if (modalState.confirmLoading) return;
     const hide = message.loading(t('common.loading'), 0);
@@ -337,7 +338,7 @@ function fnModalVisibleByEdit(row?: Record<string, any>) {
       if (res.code === RESULT_CODE_SUCCESS) {
         modalState.from = Object.assign(modalState.from, res.data);
         modalState.title = t('views.configManage.neManage.editNe');
-        modalState.visibleByEdit = true;
+        modalState.openByEdit = true;
       } else {
         message.error(t('views.configManage.neManage.getInfo'), 2);
       }
@@ -370,7 +371,7 @@ function fnModalOk() {
                 content: t('common.msgSuccess', { msg: modalState.title }),
                 duration: 3,
               });
-              modalState.visibleByEdit = false;
+              modalState.openByEdit = false;
               modalStateFrom.resetFields();
               fnGetList(1);
             }
@@ -418,7 +419,7 @@ function fnImportModalOk() {
               content: t('common.msgSuccess', { msg: modalState.title }),
               duration: 3,
             });
-            modalState.visibleByEdit = false;
+            modalState.openByEdit = false;
             modalStateFrom.resetFields();
           } else {
             message.error({
@@ -444,8 +445,8 @@ function fnImportModalOk() {
  * 进行表达规则校验
  */
 function fnImportModalCancel() {
-  modalState.visibleByView = false;
-  modalState.visibleByImport = false;
+  modalState.openByView = false;
+  modalState.openByImport = false;
   importStateFrom.resetFields();
 }
 
@@ -454,8 +455,8 @@ function fnImportModalCancel() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByEdit = false;
-  modalState.visibleByView = false;
+  modalState.openByEdit = false;
+  modalState.openByView = false;
   modalStateFrom.resetFields();
 }
 
@@ -707,7 +708,7 @@ function fnRecordMore(type: string | number, row: Record<string, any>) {
   if (type === 'import') {
     modalState.importFrom = Object.assign(modalState.importFrom, row);
     modalState.title = t('views.configManage.neManage.import');
-    modalState.visibleByImport = true;
+    modalState.openByImport = true;
   }
 }
 
@@ -978,7 +979,7 @@ onMounted(() => {
       :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
-      :visible="modalState.visibleByEdit"
+      :open="modalState.openByEdit"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnModalOk"
@@ -990,7 +991,7 @@ onMounted(() => {
         :label-col="{ span: 6 }"
         :labelWrap="true"
       >
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.configManage.neManage.neType')"
@@ -1007,7 +1008,7 @@ onMounted(() => {
                       <template #title>{{
                         t('views.configManage.neManage.neTypeTip')
                       }}</template>
-                      <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                      <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
                     </a-tooltip>
                   </template>
                 </a-input>
@@ -1028,7 +1029,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.configManage.neManage.uid')"
@@ -1068,7 +1069,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.configManage.neManage.ip')"
@@ -1090,7 +1091,7 @@ onMounted(() => {
                     <template #title>
                       <div>{{ t('views.configManage.neManage.portTip') }}</div>
                     </template>
-                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                    <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
                   </a-tooltip>
                 </template>
               </a-input>
@@ -1098,7 +1099,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.configManage.neManage.neName')"
@@ -1120,14 +1121,14 @@ onMounted(() => {
                     <template #title>
                       <div>{{ t('views.configManage.neManage.macTip') }}</div>
                     </template>
-                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                    <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
                   </a-tooltip> </template
               ></a-input>
             </a-form-item>
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.configManage.neManage.vendorName')"
@@ -1144,7 +1145,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.configManage.neManage.province')"
@@ -1179,14 +1180,14 @@ onMounted(() => {
       :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
-      :visible="modalState.visibleByImport"
+      :open="modalState.openByImport"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnImportModalOk"
       @cancel="fnImportModalCancel"
     >
       <a-form name="importStateFrom" layout="horizontal">
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.configManage.neManage.neType')"
diff --git a/src/views/configManage/neOverview/index.vue b/src/views/configManage/neOverview/index.vue
index 9245101c..03e50f1f 100644
--- a/src/views/configManage/neOverview/index.vue
+++ b/src/views/configManage/neOverview/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { PageContainer } from 'antdv-pro-layout';
-import { ColumnsType } from 'ant-design-vue/lib/table';
-import { message } from 'ant-design-vue/lib';
+import { ColumnsType } from 'ant-design-vue/es/table';
+import { message } from 'ant-design-vue/es';
 import { reactive, toRaw, ref, onMounted, onBeforeUnmount, markRaw } from 'vue';
 import { listMain } from '@/api/index';
 import useI18n from '@/hooks/useI18n';
@@ -243,9 +243,9 @@ function fnDesign(container: HTMLElement | undefined, option: any) {
 }
 
 /**抽屉 网元详细信息 */
-const visible = ref(false);
+const open = ref(false);
 const closeDrawer = () => {
-  visible.value = false;
+  open.value = false;
 };
 /**抽屉 网元详细信息 */
 
@@ -302,7 +302,7 @@ function rowClick(record: any, index: any) {
           expiryDate: pronData.expiryDate,
         };
       }
-      visible.value = true;
+      open.value = true;
     },
   };
 }
@@ -343,7 +343,7 @@ onBeforeUnmount(() => {
 <template>
   <PageContainer :breadcrumb="{}">
     <div>
-      <a-drawer :visible="visible" @close="closeDrawer" :width="700">
+      <a-drawer :open="open" @close="closeDrawer" :width="700">
         <a-descriptions bordered :column="1" :label-style="{ width: '160px' }">
           <a-descriptions-item :label="t('views.index.hostName')">{{
             pronInfo.hostName
diff --git a/src/views/configManage/softwareManage/components/software-history.vue b/src/views/configManage/softwareManage/components/software-history.vue
deleted file mode 100644
index ee7e883e..00000000
--- a/src/views/configManage/softwareManage/components/software-history.vue
+++ /dev/null
@@ -1,280 +0,0 @@
-<script setup lang="ts">
-import { reactive, toRaw, watch, ref } from 'vue';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { ColumnsType } from 'ant-design-vue/lib/table';
-import { listNeVersion } from '@/api/configManage/softwareManage';
-import { parseDateToStr } from '@/utils/date-utils';
-import useNeInfoStore from '@/store/modules/neinfo';
-import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import useI18n from '@/hooks/useI18n';
-const { t } = useI18n();
-const emit = defineEmits(['ok', 'cancel', 'update:visible']);
-const props = defineProps({
-  title: {
-    type: String,
-    default: '标题',
-  },
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-/**开始结束时间 */
-let queryRangePicker = ref<[string, string]>(['', '']);
-
-/**查询参数 */
-let queryParams = reactive({
-  /**网元类型 */
-  neType: '',
-  /**记录开始时间 */
-  beginTime: '',
-  /**记录结束时间 */
-  endTime: '',
-  /**状态 */
-  status: undefined,
-  /**当前页数 */
-  pageNum: 1,
-  /**每页条数 */
-  pageSize: 20,
-});
-
-/**查询参数重置 */
-function fnQueryReset() {
-  queryRangePicker.value = ['', ''];
-  queryParams = Object.assign(queryParams, {
-    neType: '',
-    status: undefined,
-    beginTime: '',
-    endTime: '',
-    pageNum: 1,
-    pageSize: 20,
-  });
-  tablePagination.current = 1;
-  tablePagination.pageSize = 20;
-  fnGetList();
-}
-
-/**表格状态类型 */
-type TabeStateType = {
-  /**加载等待 */
-  loading: boolean;
-  /**紧凑型 */
-  size: SizeType;
-  /**记录数据 */
-  data: object[];
-  /**勾选记录 */
-  selectedRowKeys: (string | number)[];
-};
-
-/**表格状态 */
-let tableState: TabeStateType = reactive({
-  loading: false,
-  size: 'small',
-  data: [],
-  selectedRowKeys: [],
-});
-
-/**表格字段列 */
-let tableColumns: ColumnsType = [
-  {
-    title: t('views.configManage.softwareManage.neType'),
-    dataIndex: 'neType',
-    align: 'center',
-    width: 100,
-  },
-  {
-    title: t('views.configManage.neManage.neId'),
-    dataIndex: 'neId',
-    align: 'center',
-    width: 200,
-  },
-  {
-    title: t('views.configManage.softwareManage.versions'),
-    dataIndex: 'version',
-    align: 'center',
-  },
-  {
-    title: t('views.configManage.softwareManage.upVersions'),
-    dataIndex: 'preVersion',
-    align: 'center',
-  },
-  {
-    title: t('views.configManage.softwareManage.backVersions'),
-    dataIndex: 'newVersion',
-    align: 'center',
-  },
-  {
-    title: t('views.configManage.softwareManage.status'),
-    dataIndex: 'status',
-    key: 'status',
-    align: 'center',
-    width: 100,
-  },
-  {
-    title: t('views.configManage.softwareManage.letUpTime'),
-    dataIndex: 'updateTime',
-    align: 'center',
-    customRender(opt) {
-      if (!opt.value) return '';
-      return parseDateToStr(opt.value);
-    },
-    width: 200,
-  },
-];
-
-/**表格分页器参数 */
-let tablePagination = reactive({
-  /**当前页数 */
-  current: 1,
-  /**每页条数 */
-  pageSize: 20,
-  /**默认的每页条数 */
-  defaultPageSize: 20,
-  /**指定每页可以显示多少条 */
-  pageSizeOptions: ['10', '20', '50', '100'],
-  /**只有一页时是否隐藏分页器 */
-  hideOnSinglePage: false,
-  /**是否可以快速跳转至某页 */
-  showQuickJumper: true,
-  /**是否可以改变 pageSize */
-  showSizeChanger: true,
-  /**数据总数 */
-  total: 0,
-  showTotal: (total: number) => t('common.tablePaginationTotal', { total }),
-  onChange: (page: number, pageSize: number) => {
-    tablePagination.current = page;
-    tablePagination.pageSize = pageSize;
-    queryParams.pageNum = page;
-    queryParams.pageSize = pageSize;
-    fnGetList();
-  },
-});
-
-/**查询角色未授权用户列表, pageNum初始页数 */
-function fnGetList(pageNum?: number) {
-  if (tableState.loading) return;
-  tableState.loading = true;
-  if (pageNum) {
-    queryParams.pageNum = pageNum;
-  }
-  if (!queryRangePicker.value) {
-    queryRangePicker.value = ['', ''];
-  }
-  queryParams.beginTime = queryRangePicker.value[0];
-  queryParams.endTime = queryRangePicker.value[1];
-  listNeVersion(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
-      ) {
-        tableState.loading = false;
-        fnGetList(queryParams.pageNum - 1);
-      }
-    }
-    tableState.loading = false;
-  });
-}
-
-/**弹框取消按钮事件 */
-function fnModalCancel() {
-  emit('cancel');
-}
-
-/**显示弹框时初始数据 */
-function init() {
-  // 查询参数重置
-  fnQueryReset();
-}
-
-/**监听是否显示，初始数据 */
-watch(
-  () => props.visible,
-  val => {
-    if (val) init();
-  }
-);
-</script>
-
-<template>
-  <ProModal
-    :drag="true"
-    :forceFullscreen="true"
-    :destroyOnClose="true"
-    :title="props.title"
-    :visible="props.visible"
-    :keyboard="false"
-    :mask-closable="false"
-    @cancel="fnModalCancel"
-    :footer="false"
-  >
-    <!-- 表格搜索栏 -->
-    <a-form :model="queryParams" name="queryParams" layout="horizontal">
-      <a-row :gutter="16">
-        <a-col :lg="6" :md="6" :xs="24">
-          <a-form-item
-            :label="t('views.configManage.softwareManage.neType')"
-            name="neType"
-          >
-            <a-auto-complete
-              v-model:value="queryParams.neType"
-              :options="useNeInfoStore().getNeSelectOtions"
-              allow-clear
-              :placeholder="t('views.configManage.softwareManage.neTypePlease')"
-            />
-          </a-form-item>
-        </a-col>
-        <a-col :lg="6" :md="6" :xs="24">
-          <a-form-item
-            :label="t('views.configManage.softwareManage.createTime')"
-            name="queryRangePicker"
-          >
-            <a-range-picker
-              v-model:value="queryRangePicker"
-              allow-clear
-              bordered
-              value-format="YYYY-MM-DD"
-              style="width: 100%"
-            ></a-range-picker>
-          </a-form-item>
-        </a-col>
-        <a-col :lg="6" :md="6" :xs="24">
-          <a-form-item>
-            <a-space :size="8">
-              <a-button type="primary" @click.prevent="fnGetList(1)">
-                <template #icon><SearchOutlined /></template>
-                {{ t('common.search') }}
-              </a-button>
-              <a-button type="default" @click.prevent="fnQueryReset">
-                <template #icon><ClearOutlined /></template>
-                {{ t('common.reset') }}
-              </a-button>
-            </a-space>
-          </a-form-item>
-        </a-col>
-      </a-row>
-    </a-form>
-
-    <a-table
-      class="table"
-      row-key="id"
-      :columns="tableColumns"
-      :loading="tableState.loading"
-      :data-source="tableState.data"
-      :size="tableState.size"
-      :scroll="{ x: true }"
-      :pagination="tablePagination"
-    >
-    </a-table>
-  </ProModal>
-</template>
-
-<style lang="less" scoped>
-.table :deep(.ant-pagination) {
-  padding: 0 24px;
-}
-</style>
diff --git a/src/views/configManage/softwareManage/index.vue b/src/views/configManage/softwareManage/index.vue
deleted file mode 100644
index d9867444..00000000
--- a/src/views/configManage/softwareManage/index.vue
+++ /dev/null
@@ -1,1111 +0,0 @@
-<script setup lang="ts">
-import { reactive, onMounted, toRaw } from 'vue';
-import { PageContainer } from 'antdv-pro-layout';
-import { Form, message, Modal } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
-import { parseDateToStr } from '@/utils/date-utils';
-import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import SoftwareHistory from './components/software-history.vue';
-import { listNeVersion } from '@/api/configManage/softwareManage';
-import {
-  listNeSoftware,
-  delNeSoftware,
-  downloadNeSoftware,
-  uploadNeSoftware,
-  sendNeSoftware,
-  runNeSoftware,
-  backNeSoftware,
-} from '@/api/configManage/softwareManage';
-import { saveAs } from 'file-saver';
-import useI18n from '@/hooks/useI18n';
-import useNeInfoStore from '@/store/modules/neinfo';
-import { FileType } from 'ant-design-vue/lib/upload/interface';
-import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
-import useMaskStore from '@/store/modules/mask';
-const maskStore = useMaskStore();
-const { t } = useI18n();
-
-/**查询参数 */
-let queryParams = reactive({
-  /**网元类型 */
-  neType: '',
-  /**当前页数 */
-  pageNum: 1,
-  /**每页条数 */
-  pageSize: 20,
-});
-
-/**查询参数重置 */
-function fnQueryReset() {
-  queryParams = Object.assign(queryParams, {
-    neType: '',
-    pageNum: 1,
-    pageSize: 20,
-  });
-  tablePagination.current = 1;
-  tablePagination.pageSize = 20;
-  fnGetList();
-}
-
-/**表格状态类型 */
-type TabeStateType = {
-  /**加载等待 */
-  loading: boolean;
-  /**紧凑型 */
-  size: SizeType;
-  /**搜索栏 */
-  seached: boolean;
-  /**记录数据 */
-  data: object[];
-  /**勾选记录 */
-  selectedRowKeys: (string | number)[];
-};
-
-/**表格状态 */
-let tableState: TabeStateType = reactive({
-  loading: false,
-  size: 'small',
-  seached: false,
-  data: [],
-  selectedRowKeys: [],
-});
-
-/**表格字段列 */
-let tableColumns: ColumnsType = [
-  {
-    title: t('views.configManage.softwareManage.neType'),
-    dataIndex: 'neType',
-    align: 'center',
-    width: 2,
-  },
-  {
-    title: t('views.configManage.softwareManage.fileName'),
-    dataIndex: 'name',
-    align: 'center',
-    width: 2,
-  },
-  {
-    title: t('views.configManage.softwareManage.version'),
-    dataIndex: 'version',
-    align: 'center',
-    width: 2,
-  },
-  {
-    title: t('views.configManage.softwareManage.updateTime'),
-    dataIndex: 'createTime',
-    align: 'center',
-    customRender(opt) {
-      if (!opt.value) return '';
-      return parseDateToStr(opt.value);
-    },
-    width: 2,
-  },
-  {
-    title: t('views.configManage.softwareManage.description'),
-    dataIndex: 'name',
-    align: 'center',
-    width: 2,
-  },
-  {
-    title: t('common.operate'),
-    key: 'id',
-    align: 'center',
-    fixed: 'right',
-    width: 2,
-  },
-];
-
-/**表格分页器参数 */
-let tablePagination = reactive({
-  /**当前页数 */
-  current: 1,
-  /**每页条数 */
-  pageSize: 20,
-  /**默认的每页条数 */
-  defaultPageSize: 20,
-  /**指定每页可以显示多少条 */
-  pageSizeOptions: ['10', '20', '50', '100'],
-  /**只有一页时是否隐藏分页器 */
-  hideOnSinglePage: false,
-  /**是否可以快速跳转至某页 */
-  showQuickJumper: true,
-  /**是否可以改变 pageSize */
-  showSizeChanger: true,
-  /**数据总数 */
-  total: 0,
-  showTotal: (total: number) => t('common.tablePaginationTotal', { total }),
-  onChange: (page: number, pageSize: number) => {
-    tablePagination.current = page;
-    tablePagination.pageSize = pageSize;
-    queryParams.pageNum = page;
-    queryParams.pageSize = pageSize;
-    fnGetList();
-  },
-});
-
-/**表格紧凑型变更操作 */
-function fnTableSize({ key }: MenuInfo) {
-  tableState.size = key as SizeType;
-}
-
-/**文件对话框对象信息状态类型 */
-type FileStateType = {
-  /**是否下发或激活框 */
-  visible: boolean;
-  /**框类型 */
-  visibleType: string;
-  /**回退框是否显示 */
-  visibleByBack: boolean;
-  /**标题 */
-  title: string;
-  /**提示内容 */
-  content: string;
-  /**OK按钮是否禁用 */
-  okDisable: boolean;
-  /**网元参数 */
-  neOtions: Record<string, any>[];
-  /**表单数据 */
-  from: Record<string, any>;
-  /**回退表单数据 */
-  backFrom: Record<string, any>;
-  /**确定按钮 loading */
-  confirmLoading: boolean;
-};
-
-/**文件对话框对象信息状态类型 */
-let fileModalState: FileStateType = reactive({
-  visible: false,
-  visibleType: 'send',
-  visibleByBack: false,
-  title: '下发激活回退',
-  content: '',
-  okDisable: false,
-  neOtions: [],
-  from: {
-    neId: undefined,
-  },
-  backFrom: {
-    ne: undefined,
-    neType: undefined,
-    neId: undefined,
-    version: '',
-  },
-  confirmLoading: false,
-});
-
-/**对话框内表单属性和校验规则 */
-const fileModalStateFrom = Form.useForm(
-  fileModalState.from,
-  reactive({
-    neId: [
-      {
-        required: true,
-        message: t('views.configManage.softwareManage.neIdPlease'),
-      },
-    ],
-  })
-);
-
-/**对话框内表单属性和校验规则 */
-const fileModalStateBackFrom = Form.useForm(
-  fileModalState.backFrom,
-  reactive({
-    ne: [
-      {
-        required: true,
-        message: t('views.configManage.softwareManage.neIdPlease'),
-      },
-    ],
-  })
-);
-
-/**
- * 文件对话框弹出显示为 下发或激活
- */
-function fnFileModalVisible(type: string | number, row: Record<string, any>) {
-  if (type === 'download') {
-    fnDownloadFile(row);
-    return;
-  }
-  if (type === 'delete') {
-    fnRecordDelete(row);
-    return;
-  }
-  if (type === 'send') {
-    fileModalState.title = t('views.configManage.softwareManage.sendTitle');
-    fileModalState.content = t(
-      'views.configManage.softwareManage.sendContent',
-      { fileName: row.fileName }
-    );
-  }
-  if (type === 'run') {
-    fileModalState.title = t('views.configManage.softwareManage.runTitle');
-    fileModalState.content = t('views.configManage.softwareManage.runContent', {
-      fileName: row.fileName,
-    });
-  }
-
-  if (!fileModalState.content) {
-    return;
-  }
-
-  fileModalState.from = Object.assign(fileModalState.from, row);
-  // 过滤网元类型
-  const neType = row.neType;
-  let arr: Record<string, any>[] = [];
-  for (const item of useNeInfoStore().getNeSelectOtions) {
-    if (item.value === neType && Array.isArray(item.children)) {
-      arr = item.children.concat();
-      if (arr.length > 0) {
-        fileModalState.from.neId = arr[0].neId;
-      }
-      break;
-    }
-  }
-  fileModalState.neOtions = arr;
-  fileModalState.visible = true;
-  fileModalState.visibleType = type as string;
-}
-
-/**
- * 文件对话框弹出确认执行函数
- * 进行表达规则校验
- */
-function fnFileModalOk() {
-  if (fileModalState.confirmLoading) return;
-  fileModalStateFrom
-    .validate()
-    .then(e => {
-      const from = toRaw(fileModalState.from);
-      const type = fileModalState.visibleType;
-      let fnType = null;
-      if (type === 'send') {
-        fnType = sendNeSoftware(from);
-      }
-      if (type === 'run') {
-        fnType = runNeSoftware(from);
-      }
-      if (fnType === null) {
-        return;
-      }
-      // 发送请求
-      fileModalState.confirmLoading = true;
-      const hide = message.loading(t('common.loading'), 0);
-      fnType
-        .then(res => {
-          // OMC自升级
-          if (type === 'run' && from.neType.toLowerCase() === 'omc') {
-            if (res.code === RESULT_CODE_SUCCESS) {
-              fnFileModalCancel();
-              maskStore.handleMaskType('reload');
-            } else {
-              message.error({
-                content: `${fileModalState.title} ${res.msg}`,
-                duration: 3,
-              });
-            }
-            return;
-          }
-          // 其他网元
-          if (res.code === RESULT_CODE_SUCCESS) {
-            message.success({
-              content: t('common.msgSuccess', { msg: fileModalState.title }),
-              duration: 3,
-            });
-            fnFileModalCancel();
-          } else {
-            message.error({
-              content: `${fileModalState.title} ${res.msg}`,
-              duration: 3,
-            });
-          }
-        })
-        .finally(() => {
-          hide();
-          fileModalState.confirmLoading = false;
-        });
-    })
-    .catch(e => {
-      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
-    });
-}
-
-/**
- * 文件对话框弹出关闭执行函数
- * 进行表达规则校验
- */
-function fnFileModalCancel() {
-  fileModalState.visible = false;
-  fileModalState.visibleType = 'send';
-  fileModalStateFrom.resetFields();
-}
-
-/**信息文件下载 */
-function fnDownloadFile(row: Record<string, any>) {
-  Modal.confirm({
-    title: t('common.tipTitle'),
-    content: t('views.configManage.softwareManage.downloadTip', {
-      fileName: row.fileName,
-    }),
-    onOk() {
-      const key = 'downloadNeSoftware';
-      message.loading({ content: t('common.loading'), key });
-      downloadNeSoftware(toRaw(row)).then(res => {
-        if (res.code === RESULT_CODE_SUCCESS) {
-          message.success({
-            content: t('common.msgSuccess', { msg: t('common.downloadText') }),
-            key,
-            duration: 2,
-          });
-          saveAs(res.data, `${row.fileName}`);
-        } else {
-          message.error({
-            content: `${res.msg}`,
-            key,
-            duration: 2,
-          });
-        }
-      });
-    },
-  });
-}
-
-/**
- * 信息删除
- * @param row 记录编号ID
- */
-function fnRecordDelete(row: Record<string, any>) {
-  Modal.confirm({
-    title: t('common.tipTitle'),
-    content: t('views.configManage.softwareManage.deleteTip', {
-      fileName: row.fileName,
-    }),
-    onOk() {
-      const key = 'delNeSoftware';
-      message.loading({ content: t('common.loading'), key });
-      delNeSoftware(toRaw(row)).then(res => {
-        if (res.code === RESULT_CODE_SUCCESS) {
-          message.success({
-            content: t('common.msgSuccess', { msg: t('common.deleteText') }),
-            key,
-            duration: 2,
-          });
-          fnGetList();
-        } else {
-          message.error({
-            content: `${res.msg}`,
-            key: key,
-            duration: 2,
-          });
-        }
-      });
-    },
-  });
-}
-
-/**查询信息列表, pageNum初始页数 */
-function fnGetList(pageNum?: number) {
-  if (tableState.loading) return;
-  tableState.loading = true;
-  if (pageNum) {
-    queryParams.pageNum = pageNum;
-  }
-  listNeSoftware(toRaw(queryParams)).then(res => {
-    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
-      // 取消勾选
-      if (tableState.selectedRowKeys.length > 0) {
-        tableState.selectedRowKeys = [];
-      }
-      tablePagination.total = res.total;
-      tableState.data = res.rows;
-      if (
-        tablePagination.total <=
-          (queryParams.pageNum - 1) * tablePagination.pageSize &&
-        queryParams.pageNum !== 1
-      ) {
-        tableState.loading = false;
-        fnGetList(queryParams.pageNum - 1);
-      }
-    }
-    tableState.loading = false;
-  });
-}
-
-/**对话框对象信息状态类型 */
-type ModalStateType = {
-  /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
-  /**网元版本历史框是否显示 */
-  visibleByHistory: boolean;
-
-  /**标题 */
-  title: string;
-  /**表单数据 */
-  from: Record<string, any>;
-  /**确定按钮 loading */
-  confirmLoading: boolean;
-};
-
-/**对话框对象信息状态 */
-let modalState: ModalStateType = reactive({
-  visibleByEdit: false,
-  visibleByHistory: false,
-  visibleByBack: false,
-  title: '上传更新',
-  from: {
-    neType: undefined,
-    version: '',
-    comment: '',
-    file: undefined,
-    fileList: [],
-    cms: undefined,
-    cmsList: [],
-  },
-  confirmLoading: false,
-});
-
-/**
- * 对话框弹出显示为 新增或者修改
- * @param noticeId 网元id, 不传为新增
- */
-function fnModalVisibleByEdit() {
-  modalState.title = t('common.uploadText');
-  modalState.visibleByEdit = true;
-}
-
-/**对话框内表单属性和校验规则 */
-const modalStateFrom = Form.useForm(
-  modalState.from,
-  reactive({
-    neType: [
-      {
-        required: true,
-        message: t('views.configManage.softwareManage.neTypePlease'),
-      },
-    ],
-    version: [
-      {
-        required: true,
-        message: t('views.configManage.softwareManage.versionPlease'),
-      },
-    ],
-    comment: [
-      {
-        required: false,
-        message: t('views.configManage.softwareManage.updateCommentPlease'),
-      },
-    ],
-    file: [
-      {
-        required: true,
-        message: t('views.configManage.softwareManage.updateFilePlease'),
-      },
-    ],
-  })
-);
-
-/**
- * 对话框弹出确认执行函数
- * 进行表达规则校验
- */
-function fnModalOk() {
-  modalStateFrom
-    .validate()
-    .then(e => {
-      modalState.confirmLoading = true;
-      const from = toRaw(modalState.from);
-      let formData = new FormData();
-      formData.append('nf', from.neType);
-      formData.append('version', from.version);
-      formData.append('comment', from.comment);
-      formData.append('file', from.file);
-      formData.append('cms', from.cms);
-      const hide = message.loading(t('common.loading'), 0);
-      uploadNeSoftware(formData)
-        .then(res => {
-          if (res.code === RESULT_CODE_SUCCESS) {
-            message.success({
-              content: t('common.msgSuccess', { msg: modalState.title }),
-              duration: 3,
-            });
-            modalState.visibleByEdit = false;
-            modalStateFrom.resetFields();
-          } else {
-            message.error({
-              content: `${res.msg}`,
-              duration: 3,
-            });
-          }
-        })
-        .finally(() => {
-          hide();
-          modalState.confirmLoading = false;
-          // 获取列表数据
-          fnGetList();
-        });
-    })
-    .catch(e => {
-      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
-    });
-}
-
-/**
- * 对话框弹出关闭执行函数
- * 进行表达规则校验
- */
-function fnModalCancel() {
-  modalState.visibleByEdit = false;
-  fileModalState.visibleByBack = false;
-  modalState.visibleByHistory = false;
-  modalStateFrom.resetFields();
-  fileModalStateBackFrom.resetFields();
-}
-
-/**
- * 对话框弹出显示为 网元版本信息
- */
-function fnModalVisibleByHistory() {
-  modalState.visibleByHistory = true;
-}
-
-/**
- * 对话框弹出显示为 回退框
- */
-function fnModalVisibleByBack() {
-  fileModalState.visibleByBack = true;
-  //fileModalStateBackFrom.resetFields();
-  fileModalState.title = t('views.configManage.softwareManage.backTitle');
-  fileModalState.content = t('views.configManage.softwareManage.neIdPlease');
-
-  if (!fileModalState.content) {
-    return;
-  }
-}
-
-/**回退网元类型选择对应修改 */
-function fnNeChange(_: any, item: any) {
-  fileModalState.backFrom.neType = item[1].neType;
-  fileModalState.backFrom.neId = item[1].neId;
-  let queryData: any = fileModalState.backFrom;
-  queryData.status = 'Active';
-  queryData.pageNum = 1;
-  queryData.pageSize = 20;
-  listNeVersion(toRaw(queryData)).then(res => {
-    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
-      if (
-        !res.total ||
-        !res.rows[0].preVersion ||
-        res.rows[0].preVersion === '-'
-      ) {
-        fileModalState.okDisable = true;
-        fileModalState.content = t(
-          'views.configManage.softwareManage.nullVersion'
-        );
-        tableState.loading = false;
-        return;
-      }
-      fileModalState.content = t(
-        'views.configManage.softwareManage.backContent',
-        { fileName: res.rows[0].preVersion }
-      );
-      fileModalState.backFrom.version = res.rows[0].preVersion;
-      fileModalState.okDisable = false;
-    }
-    tableState.loading = false;
-  });
-}
-
-/**
- * 回退对话框弹出确认执行函数
- */
-function fnBackModalOk() {
-  fileModalStateBackFrom
-    .validate()
-    .then(e => {
-      const from = toRaw(fileModalState.backFrom);
-      // 发送请求
-      fileModalState.confirmLoading = true;
-      const hide = message.loading(t('common.loading'), 0);
-      backNeSoftware(from)
-        .then(res => {
-          if (res.code === RESULT_CODE_SUCCESS) {
-            message.success({
-              content: t('common.msgSuccess', { msg: fileModalState.title }),
-              duration: 3,
-            });
-            fnFileModalCancel();
-          } else {
-            message.error({
-              content: `${fileModalState.title} ${res.msg}`,
-              duration: 3,
-            });
-          }
-          fileModalState.visibleByBack = false;
-          fileModalStateBackFrom.resetFields();
-        })
-        .finally(() => {
-          hide();
-          fileModalState.visibleByBack = false;
-          fileModalState.confirmLoading = false;
-        });
-    })
-    .catch(e => {
-      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
-    });
-}
-
-/**上传前检查或转换压缩 */
-function fnBeforeUploadFile(file: FileType) {
-  if (modalState.confirmLoading) return false;
-  const fileName = file.name;
-  const suff = fileName.substring(fileName.lastIndexOf('.'));
-  if (!['.deb', '.rpm'].includes(suff)) {
-    message.error(
-      t('views.configManage.softwareManage.onlyAble', {
-        fileText: '(.deb、.rpm)',
-      }),
-      3
-    );
-    return false;
-  }
-  // 根据给定的软件名取版本号 ims-r2.2312.x-ub22.deb
-  const matches = fileName.match(/([0-9.]+[0-9x]+)/);
-  if (matches) {
-    modalState.from.version = matches[0];
-  }
-  const neTypeIndex = fileName.indexOf('-');
-  if (neTypeIndex !== -1) {
-    modalState.from.neType = fileName.substring(0, neTypeIndex).toUpperCase();
-  }
-  return true;
-}
-
-/**上传文件 */
-function fnUploadFile(up: UploadRequestOption) {
-  // 改为完成状态
-  const file = modalState.from.fileList[0];
-  file.percent = 100;
-  file.status = 'done';
-  // 预置到表单
-  modalState.from.file = up.file;
-}
-
-/**上传前检查或转换压缩 */
-function fnBeforeUploadCms(file: FileType) {
-  if (modalState.confirmLoading) return false;
-  const fileName = file.name;
-  const suff = fileName.substring(fileName.lastIndexOf('.'));
-  if (!['.cms'].includes(suff)) {
-    message.error(
-      t('views.configManage.softwareManage.onlyAble', { fileText: '(.cms)' }),
-      3
-    );
-    return false;
-  }
-  return true;
-}
-
-/**上传文件 */
-function fnUploadCms(up: UploadRequestOption) {
-  // 改为完成状态
-  const file = modalState.from.cmsList[0];
-  file.percent = 100;
-  file.status = 'done';
-  // 预置到表单
-  modalState.from.cms = up.file;
-}
-
-onMounted(() => {
-  // 获取网元网元列表
-  useNeInfoStore()
-    .fnNelist()
-    .then(res => {
-      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
-        if (res.data.length > 0) {
-          const item = res.data[0];
-          modalState.from.neType = item.neType;
-        }
-      } else {
-        message.warning({
-          content: t('common.noData'),
-          duration: 2,
-        });
-      }
-    })
-    .finally(() => {
-      // 获取列表数据
-      fnGetList();
-    });
-});
-</script>
-
-<template>
-  <PageContainer>
-    <a-card
-      v-show="tableState.seached"
-      :bordered="false"
-      :body-style="{ marginBottom: '24px', paddingBottom: 0 }"
-    >
-      <!-- 表格搜索栏 -->
-      <a-form :model="queryParams" name="queryParams" layout="horizontal">
-        <a-row :gutter="16">
-          <a-col :lg="6" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.configManage.softwareManage.neType')"
-              name="neType "
-            >
-              <a-auto-complete
-                v-model:value="queryParams.neType"
-                :options="useNeInfoStore().getNeSelectOtions"
-                allow-clear
-                :placeholder="
-                  t('views.configManage.softwareManage.neTypePlease')
-                "
-              />
-            </a-form-item>
-          </a-col>
-          <a-col :lg="6" :md="12" :xs="24">
-            <a-form-item>
-              <a-space :size="8">
-                <a-button type="primary" @click.prevent="fnGetList(1)">
-                  <template #icon><SearchOutlined /></template>
-                  {{ t('common.search') }}
-                </a-button>
-                <a-button type="default" @click.prevent="fnQueryReset">
-                  <template #icon><ClearOutlined /></template>
-                  {{ t('common.reset') }}
-                </a-button>
-              </a-space>
-            </a-form-item>
-          </a-col>
-        </a-row>
-      </a-form>
-    </a-card>
-
-    <a-card :bordered="false" :body-style="{ padding: '0px' }">
-      <!-- 插槽-卡片左侧侧 -->
-      <template #title>
-        <a-space :size="8" align="center">
-          <a-button type="primary" @click.prevent="fnModalVisibleByEdit()">
-            <template #icon><UploadOutlined /></template>
-            {{ t('common.uploadText') }}
-          </a-button>
-          <a-button type="default" @click.prevent="fnModalVisibleByBack()">
-            <template #icon> <UndoOutlined /></template>
-            {{ t('views.configManage.softwareManage.backBtn') }}
-          </a-button>
-          <a-button type="dashed" @click.prevent="fnModalVisibleByHistory()">
-            <template #icon><HistoryOutlined /></template>
-            {{ t('views.configManage.softwareManage.historyBtn') }}
-          </a-button>
-        </a-space>
-      </template>
-
-      <!-- 插槽-卡片右侧 -->
-      <template #extra>
-        <a-space :size="8" align="center">
-          <a-tooltip>
-            <template #title>{{
-              tableState.seached
-                ? t('common.switch.show')
-                : t('common.switch.hide')
-            }}</template>
-            <a-switch
-              v-model:checked="tableState.seached"
-              :checked-children="t('common.searchBarText')"
-              :un-checked-children="t('common.searchBarText')"
-              size="small"
-            />
-          </a-tooltip>
-          <a-tooltip>
-            <template #title>{{ t('common.reloadText') }}</template>
-            <a-button type="text" @click.prevent="fnGetList()">
-              <template #icon><ReloadOutlined /></template>
-            </a-button>
-          </a-tooltip>
-          <a-tooltip>
-            <template #title>{{ t('common.sizeText') }}</template>
-            <a-dropdown trigger="click" placement="bottomRight">
-              <a-button type="text">
-                <template #icon><ColumnHeightOutlined /></template>
-              </a-button>
-              <template #overlay>
-                <a-menu
-                  :selected-keys="[tableState.size as string]"
-                  @click="fnTableSize"
-                >
-                  <a-menu-item key="default">
-                    {{ t('common.size.default') }}
-                  </a-menu-item>
-                  <a-menu-item key="middle">
-                    {{ t('common.size.middle') }}
-                  </a-menu-item>
-                  <a-menu-item key="small">
-                    {{ t('common.size.small') }}
-                  </a-menu-item>
-                </a-menu>
-              </template>
-            </a-dropdown>
-          </a-tooltip>
-        </a-space>
-      </template>
-
-      <!-- 表格列表 -->
-      <a-table
-        class="table"
-        row-key="id"
-        :columns="tableColumns"
-        :loading="tableState.loading"
-        :data-source="tableState.data"
-        :size="tableState.size"
-        :pagination="tablePagination"
-        :scroll="{ x: 1200, y: 400 }"
-      >
-        <template #bodyCell="{ column, record }">
-          <template v-if="column.key === 'id'">
-            <a-space :size="8" align="center">
-              <a-tooltip>
-                <template #title>
-                  {{ t('views.configManage.softwareManage.sendBtn') }}
-                </template>
-                <a-button
-                  type="link"
-                  @click.prevent="fnFileModalVisible('send', record)"
-                >
-                  <template #icon><SendOutlined /></template>
-                </a-button>
-              </a-tooltip>
-              <a-tooltip>
-                <template #title>
-                  {{ t('views.configManage.softwareManage.runBtn') }}
-                </template>
-                <a-button
-                  type="link"
-                  @click.prevent="fnFileModalVisible('run', record)"
-                >
-                  <template #icon><ThunderboltOutlined /></template>
-                </a-button>
-              </a-tooltip>
-              <a-tooltip placement="left">
-                <template #title>{{ t('common.moreText') }}</template>
-                <a-dropdown placement="bottomRight" trigger="click">
-                  <a-button type="link">
-                    <template #icon><EllipsisOutlined /> </template>
-                  </a-button>
-                  <template #overlay>
-                    <a-menu
-                      @click="({ key }:any) => fnFileModalVisible(key, record)"
-                    >
-                      <a-menu-item key="download">
-                        <DownloadOutlined />
-                        {{ t('common.downloadText') }}
-                      </a-menu-item>
-                      <a-menu-item key="delete">
-                        <DeleteOutlined />
-                        {{ t('common.deleteText') }}
-                      </a-menu-item>
-                    </a-menu>
-                  </template>
-                </a-dropdown>
-              </a-tooltip>
-            </a-space>
-          </template>
-        </template>
-      </a-table>
-    </a-card>
-
-    <!-- 上传框 -->
-    <ProModal
-      :drag="true"
-      :width="800"
-      :keyboard="false"
-      :mask-closable="false"
-      :visible="modalState.visibleByEdit"
-      :title="modalState.title"
-      :confirm-loading="modalState.confirmLoading"
-      @ok="fnModalOk"
-      @cancel="fnModalCancel"
-    >
-      <a-form
-        name="modalStateFrom"
-        layout="horizontal"
-        :label-col="{ span: 4 }"
-      >
-        <a-form-item
-          :label="t('views.configManage.softwareManage.neType')"
-          name="neType"
-          v-bind="modalStateFrom.validateInfos.neType"
-        >
-          <a-select
-            v-model:value="modalState.from.neType"
-            :options="useNeInfoStore().getNeSelectOtions"
-            :placeholder="t('views.configManage.softwareManage.neTypePlease')"
-          >
-          </a-select>
-        </a-form-item>
-        <a-form-item
-          :label="t('views.configManage.softwareManage.version')"
-          name="version"
-          v-bind="modalStateFrom.validateInfos.version"
-        >
-          <a-input
-            v-model:value="modalState.from.version"
-            allow-clear
-            :placeholder="t('views.configManage.softwareManage.versionPlease')"
-          ></a-input>
-        </a-form-item>
-        <a-form-item
-          :label="t('views.configManage.softwareManage.updateComment')"
-          name="comment"
-          v-bind="modalStateFrom.validateInfos.comment"
-        >
-          <a-textarea
-            v-model:value="modalState.from.comment"
-            :auto-size="{ minRows: 4, maxRows: 6 }"
-            :maxlength="200"
-            :show-count="true"
-            :placeholder="
-              t('views.configManage.softwareManage.updateCommentPlease')
-            "
-          />
-        </a-form-item>
-        <a-form-item
-          :label="t('views.configManage.softwareManage.updateFile')"
-          name="file"
-          v-bind="modalStateFrom.validateInfos.file"
-        >
-          <a-upload
-            name="file"
-            v-model:file-list="modalState.from.fileList"
-            accept=".rpm,.deb"
-            list-type="text"
-            :max-count="1"
-            :show-upload-list="true"
-            :before-upload="fnBeforeUploadFile"
-            :custom-request="fnUploadFile"
-          >
-            <a-button type="default" :loading="modalState.confirmLoading">
-              {{ t('views.configManage.softwareManage.selectFile') }}
-            </a-button>
-          </a-upload>
-        </a-form-item>
-        <a-form-item
-          :label="t('views.configManage.softwareManage.verifyFile')"
-          name="cms"
-        >
-          <a-upload
-            name="cms"
-            v-model:file-list="modalState.from.cmsList"
-            accept=".cms"
-            list-type="text"
-            :max-count="1"
-            :show-upload-list="true"
-            :before-upload="fnBeforeUploadCms"
-            :custom-request="fnUploadCms"
-          >
-            <a-button type="default" :loading="modalState.confirmLoading">
-              {{ t('views.configManage.softwareManage.selectFile') }}
-            </a-button>
-          </a-upload>
-        </a-form-item>
-      </a-form>
-    </ProModal>
-
-    <!-- 上传激活历史 -->
-    <SoftwareHistory
-      :title="t('views.configManage.softwareManage.historyBtn')"
-      v-model:visible="modalState.visibleByHistory"
-      @cancel="fnModalCancel"
-    />
-
-    <!-- 文件框 下发激活 -->
-    <ProModal
-      :drag="true"
-      :keyboard="false"
-      :mask-closable="false"
-      :visible="fileModalState.visible"
-      :title="fileModalState.title"
-      :confirm-loading="fileModalState.confirmLoading"
-      @ok="fnFileModalOk"
-      @cancel="fnFileModalCancel"
-    >
-      <a-form name="fileModalState" layout="horizontal">
-        <a-form-item name="content">
-          <QuestionCircleOutlined class="file-model__icon" />
-          <span class="file-model__tip">
-            {{ fileModalState.content }}
-          </span>
-        </a-form-item>
-        <a-form-item
-          :label="t('views.configManage.softwareManage.neId')"
-          name="neId"
-          v-bind="fileModalStateFrom.validateInfos.neId"
-        >
-          <a-select
-            v-model:value="fileModalState.from.neId"
-            :options="fileModalState.neOtions"
-            :placeholder="t('views.configManage.softwareManage.neIdPlease')"
-          />
-        </a-form-item>
-      </a-form>
-    </ProModal>
-
-    <!-- 回退框 -->
-    <ProModal
-      :drag="true"
-      :keyboard="false"
-      :mask-closable="false"
-      :visible="fileModalState.visibleByBack"
-      :title="fileModalState.title"
-      :confirm-loading="fileModalState.confirmLoading"
-      @ok="fnBackModalOk"
-      :ok-button-props="{ disabled: fileModalState.okDisable }"
-      @cancel="fnModalCancel"
-    >
-      <a-form name="fileModalState" layout="horizontal">
-        <a-form-item name="content">
-          <QuestionCircleOutlined class="file-model__icon" />
-          <span class="file-model__tip">
-            {{ fileModalState.content }}
-          </span>
-        </a-form-item>
-        <a-form-item
-          :label="t('views.configManage.license.neType')"
-          name="ne"
-          v-bind="fileModalStateBackFrom.validateInfos.ne"
-        >
-          <a-cascader
-            v-model:value="fileModalState.backFrom.ne"
-            :options="useNeInfoStore().getNeCascaderOptions"
-            :allow-clear="false"
-            @change="fnNeChange"
-            :placeholder="t('views.configManage.softwareManage.neTypePlease')"
-          />
-        </a-form-item>
-      </a-form>
-    </ProModal>
-  </PageContainer>
-</template>
-
-<style lang="less" scoped>
-.table :deep(.ant-pagination) {
-  padding: 0 24px;
-}
-
-.file-model {
-  &__icon {
-    color: var(--ant-warning-color);
-    margin-right: 16px;
-    font-size: 22px;
-  }
-  &__tip {
-    overflow: hidden;
-    color: #000000d9;
-    font-weight: 500;
-    font-size: 16px;
-    line-height: 1.4;
-  }
-}
-</style>
diff --git a/src/views/dashboard/amfUE/index.vue b/src/views/dashboard/amfUE/index.vue
index e9186bc9..79712569 100644
--- a/src/views/dashboard/amfUE/index.vue
+++ b/src/views/dashboard/amfUE/index.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { reactive, onMounted, toRaw, ref, onBeforeUnmount } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Modal } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { message, Modal } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import useI18n from '@/hooks/useI18n';
 import {
   RESULT_CODE_ERROR,
diff --git a/src/views/dashboard/imsCDR/index.vue b/src/views/dashboard/imsCDR/index.vue
index 10a9d996..76da4922 100644
--- a/src/views/dashboard/imsCDR/index.vue
+++ b/src/views/dashboard/imsCDR/index.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { reactive, onMounted, toRaw, ref, onBeforeUnmount } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Modal } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { message, Modal } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import useI18n from '@/hooks/useI18n';
 import {
   RESULT_CODE_ERROR,
diff --git a/src/views/dashboard/mocn/components/setting.vue b/src/views/dashboard/mocn/components/setting.vue
index dcf19ae6..f225a0bf 100644
--- a/src/views/dashboard/mocn/components/setting.vue
+++ b/src/views/dashboard/mocn/components/setting.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import { reactive, toRaw, watch } from 'vue';
+import { ProModal } from 'antdv-pro-modal';
 import { dbGetJSON, dbSetJSON } from '@/utils/cache-db-utils';
-const emit = defineEmits(['ok', 'cancel', 'update:visible']);
+const emit = defineEmits(['ok', 'cancel', 'update:open']);
 const props = defineProps({
   title: {
     type: String,
     default: '标题',
   },
-  visible: {
+  open: {
     type: Boolean,
     default: false,
   },
@@ -27,13 +28,13 @@ let dataState = reactive({
 function fnModalOk() {
   dbSetJSON('tbl_mocn', `tmp`, toRaw(dataState));
   emit('ok');
-  emit('update:visible', false);
+  emit('update:open', false);
 }
 
 /**弹框取消按钮事件 */
 function fnModalCancel() {
   emit('cancel');
-  emit('update:visible', false);
+  emit('update:open', false);
 }
 
 /**显示弹框时初始数据 */
@@ -48,7 +49,7 @@ function init() {
 
 /**监听是否显示，初始数据 */
 watch(
-  () => props.visible,
+  () => props.open,
   val => {
     if (val) init();
   }
@@ -60,7 +61,7 @@ watch(
     :drag="true"
     :width="800"
     :title="props.title"
-    :visible="props.visible"
+    :open="props.open"
     :keyboard="false"
     :mask-closable="false"
     @cancel="fnModalCancel"
diff --git a/src/views/dashboard/mocn/index.vue b/src/views/dashboard/mocn/index.vue
index 6a02cf05..d08e0fee 100644
--- a/src/views/dashboard/mocn/index.vue
+++ b/src/views/dashboard/mocn/index.vue
@@ -8,7 +8,7 @@ import Topology from '../overview/components/Topology/index.vue';
 import NeResources from '../overview/components/NeResources/index.vue';
 import UserActivity from '../overview/components/UserActivity/index.vue';
 import AlarnTypeBar from './components/AlarnTypeBar/index.vue';
-import setting from './components/setting.vue';
+import Setting from './components/setting.vue';
 import UPFFlow from '../overview/components/UPFFlow/index.vue';
 import { listUDMSub } from '@/api/neData/udm_sub';
 import { listUENumBySMF } from '@/api/neUser/smf';
@@ -208,7 +208,7 @@ onBeforeUnmount(() => {
 /**MOCN状态 */
 const mocnState = reactive({
   title: 'Set MOCN Data',
-  visible: false,
+  open: false,
   data: {
     /**基站数 */
     baseNum: 0,
@@ -220,7 +220,7 @@ const mocnState = reactive({
 });
 /**MOCN 右击设置 */
 function fnRightClick() {
-  mocnState.visible = true;
+  mocnState.open = true;
 }
 </script>
 
@@ -543,9 +543,9 @@ function fnRightClick() {
         </div>
       </div>
     </div>
-    <setting
+    <Setting
       :title="mocnState.title"
-      v-model:visible="mocnState.visible"
+      v-model:open="mocnState.open"
     ></setting>
   </div>
 </template>
diff --git a/src/views/dashboard/overview/components/Topology/index.vue b/src/views/dashboard/overview/components/Topology/index.vue
index 8c2116e1..54c57cc5 100644
--- a/src/views/dashboard/overview/components/Topology/index.vue
+++ b/src/views/dashboard/overview/components/Topology/index.vue
@@ -2,7 +2,7 @@
 import { onMounted, ref } from 'vue';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { listAllNeInfo } from '@/api/ne/neInfo';
-import { message } from 'ant-design-vue/lib';
+import { message } from 'ant-design-vue/es';
 import { getGraphData } from '@/api/monitor/topology';
 import { Graph, GraphData, Tooltip } from '@antv/g6';
 import { edgeLineAnimateState } from '@/views/monitor/topologyBuild/hooks/registerEdge';
diff --git a/src/views/dashboard/smscCDR/index.vue b/src/views/dashboard/smscCDR/index.vue
index 30fc6a5b..0c160722 100644
--- a/src/views/dashboard/smscCDR/index.vue
+++ b/src/views/dashboard/smscCDR/index.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { reactive, onMounted, toRaw, ref, onBeforeUnmount } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Modal } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { message, Modal } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import useDictStore from '@/store/modules/dict';
 import useI18n from '@/hooks/useI18n';
 import {
diff --git a/src/views/faultManage/active-alarm/index.vue b/src/views/faultManage/active-alarm/index.vue
index 375ab56a..d2b8bd36 100644
--- a/src/views/faultManage/active-alarm/index.vue
+++ b/src/views/faultManage/active-alarm/index.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Modal } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { ProModal } from 'antdv-pro-modal';
+import { message, Modal } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import {
   listAct,
   updateConfirm,
@@ -328,15 +329,15 @@ function fnTableSize({ key }: MenuInfo) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**详情框是否显示 */
-  visibleByView: boolean;
+  openByView: boolean;
   /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**显示过滤设置是否显示 */
-  visibleByShowSet: boolean;
+  openByShowSet: boolean;
   /**告警帮助文档是否显示 */
   helpShowView: boolean;
   /**个性化设置置是否显示 */
-  visibleByMyselfSet: boolean;
+  openByMyselfSet: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -349,11 +350,11 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByView: false,
-  visibleByEdit: false,
-  visibleByShowSet: false,
+  openByView: false,
+  openByEdit: false,
+  openByShowSet: false,
   helpShowView: false,
-  visibleByMyselfSet: false,
+  openByMyselfSet: false,
   title: '全部信息',
   from: {
     alarmId: '',
@@ -405,7 +406,7 @@ function fnModalVisibleByVive(row: Record<string, any>) {
   modalState.title = t('views.faultManage.activeAlarm.viewIdInfo', {
     alarmId: row.alarmId,
   });
-  modalState.visibleByView = true;
+  modalState.openByView = true;
 }
 
 /** 告警帮助文档详细信息 */
@@ -434,7 +435,7 @@ function fnModalOk() {
       duration: 3,
     });
     modalState.confirmLoading = false;
-    modalState.visibleByView = false;
+    modalState.openByView = false;
     return false;
   }
   const result = updateConfirm(from);
@@ -446,7 +447,7 @@ function fnModalOk() {
           content: t('common.msgSuccess', { msg: modalState.title }),
           duration: 3,
         });
-        modalState.visibleByView = false;
+        modalState.openByView = false;
         fnGetList();
       } else {
         message.error({
@@ -476,7 +477,7 @@ function fnShowModalOk() {
           content: t('common.msgSuccess', { msg: modalState.title }),
           duration: 3,
         });
-        modalState.visibleByShowSet = false;
+        modalState.openByShowSet = false;
         fnGetList();
       } else {
         message.error({
@@ -604,7 +605,7 @@ function fnShowSet() {
         : {};
       modalState.showSetFrom = Object.assign(modalState.showSetFrom, realJson);
       modalState.title = t('views.faultManage.activeAlarm.showSet');
-      modalState.visibleByShowSet = true;
+      modalState.openByShowSet = true;
     } else {
       message.error(t('common.getInfoFail'), 2);
     }
@@ -617,11 +618,14 @@ function mapKeysWithReduce(data: any[], titleMapping: Record<string, string>) {
     if (typeof item !== 'object' || item === null) {
       return item; // 如果不是对象，直接返回原值
     }
-    return Object.keys(item).reduce((newItem: Record<string, any>, key: string) => {
-      const title = titleMapping[key] || key;
-      newItem[title] = item[key];
-      return newItem;
-    }, {}); // 确保初始值是一个空对象
+    return Object.keys(item).reduce(
+      (newItem: Record<string, any>, key: string) => {
+        const title = titleMapping[key] || key;
+        newItem[title] = item[key];
+        return newItem;
+      },
+      {}
+    ); // 确保初始值是一个空对象
   });
 }
 
@@ -704,9 +708,9 @@ function fnExportAll() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByEdit = false;
-  modalState.visibleByView = false;
-  modalState.visibleByShowSet = false;
+  modalState.openByEdit = false;
+  modalState.openByView = false;
+  modalState.openByShowSet = false;
   modalState.helpShowView = false;
 }
 
@@ -837,7 +841,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="6" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.alarmCode')"
@@ -877,7 +881,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="6" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.pvFlag')"
@@ -912,7 +916,7 @@ onMounted(() => {
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
-        <div class="button-container">
+        <a-space :size="8" align="center">
           <a-button
             type="primary"
             @click.prevent="fnCancelConfirm()"
@@ -956,12 +960,12 @@ onMounted(() => {
             <template #icon> <export-outlined /> </template>
             {{ t('views.faultManage.activeAlarm.exportAll') }}
           </a-button>
-        </div>
+        </a-space>
       </template>
 
       <!-- 插槽-卡片右侧 -->
       <template #extra>
-        <div class="button-container">
+        <a-space :size="8" align="center">
           <a-tooltip>
             <template #title>{{ t('common.searchBarText') }}</template>
             <a-switch
@@ -1006,7 +1010,7 @@ onMounted(() => {
             :columns="tableColumns"
             v-model:columns-dnd="tableColumnsDnd"
           ></TableColumnsDnd>
-        </div>
+        </a-space>
       </template>
 
       <!-- 表格列表 -->
@@ -1084,7 +1088,7 @@ onMounted(() => {
       :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
-      :visible="modalState.helpShowView"
+      :open="modalState.helpShowView"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       :body-style="{ padding: '0px' }"
@@ -1111,7 +1115,7 @@ onMounted(() => {
       :body-style="{ height: '520px', overflowY: 'scroll' }"
       :keyboard="false"
       :mask-closable="false"
-      :visible="modalState.visibleByView"
+      :open="modalState.openByView"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnModalOk"
@@ -1124,7 +1128,7 @@ onMounted(() => {
         :label-col="{ span: 8 }"
         :label-wrap="true"
       >
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.alarmId')"
@@ -1143,7 +1147,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.neId')"
@@ -1162,7 +1166,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.neType')"
@@ -1181,7 +1185,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.alarmTitle')"
@@ -1200,7 +1204,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.alarmType')"
@@ -1227,9 +1231,9 @@ onMounted(() => {
           {{ modalState.from.locationInfo }}
         </a-form-item>
 
-        <a-row :gutter="16"> </a-row>
+        <a-row> </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.province')"
@@ -1272,7 +1276,7 @@ onMounted(() => {
           {{ modalState.from.specificProblem }}
         </a-form-item>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.ackUser')"
@@ -1291,7 +1295,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.ackTime')"
@@ -1318,7 +1322,7 @@ onMounted(() => {
       :width="800"
       :keyboard="false"
       :mask-closable="false"
-      :visible="modalState.visibleByShowSet"
+      :open="modalState.openByShowSet"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnShowModalOk"
@@ -1326,7 +1330,7 @@ onMounted(() => {
       @cancel="fnModalCancel"
     >
       <a-form name="modalStateShowFrom" layout="horizontal">
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.neType')"
@@ -1351,7 +1355,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.pvFlag')"
@@ -1382,7 +1386,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.origLevel')"
@@ -1418,7 +1422,7 @@ onMounted(() => {
       :width="800"
       :keyboard="false"
       :mask-closable="false"
-      :visible="modalState.visibleByMyselfSet"
+      :open="modalState.openByMyselfSet"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnShowModalOk"
@@ -1426,7 +1430,7 @@ onMounted(() => {
       @cancel="fnModalCancel"
     >
       <a-form name="modalStateShowFrom" layout="horizontal">
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.neType')"
@@ -1450,7 +1454,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.pvFlag')"
@@ -1481,7 +1485,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.origLevel')"
diff --git a/src/views/faultManage/event/index.vue b/src/views/faultManage/event/index.vue
index ccc01b89..5ab00d49 100644
--- a/src/views/faultManage/event/index.vue
+++ b/src/views/faultManage/event/index.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Modal } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { ProModal } from 'antdv-pro-modal';
+import { message, Modal } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import { listAct, exportAll } from '@/api/faultManage/eventAlarm';
 import useI18n from '@/hooks/useI18n';
 import useDictStore from '@/store/modules/dict';
@@ -211,13 +212,13 @@ function fnTableSize({ key }: MenuInfo) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**详情框是否显示 */
-  visibleByView: boolean;
+  openByView: boolean;
   /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**显示过滤设置是否显示 */
-  visibleByShowSet: boolean;
+  openByShowSet: boolean;
   /**个性化设置置是否显示 */
-  visibleByMyselfSet: boolean;
+  openByMyselfSet: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -230,10 +231,10 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByView: false,
-  visibleByEdit: false,
-  visibleByShowSet: false,
-  visibleByMyselfSet: false,
+  openByView: false,
+  openByEdit: false,
+  openByShowSet: false,
+  openByMyselfSet: false,
   title: '全部信息',
   from: {
     alarmId: '',
@@ -285,7 +286,7 @@ function fnModalVisibleByVive(row: Record<string, any>) {
   modalState.title = t('views.faultManage.activeAlarm.viewIdInfo', {
     alarmId: row.alarmId,
   });
-  modalState.visibleByView = true;
+  modalState.openByView = true;
 }
 
 /**表格状态 */
@@ -310,8 +311,8 @@ const onSelectChange = (
 
 // key替换中文title
 function mapKeysWithReduce(data: any, titleMapping: any) {
-  return data.map((item:any) => {
-    return Object.keys(item).reduce((newItem:any, key:any) => {
+  return data.map((item: any) => {
+    return Object.keys(item).reduce((newItem: any, key: any) => {
       const title = titleMapping[key] || key;
       newItem[title] = item[key];
       return newItem;
@@ -360,7 +361,7 @@ function fnExportAll() {
 
           writeSheet(res.data, 'alarm', sortData).then(fileBlob => {
             saveAs(fileBlob, `evnet_${Date.now()}.xlsx`);
-            
+
             message.success({
               content: t('common.msgSuccess', { msg: t('common.export') }),
               key,
@@ -384,8 +385,8 @@ function fnExportAll() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByEdit = false;
-  modalState.visibleByView = false;
+  modalState.openByEdit = false;
+  modalState.openByView = false;
 }
 
 /**查询列表, pageNum初始页数 */
@@ -508,7 +509,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="6" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.alarmCode')"
@@ -550,7 +551,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="6" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.alarmType')"
@@ -570,7 +571,7 @@ onMounted(() => {
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
-        <div class="button-container">
+        <a-space :size="8" align="center">
           <a-button
             type="primary"
             @click.prevent="fnExportAll()"
@@ -579,12 +580,12 @@ onMounted(() => {
             <template #icon> <export-outlined /> </template>
             {{ t('views.faultManage.activeAlarm.exportAll') }}
           </a-button>
-        </div>
+        </a-space>
       </template>
 
       <!-- 插槽-卡片右侧 -->
       <template #extra>
-        <div class="button-container">
+        <a-space :size="8" align="center">
           <a-tooltip>
             <template #title>{{ t('common.searchBarText') }}</template>
             <a-switch
@@ -629,7 +630,7 @@ onMounted(() => {
             :columns="tableColumns"
             v-model:columns-dnd="tableColumnsDnd"
           ></TableColumnsDnd>
-        </div>
+        </a-space>
       </template>
 
       <!-- 表格列表 -->
@@ -641,7 +642,7 @@ onMounted(() => {
         :data-source="tableState.data"
         :size="tableState.size"
         :pagination="tablePagination"
-        :scroll="{ x: 2500, y: 400 }"
+        :scroll="{ x: tableColumns.length * 120, y: 400 }"
       >
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'origSeverity'">
@@ -689,7 +690,7 @@ onMounted(() => {
       :body-style="{ height: '520px', overflowY: 'scroll' }"
       :keyboard="false"
       :mask-closable="false"
-      :visible="modalState.visibleByView"
+      :open="modalState.openByView"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @cancel="fnModalCancel"
@@ -706,7 +707,7 @@ onMounted(() => {
         :label-col="{ span: 8 }"
         :label-wrap="true"
       >
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.alarmId')"
@@ -725,7 +726,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.neId')"
@@ -744,7 +745,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.neType')"
@@ -763,7 +764,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.alarmTitle')"
@@ -790,9 +791,7 @@ onMounted(() => {
           {{ modalState.from.locationInfo }}
         </a-form-item>
 
-        <a-row :gutter="16"> </a-row>
-
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.province')"
@@ -819,7 +818,7 @@ onMounted(() => {
           {{ modalState.from.addInfo }}
         </a-form-item>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.specificProblemId')"
diff --git a/src/views/faultManage/fault-setting/index.vue b/src/views/faultManage/fault-setting/index.vue
index d65a5063..374b3b2e 100644
--- a/src/views/faultManage/fault-setting/index.vue
+++ b/src/views/faultManage/fault-setting/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { reactive, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { Form, message } from 'ant-design-vue/lib';
+import { Form, message } from 'ant-design-vue/es';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import {
   getForwardSet,
@@ -177,7 +177,7 @@ onMounted(() => {
 
 <template>
   <PageContainer>
-    <a-row :gutter="16">
+    <a-row>
       <a-col :span="8" v-if="false">
         <!-- 日志设置 -->
         <a-card :title="alarmState.title" :loading="alarmState.fromLoading">
diff --git a/src/views/faultManage/history-alarm/index.vue b/src/views/faultManage/history-alarm/index.vue
index 434a18ee..cb17b336 100644
--- a/src/views/faultManage/history-alarm/index.vue
+++ b/src/views/faultManage/history-alarm/index.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Modal } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { ProModal } from 'antdv-pro-modal';
+import { message, Modal } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import {
   listAct,
   updateConfirm,
@@ -262,13 +263,13 @@ function fnTableSize({ key }: MenuInfo) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**详情框是否显示 */
-  visibleByView: boolean;
+  openByView: boolean;
   /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**显示过滤设置是否显示 */
-  visibleByShowSet: boolean;
+  openByShowSet: boolean;
   /**个性化设置置是否显示 */
-  visibleByMyselfSet: boolean;
+  openByMyselfSet: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -281,10 +282,10 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByView: false,
-  visibleByEdit: false,
-  visibleByShowSet: false,
-  visibleByMyselfSet: false,
+  openByView: false,
+  openByEdit: false,
+  openByShowSet: false,
+  openByMyselfSet: false,
   title: '全部信息',
   from: {
     alarmId: '',
@@ -336,7 +337,7 @@ function fnModalVisibleByVive(row: Record<string, any>) {
   modalState.title = t('views.faultManage.activeAlarm.viewIdInfo', {
     alarmId: row.alarmId,
   });
-  modalState.visibleByView = true;
+  modalState.openByView = true;
 }
 
 /**
@@ -351,7 +352,7 @@ function fnModalOk() {
       duration: 3,
     });
     modalState.confirmLoading = false;
-    modalState.visibleByView = false;
+    modalState.openByView = false;
     return false;
   }
   const result = updateConfirm(from);
@@ -363,7 +364,7 @@ function fnModalOk() {
           content: t('common.msgSuccess', { msg: modalState.title }),
           duration: 3,
         });
-        modalState.visibleByView = false;
+        modalState.openByView = false;
         fnGetList();
       } else {
         message.error({
@@ -430,13 +431,16 @@ function fnCancelConfirm() {
 function mapKeysWithReduce(data: any[], titleMapping: Record<string, string>) {
   return data.map((item: any) => {
     if (typeof item !== 'object' || item === null) {
-      return item; 
+      return item;
     }
-    return Object.keys(item).reduce((newItem: Record<string, any>, key: string) => {
-      const title = titleMapping[key] || key;
-      newItem[title] = item[key];
-      return newItem;
-    }, {}); 
+    return Object.keys(item).reduce(
+      (newItem: Record<string, any>, key: string) => {
+        const title = titleMapping[key] || key;
+        newItem[title] = item[key];
+        return newItem;
+      },
+      {}
+    );
   });
 }
 
@@ -518,9 +522,9 @@ function fnExportAll() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByEdit = false;
-  modalState.visibleByView = false;
-  modalState.visibleByShowSet = false;
+  modalState.openByEdit = false;
+  modalState.openByView = false;
+  modalState.openByShowSet = false;
 }
 
 /**查询列表, pageNum初始页数 */
@@ -644,7 +648,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="6" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.alarmCode')"
@@ -684,7 +688,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="6" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.pvFlag')"
@@ -805,7 +809,7 @@ onMounted(() => {
           onChange: onSelectChange,
         }"
         :pagination="tablePagination"
-        :scroll="{ x: 2500, y: 400 }"
+        :scroll="{ x: tableColumns.length * 120, y: 400 }"
       >
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'origSeverity'">
@@ -853,7 +857,7 @@ onMounted(() => {
       :body-style="{ height: '520px', overflowY: 'scroll' }"
       :keyboard="false"
       :mask-closable="false"
-      :visible="modalState.visibleByView"
+      :open="modalState.openByView"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnModalOk"
@@ -865,7 +869,7 @@ onMounted(() => {
         layout="horizontal"
         :label-col="{ span: 8 }"
       >
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.alarmId')"
@@ -884,7 +888,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.neId')"
@@ -903,7 +907,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.neType')"
@@ -922,7 +926,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.alarmTitle')"
@@ -941,7 +945,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.pvFlag')"
@@ -968,7 +972,7 @@ onMounted(() => {
         >
           {{ modalState.from.locationInfo }}
         </a-form-item>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.province')"
@@ -1009,7 +1013,7 @@ onMounted(() => {
         >
           {{ modalState.from.specificProblem }}
         </a-form-item>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.clearType')"
@@ -1028,7 +1032,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.ackUser')"
@@ -1047,7 +1051,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.ackTime')"
diff --git a/src/views/logManage/alarm/index.vue b/src/views/logManage/alarm/index.vue
index 3d351f19..50079f63 100644
--- a/src/views/logManage/alarm/index.vue
+++ b/src/views/logManage/alarm/index.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import { parseDateToStr } from '@/utils/date-utils';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { listAlarm } from '@/api/logManage/alarm';
diff --git a/src/views/logManage/exportFile/index.vue b/src/views/logManage/exportFile/index.vue
index 9e9db183..24df66de 100644
--- a/src/views/logManage/exportFile/index.vue
+++ b/src/views/logManage/exportFile/index.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { ColumnsType } from 'ant-design-vue/lib/table';
-import { Modal, message } from 'ant-design-vue/lib';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { ColumnsType } from 'ant-design-vue/es/table';
+import { Modal, message } from 'ant-design-vue/es';
 import { parseDateToStr } from '@/utils/date-utils';
 import {
   getBakFile,
@@ -277,7 +277,7 @@ onMounted(() => {
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
         <a-form :model="queryParams" name="queryParams" layout="horizontal">
-          <a-row :gutter="16">
+          <a-row>
             <a-col :lg="8" :md="12" :xs="24">
               <a-form-item
                 :label="t('views.logManage.exportFile.fileName')"
diff --git a/src/views/logManage/forwarding/index.vue b/src/views/logManage/forwarding/index.vue
index 097afc9b..a0c04193 100644
--- a/src/views/logManage/forwarding/index.vue
+++ b/src/views/logManage/forwarding/index.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import { parseDateToStr } from '@/utils/date-utils';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { listForwarding } from '@/api/logManage/forwarding';
diff --git a/src/views/logManage/logSet/index.vue b/src/views/logManage/logSet/index.vue
index 2d1d06ee..4172a7b2 100644
--- a/src/views/logManage/logSet/index.vue
+++ b/src/views/logManage/logSet/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { Form, Modal, message } from 'ant-design-vue/lib';
+import { Form, Modal, message } from 'ant-design-vue/es';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import {
   backupDownload,
@@ -411,7 +411,7 @@ onMounted(() => {
 
 <template>
   <PageContainer>
-    <a-row :gutter="16">
+    <a-row>
       <a-col :span="8">
         <!-- 日志设置 -->
         <a-card :title="logSetState.title" :loading="logSetState.fromLoading">
diff --git a/src/views/logManage/mml/index.vue b/src/views/logManage/mml/index.vue
index b216fc70..1b3c53a6 100644
--- a/src/views/logManage/mml/index.vue
+++ b/src/views/logManage/mml/index.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import { parseDateToStr } from '@/utils/date-utils';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { listMML } from '@/api/logManage/mml';
diff --git a/src/views/logManage/neFile/components/ViewDrawer.vue b/src/views/logManage/neFile/components/ViewDrawer.vue
index f2718379..6a9f4db6 100644
--- a/src/views/logManage/neFile/components/ViewDrawer.vue
+++ b/src/views/logManage/neFile/components/ViewDrawer.vue
@@ -4,9 +4,9 @@ import { ProModal } from 'antdv-pro-modal';
 import TerminalSSHView from '@/components/TerminalSSHView/index.vue';
 import useI18n from '@/hooks/useI18n';
 const { t } = useI18n();
-const emit = defineEmits(['ok', 'cancel', 'update:visible']);
+const emit = defineEmits(['ok', 'cancel', 'update:open']);
 const props = defineProps({
-  visible: {
+  open: {
     type: Boolean,
     default: false,
     required: true,
@@ -34,7 +34,7 @@ const props = defineProps({
 /**对话框对象信息状态类型 */
 type StateType = {
   /**框是否显示 */
-  visible: boolean;
+  open: boolean;
   /**标题 */
   title: string;
   /**查看命令 */
@@ -43,7 +43,7 @@ type StateType = {
 
 /**对话框对象信息状态 */
 let state: StateType = reactive({
-  visible: false,
+  open: false,
   title: '文件查看',
   form: {
     follow: true,
@@ -54,21 +54,21 @@ let state: StateType = reactive({
 });
 
 function onClose() {
-  state.visible = false;
+  state.open = false;
   emit('cancel');
-  emit('update:visible', false);
+  emit('update:open', false);
 }
 
 /**监听是否显示，初始数据 */
 watch(
-  () => props.visible,
+  () => props.open,
   val => {
     if (val) {
       if (props.neType && props.neId) {
         const filePath = props.filePath;
         const fileName = filePath.substring(filePath.lastIndexOf('/') + 1);
         state.title = fileName;
-        state.visible = true;
+        state.open = true;
       }
     }
   }
@@ -114,9 +114,9 @@ function fnReload() {
     :destroyOnClose="true"
     :keyboard="false"
     :mask-closable="false"
-    :visible="state.visible"
+    :open="state.open"
     :title="state.title"
-    :body-style="{ padding: '12px', overflow: 'hidden' }"
+    :body-style="{ overflow: 'hidden' }"
     :footer="null"
     @cancel="onClose"
   >
@@ -132,7 +132,7 @@ function fnReload() {
     ></TerminalSSHView>
     <!-- 命令控制属性 -->
     <a-form name="form" layout="horizontal">
-      <a-row :gutter="16">
+      <a-row>
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item :label="t('views.logManage.neFile.viewAs')">
             <a-input-group compact>
diff --git a/src/views/logManage/neFile/index.vue b/src/views/logManage/neFile/index.vue
index 6158223b..a65223d5 100644
--- a/src/views/logManage/neFile/index.vue
+++ b/src/views/logManage/neFile/index.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { ColumnsType } from 'ant-design-vue/lib/table';
-import { Modal, message } from 'ant-design-vue/lib';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { ColumnsType } from 'ant-design-vue/es/table';
+import { Modal, message } from 'ant-design-vue/es';
 import { parseDateToStr } from '@/utils/date-utils';
 import { getNeFile, listNeFiles } from '@/api/tool/neFile';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
@@ -260,7 +260,7 @@ function fnGetList(pageNum?: number) {
 
 /**抽屉状态 */
 const viewDrawerState = reactive({
-  visible: false,
+  open: false,
   /**文件路径 /var/log/amf.log */
   filePath: '',
   /**网元类型 */
@@ -274,7 +274,7 @@ function fnDrawerOpen(row: Record<string, any>) {
   viewDrawerState.filePath = [...nePathArr.value, row.fileName].join('/');
   viewDrawerState.neType = neTypeSelect.value[0];
   viewDrawerState.neId = neTypeSelect.value[1];
-  viewDrawerState.visible = !viewDrawerState.visible;
+  viewDrawerState.open = !viewDrawerState.open;
 }
 
 onMounted(() => {
@@ -300,43 +300,33 @@ onMounted(() => {
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
-        <a-form :model="queryParams" name="queryParams" layout="horizontal">
-          <a-row :gutter="16">
-            <a-col :lg="8" :md="12" :xs="24">
-              <a-form-item
-                :label="t('views.logManage.neFile.neType')"
-                name="neType"
-                style="margin-bottom: 0"
-              >
-                <a-cascader
-                  v-model:value="neTypeSelect"
-                  :options="neInfoStore.getNeCascaderOptions"
-                  @change="fnNeChange"
-                  :allow-clear="false"
-                  :placeholder="t('views.logManage.neFile.neTypePlease')"
-                  :disabled="downLoading || tableState.loading"
-                />
-              </a-form-item>
+        <a-row :gutter="16" align="middle">
+          <a-col>
+            <span>{{ t('views.logManage.neFile.neType') }}:</span>&nbsp;
+            <a-cascader
+              v-model:value="neTypeSelect"
+              :options="neInfoStore.getNeCascaderOptions"
+              @change="fnNeChange"
+              :allow-clear="false"
+              :placeholder="t('views.logManage.neFile.neTypePlease')"
+              :disabled="downLoading || tableState.loading"
+            />
+          </a-col>
+          <template v-if="nePathArr.length > 0">
+            <span>{{ t('views.logManage.neFile.nePath') }}:</span>&nbsp;
+            <a-col>
+              <a-breadcrumb>
+                <a-breadcrumb-item
+                  v-for="(path, index) in nePathArr"
+                  :key="path"
+                  @click="fnDirCD(path, index)"
+                >
+                  {{ path }}
+                </a-breadcrumb-item>
+              </a-breadcrumb>
             </a-col>
-            <a-col :lg="16" :md="18" :xs="24" v-if="nePathArr.length > 0">
-              <a-form-item
-                :label="t('views.logManage.neFile.nePath')"
-                name="configName"
-                style="margin-bottom: 0"
-              >
-                <a-breadcrumb>
-                  <a-breadcrumb-item
-                    v-for="(path, index) in nePathArr"
-                    :key="path"
-                    @click="fnDirCD(path, index)"
-                  >
-                    {{ path }}
-                  </a-breadcrumb-item>
-                </a-breadcrumb>
-              </a-form-item>
-            </a-col>
-          </a-row>
-        </a-form>
+          </template>
+        </a-row>
       </template>
 
       <!-- 插槽-卡片右侧 -->
@@ -397,7 +387,7 @@ onMounted(() => {
 
     <!-- 文件内容查看抽屉 -->
     <ViewDrawer
-      v-model:visible="viewDrawerState.visible"
+      v-model:open="viewDrawerState.open"
       :file-path="viewDrawerState.filePath"
       :ne-type="viewDrawerState.neType"
       :ne-id="viewDrawerState.neId"
diff --git a/src/views/login.vue b/src/views/login.vue
index 13892164..b0bb2241 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { message } from 'ant-design-vue/lib';
+import { message } from 'ant-design-vue/es';
 import { reactive, onMounted, computed } from 'vue';
 import useUserStore from '@/store/modules/user';
 import useAppStore from '@/store/modules/app';
@@ -209,7 +209,7 @@ function fnChangeLocale(e: any) {
           </a-input-password>
         </a-form-item>
 
-        <a-row :gutter="8" v-if="state.captcha.enabled">
+        <a-row v-if="state.captcha.enabled">
           <a-col :span="16">
             <a-form-item
               name="code"
@@ -247,7 +247,6 @@ function fnChangeLocale(e: any) {
         </a-row>
 
         <a-row
-          :gutter="8"
           justify="space-between"
           align="middle"
           style="margin-bottom: 16px"
@@ -275,7 +274,6 @@ function fnChangeLocale(e: any) {
         </a-button>
 
         <a-row
-          :gutter="8"
           justify="space-between"
           align="middle"
           style="margin-top: 18px"
@@ -315,7 +313,7 @@ function fnChangeLocale(e: any) {
 
   // background: url('./../assets/black_dot.png') 0% 0% / 14px 14px repeat;
 
-  background-image: url(@/assets/background.jpg);
+  background-image: url(@/assets/background_light.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
@@ -363,6 +361,11 @@ function fnChangeLocale(e: any) {
   }
 }
 
+[data-theme='dark'] .container {
+  background-image: url(@/assets/background_dark.jpg);
+  background-color: #141414;
+}
+
 .header {
   position: fixed;
   left: 0;
@@ -394,7 +397,7 @@ function fnChangeLocale(e: any) {
   }
   .title {
     position: relative;
-    top: 6px;
+    top: 12px;
     color: rgba(0, 0, 0, 0.85);
     font-weight: 600;
     font-size: 24px;
@@ -402,6 +405,13 @@ function fnChangeLocale(e: any) {
   }
 }
 
+[data-theme='dark'] .header {
+  background-color: rgb(0 0 0 / 85%);
+  .title {
+    color: rgba(255, 255, 255, 0.85);
+  }
+}
+
 .login-card {
   width: 368px;
   min-width: 260px;
@@ -420,6 +430,10 @@ function fnChangeLocale(e: any) {
     color: #8c8c8c;
     font-size: 16px;
   }
+
+  [data-theme='dark'] & .desc {
+    color: #999;
+  }
 }
 
 @media (max-width: 992px) {
@@ -431,11 +445,12 @@ function fnChangeLocale(e: any) {
 .footer {
   position: absolute;
   bottom: 0;
-  height: 36px;
-  padding: 8px 16px 0;
+  height: 32px;
+  padding: 0px 16px;
   text-align: left;
-  background-color: rgb(255 255 255 / 85%);
+  background-color: rgba(255, 255, 255, 0.85);
   width: 100%;
+  line-height: 32px;
 
   &-copyright {
     font-size: 14px;
@@ -443,4 +458,11 @@ function fnChangeLocale(e: any) {
     font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
   }
 }
+
+[data-theme='dark'] .footer {
+  background-color: rgb(0 0 0 / 85%);
+  &-copyright {
+    color: rgba(255, 255, 255, 0.75);
+  }
+}
 </style>
diff --git a/src/views/mmlManage/mmlSet/index.vue b/src/views/mmlManage/mmlSet/index.vue
index 4a9541ce..0ba6ac50 100644
--- a/src/views/mmlManage/mmlSet/index.vue
+++ b/src/views/mmlManage/mmlSet/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { reactive, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { Form, message } from 'ant-design-vue/lib';
+import { Form, message } from 'ant-design-vue/es';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { getOperationSet, updateOperationSet } from '@/api/mmlManage/mmlSet';
 import { regExpIPv4 } from '@/utils/regular-utils';
@@ -90,7 +90,7 @@ onMounted(() => {
 
 <template>
   <PageContainer>
-    <a-row :gutter="16">
+    <a-row>
       <a-col :span="8">
         <!-- 接口设置 -->
         <a-card
diff --git a/src/views/mmlManage/neOperate/index.vue b/src/views/mmlManage/neOperate/index.vue
index 0a01dbcb..eb179489 100644
--- a/src/views/mmlManage/neOperate/index.vue
+++ b/src/views/mmlManage/neOperate/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { Modal, message } from 'ant-design-vue/lib';
+import { Modal, message } from 'ant-design-vue/es';
 import CodemirrorEdite from '@/components/CodemirrorEdite/index.vue';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import useNeInfoStore from '@/store/modules/neinfo';
@@ -9,7 +9,7 @@ import { regExpIPv4, regExpIPv6 } from '@/utils/regular-utils';
 import useI18n from '@/hooks/useI18n';
 import { getMMLByNE, sendMMlByNE } from '@/api/mmlManage/neOperate';
 import { uploadFileToNE } from '@/api/tool/file';
-import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
+import { UploadRequestOption } from 'ant-design-vue/es/vc-upload/interface';
 const neInfoStore = useNeInfoStore();
 const { t } = useI18n();
 
diff --git a/src/views/mmlManage/omcOperate/index.vue b/src/views/mmlManage/omcOperate/index.vue
index 388e4488..c6f99365 100644
--- a/src/views/mmlManage/omcOperate/index.vue
+++ b/src/views/mmlManage/omcOperate/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { Modal, message } from 'ant-design-vue/lib';
+import { Modal, message } from 'ant-design-vue/es';
 import CodemirrorEdite from '@/components/CodemirrorEdite/index.vue';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import useNeInfoStore from '@/store/modules/neinfo';
@@ -9,7 +9,7 @@ import { regExpIPv4, regExpIPv6 } from '@/utils/regular-utils';
 import useI18n from '@/hooks/useI18n';
 import { getMMLByOMC, sendMMlByOMC } from '@/api/mmlManage/omcOperate';
 import { uploadFileToNE } from '@/api/tool/file';
-import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
+import { UploadRequestOption } from 'ant-design-vue/es/vc-upload/interface';
 const { t } = useI18n();
 
 /**网元参数 */
diff --git a/src/views/mmlManage/udmOperate/index.vue b/src/views/mmlManage/udmOperate/index.vue
index bc5a89ee..72a1c856 100644
--- a/src/views/mmlManage/udmOperate/index.vue
+++ b/src/views/mmlManage/udmOperate/index.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { Modal, message } from 'ant-design-vue/lib';
+import { Modal, message } from 'ant-design-vue/es';
 import CodemirrorEdite from '@/components/CodemirrorEdite/index.vue';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import useNeInfoStore from '@/store/modules/neinfo';
 import { regExpIPv4, regExpIPv6 } from '@/utils/regular-utils';
 import useI18n from '@/hooks/useI18n';
 import { getMMLByUDM, sendMMlByUDM } from '@/api/mmlManage/udmOperate';
-import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
+import { UploadRequestOption } from 'ant-design-vue/es/vc-upload/interface';
 import { uploadFileToNE } from '@/api/tool/file';
 const { t } = useI18n();
 
diff --git a/src/views/monitor/cache/index.vue b/src/views/monitor/cache/index.vue
index 710076b4..e42cf493 100644
--- a/src/views/monitor/cache/index.vue
+++ b/src/views/monitor/cache/index.vue
@@ -9,8 +9,8 @@ import {
   clearCacheSafe,
 } from '@/api/monitor/cache';
 import { PageContainer } from 'antdv-pro-layout';
-import { ColumnsType } from 'ant-design-vue/lib/table/Table';
-import { message } from 'ant-design-vue/lib';
+import { ColumnsType } from 'ant-design-vue/es/table/Table';
+import { message } from 'ant-design-vue/es';
 import { hasPermissions } from '@/plugins/auth-user';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import useI18n from '@/hooks/useI18n';
@@ -268,7 +268,7 @@ onMounted(() => {
 
 <template>
   <PageContainer>
-    <a-row :gutter="20">
+    <a-row>
       <a-col :lg="8" :md="8" :xs="24">
         <a-card
           :title="t('views.monitor.cache.cacheList')"
diff --git a/src/views/monitor/job/index.vue b/src/views/monitor/job/index.vue
index f5c345f5..0f13439c 100644
--- a/src/views/monitor/job/index.vue
+++ b/src/views/monitor/job/index.vue
@@ -2,10 +2,11 @@
 import { useRouter, useRoute } from 'vue-router';
 import { reactive, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Modal, Form } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { ProModal } from 'antdv-pro-modal';
+import { message, Modal, Form } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import {
   exportJob,
   listJob,
@@ -190,9 +191,9 @@ function fnTableSelectedRowKeys(keys: (string | number)[]) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**详情框是否显示 */
-  visibleByView: boolean;
+  openByView: boolean;
   /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -200,13 +201,13 @@ type ModalStateType = {
   /**确定按钮 loading */
   confirmLoading: boolean;
   /**cron生成框是否显示 */
-  visibleByCron: boolean;
+  openByCron: boolean;
 };
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByView: false,
-  visibleByEdit: false,
+  openByView: false,
+  openByEdit: false,
   title: '任务',
   from: {
     jobId: undefined,
@@ -222,7 +223,7 @@ let modalState: ModalStateType = reactive({
     remark: '',
   },
   confirmLoading: false,
-  visibleByCron: false,
+  openByCron: false,
 });
 
 /**对话框内表单属性和校验规则 */
@@ -273,7 +274,7 @@ function fnModalVisibleByVive(jobId: string | number) {
     if (res.code === RESULT_CODE_SUCCESS && res.data) {
       modalState.from = Object.assign(modalState.from, res.data);
       modalState.title = t('views.monitor.job.viewJob');
-      modalState.visibleByView = true;
+      modalState.openByView = true;
     } else {
       message.error(t('views.monitor.job.viewInfoErr'), 2);
     }
@@ -288,7 +289,7 @@ function fnModalVisibleByEdit(jobId?: string | number) {
   if (!jobId) {
     modalStateFrom.resetFields();
     modalState.title = t('views.monitor.job.addJob');
-    modalState.visibleByEdit = true;
+    modalState.openByEdit = true;
   } else {
     if (modalState.confirmLoading) return;
     const hide = message.loading(t('common.loading'), 0);
@@ -299,7 +300,7 @@ function fnModalVisibleByEdit(jobId?: string | number) {
       if (res.code === RESULT_CODE_SUCCESS && res.data) {
         modalState.from = Object.assign(modalState.from, res.data);
         modalState.title = t('views.monitor.job.editJob');
-        modalState.visibleByEdit = true;
+        modalState.openByEdit = true;
       } else {
         message.error(t('views.monitor.job.viewInfoErr'), 2);
       }
@@ -328,7 +329,7 @@ function fnModalOk() {
               key,
               duration: 2,
             });
-            modalState.visibleByEdit = false;
+            modalState.openByEdit = false;
             modalStateFrom.resetFields();
             fnGetList(1);
           } else {
@@ -353,8 +354,8 @@ function fnModalOk() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByEdit = false;
-  modalState.visibleByView = false;
+  modalState.openByEdit = false;
+  modalState.openByView = false;
   modalStateFrom.resetFields();
 }
 
@@ -362,7 +363,7 @@ function fnModalCancel() {
  * 对话框弹出cron生成回调
  */
 function fnModalCron(opt: boolean, cronStr?: string) {
-  modalState.visibleByCron = opt;
+  modalState.openByCron = opt;
   if (cronStr) {
     modalState.from.cronExpression = cronStr;
   }
@@ -651,7 +652,7 @@ onMounted(() => {
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
-        <div class="button-container">
+        <a-space :size="8" align="center">
           <a-button
             type="primary"
             @click.prevent="fnModalVisibleByEdit()"
@@ -695,12 +696,12 @@ onMounted(() => {
             <template #icon><SyncOutlined /></template>
             {{ t('views.monitor.job.resetQueue') }}
           </a-button>
-        </div>
+        </a-space>
       </template>
 
       <!-- 插槽-卡片右侧 -->
       <template #extra>
-        <div class="button-container">
+        <a-space :size="8" align="center">
           <a-tooltip>
             <template #title>{{ t('common.searchBarText') }}</template>
             <a-switch
@@ -740,7 +741,7 @@ onMounted(() => {
               </template>
             </a-dropdown>
           </a-tooltip>
-        </div>
+        </a-space>
       </template>
 
       <!-- 表格列表 -->
@@ -848,12 +849,12 @@ onMounted(() => {
     <ProModal
       :drag="true"
       :width="800"
-      :visible="modalState.visibleByView"
+      :open="modalState.openByView"
       :title="modalState.title"
       @cancel="fnModalCancel"
     >
       <a-form layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true">
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item :label="t('views.monitor.job.jobName')" name="jobName">
               {{ modalState.from.jobName }}
@@ -869,7 +870,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.monitor.job.invokeTarget')"
@@ -891,7 +892,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.monitor.job.cronExpression')"
@@ -963,7 +964,7 @@ onMounted(() => {
       :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
-      :visible="modalState.visibleByEdit"
+      :open="modalState.openByEdit"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnModalOk"
@@ -975,7 +976,7 @@ onMounted(() => {
         :label-col="{ span: 6 }"
         :label-wrap="true"
       >
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.monitor.job.jobName')"
@@ -1002,7 +1003,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.monitor.job.jobGroup')"
@@ -1047,7 +1048,7 @@ onMounted(() => {
                 <template #title>
                   <div>{{ t('views.monitor.job.invokeTargetTip') }}</div>
                 </template>
-                <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
               </a-tooltip>
             </template>
           </a-input>
@@ -1073,7 +1074,7 @@ onMounted(() => {
                     {{ t('views.monitor.job.cronExpressionTip1') }}
                   </div>
                 </template>
-                <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
               </a-tooltip>
             </template>
             <template #addonAfter>
@@ -1121,7 +1122,7 @@ onMounted(() => {
 
     <!-- 生成cron表达式 -->
     <CronModal
-      v-model:visible="modalState.visibleByCron"
+      v-model:open="modalState.openByCron"
       :cron="modalState.from.cronExpression"
       @ok="fnModalCron(false, $event)"
     ></CronModal>
diff --git a/src/views/monitor/job/log.vue b/src/views/monitor/job/log.vue
index 022b7b45..30089bc6 100644
--- a/src/views/monitor/job/log.vue
+++ b/src/views/monitor/job/log.vue
@@ -2,10 +2,11 @@
 import { useRoute, useRouter } from 'vue-router';
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Modal } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { ProModal } from 'antdv-pro-modal';
+import { message, Modal } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import {
   exportJobLog,
   listJobLog,
@@ -216,7 +217,7 @@ function fnTableSelectedRowKeys(keys: (string | number)[]) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**详情框是否显示 */
-  visibleByView: boolean;
+  open: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -225,7 +226,7 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByView: false,
+  open: false,
   title: '任务日志',
   from: {
     jobLogId: undefined,
@@ -246,14 +247,14 @@ let modalState: ModalStateType = reactive({
 function fnModalVisibleByVive(row: Record<string, string>) {
   modalState.from = Object.assign(modalState.from, row);
   modalState.title = t('views.monitor.jobLog.viewLog');
-  modalState.visibleByView = true;
+  modalState.open = true;
 }
 
 /**
  * 对话框弹出关闭执行函数
  */
 function fnModalCancel() {
-  modalState.visibleByView = false;
+  modalState.open = false;
 }
 
 /**
@@ -503,7 +504,7 @@ onMounted(() => {
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
-        <div class="button-container">
+        <a-space :size="8" align="center">
           <a-button type="default" @click.prevent="fnClose()">
             <template #icon><CloseOutlined /></template>
             {{ t('common.close') }}
@@ -535,12 +536,12 @@ onMounted(() => {
             <template #icon><ExportOutlined /></template>
             {{ t('common.export') }}
           </a-button>
-        </div>
+        </a-space>
       </template>
 
       <!-- 插槽-卡片右侧 -->
       <template #extra>
-        <div class="button-container">
+        <a-space :size="8" align="center">
           <a-tooltip>
             <template #title>{{ t('common.searchBarText') }}</template>
             <a-switch
@@ -580,7 +581,7 @@ onMounted(() => {
               </template>
             </a-dropdown>
           </a-tooltip>
-        </div>
+        </a-space>
       </template>
 
       <!-- 表格列表 -->
@@ -635,12 +636,12 @@ onMounted(() => {
     <ProModal
       :drag="true"
       :width="800"
-      :visible="modalState.visibleByView"
+      :open="modalState.open"
       :title="modalState.title"
       @cancel="fnModalCancel"
     >
       <a-form layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true">
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item :label="t('common.rowId')" name="jobLogId">
               {{ modalState.from.jobLogId }}
@@ -662,7 +663,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.monitor.jobLog.jobName')"
@@ -683,7 +684,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.monitor.jobLog.invokeTarget')"
diff --git a/src/views/monitor/monitor/index.vue b/src/views/monitor/monitor/index.vue
index 4ce4ffa4..fbbc999c 100644
--- a/src/views/monitor/monitor/index.vue
+++ b/src/views/monitor/monitor/index.vue
@@ -466,7 +466,7 @@ onMounted(() => {
       </a-form>
     </a-card>
 
-    <a-row :gutter="16">
+    <a-row>
       <a-col :lg="24" :md="24" :xs="24">
         <a-card :bordered="false" :body-style="{ marginBottom: '24px' }">
           <!-- 插槽-卡片左侧侧 -->
@@ -496,7 +496,7 @@ onMounted(() => {
         </a-card>
       </a-col>
     </a-row>
-    <a-row :gutter="16">
+    <a-row>
       <a-col :lg="12" :md="12" :xs="24">
         <a-card :bordered="false" :body-style="{ marginBottom: '24px' }">
           <!-- 插槽-卡片左侧侧 -->
@@ -554,7 +554,7 @@ onMounted(() => {
         </a-card>
       </a-col>
     </a-row>
-    <a-row :gutter="16">
+    <a-row>
       <a-col :lg="12" :md="12" :xs="24">
         <a-card :bordered="false" :body-style="{ marginBottom: '24px' }">
           <!-- 插槽-卡片左侧侧 -->
diff --git a/src/views/monitor/online/index.vue b/src/views/monitor/online/index.vue
index 51b245ac..19f34301 100644
--- a/src/views/monitor/online/index.vue
+++ b/src/views/monitor/online/index.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { reactive, onMounted } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Modal } from 'ant-design-vue/lib';
+import { message, Modal } from 'ant-design-vue/es';
 import { forceLogout, listOnline } from '@/api/monitor/online';
 import { parseDateToStr } from '@/utils/date-utils';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import useI18n from '@/hooks/useI18n';
 const { t } = useI18n();
diff --git a/src/views/monitor/system/info.vue b/src/views/monitor/system/info.vue
index 224b87d7..192d7d08 100644
--- a/src/views/monitor/system/info.vue
+++ b/src/views/monitor/system/info.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import { getSystemInfo } from '@/api/monitor/system';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import useI18n from '@/hooks/useI18n';
diff --git a/src/views/monitor/topology/index.vue b/src/views/monitor/topology/index.vue
index df4f799d..7080c1b5 100644
--- a/src/views/monitor/topology/index.vue
+++ b/src/views/monitor/topology/index.vue
@@ -4,7 +4,7 @@ import { PageContainer } from 'antdv-pro-layout';
 import useI18n from '@/hooks/useI18n';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { listAllNeInfo, stateNeInfo } from '@/api/ne/neInfo';
-import { message } from 'ant-design-vue/lib';
+import { message } from 'ant-design-vue/es';
 import { randerGroph, switchLayout } from './graph';
 import { parseDateToStr } from '@/utils/date-utils';
 const { t } = useI18n();
@@ -61,7 +61,7 @@ function fnGetList(refresh: boolean = false) {
         res.data.length > 0
       ) {
         // 根网管
-        let rootNodeInfo = { neName: "OMC_001" };
+        let rootNodeInfo = { neName: 'OMC_001' };
         const nodes = [];
         const edges = [];
         for (const item of res.data) {
@@ -139,7 +139,7 @@ function fnGetList(refresh: boolean = false) {
       }
     })
     .then(hasNeList => {
-      if (!hasNeList) return; 
+      if (!hasNeList) return;
       if (refresh) {
         // graphG6.value.get('canvas').set('localRefresh', true);
         graphG6.value.destroy();
diff --git a/src/views/monitor/topologyArchitecture/index.vue b/src/views/monitor/topologyArchitecture/index.vue
index ecb17082..049dcb2e 100644
--- a/src/views/monitor/topologyArchitecture/index.vue
+++ b/src/views/monitor/topologyArchitecture/index.vue
@@ -6,7 +6,7 @@ import {
   RESULT_CODE_SUCCESS,
 } from '@/constants/result-constants';
 import { listAllNeInfo } from '@/api/ne/neInfo';
-import { message } from 'ant-design-vue/lib';
+import { message } from 'ant-design-vue/es';
 import { getGraphData } from '@/api/monitor/topology';
 import { parseDateToStr } from '@/utils/date-utils';
 import { Graph, GraphData, Menu, Tooltip } from '@antv/g6';
@@ -506,16 +506,20 @@ onBeforeUnmount(() => {
     >
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
-        <div class="button-container" style="margin-bottom: -12px">
+        <a-space :size="8" align="center">
           <span>
             {{ t('views.monitor.topologyBuild.graphGroup') }}：
             {{ graphState.group }}
           </span>
-        </div>
+        </a-space>
       </template>
       <!-- 插槽-卡片右侧 -->
       <template #extra>
-        <a-button type="default" @click.prevent="fnGraphDataLoad(true)">
+        <a-button
+          type="default"
+          size="small"
+          @click.prevent="fnGraphDataLoad(true)"
+        >
           <template #icon><ReloadOutlined /></template>
           {{ t('common.reloadText') }}
         </a-button>
diff --git a/src/views/monitor/topologyBuild/components/GraphEditModal.vue b/src/views/monitor/topologyBuild/components/GraphEditModal.vue
index 79bc35f3..f3b782fc 100644
--- a/src/views/monitor/topologyBuild/components/GraphEditModal.vue
+++ b/src/views/monitor/topologyBuild/components/GraphEditModal.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { reactive, watch } from 'vue';
+import { ProModal } from 'antdv-pro-modal';
 import useI18n from '@/hooks/useI18n';
 import {
   graphEvent,
@@ -53,21 +54,21 @@ watch(graphEvent, v => {
     edgeState.form.id = '#';
     modalState.title = t('views.monitor.topologyBuild.edgeTitleAdd');
     modalState.formType = 'edge';
-    modalState.visible = true;
+    modalState.open = true;
   }
   if (type === 'canvas-create-node') {
     nodeState.origin = {};
     nodeState.form.id = '';
     modalState.title = t('views.monitor.topologyBuild.nodeTitleAdd');
     modalState.formType = 'node';
-    modalState.visible = true;
+    modalState.open = true;
   }
   if (type === 'canvas-create-combo') {
     comboState.origin = {};
     comboState.form.id = '';
     modalState.title = t('views.monitor.topologyBuild.comboTitleAdd');
     modalState.formType = 'combo';
-    modalState.visible = true;
+    modalState.open = true;
   }
   // 边
   if (type === 'edge-edit' && item) {
@@ -76,7 +77,7 @@ watch(graphEvent, v => {
     edgeState.form = Object.assign(edgeState.form, edge);
     modalState.title = t('views.monitor.topologyBuild.edgeTitleEdit');
     modalState.formType = 'edge';
-    modalState.visible = true;
+    modalState.open = true;
   }
   // 节点
   if (type === 'node-edit' && item) {
@@ -85,7 +86,7 @@ watch(graphEvent, v => {
     nodeState.form = Object.assign(nodeState.form, node);
     modalState.title = t('views.monitor.topologyBuild.nodeTitleEdit');
     modalState.formType = 'node';
-    modalState.visible = true;
+    modalState.open = true;
   }
   // 分组
   if (type === 'combo-edit' && item) {
@@ -98,14 +99,14 @@ watch(graphEvent, v => {
     }
     modalState.title = t('views.monitor.topologyBuild.comboTitleEdit');
     modalState.formType = 'combo';
-    modalState.visible = true;
+    modalState.open = true;
   }
 });
 
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**对话框是否显示 */
-  visible: boolean;
+  open: boolean;
   /**标题 */
   title: string;
   /**图元素表单类型 */
@@ -116,7 +117,7 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visible: false,
+  open: false,
   title: '图信息',
   formType: 'edge',
   confirmLoading: false,
@@ -132,21 +133,21 @@ function fnModalOk() {
   // 边编辑确认
   if (type === 'edge') {
     handleOkEdge().then(result => {
-      modalState.visible = !result;
+      modalState.open = !result;
       modalState.confirmLoading = false;
     });
   }
   // 节点编辑确认
   if (type === 'node') {
     handleOkNode().then(result => {
-      modalState.visible = !result;
+      modalState.open = !result;
       modalState.confirmLoading = false;
     });
   }
   // 分租编辑确认
   if (type === 'combo') {
     handleOkcombo().then(result => {
-      modalState.visible = !result;
+      modalState.open = !result;
       modalState.confirmLoading = false;
     });
   }
@@ -157,7 +158,7 @@ function fnModalOk() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visible = false;
+  modalState.open = false;
   const type = modalState.formType;
   // 边编辑还原
   if (type === 'edge') {
@@ -179,10 +180,10 @@ function fnModalCancel() {
     :drag="true"
     :width="800"
     :destroyOnClose="true"
-    :body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
+    :body-style="{ maxHeight: '600px', 'overflow-y': 'auto' }"
     :keyboard="false"
     :mask-closable="false"
-    :visible="modalState.visible"
+    :open="modalState.open"
     :title="modalState.title"
     :confirm-loading="modalState.confirmLoading"
     @ok="fnModalOk"
@@ -240,7 +241,7 @@ function fnModalCancel() {
       </a-form-item>
 
       <!-- 圆形尺寸 -->
-      <a-row :gutter="16" v-if="comboState.form.type.startsWith('circle')">
+      <a-row v-if="comboState.form.type.startsWith('circle')">
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label="t('views.monitor.topologyBuild.comboFormSize')"
@@ -269,7 +270,7 @@ function fnModalCancel() {
       </a-row>
 
       <!-- 矩形尺寸 -->
-      <a-row :gutter="16" v-if="comboState.form.type.startsWith('rect')">
+      <a-row v-if="comboState.form.type.startsWith('rect')">
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label="t('views.monitor.topologyBuild.comboFormSize')"
@@ -308,7 +309,7 @@ function fnModalCancel() {
         </a-col>
       </a-row>
 
-      <a-row :gutter="16">
+      <a-row>
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label="t('views.monitor.topologyBuild.formStyleFill')"
@@ -396,7 +397,7 @@ function fnModalCancel() {
         </a-input>
       </a-form-item>
 
-      <a-row :gutter="16">
+      <a-row>
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label="t('views.monitor.topologyBuild.formLabelStyleFill')"
@@ -424,7 +425,7 @@ function fnModalCancel() {
         </a-col>
       </a-row>
 
-      <a-row :gutter="16">
+      <a-row>
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label="t('views.monitor.topologyBuild.formLabelRefX')"
@@ -457,7 +458,7 @@ function fnModalCancel() {
         </a-col>
       </a-row>
 
-      <a-row :gutter="16">
+      <a-row>
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label="t('views.monitor.topologyBuild.formLabelPosition')"
@@ -525,7 +526,7 @@ function fnModalCancel() {
         </a-select>
       </a-form-item>
 
-      <a-row :gutter="16">
+      <a-row>
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label="t('views.monitor.topologyBuild.nodeFormX')"
@@ -552,7 +553,7 @@ function fnModalCancel() {
         </a-col>
       </a-row>
 
-      <a-row :gutter="16">
+      <a-row>
         <a-col
           :lg="12"
           :md="12"
@@ -653,7 +654,7 @@ function fnModalCancel() {
       </a-row>
 
       <template v-if="!nodeState.form.type.startsWith('image')">
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.monitor.topologyBuild.formStyleStroke')"
@@ -728,7 +729,7 @@ function fnModalCancel() {
         </a-input>
       </a-form-item>
 
-      <a-row :gutter="16">
+      <a-row>
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label="t('views.monitor.topologyBuild.formLabelStyleFill')"
@@ -756,7 +757,7 @@ function fnModalCancel() {
         </a-col>
       </a-row>
 
-      <a-row :gutter="16">
+      <a-row>
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label="t('views.monitor.topologyBuild.formLabelPosition')"
@@ -791,7 +792,7 @@ function fnModalCancel() {
           {{ t('views.monitor.topologyBuild.nodeFormTypeImage') }}
         </a-divider>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.monitor.topologyBuild.nodeFormClipShow')"
@@ -835,7 +836,7 @@ function fnModalCancel() {
 
         <!-- 裁剪功能 -->
         <template v-if="nodeState.form.clipCfg.show">
-          <a-row :gutter="16">
+          <a-row>
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item
                 :label="t('views.monitor.topologyBuild.nodeFormClipType')"
@@ -851,10 +852,7 @@ function fnModalCancel() {
           </a-row>
 
           <!-- 剪裁圆形 -->
-          <a-row
-            :gutter="16"
-            v-if="nodeState.form.clipCfg.type.startsWith('circle')"
-          >
+          <a-row v-if="nodeState.form.clipCfg.type.startsWith('circle')">
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item
                 :label="t('views.monitor.topologyBuild.nodeFormClipTypeCircle')"
@@ -872,10 +870,7 @@ function fnModalCancel() {
           </a-row>
 
           <!-- 剪裁矩形 -->
-          <a-row
-            :gutter="16"
-            v-if="nodeState.form.clipCfg.type.startsWith('rect')"
-          >
+          <a-row v-if="nodeState.form.clipCfg.type.startsWith('rect')">
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item
                 :label="
@@ -911,7 +906,7 @@ function fnModalCancel() {
           </a-row>
 
           <!-- 剪裁椭圆 -->
-          <a-row :gutter="16" v-if="nodeState.form.clipCfg.type === 'ellipse'">
+          <a-row v-if="nodeState.form.clipCfg.type === 'ellipse'">
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item
                 :label="
@@ -947,7 +942,7 @@ function fnModalCancel() {
           </a-row>
 
           <!-- 裁剪图形坐标 -->
-          <a-row :gutter="16">
+          <a-row>
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item
                 :label="t('views.monitor.topologyBuild.nodeFormClipX')"
@@ -992,7 +987,7 @@ function fnModalCancel() {
           {{ t('views.monitor.topologyBuild.nodeFormIcon') }}
         </a-divider>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.monitor.topologyBuild.nodeFormIconShow')"
@@ -1016,7 +1011,7 @@ function fnModalCancel() {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.monitor.topologyBuild.nodeFormIconWidth')"
@@ -1047,7 +1042,7 @@ function fnModalCancel() {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16" v-if="nodeState.form.type === 'triangle'">
+        <a-row v-if="nodeState.form.type === 'triangle'">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.monitor.topologyBuild.nodeFormIconOffset')"
@@ -1087,7 +1082,7 @@ function fnModalCancel() {
         </a-select>
       </a-form-item>
 
-      <a-row :gutter="16">
+      <a-row>
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label="t('views.monitor.topologyBuild.edgeFormSource')"
@@ -1118,7 +1113,7 @@ function fnModalCancel() {
         </a-col>
       </a-row>
 
-      <a-row :gutter="16">
+      <a-row>
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label="t('views.monitor.topologyBuild.formStyleStroke')"
@@ -1146,7 +1141,7 @@ function fnModalCancel() {
         </a-col>
       </a-row>
 
-      <a-row :gutter="16">
+      <a-row>
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label="t('views.monitor.topologyBuild.edgeFormStartArrow')"
@@ -1185,7 +1180,7 @@ function fnModalCancel() {
         </a-input>
       </a-form-item>
 
-      <a-row :gutter="16">
+      <a-row>
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label="t('views.monitor.topologyBuild.formLabelStyleFill')"
@@ -1213,7 +1208,7 @@ function fnModalCancel() {
         </a-col>
       </a-row>
 
-      <a-row :gutter="16">
+      <a-row>
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label="t('views.monitor.topologyBuild.formLabelRefX')"
@@ -1246,7 +1241,7 @@ function fnModalCancel() {
         </a-col>
       </a-row>
 
-      <a-row :gutter="16">
+      <a-row>
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label="t('views.monitor.topologyBuild.formLabelPosition')"
diff --git a/src/views/monitor/topologyBuild/hooks/useCombo.ts b/src/views/monitor/topologyBuild/hooks/useCombo.ts
index 3de6a4ab..a3865dda 100644
--- a/src/views/monitor/topologyBuild/hooks/useCombo.ts
+++ b/src/views/monitor/topologyBuild/hooks/useCombo.ts
@@ -1,4 +1,4 @@
-import { message, Form } from 'ant-design-vue/lib';
+import { message, Form } from 'ant-design-vue/es';
 import { reactive, toRaw, watch } from 'vue';
 import { graphG6, selectSourceTargetOptions } from './useGraph';
 import useI18n from '@/hooks/useI18n';
diff --git a/src/views/monitor/topologyBuild/hooks/useEdge.ts b/src/views/monitor/topologyBuild/hooks/useEdge.ts
index 066fdde9..eb4370c1 100644
--- a/src/views/monitor/topologyBuild/hooks/useEdge.ts
+++ b/src/views/monitor/topologyBuild/hooks/useEdge.ts
@@ -1,4 +1,4 @@
-import { message, Form } from 'ant-design-vue/lib';
+import { message, Form } from 'ant-design-vue/es';
 import { reactive, watch } from 'vue';
 import useI18n from '@/hooks/useI18n';
 import { graphG6 } from './useGraph';
diff --git a/src/views/monitor/topologyBuild/hooks/useNode.ts b/src/views/monitor/topologyBuild/hooks/useNode.ts
index 21f7afe9..3c03c336 100644
--- a/src/views/monitor/topologyBuild/hooks/useNode.ts
+++ b/src/views/monitor/topologyBuild/hooks/useNode.ts
@@ -1,4 +1,4 @@
-import { message, Form } from 'ant-design-vue/lib';
+import { message, Form } from 'ant-design-vue/es';
 import { reactive, watch } from 'vue';
 import { graphG6 } from './useGraph';
 import useI18n from '@/hooks/useI18n';
diff --git a/src/views/monitor/topologyBuild/index.vue b/src/views/monitor/topologyBuild/index.vue
index a5ba776a..74ce3061 100644
--- a/src/views/monitor/topologyBuild/index.vue
+++ b/src/views/monitor/topologyBuild/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { reactive, onMounted, ref, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
+import { ProModal } from 'antdv-pro-modal';
 import useI18n from '@/hooks/useI18n';
 import GraphEditModal from './components/GraphEditModal.vue';
 import useGraph, { graphG6 } from './/hooks/useGraph';
@@ -11,7 +12,7 @@ import {
   saveGraphData,
 } from '@/api/monitor/topology';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import { Form, Modal, message } from 'ant-design-vue/lib';
+import { Form, Modal, message } from 'ant-design-vue/es';
 const { t } = useI18n();
 const { graphMode, graphModeOptions, handleRanderGraph, handleChangeMode } =
   useGraph();
@@ -95,7 +96,7 @@ function fnGraphDataLoad(reload: boolean = false) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**框是否显示 */
-  visible: boolean;
+  open: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -108,7 +109,7 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visible: false,
+  open: false,
   title: '图组',
   form: {
     group: '',
@@ -180,7 +181,7 @@ function fnModalOk() {
  */
 function fnModalCancel() {
   modalState.type = 'save';
-  modalState.visible = false;
+  modalState.open = false;
   modalStateFrom.resetFields();
 }
 
@@ -188,8 +189,8 @@ function fnModalCancel() {
 function fnGraphDataSave() {
   modalState.form.group = graphState.group;
   modalState.type = 'save';
-  (modalState.title = t('views.monitor.topologyBuild.saveTtite')),
-    (modalState.visible = true);
+  modalState.title = t('views.monitor.topologyBuild.saveTtite');
+  modalState.open = true;
 }
 
 /**图组数据删除 */
@@ -244,57 +245,44 @@ onMounted(() => {
 
 <template>
   <PageContainer>
-    <a-card
-      :bordered="false"
-      :body-style="{ marginBottom: '24px', paddingBottom: 0 }"
-    >
+    <a-card :bordered="false" :body-style="{ marginBottom: '24px' }">
       <!-- 表格搜索栏 -->
-      <a-form :model="graphState" name="graphState" layout="horizontal">
-        <a-row :gutter="16">
-          <a-col :lg="4" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.monitor.topologyBuild.graphMode')"
-              name="graphMode"
-            >
-              <a-select
-                :value="graphMode"
-                :options="graphModeOptions"
-                @change="handleChangeMode"
-              >
-              </a-select>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="6" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.monitor.topologyBuild.graphGroup')"
-              name="group "
-            >
-              <a-select
-                v-model:value="graphState.group"
-                :options="graphState.groupOptions"
-                :placeholder="t('common.selectPlease')"
-                @change="fnGraphGroupChange"
-              />
-            </a-form-item>
-          </a-col>
-        </a-row>
-      </a-form>
+      <a-row :gutter="16">
+        <a-col>
+          <span>{{ t('views.monitor.topologyBuild.graphMode') }}:</span>&nbsp;
+          <a-select
+            :value="graphMode"
+            :options="graphModeOptions"
+            @change="handleChangeMode"
+          >
+          </a-select>
+        </a-col>
+        <a-col>
+          <span>{{ t('views.monitor.topologyBuild.graphGroup') }}:</span>&nbsp;
+          <a-select
+            v-model:value="graphState.group"
+            :options="graphState.groupOptions"
+            :placeholder="t('common.selectPlease')"
+            @change="fnGraphGroupChange"
+          />
+        </a-col>
+      </a-row>
     </a-card>
 
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
-        <div class="button-container" style="margin-bottom: -12px">
+        <a-space :size="8" align="center">
           <span>
             {{ t('views.monitor.topologyBuild.graphGroup') }}：
             {{ graphState.group }}
           </span>
-        </div>
+        </a-space>
       </template>
 
       <!-- 插槽-卡片右侧 -->
       <template #extra>
-        <div class="button-container" style="margin-bottom: -12px">
+        <a-space :size="8" align="center">
           <template v-if="graphMode === 'edit'">
             <a-button type="primary" size="small" @click="fnGraphDataSave">
               <template #icon>
@@ -315,7 +303,7 @@ onMounted(() => {
               {{ t('views.monitor.topologyBuild.graphDelete') }}
             </a-button>
           </template>
-        </div>
+        </a-space>
       </template>
 
       <div ref="graphG6Dom" class="chart"></div>
@@ -329,7 +317,7 @@ onMounted(() => {
       :drag="true"
       :keyboard="false"
       :mask-closable="false"
-      :visible="modalState.visible"
+      :open="modalState.open"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnModalOk"
@@ -341,7 +329,7 @@ onMounted(() => {
         :label-col="{ span: 6 }"
         :labelWrap="true"
       >
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="24" :md="24" :xs="24">
             <a-form-item
               :label="t('views.monitor.topologyBuild.graphGroup')"
diff --git a/src/views/ne/neConfig/hooks/useConfigArray.ts b/src/views/ne/neConfig/hooks/useConfigArray.ts
index 988a819c..b0823043 100644
--- a/src/views/ne/neConfig/hooks/useConfigArray.ts
+++ b/src/views/ne/neConfig/hooks/useConfigArray.ts
@@ -4,9 +4,8 @@ import {
   editNeConfigData,
 } from '@/api/ne/neConfig';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import { Modal } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import message from 'ant-design-vue/lib/message';
+import { Modal,message } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
 import { reactive, watch } from 'vue';
 
 /**
@@ -88,7 +87,7 @@ export default function useConfigArray({
     modalState.title = `${treeState.selectNode.paramDisplay} ${from.title}`;
     modalState.key = from.key;
     modalState.data = from.record.filter((v: any) => !Array.isArray(v.array));
-    modalState.visible = true;
+    modalState.open = true;
 
     // 关闭嵌套
     arrayState.arrayChildExpandKeys = [];
@@ -233,7 +232,7 @@ export default function useConfigArray({
     modalState.title = `${treeState.selectNode.paramDisplay} ${from.title}`;
     modalState.key = from.key;
     modalState.data = from.record.filter((v: any) => !Array.isArray(v.array));
-    modalState.visible = true;
+    modalState.open = true;
   }
 
   /**多列表新增单行确认 */
diff --git a/src/views/ne/neConfig/hooks/useConfigArrayChild.ts b/src/views/ne/neConfig/hooks/useConfigArrayChild.ts
index 6d09b22e..ee58b178 100644
--- a/src/views/ne/neConfig/hooks/useConfigArrayChild.ts
+++ b/src/views/ne/neConfig/hooks/useConfigArrayChild.ts
@@ -4,9 +4,8 @@ import {
   delNeConfigData,
 } from '@/api/ne/neConfig';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import { Modal } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import message from 'ant-design-vue/lib/message';
+import { Modal, message } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
 import { nextTick, reactive } from 'vue';
 
 /**
@@ -174,7 +173,7 @@ export default function useConfigArrayChild({
     modalState.title = `${arrayChildState.title} ${from.title}`;
     modalState.key = from.key;
     modalState.data = from.record.filter((v: any) => !Array.isArray(v.array));
-    modalState.visible = true;
+    modalState.open = true;
   }
 
   /**多列表嵌套行编辑确认 */
@@ -285,7 +284,7 @@ export default function useConfigArrayChild({
     modalState.title = `${arrayChildState.title} ${from.title}`;
     modalState.key = from.key;
     modalState.data = from.record.filter((v: any) => !Array.isArray(v.array));
-    modalState.visible = true;
+    modalState.open = true;
   }
 
   /**多列表新增单行确认 */
diff --git a/src/views/ne/neConfig/hooks/useConfigList.ts b/src/views/ne/neConfig/hooks/useConfigList.ts
index 277d7407..37ed3aee 100644
--- a/src/views/ne/neConfig/hooks/useConfigList.ts
+++ b/src/views/ne/neConfig/hooks/useConfigList.ts
@@ -1,7 +1,7 @@
 import { editNeConfigData } from '@/api/ne/neConfig';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import message from 'ant-design-vue/lib/message';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { message } from 'ant-design-vue/es';
 import { reactive, toRaw } from 'vue';
 
 /**
diff --git a/src/views/ne/neConfig/index.vue b/src/views/ne/neConfig/index.vue
index a8fa89e4..0c8b6bf0 100644
--- a/src/views/ne/neConfig/index.vue
+++ b/src/views/ne/neConfig/index.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw, watch } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message } from 'ant-design-vue/lib';
-import { DataNode } from 'ant-design-vue/lib/tree';
+import { ProModal } from 'antdv-pro-modal';
+import { message } from 'ant-design-vue/es';
+import { DataNode } from 'ant-design-vue/es/tree';
 import useI18n from '@/hooks/useI18n';
 import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
@@ -250,7 +251,7 @@ function fnGetNeConfig() {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**添加框是否显示 */
-  visible: boolean;
+  open: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -267,7 +268,7 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visible: false,
+  open: false,
   title: 'Item',
   from: {},
   confirmLoading: false,
@@ -301,7 +302,7 @@ function fnModalOk() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visible = false;
+  modalState.open = false;
   modalState.from = {};
   modalState.type = 'arrayAdd';
   modalState.key = '';
@@ -310,7 +311,7 @@ function fnModalCancel() {
 
 // 监听新增编辑弹窗
 watch(
-  () => modalState.visible,
+  () => modalState.open,
   val => {
     // SMF需要选择配置的UPF id
     if (val && neTypeSelect.value[0] === 'SMF') {
@@ -441,7 +442,7 @@ onMounted(() => {
         <a-card
           size="small"
           :bordered="false"
-          :body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
+          :body-style="{ maxHeight: '600px', 'overflow-y': 'auto' }"
           :loading="treeState.selectLoading"
         >
           <template #title>
@@ -824,10 +825,10 @@ onMounted(() => {
       :drag="true"
       :width="800"
       :destroyOnClose="true"
-      :body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
+      :body-style="{ maxHeight: '600px', 'overflow-y': 'auto' }"
       :keyboard="false"
       :mask-closable="false"
-      :visible="modalState.visible"
+      :open="modalState.open"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnModalOk"
diff --git a/src/views/ne/neConfigBackup/index.vue b/src/views/ne/neConfigBackup/index.vue
index 931ce9c7..e45e50c0 100644
--- a/src/views/ne/neConfigBackup/index.vue
+++ b/src/views/ne/neConfigBackup/index.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { Form, Modal, TableColumnsType, message } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
+import { ProModal } from 'antdv-pro-modal';
+import { Form, Modal, TableColumnsType, message } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
 import useNeInfoStore from '@/store/modules/neinfo';
 import useI18n from '@/hooks/useI18n';
 import useDictStore from '@/store/modules/dict';
@@ -267,7 +268,7 @@ function fnRecordDelete(id: string) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -278,7 +279,7 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByEdit: false,
+  openByEdit: false,
   title: '备份记录',
   from: {
     id: undefined,
@@ -298,7 +299,7 @@ function fnModalVisibleByEdit(row: Record<string, any>) {
   modalState.from.name = row.name;
   modalState.from.remark = row.remark;
   modalState.title = t('views.ne.neConfigBackup.title', { txt: row.id });
-  modalState.visibleByEdit = true;
+  modalState.openByEdit = true;
 }
 
 /**对话框内表单属性和校验规则 */
@@ -332,7 +333,7 @@ function fnModalOk() {
               content: t('common.msgSuccess', { msg: modalState.title }),
               duration: 3,
             });
-            modalState.visibleByEdit = false;
+            modalState.openByEdit = false;
             modalStateFrom.resetFields();
             fnGetList();
           } else {
@@ -358,7 +359,7 @@ function fnModalOk() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByEdit = false;
+  modalState.openByEdit = false;
   modalStateFrom.resetFields();
 }
 
@@ -557,7 +558,7 @@ onMounted(() => {
       :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
-      :visible="modalState.visibleByEdit"
+      :open="modalState.openByEdit"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnModalOk"
diff --git a/src/views/ne/neHost/index.vue b/src/views/ne/neHost/index.vue
index 31c0c4ae..58c0d324 100644
--- a/src/views/ne/neHost/index.vue
+++ b/src/views/ne/neHost/index.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { reactive, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
-import { Form, Modal, message } from 'ant-design-vue/lib';
+import { ProModal } from 'antdv-pro-modal';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
+import { Form, Modal, message } from 'ant-design-vue/es';
 import { parseDateToStr } from '@/utils/date-utils';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import {
@@ -211,7 +212,7 @@ function fnGetList(pageNum?: number) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -222,7 +223,7 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByEdit: false,
+  openByEdit: false,
   title: '信息',
   from: {
     hostId: undefined,
@@ -302,7 +303,7 @@ function fnModalVisibleByEdit(roleId?: string | number) {
   if (!roleId) {
     modalStateFrom.resetFields();
     modalState.title = t('views.ne.neHost.addTitle');
-    modalState.visibleByEdit = true;
+    modalState.openByEdit = true;
   } else {
     if (modalState.confirmLoading) return;
     const hide = message.loading(t('common.loading'), 0);
@@ -314,7 +315,7 @@ function fnModalVisibleByEdit(roleId?: string | number) {
       if (res.code === RESULT_CODE_SUCCESS && res.data) {
         modalState.from = Object.assign(modalState.from, res.data);
         modalState.title = t('views.ne.neHost.editTitle');
-        modalState.visibleByEdit = true;
+        modalState.openByEdit = true;
       } else {
         message.error(t('common.getInfoFail'), 2);
       }
@@ -372,7 +373,7 @@ function fnModalOk() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByEdit = false;
+  modalState.openByEdit = false;
   modalStateFrom.resetFields();
 }
 
@@ -632,7 +633,7 @@ onMounted(() => {
         :destroyOnClose="true"
         :keyboard="false"
         :mask-closable="false"
-        :visible="modalState.visibleByEdit"
+        :open="modalState.openByEdit"
         :title="modalState.title"
         :confirm-loading="modalState.confirmLoading"
         @ok="fnModalOk"
@@ -644,7 +645,7 @@ onMounted(() => {
           :label-col="{ span: 6 }"
           :label-wrap="true"
         >
-          <a-row :gutter="16">
+          <a-row>
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item
                 :label="t('views.ne.neHost.hostType')"
@@ -686,7 +687,7 @@ onMounted(() => {
             </a-input>
           </a-form-item>
 
-          <a-row :gutter="16">
+          <a-row>
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item
                 :label="t('views.ne.neHost.addr')"
@@ -720,7 +721,7 @@ onMounted(() => {
             </a-col>
           </a-row>
 
-          <a-row :gutter="16">
+          <a-row>
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item
                 :label="t('views.ne.neHost.user')"
diff --git a/src/views/ne/neHostCommand/index.vue b/src/views/ne/neHostCommand/index.vue
index 221b0742..954f0124 100644
--- a/src/views/ne/neHostCommand/index.vue
+++ b/src/views/ne/neHostCommand/index.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { reactive, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
-import { Form, Modal, message } from 'ant-design-vue/lib';
+import { ProModal } from 'antdv-pro-modal';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
+import { Form, Modal, message } from 'ant-design-vue/es';
 import { parseDateToStr } from '@/utils/date-utils';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import {
@@ -179,7 +180,7 @@ function fnGetList(pageNum?: number) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -190,7 +191,7 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByEdit: false,
+  openByEdit: false,
   title: '信息',
   from: {
     cmdId: undefined,
@@ -234,7 +235,7 @@ function fnModalVisibleByEdit(roleId?: string | number) {
   if (!roleId) {
     modalStateFrom.resetFields();
     modalState.title = t('views.ne.neHostCmd.addTitle');
-    modalState.visibleByEdit = true;
+    modalState.openByEdit = true;
   } else {
     if (modalState.confirmLoading) return;
     const hide = message.loading(t('common.loading'), 0);
@@ -246,7 +247,7 @@ function fnModalVisibleByEdit(roleId?: string | number) {
       if (res.code === RESULT_CODE_SUCCESS && res.data) {
         modalState.from = Object.assign(modalState.from, res.data);
         modalState.title = t('views.ne.neHostCmd.editTitle');
-        modalState.visibleByEdit = true;
+        modalState.openByEdit = true;
       } else {
         message.error(t('common.getInfoFail'), 2);
       }
@@ -297,7 +298,7 @@ function fnModalOk() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByEdit = false;
+  modalState.openByEdit = false;
   modalStateFrom.resetFields();
 }
 
@@ -503,7 +504,7 @@ onMounted(() => {
         :destroyOnClose="true"
         :keyboard="false"
         :mask-closable="false"
-        :visible="modalState.visibleByEdit"
+        :open="modalState.openByEdit"
         :title="modalState.title"
         :confirm-loading="modalState.confirmLoading"
         @ok="fnModalOk"
@@ -515,7 +516,7 @@ onMounted(() => {
           :label-col="{ span: 6 }"
           :label-wrap="true"
         >
-          <a-row :gutter="16">
+          <a-row>
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item
                 :label="t('views.ne.neHostCmd.cmdType')"
diff --git a/src/views/ne/neInfo/components/BackConfModal.vue b/src/views/ne/neInfo/components/BackConfModal.vue
index b211cbbd..367e76d9 100644
--- a/src/views/ne/neInfo/components/BackConfModal.vue
+++ b/src/views/ne/neInfo/components/BackConfModal.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { reactive, toRaw, watch } from 'vue';
-import { Form, Modal, Upload, message, notification } from 'ant-design-vue/lib';
-import useI18n from '@/hooks/useI18n';
+import { ProModal } from 'antdv-pro-modal';
+import { Form, Modal, Upload, message, notification } from 'ant-design-vue/es';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
-import { FileType, UploadFile } from 'ant-design-vue/lib/upload/interface';
+import { UploadRequestOption } from 'ant-design-vue/es/vc-upload/interface';
+import { FileType, UploadFile } from 'ant-design-vue/es/upload/interface';
 import {
   exportNeConfigBackup,
   importNeConfigBackup,
@@ -12,10 +12,11 @@ import {
 } from '@/api/ne/neConfigBackup';
 import saveAs from 'file-saver';
 import { uploadFile } from '@/api/tool/file';
+import useI18n from '@/hooks/useI18n';
 const { t } = useI18n();
-const emit = defineEmits(['ok', 'cancel', 'update:visible']);
+const emit = defineEmits(['ok', 'cancel', 'update:open']);
 const props = defineProps({
-  visible: {
+  open: {
     type: Boolean,
     default: false,
   },
@@ -79,7 +80,7 @@ function typeChange(value: any) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -97,7 +98,7 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByEdit: false,
+  openByEdit: false,
   title: '配置文件导入',
   from: {
     neType: '',
@@ -163,12 +164,12 @@ function fnModalOk() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByEdit = false;
+  modalState.openByEdit = false;
   modalState.confirmLoading = false;
   modalStateFrom.resetFields();
   modalState.uploadFiles = [];
   emit('cancel');
-  emit('update:visible', false);
+  emit('update:open', false);
 }
 
 /**表单上传前删除 */
@@ -224,14 +225,14 @@ function fnUploadFile(up: UploadRequestOption) {
 
 /**监听是否显示，初始数据 */
 watch(
-  () => props.visible,
+  () => props.open,
   val => {
     if (val) {
       if (props.neType && props.neId) {
         modalState.from.neType = props.neType;
         modalState.from.neId = props.neId;
         modalState.title = t('views.ne.neInfo.backConf.title');
-        modalState.visibleByEdit = true;
+        modalState.openByEdit = true;
       }
     }
   }
@@ -283,14 +284,14 @@ defineExpose({
     :width="800"
     :keyboard="false"
     :mask-closable="false"
-    :visible="modalState.visibleByEdit"
+    :open="modalState.openByEdit"
     :title="modalState.title"
     :confirm-loading="modalState.confirmLoading"
     @ok="fnModalOk"
     @cancel="fnModalCancel"
   >
     <a-form name="modalStateFrom" layout="horizontal" :label-col="{ span: 6 }">
-      <a-row :gutter="16">
+      <a-row>
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item :label="t('views.ne.common.neType')" name="neType">
             {{ modalState.from.neType }}
diff --git a/src/views/ne/neInfo/components/EditModal.vue b/src/views/ne/neInfo/components/EditModal.vue
index b28b5142..9b14e7f1 100644
--- a/src/views/ne/neInfo/components/EditModal.vue
+++ b/src/views/ne/neInfo/components/EditModal.vue
@@ -1,18 +1,19 @@
 <script setup lang="ts">
 import { reactive, onMounted, toRaw, watch } from 'vue';
-import { message, Form, Modal } from 'ant-design-vue/lib';
-import useI18n from '@/hooks/useI18n';
+import { ProModal } from 'antdv-pro-modal';
+import { message, Form, Modal } from 'ant-design-vue/es';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { NE_TYPE_LIST } from '@/constants/ne-constants';
 import { regExpIPv4, regExpIPv6 } from '@/utils/regular-utils';
 import { getNeInfo, addNeInfo, updateNeInfo } from '@/api/ne/neInfo';
 import { neHostAuthorizedRSA, testNeHost } from '@/api/ne/neHost';
 import useDictStore from '@/store/modules/dict';
+import useI18n from '@/hooks/useI18n';
 const { getDict } = useDictStore();
 const { t } = useI18n();
-const emit = defineEmits(['ok', 'cancel', 'update:visible']);
+const emit = defineEmits(['ok', 'cancel', 'update:open']);
 const props = defineProps({
-  visible: {
+  open: {
     type: Boolean,
     default: false,
   },
@@ -87,7 +88,7 @@ function fnHostAuthorized(row: Record<string, any>) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -98,7 +99,7 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByEdit: false,
+  openByEdit: false,
   title: '网元',
   from: {
     id: undefined,
@@ -214,7 +215,7 @@ function fnModalVisibleByEdit(editId: string) {
   if (!editId) {
     modalStateFrom.resetFields();
     modalState.title = t('views.ne.neInfo.addTitle');
-    modalState.visibleByEdit = true;
+    modalState.openByEdit = true;
   } else {
     if (modalState.confirmLoading) return;
     const hide = message.loading(t('common.loading'), 0);
@@ -225,7 +226,7 @@ function fnModalVisibleByEdit(editId: string) {
       if (res.code === RESULT_CODE_SUCCESS) {
         Object.assign(modalState.from, res.data);
         modalState.title = t('views.ne.neInfo.editTitle');
-        modalState.visibleByEdit = true;
+        modalState.openByEdit = true;
       } else {
         message.error(t('common.getInfoFail'), 2);
       }
@@ -274,11 +275,11 @@ function fnModalOk() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByEdit = false;
+  modalState.openByEdit = false;
   modalState.confirmLoading = false;
   modalStateFrom.resetFields();
   emit('cancel');
-  emit('update:visible', false);
+  emit('update:open', false);
 }
 
 /**表单修改网元类型 */
@@ -341,7 +342,7 @@ function fnNeIPChange(e: any) {
 
 /**监听是否显示，初始数据 */
 watch(
-  () => props.visible,
+  () => props.open,
   val => {
     if (val) fnModalVisibleByEdit(props.editId);
   }
@@ -372,10 +373,10 @@ onMounted(() => {
     :drag="true"
     :width="800"
     :destroyOnClose="true"
-    :body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
+    :body-style="{ maxHeight: '600px', 'overflow-y': 'auto' }"
     :keyboard="false"
     :mask-closable="false"
-    :visible="modalState.visibleByEdit"
+    :open="modalState.openByEdit"
     :title="modalState.title"
     :confirm-loading="modalState.confirmLoading"
     @ok="fnModalOk"
@@ -387,7 +388,7 @@ onMounted(() => {
       :label-col="{ span: 6 }"
       :labelWrap="true"
     >
-      <a-row :gutter="16">
+      <a-row>
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label="t('views.ne.common.neType')"
@@ -409,7 +410,7 @@ onMounted(() => {
                     <template #title>
                       {{ t('views.ne.common.neTypeTip') }}
                     </template>
-                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                    <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
                   </a-tooltip>
                 </template>
               </a-input>
@@ -437,7 +438,7 @@ onMounted(() => {
         </a-col>
       </a-row>
 
-      <a-row :gutter="16">
+      <a-row>
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label="t('views.ne.common.neId')"
@@ -456,7 +457,7 @@ onMounted(() => {
                   <template #title>
                     {{ t('views.ne.common.neIdTip') }}
                   </template>
-                  <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
                 </a-tooltip>
               </template>
             </a-input>
@@ -479,7 +480,7 @@ onMounted(() => {
         </a-col>
       </a-row>
 
-      <a-row :gutter="16">
+      <a-row>
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label="t('views.ne.common.ipAddr')"
@@ -500,7 +501,7 @@ onMounted(() => {
                       {{ t('views.ne.common.ipAddrTip') }}
                     </div>
                   </template>
-                  <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
                 </a-tooltip>
               </template>
             </a-input>
@@ -525,7 +526,7 @@ onMounted(() => {
                   <template #title>
                     <div>{{ t('views.ne.common.portTip') }}</div>
                   </template>
-                  <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
                 </a-tooltip>
               </template>
             </a-input-number>
@@ -553,13 +554,13 @@ onMounted(() => {
                   {{ t('views.ne.common.rmUidTip') }}
                 </div>
               </template>
-              <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+              <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
             </a-tooltip>
           </template>
         </a-input>
       </a-form-item>
 
-      <a-row :gutter="16">
+      <a-row>
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item :label="t('views.ne.neInfo.neAddress')" name="neAddress">
             <a-input
@@ -573,7 +574,7 @@ onMounted(() => {
                   <template #title>
                     <div>{{ t('views.ne.neInfo.neAddressTip') }}</div>
                   </template>
-                  <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
                 </a-tooltip>
               </template>
             </a-input>
@@ -591,7 +592,7 @@ onMounted(() => {
         </a-col>
       </a-row>
 
-      <a-row :gutter="16">
+      <a-row>
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label="t('views.ne.neInfo.vendorName')"
@@ -649,7 +650,7 @@ onMounted(() => {
               {{ `${host.hostType.toUpperCase()} ${host.port}` }}
             </span>
           </template>
-          <a-row :gutter="16">
+          <a-row>
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item :label="t('views.ne.neHost.addr')">
                 <a-input
@@ -662,7 +663,10 @@ onMounted(() => {
               </a-form-item>
             </a-col>
             <a-col :lg="12" :md="12" :xs="24">
-              <a-form-item :label="t('views.ne.neHost.port')" name="port">
+              <a-form-item
+                :label="t('views.ne.neHost.port')"
+                name="neHost.port"
+              >
                 <a-input-number
                   v-model:value="host.port"
                   :min="10"
@@ -690,7 +694,7 @@ onMounted(() => {
             </a-input>
           </a-form-item>
 
-          <a-row :gutter="16" v-if="host.hostType === 'ssh'">
+          <a-row v-if="host.hostType === 'ssh'">
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item :label="t('views.ne.neHost.user')">
                 <a-input
diff --git a/src/views/ne/neInfo/components/OAMModal.vue b/src/views/ne/neInfo/components/OAMModal.vue
index 3108dda5..9722da0a 100644
--- a/src/views/ne/neInfo/components/OAMModal.vue
+++ b/src/views/ne/neInfo/components/OAMModal.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import { reactive, toRaw, watch } from 'vue';
-import { message, Form } from 'ant-design-vue/lib';
+import { ProModal } from 'antdv-pro-modal';
+import { message, Form } from 'ant-design-vue/es';
 import useI18n from '@/hooks/useI18n';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { getOAMFile, saveOAMFile } from '@/api/ne/neInfo';
 const { t } = useI18n();
-const emit = defineEmits(['ok', 'cancel', 'update:visible']);
+const emit = defineEmits(['ok', 'cancel', 'update:open']);
 const props = defineProps({
-  visible: {
+  open: {
     type: Boolean,
     default: false,
   },
@@ -25,7 +26,7 @@ const props = defineProps({
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**标题 */
   title: string;
   /**是否同步 */
@@ -38,7 +39,7 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByEdit: false,
+  openByEdit: false,
   title: 'OAM Configuration',
   sync: true,
   from: {
@@ -87,7 +88,7 @@ function fnModalVisibleByTypeAndId(neType: string, neId: string) {
           kpiTimer: data.kpiConfig.timer,
         });
         modalState.title = t('views.ne.neInfo.oam.title');
-        modalState.visibleByEdit = true;
+        modalState.openByEdit = true;
       } else {
         message.error(res.msg, 3);
       }
@@ -142,16 +143,16 @@ function fnModalOk() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByEdit = false;
+  modalState.openByEdit = false;
   modalState.confirmLoading = false;
   modalStateFrom.resetFields();
   emit('cancel');
-  emit('update:visible', false);
+  emit('update:open', false);
 }
 
 /**监听是否显示，初始数据 */
 watch(
-  () => props.visible,
+  () => props.open,
   val => {
     if (val) {
       if (props.neType && props.neId) {
@@ -166,10 +167,10 @@ watch(
   <ProModal
     :drag="true"
     :destroyOnClose="true"
-    :body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
+    :body-style="{ maxHeight: '600px', 'overflow-y': 'auto' }"
     :keyboard="false"
     :mask-closable="false"
-    :visible="modalState.visibleByEdit"
+    :open="modalState.openByEdit"
     :title="modalState.title"
     :confirm-loading="modalState.confirmLoading"
     @ok="fnModalOk"
@@ -196,7 +197,7 @@ watch(
 
       <a-collapse class="collapse" ghost>
         <a-collapse-panel header="OAM">
-          <a-row :gutter="16">
+          <a-row>
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item
                 :label="t('views.ne.neInfo.oam.oamEnable')"
@@ -239,7 +240,7 @@ watch(
           </a-form-item>
         </a-collapse-panel>
         <a-collapse-panel header="SNMP">
-          <a-row :gutter="16">
+          <a-row>
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item
                 :label="t('views.ne.neInfo.oam.snmpEnable')"
@@ -271,7 +272,7 @@ watch(
           </a-row>
         </a-collapse-panel>
         <a-collapse-panel header="KPI">
-          <a-row :gutter="16">
+          <a-row>
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item
                 :label="t('views.ne.neInfo.oam.kpiEnable')"
diff --git a/src/views/ne/neInfo/hooks/useNeOptions.ts b/src/views/ne/neInfo/hooks/useNeOptions.ts
index 2a68a379..941ff9d5 100644
--- a/src/views/ne/neInfo/hooks/useNeOptions.ts
+++ b/src/views/ne/neInfo/hooks/useNeOptions.ts
@@ -1,5 +1,5 @@
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import { Modal, message } from 'ant-design-vue/lib';
+import { Modal, message } from 'ant-design-vue/es';
 import useI18n from '@/hooks/useI18n';
 import { useRouter } from 'vue-router';
 import { updateNeConfigReload } from '@/api/configManage/configParam';
diff --git a/src/views/ne/neInfo/index.vue b/src/views/ne/neInfo/index.vue
index 57d2e0b0..7c310bb8 100644
--- a/src/views/ne/neInfo/index.vue
+++ b/src/views/ne/neInfo/index.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { reactive, onMounted, toRaw, defineAsyncComponent, ref } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Modal } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { message, Modal } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import useI18n from '@/hooks/useI18n';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import useNeInfoStore from '@/store/modules/neinfo';
@@ -177,11 +177,11 @@ function fnTableSelectedRowKeys(keys: (string | number)[]) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**配置备份框是否显示 */
-  visibleByBackConf: boolean;
+  openByBackConf: boolean;
   /**OAM文件配置框是否显示 */
-  visibleByOAM: boolean;
+  openByOAM: boolean;
   /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**新增框或修改框ID */
   editId: string;
   /**OAM框网元类型ID */
@@ -193,9 +193,9 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByBackConf: false,
-  visibleByOAM: false,
-  visibleByEdit: false,
+  openByBackConf: false,
+  openByOAM: false,
+  openByEdit: false,
   editId: '',
   neId: '',
   neType: '',
@@ -212,7 +212,7 @@ function fnModalVisibleByEdit(row?: Record<string, any>) {
   } else {
     modalState.editId = row.id;
   }
-  modalState.visibleByEdit = !modalState.visibleByEdit;
+  modalState.openByEdit = !modalState.openByEdit;
 }
 
 /**
@@ -256,9 +256,9 @@ function fnModalEditOk(from: Record<string, any>) {
  */
 function fnModalEditCancel() {
   modalState.editId = '';
-  modalState.visibleByEdit = false;
-  modalState.visibleByOAM = false;
-  modalState.visibleByBackConf = false;
+  modalState.openByEdit = false;
+  modalState.openByOAM = false;
+  modalState.openByBackConf = false;
 }
 
 /**
@@ -334,7 +334,7 @@ function fnRecordMore(type: string | number, row: Record<string, any>) {
     case 'oam':
       modalState.neId = row.neId;
       modalState.neType = row.neType;
-      modalState.visibleByOAM = !modalState.visibleByOAM;
+      modalState.openByOAM = !modalState.openByOAM;
       break;
     case 'backConfExport':
       backConf.value.exportConf(row.neType, row.neId);
@@ -342,7 +342,7 @@ function fnRecordMore(type: string | number, row: Record<string, any>) {
     case 'backConfImport':
       modalState.neId = row.neId;
       modalState.neType = row.neType;
-      modalState.visibleByBackConf = !modalState.visibleByBackConf;
+      modalState.openByBackConf = !modalState.openByBackConf;
       break;
     default:
       console.warn(type);
@@ -655,7 +655,7 @@ onMounted(() => {
           </template>
         </template>
         <template #expandedRowRender="{ record }">
-          <a-row :gutter="16">
+          <a-row>
             <a-col :offset="2" :lg="8" :md="8" :xs="8">
               <a-divider orientation="left">
                 {{ t('views.ne.neInfo.info') }}
@@ -753,7 +753,7 @@ onMounted(() => {
 
     <!-- 新增框或修改框 -->
     <EditModal
-      v-model:visible="modalState.visibleByEdit"
+      v-model:open="modalState.openByEdit"
       :edit-id="modalState.editId"
       @ok="fnModalEditOk"
       @cancel="fnModalEditCancel"
@@ -761,7 +761,7 @@ onMounted(() => {
 
     <!-- OAM编辑框 -->
     <OAMModal
-      v-model:visible="modalState.visibleByOAM"
+      v-model:open="modalState.openByOAM"
       :ne-id="modalState.neId"
       :ne-type="modalState.neType"
       @cancel="fnModalEditCancel"
@@ -770,7 +770,7 @@ onMounted(() => {
     <!-- 配置文件备份框 -->
     <BackConfModal
       ref="backConf"
-      v-model:visible="modalState.visibleByBackConf"
+      v-model:open="modalState.openByBackConf"
       :ne-id="modalState.neId"
       :ne-type="modalState.neType"
       @cancel="fnModalEditCancel"
diff --git a/src/views/ne/neLicense/components/EditModal.vue b/src/views/ne/neLicense/components/EditModal.vue
index 348a7a7d..c732c251 100644
--- a/src/views/ne/neLicense/components/EditModal.vue
+++ b/src/views/ne/neLicense/components/EditModal.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { reactive, onMounted, toRaw, watch } from 'vue';
-import { Form, Modal, Upload, message } from 'ant-design-vue/lib';
+import { ProModal } from 'antdv-pro-modal';
+import { Form, Modal, Upload, message } from 'ant-design-vue/es';
 import useI18n from '@/hooks/useI18n';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import {
@@ -8,16 +9,16 @@ import {
   getNeLicense,
   getNeLicenseByTypeAndID,
 } from '@/api/ne/neLicense';
-import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
-import { FileType } from 'ant-design-vue/lib/upload/interface';
+import { UploadRequestOption } from 'ant-design-vue/es/vc-upload/interface';
+import { FileType } from 'ant-design-vue/es/upload/interface';
 import { uploadFile } from '@/api/tool/file';
 import { useClipboard } from '@vueuse/core';
 import saveAs from 'file-saver';
 const { copy } = useClipboard({ legacy: true });
 const { t } = useI18n();
-const emit = defineEmits(['ok', 'cancel', 'update:visible']);
+const emit = defineEmits(['ok', 'cancel', 'update:open']);
 const props = defineProps({
-  visible: {
+  open: {
     type: Boolean,
     default: false,
   },
@@ -45,7 +46,7 @@ const props = defineProps({
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -66,7 +67,7 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByEdit: false,
+  openByEdit: false,
   title: '授权文件',
   from: {
     id: '',
@@ -136,12 +137,12 @@ function fnModalOk() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByEdit = false;
+  modalState.openByEdit = false;
   modalState.confirmLoading = false;
   modalStateFrom.resetFields();
   modalState.uploadFiles = [];
   emit('cancel');
-  emit('update:visible', false);
+  emit('update:open', false);
 }
 
 /**表单上传前检查或转换压缩 */
@@ -227,7 +228,7 @@ function fnModalVisibleById(id: string) {
         modalState.from.licensePath = '';
         modalState.from.reload = props.reload;
         modalState.title = t('views.ne.neLicense.updateTtile');
-        modalState.visibleByEdit = true;
+        modalState.openByEdit = true;
       } else {
         message.error(res.msg, 3);
       }
@@ -252,7 +253,7 @@ function fnModalVisibleByTypeAndId(neType: string, neId: string) {
         modalState.from.licensePath = '';
         modalState.from.reload = props.reload;
         modalState.title = t('views.ne.neLicense.updateTtile');
-        modalState.visibleByEdit = true;
+        modalState.openByEdit = true;
       } else {
         message.error(res.msg, 3);
       }
@@ -265,7 +266,7 @@ function fnModalVisibleByTypeAndId(neType: string, neId: string) {
 
 /**监听是否显示，初始数据 */
 watch(
-  () => props.visible,
+  () => props.open,
   val => {
     if (val) {
       if (props.editId) {
@@ -288,7 +289,7 @@ onMounted(() => {});
     :destroyOnClose="true"
     :keyboard="false"
     :mask-closable="false"
-    :visible="modalState.visibleByEdit"
+    :open="modalState.openByEdit"
     :title="modalState.title"
     :confirm-loading="modalState.confirmLoading"
     @ok="fnModalOk"
@@ -301,7 +302,7 @@ onMounted(() => {});
       :label-col="{ span: 6 }"
       :labelWrap="true"
     >
-      <a-row :gutter="16">
+      <a-row>
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label-col="{ span: 12 }"
diff --git a/src/views/ne/neLicense/components/UploadLicenseFile.vue b/src/views/ne/neLicense/components/UploadLicenseFile.vue
index 265efb80..5cf9f349 100644
--- a/src/views/ne/neLicense/components/UploadLicenseFile.vue
+++ b/src/views/ne/neLicense/components/UploadLicenseFile.vue
@@ -1,16 +1,17 @@
 <script setup lang="ts">
 import { reactive, onMounted, watch, PropType, h } from 'vue';
-import { message, notification, Upload } from 'ant-design-vue/lib';
-import useI18n from '@/hooks/useI18n';
+import { message, notification, Upload } from 'ant-design-vue/es';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
-import { FileType } from 'ant-design-vue/lib/upload/interface';
+import { UploadRequestOption } from 'ant-design-vue/es/vc-upload/interface';
+import { FileType } from 'ant-design-vue/es/upload/interface';
+import { ProModal } from 'antdv-pro-modal';
 import { uploadFile } from '@/api/tool/file';
 import { changeNeLicense } from '@/api/ne/neLicense';
+import useI18n from '@/hooks/useI18n';
 const { t } = useI18n();
-const emit = defineEmits(['ok', 'cancel', 'update:visible']);
+const emit = defineEmits(['ok', 'cancel', 'update:open']);
 const props = defineProps({
-  visible: {
+  open: {
     type: Boolean,
     default: false,
   },
@@ -24,7 +25,7 @@ const props = defineProps({
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**新增框或修改框是否显示 */
-  visibleByUploadFile: boolean;
+  openByUploadFile: boolean;
   /**标题 */
   title: string;
   /**授权文件路径 */
@@ -37,7 +38,7 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByUploadFile: false,
+  openByUploadFile: false,
   licensePath: '',
   uploadFiles: [],
   title: '授权文件',
@@ -117,12 +118,12 @@ async function fnModalOk() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByUploadFile = false;
+  modalState.openByUploadFile = false;
   modalState.confirmLoading = false;
   modalState.licensePath = '';
   modalState.uploadFiles = [];
   emit('cancel');
-  emit('update:visible', false);
+  emit('update:open', false);
 }
 
 /**表单上传前检查或转换压缩 */
@@ -172,11 +173,11 @@ function fnUploadFile(up: UploadRequestOption) {
 
 /**监听是否显示，初始数据 */
 watch(
-  () => props.visible,
+  () => props.open,
   val => {
     if (val) {
       modalState.title = t('views.ne.neLicense.updateTtile');
-      modalState.visibleByUploadFile = true;
+      modalState.openByUploadFile = true;
     }
   }
 );
@@ -190,7 +191,7 @@ onMounted(() => {});
     :destroyOnClose="true"
     :keyboard="false"
     :mask-closable="false"
-    :visible="modalState.visibleByUploadFile"
+    :open="modalState.openByUploadFile"
     :title="modalState.title"
     :confirm-loading="modalState.confirmLoading"
     :cancel-button-props="{ disabled: modalState.confirmLoading }"
diff --git a/src/views/ne/neLicense/index.vue b/src/views/ne/neLicense/index.vue
index a410aedd..db979361 100644
--- a/src/views/ne/neLicense/index.vue
+++ b/src/views/ne/neLicense/index.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw, defineAsyncComponent } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { Modal, TableColumnsType, message } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
+import { Modal, TableColumnsType, message } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
 import useNeInfoStore from '@/store/modules/neinfo';
 import useI18n from '@/hooks/useI18n';
 import useDictStore from '@/store/modules/dict';
@@ -208,7 +208,7 @@ function fnGetList(pageNum?: number) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**授权记录ID */
   licenseId: string;
   /**确定按钮 loading */
@@ -217,7 +217,7 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByEdit: false,
+  openByEdit: false,
   licenseId: '',
   confirmLoading: false,
 });
@@ -228,7 +228,7 @@ let modalState: ModalStateType = reactive({
  */
 function fnModalVisibleByEdit(licenseId: string) {
   modalState.licenseId = licenseId;
-  modalState.visibleByEdit = true;
+  modalState.openByEdit = true;
 }
 
 /**
@@ -245,7 +245,7 @@ function fnModalOk() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByEdit = false;
+  modalState.openByEdit = false;
   modalState.licenseId = '';
 }
 
@@ -528,7 +528,7 @@ onMounted(() => {
 
     <!-- 文件上传框 -->
     <EditModal
-      v-model:visible="modalState.visibleByEdit"
+      v-model:open="modalState.openByEdit"
       :edit-id="modalState.licenseId"
       @ok="fnModalOk"
       @cancel="fnModalCancel"
diff --git a/src/views/ne/neQuickSetup/components/NeInfoConfig.vue b/src/views/ne/neQuickSetup/components/NeInfoConfig.vue
index 5dd8a9c4..fbffcd39 100644
--- a/src/views/ne/neQuickSetup/components/NeInfoConfig.vue
+++ b/src/views/ne/neQuickSetup/components/NeInfoConfig.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Form, Modal, message } from 'ant-design-vue/lib';
+import { Form, Modal, message } from 'ant-design-vue/es';
 import { onMounted, reactive, toRaw } from 'vue';
 import { addNeInfo, getNeInfoByTypeAndID, updateNeInfo } from '@/api/ne/neInfo';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
@@ -344,7 +344,7 @@ onMounted(() => {
       :label-col="{ span: 6 }"
       :labelWrap="true"
     >
-      <a-row :gutter="16">
+      <a-row>
         <a-col :lg="6" :md="6" :xs="24" :offset="6">
           <a-form-item
             :label="t('views.ne.common.neType')"
@@ -368,7 +368,7 @@ onMounted(() => {
                     <template #title>
                       {{ t('views.ne.common.neTypeTip') }}
                     </template>
-                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                    <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
                   </a-tooltip>
                 </template>
               </a-input>
@@ -392,7 +392,7 @@ onMounted(() => {
                   <template #title>
                     {{ t('views.ne.common.neIdTip') }}
                   </template>
-                  <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
                 </a-tooltip>
               </template>
             </a-input>
@@ -400,7 +400,7 @@ onMounted(() => {
         </a-col>
       </a-row>
 
-      <a-row :gutter="16">
+      <a-row>
         <a-col :lg="6" :md="6" :xs="24" :offset="6">
           <a-form-item
             :label="t('views.ne.common.ipAddr')"
@@ -422,7 +422,7 @@ onMounted(() => {
                       {{ t('views.ne.common.ipAddrTip') }}
                     </div>
                   </template>
-                  <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
                 </a-tooltip>
               </template>
             </a-input>
@@ -447,7 +447,7 @@ onMounted(() => {
                   <template #title>
                     <div>{{ t('views.ne.common.portTip') }}</div>
                   </template>
-                  <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
                 </a-tooltip>
               </template>
             </a-input-number>
diff --git a/src/views/ne/neQuickSetup/components/NeInfoSoftwareInstall.vue b/src/views/ne/neQuickSetup/components/NeInfoSoftwareInstall.vue
index ec8da3a5..52cd89a8 100644
--- a/src/views/ne/neQuickSetup/components/NeInfoSoftwareInstall.vue
+++ b/src/views/ne/neQuickSetup/components/NeInfoSoftwareInstall.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Modal, message } from 'ant-design-vue/lib';
+import { Modal, message } from 'ant-design-vue/es';
 import { defineAsyncComponent, onMounted, reactive, toRaw } from 'vue';
 import { fnToStepName, stepState } from '../hooks/useStep';
 import useI18n from '@/hooks/useI18n';
@@ -10,7 +10,7 @@ import {
 } from '@/constants/result-constants';
 import { listNeSoftware, newNeVersion } from '@/api/ne/neSoftware';
 import { parseDateToStr } from '@/utils/date-utils';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { ColumnsType } from 'ant-design-vue/es/table';
 const { t } = useI18n();
 const EditModal = defineAsyncComponent(
   () => import('../../../ne/neSoftware/components/EditModal.vue')
@@ -152,7 +152,7 @@ type StateType = {
   /**文件操作类型 上传 or 选择 */
   optionType: 'upload' | 'option';
   /**文件上传 */
-  visibleByFile: boolean;
+  openByFile: boolean;
   /**网元拓展包列表类型 */
   depType: string[];
   /**软件包信息数据 */
@@ -172,7 +172,7 @@ type StateType = {
 let state: StateType = reactive({
   stepNext: false,
   optionType: 'option',
-  visibleByFile: false,
+  openByFile: false,
   depType: [],
   from: {
     id: undefined,
@@ -200,7 +200,7 @@ function fnOptionTypeChange() {
 
 /**对话框弹出 */
 function fnModalOpen() {
-  state.visibleByFile = !state.visibleByFile;
+  state.openByFile = !state.openByFile;
 }
 
 /**对话框弹出确认执行函数*/
@@ -210,7 +210,7 @@ function fnModalOk(e: any) {
 
 /**对话框弹出关闭执行函数*/
 function fnModalCancel() {
-  state.visibleByFile = false;
+  state.openByFile = false;
 }
 
 /**版本安装 */
@@ -382,7 +382,7 @@ onMounted(() => {
 
     <!-- 文件上传框 -->
     <EditModal
-      v-model:visible="state.visibleByFile"
+      v-model:open="state.openByFile"
       @ok="fnModalOk"
       @cancel="fnModalCancel"
     ></EditModal>
diff --git a/src/views/ne/neQuickSetup/components/NeInfoSoftwareLicense.vue b/src/views/ne/neQuickSetup/components/NeInfoSoftwareLicense.vue
index ae8f512c..b191a001 100644
--- a/src/views/ne/neQuickSetup/components/NeInfoSoftwareLicense.vue
+++ b/src/views/ne/neQuickSetup/components/NeInfoSoftwareLicense.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Modal } from 'ant-design-vue/lib';
+import { Modal } from 'ant-design-vue/es';
 import { defineAsyncComponent, onMounted, onUnmounted, reactive } from 'vue';
 import { fnRestStepState, stepState } from '../hooks/useStep';
 import useI18n from '@/hooks/useI18n';
@@ -13,7 +13,7 @@ const EditModal = defineAsyncComponent(
 /**对象信息信息状态类型 */
 type StateType = {
   /**文件上传 */
-  visibleByFile: boolean;
+  openByFile: boolean;
   /**授权信息数据 */
   from: {
     neType: string;
@@ -31,7 +31,7 @@ type StateType = {
 
 /**对象信息状态 */
 let state: StateType = reactive({
-  visibleByFile: false,
+  openByFile: false,
   from: {
     neType: '',
     neId: '',
@@ -72,7 +72,7 @@ function fnModalOk(e: any) {
 
 /**对话框弹出关闭执行函数*/
 function fnModalCancel() {
-  state.visibleByFile = false;
+  state.openByFile = false;
   state.confirmLoading = false;
 }
 
@@ -131,7 +131,7 @@ onUnmounted(() => {
         type="primary"
         :disabled="state.from.sn !== ''"
         :loading="state.timeCount < 30 || state.confirmLoading"
-        @click="() => (state.visibleByFile = !state.visibleByFile)"
+        @click="() => (state.openByFile = !state.openByFile)"
       >
         {{ t('views.ne.neQuickSetup.licenseUpload') }}
       </a-button>
@@ -168,7 +168,7 @@ onUnmounted(() => {
 
   <!-- 许可证上传框 -->
   <EditModal
-    v-model:visible="state.visibleByFile"
+    v-model:open="state.openByFile"
     :ne-type="state.from.neType"
     :ne-id="state.from.neId"
     :reload="true"
diff --git a/src/views/ne/neQuickSetup/components/Para5GForm.vue b/src/views/ne/neQuickSetup/components/Para5GForm.vue
index 1eb266f1..677bebdf 100644
--- a/src/views/ne/neQuickSetup/components/Para5GForm.vue
+++ b/src/views/ne/neQuickSetup/components/Para5GForm.vue
@@ -91,10 +91,10 @@ watch(
     :label-col="{ span: 8 }"
     :label-wrap="true"
   >
-    <a-row :gutter="16">
+    <a-row>
       <a-col :lg="16" :md="16" :xs="24">
         <a-divider orientation="left">Basic</a-divider>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item label="DNN_DATA" name="basic.dnn_data">
               <a-input
@@ -106,7 +106,7 @@ watch(
                 <template #prefix>
                   <a-tooltip placement="topLeft">
                     <template #title> DNN </template>
-                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                    <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
                   </a-tooltip>
                 </template>
               </a-input>
@@ -128,7 +128,7 @@ watch(
                 <template #prefix>
                   <a-tooltip placement="topLeft">
                     <template #title> 1-3 </template>
-                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                    <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
                   </a-tooltip>
                 </template>
               </a-input-number>
@@ -168,7 +168,7 @@ watch(
 
       <a-col :lg="8" :md="8" :xs="24">
         <a-divider orientation="left">OMC</a-divider>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="24" :md="24" :xs="24">
             <a-form-item
               label="OMC_IP"
@@ -188,7 +188,7 @@ watch(
                     <template #title>
                       Network Elemment send data tu EMS IP
                     </template>
-                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                    <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
                   </a-tooltip>
                 </template>
               </a-input>
@@ -197,7 +197,7 @@ watch(
         </a-row>
         <template v-if="props.ne.amf">
           <a-divider orientation="left">AMF</a-divider>
-          <a-row :gutter="16">
+          <a-row>
             <a-col :lg="24" :md="24" :xs="24">
               <a-form-item label="N2_IP" name="external.amfn2_ip">
                 <a-input
@@ -209,7 +209,7 @@ watch(
                   <template #prefix>
                     <a-tooltip placement="topLeft">
                       <template #title> AMF N2 </template>
-                      <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                      <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
                     </a-tooltip>
                   </template>
                 </a-input>
@@ -221,7 +221,7 @@ watch(
 
       <a-col :lg="16" :md="16" :xs="24" v-if="props.ne.upf">
         <a-divider orientation="left">UPF</a-divider>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               label="UPF_TYPE"
@@ -250,7 +250,7 @@ watch(
                 <template #prefix>
                   <a-tooltip placement="topLeft">
                     <template #title> UE IP and maxk </template>
-                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                    <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
                   </a-tooltip>
                 </template>
               </a-input>
@@ -258,7 +258,7 @@ watch(
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item label="N3_IP" name="external.upfn3_ip">
               <a-input
@@ -270,7 +270,7 @@ watch(
                 <template #prefix>
                   <a-tooltip placement="topLeft">
                     <template #title> netwrok ip </template>
-                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                    <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
                   </a-tooltip>
                 </template>
               </a-input>
@@ -285,7 +285,7 @@ watch(
                 <template #prefix>
                   <a-tooltip placement="topLeft">
                     <template #title> geteway </template>
-                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                    <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
                   </a-tooltip>
                 </template>
               </a-input>
@@ -309,7 +309,7 @@ watch(
                     <template #title>
                       use `ip a` show info, to inet ip
                     </template>
-                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                    <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
                   </a-tooltip>
                 </template>
               </a-input>
@@ -326,7 +326,7 @@ watch(
                     <template #title>
                       use `ip a` show info, to inet ip
                     </template>
-                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                    <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
                   </a-tooltip>
                 </template>
               </a-input>
@@ -334,7 +334,7 @@ watch(
           </a-col>
         </a-row>
         <template v-if="fromState.external.upf_type === 'StandardUPF'">
-          <a-row :gutter="16">
+          <a-row>
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item label="N6_IP" name="external.upfn6_ip">
                 <a-input
@@ -382,7 +382,7 @@ watch(
       <a-col :lg="8" :md="8" :xs="24">
         <template v-if="props.ne.ims">
           <a-divider orientation="left">IMS</a-divider>
-          <a-row :gutter="16">
+          <a-row>
             <a-col :lg="24" :md="24" :xs="24">
               <a-form-item label="SIP_IP" name="external.ims_sip_ip">
                 <a-input
@@ -394,7 +394,7 @@ watch(
                   <template #prefix>
                     <a-tooltip placement="topLeft">
                       <template #title> IMS SIP </template>
-                      <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                      <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
                     </a-tooltip>
                   </template>
                 </a-input>
@@ -405,7 +405,7 @@ watch(
 
         <template v-if="props.ne.mme">
           <a-divider orientation="left">MME</a-divider>
-          <a-row :gutter="16">
+          <a-row>
             <a-col :lg="24" :md="24" :xs="24">
               <a-form-item label="S1_IP" name="external.mmes1_ip">
                 <a-input
@@ -421,7 +421,7 @@ watch(
                         (S1AP), can be ethernet interface, virtual ethernet
                         interface, we don't advise wireless interfaces
                       </template>
-                      <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                      <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
                     </a-tooltip>
                   </template>
                 </a-input>
@@ -436,7 +436,7 @@ watch(
                   <template #prefix>
                     <a-tooltip placement="topLeft">
                       <template #title> Interface </template>
-                      <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                      <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
                     </a-tooltip>
                   </template>
                 </a-input>
@@ -453,7 +453,7 @@ watch(
                       <template #title>
                         MME binded interface for S11-U communication (GTPV1-U)
                       </template>
-                      <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                      <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
                     </a-tooltip>
                   </template>
                 </a-input>
diff --git a/src/views/ne/neQuickSetup/components/Start.vue b/src/views/ne/neQuickSetup/components/Start.vue
index 15df7a53..d780689f 100644
--- a/src/views/ne/neQuickSetup/components/Start.vue
+++ b/src/views/ne/neQuickSetup/components/Start.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { reactive, onMounted, toRaw } from 'vue';
-import { message, Form, Modal } from 'ant-design-vue/lib';
+import { message, Form, Modal } from 'ant-design-vue/es';
 import useI18n from '@/hooks/useI18n';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { regExpIPv4, regExpIPv6 } from '@/utils/regular-utils';
@@ -286,7 +286,7 @@ onMounted(() => {
             <template #title>
               {{ t('views.ne.neQuickSetup.prettyNameTip') }}
             </template>
-            <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+            <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
           </a-tooltip>
         </template>
         {{ state.info.prettyName }}
@@ -320,7 +320,7 @@ onMounted(() => {
       :label-wrap="true"
       style="margin-top: 20px; width: 68%"
     >
-      <a-row :gutter="8">
+      <a-row>
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label="t('views.ne.neHost.addr')"
@@ -354,7 +354,7 @@ onMounted(() => {
         </a-col>
       </a-row>
 
-      <a-row :gutter="16">
+      <a-row>
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label="t('views.ne.neHost.user')"
diff --git a/src/views/ne/neSoftware/components/EditModal.vue b/src/views/ne/neSoftware/components/EditModal.vue
index e00e2b70..b7439d8f 100644
--- a/src/views/ne/neSoftware/components/EditModal.vue
+++ b/src/views/ne/neSoftware/components/EditModal.vue
@@ -1,21 +1,22 @@
 <script setup lang="ts">
 import { reactive, onMounted, toRaw, watch } from 'vue';
-import { message, Form, Upload, notification } from 'ant-design-vue/lib';
-import useI18n from '@/hooks/useI18n';
+import { ProModal } from 'antdv-pro-modal';
+import { message, Form, Upload, notification } from 'ant-design-vue/es';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { NE_EXPAND_LIST, NE_TYPE_LIST } from '@/constants/ne-constants';
-import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
+import { UploadRequestOption } from 'ant-design-vue/es/vc-upload/interface';
 import {
   addNeSoftware,
   getNeSoftware,
   updateNeSoftware,
 } from '@/api/ne/neSoftware';
-import { FileType } from 'ant-design-vue/lib/upload/interface';
+import { FileType } from 'ant-design-vue/es/upload/interface';
 import { uploadFileChunk } from '@/api/tool/file';
+import useI18n from '@/hooks/useI18n';
 const { t } = useI18n();
-const emit = defineEmits(['ok', 'cancel', 'update:visible']);
+const emit = defineEmits(['ok', 'cancel', 'update:open']);
 const props = defineProps({
-  visible: {
+  open: {
     type: Boolean,
     default: false,
   },
@@ -28,7 +29,7 @@ const props = defineProps({
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -50,7 +51,7 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByEdit: false,
+  openByEdit: false,
   title: '软件包文件',
   from: {
     id: '',
@@ -149,13 +150,13 @@ function fnModalOk() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByEdit = false;
+  modalState.openByEdit = false;
   modalState.confirmLoading = false;
   modalStateFrom.resetFields();
   modalState.uploadFiles = [];
   modalState.uploadFilesDep = [];
   emit('cancel');
-  emit('update:visible', false);
+  emit('update:open', false);
 }
 
 /**表单上传前检查或转换压缩 */
@@ -316,7 +317,7 @@ function fnModalVisibleByEdit(id?: string) {
         if (res.code === RESULT_CODE_SUCCESS) {
           Object.assign(modalState.from, res.data);
           modalState.title = t('views.ne.neSoftware.uploadTitle');
-          modalState.visibleByEdit = true;
+          modalState.openByEdit = true;
         } else {
           message.error(res.msg, 3);
         }
@@ -329,12 +330,12 @@ function fnModalVisibleByEdit(id?: string) {
     return;
   }
   modalState.title = t('views.ne.neSoftware.uploadTitle');
-  modalState.visibleByEdit = true;
+  modalState.openByEdit = true;
 }
 
 /**监听是否显示，初始数据 */
 watch(
-  () => props.visible,
+  () => props.open,
   val => {
     if (val) fnModalVisibleByEdit(props.editId);
   }
@@ -350,7 +351,7 @@ onMounted(() => {});
     :destroyOnClose="true"
     :keyboard="false"
     :mask-closable="false"
-    :visible="modalState.visibleByEdit"
+    :open="modalState.openByEdit"
     :title="modalState.title"
     :confirm-loading="modalState.confirmLoading"
     @ok="fnModalOk"
diff --git a/src/views/ne/neSoftware/components/UploadMoreFile.vue b/src/views/ne/neSoftware/components/UploadMoreFile.vue
index d91a59c7..ac55d5c8 100644
--- a/src/views/ne/neSoftware/components/UploadMoreFile.vue
+++ b/src/views/ne/neSoftware/components/UploadMoreFile.vue
@@ -1,17 +1,18 @@
 <script setup lang="ts">
 import { reactive, onMounted, toRaw, watch } from 'vue';
-import { message, Upload, notification } from 'ant-design-vue/lib';
-import type { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
-import type { FileType, UploadFile } from 'ant-design-vue/lib/upload/interface';
+import { ProModal } from 'antdv-pro-modal';
+import { message, Upload, notification } from 'ant-design-vue/es';
+import type { UploadRequestOption } from 'ant-design-vue/es/vc-upload/interface';
+import type { FileType, UploadFile } from 'ant-design-vue/es/upload/interface';
 import useI18n from '@/hooks/useI18n';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { NE_TYPE_LIST, NE_EXPAND_LIST } from '@/constants/ne-constants';
 import { addNeSoftware } from '@/api/ne/neSoftware';
 import { uploadFileChunk } from '@/api/tool/file';
 const { t } = useI18n();
-const emit = defineEmits(['ok', 'cancel', 'update:visible']);
+const emit = defineEmits(['ok', 'cancel', 'update:open']);
 const props = defineProps({
-  visible: {
+  open: {
     type: Boolean,
     default: false,
   },
@@ -27,7 +28,7 @@ const NE_TYPE_EXP = NE_EXPAND_LIST.concat(NE_TYPE_LIST);
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**新增框或修改框是否显示 */
-  visibleByMoreFile: boolean;
+  openByMoreFile: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -48,7 +49,7 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByMoreFile: false,
+  openByMoreFile: false,
   title: '软件包文件',
   from: [],
   confirmLoading: false,
@@ -154,13 +155,13 @@ async function fnModalOk() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByMoreFile = false;
+  modalState.openByMoreFile = false;
   modalState.confirmLoading = false;
   modalState.from = [];
   modalState.uploadFiles = [];
   modalState.uploadFilesDep = [];
   emit('cancel');
-  emit('update:visible', false);
+  emit('update:open', false);
 }
 
 /**表单上传前检查或转换压缩 */
@@ -354,11 +355,11 @@ function fnUploadFileDep(up: UploadRequestOption) {
 
 /**监听是否显示，初始数据 */
 watch(
-  () => props.visible,
+  () => props.open,
   val => {
     if (val) {
       modalState.title = t('views.ne.neSoftware.uploadTitle');
-      modalState.visibleByMoreFile = true;
+      modalState.openByMoreFile = true;
     }
   }
 );
@@ -372,7 +373,7 @@ onMounted(() => {});
     :width="800"
     :keyboard="false"
     :mask-closable="false"
-    :visible="modalState.visibleByMoreFile"
+    :open="modalState.openByMoreFile"
     :title="modalState.title"
     :confirm-loading="modalState.confirmLoading"
     @ok="fnModalOk"
diff --git a/src/views/ne/neSoftware/index.vue b/src/views/ne/neSoftware/index.vue
index 361e955a..f919222e 100644
--- a/src/views/ne/neSoftware/index.vue
+++ b/src/views/ne/neSoftware/index.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw, defineAsyncComponent } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { Modal, TableColumnsType, message } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
+import { Modal, TableColumnsType, message } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
 import useNeInfoStore from '@/store/modules/neinfo';
 import useI18n from '@/hooks/useI18n';
 import { NE_TYPE_LIST } from '@/constants/ne-constants';
@@ -213,20 +213,20 @@ function fnGetList(pageNum?: number) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**新增框或修改框ID */
   editId: string;
   /**多文件上传 */
-  visibleByMoreFile: boolean;
+  openByMoreFile: boolean;
   /**确定按钮 loading */
   confirmLoading: boolean;
 };
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByEdit: false,
+  openByEdit: false,
   editId: '',
-  visibleByMoreFile: false,
+  openByMoreFile: false,
   confirmLoading: false,
 });
 
@@ -240,7 +240,7 @@ function fnModalVisibleByEdit(id?: string) {
   } else {
     modalState.editId = id;
   }
-  modalState.visibleByEdit = !modalState.visibleByEdit;
+  modalState.openByEdit = !modalState.openByEdit;
 }
 
 /**
@@ -257,8 +257,8 @@ function fnModalEditOk() {
  */
 function fnModalEditCancel() {
   modalState.editId = '';
-  modalState.visibleByEdit = false;
-  modalState.visibleByMoreFile = false;
+  modalState.openByEdit = false;
+  modalState.openByMoreFile = false;
 }
 
 /**删除软件包 */
@@ -429,8 +429,7 @@ onMounted(() => {
             type="primary"
             :disabled="tableState.selectedRowKeys.length > 1"
             @click.prevent="
-              () =>
-                (modalState.visibleByMoreFile = !modalState.visibleByMoreFile)
+              () => (modalState.openByMoreFile = !modalState.openByMoreFile)
             "
           >
             <template #icon><UploadOutlined /></template>
@@ -576,7 +575,7 @@ onMounted(() => {
 
     <!-- 新增框或修改框 -->
     <EditModal
-      v-model:visible="modalState.visibleByEdit"
+      v-model:open="modalState.openByEdit"
       :edit-id="modalState.editId"
       @ok="fnModalEditOk"
       @cancel="fnModalEditCancel"
@@ -584,7 +583,7 @@ onMounted(() => {
 
     <!-- 新增多文件上传框 -->
     <UploadMoreFile
-      v-model:visible="modalState.visibleByMoreFile"
+      v-model:open="modalState.openByMoreFile"
       :ne-type="tableState.selectedRowOne.neType"
       @ok="fnModalEditOk"
       @cancel="fnModalEditCancel"
diff --git a/src/views/ne/neVersion/index.vue b/src/views/ne/neVersion/index.vue
index 4bebcd6c..abe7fe3f 100644
--- a/src/views/ne/neVersion/index.vue
+++ b/src/views/ne/neVersion/index.vue
@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw, defineAsyncComponent } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
+import { ProModal } from 'antdv-pro-modal';
 import {
   Modal,
   TableColumnsType,
   message,
   notification,
-} from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
+} from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
 import useNeInfoStore from '@/store/modules/neinfo';
 import { NE_TYPE_LIST } from '@/constants/ne-constants';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
@@ -239,11 +240,11 @@ function fnGetList(pageNum?: number) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**单文件上传 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**多文件上传 */
-  visibleByMoreFile: boolean;
+  openByMoreFile: boolean;
   /**勾选升级情况 */
-  visibleByUpgrade: boolean;
+  openByUpgrade: boolean;
   /**操作数据进行版本升级 */
   operateDataUpgrade: any[];
   /**确定按钮 loading */
@@ -252,9 +253,9 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByEdit: false,
-  visibleByMoreFile: false,
-  visibleByUpgrade: false,
+  openByEdit: false,
+  openByMoreFile: false,
+  openByUpgrade: false,
   operateDataUpgrade: [],
   confirmLoading: false,
 });
@@ -265,7 +266,7 @@ let modalState: ModalStateType = reactive({
  */
 function fnModalEditOk() {
   fnGetList(1);
-  if (modalState.visibleByUpgrade) {
+  if (modalState.openByUpgrade) {
     fnModalEditCancel();
   }
 }
@@ -275,9 +276,9 @@ function fnModalEditOk() {
  * 进行表达规则校验
  */
 function fnModalEditCancel() {
-  modalState.visibleByEdit = false;
-  modalState.visibleByMoreFile = false;
-  modalState.visibleByUpgrade = false;
+  modalState.openByEdit = false;
+  modalState.openByMoreFile = false;
+  modalState.openByUpgrade = false;
   modalState.operateDataUpgrade = [];
 }
 
@@ -370,7 +371,7 @@ function fnRecordUpgradeConfirm() {
 async function fnRecordUpgrade() {
   if (modalState.confirmLoading) return;
   modalState.confirmLoading = true;
-  modalState.visibleByUpgrade = true;
+  modalState.openByUpgrade = true;
   // 操作升级的网元数据
   const selectRows = tableState.data.filter(item =>
     tableState.selectedRowKeys.includes(item.id)
@@ -511,7 +512,7 @@ onMounted(() => {
           <a-button
             type="primary"
             @click.prevent="
-              () => (modalState.visibleByEdit = !modalState.visibleByEdit)
+              () => (modalState.openByEdit = !modalState.openByEdit)
             "
           >
             <template #icon><UploadOutlined /></template>
@@ -522,7 +523,7 @@ onMounted(() => {
             :disabled="tableState.selectedRowKeys.length > 1"
             @click.prevent="
               () =>
-                (modalState.visibleByMoreFile = !modalState.visibleByMoreFile)
+                (modalState.openByMoreFile = !modalState.openByMoreFile)
             "
           >
             <template #icon><UploadOutlined /></template>
@@ -646,14 +647,14 @@ onMounted(() => {
 
     <!-- 新增单文件上传 -->
     <EditModal
-      v-model:visible="modalState.visibleByEdit"
+      v-model:open="modalState.openByEdit"
       @ok="fnModalEditOk"
       @cancel="fnModalEditCancel"
     ></EditModal>
 
     <!-- 新增多文件上传框 -->
     <UploadMoreFile
-      v-model:visible="modalState.visibleByMoreFile"
+      v-model:open="modalState.openByMoreFile"
       :ne-type="tableState.selectedRowOne.neType"
       @ok="fnModalEditOk"
       @cancel="fnModalEditCancel"
@@ -667,7 +668,7 @@ onMounted(() => {
       :body-style="{ height: '520px', overflowY: 'scroll' }"
       :keyboard="false"
       :mask-closable="false"
-      :visible="modalState.visibleByUpgrade"
+      :open="modalState.openByUpgrade"
       :title="t('views.ne.neVersion.upgradeModal')"
       :closable="false"
       @ok="fnModalEditOk"
diff --git a/src/views/neUser/base5G/index.vue b/src/views/neUser/base5G/index.vue
index c657a151..a27e8f69 100644
--- a/src/views/neUser/base5G/index.vue
+++ b/src/views/neUser/base5G/index.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { TableColumnsType, message } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
+import { TableColumnsType, message } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
 import { listBase5G } from '@/api/neUser/base5G';
 import useI18n from '@/hooks/useI18n';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
diff --git a/src/views/neUser/ims/index.vue b/src/views/neUser/ims/index.vue
index e36c0316..72643c0d 100644
--- a/src/views/neUser/ims/index.vue
+++ b/src/views/neUser/ims/index.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { message } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import { listUEInfoByIMS } from '@/api/neUser/ims';
 import useNeInfoStore from '@/store/modules/neinfo';
 import useI18n from '@/hooks/useI18n';
diff --git a/src/views/neUser/n3iwf/index.vue b/src/views/neUser/n3iwf/index.vue
index b70eb8f4..f6e967b4 100644
--- a/src/views/neUser/n3iwf/index.vue
+++ b/src/views/neUser/n3iwf/index.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { message } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import { listN3iwf } from '@/api/neUser/n3iwf';
 import useNeInfoStore from '@/store/modules/neinfo';
 import useI18n from '@/hooks/useI18n';
diff --git a/src/views/neUser/nssf/index.vue b/src/views/neUser/nssf/index.vue
index b85da043..f2922252 100644
--- a/src/views/neUser/nssf/index.vue
+++ b/src/views/neUser/nssf/index.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { message } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import { listNSSF } from '@/api/neUser/nssf';
 import useNeInfoStore from '@/store/modules/neinfo';
 import useI18n from '@/hooks/useI18n';
diff --git a/src/views/neUser/nssfAmf/index.vue b/src/views/neUser/nssfAmf/index.vue
index f21e0850..9a32d73d 100644
--- a/src/views/neUser/nssfAmf/index.vue
+++ b/src/views/neUser/nssfAmf/index.vue
@@ -1,19 +1,14 @@
 <script setup lang="ts">
-import { reactive, ref, onMounted, toRaw } from 'vue';
+import { reactive, onMounted } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import { listNSSFAMF } from '@/api/neUser/nssfAmf';
-import useNeInfoStore from '@/store/modules/neinfo';
 import useI18n from '@/hooks/useI18n';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 const { t } = useI18n();
 
-/**网元参数 */
-let neOtions = ref<Record<string, any>[]>([]);
-
 /**表格状态类型 */
 type TabeStateType = {
   /**加载等待 */
diff --git a/src/views/neUser/ue/index.vue b/src/views/neUser/ue/index.vue
index 08dc9729..29633e49 100644
--- a/src/views/neUser/ue/index.vue
+++ b/src/views/neUser/ue/index.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { ProModal } from 'antdv-pro-modal';
+import { message } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import { listSMFSubscribers } from '@/api/neData/smf';
 import useNeInfoStore from '@/store/modules/neinfo';
 import useI18n from '@/hooks/useI18n';
@@ -160,9 +161,9 @@ function fnTableSize({ key }: MenuInfo) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**详情框是否显示 */
-  visibleByView: boolean;
+  openByView: boolean;
   /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -173,8 +174,8 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByView: false,
-  visibleByEdit: false,
+  openByView: false,
+  openByEdit: false,
   title: '在线信息',
   from: {
     imsi: '',
@@ -204,7 +205,7 @@ function fnModalVisibleByVive(row: Record<string, any>) {
   }
   modalState.from = Object.assign(modalState.from, row);
   modalState.title = `${row.imsi}`;
-  modalState.visibleByView = true;
+  modalState.openByView = true;
 }
 
 /**
@@ -212,8 +213,8 @@ function fnModalVisibleByVive(row: Record<string, any>) {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByEdit = false;
-  modalState.visibleByView = false;
+  modalState.openByEdit = false;
+  modalState.openByView = false;
 }
 
 /**查询列表, pageNum初始页数 */
@@ -404,13 +405,13 @@ onMounted(() => {
     <ProModal
       :drag="true"
       :width="800"
-      :visible="modalState.visibleByView"
+      :open="modalState.openByView"
       :title="modalState.title"
       @cancel="fnModalCancel"
       :footer="false"
     >
       <a-form layout="horizontal" labelAlign="left" :labelWrap="false">
-        <a-row :gutter="8">
+        <a-row>
           <a-col :lg="8" :md="8" :xs="24">
             <a-form-item label="IMSI" name="imsi">
               {{ modalState.from.imsi }}
diff --git a/src/views/perfManage/customTarget/index.vue b/src/views/perfManage/customTarget/index.vue
index f407a8ed..e9daa452 100644
--- a/src/views/perfManage/customTarget/index.vue
+++ b/src/views/perfManage/customTarget/index.vue
@@ -1,18 +1,17 @@
 <script setup lang="ts">
 import { reactive, onMounted, ref, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { Form, message, Modal } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { ProModal } from 'antdv-pro-modal';
+import { Form, message, Modal } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import useI18n from '@/hooks/useI18n';
 import useNeInfoStore from '@/store/modules/neinfo';
-import { parseObjLineToHump } from '@/utils/parse-utils';
 import {
   addCustom,
   delCustom,
-  getCustom,
   listCustom,
   updateCustom,
 } from '@/api/perfManage/customTarget';
@@ -208,9 +207,9 @@ function fnGetList(pageNum?: number) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**详情框是否显示 */
-  visibleByView: boolean;
+  openByView: boolean;
   /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**标题 */
   title: string;
   /**网元类型设备对象 */
@@ -227,8 +226,8 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByView: false,
-  visibleByEdit: false,
+  openByView: false,
+  openByEdit: false,
   title: '',
   neType: [],
   neTypPerformance: [],
@@ -340,13 +339,13 @@ function fnModalVisibleByEdit(row?: any, id?: any) {
   if (!id) {
     modalStateFrom.resetFields();
     modalState.title = t('views.perfManage.customTarget.addCustom');
-    modalState.visibleByEdit = true;
+    modalState.openByEdit = true;
     fnSelectPerformanceInit(modalState.from.neType);
   } else {
     fnSelectPerformanceInit(row.neType);
     modalState.from = Object.assign(modalState.from, row);
     modalState.title = t('views.perfManage.customTarget.editCustom');
-    modalState.visibleByEdit = true;
+    modalState.openByEdit = true;
   }
 }
 
@@ -395,7 +394,7 @@ function fnModalOk() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByEdit = false;
+  modalState.openByEdit = false;
   modalState.confirmLoading = false;
   modalStateFrom.resetFields();
   modalState.neType = [];
@@ -465,10 +464,7 @@ onMounted(() => {
       <a-form :model="queryParams" name="queryParams" layout="horizontal">
         <a-row :gutter="16">
           <a-col :lg="6" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.ne.common.neType')"
-              name="neType "
-            >
+            <a-form-item :label="t('views.ne.common.neType')" name="neType ">
               <a-auto-complete
                 v-model:value="queryParams.neType"
                 :options="neCascaderOptions"
@@ -609,7 +605,7 @@ onMounted(() => {
       :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
-      :visible="modalState.visibleByEdit"
+      v-model:open="modalState.openByEdit"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnModalOk"
@@ -621,7 +617,7 @@ onMounted(() => {
         :label-col="{ span: 6 }"
         :label-wrap="true"
       >
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.ne.common.neType')"
@@ -640,7 +636,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.perfManage.customTarget.title')"
@@ -685,7 +681,7 @@ onMounted(() => {
           </a-input>
         </a-form-item>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               name="perSelect"
@@ -712,7 +708,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.perfManage.customTarget.unit')"
diff --git a/src/views/perfManage/goldTarget/index.vue b/src/views/perfManage/goldTarget/index.vue
index d4aadbe5..cf5d7b6e 100644
--- a/src/views/perfManage/goldTarget/index.vue
+++ b/src/views/perfManage/goldTarget/index.vue
@@ -24,10 +24,9 @@ import {
   onBeforeUnmount,
 } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Modal } from 'ant-design-vue/lib';
-import { ColumnsType } from 'ant-design-vue/lib/table';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
+import { message, Modal } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
 import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
 import {
   RESULT_CODE_ERROR,
@@ -78,10 +77,10 @@ let neCascaderOptions = ref<Record<string, any>[]>([]);
 let queryRangePicker = ref<[string, string]>(['', '']);
 
 /**表格字段列 */
-let tableColumns = ref<ColumnsType>([]);
+let tableColumns = ref<any[]>([]);
 
 /**表格字段列排序 */
-let tableColumnsDnd = ref<ColumnsType>([]);
+let tableColumnsDnd = ref<any[]>([]);
 
 /**表格分页器参数 */
 let tablePagination = reactive({
@@ -251,14 +250,18 @@ function fnGetListTitle() {
 
   // 获取表头文字
   getKPITitle(state.neType[0])
-    .then(res => {//处理getKPITitle返回的结果
-      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {//检查值
-        tableColumns.value = [];//设为空数组
-        const columns: ColumnsType = [];//初始化，构建新表头
-        for (const item of res.data) {//遍历res.data
-          const kpiDisplay = item[`${language}Title`];//提取标题kpiDisplay和ID标识kpiValue
+    .then(res => {
+      //处理getKPITitle返回的结果
+      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+        //检查值
+        tableColumns.value = []; //设为空数组
+        const columns: any[] = []; //初始化，构建新表头
+        for (const item of res.data) {
+          //遍历res.data
+          const kpiDisplay = item[`${language}Title`]; //提取标题kpiDisplay和ID标识kpiValue
           const kpiValue = item[`kpiId`];
-          columns.push({//
+          columns.push({
+            //
             title: kpiDisplay,
             dataIndex: kpiValue,
             align: 'left',
@@ -297,7 +300,8 @@ function fnGetListTitle() {
         return false;
       }
     })
-    .then(result => {//result是前一个.then返回的值(true or false)
+    .then(result => {
+      //result是前一个.then返回的值(true or false)
       result && fnGetList();
     });
 }
@@ -334,27 +338,31 @@ function fnChangShowType() {
 
 /**绘制图表 */
 function fnRanderChart() {
-  const container: HTMLElement | undefined = kpiChartDom.value;//获取图表容器DOM元素
-  if (!container) return;//若没有，则退出函数
+  const container: HTMLElement | undefined = kpiChartDom.value; //获取图表容器DOM元素
+  if (!container) return; //若没有，则退出函数
   kpiChart.value = markRaw(echarts.init(container, 'light'));
-//初始化Echarts图表实例，应用light主题，并赋值给kpiChart.value，markRaw是vue函数，用于标记对象为不可响应
-  const option: EChartsOption = {//定义图表的配置对象，tooltip的出发方式为axis
+  //初始化Echarts图表实例，应用light主题，并赋值给kpiChart.value，markRaw是vue函数，用于标记对象为不可响应
+  const option: EChartsOption = {
+    //定义图表的配置对象，tooltip的出发方式为axis
     tooltip: {
       trigger: 'axis',
       position: function (pt: any) {
         return [pt[0], '10%'];
       },
     },
-    xAxis: {//x类别轴
+    xAxis: {
+      //x类别轴
       type: 'category',
       boundaryGap: false,
       data: [], // 数据x轴
     },
-    yAxis: {//y类别轴
+    yAxis: {
+      //y类别轴
       type: 'value',
       boundaryGap: [0, '100%'],
     },
-    legend: {//图例垂直滚动
+    legend: {
+      //图例垂直滚动
       type: 'scroll',
       orient: 'vertical',
       top: 40,
@@ -367,13 +375,15 @@ function fnRanderChart() {
       icon: 'circle',
       selected: {},
     },
-    grid: {//网格区域边距
+    grid: {
+      //网格区域边距
       left: '10%',
       right: '30%',
       bottom: '20%',
     },
     dataZoom: [
-      {//启用图表的数据缩放，范围90%-100%
+      {
+        //启用图表的数据缩放，范围90%-100%
         type: 'inside',
         start: 90,
         end: 100,
@@ -385,7 +395,7 @@ function fnRanderChart() {
     ],
     series: [], // 数据y轴
   };
-  kpiChart.value.setOption(option);//设置图表配置项，应用到kpiChart实例上
+  kpiChart.value.setOption(option); //设置图表配置项，应用到kpiChart实例上
 
   // 创建 ResizeObserver 实例 监听图表容器大小变化，并在变化时调整图表大小
   var observer = new ResizeObserver(entries => {
@@ -648,10 +658,7 @@ onBeforeUnmount(() => {
       <a-form :model="queryParams" name="queryParamsFrom" layout="horizontal">
         <a-row :gutter="16">
           <a-col :lg="6" :md="12" :xs="24">
-            <a-form-item
-              name="neType"
-              :label="t('views.ne.common.neType')"
-            >
+            <a-form-item name="neType" :label="t('views.ne.common.neType')">
               <a-cascader
                 v-model:value="state.neType"
                 :options="neCascaderOptions"
diff --git a/src/views/perfManage/kpiCReport/index.vue b/src/views/perfManage/kpiCReport/index.vue
index ed147d0f..b19f4996 100644
--- a/src/views/perfManage/kpiCReport/index.vue
+++ b/src/views/perfManage/kpiCReport/index.vue
@@ -24,10 +24,9 @@ import {
   onBeforeUnmount,
 } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Modal } from 'ant-design-vue/lib';
-import { ColumnsType } from 'ant-design-vue/lib/table';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
+import { message, Modal } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
 import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
 import {
   RESULT_CODE_ERROR,
@@ -79,10 +78,10 @@ let neCascaderOptions = ref<Record<string, any>[]>([]);
 let queryRangePicker = ref<[string, string]>(['', '']);
 
 /**表格字段列 */
-let tableColumns = ref<ColumnsType>([]);
+let tableColumns = ref<any[]>([]);
 
 /**表格字段列排序 */
-let tableColumnsDnd = ref<ColumnsType>([]);
+let tableColumnsDnd = ref<any[]>([]);
 
 /**表格分页器参数 */
 let tablePagination = reactive({
@@ -264,7 +263,7 @@ function fnGetListTitle() {
          return false;
         }
         tableColumns.value = [];
-        const columns: ColumnsType = [];
+        const columns: any[] = [];
         for (const item of res.data) {
           const kpiDisplay = item[`unit`]? item[`title`]+ `(${item['unit']})`:item[`title`];
           const kpiValue = item[`kpiId`];
diff --git a/src/views/perfManage/kpiKeyTarget/index.vue b/src/views/perfManage/kpiKeyTarget/index.vue
index 1e6ed330..66e546b1 100644
--- a/src/views/perfManage/kpiKeyTarget/index.vue
+++ b/src/views/perfManage/kpiKeyTarget/index.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { DragOutlined } from '@ant-design/icons-vue';
 import { GridLayout, GridItem } from 'grid-layout-plus'
 import * as echarts from 'echarts';
 import { PageContainer } from 'antdv-pro-layout';
@@ -12,12 +11,13 @@ import { parseDateToStr } from '@/utils/date-utils';
 import dayjs, { Dayjs } from 'dayjs';
 import useNeInfoStore from '@/store/modules/neinfo';
 import { message } from 'ant-design-vue';
-import { ColumnsType } from 'ant-design-vue/es/table';
 import { generateColorRGBA } from '@/utils/generate-utils';
 import { LineSeriesOption } from 'echarts/charts';
+import { SeriesOption } from 'echarts';
 import { OptionsType, WS } from '@/plugins/ws-websocket';
-import { Select } from 'ant-design-vue';
 import { useDebounceFn } from '@vueuse/core';
+import { DownOutlined } from '@ant-design/icons-vue';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
 const { t, currentLocale } = useI18n();
 
 const neInfoStore = useNeInfoStore();
@@ -25,19 +25,18 @@ const neInfoStore = useNeInfoStore();
 //WebSocket连接
 const ws = ref<WS | null>(null);
 
-//添加实时数据开关状态
+//添加实时数据状态
 const realTimeEnabled = ref(false);
 //实时数据开关
 const handleRealTimeSwitch = (checked: any) => {
   fnRealTimeSwitch(!!checked);
 };
 
-
-// 定义所有可能的网元类型
+// 定义所有网元类型
 const ALL_NE_TYPES = ['ims', 'amf', 'udm', 'smf', 'pcf','upf','mme','mocngw','smsc','cbc','ausf'] as const;
 type AllChartType = typeof ALL_NE_TYPES[number];
 
-// 在 ALL_NE_TYPES 定义之后添加
+// 在 ALL_NE_TYPES 定义之后添加 小写转大写
 const neTypeOptions = ALL_NE_TYPES.map(type => ({
   label: type.toUpperCase(),
   value: type
@@ -46,28 +45,43 @@ const neTypeOptions = ALL_NE_TYPES.map(type => ({
 // 使用 ref 来使 networkElementTypes 变为响应式，并使用 ALL_NE_TYPES 初始化
 const networkElementTypes = ref<AllChartType[]>([...ALL_NE_TYPES]);
 
-// 添加选择的网元类型
+// 选择的网元类型
 const selectedNeTypes = ref<AllChartType[]>([]);
 
-// 添加一个临时状态来存储最新的选择
+// 临时状态 存储最新的选择
 const latestSelectedTypes = ref<AllChartType[]>([]);
+//手动更新跟踪
+const isManuallyUpdating = ref(false);
 
-// 修改 watch 函数
+// watch 监控函数
 watch(selectedNeTypes, (newTypes) => {
-  console.log('Selected types changed:', newTypes);
-  // 立即更新 UI
+  //if (isManuallyUpdating.value) return;
   networkElementTypes.value = newTypes;
-  // 更新临时状态
   latestSelectedTypes.value = newTypes;
-  // 触发防抖函数
   debouncedUpdateCharts();
+
+  // 更新 WebSocket 订阅
+  if (realTimeEnabled.value && ws.value) {
+    // 关闭现有连接
+    ws.value.close();
+    // 创建新的连接和更新后的订
+    const options: OptionsType = {
+      url: '/ws',
+      params: {
+        subGroupID: newTypes.map(type => `10_${type.toUpperCase()}_001`).join(','),
+      },
+      onmessage: wsMessage,
+      onerror: wsError,
+    };
+    ws.value.connect(options);
+  }
 }, { deep: true });
 
-// 修改防抖函数
+// 防抖函数
 const debouncedUpdateCharts = useDebounceFn(() => {
   // 比较当前选择和最新选择
   if (JSON.stringify(latestSelectedTypes.value) !== JSON.stringify(selectedNeTypes.value)) {
-    // 如果不致，以最新选择为准
+    // 如果不一致，以最新选择为准
     selectedNeTypes.value = latestSelectedTypes.value;
   }
 
@@ -92,8 +106,6 @@ const debouncedUpdateCharts = useDebounceFn(() => {
     }
   });
 
-  console.log('Updated chartOrder:', chartOrder.value);
-
   // 保存选中的网元类型到本地存储
   localStorage.setItem('selectedNeTypes', JSON.stringify(newTypes));
 
@@ -103,10 +115,8 @@ const debouncedUpdateCharts = useDebounceFn(() => {
   });
 }, 300);
 
-// 修改 initCharts 函数
+// 改变状态时重新初始化图表 数
 const initCharts = async () => {
-  console.log('Initializing charts for:', networkElementTypes.value);
-
   // 清除不再需要的图表
   Object.keys(chartStates).forEach((key) => {
     if (!networkElementTypes.value.includes(key as AllChartType)) {
@@ -123,7 +133,6 @@ const initCharts = async () => {
 
   // 初始化或更新需要的图表
   for (const type of networkElementTypes.value) {
-    console.log('Initializing chart for:', type);
     if (!chartStates[type]) {
       chartStates[type] = createChartState();
     }
@@ -137,19 +146,17 @@ const initCharts = async () => {
     }
   }
 
-  console.log('Finished initializing charts');
-
-  // 保存更新后的布局
-  localStorage.setItem('chartOrder', JSON.stringify(chartOrder.value));
+  // 不要在这里保存布局，因为这可能会覆盖我们刚刚设置的布局
+  // localStorage.setItem('chartOrder', JSON.stringify(chartOrder.value));
 };
 
-// 添加类型定义
+// 位置类型定义(记录布局）
 interface LayoutItem {
   x: number;
   y: number;
   w: number;
   h: number;
-  i: AllChartType;  // 将 ChartType 改为 AllChartType
+  i: AllChartType;
 }
 
 type Layout = LayoutItem[];
@@ -157,7 +164,7 @@ type Layout = LayoutItem[];
 //构建响应式数组储存图表类型数据
 const chartOrder = ref<Layout>(
   JSON.parse(localStorage.getItem('chartOrder') || 'null') ||
-  networkElementTypes.value.map((type, index) => ({
+  networkElementTypes.value.map((type, index) => ({//系统默认布局
     x: index % 2 * 6,  // 每行两个图表，宽度为6
     y: Math.floor(index / 2) * 4,  // 每个图表据 4 个单位高度
     w: 6,  // 宽度为6单位
@@ -166,34 +173,41 @@ const chartOrder = ref<Layout>(
   }))
 );
 
-// 改变布局触发更新
-const handleLayoutUpdated = (newLayout: Layout) => {
+// 监听带防抖
+const handleLayoutUpdated = useDebounceFn((newLayout: Layout) => {
+  if (isManuallyUpdating.value) {
+    return;
+  }
   const filteredLayout = newLayout.filter(item => networkElementTypes.value.includes(item.i));
   if (JSON.stringify(filteredLayout) !== JSON.stringify(chartOrder.value)) {
     chartOrder.value = filteredLayout;
-    // 保存布局到 localStorage
     localStorage.setItem('chartOrder', JSON.stringify(chartOrder.value));
     nextTick(() => {
       chartOrder.value.forEach((item) => {
         const state = chartStates[item.i];
         if (state?.chart.value) {
           state.chart.value.resize();
+          renderChart(item.i);
+        }
+      });
+    });
+  } else {
+    console.log('No change in layout, skipping update');
+  }
+}, 200);  // 200ms 的防抖时间
+
+// 监听 chartOrder 的变化
+watch(chartOrder, (newOrder, oldOrder) => {
+  if (JSON.stringify(newOrder) !== JSON.stringify(oldOrder)) {
+    nextTick(() => {
+      Object.values(chartStates).forEach(state => {
+        if (state.chart.value) {
+          state.chart.value.resize();
         }
       });
     });
   }
-};
-
-// 监听 chartOrder 的变化
-watch(chartOrder, () => {
-  nextTick(() => {
-    Object.values(chartStates).forEach(state => {
-      if (state.chart.value) {
-        state.chart.value.resize();
-      }
-    });
-  });
-});
+}, { deep: true });
 
 // 定义表格状态类型
 type TableStateType = {
@@ -204,7 +218,6 @@ type TableStateType = {
   selectedRowKeys: (string | number)[];
 };
 
-
 // 创建可复用的状态
 const createChartState = () => {
   const chartDom = ref<HTMLElement | null>(null);
@@ -215,7 +228,7 @@ const createChartState = () => {
     chartDom,
     chart,
     observer,
-    tableColumns: ref<ColumnsType>([]),
+    tableColumns: ref<any[]>([]),
     tableState: reactive<TableStateType>({
       loading: false,
       size: 'small',
@@ -229,7 +242,7 @@ const createChartState = () => {
   };
 };
 
-// 为每种图表类型创建状
+// 图表类型状态
 const chartStates: Record<AllChartType, ReturnType<typeof createChartState>> = Object.fromEntries(
   networkElementTypes.value.map(type => [type, createChartState()])
 ) as Record<AllChartType, ReturnType<typeof createChartState>>;
@@ -240,17 +253,13 @@ interface RangePicker extends Record<AllChartType, [string, string]> {
   ranges: Record<string, [Dayjs, Dayjs]>;
 }
 
-// 创建日期选择器状态
+// 日期选择器状态
 const rangePicker = reactive<RangePicker>({
   ...Object.fromEntries(networkElementTypes.value.map(type => [
     type,
-    // [
-    //   dayjs('2024-09-20 00:00:00').valueOf().toString(),//拟数据的日期设2024.9.20
-    //   dayjs('2024-09-20 23:59:59').valueOf().toString()
-    // ]
     [
-      dayjs().startOf('day').valueOf().toString(),  // 天 0 点 0 分 0 秒
-      dayjs().valueOf().toString()  // 当前时间
+      dayjs().startOf('day').valueOf().toString(),  //  0 点 0 分 0 秒
+      dayjs().valueOf().toString()  // 此时
     ]
   ])) as Record<AllChartType, [string, string]>,
   placeholder: [t('views.monitor.monitor.startTime'), t('views.monitor.monitor.endTime')] as [string, string],
@@ -262,7 +271,7 @@ const rangePicker = reactive<RangePicker>({
   } as Record<string, [Dayjs, Dayjs]>,
 });
 
-// 创建可复用的图表初始化函数
+// 可复用的图表初始化函数
 const initChart = (type: AllChartType) => {
   const tryInit = (retries = 3) => {
     nextTick(() => {
@@ -297,7 +306,7 @@ const initChart = (type: AllChartType) => {
         xAxis: {
           type: 'category',
           boundaryGap: false,
-          data: [],
+          data: state.chartDataXAxisData,
         },
         yAxis: {
           type: 'value',
@@ -312,7 +321,7 @@ const initChart = (type: AllChartType) => {
             color: '#646A73',
           },
           icon: 'circle',
-          selected: {},
+          selected: state.chartLegendSelected,
         },
         grid: {
           left: '10%',
@@ -330,10 +339,10 @@ const initChart = (type: AllChartType) => {
             end: 100,
           },
         ],
-        series: [],
+        series: state.chartDataYSeriesData as SeriesOption[],
       };
       state.chart.value.setOption(option);
-      state.chart.value.resize();  // 确保图表正确调整大小
+      state.chart.value.resize();
 
       // 创建 ResizeObserver 实例
       if (state.observer.value) {
@@ -345,7 +354,7 @@ const initChart = (type: AllChartType) => {
         }
       });
 
-      // 开始观察图表容器
+      // 观察图表容器
       state.observer.value.observe(container);
     });
   };
@@ -353,11 +362,9 @@ const initChart = (type: AllChartType) => {
   tryInit();
 };
 
-
-
-// 可复用的数据获函数
+// 可复用的数据获取函数
 const fetchData = async (type: AllChartType) => {
-  const state = chartStates[type];  // 直接使用 type
+  const state = chartStates[type];  // 直使用 type
   const neId = '001';
   state.tableState.loading = true;
   try {
@@ -386,31 +393,37 @@ const fetchData = async (type: AllChartType) => {
   }
 };
 
-//建立实时数据连接
+//实时数连接开关
 function fnRealTimeSwitch(bool: boolean) {
-
   realTimeEnabled.value = bool;
   if (bool) {
-    if(!ws.value){
-
+    if(!ws.value) {
       ws.value = new WS();
     }
+    // 清空所有图表的现有数据
     Object.values(chartStates).forEach(state => {
       state.tableState.seached = false;
+      state.chartDataXAxisData = [];
+      state.chartDataYSeriesData.forEach(series => {
+        series.data = [];
+      });
+      if (state.chart.value) {
+        state.chart.value.setOption({
+          xAxis: { data: [] },
+          series: state.chartDataYSeriesData
+        });
+      }
     });
-    // 建立连接
     const options: OptionsType = {
       url: '/ws',
       params: {
-        subGroupID: networkElementTypes.value.map(type => `10_${type.toUpperCase()}_001`).join(','),
+        subGroupID: selectedNeTypes.value.map(type => `10_${type.toUpperCase()}_001`).join(','),
       },
       onmessage: wsMessage,
       onerror: wsError,
-
     };
     ws.value.connect(options);
-  } else if(ws.value){
-
+  } else if(ws.value) {
     Object.values(chartStates).forEach(state => {
       state.tableState.seached = true;
     });
@@ -419,13 +432,13 @@ function fnRealTimeSwitch(bool: boolean) {
   }
 }
 
-// 接收数据后错误回
+// 接收数据后错误回调
 function wsError() {
 
   message.error(t('common.websocketError'));
 }
 
-// 修改 wsMessage 数
+// 接收数据回调
 function wsMessage(res: Record<string, any>) {
   const { code, data } = res;
   if (code === RESULT_CODE_ERROR) {
@@ -437,53 +450,55 @@ function wsMessage(res: Record<string, any>) {
     return;
   }
 
-  networkElementTypes.value.forEach((type) => {
-    const state = chartStates[type];
-    const kpiEvent:any = data.data[type.toUpperCase()];
+  const neType = data.groupId.split('_')[1].toLowerCase() as AllChartType;
 
-    if (kpiEvent) {
-      if (kpiEvent.timeGroup) {
-        const newTime = parseDateToStr(+kpiEvent.timeGroup);
-        state.chartDataXAxisData.push(newTime);
-        if (state.chartDataXAxisData.length > 100) {
-          state.chartDataXAxisData.shift();
-        }
+  const state = chartStates[neType];
+  if (!state) {
+    console.warn(`No chart state found for ${neType}`);
+    return;
+  }
 
-        // 使用 appendData 方法追加数据
-        state.chartDataYSeriesData.forEach(series => {
-          if (kpiEvent[series.customKey as string] !== undefined) {
-            const newValue = +kpiEvent[series.customKey as string];
-            if (state.chart.value) {
-              state.chart.value.appendData({
-                seriesIndex: state.chartDataYSeriesData.indexOf(series),
-                data: [[newTime, newValue]]
-              });
-            }
-            // 保持数据长度不超过100
-            if (series.data.length > 100) {
-              series.data.shift();
-            }
-          }
-        });
+  const kpiEvent = data.data;
+  if (!kpiEvent) {
+    console.warn(`No data found for ${neType}`);
+    return;
+  }
 
-        // 更新 X 轴
-        if (state.chart.value) {
-          state.chart.value.setOption({
-            xAxis: { data: state.chartDataXAxisData }
-          });
+  const newTime = parseDateToStr(kpiEvent.timeGroup ? +kpiEvent.timeGroup : Date.now());
+
+  // 只有在实时数据模式下才更新图表
+  if (realTimeEnabled.value) {
+    // 更新X轴数据
+    state.chartDataXAxisData.push(newTime);
+    if (state.chartDataXAxisData.length > 100) {
+      state.chartDataXAxisData.shift();
+    }
+
+    // 更新每个系列的数据
+    state.chartDataYSeriesData.forEach(series => {
+      const kpiKey = series.customKey as string;
+      if (kpiEvent[kpiKey] !== undefined) {
+        const newValue = +kpiEvent[kpiKey];
+        series.data.push([newTime, newValue]);
+        if (series.data.length > 100) {
+          series.data.shift();
         }
       }
+    });
+
+    // 立即更新图表
+    if (state.chart.value) {
+      state.chart.value.setOption({
+        xAxis: { data: state.chartDataXAxisData },
+        series: state.chartDataYSeriesData as SeriesOption[]
+      });
     }
-  });
+  }
 }
 
-type LineDataItem = {
-  value: number;
-  [key: string]: any;
-};
 interface CustomSeriesOption extends Omit<LineSeriesOption, 'data'> {
   customKey?: string;
-  data: (number | LineDataItem)[];
+  data: Array<[string, number]>;
 }
 // 创建可复用的图表渲染函数
 const renderChart = (type: AllChartType) => {
@@ -491,7 +506,7 @@ const renderChart = (type: AllChartType) => {
   if (state.chart.value == null) {
     return;
   }
-  // 重置数据
+  // 置数据
   state.chartLegendSelected = {};
   state.chartDataXAxisData = [];
   state.chartDataYSeriesData = [];
@@ -522,7 +537,7 @@ const renderChart = (type: AllChartType) => {
   for (const item of orgData) {
     state.chartDataXAxisData.push(parseDateToStr(+item.timeGroup));
     for (const series of state.chartDataYSeriesData) {
-      series.data.push(+item[series.customKey as string]);
+      series.data.push([parseDateToStr(+item.timeGroup), +item[series.customKey as string]]);
     }
   }
 
@@ -535,7 +550,7 @@ const renderChart = (type: AllChartType) => {
         type: 'category',
         boundaryGap: false,
       },
-      series: state.chartDataYSeriesData,
+      series: state.chartDataYSeriesData as SeriesOption[],
       dataZoom: [
         {
           type: 'inside',
@@ -553,7 +568,7 @@ const renderChart = (type: AllChartType) => {
 };
 
 
-// 获取头数据
+// 获网元指标数据
 const fetchKPITitle = async (type: AllChartType) => {
   const language = currentLocale.value.split('_')[0] === 'zh' ? 'cn' : currentLocale.value.split('_')[0];
   try {
@@ -591,7 +606,7 @@ onMounted(async () => {
     selectedNeTypes.value = parsedSelectedNeTypes;
     networkElementTypes.value = parsedSelectedNeTypes;
   } else {
-    // 如果没有保存的选中网元类型，则使用默认选择
+    // 如果没有保存的选中网元类型，则用默认选择
     selectedNeTypes.value = [...DEFAULT_NE_TYPES];
     networkElementTypes.value = [...DEFAULT_NE_TYPES];
     // 保存这个默认选择到本地存储
@@ -601,24 +616,22 @@ onMounted(async () => {
   // 初始化或更新 chartOrder
   const savedLayout = localStorage.getItem('chartOrder');
   if (savedLayout) {
-    const parsedLayout = JSON.parse(savedLayout);
-    // 只保留当前选中的网元类型的布局
-    chartOrder.value = parsedLayout.filter((item: LayoutItem) => networkElementTypes.value.includes(item.i));
+    chartOrder.value = JSON.parse(savedLayout).filter((item: LayoutItem) =>
+      networkElementTypes.value.includes(item.i)
+    );
   }
 
-  // 如果 chartOrder 为空或者不包含所有选中的网元，重新创建布局
-  if (chartOrder.value.length === 0 || chartOrder.value.length !== networkElementTypes.value.length) {
-    chartOrder.value = networkElementTypes.value.map((type, index) => ({
-      x: index % 2 * 6,
-      y: Math.floor(index / 2) * 4,
+  // 如果 chartOrder 为空或者不包含所有选中的网元，添加缺失的网元
+  const missingTypes = networkElementTypes.value.filter(type => !chartOrder.value.some(item => item.i === type));
+  missingTypes.forEach((type) => {
+    chartOrder.value.push({
+      x: (chartOrder.value.length % 2) * 6,
+      y: Math.floor(chartOrder.value.length / 2) * 4,
       w: 6,
       h: 4,
       i: type,
-    }));
-  }
-
-  console.log('Initialized networkElementTypes:', networkElementTypes.value);
-  console.log('Initialized chartOrder:', chartOrder.value);
+    });
+  });
 
   await initCharts();
 });
@@ -636,27 +649,205 @@ onUnmounted(() => {
       state.observer.value.disconnect();
     }
   });
-
-  // 不需要显式取消防抖函数
 });
-</script>
 
+const isSaving = ref(false);
+const isRestoring = ref(false);
+//保存布局按钮
+const handleSaveLayout = async (info: MenuInfo) => {
+  if (typeof info.key === 'string' && !isSaving.value) {
+    isSaving.value = true;
+    isRestoring.value = true;
+    try {
+      await saveCurrentLayout(info.key);
+    } finally {
+      setTimeout(()=>{
+        isSaving.value = false;
+        isRestoring.value = false;
+      },700)
+    }
+  } else {
+    console.error('Invalid layout key or operation in progress');
+  }
+};
+//恢复布局按钮
+const handleRestoreLayout = async (info: MenuInfo) => {
+  if (typeof info.key === 'string' && !isRestoring.value) {
+    isRestoring.value = true;
+    isSaving.value = true;
+    try {
+      await restoreSavedLayout(info.key);
+    } finally {
+      setTimeout(()=>{
+        isSaving.value = false;
+        isRestoring.value = false;
+      },700)
+    }
+  } else {
+    console.error('Invalid layout key or operation in progress');
+  }
+};
+
+// 保存当前布局
+const saveCurrentLayout = async (layoutName: string) => {
+  const savedLayouts = JSON.parse(localStorage.getItem('savedLayouts') || '{}');
+  savedLayouts[layoutName] = {
+    layout: chartOrder.value,
+    selectedTypes: selectedNeTypes.value
+  };
+  localStorage.setItem('savedLayouts', JSON.stringify(savedLayouts));
+  message.success(t('views.perfManage.kpiKeyTarget.saveSuccess', { name: t(`views.perfManage.kpiKeyTarget.${layoutName}`)}));
+};
+//恢复已保存的布局
+const restoreSavedLayout = async (layoutName: string) => {
+  const savedLayouts = JSON.parse(localStorage.getItem('savedLayouts') || '{}');
+  const savedLayout = savedLayouts[layoutName];
+  if (savedLayout && Array.isArray(savedLayout.selectedTypes) && Array.isArray(savedLayout.layout)) {
+    selectedNeTypes.value = savedLayout.selectedTypes;
+    networkElementTypes.value = savedLayout.selectedTypes;
+
+    // 更新布局
+    chartOrder.value = savedLayout.layout.filter((item: LayoutItem) =>
+      savedLayout.selectedTypes.includes(item.i)
+    );
+
+    // 如果有当前选中的网元类型不在保存的布局中，添加它们
+    const missingTypes = savedLayout.selectedTypes.filter((type: AllChartType) =>
+      !chartOrder.value.some(item => item.i === type)
+    );
+    missingTypes.forEach((type: AllChartType) => {
+      chartOrder.value.push({
+        x: (chartOrder.value.length % 2) * 6,
+        y: Math.floor(chartOrder.value.length / 2) * 4,
+        w: 6,
+        h: 4,
+        i: type,
+      });
+    });
+
+    localStorage.setItem('chartOrder', JSON.stringify(chartOrder.value));
+    localStorage.setItem('selectedNeTypes', JSON.stringify(selectedNeTypes.value));
+
+    await nextTick();
+    await initCharts();
+
+    message.success(t('views.perfManage.kpiKeyTarget.restoreSavedSuccess', { name: t(`views.perfManage.kpiKeyTarget.${layoutName}`)}));
+  } else {
+    message.warning(t('views.perfManage.kpiKeyTarget.noSavedLayout', { name: t(`views.perfManage.kpiKeyTarget.${layoutName}`)}));
+  }
+};
+
+// 应用全宽布局
+const applyFullWidthLayout = () => {
+  isManuallyUpdating.value = true;
+  const newLayout = selectedNeTypes.value.map((type, index) => ({
+    x: 0,
+    y: index * 8,
+    w: 12,
+    h: 8,
+    i: type,
+  }));
+
+  nextTick(() => {
+    Object.assign(chartOrder.value, newLayout)
+    // chartOrder.value = newLayout;
+    localStorage.setItem('chartOrder', JSON.stringify(newLayout));
+    initCharts();
+    // 直接更新图表，不调用 handleLayoutUpdated
+    chartOrder.value.forEach((item) => {
+      const state = chartStates[item.i];
+      if (state?.chart.value) {
+        state.chart.value.resize();
+        renderChart(item.i);
+      }
+    });
+    isManuallyUpdating.value = false;
+  });
+};
+
+// 应用两列布局
+const applyTwoColumnLayout = () => {
+  isManuallyUpdating.value = true;
+  const newLayout = selectedNeTypes.value.map((type, index) => ({
+    x: (index % 2) * 6,
+    y: Math.floor(index / 2) * 4,
+    w: 6,
+    h: 4,
+    i: type,
+  }));
+  nextTick(() => {
+    // chartOrder.value = newLayout;
+    Object.assign(chartOrder.value, newLayout)
+    localStorage.setItem('chartOrder', JSON.stringify(newLayout));
+    initCharts();
+    // 直接更新图表，不调用 handleLayoutUpdated
+    chartOrder.value.forEach((item) => {
+      const state = chartStates[item.i];
+      if (state?.chart.value) {
+        state.chart.value.resize();
+        renderChart(item.i);
+      }
+    });
+    isManuallyUpdating.value = false;
+  });
+};
+</script>
 <template>
   <PageContainer>
     <a-card :bordered="false" class="control-card">
-      <a-form layout="inline">
-        <a-form-item>
-          <a-switch
-            v-model:checked="realTimeEnabled"
-            @change="handleRealTimeSwitch"
-          />
-        </a-form-item>
-        <a-form-item>
-          <span class="switch-label">{{ realTimeEnabled ? t('views.dashboard.cdr.realTimeDataStart') : t('views.dashboard.cdr.realTimeDataStop') }}</span>
-        </a-form-item>
-        <a-form-item :label="t('views.ne.common.neType')" class="ne-type-select">
-          <a-checkbox-group v-model:value="selectedNeTypes" :options="neTypeOptions" />
-        </a-form-item>
+      <a-form layout="horizontal">
+        <a-row :gutter="16">
+          <a-col :lg="4" :md="24" :xs="24">
+            <a-form-item :label="realTimeEnabled ? t('views.dashboard.cdr.realTimeDataStart') : t('views.dashboard.cdr.realTimeDataStop')">
+              <a-switch
+                v-model:checked="realTimeEnabled"
+                @change="handleRealTimeSwitch"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="24" :xs="24">
+            <a-form-item :label="t('views.ne.common.neType')" class="ne-type-select">
+              <a-checkbox-group v-model:value="selectedNeTypes" :options="neTypeOptions" />
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="24" :xs="24">
+
+            <a-form-item>
+              <a-dropdown :disabled="isSaving">
+                <a-button :loading="isSaving">
+                  {{ t('views.perfManage.kpiKeyTarget.saveLayout') }}
+                  <DownOutlined />
+                </a-button>
+                <template #overlay>
+                  <a-menu @click="handleSaveLayout">
+                    <a-menu-item key="layout1">{{ t('views.perfManage.kpiKeyTarget.layout1') }}</a-menu-item>
+                    <a-menu-item key="layout2">{{ t('views.perfManage.kpiKeyTarget.layout2') }}</a-menu-item>
+                    <a-menu-item key="layout3">{{ t('views.perfManage.kpiKeyTarget.layout3') }}</a-menu-item>
+                  </a-menu>
+                </template>
+              </a-dropdown>
+              <a-dropdown :disabled="isRestoring">
+                <a-button :loading="isRestoring">
+                  {{ t('views.perfManage.kpiKeyTarget.restoreSaved') }}
+                  <DownOutlined />
+                </a-button>
+                <template #overlay>
+                  <a-menu @click="handleRestoreLayout">
+                    <a-menu-item key="layout1">{{ t('views.perfManage.kpiKeyTarget.layout1') }}</a-menu-item>
+                    <a-menu-item key="layout2">{{ t('views.perfManage.kpiKeyTarget.layout2') }}</a-menu-item>
+                    <a-menu-item key="layout3">{{ t('views.perfManage.kpiKeyTarget.layout3') }}</a-menu-item>
+                  </a-menu>
+                </template>
+              </a-dropdown>
+              <a-button @click="applyFullWidthLayout">
+                {{ t('views.perfManage.kpiKeyTarget.fullWidthLayout') }}
+              </a-button>
+              <a-button @click="applyTwoColumnLayout">
+                {{ t('views.perfManage.kpiKeyTarget.twoColumnLayout') }}
+              </a-button>
+            </a-form-item>
+          </a-col>
+        </a-row>
       </a-form>
     </a-card>
 
@@ -691,25 +882,25 @@ onUnmounted(() => {
         drag-ignore-from=".no-drag"
         class="grid-item"
       >
-        <div class="date-picker-wrapper">
-          <a-range-picker
-            v-model:value="rangePicker[item.i]"
-            :allow-clear="false"
-            bordered
-            :show-time="{ format: 'HH:mm:ss' }"
-            format="YYYY-MM-DD HH:mm:ss"
-            value-format="x"
-            :placeholder="rangePicker.placeholder"
-            :ranges="rangePicker.ranges"
-            style="width: 100%"
-            @change="() => fetchData(item.i)"
-          ></a-range-picker>
-        </div>
         <a-card :bordered="false" class="card-container">
           <template #title>
-            <div class="card-title">
-              <DragOutlined />
-              <span>{{ item.i.toUpperCase() }}</span>
+            <div class="card-header">
+              <div class="card-title">
+                <span>{{ item.i.toUpperCase() }}</span>
+              </div>
+              <a-range-picker
+                v-model:value="rangePicker[item.i]"
+                :allow-clear="false"
+                bordered
+                :show-time="{ format: 'HH:mm:ss' }"
+                format="YYYY-MM-DD HH:mm:ss"
+                value-format="x"
+                :placeholder="rangePicker.placeholder"
+                :ranges="rangePicker.ranges"
+                style="width: 360px"
+                @change="() => fetchData(item.i)"
+                class="no-drag"
+              ></a-range-picker>
             </div>
           </template>
           <div class='chart'>
@@ -750,16 +941,20 @@ onUnmounted(() => {
   flex-direction: column;
 }
 
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  cursor: move;
+  flex-wrap: wrap;  /* 添加这行，允许内容换行 */
+  gap: 8px;  /* 添加这行，为换行时的元素之间添加间隔 */
+}
+
 .card-title {
   display: flex;
   align-items: center;
-  cursor: move;
-
-  .anticon {
-    margin-right: 8px;
-    font-size: 16px;
-    color: #1890ff;
-  }
+  flex-shrink: 0;
 
   span {
     font-size: 16px;
@@ -784,63 +979,45 @@ onUnmounted(() => {
   white-space: nowrap;
 }
 
-.drag-handle {
+
+
+:deep(.ant-card-body) {
+  flex: 1;
   display: flex;
-  align-items: center;
-  cursor: move;
-
-  .anticon {
-    margin-right: 8px;
-    font-size: 16px;
-    color: #1890ff;
-  }
-
-  span {
-    font-size: 16px;
-    font-weight: 500;
-  }
+  flex-direction: column;
+  padding: 16px !important;
+  overflow: hidden;
 }
 
-.ne-type-select {
-  flex-grow: 1;
-  max-width: 100%;
-
-  :deep(.ant-checkbox-group) {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-  }
+:deep(.ant-form-item) {
+  margin-bottom: 0;
 }
 
-:deep {
-  .ant-card-body {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    padding: 16px !important;
-    overflow: hidden;
-  }
+:deep(.ant-form-item-label) {
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.85);
+}
 
-  .ant-form-item {
-    margin-bottom: 0;
-  }
+:deep(.anticon) {
+  font-size: 16px;
+  color: #1890ff;
+}
 
-  .ant-form-item-label {
-    font-weight: 500;
-    color: rgba(0, 0, 0, 0.85);
-  }
+:deep(.ant-select) {
+  min-width: 200px;
+}
 
-  .anticon {
-    font-size: 16px;
-    color: #1890ff;
-  }
+:deep(.ant-card-head) {
+  padding: 8px 16px;  /* 减小上下内边距 */
+}
 
-  .ant-select {
-    min-width: 200px;
-  }
+:deep(.ant-card-head-title) {
+  padding: 8px 0;  /* 减小上下内边距 */
+  width: 100%; // 确保标题占据全宽
+}
 
-  .ant-card-head {
-    cursor: move;
-  }
+:deep(.ant-range-picker) {
+  flex-shrink: 0; // 防止日期选择被压缩
+  max-width: 100%; // 确保在小屏幕上不会溢出
 }
 </style>
diff --git a/src/views/perfManage/perfData/index.vue b/src/views/perfManage/perfData/index.vue
index c17382a0..9d3ce85a 100644
--- a/src/views/perfManage/perfData/index.vue
+++ b/src/views/perfManage/perfData/index.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import { parseDateToStr } from '@/utils/date-utils';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { listperfData } from '@/api/perfManage/perfData';
diff --git a/src/views/perfManage/perfThreshold/index.vue b/src/views/perfManage/perfThreshold/index.vue
index 8801b797..898ef07f 100644
--- a/src/views/perfManage/perfThreshold/index.vue
+++ b/src/views/perfManage/perfThreshold/index.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { reactive, onMounted, ref, toRaw } from 'vue';
+import { reactive, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { Form, message, Modal } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { ProModal } from 'antdv-pro-modal';
+import { Form, message, Modal } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import useI18n from '@/hooks/useI18n';
 import useDictStore from '@/store/modules/dict';
@@ -211,9 +212,9 @@ function fnGetList(pageNum?: number) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**详情框是否显示 */
-  visibleByView: boolean;
+  openByView: boolean;
   /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**标题 */
   title: string;
   /**网元类型设备对象 */
@@ -228,8 +229,8 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByView: false,
-  visibleByEdit: false,
+  openByView: false,
+  openByEdit: false,
   title: '',
   neType: [],
   neTypPerformance: [],
@@ -305,7 +306,7 @@ function fnModalVisibleByEdit(id?: string) {
   if (!id) {
     modalStateFrom.resetFields();
     modalState.title = t('views.perfManage.perfThreshold.addThre');
-    modalState.visibleByEdit = true;
+    modalState.openByEdit = true;
   } else {
     if (modalState.confirmLoading) return;
     const hide = message.loading(t('common.loading'), 0);
@@ -317,7 +318,7 @@ function fnModalVisibleByEdit(id?: string) {
         fnSelectPerformanceInit(res.data.neType);
         modalState.from = Object.assign(modalState.from, res.data);
         modalState.title = t('views.perfManage.perfThreshold.editThre');
-        modalState.visibleByEdit = true;
+        modalState.openByEdit = true;
       } else {
         message.error(t('views.perfManage.perfThreshold.errorThreInfo'), 3);
       }
@@ -345,7 +346,7 @@ function fnModalOk() {
               content: t('common.msgSuccess', { msg: modalState.title }),
               duration: 3,
             });
-            modalState.visibleByEdit = false;
+            modalState.openByEdit = false;
             modalStateFrom.resetFields();
           } else {
             message.error({
@@ -370,7 +371,7 @@ function fnModalOk() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByEdit = false;
+  modalState.openByEdit = false;
   modalState.confirmLoading = false;
   modalStateFrom.resetFields();
   modalState.neType = [];
@@ -512,10 +513,7 @@ onMounted(() => {
       <a-form :model="queryParams" name="queryParams" layout="horizontal">
         <a-row :gutter="16">
           <a-col :lg="6" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.ne.common.neType')"
-              name="neType "
-            >
+            <a-form-item :label="t('views.ne.common.neType')" name="neType ">
               <a-auto-complete
                 v-model:value="queryParams.neType"
                 :options="useNeInfoStore().getNeSelectOtions"
@@ -676,14 +674,14 @@ onMounted(() => {
       :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
-      :visible="modalState.visibleByEdit"
+      :open="modalState.openByEdit"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnModalOk"
       @cancel="fnModalCancel"
     >
       <a-form name="modalStateFrom" layout="horizontal">
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.ne.common.neType')"
@@ -716,7 +714,7 @@ onMounted(() => {
           </a-select>
         </a-form-item>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.perfManage.perfThreshold.thresholdValue')"
diff --git a/src/views/perfManage/taskManage/index.vue b/src/views/perfManage/taskManage/index.vue
index 81b134de..766413b8 100644
--- a/src/views/perfManage/taskManage/index.vue
+++ b/src/views/perfManage/taskManage/index.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { reactive, onMounted, ref, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { Form, message, Modal } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { ProModal } from 'antdv-pro-modal';
+import { Form, message, Modal } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import { parseDateToStr } from '@/utils/date-utils';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import useI18n from '@/hooks/useI18n';
@@ -244,9 +245,9 @@ function fnGetList(pageNum?: number) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**详情框是否显示 */
-  visibleByView: boolean;
+  openByView: boolean;
   /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**标题 */
   title: string;
   /**选择后清空 */
@@ -272,8 +273,8 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByView: false,
-  visibleByEdit: false,
+  openByView: false,
+  openByEdit: false,
   title: '',
   initPeriods: [],
   neType: [],
@@ -453,7 +454,7 @@ function fnModalVisibleByVive(id: string) {
       modalState.timeRangePicker = [res.data.startTime, res.data.endTime];
       modalState.from = Object.assign(modalState.from, res.data);
       modalState.title = t('views.perfManage.taskManage.viewTask');
-      modalState.visibleByView = true;
+      modalState.openByView = true;
     } else {
       message.error(t('views.perfManage.taskManage.errorTaskInfo'), 3);
     }
@@ -468,7 +469,7 @@ function fnModalVisibleByEdit(id?: string) {
   if (!id) {
     modalStateFrom.resetFields();
     modalState.title = t('views.perfManage.taskManage.addTask');
-    modalState.visibleByEdit = true;
+    modalState.openByEdit = true;
   } else {
     if (modalState.confirmLoading) return;
     const hide = message.loading(t('common.loading'), 0);
@@ -528,7 +529,7 @@ function fnModalVisibleByEdit(id?: string) {
           modalState.from.periods = [];
         }
         modalState.title = t('views.perfManage.taskManage.editTask');
-        modalState.visibleByEdit = true;
+        modalState.openByEdit = true;
       } else {
         message.error(t('views.perfManage.taskManage.errorTaskInfo'), 3);
       }
@@ -556,7 +557,7 @@ function fnModalOk() {
               content: t('common.msgSuccess', { msg: modalState.title }),
               duration: 3,
             });
-            modalState.visibleByEdit = false;
+            modalState.openByEdit = false;
             modalStateFrom.resetFields();
           } else {
             message.error({
@@ -590,8 +591,8 @@ function updateStep(str: any) {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByView = false;
-  modalState.visibleByEdit = false;
+  modalState.openByView = false;
+  modalState.openByEdit = false;
   modalState.confirmLoading = false;
   modalStateFrom.resetFields();
   modalState.timeRangePicker = ['', ''];
@@ -724,10 +725,7 @@ onMounted(() => {
       <a-form :model="queryParams" name="queryParams" layout="horizontal">
         <a-row :gutter="16">
           <a-col :lg="6" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.ne.common.neType')"
-              name="neType "
-            >
+            <a-form-item :label="t('views.ne.common.neType')" name="neType ">
               <a-auto-complete
                 v-model:value="queryParams.neType"
                 :options="neInfoStore.getNeSelectOtions"
@@ -883,17 +881,14 @@ onMounted(() => {
     <ProModal
       :drag="true"
       :width="800"
-      :visible="modalState.visibleByView"
+      :open="modalState.openByView"
       :title="modalState.title"
       @cancel="fnModalCancel"
     >
       <a-form layout="horizontal">
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.ne.common.neType')"
-              name="neType"
-            >
+            <a-form-item :label="t('views.ne.common.neType')" name="neType">
               <a-cascader
                 :value="modalState.neType"
                 :options="neInfoStore.getNeCascaderOptions"
@@ -926,7 +921,7 @@ onMounted(() => {
           {{ modalState.neTypPerformanceList }}
         </a-form-item>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               name="granulOption"
@@ -949,7 +944,7 @@ onMounted(() => {
           {{ modalState.initPeriods }}
         </a-form-item>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.perfManage.taskManage.plan')"
@@ -997,14 +992,14 @@ onMounted(() => {
       :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
-      :visible="modalState.visibleByEdit"
+      :open="modalState.openByEdit"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnModalOk"
       @cancel="fnModalCancel"
     >
       <a-form name="modalStateFrom" layout="horizontal">
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.ne.common.neType')"
@@ -1059,7 +1054,7 @@ onMounted(() => {
           ></a-range-picker>
         </a-form-item>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.perfManage.taskManage.granulOption')"
@@ -1102,7 +1097,7 @@ onMounted(() => {
           />
         </a-form-item>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.perfManage.taskManage.plan')"
@@ -1127,10 +1122,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-form-item
-          :label="t('views.traceManage.task.remark')"
-          name="comment"
-        >
+        <a-form-item :label="t('views.traceManage.task.remark')" name="comment">
           <a-textarea
             v-model:value="modalState.from.comment"
             :auto-size="{ minRows: 2, maxRows: 6 }"
diff --git a/src/views/register.vue b/src/views/register.vue
index 5f2f3860..11df92e2 100644
--- a/src/views/register.vue
+++ b/src/views/register.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { GlobalFooter } from 'antdv-pro-layout';
-import { Modal, message } from 'ant-design-vue/lib';
+import { Modal, message } from 'ant-design-vue/es';
 import { computed, onMounted, reactive, toRaw } from 'vue';
 import { register } from '@/api/login';
 import { regExpPasswd, regExpUserName } from '@/utils/regular-utils';
diff --git a/src/views/system/config/index.vue b/src/views/system/config/index.vue
index 1f124e99..c0455c89 100644
--- a/src/views/system/config/index.vue
+++ b/src/views/system/config/index.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Modal, Form } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { ProModal } from 'antdv-pro-modal';
+import { message, Modal, Form } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import {
   exportConfig,
   listConfig,
@@ -182,9 +183,9 @@ function fnTableSelectedRowKeys(keys: (string | number)[]) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**详情框是否显示 */
-  visibleByView: boolean;
+  openByView: boolean;
   /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -195,8 +196,8 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByView: false,
-  visibleByEdit: false,
+  openByView: false,
+  openByEdit: false,
   title: '参数配置',
   from: {
     configId: undefined,
@@ -253,7 +254,7 @@ function fnModalVisibleByVive(configId: string | number) {
     if (res.code === RESULT_CODE_SUCCESS && res.data) {
       modalState.from = Object.assign(modalState.from, res.data);
       modalState.title = t('views.system.config.viewInfo');
-      modalState.visibleByView = true;
+      modalState.openByView = true;
     } else {
       message.error(t('views.system.config.viewInfoErr'), 2);
     }
@@ -268,7 +269,7 @@ function fnModalVisibleByEdit(configId?: string | number) {
   if (!configId) {
     modalStateFrom.resetFields();
     modalState.title = t('views.system.config.addInfo');
-    modalState.visibleByEdit = true;
+    modalState.openByEdit = true;
   } else {
     if (modalState.confirmLoading) return;
     const hide = message.loading(t('common.loading'), 0);
@@ -279,7 +280,7 @@ function fnModalVisibleByEdit(configId?: string | number) {
       if (res.code === RESULT_CODE_SUCCESS && res.data) {
         modalState.from = Object.assign(modalState.from, res.data);
         modalState.title = t('views.system.config.editInfo');
-        modalState.visibleByEdit = true;
+        modalState.openByEdit = true;
       } else {
         message.error(t('views.system.config.viewInfoErr'), 2);
       }
@@ -308,7 +309,7 @@ function fnModalOk() {
               key,
               duration: 2,
             });
-            modalState.visibleByEdit = false;
+            modalState.openByEdit = false;
             modalStateFrom.resetFields();
             fnGetList(1);
           } else {
@@ -333,8 +334,8 @@ function fnModalOk() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByEdit = false;
-  modalState.visibleByView = false;
+  modalState.openByEdit = false;
+  modalState.openByView = false;
   modalStateFrom.resetFields();
 }
 
@@ -559,7 +560,7 @@ onMounted(() => {
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
-        <div class="button-container">
+        <a-space :size="8" align="center">
           <a-button
             type="primary"
             @click.prevent="fnModalVisibleByEdit()"
@@ -595,12 +596,12 @@ onMounted(() => {
             <template #icon><ExportOutlined /></template>
             {{ t('common.export') }}
           </a-button>
-        </div>
+        </a-space>
       </template>
 
       <!-- 插槽-卡片右侧 -->
       <template #extra>
-        <div class="button-container">
+        <a-space :size="8" align="center">
           <a-tooltip>
             <template #title>{{ t('common.searchBarText') }}</template>
             <a-switch
@@ -640,7 +641,7 @@ onMounted(() => {
               </template>
             </a-dropdown>
           </a-tooltip>
-        </div>
+        </a-space>
       </template>
 
       <!-- 表格列表 -->
@@ -705,12 +706,12 @@ onMounted(() => {
     <ProModal
       :drag="true"
       :width="800"
-      :visible="modalState.visibleByView"
+      :open="modalState.openByView"
       :title="modalState.title"
       @cancel="fnModalCancel"
     >
       <a-form layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true">
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.config.configName')"
@@ -731,7 +732,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.config.configKey')"
@@ -776,7 +777,7 @@ onMounted(() => {
       :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
-      :visible="modalState.visibleByEdit"
+      :open="modalState.openByEdit"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnModalOk"
@@ -788,7 +789,7 @@ onMounted(() => {
         :label-col="{ span: 6 }"
         :label-wrap="true"
       >
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.config.configName')"
@@ -818,7 +819,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.config.configKey')"
diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
index fda54046..b51faeb4 100644
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { reactive, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Modal, Form } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { ProModal } from 'antdv-pro-modal';
+import { message, Modal, Form } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import {
   listDept,
   getDept,
@@ -141,9 +142,9 @@ let treeDataAll: Record<string, any>[] = [];
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**详情框是否显示 */
-  visibleByView: boolean;
+  openByView: boolean;
   /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -156,8 +157,8 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByView: false,
-  visibleByEdit: false,
+  openByView: false,
+  openByEdit: false,
   title: '部门',
   from: {
     deptId: undefined,
@@ -235,7 +236,7 @@ function fnModalVisibleByVive(deptId: string | number) {
       }
       modalState.from = Object.assign(modalState.from, res.data);
       modalState.title = t('views.system.dept.classInfo');
-      modalState.visibleByView = true;
+      modalState.openByView = true;
     } else {
       message.error(t('common.getInfoFail'), 2);
     }
@@ -258,7 +259,7 @@ function fnModalVisibleByEdit(
     }
     modalState.treeData = treeDataAll;
     modalState.title = t('common.addText') + t('views.system.dept.classInfo');
-    modalState.visibleByEdit = true;
+    modalState.openByEdit = true;
   } else {
     if (modalState.confirmLoading) return;
     const hide = message.loading(t('common.loading'), 0);
@@ -286,7 +287,7 @@ function fnModalVisibleByEdit(
           }
           modalState.title =
             t('common.editText') + t('views.system.dept.classInfo');
-          modalState.visibleByEdit = true;
+          modalState.openByEdit = true;
         } else {
           message.error(t('common.getInfoFail'), 2);
         }
@@ -317,7 +318,7 @@ function fnModalOk() {
               content: t('common.msgSuccess', { msg: modalState.title }),
               duration: 2,
             });
-            modalState.visibleByEdit = false;
+            modalState.openByEdit = false;
             // 新增时清空上级部门树重新获取
             if (!from.deptId) {
               treeDataAll = [];
@@ -346,8 +347,8 @@ function fnModalOk() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByEdit = false;
-  modalState.visibleByView = false;
+  modalState.openByEdit = false;
+  modalState.openByView = false;
   modalStateFrom.resetFields();
 }
 
@@ -605,7 +606,7 @@ onMounted(() => {
     <ProModal
       :drag="true"
       :width="800"
-      :visible="modalState.visibleByView"
+      :open="modalState.openByView"
       :title="modalState.title"
       @cancel="fnModalCancel"
     >
@@ -630,7 +631,7 @@ onMounted(() => {
             <template #suffixIcon></template>
           </a-tree-select>
         </a-form-item>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.dept.className')"
@@ -649,7 +650,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item :label="t('views.system.dept.status')" name="status">
               <DictTag
@@ -664,7 +665,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="24" :md="24" :xs="24">
             <a-form-item
               :label="t('views.system.dept.admin')"
@@ -701,7 +702,7 @@ onMounted(() => {
       :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
-      :visible="modalState.visibleByEdit"
+      :open="modalState.openByEdit"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnModalOk"
@@ -752,7 +753,7 @@ onMounted(() => {
           ></a-input>
         </a-form-item>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item :label="t('views.system.dept.status')" name="status">
               <a-select
@@ -778,7 +779,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :span="24">
             <a-form-item
               :label="t('views.system.dept.admin')"
diff --git a/src/views/system/dict/data.vue b/src/views/system/dict/data.vue
index 5f92ee42..d904fefe 100644
--- a/src/views/system/dict/data.vue
+++ b/src/views/system/dict/data.vue
@@ -3,10 +3,11 @@ import { useRoute, useRouter } from 'vue-router';
 import { getLocalColor, changePrimaryColor } from '@/hooks/useTheme';
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { Form, message, Modal } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { ProModal } from 'antdv-pro-modal';
+import { Form, message, Modal } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import {
   exportData,
   listData,
@@ -231,9 +232,9 @@ function fnTableSelectedRowKeys(keys: (string | number)[]) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**详情框是否显示 */
-  visibleByView: boolean;
+  openByView: boolean;
   /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -244,8 +245,8 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByView: false,
-  visibleByEdit: false,
+  openByView: false,
+  openByEdit: false,
   title: '字典数据',
   from: {
     dictCode: undefined,
@@ -293,7 +294,7 @@ const modalStateFrom = Form.useForm(
 function fnModalVisibleByVive(row: Record<string, string>) {
   modalState.from = Object.assign(modalState.from, row);
   modalState.title = t('views.system.dictData.viewInfo');
-  modalState.visibleByView = true;
+  modalState.openByView = true;
 }
 
 /**
@@ -305,7 +306,7 @@ function fnModalVisibleByEdit(dictCode?: string | number, record?: any) {
     modalStateFrom.resetFields();
     modalState.from.dictType = queryParams.dictType;
     modalState.title = t('views.system.dictData.addInfo');
-    modalState.visibleByEdit = true;
+    modalState.openByEdit = true;
   } else {
     if (modalState.confirmLoading) return;
     const hide = message.loading(t('common.loading'), 0);
@@ -316,7 +317,7 @@ function fnModalVisibleByEdit(dictCode?: string | number, record?: any) {
       if (res.code === RESULT_CODE_SUCCESS) {
         modalState.from = Object.assign(modalState.from, res.data);
         modalState.title = t('views.system.dictData.editInfo');
-        modalState.visibleByEdit = true;
+        modalState.openByEdit = true;
       } else {
         message.error(t('views.system.dictData.viewInfoErr'), 2);
       }
@@ -345,7 +346,7 @@ function fnModalOk() {
               key,
               duration: 2,
             });
-            modalState.visibleByEdit = false;
+            modalState.openByEdit = false;
             modalStateFrom.resetFields();
             fnGetList();
           } else {
@@ -370,8 +371,8 @@ function fnModalOk() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByEdit = false;
-  modalState.visibleByView = false;
+  modalState.openByEdit = false;
+  modalState.openByView = false;
   modalStateFrom.resetFields();
 }
 
@@ -579,7 +580,7 @@ onMounted(() => {
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
-        <div class="button-container">
+        <a-space :size="8" align="center">
           <a-button type="default" @click.prevent="fnClose()">
             <template #icon><CloseOutlined /></template>
             {{ t('common.close') }}
@@ -610,12 +611,12 @@ onMounted(() => {
             <template #icon><ExportOutlined /></template>
             {{ t('common.export') }}
           </a-button>
-        </div>
+        </a-space>
       </template>
 
       <!-- 插槽-卡片右侧 -->
       <template #extra>
-        <div class="button-container">
+        <a-space :size="8" align="center">
           <a-tooltip>
             <template #title>{{ t('common.searchBarText') }}</template>
             <a-switch
@@ -655,7 +656,7 @@ onMounted(() => {
               </template>
             </a-dropdown>
           </a-tooltip>
-        </div>
+        </a-space>
       </template>
 
       <!-- 表格列表 -->
@@ -720,12 +721,12 @@ onMounted(() => {
     <ProModal
       :drag="true"
       :width="800"
-      :visible="modalState.visibleByView"
+      :open="modalState.openByView"
       :title="modalState.title"
       @cancel="fnModalCancel"
     >
       <a-form layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true">
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.dictData.dictType')"
@@ -749,7 +750,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.dictData.dictCode')"
@@ -770,7 +771,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.dictData.dictLabel')"
@@ -788,7 +789,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.dictData.tagType')"
@@ -809,7 +810,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.dictData.tagTypeShow')"
@@ -857,7 +858,7 @@ onMounted(() => {
       :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
-      :visible="modalState.visibleByEdit"
+      :open="modalState.openByEdit"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnModalOk"
@@ -869,7 +870,7 @@ onMounted(() => {
         :label-col="{ span: 6 }"
         :label-wrap="true"
       >
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.dictData.dictType')"
@@ -900,7 +901,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.dictData.dictLabel')"
@@ -929,7 +930,7 @@ onMounted(() => {
           </a-col>
         </a-row>
         <!-- 首页状态取色器 -->
-        <a-row :gutter="16">
+        <a-row>
           <a-col
             :lg="12"
             :md="12"
@@ -977,7 +978,7 @@ onMounted(() => {
           </a-col>
         </a-row>
         <!-- 非首页状态取色器 -->
-        <a-row :gutter="16" v-if="modalState.from.dictType !== 'index_status'">
+        <a-row v-if="modalState.from.dictType !== 'index_status'">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.dictData.tagClass')"
diff --git a/src/views/system/dict/index.vue b/src/views/system/dict/index.vue
index 34ddef4b..2e97d0d7 100644
--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
@@ -2,10 +2,11 @@
 import { useRouter, useRoute } from 'vue-router';
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Modal, Form } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { ProModal } from 'antdv-pro-modal';
+import { message, Modal, Form } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import {
   exportType,
   listType,
@@ -181,9 +182,9 @@ function fnTableSelectedRowKeys(keys: (string | number)[]) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**详情框是否显示 */
-  visibleByView: boolean;
+  openByView: boolean;
   /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -194,8 +195,8 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByView: false,
-  visibleByEdit: false,
+  openByView: false,
+  openByEdit: false,
   title: '字典类型',
   from: {
     dictId: undefined,
@@ -248,7 +249,7 @@ function fnModalVisibleByVive(dictId: string | number) {
     if (res.code === RESULT_CODE_SUCCESS && res.data) {
       modalState.from = Object.assign(modalState.from, res.data);
       modalState.title = t('views.system.dict.dictInfo');
-      modalState.visibleByView = true;
+      modalState.openByView = true;
     } else {
       message.error(t('common.getInfoFail'), 2);
     }
@@ -263,7 +264,7 @@ function fnModalVisibleByEdit(dictId?: string | number) {
   if (!dictId) {
     modalStateFrom.resetFields();
     modalState.title = t('common.addText') + t('views.system.dict.dictType');
-    modalState.visibleByEdit = true;
+    modalState.openByEdit = true;
   } else {
     if (modalState.confirmLoading) return;
     const hide = message.loading(t('common.loading'), 0);
@@ -275,7 +276,7 @@ function fnModalVisibleByEdit(dictId?: string | number) {
         modalState.from = Object.assign(modalState.from, res.data);
         modalState.title =
           t('common.editText') + t('views.system.dict.dictType');
-        modalState.visibleByEdit = true;
+        modalState.openByEdit = true;
       } else {
         message.error(t('common.getInfoFail'), 2);
       }
@@ -304,7 +305,7 @@ function fnModalOk() {
               key,
               duration: 2,
             });
-            modalState.visibleByEdit = false;
+            modalState.openByEdit = false;
             modalStateFrom.resetFields();
             fnGetList(1);
           } else {
@@ -329,8 +330,8 @@ function fnModalOk() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByEdit = false;
-  modalState.visibleByView = false;
+  modalState.openByEdit = false;
+  modalState.openByView = false;
   modalStateFrom.resetFields();
 }
 
@@ -559,7 +560,7 @@ onMounted(() => {
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
-        <div class="button-container">
+        <a-space :size="8" align="center">
           <a-button
             type="primary"
             @click.prevent="fnModalVisibleByEdit()"
@@ -603,12 +604,12 @@ onMounted(() => {
             <template #icon><ExportOutlined /></template>
             {{ t('common.export') }}
           </a-button>
-        </div>
+        </a-space>
       </template>
 
       <!-- 插槽-卡片右侧 -->
       <template #extra>
-        <div class="button-container">
+        <a-space :size="8" align="center">
           <a-tooltip>
             <template #title>{{ t('common.searchBarText') }}</template>
             <a-switch
@@ -648,7 +649,7 @@ onMounted(() => {
               </template>
             </a-dropdown>
           </a-tooltip>
-        </div>
+        </a-space>
       </template>
 
       <!-- 表格列表 -->
@@ -725,7 +726,7 @@ onMounted(() => {
     <ProModal
       :drag="true"
       :width="800"
-      :visible="modalState.visibleByView"
+      :open="modalState.openByView"
       :title="modalState.title"
       @cancel="fnModalCancel"
     >
@@ -767,7 +768,7 @@ onMounted(() => {
       :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
-      :visible="modalState.visibleByEdit"
+      :open="modalState.openByEdit"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnModalOk"
diff --git a/src/views/system/log/login/index.vue b/src/views/system/log/login/index.vue
index b64e33f7..ee1e0ee7 100644
--- a/src/views/system/log/login/index.vue
+++ b/src/views/system/log/login/index.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Modal } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { message, Modal } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import {
   exportSysLogLogin,
   listSysLogLogin,
diff --git a/src/views/system/log/operate/index.vue b/src/views/system/log/operate/index.vue
index 6712bbd0..12831990 100644
--- a/src/views/system/log/operate/index.vue
+++ b/src/views/system/log/operate/index.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Modal } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { ProModal } from 'antdv-pro-modal';
+import { message, Modal } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import {
   exportSysLogOperate,
   listSysLogOperate,
@@ -208,7 +209,7 @@ function fnTableSelectedRowKeys(keys: (string | number)[]) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**详情框是否显示 */
-  visibleByView: boolean;
+  openByView: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -217,7 +218,7 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByView: false,
+  openByView: false,
   title: '操作日志',
   from: {
     operId: undefined,
@@ -245,14 +246,14 @@ let modalState: ModalStateType = reactive({
 function fnModalVisibleByVive(row: Record<string, string>) {
   modalState.from = Object.assign(modalState.from, row);
   modalState.title = t('views.system.log.operate.logInfo');
-  modalState.visibleByView = true;
+  modalState.openByView = true;
 }
 
 /**
  * 对话框弹出关闭执行函数
  */
 function fnModalCancel() {
-  modalState.visibleByView = false;
+  modalState.openByView = false;
 }
 
 /**记录删除 */
@@ -609,12 +610,12 @@ onMounted(() => {
     <ProModal
       :drag="true"
       :width="800"
-      :visible="modalState.visibleByView"
+      :open="modalState.openByView"
       :title="modalState.title"
       @cancel="fnModalCancel"
     >
       <a-form layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true">
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.log.operate.operId')"
@@ -639,7 +640,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.log.operate.workType')"
@@ -661,7 +662,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.log.operate.RequestIp')"
@@ -682,7 +683,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.log.operate.useTime')"
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index 06f07173..91506c13 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Modal, Form } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { ProModal } from 'antdv-pro-modal';
+import { message, Modal, Form } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import IconFont from '@/components/IconFont/index.vue';
 import { iconFonts } from '@/assets/js/icon_font_8d5l8fzk5b87iudi';
 import { reactive, onMounted, toRaw } from 'vue';
@@ -213,9 +214,9 @@ function fnTreeDataChange(value: any) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**详情框是否显示 */
-  visibleByView: boolean;
+  openByView: boolean;
   /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -228,8 +229,8 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByView: false,
-  visibleByEdit: false,
+  openByView: false,
+  openByEdit: false,
   title: '菜单',
   from: {
     menuId: undefined,
@@ -317,7 +318,7 @@ function fnModalVisibleByVive(menuId: string | number) {
     if (res.code === RESULT_CODE_SUCCESS && res.data) {
       modalState.from = Object.assign(modalState.from, res.data);
       modalState.title = t('views.system.menu.menuInfo');
-      modalState.visibleByView = true;
+      modalState.openByView = true;
     } else {
       message.error(t('common.getInfoFail'), 2);
     }
@@ -342,7 +343,7 @@ function fnModalVisibleByEdit(
       modalState.from.parentType = parentType;
     }
     modalState.title = t('common.addText') + t('views.system.menu.menuInfo');
-    modalState.visibleByEdit = true;
+    modalState.openByEdit = true;
   } else {
     if (modalState.confirmLoading) return;
     const hide = message.loading(t('common.loading'), 0);
@@ -354,7 +355,7 @@ function fnModalVisibleByEdit(
         modalState.from = Object.assign(modalState.from, res.data);
         modalState.title =
           t('common.editText') + t('views.system.menu.menuInfo');
-        modalState.visibleByEdit = true;
+        modalState.openByEdit = true;
       } else {
         message.error(t('common.getInfoFail'), 2);
       }
@@ -395,7 +396,7 @@ function fnModalOk() {
               key,
               duration: 2,
             });
-            modalState.visibleByEdit = false;
+            modalState.openByEdit = false;
             modalStateFrom.resetFields();
             treeDataAll = [];
             fnGetList();
@@ -421,8 +422,8 @@ function fnModalOk() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByEdit = false;
-  modalState.visibleByView = false;
+  modalState.openByEdit = false;
+  modalState.openByView = false;
   modalStateFrom.resetFields();
 }
 
@@ -720,7 +721,7 @@ onMounted(() => {
     <ProModal
       :drag="true"
       :width="800"
-      :visible="modalState.visibleByView"
+      :open="modalState.openByView"
       :title="modalState.title"
       @cancel="fnModalCancel"
     >
@@ -753,7 +754,7 @@ onMounted(() => {
         >
           {{ modalState.from.menuName }}
         </a-form-item>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item :label="t('views.system.menu.menuId')" name="menuId">
               {{ modalState.from.menuId }}
@@ -768,7 +769,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.menu.menuType')"
@@ -804,7 +805,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col
             :lg="12"
             :md="12"
@@ -830,10 +831,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row
-          :gutter="16"
-          v-if="modalState.from.menuType !== MENU_TYPE_BUTTON"
-        >
+        <a-row v-if="modalState.from.menuType !== MENU_TYPE_BUTTON">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item :label="t('views.system.menu.local')" name="isFrame">
               <a-tag color="default">
@@ -917,7 +915,7 @@ onMounted(() => {
       :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
-      :visible="modalState.visibleByEdit"
+      :open="modalState.openByEdit"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnModalOk"
@@ -955,7 +953,7 @@ onMounted(() => {
           </a-tree-select>
         </a-form-item>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.menu.menuName')"
@@ -1010,10 +1008,7 @@ onMounted(() => {
           </a-radio-group>
         </a-form-item>
 
-        <a-row
-          :gutter="16"
-          v-if="modalState.from.menuType !== MENU_TYPE_BUTTON"
-        >
+        <a-row v-if="modalState.from.menuType !== MENU_TYPE_BUTTON">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item :label="t('views.system.menu.menuTitle')" name="icon">
               <a-select
@@ -1052,7 +1047,7 @@ onMounted(() => {
                         }}
                       </div>
                     </template>
-                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                    <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
                   </a-tooltip>
                 </template>
               </a-input>
@@ -1060,10 +1055,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row
-          :gutter="16"
-          v-if="modalState.from.menuType !== MENU_TYPE_BUTTON"
-        >
+        <a-row v-if="modalState.from.menuType !== MENU_TYPE_BUTTON">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item :label="t('views.system.menu.local')" name="isFrame">
               <a-select
@@ -1143,7 +1135,7 @@ onMounted(() => {
                     {{ t('views.system.menu.componentTip') }}
                   </div>
                 </template>
-                <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
               </a-tooltip>
             </template>
           </a-input>
@@ -1165,7 +1157,7 @@ onMounted(() => {
                     {{ t('views.system.menu.perms') }}
                   </div>
                 </template>
-                <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
               </a-tooltip>
             </template>
           </a-input>
diff --git a/src/views/system/post/index.vue b/src/views/system/post/index.vue
index 9e824675..baf5ce60 100644
--- a/src/views/system/post/index.vue
+++ b/src/views/system/post/index.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { reactive, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Modal, Form } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { ProModal } from 'antdv-pro-modal';
+import { message, Modal, Form } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import {
   exportPost,
   listPost,
@@ -171,9 +172,9 @@ function fnTableSelectedRowKeys(keys: (string | number)[]) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**详情框是否显示 */
-  visibleByView: boolean;
+  openByView: boolean;
   /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -184,8 +185,8 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByView: false,
-  visibleByEdit: false,
+  openByView: false,
+  openByEdit: false,
   title: '岗位',
   from: {
     postId: undefined,
@@ -240,7 +241,7 @@ function fnModalVisibleByVive(postId: string | number) {
     if (res.code === RESULT_CODE_SUCCESS && res.data) {
       modalState.from = Object.assign(modalState.from, res.data);
       modalState.title = t('views.system.post.positionInfo');
-      modalState.visibleByView = true;
+      modalState.openByView = true;
     } else {
       message.error(t('common.getInfoFail'), 2);
     }
@@ -256,7 +257,7 @@ function fnModalVisibleByEdit(postId?: string | number) {
     modalStateFrom.resetFields();
     modalState.title =
       t('common.addText') + t('views.system.post.positionInfo');
-    modalState.visibleByEdit = true;
+    modalState.openByEdit = true;
   } else {
     if (modalState.confirmLoading) return;
     const hide = message.loading(t('common.loading'), 0);
@@ -268,7 +269,7 @@ function fnModalVisibleByEdit(postId?: string | number) {
         modalState.from = Object.assign(modalState.from, res.data);
         modalState.title =
           t('common.editText') + t('views.system.post.positionInfo');
-        modalState.visibleByEdit = true;
+        modalState.openByEdit = true;
       } else {
         message.error(t('common.getInfoFail'), 2);
       }
@@ -297,7 +298,7 @@ function fnModalOk() {
               key,
               duration: 2,
             });
-            modalState.visibleByEdit = false;
+            modalState.openByEdit = false;
             modalStateFrom.resetFields();
             fnGetList(1);
           } else {
@@ -322,8 +323,8 @@ function fnModalOk() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByEdit = false;
-  modalState.visibleByView = false;
+  modalState.openByEdit = false;
+  modalState.openByView = false;
   modalStateFrom.resetFields();
 }
 
@@ -497,7 +498,7 @@ onMounted(() => {
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
-        <div class="button-container">
+        <a-space :size="8" align="center">
           <a-button
             type="primary"
             @click.prevent="fnModalVisibleByEdit()"
@@ -524,12 +525,12 @@ onMounted(() => {
             <template #icon><ExportOutlined /></template>
             {{ t('common.export') }}
           </a-button>
-        </div>
+        </a-space>
       </template>
 
       <!-- 插槽-卡片右侧 -->
       <template #extra>
-        <div class="button-container">
+        <a-space :size="8" align="center">
           <a-tooltip>
             <template #title>{{ t('common.searchBarText') }}</template>
             <a-switch
@@ -569,7 +570,7 @@ onMounted(() => {
               </template>
             </a-dropdown>
           </a-tooltip>
-        </div>
+        </a-space>
       </template>
 
       <!-- 表格列表 -->
@@ -634,12 +635,12 @@ onMounted(() => {
     <ProModal
       :drag="true"
       :width="800"
-      :visible="modalState.visibleByView"
+      :open="modalState.openByView"
       :title="modalState.title"
       @cancel="fnModalCancel"
     >
       <a-form layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true">
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.post.positionId')"
@@ -659,7 +660,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.post.positionSort')"
@@ -680,7 +681,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.post.positionName')"
@@ -725,7 +726,7 @@ onMounted(() => {
       :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
-      :visible="modalState.visibleByEdit"
+      :open="modalState.openByEdit"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnModalOk"
@@ -737,7 +738,7 @@ onMounted(() => {
         :label-col="{ span: 6 }"
         :label-wrap="true"
       >
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.post.positionName')"
@@ -765,7 +766,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.post.positionCode')"
diff --git a/src/views/system/quick-start/components/Done.vue b/src/views/system/quick-start/components/Done.vue
index 80815f11..f106cbbe 100644
--- a/src/views/system/quick-start/components/Done.vue
+++ b/src/views/system/quick-start/components/Done.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { stepState, fnToStepName } from '../hooks/useStep';
-import { Modal } from 'ant-design-vue/lib';
+import { Modal } from 'ant-design-vue/es';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { removeToken } from '@/plugins/auth-token';
 import { useRouter } from 'vue-router';
diff --git a/src/views/system/quick-start/components/NeInfoConfig.vue b/src/views/system/quick-start/components/NeInfoConfig.vue
index 3e7c9453..b5cdd41c 100644
--- a/src/views/system/quick-start/components/NeInfoConfig.vue
+++ b/src/views/system/quick-start/components/NeInfoConfig.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { Modal, message } from 'ant-design-vue/lib';
+import { ProModal } from 'antdv-pro-modal';
+import { Modal, message } from 'ant-design-vue/es';
 import { nextTick, onMounted, reactive, ref, toRaw } from 'vue';
 import {
   addNeInfo,
@@ -53,7 +54,7 @@ const tabState: TabStateType = reactive({
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -66,7 +67,7 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByEdit: false,
+  openByEdit: false,
   title: '网元配置',
   from: {
     id: undefined,
@@ -274,7 +275,7 @@ function fnModalVisibleByEdit(record?: any) {
         },
       ],
     };
-    modalState.visibleByEdit = true;
+    modalState.openByEdit = true;
   } else {
     //获取单个网元信息 当修改时
     if (modalState.confirmLoading) return;
@@ -287,7 +288,7 @@ function fnModalVisibleByEdit(record?: any) {
       if (res.code === RESULT_CODE_SUCCESS) {
         Object.assign(modalState.from, res.data);
         modalState.title = t('views.configManage.neManage.editNe');
-        modalState.visibleByEdit = true;
+        modalState.openByEdit = true;
       } else {
         message.error(t('common.getInfoFail'), 2);
       }
@@ -361,7 +362,7 @@ function fnDelete(data: any) {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByEdit = false;
+  modalState.openByEdit = false;
   modalState.confirmLoading = false;
   tabState.confirmLoading = false;
 }
@@ -609,7 +610,7 @@ onMounted(() => {
     :destroyOnClose="true"
     :keyboard="false"
     :mask-closable="false"
-    :visible="modalState.visibleByEdit"
+    :open="modalState.openByEdit"
     :title="modalState.title"
     :confirm-loading="modalState.confirmLoading"
     @ok="fnModalOk"
@@ -623,7 +624,7 @@ onMounted(() => {
       :model="modalState.from"
       autocomplete="off"
     >
-      <a-row :gutter="16">
+      <a-row>
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label="t('views.ne.common.neType')"
@@ -652,7 +653,7 @@ onMounted(() => {
                     <template #title>
                       {{ t('views.ne.common.neTypeTip') }}
                     </template>
-                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                    <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
                   </a-tooltip>
                 </template>
               </a-input>
@@ -680,7 +681,7 @@ onMounted(() => {
                   <template #title>
                     {{ t('views.ne.common.neIdTip') }}
                   </template>
-                  <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
                 </a-tooltip>
               </template>
             </a-input>
@@ -688,7 +689,7 @@ onMounted(() => {
         </a-col>
       </a-row>
 
-      <a-row :gutter="16">
+      <a-row>
         <a-col :lg="12" :md="12" :xs="24">
           <a-form-item
             :label="t('views.ne.common.ipAddr')"
@@ -716,7 +717,7 @@ onMounted(() => {
                       {{ t('views.ne.common.ipAddrTip') }}
                     </div>
                   </template>
-                  <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
                 </a-tooltip>
               </template>
             </a-input>
@@ -731,7 +732,7 @@ onMounted(() => {
         </a-divider>
 
         <!-- 主机连接配置 -->
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item :label="t('views.ne.neHost.addr')">
               <a-input
@@ -758,7 +759,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item :label="t('views.ne.neHost.user')">
               <a-input
diff --git a/src/views/system/quick-start/components/NeInfoConfigPara5G.vue b/src/views/system/quick-start/components/NeInfoConfigPara5G.vue
index 99364ae3..caa88525 100644
--- a/src/views/system/quick-start/components/NeInfoConfigPara5G.vue
+++ b/src/views/system/quick-start/components/NeInfoConfigPara5G.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Modal, message } from 'ant-design-vue/lib';
+import { Modal, message } from 'ant-design-vue/es';
 import { onMounted, reactive, toRaw } from 'vue';
 import { fnToStepName } from '../hooks/useStep';
 import useI18n from '@/hooks/useI18n';
@@ -147,6 +147,9 @@ function fnGetList() {
           case 'N3IWF':
             state.from.sbi.n3iwf_ip = item.ip;
             break;
+          case 'SMSC':
+            state.from.sbi.smsc_ip = item.ip;
+            break;
         }
       }
     }
diff --git a/src/views/system/quick-start/components/NeInfoSoftwareInstall.vue b/src/views/system/quick-start/components/NeInfoSoftwareInstall.vue
index 6ddec5e0..54a3b42c 100644
--- a/src/views/system/quick-start/components/NeInfoSoftwareInstall.vue
+++ b/src/views/system/quick-start/components/NeInfoSoftwareInstall.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { Modal, TableColumnsType } from 'ant-design-vue/lib';
 import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
+import { ProModal } from 'antdv-pro-modal';
+import { Modal, TableColumnsType } from 'ant-design-vue/es';
 import { fnToStepName } from '../hooks/useStep';
 import useI18n from '@/hooks/useI18n';
 import useDictStore from '@/store/modules/dict';
@@ -68,9 +69,9 @@ type StateType = {
   /**勾选单行记录 */
   selectedRowOne: any;
   /**多文件上传 */
-  visibleByMoreFile: boolean;
+  openByMoreFile: boolean;
   /**勾选安装弹窗 */
-  visibleByInstall: boolean;
+  openByInstall: boolean;
   /**操作数据进行版本升级 */
   operateDataUpgrade: any[];
   /**确定按钮 loading */
@@ -83,8 +84,8 @@ let state: StateType = reactive({
   data: [],
   selectedRowKeys: [],
   selectedRowOne: { neType: '' },
-  visibleByMoreFile: false,
-  visibleByInstall: false,
+  openByMoreFile: false,
+  openByInstall: false,
   operateDataUpgrade: [],
   confirmLoading: false,
 });
@@ -106,15 +107,15 @@ function fnTableSelectedRowKeys(
 /**对话框弹出确认执行函数*/
 function fnModalOk() {
   fnGetList();
-  if (state.visibleByInstall) {
+  if (state.openByInstall) {
     fnModalCancel();
   }
 }
 
 /**对话框弹出关闭执行函数*/
 function fnModalCancel() {
-  state.visibleByMoreFile = false;
-  state.visibleByInstall = false;
+  state.openByMoreFile = false;
+  state.openByInstall = false;
   state.operateDataUpgrade = [];
 }
 
@@ -133,7 +134,7 @@ function fnRecordInstallConfirm() {
 async function fnRecordInstall() {
   if (state.confirmLoading) return;
   state.confirmLoading = true;
-  state.visibleByInstall = true;
+  state.openByInstall = true;
   // 操作升级的网元数据
   const selectRows = state.data.filter(item =>
     state.selectedRowKeys.includes(item.id)
@@ -280,7 +281,7 @@ onMounted(() => {
           type="dashed"
           :disabled="state.selectedRowKeys.length > 1"
           @click.prevent="
-            () => (state.visibleByMoreFile = !state.visibleByMoreFile)
+            () => (state.openByMoreFile = !state.openByMoreFile)
           "
         >
           <template #icon><UploadOutlined /></template>
@@ -308,7 +309,7 @@ onMounted(() => {
 
   <!-- 新增多文件上传框 -->
   <UploadMoreFile
-    v-model:visible="state.visibleByMoreFile"
+    v-model:open="state.openByMoreFile"
     :ne-type="state.selectedRowOne.neType"
     @ok="fnModalOk"
     @cancel="fnModalCancel"
@@ -321,7 +322,7 @@ onMounted(() => {
     :body-style="{ height: '520px', overflowY: 'scroll' }"
     :keyboard="false"
     :mask-closable="false"
-    :visible="state.visibleByInstall"
+    :open="state.openByInstall"
     :title="t('views.system.quickStart.stepInstallModal')"
     :closable="false"
     @ok="fnModalOk"
diff --git a/src/views/system/quick-start/components/NeInfoSoftwareLicense.vue b/src/views/system/quick-start/components/NeInfoSoftwareLicense.vue
index ddd627a0..ecbf574e 100644
--- a/src/views/system/quick-start/components/NeInfoSoftwareLicense.vue
+++ b/src/views/system/quick-start/components/NeInfoSoftwareLicense.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Modal, TableColumnsType, message } from 'ant-design-vue/lib';
+import { Modal, TableColumnsType, message } from 'ant-design-vue/es';
 import { defineAsyncComponent, h, onMounted, reactive, ref } from 'vue';
 import { fnToStepName, stepState } from '../hooks/useStep';
 import useI18n from '@/hooks/useI18n';
@@ -64,7 +64,7 @@ type StateType = {
   /**勾选记录 */
   selectedRowKeys: (string | number)[];
   /**授权文件上传 */
-  visibleByLicenseFile: boolean;
+  openByLicenseFile: boolean;
   /**授权文件上传勾选指定到网元授权列表 */
   neLicenseList: any[];
   /**确定按钮 loading */
@@ -76,7 +76,7 @@ let state: StateType = reactive({
   loading: false,
   data: [],
   selectedRowKeys: [],
-  visibleByLicenseFile: false,
+  openByLicenseFile: false,
   neLicenseList: [],
   confirmLoading: false,
 });
@@ -93,7 +93,7 @@ function fnModalOk() {
 
 /**对话框弹出关闭执行函数*/
 function fnModalCancel() {
-  state.visibleByLicenseFile = false;
+  state.openByLicenseFile = false;
 }
 
 /**对话框弹出打开执行函数 */
@@ -108,7 +108,7 @@ function fnModalOpen() {
     state.neLicenseList = [];
   }
 
-  state.visibleByLicenseFile = !state.visibleByLicenseFile;
+  state.openByLicenseFile = !state.openByLicenseFile;
 }
 
 /**勾选刷新网元状态 */
@@ -278,7 +278,7 @@ onMounted(() => {
 
     <!-- 授权文件上传框 -->
     <UploadLicenseFile
-      v-model:visible="state.visibleByLicenseFile"
+      v-model:open="state.openByLicenseFile"
       :licenseList="state.neLicenseList"
       @ok="fnModalOk"
       @cancel="fnModalCancel"
diff --git a/src/views/system/quick-start/components/SystemConfig.vue b/src/views/system/quick-start/components/SystemConfig.vue
index 5e06321f..2a7fd1aa 100644
--- a/src/views/system/quick-start/components/SystemConfig.vue
+++ b/src/views/system/quick-start/components/SystemConfig.vue
@@ -4,12 +4,12 @@ import useI18n from '@/hooks/useI18n';
 import { nextTick, onMounted, reactive, watch } from 'vue';
 import useAppStore from '@/store/modules/app';
 import { parseUrlPath } from '@/plugins/file-static-url';
-import { Modal, message } from 'ant-design-vue/lib';
+import { Modal, message } from 'ant-design-vue/es';
 import { transferStaticFile, uploadFile } from '@/api/tool/file';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { sessionGet } from '@/utils/cache-session-utils';
-import { FileType } from 'ant-design-vue/lib/upload/interface';
-import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
+import { FileType } from 'ant-design-vue/es/upload/interface';
+import { UploadRequestOption } from 'ant-design-vue/es/vc-upload/interface';
 import { changeValue } from '@/api/system/config';
 import { bootloaderAccount } from '@/api/system/quick-start/bootloader';
 const { t, currentLocale } = useI18n();
diff --git a/src/views/system/quick-start/index.vue b/src/views/system/quick-start/index.vue
index 5aad5429..cc031464 100644
--- a/src/views/system/quick-start/index.vue
+++ b/src/views/system/quick-start/index.vue
@@ -79,12 +79,17 @@ onMounted(() => {
 
   // background: url('./../assets/black_dot.png') 0% 0% / 14px 14px repeat;
 
-  background-image: url(@/assets/background.jpg);
+  background-image: url(@/assets/background_light.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
 }
 
+[data-theme='dark'] .container {
+  background-image: url(@/assets/background_dark.jpg);
+  background-color: #141414;
+}
+
 .build-card {
   position: absolute;
   top: 50%;
diff --git a/src/views/system/role/auth-user.vue b/src/views/system/role/auth-user.vue
index 9ece98a9..194a5068 100644
--- a/src/views/system/role/auth-user.vue
+++ b/src/views/system/role/auth-user.vue
@@ -2,10 +2,10 @@
 import { useRoute, useRouter } from 'vue-router';
 import { reactive, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Modal } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { message, Modal } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import AuthUserSelect from './components/auth-user-select.vue';
 import { authUserAllocatedList, authUserChecked } from '@/api/system/role';
 import { parseDateToStr } from '@/utils/date-utils';
@@ -176,14 +176,14 @@ function fnTableSelectedRowKeys(keys: (string | number)[]) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**选择用户框是否显示 */
-  visibleBySelectUser: boolean;
+  openBySelectUser: boolean;
   /**标题 */
   title: string;
 };
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleBySelectUser: false,
+  openBySelectUser: false,
   title: t('views.system.role.distributeUser'),
 });
 
@@ -191,7 +191,7 @@ let modalState: ModalStateType = reactive({
  * 对话框弹出显示为 选择用户
  */
 function fnModalVisibleBySelectUser() {
-  modalState.visibleBySelectUser = true;
+  modalState.openBySelectUser = true;
 }
 
 /**
@@ -211,7 +211,7 @@ function fnModalOk(userIds: string[] | number[]) {
     roleId: roleId,
   }).then(res => {
     if (res.code === RESULT_CODE_SUCCESS) {
-      modalState.visibleBySelectUser = false;
+      modalState.openBySelectUser = false;
       message.success({
         content: t('views.system.role.suss', {
           oper: t('views.system.role.giveUser'),
@@ -390,7 +390,7 @@ onMounted(() => {
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
-        <div class="button-container">
+        <a-space :size="8" align="center">
           <a-button type="default" @click.prevent="fnClose()">
             <template #icon><CloseOutlined /></template>
             {{ t('common.cancel') }}
@@ -413,12 +413,12 @@ onMounted(() => {
             <template #icon><UsergroupDeleteOutlined /></template>
             {{ t('views.system.role.batchCancel') }}
           </a-button>
-        </div>
+        </a-space>
       </template>
 
       <!-- 插槽-卡片右侧 -->
       <template #extra>
-        <div class="button-container">
+        <a-space :size="8" align="center">
           <a-tooltip>
             <template #title>{{ t('common.searchBarText') }}</template>
             <a-switch
@@ -458,7 +458,7 @@ onMounted(() => {
               </template>
             </a-dropdown>
           </a-tooltip>
-        </div>
+        </a-space>
       </template>
 
       <!-- 表格列表 -->
@@ -505,7 +505,7 @@ onMounted(() => {
     <AuthUserSelect
       :role-id="roleId"
       :title="modalState.title"
-      v-model:visible="modalState.visibleBySelectUser"
+      v-model:open="modalState.openBySelectUser"
       @ok="fnModalOk"
     />
   </PageContainer>
diff --git a/src/views/system/role/components/auth-user-select.vue b/src/views/system/role/components/auth-user-select.vue
index 650181a9..a3c55a9e 100644
--- a/src/views/system/role/components/auth-user-select.vue
+++ b/src/views/system/role/components/auth-user-select.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { reactive, toRaw, watch } from 'vue';
-import { message } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { message } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { ColumnsType } from 'ant-design-vue/es/table';
+import { ProModal } from 'antdv-pro-modal';
 import { authUserAllocatedList } from '@/api/system/role';
 import { parseDateToStr } from '@/utils/date-utils';
 import useDictStore from '@/store/modules/dict';
@@ -10,13 +11,13 @@ import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import useI18n from '@/hooks/useI18n';
 const { t } = useI18n();
 const { getDict } = useDictStore();
-const emit = defineEmits(['ok', 'cancel', 'update:visible']);
+const emit = defineEmits(['ok', 'cancel', 'update:open']);
 const props = defineProps({
   title: {
     type: String,
     default: '标题',
   },
-  visible: {
+  open: {
     type: Boolean,
     default: false,
   },
@@ -203,13 +204,13 @@ function fnModalOk() {
     message.error(t('views.system.role.selectPls'), 2);
     return;
   }
-  emit('update:visible', false);
+  emit('update:open', false);
   emit('ok', userIds);
 }
 
 /**弹框取消按钮事件 */
 function fnModalCancel() {
-  emit('update:visible', false);
+  emit('update:open', false);
   emit('cancel');
 }
 
@@ -227,7 +228,7 @@ function init() {
 
 /**监听是否显示，初始数据 */
 watch(
-  () => props.visible,
+  () => props.open,
   val => {
     if (val) init();
   }
@@ -240,7 +241,7 @@ watch(
     :destroyOnClose="true"
     :forceFullscreen="true"
     :title="props.title"
-    :visible="props.visible"
+    :open="props.open"
     :keyboard="false"
     :mask-closable="false"
     @ok="fnModalOk"
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 71143a1e..8faa1cc2 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -2,10 +2,11 @@
 import { useRouter, useRoute } from 'vue-router';
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Modal, Form } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { ProModal } from 'antdv-pro-modal';
+import { message, Modal, Form } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import {
   exportRole,
   addRole,
@@ -21,7 +22,7 @@ import { roleDeptTreeSelect } from '@/api/system/dept';
 import { saveAs } from 'file-saver';
 import { parseDateToStr } from '@/utils/date-utils';
 import useDictStore from '@/store/modules/dict';
-import { DataNode } from 'ant-design-vue/lib/tree';
+import { DataNode } from 'ant-design-vue/es/tree';
 import { parseTreeKeys, parseTreeNodeKeys } from '@/utils/parse-tree-utils';
 import { hasPermissions } from '@/plugins/auth-user';
 import { MENU_PATH_INLINE } from '@/constants/menu-constants';
@@ -225,11 +226,11 @@ let deptTree: TreeDataType = {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**详情框是否显示 */
-  visibleByView: boolean;
+  openByView: boolean;
   /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**分配角色数据权限修改框是否显示 */
-  visibleByDataScope: boolean;
+  openByDataScope: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -244,9 +245,9 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByView: false,
-  visibleByEdit: false,
-  visibleByDataScope: false,
+  openByView: false,
+  openByEdit: false,
+  openByDataScope: false,
   title: '角色',
   from: {
     roleId: undefined,
@@ -330,7 +331,7 @@ function fnModalVisibleByVive(roleId: string | number) {
         modalState.from.menuIds = checkedKeys;
       }
       modalState.title = t('views.system.role.roleInfo');
-      modalState.visibleByView = true;
+      modalState.openByView = true;
     } else {
       message.error(t('common.getInfoFail'), 2);
     }
@@ -347,7 +348,7 @@ function fnModalVisibleByEdit(roleId?: string | number) {
     if (menuTree.treeData.length > 0) {
       modalState.menuTree.treeData = menuTree.treeData;
       modalState.title = t('common.addText') + t('views.system.role.roleInfo');
-      modalState.visibleByEdit = true;
+      modalState.openByEdit = true;
     } else {
       if (modalState.confirmLoading) return;
       const hide = message.loading(t('common.loading'), 0);
@@ -363,7 +364,7 @@ function fnModalVisibleByEdit(roleId?: string | number) {
           modalState.menuTree.treeData = res.data;
           modalState.title =
             t('common.addText') + t('views.system.role.roleInfo');
-          modalState.visibleByEdit = true;
+          modalState.openByEdit = true;
         }
       });
     }
@@ -388,7 +389,7 @@ function fnModalVisibleByEdit(roleId?: string | number) {
         }
         modalState.title =
           t('common.editText') + t('views.system.role.roleInfo');
-        modalState.visibleByEdit = true;
+        modalState.openByEdit = true;
       } else {
         message.error(t('common.getInfoFail'), 2);
       }
@@ -417,7 +418,7 @@ function fnModalOk() {
               key,
               duration: 2,
             });
-            modalState.visibleByEdit = false;
+            modalState.openByEdit = false;
             modalStateFrom.resetFields();
             fnGetList(1);
           } else {
@@ -442,9 +443,9 @@ function fnModalOk() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByEdit = false;
-  modalState.visibleByView = false;
-  modalState.visibleByDataScope = false;
+  modalState.openByEdit = false;
+  modalState.openByView = false;
+  modalState.openByDataScope = false;
   modalStateFrom.resetFields();
   modalState.menuTree.checkedKeys = [];
   modalState.menuTree.expandedKeys = [];
@@ -527,7 +528,7 @@ function fnModalOkDataScope() {
           content: t('common.msgSuccess', { msg: modalState.title }),
           duration: 2,
         });
-        modalState.visibleByDataScope = false;
+        modalState.openByDataScope = false;
         modalStateFrom.resetFields();
       } else {
         message.error({
@@ -569,7 +570,7 @@ function fnRecordDataScope(roleId: string | number) {
           modalState.from.deptIds = checkedKeys;
         }
         modalState.title = t('views.system.role.distribute');
-        modalState.visibleByDataScope = true;
+        modalState.openByDataScope = true;
       } else {
         message.error(t('common.getInfoFail'), 2);
       }
@@ -823,7 +824,7 @@ onMounted(() => {
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
-        <div class="button-container">
+        <a-space :size="8" align="center">
           <a-button
             type="primary"
             @click.prevent="fnModalVisibleByEdit()"
@@ -850,7 +851,7 @@ onMounted(() => {
             <template #icon><ExportOutlined /></template>
             {{ t('common.export') }}
           </a-button>
-        </div>
+        </a-space>
       </template>
 
       <!-- 插槽-卡片右侧 -->
@@ -1003,12 +1004,12 @@ onMounted(() => {
       :drag="true"
       :width="800"
       :destroyOnClose="false"
-      :visible="modalState.visibleByView"
+      :open="modalState.openByView"
       :title="modalState.title"
       @cancel="fnModalCancel"
     >
       <a-form layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true">
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item :label="t('views.system.role.roleId')" name="roleId">
               {{ modalState.from.roleId }}
@@ -1025,7 +1026,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.role.roleSort')"
@@ -1046,7 +1047,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.role.roleName')"
@@ -1109,7 +1110,7 @@ onMounted(() => {
       :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
-      :visible="modalState.visibleByEdit"
+      :open="modalState.openByEdit"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnModalOk"
@@ -1121,7 +1122,7 @@ onMounted(() => {
         :label-col="{ span: 6 }"
         :label-wrap="true"
       >
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.role.roleName')"
@@ -1149,7 +1150,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.role.roleKey')"
@@ -1164,7 +1165,7 @@ onMounted(() => {
                         {{ t('views.system.role.roleKeyTip') }}
                       </div>
                     </template>
-                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                    <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
                   </a-tooltip>
                 </template>
               </a-input>
@@ -1254,7 +1255,7 @@ onMounted(() => {
       :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
-      :visible="modalState.visibleByDataScope"
+      :open="modalState.openByDataScope"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnModalOkDataScope"
@@ -1266,7 +1267,7 @@ onMounted(() => {
         :label-col="{ span: 6 }"
         :label-wrap="true"
       >
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item :label="t('views.system.role.roleId')" name="roleId">
               {{ modalState.from.roleId }}
@@ -1283,7 +1284,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.role.roleSort')"
@@ -1304,7 +1305,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.role.roleName')"
diff --git a/src/views/system/setting/components/change-copyright.vue b/src/views/system/setting/components/change-copyright.vue
index 08e92e03..3d4bf59c 100644
--- a/src/views/system/setting/components/change-copyright.vue
+++ b/src/views/system/setting/components/change-copyright.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Modal, message } from 'ant-design-vue/lib';
+import { Modal, message } from 'ant-design-vue/es';
 import { onMounted, reactive } from 'vue';
 import useAppStore from '@/store/modules/app';
 import useI18n from '@/hooks/useI18n';
@@ -64,7 +64,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <a-row :gutter="16">
+  <a-row>
     <a-col :lg="12" :md="12" :xs="24" style="margin-bottom: 30px">
       <a-form layout="vertical" v-if="state.edite">
         <a-form-item>
@@ -111,7 +111,8 @@ onMounted(() => {
 
 <style lang="less" scoped>
 .sys-copyright {
-  color: rgba(0, 0, 0, 0.75);
+  color: inherit;
+  opacity: 0.75;
   font-size: 14px;
   font-weight: 600;
   line-height: 1.4;
diff --git a/src/views/system/setting/components/change-help-doc.vue b/src/views/system/setting/components/change-help-doc.vue
index ca8e76c1..f0141a73 100644
--- a/src/views/system/setting/components/change-help-doc.vue
+++ b/src/views/system/setting/components/change-help-doc.vue
@@ -1,12 +1,12 @@
 <script lang="ts" setup>
-import { Modal, message } from 'ant-design-vue/lib';
+import { Modal, message } from 'ant-design-vue/es';
 import { onMounted, reactive } from 'vue';
 import useAppStore from '@/store/modules/app';
 import useI18n from '@/hooks/useI18n';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { transferStaticFile, uploadFileChunk } from '@/api/tool/file';
-import { FileType } from 'ant-design-vue/lib/upload/interface';
-import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
+import { FileType } from 'ant-design-vue/es/upload/interface';
+import { UploadRequestOption } from 'ant-design-vue/es/vc-upload/interface';
 import { useRouter } from 'vue-router';
 const appStore = useAppStore();
 const router = useRouter();
@@ -113,7 +113,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <a-row :gutter="16">
+  <a-row>
     <a-col :lg="12" :md="12" :xs="24" style="margin-bottom: 30px">
       <a-form layout="vertical">
         <template v-if="state.edite">
diff --git a/src/views/system/setting/components/change-home-index.vue b/src/views/system/setting/components/change-home-index.vue
index e96f039b..b782276b 100644
--- a/src/views/system/setting/components/change-home-index.vue
+++ b/src/views/system/setting/components/change-home-index.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Modal, message } from 'ant-design-vue/lib';
+import { Modal, message } from 'ant-design-vue/es';
 import { onMounted, reactive, toRaw } from 'vue';
 import useI18n from '@/hooks/useI18n';
 import { listMenu } from '@/api/system/menu';
@@ -80,7 +80,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <a-row :gutter="16">
+  <a-row>
     <a-col :lg="12" :md="12" :xs="24" style="margin-bottom: 30px">
       <template v-if="state.edite">
         <a-form-item :label="t('views.system.setting.home')">
diff --git a/src/views/system/setting/components/change-i18n.vue b/src/views/system/setting/components/change-i18n.vue
index 3589e903..e3b573e4 100644
--- a/src/views/system/setting/components/change-i18n.vue
+++ b/src/views/system/setting/components/change-i18n.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Modal, message } from 'ant-design-vue/lib';
+import { Modal, message } from 'ant-design-vue/es';
 import { onMounted, reactive } from 'vue';
 import useAppStore from '@/store/modules/app';
 import useI18n from '@/hooks/useI18n';
@@ -68,7 +68,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <a-row :gutter="16">
+  <a-row>
     <a-col :lg="12" :md="12" :xs="24" style="margin-bottom: 30px">
       <a-form v-if="state.edite">
         <a-form-item :label="t('views.system.setting.i18nOpen')">
diff --git a/src/views/system/setting/components/change-login-bg.vue b/src/views/system/setting/components/change-login-bg.vue
index c66b8c69..aa9d893e 100644
--- a/src/views/system/setting/components/change-login-bg.vue
+++ b/src/views/system/setting/components/change-login-bg.vue
@@ -1,13 +1,13 @@
 <script lang="ts" setup>
-import { Modal, message } from 'ant-design-vue/lib';
+import { Modal, message } from 'ant-design-vue/es';
 import { onMounted, reactive } from 'vue';
 import useAppStore from '@/store/modules/app';
 import useI18n from '@/hooks/useI18n';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { changeValue } from '@/api/system/config';
 import { uploadFile } from '@/api/tool/file';
-import { FileType } from 'ant-design-vue/lib/upload/interface';
-import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
+import { FileType } from 'ant-design-vue/es/upload/interface';
+import { UploadRequestOption } from 'ant-design-vue/es/vc-upload/interface';
 import { sessionGet } from '@/utils/cache-session-utils';
 import { parseUrlPath } from '@/plugins/file-static-url';
 const appStore = useAppStore();
@@ -149,7 +149,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <a-row :gutter="16">
+  <a-row>
     <a-col :lg="12" :md="12" :xs="24" style="margin-bottom: 30px">
       <div class="sys-login-bg">
         <span v-if="state.flag === '#'">
diff --git a/src/views/system/setting/components/change-logo.vue b/src/views/system/setting/components/change-logo.vue
index ce03fc6f..701f4150 100644
--- a/src/views/system/setting/components/change-logo.vue
+++ b/src/views/system/setting/components/change-logo.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { Modal, message } from 'ant-design-vue/lib';
-import { FileType } from 'ant-design-vue/lib/upload/interface';
-import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
+import { Modal, message } from 'ant-design-vue/es';
+import { FileType } from 'ant-design-vue/es/upload/interface';
+import { UploadRequestOption } from 'ant-design-vue/es/vc-upload/interface';
 import IconFont from '@/components/IconFont/index.vue';
 import { onMounted, reactive, watch, computed, nextTick } from 'vue';
 import useAppStore from '@/store/modules/app';
@@ -217,7 +217,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <a-row :gutter="16">
+  <a-row>
     <a-col :lg="12" :md="12" :xs="24" style="margin-bottom: 30px">
       <a-form layout="vertical">
         <a-form-item style="margin-bottom: 12px">
diff --git a/src/views/system/setting/components/change-official-url.vue b/src/views/system/setting/components/change-official-url.vue
index 40cfe3ac..a4fb4d8a 100644
--- a/src/views/system/setting/components/change-official-url.vue
+++ b/src/views/system/setting/components/change-official-url.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Modal, message } from 'ant-design-vue/lib';
+import { Modal, message } from 'ant-design-vue/es';
 import { onMounted, reactive } from 'vue';
 import useAppStore from '@/store/modules/app';
 import useI18n from '@/hooks/useI18n';
@@ -67,7 +67,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <a-row :gutter="16">
+  <a-row>
     <a-col :lg="12" :md="12" :xs="24" style="margin-bottom: 30px">
       <a-form layout="vertical" v-if="state.edite">
         <a-form-item>
diff --git a/src/views/system/setting/components/change-title.vue b/src/views/system/setting/components/change-title.vue
index 4e28f3a6..88ad96c0 100644
--- a/src/views/system/setting/components/change-title.vue
+++ b/src/views/system/setting/components/change-title.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Modal, message } from 'ant-design-vue/lib';
+import { Modal, message } from 'ant-design-vue/es';
 import { onMounted, reactive } from 'vue';
 import useAppStore from '@/store/modules/app';
 import useI18n from '@/hooks/useI18n';
@@ -62,7 +62,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <a-row :gutter="16">
+  <a-row>
     <a-col :lg="12" :md="12" :xs="24" style="margin-bottom: 30px">
       <a-form layout="vertical" v-if="state.edite">
         <a-form-item>
@@ -109,7 +109,8 @@ onMounted(() => {
 
 <style lang="less" scoped>
 .sys-title {
-  color: rgba(0, 0, 0, 0.85);
+  color: inherit;
+  opacity: 0.85;
   font-size: 20px;
   font-weight: 600;
   line-height: 1.4;
diff --git a/src/views/system/setting/components/system-reset.vue b/src/views/system/setting/components/system-reset.vue
index 8a142c56..d79cab14 100644
--- a/src/views/system/setting/components/system-reset.vue
+++ b/src/views/system/setting/components/system-reset.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { message } from 'ant-design-vue/lib';
+import { message } from 'ant-design-vue/es';
 import { reactive } from 'vue';
 import useI18n from '@/hooks/useI18n';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
@@ -9,20 +9,20 @@ const maskStore = useMaskStore();
 const { t } = useI18n();
 
 type StateType = {
-  visible: boolean;
+  open: boolean;
   count: number;
   timer: any;
 };
 
 let state: StateType = reactive({
-  visible: false,
+  open: false,
   count: 10,
   timer: null,
 });
 
 /**对话框弹出显示 */
 function fnModalVisible() {
-  state.visible = true;
+  state.open = true;
   // 倒数
   state.timer = setInterval(() => {
     if (state.count < 0) {
@@ -55,12 +55,12 @@ function fnModalCancel() {
   clearInterval(state.timer);
   state.timer = null;
   state.count = 10;
-  state.visible = false;
+  state.open = false;
 }
 </script>
 
 <template>
-  <a-row :gutter="16">
+  <a-row>
     <a-col :lg="12" :md="12" :xs="24" style="margin-bottom: 30px">
       <a-button type="dashed" danger @click="fnModalVisible()">
         {{ t('common.reset') }}
@@ -71,7 +71,7 @@ function fnModalCancel() {
       :width="416"
       :destroyOnClose="true"
       :mask-closable="false"
-      v-model:visible="state.visible"
+      v-model:open="state.open"
       :title="t('common.tipTitle')"
       :ok-text="
         state.count > 0 ? `${t('common.ok')} ${state.count}` : t('common.ok')
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 9fad1acb..fbe844bb 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Modal, Form } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { ProModal } from 'antdv-pro-modal';
+import { message, Modal, Form } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import UploadModal from '@/components/UploadModal/index.vue';
 import {
   importData,
@@ -31,7 +32,7 @@ import {
 } from '@/utils/regular-utils';
 import useDictStore from '@/store/modules/dict';
 import useUserStore from '@/store/modules/user';
-import { DataNode } from 'ant-design-vue/lib/tree';
+import { DataNode } from 'ant-design-vue/es/tree';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 const { getDict } = useDictStore();
 const userStore = useUserStore();
@@ -225,11 +226,11 @@ type OptionsType = {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**详情框是否显示 */
-  visibleByView: boolean;
+  openByView: boolean;
   /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**重置密码框是否显示 */
-  visibleByResetPwd: boolean;
+  openByResetPwd: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -242,9 +243,9 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByView: false,
-  visibleByEdit: false,
-  visibleByResetPwd: false,
+  openByView: false,
+  openByEdit: false,
+  openByResetPwd: false,
   title: '用户',
   from: {
     userId: undefined,
@@ -347,7 +348,7 @@ function fnModalVisibleByVive(userId: string | number) {
       // 头像解析
       modalState.from.avatar = userStore.fnAvatar(modalState.from.avatar);
       modalState.title = t('views.system.user.userInfo');
-      modalState.visibleByView = true;
+      modalState.openByView = true;
     } else {
       message.error(t('views.system.user.tipRowErr'), 2);
     }
@@ -388,7 +389,7 @@ function fnModalVisibleByEdit(userId?: string | number) {
         modalState.from.deptId = deptTreeData.value[0].id;
         modalState.title =
           t('common.addText') + t('views.system.user.userInfo');
-        modalState.visibleByEdit = true;
+        modalState.openByEdit = true;
       } else {
         message.error(t('views.system.user.tipRowErr'), 2);
       }
@@ -419,7 +420,7 @@ function fnModalVisibleByEdit(userId?: string | number) {
         modalState.from.postIds = postIds;
         modalState.title =
           t('common.editText') + t('views.system.user.userInfo');
-        modalState.visibleByEdit = true;
+        modalState.openByEdit = true;
       } else {
         message.error(t('views.system.user.tipRowErr'), 2);
       }
@@ -452,7 +453,7 @@ function fnModalOk() {
               key,
               duration: 2,
             });
-            modalState.visibleByEdit = false;
+            modalState.openByEdit = false;
             modalStateFrom.resetFields();
             fnGetList(1);
           } else {
@@ -477,9 +478,9 @@ function fnModalOk() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByEdit = false;
-  modalState.visibleByView = false;
-  modalState.visibleByResetPwd = false;
+  modalState.openByEdit = false;
+  modalState.openByView = false;
+  modalState.openByResetPwd = false;
   modalStateFrom.resetFields();
   modalState.options.roles = [];
   modalState.options.posts = [];
@@ -504,7 +505,7 @@ function fnModalOkResetPwd() {
               key,
               duration: 2,
             });
-            modalState.visibleByResetPwd = false;
+            modalState.openByResetPwd = false;
             modalStateFrom.resetFields();
           } else {
             message.error({
@@ -532,7 +533,7 @@ function fnRecordResetPwd(row: Record<string, string>) {
   modalState.from.userId = row.userId;
   modalState.from.userName = row.userName;
   modalState.title = t('views.system.user.resetPwd');
-  modalState.visibleByResetPwd = true;
+  modalState.openByResetPwd = true;
 }
 
 /**
@@ -643,7 +644,7 @@ function fnExportList() {
 /**对话框表格信息导入对象信息状态类型 */
 type ModalUploadImportStateType = {
   /**是否显示 */
-  visible: boolean;
+  open: boolean;
   /**标题 */
   title: string;
   /**是否上传中 */
@@ -658,7 +659,7 @@ type ModalUploadImportStateType = {
 
 /**对话框表格信息导入对象信息状态 */
 let uploadImportState: ModalUploadImportStateType = reactive({
-  visible: false,
+  open: false,
   title: t('views.system.user.importTitle'),
   loading: false,
   updateSupport: false,
@@ -670,12 +671,12 @@ let uploadImportState: ModalUploadImportStateType = reactive({
 function fnModalUploadImportOpen() {
   uploadImportState.updateSupport = false;
   uploadImportState.msg = '';
-  uploadImportState.visible = true;
+  uploadImportState.open = true;
 }
 
 /**对话框表格信息导入关闭窗口 */
 function fnModalUploadImportClose() {
-  uploadImportState.visible = false;
+  uploadImportState.open = false;
 }
 
 /**对话框表格信息导入上传 */
@@ -892,7 +893,7 @@ onMounted(() => {
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
-        <div class="button-container">
+        <a-space :size="8" align="center">
           <a-button
             type="primary"
             @click.prevent="fnModalVisibleByEdit()"
@@ -927,12 +928,12 @@ onMounted(() => {
             <template #icon><ExportOutlined /></template>
             {{ t('common.export') }}
           </a-button>
-        </div>
+        </a-space>
       </template>
 
       <!-- 插槽-卡片右侧 -->
       <template #extra>
-        <div class="button-container">
+        <a-space :size="8" align="center">
           <a-tooltip>
             <template #title>{{ t('common.searchBarText') }}</template>
             <a-switch
@@ -972,7 +973,7 @@ onMounted(() => {
               </template>
             </a-dropdown>
           </a-tooltip>
-        </div>
+        </a-space>
       </template>
 
       <!-- 表格列表 -->
@@ -1075,12 +1076,12 @@ onMounted(() => {
       :drag="true"
       :width="800"
       :destroyOnClose="false"
-      :visible="modalState.visibleByView"
+      :open="modalState.openByView"
       :title="modalState.title"
       @cancel="fnModalCancel"
     >
       <a-form layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true">
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item :label="t('views.system.user.userNum')" name="userId">
               {{ modalState.from.userId }}
@@ -1097,7 +1098,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item :label="t('views.system.user.loginIp')" name="loginIp">
               {{ modalState.from.loginIp }}
@@ -1114,7 +1115,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item :label="t('views.system.user.userTop')" name="avatar">
               <a-avatar
@@ -1143,7 +1144,7 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item :label="t('views.system.user.sex')" name="sex">
               <DictTag
@@ -1162,7 +1163,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.user.phone')"
@@ -1201,7 +1202,7 @@ onMounted(() => {
           </a-tree-select>
         </a-form-item>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.user.userWork')"
@@ -1265,7 +1266,7 @@ onMounted(() => {
       :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
-      :visible="modalState.visibleByEdit"
+      :open="modalState.openByEdit"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnModalOk"
@@ -1277,7 +1278,7 @@ onMounted(() => {
         :label-col="{ span: 6 }"
         :labelWrap="true"
       >
-        <a-row :gutter="16" v-if="!modalState.from.userId">
+        <a-row v-if="!modalState.from.userId">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.user.account')"
@@ -1315,7 +1316,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.user.userName')"
@@ -1356,7 +1357,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.user.phone')"
@@ -1387,7 +1388,7 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item :label="t('views.system.user.sex')" name="sex">
               <a-select
@@ -1486,7 +1487,7 @@ onMounted(() => {
       :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
-      :visible="modalState.visibleByResetPwd"
+      :open="modalState.openByResetPwd"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnModalOkResetPwd"
@@ -1527,12 +1528,12 @@ onMounted(() => {
       :loading="uploadImportState.loading"
       @upload="fnModalUploadImportUpload"
       @close="fnModalUploadImportClose"
-      v-model:visible="uploadImportState.visible"
+      v-model:open="uploadImportState.open"
       :ext="['.xls', '.xlsx']"
       :size="10"
     >
       <template #default>
-        <a-row :gutter="18" justify="space-between" align="middle">
+        <a-row justify="space-between" align="middle">
           <a-col :span="12">
             <a-checkbox v-model:checked="uploadImportState.updateSupport">
               {{ t('views.system.user.updateSure') }}
diff --git a/src/views/tool/iperf/index.vue b/src/views/tool/iperf/index.vue
index 8a0d95a8..ef35bfa5 100644
--- a/src/views/tool/iperf/index.vue
+++ b/src/views/tool/iperf/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { reactive, onMounted, onBeforeUnmount, ref } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Modal } from 'ant-design-vue/lib';
+import { message, Modal } from 'ant-design-vue/es';
 import useI18n from '@/hooks/useI18n';
 import {
   RESULT_CODE_ERROR,
@@ -320,7 +320,7 @@ onBeforeUnmount(() => {});
             >
             </a-input>
           </a-form-item>
-          <a-row :gutter="16">
+          <a-row>
             <a-col :lg="12" :md="12" :xs="12">
               <a-form-item
                 label="UDP"
@@ -379,7 +379,7 @@ onBeforeUnmount(() => {});
             </a-col>
           </a-row>
         </template>
-        <a-row :gutter="16" v-else>
+        <a-row v-else>
           <a-col :lg="12" :md="12" :xs="12">
             <a-form-item
               label="OneOff"
diff --git a/src/views/tool/lockScreen/index.vue b/src/views/tool/lockScreen/index.vue
index 2ab7b310..4199e56f 100644
--- a/src/views/tool/lockScreen/index.vue
+++ b/src/views/tool/lockScreen/index.vue
@@ -5,7 +5,7 @@ import useMaskStore from '@/store/modules/mask';
 import useI18n from '@/hooks/useI18n';
 import { onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { message } from 'ant-design-vue/lib';
+import { message } from 'ant-design-vue/es';
 const { t } = useI18n();
 const userStore = useUserStore();
 const appStore = useAppStore();
diff --git a/src/views/tool/net/index.vue b/src/views/tool/net/index.vue
index 2fcef6fb..bb96395f 100644
--- a/src/views/tool/net/index.vue
+++ b/src/views/tool/net/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { reactive, onMounted, onBeforeUnmount, nextTick } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import useI18n from '@/hooks/useI18n';
 import { OptionsType, WS } from '@/plugins/ws-websocket';
 import { RESULT_CODE_ERROR } from '@/constants/result-constants';
diff --git a/src/views/tool/ping/index.vue b/src/views/tool/ping/index.vue
index 182601a7..f8fca67b 100644
--- a/src/views/tool/ping/index.vue
+++ b/src/views/tool/ping/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { reactive, onMounted, onBeforeUnmount, ref, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message } from 'ant-design-vue/lib';
+import { message } from 'ant-design-vue/es';
 import useI18n from '@/hooks/useI18n';
 import {
   RESULT_CODE_ERROR,
@@ -254,7 +254,7 @@ onBeforeUnmount(() => {});
           >
           </a-input>
         </a-form-item>
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="12">
             <a-form-item
               label="Interval"
diff --git a/src/views/tool/ps/index.vue b/src/views/tool/ps/index.vue
index 8587cddf..3866e8fb 100644
--- a/src/views/tool/ps/index.vue
+++ b/src/views/tool/ps/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { reactive, onMounted, onBeforeUnmount, nextTick } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import useI18n from '@/hooks/useI18n';
 import { OptionsType, WS } from '@/plugins/ws-websocket';
 import { RESULT_CODE_ERROR } from '@/constants/result-constants';
diff --git a/src/views/tool/terminal/index.vue b/src/views/tool/terminal/index.vue
index 24fa44a3..170fe0e0 100644
--- a/src/views/tool/terminal/index.vue
+++ b/src/views/tool/terminal/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { PageContainer } from 'antdv-pro-layout';
-import { Modal } from 'ant-design-vue/lib';
+import { Modal } from 'ant-design-vue/es';
 import TerminalSSH from '@/components/TerminalSSH/index.vue';
 import TerminalTelnet from '@/components/TerminalTelnet/index.vue';
 import { reactive, toRaw } from 'vue';
diff --git a/src/views/tool/upload/index.vue b/src/views/tool/upload/index.vue
index 29c4ed12..3728b2f6 100644
--- a/src/views/tool/upload/index.vue
+++ b/src/views/tool/upload/index.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { reactive } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { Modal, message } from 'ant-design-vue/lib';
-import { FileType, UploadFile } from 'ant-design-vue/lib/upload/interface';
-import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
+import { Modal, message } from 'ant-design-vue/es';
+import { FileType, UploadFile } from 'ant-design-vue/es/upload/interface';
+import { UploadRequestOption } from 'ant-design-vue/es/vc-upload/interface';
 import saveAs from 'file-saver';
 import {
   downloadFile,
@@ -164,10 +164,10 @@ function fnUploadChunk(up: UploadRequestOption) {
 
 <template>
   <PageContainer title="上传示例">
-    <a-row :gutter="16">
+    <a-row>
       <a-col :lg="12" :md="12" :xs="24">
         <a-card title="普通文件" style="margin-bottom: 16px">
-          <a-row :gutter="8">
+          <a-row>
             <a-col :span="24" style="margin-bottom: 16px">
               <a-input
                 style="margin-bottom: 16px"
diff --git a/src/views/traceManage/analysis/index.vue b/src/views/traceManage/analysis/index.vue
index 2c038703..f7b196b6 100644
--- a/src/views/traceManage/analysis/index.vue
+++ b/src/views/traceManage/analysis/index.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { reactive, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Modal } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { ProModal } from 'antdv-pro-modal';
+import { Modal } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import { parseDateToStr } from '@/utils/date-utils';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { saveAs } from 'file-saver';
@@ -174,7 +175,7 @@ function fnGetList(pageNum?: number) {
 /**抽屉对象信息状态类型 */
 type ModalStateType = {
   /**抽屉框是否显示 */
-  visible: boolean;
+  open: boolean;
   /**标题 */
   title: string;
   /**表单数据 */
@@ -183,7 +184,7 @@ type ModalStateType = {
 
 /**抽屉对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visible: false,
+  open: false,
   title: '',
   from: {
     rawData: '',
@@ -214,14 +215,14 @@ function fnModalVisible(row: Record<string, any>) {
   modalState.title = t('views.traceManage.analysis.taskTitle', {
     num: row.imsi,
   });
-  modalState.visible = true;
+  modalState.open = true;
 }
 
 /**
  * 对话框弹出关闭
  */
 function fnModalVisibleClose() {
-  modalState.visible = false;
+  modalState.open = false;
   modalState.from.downBtn = false;
   modalState.from.rawDataHTML = '';
   modalState.from.rawData = '';
@@ -478,7 +479,7 @@ onMounted(() => {
       :drag="true"
       :width="800"
       :title="modalState.title"
-      :visible="modalState.visible"
+      :open="modalState.open"
       @cancel="fnModalVisibleClose"
     >
       <div class="raw-title">
@@ -486,7 +487,6 @@ onMounted(() => {
       </div>
       <a-row
         class="raw"
-        :gutter="16"
         v-for="v in modalState.from.rawData"
         :key="v.row"
       >
diff --git a/src/views/traceManage/pcap/file.vue b/src/views/traceManage/pcap/file.vue
index 260ad502..6503ecc6 100644
--- a/src/views/traceManage/pcap/file.vue
+++ b/src/views/traceManage/pcap/file.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { ColumnsType } from 'ant-design-vue/lib/table';
-import { Modal, message } from 'ant-design-vue/lib';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { ColumnsType } from 'ant-design-vue/es/table';
+import { Modal, message } from 'ant-design-vue/es';
 import { parseDateToStr } from '@/utils/date-utils';
 import { getNeFile, listNeFiles } from '@/api/tool/neFile';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
@@ -275,7 +275,7 @@ function fnGetList(pageNum?: number) {
 
 /**抽屉状态 */
 const viewDrawerState = reactive({
-  visible: false,
+  open: false,
   /**文件路径 /var/log/amf.log */
   filePath: '',
   /**网元类型 */
@@ -289,7 +289,7 @@ function fnDrawerOpen(row: Record<string, any>) {
   viewDrawerState.filePath = [...nePathArr.value, row.fileName].join('/');
   viewDrawerState.neType = neTypeSelect.value[0];
   viewDrawerState.neId = neTypeSelect.value[1];
-  viewDrawerState.visible = !viewDrawerState.visible;
+  viewDrawerState.open = !viewDrawerState.open;
 }
 
 onMounted(() => {
@@ -315,51 +315,39 @@ onMounted(() => {
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
-        <a-form :model="queryParams" name="queryParams" layout="horizontal">
-          <a-row :gutter="16" :wrap="true">
+        <a-row :gutter="16" :wrap="true" align="middle">
+          <a-col>
+            <a-button type="default" @click.prevent="fnClose()">
+              <template #icon><CloseOutlined /></template>
+              {{ t('common.close') }}
+            </a-button>
+          </a-col>
+          <a-col>
+            <span>{{ t('views.logManage.neFile.neType') }}:</span>&nbsp;
+            <a-cascader
+              v-model:value="neTypeSelect"
+              :options="neInfoStore.getNeCascaderOptions"
+              @change="fnNeChange"
+              :allow-clear="false"
+              :placeholder="t('views.logManage.neFile.neTypePlease')"
+              :disabled="downLoading || tableState.loading"
+            />
+          </a-col>
+          <template v-if="nePathArr.length > 0">
+            <span>{{ t('views.logManage.neFile.nePath') }}:</span>&nbsp;
             <a-col>
-              <a-form-item style="margin-bottom: 0">
-                <a-button type="default" @click.prevent="fnClose()">
-                  <template #icon><CloseOutlined /></template>
-                  {{ t('common.close') }}
-                </a-button>
-              </a-form-item>
+              <a-breadcrumb>
+                <a-breadcrumb-item
+                  v-for="(path, index) in nePathArr"
+                  :key="path"
+                  @click="fnDirCD(path, index)"
+                >
+                  {{ path }}
+                </a-breadcrumb-item>
+              </a-breadcrumb>
             </a-col>
-            <a-col>
-              <a-form-item
-                :label="t('views.logManage.neFile.neType')"
-                name="neType"
-                style="margin-bottom: 0"
-              >
-                <a-cascader
-                  v-model:value="neTypeSelect"
-                  :options="neInfoStore.getNeCascaderOptions"
-                  @change="fnNeChange"
-                  :allow-clear="false"
-                  :placeholder="t('views.logManage.neFile.neTypePlease')"
-                  :disabled="downLoading || tableState.loading"
-                />
-              </a-form-item>
-            </a-col>
-            <a-col v-if="nePathArr.length > 0">
-              <a-form-item
-                :label="t('views.logManage.neFile.nePath')"
-                name="configName"
-                style="margin-bottom: 0"
-              >
-                <a-breadcrumb>
-                  <a-breadcrumb-item
-                    v-for="(path, index) in nePathArr"
-                    :key="path"
-                    @click="fnDirCD(path, index)"
-                  >
-                    {{ path }}
-                  </a-breadcrumb-item>
-                </a-breadcrumb>
-              </a-form-item>
-            </a-col>
-          </a-row>
-        </a-form>
+          </template>
+        </a-row>
       </template>
 
       <!-- 插槽-卡片右侧 -->
@@ -433,7 +421,7 @@ onMounted(() => {
 
     <!-- 文件内容查看抽屉 -->
     <ViewDrawer
-      v-model:visible="viewDrawerState.visible"
+      v-model:open="viewDrawerState.open"
       :file-path="viewDrawerState.filePath"
       :ne-type="viewDrawerState.neType"
       :ne-id="viewDrawerState.neId"
diff --git a/src/views/traceManage/pcap/index.vue b/src/views/traceManage/pcap/index.vue
index 8ca2fb90..6db41213 100644
--- a/src/views/traceManage/pcap/index.vue
+++ b/src/views/traceManage/pcap/index.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
 import { onMounted, reactive } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { message, Modal } from 'ant-design-vue/lib';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { message, Modal } from 'ant-design-vue/es';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import { PageContainer } from 'antdv-pro-layout';
+import { ProModal } from 'antdv-pro-modal';
 import { dumpStart, dumpStop, traceUPF } from '@/api/trace/pcap';
 import { listAllNeInfo } from '@/api/ne/neInfo';
 import { getNeDirZip, getNeFile, getNeViewFile } from '@/api/tool/neFile';
@@ -63,7 +64,7 @@ type ModalStateType = {
     stop: string;
   }[];
   /**详情框是否显示 */
-  visibleByView: boolean;
+  openByView: boolean;
   /**详情框内容 */
   viewFrom: {
     neType: string;
@@ -112,7 +113,7 @@ let modalState: ModalStateType = reactive({
       stop: 'pcap dispatch trace off',
     },
   ],
-  visibleByView: false,
+  openByView: false,
   viewFrom: {
     neType: '',
     neId: '',
@@ -526,7 +527,7 @@ function fnModalVisibleByVive(id: string | number) {
   modalState.viewFrom.path = path;
   modalState.viewFrom.files = [...files];
   fnViveTab(files[0]);
-  modalState.visibleByView = true;
+  modalState.openByView = true;
 }
 
 /**对话框tab查看 */
@@ -559,7 +560,7 @@ function fnViveTab(action: any) {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByView = false;
+  modalState.openByView = false;
   modalState.viewFrom.action = '';
   modalState.viewFrom.files = [];
 }
@@ -751,7 +752,7 @@ onMounted(() => {
       :fullscreen="true"
       :borderDraw="true"
       :width="800"
-      :visible="modalState.visibleByView"
+      :open="modalState.openByView"
       :footer="false"
       :maskClosable="false"
       :keyboard="false"
diff --git a/src/views/traceManage/task-hlr/index.vue b/src/views/traceManage/task-hlr/index.vue
index ce773353..c986e840 100644
--- a/src/views/traceManage/task-hlr/index.vue
+++ b/src/views/traceManage/task-hlr/index.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { reactive, onMounted, toRaw, ref } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { Form, message, Modal } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { ProModal } from 'antdv-pro-modal';
+import { Form, message, Modal } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import { parseDateToStr } from '@/utils/date-utils';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import useI18n from '@/hooks/useI18n';
@@ -271,9 +272,9 @@ function fnRecordStop(id: string) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**详情框是否显示 */
-  visibleByView: boolean;
+  openByView: boolean;
   /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**标题 */
   title: string;
   /**任务开始结束时间 */
@@ -290,8 +291,8 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByView: false,
-  visibleByEdit: false,
+  openByView: false,
+  openByEdit: false,
   title: '',
   timeRangePicker: ['', ''],
   from: {
@@ -364,7 +365,7 @@ function fnModalVisibleByVive(id: Record<string, any>) {
       modalState.confirmLoading = false;
       hide();
       modalState.title = t('views.traceManage.task.viewTask');
-      modalState.visibleByView = true;
+      modalState.openByView = true;
     } else {
       message.error(t('views.traceManage.task.errorTaskInfo'), 3);
     }
@@ -379,7 +380,7 @@ function fnModalVisibleByEdit(id?: string) {
   if (!id) {
     fnModalCancel();
     modalState.title = t('views.traceManage.task.addTask');
-    modalState.visibleByEdit = true;
+    modalState.openByEdit = true;
   }
 }
 
@@ -434,8 +435,8 @@ function fnModalOk() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByView = false;
-  modalState.visibleByEdit = false;
+  modalState.openByView = false;
+  modalState.openByEdit = false;
   modalState.confirmLoading = false;
   modalStateFrom.resetFields();
   modalState.timeRangePicker = ['', ''];
@@ -646,7 +647,7 @@ onMounted(() => {
     <!-- 详情框 -->
     <ProModal
       :drag="true"
-      :visible="modalState.visibleByView"
+      :open="modalState.openByView"
       :title="modalState.title"
       @cancel="fnModalCancel"
       :footer="null"
@@ -700,7 +701,7 @@ onMounted(() => {
       :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
-      :visible="modalState.visibleByEdit"
+      :open="modalState.openByEdit"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnModalOk"
@@ -728,7 +729,7 @@ onMounted(() => {
                 <template #title>
                   <div>{{ t('views.traceManage.task.imsiTip') }}</div>
                 </template>
-                <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
               </a-tooltip>
             </template>
           </a-input>
@@ -748,7 +749,7 @@ onMounted(() => {
                 <template #title>
                   <div>{{ t('views.traceManage.task.msisdnTip') }}</div>
                 </template>
-                <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
               </a-tooltip>
             </template>
           </a-input>
diff --git a/src/views/traceManage/task/analyze.vue b/src/views/traceManage/task/analyze.vue
index 9e055a31..1cee75c4 100644
--- a/src/views/traceManage/task/analyze.vue
+++ b/src/views/traceManage/task/analyze.vue
@@ -2,7 +2,7 @@
 import { onBeforeUnmount, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Modal } from 'ant-design-vue/lib';
+import { message, Modal } from 'ant-design-vue/es';
 import DissectionTree from '../tshark/components/DissectionTree.vue';
 import DissectionDump from '../tshark/components/DissectionDump.vue';
 import PacketTable from '../tshark/components/PacketTable.vue';
@@ -50,7 +50,7 @@ let downLoading = ref<boolean>(false);
 /**信息文件下载 */
 function fnDownloadFile() {
   if (downLoading.value) return;
-  const fileName = `trace_${traceId.value}.pcap`
+  const fileName = `trace_${traceId.value}.pcap`;
   Modal.confirm({
     title: t('common.tipTitle'),
     content: t('views.logManage.neFile.downTip', { fileName }),
@@ -248,7 +248,7 @@ onBeforeUnmount(() => {
         :onScrollBottom="handleScrollBottom"
       ></PacketTable>
 
-      <a-row :gutter="20">
+      <a-row>
         <a-col :lg="12" :md="12" :xs="24" class="tree">
           <!-- 帧数据 -->
           <DissectionTree
diff --git a/src/views/traceManage/task/index.vue b/src/views/traceManage/task/index.vue
index 9e254eb8..9ce96c24 100644
--- a/src/views/traceManage/task/index.vue
+++ b/src/views/traceManage/task/index.vue
@@ -2,10 +2,11 @@
 import { reactive, onMounted, toRaw, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { PageContainer } from 'antdv-pro-layout';
-import { Form, message, Modal } from 'ant-design-vue/lib';
-import { SizeType } from 'ant-design-vue/lib/config-provider';
-import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import { ColumnsType } from 'ant-design-vue/lib/table';
+import { ProModal } from 'antdv-pro-modal';
+import { Form, message, Modal } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
 import { parseDateToStr } from '@/utils/date-utils';
 import { MENU_PATH_INLINE } from '@/constants/menu-constants';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
@@ -268,7 +269,7 @@ function fnGetList(pageNum?: number) {
 /**对话框对象信息状态类型 */
 type ModalStateType = {
   /**新增框或修改框是否显示 */
-  visibleByEdit: boolean;
+  openByEdit: boolean;
   /**标题 */
   title: string;
   /**网元类型设备对象 */
@@ -305,8 +306,8 @@ type ModalStateType = {
 
 /**对话框对象信息状态 */
 let modalState: ModalStateType = reactive({
-  visibleByView: false,
-  visibleByEdit: false,
+  openByView: false,
+  openByEdit: false,
   title: '',
   neType: [],
   neTypeInterface: [],
@@ -452,11 +453,11 @@ function fnSelectInterfaceInit(neType: string) {
  * 对话框弹出显示为 新增或者修改
  * @param noticeId 网元id, 不传为新增
  */
-function fnModalVisibleByEdit(id?: string) {
+function fnModalOpenByEdit(id?: string) {
   if (!id) {
     fnModalCancel();
     modalState.title = t('views.traceManage.task.addTask');
-    modalState.visibleByEdit = true;
+    modalState.openByEdit = true;
   } else {
     if (modalState.confirmLoading) return;
     const hide = message.loading(t('common.loading'), 0);
@@ -479,7 +480,7 @@ function fnModalVisibleByEdit(id?: string) {
           fnSelectInterfaceInit(res.data.neType);
         }
         modalState.title = t('views.traceManage.task.editTask');
-        modalState.visibleByEdit = true;
+        modalState.openByEdit = true;
       } else {
         message.error(t('views.traceManage.task.errorTaskInfo'), 3);
       }
@@ -541,7 +542,7 @@ function fnModalOk() {
  * 进行表达规则校验
  */
 function fnModalCancel() {
-  modalState.visibleByEdit = false;
+  modalState.openByEdit = false;
   modalState.confirmLoading = false;
   modalStateFrom.resetFields();
   modalState.timeRangePicker = ['', ''];
@@ -676,7 +677,7 @@ onMounted(() => {
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
         <a-space :size="8" align="center">
-          <a-button type="primary" @click.prevent="fnModalVisibleByEdit()">
+          <a-button type="primary" @click.prevent="fnModalOpenByEdit()">
             <template #icon><PlusOutlined /></template>
             {{ t('common.addText') }}
           </a-button>
@@ -767,7 +768,7 @@ onMounted(() => {
                 <template #title>{{ t('common.editText') }}</template>
                 <a-button
                   type="link"
-                  @click.prevent="fnModalVisibleByEdit(record.id)"
+                  @click.prevent="fnModalOpenByEdit(record.id)"
                 >
                   <template #icon><FormOutlined /></template>
                 </a-button>
@@ -803,7 +804,7 @@ onMounted(() => {
       :destroyOnClose="true"
       :keyboard="false"
       :mask-closable="false"
-      :visible="modalState.visibleByEdit"
+      :open="modalState.openByEdit"
       :title="modalState.title"
       :confirm-loading="modalState.confirmLoading"
       @ok="fnModalOk"
@@ -815,7 +816,7 @@ onMounted(() => {
         :label-col="{ span: 4 }"
         :label-wrap="true"
       >
-        <a-row :gutter="16">
+        <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.ne.common.neType')"
@@ -917,12 +918,12 @@ onMounted(() => {
                   <template #title>
                     <div>{{ t('views.traceManage.task.signalPortTip') }}</div>
                   </template>
-                  <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
                 </a-tooltip>
               </template>
             </a-input-number>
           </a-form-item>
-          <a-row :gutter="16">
+          <a-row>
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item
                 :label="t('views.traceManage.task.srcIp')"
@@ -940,7 +941,7 @@ onMounted(() => {
                       <template #title>
                         <div>{{ t('views.traceManage.task.srcIpTip') }}</div>
                       </template>
-                      <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                      <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
                     </a-tooltip>
                   </template>
                 </a-input>
@@ -963,7 +964,7 @@ onMounted(() => {
                       <template #title>
                         <div>{{ t('views.traceManage.task.dstIpTip') }}</div>
                       </template>
-                      <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                      <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
                     </a-tooltip>
                   </template>
                 </a-input>
@@ -989,7 +990,7 @@ onMounted(() => {
                   <template #title>
                     <div>{{ t('views.traceManage.task.imsiTip') }}</div>
                   </template>
-                  <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
                 </a-tooltip>
               </template>
             </a-input>
@@ -1009,7 +1010,7 @@ onMounted(() => {
                   <template #title>
                     <div>{{ t('views.traceManage.task.msisdnTip') }}</div>
                   </template>
-                  <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  <InfoCircleOutlined style="opacity: 0.45; color: inherit;" />
                 </a-tooltip>
               </template>
             </a-input>
diff --git a/src/views/traceManage/tshark/index.vue b/src/views/traceManage/tshark/index.vue
index 53bfed62..cc3b78dc 100644
--- a/src/views/traceManage/tshark/index.vue
+++ b/src/views/traceManage/tshark/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { message, Upload } from 'ant-design-vue/lib';
-import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
-import { FileType } from 'ant-design-vue/lib/upload/interface';
+import { message, Upload } from 'ant-design-vue/es';
+import { UploadRequestOption } from 'ant-design-vue/es/vc-upload/interface';
+import { FileType } from 'ant-design-vue/es/upload/interface';
 import { PageContainer } from 'antdv-pro-layout';
 import DissectionTree from './components/DissectionTree.vue';
 import DissectionDump from './components/DissectionDump.vue';
@@ -143,7 +143,7 @@ function fnUpload(up: UploadRequestOption) {
         :onScrollBottom="handleScrollBottom"
       ></PacketTable>
 
-      <a-row :gutter="20">
+      <a-row>
         <a-col :lg="12" :md="12" :xs="24" class="tree">
           <!-- 帧数据 -->
           <DissectionTree
diff --git a/src/views/traceManage/wireshark/index.vue b/src/views/traceManage/wireshark/index.vue
index 4bd0e6fb..ff765751 100644
--- a/src/views/traceManage/wireshark/index.vue
+++ b/src/views/traceManage/wireshark/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, reactive, ref } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
-import { message, Modal } from 'ant-design-vue/lib';
+import { message, Modal } from 'ant-design-vue/es';
 import DissectionTree from '../tshark/components/DissectionTree.vue';
 import DissectionDump from '../tshark/components/DissectionDump.vue';
 import PacketTable from '../tshark/components/PacketTable.vue';
@@ -433,7 +433,7 @@ onBeforeUnmount(() => {
         :onScrollBottom="handleScrollBottom"
       ></PacketTable>
 
-      <a-row :gutter="20">
+      <a-row>
         <a-col :lg="12" :md="12" :xs="24" class="tree">
           <!-- 帧数据 -->
           <DissectionTree