生产管理系统前端-1.修复两处滚动条 2.尽可能缩小菜单收缩,并且删除面包屑
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -6,5 +6,16 @@
|
||||
|
||||
.bodySon2{
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
min-height: 0;
|
||||
/* 移除整体滚动,让子元素独立滚动 */
|
||||
}
|
||||
|
||||
.sidebarScroll{
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.contentScroll{
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
Reference in New Issue
Block a user