diff --git a/Yi.Ai.Vue3/src/api/model/index.ts b/Yi.Ai.Vue3/src/api/model/index.ts index 5e27a407..91748029 100644 --- a/Yi.Ai.Vue3/src/api/model/index.ts +++ b/Yi.Ai.Vue3/src/api/model/index.ts @@ -37,8 +37,31 @@ export function getModelTokenUsage(tokenId?: string) { } // 获取当前用户得token列表 -export function getTokenList() { - return get('/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(url).json(); } // 创建token diff --git a/Yi.Ai.Vue3/src/components/userPersonalCenter/components/APIKeyManagement.vue b/Yi.Ai.Vue3/src/components/userPersonalCenter/components/APIKeyManagement.vue index 8c58dd04..5007f401 100644 --- a/Yi.Ai.Vue3/src/components/userPersonalCenter/components/APIKeyManagement.vue +++ b/Yi.Ai.Vue3/src/components/userPersonalCenter/components/APIKeyManagement.vue @@ -49,21 +49,46 @@ const router = useRouter(); // 防抖和节流控制 const operatingTokenId = ref(''); +// 分页相关 +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 () => { + + +
+ +
@@ -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; + } + } }