From 2cf6c6d29e01f5e7793a3e0fe01e5d678c10a432 Mon Sep 17 00:00:00 2001
From: Innei <tukon479@gmail.com>
Date: Fri, 12 Aug 2022 11:16:16 +0800
Subject: [PATCH] fix: toc depth

Signed-off-by: Innei <tukon479@gmail.com>
---
 src/components/app/ErrorBoundary/index.tsx   | 35 ++++++++++++++++++++
 src/components/layouts/BasicLayout/index.tsx |  1 +
 src/components/widgets/Toc/index.tsx         | 10 +++---
 src/components/widgets/Toc/item.tsx          | 33 ++++++++++--------
 4 files changed, 62 insertions(+), 17 deletions(-)
 create mode 100644 src/components/app/ErrorBoundary/index.tsx

diff --git a/src/components/app/ErrorBoundary/index.tsx b/src/components/app/ErrorBoundary/index.tsx
new file mode 100644
index 000000000..0d88d70c0
--- /dev/null
+++ b/src/components/app/ErrorBoundary/index.tsx
@@ -0,0 +1,35 @@
+import React, { Component } from 'react'
+
+export class ErrorBoundary extends Component<{
+  children: React.ReactNode
+  [k: string]: any
+}> {
+  state: any = {
+    error: null,
+    errorInfo: null,
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error(error, 'render error')
+    console.error(errorInfo)
+
+    this.setState({
+      error,
+      errorInfo,
+    })
+  }
+
+  render() {
+    const { errorInfo } = this.state
+    const { children, ...restProps } = this.props
+
+    if (errorInfo) {
+      return <div>渲染报错</div>
+    }
+
+    // @ts-ignore
+    return React.cloneElement(children, {
+      ...restProps,
+    })
+  }
+}
diff --git a/src/components/layouts/BasicLayout/index.tsx b/src/components/layouts/BasicLayout/index.tsx
index 9a5e7af63..7095059a3 100644
--- a/src/components/layouts/BasicLayout/index.tsx
+++ b/src/components/layouts/BasicLayout/index.tsx
@@ -133,6 +133,7 @@ export const BasicLayout: FC = observer(({ children }) => {
       </Suspense>
 
       <div className="app-content">{children}</div>
+
       <Suspense fallback={null}>
         <Footer />
         <MusicMiniPlayerStoreControlled />
diff --git a/src/components/widgets/Toc/index.tsx b/src/components/widgets/Toc/index.tsx
index 54acd8cd1..afdaf356b 100644
--- a/src/components/widgets/Toc/index.tsx
+++ b/src/components/widgets/Toc/index.tsx
@@ -96,10 +96,12 @@ export const Toc: FC<TocProps> = memo(
                       depth={heading.depth}
                       title={heading.title}
                       key={heading.title}
-                      rootDepth={headings.reduce(
-                        (d: number, cur) => Math.min(d, cur.depth),
-                        headings[0].depth,
-                      )}
+                      rootDepth={
+                        headings.reduce(
+                          (d: number, cur) => Math.min(d, cur.depth),
+                          headings[0].depth,
+                        ) as any as number
+                      }
                     />
                   </RightLeftTransitionView>
                 )
diff --git a/src/components/widgets/Toc/item.tsx b/src/components/widgets/Toc/item.tsx
index 1214fe902..7c156aae2 100644
--- a/src/components/widgets/Toc/item.tsx
+++ b/src/components/widgets/Toc/item.tsx
@@ -1,6 +1,6 @@
 import { clsx } from 'clsx'
 import type { FC } from 'react'
-import { memo, useEffect, useMemo } from 'react'
+import { memo, useCallback, useEffect, useMemo } from 'react'
 
 import { springScrollToElement } from '~/utils/spring'
 
@@ -24,25 +24,32 @@ export const TocItem: FC<{
   const renderDepth = useMemo(() => {
     const result = depth - rootDepth
 
-    return result == 0 ? 1 : result
+    return result
   }, [depth, rootDepth])
   return (
     <a
       data-index={index}
       href={`#${title}`}
       className={clsx(styles['toc-link'], active && styles['active'])}
-      style={{
-        paddingLeft: depth >= rootDepth ? `${1.2 * renderDepth}rem` : undefined,
-      }}
+      style={useMemo(
+        () => ({
+          paddingLeft:
+            depth >= rootDepth ? `${1.2 + renderDepth * 0.6}rem` : undefined,
+        }),
+        [depth, renderDepth, rootDepth],
+      )}
       data-depth={depth}
-      onClick={(e) => {
-        e.preventDefault()
-        onClick(index)
-        const $el = document.getElementById(title)
-        if ($el) {
-          springScrollToElement($el, undefined, -100)
-        }
-      }}
+      onClick={useCallback(
+        (e) => {
+          e.preventDefault()
+          onClick(index)
+          const $el = document.getElementById(title)
+          if ($el) {
+            springScrollToElement($el, undefined, -100)
+          }
+        },
+        [index, title, onClick],
+      )}
     >
       <span className={styles['a-pointer']}>{title}</span>
     </a>