模型正在编辑中，关闭窗口给提示

src/view/Manage/Model/Component/EditModel.jsx

-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { Form, Button, Space, Tooltip } from 'antd';
 import LocalStorage from 'local-storage';
+import { useMount, useUnmount } from 'ahooks';
 
 import ImportAction from './ImportAction';
 import CatalogModal from './CatalogModal';
@@ -22,6 +23,9 @@ const EditModel = (props) => {
   const [ historyAndVersionDrawerVisible, setHistoryAndVersionDrawerVisible ] = useState(false);
   const [ autoTabKey, setAutoTabKey ] = useState(null);
 
+  const mountRef = useRef(false);
+  const actionRef = useRef('');
+
   const { action, catalogId, modelerId, hints, roughModelerData, permitCheckOut, editable, stateId, versionId, holder } = actionData;
 
   const [form] = Form.useForm();
@@ -51,6 +55,7 @@ const EditModel = (props) => {
     } 
 
     setActionData({ action: _action, catalogId: _catalogId, modelerId: _modelerId, hints: _hints, roughModelerData: _roughModelerData, permitCheckOut: (_permitCheckOut==='true'), editable: (_editable==='true'), stateId: _stateId, versionId: _versionId, holder: _holder });
+    actionRef.current = _action;
 
     const interval = setInterval(() => {
       heartbeat();
@@ -63,12 +68,26 @@ const EditModel = (props) => {
     //eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
+  useMount(() => {
+    window?.addEventListener('beforeunload', confirmQuit);
+  })
+
+  useUnmount(() => {
+    window?.removeEventListener('beforeunload', confirmQuit);
+  })
+
   const heartbeat = () => {
     dispatchLatest({
       type: 'datamodel.heartbeat'
     });
   }
 
+  const confirmQuit = (e) => {
+    if (actionRef.current === 'edit') {
+      e.returnValue = '';
+    }
+  }
+
   const judgeAttributeRepeat = (attrs) => {
     const names = [], nameCountMap = {}, terms = [];
 
@@ -145,6 +164,7 @@ const EditModel = (props) => {
                 }
 
                 setActionData({ ...actionData, ...{ action: 'detail', modelerId: data.id||'', editable: data?.editable||false, stateId: data?.state?.id||'' } });
+                actionRef.current = 'detail';
 
                 LocalStorage.set('modelChange', !(LocalStorage.get('modelChange')||false));
               },
@@ -161,6 +181,8 @@ const EditModel = (props) => {
             const _action = getQueryParam(Action, props.location.search);
             
             setActionData({ ...actionData, ...{ action: (_action==='flow')?'flow':'detail', modelerId: data.id||'', stateId: data?.state?.id||'', permitCheckOut: data?.permitCheckOut||false, editable: data?.editable||false } });
+            actionRef.current = (_action==='flow')?'flow':'detail';
+
             LocalStorage.set('modelChange', !(LocalStorage.get('modelChange')||false));
           }
         },
@@ -179,12 +201,14 @@ const EditModel = (props) => {
 
   const edit = () => {
     setActionData({ ...actionData, action: 'edit' });
+    actionRef.current = 'edit';
   }
 
   const cancelEdit = () => {
     const _action = getQueryParam(Action, props.location.search);
 
     setActionData({ ...actionData, action: (_action==='flow')?'flow':'detail' });
+    actionRef.current = (_action==='flow')?'flow':'detail';
   }
 
   const onActionChange = (data) => {