Merge pull request #4573 from Astrenix/fix/dark-palette-slate-consistency

style(frontend): 统一暗色模式表面色板为项目 slate 色系
This commit is contained in:
Wesley Liddick
2026-07-20 15:32:16 +08:00
committed by GitHub
12 changed files with 49 additions and 49 deletions
@@ -66,7 +66,7 @@
<div v-if="primaryResetCreditExpiry" class="space-y-1">
<div class="flex flex-wrap items-center gap-1">
<span
class="inline-flex max-w-full items-center rounded bg-gray-100 px-1.5 py-0.5 text-[10px] leading-4 text-gray-600 tabular-nums dark:bg-gray-800 dark:text-gray-300"
class="inline-flex max-w-full items-center rounded bg-gray-100 px-1.5 py-0.5 text-[10px] leading-4 text-gray-600 tabular-nums dark:bg-dark-800 dark:text-gray-300"
:title="t('admin.accounts.openaiQuotaReset.expiresAtFull', { time: formatResetCreditExpiry(primaryResetCreditExpiry, 'full') })"
>
{{ t('admin.accounts.openaiQuotaReset.expiresAt', { time: formatResetCreditExpiry(primaryResetCreditExpiry, 'short') }) }}
@@ -75,7 +75,7 @@
v-if="hiddenResetCreditCount > 0"
type="button"
data-testid="reset-credit-expiry-toggle"
class="inline-flex items-center rounded-full bg-gray-100 px-1.5 py-0.5 text-[10px] font-medium leading-4 text-gray-600 transition-colors hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
class="inline-flex items-center rounded-full bg-gray-100 px-1.5 py-0.5 text-[10px] font-medium leading-4 text-gray-600 transition-colors hover:bg-gray-200 dark:bg-dark-800 dark:text-gray-300 dark:hover:bg-dark-700"
:aria-expanded="showResetCreditDetails"
:aria-label="resetCreditDetailsToggleLabel"
:title="resetCreditDetailsTitle"
@@ -88,7 +88,7 @@
<div
v-if="showResetCreditDetails && resetCreditExpirations.length > 1"
data-testid="reset-credit-expiry-details"
class="inline-grid max-w-full gap-0.5 rounded border border-gray-200 bg-white px-1.5 py-1 text-[10px] leading-4 text-gray-600 shadow-sm dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300"
class="inline-grid max-w-full gap-0.5 rounded border border-gray-200 bg-white px-1.5 py-1 text-[10px] leading-4 text-gray-600 shadow-sm dark:border-dark-700 dark:bg-dark-900 dark:text-gray-300"
>
<span class="sr-only">{{ t('admin.accounts.openaiQuotaReset.expirationDetails') }}</span>
<span
@@ -97,7 +97,7 @@
class="flex min-w-0 items-center gap-1 tabular-nums"
:title="t('admin.accounts.openaiQuotaReset.expiresAtFull', { time: formatResetCreditExpiry(expiresAt, 'full') })"
>
<span class="h-1 w-1 shrink-0 rounded-full bg-gray-400 dark:bg-gray-500" />
<span class="h-1 w-1 shrink-0 rounded-full bg-gray-400 dark:bg-dark-500" />
<span class="truncate">{{ formatResetCreditExpiry(expiresAt, 'short') }}</span>
</span>
</div>
@@ -3,7 +3,7 @@
<HelpTooltip class="-ml-1" width-class="w-max max-w-[calc(100vw-2rem)]" data-testid="upstream-billing-details">
<template #trigger>
<span
class="cursor-help border-b border-dotted border-gray-300 text-sm font-medium dark:border-gray-600"
class="cursor-help border-b border-dotted border-gray-300 text-sm font-medium dark:border-dark-600"
:class="hasEffectiveRate ? 'font-mono text-gray-800 dark:text-gray-200' : statusClass || 'text-gray-400 dark:text-gray-500'"
data-testid="upstream-billing-rate"
>
@@ -26,14 +26,14 @@
</button>
<div
v-if="showUserDropdown && (userResults.length > 0 || userKeyword)"
class="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg border bg-white shadow-lg dark:bg-gray-800"
class="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg border bg-white shadow-lg dark:bg-dark-800"
>
<button
v-for="u in userResults"
:key="u.id"
type="button"
@click="selectUser(u)"
class="w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-700"
class="w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-dark-700"
>
<span>{{ u.email }}<span v-if="u.deleted" class="ml-1 text-xs text-gray-400">({{ t('admin.usage.userDeletedBadge') }})</span></span>
<span class="ml-2 text-xs text-gray-400">#{{ u.id }}</span>
@@ -63,14 +63,14 @@
</button>
<div
v-if="showApiKeyDropdown && apiKeyResults.length > 0"
class="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg border bg-white shadow-lg dark:bg-gray-800"
class="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg border bg-white shadow-lg dark:bg-dark-800"
>
<button
v-for="k in apiKeyResults"
:key="k.id"
type="button"
@click="selectApiKey(k)"
class="w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-700"
class="w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-dark-700"
>
<span class="truncate">{{ k.name || `#${k.id}` }}</span>
<span class="ml-2 text-xs text-gray-400">#{{ k.id }}</span>
@@ -106,14 +106,14 @@
</button>
<div
v-if="showAccountDropdown && (accountResults.length > 0 || accountKeyword)"
class="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg border bg-white shadow-lg dark:bg-gray-800"
class="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg border bg-white shadow-lg dark:bg-dark-800"
>
<button
v-for="a in accountResults"
:key="a.id"
type="button"
@click="selectAccount(a)"
class="w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-700"
class="w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-dark-700"
>
<span class="truncate">{{ a.name }}</span>
<span class="ml-2 text-xs text-gray-400">#{{ a.id }}</span>
@@ -7,7 +7,7 @@
<div class="flex flex-wrap items-center justify-end gap-2">
<div
v-if="showSourceToggle"
class="inline-flex rounded-lg border border-gray-200 bg-gray-50 p-0.5 dark:border-gray-700 dark:bg-dark-800"
class="inline-flex rounded-lg border border-gray-200 bg-gray-50 p-0.5 dark:border-dark-700 dark:bg-dark-800"
>
<button
type="button"
@@ -43,7 +43,7 @@
<div
v-if="showMetricToggle"
class="inline-flex rounded-lg border border-gray-200 bg-gray-50 p-0.5 dark:border-gray-700 dark:bg-dark-800"
class="inline-flex rounded-lg border border-gray-200 bg-gray-50 p-0.5 dark:border-dark-700 dark:bg-dark-800"
>
<button
type="button"
@@ -89,7 +89,7 @@
<tbody>
<template v-for="item in displayEndpointStats" :key="item.endpoint">
<tr
class="border-t border-gray-100 transition-colors dark:border-gray-700"
class="border-t border-gray-100 transition-colors dark:border-dark-700"
:class="enableBreakdown ? 'cursor-pointer hover:bg-gray-50 dark:hover:bg-dark-700/40' : ''"
@click="enableBreakdown && toggleBreakdown(item.endpoint)"
>
@@ -6,7 +6,7 @@
</h3>
<div
v-if="showMetricToggle"
class="inline-flex rounded-lg border border-gray-200 bg-gray-50 p-0.5 dark:border-gray-700 dark:bg-dark-800"
class="inline-flex rounded-lg border border-gray-200 bg-gray-50 p-0.5 dark:border-dark-700 dark:bg-dark-800"
>
<button
type="button"
@@ -52,7 +52,7 @@
<tbody>
<template v-for="group in displayGroupStats" :key="group.group_id">
<tr
class="border-t border-gray-100 transition-colors dark:border-gray-700"
class="border-t border-gray-100 transition-colors dark:border-dark-700"
:class="enableBreakdown && group.group_id > 0 ? 'cursor-pointer hover:bg-gray-50 dark:hover:bg-dark-700/40' : ''"
@click="enableBreakdown && group.group_id > 0 && toggleBreakdown('group', group.group_id)"
>
@@ -9,7 +9,7 @@
<div class="flex flex-wrap items-center justify-end gap-2">
<div
v-if="showSourceToggle"
class="inline-flex rounded-lg border border-gray-200 bg-gray-50 p-0.5 dark:border-gray-700 dark:bg-dark-800"
class="inline-flex rounded-lg border border-gray-200 bg-gray-50 p-0.5 dark:border-dark-700 dark:bg-dark-800"
>
<button
type="button"
@@ -44,7 +44,7 @@
</div>
<div
v-if="showMetricToggle"
class="inline-flex rounded-lg border border-gray-200 bg-gray-50 p-0.5 dark:border-gray-700 dark:bg-dark-800"
class="inline-flex rounded-lg border border-gray-200 bg-gray-50 p-0.5 dark:border-dark-700 dark:bg-dark-800"
>
<button
type="button"
@@ -121,7 +121,7 @@
<tbody>
<template v-for="model in displayModelStats" :key="model.model">
<tr
class="border-t border-gray-100 transition-colors dark:border-gray-700"
class="border-t border-gray-100 transition-colors dark:border-dark-700"
:class="enableBreakdown ? 'cursor-pointer hover:bg-gray-50 dark:hover:bg-dark-700/40' : ''"
@click="enableBreakdown && toggleBreakdown('model', model.model)"
>
@@ -200,7 +200,7 @@
<tr
v-for="(item, index) in rankingDisplayItems"
:key="item.isOther ? 'others' : `${item.user_id}-${index}`"
class="border-t border-gray-100 transition-colors dark:border-gray-700"
class="border-t border-gray-100 transition-colors dark:border-dark-700"
:class="item.isOther
? 'bg-gray-50/70 dark:bg-dark-700/20'
: 'cursor-pointer hover:bg-gray-50 dark:hover:bg-dark-700/40'"
@@ -11,7 +11,7 @@
<tr
v-for="user in items"
:key="user.user_id"
class="border-t border-gray-100/50 dark:border-gray-700/50"
class="border-t border-gray-100/50 dark:border-dark-700/50"
>
<td class="max-w-[120px] truncate py-1 pl-6 text-gray-600 dark:text-gray-300" :title="user.email">
{{ user.email || `User #${user.user_id}` }}
@@ -27,19 +27,19 @@
<div class="p-1.5">
<button
@click="$emit('update:enabled', !enabled)"
class="flex w-full items-center justify-between rounded-md px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
class="flex w-full items-center justify-between rounded-md px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-dark-700"
>
<span>{{ t('common.autoRefresh.enable') }}</span>
<svg v-if="enabled" class="h-4 w-4 text-primary-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
</svg>
</button>
<div class="my-1 border-t border-gray-100 dark:border-gray-700"></div>
<div class="my-1 border-t border-gray-100 dark:border-dark-700"></div>
<button
v-for="sec in intervals"
:key="sec"
@click="$emit('update:interval', sec)"
class="flex w-full items-center justify-between rounded-md px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
class="flex w-full items-center justify-between rounded-md px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-dark-700"
>
<span>{{ t('common.autoRefresh.seconds', { n: sec }) }}</span>
<svg v-if="intervalSeconds === sec" class="h-4 w-4 text-primary-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
@@ -44,7 +44,7 @@
</tr>
</thead>
<tbody>
<tr v-for="model in models" :key="model.model" class="border-t border-gray-100 dark:border-gray-700">
<tr v-for="model in models" :key="model.model" class="border-t border-gray-100 dark:border-dark-700">
<td class="max-w-[100px] truncate py-1.5 font-medium text-gray-900 dark:text-white" :title="model.model">{{ model.model }}</td>
<td class="py-1.5 text-right text-gray-600 dark:text-gray-400">{{ formatNumber(model.requests) }}</td>
<td class="py-1.5 text-right text-gray-600 dark:text-gray-400">{{ formatTokens(model.total_tokens) }}</td>