feat: 改为路由参数跳转

IdeaLeap · Jan 26, 2023 · 8a6dd85 · 8a6dd85
1 parent c47e5c6
commit 8a6dd85
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 44 deletions.
diff --git a/backend/src/extensions/documentation/documentation/1.0.0/full_documentation.json b/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-25T15:20:27.845Z"
+    "x-generation-date": "2023-01-26T05:03:19.417Z"
   },
   "x-strapi-config": {
     "path": "/documentation",

diff --git a/frontend/components/Articles/Link.vue b/frontend/components/Articles/Link.vue
@@ -0,0 +1,28 @@
+<template>
+  <div all-px-7 all-my-4 flex all-cursor-pointer>
+    <NuxtLink
+      to="/"
+      :class="`${
+        $route.query.sort ? 'text-gray-500' : 'text-[#007fff]'
+      } border-r-1 focus:text-[#007fff] hover:text-[#007fff]`"
+    >
+      推荐
+    </NuxtLink>
+    <NuxtLink
+      to="/?sort=newest"
+      :class="`${
+        $route.query.sort === 'newest' ? 'text-[#007fff]' : 'text-gray-500'
+      } border-r-1 focus:text-[#007fff] hover:text-[#007fff]`"
+    >
+      最新
+    </NuxtLink>
+    <NuxtLink
+      to="/?sort=three_days_hottest"
+      :class="`${
+        ($route.query.sort && $route.query.sort?.indexOf('hottest') !== -1) ? 'text-[#007fff]' : 'text-gray-500'
+      } border-r-1 focus:text-[#007fff] hover:text-[#007fff]`"
+    >
+      热榜
+    </NuxtLink>
+  </div>
+</template>
diff --git a/frontend/components/Articles/index.vue b/frontend/components/Articles/index.vue
@@ -1,14 +1,13 @@
 <script setup lang="ts">
-import type { IPanel } from '../../types/IPanel'
+const route = useRoute()
+watchEffect(() => {
+  // TODO: 请求数据
+})
 let pagenum = 0
 const isLoading = useState('isLoading', () => false)
 const artlistNav = useState('artlistNav', () => 'recommend')
-const hotRange = useState('hotRange', () => 'all')
-const hotRangeHandler = () => {
-  // TODO: 热度选择天数范围
-}
 const initialItem = await useFetchPostData()
-const artlistData = useState('artlist', () => [...initialItem] as IPanel[])
+const artlistData = useArlist(initialItem)
 const addArtListItem = () => {
   if (useScrollBottom()) {
     const timer = setTimeout(async () => {
@@ -21,19 +20,6 @@ const addArtListItem = () => {
     }, 1000)
   }
 }
-const artModeHandler = (mode: string) => {
-  artlistNav.value = mode
-  const allEl = document.querySelectorAll('.navlist') as unknown as HTMLElement[]
-  allEl.forEach((item) => {
-    item.classList.remove('text-active')
-  })
-  const el = document.getElementById(mode) as unknown as HTMLElement
-  if (el.style)
-    el.classList.add('text-active')
-  artlistData.value = []
-  // TODO: 请求数据
-  artlistData.value = initialItem
-}
 let EmployeeWindow
 onMounted(() => {
   EmployeeWindow = window as any
@@ -48,36 +34,15 @@ onUnmounted(() => {
 <template>
   <div class="all-text-black pb-5 box-border w-full">
     <div class="flex" style="font-size: 13.67px;" border-b-1>
-      <ul all-px-7 all-my-4 flex all-cursor-pointer all-text-gray-500>
-        <li id="recommend" class=" text-blue-600 navlist border-r-1 hover:text-[#007fff]" @click="artModeHandler('recommend')">
-          推荐
-        </li>
-        <li id="latest" class="navlist border-r-1 hover:text-[#007fff]" @click="artModeHandler('latest')">
-          最新
-        </li>
-        <li id="hot" class="navlist hover:text-[#007fff]" @click="artModeHandler('hot')">
-          热榜
-        </li>
-      </ul>
-      <UnoSelect v-if="artlistNav === 'hot'" class="" />
+      <ArticlesLink />
+      <UnoSelect v-if="route.query.sort?.indexOf('hottest') !== -1" class="" />
     </div>
     <ul v-if="!isLoading && initialItem">
       <ArticlesItem
         v-for="items in artlistData" :key="items.uname" :uname="items.uname" :duration="items.duration"
         :title="items.title" :desc="items.desc" :tags="items.tags" :topic-heat="items.topicHeat"
       />
     </ul>
-    <div v-else>
-      <ArticlesSkeleton />
-    </div>
+    <ArticlesSkeleton v-else />
   </div>
 </template>
-
-<style scoped>
-#recommend {
-  color: #007fff;
-}
-.text-active {
-  @apply text-[#007fff]
-}
-</style>
diff --git a/frontend/composables/useFetchPostData.ts b/frontend/composables/useFetchPostData.ts
@@ -1,5 +1,6 @@
 import type { IPanel } from '~~/types/IPanel'
 const postData: IPanel[] = []
+export const useArlist = (data: IPanel[]) => useState('artlist', () => [...data] as IPanel[])
 // TODO: 请求数据
 export default async (/* mode = 'recommend' | 'latest' | 'heat' , pagenum = 1,  */): Promise<IPanel[]> => {
   // 接口