templates/components/modals/delete_confirm_modal.html

<!-- 删除确认模态框 -->
<div 
    x-cloak
    x-show="showDeleteConfirm" 
    class="fixed inset-0 overflow-y-auto z-50"
    x-transition:enter="transition ease-out duration-300"
    x-transition:enter-start="opacity-0"
    x-transition:enter-end="opacity-100"
    x-transition:leave="transition ease-in duration-200"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"
    @keydown.escape.window="showDeleteConfirm = false"
    @keydown.enter.window="if(showDeleteConfirm && !isDeleting) confirmDelete()"
>
    <div class="flex items-center justify-center min-h-screen p-4">
        <!-- 高斯模糊背景 -->
        <div 
            x-cloak
            @click="showDeleteConfirm = false"
            x-show="showDeleteConfirm" 
            x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0 backdrop-blur-none"
            x-transition:enter-end="opacity-80 backdrop-blur-md"
            x-transition:leave="transition ease-in duration-200"
            x-transition:leave-start="opacity-80 backdrop-blur-md"
            x-transition:leave-end="opacity-0 backdrop-blur-none"
            class="fixed inset-0 bg-gray-900/60 backdrop-blur-md"
        ></div>
        
        <!-- 模态框内容 -->
        <div 
            x-cloak
            x-show="showDeleteConfirm" 
            @click.away="showDeleteConfirm = false" 
            x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0 transform scale-95 translate-y-4"
            x-transition:enter-end="opacity-100 transform scale-100 translate-y-0"
            x-transition:leave="transition ease-in duration-200"
            x-transition:leave-start="opacity-100 transform scale-100 translate-y-0"
            x-transition:leave-end="opacity-0 transform scale-95 translate-y-4"
            class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden max-w-3xl z-50 relative border border-gray-200 dark:border-gray-700 flex flex-col w-full"
        >
            <!-- 顶部装饰条 -->
            <div class="absolute top-0 left-0 right-0 h-1.5 bg-gradient-to-r from-red-400 via-red-500 to-red-600"></div>
            
            <!-- 模态框标题 -->
            <div class="px-6 py-4 flex justify-between items-center">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-red-500" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                    </svg>
                    确认删除
                </h3>
                <button 
                    @click="showDeleteConfirm = false" 
                    class="text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400 transition-colors focus:outline-none rounded-full p-1"
                    aria-label="关闭"
                >
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
                    </svg>
                </button>
            </div>
            
            <!-- 模态框内容 -->
            <div class="px-6 pb-6">
                <div class="bg-red-50 dark:bg-red-900/10 rounded-lg p-4 border border-red-100 dark:border-red-800/30 mb-4 shadow-sm">
                    <!-- 单个删除提示 -->
                    <template x-if="!isBulkDelete">
                        <div>
                            <p class="text-gray-700 dark:text-gray-300 mb-1 flex items-center">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1.5 text-red-500 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                </svg>
                                您确定要删除以下API密钥吗？
                            </p>
                            <p class="text-red-600 dark:text-red-400 text-sm font-medium ml-5.5">此操作无法撤销，删除后数据将无法恢复。</p>
                        </div>
                    </template>
                    
                    <!-- 批量删除提示 -->
                    <template x-if="isBulkDelete">
                        <div>
                            <p class="text-gray-700 dark:text-gray-300 mb-1 flex items-center">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1.5 text-red-500 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                </svg>
                                您确定要删除 <span class="font-semibold text-red-600 dark:text-red-400" x-text="selectedKeys.length"></span> 个选中的API密钥吗？
                            </p>
                            <p class="text-red-600 dark:text-red-400 text-sm font-medium ml-5.5">此操作无法撤销，删除后数据将无法恢复。</p>
                        </div>
                    </template>
                </div>
                
                <!-- 单个删除时显示详情 -->
                <div 
                    x-show="!isBulkDelete"
                    class="bg-gray-50 dark:bg-gray-700/30 rounded-lg p-4 border border-gray-100 dark:border-gray-700 transition-all duration-300 hover:shadow-md relative overflow-hidden group"
                >
                    <!-- 装饰性背景元素 -->
                    <div class="absolute inset-0 opacity-5 pointer-events-none">
                        <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
                            <defs>
                                <pattern id="key-pattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
                                    <path d="M10,0 L10,20 M0,10 L20,10" stroke="currentColor" stroke-width="0.5" stroke-dasharray="2,2"/>
                                </pattern>
                            </defs>
                            <rect x="0" y="0" width="100%" height="100%" fill="url(#key-pattern)" />
                        </svg>
                    </div>
                    
                    <div class="flex items-start relative">
                        <div class="flex-shrink-0 mr-4">
                            <div class="bg-red-100 dark:bg-red-800/20 w-10 h-10 rounded-full flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-500 dark:text-red-400" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M18 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H6v-1l1-1 1-1-.257-.257A6 6 0 1118 8zm-6-4a1 1 0 100 2 2 2 0 012 2 1 1 0 102 0 4 4 0 00-4-4z" clip-rule="evenodd" />
                                </svg>
                            </div>
                        </div>
                        <div class="flex-grow">
                            <div class="flex flex-col">
                                <span class="text-xs uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-1">将要删除的密钥:</span>
                                <div class="bg-white dark:bg-gray-800 px-3 py-2 rounded-md border border-gray-200 dark:border-gray-700 shadow-sm">
                                    <span 
                                        x-text="deleteKeyName && deleteKeyName.length > 60 ? deleteKeyName.substring(0, 60) + '...' : deleteKeyName" 
                                        class="font-medium text-gray-900 dark:text-white"
                                        :title="deleteKeyName"
                                    ></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 美化的批量删除时显示数量汇总 -->
                <div 
                    x-show="isBulkDelete"
                    class="bg-gradient-to-r from-red-50 to-pink-50 dark:from-red-900/10 dark:to-pink-900/10 rounded-lg p-4 border border-red-100/50 dark:border-red-800/30 transition-all duration-300 hover:shadow-lg relative overflow-hidden group"
                >
                    <!-- 装饰元素 - 微妙的图案背景 -->
                    <div class="absolute inset-0 opacity-5 pointer-events-none">
                        <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
                            <defs>
                                <pattern id="deletion-pattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
                                    <path d="M0,10 L20,10 M10,0 L10,20" stroke="currentColor" stroke-width="0.5"/>
                                </pattern>
                            </defs>
                            <rect x="0" y="0" width="100%" height="100%" fill="url(#deletion-pattern)" />
                        </svg>
                    </div>
                    
                    <div class="flex items-start relative">
                        <!-- 装饰图标 -->
                        <div class="flex-shrink-0 mr-4">
                            <div class="bg-red-100 dark:bg-red-800/20 w-10 h-10 rounded-full flex items-center justify-center">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-500 dark:text-red-400" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
                                </svg>
                            </div>
                        </div>
                        
                        <div class="flex-grow">
                            <h4 class="text-sm font-semibold text-gray-800 dark:text-gray-200 mb-1">批量删除操作</h4>
                            <div class="text-xs text-gray-600 dark:text-gray-300 mb-3">以下项目将被永久删除：</div>
                            
                            <!-- 数量显示 -->
                            <div class="flex items-center">
                                <div class="inline-flex items-center justify-center bg-red-100 text-red-800 dark:bg-red-800/30 dark:text-red-300 px-3 py-1 rounded-full text-sm font-medium shadow-sm">
                                    <span x-text="selectedKeys.length" class="text-lg font-bold mr-1"></span>
                                    <span>个API密钥</span>
                                </div>
                                
                                <!-- 动态提示 -->
                                <div class="ml-3 text-xs text-gray-500 dark:text-gray-400 italic">
                                    <template x-if="selectedKeys.length > 10">
                                        <span>（大批量删除，请谨慎操作）</span>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 按钮组 -->
                <div class="flex justify-end space-x-3 mt-6">
                    <button 
                        type="button" 
                        @click="showDeleteConfirm = false"
                        class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none transition-colors duration-200"
                    >
                        取消
                    </button>
                    <button 
                        type="button"
                        @click="confirmDelete()"
                        :disabled="isDeleting"
                        class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none transition-colors duration-200 space-x-2 disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                        <template x-if="!isDeleting">
                            <span class="flex items-center">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1.5" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
                                </svg>
                                确认删除
                            </span>
                        </template>
                        <template x-if="isDeleting">
                            <span class="flex items-center">
                                <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                </svg>
                                处理中...
                            </span>
                        </template>
                    </button>
                </div>
            </div>
            
            <!-- 键盘快捷键提示 -->
            <div class="absolute bottom-3 left-6 text-xs text-gray-400 dark:text-gray-500 flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 mr-1" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2h-1V9a1 1 0 00-1-1z" clip-rule="evenodd" />
                </svg>
                Esc 取消 | Enter 确认
            </div>
        </div>
    </div>
</div>