✨ feat: 关闭应用的提示修改 可存储配置最小化 还是 关闭

src/renderer/layout/components/TitleBar.vue

@@ -10,14 +10,37 @@
       </button>
     </div>
   </div>
+
+  <n-modal
+    v-model:show="showCloseModal"
+    preset="dialog"
+    title="关闭应用"
+    :style="{ width: '400px' }"
+    :mask-closable="true"
+  >
+    <div class="close-dialog-content">
+      <p>请选择关闭方式</p>
+      <div class="remember-choice">
+        <n-checkbox v-model:checked="rememberChoice">记住我的选择</n-checkbox>
+      </div>
+    </div>
+    <template #action>
+      <div class="dialog-footer">
+        <n-button type="primary" @click="handleAction('minimize')">最小化到托盘</n-button>
+        <n-button @click="handleAction('close')">退出应用</n-button>
+      </div>
+    </template>
+  </n-modal>
 </template>
 
 <script setup lang="ts">
-import { useDialog } from 'naive-ui';
-
+import { ref } from 'vue';
+import { useStore } from 'vuex';
 import { isElectron } from '@/utils';
 
-const dialog = useDialog();
+const store = useStore();
+const showCloseModal = ref(false);
+const rememberChoice = ref(false);
 
 const minimize = () => {
   if (!isElectron) {
@@ -26,22 +49,40 @@ const minimize = () => {
   window.api.minimize();
 };
 
+const handleAction = (action: 'minimize' | 'close') => {
+  if (rememberChoice.value) {
+    store.commit('setSetData', {
+      ...store.state.setData,
+      closeAction: action
+    });
+  }
+  
+  if (action === 'minimize') {
+    window.api.miniTray();
+  } else {
+    window.api.close();
+  }
+  showCloseModal.value = false;
+};
+
 const close = () => {
   if (!isElectron) {
     return;
   }
-  dialog.warning({
-    title: '提示',
-    content: '确定要退出吗？',
-    positiveText: '最小化',
-    negativeText: '关闭',
-    onPositiveClick: () => {
-      window.api.minimize();
-    },
-    onNegativeClick: () => {
-      window.api.close();
-    }
-  });
+
+  const closeAction = store.state.setData.closeAction;
+  
+  if (closeAction === 'minimize') {
+    window.api.miniTray();
+    return;
+  }
+  
+  if (closeAction === 'close') {
+    window.api.close();
+    return;
+  }
+
+  showCloseModal.value = true;
 };
 
 const drag = (event: MouseEvent) => {
@@ -68,4 +109,12 @@ const drag = (event: MouseEvent) => {
 button {
   @apply text-gray-600 dark:text-gray-400 hover:text-green-500;
 }
+
+.close-dialog-content {
+  @apply flex flex-col gap-4;
+}
+
+.dialog-footer {
+  @apply flex gap-4 justify-end;
+}
 </style>