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;
 }