From 495c458e9a15d64ae0aa30c41520ef26d1831908 Mon Sep 17 00:00:00 2001
From: shaw <shaw-wei@foxmail.com>
Date: Sun, 3 Aug 2025 01:30:42 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8DAPI=20Keys=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E7=9A=84undefined=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修复filteredAndSortedApiKeys未定义错误，改为使用sortedApiKeys
- 添加缺失的分页相关变量定义（currentPage, pageSize, totalPages等）
- 添加paginatedApiKeys计算属性实现分页功能
- 修复CreateApiKeyModal和EditApiKeyModal中localAccounts防御性编程
- 添加筛选条件变化时重置页码的逻辑
- 修复"Cannot read properties of undefined (reading 'length')"错误

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../components/apikeys/CreateApiKeyModal.vue  |  7 +-
 .../components/apikeys/EditApiKeyModal.vue    |  7 +-
 web/admin-spa/src/views/ApiKeysView.vue       | 71 ++++++++++++-------
 3 files changed, 59 insertions(+), 26 deletions(-)

diff --git a/web/admin-spa/src/components/apikeys/CreateApiKeyModal.vue b/web/admin-spa/src/components/apikeys/CreateApiKeyModal.vue
index 2901db33..1873fa24 100644
--- a/web/admin-spa/src/components/apikeys/CreateApiKeyModal.vue
+++ b/web/admin-spa/src/components/apikeys/CreateApiKeyModal.vue
@@ -699,7 +699,12 @@ onMounted(async () => {
   supportedClients.value = await clientsStore.loadSupportedClients()
   availableTags.value = await apiKeysStore.fetchTags()
   // 初始化账号数据
-  localAccounts.value = props.accounts
+  if (props.accounts) {
+    localAccounts.value = {
+      claude: props.accounts.claude || [],
+      gemini: props.accounts.gemini || []
+    }
+  }
 })
 
 // 刷新账号列表
diff --git a/web/admin-spa/src/components/apikeys/EditApiKeyModal.vue b/web/admin-spa/src/components/apikeys/EditApiKeyModal.vue
index ddc12e8e..7119a896 100644
--- a/web/admin-spa/src/components/apikeys/EditApiKeyModal.vue
+++ b/web/admin-spa/src/components/apikeys/EditApiKeyModal.vue
@@ -709,7 +709,12 @@ onMounted(async () => {
   availableTags.value = await apiKeysStore.fetchTags()
   
   // 初始化账号数据
-  localAccounts.value = props.accounts
+  if (props.accounts) {
+    localAccounts.value = {
+      claude: props.accounts.claude || [],
+      gemini: props.accounts.gemini || []
+    }
+  }
   
   form.name = props.apiKey.name
   form.tokenLimit = props.apiKey.tokenLimit || ''
diff --git a/web/admin-spa/src/views/ApiKeysView.vue b/web/admin-spa/src/views/ApiKeysView.vue
index 2db08887..48c5101b 100644
--- a/web/admin-spa/src/views/ApiKeysView.vue
+++ b/web/admin-spa/src/views/ApiKeysView.vue
@@ -174,7 +174,7 @@
           </thead>
           <tbody class="divide-y divide-gray-200/50">
             <template
-              v-for="key in sortedApiKeys"
+              v-for="key in paginatedApiKeys"
               :key="key.id"
             >
               <!-- API Key 主行 -->
@@ -615,7 +615,7 @@
         class="md:hidden space-y-3"
       >
         <div
-          v-for="key in sortedApiKeys"
+          v-for="key in paginatedApiKeys"
           :key="key.id"
           class="card p-4 hover:shadow-lg transition-shadow"
         >
@@ -816,12 +816,12 @@
       
       <!-- 分页组件 -->
       <div
-        v-if="filteredAndSortedApiKeys.length > 0"
+        v-if="sortedApiKeys.length > 0"
         class="mt-4 sm:mt-6 flex flex-col sm:flex-row justify-between items-center gap-4"
       >
         <div class="flex flex-col sm:flex-row items-center gap-3 w-full sm:w-auto">
           <span class="text-xs sm:text-sm text-gray-600">
-            共 {{ filteredAndSortedApiKeys.length }} 条记录
+            共 {{ sortedApiKeys.length }} 条记录
           </span>
           <div class="flex items-center gap-2">
             <span class="text-xs sm:text-sm text-gray-600">每页显示</span>
@@ -956,7 +956,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, watch } from 'vue'
 import { showToast } from '@/utils/toast'
 import { apiClient } from '@/config/api'
 import { useClientsStore } from '@/stores/clients'
@@ -994,6 +994,11 @@ const availableTags = ref([])
 // 移动端展开状态
 const expandedKeys = ref([])
 
+// 分页相关
+const currentPage = ref(1)
+const pageSize = ref(10)
+const pageSizeOptions = [10, 20, 50, 100]
+
 // 模态框状态
 const showCreateApiKeyModal = ref(false)
 const showEditApiKeyModal = ref(false)
@@ -1045,35 +1050,48 @@ const filteredAndSortedApiKeys = computed(() => {
 
 // 计算总页数
 const totalPages = computed(() => {
-  return Math.ceil(filteredAndSortedApiKeys.value.length / pageSize.value)
+  const total = sortedApiKeys.value.length
+  return Math.ceil(total / pageSize.value) || 0
 })
 
-// 计算当前页显示的API Keys
-const sortedApiKeys = computed(() => {
-  const start = (currentPage.value - 1) * pageSize.value
-  const end = start + pageSize.value
-  return filteredAndSortedApiKeys.value.slice(start, end)
-})
-
-// 计算要显示的页码
+// 计算显示的页码数组
 const pageNumbers = computed(() => {
   const pages = []
-  const maxPagesToShow = 5
-  let startPage = Math.max(1, currentPage.value - Math.floor(maxPagesToShow / 2))
-  let endPage = Math.min(totalPages.value, startPage + maxPagesToShow - 1)
+  const current = currentPage.value
+  const total = totalPages.value
   
-  // 调整起始页
-  if (endPage - startPage < maxPagesToShow - 1) {
-    startPage = Math.max(1, endPage - maxPagesToShow + 1)
-  }
-  
-  for (let i = startPage; i <= endPage; i++) {
-    pages.push(i)
+  if (total <= 7) {
+    // 如果总页数小于等于7，显示所有页码
+    for (let i = 1; i <= total; i++) {
+      pages.push(i)
+    }
+  } else {
+    // 如果总页数大于7，显示部分页码
+    let start = Math.max(1, current - 2)
+    let end = Math.min(total, current + 2)
+    
+    // 调整起始和结束页码
+    if (current <= 3) {
+      end = 5
+    } else if (current >= total - 2) {
+      start = total - 4
+    }
+    
+    for (let i = start; i <= end; i++) {
+      pages.push(i)
+    }
   }
   
   return pages
 })
 
+// 获取分页后的数据
+const paginatedApiKeys = computed(() => {
+  const start = (currentPage.value - 1) * pageSize.value
+  const end = start + pageSize.value
+  return sortedApiKeys.value.slice(start, end)
+})
+
 // 加载账户列表
 const loadAccounts = async () => {
   try {
@@ -1588,6 +1606,11 @@ const showApiKey = async (apiKey) => {
   }
 }
 
+// 监听筛选条件变化，重置页码
+watch([selectedTagFilter, apiKeyStatsTimeRange], () => {
+  currentPage.value = 1
+})
+
 onMounted(async () => {
   // 并行加载所有需要的数据
   await Promise.all([