From e77c06d5255d68ca28878259ac647a9baef8ae02 Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Tue, 23 Dec 2025 16:41:43 +0800
Subject: [PATCH] perf: Optimize the sorting by creation time on the API Key
 page

---
 backend/apps/system/api/apikey.py         |  2 +-
 frontend/src/components/layout/Apikey.vue | 14 +++++++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/backend/apps/system/api/apikey.py b/backend/apps/system/api/apikey.py
index cfed5ae7..e125a90d 100644
--- a/backend/apps/system/api/apikey.py
+++ b/backend/apps/system/api/apikey.py
@@ -8,7 +8,7 @@
 from common.utils.time import get_timestamp
 import secrets
 
-router = APIRouter(tags=["system_apikey"], prefix="/system/apikey")
+router = APIRouter(tags=["system_apikey"], prefix="/system/apikey", include_in_schema=False)
 
 @router.get("")
 async def grid(session: SessionDep, current_user: CurrentUser) -> list[ApikeyGridItem]:
diff --git a/frontend/src/components/layout/Apikey.vue b/frontend/src/components/layout/Apikey.vue
index e56d9d5a..81501170 100644
--- a/frontend/src/components/layout/Apikey.vue
+++ b/frontend/src/components/layout/Apikey.vue
@@ -80,6 +80,13 @@ const deleteHandler = (row: any) => {
     },
   })
 }
+const sortChange = (param: any) => {
+  if (param?.order === 'ascending') {
+    state.tableData.sort((a: any, b: any) => a.create_time - b.create_time)
+  } else {
+    state.tableData.sort((a: any, b: any) => b.create_time - a.create_time)
+  }
+}
 const loadGridData = () => {
   request.get('/system/apikey').then((res: any) => {
     state.tableData = res || []
@@ -133,7 +140,12 @@ onMounted(() => {
       </el-button>
     </div>
     <div class="api-key-grid">
-      <el-table ref="multipleTableRef" :data="state.tableData" style="width: 100%">
+      <el-table
+        ref="multipleTableRef"
+        :data="state.tableData"
+        style="width: 100%"
+        @sort-change="sortChange"
+      >
         <el-table-column prop="access_key" label="Access Key" width="256">
           <template #default="scope">
             <div class="user-status-container">