snowykami/neo-blog
1
0
Fork 0
mirror of https://github.com/snowykami/neo-blog.git synced 2025-09-05 08:46:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: 移除未使用的导入和优化Navbar组件的逻辑

Browse Source
This commit is contained in:
远野千束
2025-07-28 14:06:48 +08:00
parent c962cf572f
commit 9a5a5b99e6
3 changed files with 51 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web/src/components/blog-home.tsx
View File

@ -14,7 +14,6 @@ import { useStoredState } from '@/hooks/use-storage-state';
import { listLabels } from "@/api/label"; import { listLabels } from "@/api/label";
import { POST_SORT_TYPE } from "@/localstore"; import { POST_SORT_TYPE } from "@/localstore";
// 定义排序类型 // 定义排序类型
type SortType = 'latest' | 'popular'; type SortType = 'latest' | 'popular';

6
web/src/components/blog-post.tsx
View File

@ -4,6 +4,7 @@ import { Calendar, Clock, FileText, Flame, Heart, MessageCircle, PenLine, Square
import { MDXRemote } from "next-mdx-remote-client/rsc"; import { MDXRemote } from "next-mdx-remote-client/rsc";
import ScrollToTop from "@/components/scroll-to-top.client"; import ScrollToTop from "@/components/scroll-to-top.client";
import { RenderMarkdown } from "@/components/markdown"; import { RenderMarkdown } from "@/components/markdown";
import { isMobileByUA } from "@/utils/server/device";
function PostMeta({ post }: { post: Post }) { function PostMeta({ post }: { post: Post }) {
return ( return (
@ -59,9 +60,10 @@ function PostMeta({ post }: { post: Post }) {
); );
} }
function PostHeader({ post }: { post: Post }) { async function PostHeader({ post }: { post: Post }) {
const isMobile = await isMobileByUA();
return ( return (
<div className="relative py-32"> <div className={`relative ${isMobile ? "py-16" : "py-32"}`}>
{/* 背景层 */} {/* 背景层 */}
<div <div
className="pointer-events-none absolute inset-0 left-1/2 right-1/2 w-screen -translate-x-1/2 bg-gradient-to-bl from-blue-700 to-purple-700 dark:from-blue-500 dark:to-purple-500" className="pointer-events-none absolute inset-0 left-1/2 right-1/2 w-screen -translate-x-1/2 bg-gradient-to-bl from-blue-700 to-purple-700 dark:from-blue-500 dark:to-purple-500"

101
web/src/components/navbar.tsx
View File

@ -15,7 +15,7 @@ import {
import GravatarAvatar from "@/components/gravatar" import GravatarAvatar from "@/components/gravatar"
import { useDevice } from "@/contexts/device-context" import { useDevice } from "@/contexts/device-context"
import config from "@/config" import config from "@/config"
import { useState, useEffect } from "react" import { useState } from "react"
import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "@/components/ui/sheet" import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
import { Menu } from "lucide-react" import { Menu } from "lucide-react"
import { Switch } from "./ui/switch" import { Switch } from "./ui/switch"
@ -64,10 +64,8 @@ export function Navbar() {
} }
function NavMenuCenter() { function NavMenuCenter() {
const { isMobile } = useDevice()
if (isMobile) return null
return ( return (
<NavigationMenu viewport={false}> <NavigationMenu viewport={false} className="hidden md:block">
<NavigationMenuList className="flex space-x-1"> <NavigationMenuList className="flex space-x-1">
{navbarMenuComponents.map((item) => ( {navbarMenuComponents.map((item) => (
<NavigationMenuItem key={item.title}> <NavigationMenuItem key={item.title}>
@ -123,62 +121,57 @@ function ListItem({
} }
function SidebarMenuClientOnly() { function SidebarMenuClientOnly() {
const [mounted, setMounted] = useState(false);
useEffect(() => setMounted(true), []);
if (!mounted) return null;
return <SidebarMenu />; return <SidebarMenu />;
} }
function SidebarMenu() { function SidebarMenu() {
const [open, setOpen] = useState(false) const [open, setOpen] = useState(false)
const { isMobile } = useDevice()
if (!isMobile) return null
return ( return (
<Sheet open={open} onOpenChange={setOpen}> <div className="md:hidden">
<SheetTrigger asChild> <Sheet open={open} onOpenChange={setOpen}>
<button <SheetTrigger asChild>
aria-label="打开菜单" <button
className="p-2 rounded-md hover:bg-accent transition-colors" aria-label="打开菜单"
> className="p-2 rounded-md hover:bg-accent transition-colors"
<Menu className="w-6 h-6" /> >
</button> <Menu className="w-6 h-6" />
</SheetTrigger> </button>
<SheetContent side="right" className="p-0 w-64"> </SheetTrigger>
{/* 可访问性要求的标题，视觉上隐藏 */} <SheetContent side="right" className="p-0 w-64">
<SheetTitle className="sr-only">侧边栏菜单</SheetTitle> {/* 可访问性要求的标题，视觉上隐藏 */}
<nav className="flex flex-col gap-2 p-4"> <SheetTitle className="sr-only">侧边栏菜单</SheetTitle>
{navbarMenuComponents.map((item) => <nav className="flex flex-col gap-2 p-4">
item.href ? ( {navbarMenuComponents.map((item) =>
<Link item.href ? (
key={item.title} <Link
href={item.href} key={item.title}
className="py-2 px-3 rounded hover:bg-accent font-bold transition-colors" href={item.href}
onClick={() => setOpen(false)} className="py-2 px-3 rounded hover:bg-accent font-bold transition-colors"
> onClick={() => setOpen(false)}
{item.title} >
</Link> {item.title}
) : item.children ? ( </Link>
<div key={item.title} className="mb-2"> ) : item.children ? (
<div className="font-bold px-3 py-2">{item.title}</div> <div key={item.title} className="mb-2">
<div className="flex flex-col pl-4"> <div className="font-bold px-3 py-2">{item.title}</div>
{item.children.map((child) => ( <div className="flex flex-col pl-4">
<Link {item.children.map((child) => (
key={child.title} <Link
href={child.href} key={child.title}
className="py-2 px-3 rounded hover:bg-accent transition-colors" href={child.href}
onClick={() => setOpen(false)} className="py-2 px-3 rounded hover:bg-accent transition-colors"
> onClick={() => setOpen(false)}
{child.title} >
</Link> {child.title}
))} </Link>
))}
</div>
</div> </div>
</div> ) : null
) : null )}
)} </nav>
</nav> </SheetContent>
</SheetContent> </Sheet></div>
</Sheet>
) )
} }