feat: 文章列表组件抽离

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/Link.vue

@@ -0,0 +1,15 @@
+<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>

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,67 @@
+<script setup lang="ts">
+import type { IArticleItem } from '~~/types/IArticleItem'
+defineProps({
+  artlistItem: {
+    type: Array<IArticleItem>,
+  },
+  artlistAd: {
+    type: Object,
+    required: true,
+  },
+})
+</script>
+
+<template>
+  <li>
+    <ArticlesListItemsLink :url="artlistAd.url">
+      <ArticlesListItemsTopbar
+        :name="artlistAd.author"
+      />
+      <ArticlesListItemsMainbar
+        :title="artlistAd.title"
+        :summary="artlistAd.summary"
+      />
+    </ArticlesListItemsLink>
+  </li>
+  <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>
+    <div class="px-[1.67rem]">
+      <nuxt-img
+        v-if="artItem.cover"
+        :src="artItem.cover"
+        :alt="artItem.summary"
+        width="120"
+        height="80"
+        loading="lazy"
+        fit="cover"
+        quality="80"
+        format="webp"
+      />
+    </div>
+  </li>
+</template>
+
+<style scoped>
+  a:visited .title {
+    color: #909090;
+  }
+</style>

frontend/components/ArticlesList/index.vue

@@ -4,6 +4,7 @@ let pagenum = 1
 const isLoading = useState('isLoading', () => false)
 const isEmpty = useState('isEmpty', () => false)
 const artlistData = useArtlist([])
+const artlistAd = await useFetchArtlistAd()
 const addArtListItem = () => {
   if (useScrollBottom()) {
     pagenum++
@@ -42,7 +43,7 @@ onUnmounted(() => {
   <div class="bg-white pb-5 box-border w-full">
     <ArticlesListNavigation />
     <ul v-if="!isLoading && !isEmpty">
-      <ArticlesListItem :artlist-item="artlistData" />
+      <ArticlesListItems :artlist-item="artlistData" :artlist-ad="artlistAd" />
     </ul>
     <ArticlesListSkeleton v-else />
   </div>

frontend/composables/Articlelist/useArtlistFn.ts

@@ -1,4 +1,4 @@
-import type { IArticleItem } from '~~/types/IArticleItem'
+import type { IArticleAd, IArticleItem } from '~~/types/IArticleItem'
 export const formatTime = (createdAt: string): string => {
   const created = new Date(createdAt)
   const now = new Date()
@@ -22,6 +22,10 @@ export const useArtlistPath = (path?: string | undefined) => useState('artlistPa
     return ''
   return path
 })
+export const useFetchArtlistAd = async (): Promise<IArticleAd> => {
+  const { data } = await useFetch('/api/global')
+  return data.value
+}
 export const useFetchPostData = async (
   type?: string,
   sort: any = 'recommended',

frontend/types/IArticleItem.ts

@@ -1,11 +1,9 @@
 interface IAuthor {
   name: string
 }
-
 interface ITagItem {
   tag: string
 }
-
 interface IArticleItem {
   id: string
   title: string
@@ -17,8 +15,16 @@ interface IArticleItem {
   createdAt: string
   authorId: IAuthor
   tagIds: { data: ITagItem[] }
-  error?: boolean
+}
+interface IArticleAd {
+  title: string
+  author: string
+  summary: string
+  cover: string
+  url: string
 }
 export {
   IArticleItem,
+  IArticleAd,
+  ITagItem,
 }