File size: 4,690 Bytes
bbb6398 5ad3e05 bbb6398 5ad3e05 bbb6398 5ad3e05 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 |
<!-- 顶部工具栏 -->
<div class="mb-6 flex flex-col gap-4">
<!-- 搜索和添加按钮 -->
<div class="flex justify-between items-center flex-wrap gap-4">
<div class="relative w-full md:w-auto flex-grow max-w-md">
<input
type="text"
placeholder="搜索API密钥..."
x-model="searchTerm"
class="pl-10 pr-4 py-2 w-full rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary-500 focus:border-transparent"
>
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" 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>
</div>
</div>
<button
@click="showAddModal = true"
@keydown.alt.n.stop="showAddModal = true"
class="inline-flex items-center px-3 py-1.5 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"
title="添加API密钥 (Alt+N)"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" 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>添加</span>
</button>
</div>
<!-- 服务商筛选标签 -->
<div class="flex flex-wrap gap-2 mt-2" x-cloak>
<!-- 全部标签 -->
<button
@click="toggleAllPlatformFilters()"
class="platform-filter-tag all-tag inline-flex items-center px-3.5 py-1.5 rounded-full text-sm font-medium transition-colors duration-200 border"
:class="allPlatformsSelected ? 'selected bg-primary-600 text-white border-primary-600' : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-100'"
>
<span>全部</span>
<span
class="tag-counter"
:class="allPlatformsSelected ? 'bg-primary-700 text-white' : 'bg-gray-200 text-gray-700'"
x-text="totalKeyCount()"
style="border-radius: 12px; min-width: 1.6rem; padding: 0 0.4rem; width: auto;"
></span>
</button>
<!-- 动态生成平台标签 -->
<template x-for="platform in getPlatforms()" :key="platform.id">
<button
@click="togglePlatformFilter(platform.id)"
class="platform-filter-tag inline-flex items-center px-3.5 py-1.5 rounded-full text-sm font-medium transition-colors duration-200 border shadow-sm"
:class="{
'bg-white text-gray-700 border-gray-300 hover:bg-gray-100': !platformFilters[platform.id],
'selected': platformFilters[platform.id]
}"
:style="platformFilters[platform.id] ? getPlatformStyle(platform.id) : {}"
>
<!-- 添加平台图标 -->
<img :src="'/static/img/' + (platform.id === 'anthropic' ? 'claude.svg' : platform.id === 'google' ? 'gemini.svg' : platform.id + '.svg')" class="w-4 h-4 mr-1.5" :alt="platform.name + ' 图标'">
<span x-text="platform.name"></span>
<span
class="tag-counter"
:class="{
'bg-gray-200 text-gray-700': !platformFilters[platform.id]
}"
:style="platformFilters[platform.id] ? {
background: 'rgba(' + getPlatformStyle(platform.id).color.replace('#', '').match(/.{2}/g).map(hex => parseInt(hex, 16)).join(',') + ',0.1)',
borderRadius: '12px',
minWidth: '1.6rem',
padding: '0 0.4rem',
width: 'auto'
} : {
borderRadius: '12px',
minWidth: '1.6rem',
padding: '0 0.4rem',
width: 'auto'
}"
x-text="getPlatformKeyCount(platform.id)"
></span>
</button>
</template>
</div>
</div>
|