File size: 4,273 Bytes
bbb6398 834bfcd 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 |
<!-- 加载中状态显示 -->
<div
x-cloak
x-show="isLoading"
class="bg-white rounded-lg shadow-md p-8 text-center"
>
<div class="flex flex-col items-center">
<svg class="animate-spin h-12 w-12 mb-4 text-primary-500" 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>
<h3 class="text-lg font-semibold text-gray-900 mb-2">数据加载中</h3>
<p class="text-gray-500 max-w-md mx-auto">
请稍候，正在加载您的API密钥数据...
</p>
</div>
</div>
<!-- 全局搜索无结果时显示 -->
<div
x-cloak
x-show="!isLoading && searchTerm !== '' && apiKeys.filter(key => platformFilters[key.platform] && (currentView === 'valid' ? key.success === true : key.success === false) && matchesSearch(key.name, key.key)).length === 0"
class="bg-white rounded-lg shadow-md p-8 text-center"
>
<div class="flex flex-col items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mb-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
<h3 class="text-lg font-semibold text-gray-900 mb-2">无搜索结果</h3>
<p class="text-gray-500 mb-6 max-w-md mx-auto">
没有找到与 "<span x-text="searchTerm" class="font-medium"></span>" 匹配的API密钥
</p>
<button
@click="searchTerm = ''"
class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-colors duration-200 space-x-2"
>
<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>
<span>清除搜索</span>
</button>
</div>
</div>
<!-- 没有任何API密钥时显示（非搜索状态） -->
<div
x-cloak
x-show="!isLoading && totalKeyCount() === 0 && searchTerm === ''"
class="bg-white rounded-lg shadow-md p-8 text-center"
>
<div class="flex flex-col items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mb-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
<h3 class="text-lg font-semibold text-gray-900 mb-2">暂无API密钥</h3>
<p class="text-gray-500 mb-6 max-w-md mx-auto">
添加您的第一个API密钥以开始管理。您可以添加来自不同平台的多个密钥，方便快捷地使用。
</p>
<button
@click="showAddModal = true"
class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-colors duration-200 space-x-2"
>
<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="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
</svg>
<span>添加第一个API密钥</span>
</button>
</div>
</div>
|