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

feat: 完善 API Keys 批量删除功能并修复搜索跨选择问题

Browse Source 
## 主要改进

### 🔧 核心修复
- 修复搜索时勾选状态无法保存的问题
- 优化全选/取消全选逻辑，支持跨搜索结果保持选择状态
- 改进批量删除的用户体验
- 添加 Unicode 字符处理中间件，提升请求体解析稳定性

### 🎯 具体变更
- **路由修复**: 解决批量删除路由匹配问题，调整路由顺序
- **API客户端**: 修复 DELETE 方法支持请求体数据传输
- **前端逻辑**: 分离筛选和搜索的监听器，搜索时保持已选中状态
- **全选优化**: 取消全选时只移除当前页选中项，保留其他页面选择
- **Unicode处理**: 添加无效 UTF-16 代理对清理和错误处理机制
- **配置管理**: 将 .mcp.json 添加到 .gitignore，避免本地配置被提交

### 🚀 用户体验提升
- 支持跨搜索结果批量选择和删除
- 批量删除按钮显示选中数量
- 智能的全选状态管理
- 更好的 Unicode 字符处理容错性

### 🧪 测试验证
- 验证搜索切换时选择状态保持
- 确认批量删除功能正常工作
- 检查 Redis 数据清理完整性
- 测试 Unicode 字符处理稳定性

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
iRubbish
2025-08-19 09:46:33 +08:00
parent f642fa7095
commit 1ee71ffbc9
7 changed files with 304 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
web/admin-spa/src/views/ApiKeysView.vue
View File

@@ -88,6 +88,19 @@
/>
<span class="relative">刷新</span>
</button>
<!-- 批量删除按钮 -->
<button
v-if="selectedApiKeys.length > 0"
class="group relative flex items-center justify-center gap-2 rounded-lg border border-red-200 bg-red-50 px-4 py-2 text-sm font-medium text-red-700 shadow-sm transition-all duration-200 hover:border-red-300 hover:bg-red-100 hover:shadow-md sm:w-auto"
@click="batchDeleteApiKeys()"
>
<div
class="absolute -inset-0.5 rounded-lg bg-gradient-to-r from-red-500 to-pink-500 opacity-0 blur transition duration-300 group-hover:opacity-20"
></div>
<i class="fas fa-trash relative text-red-600" />
<span class="relative">删除选中 ({{ selectedApiKeys.length }})</span>
</button>
</div>
<!-- 创建按钮 -->
<button
@@ -120,6 +133,17 @@
<table class="w-full table-fixed">
<thead class="bg-gray-50/80 backdrop-blur-sm">
<tr>
<th class="w-[50px] px-3 py-4 text-left">
<div class="flex items-center">
<input
v-model="selectAllChecked"
class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
:indeterminate="isIndeterminate"
type="checkbox"
@change="handleSelectAll"
/>
</div>
</th>
<th
class="w-[25%] min-w-[200px] cursor-pointer px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 hover:bg-gray-100"
@click="sortApiKeys('name')"
@@ -216,6 +240,17 @@
<template v-for="key in paginatedApiKeys" :key="key.id">
<!-- API Key 主行 -->
<tr class="table-row">
<td class="px-3 py-4">
<div class="flex items-center">
<input
v-model="selectedApiKeys"
class="mr-3 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
type="checkbox"
:value="key.id"
@change="updateSelectAllState"
/>
</div>
</td>
<td class="px-3 py-4">
<div class="flex items-center">
<div
@@ -505,7 +540,7 @@
<!-- 模型统计展开区域 -->
<tr v-if="key && key.id && expandedApiKeys[key.id]">
<td class="bg-gray-50 px-3 py-4" colspan="7">
<td class="bg-gray-50 px-3 py-4" colspan="8">
<div v-if="!apiKeyModelStats[key.id]" class="py-4 text-center">
<div class="loading-spinner mx-auto" />
<p class="mt-2 text-sm text-gray-500">加载模型统计...</p>
@@ -748,6 +783,13 @@
<!-- 卡片头部 -->
<div class="mb-3 flex items-start justify-between">
<div class="flex items-center gap-3">
<input
v-model="selectedApiKeys"
class="mt-1 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
type="checkbox"
:value="key.id"
@change="updateSelectAllState"
/>
<div
class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-blue-600"
>
@@ -1152,6 +1194,11 @@ import CustomDropdown from '@/components/common/CustomDropdown.vue'
// 响应式数据
const clientsStore = useClientsStore()
const apiKeys = ref([])
// 多选相关状态
const selectedApiKeys = ref([])
const selectAllChecked = ref(false)
const isIndeterminate = ref(false)
const apiKeysLoading = ref(false)
const apiKeyStatsTimeRange = ref('today')
const apiKeysSortBy = ref('')
@@ -1831,6 +1878,12 @@ const deleteApiKey = async (keyId) => {
const data = await apiClient.delete(`/admin/api-keys/${keyId}`)
if (data.success) {
showToast('API Key 已删除', 'success')
// 从选中列表中移除
const index = selectedApiKeys.value.indexOf(keyId)
if (index > -1) {
selectedApiKeys.value.splice(index, 1)
}
updateSelectAllState()
loadApiKeys()
} else {
showToast(data.message || '删除失败', 'error')
@@ -1840,6 +1893,96 @@ const deleteApiKey = async (keyId) => {
}
}
// 批量删除API Keys
const batchDeleteApiKeys = async () => {
const selectedCount = selectedApiKeys.value.length
if (selectedCount === 0) {
showToast('请先选择要删除的 API Keys', 'warning')
return
}
let confirmed = false
const message = `确定要删除选中的 ${selectedCount} 个 API Key 吗？此操作不可恢复。`
if (window.showConfirm) {
confirmed = await window.showConfirm('批量删除 API Keys', message, '确定删除', '取消')
} else {
confirmed = confirm(message)
}
if (!confirmed) return
const keyIds = [...selectedApiKeys.value]
try {
const data = await apiClient.delete('/admin/api-keys/batch', {
data: { keyIds }
})
if (data.success) {
const { successCount, failedCount, errors } = data.data
if (successCount > 0) {
showToast(`成功删除 ${successCount} 个 API Keys`, 'success')
// 如果有失败的，显示详细信息
if (failedCount > 0) {
const errorMessages = errors.map((e) => `${e.keyId}: ${e.error}`).join('\n')
showToast(`${failedCount} 个删除失败:\n${errorMessages}`, 'warning')
}
} else {
showToast('所有 API Keys 删除失败', 'error')
}
// 清空选中状态
selectedApiKeys.value = []
updateSelectAllState()
loadApiKeys()
} else {
showToast(data.message || '批量删除失败', 'error')
}
} catch (error) {
showToast('批量删除失败', 'error')
console.error('批量删除 API Keys 失败:', error)
}
}
// 处理全选/取消全选
const handleSelectAll = () => {
if (selectAllChecked.value) {
// 全选当前页的所有API Keys
paginatedApiKeys.value.forEach((key) => {
if (!selectedApiKeys.value.includes(key.id)) {
selectedApiKeys.value.push(key.id)
}
})
} else {
// 取消全选：只移除当前页的选中项，保留其他页面的选中项
const currentPageIds = new Set(paginatedApiKeys.value.map((key) => key.id))
selectedApiKeys.value = selectedApiKeys.value.filter((id) => !currentPageIds.has(id))
}
updateSelectAllState()
}
// 更新全选状态
const updateSelectAllState = () => {
const totalInCurrentPage = paginatedApiKeys.value.length
const selectedInCurrentPage = paginatedApiKeys.value.filter((key) =>
selectedApiKeys.value.includes(key.id)
).length
if (selectedInCurrentPage === 0) {
selectAllChecked.value = false
isIndeterminate.value = false
} else if (selectedInCurrentPage === totalInCurrentPage) {
selectAllChecked.value = true
isIndeterminate.value = false
} else {
selectAllChecked.value = false
isIndeterminate.value = true
}
}
// 复制API统计页面链接
const copyApiStatsLink = (apiKey) => {
// 构建统计页面的完整URL
@@ -1980,14 +2123,43 @@ const clearSearch = () => {
currentPage.value = 1
}
// 监听筛选条件变化，重置页码
watch([selectedTagFilter, apiKeyStatsTimeRange, searchKeyword], () => {
// 监听筛选条件变化，重置页码和选中状态
// 监听筛选条件变化（不包括搜索），清空选中状态
watch([selectedTagFilter, apiKeyStatsTimeRange], () => {
currentPage.value = 1
// 清空选中状态
selectedApiKeys.value = []
updateSelectAllState()
})
// 监听搜索关键词变化，只重置分页，保持选中状态
watch(searchKeyword, () => {
currentPage.value = 1
// 不清空选中状态，允许跨搜索保持勾选
updateSelectAllState()
})
// 监听分页变化，更新全选状态
watch([currentPage, pageSize], () => {
updateSelectAllState()
})
// 监听API Keys数据变化，清理无效的选中状态
watch(apiKeys, () => {
const validIds = new Set(apiKeys.value.map((key) => key.id))
// 过滤出仍然有效的选中项
selectedApiKeys.value = selectedApiKeys.value.filter((id) => validIds.has(id))
updateSelectAllState()
})
onMounted(async () => {
// 并行加载所有需要的数据
await Promise.all([clientsStore.loadSupportedClients(), loadAccounts(), loadApiKeys()])
// 初始化全选状态
updateSelectAllState()
})
</script>