fix: 修复专栏为空时报错

IdeaLeap · Feb 3, 2023 · 34cf1b4 · 34cf1b4
1 parent c5e7f85
commit 34cf1b4
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 41 deletions.
diff --git a/frontend/components/ArticlesContent/SideBar/Right/Catalogue.vue b/frontend/components/ArticlesContent/SideBar/Right/Catalogue.vue
@@ -6,9 +6,6 @@ const props = defineProps({
     type: String,
     default: '',
   },
-  column: {
-    type: Object,
-  },
 })
 /**
  *  @description: 获取目录
@@ -144,7 +141,6 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="sticky-block-box">
     <div class="sidebar-block catalog-block catalog-block pure isExpand" style="">
       <nav class="article-catalog">
         <div class="catalog-title">
@@ -161,17 +157,9 @@ onUnmounted(() => {
         </div>
       </nav>
     </div>
-    <ArticlesContentSideBarRightColumn :column="column" />
-  </div>
 </template>
 
 <style scoped>
-.sticky .sticky-block-box {
-  position: fixed;
-  top: 1.767rem;
-  width: inherit;
-  transition: top 0.2s;
-}
 .sidebar-block {
   position: relative;
   /* margin-bottom: 1.5rem; */

diff --git a/frontend/components/ArticlesContent/SideBar/Right/Column.vue b/frontend/components/ArticlesContent/SideBar/Right/Column.vue
@@ -1,33 +1,36 @@
-<!-- eslint-disable no-console -->
 <script setup>
 const props = defineProps({
-  column: {
-    type: Array,
-    required: true,
-  },
+  column: Object,
 })
-const isActive = ref(false)
-const handleClick = () => {
-  isActive.value = !isActive.value
-}
 
-const allColumnList = props.column.articles.data
 const route = useRoute()
 const currentId = ref(route.params.id)
 const nextArticle = ref({})
-onMounted(() => {
+
+let allColumnList
+const getNextArticle = () => {
   const currentIndex = allColumnList.findIndex(item => item.id === currentId.value)
   const allColumnListlength = allColumnList.length
   nextArticle.value = allColumnList[(currentIndex + 1) % allColumnListlength]
-})
+}
+
+const hasColumn = ref(false)
+if (props.column.articles !== undefined) {
+  hasColumn.value = true
+  allColumnList = props.column.articles.data
+  getNextArticle()
+}
+
+const isActive = ref(false)
+const handleClick = () => {
+  isActive.value = !isActive.value
+}
 </script>
 
 <template>
-  <nav class="next-article">
+  <nav v-if="hasColumn" class="next-article">
     <div class="next-article-header">
-      <div class="next-article-title">
-        下一篇
-      </div>
+      <div class="next-article-title">下一篇</div>
       <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" :class="isActive ? 'list-icon active' : 'list-icon'" @click="handleClick">
         <path
           fill-rule="evenodd"
@@ -36,11 +39,11 @@ onMounted(() => {
         />
       </svg>
     </div>
-    <hr class="next-article-hr">
+    <hr class="next-article-hr" />
     <div class="article-content">
       <a :href="nextArticle.id" :title="nextArticle.title" class="article"> {{ nextArticle.title }} </a>
     </div>
-    <nav v-show="isActive" class="article-list next-article-list">
+    <nav v-if="isActive" class="article-list next-article-list">
       <div class="list-title">
         {{ props.column.column }}
       </div>

diff --git a/frontend/components/ArticlesContent/SideBar/Right/index.vue b/frontend/components/ArticlesContent/SideBar/Right/index.vue
@@ -1,15 +1,8 @@
 <script setup>
 const props = defineProps({
-  content: {
-    type: String,
-    default: '',
-  },
-  author: {
-    type: Object,
-  },
-  column: {
-    type: Array,
-  },
+  content: String,
+  author: Object,
+  column: Array,
 })
 const { immerseState } = useImmerse()
 </script>
@@ -18,7 +11,10 @@ const { immerseState } = useImmerse()
   <div class="sidebar hidden lg:block lg:w-4/12">
     <ArticlesContentSideBarRightAuthor v-show="!immerseState" :author="props.author" />
     <!-- <ArticlesContentSideBarRightRelatedArticles v-show="!immerseState" class="sidebar-block"  /> -->
-    <ArticlesContentSideBarRightCatalogue class="sidebar-block" :content="props.content" :column="column" />
+    <div class="sticky-block-box">
+      <ArticlesContentSideBarRightCatalogue class="sidebar-block" :content="props.content" />
+      <ArticlesContentSideBarRightColumn :column="column" />
+    </div>
   </div>
 </template>
 
@@ -36,4 +32,10 @@ const { immerseState } = useImmerse()
   right: 0;
   width: 25rem;
 }
+.sticky .sticky-block-box {
+  position: fixed;
+  top: 1.767rem;
+  width: inherit;
+  transition: top 0.2s;
+}
 </style>