Merge pull request #255 from MarleneJiang/issue-249-对接广告组件

fix: 细节修复

frontend/components/ArticlesContent/SideBar/Left/index.vue

@@ -55,10 +55,13 @@ const { immerseState, immerseToggle } = useImmerse()
 .article-suspended-panel {
   @apply fixed top-140px ml--7rem z-2;
 }
-.panel-btn.with-badge:after {
+.panel-btn.with-badge:not([badge="0"]):after {
   @apply absolute top-0 left-75% h-17px lh-17px px-5px rd-9px text-11px text-center whitespace-nowrap bg-jj-gray-panel-normal text-jj_font_white;
   content: attr(badge);
 }
+.panel-btn.with-badge:after[content="0"] {
+  content: none;
+}
 .panel-btn {
   @apply relative mb-1.667rem w-4rem h-4rem bg-jj-article bg-center bg-no-repeat rd-50%  cursor-pointer text-center text-size-1.67rem;
   background-position: 50%;

frontend/components/ArticlesContent/SideBar/Right/Catalogue.vue

@@ -115,16 +115,16 @@ watch(immerseState, (val) => {
 onMounted(() => {
   window.addEventListener('scroll', onScroll)
   window.addEventListener('scroll', scrollFixedCatalogue)
-  const route = useRoute()
-  if (route.hash) {
-    const hashIndex = route.hash.slice(9)
-    if (Number(hashIndex) !== -1) {
-      isActive.value = Number(hashIndex)
-      const a = document.createElement('a')
-      a.href = `#heading-${hashIndex}`
-      a.click()
-    }
-  }
+  // const route = useRoute()
+  // if (route.hash) {
+  //   const hashIndex = route.hash.slice(9)
+  //   if (Number(hashIndex) !== -1) {
+  //     isActive.value = Number(hashIndex)
+  //     const a = document.createElement('a')
+  //     a.href = `#heading-${hashIndex}`
+  //     a.click()
+  //   }
+  // }
 
   nextTick(() => {
     getInitByScroll()

frontend/components/ArticlesContent/SideBar/Right/Column.vue

@@ -17,9 +17,21 @@ if (props?.column) {
 }
 
 const isActive = ref(false)
-const handleClick = () => {
+const handleClick = (e: any) => {
   isActive.value = !isActive.value
 }
+const handleClickOutside = (e: any) => {
+  if (!e.target.closest('.active'))
+    isActive.value = false
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+})
 </script>
 
 <template>
@@ -40,7 +52,7 @@ const handleClick = () => {
     <div class="article-content">
       <a :href="`/article/${nextArticle?.id}`" target="_blank" :title="nextArticle?.title" class="article"> {{ nextArticle?.title }} </a>
     </div>
-    <nav v-if="isActive" class="article-list next-article-list">
+    <nav v-show="isActive" class="article-list next-article-list ">
       <div class="list-title">
         {{ props.column?.column }}
       </div>

frontend/components/ArticlesContent/SideBar/Right/index.vue

@@ -48,7 +48,7 @@ const { immerseState } = useImmerse()
 </script>
 
 <template>
-  <div class="sidebar hidden lg:block lg:w-4/12">
+  <div class="sidebar">
     <ArticlesContentSideBarRightAuthor v-if="!immerseState" :author="article!.authorId" :viewed="article.viewed" :liked="article.liked" />
     <ArticlesContentSideBarRightRelatedArticles v-if="!immerseState" class="sidebar-block" :author="article!.authorId" :tags="article!.tagIds" />
     <div class="sticky-block-box">
@@ -79,6 +79,11 @@ const { immerseState } = useImmerse()
   transition: top 0.2s;
 }
 .sidebar.sticky.top .sticky-block-box {
-    top: 1.767rem;
+  top: 1.767rem;
+}
+@media (max-width: 1000px) {
+  .sidebar {
+    display: none;
+  }
 }
 </style>

frontend/components/ArticlesContent/index.vue

@@ -20,22 +20,22 @@ const plugins = [breaks(), frontmatter(), highlightStyle(), themeStyle(), gemoji
 // 赋值属性唯一ID
 function transformToId() {
   const articleDom = document.getElementById('markdown-body')
-  const children = Array.from(articleDom!.children)
-  if (children.length > 0) {
-    let index = 0
-    for (let i = 0; i < children.length; i++) {
-      const tagName = children[i].tagName
-      if (tagName === 'H1' || tagName === 'H2' || tagName === 'H3') {
-        children[i].setAttribute('id', `heading-${index}`)
-        index++
+  if (articleDom?.children) {
+    const children = Array.from(articleDom.children)
+    if (children.length > 0) {
+      let index = 0
+      for (let i = 0; i < children.length; i++) {
+        const tagName = children[i].tagName
+        if (tagName === 'H1' || tagName === 'H2' || tagName === 'H3') {
+          children[i].setAttribute('id', `heading-${index}`)
+          index++
+        }
       }
     }
   }
 }
 
-onMounted(() => {
-  transformToId()
-})
+onMounted(transformToId)
 const { immerseState } = useImmerse()
 </script>
 

frontend/pages/article/[id].vue

@@ -42,6 +42,7 @@ onMounted(() => {
         <ArticlesContentSideBarRight :article="articleDataList" />
       </div>
     </main>
+    <AsideSuspensionPanel class="fixed right-3 bottom-1 suspension-panel z-1000" />
   </div>
 </template>
 
@@ -56,7 +57,6 @@ onMounted(() => {
 }
 .main-area {
   border-radius: 4px;
-  /* background-color: #fff; */
   padding-left: 2.67rem;
   padding-right: 2.67rem;
   box-sizing: border-box;
@@ -77,15 +77,18 @@ onMounted(() => {
   }
   .main-area {
     width: 100%;
+    position: relative;
+    max-width: 100%;
+    box-sizing: border-box;
   }
 }
-@media screen and (max-width: 1000px) {
-  .main-area {
-    border: none;
-    padding-left: 2rem;
-    padding-right: 2rem;
+
+@media (max-width: 960px) {
+  .suspension-panel {
+    display: none;
   }
 }
+
 .main-area .article-end {
   padding-top: 10px;
   border-radius: 0 0 4px 4px;