组件

Web/src/components/Abutton.vue

@@ -0,0 +1,17 @@
+<template>
+  <button @click="">{{ text }}</button>
+</template>
+<script lang="ts" setup>
+// 1. 定义接收父组件传来的参数 props
+const props = defineProps({
+  // 字段名、类型、默认值
+  text: String,
+})
+
+const emit = defineEmits(['click'])
+// 定义 click 事件
+const handleClick = (): any => {
+  emit('click')
+}
+
+</script>

Web/src/components/Pagination.vue

@@ -1 +1,123 @@
-<template></template>
+<template>
+  <div class="pagination">
+    <!-- 第一行：导航按钮 -->
+    <div class="pagination-nav">
+      <a @click="goFirst">首页</a>
+      <a @click="goPrev">上一页</a>
+      <a @click="goNext">下一页</a>
+      <a @click="goLast">尾页</a>
+    </div>
+    <!-- 第二行：页码信息与跳转 -->
+    <div class="pagination-info">
+      <span>第{{ currentPage }}/{{ totalPages }}页</span>
+      <input v-model.number="inputPage" type="number" min="1" :max="totalPages" class="page-input"
+        @keyup.enter="goToPage" />
+      <button @click="goToPage">跳转</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  currentPage: number;
+  totalPages: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  currentPage: 1,
+  totalPages: 1,
+});
+
+const emit = defineEmits<{
+  (e: 'pageChange', page: number): void;
+}>();
+
+const inputPage = ref<number>(props.currentPage);
+
+watch(() => props.currentPage, (newVal: number) => {
+  inputPage.value = newVal;
+});
+
+const goFirst = (): void => {
+  if (props.currentPage > 1) {
+    emit('pageChange', 1);
+  }
+};
+
+const goPrev = (): void => {
+  if (props.currentPage > 1) {
+    emit('pageChange', props.currentPage - 1);
+  }
+};
+
+const goNext = (): void => {
+  if (props.currentPage < props.totalPages) {
+    emit('pageChange', props.currentPage + 1);
+  }
+};
+
+const goLast = (): void => {
+  if (props.currentPage < props.totalPages) {
+    emit('pageChange', props.totalPages);
+  }
+};
+
+const goToPage = (): void => {
+  let page: number = inputPage.value;
+  if (isNaN(page) || page < 1) {
+    page = 1;
+  } else if (page > props.totalPages) {
+    page = props.totalPages;
+  }
+  if (page !== props.currentPage) {
+    emit('pageChange', page);
+  }
+  inputPage.value = page;
+};
+</script>
+
+<style scoped>
+.pagination {
+  text-align: center;
+  font-size: 14px;
+  padding: 10px;
+}
+
+.pagination-nav {
+  margin-bottom: 8px;
+}
+
+.pagination-nav a {
+  display: inline-block;
+  padding: 4px 8px;
+  margin: 0 4px;
+  cursor: pointer;
+  color: #0066cc;
+  text-decoration: underline;
+}
+
+.pagination-nav a.disabled {
+  color: #999;
+  cursor: not-allowed;
+  text-decoration: none;
+}
+
+.pagination-info {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.page-input {
+  width: 50px;
+  padding: 2px 4px;
+  text-align: center;
+  border: 1px solid #ccc;
+}
+
+.pagination-info button {
+  padding: 2px 8px;
+  cursor: pointer;
+}
+</style>