Merge pull request #308 from MarleneJiang/issue-299-文章列表的小bug

fix: 页面刷新请求问题

frontend/components/ArticlesList/Item/index.vue

@@ -4,6 +4,23 @@ import type { Ref } from 'vue'
 import type { IArticleItem } from '~~/types/IArticleItem'
 const artlist = inject<Ref<IArticleItem[]>>('artlist')
 const [parent] = useAutoAnimate()
+const formatTime = (createdAt: string): string => {
+  const created = new Date(createdAt)
+  const now = new Date()
+  const duration = (now.getTime() - created.getTime()) / 1000 / 60
+  let ans = '刚刚'
+  if (duration > 0 && duration < 60) // 一小时内
+    ans = `${(duration).toFixed(0)}分钟前`
+  else if (duration < 60 * 24) // 一天内
+    ans = `${(duration / 60).toFixed(0)}小时前`
+  else if (duration < 60 * 24 * 30) // 一个月内
+    ans = `${(duration / 60 / 24).toFixed(0)}天前`
+  else if (duration < 60 * 24 * 30 * 365) // 一年内
+    ans = `${(duration / 60 / 24 / 30).toFixed(0)}月前`
+  else if (duration >= 60 * 24 * 30 * 365) // 超过一年
+    ans = `${(duration / 60 / 24 / 30 / 365).toFixed(0)}年前`
+  return ans
+}
 const hideHandler = (id: string) => {
   artlist && (artlist.value = artlist.value.filter(item => item.id !== id))
 }

frontend/components/ArticlesList/index.vue

@@ -1,20 +1,22 @@
 <script setup lang="ts">
 import type { IArticleItem } from '~~/types/IArticleItem'
-const artlist = useState<IArticleItem[]>('artlist', () => [])
 const { data: articleAds } = (await useFetch('/api/global/ad'))
-const isLoading = useState('isLoading', () => false)
 const route = useRoute()
 let pagenum = 1
+const { data: artlist, pending } = await useFetch<IArticleItem[]>(() => `/api/articles/list?sort=${route.query?.sort || 'recommended'}&type=${route?.params?.type || ''}&pageNum=1&tag=${route?.params?.tag || ''}`)
 const addArtListItem = useThrottle(async () => {
-  useScrollBottom() && artlist.value?.length && artlist.value.push(...(await useFetchPostData(route?.params, route.query?.sort, ++pagenum)))
+  if (useScrollBottom() && artlist.value != null) {
+    const { data } = await useFetch<IArticleItem[]>(`/api/articles/list?sort=${route.query?.sort || 'recommended'}&type=${route?.params?.type || ''}&pageNum=${++pagenum}&tag=${route?.params?.tag || ''}`)
+    if (!data.value)
+      return
+    artlist.value.push(...data.value)
+  }
 })
+watch(route, () => {
+  pagenum = 1
+}, { immediate: true, deep: true })
 provide('artlist', artlist)
 provide('ads', articleAds)
-watch([() => route.query, () => route.params], async () => {
-  isLoading.value = true
-  artlist.value = await useFetchPostData(route?.params, route.query?.sort, pagenum = 1)
-  isLoading.value = false
-}, { deep: true, immediate: true })
 onMounted(() => {
   (window as any).addEventListener('scroll', addArtListItem)
 })
@@ -26,11 +28,11 @@ onUnmounted(() => {
 <template>
   <div class="bg-jj-article">
     <ArticlesListNavigation />
-    <ClientOnly>
+    <ClientOnly fallback-tag="span">
       <template #fallback>
         <ArticlesListUiSkeleton />
       </template>
-      <ArticlesListUiSkeleton v-if="isLoading || !artlist?.length" />
+      <ArticlesListUiSkeleton v-if="pending || !artlist?.length" />
       <ArticlesListItem v-else />
     </ClientOnly>
   </div>

frontend/nuxt.config.ts

@@ -66,6 +66,11 @@ export default defineNuxtConfig({
       crawlLinks: true,
       routes: [
         '/',
+        '/?sort=newest',
+        '/?sort=three_days_hottest',
+        '/?sort=weekly_hottest',
+        '/?sort=monthly_hottest',
+        '/?sort=hottest',
       ],
     },
   },