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

fix: improve user API keys display and interaction

Browse Source 
- Hide delete button for deleted/disabled keys to prevent invalid actions
- Sort API keys by creation time descending (newest first)
- Change "Disabled" label to "Deleted" for consistency
- Add sortedApiKeys computed property for better organization

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Feng Yue
2025-08-14 15:35:07 +08:00
parent 4509f303e6
commit a7c6445f36
1 changed files with 14 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
web/admin-spa/src/components/user/UserApiKeysManager.vue
View File

@@ -76,9 +76,9 @@
</div> </div>
<!-- API Keys List --> <!-- API Keys List -->
<div v-else-if="apiKeys.length > 0" class="overflow-hidden bg-white shadow sm:rounded-md"> <div v-else-if="sortedApiKeys.length > 0" class="overflow-hidden bg-white shadow sm:rounded-md">
<ul class="divide-y divide-gray-200" role="list"> <ul class="divide-y divide-gray-200" role="list">
<li v-for="apiKey in apiKeys" :key="apiKey.id" class="px-6 py-4"> <li v-for="apiKey in sortedApiKeys" :key="apiKey.id" class="px-6 py-4">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center"> <div class="flex items-center">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
@@ -106,7 +106,7 @@
v-else-if="!apiKey.isActive" v-else-if="!apiKey.isActive"
class="ml-2 inline-flex items-center rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-800" class="ml-2 inline-flex items-center rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-800"
> >
Disabled Deleted
</span> </span>
</div> </div>
<div class="mt-1"> <div class="mt-1">
@@ -159,7 +159,7 @@
</button> </button>
<button <button
v-if="!(apiKey.isDeleted === 'true' || apiKey.deletedAt)" v-if="!(apiKey.isDeleted === 'true' || apiKey.deletedAt) && apiKey.isActive"
class="inline-flex items-center rounded border border-transparent p-1 text-red-400 hover:text-red-600" class="inline-flex items-center rounded border border-transparent p-1 text-red-400 hover:text-red-600"
title="Delete API Key" title="Delete API Key"
@click="deleteApiKey(apiKey)" @click="deleteApiKey(apiKey)"
@@ -243,7 +243,7 @@
</template> </template>
<script setup> <script setup>
import { ref, onMounted } from 'vue' import { ref, computed, onMounted } from 'vue'
import { useUserStore } from '@/stores/user' import { useUserStore } from '@/stores/user'
import { showToast } from '@/utils/toast' import { showToast } from '@/utils/toast'
import CreateApiKeyModal from './CreateApiKeyModal.vue' import CreateApiKeyModal from './CreateApiKeyModal.vue'
@@ -261,6 +261,15 @@ const showViewModal = ref(false)
const showDeleteModal = ref(false) const showDeleteModal = ref(false)
const selectedApiKey = ref(null) const selectedApiKey = ref(null)
// Computed property to sort API keys by creation time (descending - newest first)
const sortedApiKeys = computed(() => {
return [...apiKeys.value].sort((a, b) => {
const dateA = new Date(a.createdAt)
const dateB = new Date(b.createdAt)
return dateB - dateA // Descending order
})
})
const formatNumber = (num) => { const formatNumber = (num) => {
if (num >= 1000000) { if (num >= 1000000) {
return (num / 1000000).toFixed(1) + 'M' return (num / 1000000).toFixed(1) + 'M'