|
|
|
|
|
<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>
|
|
|
|
