From ee95c79ab7c76f5984fc534abd56ac236f5c283d Mon Sep 17 00:00:00 2001
From: Plumbiu <99574369+Plumbiu@users.noreply.github.com>
Date: Sun, 5 Feb 2023 18:23:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=AE=80=E5=8C=96=E4=BA=86=E4=B8=80?=
 =?UTF-8?q?=E4=BA=9B=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../1.0.0/full_documentation.json             |  2 +-
 frontend/components/ArticlesList/Item/Ads.vue |  2 +-
 .../ArticlesList/Item/AuthorInfo/index.vue    | 12 +--
 .../ArticlesList/Item/Bar/Bottom.vue          | 10 +--
 .../ArticlesList/Item/Bar/Center.vue          |  8 +-
 .../components/ArticlesList/Item/index.vue    |  6 +-
 frontend/components/ArticlesList/index.vue    | 76 +++++++------------
 7 files changed, 46 insertions(+), 70 deletions(-)

diff --git a/backend/src/extensions/documentation/documentation/1.0.0/full_documentation.json b/backend/src/extensions/documentation/documentation/1.0.0/full_documentation.json
index 9ad7384..8ddc5f2 100644
--- a/backend/src/extensions/documentation/documentation/1.0.0/full_documentation.json
+++ b/backend/src/extensions/documentation/documentation/1.0.0/full_documentation.json
@@ -14,7 +14,7 @@
       "name": "Apache 2.0",
       "url": "https://www.apache.org/licenses/LICENSE-2.0.html"
     },
-    "x-generation-date": "2023-02-04T15:12:10.808Z"
+    "x-generation-date": "2023-02-05T09:35:18.646Z"
   },
   "x-strapi-config": {
     "path": "/documentation",
diff --git a/frontend/components/ArticlesList/Item/Ads.vue b/frontend/components/ArticlesList/Item/Ads.vue
index bee75e2..64240bf 100644
--- a/frontend/components/ArticlesList/Item/Ads.vue
+++ b/frontend/components/ArticlesList/Item/Ads.vue
@@ -11,7 +11,7 @@ defineProps({
 <template>
   <li>
     <ArticlesListItemLink :to="url">
-      <div class="flex-1">
+      <div class="overflow-hidden flex-1">
         <ArticlesListItemBarTop
           :name="author"
           duration="2天前"
diff --git a/frontend/components/ArticlesList/Item/AuthorInfo/index.vue b/frontend/components/ArticlesList/Item/AuthorInfo/index.vue
index ef0cb5d..ae625c3 100644
--- a/frontend/components/ArticlesList/Item/AuthorInfo/index.vue
+++ b/frontend/components/ArticlesList/Item/AuthorInfo/index.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-defineProps({
-  name: String,
-  motto: String,
-  avatar: String,
-  rank: Number,
-})
+defineProps<{
+  name: string
+  motto: string
+  avatar: string
+  rank: number
+}>()
 </script>
 
 <template>
diff --git a/frontend/components/ArticlesList/Item/Bar/Bottom.vue b/frontend/components/ArticlesList/Item/Bar/Bottom.vue
index 2485f13..6f24e41 100644
--- a/frontend/components/ArticlesList/Item/Bar/Bottom.vue
+++ b/frontend/components/ArticlesList/Item/Bar/Bottom.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-defineProps({
-  viewed: Number,
-  liked: Number,
-  commented: Number,
-})
+defineProps<{
+  viewed: number
+  liked: number
+  commented: number
+}>()
 const format = (num: number) => {
   return num > 10000 ? `${(num / 10000).toFixed(1)}w` : num
 }
diff --git a/frontend/components/ArticlesList/Item/Bar/Center.vue b/frontend/components/ArticlesList/Item/Bar/Center.vue
index dd11991..2b14a36 100644
--- a/frontend/components/ArticlesList/Item/Bar/Center.vue
+++ b/frontend/components/ArticlesList/Item/Bar/Center.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-defineProps({
-  title: String,
-  summary: String,
-})
+defineProps<{
+  title: string
+  summary: string
+}>()
 </script>
 
 <template>
diff --git a/frontend/components/ArticlesList/Item/index.vue b/frontend/components/ArticlesList/Item/index.vue
index 8f131e9..09b9bda 100644
--- a/frontend/components/ArticlesList/Item/index.vue
+++ b/frontend/components/ArticlesList/Item/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ITagItem } from '~~/types/IArticleItem'
+import type { ITagItem } from '~~/types/IArticleItem'
 const { uid } = defineProps({
   uid: String,
   title: String,
@@ -16,7 +16,7 @@ const { uid } = defineProps({
     type: Object,
     required: true,
   },
-  tags: Array,
+  tags: Array<ITagItem>,
   index: Number,
 })
 const hideHandler = () => {
@@ -34,7 +34,7 @@ const hideHandler = () => {
         <ArticlesListItemBarTop
           :author-id="authorId"
           :duration="formatTime(createdAt)"
-          :tags="tags as ITagItem[]"
+          :tags="tags"
         />
         <ArticlesListItemBarCenter :title="title" :summary="summary" />
         <ArticlesListItemBarBottom :viewed="viewed" :liked="liked" :commented="commented" />
diff --git a/frontend/components/ArticlesList/index.vue b/frontend/components/ArticlesList/index.vue
index 76fa408..f5c628a 100644
--- a/frontend/components/ArticlesList/index.vue
+++ b/frontend/components/ArticlesList/index.vue
@@ -1,67 +1,43 @@
 <script setup lang="ts">
-const artlistData = useArtlist(await useFetchPostData())
-const { data } = await useFetch('/api/global')
+const articleList = useArtlist(await useFetchPostData())
+const articleAds = (await useFetch('/api/global')).data.value.articleAds
+const isLoading = useState('isLoading', () => true)
 const route = useRoute()
 let pagenum = 1
-const isLoading = useState('isLoading', () => false)
-const isEmpty = useState('isEmpty', () => false)
-const articleAds = data.value.articleAds
-const addArtListItem = async () => {
-  if (useScrollBottom()) {
-    const artlistVal = await useFetchPostData(route.path, route.query?.sort, pagenum++)
-    artlistData.value.push(...artlistVal)
-  }
-}
-
-const bottomHandler = useThrottle(addArtListItem)
+const addArtListItem = useThrottle(async () => {
+  useScrollBottom() && articleList.value.push(...(await useFetchPostData(route.path, route.query?.sort, ++pagenum)))
+})
 watch(route, async () => {
-  pagenum = 1
-  isLoading.value = true
-  const artlistVal = await useFetchPostData(route.path, route.query?.sort)
-  if (!artlistVal?.length) {
-    isEmpty.value = true
-    return
-  }
-  artlistData.value = artlistVal
-  isLoading.value = false
-  isEmpty.value = false
+  articleList.value = []
+  articleList.value = await useFetchPostData(route.path, route.query?.sort, pagenum = 1)
 }, { deep: true })
-onBeforeMount(() => {
-  const EmployeeWindow = window as any
-  EmployeeWindow.addEventListener('scroll', bottomHandler)
+onMounted(() => {
+  (window as any).addEventListener('scroll', addArtListItem)
+  isLoading.value = false
 })
 onUnmounted(() => {
-  const EmployeeWindow = window as any
-  EmployeeWindow.removeEventListener('scroll', bottomHandler)
+  (window as any).removeEventListener('scroll', addArtListItem)
 })
 </script>
 
 <template>
   <div class="articlelist">
     <ArticlesListNavigation />
-    <ArticlesListUiSkeleton v-if="isEmpty || isLoading" />
+    <ArticlesListUiSkeleton v-if="isLoading || !articleList.length" />
     <ul v-else>
-      <ArticlesListItemAds
-        :title="articleAds.title"
-        :author="articleAds.author"
-        :summary="articleAds.summary"
-        :cover="articleAds.cover"
-        :url="articleAds.url"
-      />
-      <ArticlesListItem
-        v-for="item in artlistData"
-        :key="item.id"
-        :uid="item.id"
-        :title="item.title"
-        :viewed="item.viewed"
-        :liked="item.liked"
-        :commented="item.commented"
-        :summary="item.summary"
-        :cover="item.cover"
-        :created-at="item.createdAt"
-        :author-id="item.authorId"
-        :tags="item.tagIds.data"
-      />
+      <ClientOnly>
+        <ArticlesListItemAds
+          :title="articleAds.title" :author="articleAds.author"
+          :summary="articleAds.summary" :cover="articleAds.cover" :url="articleAds.url"
+        />
+        <ArticlesListItem
+          v-for="item in articleList"
+          :key="item.id" :uid="item.id" :title="item.title"
+          :viewed="item.viewed" :liked="item.liked" :commented="item.commented"
+          :summary="item.summary" :cover="item.cover" :created-at="item.createdAt"
+          :author-id="item.authorId" :tags="item.tagIds.data"
+        />
+      </ClientOnly>
     </ul>
   </div>
 </template>