update: toc 组件

reason:

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) {

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

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>
   )