teacherTeam-Frontend/src/components/Pagination.vue

<template>
  <div class="flex justify-center items-center space-x-4 bg-white shadow-md py-4 px-6 rounded-lg">
    <button 
      @click="onPageChange(currentPage - 1)" 
      :disabled="currentPage === 1"
      class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary-dark disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
    >
      上一页
    </button>
    <span class="px-4 py-2 bg-gray-100 text-primary font-semibold rounded-md">
      {{ currentPage }} / {{ totalPages }}
    </span>
    <button 
      @click="onPageChange(currentPage + 1)" 
      :disabled="currentPage === totalPages"
      class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary-dark disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
    >
      下一页
    </button>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, computed } from 'vue';

const props = defineProps({
  currentPage: {
    type: Number,
    required: true
  },
  totalItems: {
    type: Number,
    required: true,
    default: 1
  },
  itemsPerPage: {
    type: Number,
    required: true
  }
});

const emit = defineEmits(['page-change']);

const totalPages = computed(() => {
  const totalItems = props.totalItems || 0;
  const itemsPerPage = props.itemsPerPage || 1; // 避免除以零
  return Math.ceil(totalItems / itemsPerPage);
});

const onPageChange = (page) => {
  if (page >= 1 && page <= totalPages.value) {
    emit('page-change', page);
  }
};
</script>