细节更新

mdddj · Oct 8, 2024 · 1e85258 · 1e85258
1 parent fff3846
commit 1e85258
Show file tree

Hide file tree

Showing 7 changed files with 125 additions and 73 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/dist/layouts__index.async.js b/dist/layouts__index.async.js
diff --git a/dist/p__doc__doc_page.async.js b/dist/p__doc__doc_page.async.js
diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
     "g": "^2.0.1",
     "highlight.js": "^11.10.0",
     "markdown-it": "^14.1.0",
-    "pnpm": "^9.12.0",
+    "pnpm": "^9.12.1",
     "react-hook-form": "^7.53.0",
     "theme-change": "^2.5.0",
     "umi": "^4.3.24",

diff --git a/src/components/appbar.tsx b/src/components/appbar.tsx
@@ -9,15 +9,8 @@ import { history } from 'umi';
 import { motion } from "framer-motion";
 
 
-
 const AppbarTitle : React.FC = () => {
-    const match = useMatch('/idea/:title')
-    const docTitle = match ? match.params.title : undefined;
-
     const GetShowTitle = () => {
-        if(docTitle){
-            return "典典博客-"+docTitle
-        }
         return "典典博客"
     }
 

diff --git a/src/components/doc_menu.tsx b/src/components/doc_menu.tsx
@@ -1,33 +1,70 @@
-import React, {useRef} from "react";
+import React, {useEffect, useRef} from "react";
 import {categoryStore} from "@/providers/category";
-import {NavLink} from "@@/exports";
+import {history, NavLink, useMatch} from "@@/exports";
+import {motion} from "framer-motion";
+
 type Type = {
     onClick?: () => void
 }
 const MyDocMenuElement: React.FC<Type> = ({onClick}) => {
     const docs = categoryStore((state) => state.data?.ideaDocs) ?? [];
     const ref = useRef<HTMLDetailsElement>(null);
+    const match = useMatch('/idea/:title')
+    const docTitle = match ? match.params.title : undefined;
+
+    const closeMenu = () => {
+        if (ref.current) {
+            ref.current.removeAttribute("open")
+        }
+    }
+
+
+    useEffect(() => {
+        const unListen = history.listen(() => {
+            closeMenu()
+        });
+
+        return () => {
+            unListen();
+        };
+    }, [history]);
+
     if (docs.length === 0) {
         return <></>
     }
-    return <>
-        <li>
-            <details ref={ref}>
-                <summary>学习笔记</summary>
-                <ul >
-                    {
-                        docs.map((doc) => (<li onClick={()=>{
-                            //关闭弹窗
-                            if (ref.current) {
-                                ref.current.removeAttribute("open")
-                            }
-                            onClick?.()
-                        }} className={''}><NavLink to={`/idea/${doc}`}>{doc}</NavLink></li>))
-                    }
-                </ul>
-            </details>
-        </li>
-    </>
+
+
+    const GetShowTitle = () => {
+        if (docTitle) {
+            return docTitle
+        }
+        return "笔记"
+    }
+
+    const title = GetShowTitle()
+
+    return (<li className={match ? 'active' : ''}>
+        <details ref={ref}>
+            <summary>
+                <motion.p
+                    key={title} // 使用 key 来触发动画
+                    initial={{opacity: 0, y: 10}}  // 初始状态：透明且稍微向下
+                    animate={{opacity: 1, y: 0}}   // 动画到：完全显示且位置恢复
+                    exit={{opacity: 0, y: -5}}    // 离开时的动画：透明且向上
+                    transition={{duration: 0.5}}   // 过渡时间
+                >{title}</motion.p>
+            </summary>
+            <ul className={'w-52'}>
+                {
+                    docs.map((doc) => (<li onClick={() => {
+                        closeMenu()
+                        onClick?.()
+                    }} className={''}><NavLink to={`/idea/${doc}`}>{doc}</NavLink></li>))
+                }
+            </ul>
+        </details>
+    </li>)
+
 }
 
 export default MyDocMenuElement;
diff --git a/src/pages/doc/doc_page.tsx b/src/pages/doc/doc_page.tsx
@@ -10,9 +10,55 @@ import FolderSvg from "@/components/folder_svg";
 import MdSvg from "@/components/md_svg";
 import {fromNow} from "@/tools/date";
 import Documents from "@/components/md_header";
-import {useMatch} from "@@/exports";
 
 
+type FilesProp = {
+    files: MarkdownFile[],
+    onSelectFile: (file: MarkdownFile) => void,
+    currentFile: MarkdownFile | undefined
+}
+const FilesWidget: React.FC<FilesProp> = ({files, onSelectFile, currentFile}) => {
+    return <>
+        <ul>
+            {files.map((file) => (
+                <li key={file.id} onClick={() => {
+                    onSelectFile(file)
+                }}>
+                    <a className={currentFile?.id == file.id ? 'active' : ''}>
+                        <MdSvg/>{file.name}</a>
+                </li>
+            ))}
+        </ul>
+    </>
+}
+
+type Props = {
+    children: DocDirectory[],
+    onSelectFile: (file: MarkdownFile) => void,
+    currentFile: MarkdownFile | undefined
+}
+
+const RenderMenu: React.FC<Props> = ({children, onSelectFile, currentFile}) => {
+    return <>
+        <li>
+            {children.map((child) => (
+                <ul key={child.name}>
+                    <li>
+                        <details open>
+                            <summary><FolderSvg/>{child.name}</summary>
+                            {child.files && Array.isArray(child.files) &&
+                                <FilesWidget currentFile={currentFile} files={child.files}
+                                             onSelectFile={onSelectFile}/>}
+                            {child.children && <RenderMenu children={child.children} onSelectFile={onSelectFile}
+                                                           currentFile={currentFile}/>}
+                        </details>
+                    </li>
+                </ul>
+            ))}
+        </li>
+    </>
+}
+
 type Type = {
     doc: DocDirectory,
     onClick: (file: MarkdownFile) => void,
@@ -23,61 +69,29 @@ const Menu: React.FC<Type> = ({doc, onClick, selectedFile}) => {
     const toggleMenu = () => {
         setIsMenuOpen(!isMenuOpen);
     };
-
-    // 滚动时关闭菜单的函数
     const closeMenuOnScroll = () => {
         setIsMenuOpen(false);
     };
-
-
-    // useEffect 用于监听滚动事件
     useEffect(() => {
-        // 当菜单打开时，添加滚动事件监听
         if (isMenuOpen) {
             window.addEventListener('scroll', closeMenuOnScroll);
         }
-
-        // 清除监听器
         return () => {
             window.removeEventListener('scroll', closeMenuOnScroll);
         };
     }, [isMenuOpen]);
 
-    const renderMenu = (children: DocDirectory[]) => {
-        return (
-            <li>
-                {children.map((child) => (
-                    <ul key={child.name}>
-                        <li>
-                            <details open>
-                                <summary><FolderSvg/>{child.name}</summary>
-                                {child.files && Array.isArray(child.files) && (
-                                    <ul>
-                                        {child.files.map((file) => (
-                                            <li key={file.id} onClick={() => {
-                                                toggleMenu()
-                                                onClick(file)
-                                            }}>
-                                                <a className={selectedFile?.id == file.id ? 'active' : ''}>
-                                                    <MdSvg/>{file.name}</a>
-                                            </li>
-                                        ))}
-                                    </ul>
-                                )}
-                                {child.children && renderMenu(child.children)}
-                            </details>
-                        </li>
-                    </ul>
-                ))}
-            </li>
-        );
-    };
+
+    const onSelectFile = (file: MarkdownFile) => {
+        onClick(file)
+        toggleMenu()
+    }
+
     return <>
         <button
             className="sm:hidden fixed top-2 left-2 p-2 mt-12 bg-base-200 rounded-md"
             onClick={toggleMenu}
         >
-            {/* 使用tailwind中的图标类，或者你可以使用你喜欢的图标 */}
             {isMenuOpen ? '关闭菜单' : '显示菜单'}
         </button>
         <ul className={`menu menu-xs rounded-lg bg-base-200 w-full max-w-xs fixed left-1 transition-transform duration-300 ease-in-out shadow-2xl ${
@@ -86,7 +100,8 @@ const Menu: React.FC<Type> = ({doc, onClick, selectedFile}) => {
             <li><a className={'text-lg font-bold'}>{doc.name}</a></li>
             <li><span>创建于{fromNow(doc.createDate)}</span></li>
             <div className={'divider'}></div>
-            {renderMenu(doc.children)}
+            <FilesWidget files={doc.files} onSelectFile={onSelectFile} currentFile={selectedFile}/>
+            <RenderMenu children={doc.children} onSelectFile={onSelectFile} currentFile={selectedFile}/>
         </ul>
     </>
 }
@@ -103,24 +118,31 @@ const DocPage: React.FC = () => {
     };
 
     useEffect(() => {
+        if(doc?.files && doc.files.length > 0){
+            setSelectedFile(doc.files[0])
+            return
+        }
         if (doc && doc.children.length > 0 && !selectedFile) {
             let first = doc.children[0]
             if (first.files.length > 0) {
                 setSelectedFile(first.files[0])
+            } else {
+                setSelectedFile(undefined)
             }
+        } else {
+            setSelectedFile(undefined)
         }
     }, [doc])
 
 
-
     return <div className={''}>
         {loading && <Loading/>}
-        {!loading && !doc && <span>学习笔记不存在</span>}
+        {!loading && !doc && <span>笔记不存在</span>}
         {doc && <div>
             <div className="relative">
                 <Menu doc={doc} onClick={handleFileClick} selectedFile={selectedFile}/>
                 <div className={'fixed right-0 bottom-0 mt-5 w-80'}>
-                    <Documents md={selectedFile?.content??''}/>
+                    <Documents md={selectedFile?.content ?? ''}/>
                 </div>
                 <div>
                     {selectedFile ? (