feat: API页面增加统计时间选择

This commit is contained in:
KevinLiao
2025-07-25 10:42:19 +08:00
parent 7582136eba
commit e8d795713a
3 changed files with 172 additions and 22 deletions

View File

@@ -111,6 +111,7 @@ const app = createApp({
// API Keys
apiKeys: [],
apiKeysLoading: false,
apiKeyStatsTimeRange: 'all', // API Key统计时间范围all, 7days, monthly
showCreateApiKeyModal: false,
createApiKeyLoading: false,
apiKeyForm: {
@@ -1779,9 +1780,9 @@ const app = createApp({
async loadApiKeys() {
this.apiKeysLoading = true;
console.log('Loading API Keys...');
console.log('Loading API Keys with time range:', this.apiKeyStatsTimeRange);
try {
const data = await this.apiRequest('/admin/api-keys');
const data = await this.apiRequest(`/admin/api-keys?timeRange=${this.apiKeyStatsTimeRange}`);
if (!data) {
// 如果token过期apiRequest会返回null并刷新页面

View File

@@ -538,12 +538,24 @@
<h3 class="text-xl font-bold text-gray-900 mb-2">API Keys 管理</h3>
<p class="text-gray-600">管理和监控您的 API 密钥</p>
</div>
<button
@click.stop="openCreateApiKeyModal"
class="btn btn-primary px-6 py-3 flex items-center gap-2"
>
<i class="fas fa-plus"></i>创建新 Key
</button>
<div class="flex items-center gap-3">
<!-- Token统计时间范围选择 -->
<select
v-model="apiKeyStatsTimeRange"
@change="loadApiKeys()"
class="form-select px-4 py-2 bg-white border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
>
<option value="all">全部时间</option>
<option value="7days">最近7天</option>
<option value="monthly">本月</option>
</select>
<button
@click.stop="openCreateApiKeyModal"
class="btn btn-primary px-6 py-3 flex items-center gap-2"
>
<i class="fas fa-plus"></i>创建新 Key
</button>
</div>
</div>
<div v-if="apiKeysLoading" class="text-center py-12">