i/Aether
1
0
Fork 0
mirror of https://github.com/fawney19/Aether.git synced 2026-09-11 05:30:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

暗色模式下交换流式徽章填充与描边样式

Browse Source
This commit is contained in:
fawney19
2026-05-27 18:38:59 +08:00
parent 42e723ff7c
commit d46d225a90
2 changed files with 32 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/features/usage/components/RequestDetailDrawer.vue
+11 -4
View File
@@ -55,8 +55,8 @@
</Badge>
<Badge
v-if="detail && resolveUsageStreamLabelSegments(detail).hasConversion"
:variant="resolveUsageStreamLabelSegments(detail).client === '流式' ? 'secondary' : 'outline'"
:class="resolveUsageStreamLabelSegments(detail).client === '流式'
:variant="streamBadgeVariant(resolveUsageStreamLabelSegments(detail).client === '流式')"
:class="streamBadgeVariant(resolveUsageStreamLabelSegments(detail).client === '流式') === 'secondary'
? 'text-xs inline-flex items-center gap-1'
: 'text-xs inline-flex items-center gap-1 border-border/60 text-muted-foreground'"
>
@@ -66,8 +66,8 @@
</Badge>
<Badge
v-else-if="detail"
:variant="isUsageUpstreamStream(detail) ? 'secondary' : 'outline'"
:class="isUsageUpstreamStream(detail)
:variant="streamBadgeVariant(isUsageUpstreamStream(detail))"
:class="streamBadgeVariant(isUsageUpstreamStream(detail)) === 'secondary'
? 'text-xs'
: 'text-xs border-border/60 text-muted-foreground'"
>
@@ -1088,6 +1088,13 @@ watch(activeTab, (newTab) => {
const { isDark } = useDarkMode()
function streamBadgeVariant(isStream: boolean): 'secondary' | 'outline' {
if (isDark.value) {
return isStream ? 'outline' : 'secondary'
}
return isStream ? 'secondary' : 'outline'
}
const traceRequestMetadata = computed<Record<string, unknown> | null>(() => {
const meta = detail.value?.metadata
if (!meta || typeof meta !== 'object' || Array.isArray(meta)) return null
frontend/src/features/usage/components/UsageRecordsTable.vue
+21 -11
View File
@@ -225,7 +225,7 @@
<Badge
v-if="getFastBadge(record)"
variant="outline"
class="h-4 rounded-full px-1.5 text-[10px] leading-4 flex-shrink-0"
class="h-4 rounded-full px-1.5 text-[10px] leading-4 text-foreground flex-shrink-0"
:title="getFastBadgeTitle(record)"
>
fast
@@ -279,8 +279,8 @@
</Badge>
<Badge
v-else-if="getStreamModeSegments(record).hasConversion"
:variant="getStreamModeSegments(record).client === '流式' ? 'secondary' : 'outline'"
:class="getStreamModeSegments(record).client === '流式'
:variant="streamBadgeVariant(getStreamModeSegments(record).client === '流式')"
:class="(streamBadgeVariant(getStreamModeSegments(record).client === '流式') === 'secondary')
? 'whitespace-nowrap text-[10px] px-1.5 h-4 leading-4 inline-flex items-center gap-0.5'
: 'whitespace-nowrap border-border/60 text-muted-foreground text-[10px] px-1.5 h-4 leading-4 inline-flex items-center gap-0.5'"
>
@@ -290,8 +290,8 @@
</Badge>
<Badge
v-else
:variant="getUpstreamStream(record) ? 'secondary' : 'outline'"
:class="getUpstreamStream(record)
:variant="streamBadgeVariant(getUpstreamStream(record))"
:class="(streamBadgeVariant(getUpstreamStream(record)) === 'secondary')
? 'whitespace-nowrap text-[10px] px-1.5 h-4 leading-4 inline-flex items-center'
: 'whitespace-nowrap border-border/60 text-muted-foreground text-[10px] px-1.5 h-4 leading-4 inline-flex items-center'"
>
@@ -624,7 +624,7 @@
<Badge
v-if="getFastBadge(record)"
variant="outline"
class="h-4 rounded-full border-amber-500/30 bg-amber-500/5 px-1.5 text-[10px] leading-4 text-amber-600 dark:text-amber-400 flex-shrink-0"
class="h-4 rounded-full px-1.5 text-[10px] leading-4 text-foreground flex-shrink-0"
:title="getFastBadgeTitle(record)"
>
fast
@@ -648,7 +648,7 @@
<Badge
v-if="getFastBadge(record)"
variant="outline"
class="h-4 rounded-full px-1.5 text-[10px] leading-4 flex-shrink-0"
class="h-4 rounded-full px-1.5 text-[10px] leading-4 text-foreground flex-shrink-0"
:title="getFastBadgeTitle(record)"
>
fast
@@ -760,8 +760,8 @@
</Badge>
<Badge
v-else-if="getStreamModeSegments(record).hasConversion"
:variant="getStreamModeSegments(record).client === '流式' ? 'secondary' : 'outline'"
:class="getStreamModeSegments(record).client === '流式'
:variant="streamBadgeVariant(getStreamModeSegments(record).client === '流式')"
:class="(streamBadgeVariant(getStreamModeSegments(record).client === '流式') === 'secondary')
? 'whitespace-nowrap inline-flex items-center gap-1'
: 'whitespace-nowrap border-border/60 text-muted-foreground inline-flex items-center gap-1'"
>
@@ -771,8 +771,8 @@
</Badge>
<Badge
v-else
:variant="getUpstreamStream(record) ? 'secondary' : 'outline'"
:class="getUpstreamStream(record)
:variant="streamBadgeVariant(getUpstreamStream(record))"
:class="(streamBadgeVariant(getUpstreamStream(record)) === 'secondary')
? 'whitespace-nowrap'
: 'whitespace-nowrap border-border/60 text-muted-foreground'"
>
@@ -943,6 +943,7 @@ import {
resolveUsageStreamLabelSegments
} from '../utils/status'
import { useRowClick } from '@/composables/useRowClick'
import { useDarkMode } from '@/composables/useDarkMode'
import { API_FORMAT_ORDER, formatApiFormat } from '@/api/endpoints/types/api-format'
import { formatClientFamily } from '@/features/usage/utils/clientFamily'
import type { DateRangeParams, UsageRecord } from '../types'
@@ -1253,6 +1254,15 @@ watch(localSearch, (value) => {
// 使用复用的行点击逻辑
const { handleMouseDown, shouldTriggerRowClick } = useRowClick()
const { isDark } = useDarkMode()
// 暗色模式下交换"流式"与"标准"徽章的填充/描边样式
function streamBadgeVariant(isStream: boolean): 'secondary' | 'outline' {
if (isDark.value) {
return isStream ? 'outline' : 'secondary'
}
return isStream ? 'secondary' : 'outline'
}
function handleRowMouseDown(event: MouseEvent, id: string) {
handleMouseDown(event)