refactor(app): 重构模态框使用方式

- 在各个页面中添加自定义模态框组件，替代 Modal.confirm 直接调用
- 新增删除、清空、解锁等操作的确认模态框
- 优化模态框样式，增加图标和对齐方式
- 统一模态框的确定和取消按钮文本- 在 layout.tsx 中引入 App 组件，以支持国际化等功能

app/(business)/monitor/job-log/index/[jobid]/page.tsx

@@ -29,6 +29,13 @@ const clearAllAPI = "/api/monitor/jobLog/clean";
 export default function JobLog({ params }: { params: { jobid: string } }) {
   const { push } = useRouter();
 
+  // 添加用于控制删除确认模态框的状态
+  const [deleteModalVisible, setDeleteModalVisible] = useState(false);
+  const [deleteJobLogId, setDeleteJobLogId] = useState<string | number | null>(null);
+
+  // 添加用于控制清空确认模态框的状态
+  const [clearAllModalVisible, setClearAllModalVisible] = useState(false);
+
   //获取对应的任务的JobName的值
   const getJobName = async () => {
     const resp = await fetchApi(`${queryJobAPI}/${params.jobid}`, push);
@@ -205,22 +212,16 @@ export default function JobLog({ params }: { params: { jobid: string } }) {
 
   //点击删除按钮，展示删除确认框
   const onClickDeleteRow = (record?: any) => {
-    const jobLogId =
-      record != undefined ? record.jobLogId : selectedRowKeys.join(",");
-    Modal.confirm({
-      title: "系统提示",
-      icon: <ExclamationCircleFilled />,
-      content: `确定删除调度日志编号为“${jobLogId}”的数据项？`,
-      onOk() {
-        executeDeleteRow(jobLogId);
-      },
-      onCancel() {},
-    });
+    const jobLogId = record !== undefined ? record.jobLogId : selectedRowKeys.join(",");
+    setDeleteJobLogId(jobLogId);
+    setDeleteModalVisible(true);
   };
 
   //确定删除选中的数据
-  const executeDeleteRow = async (jobLogId: any) => {
-    const body = await fetchApi(`${deleteAPI}/${jobLogId}`, push, {
+  const executeDeleteRow = async () => {
+    if (deleteJobLogId === null) return;
+    
+    const body = await fetchApi(`${deleteAPI}/${deleteJobLogId}`, push, {
       method: "DELETE",
     });
     if (body !== undefined) {
@@ -239,19 +240,19 @@ export default function JobLog({ params }: { params: { jobid: string } }) {
         message.error(body.msg);
       }
     }
+    setDeleteModalVisible(false);
+    setDeleteJobLogId(null);
+  };
+
+  //取消删除操作
+  const cancelDeleteRow = () => {
+    setDeleteModalVisible(false);
+    setDeleteJobLogId(null);
   };
 
   //弹出清空确认框
   const onClickClearAll = () => {
-    Modal.confirm({
-      title: "系统提示",
-      icon: <ExclamationCircleFilled />,
-      content: `确定清空所有调度日志数据项？`,
-      onOk() {
-        executeClearAll();
-      },
-      onCancel() {},
-    });
+    setClearAllModalVisible(true);
   };
 
   //执行清空调度日志
@@ -272,6 +273,12 @@ export default function JobLog({ params }: { params: { jobid: string } }) {
     } else {
       message.error("清空发生异常");
     }
+    setClearAllModalVisible(false);
+  };
+
+  //取消清空操作
+  const cancelClearAll = () => {
+    setClearAllModalVisible(false);
   };
 
   //4.导出
@@ -518,6 +525,40 @@ export default function JobLog({ params }: { params: { jobid: string } }) {
           </ProDescriptions>
         </Modal>
       )}
+      
+      {/* 删除确认模态框 */}
+      <Modal
+        title={
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <ExclamationCircleFilled style={{ color: '#faad14', marginRight: 8 }} />
+            <span>系统提示</span>
+          </div>
+        }
+        open={deleteModalVisible}
+        onOk={executeDeleteRow}
+        onCancel={cancelDeleteRow}
+        okText="确认"
+        cancelText="取消"
+      >
+        <p>{`确定删除调度日志编号为“${deleteJobLogId}”的数据项？`}</p>
+      </Modal>
+      
+      {/* 清空确认模态框 */}
+      <Modal
+        title={
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <ExclamationCircleFilled style={{ color: '#faad14', marginRight: 8 }} />
+            <span>系统提示</span>
+          </div>
+        }
+        open={clearAllModalVisible}
+        onOk={executeClearAll}
+        onCancel={cancelClearAll}
+        okText="确认"
+        cancelText="取消"
+      >
+        <p>确定清空所有调度日志数据项？</p>
+      </Modal>
     </PageContainer>
   );
 }

app/(business)/monitor/job/page.tsx

@@ -60,6 +60,19 @@ const runAPI = "/api/monitor/job/run";
 export default function Job() {
   const { push } = useRouter();
 
+  // 添加用于控制删除确认模态框的状态
+  const [deleteModalVisible, setDeleteModalVisible] = useState(false);
+  const [deleteJobId, setDeleteJobId] = useState<string | number | null>(null);
+
+  // 添加用于控制切换状态确认模态框的状态
+  const [statusModalVisible, setStatusModalVisible] = useState(false);
+  const [statusChecked, setStatusChecked] = useState<boolean>(true);
+  const [statusRecord, setStatusRecord] = useState<any>(null);
+
+  // 添加用于控制执行任务确认模态框的状态
+  const [runModalVisible, setRunModalVisible] = useState(false);
+  const [runRecord, setRunRecord] = useState<any>(null);
+
   //表格列定义
   const columns: ProColumns[] = [
     {
@@ -279,20 +292,10 @@ export default function Job() {
   //展示切换任务状态对话框
   const showSwitchJobStatusModal = (checked: boolean, record: any) => {
     setRowStatusMap({ ...rowStatusMap, [record.jobId]: checked });
-
-    Modal.confirm({
-      title: "系统提示",
-      icon: <ExclamationCircleFilled />,
-      content: `确认要${checked ? "启用" : "停用"}"${record.jobName}"任务吗？`,
-      onOk() {
-        executeSwitchStatus(checked, record.jobId, () => {
-          setRowStatusMap({ ...rowStatusMap, [record.jobId]: !checked });
-        });
-      },
-      onCancel() {
-        setRowStatusMap({ ...rowStatusMap, [record.jobId]: !checked });
-      },
-    });
+    
+    setStatusChecked(checked);
+    setStatusRecord(record);
+    setStatusModalVisible(true);
   };
 
   //确认变更任务状态
@@ -323,6 +326,26 @@ export default function Job() {
     }
   };
 
+  //确定切换状态
+  const confirmSwitchStatus = () => {
+    if (!statusRecord) return;
+    
+    executeSwitchStatus(statusChecked, statusRecord.jobId, () => {
+      setRowStatusMap({ ...rowStatusMap, [statusRecord.jobId]: !statusChecked });
+    });
+    setStatusModalVisible(false);
+    setStatusRecord(null);
+  };
+
+  //取消切换状态
+  const cancelSwitchStatus = () => {
+    if (!statusRecord) return;
+    
+    setRowStatusMap({ ...rowStatusMap, [statusRecord.jobId]: !statusChecked });
+    setStatusModalVisible(false);
+    setStatusRecord(null);
+  };
+
   //是否展示修改对话框
   const [isShowModifyDataModal, setIsShowModifyDataModal] = useState(false);
 
@@ -401,22 +424,16 @@ export default function Job() {
 
   //点击删除按钮，展示删除确认框
   const onClickDeleteRow = (record?: any) => {
-    const jobId =
-      record != undefined ? record.jobId : selectedRowKeys.join(",");
-    Modal.confirm({
-      title: "系统提示",
-      icon: <ExclamationCircleFilled />,
-      content: `确定删除任务编号为“${jobId}”的数据项？`,
-      onOk() {
-        executeDeleteRow(jobId);
-      },
-      onCancel() {},
-    });
+    const jobId = record !== undefined ? record.jobId : selectedRowKeys.join(",");
+    setDeleteJobId(jobId);
+    setDeleteModalVisible(true);
   };
 
   //确定删除选中的数据
-  const executeDeleteRow = async (jobId: any) => {
-    const body = await fetchApi(`${deleteAPI}/${jobId}`, push, {
+  const executeDeleteRow = async () => {
+    if (deleteJobId === null) return;
+    
+    const body = await fetchApi(`${deleteAPI}/${deleteJobId}`, push, {
       method: "DELETE",
     });
     if (body !== undefined) {
@@ -437,6 +454,8 @@ export default function Job() {
         message.error(body.msg);
       }
     }
+    setDeleteModalVisible(false);
+    setDeleteJobId(null);
   };
 
   //4.导出
@@ -555,15 +574,8 @@ export default function Job() {
 
   //执行任务一次
   const showRunOnceModal = (record: any) => {
-    Modal.confirm({
-      title: "系统提示",
-      icon: <ExclamationCircleFilled />,
-      content: `确定要立即执行一次任务“${record.jobName}”吗？`,
-      onOk() {
-        executeJob(record);
-      },
-      onCancel() {},
-    });
+    setRunRecord(record);
+    setRunModalVisible(true);
   };
 
   //执行任务
@@ -588,6 +600,14 @@ export default function Job() {
         message.error(body.msg);
       }
     }
+    setRunModalVisible(false);
+    setRunRecord(null);
+  };
+
+  //取消执行任务
+  const cancelRunJob = () => {
+    setRunModalVisible(false);
+    setRunRecord(null);
   };
 
   //是否展示任务详情框
@@ -1057,6 +1077,60 @@ export default function Job() {
           </ProDescriptions>
         </Modal>
       )}
+      
+      {/* 删除确认模态框 */}
+      <Modal
+        title={
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <ExclamationCircleFilled style={{ color: '#faad14', marginRight: 8 }} />
+            <span>系统提示</span>
+          </div>
+        }
+        open={deleteModalVisible}
+        onOk={executeDeleteRow}
+        onCancel={() => {
+          setDeleteModalVisible(false);
+          setDeleteJobId(null);
+        }}
+        okText="确认"
+        cancelText="取消"
+      >
+        <p>{`确定删除任务编号为“${deleteJobId}”的数据项？`}</p>
+      </Modal>
+      
+      {/* 切换状态确认模态框 */}
+      <Modal
+        title={
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <ExclamationCircleFilled style={{ color: '#faad14', marginRight: 8 }} />
+            <span>系统提示</span>
+          </div>
+        }
+        open={statusModalVisible}
+        onOk={confirmSwitchStatus}
+        onCancel={cancelSwitchStatus}
+        okText="确认"
+        cancelText="取消"
+      >
+        <p>{`确认要${statusChecked ? "启用" : "停用"}"${statusRecord?.jobName}"任务吗？`}</p>
+      </Modal>
+      
+      {/* 执行任务确认模态框 */}
+      <Modal
+        title={
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <ExclamationCircleFilled style={{ color: '#faad14', marginRight: 8 }} />
+            <span>系统提示</span>
+          </div>
+        }
+        open={runModalVisible}
+        onOk={() => executeJob(runRecord)}
+        onCancel={cancelRunJob}
+        okText="确认"
+        cancelText="取消"
+      >
+        <p>{`确定要立即执行一次任务“${runRecord?.jobName}”吗？`}</p>
+      </Modal>
     </PageContainer>
   );
 }

app/(business)/monitor/online/page.tsx

@@ -20,6 +20,10 @@ const logoutAPI = "/api/monitor/online";
 export default function Online() {
   const { push } = useRouter();
 
+  // 添加用于控制强退确认模态框的状态
+  const [logoutModalVisible, setLogoutModalVisible] = useState(false);
+  const [logoutRecord, setLogoutRecord] = useState<any>(null);
+
   //表格列定义
   const columns: ProColumns[] = [
     {
@@ -120,20 +124,15 @@ export default function Online() {
 
   //点击删除按钮，展示删除确认框
   const onClickLogoutRow = (record?: any) => {
-    const tokenId = record.tokenId;
-    Modal.confirm({
-      title: "系统提示",
-      icon: <ExclamationCircleFilled />,
-      content: `确定强退登录名称为“${record.userName}”的用户？`,
-      onOk() {
-        executeLogoutRow(tokenId);
-      },
-      onCancel() {},
-    });
+    setLogoutRecord(record);
+    setLogoutModalVisible(true);
   };
 
   //确定强退选中的会话
-  const executeLogoutRow = async (tokenId: any) => {
+  const executeLogoutRow = async () => {
+    if (!logoutRecord) return;
+    
+    const tokenId = logoutRecord.tokenId;
     const body = await fetchApi(`${logoutAPI}/${tokenId}`, push, {
       method: "DELETE",
     });
@@ -149,6 +148,14 @@ export default function Online() {
         message.error(body.msg);
       }
     }
+    setLogoutModalVisible(false);
+    setLogoutRecord(null);
+  };
+
+  //取消强退操作
+  const cancelLogoutRow = () => {
+    setLogoutModalVisible(false);
+    setLogoutRecord(null);
   };
 
   //搜索栏显示状态
@@ -231,6 +238,23 @@ export default function Online() {
           ],
         }}
       />
+      
+      {/* 强退确认模态框 */}
+      <Modal
+        title={
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <ExclamationCircleFilled style={{ color: '#faad14', marginRight: 8 }} />
+            <span>系统提示</span>
+          </div>
+        }
+        open={logoutModalVisible}
+        onOk={executeLogoutRow}
+        onCancel={cancelLogoutRow}
+        okText="确认"
+        cancelText="取消"
+      >
+        <p>{`确定强退登录名称为“${logoutRecord?.userName}”的用户？`}</p>
+      </Modal>
     </PageContainer>
   );
 }

app/(business)/system/config/page.tsx

@@ -48,6 +48,10 @@ const refreshAPI = "/api/system/config/refreshCache";
 export default function Config() {
   const { push } = useRouter();
 
+  // 添加用于控制删除确认模态框的状态
+  const [deleteModalVisible, setDeleteModalVisible] = useState(false);
+  const [deleteConfigId, setDeleteConfigId] = useState<string | number | null>(null);
+
   //表格列定义
   const columns: ProColumns[] = [
     {
@@ -302,22 +306,16 @@ export default function Config() {
 
   //点击删除按钮，展示删除确认框
   const onClickDeleteRow = (record?: any) => {
-    const configId =
-      record != undefined ? record.configId : selectedRowKeys.join(",");
-    Modal.confirm({
-      title: "系统提示",
-      icon: <ExclamationCircleFilled />,
-      content: `是否确认删除参数编号为“${configId}”的数据项？`,
-      onOk() {
-        executeDeleteRow(configId);
-      },
-      onCancel() {},
-    });
+    const configId = record !== undefined ? record.configId : selectedRowKeys.join(",");
+    setDeleteConfigId(configId);
+    setDeleteModalVisible(true);
   };
 
   //确定删除选中的数据
-  const executeDeleteRow = async (dictId: any) => {
-    const body = await fetchApi(`${deleteAPI}/${dictId}`, push, {
+  const executeDeleteRow = async () => {
+    if (deleteConfigId === null) return;
+    
+    const body = await fetchApi(`${deleteAPI}/${deleteConfigId}`, push, {
       method: "DELETE",
     });
     if (body !== undefined) {
@@ -338,6 +336,14 @@ export default function Config() {
         message.error(body.msg);
       }
     }
+    setDeleteModalVisible(false);
+    setDeleteConfigId(null);
+  };
+
+  //取消删除操作
+  const cancelDeleteRow = () => {
+    setDeleteModalVisible(false);
+    setDeleteConfigId(null);
   };
 
   //4.导出
@@ -672,6 +678,22 @@ export default function Config() {
           ],
         }}
       />
+      {/* 删除确认模态框 */}
+      <Modal
+        title={
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <ExclamationCircleFilled style={{ color: '#faad14', marginRight: 8 }} />
+            <span>系统提示</span>
+          </div>
+        }
+        open={deleteModalVisible}
+        onOk={executeDeleteRow}
+        onCancel={cancelDeleteRow}
+        okText="确认"
+        cancelText="取消"
+      >
+        <p>{`是否确认删除参数编号为“${deleteConfigId}”的数据项？`}</p>
+      </Modal>
     </PageContainer>
   );
 }

app/(business)/system/dept/page.tsx

@@ -42,6 +42,10 @@ const deleteAPI = "/api/system/dept";
 export default function Dept() {
   const { push } = useRouter();
 
+  // 添加用于控制删除确认模态框的状态
+  const [deleteModalVisible, setDeleteModalVisible] = useState(false);
+  const [deleteRecord, setDeleteRecord] = useState<any>(null);
+
   //表格列定义
   const columns: ProColumns[] = [
     {
@@ -401,20 +405,15 @@ export default function Dept() {
 
   //点击删除按钮
   const onClickDeleteRow = (record: any) => {
-    Modal.confirm({
-      title: "系统提示",
-      icon: <ExclamationCircleFilled />,
-      content: `确定删除部门名称为“${record.deptName}”的数据项？`,
-      onOk() {
-        executeDeleteRow(record.deptId);
-      },
-      onCancel() {},
-    });
+    setDeleteRecord(record);
+    setDeleteModalVisible(true);
   };
 
   //确定删除选中的部门
-  const executeDeleteRow = async (roleId: any) => {
-    const body = await fetchApi(`${deleteAPI}/${roleId}`, push, {
+  const executeDeleteRow = async () => {
+    if (!deleteRecord) return;
+    
+    const body = await fetchApi(`${deleteAPI}/${deleteRecord.deptId}`, push, {
       method: "DELETE",
     });
     if (body !== undefined) {
@@ -428,6 +427,14 @@ export default function Dept() {
         message.error(body.msg);
       }
     }
+    setDeleteModalVisible(false);
+    setDeleteRecord(null);
+  };
+
+  //取消删除操作
+  const cancelDeleteRow = () => {
+    setDeleteModalVisible(false);
+    setDeleteRecord(null);
   };
 
   return (
@@ -703,7 +710,22 @@ export default function Dept() {
           />
         </ProForm.Group>
       </ModalForm>
-      ,
+      {/* 删除确认模态框 */}
+      <Modal
+        title={
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <ExclamationCircleFilled style={{ color: '#faad14', marginRight: 8 }} />
+            <span>系统提示</span>
+          </div>
+        }
+        open={deleteModalVisible}
+        onOk={executeDeleteRow}
+        onCancel={cancelDeleteRow}
+        okText="确认"
+        cancelText="取消"
+      >
+        <p>{`确定删除部门名称为“${deleteRecord?.deptName}”的数据项？`}</p>
+      </Modal>
     </PageContainer>
   );
 }

app/(business)/system/dict-data/index/[dictid]/page.tsx

@@ -44,6 +44,10 @@ const exportFilePrefix = "data";
 export default function DictData({ params }: { params: { dictid: string } }) {
   const { push } = useRouter();
 
+  // 添加用于控制删除确认模态框的状态
+  const [deleteModalVisible, setDeleteModalVisible] = useState(false);
+  const [deleteDictCode, setDeleteDictCode] = useState<string | number | null>(null);
+
   const [defaultType, setDefaultType] = useState("");
 
   //获取对应的字典类型的值
@@ -365,22 +369,16 @@ export default function DictData({ params }: { params: { dictid: string } }) {
 
   //点击删除按钮，展示删除确认框
   const onClickDeleteRow = (record?: any) => {
-    const dictCode =
-      record != undefined ? record.dictCode : selectedRowKeys.join(",");
-    Modal.confirm({
-      title: "系统提示",
-      icon: <ExclamationCircleFilled />,
-      content: `确定删除字典编码为“${dictCode}”的数据项？`,
-      onOk() {
-        executeDeleteRow(dictCode);
-      },
-      onCancel() {},
-    });
+    const dictCode = record !== undefined ? record.dictCode : selectedRowKeys.join(",");
+    setDeleteDictCode(dictCode);
+    setDeleteModalVisible(true);
   };
 
   //确定删除选中的数据
-  const executeDeleteRow = async (dictCode: any) => {
-    const body = await fetchApi(`${deleteAPI}/${dictCode}`, push, {
+  const executeDeleteRow = async () => {
+    if (deleteDictCode === null) return;
+    
+    const body = await fetchApi(`${deleteAPI}/${deleteDictCode}`, push, {
       method: "DELETE",
     });
     if (body !== undefined) {
@@ -401,6 +399,8 @@ export default function DictData({ params }: { params: { dictid: string } }) {
         message.error(body.msg);
       }
     }
+    setDeleteModalVisible(false);
+    setDeleteDictCode(null);
   };
 
   //4.导出
@@ -797,6 +797,26 @@ export default function DictData({ params }: { params: { dictid: string } }) {
           ],
         }}
       />
+      
+      {/* 删除确认模态框 */}
+      <Modal
+        title={
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <ExclamationCircleFilled style={{ color: '#faad14', marginRight: 8 }} />
+            <span>系统提示</span>
+          </div>
+        }
+        open={deleteModalVisible}
+        onOk={executeDeleteRow}
+        onCancel={() => {
+          setDeleteModalVisible(false);
+          setDeleteDictCode(null);
+        }}
+        okText="确认"
+        cancelText="取消"
+      >
+        <p>{`确定删除字典编码为“${deleteDictCode}”的数据项？`}</p>
+      </Modal>
     </PageContainer>
   );
 }

app/(business)/system/dict/page.tsx

@@ -48,6 +48,10 @@ const refreshAPI = "/api/system/dict/type/refreshCache";
 export default function Dict() {
   const { push } = useRouter();
 
+  // 添加用于控制删除确认模态框的状态
+  const [deleteModalVisible, setDeleteModalVisible] = useState(false);
+  const [deleteDictId, setDeleteDictId] = useState<string | number | null>(null);
+
   //表格列定义
   const columns: ProColumns[] = [
     {
@@ -301,22 +305,16 @@ export default function Dict() {
 
   //点击删除按钮，展示删除确认框
   const onClickDeleteRow = (record?: any) => {
-    const dictId =
-      record != undefined ? record.dictId : selectedRowKeys.join(",");
-    Modal.confirm({
-      title: "系统提示",
-      icon: <ExclamationCircleFilled />,
-      content: `是否确认删除字典编号为“${dictId}”的数据项？`,
-      onOk() {
-        executeDeleteRow(dictId);
-      },
-      onCancel() {},
-    });
+    const dictId = record !== undefined ? record.dictId : selectedRowKeys.join(",");
+    setDeleteDictId(dictId);
+    setDeleteModalVisible(true);
   };
 
   //确定删除选中的数据
-  const executeDeleteRow = async (dictId: any) => {
-    const body = await fetchApi(`${deleteAPI}/${dictId}`, push, {
+  const executeDeleteRow = async () => {
+    if (deleteDictId === null) return;
+    
+    const body = await fetchApi(`${deleteAPI}/${deleteDictId}`, push, {
       method: "DELETE",
     });
     if (body !== undefined) {
@@ -337,6 +335,8 @@ export default function Dict() {
         message.error(body.msg);
       }
     }
+    setDeleteModalVisible(false);
+    setDeleteDictId(null);
   };
 
   //4.导出
@@ -653,6 +653,26 @@ export default function Dict() {
           ],
         }}
       />
+      
+      {/* 删除确认模态框 */}
+      <Modal
+        title={
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <ExclamationCircleFilled style={{ color: '#faad14', marginRight: 8 }} />
+            <span>系统提示</span>
+          </div>
+        }
+        open={deleteModalVisible}
+        onOk={executeDeleteRow}
+        onCancel={() => {
+          setDeleteModalVisible(false);
+          setDeleteDictId(null);
+        }}
+        okText="确认"
+        cancelText="取消"
+      >
+        <p>{`是否确认删除字典编号为“${deleteDictId}”的数据项？`}</p>
+      </Modal>
     </PageContainer>
   );
 }

app/(business)/system/log/logininfor/page.tsx

@@ -20,6 +20,15 @@ import {useRef, useState} from "react";
 export default function OperLog() {
   const { push } = useRouter();
 
+  // 添加用于控制删除确认模态框的状态
+  const [deleteModalVisible, setDeleteModalVisible] = useState(false);
+  
+  // 添加用于控制清空确认模态框的状态
+  const [clearModalVisible, setClearModalVisible] = useState(false);
+  
+  // 添加用于控制解锁确认模态框的状态
+  const [unlockModalVisible, setUnlockModalVisible] = useState(false);
+
   //表格列定义
   const columns: ProColumns[] = [
     {
@@ -185,42 +194,7 @@ export default function OperLog() {
 
   //点击删除按钮
   const onClickDeleteRow = () => {
-    Modal.confirm({
-      title: "系统提示",
-      icon: <ExclamationCircleFilled />,
-      content: `确定删除访问编号为“${selectedRowKeys.join(",")}”的数据项？`,
-      onOk() {
-        executeDeleteRow();
-      },
-      onCancel() {},
-    });
-  };
-
-  //点击清空按钮
-  const onClickClear = () => {
-    Modal.confirm({
-      title: "系统提示",
-      icon: <ExclamationCircleFilled />,
-      content: "是否确认清空所有操作日志数据项？",
-      onOk() {
-        executeClear();
-      },
-      onCancel() {},
-    });
-  };
-
-  //点击解锁按钮
-  const onClickUnlock = () => {
-    console.log("row:", selectedRow);
-    Modal.confirm({
-      title: "系统提示",
-      icon: <ExclamationCircleFilled />,
-      content: `确定解锁用户"${selectedRow.userName}"数据项?`,
-      onOk() {
-        executeUnlock(selectedRow.userName);
-      },
-      onCancel() {},
-    });
+    setDeleteModalVisible(true);
   };
 
   //确定删除选中的日志数据
@@ -248,6 +222,17 @@ export default function OperLog() {
         message.error(body.msg);
       }
     }
+    setDeleteModalVisible(false);
+  };
+
+  //取消删除操作
+  const cancelDeleteRow = () => {
+    setDeleteModalVisible(false);
+  };
+
+  //点击清空按钮
+  const onClickClear = () => {
+    setClearModalVisible(true);
   };
 
   //确定清空日志数据
@@ -269,12 +254,25 @@ export default function OperLog() {
         message.error(body.msg);
       }
     }
+    setClearModalVisible(false);
+  };
+
+  //取消清空操作
+  const cancelClear = () => {
+    setClearModalVisible(false);
+  };
+
+  //点击解锁按钮
+  const onClickUnlock = () => {
+    setUnlockModalVisible(true);
   };
 
   //确定解锁用户
-  const executeUnlock = async (userName: string) => {
+  const executeUnlock = async () => {
+    if (!selectedRow) return;
+    
     const body = await fetchApi(
-      `/api/monitor/logininfor/unlock/${userName}`,
+      `/api/monitor/logininfor/unlock/${selectedRow.userName}`,
       push
     );
 
@@ -289,6 +287,12 @@ export default function OperLog() {
         message.error(body.msg);
       }
     }
+    setUnlockModalVisible(false);
+  };
+
+  //取消解锁操作
+  const cancelUnlock = () => {
+    setUnlockModalVisible(false);
   };
 
   //搜索栏显示状态
@@ -440,6 +444,57 @@ export default function OperLog() {
           ],
         }}
       />
+      
+      {/* 删除确认模态框 */}
+      <Modal
+        title={
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <ExclamationCircleFilled style={{ color: '#faad14', marginRight: 8 }} />
+            <span>系统提示</span>
+          </div>
+        }
+        open={deleteModalVisible}
+        onOk={executeDeleteRow}
+        onCancel={cancelDeleteRow}
+        okText="确认"
+        cancelText="取消"
+      >
+        <p>{`确定删除访问编号为“${selectedRowKeys.join(",")}”的数据项？`}</p>
+      </Modal>
+      
+      {/* 清空确认模态框 */}
+      <Modal
+        title={
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <ExclamationCircleFilled style={{ color: '#faad14', marginRight: 8 }} />
+            <span>系统提示</span>
+          </div>
+        }
+        open={clearModalVisible}
+        onOk={executeClear}
+        onCancel={cancelClear}
+        okText="确认"
+        cancelText="取消"
+      >
+        <p>是否确认清空所有操作日志数据项？</p>
+      </Modal>
+      
+      {/* 解锁确认模态框 */}
+      <Modal
+        title={
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <ExclamationCircleFilled style={{ color: '#faad14', marginRight: 8 }} />
+            <span>系统提示</span>
+          </div>
+        }
+        open={unlockModalVisible}
+        onOk={executeUnlock}
+        onCancel={cancelUnlock}
+        okText="确认"
+        cancelText="取消"
+      >
+        <p>{`确定解锁用户"${selectedRow?.userName}"数据项?`}</p>
+      </Modal>
     </PageContainer>
   );
 }

app/(business)/system/log/operlog/page.tsx

@@ -15,6 +15,12 @@ import {useRef, useState} from "react";
 export default function OperLog() {
   const { push } = useRouter();
 
+  // 添加用于控制删除确认模态框的状态
+  const [deleteModalVisible, setDeleteModalVisible] = useState(false);
+  
+  // 添加用于控制清空确认模态框的状态
+  const [clearModalVisible, setClearModalVisible] = useState(false);
+
   //表格列定义
   const columns: ProColumns[] = [
     {
@@ -232,28 +238,12 @@ export default function OperLog() {
 
   //点击删除按钮
   const onClickDeleteRow = () => {
-    Modal.confirm({
-      title: "系统提示",
-      icon: <ExclamationCircleFilled />,
-      content: `确定删除日志编号为“${selectedRowKeys.join(",")}”的数据项？`,
-      onOk() {
-        executeDeleteRow();
-      },
-      onCancel() {},
-    });
+    setDeleteModalVisible(true);
   };
 
   //点击清空按钮
   const onClickClear = () => {
-    Modal.confirm({
-      title: "系统提示",
-      icon: <ExclamationCircleFilled />,
-      content: "是否确认清空所有操作日志数据项？",
-      onOk() {
-        executeClear();
-      },
-      onCancel() {},
-    });
+    setClearModalVisible(true);
   };
 
   //确定删除选中的日志数据
@@ -281,6 +271,7 @@ export default function OperLog() {
         message.error(body.msg);
       }
     }
+    setDeleteModalVisible(false);
   };
 
   //确定清空日志数据
@@ -302,6 +293,7 @@ export default function OperLog() {
         message.error(body.msg);
       }
     }
+    setClearModalVisible(false);
   };
 
   //控制是否展示行详情模态框
@@ -578,6 +570,40 @@ export default function OperLog() {
           )}
         </Modal>
       )}
+
+      {/* 删除确认模态框 */}
+      <Modal
+        title={
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <ExclamationCircleFilled style={{ color: '#faad14', marginRight: 8 }} />
+            <span>系统提示</span>
+          </div>
+        }
+        open={deleteModalVisible}
+        onOk={executeDeleteRow}
+        onCancel={() => setDeleteModalVisible(false)}
+        okText="确认"
+        cancelText="取消"
+      >
+        <p>{`确定删除日志编号为“${selectedRowKeys.join(",")}”的数据项？`}</p>
+      </Modal>
+      
+      {/* 清空确认模态框 */}
+      <Modal
+        title={
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <ExclamationCircleFilled style={{ color: '#faad14', marginRight: 8 }} />
+            <span>系统提示</span>
+          </div>
+        }
+        open={clearModalVisible}
+        onOk={executeClear}
+        onCancel={() => setClearModalVisible(false)}
+        okText="确认"
+        cancelText="取消"
+      >
+        <p>是否确认清空所有操作日志数据项？</p>
+      </Modal>
     </PageContainer>
   );
 }

app/(business)/system/menu/page.tsx

@@ -44,6 +44,13 @@ const deleteAPI = "/api/system/menu";
 export default function Menu() {
   const { push } = useRouter();
 
+  // 添加用于控制删除确认模态框的状态
+  const [deleteModalVisible, setDeleteModalVisible] = useState(false);
+  const [deleteRecord, setDeleteRecord] = useState<any>(null);
+  
+  // 添加用于控制清空确认模态框的状态（如果需要的话）
+  const [clearModalVisible, setClearModalVisible] = useState(false);
+
   //表格列定义
   const columns: ProColumns[] = [
     {
@@ -410,19 +417,15 @@ export default function Menu() {
 
   //点击删除按钮
   const onClickDeleteRow = (record: any) => {
-    Modal.confirm({
-      title: "系统提示",
-      icon: <ExclamationCircleFilled />,
-      content: `确定删除菜单名称为“${record.menuName}”的数据项？`,
-      onOk() {
-        executeDeleteRow(record.menuId);
-      },
-      onCancel() {},
-    });
+    setDeleteRecord(record);
+    setDeleteModalVisible(true);
   };
 
   //确定删除选中的菜单
-  const executeDeleteRow = async (menuId: any) => {
+  const executeDeleteRow = async () => {
+    if (!deleteRecord) return;
+    
+    const menuId = deleteRecord.menuId;
     const body = await fetchApi(`${deleteAPI}/${menuId}`, push, {
       method: "DELETE",
     });
@@ -437,6 +440,8 @@ export default function Menu() {
         message.error(body.msg);
       }
     }
+    setDeleteModalVisible(false);
+    setDeleteRecord(null);
   };
 
   const [isCatalog, setIsCatalog] = useState(true);
@@ -872,7 +877,25 @@ export default function Menu() {
           />
         </ProForm.Group>
       </ModalForm>
-      ,
+      {/* 删除确认模态框 */}
+      <Modal
+        title={
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <ExclamationCircleFilled style={{ color: '#faad14', marginRight: 8 }} />
+            <span>系统提示</span>
+          </div>
+        }
+        open={deleteModalVisible}
+        onOk={executeDeleteRow}
+        onCancel={() => {
+          setDeleteModalVisible(false);
+          setDeleteRecord(null);
+        }}
+        okText="确认"
+        cancelText="取消"
+      >
+        <p>{`确定删除菜单名称为“${deleteRecord?.menuName}”的数据项？`}</p>
+      </Modal>
     </PageContainer>
   );
 }

app/(business)/system/notice/page.tsx

@@ -43,6 +43,10 @@ const deleteAPI = "/api/system/notice";
 export default function Notice() {
   const { push } = useRouter();
 
+  // 添加用于控制删除确认模态框的状态
+  const [deleteModalVisible, setDeleteModalVisible] = useState(false);
+  const [deleteNoticeId, setDeleteNoticeId] = useState<string | number | null>(null);
+
   //表格列定义
   const columns: ProColumns[] = [
     {
@@ -290,22 +294,16 @@ export default function Notice() {
 
   //点击删除按钮，展示删除确认框
   const onClickDeleteRow = (record?: any) => {
-    const noticeId =
-      record != undefined ? record.noticeId : selectedRowKeys.join(",");
-    Modal.confirm({
-      title: "系统提示",
-      icon: <ExclamationCircleFilled />,
-      content: `是否确认删除公告编号为“${noticeId}”的数据项？`,
-      onOk() {
-        executeDeleteRow(noticeId);
-      },
-      onCancel() {},
-    });
+    const noticeId = record !== undefined ? record.noticeId : selectedRowKeys.join(",");
+    setDeleteNoticeId(noticeId);
+    setDeleteModalVisible(true);
   };
 
   //确定删除选中的数据
-  const executeDeleteRow = async (dictId: any) => {
-    const body = await fetchApi(`${deleteAPI}/${dictId}`, push, {
+  const executeDeleteRow = async () => {
+    if (deleteNoticeId === null) return;
+    
+    const body = await fetchApi(`${deleteAPI}/${deleteNoticeId}`, push, {
       method: "DELETE",
     });
     if (body !== undefined) {
@@ -326,6 +324,14 @@ export default function Notice() {
         message.error(body.msg);
       }
     }
+    setDeleteModalVisible(false);
+    setDeleteNoticeId(null);
+  };
+
+  //取消删除操作
+  const cancelDeleteRow = () => {
+    setDeleteModalVisible(false);
+    setDeleteNoticeId(null);
   };
 
   //4.导出
@@ -593,6 +599,22 @@ export default function Notice() {
           ],
         }}
       />
+      {/* 删除确认模态框 */}
+      <Modal
+        title={
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <ExclamationCircleFilled style={{ color: '#faad14', marginRight: 8 }} />
+            <span>系统提示</span>
+          </div>
+        }
+        open={deleteModalVisible}
+        onOk={executeDeleteRow}
+        onCancel={cancelDeleteRow}
+        okText="确认"
+        cancelText="取消"
+      >
+        <p>{`是否确认删除公告编号为“${deleteNoticeId}”的数据项？`}</p>
+      </Modal>
     </PageContainer>
   );
 }

app/(business)/system/post/page.tsx

@@ -39,6 +39,10 @@ const exportFilePrefix = "post";
 export default function Post() {
   const { push } = useRouter();
 
+  // 添加用于控制删除确认模态框的状态
+  const [deleteModalVisible, setDeleteModalVisible] = useState(false);
+  const [deletePostId, setDeletePostId] = useState<string | number | null>(null);
+
   //表格列定义
   const columns: ProColumns[] = [
     {
@@ -269,22 +273,16 @@ export default function Post() {
 
   //点击删除按钮，展示删除确认框
   const onClickDeleteRow = (record?: any) => {
-    const postId =
-      record != undefined ? record.postId : selectedRowKeys.join(",");
-    Modal.confirm({
-      title: "系统提示",
-      icon: <ExclamationCircleFilled />,
-      content: `确定删除岗位编号为“${postId}”的数据项？`,
-      onOk() {
-        executeDeleteRow(postId);
-      },
-      onCancel() {},
-    });
+    const postId = record !== undefined ? record.postId : selectedRowKeys.join(",");
+    setDeletePostId(postId);
+    setDeleteModalVisible(true);
   };
 
   //确定删除选中的数据
-  const executeDeleteRow = async (postId: any) => {
-    const body = await fetchApi(`${deleteAPI}/${postId}`, push, {
+  const executeDeleteRow = async () => {
+    if (deletePostId === null) return;
+    
+    const body = await fetchApi(`${deleteAPI}/${deletePostId}`, push, {
       method: "DELETE",
     });
     if (body !== undefined) {
@@ -305,6 +303,8 @@ export default function Post() {
         message.error(body.msg);
       }
     }
+    setDeleteModalVisible(false);
+    setDeletePostId(null);
   };
 
   //4.导出
@@ -613,6 +613,25 @@ export default function Post() {
           ],
         }}
       />
+      {/* 删除确认模态框 */}
+      <Modal
+        title={
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <ExclamationCircleFilled style={{ color: '#faad14', marginRight: 8 }} />
+            <span>系统提示</span>
+          </div>
+        }
+        open={deleteModalVisible}
+        onOk={executeDeleteRow}
+        onCancel={() => {
+          setDeleteModalVisible(false);
+          setDeletePostId(null);
+        }}
+        okText="确认"
+        cancelText="取消"
+      >
+        <p>{`确定删除岗位编号为“${deletePostId}”的数据项？`}</p>
+      </Modal>
     </PageContainer>
   );
 }

app/(business)/system/role/auth/[roleid]/page.tsx

@@ -28,6 +28,13 @@ export default function RoleAuth({ params }: { params: { roleid: string } }) {
 
   const roleId = params.roleid;
 
+  // 添加用于控制批量取消授权确认模态框的状态
+  const [batchRemoveAuthModalVisible, setBatchRemoveAuthModalVisible] = useState(false);
+  
+  // 添加用于控制单个取消授权确认模态框的状态
+  const [removeAuthModalVisible, setRemoveAuthModalVisible] = useState(false);
+  const [removeAuthRecord, setRemoveAuthRecord] = useState<any>(null);
+
   //表格列定义
   const columns: ProColumns[] = [
     {
@@ -242,30 +249,7 @@ export default function RoleAuth({ params }: { params: { roleid: string } }) {
 
   //点击批量取消授权按钮
   const onClickBatchRemoveAuth = () => {
-    Modal.confirm({
-      title: "系统提示",
-      icon: <ExclamationCircleFilled />,
-      content: `确定要取消选中用户的角色授权吗？`,
-      onOk() {
-        executeBatchRemoveRoleAuth();
-      },
-      onCancel() {},
-    });
-  };
-
-  //点击取消授权按钮
-  const onClickRemoveAuth = (record: any) => {
-    const userId = record.userId;
-
-    Modal.confirm({
-      title: "系统提示",
-      icon: <ExclamationCircleFilled />,
-      content: `确定要取消用户“${record.userName}”的角色授权吗？`,
-      onOk() {
-        executeRemoveRoleAuth(userId);
-      },
-      onCancel() {},
-    });
+    setBatchRemoveAuthModalVisible(true);
   };
 
   //执行批量取消用户角色授权
@@ -296,13 +280,22 @@ export default function RoleAuth({ params }: { params: { roleid: string } }) {
         actionRef.current.reload();
       }
     }
+    setBatchRemoveAuthModalVisible(false);
+  };
+
+  //点击取消授权按钮
+  const onClickRemoveAuth = (record: any) => {
+    setRemoveAuthRecord(record);
+    setRemoveAuthModalVisible(true);
   };
 
   //执行取消用户角色授权
-  const executeRemoveRoleAuth = async (userId: any) => {
+  const executeRemoveRoleAuth = async () => {
+    if (!removeAuthRecord) return;
+    
     const data = {
       roleId: roleId,
-      userId: userId,
+      userId: removeAuthRecord.userId,
     };
 
     const body = await fetchApi("/api/system/role/authUser/cancel", push, {
@@ -325,6 +318,14 @@ export default function RoleAuth({ params }: { params: { roleid: string } }) {
         actionRef.current.reload();
       }
     }
+    setRemoveAuthModalVisible(false);
+    setRemoveAuthRecord(null);
+  };
+
+  //取消单个取消授权操作
+  const cancelRemoveAuth = () => {
+    setRemoveAuthModalVisible(false);
+    setRemoveAuthRecord(null);
   };
 
   //选中行操作
@@ -555,6 +556,40 @@ export default function RoleAuth({ params }: { params: { roleid: string } }) {
           }}
         />
       </Modal>
+      
+      {/* 批量取消授权确认模态框 */}
+      <Modal
+        title={
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <ExclamationCircleFilled style={{ color: '#faad14', marginRight: 8 }} />
+            <span>系统提示</span>
+          </div>
+        }
+        open={batchRemoveAuthModalVisible}
+        onOk={executeBatchRemoveRoleAuth}
+        onCancel={() => setBatchRemoveAuthModalVisible(false)}
+        okText="确认"
+        cancelText="取消"
+      >
+        <p>确定要取消选中用户的角色授权吗？</p>
+      </Modal>
+      
+      {/* 单个取消授权确认模态框 */}
+      <Modal
+        title={
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <ExclamationCircleFilled style={{ color: '#faad14', marginRight: 8 }} />
+            <span>系统提示</span>
+          </div>
+        }
+        open={removeAuthModalVisible}
+        onOk={executeRemoveRoleAuth}
+        onCancel={cancelRemoveAuth}
+        okText="确认"
+        cancelText="取消"
+      >
+        <p>{`确定要取消用户“${removeAuthRecord?.userName}”的角色授权吗？`}</p>
+      </Modal>
     </PageContainer>
   );
 }

app/(business)/system/role/page.tsx

@@ -45,6 +45,15 @@ export type OptionType = {
 export default function Role() {
   const { push } = useRouter();
 
+  // 添加用于控制删除确认模态框的状态
+  const [deleteModalVisible, setDeleteModalVisible] = useState(false);
+  const [deleteRoleId, setDeleteRoleId] = useState<string | number | null>(null);
+
+  // 添加用于控制切换状态确认模态框的状态
+  const [statusModalVisible, setStatusModalVisible] = useState(false);
+  const [statusChecked, setStatusChecked] = useState<boolean>(true);
+  const [statusRecord, setStatusRecord] = useState<any>(null);
+
   //控制行的状态值的恢复
   const [rowStatusMap, setRowStatusMap] = useState<{ [key: number]: boolean }>(
     {}
@@ -354,20 +363,10 @@ export default function Role() {
   //展示切换角色状态对话框
   const showSwitchRoleStatusModal = (checked: boolean, record: any) => {
     setRowStatusMap({ ...rowStatusMap, [record.roleId]: checked });
-
-    Modal.confirm({
-      title: "系统提示",
-      icon: <ExclamationCircleFilled />,
-      content: `确认要${checked ? "启用" : "停用"}"${record.roleName}"角色吗？`,
-      onOk() {
-        executeSwitchStatus(checked, record.roleId, () => {
-          setRowStatusMap({ ...rowStatusMap, [record.roleId]: !checked });
-        });
-      },
-      onCancel() {
-        setRowStatusMap({ ...rowStatusMap, [record.roleId]: !checked });
-      },
-    });
+    
+    setStatusChecked(checked);
+    setStatusRecord(record);
+    setStatusModalVisible(true);
   };
 
   //确认变更角色状态
@@ -398,6 +397,26 @@ export default function Role() {
     }
   };
 
+  //确定切换状态
+  const confirmSwitchStatus = () => {
+    if (!statusRecord) return;
+    
+    executeSwitchStatus(statusChecked, statusRecord.roleId, () => {
+      setRowStatusMap({ ...rowStatusMap, [statusRecord.roleId]: !statusChecked });
+    });
+    setStatusModalVisible(false);
+    setStatusRecord(null);
+  };
+
+  //取消切换状态
+  const cancelSwitchStatus = () => {
+    if (!statusRecord) return;
+    
+    setRowStatusMap({ ...rowStatusMap, [statusRecord.roleId]: !statusChecked });
+    setStatusModalVisible(false);
+    setStatusRecord(null);
+  };
+
   //删除按钮是否可用，选中行时才可用
   const [rowCanDelete, setRowCanDelete] = useState(false);
 
@@ -544,22 +563,16 @@ export default function Role() {
 
   //点击删除按钮
   const onClickDeleteRow = (record?: any) => {
-    const roleId =
-      record != undefined ? record.roleId : selectedRowKeys.join(",");
-    Modal.confirm({
-      title: "系统提示",
-      icon: <ExclamationCircleFilled />,
-      content: `确定删除角色编号为“${roleId}”的数据项？`,
-      onOk() {
-        executeDeleteRow(roleId);
-      },
-      onCancel() {},
-    });
+    const roleId = record !== undefined ? record.roleId : selectedRowKeys.join(",");
+    setDeleteRoleId(roleId);
+    setDeleteModalVisible(true);
   };
 
   //确定删除选中的角色
-  const executeDeleteRow = async (roleId: any) => {
-    const body = await fetchApi(`/api/system/role/${roleId}`, push, {
+  const executeDeleteRow = async () => {
+    if (deleteRoleId === null) return;
+    
+    const body = await fetchApi(`/api/system/role/${deleteRoleId}`, push, {
       method: "DELETE",
     });
     if (body !== undefined) {
@@ -580,6 +593,8 @@ export default function Role() {
         message.error(body.msg);
       }
     }
+    setDeleteModalVisible(false);
+    setDeleteRoleId(null);
   };
 
   //搜索栏显示状态
@@ -972,6 +987,43 @@ export default function Role() {
           )}
         </Form>
       </Modal>
+
+      {/* 删除确认模态框 */}
+      <Modal
+        title={
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <ExclamationCircleFilled style={{ color: '#faad14', marginRight: 8 }} />
+            <span>系统提示</span>
+          </div>
+        }
+        open={deleteModalVisible}
+        onOk={executeDeleteRow}
+        onCancel={() => {
+          setDeleteModalVisible(false);
+          setDeleteRoleId(null);
+        }}
+        okText="确认"
+        cancelText="取消"
+      >
+        <p>{`确定删除角色编号为“${deleteRoleId}”的数据项？`}</p>
+      </Modal>
+      
+      {/* 切换状态确认模态框 */}
+      <Modal
+        title={
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <ExclamationCircleFilled style={{ color: '#faad14', marginRight: 8 }} />
+            <span>系统提示</span>
+          </div>
+        }
+        open={statusModalVisible}
+        onOk={confirmSwitchStatus}
+        onCancel={cancelSwitchStatus}
+        okText="确认"
+        cancelText="取消"
+      >
+        <p>{`确认要${statusChecked ? "启用" : "停用"}"${statusRecord?.roleName}"角色吗？`}</p>
+      </Modal>
     </PageContainer>
   );
 }

app/(business)/system/user/page.tsx

@@ -72,6 +72,15 @@ export type OptionType = {
 export default function User() {
   const { push } = useRouter();
 
+  // 添加用于控制删除确认模态框的状态
+  const [deleteModalVisible, setDeleteModalVisible] = useState(false);
+  const [deleteUserId, setDeleteUserId] = useState<string | number | null>(null);
+
+  // 添加用于控制切换状态确认模态框的状态
+  const [statusModalVisible, setStatusModalVisible] = useState(false);
+  const [statusChecked, setStatusChecked] = useState<boolean>(true);
+  const [statusRecord, setStatusRecord] = useState<any>(null);
+
   //新建用户预置密码值
   const [defaultPassword, setDefaultPassword] = useState("");
 
@@ -347,20 +356,10 @@ export default function User() {
   //展示切换用户状态对话框
   const showSwitchUserStatusModal = (checked: boolean, record: any) => {
     setRowStatusMap({ ...rowStatusMap, [record.userId]: checked });
-
-    Modal.confirm({
-      title: "系统提示",
-      icon: <ExclamationCircleFilled />,
-      content: `确认要${checked ? "启用" : "停用"}"${record.userName}"用户吗？`,
-      onOk() {
-        executeSwitchStatus(checked, record.userId, () => {
-          setRowStatusMap({ ...rowStatusMap, [record.userId]: !checked });
-        });
-      },
-      onCancel() {
-        setRowStatusMap({ ...rowStatusMap, [record.userId]: !checked });
-      },
-    });
+    
+    setStatusChecked(checked);
+    setStatusRecord(record);
+    setStatusModalVisible(true);
   };
 
   //确认变更用户状态
@@ -391,6 +390,26 @@ export default function User() {
     }
   };
 
+  //确定切换状态
+  const confirmSwitchStatus = () => {
+    if (!statusRecord) return;
+    
+    executeSwitchStatus(statusChecked, statusRecord.userId, () => {
+      setRowStatusMap({ ...rowStatusMap, [statusRecord.userId]: !statusChecked });
+    });
+    setStatusModalVisible(false);
+    setStatusRecord(null);
+  };
+
+  //取消切换状态
+  const cancelSwitchStatus = () => {
+    if (!statusRecord) return;
+    
+    setRowStatusMap({ ...rowStatusMap, [statusRecord.userId]: !statusChecked });
+    setStatusModalVisible(false);
+    setStatusRecord(null);
+  };
+
   //删除按钮是否可用，选中行时才可用
   const [rowCanDelete, setRowCanDelete] = useState(false);
 
@@ -702,17 +721,38 @@ export default function User() {
 
   //点击删除按钮
   const onClickDeleteRow = (record?: any) => {
-    const userId =
-      record != undefined ? record.userId : selectedRowKeys.join(",");
-    Modal.confirm({
-      title: "系统提示",
-      icon: <ExclamationCircleFilled />,
-      content: `确定删除用户编号为“${userId}”的数据项？`,
-      onOk() {
-        executeDeleteRow(userId);
-      },
-      onCancel() {},
+    const userId = record !== undefined ? record.userId : selectedRowKeys.join(",");
+    setDeleteUserId(userId);
+    setDeleteModalVisible(true);
+  };
+
+  //确定删除选中的用户
+  const executeDeleteRow = async () => {
+    if (deleteUserId === null) return;
+    
+    const body = await fetchApi(`/api/system/user/${deleteUserId}`, push, {
+      method: "DELETE",
     });
+    if (body !== undefined) {
+      if (body.code == 200) {
+        message.success("删除成功");
+
+        //修改按钮变回不可点击
+        setRowCanModify(false);
+        //删除按钮变回不可点击
+        setRowCanDelete(false);
+        //选中行数据重置为空
+        setSelectedRowKeys([]);
+        //刷新列表
+        if (actionRef.current) {
+          actionRef.current.reload();
+        }
+      } else {
+        message.error(body.msg);
+      }
+    }
+    setDeleteModalVisible(false);
+    setDeleteUserId(null);
   };
 
   //选中上传文件列表
@@ -767,31 +807,6 @@ export default function User() {
     setShowImportModal(true);
   };
 
-  //确定删除选中的用户
-  const executeDeleteRow = async (userId: any) => {
-    const body = await fetchApi(`/api/system/user/${userId}`, push, {
-      method: "DELETE",
-    });
-    if (body !== undefined) {
-      if (body.code == 200) {
-        message.success("删除成功");
-
-        //修改按钮变回不可点击
-        setRowCanModify(false);
-        //删除按钮变回不可点击
-        setRowCanDelete(false);
-        //选中行数据重置为空
-        setSelectedRowKeys([]);
-        //刷新列表
-        if (actionRef.current) {
-          actionRef.current.reload();
-        }
-      } else {
-        message.error(body.msg);
-      }
-    }
-  };
-
   //确定导入
   const executeImport = async () => {
     if (fileList.length == 0) {
@@ -1341,6 +1356,43 @@ export default function User() {
           </Typography.Text>
         </Flex>
       </Modal>
+
+      {/* 删除确认模态框 */}
+      <Modal
+        title={
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <ExclamationCircleFilled style={{ color: '#faad14', marginRight: 8 }} />
+            <span>系统提示</span>
+          </div>
+        }
+        open={deleteModalVisible}
+        onOk={executeDeleteRow}
+        onCancel={() => {
+          setDeleteModalVisible(false);
+          setDeleteUserId(null);
+        }}
+        okText="确认"
+        cancelText="取消"
+      >
+        <p>{`确定删除用户编号为“${deleteUserId}”的数据项？`}</p>
+      </Modal>
+      
+      {/* 切换状态确认模态框 */}
+      <Modal
+        title={
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <ExclamationCircleFilled style={{ color: '#faad14', marginRight: 8 }} />
+            <span>系统提示</span>
+          </div>
+        }
+        open={statusModalVisible}
+        onOk={confirmSwitchStatus}
+        onCancel={cancelSwitchStatus}
+        okText="确认"
+        cancelText="取消"
+      >
+        <p>{`确认要${statusChecked ? "启用" : "停用"}"${statusRecord?.userName}"用户吗？`}</p>
+      </Modal>
     </PageContainer>
   );
 }

app/layout.tsx

@@ -3,7 +3,7 @@ import {AntdRegistry} from "@ant-design/nextjs-registry";
 import "./normalize.css";
 import "./globals.css";
 import "@fortawesome/fontawesome-svg-core/styles.css";
-import {ConfigProvider} from "antd";
+import {App, ConfigProvider} from "antd";
 import '@ant-design/v5-patch-for-react-19';
 
 export const metadata: Metadata = {
@@ -20,9 +20,11 @@ export default function RootLayout({
     <html lang="en">
       <body>
         <AntdRegistry>
-          <ConfigProvider theme={{ hashed: false }}>
-            {children}
-          </ConfigProvider>
+          <App>
+            <ConfigProvider theme={{ hashed: false }}>
+              {children}
+            </ConfigProvider>
+          </App>
         </AntdRegistry>
       </body>
     </html>