From 9866a86f327b61988bd819501d836529f1991ae9 Mon Sep 17 00:00:00 2001
From: peng <cavin@maimaiplanet.com>
Date: Wed, 22 Oct 2025 17:46:12 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=9F=E4=BA=A7=E7=AE=A1=E7=90=86=E7=B3=BB?=
 =?UTF-8?q?=E7=BB=9F=E5=89=8D=E7=AB=AF-1.=E4=BF=AE=E5=A4=8D=E4=B8=A4?=
 =?UTF-8?q?=E5=A4=84=E6=BB=9A=E5=8A=A8=E6=9D=A1=202.=E5=B0=BD=E5=8F=AF?=
 =?UTF-8?q?=E8=83=BD=E7=BC=A9=E5=B0=8F=E8=8F=9C=E5=8D=95=E6=94=B6=E7=BC=A9?=
 =?UTF-8?q?=EF=BC=8C=E5=B9=B6=E4=B8=94=E5=88=A0=E9=99=A4=E9=9D=A2=E5=8C=85?=
 =?UTF-8?q?=E5=B1=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/layouts/SideBar/SideBarOld.tsx | 58 ++++++---------
 .../SideBar/components/LeftSidebar.tsx        | 20 +++--
 .../SideBar/components/MainContent.tsx        | 73 ++-----------------
 crop-x/src/styles/body.css                    | 13 +++-
 4 files changed, 53 insertions(+), 111 deletions(-)

diff --git a/crop-x/src/components/layouts/SideBar/SideBarOld.tsx b/crop-x/src/components/layouts/SideBar/SideBarOld.tsx
index 9dc2edc..e123baa 100644
--- a/crop-x/src/components/layouts/SideBar/SideBarOld.tsx
+++ b/crop-x/src/components/layouts/SideBar/SideBarOld.tsx
@@ -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>
   );
 }
\ No newline at end of file
diff --git a/crop-x/src/components/layouts/SideBar/components/LeftSidebar.tsx b/crop-x/src/components/layouts/SideBar/components/LeftSidebar.tsx
index 1ff44b5..05e7b7d 100644
--- a/crop-x/src/components/layouts/SideBar/components/LeftSidebar.tsx
+++ b/crop-x/src/components/layouts/SideBar/components/LeftSidebar.tsx
@@ -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>
diff --git a/crop-x/src/components/layouts/SideBar/components/MainContent.tsx b/crop-x/src/components/layouts/SideBar/components/MainContent.tsx
index e32657c..a4efaf6 100644
--- a/crop-x/src/components/layouts/SideBar/components/MainContent.tsx
+++ b/crop-x/src/components/layouts/SideBar/components/MainContent.tsx
@@ -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>
     </>
   );
diff --git a/crop-x/src/styles/body.css b/crop-x/src/styles/body.css
index 8e15888..2efc7c5 100644
--- a/crop-x/src/styles/body.css
+++ b/crop-x/src/styles/body.css
@@ -6,5 +6,16 @@
 
 .bodySon2{
     flex: 1;
-    overflow: auto;
+    min-height: 0;
+    /* 移除整体滚动，让子元素独立滚动 */
+}
+
+.sidebarScroll{
+    height: 100%;
+    overflow-y: auto;
+}
+
+.contentScroll{
+    height: 100%;
+    overflow-y: auto;
 }
\ No newline at end of file