refactor: 优化API Key状态过滤逻辑,增强代码可读性

This commit is contained in:
AAEE86
2025-10-14 09:37:46 +08:00
parent 8d84e2fa6e
commit 38c61e1018
2 changed files with 40 additions and 23 deletions

View File

@@ -53,7 +53,9 @@
> >
<!-- 左上角错误状态码角标 --> <!-- 左上角错误状态码角标 -->
<div <div
v-if="(apiKey.status === 'error' || apiKey.status === 'disabled') && apiKey.errorMessage" v-if="
(apiKey.status === 'error' || apiKey.status === 'disabled') && apiKey.errorMessage
"
class="absolute -left-2 -top-2 z-10" class="absolute -left-2 -top-2 z-10"
> >
<span <span
@@ -73,7 +75,7 @@
<!-- API Key 信息 --> <!-- API Key 信息 -->
<div class="flex items-start justify-between gap-2"> <div class="flex items-start justify-between gap-2">
<span <span
class="font-mono text-xs font-medium text-gray-900 dark:text-gray-100 break-all flex-1" class="flex-1 break-all font-mono text-xs font-medium text-gray-900 dark:text-gray-100"
:title="apiKey.key" :title="apiKey.key"
> >
{{ maskApiKey(apiKey.key) }} {{ maskApiKey(apiKey.key) }}
@@ -88,7 +90,7 @@
</button> </button>
<button <button
v-if="apiKey.status === 'error' || apiKey.status === 'disabled'" v-if="apiKey.status === 'error' || apiKey.status === 'disabled'"
class="text-xs transition-colors disabled:opacity-50 disabled:cursor-not-allowed" class="text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-50"
:class="[ :class="[
apiKey.status === 'error' apiKey.status === 'error'
? 'text-orange-500 hover:text-orange-700 dark:text-orange-400 dark:hover:text-orange-300' ? 'text-orange-500 hover:text-orange-700 dark:text-orange-400 dark:hover:text-orange-300'
@@ -98,11 +100,14 @@
:disabled="resetting === getOriginalIndex(index)" :disabled="resetting === getOriginalIndex(index)"
title="重置状态" title="重置状态"
> >
<div v-if="resetting === getOriginalIndex(index)" class="loading-spinner-sm" /> <div
v-if="resetting === getOriginalIndex(index)"
class="loading-spinner-sm"
/>
<i v-else class="fas fa-redo"></i> <i v-else class="fas fa-redo"></i>
</button> </button>
<button <button
class="text-xs text-red-500 transition-colors hover:text-red-700 dark:text-red-400 dark:hover:text-red-600 disabled:opacity-50 disabled:cursor-not-allowed" class="text-xs text-red-500 transition-colors hover:text-red-700 disabled:cursor-not-allowed disabled:opacity-50 dark:text-red-400 dark:hover:text-red-600"
:disabled="deleting === getOriginalIndex(index)" :disabled="deleting === getOriginalIndex(index)"
@click="deleteApiKey(apiKey, getOriginalIndex(index))" @click="deleteApiKey(apiKey, getOriginalIndex(index))"
> >
@@ -113,15 +118,17 @@
</div> </div>
<!-- 统计信息(一行显示) --> <!-- 统计信息(一行显示) -->
<div class="flex flex-wrap items-center gap-3 text-xs text-gray-600 dark:text-gray-400"> <div
class="flex flex-wrap items-center gap-3 text-xs text-gray-600 dark:text-gray-400"
>
<div> <div>
<span <span
:class="[ :class="[
apiKey.status === 'active' apiKey.status === 'active'
? 'text-green-600 dark:text-green-400' ? 'text-green-600 dark:text-green-400'
: apiKey.status === 'error' : apiKey.status === 'error'
? 'text-red-600 dark:text-red-400' ? 'text-red-600 dark:text-red-400'
: 'text-yellow-600 dark:text-yellow-400' : 'text-yellow-600 dark:text-yellow-400'
]" ]"
> >
<i <i
@@ -129,8 +136,8 @@
apiKey.status === 'active' apiKey.status === 'active'
? 'fas fa-check-circle' ? 'fas fa-check-circle'
: apiKey.status === 'error' : apiKey.status === 'error'
? 'fas fa-exclamation-triangle' ? 'fas fa-exclamation-triangle'
: 'fas fa-exclamation-circle' : 'fas fa-exclamation-circle'
]" ]"
class="mr-1" class="mr-1"
/> />
@@ -138,15 +145,18 @@
apiKey.status === 'active' apiKey.status === 'active'
? '正常' ? '正常'
: apiKey.status === 'error' : apiKey.status === 'error'
? '异常' ? '异常'
: apiKey.status === 'disabled' : apiKey.status === 'disabled'
? '禁用' ? '禁用'
: apiKey.status || '未知' : apiKey.status || '未知'
}} }}
</span> </span>
</div> </div>
<div> <div>
<span>使用: <strong>{{ apiKey.usageCount || 0 }}</strong></span> <span
>使用: <strong>{{ apiKey.usageCount || 0 }}</strong
>次</span
>
</div> </div>
<div v-if="apiKey.lastUsedAt"> <div v-if="apiKey.lastUsedAt">
<span>{{ formatTime(apiKey.lastUsedAt) }}</span> <span>{{ formatTime(apiKey.lastUsedAt) }}</span>
@@ -159,18 +169,21 @@
<!-- 分页控制(底部) --> <!-- 分页控制(底部) -->
<div v-if="totalPages > 1" class="mt-4 flex items-center justify-between"> <div v-if="totalPages > 1" class="mt-4 flex items-center justify-between">
<div class="text-sm text-gray-600 dark:text-gray-400"> <div class="text-sm text-gray-600 dark:text-gray-400">
显示 {{ (currentPage - 1) * pageSize + 1 }}-{{ Math.min(currentPage * pageSize, totalItems) }} {{ totalItems }} 显示 {{ (currentPage - 1) * pageSize + 1 }}-{{
Math.min(currentPage * pageSize, totalItems)
}}
项,共 {{ totalItems }} 项
</div> </div>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<button <button
class="rounded-lg bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed" class="rounded-lg bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
:disabled="currentPage === 1" :disabled="currentPage === 1"
@click="currentPage = 1" @click="currentPage = 1"
> >
<i class="fas fa-angle-double-left" /> <i class="fas fa-angle-double-left" />
</button> </button>
<button <button
class="rounded-lg bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed" class="rounded-lg bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
:disabled="currentPage === 1" :disabled="currentPage === 1"
@click="currentPage--" @click="currentPage--"
> >
@@ -180,14 +193,14 @@
{{ currentPage }} / {{ totalPages }} {{ currentPage }} / {{ totalPages }}
</span> </span>
<button <button
class="rounded-lg bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed" class="rounded-lg bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
:disabled="currentPage === totalPages" :disabled="currentPage === totalPages"
@click="currentPage++" @click="currentPage++"
> >
<i class="fas fa-angle-right" /> <i class="fas fa-angle-right" />
</button> </button>
<button <button
class="rounded-lg bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed" class="rounded-lg bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
:disabled="currentPage === totalPages" :disabled="currentPage === totalPages"
@click="currentPage = totalPages" @click="currentPage = totalPages"
> >
@@ -347,7 +360,11 @@ const deleteApiKey = async (apiKey, index) => {
// 重置 API Key 状态 // 重置 API Key 状态
const resetApiKeyStatus = async (apiKey, index) => { const resetApiKeyStatus = async (apiKey, index) => {
if (!confirm(`确定要重置 API Key "${maskApiKey(apiKey.key)}" 的状态吗?这将清除错误信息并恢复为正常状态。`)) { if (
!confirm(
`确定要重置 API Key "${maskApiKey(apiKey.key)}" 的状态吗这将清除错误信息并恢复为正常状态`
)
) {
return return
} }

View File

@@ -3111,7 +3111,7 @@ const getDroidApiKeyCount = (account) => {
// 优先使用 apiKeys 数组来计算正常状态的 API Keys // 优先使用 apiKeys 数组来计算正常状态的 API Keys
if (Array.isArray(account.apiKeys)) { if (Array.isArray(account.apiKeys)) {
// 只计算状态不是 'error' 的 API Keys // 只计算状态不是 'error' 的 API Keys
return account.apiKeys.filter(apiKey => apiKey.status !== 'error').length return account.apiKeys.filter((apiKey) => apiKey.status !== 'error').length
} }
// 如果是字符串格式的 apiKeys尝试解析 // 如果是字符串格式的 apiKeys尝试解析
@@ -3120,7 +3120,7 @@ const getDroidApiKeyCount = (account) => {
const parsed = JSON.parse(account.apiKeys) const parsed = JSON.parse(account.apiKeys)
if (Array.isArray(parsed)) { if (Array.isArray(parsed)) {
// 只计算状态不是 'error' 的 API Keys // 只计算状态不是 'error' 的 API Keys
return parsed.filter(apiKey => apiKey.status !== 'error').length return parsed.filter((apiKey) => apiKey.status !== 'error').length
} }
} catch (error) { } catch (error) {
// 忽略解析错误,继续使用其他字段 // 忽略解析错误,继续使用其他字段