提交1 bmad搭建与项目启动 - ok

crop-x/src/App.tsx

@@ -0,0 +1,244 @@
+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