cavin/smart-crop-ui
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: cavin:f1ffcc72fc62ac0e43ddf02fbb0b3c8de7faea92
Branches Tags
cavin:main cavin:fetch-test
...
compare: cavin:9866a86f327b61988bd819501d836529f1991ae9
Branches Tags
cavin:main cavin:fetch-test

2 Commits
f1ffcc72fc ... 9866a86f32

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
16 changed files with 232 additions and 251 deletions
Expand all files Collapse all files

14
crop-x/src/app/(app)/agricultural-asset/basic-information/asset-labeling/layout.tsx
View File

@@ -1,15 +1,7 @@
"use client" export default function AssetLabelingLayout({
import '@/styles/globals.css' children,
export default function RootLayout({
}: { }: {
children: React.ReactNode children: React.ReactNode
}) { }) {
return ( return <>{children}</>
<html lang="zh-CN">
<body >
</body>
</html>
)
} }

19
crop-x/src/app/(app)/agricultural-asset/layout.tsx
View File

@@ -1,22 +1,7 @@
import { ReactNode } from 'react'
export default function AgriculturalAssetLayout({ export default function AgriculturalAssetLayout({
children, children,
}: { }: {
children: ReactNode children: React.ReactNode
}) { }) {
return ( return <>{children}</>
<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>
)
} }

19
crop-x/src/app/(app)/agricultural-machinery/layout.tsx
View File

@@ -1,22 +1,7 @@
import { ReactNode } from 'react'
export default function AgriculturalMachineryLayout({ export default function AgriculturalMachineryLayout({
children, children,
}: { }: {
children: ReactNode children: React.ReactNode
}) { }) {
return ( return <>{children}</>
<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>
)
} }

19
crop-x/src/app/(app)/ai-crop-model/layout.tsx
View File

@@ -1,22 +1,7 @@
import { ReactNode } from 'react'
export default function AiCropModelLayout({ export default function AiCropModelLayout({
children, children,
}: { }: {
children: ReactNode children: React.ReactNode
}) { }) {
return ( return <>{children}</>
<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>
)
} }

4
crop-x/src/app/(app)/central-config/layout.tsx
View File

@@ -1,6 +1,6 @@
"use client" "use client"
import { ReactNode } from 'react' import { ReactNode } from 'react'
import {SideBarOld} from '@/components/layouts/SideBar/SideBarOld' // import {SideBarOld} from '@/components/layouts/SideBar/SideBarOld'
// 中心配置路由数据 // 中心配置路由数据
const centralConfigData = { const centralConfigData = {
@@ -138,5 +138,5 @@ export default function CentralConfigLayout({
}: { }: {
children: ReactNode children: ReactNode
}) { }) {
return <SideBarOld data={centralConfigData}>{children}</SideBarOld> return <>{children}</>
} }

19
crop-x/src/app/(app)/farming-operation/layout.tsx
View File

@@ -1,22 +1,7 @@
import { ReactNode } from 'react'
export default function FarmingOperationLayout({ export default function FarmingOperationLayout({
children, children,
}: { }: {
children: ReactNode children: React.ReactNode
}) { }) {
return ( return <>{children}</>
<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>
)
} }

19
crop-x/src/app/(app)/land-information/layout.tsx
View File

@@ -1,22 +1,7 @@
import { ReactNode } from 'react'
export default function LandInformationLayout({ export default function LandInformationLayout({
children, children,
}: { }: {
children: ReactNode children: React.ReactNode
}) { }) {
return ( return <>{children}</>
<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>
)
} }

15
crop-x/src/app/(app)/layout.tsx
View File

@@ -1,18 +1,7 @@
import {Navbar1} from "@/components/layouts/NavBar" export default function AppLayout({
import '@/styles/globals.css'
export default function DashboardLayout({
children, children,
}: { }: {
children: React.ReactNode children: React.ReactNode
}) { }) {
return ( return <>{children}</>
<div>
{/* 布局 UI */}
{/* 将 children 放在您希望渲染页面或嵌套布局的位置 */}
<main>
<Navbar1></Navbar1>
{children}</main>
</div>
)
} }

19
crop-x/src/app/(app)/water-fertilizer-control/layout.tsx
View File

@@ -1,22 +1,7 @@
import { ReactNode } from 'react'
export default function WaterFertilizerControlLayout({ export default function WaterFertilizerControlLayout({
children, children,
}: { }: {
children: ReactNode children: React.ReactNode
}) { }) {
return ( return <>{children}</>
<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>
)
} }

149
crop-x/src/app/layout.tsx
View File

@@ -1,16 +1,153 @@
import {Navbar1} from "@/components/layouts/NavBar"
import {SideBarOld} from '@/components/layouts/SideBar/SideBarOld'
import '@/styles/globals.css' 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,
}: { }: {
children: React.ReactNode children: React.ReactNode
}) { }) {
return ( return (
<html lang="en"> <html lang="zh-CN">
<body> <body>
{/* 布局 UI */} <div className="bodyFlexUpDown">
{/* 将 children 放在您希望渲染页面或嵌套布局的位置 */} <Navbar1 />
{children} <div className="bodySon2">
<SideBarOld data={centralConfigData}>
{children}
</SideBarOld>
</div>
</div>
</body> </body>
</html> </html>
) )

8
crop-x/src/app/page.tsx
View File

@@ -1,8 +1,12 @@
export default function HomePage() { export default function HomePage({
children,
}: {
children: React.ReactNode
}) {
return ( return (
<div className=""> <div className="">
{children}
</div> </div>
) )
} }

59
crop-x/src/components/layouts/SideBar/SideBarOld.tsx
View File

@@ -229,45 +229,30 @@ 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" style={{ height: '90vh' }}> <div className="flex h-full bg-gray-100">
{/* 左侧导航栏 */} {/* 左侧导航栏 - 独立滚动 */}
<LeftSidebar <div className="sidebarScroll">
menus={menus} <LeftSidebar
activePath={currentPath} menus={menus}
onNavigate={handleNavigate} activePath={currentPath}
isMobile={isMobile} onNavigate={handleNavigate}
isCollapsed={!isMobile && isCollapsed} isMobile={isMobile}
onToggleCollapse={() => setIsCollapsed(!isCollapsed)} isCollapsed={!isMobile && isCollapsed}
/> onToggleCollapse={() => setIsCollapsed(!isCollapsed)}
/>
</div>
{/* 右侧主内容 */} {/* 右侧主内容 - 独立滚动 */}
<MainContent <div className="flex-1 contentScroll">
breadcrumb={getCurrentBreadcrumb()} <MainContent
isMobile={isMobile} isMobile={isMobile}
sidebarOpen={!isCollapsed} sidebarOpen={!isCollapsed}
onToggleSidebar={() => setIsCollapsed(!isCollapsed)} onToggleSidebar={() => setIsCollapsed(!isCollapsed)}
> >
{children} {children}
</MainContent> </MainContent>
</div>
</div> </div>
); );
} }

20
crop-x/src/components/layouts/SideBar/components/LeftSidebar.tsx
View File

@@ -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>

76
crop-x/src/components/layouts/SideBar/components/MainContent.tsx
View File

@@ -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,68 +37,11 @@ export function MainContent({
/> />
)} )}
{/* 主内容区域 */} {/* 主内容区域 - 去掉顶部白色横条 */}
<div className="flex-1 flex flex-col bg-gray-50"> <div className="flex-1 flex flex-col">
{/* 顶部导航栏 */} <div className="p-6">
<header className="bg-white border-b border-gray-200 px-4 py-3"> {children}
<div className="flex items-center justify-between"> </div>
<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> </div>
</> </>
); );

21
crop-x/src/styles/body.css Normal file
View File

@@ -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;
}

1
crop-x/src/styles/globals.css
View File

@@ -319,3 +319,4 @@
@apply bg-background text-foreground; @apply bg-background text-foreground;
} }
} }
@import "./body.css";