生产管理系统前端-1.修复两处滚动条 2.尽可能缩小菜单收缩,并且删除面包屑

This commit is contained in:
2025-10-22 17:46:12 +08:00
parent 8ea90d980b
commit 9866a86f32
4 changed files with 53 additions and 111 deletions

View File

@@ -229,44 +229,30 @@ export function SideBarOld({
// 使用 Next.js 标准路由跳转
router.push(path);
};
// 获取当前页面的面包屑
const getCurrentBreadcrumb = () => {
const allItems: { label: string; path?: string }[] = [];
menus.forEach(menu => {
if (menu.children?.some(child => child.path === currentPath)) {
allItems.push({ label: menu.label });
const activeChild = menu.children.find(child => child.path === currentPath);
if (activeChild) {
allItems.push({ label: activeChild.label });
}
}
});
return allItems;
};
return (
<div className="flex h-screen bg-gray-100 bodySon2">
{/* 左侧导航栏 */}
<LeftSidebar
menus={menus}
activePath={currentPath}
onNavigate={handleNavigate}
isMobile={isMobile}
isCollapsed={!isMobile && isCollapsed}
onToggleCollapse={() => setIsCollapsed(!isCollapsed)}
/>
<div className="flex h-full bg-gray-100">
{/* 左侧导航栏 - 独立滚动 */}
<div className="sidebarScroll">
<LeftSidebar
menus={menus}
activePath={currentPath}
onNavigate={handleNavigate}
isMobile={isMobile}
isCollapsed={!isMobile && isCollapsed}
onToggleCollapse={() => setIsCollapsed(!isCollapsed)}
/>
</div>
{/* 右侧主内容 */}
<MainContent
breadcrumb={getCurrentBreadcrumb()}
isMobile={isMobile}
sidebarOpen={!isCollapsed}
onToggleSidebar={() => setIsCollapsed(!isCollapsed)}
>
{children}
</MainContent>
{/* 右侧主内容 - 独立滚动 */}
<div className="flex-1 contentScroll">
<MainContent
isMobile={isMobile}
sidebarOpen={!isCollapsed}
onToggleSidebar={() => setIsCollapsed(!isCollapsed)}
>
{children}
</MainContent>
</div>
</div>
);
}

View File

@@ -1,7 +1,7 @@
'use client';
import { useState, useEffect } from 'react';
import { ChevronDown, ChevronRight, Menu, X } from 'lucide-react';
import { ChevronDown, ChevronLeft, ChevronRight, Menu, X } from 'lucide-react';
import { cn } from '@/lib/utils';
interface MenuItem {
@@ -82,23 +82,29 @@ export function LeftSidebar({
isCollapsed ? "w-16" : "w-64"
)}
>
{/* 头部 */}
<div className="p-4 border-b border-gray-200">
{/* 头部 - 缩小高度 */}
<div className="px-2 py-1 border-b border-gray-200">
<div className="flex items-center justify-between">
<h2 className={cn(
"font-semibold text-gray-900 transition-all duration-300",
"font-medium text-gray-900 text-sm transition-all duration-300",
isCollapsed ? "hidden" : "block"
)}>
</h2>
{isMobile ? (
<X className="w-5 h-5 text-gray-600" />
<X className="w-4 h-4 text-gray-600" />
) : (
/* 根据侧边栏状态显示不同按钮 */
<button
onClick={onToggleCollapse}
className="p-1 rounded-md hover:bg-gray-100 transition-colors"
className="p-1 rounded hover:bg-gray-100 transition-colors"
title={isCollapsed ? "展开菜单" : "收起菜单"}
>
<Menu className="w-5 h-5 text-gray-600" />
{isCollapsed ? (
<ChevronRight className="w-4 h-4 text-gray-600" />
) : (
<ChevronLeft className="w-4 h-4 text-gray-600" />
)}
</button>
)}
</div>

View File

@@ -1,28 +1,21 @@
'use client';
import { useState } from 'react';
import { Menu, X, ChevronRight, Home, FileText, Settings } from 'lucide-react';
import { ChevronLeft, ChevronRight, X } from 'lucide-react';
import { cn } from '@/lib/utils';
interface MainContentProps {
title?: string;
children: React.ReactNode;
isMobile?: boolean;
sidebarOpen?: boolean;
onToggleSidebar?: () => void;
breadcrumb?: {
label: string;
path?: string;
}[];
}
export function MainContent({
title = "当前页面",
children,
isMobile = false,
sidebarOpen = false,
onToggleSidebar,
breadcrumb = []
}: MainContentProps) {
const [showMobileSidebar, setShowMobileSidebar] = useState(false);
@@ -44,65 +37,11 @@ export function MainContent({
/>
)}
{/* 主内容区域 */}
<div className="flex-1 flex flex-col bg-gray-50">
{/* 顶部导航栏 */}
<header className="bg-white border-b border-gray-200 px-4 py-3">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
{/* 菜单按钮 */}
<button
onClick={handleToggleSidebar}
className="p-2 rounded-md hover:bg-gray-100 transition-colors"
>
{isMobile ? (
showMobileSidebar ? (
<X className="w-5 h-5 text-gray-600" />
) : (
<Menu className="w-5 h-5 text-gray-600" />
)
) : (
<Menu className="w-5 h-5 text-gray-600" />
)}
</button>
{/* 面包屑导航 */}
<div className="flex items-center gap-2">
<Home className="w-4 h-4 text-gray-500" />
{breadcrumb.length > 0 ? (
breadcrumb.map((item, index) => (
<div key={index} className="flex items-center gap-2">
<ChevronRight className="w-4 h-4 text-gray-400" />
{item.path ? (
<a
href={item.path}
className="text-sm text-gray-600 hover:text-gray-900 transition-colors"
>
{item.label}
</a>
) : (
<span className="text-sm text-gray-900 font-medium">
{item.label}
</span>
)}
</div>
))
) : (
<span className="text-sm text-gray-900 font-medium">{title}</span>
)}
</div>
</div>
</div>
</header>
{/* 主内容区域 */}
<main className="flex-1 overflow-auto">
<div className="p-6">
{/* 页面内容 */}
{children}
</div>
</main>
{/* 主内容区域 - 去掉顶部白色横条 */}
<div className="flex-1 flex flex-col">
<div className="p-6">
{children}
</div>
</div>
</>
);

View File

@@ -6,5 +6,16 @@
.bodySon2{
flex: 1;
overflow: auto;
min-height: 0;
/* 移除整体滚动,让子元素独立滚动 */
}
.sidebarScroll{
height: 100%;
overflow-y: auto;
}
.contentScroll{
height: 100%;
overflow-y: auto;
}