优化

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

@@ -4,7 +4,7 @@ import { cva } from "class-variance-authority"
 export { default as Button } from "./Button.vue"
 
 export const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
   {
     variants: {
       variant: {
@@ -22,11 +22,11 @@ export const buttonVariants = cva(
       },
       size: {
         "default": "h-9 px-4 py-2 has-[>svg]:px-3",
-        "sm": "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        "lg": "h-10 rounded-md px-6 has-[>svg]:px-4",
-        "icon": "size-9",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10",
+        "sm": "h-8 rounded-lg gap-1.5 px-3 has-[>svg]:px-2.5",
+        "lg": "h-10 rounded-lg px-6 has-[>svg]:px-4",
+        "icon": "size-9 rounded-lg",
+        "icon-sm": "size-8 rounded-lg",
+        "icon-lg": "size-10 rounded-lg",
       },
     },
     defaultVariants: {

frontend/app/web-gold/src/components/ui/drawer/DrawerContent.vue

@@ -23,16 +23,19 @@ const forwarded = useForwardPropsEmits(props, emits)
       data-slot="drawer-content"
       v-bind="{ ...$attrs, ...forwarded }"
       :class="cn(
-        'group/drawer-content bg-background fixed z-50 flex h-auto flex-col',
+        'group/drawer-content bg-background fixed flex h-auto flex-col',
         'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg',
         'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg',
         'data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:sm:max-w-sm',
         'data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:sm:max-w-sm',
         props.class,
       )"
+      :style="{ zIndex: 'var(--z-modal)' }"
     >
       <div class="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
-      <slot />
+      <div class="p-4 overflow-auto">
+        <slot />
+      </div>
     </DrawerContent>
   </DrawerPortal>
 </template>

frontend/app/web-gold/src/components/ui/drawer/DrawerOverlay.vue

@@ -14,6 +14,7 @@ const delegatedProps = reactiveOmit(props, "class")
   <DrawerOverlay
     data-slot="drawer-overlay"
     v-bind="delegatedProps"
-    :class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', props.class)"
+    :class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 bg-black/80', props.class)"
+    :style="{ zIndex: 'var(--z-modal-backdrop)' }"
   />
 </template>

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"