feat: 前端组件准备

2026-05-22 15:02:31 +08:00
parent 397ccdca13
commit 5e05bf4f63
62 changed files with 6903 additions and 878 deletions
@@ -0,0 +1,76 @@
+<script lang="ts" setup>
+import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/vue/24/outline";
+import { MoreHorizontal } from "lucide-vue-next";
+
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationNext,
+  PaginationPrevious
+} from "@/components/ui/pagination";
+
+import type { PaginationProps } from "./type";
+
+const props = withDefaults(defineProps<PaginationProps & { load: boolean }>(), {
+  total: 0,
+  pageSize: 5,
+  currentPage: 1
+});
+
+const emits = defineEmits<{
+  "update:page": [page: number];
+}>();
+
+const pageCount = computed(() => Math.ceil(props.total / props.pageSize));
+</script>
+
+<template>
+  <!-- 分页器 -->
+  <Pagination
+    v-slot="{ page }"
+    :page="props.currentPage"
+    :items-per-page="props.pageSize"
+    :total="props.total"
+    :show-edges="true"
+    :disabled="props.load || pageCount <= 1"
+    class="select-none"
+    :class="`justify-${props.align || 'center'}`"
+    @update:page="(val: number) => emits('update:page', val)"
+  >
+    <PaginationContent v-slot="{ items }">
+      <PaginationPrevious class="w-5.5 h-5.5 text-[#2563EB]!">
+        <ChevronLeftIcon class="size-4" />
+      </PaginationPrevious>
+      <template v-for="(item, index) in items" :key="index">
+        <PaginationItem
+          v-if="item.type === 'page'"
+          :value="item.value"
+          :is-active="item.value === page"
+          class="w-fit min-w-5.5 h-5.5 text-xs px-1 text-[#71717A]/80"
+          :class="{
+            'text-[#2563EB]! border-[#2563EB]!': item.value === page
+          }"
+        >
+          {{ item.value }}
+        </PaginationItem>
+        <PaginationEllipsis
+          v-else-if="item.type === 'ellipsis'"
+          class="text-[#71717A]/80"
+        >
+          <Button
+            variant="outline"
+            :disabled="props.load"
+            class="w-5.5 h-5.5 p-0 text-[12px] text-[#71717A]/80 border-transparent bg-white rounded"
+          >
+            <MoreHorizontal class="size-4" />
+          </Button>
+        </PaginationEllipsis>
+      </template>
+      <PaginationNext class="w-5.5 h-5.5 text-[#2563EB]!">
+        <ChevronRightIcon class="size-4" />
+      </PaginationNext>
+    </PaginationContent>
+  </Pagination>
+</template>