Merge pull request #121 from MarleneJiang/issue-54-新增文章列表

Issue 54 新增文章列表

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-01-29T14:18:54.098Z"
+    "x-generation-date": "2023-01-31T10:23:40.257Z"
   },
   "x-strapi-config": {
     "path": "/documentation",

frontend/app.vue

@@ -57,11 +57,13 @@ body,
   height: 100vh;
   margin: 0;
   padding: 0;
-  background-color: #f4f5f5;
 }
 
 html.dark {
   background: #18181c;
   color: white;
 }
+html.light {
+  background-color: #F4F5F5;
+}
 </style>

frontend/assets/css/main.css

@@ -81,16 +81,15 @@
   --jjext-color-bg-gray:#27272a;
 }
 
-
 .page-enter-active,
 .page-leave-active {
-	transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
 }
 
 .page-enter-from,
 .page-leave-to {
-	opacity: 0;
-	transform: scale(0.99);
+  opacity: 0;
+  transform: scale(0.99);
 }
 
 .medium-zoom-image,

frontend/components/ArticlesList/Items/Bottombar.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+defineProps({
+  viewed: Number,
+  liked: Number,
+  commented: Number,
+})
+const format = (num: number) => {
+  return num > 10000 ? `${(num / 10000).toFixed(1)}w` : num
+}
+</script>
+
+<template>
+  <div class="flex all-flex all-items-center all-text-jj_sec_app all-text-[13px]">
+    <div>
+      <div class="i-carbon-view" />
+      <span class="pl-2">{{ viewed ? format(viewed) : '观看' }}</span>
+    </div>
+    <div class="mx-7">
+      <div class="i-carbon-thumbs-up" />
+      <span class="pl-2">{{ liked ? format(liked) : '点赞' }}</span>
+    </div>
+    <div>
+      <div class="i-carbon-chat" />
+      <span class="pl-2">{{ commented ? format(commented) : '评论' }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

frontend/components/ArticlesList/Items/Img.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+defineProps({
+  cover: String,
+  summary: String,
+})
+</script>
+
+<template>
+  <div class="px-[1.67rem]">
+    <nuxt-img
+      v-if="cover"
+      :src="cover"
+      :alt="summary"
+      width="120"
+      height="80"
+      loading="lazy"
+      fit="cover"
+      quality="80"
+      format="webp"
+    />
+  </div>
+</template>
+
+<style scoped></style>

frontend/components/ArticlesList/Items/Link.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+defineProps({
+  id: String,
+  url: String,
+})
+</script>
+
+<template>
+  <NuxtLink v-if="id" class="flex-1 pl-[1.67rem] truncate" :to="`/article/${id}`">
+    <slot />
+  </NuxtLink>
+  <NuxtLink v-if="url" class="flex-1 pl-[1.67rem] truncate" :to="`/article/${url}`">
+    <slot />
+  </NuxtLink>
+</template>
+
+<style scoped>
+  a:visited {
+    color: #909090;
+  }
+</style>

frontend/components/ArticlesList/Items/Mainbar.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+defineProps({
+  title: String,
+  summary: String,
+})
+</script>
+
+<template>
+  <div class="py-4">
+    <div class="truncate text-jj_sec-app text-[16px] title font-semibold tracking-wide">
+      {{ title }}
+    </div>
+    <div class="truncate pt-4 text-jj_thirdly text-[13px]">
+      {{ summary }}
+    </div>
+  </div>
+</template>

frontend/components/ArticlesList/Items/Topbar.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { ITagItem } from '~~/types/IArticleItem'
+defineProps({
+  name: String,
+  duration: String,
+  tags: {
+    type: Array<ITagItem>,
+    required: true,
+  },
+})
+</script>
+
+<template>
+  <div class="flex items-center pr-4 text-[13px]">
+    <span class="text-jj_sec-app px-3 border-r-1 pl-0">{{ name }}</span>
+    <span class="text-jj_thirdly px-3 border-r-1">{{ duration }}</span>
+    <div class="flex px-3">
+      <div v-for="(item, index) of tags" :key="item.tag" class="items-center flex">
+        <span class="px-0 text-jj_thirdly">{{ item.tag }}</span>
+        <div v-if="index !== tags.length - 1" class="i-carbon-circle-solid px-2 text-[0.15rem]" />
+      </div>
+    </div>
+  </div>
+</template>

frontend/components/ArticlesList/Items/index.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { IArticleItem } from '~~/types/IArticleItem'
+defineProps({
+  artlistItem: {
+    type: Array<IArticleItem>,
+  },
+})
+</script>
+
+<template>
+  <li
+    v-for="artItem in artlistItem"
+    :key="artItem.id"
+    class="f-c-c py-4 transition-all hover:bg-[#FAFAFA] b-b b-grey all-cursor-pointer"
+  >
+    <ArticlesListItemsLink :id="artItem.id">
+      <ArticlesListItemsTopbar
+        :name="artItem.authorId.name"
+        :duration="formatTime(artItem.createdAt)"
+        :tags="artItem.tagIds.data"
+      />
+      <ArticlesListItemsMainbar
+        :title="artItem.title"
+        :summary="artItem.summary"
+      />
+      <ArticlesListItemsBottombar
+        :viewed="artItem.viewed"
+        :liked="artItem.liked"
+        :commented="artItem.commented"
+      />
+    </ArticlesListItemsLink>
+    <ArticlesListItemsImg
+      :cover="artItem.cover"
+      :summary="artItem.summary"
+    />
+  </li>
+</template>

frontend/components/ArticlesList/Navigation/Link.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 const artlistPath = useArtlistPath()
 const atrtlistData = useArtlist([])
+const pagenum = usePagenum()
 const initArtlistData = () => {
   atrtlistData.value = []
+  pagenum.value = 1
 }
 </script>
 

frontend/components/ArticlesList/Navigation/Select.vue

@@ -1,8 +1,15 @@
 <script setup lang="ts">
+const route = useRoute()
 const isShow = useState<boolean>('isShow', () => false)
 const iptValue = useState<string>('iptValue', () => '3天内')
 const artlistPath = useArtlistPath()
 const artlistData = useArtlist([])
+const routeMap = {
+  three_days_hottest: '3天内',
+  weekly_hottest: '7天内',
+  monthly_hottest: '30天内',
+  hottest: '全部',
+}
 const iptValueHandler = (time: string) => {
   artlistData.value = []
   isShow.value = false
@@ -11,10 +18,10 @@ const iptValueHandler = (time: string) => {
 </script>
 
 <template>
-  <div v-if="$route.query.sort && $route.query.sort?.indexOf('hottest') !== -1" class="dorp-down-area">
+  <div v-if="route.query.sort && route.query.sort?.indexOf('hottest') !== -1" class="dorp-down-area">
     <div class="drop-down">
       <div class="dropdown-toggle flex items-center justify-between" @click="isShow = !isShow">
-        {{ iptValue }}
+        {{ routeMap[route.query.sort as string] }}
         <div class="text-[#b2bac2]" i-carbon:caret-up :class="!isShow ? 'toggled' : ''" style="transition: all 0.5s" />
       </div>
       <ul v-if="isShow" class="dropdown-menu">

frontend/components/ArticlesList/Navigation/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex text-[1.17rem] pl-[1.67rem] bg-[var(--jjext-color-secondary-bg)] border-b-1">
+  <div class="flex text-[1.17rem] pl-[1.67rem] border-b-1">
     <ArticlesListNavigationLink />
     <ArticlesListNavigationSelect />
   </div>

frontend/components/ArticlesList/index.vue

@@ -1,20 +1,19 @@
 <script setup lang="ts">
 const route = useRoute()
-let pagenum = 1
+const pagenum = usePagenum()
 const isLoading = useState('isLoading', () => false)
 const isEmpty = useState('isEmpty', () => false)
 const artlistData = useArtlist([])
 const addArtListItem = () => {
   if (useScrollBottom()) {
-    pagenum++
-    useFetchPostData(route.path, route.query?.sort, pagenum).then((data) => {
+    pagenum.value++
+    useFetchPostData(route.path, route.query?.sort, pagenum.value).then((data) => {
       artlistData.value.push(...data)
     })
   }
 }
 
 watchEffect(() => {
-  pagenum = 1
   if (!artlistData.value.length) {
     isLoading.value = true
     useFetchPostData(route.path, route.query?.sort).then((data) => {
@@ -39,12 +38,11 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="pb-5 box-border w-full">
+  <div class="bg-white pb-5 box-border w-full">
     <ArticlesListNavigation />
     <ul v-if="!isLoading && !isEmpty">
-      <ArticlesListItem :artlist-item="artlistData" />
+      <ArticlesListItems :artlist-item="artlistData" />
     </ul>
-    <ArticlesListEmpty v-else-if="isEmpty" />
     <ArticlesListSkeleton v-else />
   </div>
 </template>

frontend/components/Main/index.vue

@@ -7,7 +7,7 @@
     <div class="mt-5.17rem ">
       <Types class="left-0" />
       <div class="timeline-container mt-0 relative 0.33rem">
-        <ArticlesList class="mr-21.667rem border-r-2 w-full bg-white lg:w-700px" />
+        <ArticlesList class="mr-21.667rem w-full lg:w-700px" />
         <Aside class="absolute display-none top-0 right-0 lg:display-block" />
       </div>
     </div>

frontend/composables/Articlelist/useArtlistFn.ts

@@ -22,6 +22,7 @@ export const useArtlistPath = (path?: string | undefined) => useState('artlistPa
     return ''
   return path
 })
+export const usePagenum = () => useState('pagenum', () => 1)
 export const useFetchPostData = async (
   type?: string,
   sort: any = 'recommended',