From 179fd26dd8dbebc5e4a5c0c96000cb4adb5bb376 Mon Sep 17 00:00:00 2001
From: shaw <shaw-wei@foxmail.com>
Date: Tue, 29 Jul 2025 18:56:11 +0800
Subject: [PATCH] =?UTF-8?q?fix(admin-spa):=20=E4=BF=AE=E5=A4=8D=E7=A1=AE?=
 =?UTF-8?q?=E8=AE=A4=E5=BC=B9=E7=AA=97=E5=B1=82=E7=BA=A7=E5=92=8C=E5=85=B3?=
 =?UTF-8?q?=E9=97=AD=E6=8C=89=E9=92=AE=E5=93=8D=E5=BA=94=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 提高ConfirmDialog的z-index到100，确保显示在最上层
- 修改确认弹窗样式，使用amber色调作为警告色
- 为API Key弹窗X按钮添加单独的handleDirectClose方法
- 解决确认弹窗被API Key弹窗遮挡的问题
---
 .../src/components/apikeys/NewApiKeyModal.vue | 28 +++++++++++++++++--
 .../src/components/common/ConfirmDialog.vue   | 10 +++++--
 2 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/web/admin-spa/src/components/apikeys/NewApiKeyModal.vue b/web/admin-spa/src/components/apikeys/NewApiKeyModal.vue
index 13947829..00fd94c9 100644
--- a/web/admin-spa/src/components/apikeys/NewApiKeyModal.vue
+++ b/web/admin-spa/src/components/apikeys/NewApiKeyModal.vue
@@ -13,8 +13,9 @@
           </div>
         </div>
         <button 
-          @click="handleClose"
+          @click="handleDirectClose"
           class="text-gray-400 hover:text-gray-600 transition-colors"
+          title="直接关闭（不推荐）"
         >
           <i class="fas fa-times text-xl"></i>
         </button>
@@ -158,7 +159,7 @@ const copyApiKey = async () => {
   }
 }
 
-// 关闭弹窗
+// 关闭弹窗（带确认）
 const handleClose = async () => {
   if (window.showConfirm) {
     const confirmed = await window.showConfirm(
@@ -180,6 +181,29 @@ const handleClose = async () => {
     }
   }
 }
+
+// 直接关闭（不带确认）
+const handleDirectClose = async () => {
+  if (window.showConfirm) {
+    const confirmed = await window.showConfirm(
+      '确定要关闭吗？',
+      '您还没有保存API Key，关闭后将无法再次查看。\n\n建议您先复制API Key再关闭。',
+      '仍然关闭',
+      '返回复制'
+    )
+    if (confirmed) {
+      emit('close')
+    }
+  } else {
+    // 降级方案
+    const confirmed = confirm(
+      '您还没有保存API Key，关闭后将无法再次查看。\n\n确定要关闭吗？'
+    )
+    if (confirmed) {
+      emit('close')
+    }
+  }
+}
 </script>
 
 <style scoped>
diff --git a/web/admin-spa/src/components/common/ConfirmDialog.vue b/web/admin-spa/src/components/common/ConfirmDialog.vue
index 94105384..4174dd10 100644
--- a/web/admin-spa/src/components/common/ConfirmDialog.vue
+++ b/web/admin-spa/src/components/common/ConfirmDialog.vue
@@ -3,12 +3,12 @@
     <Transition name="modal" appear>
       <div 
         v-if="isVisible"
-        class="fixed inset-0 modal z-50 flex items-center justify-center p-4"
+        class="fixed inset-0 modal z-[100] flex items-center justify-center p-4"
         @click.self="handleCancel"
       >
         <div class="modal-content w-full max-w-md p-6 mx-auto">
           <div class="flex items-start gap-4 mb-6">
-            <div class="flex-shrink-0 w-12 h-12 bg-gradient-to-br from-red-500 to-red-600 rounded-xl flex items-center justify-center">
+            <div class="flex-shrink-0 w-12 h-12 bg-gradient-to-br from-amber-500 to-amber-600 rounded-xl flex items-center justify-center">
               <i class="fas fa-exclamation-triangle text-white text-lg"></i>
             </div>
             <div class="flex-1">
@@ -27,7 +27,7 @@
             </button>
             <button 
               @click="handleConfirm"
-              class="btn btn-danger px-6 py-3"
+              class="btn btn-warning px-6 py-3"
               :class="{ 'opacity-50 cursor-not-allowed': isProcessing }"
               :disabled="isProcessing"
             >
@@ -147,6 +147,10 @@ defineExpose({
   @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
 }
 
+.btn-warning {
+  @apply bg-amber-600 text-white hover:bg-amber-700 focus:ring-amber-500;
+}
+
 .loading-spinner {
   @apply w-4 h-4 border-2 border-gray-300 border-t-white rounded-full animate-spin;
 }