From be35f8a6ee08e8ce4f9fa2fd2b52f26e8ad44589 Mon Sep 17 00:00:00 2001
From: Zyy <zyycn@users.noreply.github.com>
Date: Tue, 3 Nov 2026 17:31:57 +0800
Subject: [PATCH] fix(accounts): refine upstream quota display and layout

Show quota availability consistently for unlimited and stale observations, keep pool summaries at the bottom, and compact plan counts with an inline overflow popover.

Co-authored-by: Codex <noreply@openai.com>
---
 .../components/account/AccountPlanBadge.vue   |  6 ++-
 .../account/AccountQuotaWindowDetails.vue     |  4 --
 .../account/AccountUpstreamStatus.vue         |  8 +--
 .../account/account-usage-window/presenter.ts |  7 ++-
 frontend/src/i18n/locales/en/accounts.json    |  2 +
 .../src/i18n/locales/zh-Hans/accounts.json    |  2 +
 .../src/i18n/locales/zh-Hant/accounts.json    |  2 +
 .../account-quota-panel/PoolChart.vue         | 54 +++++++++++++------
 .../account-quota-panel/UpstreamPool.vue      | 42 ++++++++++++---
 .../components/account-quota-panel/index.vue  | 25 +++++----
 .../components/account-quota-panel/pool.ts    | 24 ++++++---
 .../account-quota-summary-cell/Entry.vue      |  2 +-
 frontend/src/views/accounts/index.vue         |  2 +-
 13 files changed, 128 insertions(+), 52 deletions(-)

diff --git a/frontend/src/components/account/AccountPlanBadge.vue b/frontend/src/components/account/AccountPlanBadge.vue
index f995c222a..930552bae 100644
--- a/frontend/src/components/account/AccountPlanBadge.vue
+++ b/frontend/src/components/account/AccountPlanBadge.vue
@@ -13,6 +13,7 @@ const props = withDefaults(
     upstream?: AccountUpstream | null
     upstreamPeer?: boolean | null
     planTypeDisplay: string
+    count?: number
     size?: 'xs' | 'sm' | 'md'
   }>(),
   {
@@ -62,13 +63,14 @@ const paletteClass = computed(() => {
 </script>
 
 <template>
-  <AccountUpstreamBadge v-if="upstreamPeer || (upstream?.discovered && upstream.observedAt)" :size="size" />
+  <AccountUpstreamBadge v-if="upstreamPeer || upstream?.discovered" :size="size" />
   <span
     v-else-if="!accountUpstreamPending(upstream)"
-    class="inline-flex min-w-0 max-w-full items-center justify-center whitespace-nowrap leading-none shadow-z-tertiary"
+    class="inline-flex min-w-0 max-w-full items-center justify-center gap-1 whitespace-nowrap leading-none shadow-z-tertiary"
     :class="[sizeClass, paletteClass]"
     :title="displayText || undefined"
   >
     <span class="truncate">{{ displayText }}</span>
+    <span v-if="count !== undefined" class="shrink-0 tabular-nums">{{ count }}</span>
   </span>
 </template>
diff --git a/frontend/src/components/account/AccountQuotaWindowDetails.vue b/frontend/src/components/account/AccountQuotaWindowDetails.vue
index c2003bbc0..60a4f7b0b 100644
--- a/frontend/src/components/account/AccountQuotaWindowDetails.vue
+++ b/frontend/src/components/account/AccountQuotaWindowDetails.vue
@@ -116,10 +116,6 @@ function quotaWindowCode(windowSeconds: number | null, role: AccountQuotaWindow[
           </div>
         </template>
 
-        <p v-if="item.observationDisplay" class="mt-2 text-[10px] leading-4 text-z-text-tertiary">
-          {{ item.observationDisplay }}
-        </p>
-
         <dl class="mt-2.5 grid grid-cols-[auto_minmax(0,1fr)] gap-x-4 gap-y-1.5 text-[10px] leading-4">
           <template v-if="item.local">
             <dt class="font-emphasis text-z-text-tertiary">
diff --git a/frontend/src/components/account/AccountUpstreamStatus.vue b/frontend/src/components/account/AccountUpstreamStatus.vue
index db79beba0..69c849419 100644
--- a/frontend/src/components/account/AccountUpstreamStatus.vue
+++ b/frontend/src/components/account/AccountUpstreamStatus.vue
@@ -13,15 +13,15 @@ const status = computed(() => {
     return accountUpstreamErrorMessage(upstream.lastError)
   if (!upstream.observedAt)
     return ''
-  const observed = t('accounts.upstream.observedAt', {
+  return t('accounts.upstream.observedAt', {
     time: formatRelativeTime(upstream.observedAtRelative),
   })
-  return upstream.stale
-    ? `${observed} · ${t('accounts.upstream.stale')}`
-    : observed
 })
 const detail = computed(() => [
   props.upstream.observedAtDisplay,
+  props.upstream.stale
+    ? t('accounts.upstream.stale')
+    : null,
   accountUpstreamErrorMessage(props.upstream.lastError),
 ].filter(Boolean).join(' · '))
 </script>
diff --git a/frontend/src/components/account/account-usage-window/presenter.ts b/frontend/src/components/account/account-usage-window/presenter.ts
index 305c874b4..c400a1f81 100644
--- a/frontend/src/components/account/account-usage-window/presenter.ts
+++ b/frontend/src/components/account/account-usage-window/presenter.ts
@@ -381,8 +381,11 @@ function rollingWindowDurationDisplay(windowSeconds: number | null | undefined)
 }
 
 export function quotaWindowPresentation(window: AccountQuotaWindow, minimumWidth: string) {
-  const percent = clamp(window.usedPercent ?? 0, 0, 100)
-  const tone = quotaWindowTone(window.stale ? null : window.usedPercent)
+  const unlimited = window.amount?.totalDisplay === '∞'
+  const percent = unlimited
+    ? 100
+    : clamp(window.usedPercent ?? 0, 0, 100)
+  const tone = quotaWindowTone(unlimited ? 0 : window.usedPercent)
   return {
     barStyle: {
       width: `${percent}%`,
diff --git a/frontend/src/i18n/locales/en/accounts.json b/frontend/src/i18n/locales/en/accounts.json
index 379b872ac..4af3dc75f 100644
--- a/frontend/src/i18n/locales/en/accounts.json
+++ b/frontend/src/i18n/locales/en/accounts.json
@@ -627,6 +627,8 @@
       "unavailable": "Upstream unavailable",
       "pool": "Shared pool",
       "ready": "available",
+      "otherPlans": "Other plans",
+      "morePlans": "View {count} more plans",
       "nodeQuota": "Node quota",
       "quota": "Upstream quota"
     }
diff --git a/frontend/src/i18n/locales/zh-Hans/accounts.json b/frontend/src/i18n/locales/zh-Hans/accounts.json
index c8dbe878e..7072331c3 100644
--- a/frontend/src/i18n/locales/zh-Hans/accounts.json
+++ b/frontend/src/i18n/locales/zh-Hans/accounts.json
@@ -627,6 +627,8 @@
       "unavailable": "上游暂不可用",
       "pool": "共享池",
       "ready": "可用",
+      "otherPlans": "其他套餐",
+      "morePlans": "查看其余 {count} 种套餐",
       "nodeQuota": "节点额度",
       "quota": "上游额度"
     }
diff --git a/frontend/src/i18n/locales/zh-Hant/accounts.json b/frontend/src/i18n/locales/zh-Hant/accounts.json
index 3ab70d94b..011a5ed45 100644
--- a/frontend/src/i18n/locales/zh-Hant/accounts.json
+++ b/frontend/src/i18n/locales/zh-Hant/accounts.json
@@ -627,6 +627,8 @@
       "unavailable": "上游暫不可用",
       "pool": "共享池",
       "ready": "可用",
+      "otherPlans": "其他套餐",
+      "morePlans": "查看其餘 {count} 種套餐",
       "nodeQuota": "節點額度",
       "quota": "上游額度"
     }
diff --git a/frontend/src/views/accounts/components/account-quota-panel/PoolChart.vue b/frontend/src/views/accounts/components/account-quota-panel/PoolChart.vue
index 18b829608..12adda0eb 100644
--- a/frontend/src/views/accounts/components/account-quota-panel/PoolChart.vue
+++ b/frontend/src/views/accounts/components/account-quota-panel/PoolChart.vue
@@ -33,6 +33,12 @@ const activeNode = computed(() => activeIndex.value === null
 const activeWindows = computed(() => groupedAccountQuotaWindows(
   orderedPanelQuotaWindows(activeNode.value?.windows ?? []),
 ).flatMap(entry => entry.windows))
+const remainingLabel = computed(() => {
+  const remaining = activeNode.value?.remainingPercent
+  return remaining == null
+    ? ''
+    : t('accounts.quota.remaining', { remaining: Math.round(remaining * 10) / 10 })
+})
 const canZoom = computed(() => props.nodes.length > MIN_VISIBLE_NODES)
 let chart: EChartsType | undefined
 let highlightedIndex: number | null = null
@@ -49,6 +55,7 @@ const option = computed<EChartsOption>(() => {
     unknown: color('color-border', ''),
   }
   const nodes = props.nodes
+  const trackFill = color('color-border-secondary', '')
   return {
     animation: reducedMotion.value !== 'reduce',
     animationDuration: 0,
@@ -89,13 +96,15 @@ const option = computed<EChartsOption>(() => {
     series: [
       {
         type: 'custom',
+        // 节点命中由容器统一处理，避免色条与空隙触发不同光标
+        silent: true,
         animationThreshold: nodes.length,
         clip: true,
         dimensions: ['account', 'value'],
         encode: { x: 0, y: 1 },
         data: nodes.map((node, index) => ({
           id: node.id,
-          value: [index, 1],
+          value: [index, (node.remainingPercent ?? 0) / 100],
         })),
         renderItem: (_params, api) => {
           const index = Number(api.value(0))
@@ -103,19 +112,34 @@ const option = computed<EChartsOption>(() => {
           const pitch = api.coord([index + 1, 0])[0]! - x
           const width = Math.min(8, pitch * 0.72)
           const fill = colors[nodes[index]!.tone]
+          const shape = {
+            x: x - width / 2,
+            y: 7,
+            width,
+            height: 22,
+            r: Math.min(2, width / 2),
+          }
+          // 耗尽时保留红色底线，未知额度只显示灰色轨道
+          const height = nodes[index]!.remainingPercent === null
+            ? 0
+            : Math.max(2, Number(api.value(1)) * 22)
           return {
-            type: 'rect',
-            shape: {
-              x: x - width / 2,
-              y: 7,
-              width,
-              height: 22,
-              r: Math.min(2, width / 2),
-            },
-            style: { fill, stroke: fill, lineWidth: 0 },
-            emphasis: {
-              style: { fill, stroke: fill, lineWidth: 2 },
-            },
+            type: 'group',
+            children: [
+              {
+                type: 'rect',
+                shape,
+                style: { fill: trackFill, stroke: fill, lineWidth: 0 },
+                emphasis: {
+                  style: { stroke: fill, lineWidth: 2 },
+                },
+              },
+              {
+                type: 'rect',
+                shape: { ...shape, y: 29 - height, height },
+                style: { fill },
+              },
+            ],
           }
         },
       },
@@ -260,12 +284,12 @@ onBeforeUnmount(() => chart?.off('datazoom', onDataZoom))
 </script>
 
 <template>
-  <div class="min-w-0">
+  <div class="flex min-w-0">
     <ZPopover ref="popover" v-model="open" class="w-full" placement="top" trigger="hover-click" :reference-element="anchor" :disabled="!activeNode?.windows.length" :hover-delay="180" animate-position>
       <template #reference>
         <div
           class="relative w-full rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-z-control-outline"
-          role="slider" tabindex="0" :aria-valuemin="1" :aria-valuemax="nodes.length" :aria-valuenow="(activeIndex ?? 0) + 1" :aria-valuetext="t('accounts.upstream.account', { number: (activeIndex ?? 0) + 1 })" :aria-label="t('accounts.upstream.poolChart')" :aria-description="t('accounts.upstream.poolKeyboard')"
+          role="slider" tabindex="0" :aria-valuemin="1" :aria-valuemax="nodes.length" :aria-valuenow="(activeIndex ?? 0) + 1" :aria-valuetext="[t('accounts.upstream.account', { number: (activeIndex ?? 0) + 1 }), remainingLabel].filter(Boolean).join(' · ')" :aria-label="t('accounts.upstream.poolChart')" :aria-description="t('accounts.upstream.poolKeyboard')"
           @pointermove="onPointerMove" @pointerleave="onPointerLeave" @click="onChartClick" @dblclick="resetZoom" @keydown="onKeydown"
         >
           <BaseChart :option="option" :height="36" @ready="onReady" />
diff --git a/frontend/src/views/accounts/components/account-quota-panel/UpstreamPool.vue b/frontend/src/views/accounts/components/account-quota-panel/UpstreamPool.vue
index 938fcf875..341417177 100644
--- a/frontend/src/views/accounts/components/account-quota-panel/UpstreamPool.vue
+++ b/frontend/src/views/accounts/components/account-quota-panel/UpstreamPool.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { AccountQuotaWindow, AccountUpstream } from '@/api'
+import { ZPopover, ZScrollbar } from '@codex-proxy/ui'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import AccountPlanBadge from '@/components/account/AccountPlanBadge.vue'
@@ -9,21 +10,50 @@ import PoolChart from './PoolChart.vue'
 const props = defineProps<{ pool?: AccountUpstream['pool'], windows: AccountQuotaWindow[] }>()
 const { t } = useI18n({ useScope: 'global' })
 const nodes = computed(() => poolNodes(props.windows, props.pool?.accountCount))
+const plans = computed(() => {
+  const sorted = props.pool?.plans.slice().sort((left, right) => right.count - left.count) ?? []
+  return {
+    visible: sorted.slice(0, 3),
+    overflow: sorted.slice(3),
+  }
+})
 </script>
 
 <template>
   <section class="grid min-w-0 gap-1" :aria-label="t('accounts.upstream.pool')">
     <PoolChart v-if="nodes.length" :nodes="nodes" />
-    <div v-if="pool" class="flex min-h-5 min-w-0 items-center justify-between gap-x-3">
+    <div v-if="pool" class="flex min-h-5 min-w-0 items-end justify-between gap-x-3">
       <div class="flex shrink-0 items-baseline gap-1 whitespace-nowrap" :aria-label="`${pool.states.ready} / ${pool.accountCount} ${t('accounts.upstream.ready')}`">
         <strong class="font-mono text-z-xs leading-[normal] font-heavy tabular-nums" :class="pool.states.ready > 0 ? 'text-z-success-text' : 'text-z-text'">{{ pool.states.ready }}</strong>
         <span class="font-mono text-z-xs leading-[normal] tabular-nums text-z-text-quaternary">/ {{ pool.accountCount }}</span>
       </div>
-      <div v-if="pool.plans.length" class="flex min-w-0 flex-wrap items-center justify-end gap-x-3 gap-y-1.5">
-        <span v-for="plan in pool.plans" :key="plan.name" class="inline-flex min-w-0 items-center gap-1.5">
-          <AccountPlanBadge :plan-type="plan.name" :plan-type-display="plan.name" size="xs" />
-          <span class="font-mono text-z-xs leading-[normal] font-emphasis tabular-nums text-z-text-secondary">{{ plan.count }}</span>
-        </span>
+      <div v-if="pool.plans.length" class="flex min-w-0 items-end justify-end gap-1.5">
+        <AccountPlanBadge
+          v-for="plan in plans.visible" :key="plan.name"
+          :plan-type="plan.name" :plan-type-display="plan.name" :count="plan.count"
+          size="xs" class="max-w-24"
+        />
+        <ZPopover v-if="plans.overflow.length" class="shrink-0" trigger="hover-click" placement="top-end" :offset="12" :hover-delay="240">
+          <template #reference="{ open, id }">
+            <button
+              type="button"
+              class="inline-flex h-4.5 min-w-6 cursor-pointer items-center justify-center rounded-full border-0 bg-z-fill-quaternary px-1.5 text-[10px] font-emphasis tabular-nums text-z-text-secondary outline-none transition-colors hover:bg-z-fill-tertiary hover:text-z-text focus-visible:ring-2 focus-visible:ring-z-control-outline"
+              :aria-label="t('accounts.upstream.morePlans', { count: plans.overflow.length })"
+              aria-haspopup="dialog" :aria-expanded="open" :aria-controls="open ? id : undefined"
+            >
+              +{{ plans.overflow.length }}
+            </button>
+          </template>
+          <section class="w-max max-w-[min(20rem,calc(100vw-2rem))] overflow-hidden rounded-z-lg" role="dialog" :aria-label="t('accounts.upstream.otherPlans')">
+            <ZScrollbar max-height="min(14rem, calc(100dvh - 4rem))">
+              <ul class="m-0 flex list-none flex-wrap items-center gap-2 p-3">
+                <li v-for="plan in plans.overflow" :key="plan.name" class="flex min-w-0">
+                  <AccountPlanBadge :plan-type="plan.name" :plan-type-display="plan.name" :count="plan.count" size="xs" />
+                </li>
+              </ul>
+            </ZScrollbar>
+          </section>
+        </ZPopover>
       </div>
     </div>
   </section>
diff --git a/frontend/src/views/accounts/components/account-quota-panel/index.vue b/frontend/src/views/accounts/components/account-quota-panel/index.vue
index d1362c5bf..38b5f8376 100644
--- a/frontend/src/views/accounts/components/account-quota-panel/index.vue
+++ b/frontend/src/views/accounts/components/account-quota-panel/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Account } from '@/api'
 
-import { ZEmpty, ZIconButton } from '@codex-proxy/ui'
+import { ZEmpty, ZIconButton, ZScrollbar } from '@codex-proxy/ui'
 
 import { ChartNoAxesCombined, RefreshCw, UserRound } from '@lucide/vue'
 
@@ -67,7 +67,7 @@ watch(hasPersonalInfo, (available) => {
 </script>
 
 <template>
-  <section class="flex min-h-0 min-w-0 flex-col rounded-lg bg-z-bg-container p-4 shadow-z-tertiary">
+  <section class="flex max-h-72 min-h-0 min-w-0 flex-col rounded-lg bg-z-bg-container p-4 shadow-z-tertiary">
     <div class="mb-3 grid shrink-0 grid-cols-[minmax(0,1fr)_auto] items-start gap-x-3 gap-y-1">
       <h3 class="m-0 text-z-lg font-heavy text-z-text">
         {{ account.upstream?.discovered ? t('accounts.upstream.quota') : t('accounts.quota.accountLimit') }}
@@ -78,7 +78,6 @@ watch(hasPersonalInfo, (available) => {
       >
         <AccountPlanBadge v-if="hasPlanBadge" :upstream="account.upstream" :authentication-kind="account.authenticationKind" :plan-type="account.planType" :plan-type-display="account.planTypeDisplay" size="sm" class="shrink-0" />
         <template v-if="showUpstreamStatus || lastRefreshed">
-          <span v-if="hasPlanBadge" class="shrink-0">·</span>
           <AccountUpstreamStatus v-if="showUpstreamStatus && account.upstream" :upstream="account.upstream" />
           <span v-else-if="lastRefreshed" class="min-w-0 truncate" :title="lastRefreshed">{{ lastRefreshed }}</span>
         </template>
@@ -130,14 +129,18 @@ watch(hasPersonalInfo, (available) => {
         surface="none"
       />
     </div>
-    <div v-else class="grid min-h-0 gap-3">
-      <AccountQuotaPanelEntry
-        v-for="entry in quotaEntries"
-        :key="entry.key"
-        :label="entry.label"
-        :windows="entry.windows"
-      />
-      <AccountUpstreamPool v-if="hasUpstreamPool" :pool="account.upstream?.pool" :windows="poolWindows" />
+    <div v-else class="flex min-h-0 flex-1 flex-col gap-3">
+      <ZScrollbar v-if="quotaEntries.length" height="100%" class="-mr-3 [--z-scrollbar-track-inset-block-start:0px]">
+        <div class="grid gap-3 pr-3">
+          <AccountQuotaPanelEntry
+            v-for="entry in quotaEntries"
+            :key="entry.key"
+            :label="entry.label"
+            :windows="entry.windows"
+          />
+        </div>
+      </ZScrollbar>
+      <AccountUpstreamPool v-if="hasUpstreamPool" class="mt-auto" :pool="account.upstream?.pool" :windows="poolWindows" />
     </div>
   </section>
 
diff --git a/frontend/src/views/accounts/components/account-quota-panel/pool.ts b/frontend/src/views/accounts/components/account-quota-panel/pool.ts
index 0b8684553..489b8cc59 100644
--- a/frontend/src/views/accounts/components/account-quota-panel/pool.ts
+++ b/frontend/src/views/accounts/components/account-quota-panel/pool.ts
@@ -1,4 +1,5 @@
 import type { AccountQuotaWindow } from '@/api'
+import { clamp } from 'es-toolkit'
 import { quotaWindowTone } from '@/components/account/account-usage-window/presenter'
 
 // 与互联协议的账号上限一致，汇总数字不能触发无界节点分配
@@ -7,6 +8,7 @@ const MAX_POOL_NODES = 3_000
 export interface PoolNode {
   id: string
   windows: AccountQuotaWindow[]
+  remainingPercent: number | null
   tone: ReturnType<typeof quotaWindowTone>
 }
 
@@ -25,21 +27,31 @@ export function poolNodes(windows: AccountQuotaWindow[], count?: number): PoolNo
     accounts.set(window.sourceAccountId, group)
   }
   const nodes: PoolNode[] = [...accounts].map(([id, windows]) => {
-    const percentages = windows.filter(window => !window.stale)
+    const percentages = windows
       .map(window => window.limitReached ? 100 : window.usedPercent)
       .filter((value): value is number => typeof value === 'number')
+    const usedPercent = percentages.length
+      ? Math.max(...percentages)
+      : null
     return {
       id,
       windows,
-      tone: quotaWindowTone(percentages.length
-        ? Math.max(...percentages)
-        : null),
+      remainingPercent: usedPercent === null
+        ? null
+        : 100 - clamp(usedPercent, 0, 100),
+      tone: quotaWindowTone(usedPercent),
     }
   })
   // 未公开逐账号额度时仅补灰色位置，不能把汇总可用数解释为各账号剩余额度
   if (count !== undefined) {
-    while (nodes.length < limit)
-      nodes.push({ id: `unobserved:${nodes.length}`, windows: [], tone: 'unknown' })
+    while (nodes.length < limit) {
+      nodes.push({
+        id: `unobserved:${nodes.length}`,
+        windows: [],
+        remainingPercent: null,
+        tone: 'unknown',
+      })
+    }
   }
   return nodes
 }
diff --git a/frontend/src/views/accounts/components/account-quota-summary-cell/Entry.vue b/frontend/src/views/accounts/components/account-quota-summary-cell/Entry.vue
index 696b12ec5..f7e9d6b9b 100644
--- a/frontend/src/views/accounts/components/account-quota-summary-cell/Entry.vue
+++ b/frontend/src/views/accounts/components/account-quota-summary-cell/Entry.vue
@@ -32,7 +32,7 @@ const hasQuotaWindow = computed(() => props.windows.some(window => typeof window
 </script>
 
 <template>
-  <ZPopover class="grid! w-full grid-cols-subgrid" trigger="hover-click" placement="right" :hover-delay="240">
+  <ZPopover class="grid! w-full grid-cols-subgrid" trigger="hover-click" placement="right" :offset="12" :hover-delay="240">
     <template #reference="{ open }">
       <button
         type="button"
diff --git a/frontend/src/views/accounts/index.vue b/frontend/src/views/accounts/index.vue
index 1c86556c7..05196a4eb 100644
--- a/frontend/src/views/accounts/index.vue
+++ b/frontend/src/views/accounts/index.vue
@@ -365,7 +365,7 @@ const {
             </template>
 
             <template #expanded="{ row }">
-              <div class="grid items-stretch gap-3 p-4 lg:grid-cols-[1.05fr_2.45fr] xl:min-h-77">
+              <div class="grid items-stretch gap-3 p-4 lg:grid-cols-[1.05fr_2.45fr] xl:h-77.5">
                 <AccountQuotaPanel
                   :account="row"
                   :refreshing="refreshingQuotaAccountIds.has(row.id)"