生产管理系统前端-1.修复两处滚动条 2.尽可能缩小菜单收缩,并且删除面包屑
This commit is contained in:
@@ -229,26 +229,10 @@ export function SideBarOld({
|
|||||||
// 使用 Next.js 标准路由跳转
|
// 使用 Next.js 标准路由跳转
|
||||||
router.push(path);
|
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 (
|
return (
|
||||||
<div className="flex h-screen bg-gray-100 bodySon2">
|
<div className="flex h-full bg-gray-100">
|
||||||
{/* 左侧导航栏 */}
|
{/* 左侧导航栏 - 独立滚动 */}
|
||||||
|
<div className="sidebarScroll">
|
||||||
<LeftSidebar
|
<LeftSidebar
|
||||||
menus={menus}
|
menus={menus}
|
||||||
activePath={currentPath}
|
activePath={currentPath}
|
||||||
@@ -257,10 +241,11 @@ export function SideBarOld({
|
|||||||
isCollapsed={!isMobile && isCollapsed}
|
isCollapsed={!isMobile && isCollapsed}
|
||||||
onToggleCollapse={() => setIsCollapsed(!isCollapsed)}
|
onToggleCollapse={() => setIsCollapsed(!isCollapsed)}
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* 右侧主内容 */}
|
{/* 右侧主内容 - 独立滚动 */}
|
||||||
|
<div className="flex-1 contentScroll">
|
||||||
<MainContent
|
<MainContent
|
||||||
breadcrumb={getCurrentBreadcrumb()}
|
|
||||||
isMobile={isMobile}
|
isMobile={isMobile}
|
||||||
sidebarOpen={!isCollapsed}
|
sidebarOpen={!isCollapsed}
|
||||||
onToggleSidebar={() => setIsCollapsed(!isCollapsed)}
|
onToggleSidebar={() => setIsCollapsed(!isCollapsed)}
|
||||||
@@ -268,5 +253,6 @@ export function SideBarOld({
|
|||||||
{children}
|
{children}
|
||||||
</MainContent>
|
</MainContent>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useState, useEffect } from 'react';
|
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';
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
interface MenuItem {
|
interface MenuItem {
|
||||||
@@ -82,23 +82,29 @@ export function LeftSidebar({
|
|||||||
isCollapsed ? "w-16" : "w-64"
|
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">
|
<div className="flex items-center justify-between">
|
||||||
<h2 className={cn(
|
<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"
|
isCollapsed ? "hidden" : "block"
|
||||||
)}>
|
)}>
|
||||||
导航菜单
|
导航菜单
|
||||||
</h2>
|
</h2>
|
||||||
{isMobile ? (
|
{isMobile ? (
|
||||||
<X className="w-5 h-5 text-gray-600" />
|
<X className="w-4 h-4 text-gray-600" />
|
||||||
) : (
|
) : (
|
||||||
|
/* 根据侧边栏状态显示不同按钮 */
|
||||||
<button
|
<button
|
||||||
onClick={onToggleCollapse}
|
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>
|
</button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,28 +1,21 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useState } from 'react';
|
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';
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
interface MainContentProps {
|
interface MainContentProps {
|
||||||
title?: string;
|
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
isMobile?: boolean;
|
isMobile?: boolean;
|
||||||
sidebarOpen?: boolean;
|
sidebarOpen?: boolean;
|
||||||
onToggleSidebar?: () => void;
|
onToggleSidebar?: () => void;
|
||||||
breadcrumb?: {
|
|
||||||
label: string;
|
|
||||||
path?: string;
|
|
||||||
}[];
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export function MainContent({
|
export function MainContent({
|
||||||
title = "当前页面",
|
|
||||||
children,
|
children,
|
||||||
isMobile = false,
|
isMobile = false,
|
||||||
sidebarOpen = false,
|
sidebarOpen = false,
|
||||||
onToggleSidebar,
|
onToggleSidebar,
|
||||||
breadcrumb = []
|
|
||||||
}: MainContentProps) {
|
}: MainContentProps) {
|
||||||
const [showMobileSidebar, setShowMobileSidebar] = useState(false);
|
const [showMobileSidebar, setShowMobileSidebar] = useState(false);
|
||||||
|
|
||||||
@@ -44,65 +37,11 @@ export function MainContent({
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* 主内容区域 */}
|
{/* 主内容区域 - 去掉顶部白色横条 */}
|
||||||
<div className="flex-1 flex flex-col bg-gray-50">
|
<div className="flex-1 flex flex-col">
|
||||||
{/* 顶部导航栏 */}
|
|
||||||
<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">
|
<div className="p-6">
|
||||||
{/* 页面内容 */}
|
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
</main>
|
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -6,5 +6,16 @@
|
|||||||
|
|
||||||
.bodySon2{
|
.bodySon2{
|
||||||
flex: 1;
|
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