fix: watchEffect导致数据清空问题

frontend/components/Articles/Item.vue

@@ -26,7 +26,7 @@ const enteredtopicHeat: (string | number)[] = props.topicHeat.map((item) => {
     <NuxtLink class="flex-auto pl-5 truncate" :to="`/${name}`" style="flex: 1">
       <div class="flex items-center all-px-4 pr-4" style="font-size: 13px;">
         <span class="border-r-1 pl-0">{{ name }}</span>
-        <span class="text-gray-500 border-r-1">{{ duration }}前</span>
+        <span class="text-gray-500 border-r-1">{{ duration }}</span>
         <div class="flex">
           <div v-for="(tag, index) in tags" :key="index" class="al-px-0 px-0 text-gray-500 items-center flex">
             <span class="px-0 text-gray-500">{{ tag }}</span>

frontend/components/Articles/index.vue

@@ -1,31 +1,34 @@
+<!-- eslint-disable no-console -->
 <script setup lang="ts">
 const route = useRoute()
-let pagenum = 1
+let pagenum = 0
 const isLoading = useState('isLoading', () => false)
 const artlistData = useArtlist(await useFetchPostData())
+console.log('0', artlistData.value)
 const addArtListItem = () => {
   if (useScrollBottom()) {
     const timer = setTimeout(async () => {
       if (useScrollBottom()) {
         pagenum++
         const type = route.path.replace('/', '')
-        const sort = route.query?.sort as (string | undefined)
+        const sort = route.query?.sort as string | undefined
         const newArtlistData = await useFetchPostData(type, sort, pagenum)
+        console.log('new', newArtlistData)
         artlistData.value.push(...newArtlistData)
       }
       clearTimeout(timer)
     }, 1000)
   }
 }
-watchEffect(() => {
-  const type = route.path.replace('/', '')
-  const sort = route.query?.sort as (string | undefined)
+watch(route, (newRoute) => {
+  const type = newRoute.path.replace('/', '')
+  const sort = newRoute.query?.sort as string | undefined
   isLoading.value = true
   useFetchPostData(type, sort).then((data) => {
     artlistData.value = data
     isLoading.value = false
   })
-})
+}, { immediate: false, deep: true })
 onMounted(() => {
   const EmployeeWindow = window as any
   EmployeeWindow.addEventListener('scroll', addArtListItem)
@@ -42,7 +45,7 @@ onUnmounted(() => {
       <ArticlesLink />
       <UnoSelect />
     </div>
-    <ul v-if="!isLoading && artlistData">
+    <ul v-if="!isLoading">
       <ArticlesItem
         v-for="items in artlistData" :key="items.id" :name="items.name" :duration="items.duration"
         :title="items.title" :summary="items.summary" :tags="items.tagIds" :topic-heat="items.topicHeat"

frontend/composables/useFetchPostData.ts

@@ -1,25 +1,28 @@
-import type { IArticleItem } from '~~/types/IPanel'
-interface IPanel {
-  id: string
-  title: string
-  topicHeat: number[]
-  summary: string
-  cover: string
-  duration: string
-  tagIds: string[]
-  name: string
+import type { Ref } from 'vue'
+import type { IArticleItem, IPanel } from '~~/types/IPanel'
+function fixPoint(num: number) {
+  return num.toFixed(0)
 }
-export const useArtlist = (data: IPanel[]) => useState('artlist', () => [...data] as IPanel[])
-export const useArtlistPath = (path?: string | undefined) => useState('artlistPath', () => {
-  if (path === undefined)
-    return ''
-  return path
-})
-// TODO: 请求数据
-export default async (type?: string, sort = 'recommended', pagenum = 1): Promise<IPanel[]> => {
-  // 接口
-  const { data } = await useFetch(`/api/articles/list?sort=${sort}&type=${type}&pageNum=${pagenum}`)
-  const value: IPanel[] = data.value.map((item: IArticleItem) => {
+function formatTime(createdAt: string) {
+  const created = new Date(createdAt)
+  const now = new Date()
+  const duration = (now.getTime() - created.getTime()) / 1000 / 60
+  let ans = '刚刚'
+  // 年月日时分秒
+  if (duration < 60) // 一小时内
+    ans = `${fixPoint(duration)}分钟前`
+  else if (duration < 60 * 24) // 一天内
+    ans = `${fixPoint(duration / 60)}小时前`
+  else if (duration < 60 * 24 * 30) // 一个月内
+    ans = `${fixPoint(duration / 60 / 24)}天前`
+  else if (duration < 60 * 24 * 30 * 365) // 一年内
+    ans = `${fixPoint(duration / 60 / 24 / 30)}月前`
+  else // 超过一年
+    ans = `${fixPoint(duration / 60 / 24 / 30 / 365)}年前`
+  return ans
+}
+function formatArtlist(artlistData: Ref<IArticleItem[]>): IPanel[] {
+  return artlistData.value.map((item: IArticleItem) => {
     const tagIds: string[] = []
     item.tagIds.data.forEach((sub) => {
       tagIds.push(sub.tag)
@@ -30,11 +33,26 @@ export default async (type?: string, sort = 'recommended', pagenum = 1): Promise
       topicHeat: [item.viewed, item.liked, item.commented],
       summary: item.summary,
       cover: item.cover,
-      duration: item.createdAt,
+      duration: formatTime(item.createdAt),
       tagIds,
       name: item.authorId.name,
     }
   })
+}
+export const useArtlist = (data: IPanel[]) => useState('artlist', () => [...data] as IPanel[])
+export const useArtlistPath = (path?: string | undefined) => useState('artlistPath', () => {
+  if (path === undefined)
+    return ''
+  return path
+})
+// TODO: 请求数据
+export default async (type?: string, sort?: string, pagenum = 1): Promise<IPanel[]> => {
+  // 接口
+  if (type === undefined)
+    type = ''
+  if (sort === undefined)
+    sort = 'recommended'
+  const { data } = await useFetch(`/api/articles/list?sort=${sort}&type=${type}&pageNum=${pagenum}`)
   // 数据内容
-  return value
+  return formatArtlist(data)
 }

frontend/types/IPanel.ts

@@ -18,6 +18,17 @@ interface IArticleItem {
   authorId: IAuthor
   tagIds: { data: ITagItem[] }
 }
+interface IPanel {
+  id: string
+  title: string
+  topicHeat: number[]
+  summary: string
+  cover: string
+  duration: string
+  tagIds: string[]
+  name: string
+}
 export {
   IArticleItem,
+  IPanel,
 }