统一管理后台分页样式

- 新建 AdminTablePagination 组件,统一分页 UI
- 改造 6 个前端页面使用统一分页组件:
  - 管理员管理
  - 用户管理
  - 申诉管理
  - 审计日志
  - 公告管理
  - 钱包流水
- 订单管理前后端完整改造:
  - 后端:添加 PaginatedResult 结构,支持 page/page_size 参数
  - 前端:API 支持分页参数,页面使用统一分页组件
- 所有列表页分页样式统一为商品管理的 .table-pagination 设计

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
yml
2026-06-06 00:13:59 +08:00
co-authored by Claude Opus 4.8
parent abb2204e56
commit ec9baada67
13 changed files with 226 additions and 90 deletions
@@ -1,17 +1,34 @@
<script setup lang="ts">
import { computed, ref } from 'vue'
import { computed, onMounted, ref } from 'vue'
import { fetchAdminOrders, type Order } from '@/features/orders'
import { useAdminTable } from '@/features/admin/composables/useAdminTable'
import { handoffStatusLabel, orderStatusLabel, settlementStatusLabel } from '@/utils/statusLabels'
import { formatDateTime } from '@/utils/time'
import AdminTablePagination from '../components/AdminTablePagination.vue'
const status = ref('')
const loading = ref(false)
const orders = ref<Order[]>([])
const total = ref(0)
const currentPage = ref(1)
const currentPageSize = ref(20)
const { loading, data: orders, load: loadOrders } = useAdminTable<Order[]>({
fetchFn: fetchAdminOrders,
initialData: [],
})
onMounted(loadOrders)
async function loadOrders() {
loading.value = true
try {
const result = await fetchAdminOrders(currentPage.value, currentPageSize.value)
orders.value = result.items
total.value = result.total
} finally {
loading.value = false
}
}
async function handlePageChange() {
await loadOrders()
}
const filteredOrders = computed(() => {
if (!status.value) return orders.value
@@ -74,5 +91,14 @@ const filteredOrders = computed(() => {
</template>
</el-table-column>
</el-table>
<AdminTablePagination
v-if="total > 0"
v-model:current-page="currentPage"
v-model:page-size="currentPageSize"
:total="total"
:loading="loading"
@page-change="handlePageChange"
/>
</section>
</template>