优化页面组件

mdddj · Sep 30, 2024 · 4d6f710 · 4d6f710
1 parent bbb94a0
commit 4d6f710
Show file tree

Hide file tree

Showing 11 changed files with 115 additions and 69 deletions.
diff --git a/dist/100.async.js b/dist/100.async.js
diff --git a/dist/471.async.js b/dist/471.async.js
diff --git a/dist/p__detail__$id.async.js b/dist/p__detail__$id.async.js
diff --git a/dist/p__doc__doc_page.async.js b/dist/p__doc__doc_page.async.js
diff --git a/dist/p__index.async.js b/dist/p__index.async.js
diff --git a/dist/umi.css b/dist/umi.css
diff --git a/dist/umi.js b/dist/umi.js
diff --git a/src/components/blog.tsx b/src/components/blog.tsx
@@ -1,7 +1,21 @@
-import {Blog} from "@/models/blog";
+import {Blog, Category} from "@/models/blog";
 import React from "react";
 import {fromNow} from "@/tools/date";
 import {useNavigate} from "@@/exports";
+import HoverPanel from "@/components/hover_panel";
+
+
+const CategoryWidget: React.FC<{ category: Category }> = ({category}) => {
+    return <div className="rounded-full border-gray-200 border-2 flex gap-2 px-4 py-1">
+            <div className="avatar">
+                <div className="w-6 h-6 rounded">
+                    <img src={category.logo} alt={category.name}/>
+                </div>
+            </div>
+            <span className={''}>{category.name}</span>
+    </div>
+}
+
 
 const BlogCard: React.FC<{ blog: Blog }> = ({blog}) => {
 
@@ -10,19 +24,12 @@ const BlogCard: React.FC<{ blog: Blog }> = ({blog}) => {
         <div onClick={() => nav(`/detail/${blog.id}`)}
              className="card hover:border-l-2 shadow hover:shadow-xl hover:border-l-primary bg-base cursor-pointer relative transition-transform duration-300  hover:transform hover:-translate-y-1 focus-within:border-green-500 focus-within:transform focus-within:-translate-y-1 focus-within:outline-none">
             <div className={"card-body"}>
-                <h4 className="font-bold text-xl hover:text-primary card-title    ">{blog.title}</h4>
+                <h4 className="font-bold text-xl hover:text-primary card-title">{blog.title}</h4>
                 <div className={"text-xs text-default-500 mt-1"}>
                     梁典典发布于{fromNow(blog.createTime)}
                 </div>
                 <div className={"flex flex-wrap gap-2 items-center mt-3"}>
-                    <div className="badge badge-outline py-3">
-                        <div className="avatar">
-                            <div className="w-4 rounded">
-                                <img src={blog.category.logo} alt={blog.category.name}/>
-                            </div>
-                        </div>
-                        <span className={"ml-1"}>{blog.category.name}</span>
-                    </div>
+                    <CategoryWidget category={blog.category}/>
                     {blog.tags.map((tag) => (
                         <span className={"text-default-500 text-sm"} key={tag.id}>
               #{tag.name}

diff --git a/src/components/hover_panel.tsx b/src/components/hover_panel.tsx
@@ -0,0 +1,33 @@
+import React, {PropsWithChildren, useState} from "react";
+
+type Props = {
+    panel: React.ReactNode;
+}
+
+const HoverPanel : React.FC<PropsWithChildren<Props>> = ({children,panel}) => {
+    const [isHovered, setIsHovered] = useState(false);
+
+    const handleMouseEnter = () => {
+        setIsHovered(true);
+    };
+
+    const handleMouseLeave = () => {
+        setIsHovered(false);
+    };
+
+    return (
+        <div className="relative" onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
+            {children}
+            {isHovered && (
+                <div className="absolute top-full left-0 bg-neutral text-neutral-content mt-2 card shadow-lg">
+                    <div className={'card-body'}>
+                        {panel}
+                    </div>
+
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default HoverPanel;
diff --git a/src/components/md_header.tsx b/src/components/md_header.tsx
@@ -159,7 +159,7 @@ const Documents: React.FC<Props> = ({md}) => {
     };
 
     return (
-        <div className={'card shadow-2xl m-2'}>
+        <div className={'card shadow-2xl m-2 hidden md:block'}>
             <div className={'card-body'}>
                 {
                     titles.length > 0 && <h2 className={'font-bold text-2xl card-title'}>目录</h2>

diff --git a/src/pages/doc/doc_page.tsx b/src/pages/doc/doc_page.tsx
@@ -9,14 +9,15 @@ import MarkdownComponent from "@/components/markdown";
 import FolderSvg from "@/components/folder_svg";
 import MdSvg from "@/components/md_svg";
 import {fromNow} from "@/tools/date";
+import Documents from "@/components/md_header";
 
 
 type Type = {
     doc: DocDirectory,
-    onClick:(file: MarkdownFile) => void,
+    onClick: (file: MarkdownFile) => void,
     selectedFile: MarkdownFile | undefined,
 }
-const Menu: React.FC<Type> = ({doc,onClick,selectedFile}) => {
+const Menu: React.FC<Type> = ({doc, onClick, selectedFile}) => {
     const [isMenuOpen, setIsMenuOpen] = useState(false);
     const toggleMenu = () => {
         setIsMenuOpen(!isMenuOpen);
@@ -52,11 +53,12 @@ const Menu: React.FC<Type> = ({doc,onClick,selectedFile}) => {
                                 {child.files && Array.isArray(child.files) && (
                                     <ul>
                                         {child.files.map((file) => (
-                                            <li key={file.id}  onClick={() => {
+                                            <li key={file.id} onClick={() => {
                                                 toggleMenu()
                                                 onClick(file)
                                             }}>
-                                                <a className={selectedFile?.id == file.id ? 'active' : ''}> <MdSvg/>{file.name}</a>
+                                                <a className={selectedFile?.id == file.id ? 'active' : ''}>
+                                                    <MdSvg/>{file.name}</a>
                                             </li>
                                         ))}
                                     </ul>
@@ -77,7 +79,7 @@ const Menu: React.FC<Type> = ({doc,onClick,selectedFile}) => {
             {/* 使用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 ${
+        <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 ${
             isMenuOpen ? 'block' : 'hidden'
         } sm:block`}>
             <li><a className={'text-lg font-bold'}>{doc.name}</a></li>
@@ -99,33 +101,37 @@ const DocPage: React.FC = () => {
         setSelectedFile(file);
     };
 
-    useEffect(()=>{
-        if(doc && doc.children.length >0 && !selectedFile){
+    useEffect(() => {
+        if (doc && doc.children.length > 0 && !selectedFile) {
             let first = doc.children[0]
-            if(first.files.length > 0){
+            if (first.files.length > 0) {
                 setSelectedFile(first.files[0])
             }
         }
-    },[
+    }, [
         doc
     ])
 
 
-
     return <div className={''}>
         {loading && <Loading/>}
         {!loading && !doc && <span>学习笔记不存在</span>}
         {doc && <div>
-            <div className="">
-                <Menu doc={doc}  onClick={handleFileClick} selectedFile={selectedFile}/>
+            <div className="relative">
+                <Menu doc={doc} onClick={handleFileClick} selectedFile={selectedFile}/>
+                {selectedFile && <div className={'fixed right-0 bottom-0 mt-5 w-80'}>
+                    <Documents md={selectedFile.content}/>
+                </div>}
                 <div>
+
                     {selectedFile ? (
                         <div>
                             <h2 className="text-2xl font-bold mb-4">{selectedFile.name}</h2>
                             <div className={'text-neutral-500'}>
                                 发布时间:{fromNow(selectedFile.createDate)}
                             </div>
-                            <MarkdownComponent text={selectedFile.content}/>
+
+                            <MarkdownComponent id={'md-body'} text={selectedFile.content}/>
                         </div>
                     ) : (
                         <div className="text-center text-gray-500">请选择一个文档</div>