优化

src/App.tsx

@@ -17,12 +17,14 @@ import * as CryptoJS from 'crypto-js';
 import { PostLogin } from "@/api/Login";
 import { startSignalr } from '@/utils/package/signalr';
 import agora from "@/utils/package/agora";
+import QuitTips from "@/components/QuitTips";
 
 const App: React.FC = () => {
   const navigate = useNavigate();
   const { state } = useLocation();
   const joinMeetingModalRef = useRef<any>();
   const updateModalRef = useRef<any>();
+  const quitTipsRef = useRef<any>();
   const [_windowSize, setWindowSize] = useState({
     width: window.innerWidth,
     height: window.innerHeight,
@@ -116,7 +118,7 @@ const App: React.FC = () => {
     onReconnected(async () => {
       storage.setItem('reconnect', true)
     })
-    window.electron.onUpdate((data:any) => {
+    window.electron.onUpdate((data: any) => {
       updateModalRef.current.changeModal(data)
     })
   }, [])
@@ -181,6 +183,7 @@ const App: React.FC = () => {
       <Spin spinning={spinning} fullscreen />
       <JoinMeetingModal ref={joinMeetingModalRef} />
       <UpdateModal ref={updateModalRef} />
+      <QuitTips ref={quitTipsRef} />
     </>
   )
 }

src/components/Operation/index.module.scss

@@ -25,17 +25,3 @@
     }
   }
 }
-
-.isCloseModal {
-  .isCloseModalContent {
-    display: flex;
-    align-items: center;
-    margin: 10px 0;
-  }
-
-  .isCloseModalFooter {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-}

src/components/Operation/index.tsx

@@ -1,9 +1,8 @@
 import styles from '@/components/Operation/index.module.scss'
 import { storage } from '@/utils';
 import ImageUrl from '@/utils/package/ImageUrl';
-import { InfoCircleOutlined } from '@ant-design/icons';
-import { Button, Checkbox, Modal, Radio } from 'antd';
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
+import QuitTips from '../QuitTips';
 type OperationKeyType = 'minimize' | 'quit' | 'maximize' | 'unmaximize';
 type OperationType = {
   icon: string;
@@ -13,6 +12,7 @@ type OperationType = {
   show: boolean;
 }
 const Operation: React.FC = () => {
+  const quitTipsRef = useRef<any>()
   const [_windowSize, setWindowSize] = useState({
     width: window.innerWidth,
     height: window.innerHeight,
@@ -52,14 +52,11 @@ const Operation: React.FC = () => {
       if (storage.getItem('isTips') === 'true') {
         window.electron.setViewStatus(key)
       } else {
-        setIsCloseModal(true)
+        quitTipsRef.current.changeModal()
       }
     },
     show: true,
   },])
-  const [isCloseModal, setIsCloseModal] = useState(false);
-  const [isTips, setIsTips] = useState(false);
-  const [optionsValue, setOperation] = useState<OperationKeyType>('minimize');
   useEffect(() => {
     getIsMaximized()
     const handleResize = () => {
@@ -105,49 +102,7 @@ const Operation: React.FC = () => {
           })
         }
       </div>
-      <Modal
-        title="关闭提示"
-        open={isCloseModal}
-        footer={null}
-        onCancel={() => setIsCloseModal(false)}
-        centered
-        width={'380px'}
-      >
-        <div className={styles.isCloseModal}>
-          <div className={styles.isCloseModalContent}>
-            <InfoCircleOutlined style={{ color: 'white', fontSize: '44px' }} />
-            <div style={{
-              marginLeft: '10px'
-            }}>
-              <span style={{
-                color: 'white',
-                fontSize: '18px',
-                display: 'block',
-                marginBottom: '10px'
-              }}>您点击了关闭按钮，您是想：</span>
-              <Radio.Group onChange={(e) => {
-                setOperation(e.target.value);
-              }} value={optionsValue}>
-                <Radio value={'minimize'}>最小化到系统托盘区，不退出程序。</Radio>
-                <Radio value={'quit'}>退出程序。</Radio>
-              </Radio.Group>
-            </div>
-          </div>
-          <div className={styles.isCloseModalFooter}>
-            <Checkbox onChange={(e) => {
-              setIsTips(e.target.checked)
-              storage.setItem('isTips', e.target.checked)
-            }} defaultChecked={isTips}>不再提示</Checkbox>
-            <div>
-              <Button type="primary" className='m-ant-btn' onClick={() => {
-                setIsCloseModal(false)
-                window.electron.setViewStatus(optionsValue)
-              }} size={'small'}>确定</Button>
-              <Button size={'small'} type="primary" style={{ backgroundColor: '#31353A', marginLeft: '10px' }} onClick={() => setIsCloseModal(false)}>取消</Button>
-            </div>
-          </div>
-        </div>
-      </Modal>
+      <QuitTips ref={quitTipsRef} />
     </>
   )
 }

src/components/QuitTips/index.module.scss

@@ -0,0 +1,13 @@
+.isCloseModal {
+  .isCloseModalContent {
+    display: flex;
+    align-items: center;
+    margin: 10px 0;
+  }
+
+  .isCloseModalFooter {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+}

src/components/QuitTips/index.tsx

@@ -0,0 +1,65 @@
+import styles from '@/components/QuitTips/index.module.scss'
+import { storage } from '@/utils';
+import { InfoCircleOutlined } from '@ant-design/icons';
+import { Button, Checkbox, Modal, Radio } from 'antd';
+import { useState, useImperativeHandle, forwardRef } from "react";
+type OperationKeyType = 'minimize' | 'quit' | 'maximize' | 'unmaximize';
+const QuitTips = forwardRef((props: any, ref: any) => {
+  useImperativeHandle(ref, () => ({
+    changeModal: () => {
+      setIsCloseModal(true)
+    }
+  }))
+  const [isCloseModal, setIsCloseModal] = useState(false);
+  const [isTips, setIsTips] = useState(false);
+  const [optionsValue, setOperation] = useState<OperationKeyType>('minimize');
+  return (
+    <>
+      <Modal
+        title="关闭提示"
+        open={isCloseModal}
+        footer={null}
+        onCancel={() => setIsCloseModal(false)}
+        centered
+        width={'380px'}
+      >
+        <div className={styles.isCloseModal}>
+          <div className={styles.isCloseModalContent}>
+            <InfoCircleOutlined style={{ color: 'white', fontSize: '44px' }} />
+            <div style={{
+              marginLeft: '10px'
+            }}>
+              <span style={{
+                color: 'white',
+                fontSize: '18px',
+                display: 'block',
+                marginBottom: '10px'
+              }}>您点击了关闭按钮，您是想：</span>
+              <Radio.Group onChange={(e) => {
+                setOperation(e.target.value);
+              }} value={optionsValue}>
+                <Radio value={'minimize'}>最小化到系统托盘区，不退出程序。</Radio>
+                <Radio value={'quit'}>退出程序。</Radio>
+              </Radio.Group>
+            </div>
+          </div>
+          <div className={styles.isCloseModalFooter}>
+            <Checkbox onChange={(e) => {
+              setIsTips(e.target.checked)
+              storage.setItem('isTips', e.target.checked)
+            }} defaultChecked={isTips}>不再提示</Checkbox>
+            <div>
+              <Button type="primary" className='m-ant-btn' onClick={() => {
+                setIsCloseModal(false)
+                window.electron.setViewStatus(optionsValue)
+              }} size={'small'}>确定</Button>
+              <Button size={'small'} type="primary" style={{ backgroundColor: '#31353A', marginLeft: '10px' }} onClick={() => setIsCloseModal(false)}>取消</Button>
+            </div>
+          </div>
+        </div>
+      </Modal>
+    </>
+  )
+})
+
+export default QuitTips