244 lines
9.9 KiB
TypeScript
244 lines
9.9 KiB
TypeScript
import React from 'react'
|
||
import { useTheme } from '@/hooks/useTheme'
|
||
|
||
function App() {
|
||
const { theme, setTheme } = useTheme()
|
||
|
||
return (
|
||
<div className="min-h-screen bg-background text-foreground">
|
||
{/* 头部导航 */}
|
||
<header className="nav-agriculture">
|
||
<div className="container-agriculture mx-auto px-4 py-4">
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center space-x-4">
|
||
<h1 className="text-2xl font-bold text-white">
|
||
🌾 智慧农业生产管理系统
|
||
</h1>
|
||
</div>
|
||
|
||
<div className="flex items-center space-x-4">
|
||
{/* 主题切换按钮 */}
|
||
<button
|
||
onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
|
||
className="px-3 py-2 rounded-md bg-white/20 hover:bg-white/30 text-white transition-colors"
|
||
>
|
||
{theme === 'light' ? '🌙' : '☀️'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
{/* 主要内容区域 */}
|
||
<main className="container-agriculture mx-auto px-4 py-8">
|
||
{/* 欢迎页面 */}
|
||
<div className="text-center mb-12">
|
||
<h2 className="text-4xl font-bold mb-4 text-agriculture-green">
|
||
欢迎使用智慧农业生产管理系统
|
||
</h2>
|
||
<p className="text-xl text-muted-foreground mb-8">
|
||
基于 React 18 + Vite 6 + TypeScript + shadcn/ui 构建的现代化农业管理平台
|
||
</p>
|
||
</div>
|
||
|
||
{/* 系统状态卡片 */}
|
||
<div className="grid-agriculture mb-12">
|
||
<div className="card-agriculture p-6">
|
||
<div className="flex items-center mb-4">
|
||
<div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mr-4">
|
||
🚜
|
||
</div>
|
||
<div>
|
||
<h3 className="text-lg font-semibold">农机管理</h3>
|
||
<p className="text-sm text-muted-foreground">9个模块，20个子功能</p>
|
||
</div>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<div className="flex justify-between text-sm">
|
||
<span>档案管理</span>
|
||
<span className="text-green-600">✅ 已配置</span>
|
||
</div>
|
||
<div className="flex justify-between text-sm">
|
||
<span>运行监控</span>
|
||
<span className="text-green-600">✅ 已配置</span>
|
||
</div>
|
||
<div className="flex justify-between text-sm">
|
||
<span>调度管理</span>
|
||
<span className="text-green-600">✅ 已配置</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="card-agriculture p-6">
|
||
<div className="flex items-center mb-4">
|
||
<div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4">
|
||
🌾
|
||
</div>
|
||
<div>
|
||
<h3 className="text-lg font-semibold">地块管理</h3>
|
||
<p className="text-sm text-muted-foreground">土壤、作物、种植计划</p>
|
||
</div>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<div className="flex justify-between text-sm">
|
||
<span>地块档案</span>
|
||
<span className="text-blue-600">✅ 已配置</span>
|
||
</div>
|
||
<div className="flex justify-between text-sm">
|
||
<span>作物管理</span>
|
||
<span className="text-blue-600">✅ 已配置</span>
|
||
</div>
|
||
<div className="flex justify-between text-sm">
|
||
<span>种植计划</span>
|
||
<span className="text-blue-600">✅ 已配置</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="card-agriculture p-6">
|
||
<div className="flex items-center mb-4">
|
||
<div className="w-12 h-12 bg-amber-100 rounded-lg flex items-center justify-center mr-4">
|
||
📊
|
||
</div>
|
||
<div>
|
||
<h3 className="text-lg font-semibold">数据统计</h3>
|
||
<p className="text-sm text-muted-foreground">实时数据与分析</p>
|
||
</div>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<div className="flex justify-between text-sm">
|
||
<span>农机总数</span>
|
||
<span className="text-amber-600">0 台</span>
|
||
</div>
|
||
<div className="flex justify-between text-sm">
|
||
<span>地块面积</span>
|
||
<span className="text-amber-600">0 亩</span>
|
||
</div>
|
||
<div className="flex justify-between text-sm">
|
||
<span>今日作业</span>
|
||
<span className="text-amber-600">0 项</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="card-agriculture p-6">
|
||
<div className="flex items-center mb-4">
|
||
<div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mr-4">
|
||
⚙️
|
||
</div>
|
||
<div>
|
||
<h3 className="text-lg font-semibold">系统设置</h3>
|
||
<p className="text-sm text-muted-foreground">配置与权限管理</p>
|
||
</div>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<div className="flex justify-between text-sm">
|
||
<span>用户管理</span>
|
||
<span className="text-purple-600">✅ 已配置</span>
|
||
</div>
|
||
<div className="flex justify-between text-sm">
|
||
<span>权限设置</span>
|
||
<span className="text-purple-600">✅ 已配置</span>
|
||
</div>
|
||
<div className="flex justify-between text-sm">
|
||
<span>系统配置</span>
|
||
<span className="text-purple-600">✅ 已配置</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 技术栈展示 */}
|
||
<div className="card-agriculture p-8 mb-12">
|
||
<h3 className="text-2xl font-bold mb-6 text-center">🛠️ 技术栈</h3>
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||
<div className="text-center">
|
||
<div className="text-3xl mb-2">⚛️</div>
|
||
<h4 className="font-semibold">React 18</h4>
|
||
<p className="text-sm text-muted-foreground">现代化UI框架</p>
|
||
</div>
|
||
<div className="text-center">
|
||
<div className="text-3xl mb-2">🚀</div>
|
||
<h4 className="font-semibold">Vite 6</h4>
|
||
<p className="text-sm text-muted-foreground">极速构建工具</p>
|
||
</div>
|
||
<div className="text-center">
|
||
<div className="text-3xl mb-2">📘</div>
|
||
<h4 className="font-semibold">TypeScript</h4>
|
||
<p className="text-sm text-muted-foreground">类型安全</p>
|
||
</div>
|
||
<div className="text-center">
|
||
<div className="text-3xl mb-2">🎨</div>
|
||
<h4 className="font-semibold">Tailwind CSS</h4>
|
||
<p className="text-sm text-muted-foreground">原子化CSS</p>
|
||
</div>
|
||
<div className="text-center">
|
||
<div className="text-3xl mb-2">🧩</div>
|
||
<h4 className="font-semibold">shadcn/ui</h4>
|
||
<p className="text-sm text-muted-foreground">组件库</p>
|
||
</div>
|
||
<div className="text-center">
|
||
<div className="text-3xl mb-2">📊</div>
|
||
<h4 className="font-semibold">Recharts</h4>
|
||
<p className="text-sm text-muted-foreground">数据可视化</p>
|
||
</div>
|
||
<div className="text-center">
|
||
<div className="text-3xl mb-2">🔧</div>
|
||
<h4 className="font-semibold">ESLint</h4>
|
||
<p className="text-sm text-muted-foreground">代码检查</p>
|
||
</div>
|
||
<div className="text-center">
|
||
<div className="text-3xl mb-2">💅</div>
|
||
<h4 className="font-semibold">Prettier</h4>
|
||
<p className="text-sm text-muted-foreground">代码格式化</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 快速操作按钮 */}
|
||
<div className="text-center">
|
||
<div className="space-x-4">
|
||
<button
|
||
onClick={() => window.location.href = '/machinery'}
|
||
className="btn-agriculture px-6 py-3 rounded-lg font-semibold mr-4"
|
||
>
|
||
🚜 进入农机管理
|
||
</button>
|
||
<button
|
||
onClick={() => window.location.href = '/field'}
|
||
className="btn-agriculture-secondary px-6 py-3 rounded-lg font-semibold"
|
||
>
|
||
🌾 进入地块管理
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 开发工具状态 */}
|
||
<div className="mt-12 p-4 bg-muted rounded-lg">
|
||
<h4 className="font-semibold mb-2">🔧 开发工具状态</h4>
|
||
<div className="text-sm text-muted-foreground">
|
||
<p>✅ 项目依赖已安装</p>
|
||
<p>✅ 开发服务器可正常启动</p>
|
||
<p>✅ 热重载功能已配置</p>
|
||
<p>✅ TypeScript类型检查已配置</p>
|
||
<p>⚙️ ESLint/Prettier可通过开关控制</p>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
{/* 页脚 */}
|
||
<footer className="bg-muted py-8 mt-16">
|
||
<div className="container-agriculture mx-auto px-4 text-center">
|
||
<p className="text-muted-foreground">
|
||
智慧农业生产管理系统 v1.0.0 | 基于 React 18 + Vite 6 + TypeScript 构建
|
||
</p>
|
||
<p className="text-sm text-muted-foreground mt-2">
|
||
🌾 专为现代化农业而生 | 科技赋能农业，智慧创造未来
|
||
</p>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default App |