templates/components/api_key_list.html

<!-- 美化的批量操作悬浮工具栏 - 独立于平台循环外部 -->
<div 

    x-cloak

    x-show="selectedKeys.length > 0"

    class="fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-blue-50 to-purple-50 rounded-lg shadow-xl px-4 py-3 flex items-center space-x-4 z-30 bulk-toolbar"

    style="backdrop-filter: blur(8px); border: 1px solid rgba(99, 102, 241, 0.2);"

    x-transition:enter="transition ease-out duration-300"

    x-transition:enter-start="opacity-0 transform translate-y-4"

    x-transition:enter-end="opacity-100 transform translate-y-0"

    x-transition:leave="transition ease-in duration-200"

    x-transition:leave-start="opacity-100 transform translate-y-0"

    x-transition:leave-end="opacity-0 transform translate-y-4"

>
    <!-- 精美的选中数量显示 -->
    <div class="flex items-center space-x-3">
        <div class="flex items-center justify-center h-8 min-w-8 px-2 rounded-full bg-gradient-to-r from-blue-400 to-indigo-500 text-white font-semibold text-sm shadow-sm">
            <span x-text="selectedKeys.length"></span>
        </div>
        
        <div class="flex flex-col">
            <span class="text-xs text-gray-500 uppercase tracking-wide">已选项目</span>
            <!-- 全选/取消全选 -->
            <button 

                @click="toggleSelectAll"

                class="text-xs text-indigo-600 hover:text-indigo-800 transition-colors font-medium"

                x-text="isAllSelected ? '取消全选' : '全选'"

            ></button>
        </div>
    </div>
    
    <!-- 精美分隔线 -->
    <div class="h-10 w-px bg-gradient-to-b from-transparent via-indigo-200 to-transparent"></div>
    
    <!-- 批量操作按钮 -->
    <div class="flex space-x-2 justify-end">
        <!-- 美化的批量复制按钮 -->
        <button 

            @click="bulkCopyApiKeys()"

            class="group relative inline-flex items-center px-4 py-2 overflow-hidden border border-transparent rounded-lg shadow-md text-sm font-medium text-white bg-gradient-to-r from-blue-500 to-indigo-500 hover:from-blue-600 hover:to-indigo-600 focus:outline-none transition-all duration-300 transform hover:scale-105"

        >
            <!-- 背景动画效果 -->
            <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-indigo-600 to-blue-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
            
            <svg xmlns="http://www.w3.org/2000/svg" class="relative z-10 h-4 w-4 mr-2 group-hover:animate-pulse" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
            </svg>
            <span class="relative z-10">批量复制</span>
        </button>
        
        <!-- 美化的批量删除按钮 -->
        <button 

            @click="bulkDeleteApiKeys()"

            class="group relative inline-flex items-center px-4 py-2 overflow-hidden border border-transparent rounded-lg shadow-md text-sm font-medium text-white bg-gradient-to-r from-red-500 to-pink-500 hover:from-red-600 hover:to-pink-600 focus:outline-none transition-all duration-300 transform hover:scale-105"

        >
            <!-- 背景动画效果 -->
            <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-pink-600 to-red-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
            
            <svg xmlns="http://www.w3.org/2000/svg" class="relative z-10 h-4 w-4 mr-2 group-hover:animate-pulse" 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 class="relative z-10">批量删除</span>
        </button>
    </div>
</div>

<!-- 分组的API密钥列表 -->
<div class="space-y-6">
    <!-- 遍历每个平台 -->
    {% for platform in platforms %}
        {% set platform_keys = grouped_keys.get(platform.id, {}).get('keys', []) %}
        <!-- 如果平台有API密钥且被筛选器选中，搜索模式下仅当该平台有匹配结果时显示 -->
        <div 

            x-cloak

            x-show="!isLoading && isPlatformVisible('{{ platform.id }}') && (searchTerm === '' && hasPlatformKeys('{{ platform.id }}') || (searchTerm !== '' && apiKeys.filter(key => key.platform === '{{ platform.id }}' && (currentView === 'valid' ? key.success === true : key.success === false) && matchesSearch(key.name, key.key)).length > 0))"

            x-transition:enter="transition ease-out duration-300"

            x-transition:enter-start="opacity-0 transform scale-95"

            x-transition:enter-end="opacity-100 transform scale-100"

            class="bg-white rounded-lg shadow overflow-hidden"

        >
            <!-- 平台标题 - 可折叠 -->
                <div 

                @click="togglePlatform('{{ platform.id }}')"

                class="px-6 py-4 cursor-pointer flex justify-between items-center border-b border-gray-200 transition-all duration-300"

                :class="{

                    'bg-gray-50 border-gray-200': !platformIds.includes('{{ platform.id }}')

                }"

                :style="{

                    backgroundColor: '{{ platform.id }}' in getPlatformStyles() ? getPlatformStyle('{{ platform.id }}')['background-color'] : 'rgba(243, 244, 246, 0.5)',

                    borderColor: '{{ platform.id }}' in getPlatformStyles() ? getPlatformStyle('{{ platform.id }}')['border-color'] : 'rgba(229, 231, 235, 1)'

                }"

            >
            <!-- 平台批量选择复选框 -->
            <div class="mr-3 flex items-center" @click.stop>
                <div class="relative h-5 w-5">
                    <!-- 圆形边框 -->
                    <div 

                        class="absolute inset-0 rounded-full border-2 transition-colors duration-200"

                        :class="selectedPlatforms.includes('{{ platform.id }}') ? 'border-blue-500' : 'border-gray-300'"

                    ></div>
                    
                    <!-- 未选中时的白色背景 -->
                    <div 

                        class="absolute inset-0.5 rounded-full bg-white"

                        x-show="!selectedPlatforms.includes('{{ platform.id }}')"

                    ></div>
                    
                    <!-- 选中时的蓝色填充 -->
                    <div 

                        x-show="selectedPlatforms.includes('{{ platform.id }}')"

                        class="absolute inset-0.5 rounded-full bg-blue-200"

                    ></div>
                    
                    <!-- 透明的复选框，用于捕获点击事件 -->
                    <input 

                        type="checkbox"

                        :checked="selectedPlatforms.includes('{{ platform.id }}')"

                        @click="togglePlatformSelection('{{ platform.id }}')"

                        class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"

                    />
                </div>
            </div>
            
<h2 class="text-lg font-medium flex items-center"

                    :style="{

                        color: '{{ platform.id }}' in getPlatformStyles() ? getPlatformStyle('{{ platform.id }}').color : '#111827'

                    }"

                >
                    <!-- 添加平台图标 -->
                    <img src="/static/img/{% if platform.id == 'anthropic' %}claude.svg{% elif platform.id == 'google' %}gemini.svg{% else %}{{ platform.id }}.svg{% endif %}" class="w-5 h-5 mr-2" alt="{{ platform.name }} 图标">
                    <span>{{ platform.name }}</span>
<span 

                        x-show="getPlatformKeyCount('{{ platform.id }}') > 0"

                        x-text="getPlatformKeyCount('{{ platform.id }}')"

                        class="ml-2 platform-title-counter"

                        :style="{

                            backgroundColor: '{{ platform.id }}' in getPlatformStyles() ? getPlatformStyle('{{ platform.id }}')['background-color'] : 'rgba(224, 242, 254, 1)',

                            color: '{{ platform.id }}' in getPlatformStyles() ? getPlatformStyle('{{ platform.id }}').color : '#0369a1',

                            borderRadius: '12px',

                            minWidth: '1.6rem',

                            padding: '0 0.4rem',

                            width: 'auto'

                        }"

                    ></span>
                </h2>
                <svg 

                    xmlns="http://www.w3.org/2000/svg" 

                    :class="{'transform rotate-180': platformStates['{{ platform.id }}']}"

                    class="h-5 w-5 accordion-icon"

                    :style="{

                        color: '{{ platform.id }}' in getPlatformStyles() ? getPlatformStyle('{{ platform.id }}').color : '#6b7280'

                    }"

                    viewBox="0 0 20 20" 

                    fill="currentColor"

                >
                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                </svg>
</div>
            
            <!-- 平台内容 - 可折叠 -->
            <div 

                x-show="platformStates['{{ platform.id }}']"

                x-transition:enter="transition-all ease-out duration-400 accordion-expand"

                x-transition:enter-start="opacity-0 max-h-0 overflow-hidden transform scale-y-95 origin-top"

                x-transition:enter-end="opacity-100 max-h-[2000px] transform scale-y-100 origin-top"

                x-transition:leave="transition-all ease-in-out duration-300 accordion-collapse"

                x-transition:leave-start="opacity-100 max-h-[2000px] transform scale-y-100 origin-top"

                x-transition:leave-end="opacity-0 max-h-0 overflow-hidden transform scale-y-95 origin-top"

                class="divide-y divide-gray-200 accordion-content"

            >
                <!-- 平台内的API密钥 -->
                {% for key in platform_keys %}
                    <div 

                        x-show="(currentView === 'valid' && {{ key.success|lower }} === true || currentView === 'invalid' && {{ key.success|lower }} === false) && matchesSearch('{{ key.name }}', '{{ key.key }}')"

                        class="px-6 py-4 hover:bg-gray-50 transition-colors duration-150 flex flex-col md:flex-row md:items-center md:justify-between group"

                        x-transition:enter="transition ease-out duration-300"

                        x-transition:enter-start="opacity-0"

                        x-transition:enter-end="opacity-100"

                        :class="{'bg-blue-50': selectedKeys.includes('{{ key.id }}')}"

                        data-key-id="{{ key.id }}"

                    >
                        <!-- 简洁的蓝点复选框 -->
                        <div class="mr-3 flex items-center">
                            <div class="relative h-5 w-5">
                                <!-- 圆形边框 -->
                                <div 

                                    class="absolute inset-0 rounded-full border-2 transition-colors duration-200"

                                    :class="selectedKeys.includes('{{ key.id }}') ? 'border-blue-500' : 'border-gray-300'"

                                ></div>
                                
                                <!-- 未选中时的白色背景 -->
                                <div 

                                    class="absolute inset-0.5 rounded-full bg-white"

                                    x-show="!selectedKeys.includes('{{ key.id }}')"

                                ></div>
                                
                                <!-- 选中时的蓝色填充 -->
                                <div 

            x-show="selectedKeys.includes('{{ key.id }}')"

            class="absolute inset-0.5 rounded-full bg-blue-200"

        ></div>
        
        <!-- 透明的复选框，用于捕获点击事件 -->
                                <input 

                                    type="checkbox"

                                    :checked="selectedKeys.includes('{{ key.id }}')"

                                    @click.stop="toggleKeySelection('{{ key.id }}')"

                                    class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"

                                />
                            </div>
                        </div>
                        
                        <div class="flex-grow min-w-0 mb-3 md:mb-0 md:mr-4">
                            <!-- 密钥名称 -->
                            <h3 class="text-sm font-medium text-gray-900 truncate">{{ key.name }}</h3>
                            
                            <!-- 创建和更新时间 -->
                            <div class="mt-1.5 flex items-center">
                                <!-- 创建时间部分 -->
                                <div class="flex items-center mr-2">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 text-gray-500 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                    </svg>
                                    <span class="text-xs text-gray-600">{{ key.created_at.split('T')[0] }}</span>
                                </div>
                                
                                <!-- 创建时间 -->
                                <div class="flex items-center mr-2">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 text-gray-500 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                                    </svg>
                                    <span class="text-xs text-gray-600">创建: {{ key.created_at.split('T')[1].split('.')[0] }}</span>
                                </div>
                                
                                <!-- 如果存在更新时间，显示更新时间 -->
                                {% if key.updated_at %}
                                <div class="flex items-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 text-gray-500 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                                    </svg>
                                    <span class="text-xs text-gray-600">更新: {{ key.updated_at.split('T')[1].split('.')[0] }}</span>
                                </div>
                                {% endif %}
                            </div>
                            
                            <!-- 显示API状态信息 -->
                            {% if key.success == True %}
                            <div class="mt-1 flex flex-wrap gap-2">
                                <!-- 如果有余额信息，显示余额 -->
                                {% if key.balance %}
                                <div class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                    </svg>
                                    余额: {{ key.balance }}
                                </div>
                                {% endif %}
                                
                                <!-- 如果有状态信息，显示状态 -->
                                {% if key.states %}
                                <div class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                    </svg>
                                    状态: {{ key.states }}
                                </div>
                                {% endif %}
                            </div>
                            {% elif key.success == False and key.return_message %}
                            <!-- 显示错误信息 -->
                            <div class="mt-1 flex items-center">
                                <div class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                    </svg>
                                    {{ key.return_message }}
                                </div>
                            </div>
                            {% endif %}
                            
                            <!-- 密钥值 -->
                            <div class="mt-1 relative group key-scroll-container custom-scrollbar overflow-x-auto">
                                <div class="text-sm text-gray-500 font-mono py-1 pr-10">
                                    {{ key.key }}
                                </div>
                                
                                <!-- 悬浮时的高亮背景 -->
                                <div class="absolute inset-0 bg-primary-50 opacity-0 group-hover:opacity-100 transition-opacity duration-150 -z-10 rounded"></div>
                            </div>
                            
                        </div>
                        
                        <!-- 操作按钮 -->
                        <div class="flex space-x-2 justify-end">
                            <!-- 复制按钮 -->
                            <button 

                                @click="copyToClipboard('{{ key.key }}', '{{ key.id }}')"

                                class="p-2 text-gray-500 hover:text-primary-600 rounded-md hover:bg-gray-100 transition-colors duration-150 focus:outline-none"

                                :class="{'text-green-600': copiedId === '{{ key.id }}'}"

                                data-clipboard-text="{{ key.key }}"

                            >
                                <span x-show="copiedId !== '{{ key.id }}'">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
                                    </svg>
                                </span>
                                <span x-show="copiedId === '{{ key.id }}'">
                                    <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="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                                    </svg>
                                </span>
                            </button>
                            
                            <!-- 编辑按钮 -->
                            <button 

                                @click="editApiKey('{{ key.id }}', '{{ key.name }}', '{{ key.key }}')"

                                class="p-2 text-gray-500 hover:text-blue-600 rounded-md hover:bg-gray-100 transition-colors duration-150 focus:outline-none"

                            >
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                </svg>
                            </button>
                            
                            <!-- 删除按钮 -->
                            <button 

                                @click="deleteApiKey('{{ key.id }}', '{{ key.name }}')"

                                class="p-2 text-gray-500 hover:text-red-600 rounded-md hover:bg-gray-100 transition-colors duration-150 focus:outline-none"

                            >
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                </svg>
                            </button>
                        </div>
                    </div>
                {% endfor %}
                
                <!-- 如果此平台没有密钥或者搜索无结果时显示 -->
                <div 

                    x-show="getPlatformKeyCount('{{ platform.id }}') === 0 || (searchTerm !== '' && getPlatformKeyCount('{{ platform.id }}', true) === 0)"

                    class="px-6 py-8 text-center text-gray-500"

                >
                    <div class="flex flex-col items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 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>
                        <p x-show="searchTerm === '' && currentView === 'valid'">此平台暂无有效API密钥</p>
                        <p x-show="searchTerm === '' && currentView === 'invalid'">此平台暂无无效API密钥</p>
                        <p x-show="searchTerm !== ''">没有找到匹配的API密钥</p>
                        <button 

                            @click="showAddModal = true; newKey.platform = '{{ platform.id }}'"

                            class="mt-4 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 transition-colors duration-200 space-x-2"

                        >
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" 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>添加 {{ platform.name }} 密钥</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    {% endfor %}
</div>