fix: 多api密钥增加分页

Yi.Ai.Vue3/src/api/model/index.ts

@@ -37,8 +37,31 @@ export function getModelTokenUsage(tokenId?: string) {
 }
 
 // 获取当前用户得token列表
-export function getTokenList() {
-  return get<any>('/token/list').json();
+export function getTokenList(params?: {
+  skipCount?: number;
+  maxResultCount?: number;
+  orderByColumn?: string;
+  isAsc?: string;
+}) {
+  // 构建查询参数
+  const queryParams = new URLSearchParams();
+  if (params?.skipCount !== undefined) {
+    queryParams.append('SkipCount', params.skipCount.toString());
+  }
+  if (params?.maxResultCount !== undefined) {
+    queryParams.append('MaxResultCount', params.maxResultCount.toString());
+  }
+  if (params?.orderByColumn) {
+    queryParams.append('OrderByColumn', params.orderByColumn);
+  }
+  if (params?.isAsc) {
+    queryParams.append('IsAsc', params.isAsc);
+  }
+
+  const queryString = queryParams.toString();
+  const url = queryString ? `/token/list?${queryString}` : '/token/list';
+
+  return get<any>(url).json();
 }
 
 // 创建token

Yi.Ai.Vue3/src/components/userPersonalCenter/components/APIKeyManagement.vue

@@ -49,21 +49,46 @@ const router = useRouter();
 // 防抖和节流控制
 const operatingTokenId = ref<string>('');
 
+// 分页相关
+const totalCount = ref(0);
+const currentPage = ref(1);
+const pageSize = ref(10);
+const queryParams = ref({
+  skipCount: 0,
+  maxResultCount: 10,
+  orderByColumn: undefined as string | undefined,
+  isAsc: undefined as string | undefined,
+});
+
 // 获取Token列表
-async function fetchTokenList() {
+async function fetchTokenList(resetPage = false) {
+  if (resetPage) {
+    currentPage.value = 1;
+  }
+
   try {
     loading.value = true;
-    const res = await getTokenList();
+    const params = {
+      skipCount: currentPage.value,
+      maxResultCount: pageSize.value,
+      orderByColumn: queryParams.value.orderByColumn,
+      isAsc: queryParams.value.isAsc,
+    };
+
+    const res = await getTokenList(params);
     if (res.data) {
-      tokenList.value = res.data.items.map((item: TokenItem) => ({
+      tokenList.value = (res.data.items || []).map((item: TokenItem) => ({
         ...item,
         showKey: false,
       }));
+      totalCount.value = res.data.totalCount || 0;
     }
   }
   catch (error) {
     console.error('获取API密钥列表失败:', error);
     ElMessage.error('获取API密钥列表失败');
+    tokenList.value = [];
+    totalCount.value = 0;
   }
   finally {
     loading.value = false;
@@ -279,12 +304,36 @@ function getQuotaColor(percentage: number) {
 
 // 处理排序
 function handleSortChange({ prop, order }: { prop: string; order: string | null }) {
-  // 这里可以根据需要实现客户端排序或服务端排序
+  console.log('排序变化:', { prop, order });
+  if (order) {
+    queryParams.value.orderByColumn = prop;
+    queryParams.value.isAsc = order === 'ascending' ? 'ascending' : 'descending';
+  }
+  else {
+    queryParams.value.orderByColumn = undefined;
+    queryParams.value.isAsc = undefined;
+  }
+  fetchTokenList(true);
+}
+
+// 处理分页
+function handlePageChange(page: number) {
+  console.log('切换页码:', page);
+  currentPage.value = page;
+  fetchTokenList();
+}
+
+// 处理每页大小变化
+function handleSizeChange(size: number) {
+  console.log('修改每页大小:', size);
+  pageSize.value = size;
+  queryParams.value.maxResultCount = size;
+  currentPage.value = 1;
+  fetchTokenList();
 }
 
 // 是否有Token
 const hasTokens = computed(() => tokenList.value.length > 0);
-const totalCount = computed(() => tokenList.value.length);
 
 // 检查按钮是否正在操作
 function isOperating(tokenId: string) {
@@ -540,6 +589,21 @@ onMounted(async () => {
           </template>
         </el-table-column>
       </el-table>
+
+      <!-- 分页 -->
+      <div v-if="totalCount > 0" class="pagination-container">
+        <el-pagination
+          v-model:current-page="currentPage"
+          v-model:page-size="pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="totalCount"
+          layout="total, sizes, prev, pager, next, jumper"
+          prev-text="上一页"
+          next-text="下一页"
+          @size-change="handleSizeChange"
+          @current-change="handlePageChange"
+        />
+      </div>
     </div>
 
     <!-- 空状态 -->
@@ -891,6 +955,68 @@ onMounted(async () => {
   }
 }
 
+/* 分页容器 */
+.pagination-container {
+  margin-top: 20px;
+  padding: 20px 0;
+  display: flex;
+  justify-content: center;
+  border-top: 2px solid #f0f2f5;
+
+  :deep(.el-pagination) {
+    gap: 8px;
+
+    .btn-prev,
+    .btn-next {
+      border-radius: 8px;
+      padding: 0 16px;
+      border: 1px solid #dcdfe6;
+      background: #fff;
+      font-weight: 500;
+
+      &:hover {
+        color: #667eea;
+        border-color: #667eea;
+        background: #f5f7fa;
+      }
+    }
+
+    .el-pager li {
+      border-radius: 8px;
+      min-width: 36px;
+      height: 36px;
+      line-height: 36px;
+      border: 1px solid transparent;
+      transition: all 0.3s;
+
+      &:hover {
+        color: #667eea;
+        background: #f5f7fa;
+      }
+
+      &.is-active {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: #fff;
+        border-color: transparent;
+      }
+    }
+
+    .el-pagination__sizes {
+      .el-select {
+        .el-input__wrapper {
+          border-radius: 8px;
+        }
+      }
+    }
+
+    .el-pagination__jump {
+      .el-input__wrapper {
+        border-radius: 8px;
+      }
+    }
+  }
+}
+
 /* 使用说明卡片 */
 .usage-guide-card {
   border-radius: 12px;
@@ -1032,5 +1158,29 @@ onMounted(async () => {
       width: 100%;
     }
   }
+
+  /* 移动端分页 */
+  .pagination-container {
+    padding: 16px 0;
+  }
+
+  .pagination-container :deep(.el-pagination) {
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 6px;
+
+    .btn-prev,
+    .btn-next {
+      padding: 0 12px;
+      font-size: 13px;
+    }
+
+    .el-pager li {
+      min-width: 32px;
+      height: 32px;
+      line-height: 32px;
+      font-size: 13px;
+    }
+  }
 }
 </style>