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-14T02:56:16.362Z"
+    "x-generation-date": "2023-02-14T11:13:49.950Z"
   },
   "x-strapi-config": {
     "path": "/documentation",

frontend/assets/css/main.css

@@ -101,7 +101,7 @@
   --juejin-color-types-list-tag: #8a9aa9;
 }
 
-html.light {
+html {
   --juejin-layer-golden-1: #faf3e5;
   --juejin-layer-golden-2: #f6e7cb;
   --juejin-component-hover: #e4e6eb;

frontend/components/Aside/Footers.vue

@@ -12,7 +12,7 @@ defineProps({
     <ul class="more-list">
       <li v-for="i in footers" :key="i" class="item">
         <span>{{ i.describe }}</span>
-        <NuxtLink v-if="i.footer " :to="i.url" target="_blank" rel="nofollow">
+        <NuxtLink v-if="i.footer " :to="i?.url || '/'" target="_blank" rel="nofollow">
           <NuxtImg
             v-if="i.icon"
             :src="i.icon"

frontend/components/Main/index.vue

@@ -1,11 +1,12 @@
 <script setup>
+const route = useRoute()
 </script>
 
 <template>
   <div class="container main-container">
     <div class="pt-5.17rem">
       <Types class="left-0" />
-      <TypesTagNav />
+      <TypesTagNav v-if="route?.params?.type" />
       <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/Navs/Item.vue

@@ -22,8 +22,7 @@ defineProps({
   line-height: 1;
   @apply h-full flex items-center text-[15px] border-b-2 border-transparent;
   @apply relative opacity-85 whitespace-nowrap;
-  /* @apply text-black dark:text-[#e8ecfa]; */
-  @apply text-jj-navs-item-normal
+  @apply text-jj-navs-item-normal;
 
 }
 .nav-item:hover {

frontend/components/Navs/index.vue

@@ -1,11 +1,23 @@
 <script setup>
+const pageSize = ref(0)
 const { data: NavList } = await useFetch('/api/global/navs')
 const route = useRoute()
 const activeNav = computed(() => {
   return NavList.value.find(item => item.url === route.path) || NavList.value[0]
 })
 const [isMobileNavShown, toggleMobileNavShown] = useToggle()
 const isNavShown = inject('isNavShown')
+const changePageNum = (direction) => {
+  if (direction === 'prev') {
+    if (pageSize.value > 0)
+      pageSize.value = pageSize.value - 9
+  }
+
+  else {
+    if (pageSize.value + 9 < NavList.value.length)
+      pageSize.value = pageSize.value + 9
+  }
+}
 </script>
 
 <template>
@@ -20,8 +32,14 @@ const isNavShown = inject('isNavShown')
             <span class="mobile-nav-active">{{ activeNav?.nav }}</span>
             <div i-carbon:caret-up class="mobile-nav-icon" />
           </div>
-          <div class="nav-item-wrapper" :class="{ 'mobile-nav-item-wrapper': isMobileNavShown }" @click="toggleMobileNavShown()">
-            <NavsItem v-for="item in NavList" :key="item.nav" :nav="item" class="mx-4" :class="{ 'mobile-nav-item': isMobileNavShown }" />
+          <div class="nav-item-wrapper" :class="{ 'mobile-nav-item-wrapper': isMobileNavShown }">
+            <NavsItem v-for="item in NavList.slice(pageSize, pageSize + 9)" :key="item.nav" :nav="item" class="mx-4" :class="{ 'mobile-nav-item': isMobileNavShown }" @click="toggleMobileNavShown()" />
+            <div v-if="NavList.length > 9" class="h-full">
+              <div class="alter-items">
+                <div class="alter-item alter-prev" :class="{ '!text-gray': pageSize === 0 }" @click="changePageNum('prev')" />
+                <div class="alter-item alter-next" :class="{ '!text-gray': pageSize + 9 > NavList.length }" @click="changePageNum('next')" />
+              </div>
+            </div>
           </div>
         </div>
       </nav>
@@ -33,7 +51,6 @@ const isNavShown = inject('isNavShown')
 <style scoped>
 .main-header.nav-shown{
     transform: translateZ(0);
-    /* @apply -translate-y-5rem; */
 }
 
 .main-header {
@@ -58,13 +75,11 @@ const isNavShown = inject('isNavShown')
 .mobile-nav{
   @apply f-c-c md:hidden text-jj-blue-normal;
   cursor: pointer;
-  /* color: #1e80ff; */
   font-size: 1.33rem;
   width: 5.66rem;
 }
 
 .mobile-nav-icon {
-  /* color: #515767; */
   transform: rotate(180deg);
   transition: transform .2s ease-in-out;
   @apply text-jj-gray-text-normal
@@ -86,4 +101,18 @@ const isNavShown = inject('isNavShown')
 .nav-wrapper{
   @apply relative h-full flex items-center;
 }
+
+.alter-items{
+  @apply h-full f-c-c mx-4  flex-col lt-md:(flex-row h-4rem);
+}
+.alter-item{
+  @apply text-[1.2rem] text-jj-navs-item-normal;
+}
+
+.alter-prev{
+  @apply lt-md:(i-carbon:caret-left) i-carbon:caret-up hover:(text-jj-blue-normal cursor-pointer);
+}
+.alter-next{
+  @apply lt-md:(i-carbon:caret-right) i-carbon:caret-down hover:(text-jj-blue-normal cursor-pointer);
+}
 </style>

frontend/components/Types/TagNav.vue

@@ -1,7 +1,7 @@
 <script setup>
 const route = useRoute()
-const { data: tagList } = await useFetch(`/api/global/tags?type=${route?.params?.type}`)
-const isFold = useFold(false)
+const { data: tagList } = await useFetch(`/api/global/tags?type=${route?.params?.type || ''}`)
+const isFold = useFold()
 const maxLength = 9
 </script>
 
@@ -69,6 +69,7 @@ const maxLength = 9
 }
 .nav-list .nav-items.unfold {
     padding-right: 2rem;
+    padding-left: 1rem;
 }
 .nav-list .nav-items.unfold:after {
     position: absolute;

frontend/components/Types/index.vue

@@ -1,7 +1,32 @@
 <script setup>
 const route = useRoute()
-const { data: typeList } = await useFetch('/api/global/types')
+const pageNum = ref(1)
+const typeList = reactive({
+  data: [],
+  meta: {
+    pagination: {
+      pageCount: 1,
+    },
+  },
+})
+const { data: typeList_ } = await useFetch(`/api/global/types?page=${pageNum.value}`)
+typeList.data = typeList_.value.data
+typeList.meta = typeList_.value.meta
 const isNavShown = inject('isNavShown')
+const changePageNum = async (direction) => {
+  if (direction === 'prev') {
+    if (pageNum.value > 1)
+      pageNum.value = pageNum.value - 1
+  }
+  else {
+    if (pageNum.value < typeList.meta.pagination.pageCount)
+      pageNum.value = pageNum.value + 1
+  }
+
+  const { data: typeList_ } = await useFetch(`/api/global/types?page=${pageNum.value}`)
+  typeList.data = typeList_.value.data
+  typeList.meta = typeList_.value.meta
+}
 </script>
 
 <template>
@@ -10,7 +35,7 @@ const isNavShown = inject('isNavShown')
       <NuxtLink class="type-list-item" to="/">
         综合
       </NuxtLink>
-      <div v-for="item in typeList" :key="item.type" class="list-item-wrapper">
+      <div v-for="item in typeList.data" :key="item.type" class="list-item-wrapper">
         <NuxtLink class="type-list-item" :to="`/${item.type}`">
           {{ item.alias }}
         </NuxtLink>
@@ -26,7 +51,10 @@ const isNavShown = inject('isNavShown')
           </nav>
         </div>
       </div>
-      <!-- <span class="type-manage type-list-item">标签管理</span> -->
+      <span v-if="typeList.meta.pagination.total > 9" class="type-manage type-list-item alter-items">
+        <div i-carbon:caret-left class="alter-prev alter-item" :class="pageNum === 1 ? '!text-gray' : 'hover:!text-jj-blue-normal'" @click="changePageNum('prev')" />
+        <div i-carbon:caret-right class="alter-next alter-item" :class="pageNum === typeList.meta.pagination.pageCount ? '!text-gray' : 'hover:!text-jj-blue-normal'" @click="changePageNum('next')" />
+      </span>
     </div>
   </div>
 </template>
@@ -58,7 +86,7 @@ const isNavShown = inject('isNavShown')
   @apply cursor-pointer;
 }
 .type-list-item:hover{
-  @apply text-jj-blue-normal
+  @apply text-jj-blue-normal;
 }
 
 .type-list{
@@ -93,7 +121,7 @@ const isNavShown = inject('isNavShown')
   position: fixed;
   top: 3.833rem;
   padding: 1.17rem 1.17rem .17rem;
-  max-height: 16.67rem;
+  max-width: 30rem;
   font-weight: 400;
   line-height: 1.2;
   box-shadow: 0 1px 5px 0 rgb(0 0 0 / 15%);
@@ -129,4 +157,7 @@ const isNavShown = inject('isNavShown')
 .tag-item.router-link-exact-active {
   @apply text-jj-light bg-primary;
 }
+.alter-items{
+  @apply  hover:!text-jj-types-normal text-[1.2rem];
+}
 </style>

frontend/composables/useFold.ts

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

frontend/server/README.md

@@ -187,13 +187,13 @@ export interface liked extends mutation {
 
 ## 作者
 ### 获取作者榜
-| 接口 | /authors/list |
+| 接口 | /authors/list?page |
 | --- | --- |
-| 介绍 | 获取作者榜数据，包括作者头像、名称、描述等，只返回前三个作者 |
+| 介绍 | 获取作者榜数据，包括作者头像、名称、描述等，一次返回4个作者 |
 | 备注 | AuthorList是array类型 |
 #### 使用方式
 ```
-const { data: AuthorList } = await useFetch('/api/authors/list')
+const { data: AuthorList } = await useFetch(`/api/authors/list?page=${page || 1}`)
 ```
 
 #### 数据结构
@@ -281,21 +281,42 @@ interface IGlobal {
 ```
 
 ### 获取标签栏
-| 接口 | /global/types |
+| 接口 | /global/types?page |
 | --- | --- |
 | 介绍 | 获取首页标签栏数据 |
-| 备注 | TypeList是array类型 |
+| 备注 | TypeList是array类型，一页最多9个type |
 #### 使用方式
 ```
-const { data: TypeList } = await useFetch('/api/authors/types')
+const { data: typeList } = await useFetch(`/api/global/types?page=${pageNum}`)
 ```
 
 #### 数据结构
 
 ```ts
-interface ITypeItem {
+export interface IType {
+  data: ITypeItem[]
+  meta: ITypeMeta
+}
+
+export interface ITypeMeta {
+  pagination: {
+    pageCount: number
+    total: number
+  }
+}
+
+export interface ITypeItem {
   type: string
+  alias: string
+  tags: { data: ITagItem[] }
 }
+
+export interface ITagItem {
+  id: string
+  tag: string
+  alias: string
+}
+
 ```
 
 ### 获取文章列表数据

frontend/server/api/global/tags.ts

@@ -9,6 +9,7 @@ export default defineEventHandler(async (event): Promise<ITagItem[]> => {
           filters:{
             type: {type:{eq:"${type}"}}
           }
+          pagination: { pageSize: 999 }
         ) {
       data {
         id

frontend/server/api/global/types.ts

@@ -1,9 +1,11 @@
 import { useGraphql } from '~~/utils/useGraphql'
-import type { ITypeItem } from '~~/types/IType'
+import type { IType } from '~~/types/IType'
 
-export default defineEventHandler(async (): Promise<ITypeItem[]> => {
+export default defineEventHandler(async (event): Promise<IType> => {
+  const query = getQuery(event)
+  const page = query?.page || 1
   const reqQuery = `query{
-    types{
+    types(pagination: { page:${page},pageSize: 9 }){
       data{
         attributes{
           type
@@ -19,7 +21,13 @@ export default defineEventHandler(async (): Promise<ITypeItem[]> => {
           }
         }
       }
+    meta{
+      pagination {
+        pageCount
+        total
+      }
+    }
     }
   }`
-  return (await useGraphql(reqQuery)).types.data
+  return (await useGraphql(reqQuery)).types
 })

frontend/types/IType.ts

@@ -1,3 +1,15 @@
+export interface IType {
+  data: ITypeItem[]
+  meta: ITypeMeta
+}
+
+export interface ITypeMeta {
+  pagination: {
+    pageCount: number
+    total: number
+  }
+}
+
 export interface ITypeItem {
   type: string
   alias: string