-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
11 changed files
with
265 additions
and
72 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| <template> | ||
| <div class="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6"> | ||
| <div class="flex flex-1 justify-between sm:hidden"> | ||
| <a href="#" @click.prevent="onPageChange(currentPage - 1)" :class="[currentPage === 1 ? 'cursor-not-allowed opacity-50' : 'hover:bg-gray-50', 'relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700']" :aria-disabled="currentPage === 1"> Previous </a> | ||
| <a href="#" @click.prevent="onPageChange(currentPage + 1)" :class="[currentPage === totalPages ? 'cursor-not-allowed opacity-50' : 'hover:bg-gray-50', 'relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700']" :aria-disabled="currentPage === totalPages"> Next </a> | ||
| </div> | ||
| <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between"> | ||
| <div> | ||
| <p class="text-sm text-gray-700"> Showing <span class="font-medium">{{ startItem }}</span> to <span class="font-medium">{{ endItem }}</span> of <span class="font-medium">{{ totalItems }}</span> results </p> | ||
| </div> | ||
| <div> | ||
| <nav class="isolate inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination"> | ||
| <a href="#" @click.prevent="onPageChange(currentPage - 1)" :class="[currentPage === 1 ? 'cursor-not-allowed opacity-50' : 'hover:bg-gray-50', 'relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300']" :aria-disabled="currentPage === 1"> | ||
| <span class="sr-only">Previous</span> | ||
| <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | ||
| <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" /> | ||
| </svg> | ||
| </a> | ||
| <template v-for="page in displayedPages" :key="page"> | ||
| <a href="#" @click.prevent="onPageChange(page)" :class="[page === currentPage ? 'z-10 bg-indigo-600 text-white' : 'text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50', 'relative inline-flex items-center px-4 py-2 text-sm font-semibold focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600']"> | ||
| {{ page }} | ||
| </a> | ||
| </template> | ||
| <a href="#" @click.prevent="onPageChange(currentPage + 1)" :class="[currentPage === totalPages ? 'cursor-not-allowed opacity-50' : 'hover:bg-gray-50', 'relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300']" :aria-disabled="currentPage === totalPages"> | ||
| <span class="sr-only">Next</span> | ||
| <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | ||
| <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" /> | ||
| </svg> | ||
| </a> | ||
| </nav> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
| <script setup lang="ts"> | ||
| import { computed } from 'vue'; | ||
| const props = defineProps({ | ||
| currentPage: { type: Number, required: true }, | ||
| totalItems: { type: Number, required: true }, | ||
| perPage: { type: Number, required: true }, | ||
| }); | ||
| const emit = defineEmits(['pageChange']); | ||
| const totalPages = computed(() => Math.ceil(props.totalItems / props.perPage)); | ||
| const startItem = computed(() => ((props.currentPage - 1) * props.perPage) + 1); | ||
| const endItem = computed(() => Math.min(props.currentPage * props.perPage, props.totalItems)); | ||
| const displayedPages = computed(() => { | ||
| const range = 2; | ||
| const pages = []; | ||
| for (let i = Math.max(1, props.currentPage - range); i <= Math.min(totalPages.value, props.currentPage + range); i++) { | ||
| pages.push(i); | ||
| } | ||
| return pages; | ||
| }); | ||
| const onPageChange = (page: number) => { | ||
| if (page >= 1 && page <= totalPages.value) { | ||
| emit('pageChange', page); | ||
| } | ||
| }; | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,22 +1,41 @@ | ||
| <template> | ||
| <div> | ||
| <Timeline :blogPosts="blogPosts" /> | ||
| <RepoTimeline :blogPosts="blogPosts" :current-page="currentPage" :total-items="totalItems" :per-page="perPage" @page-change="onPageChange" /> | ||
| </div> | ||
| </template> | ||
| <script setup lang="ts"> | ||
| import { ref } from 'vue' | ||
| import { ref, watch } from 'vue' | ||
| import { useBannerContent } from '~/composables/useBannerContent' | ||
| const config = useRuntimeConfig() | ||
| const blogPosts = ref([]) | ||
| const currentPage = ref(1) | ||
| const totalItems = ref(0) | ||
| const perPage = ref(parseInt(config.public.perPageSize) || 20) | ||
| const { setBannerContent } = useBannerContent() | ||
| const fetchBlogPosts = async (page = 1) => { | ||
| const { data: fetchedData } = await useAsyncData('blogPosts', () => | ||
| $fetch(`/api/repo/${config.public.repoOwner}/${config.public.repoName}/blog-posts`, { | ||
| params: { page, perPage: perPage.value } | ||
| }) | ||
| ) | ||
| // 使用 useAsyncData 来获取数据 | ||
| const { data: fetchedBlogPosts } = await useAsyncData('blogPosts', () => $fetch('/api/blog-posts')) | ||
| blogPosts.value = fetchedData.value?.blogPosts || [] | ||
| totalItems.value = fetchedData.value?.pagination.totalItems || 0 | ||
| perPage.value = fetchedData.value?.pagination.perPage || 20 | ||
| currentPage.value = fetchedData.value?.pagination.currentPage || 1 | ||
| } | ||
| // 当数据获取完成后，更新 blogPosts | ||
| blogPosts.value = fetchedBlogPosts.value || [] | ||
| // Fetch initial data | ||
| await fetchBlogPosts() | ||
| // console.log(totalItems.value, perPage.value, currentPage.value) | ||
| // Handle page changes | ||
| const onPageChange = async (page: number) => { | ||
| await fetchBlogPosts(page) | ||
| } | ||
| // 设置 banner 内容 | ||
| setBannerContent('<h1 class="text-4xl font-extrabold text-center text-white mb-6">Welcome to My Blog</h1>') | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,28 +1,48 @@ | ||
| <template> | ||
| <div> | ||
| <RepoInfo v-if="fetchedBlogPosts && fetchedBlogPosts.repo" :repo="fetchedBlogPosts.repo" :repo-owner="route.params.repo_owner" :repo-name="route.params.repo_name" /> | ||
| <RepoTimeline :blogPosts="blogPosts" /> | ||
| <RepoInfo v-if="repoInfo" :repo="repoInfo" :repo-owner="route.params.repo_owner" :repo-name="route.params.repo_name" /> | ||
| <RepoTimeline :blogPosts="blogPosts" :current-page="currentPage" :total-items="totalItems" :per-page="perPage" @page-change="onPageChange" /> | ||
| </div> | ||
| </template> | ||
| <script setup lang="ts"> | ||
| import { ref } from 'vue' | ||
| import { ref, watch } from 'vue' | ||
| import { useBannerContent } from '~/composables/useBannerContent' | ||
| const config = useRuntimeConfig() | ||
| import { useRoute } from 'vue-router' | ||
| const route = useRoute() | ||
| const blogPosts = ref([]) | ||
| const repoInfo = ref({}) | ||
| const currentPage = ref(1) | ||
| const totalItems = ref(0) | ||
| const perPage = ref(parseInt(config.public.perPageSize) || 20) | ||
| const { setBannerContent } = useBannerContent() | ||
| console.log("path: ", `/api/repo/${route.params.repo_owner}/${route.params.repo_name}/blog-posts`) | ||
| const fetchBlogPosts = async (page = 1) => { | ||
| const { data: fetchedData } = await useAsyncData('blogPosts', () => | ||
| $fetch(`/api/repo/${route.params.repo_owner}/${route.params.repo_name}/blog-posts`, { | ||
| params: { page, perPage: perPage.value } | ||
| }) | ||
| ) | ||
| repoInfo.value = fetchedData.value?.repo || {} | ||
| blogPosts.value = fetchedData.value?.blogPosts || [] | ||
| totalItems.value = fetchedData.value?.pagination.totalItems || 0 | ||
| perPage.value = fetchedData.value?.pagination.perPage || 20 | ||
| currentPage.value = fetchedData.value?.pagination.currentPage || 1 | ||
| } | ||
| // Fetch initial data | ||
| await fetchBlogPosts() | ||
| // 使用 useAsyncData 来获取数据 | ||
| const { data: fetchedBlogPosts } = await useAsyncData('blogPosts', () => | ||
| $fetch(`/api/repo/${route.params.repo_owner}/${route.params.repo_name}/blog-posts`) | ||
| ) | ||
| // 当数据获取完成后，更新 blogPosts | ||
| blogPosts.value = fetchedBlogPosts.value?.blogPosts || [] | ||
| console.log(totalItems.value, perPage.value, currentPage.value) | ||
| // Handle page changes | ||
| const onPageChange = async (page: number) => { | ||
| await fetchBlogPosts(page) | ||
| } | ||
| // 设置 banner 内容 | ||
| setBannerContent('<h1 class="text-4xl font-extrabold text-center text-white mb-6">Welcome to My Blog</h1>') | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.