Merge branch 'main' of github.com:MarleneJiang/ByteDream-JueJin into …

…youhua

backend/src/extensions/documentation/documentation/1.0.0/full_documentation.json

@@ -14,7 +14,7 @@
       "name": "Apache 2.0",
       "url": "https://www.apache.org/licenses/LICENSE-2.0.html"
     },
-    "x-generation-date": "2023-02-18T15:17:00.843Z"
+    "x-generation-date": "2023-02-19T08:18:39.372Z"
   },
   "x-strapi-config": {
     "path": "/documentation",

frontend/assets/css/main.css

@@ -96,6 +96,7 @@
   --jjext-color-fill: #3686ff;
   --jjext-color-more-list: #9aa3ab;
   --jjext-color-more-list-border: #ddd;
+  --jjext-color-column-primary-bg: #1d7dfa;
   --juejin-color-navs-item-after: #ef4444;
   --juejin-color-types-list: #71777c;
   --juejin-color-types-list-tag: #8a9aa9;
@@ -230,6 +231,7 @@ html {
   --juejin-search-border:#ebebeb;
   --juejin-search-text:#5e6369;
   --juejin-404-bg:#fff;
+  --juejin-column-container-bg:#f7f8fa;
 }
 
 html.dark {
@@ -362,6 +364,7 @@ html.dark {
   --juejin-search-border:#b9babe59;
   --juejin-search-text:#fff;
   --juejin-404-bg:#222323;
+  --juejin-column-container-bg:#1e1e20;
 }
 
 .page-enter-active,

frontend/components/ArticlesContent/End/ColumnContainer.vue

@@ -56,10 +56,10 @@ const handleClick = async (i: any) => {
 
 <style scoped>
 .column-container {
-  @apply mt-40px relative bg-#f7f8fa p-1.333rem rounded-4px;
+  @apply mt-40px relative bg-jj-container-column-normal p-1.333rem rounded-4px;
 }
 .column-container .column-header .column-title {
-  @apply c-#515767 fw-400 text-14px lh-22px;
+  @apply c-jj-span fw-400 text-14px lh-22px;
 }
 .column-container .column-content {
   @apply max-h-258px mt-16px;
@@ -87,7 +87,7 @@ const handleClick = async (i: any) => {
   width: calc(100% - 216px);
 }
 .item-container .title {
-  @apply c-#252933 text-16px mb-4px lh-2rem fw-500 truncate;
+  @apply c-jj-font-normal text-16px mb-4px lh-2rem fw-500 truncate;
 }
 .item-container .tooltip {
   @apply w-100% relative inline-block;
@@ -96,18 +96,18 @@ const handleClick = async (i: any) => {
   @apply w-100% inline-block truncate;
 }
 .item-container .description {
-  @apply c-#8a919f text-14px lh-22px truncate;
+  @apply c-jj-font-entry-normal text-14px lh-22px truncate;
 }
 
 .item-container .btn {
   @apply text-14px lh-34px rd-4px w-60px h-34px ml-auto f-c-c py-0 px-43px whitespace-nowrap border-1px;
   transition: all 0.3s;
 }
 .primary {
-  @apply c-#fff bg-#1d7dfa hover:bg-#388eff;
+  @apply c-jj_font_white bg-jj-container-bg-normal hover:bg-jj-button-primary-normal;
 }
 .cancel {
-  @apply bg-jj_bg c-jj-font-entry-normal border-solid border-1px border-#1d7dfa;
+  @apply bg-jj_bg c-jj-font-entry-normal border-solid border-1px border-jj-container-bg-normal;
 }
 @keyframes spin {
   from {
@@ -124,7 +124,7 @@ const handleClick = async (i: any) => {
 }
 
 .tooltip .tooltiptext {
-  @apply absolute z-1 bottom-113% h-45px lh-45px  px-14px text-#fff text-center rd-6px opacity-0 invisible bg-jj-black-tooltip-normal text-ellipsis;
+  @apply absolute z-1 bottom-113% h-45px lh-45px  px-14px text-jj_font_white text-center rd-6px opacity-0 invisible bg-jj-black-tooltip-normal text-ellipsis;
   white-space: nowrap;
   transition: visibility 0s linear 0.3s, opacity 0.3s linear;
 }

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

@@ -9,9 +9,15 @@ const props = defineProps<{
  * @description: 目录点击事件
  */
 const isActive = shallowRef<number>()
+const heading = ref<HTMLElement[]>([])
+const headerHeight = shallowRef(0)
+
 const activeSelect = (index: number) => {
   if (isActive.value === index)
     return
+  // a标签锚点定位时跳转会出现将元素置最左, 所以用scrollIntoView定位
+  heading.value[index].scrollIntoView()
+  window.scrollBy(0, -headerHeight.value - 30)
   isActive.value = index
 }
 const catalogueClass = (level: number) => {
@@ -34,17 +40,22 @@ const itemOffsetTop = ref<{ key: number; top: number }[]>([])
 const navRef = ref()
 const liRef = ref<HTMLElement[]>([])
 const navMid = shallowRef(0)
-const headerHeight = shallowRef(0)
 const catalogueEleTop = shallowRef(0)
 const currentScrollTop = shallowRef(0)
 
 const getInitByScroll = () => {
+  const articleDom = document.getElementById('markdown-body')
+  const headings = articleDom?.querySelectorAll('h1, h2, h3')
+  headings?.forEach((item: any) => {
+    heading.value.push(item)
+  })
+
   navMid.value = navRef.value.clientHeight / 2
   headerHeight.value = document.querySelector('.main-header')!.clientHeight
   catalogueEleTop.value = (document.querySelector('.sticky-block-box') as HTMLElement).offsetTop
   itemOffsetTop.value = []
   props.catalogueList.forEach((val, i) => {
-    const firstHead = document.querySelector(`#heading-${i}`) as HTMLElement
+    const firstHead = heading.value[i]
     if (firstHead) {
       itemOffsetTop.value?.push({
         key: i,
@@ -54,12 +65,11 @@ const getInitByScroll = () => {
   })
 }
 const onScroll = () => {
-  const documentElement = document.documentElement
-  currentScrollTop.value = documentElement.scrollTop
+  currentScrollTop.value = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
   const scrollTop = currentScrollTop.value - headerHeight.value + 20
   const itemOffsetTopLength = itemOffsetTop.value.length
   for (let n = 0; n < itemOffsetTopLength; n++) {
-    if (scrollTop >= itemOffsetTop.value[n].top)
+    if (scrollTop >= itemOffsetTop.value[n].top - headerHeight.value)
       isActive.value = itemOffsetTop.value[n].key
   }
 
@@ -99,36 +109,28 @@ const scrollFixedCatalogue = () => {
 }
 
 watch(isNavShown, (val) => {
-  if (val)
-    sideBar?.classList.remove('top')
-  else
-    sideBar?.classList.add('top')
+  val ? sideBar?.classList.remove('top') : sideBar?.classList.add('top')
 })
 
 watch(immerseState, (val) => {
-  if (val)
-    sideBar!.classList.add('sticky')
-  else
-    scrollFixedCatalogue()
+  val ? sideBar!.classList.add('sticky') : scrollFixedCatalogue()
 })
 
 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()
-  //   }
-  // }
 
   nextTick(() => {
     getInitByScroll()
     getInitByScrollFixedCatalogue()
+    const route = useRoute()
+    if (route.hash) {
+      const hashIndex = route.hash.slice(9)
+      if (Number(hashIndex) !== -1) {
+        activeSelect(Number(hashIndex))
+        isActive.value = Number(hashIndex)
+      }
+    }
   })
 })
 
@@ -160,10 +162,6 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
-#heading-3 {
-  @apply relative top--50px;
-}
-
 .sidebar-block {
   @apply relative mb-20px;
 }

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

@@ -72,7 +72,7 @@ const { immerseState } = useImmerse()
   right: 0;
   width: 25rem;
 }
-.sticky .sticky-block-box {
+.sidebar.sticky .sticky-block-box {
   position: fixed;
   top: 6.766999999999999rem;
   width: inherit;

frontend/components/ArticlesContent/index.vue

@@ -27,7 +27,7 @@ function transformToId() {
       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}`)
+          children[i].setAttribute('data-id', `heading-${index}`)
           index++
         }
       }
@@ -63,7 +63,7 @@ const { immerseState } = useImmerse()
 
         <div v-show="!immerseState" class="text-1.167rem color-[#8a919f] lh-22px mt-2px">
           <time :datetime="article.updatedAt" :title="article.updatedAt" class="tracking-1px">
-            {{ useDateFormat(article.updatedAt, 'YYYY-MM-DD HH:mm:ss').value }}
+            {{ useDateFormat(article.updatedAt, 'YYYY年MM月DD日 HH:mm:ss').value }}
           </time>
           <span class="views-count"> ·&nbsp;&nbsp;阅读 {{ article.viewed }} </span>
         </div>

frontend/components/Uno/DarkToggle.vue

@@ -8,24 +8,14 @@ const themeColor = computed(() => {
   return color.value === 'dark' ? '#000000' : '#ffffff'
 })
 if (process.client) {
-  const item = localStorage.getItem('nuxt-color-mode') || 'dark'
-  localStorage.setItem('nuxt-color-mode', item)
   const setDark = () => {
     color.preference = color.value = 'dark'
   }
   const setLight = () => {
     color.preference = color.value = 'light'
   }
-  const setItem = () => {
-    color.preference = color.value = item
-  }
   // 先获取media
   const media = window.matchMedia('(prefers-color-scheme:dark)')
-  // 判断是否为暗主题
-  if (media.matches)
-  // 如果是暗色主题则使用localStorage储存的上次使用的主题颜色
-    setItem()
-
   // 上面操作只会在页面加载时才会生效，因此，需要给media添加事件监听器
   // MediaQueryList的maches属性会返回媒体查询的结果
   function handleColorChange(e: MediaQueryListEvent) {

frontend/layouts/default.vue

@@ -5,3 +5,11 @@
     <AsideSuspensionPanel class="fixed right-3 bottom-1 suspension-panel z-1000" />
   </main>
 </template>
+
+<style scoped>
+@media (max-width: 960px) {
+  .suspension-panel {
+    display: none;
+  }
+}
+</style>

frontend/pages/article/[id].vue

@@ -60,7 +60,7 @@ onMounted(() => {
   padding-right: 2.67rem;
   box-sizing: border-box;
   position: relative;
-  width: 800px;
+  width: 820px;
   max-width: 100%;
   @apply bg-jj-article mb-1.5rem;
 }
@@ -79,12 +79,8 @@ onMounted(() => {
     position: relative;
     max-width: 100%;
     box-sizing: border-box;
-  }
-}
-
-@media (max-width: 960px) {
-  .suspension-panel {
-    display: none;
+    padding-left: 2rem;
+    padding-right: 2rem;
   }
 }
 

frontend/unocss.config.ts

@@ -78,6 +78,12 @@ export default defineConfig({
           hover: {
             normal: 'var(--juejin-color-container-hover)', // #F7F8FA #333
           },
+          column: {
+            normal: 'var(--juejin-column-container-bg)',
+          },
+          bg: {
+            normal: 'var(--jjext-color-column-primary-bg)', // #1d7dfa
+          },
         },
         border: {
           normal: 'var(--juejin-article-list-border)', // #e4e6eb #212123