github/claude-relay-service
1
0
Fork 0
mirror of https://github.com/Wei-Shaw/claude-relay-service.git synced 2026-01-23 09:38:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: 进度条配色优化

Browse Source
This commit is contained in:
shaw
2025-09-08 22:13:46 +08:00
parent 73d3df56e5
commit 6e16df0b45
2 changed files with 131 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
web/admin-spa/src/components/apikeys/LimitProgressBar.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="w-full"> <div class="w-full">
<div class="relative h-7 w-full overflow-hidden rounded-md" :class="containerClass"> <div class="relative h-8 w-full overflow-hidden rounded-lg shadow-sm" :class="containerClass">
<!-- 背景层 --> <!-- 背景层 -->
<div class="absolute inset-0" :class="backgroundClass"></div> <div class="absolute inset-0" :class="backgroundClass"></div>
@@ -11,31 +11,29 @@
:style="{ width: progress + '%' }" :style="{ width: progress + '%' }"
></div> ></div>
<!-- 文字层 --> <!-- 文字层 - 使用双层文字技术确保可读性 -->
<div class="relative z-10 flex h-full items-center justify-between px-2"> <div class="relative z-10 flex h-full items-center justify-between px-3">
<div class="flex items-center gap-1.5"> <div class="flex items-center gap-1.5">
<i :class="['text-xs', iconClass]" :style="textShadowStyle" /> <i :class="['text-xs', iconClass]" />
<span class="text-xs font-medium" :class="textClass" :style="textShadowStyle">{{ <span class="text-xs font-semibold" :class="labelTextClass">{{ label }}</span>
label
}}</span>
</div> </div>
<div class="flex items-center gap-1"> <div class="flex items-center gap-1.5">
<span class="text-xs font-bold" :class="valueTextClass" :style="valueShadowStyle"> <span class="text-xs font-bold tabular-nums" :class="currentValueClass">
${{ current.toFixed(2) }} ${{ current.toFixed(2) }}
</span> </span>
<span class="text-xs" :class="textClass" :style="textShadowStyle" <span class="text-xs font-medium" :class="limitTextClass">
>/ ${{ limit.toFixed(2) }}</span / ${{ limit.toFixed(2) }}
> </span>
</div> </div>
</div> </div>
<!-- 闪光效果（可选） --> <!-- 闪光效果（可选） -->
<div <div
v-if="showShine && progress > 0" v-if="showShine && progress > 0"
class="absolute inset-0 opacity-30" class="absolute inset-0 opacity-20"
:style="{ :style="{
background: background:
'linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.7) 50%, transparent 60%)', 'linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.5) 50%, transparent 60%)',
animation: 'shine 3s infinite' animation: 'shine 3s infinite'
}" }"
></div> ></div>
@@ -76,85 +74,85 @@ const progress = computed(() => {
return Math.min(percentage, 100) return Math.min(percentage, 100)
}) })
// 容器样式 // 容器样式 - 使用更柔和的边框和阴影
const containerClass = computed(() => { const containerClass = computed(() => {
return 'bg-gradient-to-r border border-opacity-20' return 'border border-gray-200/80 dark:border-gray-600/50 shadow-sm'
}) })
// 背景样式（浅色背景） // 背景样式 - 使用更浅的背景色提升对比度
const backgroundClass = computed(() => { const backgroundClass = computed(() => {
switch (props.type) { switch (props.type) {
case 'daily': case 'daily':
return 'bg-gradient-to-r from-green-50 to-green-100 dark:from-green-950/30 dark:to-green-900/30' return 'bg-gray-100/50 dark:bg-gray-800/30'
case 'opus': case 'opus':
return 'bg-gradient-to-r from-purple-50 to-indigo-100 dark:from-purple-950/30 dark:to-indigo-900/30' return 'bg-violet-50/50 dark:bg-violet-950/20'
case 'window': case 'window':
return 'bg-gradient-to-r from-blue-50 to-cyan-100 dark:from-blue-950/30 dark:to-cyan-900/30' return 'bg-sky-50/50 dark:bg-sky-950/20'
default: default:
return 'bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-700' return 'bg-gray-100/50 dark:bg-gray-800/30'
} }
}) })
// 进度条样式（根据进度值动态变化） // 进度条样式 - 使用更柔和的颜色配置
const progressBarClass = computed(() => { const progressBarClass = computed(() => {
const p = progress.value const p = progress.value
if (props.type === 'daily') { if (props.type === 'daily') {
if (p >= 90) { if (p >= 90) {
return 'bg-gradient-to-r from-red-500 to-red-600' return 'bg-red-400 dark:bg-red-500'
} else if (p >= 70) { } else if (p >= 70) {
return 'bg-gradient-to-r from-yellow-500 to-orange-500' return 'bg-amber-400 dark:bg-amber-500'
} else { } else {
return 'bg-gradient-to-r from-green-500 to-emerald-500' return 'bg-emerald-400 dark:bg-emerald-500'
} }
} }
if (props.type === 'opus') { if (props.type === 'opus') {
if (p >= 90) { if (p >= 90) {
return 'bg-gradient-to-r from-red-500 to-pink-600' return 'bg-red-400 dark:bg-red-500'
} else if (p >= 70) { } else if (p >= 70) {
return 'bg-gradient-to-r from-orange-500 to-amber-500' return 'bg-amber-400 dark:bg-amber-500'
} else { } else {
// 使用更亮的紫色渐变，确保与白色文字有良好对比度 return 'bg-violet-400 dark:bg-violet-500'
return 'bg-gradient-to-r from-purple-600 to-indigo-600'
} }
} }
if (props.type === 'window') { if (props.type === 'window') {
if (p >= 90) { if (p >= 90) {
return 'bg-gradient-to-r from-red-500 to-rose-600' return 'bg-red-400 dark:bg-red-500'
} else if (p >= 70) { } else if (p >= 70) {
return 'bg-gradient-to-r from-orange-500 to-yellow-500' return 'bg-amber-400 dark:bg-amber-500'
} else { } else {
return 'bg-gradient-to-r from-blue-500 to-cyan-500' return 'bg-sky-400 dark:bg-sky-500'
} }
} }
return 'bg-gradient-to-r from-gray-400 to-gray-500' return 'bg-gray-300 dark:bg-gray-400'
}) })
// 图标类 // 图标类
const iconClass = computed(() => { const iconClass = computed(() => {
const p = progress.value const p = progress.value
let colorClass = ''
// 根据进度选择图标颜色
let colorClass = ''
if (p >= 90) { if (p >= 90) {
colorClass = 'text-red-600 dark:text-red-400' colorClass = 'text-red-700 dark:text-red-400'
} else if (p >= 70) { } else if (p >= 70) {
colorClass = 'text-orange-600 dark:text-orange-400' colorClass = 'text-orange-700 dark:text-orange-400'
} else { } else {
switch (props.type) { switch (props.type) {
case 'daily': case 'daily':
colorClass = 'text-green-600 dark:text-green-400' colorClass = 'text-green-700 dark:text-green-400'
break break
case 'opus': case 'opus':
colorClass = 'text-purple-600 dark:text-purple-400' colorClass = 'text-purple-700 dark:text-purple-400'
break break
case 'window': case 'window':
colorClass = 'text-blue-600 dark:text-blue-400' colorClass = 'text-blue-700 dark:text-blue-400'
break break
default: default:
colorClass = 'text-gray-500 dark:text-gray-400' colorClass = 'text-gray-600 dark:text-gray-400'
} }
} }
@@ -176,100 +174,70 @@ const iconClass = computed(() => {
return `${iconName} ${colorClass}` return `${iconName} ${colorClass}`
}) })
// 文字颜色（根据进度条类型和进度值智能调整） // 标签文字颜色 - 始终保持高对比度
const textClass = computed(() => { const labelTextClass = computed(() => {
const p = progress.value const p = progress.value
// 对于有颜色的进度条，判断是否需要白色文字 // 根据进度条背景色智能选择文字颜色
const needsWhiteText = () => { if (p > 40) {
// Opus类型（紫色系） // 当进度条覆盖超过40%时，使用白色文字
if (props.type === 'opus') { return 'text-white drop-shadow-[0_1px_2px_rgba(0,0,0,0.8)]'
// 紫色进度条在任何进度下都使用白色文字，确保对比度
if (p > 0) return true
}
// 窗口类型（蓝色系）
if (props.type === 'window') {
// 蓝色进度条在任何进度下都使用白色文字
if (p > 0) return true
}
// 每日类型（绿色/黄色/红色）
if (props.type === 'daily') {
// 绿色、黄色、红色进度条都使用白色文字
if (p > 0) return true
}
return false
}
if (needsWhiteText()) {
// 增强阴影效果，确保在各种颜色背景上都清晰可见
return 'text-white font-medium'
} else { } else {
// 在浅色背景上使用深色文字 // 在浅色背景上使用深色文字
return 'text-gray-700 dark:text-gray-300 font-medium' switch (props.type) {
case 'daily':
return 'text-gray-900 dark:text-gray-100'
case 'opus':
return 'text-purple-900 dark:text-purple-100'
case 'window':
return 'text-blue-900 dark:text-blue-100'
default:
return 'text-gray-900 dark:text-gray-100'
}
} }
}) })
// 数值文字颜色（更突出，增强可读性） // 当前值文字颜色 - 最重要的数字，需要最高对比度
const valueTextClass = computed(() => { const currentValueClass = computed(() => {
const p = progress.value const p = progress.value
// 与文字颜色保持一致的逻辑 // 判断数值是否在进度条上
const needsWhiteText = () => { if (p > 70) {
if (props.type === 'opus' && p > 0) return true // 在彩色进度条上，使用白色+强阴影
if (props.type === 'window' && p > 0) return true return 'text-white drop-shadow-[0_2px_4px_rgba(0,0,0,0.9)]'
if (props.type === 'daily' && p > 0) return true
return false
}
if (needsWhiteText()) {
// 数值文字使用更粗的字重和更强的阴影
return 'text-white font-bold'
} else { } else {
// 在浅色背景上使用更深的颜色 // 在浅色背景上，根据进度状态选择颜色
return 'text-gray-900 dark:text-gray-100 font-bold' if (p >= 90) {
return 'text-red-700 dark:text-red-300'
} else if (p >= 70) {
return 'text-orange-700 dark:text-orange-300'
} else {
switch (props.type) {
case 'daily':
return 'text-green-800 dark:text-green-200'
case 'opus':
return 'text-purple-800 dark:text-purple-200'
case 'window':
return 'text-blue-800 dark:text-blue-200'
default:
return 'text-gray-900 dark:text-gray-100'
}
}
} }
}) })
// 文字阴影样式（增强对比度） // 限制值文字颜色
const textShadowStyle = computed(() => { const limitTextClass = computed(() => {
const p = progress.value const p = progress.value
// 判断是否需要强阴影 // 判断限制值是否在进度条上
const needsStrongShadow = () => { if (p > 85) {
if (props.type === 'opus' && p > 0) return true // 在进度条上
if (props.type === 'window' && p > 0) return true return 'text-white/90 drop-shadow-[0_1px_2px_rgba(0,0,0,0.8)]'
if (props.type === 'daily' && p > 0) return true } else {
return false // 在背景上
return 'text-gray-600 dark:text-gray-400'
} }
if (needsStrongShadow()) {
// 在彩色背景上使用强阴影效果
return {
textShadow: '0 1px 3px rgba(0, 0, 0, 0.5), 0 0 8px rgba(0, 0, 0, 0.3)'
}
}
return {}
})
// 数值文字阴影样式（更强的阴影效果）
const valueShadowStyle = computed(() => {
const p = progress.value
// 判断是否需要强阴影
const needsStrongShadow = () => {
if (props.type === 'opus' && p > 0) return true
if (props.type === 'window' && p > 0) return true
if (props.type === 'daily' && p > 0) return true
return false
}
if (needsStrongShadow()) {
// 数值文字使用更强的阴影，确保清晰可见
return {
textShadow: '0 1px 4px rgba(0, 0, 0, 0.6), 0 0 10px rgba(0, 0, 0, 0.4)'
}
}
return {}
}) })
</script> </script>
@@ -283,12 +251,8 @@ const valueShadowStyle = computed(() => {
} }
} }
/* 添加柔和的边框 */ /* 确保文字清晰 */
.border-opacity-20 { .tabular-nums {
border-color: rgba(0, 0, 0, 0.05); font-variant-numeric: tabular-nums;
}
.dark .border-opacity-20 {
border-color: rgba(255, 255, 255, 0.1);
} }
</style> </style>

73
web/admin-spa/src/views/ApiKeysView.vue
View File

@@ -239,7 +239,9 @@
<div v-else class="table-wrapper hidden md:block"> <div v-else class="table-wrapper hidden md:block">
<div class="table-container"> <div class="table-container">
<table class="w-full table-fixed"> <table class="w-full table-fixed">
<thead class="bg-gray-50/80 backdrop-blur-sm dark:bg-gray-700/80"> <thead
class="sticky top-0 z-10 bg-gradient-to-b from-gray-50 to-gray-100/90 backdrop-blur-sm dark:from-gray-700 dark:to-gray-800/90"
>
<tr> <tr>
<th v-if="shouldShowCheckboxes" class="w-[50px] px-3 py-4 text-left"> <th v-if="shouldShowCheckboxes" class="w-[50px] px-3 py-4 text-left">
<div class="flex items-center"> <div class="flex items-center">
@@ -394,11 +396,20 @@
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody class="divide-y divide-gray-200/50 dark:divide-gray-600/50"> <tbody>
<template v-for="key in paginatedApiKeys" :key="key.id"> <template v-for="(key, index) in paginatedApiKeys" :key="key.id">
<!-- API Key 主行 --> <!-- API Key 主行 - 添加斑马条纹和增强分隔 -->
<tr class="table-row"> <tr
<td v-if="shouldShowCheckboxes" class="px-3 py-1.5"> :class="[
'table-row transition-all duration-150',
index % 2 === 0
? 'bg-white dark:bg-gray-800/40'
: 'dark:bg-gray-850/40 bg-gray-50/70',
'border-b-2 border-gray-200/80 dark:border-gray-700/50',
'hover:bg-blue-50/60 hover:shadow-sm dark:hover:bg-blue-900/20'
]"
>
<td v-if="shouldShowCheckboxes" class="px-3 py-3">
<div class="flex items-center"> <div class="flex items-center">
<input <input
v-model="selectedApiKeys" v-model="selectedApiKeys"
@@ -409,7 +420,7 @@
/> />
</div> </div>
</td> </td>
<td class="px-3 py-1.5"> <td class="px-3 py-3">
<div class="min-w-0"> <div class="min-w-0">
<!-- 名称 --> <!-- 名称 -->
<div <div
@@ -429,7 +440,7 @@
</div> </div>
</td> </td>
<!-- 所属账号列 --> <!-- 所属账号列 -->
<td class="px-3 py-1.5"> <td class="px-3 py-3">
<div class="space-y-1"> <div class="space-y-1">
<!-- Claude 绑定 --> <!-- Claude 绑定 -->
<div <div
@@ -499,7 +510,7 @@
</div> </div>
</td> </td>
<!-- 标签列 --> <!-- 标签列 -->
<td class="px-3 py-1.5"> <td class="px-3 py-3">
<div class="flex flex-wrap gap-1"> <div class="flex flex-wrap gap-1">
<span <span
v-for="tag in key.tags || []" v-for="tag in key.tags || []"
@@ -515,7 +526,7 @@
> >
</div> </div>
</td> </td>
<td class="whitespace-nowrap px-3 py-1.5"> <td class="whitespace-nowrap px-3 py-3">
<span <span
:class="[ :class="[
'inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold', 'inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold',
@@ -534,7 +545,7 @@
</span> </span>
</td> </td>
<!-- 费用 --> <!-- 费用 -->
<td class="whitespace-nowrap px-3 py-1.5 text-right" style="font-size: 13px"> <td class="whitespace-nowrap px-3 py-3 text-right" style="font-size: 13px">
<span <span
class="font-semibold text-blue-600 dark:text-blue-400" class="font-semibold text-blue-600 dark:text-blue-400"
style="font-size: 14px" style="font-size: 14px"
@@ -543,8 +554,8 @@
</span> </span>
</td> </td>
<!-- 限制 --> <!-- 限制 -->
<td class="px-2 py-1.5" style="font-size: 12px"> <td class="px-2 py-2" style="font-size: 12px">
<div class="flex flex-col gap-1.5"> <div class="flex flex-col gap-2">
<!-- 每日费用限制进度条 --> <!-- 每日费用限制进度条 -->
<LimitProgressBar <LimitProgressBar
v-if="key.dailyCostLimit > 0" v-if="key.dailyCostLimit > 0"
@@ -595,7 +606,7 @@
</div> </div>
</td> </td>
<!-- Token数量 --> <!-- Token数量 -->
<td class="whitespace-nowrap px-3 py-1.5 text-right" style="font-size: 13px"> <td class="whitespace-nowrap px-3 py-3 text-right" style="font-size: 13px">
<div class="flex items-center justify-end gap-1"> <div class="flex items-center justify-end gap-1">
<span <span
class="font-medium text-purple-600 dark:text-purple-400" class="font-medium text-purple-600 dark:text-purple-400"
@@ -606,7 +617,7 @@
</div> </div>
</td> </td>
<!-- 请求数 --> <!-- 请求数 -->
<td class="whitespace-nowrap px-3 py-1.5 text-right" style="font-size: 13px"> <td class="whitespace-nowrap px-3 py-3 text-right" style="font-size: 13px">
<div class="flex items-center justify-end gap-1"> <div class="flex items-center justify-end gap-1">
<span <span
class="font-medium text-gray-900 dark:text-gray-100" class="font-medium text-gray-900 dark:text-gray-100"
@@ -619,7 +630,7 @@
</td> </td>
<!-- 最后使用 --> <!-- 最后使用 -->
<td <td
class="whitespace-nowrap px-3 py-1.5 text-gray-700 dark:text-gray-300" class="whitespace-nowrap px-3 py-3 text-gray-700 dark:text-gray-300"
style="font-size: 13px" style="font-size: 13px"
> >
<span <span
@@ -634,13 +645,13 @@
</td> </td>
<!-- 创建时间 --> <!-- 创建时间 -->
<td <td
class="whitespace-nowrap px-3 py-1.5 text-gray-700 dark:text-gray-300" class="whitespace-nowrap px-3 py-3 text-gray-700 dark:text-gray-300"
style="font-size: 13px" style="font-size: 13px"
> >
{{ new Date(key.createdAt).toLocaleDateString() }} {{ new Date(key.createdAt).toLocaleDateString() }}
</td> </td>
<td <td
class="whitespace-nowrap px-3 py-1.5 text-sm text-gray-700 dark:text-gray-300" class="whitespace-nowrap px-3 py-3 text-sm text-gray-700 dark:text-gray-300"
> >
<div class="inline-flex items-center gap-1.5"> <div class="inline-flex items-center gap-1.5">
<!-- 未激活状态 --> <!-- 未激活状态 -->
@@ -693,7 +704,7 @@
</span> </span>
</div> </div>
</td> </td>
<td class="whitespace-nowrap px-3 py-1.5" style="font-size: 13px"> <td class="whitespace-nowrap px-3 py-3" style="font-size: 13px">
<div class="flex gap-1"> <div class="flex gap-1">
<button <button
class="rounded px-2 py-1 text-xs font-medium text-purple-600 transition-colors hover:bg-purple-50 hover:text-purple-900 dark:hover:bg-purple-900/20" class="rounded px-2 py-1 text-xs font-medium text-purple-600 transition-colors hover:bg-purple-50 hover:text-purple-900 dark:hover:bg-purple-900/20"
@@ -1185,7 +1196,7 @@
</div> </div>
<!-- 限制进度条 --> <!-- 限制进度条 -->
<div class="space-y-1.5"> <div class="space-y-2">
<!-- 每日费用限制 --> <!-- 每日费用限制 -->
<LimitProgressBar <LimitProgressBar
v-if="key.dailyCostLimit > 0" v-if="key.dailyCostLimit > 0"
@@ -1514,7 +1525,7 @@
</thead> </thead>
<tbody class="divide-y divide-gray-200/50 dark:divide-gray-600/50"> <tbody class="divide-y divide-gray-200/50 dark:divide-gray-600/50">
<tr v-for="key in deletedApiKeys" :key="key.id" class="table-row"> <tr v-for="key in deletedApiKeys" :key="key.id" class="table-row">
<td class="px-3 py-1.5"> <td class="px-3 py-3">
<div class="flex items-center"> <div class="flex items-center">
<div <div
class="mr-2 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-red-500 to-red-600" class="mr-2 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-red-500 to-red-600"
@@ -1532,7 +1543,7 @@
</div> </div>
</td> </td>
<!-- 所属账号 --> <!-- 所属账号 -->
<td class="px-3 py-1.5"> <td class="px-3 py-3">
<div class="space-y-1"> <div class="space-y-1">
<!-- Claude OAuth 绑定 --> <!-- Claude OAuth 绑定 -->
<div v-if="key.claudeAccountId" class="flex items-center gap-1 text-xs"> <div v-if="key.claudeAccountId" class="flex items-center gap-1 text-xs">
@@ -1575,7 +1586,7 @@
</div> </div>
</td> </td>
<!-- 创建者 --> <!-- 创建者 -->
<td v-if="isLdapEnabled" class="px-3 py-1.5"> <td v-if="isLdapEnabled" class="px-3 py-3">
<div class="text-xs"> <div class="text-xs">
<span v-if="key.createdBy === 'admin'" class="text-blue-600"> <span v-if="key.createdBy === 'admin'" class="text-blue-600">
<i class="fas fa-user-shield mr-1 text-xs" /> <i class="fas fa-user-shield mr-1 text-xs" />
@@ -1593,13 +1604,13 @@
</td> </td>
<!-- 创建时间 --> <!-- 创建时间 -->
<td <td
class="whitespace-nowrap px-3 py-1.5 text-gray-700 dark:text-gray-300" class="whitespace-nowrap px-3 py-3 text-gray-700 dark:text-gray-300"
style="font-size: 13px" style="font-size: 13px"
> >
{{ formatDate(key.createdAt) }} {{ formatDate(key.createdAt) }}
</td> </td>
<!-- 删除者 --> <!-- 删除者 -->
<td class="px-3 py-1.5"> <td class="px-3 py-3">
<div class="text-xs"> <div class="text-xs">
<span v-if="key.deletedByType === 'admin'" class="text-blue-600"> <span v-if="key.deletedByType === 'admin'" class="text-blue-600">
<i class="fas fa-user-shield mr-1 text-xs" /> <i class="fas fa-user-shield mr-1 text-xs" />
@@ -1617,13 +1628,13 @@
</td> </td>
<!-- 删除时间 --> <!-- 删除时间 -->
<td <td
class="whitespace-nowrap px-3 py-1.5 text-gray-700 dark:text-gray-300" class="whitespace-nowrap px-3 py-3 text-gray-700 dark:text-gray-300"
style="font-size: 13px" style="font-size: 13px"
> >
{{ formatDate(key.deletedAt) }} {{ formatDate(key.deletedAt) }}
</td> </td>
<!-- 费用 --> <!-- 费用 -->
<td class="whitespace-nowrap px-3 py-1.5 text-right" style="font-size: 13px"> <td class="whitespace-nowrap px-3 py-3 text-right" style="font-size: 13px">
<span <span
class="font-medium text-blue-600 dark:text-blue-400" class="font-medium text-blue-600 dark:text-blue-400"
style="font-size: 13px" style="font-size: 13px"
@@ -1632,7 +1643,7 @@
</span> </span>
</td> </td>
<!-- Token --> <!-- Token -->
<td class="whitespace-nowrap px-3 py-1.5 text-right" style="font-size: 13px"> <td class="whitespace-nowrap px-3 py-3 text-right" style="font-size: 13px">
<span <span
class="font-medium text-purple-600 dark:text-purple-400" class="font-medium text-purple-600 dark:text-purple-400"
style="font-size: 13px" style="font-size: 13px"
@@ -1641,7 +1652,7 @@
</span> </span>
</td> </td>
<!-- 请求数 --> <!-- 请求数 -->
<td class="whitespace-nowrap px-3 py-1.5 text-right" style="font-size: 13px"> <td class="whitespace-nowrap px-3 py-3 text-right" style="font-size: 13px">
<div class="flex items-center justify-end gap-1"> <div class="flex items-center justify-end gap-1">
<span <span
class="font-medium text-gray-900 dark:text-gray-100" class="font-medium text-gray-900 dark:text-gray-100"
@@ -1654,7 +1665,7 @@
</td> </td>
<!-- 最后使用 --> <!-- 最后使用 -->
<td <td
class="whitespace-nowrap px-3 py-1.5 text-gray-700 dark:text-gray-300" class="whitespace-nowrap px-3 py-3 text-gray-700 dark:text-gray-300"
style="font-size: 13px" style="font-size: 13px"
> >
<span v-if="key.lastUsedAt" style="font-size: 13px"> <span v-if="key.lastUsedAt" style="font-size: 13px">
@@ -1662,7 +1673,7 @@
</span> </span>
<span v-else class="text-gray-400" style="font-size: 13px">从未使用</span> <span v-else class="text-gray-400" style="font-size: 13px">从未使用</span>
</td> </td>
<td class="px-3 py-1.5"> <td class="px-3 py-3">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<button <button
v-if="key.canRestore" v-if="key.canRestore"