fix: 平板设备优化，组件判空渲染，head标题动态渲染

IdeaLeap · Feb 10, 2023 · 63589d0 · 63589d0
1 parent 44c0897
commit 63589d0
Show file tree

Hide file tree

Showing 10 changed files with 114 additions and 104 deletions.
diff --git a/frontend/components/ArticlesContent/End.vue b/frontend/components/ArticlesContent/End.vue
@@ -4,7 +4,7 @@ defineProps({
     type: Object,
   },
   tag: {
-    type: Object,
+    type: Array,
   },
 })
 </script>
@@ -18,12 +18,12 @@ defineProps({
         </div>
         <a href="/frontend" target="_blank" rel="" class="item category-item"><span class="tag-title">{{ type.alias }}</span></a>
       </div>
-      <div v-if="tag.data.length !== 0" class="tag-list">
+      <div v-if="tag.length !== 0" class="tag-list">
         <div class="tag-list-title">
           标签：
         </div>
         <div class="tag-list-container">
-          <a href="#" target="_blank" rel="" class="item tag-item"><span v-for="(item, index) in tag.data" :key="index" class="tag-title">{{ item.alias }}</span></a>
+          <a href="#" target="_blank" rel="" class="item tag-item" v-for="(item, index) in tag" :key="index" ><span class="tag-title">{{ item.alias }}</span></a>
         </div>
       </div>
     </div>

diff --git a/frontend/components/ArticlesContent/SideBar/Right/Catalogue.vue b/frontend/components/ArticlesContent/SideBar/Right/Catalogue.vue
@@ -1,53 +1,8 @@
 <script setup lang="ts">
-import { getProcessor } from 'bytemd'
-import { visit } from 'unist-util-visit'
-const props = defineProps({
-  content: {
-    type: String,
-    default: '',
-  },
-})
-/**
- *  @description: 获取目录
- *
- */
-const Catalogue = ref<{ level: number;text: string } []>([]) // 目录
-const stringifyHeading = (e: any) => {
-  let result = ''
-  visit(e, (node) => {
-    if (node.type === 'text')
-      result += node.value
-  })
-  return result
-}
-getProcessor({
-  plugins: [
-    {
-      rehype: p =>
-        p.use(() => (tree: any) => {
-          if (tree && tree.children.length) {
-            const items: { level: number;text: string } [] = []
-            tree.children
-              .filter((v: any) => v.type === 'element')
-              .forEach((node: any) => {
-                // 过滤掉主题和高亮
-                const removeTheme = node.children.filter((item: any) => item.value?.includes('theme'))
-                const removeHl = node.children.filter((item: any) => item.value?.includes('highlight'))
-
-                if (node.tagName[0] === 'h' && !!node.children.length && removeTheme.length === 0 && removeHl.length === 0) {
-                  const i = Number(node.tagName[1])
-                  items.push({
-                    level: i,
-                    text: stringifyHeading(node),
-                  })
-                }
-              })
-            Catalogue.value = items.filter(v => v.level === 1 || v.level === 2 || v.level === 3)
-          }
-        }),
-    },
-  ],
-}).processSync(props.content)
+import type { ICatalogue } from '@/types/IArticleItem'
+const props = defineProps<{
+  catalogueList: ICatalogue[]
+}>()
 
 /**
  * @description: 目录点击事件
@@ -89,7 +44,7 @@ const getInitByScroll = () => {
   originTop.value = (document.querySelector('.sticky-block-box') as HTMLElement).offsetTop
   firtstCatalogueTop.value = originTop.value
   itemOffsetTop.value = []
-  Catalogue.value.forEach((val, i) => {
+  props.catalogueList.forEach((val, i) => {
     const firstHead = document.querySelector(`#heading-${i}`) as HTMLElement
     if (firstHead) {
       itemOffsetTop.value?.push({
@@ -108,6 +63,7 @@ const onScroll = () => {
     if (scrollTop >= itemOffsetTop.value[n].top)
       isActive.value = itemOffsetTop.value[n].key
   }
+
   if (isActive.value) {
     const activeEleTop = liRef.value[isActive.value].offsetTop
     navMid.value > activeEleTop
@@ -118,10 +74,6 @@ const onScroll = () => {
         top: activeEleTop - navMid.value,
       })
   }
-
-  window.scrollTo({
-    left: 0,
-  })
 }
 
 /**
@@ -130,28 +82,29 @@ const onScroll = () => {
 const isNavShown = inject('isNavShown') as Boolean
 const { immerseState, immerseToggle } = useImmerse()
 
-const catalogue = ref<HTMLElement | null>(null)
+const catalogueEle = ref<HTMLElement | null>(null)
 let sideBar: HTMLElement | null = null
 const getInitByScrollFixedCatalogue = () => {
   const sideBarEle = document.querySelector('.sidebar')
   sideBar = sideBarEle as HTMLElement
-  catalogue.value = document.querySelector('.sticky-block-box')
+  catalogueEle.value = document.querySelector('.sticky-block-box')
 }
 
 const scrollFixedCatalogue = () => {
-  if (currentScrollTop.value - headerHeight.value > catalogue.value!.offsetTop)
+  if (currentScrollTop.value - headerHeight.value > catalogueEle.value!.offsetTop)
     sideBar!.classList.add('sticky')
 
   if (currentScrollTop.value <= firtstCatalogueTop.value && !immerseState.value)
     sideBar!.classList.remove('sticky')
 }
 
 watch(isNavShown, (val) => {
-  val ? catalogue.value!.style.top = `${catalogue.value!.offsetTop + headerHeight!.value}px` : catalogue.value!.style.top = '1.767rem'
+  val ? (catalogueEle.value!.style.top = `${catalogueEle.value!.offsetTop + headerHeight!.value}px`) : (catalogueEle.value!.style.top = '1.767rem')
 })
 watch(immerseState, (val) => {
   if (val) {
     sideBar!.classList.add('sticky')
+    onScroll()
   }
   else {
     firtstCatalogueTop.value = originTop.value
@@ -160,9 +113,6 @@ watch(immerseState, (val) => {
 })
 
 onMounted(() => {
-  const isMobile = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
-  if (isMobile)
-    document.querySelector('html')!.style.scrollBehavior = 'smooth'
   window.addEventListener('scroll', onScroll)
   window.addEventListener('scroll', scrollFixedCatalogue)
   const route = useRoute()
@@ -196,7 +146,7 @@ onUnmounted(() => {
       </div>
       <div ref="navRef" class="catalog-body">
         <ul class="catalog-list" style="margin-top: 0px">
-          <li v-for="(item, index) in Catalogue" ref="liRef" :key="index" :class="[{ active: index === isActive }, catalogueClass(item.level)]" @click="activeSelect(index)">
+          <li v-for="(item, index) in catalogueList" ref="liRef" :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-jj-container-hover-normal"> {{ item.text }} </a>
             </div>
@@ -209,11 +159,11 @@ onUnmounted(() => {
 
 <style scoped>
 #heading-3 {
-  @apply relative top--50px
+  @apply relative top--50px;
 }
 
 .sidebar-block {
-  @apply relative mb-20px
+  @apply relative mb-20px;
 }
 
 .catalog-block.isExpand {
@@ -229,7 +179,7 @@ onUnmounted(() => {
 }
 
 .article-catalog {
-  @apply bg-jj-sidebar p-0 rd-4px
+  @apply bg-jj-sidebar p-0 rd-4px;
 }
 
 .catalog-title {
@@ -246,19 +196,19 @@ onUnmounted(() => {
 }
 
 .catalog-body::-webkit-scrollbar {
-    width: 6px;
-    height: 80px;
+  width: 6px;
+  height: 80px;
 }
 
 .catalog-body::-webkit-scrollbar-thumb {
-    background-color: #e4e6eb;
-    outline: none;
-    border-radius: 2px;
+  background-color: #e4e6eb;
+  outline: none;
+  border-radius: 2px;
 }
 
 .catalog-body::-webkit-scrollbar-track {
-    box-shadow: none;
-    border-radius: 2px;
+  box-shadow: none;
+  border-radius: 2px;
 }
 
 .catalog-list {
@@ -302,6 +252,6 @@ onUnmounted(() => {
 }
 
 .catalog-list .catalog-aTag {
-  @apply color-inherit inline-block p-8px w-90% rd-4px truncate
+  @apply color-inherit inline-block p-8px w-90% rd-4px truncate;
 }
 </style>
diff --git a/frontend/components/ArticlesContent/SideBar/Right/Column.vue b/frontend/components/ArticlesContent/SideBar/Right/Column.vue
@@ -13,13 +13,8 @@ const getNextArticle = () => {
   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()
-}
+allColumnList = props.column.articles.data
+getNextArticle()
 
 const isActive = ref(false)
 const handleClick = () => {
@@ -29,7 +24,7 @@ const { immerseState, immerseToggle } = useImmerse()
 </script>
 
 <template>
-  <nav v-if="hasColumn" v-show="!immerseState" class="next-article">
+  <nav  v-show="!immerseState" class="next-article">
     <div class="next-article-header">
       <div class="next-article-title">
         下一篇

diff --git a/frontend/components/ArticlesContent/SideBar/Right/RelatedArticles.vue b/frontend/components/ArticlesContent/SideBar/Right/RelatedArticles.vue
@@ -1,4 +1,3 @@
-import { serve } from 'esbuild';
 <script setup>
 const props = defineProps({
   author: {
@@ -12,7 +11,6 @@ const { data: ArticleList } = await useFetch(`/api/articles/tags?tags=${JSON.str
 const route = useRoute()
 const id = ref(route.params.id)
 // 过滤掉当前文章
-
 const articleList = ArticleList.value.filter(item => item.id !== id.value)
 </script>
 

diff --git a/frontend/components/ArticlesContent/SideBar/Right/index.vue b/frontend/components/ArticlesContent/SideBar/Right/index.vue
@@ -1,17 +1,64 @@
-<script setup>
-defineProps({
-  article: Object,
+<script setup lang="ts">
+/**
+ *  @description: 获取目录
+ *
+ */
+import { getProcessor } from 'bytemd'
+import { visit } from 'unist-util-visit'
+import type { ICatalogue } from '@/types/IArticleItem'
+const props = defineProps({
+  article: {
+    type: Object,
+    required: true,
+  },
 })
+const catalogueList = ref<ICatalogue []>([]) // 目录
+const stringifyHeading = (e: any) => {
+  let result = ''
+  visit(e, (node) => {
+    if (node.type === 'text')
+      result += node.value
+  })
+  return result
+}
+getProcessor({
+  plugins: [
+    {
+      rehype: p =>
+        p.use(() => (tree: any) => {
+          if (tree && tree.children.length) {
+            const items: { level: number;text: string } [] = []
+            tree.children
+              .filter((v: any) => v.type === 'element')
+              .forEach((node: any) => {
+                // 过滤掉主题和高亮
+                const removeTheme = node.children.filter((item: any) => item.value?.includes('theme'))
+                const removeHl = node.children.filter((item: any) => item.value?.includes('highlight'))
+
+                if (node.tagName[0] === 'h' && !!node.children.length && removeTheme.length === 0 && removeHl.length === 0) {
+                  const i = Number(node.tagName[1])
+                  items.push({
+                    level: i,
+                    text: stringifyHeading(node),
+                  })
+                }
+              })
+            catalogueList.value = items.filter(v => v.level === 1 || v.level === 2 || v.level === 3)
+          }
+        }),
+    },
+  ],
+}).processSync(props.article.content)
 const { immerseState } = useImmerse()
 </script>
 
 <template>
   <div class="sidebar hidden lg:block lg:w-4/12">
-    <ArticlesContentSideBarRightAuthor v-if="!immerseState" :author="article.authorId" />
-    <ArticlesContentSideBarRightRelatedArticles v-if="!immerseState" class="sidebar-block" :author="article.authorId" :tags="article.tagIds" />
+    <ArticlesContentSideBarRightAuthor v-if="!immerseState" :author="article!.authorId" />
+    <ArticlesContentSideBarRightRelatedArticles v-if="!immerseState" class="sidebar-block" :author="article!.authorId" :tags="article!.tagIds" />
     <div class="sticky-block-box">
-      <ArticlesContentSideBarRightCatalogue class="sidebar-block" :content="article.content" />
-      <ArticlesContentSideBarRightColumn :column="article.columId" />
+      <ArticlesContentSideBarRightCatalogue v-if="catalogueList.length !== 0"  class="sidebar-block" :catalogue-list="catalogueList"  />
+      <ArticlesContentSideBarRightColumn v-if="Object.keys(article!.columId).length !== 0 " :column="article!.columId" />
     </div>
   </div>
 </template>

diff --git a/frontend/components/ArticlesContent/index.vue b/frontend/components/ArticlesContent/index.vue
@@ -14,12 +14,7 @@ import themeStyle from './themeStyle'
 import highlightStyle from './highlightStyle'
 import type { IArticle } from '~~/types/IArticle'
 
-defineProps({
-  article: {
-    type: Object as () => IArticle,
-    required: true,
-  },
-})
+defineProps<{ article: IArticle }>()
 const plugins = [breaks(), frontmatter(), highlightStyle(), themeStyle(), gemoji(), gfm(), highlight(), math(), medium({ background: 'rgba(0, 0, 0, 0.7)' }), mermaid()]
 
 // 赋值属性唯一ID

diff --git a/frontend/pages/article/[id].vue b/frontend/pages/article/[id].vue
@@ -1,8 +1,26 @@
-<!-- eslint-disable no-console -->
 <script setup lang="ts">
+import type { IArticle } from '@/types/IArticle'
 const route = useRoute()
 const url = ref(`/api/articles/${route.params.id}`)
+
 const { data: articleData } = await useFetch(url)
+const articleDataList = ref<IArticle>()
+articleDataList.value = articleData.value.article
+useHead({
+  title: articleDataList.value?.title,
+  meta: [
+    {
+      hid: 'description',
+      name: 'description',
+      content: articleDataList.value?.summary,
+    },
+    {
+      hid: 'keywords',
+      name: 'keywords',
+      content: articleDataList.value?.tagIds.data.join(','),
+    },
+  ],
+})
 const isRender = useState('isRender', () => false)
 onMounted(() => {
   isRender.value = true
@@ -13,12 +31,12 @@ onMounted(() => {
   <div class="view-container">
     <main class="container main-container relative w-100% max-w-960px my-0 mx-auto" style="max-width: 1140px">
       <div v-show="isRender" class="view column-view mt-1.767rem" pb-8rem>
-        <ArticlesContentSideBarLeft :commented="articleData.article.commented" :liked="articleData.article.liked" />
+        <ArticlesContentSideBarLeft :commented="articleDataList?.commented" :liked="articleDataList?.liked" />
         <div class="main-area article-area" mb-1.5rem>
-          <ArticlesContent :article="articleData.article" />
-          <ArticlesContentEnd :type="articleData.article.typeId" :tag="articleData.article.tagIds" />
+          <ArticlesContent :article="articleDataList" />
+          <ArticlesContentEnd :type="articleDataList?.typeId" :tag="articleDataList?.tagIds.data" />
         </div>
-        <ArticlesContentSideBarRight :article="articleData.article" />
+        <ArticlesContentSideBarRight :article="articleDataList" />
       </div>
     </main>
   </div>

diff --git a/frontend/server/api/articles/[id].ts b/frontend/server/api/articles/[id].ts
@@ -16,6 +16,7 @@ export default defineEventHandler(async (event): Promise<IArticle> => {
           cover
           createdAt
           updatedAt
+          summary
           authorId{
             data{
               id