细节更新

mdddj · Oct 7, 2024 · af33ff9 · af33ff9
1 parent 44b9782
commit af33ff9
Show file tree

Hide file tree

Showing 9 changed files with 59 additions and 14 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "axios": "^1.7.7",
     "axios-hooks": "^5.0.2",
     "dayjs": "^1.11.13",
+    "framer-motion": "^11.11.1",
     "g": "^2.0.1",
     "highlight.js": "^11.10.0",
     "markdown-it": "^14.1.0",

diff --git a/src/components/appbar.tsx b/src/components/appbar.tsx
@@ -2,16 +2,46 @@ import React, {useEffect, useRef} from "react";
 import {appMenuStore} from "@/providers/menu";
 import ThemeSetting from "./theme_setting";
 import {showDialogModal} from "@/tools/fun";
-import {NavLink} from "@@/exports";
+import {NavLink, useMatch} from "@@/exports";
 import MiniAppWidget from "@/components/mini_app_widget";
 import MyDocMenuElement from "@/components/doc_menu";
 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 "典典博客"
+    }
+
+    const title = GetShowTitle()
+    return <>
+        <NavLink to={"/"} className="btn btn-ghost text-xl">
+            <motion.p
+                key={title} // 使用 key 来触发动画
+                initial={{ opacity: 0, y: 10 }}  // 初始状态：透明且稍微向下
+                animate={{ opacity: 1, y: 0 }}   // 动画到：完全显示且位置恢复
+                exit={{ opacity: 0, y: -10 }}    // 离开时的动画：透明且向上
+                transition={{ duration: 0.5 }}   // 过渡时间
+            >
+                {title}
+            </motion.p>
+        </NavLink>
+    </>
+}
+
 export default function AppBar() {
     const menus = appMenuStore((state) => state.menus);
     const ref = useRef<HTMLDetailsElement>(null);
 
+
     //关闭弹出菜单
     const closeMenu = () => {
         if (ref.current) {
@@ -59,9 +89,7 @@ export default function AppBar() {
                     </ul>
                 </details>
                 <div className={'flex flex-row gap-2 text-center items-center'}>
-                    <NavLink to={"/"} className="btn btn-ghost text-xl">
-                        典典博客
-                    </NavLink>
+                    <AppbarTitle />
                     <div className={'dropdown dropdown-bottom hidden lg:inline'}>
                         <span tabIndex={0} role="button"
                               className={'badge badge-accent badge-outline hover:bg-accent hover:text-secondary-content cursor-pointer'}>在小程序打开</span>

diff --git a/src/components/blog.tsx b/src/components/blog.tsx
@@ -23,7 +23,7 @@ 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 break-words break-all card-title">{blog.title}</h4>
                 <div className={"text-xs text-default-500 mt-1"}>
                     梁典典发布于{fromNow(blog.createTime)}
                 </div>

diff --git a/src/components/md_header.tsx b/src/components/md_header.tsx
@@ -41,7 +41,6 @@ const Documents: React.FC<Props> = ({md}) => {
         // 获取到md数据后显示md内容和nav
         setTitles(addAnchor());
         setShow(true);
-        console.log(sourceMd)
     }, [sourceMd, setSourceMd]);
 
 

diff --git a/src/components/resource_card.tsx b/src/components/resource_card.tsx
@@ -7,7 +7,7 @@ type Prop = {
 }
 
 const ResourceCard: React.FC<Prop> = ({item}) => {
-    const {content,category: {name},user: {picture,nickName,enterprise},createDate,images} = item
+    const {content,category,user: {picture,nickName,enterprise},createDate,images} = item
 
     let enterpriseName = enterprise?.name
 
@@ -34,7 +34,7 @@ const ResourceCard: React.FC<Prop> = ({item}) => {
                         </div>
                     }
 
-                    <div className="badge badge-outline badge-lg">#{name}</div>
+                    <div className="badge badge-outline badge-lg">#{category?.name ?? "-"}</div>
                 </div>
             </div>
         </div>

diff --git a/src/pages/doc/doc_page.tsx b/src/pages/doc/doc_page.tsx
@@ -10,6 +10,7 @@ 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 Type = {

diff --git a/src/pages/group/index.tsx b/src/pages/group/index.tsx
@@ -21,17 +21,30 @@ export default function Page() {
 
     const selectId = match?.params.id
 
-    return (
-        <div className={'flex flex-row gap-10 relative'}>
-            <ul className={'menu flex-none bg-base-200 w-56 rounded-box'}>
+    return (<div>
+
+            <ul className={'md:hidden flex overflow-x-scroll space-x-2 p-2 whitespace-nowrap'}>
                 {
                     list.map(value => {
-                        return <li key={value.id}><Link className={`${selectId === `${value.id}` ? 'active' : ''}`} to={`/g/${value.id}`}>{value.name}</Link></li>
+                        return <li key={value.id}><Link
+                            className={`${selectId === `${value.id}` ? 'text-primary-content flex-shrink-0' : 'flex-shrink-0'}`}
+                            to={`/g/${value.id}`}>{value.name}</Link></li>
                     })
                 }
             </ul>
-            <div className={'grow'}>
-                <Outlet/>
+            <div className={'flex flex-row gap-10'}>
+                <ul className={'menu flex-none bg-base-200 w-56 rounded-box hidden md:block'}>
+                    {
+                        list.map(value => {
+                            return <li key={value.id}><Link className={`${selectId === `${value.id}` ? 'active' : ''}`}
+                                                            to={`/g/${value.id}`}>{value.name}</Link></li>
+                        })
+                    }
+                </ul>
+
+                <div className={'grow'}>
+                    <Outlet/>
+                </div>
             </div>
         </div>
     );

diff --git a/src/pages/group/list.tsx b/src/pages/group/list.tsx
@@ -15,6 +15,9 @@ const ResourceListWidget: React.FC = () => {
         return <div>not found</div>
     }
 
+    if(data){
+        console.log(data)
+    }
     if (loading) return <Loading/>
     return <div className={'flex flex-col gap-5'}>
         {