统一管理后台分页样式

- 新建 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
@@ -0,0 +1,67 @@
<script setup lang="ts">
import { computed } from 'vue'
interface Props {
currentPage: number
pageSize: number
total: number
loading?: boolean
}
interface Emits {
(e: 'update:currentPage', value: number): void
(e: 'update:pageSize', value: number): void
(e: 'pageChange'): void
}
const props = defineProps<Props>()
const emit = defineEmits<Emits>()
const totalPages = computed(() => Math.max(1, Math.ceil(props.total / props.pageSize)))
const currentCount = computed(() => {
if (!props.total) return 0
const start = (props.currentPage - 1) * props.pageSize
return Math.min(props.pageSize, props.total - start)
})
function handleSizeChange(size: number) {
emit('update:pageSize', size)
emit('update:currentPage', 1)
emit('pageChange')
}
function prevPage() {
if (props.currentPage <= 1) return
emit('update:currentPage', props.currentPage - 1)
emit('pageChange')
}
function nextPage() {
if (props.currentPage >= totalPages.value) return
emit('update:currentPage', props.currentPage + 1)
emit('pageChange')
}
</script>
<template>
<div class="table-pagination">
<span class="pagination-summary">当前页 {{ currentCount }} 条,共 {{ total }} 条</span>
<div class="pagination-controls">
<span class="pagination-size-label">每页</span>
<el-select
:model-value="pageSize"
class="page-size-select"
size="small"
@update:model-value="handleSizeChange"
>
<el-option :value="10" label="10条" />
<el-option :value="20" label="20条" />
<el-option :value="50" label="50条" />
<el-option :value="100" label="100条" />
</el-select>
<span class="pagination-page">{{ currentPage }}/{{ totalPages }}页</span>
<el-button size="small" :disabled="currentPage <= 1 || loading" @click="prevPage">上页</el-button>
<el-button size="small" :disabled="currentPage >= totalPages || loading" @click="nextPage">下页</el-button>
</div>
</div>
</template>