fix: 修复账户管理页面移动端布局数据显示问题

- 修复移动端数据路径不一致问题(usage.dailyRequests -> usage.daily.requests)
- 增强移动端会话窗口显示,添加进度百分比、时间窗口和剩余时间
- 改进会话窗口UI,使用卡片样式更清晰展示信息
- 检查确认API Keys页面无类似问题

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
shaw
2025-08-04 12:48:15 +08:00
parent 53d28adbd3
commit be98d5c498

View File

@@ -535,10 +535,10 @@
今日使用 今日使用
</p> </p>
<p class="text-sm font-semibold text-gray-900"> <p class="text-sm font-semibold text-gray-900">
{{ formatNumber(account.usage?.dailyRequests || 0) }} {{ formatNumber(account.usage?.daily?.requests || 0) }}
</p> </p>
<p class="text-xs text-gray-500 mt-0.5"> <p class="text-xs text-gray-500 mt-0.5">
{{ formatNumber(account.usage?.dailyTokens || 0) }} tokens {{ formatNumber(account.usage?.daily?.allTokens || 0) }} tokens
</p> </p>
</div> </div>
<div> <div>
@@ -546,10 +546,10 @@
总使用量 总使用量
</p> </p>
<p class="text-sm font-semibold text-gray-900"> <p class="text-sm font-semibold text-gray-900">
{{ formatNumber(account.usage?.totalRequests || 0) }} {{ formatNumber(account.usage?.total?.requests || 0) }}
</p> </p>
<p class="text-xs text-gray-500 mt-0.5"> <p class="text-xs text-gray-500 mt-0.5">
{{ formatNumber(account.usage?.totalTokens || 0) }} tokens {{ formatNumber(account.usage?.total?.allTokens || 0) }} tokens
</p> </p>
</div> </div>
</div> </div>
@@ -558,25 +558,37 @@
<div class="space-y-2 mb-3"> <div class="space-y-2 mb-3">
<!-- 会话窗口 --> <!-- 会话窗口 -->
<div <div
v-if="account.sessionWindow" v-if="account.platform === 'claude' && account.sessionWindow && account.sessionWindow.hasActiveWindow"
class="flex items-center justify-between text-xs" class="bg-gray-50 rounded-lg p-2 space-y-1.5"
> >
<span class="text-gray-500">会话窗口</span> <div class="flex items-center justify-between text-xs">
<div class="flex items-center gap-2"> <span class="text-gray-600 font-medium">会话窗口</span>
<span <span class="text-gray-700 font-medium">
:class="[ {{ account.sessionWindow.progress }}%
'font-medium', </span>
account.sessionWindow.remaining <= 20 ? 'text-orange-600' : 'text-gray-900' </div>
]" <div class="w-full h-2 bg-gray-200 rounded-full overflow-hidden">
> <div
{{ account.sessionWindow.remaining || 0 }} / {{ account.sessionWindow.total || 0 }} class="h-full bg-gradient-to-r from-blue-500 to-indigo-600 transition-all duration-300"
:style="{ width: account.sessionWindow.progress + '%' }"
/>
</div>
<div class="flex items-center justify-between text-xs">
<span class="text-gray-500">
{{ formatSessionWindow(account.sessionWindow.windowStart, account.sessionWindow.windowEnd) }}
</span>
<span
v-if="account.sessionWindow.remainingTime > 0"
class="text-indigo-600 font-medium"
>
剩余 {{ formatRemainingTime(account.sessionWindow.remainingTime) }}
</span>
<span
v-else
class="text-gray-500"
>
已结束
</span> </span>
<div class="w-20 h-1.5 bg-gray-200 rounded-full overflow-hidden">
<div
class="h-full bg-gradient-to-r from-blue-500 to-blue-600 transition-all duration-300"
:style="{ width: `${getSessionWindowPercentage(account)}%` }"
/>
</div>
</div> </div>
</div> </div>