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 
- 后端：getPublicModelStats 支持 today/24h/7d/30d/all 五种时间范围
- 后端：新增 publicStatsModelDistributionPeriod 设置项
- 前端：设置页面添加横向选项卡式时间范围选择器
- 前端：公开统计组件显示当前数据时间范围标签

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Chapoly1305
2025-12-23 21:43:26 -05:00
parent 0d94d3b449
commit cfeb4658ad
4 changed files with 157 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
web/admin-spa/src/views/SettingsView.vue
View File

@@ -1082,21 +1082,42 @@
选择要公开显示的数据：
</p>
<div class="grid gap-3 sm:grid-cols-2">
<label
class="flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 bg-white p-3 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:hover:bg-gray-700"
<div
class="rounded-lg border border-gray-200 bg-white p-3 transition-colors dark:border-gray-600 dark:bg-gray-800"
>
<input
v-model="oemSettings.publicStatsShowModelDistribution"
class="h-4 w-4 rounded border-gray-300 text-green-600 focus:ring-green-500 dark:border-gray-600 dark:bg-gray-700"
type="checkbox"
/>
<div>
<span class="text-sm font-medium text-gray-700 dark:text-gray-300"
>模型使用分布</span
>
<p class="text-xs text-gray-500 dark:text-gray-400">显示各模型的使用占比</p>
<label class="flex cursor-pointer items-center gap-3">
<input
v-model="oemSettings.publicStatsShowModelDistribution"
class="h-4 w-4 rounded border-gray-300 text-green-600 focus:ring-green-500 dark:border-gray-600 dark:bg-gray-700"
type="checkbox"
/>
<div>
<span class="text-sm font-medium text-gray-700 dark:text-gray-300"
>模型使用分布</span
>
<p class="text-xs text-gray-500 dark:text-gray-400">显示各模型的使用占比</p>
</div>
</label>
<div v-if="oemSettings.publicStatsShowModelDistribution" class="mt-3 pl-7">
<div class="mb-1.5 text-xs text-gray-500 dark:text-gray-400">时间范围</div>
<div class="inline-flex rounded-lg bg-gray-100 p-0.5 dark:bg-gray-700/50">
<button
v-for="option in modelDistributionPeriodOptions"
:key="option.value"
class="rounded-md px-2.5 py-1 text-xs font-medium transition-all"
:class="
oemSettings.publicStatsModelDistributionPeriod === option.value
? 'bg-white text-green-600 shadow-sm dark:bg-gray-600 dark:text-green-400'
: 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200'
"
type="button"
@click="oemSettings.publicStatsModelDistributionPeriod = option.value"
>
{{ option.label }}
</button>
</div>
</div>
</label>
</div>
<label
class="flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 bg-white p-3 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:hover:bg-gray-700"
>
@@ -1765,6 +1786,15 @@ defineOptions({
const settingsStore = useSettingsStore()
const { loading, saving, oemSettings } = storeToRefs(settingsStore)
// 模型使用分布时间范围选项
const modelDistributionPeriodOptions = [
{ value: 'today', label: '今天' },
{ value: '24h', label: '24小时' },
{ value: '7d', label: '7天' },
{ value: '30d', label: '30天' },
{ value: 'all', label: '全部' }
]
// 组件refs
const iconFileInput = ref()
@@ -2613,6 +2643,8 @@ const saveOemSettings = async () => {
showAdminButton: oemSettings.value.showAdminButton,
publicStatsEnabled: oemSettings.value.publicStatsEnabled,
publicStatsShowModelDistribution: oemSettings.value.publicStatsShowModelDistribution,
publicStatsModelDistributionPeriod:
oemSettings.value.publicStatsModelDistributionPeriod || 'today',
publicStatsShowTokenTrends: oemSettings.value.publicStatsShowTokenTrends,
publicStatsShowApiKeysTrends: oemSettings.value.publicStatsShowApiKeysTrends,
publicStatsShowAccountTrends: oemSettings.value.publicStatsShowAccountTrends