diff --git a/frontend/src/views/accounts/components/AccountQuotaSummaryCell/presenter.ts b/frontend/src/views/accounts/components/AccountQuotaSummaryCell/presenter.ts
new file mode 100644
index 000000000..e8a516eff
--- /dev/null
+++ b/frontend/src/views/accounts/components/AccountQuotaSummaryCell/presenter.ts
@@ -0,0 +1,74 @@
+import type { AccountQuotaWindow, AccountQuotaWindowEntry, AccountRow } from '../../constants'
+
+type AccountModelUsage = AccountRow['usage']['models'][number]
+
+/**
+ * 根据账号最近一次模型请求选择对应额度组。
+ * 没有专属额度的模型统一回退到 Codex 通用额度。
+ */
+export function recentlyUsedQuotaEntry(
+ entries: readonly AccountQuotaWindowEntry[],
+ models: readonly AccountModelUsage[],
+) {
+ const recentModel = latestModelUsage(models)
+ if (recentModel) {
+ const modelKey = quotaIdentity(recentModel.model)
+ const modelEntry = entries.find(entry => quotaEntryIdentities(entry).has(modelKey))
+ if (modelEntry)
+ return modelEntry
+ }
+
+ return entries.find(entry => entry.windows.some(window => window.limitId === 'codex'))
+ ?? entries[0]
+}
+
+/** 一个额度组可能包含多个滚动窗口，摘要使用其中当前占用最高的窗口。 */
+export function representativeQuotaWindow(entry: AccountQuotaWindowEntry | undefined) {
+ return entry?.windows.reduce
((representative, window) => {
+ if (typeof window.usedPercent !== 'number')
+ return representative
+ if (
+ !representative
+ || typeof representative.usedPercent !== 'number'
+ || window.usedPercent > representative.usedPercent
+ ) {
+ return window
+ }
+ return representative
+ }, undefined)
+}
+
+function latestModelUsage(models: readonly AccountModelUsage[]) {
+ let latest: AccountModelUsage | undefined
+ let latestTimestamp = Number.NEGATIVE_INFINITY
+
+ for (const model of models) {
+ const timestamp = Date.parse(model.lastUsedAt)
+ if (!Number.isFinite(timestamp) || timestamp <= latestTimestamp)
+ continue
+ latest = model
+ latestTimestamp = timestamp
+ }
+
+ return latest
+}
+
+function quotaEntryIdentities(entry: AccountQuotaWindowEntry) {
+ const identities = new Set()
+ addQuotaIdentity(identities, entry.label)
+ for (const window of entry.windows) {
+ addQuotaIdentity(identities, window.limitId)
+ addQuotaIdentity(identities, window.limitName)
+ }
+ return identities
+}
+
+function addQuotaIdentity(identities: Set, value: string | null) {
+ const identity = quotaIdentity(value)
+ if (identity)
+ identities.add(identity)
+}
+
+function quotaIdentity(value: string | null) {
+ return value?.trim().toLowerCase().replace(/[^a-z0-9]+/g, '') ?? ''
+}
diff --git a/frontend/src/views/dashboard/components/AccountOverviewCard.vue b/frontend/src/views/dashboard/components/AccountOverviewCard.vue
index c948d65eb..63475b29a 100644
--- a/frontend/src/views/dashboard/components/AccountOverviewCard.vue
+++ b/frontend/src/views/dashboard/components/AccountOverviewCard.vue
@@ -5,11 +5,10 @@ import { CircleCheck, RefreshCw, ShieldAlert, TriangleAlert } from '@lucide/vue'
import { computed } from 'vue'
import BaseCard from '@/components/base/BaseCard.vue'
import BaseEmpty from '@/components/base/BaseEmpty.vue'
-import ProviderIconGroup from '@/components/ProviderIconGroup.vue'
import { formatCompactNumber } from '@/utils/number'
-import AccountIdentityCell from '@/views/accounts/components/AccountIdentityCell.vue'
import AccountUsageWindow from '@/views/accounts/components/AccountUsageWindow/index.vue'
import { metricToneIconClasses, metricToneValueClasses } from '../constants'
+import DashboardAccountIdentity from './DashboardAccountIdentity.vue'
type DashboardSnapshot = ReturnType
@@ -233,24 +232,12 @@ const statusBars = computed(() => {
-
-
-
-
-
+ class="min-w-0 xl:pr-4"
+ />
+import type { dashboardSnapshotView } from '../composables/useDashboard'
+import { Key, LinkAlt, Openai, Xai } from '@boxicons/vue'
+import { computed } from 'vue'
+
+import { formatProviderLabel } from '@/utils/providers'
+import AccountPlanBadge from '@/views/accounts/components/AccountPlanBadge.vue'
+import { stablePresetVisualToneClass } from '@/views/accounts/utils/visualTone'
+
+type DashboardSnapshot = ReturnType
+type DashboardAccount = DashboardSnapshot['accountUsage'][number]
+
+const props = defineProps<{
+ account: DashboardAccount
+}>()
+
+const email = computed(() => props.account.email?.trim() || String(props.account.id))
+const displayTitle = computed(() => email.value.split('@')[0] || email.value)
+const normalizedProvider = computed(() => props.account.provider?.trim().toLowerCase() || '')
+const normalizedAuthenticationKind = computed(() =>
+ props.account.authenticationKind?.trim().toLowerCase() || '',
+)
+const providerLabel = computed(() => formatProviderLabel(props.account.provider, '未知平台'))
+
+const authenticationLabel = computed(() => {
+ if (normalizedAuthenticationKind.value === 'oauth')
+ return 'OAuth'
+ if (normalizedAuthenticationKind.value === 'api_key')
+ return 'API Key'
+ return props.account.authenticationKind?.trim() || '未知认证类型'
+})
+
+const avatarToneClass = computed(() =>
+ stablePresetVisualToneClass(props.account.id || props.account.email || email.value),
+)
+
+
+
+
+
+
+
+
+ ?
+ {{ providerLabel }}
+
+
+
+
+
+ ?
+ {{ authenticationLabel }}
+
+
+
+
+
+
+ {{ displayTitle }}
+
+
+
+
+ {{ email }}
+
+
+