fix(accounts): improve provider selection and forecast hints

Expand provider choices to full-width labeled options and move the forecast caveat into an icon-only explanation popover.

Validation: frontend lint, typecheck and build passed; verified narrow-screen selection, keyboard navigation and explanation popover. Available forecast data layout was not exercised because local observations are insufficient.

Co-authored-by: Codex <noreply@openai.com>
This commit is contained in:
Zyy
2026-09-17 00:45:55 +08:00
co-authored by Codex
parent 1e6d69a349
commit ae2da31380
3 changed files with 16 additions and 23 deletions
@@ -50,8 +50,8 @@ function selectProvider(value: string) {
label="选择账号平台"
:options="providers"
:disabled="disabled"
display="icon"
class="w-31"
size="lg"
class="w-full"
@update:model-value="selectProvider"
/>
</template>
@@ -71,19 +71,13 @@ const metrics = computed(() => [
</div>
</div>
<div class="grid gap-3">
<div class="flex flex-wrap items-baseline justify-between gap-x-3 gap-y-2 text-cp-xs">
<span class="text-cp-text-secondary">更新时的剩余额度</span>
<span class="font-mono font-emphasis text-cp-text [html[data-theme=light]_&]:font-medium">
{{ forecast.remainingTokensDisplay }} Tokens
<span class="mx-1 text-cp-text-tertiary">/</span>
{{ forecast.remainingUsdDisplay }}
</span>
</div>
<p v-if="forecast.incompleteTokens || forecast.incompleteCost" class="m-0 flex items-start gap-1.5 text-cp-xs leading-relaxed text-cp-text-secondary">
<Info class="mt-0.5 size-3.5 shrink-0" aria-hidden="true" />
按已记录数据估算,缺失的用量或费用可能使结果偏低。
</p>
<div class="flex flex-wrap items-baseline justify-between gap-x-3 gap-y-2 text-cp-xs">
<span class="text-cp-text-secondary">更新时的剩余额度</span>
<span class="font-mono font-emphasis text-cp-text [html[data-theme=light]_&]:font-medium">
{{ forecast.remainingTokensDisplay }} Tokens
<span class="mx-1 text-cp-text-tertiary">/</span>
{{ forecast.remainingUsdDisplay }}
</span>
</div>
</section>
</template>
@@ -1,11 +1,12 @@
<script setup lang="ts">
import type { AccountRow } from '../../constants'
import type { Account } from '@/api'
import { ChartNoAxesCombined, Info, RefreshCw } from '@lucide/vue'
import { ChartNoAxesCombined, CircleAlert, RefreshCw } from '@lucide/vue'
import { useNow } from '@vueuse/core'
import { computed, ref, toRef, useId, watch } from 'vue'
import BaseButton from '@/components/base/BaseButton.vue'
import BaseEmpty from '@/components/base/BaseEmpty.vue'
import BaseIconButton from '@/components/base/BaseIconButton.vue'
import BaseModal from '@/components/base/BaseModal/index.vue'
import BasePopover from '@/components/base/BasePopover.vue'
import BaseSegmented from '@/components/base/BaseSegmented.vue'
@@ -105,25 +106,23 @@ function handleExplanationKeydown(event: KeyboardEvent) {
<div class="mr-auto flex min-w-0 items-center gap-2">
<BasePopover v-model="explanationOpen" trigger="hover-click" placement="top-start" :hover-delay="240">
<template #trigger>
<BaseButton
<BaseIconButton
label="预测说明"
variant="ghost"
size="sm"
:aria-expanded="explanationOpen"
:aria-describedby="explanationOpen ? explanationId : undefined"
@keydown="handleExplanationKeydown"
>
<template #icon>
<Info class="size-3.5" />
</template>
预测说明
</BaseButton>
<CircleAlert class="size-3.5" aria-hidden="true" />
</BaseIconButton>
</template>
<section :id="explanationId" role="tooltip" class="grid w-96 max-w-[calc(100vw-2rem)] gap-3 p-4 text-cp-xs leading-relaxed text-cp-text-secondary">
<h4 class="m-0 font-heavy text-cp-text">
仅供参考
</h4>
<p class="m-0">
根据已记录用量估算,漏记或失败请求的消耗可能使结果偏低;结果会随使用的模型和方式变化,并非官方承诺额度。
按已记录数据估算,缺失的用量或费用可能使结果偏低。结果会随使用的模型和方式变化,并非官方承诺额度。
</p>
<p v-if="forecast?.lowSample" class="m-0">
目前数据还较少,结果可能有较大波动。