feat: 优化articleAds

frontend/components/ArticlesList/index.vue

@@ -1,23 +1,29 @@
 <script setup lang="ts">
+import type { PropType } from 'vue'
+import type { IArticleAd } from '~~/types/IGlobal'
+const props = defineProps({
+  articleAds: {
+    type: Object as PropType<IArticleAd>,
+    required: false,
+  },
+})
 const route = useRoute()
-let pagenum = 1
+let pageNum = 1
 const isLoading = useState('isLoading', () => false)
 const isEmpty = useState('isEmpty', () => false)
 const artlistData = useArtlist(await useFetchPostData())
 const addArtListItem = () => {
   if (useScrollBottom()) {
-    pagenum++
-    useFetchPostData(route.path, route.query?.sort, pagenum).then((data) => {
+    pageNum++
+    useFetchPostData(route.params?.type as string, route.query?.sort, pageNum, route.params?.tag as string).then((data) => {
       artlistData.value.push(...data)
     })
   }
 }
-const { data } = await useFetch('/api/global')
-const articleAds = data.value.articleAds
 watch(route, () => {
-  pagenum = 1
+  pageNum = 1
   isLoading.value = true
-  useFetchPostData(route.path, route.query?.sort).then((data) => {
+  useFetchPostData(route.params?.type as string, route.query?.sort, pageNum, route.params?.tag as string).then((data) => {
     if (!data.length) {
       isEmpty.value = true
       return
@@ -45,11 +51,11 @@ onUnmounted(() => {
     <ArticlesListUiSkeleton v-if="isLoading || isEmpty" />
     <ul v-else>
       <ArticlesListItemAds
-        :title="articleAds.title"
-        :author="articleAds.author"
-        :summary="articleAds.summary"
-        :cover="articleAds.cover"
-        :url="articleAds.url"
+        :title="articleAds?.title"
+        :author="articleAds?.author"
+        :summary="articleAds?.summary"
+        :cover="articleAds?.cover"
+        :url="articleAds?.url"
       />
       <ArticlesListItem
         v-for="item in artlistData"

frontend/components/Aside/index.vue

@@ -1,16 +1,23 @@
-<script setup>
-const { data: GlobalData } = await useFetch('/api/global')
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import type { IGlobal } from '~~/types/IGlobal'
+const props = defineProps({
+  globalData: {
+    type: Object as PropType<IGlobal>,
+    required: true,
+  },
+})
 </script>
 
 <template>
   <div class="index-aside">
     <AsideSign class="mb-5" />
-    <AsideAdvertisements :ads="GlobalData.ads" />
-    <AsideGadgets class="mb-5" :gadgets="GlobalData.gadgets" />
+    <AsideAdvertisements :ads="globalData.ads" />
+    <AsideGadgets class="mb-5" :gadgets="globalData.gadgets" />
     <AsideAuthorList class="sidebar-block mb-5" />
-    <AsideLinkList class="mb-5" :links="GlobalData.links" />
+    <AsideLinkList class="mb-5" :links="globalData.links" />
     <!-- <AsideArticleList class="sidebar-block mb-5" /> -->
-    <AsideFooters class="mb-5" :footers="GlobalData.footers" />
+    <AsideFooters class="mb-5" :footers="globalData.footers" />
     <AsideSuspensionPanel class="fixed right-3 bottom-1" />
   </div>
 </template>

frontend/components/Main/index.vue

@@ -1,12 +1,14 @@
-<script setup></script>
+<script setup>
+const { data: GlobalData } = await useFetch('/api/global')
+</script>
 
 <template>
   <div class="container main_container">
     <div class="pt-5.17rem">
       <Types class="left-0" />
       <div class="timeline-container mt-0 relative 0.33rem">
-        <ArticlesList class="mr-21.667rem w-full mlg:w-700px" />
-        <Aside class="absolute display-none top-0 right-0 mlg:display-block" />
+        <ArticlesList class="mr-21.667rem w-full mlg:w-700px" :article-ads="GlobalData.articleAds" />
+        <Aside class="absolute display-none top-0 right-0 mlg:display-block" :global-data="GlobalData" />
       </div>
     </div>
   </div>

frontend/composables/Articlelist/useArtlistFn.ts

@@ -26,9 +26,10 @@ export const useFetchPostData = async (
   type?: string,
   sort: any = 'recommended',
   pagenum = 1,
+  tag?: string,
 ): Promise<IArticleItem[]> => {
   type = type || '/'
-  const { data } = await useFetch(`/api/articles/list?sort=${sort}&type=${type.replace('/', '')}&pageNum=${pagenum}`)
+  const { data } = await useFetch(`/api/articles/list?sort=${sort}&type=${type.replace('/', '')}&pageNum=${pagenum}&tag=${tag || ''}`)
   // 数据内容
   return data.value
 }

frontend/pages/[type]/[tag].vue

@@ -0,0 +1,14 @@
+<script setup>
+const route = useRoute()
+</script>
+
+<template>
+  <div>
+    tag
+    {{ route.params.tag }}
+  </div>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

frontend/pages/[type]/index.vue

@@ -0,0 +1,14 @@
+<script setup>
+const route = useRoute()
+</script>
+
+<template>
+  <div>
+    type
+    {{ route.params.type }}
+  </div>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

frontend/pages/index.vue

@@ -4,14 +4,7 @@
 
 <template>
   <div class="root">
-    <Suspense>
-      <Main pb-8rem />
-      <template #fallback>
-        <div op50 italic>
-          <span animate-pulse>Loading...</span>
-        </div>
-      </template>
-    </Suspense>
+    <Main pb-8rem />
   </div>
 </template>
 

frontend/server/api/articles/list.ts

@@ -54,13 +54,15 @@ export default defineEventHandler(async (event): Promise<IArticleItem[]> => {
       break
   }
   const type = query.type || ''// all、others
+  const tag = query.tag || ''// all、others
   const pageNum = query.pageNum || '1'// 1 to ∞
   const reqQuery = `query{
     articles(
       filters: { 
         and:[
           ${strategy[0]},
-          {typeId: { type: { ${type ? `eq: "${type}"` : ''} } }}
+          {typeId: { type: { ${type ? `eq: "${type}"` : ''} } }},
+          {tagIds: { tag: { ${tag ? `eq: "${tag}"` : ''} } }}
         ]
       }
       ${strategy[1]}

frontend/server/api/global/index.ts

@@ -1,39 +1,5 @@
 import { useGraphql } from '~~/utils/useGraphql'
-interface IGadget {
-  title: string
-  subscribe: string
-  qrcode: string
-  url: string
-}
-interface ILinksItem {
-  title: string
-  icon: string
-  url: string
-}
-interface IAdsItem {
-  ad: string
-  img: string
-}
-interface IFootersItem {
-  footer: string
-  url?: string
-  describe?: string
-  icon?: string
-}
-interface IArticleAd {
-  title: string
-  author: string
-  summary: string
-  cover: string
-  url: string
-}
-interface IGlobal {
-  gadgets: IGadget
-  links: ILinksItem[]
-  ads: IAdsItem[]
-  footers: IFootersItem[]
-  articleAds: IArticleAd
-}
+import type { IGlobal } from '~~/types/IGlobal'
 export default defineEventHandler(async (): Promise<IGlobal> => {
   const reqQuery = `query{
     global{

frontend/types/IGlobal.ts

@@ -0,0 +1,35 @@
+interface IGadget {
+  title: string
+  subscribe: string
+  qrcode: string
+  url: string
+}
+interface ILinksItem {
+  title: string
+  icon: string
+  url: string
+}
+interface IAdsItem {
+  ad: string
+  img: string
+}
+interface IFootersItem {
+  footer: string
+  url?: string
+  describe?: string
+  icon?: string
+}
+export interface IArticleAd {
+  title: string
+  author: string
+  summary: string
+  cover: string
+  url: string
+}
+export interface IGlobal {
+  gadgets: IGadget
+  links: ILinksItem[]
+  ads: IAdsItem[]
+  footers: IFootersItem[]
+  articleAds: IArticleAd
+}