1

mdddj · Sep 18, 2024 · e2aaa0f · e2aaa0f
1 parent be93200
commit e2aaa0f
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 33 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/dist/p__detail__$id.async.js b/dist/p__detail__$id.async.js
diff --git a/dist/umi.css b/dist/umi.css
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.15",
     "@types/markdown-it": "^14.1.2",
-    "@types/react": "^18.3.5",
+    "@types/react": "^18.3.7",
     "@types/react-dom": "^18.3.0",
     "@umijs/lint": "^4.3.20",
     "@umijs/plugins": "^4.3.20",

diff --git a/src/components/md_header.tsx b/src/components/md_header.tsx
@@ -20,10 +20,10 @@ type Props = {
 }
 
 const Documents: React.FC<Props> = ({md}) => {
-    const [show, setShow] = useState(false);
+    const [, setShow] = useState(false);
     const [sourceMd, setSourceMd] = useState("");
     const [titles, setTitles] = useState<Title[]>([]);
-    const [isFix, setIsFix] = useState(false);
+    const [, setIsFix] = useState(false);
 
     useEffect(() => {
         // 请求文件
@@ -60,7 +60,13 @@ const Documents: React.FC<Props> = ({md}) => {
      */
     const formatNavItem = (headerDom: NodeListOf<HTMLElement>) => {
         // 将NodeList转换为数组，并提取出需要的属性
-        let headerArr = Array.prototype.slice
+        /**
+         * (双重循环，从后往前，逐渐将子节点存入父节点children属性)
+         * 1. 从后往前，将子标题直接存入前一个父级标题的children[]中
+         * 2. 如果前一个标题与当前标题(或标题数组)无直系关系，则直接将当前标题(或标题数组解构后)放入list数组
+         * 3. 循环多次，直到result数组长度无变化，结束循环
+         */
+        let result = Array.prototype.slice
             .call(headerDom)
             .map((item, index) => {
                 return {
@@ -71,14 +77,6 @@ const Documents: React.FC<Props> = ({md}) => {
                     nodeName: item.nodeName,
                 };
             }) as Title[];
-
-        /**
-         * (双重循环，从后往前，逐渐将子节点存入父节点children属性)
-         * 1. 从后往前，将子标题直接存入前一个父级标题的children[]中
-         * 2. 如果前一个标题与当前标题(或标题数组)无直系关系，则直接将当前标题(或标题数组解构后)放入list数组
-         * 3. 循环多次，直到result数组长度无变化，结束循环
-         */
-        let result = headerArr;
         let preLength = 0;
         let newLength = result.length;
         let num = 0;
@@ -140,8 +138,7 @@ const Documents: React.FC<Props> = ({md}) => {
             navItem.setAttribute("id", index.toString());
         });
         // 格式化标题数组，用于antd锚点组件自动生成锚点
-        let titles = formatNavItem(header);
-        return titles;
+        return formatNavItem(header);
     };
 
     /**
@@ -162,17 +159,22 @@ const Documents: React.FC<Props> = ({md}) => {
     };
 
     return (
-        <div>
-            <aside>
-                {titles.length > 0 && (
-                    <Anchor
-                        affix={false}
-                        offsetTop={100} // 设置距离页面顶部的偏移
-                        onClick={handleClickNavItem}
-                        items={titles}
-                    ></Anchor>
-                )}
-            </aside>
+        <div className={'card shadow-2xl m-2'}>
+            <div className={'card-body'}>
+                {
+                    titles.length > 0 && <h2 className={'font-bold text-2xl card-title'}>目录</h2>
+                }
+                <aside>
+                    {titles.length > 0 && (
+                        <Anchor
+                            affix={false}
+                            offsetTop={100} // 设置距离页面顶部的偏移
+                            onClick={handleClickNavItem}
+                            items={titles}
+                        ></Anchor>
+                    )}
+                </aside>
+            </div>
         </div>
     );
 };

diff --git a/src/pages/detail/$id.tsx b/src/pages/detail/$id.tsx
@@ -71,12 +71,8 @@ export default function Page() {
                     </div>
                 </div>
                 <div className={'relative'}>
-                    <div className={'fixed left-0 bottom-0 mt-5 w-80 card shadow-lg'}>
-                        <div className={'card-body'}>
-                            <h2 className="card-title">目录</h2>
-                            <Documents md={blog?.content ?? ""}/>
-                        </div>
-
+                    <div className={'fixed left-0 bottom-0 mt-5 w-80'}>
+                        <Documents md={blog?.content ?? ""}/>
                     </div>
                     <MarkdownComponent text={blog?.content ?? ""} id={'md-body'}/>