From ae2da31380d7efa67542b8d72699b6a42be6fa09 Mon Sep 17 00:00:00 2001
From: Zyy <zyycn@users.noreply.github.com>
Date: Thu, 17 Sep 2026 00:45:55 +0800
Subject: [PATCH] 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>
---
 .../AccountProviderChooser.vue                |  4 ++--
 .../ForecastCapacity.vue                      | 20 +++++++------------
 .../AccountQuotaForecastModal/index.vue       | 15 +++++++-------
 3 files changed, 16 insertions(+), 23 deletions(-)

diff --git a/frontend/src/views/accounts/components/AccountCreateModal/AccountProviderChooser.vue b/frontend/src/views/accounts/components/AccountCreateModal/AccountProviderChooser.vue
index f79f5b5e3..1dc849d8d 100644
--- a/frontend/src/views/accounts/components/AccountCreateModal/AccountProviderChooser.vue
+++ b/frontend/src/views/accounts/components/AccountCreateModal/AccountProviderChooser.vue
@@ -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>
diff --git a/frontend/src/views/accounts/components/AccountQuotaForecastModal/ForecastCapacity.vue b/frontend/src/views/accounts/components/AccountQuotaForecastModal/ForecastCapacity.vue
index 32c36ce7b..3c5c4518f 100644
--- a/frontend/src/views/accounts/components/AccountQuotaForecastModal/ForecastCapacity.vue
+++ b/frontend/src/views/accounts/components/AccountQuotaForecastModal/ForecastCapacity.vue
@@ -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>
diff --git a/frontend/src/views/accounts/components/AccountQuotaForecastModal/index.vue b/frontend/src/views/accounts/components/AccountQuotaForecastModal/index.vue
index b5441cfca..7617769dc 100644
--- a/frontend/src/views/accounts/components/AccountQuotaForecastModal/index.vue
+++ b/frontend/src/views/accounts/components/AccountQuotaForecastModal/index.vue
@@ -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">
               目前数据还较少，结果可能有较大波动。