优化

frontend/app/web-gold/src/components/ui/pagination/PaginationFirst.vue

@@ -27,7 +27,7 @@ const forwarded = useForwardProps(delegatedProps)
   >
     <slot>
       <ChevronLeftIcon />
-      <span class="hidden sm:block">First</span>
+      <span class="hidden sm:block">首页</span>
     </slot>
   </PaginationFirst>
 </template>

frontend/app/web-gold/src/components/ui/pagination/PaginationLast.vue

@@ -26,7 +26,7 @@ const forwarded = useForwardProps(delegatedProps)
     v-bind="forwarded"
   >
     <slot>
-      <span class="hidden sm:block">Last</span>
+      <span class="hidden sm:block">末页</span>
       <ChevronRightIcon />
     </slot>
   </PaginationLast>

frontend/app/web-gold/src/components/ui/pagination/PaginationNext.vue

@@ -26,7 +26,7 @@ const forwarded = useForwardProps(delegatedProps)
     v-bind="forwarded"
   >
     <slot>
-      <span class="hidden sm:block">Next</span>
+      <span class="hidden sm:block">下一页</span>
       <ChevronRightIcon />
     </slot>
   </PaginationNext>

frontend/app/web-gold/src/components/ui/pagination/PaginationPrevious.vue

@@ -27,7 +27,7 @@ const forwarded = useForwardProps(delegatedProps)
   >
     <slot>
       <ChevronLeftIcon />
-      <span class="hidden sm:block">Previous</span>
+      <span class="hidden sm:block">上一页</span>
     </slot>
   </PaginationPrev>
 </template>

frontend/app/web-gold/src/components/ui/pagination/TablePagination.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Button } from '@/components/ui/button'
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationFirst,
+  PaginationItem,
+  PaginationLast,
+  PaginationNext,
+  PaginationPrevious
+} from '@/components/ui/pagination'
+
+interface Props {
+  /** 当前页码 */
+  current: number
+  /** 每页条数 */
+  pageSize: number
+  /** 总条数 */
+  total: number
+  /** 显示的页码按钮数量 */
+  siblingCount?: number
+  /** 是否显示首页/末页按钮 */
+  showEdges?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  siblingCount: 1,
+  showEdges: true
+})
+
+const emit = defineEmits<{
+  'update:current': [page: number]
+  'change': [page: number]
+}>()
+
+const totalPages = computed(() => Math.ceil(props.total / props.pageSize))
+
+const handlePageChange = (page: number) => {
+  if (page < 1 || page > totalPages.value || page === props.current) return
+  emit('update:current', page)
+  emit('change', page)
+}
+</script>
+
+<template>
+  <div v-if="total > 0" class="flex flex-wrap items-center justify-between gap-4 py-4 border-t">
+    <span class="text-sm text-muted-foreground shrink-0">
+      共 {{ total }} 条记录
+    </span>
+    <Pagination
+      v-slot="{ page }"
+      :items-per-page="pageSize"
+      :total="total"
+      :sibling-count="siblingCount"
+      :show-edges="showEdges"
+      :page="current"
+      @update:page="handlePageChange"
+    >
+      <PaginationContent v-slot="{ items }">
+        <PaginationFirst @click="handlePageChange(1)" />
+        <PaginationPrevious @click="handlePageChange(current - 1)" />
+        <template v-for="(item, index) in items" :key="index">
+          <PaginationItem
+            v-if="item.type === 'page'"
+            :value="item.value"
+            as-child
+          >
+            <Button
+              :variant="page === item.value ? 'default' : 'outline'"
+              size="icon-sm"
+              class="h-8 w-8"
+            >
+              {{ item.value }}
+            </Button>
+          </PaginationItem>
+          <PaginationEllipsis v-else :index="index" />
+        </template>
+        <PaginationNext @click="handlePageChange(current + 1)" />
+        <PaginationLast @click="handlePageChange(totalPages)" />
+      </PaginationContent>
+    </Pagination>
+  </div>
+</template>

frontend/app/web-gold/src/components/ui/pagination/index.ts

@@ -6,3 +6,4 @@ export { default as PaginationItem } from "./PaginationItem.vue"
 export { default as PaginationLast } from "./PaginationLast.vue"
 export { default as PaginationNext } from "./PaginationNext.vue"
 export { default as PaginationPrevious } from "./PaginationPrevious.vue"
+export { default as TablePagination } from "./TablePagination.vue"