diff --git a/VERSION b/VERSION index 6f182425..c442f5e7 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -1.1.21 +1.1.22 diff --git a/web/admin/app.js b/web/admin/app.js index 9d7714c4..cce36ce5 100644 --- a/web/admin/app.js +++ b/web/admin/app.js @@ -112,6 +112,8 @@ const app = createApp({ apiKeys: [], apiKeysLoading: false, apiKeyStatsTimeRange: 'all', // API Key统计时间范围:all, 7days, monthly + apiKeysSortBy: '', // 当前排序字段 + apiKeysSortOrder: 'asc', // 排序顺序 'asc' 或 'desc' showCreateApiKeyModal: false, createApiKeyLoading: false, apiKeyForm: { @@ -199,6 +201,8 @@ const app = createApp({ // 账户 accounts: [], accountsLoading: false, + accountsSortBy: '', // 当前排序字段 + accountsSortOrder: 'asc', // 排序顺序 'asc' 或 'desc' showCreateAccountModal: false, createAccountLoading: false, accountForm: { @@ -302,6 +306,83 @@ const app = createApp({ return `${window.location.protocol}//${window.location.host}/api/`; }, + // 排序后的账户列表 + sortedAccounts() { + if (!this.accountsSortBy) { + return this.accounts; + } + + return [...this.accounts].sort((a, b) => { + let aValue = a[this.accountsSortBy]; + let bValue = b[this.accountsSortBy]; + + // 特殊处理状态字段 + if (this.accountsSortBy === 'status') { + aValue = a.isActive ? 1 : 0; + bValue = b.isActive ? 1 : 0; + } + + // 处理字符串比较 + if (typeof aValue === 'string' && typeof bValue === 'string') { + aValue = aValue.toLowerCase(); + bValue = bValue.toLowerCase(); + } + + // 排序 + if (this.accountsSortOrder === 'asc') { + return aValue > bValue ? 1 : aValue < bValue ? -1 : 0; + } else { + return aValue < bValue ? 1 : aValue > bValue ? -1 : 0; + } + }); + }, + + // 排序后的API Keys列表 + sortedApiKeys() { + if (!this.apiKeysSortBy) { + return this.apiKeys; + } + + return [...this.apiKeys].sort((a, b) => { + let aValue, bValue; + + // 特殊处理不同字段 + switch (this.apiKeysSortBy) { + case 'status': + aValue = a.isActive ? 1 : 0; + bValue = b.isActive ? 1 : 0; + break; + case 'cost': + // 计算费用,转换为数字比较 + aValue = this.calculateApiKeyCostNumber(a.usage); + bValue = this.calculateApiKeyCostNumber(b.usage); + break; + case 'createdAt': + case 'expiresAt': + // 日期比较 + aValue = a[this.apiKeysSortBy] ? new Date(a[this.apiKeysSortBy]).getTime() : 0; + bValue = b[this.apiKeysSortBy] ? new Date(b[this.apiKeysSortBy]).getTime() : 0; + break; + default: + aValue = a[this.apiKeysSortBy]; + bValue = b[this.apiKeysSortBy]; + + // 处理字符串比较 + if (typeof aValue === 'string' && typeof bValue === 'string') { + aValue = aValue.toLowerCase(); + bValue = bValue.toLowerCase(); + } + } + + // 排序 + if (this.apiKeysSortOrder === 'asc') { + return aValue > bValue ? 1 : aValue < bValue ? -1 : 0; + } else { + return aValue < bValue ? 1 : aValue > bValue ? -1 : 0; + } + }); + }, + // 获取专属账号列表 dedicatedAccounts() { return this.accounts.filter(account => @@ -407,6 +488,30 @@ const app = createApp({ }, methods: { + // 账户列表排序 + sortAccounts(field) { + if (this.accountsSortBy === field) { + // 如果点击的是当前排序字段,切换排序顺序 + this.accountsSortOrder = this.accountsSortOrder === 'asc' ? 'desc' : 'asc'; + } else { + // 如果点击的是新字段,设置为升序 + this.accountsSortBy = field; + this.accountsSortOrder = 'asc'; + } + }, + + // API Keys列表排序 + sortApiKeys(field) { + if (this.apiKeysSortBy === field) { + // 如果点击的是当前排序字段,切换排序顺序 + this.apiKeysSortOrder = this.apiKeysSortOrder === 'asc' ? 'desc' : 'asc'; + } else { + // 如果点击的是新字段,设置为升序 + this.apiKeysSortBy = field; + this.apiKeysSortOrder = 'asc'; + } + }, + // 从URL读取tab参数并设置activeTab initializeTabFromUrl() { const urlParams = new URLSearchParams(window.location.search); @@ -3180,6 +3285,19 @@ const app = createApp({ // 如果没有后端费用数据,返回默认值 return '$0.000000'; }, + + // 计算API Key费用数值(用于排序) + calculateApiKeyCostNumber(usage) { + if (!usage || !usage.total) return 0; + + // 使用后端返回的准确费用数据 + if (usage.total.cost) { + return usage.total.cost; + } + + // 如果没有后端费用数据,返回0 + return 0; + }, // 初始化日期筛选器 initializeDateFilter() { diff --git a/web/admin/index.html b/web/admin/index.html index dfc0e764..63f33cb2 100644 --- a/web/admin/index.html +++ b/web/admin/index.html @@ -575,17 +575,40 @@ - + - - - - + + + + -
名称 + 名称 + + + API Key状态使用统计创建时间过期时间 + 状态 + + + + 使用统计 + + (费用 + + ) + + + 创建时间 + + + + 过期时间 + + + 操作