File size: 15,941 Bytes
bbb6398 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 |
<!-- 删除确认模态框 -->
<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>
|