Refactor(Editor): Add a prompt to leave the page

Add a prompt to leave the page when content has been changed

src/pages/System/Tools/Base.tsx

@@ -73,6 +73,19 @@ const Base = () => {
     const [compiling, setCompiling] = useState(false)
     const [compileForm] = AntdForm.useForm<{ entryFileName: string }>()
 
+    useBeforeUnload(
+        useCallback(
+            (event) => {
+                if (Object.keys(hasEdited).length) {
+                    event.preventDefault()
+                    event.returnValue = ''
+                }
+            },
+            [hasEdited]
+        ),
+        { capture: true }
+    )
+
     const handleOnTableChange = (
         pagination: _TablePaginationConfig,
         filters: Record<string, _FilterValue | null>,
@@ -99,19 +112,6 @@ const Base = () => {
         }
     }
 
-    useBeforeUnload(
-        useCallback(
-            (event) => {
-                if (Object.keys(hasEdited).length) {
-                    event.preventDefault()
-                    event.returnValue = ''
-                }
-            },
-            [hasEdited]
-        ),
-        { capture: true }
-    )
-
     const handleOnAddBtnClick = () => {
         setIsDrawerEdit(false)
         setIsDrawerOpen(true)
@@ -1128,6 +1128,12 @@ const Base = () => {
                 title={'未保存'}
                 onOk={() => blocker.proceed?.()}
                 onCancel={() => blocker.reset?.()}
+                footer={(_, { OkBtn, CancelBtn }) => (
+                    <>
+                        <OkBtn />
+                        <CancelBtn />
+                    </>
+                )}
             >
                 离开此页面将丢失所有未保存数据，是否继续？
             </AntdModal>

src/pages/System/Tools/Template.tsx

@@ -71,6 +71,19 @@ const Template = () => {
     const [templateDetailLoading, setTemplateDetailLoading] = useState<Record<string, boolean>>({})
     const [tsconfig, setTsconfig] = useState<ITsconfig>()
 
+    useBeforeUnload(
+        useCallback(
+            (event) => {
+                if (Object.keys(hasEdited).length) {
+                    event.preventDefault()
+                    event.returnValue = ''
+                }
+            },
+            [hasEdited]
+        ),
+        { capture: true }
+    )
+
     const handleOnTableChange = (
         pagination: _TablePaginationConfig,
         filters: Record<string, _FilterValue | null>,
@@ -97,19 +110,6 @@ const Template = () => {
         }
     }
 
-    useBeforeUnload(
-        useCallback(
-            (event) => {
-                if (Object.keys(hasEdited).length) {
-                    event.preventDefault()
-                    event.returnValue = ''
-                }
-            },
-            [hasEdited]
-        ),
-        { capture: true }
-    )
-
     const handleOnAddBtnClick = () => {
         setIsDrawerEdit(false)
         setIsDrawerOpen(true)
@@ -1078,6 +1078,12 @@ const Template = () => {
                 title={'未保存'}
                 onOk={() => blocker.proceed?.()}
                 onCancel={() => blocker.reset?.()}
+                footer={(_, { OkBtn, CancelBtn }) => (
+                    <>
+                        <OkBtn />
+                        <CancelBtn />
+                    </>
+                )}
             >
                 离开此页面将丢失所有未保存数据，是否继续？
             </AntdModal>

src/pages/Tools/Edit.tsx

@@ -24,6 +24,10 @@ import LoadingMask from '@/components/common/LoadingMask'
 import Card from '@/components/common/Card'
 
 const Edit = () => {
+    const blocker = useBlocker(
+        ({ currentLocation, nextLocation }) =>
+            currentLocation.pathname !== nextLocation.pathname && hasEdited
+    )
     const navigate = useNavigate()
     const { toolId } = useParams()
     const [searchParams] = useSearchParams({
@@ -49,6 +53,19 @@ const Edit = () => {
     const [categoryData, setCategoryData] = useState<ToolCategoryVo[]>()
     const [loadingCategory, setLoadingCategory] = useState(false)
 
+    useBeforeUnload(
+        useCallback(
+            (event) => {
+                if (hasEdited) {
+                    event.preventDefault()
+                    event.returnValue = ''
+                }
+            },
+            [hasEdited]
+        ),
+        { capture: true }
+    )
+
     const handleOnChangeFileContent = (content: string, fileName: string, files: IFiles) => {
         setHasEdited(true)
 
@@ -484,6 +501,20 @@ const Edit = () => {
             >
                 {editForm}
             </AntdDrawer>
+            <AntdModal
+                open={blocker.state === 'blocked'}
+                title={'未保存'}
+                onOk={() => blocker.proceed?.()}
+                onCancel={() => blocker.reset?.()}
+                footer={(_, { OkBtn, CancelBtn }) => (
+                    <>
+                        <OkBtn />
+                        <CancelBtn />
+                    </>
+                )}
+            >
+                离开此页面将丢失所有未保存数据，是否继续？
+            </AntdModal>
         </>
     )
 }