From 9e0782d5d7648c33741ae96cfa518f4f052bc23c Mon Sep 17 00:00:00 2001
From: lorenzozane <255499213@qq.com>
Date: Thu, 18 Apr 2024 00:27:39 +0800
Subject: [PATCH] =?UTF-8?q?update:=20toc=20=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

reason:
---
 src/components/ZPost/Preview.tsx |  2 +-
 src/components/ZToc/ZToc.tsx     | 45 ++++++++++++++++++++++++++++++++
 src/pages/Post/index.tsx         |  6 +++--
 3 files changed, 50 insertions(+), 3 deletions(-)
 create mode 100644 src/components/ZToc/ZToc.tsx

diff --git a/src/components/ZPost/Preview.tsx b/src/components/ZPost/Preview.tsx
index 444c726..915d95e 100644
--- a/src/components/ZPost/Preview.tsx
+++ b/src/components/ZPost/Preview.tsx
@@ -67,7 +67,7 @@ const Preview = forwardRef<HTMLDivElement, PreviewProps>(
         md.use(mdToc, {
           containerClass: "toc",
           containerId: "toc",
-          listType: "ol",
+          listType: "ul",
           listClass: "catalog-list",
           linkClass: "catalog-link",
           callback: function (html: any) {
diff --git a/src/components/ZToc/ZToc.tsx b/src/components/ZToc/ZToc.tsx
new file mode 100644
index 0000000..2d6cddd
--- /dev/null
+++ b/src/components/ZToc/ZToc.tsx
@@ -0,0 +1,45 @@
+import { reactRootElement } from "@/main"
+import { twclx } from "@/utils/twclx"
+import { css } from "@emotion/css"
+import useResizeObserver from "beautiful-react-hooks/useResizeObserver"
+import { ComponentProps, forwardRef, useEffect, useState } from "react"
+import { createPortal } from "react-dom"
+import tw from "twin.macro"
+
+interface ZTocProps extends ComponentProps<"a"> {
+  markdownContentRef: React.RefObject<HTMLDivElement>
+}
+
+const ZToc = forwardRef<HTMLDivElement, ZTocProps>((props, ref) => {
+  const contentSize = useResizeObserver(props.markdownContentRef)
+  const [rightWidth, setRightWidth] = useState(0)
+
+  useEffect(() => {
+    if (!props.markdownContentRef.current) return
+    const markdownContent = props.markdownContentRef.current
+    const rect = markdownContent.getBoundingClientRect()
+    const distanceToRight = window.innerWidth - rect.right
+    setRightWidth(distanceToRight)
+  }, [contentSize])
+
+  return createPortal(
+    <div
+      ref={ref}
+      className={twclx([
+        "prose fixed top-16 right-0 p-4 overflow-auto",
+        css`
+          width: ${rightWidth}px;
+          height: calc(100vh - 64px);
+          ul,
+          li,
+          ol {
+            ${tw`list-none pl-2`}
+          }
+        `,
+      ])}
+    ></div>,
+    reactRootElement,
+  )
+})
+
+export default ZToc
diff --git a/src/pages/Post/index.tsx b/src/pages/Post/index.tsx
index de3cc11..3489055 100644
--- a/src/pages/Post/index.tsx
+++ b/src/pages/Post/index.tsx
@@ -4,6 +4,7 @@ import Category from "@/components/ZPost/Category"
 import Datetime from "@/components/ZPost/Datetime"
 import Preview from "@/components/ZPost/Preview"
 import Tag from "@/components/ZPost/Tag"
+import ZToc from "@/components/ZToc/ZToc"
 import { useStore } from "@/store"
 import { uuidjs } from "@/utils/uuid"
 import { RiHashtag } from "@remixicon/react"
@@ -19,6 +20,7 @@ const Post = observer(() => {
   const [deleteLoading, setDeleteLoading] = useState(false)
   const [deleted, setDeleted] = useState(false)
   const tocContainerRef = useRef<HTMLDivElement>(null)
+  const contentRef = useRef<HTMLDivElement>(null)
 
   const { uuid: uuidparam } = useParams()
 
@@ -88,14 +90,14 @@ const Post = observer(() => {
         </div>
 
         {/* 文章内容 */}
-        <div className="break-words">
+        <div ref={contentRef} className="break-words">
           <Preview anchor toc tocContainerRef={tocContainerRef}>
             {post.content}
           </Preview>
         </div>
 
         {/* 目录 */}
-        <div ref={tocContainerRef} className="prose sticky top-0"></div>
+        <ZToc ref={tocContainerRef} markdownContentRef={contentRef} />
       </div>
     </div>
   )