github/claude-relay-service
1
0
Fork 0
mirror of https://github.com/Wei-Shaw/claude-relay-service.git synced 2026-01-24 09:41:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: 优化移动端响应式设计

Browse Source 
- 优化所有页面的移动端适配（手机、平板、PC）
- 修复AccountsView移动端状态显示和按钮功能问题
- 修复ApiKeysView移动端详情展开显示问题
- 移除ApiKeysView不必要的查看按钮
- 修复Dashboard页面PC版时间筛选按钮布局
- 改进所有组件的响应式设计
- 删除dist目录避免构建文件冲突

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
shaw
2025-08-03 01:09:26 +08:00
parent f22c8cbfcc
commit ecfc1050d3
23 changed files with 2775 additions and 697 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
web/admin-spa/src/components/apistats/TokenDistribution.vue
View File

@@ -1,43 +1,46 @@
<template>
<div class="card p-6">
<h3 class="text-xl font-bold mb-4 flex items-center text-gray-900">
<i class="fas fa-coins mr-3 text-yellow-500" />
Token 使用分布 <span class="text-sm font-normal text-gray-600 ml-2">({{ statsPeriod === 'daily' ? '今日' : '本月' }})</span>
<div class="card p-4 md:p-6">
<h3 class="text-lg md:text-xl font-bold mb-3 md:mb-4 flex flex-col sm:flex-row sm:items-center text-gray-900">
<span class="flex items-center">
<i class="fas fa-coins mr-2 md:mr-3 text-yellow-500 text-sm md:text-base" />
Token 使用分布
</span>
<span class="text-xs md:text-sm font-normal text-gray-600 sm:ml-2">({{ statsPeriod === 'daily' ? '今日' : '本月' }})</span>
</h3>
<div class="space-y-3">
<div class="space-y-2 md:space-y-3">
<div class="flex justify-between items-center">
<span class="text-gray-600 flex items-center">
<i class="fas fa-arrow-right mr-2 text-green-500" />
<span class="text-gray-600 flex items-center text-sm md:text-base">
<i class="fas fa-arrow-right mr-1 md:mr-2 text-green-500 text-xs md:text-sm" />
输入 Token
</span>
<span class="font-medium text-gray-900">{{ formatNumber(currentPeriodData.inputTokens) }}</span>
<span class="font-medium text-gray-900 text-sm md:text-base">{{ formatNumber(currentPeriodData.inputTokens) }}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600 flex items-center">
<i class="fas fa-arrow-left mr-2 text-blue-500" />
<span class="text-gray-600 flex items-center text-sm md:text-base">
<i class="fas fa-arrow-left mr-1 md:mr-2 text-blue-500 text-xs md:text-sm" />
输出 Token
</span>
<span class="font-medium text-gray-900">{{ formatNumber(currentPeriodData.outputTokens) }}</span>
<span class="font-medium text-gray-900 text-sm md:text-base">{{ formatNumber(currentPeriodData.outputTokens) }}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600 flex items-center">
<i class="fas fa-save mr-2 text-purple-500" />
<span class="text-gray-600 flex items-center text-sm md:text-base">
<i class="fas fa-save mr-1 md:mr-2 text-purple-500 text-xs md:text-sm" />
缓存创建 Token
</span>
<span class="font-medium text-gray-900">{{ formatNumber(currentPeriodData.cacheCreateTokens) }}</span>
<span class="font-medium text-gray-900 text-sm md:text-base">{{ formatNumber(currentPeriodData.cacheCreateTokens) }}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600 flex items-center">
<i class="fas fa-download mr-2 text-orange-500" />
<span class="text-gray-600 flex items-center text-sm md:text-base">
<i class="fas fa-download mr-1 md:mr-2 text-orange-500 text-xs md:text-sm" />
缓存读取 Token
</span>
<span class="font-medium text-gray-900">{{ formatNumber(currentPeriodData.cacheReadTokens) }}</span>
<span class="font-medium text-gray-900 text-sm md:text-base">{{ formatNumber(currentPeriodData.cacheReadTokens) }}</span>
</div>
</div>
<div class="mt-4 pt-4 border-t border-gray-200">
<div class="mt-3 md:mt-4 pt-3 md:pt-4 border-t border-gray-200">
<div class="flex justify-between items-center font-bold text-gray-900">
<span>{{ statsPeriod === 'daily' ? '今日' : '本月' }}总计</span>
<span class="text-xl">{{ formatNumber(currentPeriodData.allTokens) }}</span>
<span class="text-sm md:text-base">{{ statsPeriod === 'daily' ? '今日' : '本月' }}总计</span>
<span class="text-lg md:text-xl">{{ formatNumber(currentPeriodData.allTokens) }}</span>
</div>
</div>
</div>