mirror of
https://github.com/zyycn/codex-proxy-rs.git
synced 2026-11-06 16:06:08 +00:00
f0484c4e11
* chore(deps-dev): bump @antfu/eslint-config in /frontend Bumps [@antfu/eslint-config](https://github.com/antfu/eslint-config) from 9.5.1 to 10.0.0. - [Release notes](https://github.com/antfu/eslint-config/releases) - [Commits](https://github.com/antfu/eslint-config/compare/v9.5.1...v10.0.0) --- updated-dependencies: - dependency-name: "@antfu/eslint-config" dependency-version: 10.0.0 dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> * chore(frontend): migrate formatting to ESLint v10 Co-authored-by: Codex <noreply@openai.com> --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Zyy <zyycn@users.noreply.github.com> Co-authored-by: Codex <noreply@openai.com>
80 lines
2.7 KiB
Vue
80 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import type { UsageListRecord } from '@/api'
|
|
|
|
import { Archive, ArrowDown, ArrowUp } from '@lucide/vue'
|
|
|
|
import { computed } from 'vue'
|
|
|
|
import { useI18n } from 'vue-i18n'
|
|
import { usageTokenDetails } from '@/components/usage/shared/presenter'
|
|
import UsageDetailPopover from '@/components/usage/UsageDetailPopover.vue'
|
|
|
|
const props = defineProps<{
|
|
record: Pick<UsageListRecord, 'tokenDetails'>
|
|
}>()
|
|
|
|
const { t } = useI18n({ useScope: 'global' })
|
|
|
|
const tokenDetails = computed(() => usageTokenDetails(props.record.tokenDetails))
|
|
const tokenItems = computed(() => [
|
|
{
|
|
label: t('usage.tokens.enterToken'),
|
|
value: tokenDetails.value.inputTokensDisplay,
|
|
},
|
|
{
|
|
label: t('usage.tokens.outputToken'),
|
|
value: tokenDetails.value.outputTokensDisplay,
|
|
},
|
|
{
|
|
label: t('usage.tokens.cacheReadTokens'),
|
|
value: tokenDetails.value.cachedInputTokensDisplay,
|
|
},
|
|
{
|
|
label: t('usage.tokens.cacheWriteTokens'),
|
|
value: tokenDetails.value.cacheWriteInputTokensDisplay,
|
|
},
|
|
{
|
|
label: t('usage.tokens.reasoningToken'),
|
|
value: tokenDetails.value.reasoningOutputTokensDisplay,
|
|
},
|
|
])
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex items-center justify-end gap-1.5">
|
|
<div
|
|
class="grid grid-cols-[auto_auto] items-center justify-end gap-x-2 gap-y-1 font-mono text-cp-sm leading-none font-bold tabular-nums"
|
|
>
|
|
<span class="inline-flex items-center gap-1 text-cp-success-text">
|
|
<ArrowDown class="size-3" />
|
|
{{ tokenDetails.inputTokensDisplay }}
|
|
</span>
|
|
<span class="inline-flex items-center gap-1 text-cp-info-text">
|
|
<ArrowUp class="size-3" />
|
|
{{ tokenDetails.outputTokensDisplay }}
|
|
</span>
|
|
<span class="col-span-2 inline-flex items-center justify-end gap-1 text-cp-info-text">
|
|
<Archive class="size-3" />
|
|
{{ tokenDetails.cachedInputTokensDisplay }}
|
|
</span>
|
|
</div>
|
|
|
|
<UsageDetailPopover :title="t('usage.tokens.tokenDetails')" :trigger-label="t('usage.tokens.viewTokenDetails')">
|
|
<div class="grid gap-1.5 text-cp-text-secondary">
|
|
<div v-for="item in tokenItems" :key="item.label" class="flex justify-between gap-4">
|
|
<span class="whitespace-nowrap">{{ item.label }}</span>
|
|
<span class="whitespace-nowrap font-mono font-heavy text-cp-text">
|
|
{{ item.value }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="mt-1 flex justify-between border-t border-cp-split pt-2">
|
|
<span class="whitespace-nowrap text-cp-text-secondary">{{ t('usage.tokens.totalTokens') }}</span>
|
|
<span class="whitespace-nowrap font-mono font-heavy text-cp-info-text">
|
|
{{ tokenDetails.totalTokensDisplay }}
|
|
</span>
|
|
</div>
|
|
</UsageDetailPopover>
|
|
</div>
|
|
</template>
|