Merge branch 'main' into 90-相关文章数据抽象化

backend/package.json

@@ -11,11 +11,11 @@
   },
   "devDependencies": {},
   "dependencies": {
-    "@strapi/plugin-documentation": "^4.5.6",
-    "@strapi/plugin-graphql": "^4.5.6",
-    "@strapi/plugin-i18n": "4.5.6",
-    "@strapi/plugin-users-permissions": "4.5.6",
-    "@strapi/strapi": "4.5.6",
+    "@strapi/plugin-documentation": "^4.6.0",
+    "@strapi/plugin-graphql": "^4.6.0",
+    "@strapi/plugin-i18n": "4.6.0",
+    "@strapi/plugin-users-permissions": "4.6.0",
+    "@strapi/strapi": "4.6.0",
     "better-sqlite3": "^8.0.1",
     "strapi-plugin-navigation": "^2.2.3",
     "strapi-plugin-transformer": "^2.2.0"

frontend/components/Articles/Item.vue

@@ -1,18 +1,19 @@
 <script setup lang="ts">
 const props = defineProps({
-  uname: String,
+  name: String,
   duration: String,
   title: String,
-  desc: String,
+  summary: String,
   tags: {
     type: Array,
-    default: () => [],
+    default: (): string[] => [],
   },
   topicHeat: {
     type: Array,
     default: (): number[] => [0, 0, 0],
   },
   postID: String,
+  cover: String,
 })
 const enteredtopicHeat: (string | number)[] = props.topicHeat.map((item) => {
   const value = item as number
@@ -22,10 +23,10 @@ const enteredtopicHeat: (string | number)[] = props.topicHeat.map((item) => {
 
 <template>
   <li class="focus:text-slate-500 flex justify-between items-center py-4 transition-all bg-white hover:bg-gray-50 b-b b-grey all-cursor-pointer">
-    <NuxtLink class="flex-auto pl-5 truncate" :to="`/${uname}`" style="flex: 1">
+    <NuxtLink class="flex-auto pl-5 truncate" :to="`/${name}`" style="flex: 1">
       <div class="flex items-center all-px-4 pr-4" style="font-size: 13px;">
-        <span class="border-r-1 pl-0">{{ uname }}</span>
-        <span class="text-gray-500 border-r-1">{{ duration }}前</span>
+        <span class="border-r-1 pl-0">{{ name }}</span>
+        <span class="text-gray-500 border-r-1">{{ duration }}</span>
         <div class="flex">
           <div v-for="(tag, index) in tags" :key="index" class="al-px-0 px-0 text-gray-500 items-center flex">
             <span class="px-0 text-gray-500">{{ tag }}</span>
@@ -38,7 +39,7 @@ const enteredtopicHeat: (string | number)[] = props.topicHeat.map((item) => {
           {{ title }}
         </div>
         <div class="truncate pt-4 text-slate-500" style="font-size: 13px;">
-          {{ desc }}
+          {{ summary }}
         </div>
       </div>
       <div class="flex all-flex all-items-center all-text-slate-700" style="font-size: 13px;">
@@ -58,7 +59,8 @@ const enteredtopicHeat: (string | number)[] = props.topicHeat.map((item) => {
     </NuxtLink>
     <div class="px-4">
       <nuxt-img
-        src="/og-image.png"
+        :src="cover"
+        :alt="summary"
         width="120"
         height="80"
         loading="lazy"

frontend/components/Articles/index.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-watchEffect(() => {
-  // TODO: 请求数据
-})
+const route = useRoute()
 let pagenum = 0
 const isLoading = useState('isLoading', () => false)
 const artlistData = useArtlist(await useFetchPostData())
@@ -10,13 +8,24 @@ const addArtListItem = () => {
     const timer = setTimeout(async () => {
       if (useScrollBottom()) {
         pagenum++
-        const newArtlistData = await useFetchPostData()
-        artlistData.value = newArtlistData
+        const type = route.path.replace('/', '')
+        const sort = route.query?.sort as string | undefined
+        const newArtlistData = await useFetchPostData(type, sort, pagenum)
+        artlistData.value.push(...newArtlistData)
       }
       clearTimeout(timer)
     }, 1000)
   }
 }
+watchEffect(() => {
+  const type = route.path.replace('/', '')
+  const sort = route.query?.sort as string | undefined
+  isLoading.value = true
+  useFetchPostData(type, sort).then((data) => {
+    artlistData.value = data
+    isLoading.value = false
+  })
+}, { flush: 'post' })
 onMounted(() => {
   const EmployeeWindow = window as any
   EmployeeWindow.addEventListener('scroll', addArtListItem)
@@ -33,10 +42,11 @@ onUnmounted(() => {
       <ArticlesLink />
       <UnoSelect />
     </div>
-    <ul v-if="!isLoading && artlistData">
+    <ul v-if="!isLoading">
       <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"
+        v-for="items in artlistData" :key="items.id" :name="items.name" :duration="items.duration"
+        :title="items.title" :summary="items.summary" :tags="items.tagIds" :topic-heat="items.topicHeat"
+        :cover="items.cover"
       />
     </ul>
     <ArticlesSkeleton v-else />

frontend/components/ArticlesContent/SideBar/Left.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 defineProps({
   commented: {
     type: Number,
@@ -7,6 +7,7 @@ defineProps({
     type: Number,
   },
 })
+const { immerseState, immerseToggle } = useImmerse()
 </script>
 
 <template>
@@ -103,28 +104,29 @@ defineProps({
         />
       </symbol>
     </svg>
-    <div :badge="liked" class="panel-btn with-badge">
-      <svg class="sprite-icon icon-zan" data-v-0f838daa=""><use xlink:href="#icon-zan" data-v-0f838daa="" /></svg>
+    <div v-show="!immerseState" :badge="liked" class="panel-btn with-badge">
+      <svg class="sprite-icon icon-zan"><use xlink:href="#icon-zan" /></svg>
     </div>
-    <div :badge="commented" class="panel-btn with-badge">
-      <svg class="sprite-icon icon-comment" data-v-0f838daa=""><use xlink:href="#icon-comment" data-v-0f838daa="" /></svg>
+    <div v-show="!immerseState" :badge="commented" class="panel-btn with-badge">
+      <svg class="sprite-icon icon-comment"><use xlink:href="#icon-comment" /></svg>
     </div>
-    <div class="panel-btn">
-      <svg class="sprite-icon icon-collect" data-v-0f838daa=""><use xlink:href="#icon-collect" data-v-0f838daa="" /></svg>
+    <div v-show="!immerseState" class="panel-btn">
+      <svg class="sprite-icon icon-collect"><use xlink:href="#icon-collect" /></svg>
       <div class="collect-popover" />
     </div>
-    <div class="share-btn panel-btn">
-      <svg data-v-0f838daa="" class="sprite-icon icon-share"><use data-v-0f838daa="" xlink:href="#icon-share" /></svg>
+    <div v-show="!immerseState" class="share-btn panel-btn">
+      <svg class="sprite-icon icon-share"><use xlink:href="#icon-share" /></svg>
       <div class="share-popup">
         <ul />
       </div>
     </div>
     <div class="divider" />
-    <div class="panel-btn">
-      <svg data-v-0f838daa="" class="sprite-icon icon-report"><use data-v-0f838daa="" xlink:href="#icon-report" /></svg>
+    <div v-show="!immerseState" class="panel-btn">
+      <svg class="sprite-icon icon-report"><use xlink:href="#icon-report" /></svg>
     </div>
-    <span class="tooltip"><span class="byte-tooltip__wrapper"><div class="panel-btn">
-      <svg class="sprite-icon icon-immerse" data-v-0f838daa=""><use xlink:href="#icon-immerse" data-v-0f838daa="" /></svg></div></span>
+    <span>
+      <span class="byte-tooltip__wrapper"><div class="panel-btn" :class="immerseState ? 'active tooltip block' : 'tooltip block'" @click="immerseToggle">
+        <svg class="sprite-icon icon-immerse"><use xlink:href="#icon-immerse" /></svg></div></span>
     </span>
   </div>
 </template>
@@ -165,17 +167,12 @@ defineProps({
   text-align: center;
   font-size: 1.67rem;
 }
-
 .divider {
   width: 32px;
   background: #e4e6eb;
   height: 1px;
   margin: 0 auto 1.667rem;
 }
-.tooltip {
-  display: block;
-  font-size: 0;
-}
 .panel-btn .sprite-icon {
   color: #8a919f;
   height: 100%;
@@ -187,10 +184,10 @@ defineProps({
   vertical-align: middle;
   transition: all 0.15s linear;
 }
-svg:not(:root) {
-  overflow: hidden;
-}
-svg{
+svg {
   display: inline;
 }
+.panel-btn:not(.share-btn).active .sprite-icon {
+  color: #1e80ff;
+}
 </style>

frontend/components/ArticlesContent/SideBar/Right.vue

@@ -11,7 +11,12 @@ const props = defineProps({
     type: Object,
   },
 })
-const Catalogue = ref([])
+
+/**
+ *  @description: 获取目录
+ *
+ */
+const Catalogue = ref([]) // 目录
 const stringifyHeading = (e) => {
   let result = ''
   visit(e, (node) => {
@@ -50,6 +55,9 @@ getProcessor({
   ],
 }).processSync(props.content)
 
+/**
+ * @description: 目录点击事件
+ */
 const isActive = ref()
 const activeSelect = (index) => {
   if (isActive.value === index)
@@ -69,6 +77,9 @@ const catalogueClass = (level) => {
   }
 }
 
+/**
+ * @description: 目录滚动事件
+ */
 const itemOffsetTop = ref([])
 const onScroll = () => {
   itemOffsetTop.value = []
@@ -92,28 +103,29 @@ const onScroll = () => {
 
   isActive.value = num
 }
-
 const throttledScrollHandler = useThrottleFn(() => {
   onScroll()
 }, 300)
-const calculateOffTop = () => {
-  window.addEventListener('scroll', throttledScrollHandler)
-}
 
+/**
+ * @description: 目录固定
+ */
 const firtstCatalogueTop = ref(0)
-
+const headerHeight = document.querySelector('.header').clientHeight
 const scrollFixedCatalogue = () => {
   const scrollTop = document.documentElement.scrollTop
   const sideBar = document.querySelector('.sidebar')
   const catalogue = document.querySelector('.sticky-block-box')
   if (scrollTop > catalogue.offsetTop)
     sideBar.classList.add('sticky')
-  if (sideBar.classList.contains('sticky') && scrollTop - 80 < firtstCatalogueTop.value)
+
+  if (sideBar.classList.contains('sticky') && (scrollTop - headerHeight) < firtstCatalogueTop.value)
     sideBar.classList.remove('sticky')
 }
 
 onMounted(() => {
-  calculateOffTop()
+  window.addEventListener('scroll', throttledScrollHandler)
+  window.addEventListener('scroll', scrollFixedCatalogue)
   const route = useRoute()
   setTimeout(() => {
     if (route.hash) {
@@ -127,18 +139,18 @@ onMounted(() => {
     }
   }, 1)
   firtstCatalogueTop.value = document.querySelector('.sticky-block-box').offsetTop
-  window.addEventListener('scroll', scrollFixedCatalogue)
 })
 
 onUnmounted(() => {
   window.removeEventListener('scroll', throttledScrollHandler)
   window.addEventListener('scroll', scrollFixedCatalogue)
 })
+const { immerseState } = useImmerse()
 </script>
 
 <template>
   <div class="sidebar hidden lg:block lg:w-4/12">
-    <ArticlesContentSideBarAuthor :author="props.author" />
+    <ArticlesContentSideBarAuthor v-show="!immerseState" :author="props.author" />
     <!-- <AsideArticleList /> -->
     <div class="sticky-block-box">
       <div class="sidebar-block catalog-block catalog-block pure isExpand" style="">
@@ -177,7 +189,6 @@ onUnmounted(() => {
 .sidebar-block {
   position: relative;
   margin-bottom: 1.5rem;
-  border-radius: 2px;
 }
 
 .sidebar .sidebar-block {