Merge pull request #136 from MarleneJiang/issue-29-新增文章详情

refactor: 目录重构+对接相关文章
IdeaLeap · Feb 1, 2023 · 9c06bc8 · 9c06bc8
2 parents f38f5a9 + 4b58eb7
commit 9c06bc8
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 43 deletions.
diff --git a/...onents/ArticlesContent/SideBar/Author.vue → .../ArticlesContent/SideBar/Right/Author.vue b/...onents/ArticlesContent/SideBar/Author.vue → .../ArticlesContent/SideBar/Right/Author.vue
diff --git a/...ponents/ArticlesContent/SideBar/Right.vue → ...ticlesContent/SideBar/Right/Catalogue.vue b/...ponents/ArticlesContent/SideBar/Right.vue → ...ticlesContent/SideBar/Right/Catalogue.vue
@@ -1,4 +1,3 @@
-<!-- eslint-disable no-console -->
 <script setup>
 import { getProcessor } from 'bytemd'
 import { visit } from 'unist-util-visit'
@@ -7,9 +6,6 @@ const props = defineProps({
     type: String,
     default: '',
   },
-  author: {
-    type: Object,
-  },
 })
 /**
  *  @description: 获取目录
@@ -142,42 +138,31 @@ onUnmounted(() => {
   window.removeEventListener('scroll', throttledScrollHandler)
   window.removeEventListener('scroll', scrollFixedCatalogue)
 })
-const { immerseState } = useImmerse()
 </script>
 
 <template>
-  <div class="sidebar hidden lg:block lg:w-4/12">
-    <ArticlesContentSideBarAuthor v-show="!immerseState" :author="props.author" />
-    <ArticlesContentSideBarArticleList class="sidebar-block" />
-    <div class="sticky-block-box">
-      <div class="sidebar-block catalog-block catalog-block pure isExpand" style="">
-        <nav class="article-catalog">
-          <div class="catalog-title">
-            目录
-          </div>
-          <div class="catalog-body">
-            <ul class="catalog-list" style="margin-top: 0px">
-              <li v-for="(item, index) in Catalogue" :key="index" :class="[{ active: index === isActive }, catalogueClass(item.level)]" @click="activeSelect(index)">
-                <div class="a-container">
-                  <a :href="`#heading-${index}`" :title="item.text" class="catalog-aTag hover:bg-[#F7F8FA]"> {{ item.text }} </a>
-                </div>
-              </li>
-            </ul>
-          </div>
-        </nav>
-      </div>
+  <div class="sticky-block-box">
+    <div class="sidebar-block catalog-block catalog-block pure isExpand" style="">
+      <nav class="article-catalog">
+        <div class="catalog-title">
+          目录
+        </div>
+        <div class="catalog-body">
+          <ul class="catalog-list" style="margin-top: 0px">
+            <li v-for="(item, index) in Catalogue" :key="index" :class="[{ active: index === isActive }, catalogueClass(item.level)]" @click="activeSelect(index)">
+              <div class="a-container">
+                <a :href="`#heading-${index}`" :title="item.text" class="catalog-aTag hover:bg-[#F7F8FA]"> {{ item.text }} </a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </nav>
     </div>
   </div>
 </template>
 
 <style scoped>
-.sidebar {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 25rem;
-}
-.sidebar.sticky .sticky-block-box {
+.sticky .sticky-block-box {
   position: fixed;
   top: 1.767rem;
   width: inherit;
@@ -189,7 +174,7 @@ const { immerseState } = useImmerse()
   background-color: #fff;
 }
 
-.sidebar .sidebar-block {
+ .sidebar-block {
   margin-bottom: 20px;
 }
 

diff --git a/...s/ArticlesContent/SideBar/ArticleList.vue → ...Content/SideBar/Right/RelatedArticles.vue b/...s/ArticlesContent/SideBar/ArticleList.vue → ...Content/SideBar/Right/RelatedArticles.vue
@@ -5,9 +5,6 @@ defineProps({
     required: true,
   },
 })
-const tags = ['前端']
-const authorId = '5'
-const { data: ArticleList } = await useFetch(`/api/articles/tags?tags=${JSON.stringify(tags)}&authorId=${authorId}`)
 </script>
 
 <template>
@@ -17,24 +14,25 @@ const { data: ArticleList } = await useFetch(`/api/articles/tags?tags=${JSON.str
         相关文章
       </div>
       <div class="block-body">
-        <div v-for="item in ArticleList" :key="item.name" class="entry-list">
+        <div class="entry-list">
           <nuxt-link
-            :to="`/article/${item.id}`" target="_blank" rel="" st:name="link" title="{{ item.title }}"
-            class="item"
+            v-for="item in articleList" :key="item.id" :to="`/article/${item.id}`" target="_blank" rel=""
+            st:name="link"
+            :title="item.title" class="item"
           >
             <div class="entry-title">
               {{ item.title }}
             </div>
             <div class="entry-meta-box">
-              <div class="entry-meta">
+              <!-- <div class="entry-meta">
                 {{ item.liked }}{{ item.liked > 1 ? '赞' : '赞' }}
               </div>
               <div class="entry-meta">
                 &nbsp;·&nbsp;
               </div>
               <div class="entry-meta">
                 {{ item.commented }}{{ item.commented > 1 ? '评论' : '评论' }}
-              </div>
+              </div> -->
             </div>
           </nuxt-link>
         </div>

diff --git a/frontend/components/ArticlesContent/SideBar/Right/index.vue b/frontend/components/ArticlesContent/SideBar/Right/index.vue
@@ -0,0 +1,40 @@
+<script setup>
+const props = defineProps({
+  content: {
+    type: String,
+    default: '',
+  },
+  author: {
+    type: Object,
+  },
+  relatedArticles: {
+    type: Array,
+  },
+})
+const { immerseState } = useImmerse()
+</script>
+
+<template>
+  <div class="sidebar hidden lg:block lg:w-4/12">
+    <ArticlesContentSideBarRightAuthor v-show="!immerseState" :author="props.author" />
+    <ArticlesContentSideBarRightRelatedArticles v-show="!immerseState" class="sidebar-block" :article-list="props.relatedArticles" />
+    <ArticlesContentSideBarRightCatalogue class="sidebar-block" :content="props.content" />
+  </div>
+</template>
+
+<style scoped>
+.sidebar-block {
+  position: relative;
+  margin-bottom: 1.5rem;
+  background-color: #fff;
+}
+.sidebar .sidebar-block {
+  margin-bottom: 20px;
+}
+.sidebar {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 25rem;
+}
+</style>
diff --git a/frontend/components/ArticlesContent/index.vue b/frontend/components/ArticlesContent/index.vue
@@ -13,6 +13,7 @@ const props = defineProps({
     },
   },
 })
+
 const breaks = (await import('@bytemd/plugin-breaks')).default
 const gemoji = (await import('@bytemd/plugin-gemoji')).default
 const gfm = (await import('@bytemd/plugin-gfm')).default
@@ -69,6 +70,7 @@ const { immerseState } = useImmerse()
       <h1 class="mt-0 mr-0 mb-1.667rem ml-0 text-2.667rem fw-600 color-[#252933] lh-1.31em">
         {{ article.title }}
       </h1>
+
       <div class="flex items-center mb-1.667rem text-0">
         <NuxtLink target="_blank" to="#" class="avatar-link" rel>
           <nuxt-img class="bg-center w-3.333rem h-3.333rem mr-1rem bg-cover rd-50% bg-repeat inline-block relative" :src="article.authorId.avatar" loading="eager" />
@@ -80,7 +82,7 @@ const { immerseState } = useImmerse()
                 {{ article.authorId.name }}
               </span>
               <span v-show="!immerseState" blank="true" class="ml-0.33rem inline-flex items-center v-middle">
-                <nuxt-img class="w-35px h-16px" src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/lv-3.7938ebc.png" loading="eager" />
+                <img class="w-35px h-16px" :src="`/_nuxt/assets/icon/rank/${props.article.authorId.rank}.png`" loading="eager">
               </span>
             </NuxtLink>
           </div>
@@ -93,6 +95,7 @@ const { immerseState } = useImmerse()
           </div>
         </div>
       </div>
+
       <nuxt-img v-if="article?.cover" loading="eager" :src="article?.cover" class="object-cover relative w-100%" />
 
       <div itemprop="articleBody" class="article-content">

diff --git a/frontend/pages/article/[id].vue b/frontend/pages/article/[id].vue
@@ -12,7 +12,7 @@ const { data: articleData } = await useFetch(url)
         <ArticlesContentSideBarLeft :commented="articleData.article.commented" :liked="articleData.article.liked" />
         <ArticlesContent :article="articleData.article" />
         <ClientOnly>
-          <ArticlesContentSideBarRight :content="articleData.article.content" :author="articleData.article.authorId" />
+          <ArticlesContentSideBarRight :related-articles="articleData.article.columId.articles.data" :content="articleData.article.content" :author="articleData.article.authorId" />
         </ClientOnly>
       </div>
     </main>