diff --git a/frontend/src/components/admin/usage/UsageCleanupDialog.vue b/frontend/src/components/admin/usage/UsageCleanupDialog.vue index 91a43ecd..d5e81e72 100644 --- a/frontend/src/components/admin/usage/UsageCleanupDialog.vue +++ b/frontend/src/components/admin/usage/UsageCleanupDialog.vue @@ -66,6 +66,19 @@ + + @@ -108,6 +121,7 @@ import { useI18n } from 'vue-i18n' import { useAppStore } from '@/stores/app' import BaseDialog from '@/components/common/BaseDialog.vue' import ConfirmDialog from '@/components/common/ConfirmDialog.vue' +import Pagination from '@/components/common/Pagination.vue' import UsageFilters from '@/components/admin/usage/UsageFilters.vue' import { adminUsageAPI } from '@/api/admin/usage' import type { AdminUsageQueryParams, UsageCleanupTask, CreateUsageCleanupTaskRequest } from '@/api/admin/usage' @@ -131,6 +145,9 @@ const localEndDate = ref('') const tasks = ref([]) const tasksLoading = ref(false) +const tasksPage = ref(1) +const tasksPageSize = ref(5) +const tasksTotal = ref(0) const submitting = ref(false) const confirmVisible = ref(false) const cancelConfirmVisible = ref(false) @@ -146,6 +163,8 @@ const resetFilters = () => { localEndDate.value = props.endDate localFilters.value.start_date = localStartDate.value localFilters.value.end_date = localEndDate.value + tasksPage.value = 1 + tasksTotal.value = 0 } const startPolling = () => { @@ -219,8 +238,18 @@ const loadTasks = async () => { if (!props.show) return tasksLoading.value = true try { - const res = await adminUsageAPI.listCleanupTasks({ page: 1, page_size: 5 }) + const res = await adminUsageAPI.listCleanupTasks({ + page: tasksPage.value, + page_size: tasksPageSize.value + }) tasks.value = res.items || [] + tasksTotal.value = res.total || 0 + if (res.page) { + tasksPage.value = res.page + } + if (res.page_size) { + tasksPageSize.value = res.page_size + } } catch (error) { console.error('Failed to load cleanup tasks:', error) appStore.showError(t('admin.usage.cleanup.loadFailed')) @@ -229,6 +258,18 @@ const loadTasks = async () => { } } +const handleTaskPageChange = (page: number) => { + tasksPage.value = page + loadTasks() +} + +const handleTaskPageSizeChange = (size: number) => { + if (!Number.isFinite(size) || size <= 0) return + tasksPageSize.value = size + tasksPage.value = 1 + loadTasks() +} + const openConfirm = () => { confirmVisible.value = true } diff --git a/frontend/src/components/common/Pagination.vue b/frontend/src/components/common/Pagination.vue index 728bc0d3..3365a186 100644 --- a/frontend/src/components/common/Pagination.vue +++ b/frontend/src/components/common/Pagination.vue @@ -37,7 +37,7 @@

-
+
{{ t('pagination.perPage') }}: @@ -49,6 +49,22 @@ />
+ +
+ {{ t('pagination.jumpTo') }} + + +
@@ -102,7 +118,7 @@