feat: 二级标签栏

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-05T11:17:44.025Z"
+    "x-generation-date": "2023-02-06T04:11:28.579Z"
   },
   "x-strapi-config": {
     "path": "/documentation",

frontend/assets/css/main.css

@@ -313,3 +313,14 @@ html.dark{
 .medium-zoom-overlay {
   z-index: 10000;
 }
+
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}

frontend/components/ArticlesList/Item/index.vue

@@ -29,7 +29,7 @@ const hideHandler = () => {
 
 <template>
   <li :id="`artlist_${uid}`" class="list_container">
-    <ArticlesListItemLink :to="`article/${uid}`">
+    <ArticlesListItemLink :to="`/article/${uid}`">
       <div class="left">
         <ArticlesListItemBarTop
           :author-id="authorId"

frontend/components/ArticlesList/Navigation/Link.vue

@@ -5,7 +5,7 @@ const artlistPath = useArtlistPath()
 <template>
   <div class="link">
     <NuxtLink
-      :to="`${artlistPath === '' ? '/' : artlistPath}`"
+      :to="`${artlistPath}?`"
       :class="`${
         $route.query.sort ? 'text-gray-500' : 'text-link'
       } br text_style pl-0`"

frontend/components/ArticlesList/index.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 const route = useRoute()
+const routeData = usePath(route)
 let pageNum = 1
 const isLoading = useState('isLoading', () => false)
 const isEmpty = useState('isEmpty', () => false)
-const artlistData = ref(await useFetchPostData(route.params?.type as string, route.query?.sort, pageNum, route.params?.tag as string))
+const artlistData = ref(await useFetchPostData(routeData.type as string, route.query?.sort, pageNum, routeData.tag as string))
 const addArtListItem = () => {
   if (useScrollBottom()) {
     pageNum++
-    useFetchPostData(route.params?.type as string, route.query?.sort, pageNum, route.params?.tag as string).then((data) => {
+    useFetchPostData(routeData.type as string, route.query?.sort, pageNum, routeData.tag as string).then((data) => {
       artlistData.value.push(...data)
     })
   }
@@ -16,7 +17,9 @@ const { data: articleAds } = await useFetch('/api/global/ad')
 watch(() => route, () => {
   pageNum = 1
   isLoading.value = true
-  useFetchPostData(route.params?.type as string, route.query?.sort, pageNum, route.params?.tag as string).then((data) => {
+  const route = useRoute()
+  const routeData = usePath(route)
+  useFetchPostData(routeData.type as string, route.query?.sort, pageNum, routeData.tag as string).then((data) => {
     if (!data.length) {
       isEmpty.value = true
       return

frontend/components/Main/index.vue

@@ -5,6 +5,7 @@
   <div class="container main-container">
     <div class="pt-5.17rem">
       <Types class="left-0" />
+      <TypesTagNav />
       <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" />

frontend/components/Types/TagNav.vue

@@ -0,0 +1,83 @@
+<script setup>
+const routeData = usePath(useRoute())
+const { data: tagList } = await useFetch(`/api/global/tags?type=${routeData.type}`)
+const isFold = useFold(false)
+const maxLength = 9
+</script>
+
+<template>
+  <Transition name="fade">
+    <nav v-if="tagList.length > 0" class="tag-nav tag-navigator">
+      <ul class="nav-list tag-list">
+        <li class="nav-items tag active">
+          <NuxtLink :to="`/${routeData.type}`" class="nav-item">
+            综合
+          </NuxtLink>
+        </li>
+        <li v-for="(item, index) in tagList" :key="item.id" class="nav-items tag " :class="{ '!hidden': (index >= maxLength && !isFold) }">
+          <NuxtLink :to="`/${routeData.type}/${item.tag}`" class="nav-item">
+            {{ item.alias }}
+          </NuxtLink>
+        </li>
+        <li v-if="!isFold && tagList.length > maxLength" class="nav-items tag unfold" @click="isFold = true">
+          展开
+        </li>
+      </ul>
+    </nav>
+  </Transition>
+</template>
+
+<style scoped>
+.tag-list {
+    display: flex;
+    flex-wrap: wrap;
+    height: auto;
+}
+.nav-list {
+    position: relative;
+}
+.nav-list .nav-items.tag:has(.router-link-exact-active) {
+    background-color: #007fff;
+    color: #fff;
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%), 0 1px 2px 0 rgb(0 0 0 / 5%);
+}
+.nav-list .nav-items.tag {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 2rem;
+    background-color: #fff;
+    border-radius: 1rem;
+    font-size: 1.1rem;
+    color: #8a9aa9;
+    padding: 0 .83rem;
+    margin-right: 1rem;
+    margin-bottom: 1rem;
+}
+.nav-items {
+    position: relative;
+    cursor: pointer;
+}
+.nav-item.router-link-exact-active {
+    color: #fff;
+}
+.nav-item {
+    text-decoration: none;
+    cursor: pointer;
+    color: #909090;
+}
+.nav-list .nav-items.unfold {
+    padding-right: 2rem;
+}
+.nav-list .nav-items.unfold:after {
+    position: absolute;
+    right: 8px;
+    bottom: 35%;
+    content: "";
+    height: 5px;
+    width: 0;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 5px solid #8a9aa9;
+}
+</style>

frontend/components/Types/index.vue

@@ -1,4 +1,5 @@
 <script setup>
+const routeData = usePath(useRoute())
 const runtimeConfig = useRuntimeConfig()
 const { data: typeList } = await useFetch('/api/global/types')
 const isNavShown = inject('isNavShown')
@@ -11,7 +12,7 @@ const isNavShown = inject('isNavShown')
         综合
       </NuxtLink>
       <div v-for="item in typeList" :key="item.type" class="list-item-wrapper">
-        <NuxtLink class="type-list-item" :to="`/${item.type}`">
+        <NuxtLink class="type-list-item" :to="`/${item.type}`" :class="{ 'router-link-exact-active': routeData.type === item.type }">
           {{ item.alias }}
         </NuxtLink>
         <div v-if="item.tags.data.length > 0" class="category-popover">
@@ -89,7 +90,7 @@ const isNavShown = inject('isNavShown')
   @apply scale-100;
 }
 .category-popover {
-  @apply scale-0 delay-150;
+  @apply scale-0 transition-100 delay-150 transition-all;
   position: fixed;
   top: 3.833rem;
   padding: 1.17rem 1.17rem .17rem;
@@ -121,4 +122,7 @@ const isNavShown = inject('isNavShown')
     margin-right: 1rem;
     margin-bottom: 1rem;
 }
+.tag:hover{
+  @apply text-link;
+}
 </style>

frontend/composables/Articlelist/useArtlistFn.ts

@@ -22,6 +22,35 @@ export const useArtlistPath = (path?: string | undefined) => useState('artlistPa
     return ''
   return path
 })
+export const usePath = (route?: any): any => {
+  if (!('all' in route.params)) {
+    return {
+      type: '',
+      tag: '',
+    }
+  }
+  if (route.params?.all.length === 2) {
+    return {
+      type: route.params.all[0],
+      tag: route.params.all[1],
+    }
+  }
+
+  if (route.params?.all.length === 1) {
+    return {
+      type: route.params.all[0],
+      tag: '',
+    }
+  }
+
+  if (route.params?.all.length === 0) {
+    return {
+      type: '',
+      tag: '',
+    }
+  }
+}
+
 export const useFetchPostData = async (
   type?: string,
   sort: any = 'recommended',

frontend/composables/useFold.ts

@@ -0,0 +1 @@
+export const useFold = (data: boolean) => useState('unfold', () => data)

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

@@ -1,5 +1,5 @@
 <script setup>
-
+const route = useRoute()
 </script>
 
 <template>

frontend/server/api/global/tags.ts

@@ -0,0 +1,24 @@
+import { useGraphql } from '~~/utils/useGraphql'
+import type { ITagItem } from '~~/types/IType'
+
+export default defineEventHandler(async (event): Promise<ITagItem[]> => {
+  const query = getQuery(event)
+  const type = query.type || ''// all、others
+  const reqQuery = `query {
+    tags(
+          filters:{
+            type: {type:{eq:"${type}"}}
+          }
+        ) {
+      data {
+        id
+        attributes {
+          tag
+          alias
+        }
+      }
+    }
+  }
+  `
+  return (await useGraphql(reqQuery)).tags.data
+})