mirror of
https://github.com/Wei-Shaw/sub2api.git
synced 2026-10-31 08:25:35 +00:00
Merge pull request #4573 from Astrenix/fix/dark-palette-slate-consistency
style(frontend): 统一暗色模式表面色板为项目 slate 色系
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user