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

生产管理系统前端 - 主页滚动条开发完毕
2025-10-22 17:46:12 +08:00 · 2025-10-22 16:43:15 +08:00
16 changed files with 232 additions and 251 deletions
--- a/crop-x/src/app/(app)/agricultural-asset/basic-information/asset-labeling/layout.tsx
+++ b/crop-x/src/app/(app)/agricultural-asset/basic-information/asset-labeling/layout.tsx
@@ -1,15 +1,7 @@
-"use client"
-import '@/styles/globals.css'
-
-export default function RootLayout({
-
+export default function AssetLabelingLayout({
+  children,
 }: {
  children: React.ReactNode
 }) {
-  return (
-    <html lang="zh-CN">
-      <body >
-      </body>
-    </html>
-  )
+  return <>{children}</>
 }
--- a/crop-x/src/app/(app)/agricultural-asset/layout.tsx
+++ b/crop-x/src/app/(app)/agricultural-asset/layout.tsx
@@ -1,22 +1,7 @@
-import { ReactNode } from 'react'
-
 export default function AgriculturalAssetLayout({
  children,
 }: {
-  children: ReactNode
+  children: React.ReactNode
 }) {
-  return (
-    <div className="min-h-screen bg-gray-50">
-      <header className="bg-white shadow-sm border-b">
-        <div className="container mx-auto px-4 py-4">
-          <h1 className="text-2xl font-bold text-green-900">
-            📦 农业资产管理系统
-          </h1>
-        </div>
-      </header>
-      <main className="container mx-auto px-4 py-8">
-        {children}
-      </main>
-    </div>
-  )
+  return <>{children}</>
 }
--- a/crop-x/src/app/(app)/agricultural-machinery/layout.tsx
+++ b/crop-x/src/app/(app)/agricultural-machinery/layout.tsx
@@ -1,22 +1,7 @@
-import { ReactNode } from 'react'
-
 export default function AgriculturalMachineryLayout({
  children,
 }: {
-  children: ReactNode
+  children: React.ReactNode
 }) {
-  return (
-    <div className="min-h-screen bg-gray-50">
-      <header className="bg-white shadow-sm border-b">
-        <div className="container mx-auto px-4 py-4">
-          <h1 className="text-2xl font-bold text-green-900">
-            🚙 智能农机管理系统
-          </h1>
-        </div>
-      </header>
-      <main className="container mx-auto px-4 py-8">
-        {children}
-      </main>
-    </div>
-  )
+  return <>{children}</>
 }
--- a/crop-x/src/app/(app)/ai-crop-model/layout.tsx
+++ b/crop-x/src/app/(app)/ai-crop-model/layout.tsx
@@ -1,22 +1,7 @@
-import { ReactNode } from 'react'
-
 export default function AiCropModelLayout({
  children,
 }: {
-  children: ReactNode
+  children: React.ReactNode
 }) {
-  return (
-    <div className="min-h-screen bg-gray-50">
-      <header className="bg-white shadow-sm border-b">
-        <div className="container mx-auto px-4 py-4">
-          <h1 className="text-2xl font-bold text-green-900">
-            🤖 AI作物模型精准决策系统
-          </h1>
-        </div>
-      </header>
-      <main className="container mx-auto px-4 py-8">
-        {children}
-      </main>
-    </div>
-  )
+  return <>{children}</>
 }
--- a/crop-x/src/app/(app)/central-config/layout.tsx
+++ b/crop-x/src/app/(app)/central-config/layout.tsx
@@ -1,6 +1,6 @@
 "use client"
 import { ReactNode } from 'react'
-import {SideBarOld} from '@/components/layouts/SideBar/SideBarOld'
+// import {SideBarOld} from '@/components/layouts/SideBar/SideBarOld'

 // 中心配置路由数据
 const centralConfigData = {
@@ -138,5 +138,5 @@ export default function CentralConfigLayout({
 }: {
  children: ReactNode
 }) {
-  return <SideBarOld data={centralConfigData}>{children}</SideBarOld>
+  return <>{children}</>
 }
--- a/crop-x/src/app/(app)/farming-operation/layout.tsx
+++ b/crop-x/src/app/(app)/farming-operation/layout.tsx
@@ -1,22 +1,7 @@
-import { ReactNode } from 'react'
-
 export default function FarmingOperationLayout({
  children,
 }: {
-  children: ReactNode
+  children: React.ReactNode
 }) {
-  return (
-    <div className="min-h-screen bg-gray-50">
-      <header className="bg-white shadow-sm border-b">
-        <div className="container mx-auto px-4 py-4">
-          <h1 className="text-2xl font-bold text-green-900">
-            📋 农事操作管理系统
-          </h1>
-        </div>
-      </header>
-      <main className="container mx-auto px-4 py-8">
-        {children}
-      </main>
-    </div>
-  )
+  return <>{children}</>
 }
--- a/crop-x/src/app/(app)/land-information/layout.tsx
+++ b/crop-x/src/app/(app)/land-information/layout.tsx
@@ -1,22 +1,7 @@
-import { ReactNode } from 'react'
-
 export default function LandInformationLayout({
  children,
 }: {
-  children: ReactNode
+  children: React.ReactNode
 }) {
-  return (
-    <div className="min-h-screen bg-gray-50">
-      <header className="bg-white shadow-sm border-b">
-        <div className="container mx-auto px-4 py-4">
-          <h1 className="text-2xl font-bold text-green-900">
-            🌾 地块信息管理系统
-          </h1>
-        </div>
-      </header>
-      <main className="container mx-auto px-4 py-8">
-        {children}
-      </main>
-    </div>
-  )
+  return <>{children}</>
 }
--- a/crop-x/src/app/(app)/layout.tsx
+++ b/crop-x/src/app/(app)/layout.tsx
@@ -1,18 +1,7 @@
-import {Navbar1} from "@/components/layouts/NavBar" 
-import '@/styles/globals.css'
-export default function DashboardLayout({
+export default function AppLayout({
  children,
 }: {
  children: React.ReactNode
 }) {
-  return (
-      <div>
-
-        {/* 布局 UI */}
-        {/* 将 children 放在您希望渲染页面或嵌套布局的位置 */}
-        <main>
-        <Navbar1></Navbar1>
-          {children}</main>
-      </div>
-  )
+  return <>{children}</>
 }
--- a/crop-x/src/app/(app)/water-fertilizer-control/layout.tsx
+++ b/crop-x/src/app/(app)/water-fertilizer-control/layout.tsx
@@ -1,22 +1,7 @@
-import { ReactNode } from 'react'
-
 export default function WaterFertilizerControlLayout({
  children,
 }: {
-  children: ReactNode
+  children: React.ReactNode
 }) {
-  return (
-    <div className="min-h-screen bg-gray-50">
-      <header className="bg-white shadow-sm border-b">
-        <div className="container mx-auto px-4 py-4">
-          <h1 className="text-2xl font-bold text-green-900">
-            💧 水肥一体化控制系统
-          </h1>
-        </div>
-      </header>
-      <main className="container mx-auto px-4 py-8">
-        {children}
-      </main>
-    </div>
-  )
+  return <>{children}</>
 }
--- a/crop-x/src/app/layout.tsx
+++ b/crop-x/src/app/layout.tsx
@@ -1,16 +1,153 @@
-
+import {Navbar1} from "@/components/layouts/NavBar"
+import {SideBarOld} from '@/components/layouts/SideBar/SideBarOld'
 import '@/styles/globals.css'
-export default function DashboardLayout({
+
+const centralConfigData = {
+  navMain: [
+    {
+      title: "租户管理",
+      url: "/central-config/tenant",
+      icon: "🏢",
+      items: [
+        {
+          title: "企业审核",
+          url: "/central-config/tenant/enterprise-audit",
+          isActive: false
+        },
+        {
+          title: "审核历史",
+          url: "/central-config/tenant/audit-history",
+          isActive: false
+        },
+        {
+          title: "企业信息",
+          url: "/central-config/tenant/enterprise-info",
+          isActive: false
+        },
+        {
+          title: "用户管理",
+          url: "/central-config/tenant/user-management",
+          isActive: false
+        }
+      ]
+    },
+    {
+      title: "用户管理",
+      url: "/central-config/user",
+      icon: "👥",
+      items: [
+        {
+          title: "员工管理",
+          url: "/central-config/user/employee",
+          isActive: false
+        },
+        {
+          title: "角色管理",
+          url: "/central-config/user/role",
+          isActive: false
+        },
+        {
+          title: "菜单管理",
+          url: "/central-config/user/menu",
+          isActive: false
+        },
+        {
+          title: "权限配置管理",
+          url: "/central-config/user/permission",
+          isActive: false
+        }
+      ]
+    },
+    {
+      title: "系统参数",
+      url: "/central-config/system",
+      icon: "🔧",
+      items: [
+        {
+          title: "系统设置",
+          url: "/central-config/system/settings",
+          isActive: false
+        },
+        {
+          title: "分类字典",
+          url: "/central-config/system/category",
+          isActive: false
+        },
+        {
+          title: "数据字典",
+          url: "/central-config/system/dictionary",
+          isActive: false
+        }
+      ]
+    },
+    {
+      title: "系统监控",
+      url: "/central-config/monitor",
+      icon: "📈",
+      items: [
+        {
+          title: "登录日志",
+          url: "/central-config/monitor/login-log",
+          isActive: false
+        },
+        {
+          title: "操作日志",
+          url: "/central-config/monitor/operation-log",
+          isActive: false
+        },
+        {
+          title: "性能监控",
+          url: "/central-config/monitor/performance",
+          isActive: false
+        },
+        {
+          title: "网络日志",
+          url: "/central-config/monitor/network-log",
+          isActive: false
+        }
+      ]
+    },
+    {
+      title: "消息中心",
+      url: "/central-config/message",
+      icon: "📨",
+      items: [
+        {
+          title: "消息发送",
+          url: "/central-config/message/send",
+          isActive: false
+        },
+        {
+          title: "消息模版",
+          url: "/central-config/message/template",
+          isActive: false
+        },
+        {
+          title: "消息日志",
+          url: "/central-config/message/log",
+          isActive: false
+        }
+      ]
+    }
+  ]
+}
+
+export default function RootLayout({
  children,
 }: {
  children: React.ReactNode
 }) {
  return (
-    <html lang="en">
+    <html lang="zh-CN">
      <body>
-        {/* 布局 UI */}
-        {/* 将 children 放在您希望渲染页面或嵌套布局的位置 */}
-        {children}
+        <div className="bodyFlexUpDown">
+          <Navbar1 />
+          <div className="bodySon2">
+            <SideBarOld data={centralConfigData}>
+              {children}
+            </SideBarOld>
+          </div>
+        </div>
      </body>
    </html>
  )
--- a/crop-x/src/app/page.tsx
+++ b/crop-x/src/app/page.tsx
@@ -1,8 +1,12 @@

-export default function HomePage() {
+export default function HomePage({
+  children,
+}: {
+  children: React.ReactNode
+}) {
  return (
    <div className="">
-      
+      {children}
    </div>
  )
 }
--- a/crop-x/src/components/layouts/SideBar/SideBarOld.tsx
+++ b/crop-x/src/components/layouts/SideBar/SideBarOld.tsx
@@ -229,45 +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" style={{ height: '90vh' }}>
-      {/* 左侧导航栏 */}
-      <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>
  );
 }
--- 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>
--- 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,68 +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">
-
-            {/* 页面内容 */}
-            <div className="bg-white rounded-lg border border-gray-200 p-6 shadow-sm">
-              {children}
-            </div>
-          </div>
-        </main>
+      {/* 主内容区域 - 去掉顶部白色横条 */}
+      <div className="flex-1 flex flex-col">
+        <div className="p-6">
+          {children}
+        </div>
      </div>
    </>
  );
--- a/crop-x/src/styles/body.css
+++ b/crop-x/src/styles/body.css
@@ -0,0 +1,21 @@
+.bodyFlexUpDown{
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.bodySon2{
+    flex: 1;
+    min-height: 0;
+    /* 移除整体滚动，让子元素独立滚动 */
+}
+
+.sidebarScroll{
+    height: 100%;
+    overflow-y: auto;
+}
+
+.contentScroll{
+    height: 100%;
+    overflow-y: auto;
+}
--- a/crop-x/src/styles/globals.css
+++ b/crop-x/src/styles/globals.css
@@ -319,3 +319,4 @@
    @apply bg-background text-foreground;
  }
 }
+@import "./body.css";
Author	SHA1	Message	Date
peng	9866a86f32	生产管理系统前端-1.修复两处滚动条 2.尽可能缩小菜单收缩，并且删除面包屑	2025-10-22 17:46:12 +08:00
peng	8ea90d980b	生产管理系统前端 - 主页滚动条开发完毕	2025-10-22 16:43:15 +08:00