优化

main.js

@@ -62,20 +62,20 @@ function createTray() {
       label: '打开', click: () => {
         showWindow()
       },
-      icon: iconPath,
+      // icon: iconPath,
     },
     {
       label: '退出', click: () => {
         app.quit();
         mainWindow = null;
       },
-      icon: iconPath,
+      // icon: iconPath,
     },
     {
       label: '退出到系统托盘', click: () => {
         mainWindow.hide();
       },
-      icon: iconPath,
+      // icon: iconPath,
     },
   ]);
   tray.setToolTip('智汇享');

src/components/Operation/index.module.scss

@@ -24,4 +24,18 @@
       background-color: #880F0F;
     }
   }
+}
+
+.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,5 +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";
 type OperationKeyType = 'minimize' | 'quit' | 'maximize' | 'unmaximize';
 type OperationType = {
@@ -46,11 +49,17 @@ const Operation: React.FC = () => {
     key: 'quit',
     title: '关闭',
     onClick: (key: OperationKeyType) => {
-      window.electron.setViewStatus(key)
+      if (storage.getItem('isTips') === 'true') {
+        window.electron.setViewStatus(key)
+      } else {
+        setIsCloseModal(true)
+      }
     },
     show: true,
   },])
-
+  const [isCloseModal, setIsCloseModal] = useState(false);
+  const [isTips, setIsTips] = useState(false);
+  const [optionsValue, setOperation] = useState<OperationKeyType>('minimize');
   useEffect(() => {
     getIsMaximized()
     const handleResize = () => {
@@ -96,6 +105,49 @@ 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>
     </>
   )
 }

src/utils/styles/App.scss

@@ -212,7 +212,8 @@ $pagination-hover-background-color: #5575F2;
       color: black !important;
     }
   }
-  .ant-pagination-item-ellipsis{
+
+  .ant-pagination-item-ellipsis {
     color: white !important;
   }
 }
@@ -297,4 +298,15 @@ $pagination-hover-background-color: #5575F2;
   .ant-empty-description {
     color: #808080;
   }
+}
+
+.ant-radio-group {
+  .ant-radio-wrapper {
+    color: white;
+  }
+
+  .ant-radio-checked .ant-radio-inner {
+    border-color: $btn-background-color;
+    background-color: $btn-background-color;
+  }
 }