Merge pull request #82 from MarleneJiang/issue-54-新增文章列表

Issue 54 新增文章列表

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",

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>

frontend/components/Articles/index.vue

@@ -1,14 +1,12 @@
 <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 = useArtlist(initialItem)
 const addArtListItem = () => {
   if (useScrollBottom()) {
     const timer = setTimeout(async () => {
@@ -21,19 +19,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
@@ -46,38 +31,17 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="all-text-black pb-5 box-border w-full">
+  <div class="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 />
     </div>
-    <ul v-if="!isLoading && initialItem">
+    <ul v-if="!isLoading && artlistData">
       <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>

frontend/components/Uno/Select.vue

@@ -1,66 +1,83 @@
-<script setup>
-const isShow = ref(false)
+<script setup lang="ts">
+const isShow = useState<boolean>('isShow', () => false)
+const iptValue = useState<string>('iptValue', () => '3天内')
+const iptValueHandler = (time: string) => {
+  isShow.value = false
+  iptValue.value = time
+}
 </script>
 
 <template>
-  <div class="dorp-down-area">
+  <div v-if="$route.query.sort && $route.query.sort?.indexOf('hottest') !== -1" class="dorp-down-area">
     <div class="drop-down dorp-down">
-      <li class="dropdown-toggle flex items-center justify-between" @click="isShow = !isShow">
-        7天内
-        <div class=" text-[#b2bac2]" i-carbon:caret-up :class="!isShow ? 'toggled' : ''" style="transition: all .5s;" />
-      </li> <ul v-if="isShow" class="dropdown-menu">
+      <div class="dropdown-toggle flex items-center justify-between" @click="isShow = !isShow">
+        {{ iptValue }}
+        <div class="text-[#b2bac2]" i-carbon:caret-up :class="!isShow ? 'toggled' : ''" style="transition: all 0.5s" />
+      </div>
+      <ul v-if="isShow" class="dropdown-menu">
         <li class="route-active">
-          <a href="/?sort=three_days_hottest">3天内</a>
-        </li><li class="router-link-exact-active route-active">
-          <a href="/?sort=weekly_hottest" aria-current="page">7天内</a>
-        </li><li class="route-active">
-          <a href="/?sort=monthly_hottest">30天内</a>
-        </li><li class="route-active">
-          <a href="/?sort=hottest">全部</a>
+          <NuxtLink to="/?sort=three_days_hottest" @click="iptValueHandler('3天内')">
+            3天内
+          </NuxtLink>
+        </li>
+        <li class="router-link-exact-active route-active">
+          <NuxtLink to="/?sort=weekly_hottest" aria-current="page" @click="iptValueHandler('7天内')">
+            7天内
+          </NuxtLink>
+        </li>
+        <li class="route-active">
+          <NuxtLink to="/?sort=monthly_hottest" @click="iptValueHandler('30天内')">
+            30天内
+          </NuxtLink>
+        </li>
+        <li class="route-active">
+          <NuxtLink to="/?sort=hottest" @click="iptValueHandler('全部')">
+            全部
+          </NuxtLink>
         </li>
       </ul>
     </div>
   </div>
 </template>
 
 <style scoped>
-.dorp-down-area {
+  .dorp-down-area {
     position: relative;
     z-index: 9;
-}
-.dorp-down-area .drop-down {
+  }
+  .dorp-down-area .drop-down {
     position: absolute;
     top: 50%;
     left: 0;
     transform: translateY(-50%);
-}
-.drop-down {
+  }
+  .drop-down {
     position: relative;
     color: #909097;
     min-width: 4rem;
-}
-li {
+  }
+  li {
     list-style: none;
-}
-.dropdown-toggle {
+  }
+  .dropdown-toggle {
     box-sizing: border-box;
     min-width: 7rem;
     font-size: 1rem;
     border-radius: 2px;
     padding: 2px 10px;
     font-weight: 400;
     border: 1px solid #ebebeb;
-}
-.dropdown-toggle:hover {
+  }
+  .dropdown-toggle:hover {
     background-color: #fafafb;
     cursor: pointer;
-}
-.toggled {
+  }
+  .toggled {
     transform: rotate(-180deg);
-    transition: all .5s;
-}
+    transition: all 0.5s;
+  }
 
-.dropdown-menu {
+  .dropdown-menu {
     box-sizing: border-box;
     position: absolute;
     top: 105%;
@@ -70,30 +87,30 @@ li {
     font-size: 1rem;
     list-style: none;
     text-align: left;
-    border-radius: .17rem;
+    border-radius: 0.17rem;
     box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
     border: 1px solid #ebebeb;
     background-color: #fff;
-}
+  }
 
-.dropdown-menu li {
+  .dropdown-menu li {
     overflow: hidden;
     width: 100%;
-}
+  }
 
-.dropdown-menu li a {
+  .dropdown-menu li a {
     display: block;
     clear: both;
-    padding: .83rem;
+    padding: 0.83rem;
     line-height: 1.17;
     color: #909097;
-}
-.dropdown-menu li a:hover {
+  }
+  .dropdown-menu li a:hover {
     background-color: #fafafb;
-}
-a {
+  }
+  a {
     text-decoration: none;
     cursor: pointer;
     color: #909090;
-}
+  }
 </style>

frontend/composables/useFetchPostData.ts

@@ -1,5 +1,6 @@
 import type { IPanel } from '~~/types/IPanel'
 const postData: IPanel[] = []
+export const useArtlist = (data: IPanel[]) => useState('artlist', () => [...data] as IPanel[])
 // TODO: 请求数据
 export default async (/* mode = 'recommend' | 'latest' | 'heat' , pagenum = 1,  */): Promise<IPanel[]> => {
   // 接口