[V0_FILE]css:file="app/globals.css" isMerged="true" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(0.98 0.005 240); --foreground: oklch(0.20 0.02 250); --card: oklch(1 0 0); --card-foreground: oklch(0.20 0.02 250); --popover: oklch(1 0 0); --popover-foreground: oklch(0.20 0.02 250); --primary: oklch(0.55 0.18 145); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.95 0.01 240); --secondary-foreground: oklch(0.30 0.02 250); --muted: oklch(0.95 0.01 240); --muted-foreground: oklch(0.50 0.02 250); --accent: oklch(0.50 0.15 200); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.55 0.22 25); --destructive-foreground: oklch(1 0 0); --border: oklch(0.90 0.01 240); --input: oklch(0.95 0.01 240); --ring: oklch(0.55 0.18 145); --chart-1: oklch(0.55 0.18 145); --chart-2: oklch(0.50 0.15 200); --chart-3: oklch(0.60 0.15 55); --chart-4: oklch(0.55 0.18 25); --chart-5: oklch(0.55 0.15 280); --radius: 0.75rem; --sidebar: oklch(0.97 0.005 240); --sidebar-foreground: oklch(0.20 0.02 250); --sidebar-primary: oklch(0.55 0.18 145); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.95 0.01 240); --sidebar-accent-foreground: oklch(0.30 0.02 250); --sidebar-border: oklch(0.90 0.01 240); --sidebar-ring: oklch(0.55 0.18 145); } .dark { --background: oklch(0.98 0.005 240); --foreground: oklch(0.20 0.02 250); --card: oklch(1 0 0); --card-foreground: oklch(0.20 0.02 250); --popover: oklch(1 0 0); --popover-foreground: oklch(0.20 0.02 250); --primary: oklch(0.55 0.18 145); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.95 0.01 240); --secondary-foreground: oklch(0.30 0.02 250); --muted: oklch(0.95 0.01 240); --muted-foreground: oklch(0.50 0.02 250); --accent: oklch(0.50 0.15 200); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.55 0.22 25); --destructive-foreground: oklch(1 0 0); --border: oklch(0.90 0.01 240); --input: oklch(0.95 0.01 240); --ring: oklch(0.55 0.18 145); --chart-1: oklch(0.55 0.18 145); --chart-2: oklch(0.50 0.15 200); --chart-3: oklch(0.60 0.15 55); --chart-4: oklch(0.55 0.18 25); --chart-5: oklch(0.55 0.15 280); --sidebar: oklch(0.97 0.005 240); --sidebar-foreground: oklch(0.20 0.02 250); --sidebar-primary: oklch(0.55 0.18 145); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.95 0.01 240); --sidebar-accent-foreground: oklch(0.30 0.02 250); --sidebar-border: oklch(0.90 0.01 240); --sidebar-ring: oklch(0.55 0.18 145); } @theme inline { --font-sans: 'Geist', 'Geist Fallback'; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import React from "react" import type { Metadata } from 'next' import { Geist, Geist_Mono } from 'next/font/google' import { Analytics } from '@vercel/analytics/next' import './globals.css' const _geist = Geist({ subsets: ["latin"] }); const _geistMono = Geist_Mono({ subsets: ["latin"] }); export const metadata: Metadata = { title: '农业AI方案生成器 | 智慧农业学习工具', description: '帮助八年级学生将农业痛点转化为AI可解决问题的教育工具', generator: 'v0.app', icons: { icon: [ { url: '/icon-light-32x32.png', media: '(prefers-color-scheme: light)', }, { url: '/icon-dark-32x32.png', media: '(prefers-color-scheme: dark)', }, { url: '/icon.svg', type: 'image/svg+xml', }, ], apple: '/apple-icon.png', }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/step-indicator.tsx" isMerged="true" "use client" import { CheckCircle2 } from "lucide-react" interface StepIndicatorProps { currentStep: number } const steps = [ { id: 0, title: "选择作物", desc: "确定研究对象" }, { id: 1, title: "发现问题", desc: "选择农业痛点" }, { id: 2, title: "思维聚焦", desc: "选择解决要素" }, { id: 3, title: "方案生成", desc: "查看完整方案" }, ] export function StepIndicator({ currentStep }: StepIndicatorProps) { return (

{steps.map((step, index) => { const isActive = currentStep === step.id const isCompleted = currentStep > step.id return (

{/* Step Circle */}

{isCompleted ? ( ) : ( {step.id + 1} )}

{step.title}

{step.desc}

{/* Connector Line */} {index < steps.length - 1 && (

step.id ? "bg-primary" : "bg-border" }`} /> )}

) })}

) } [V0_FILE]typescriptreact:file="components/crop-selector.tsx" isMerged="true" "use client" import React from "react" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { crops } from "@/lib/agriculture-data" import { Wheat, Leaf, Circle, Apple, Grape, Cherry, CheckCircle2, ChevronRight, Sprout } from "lucide-react" const iconMap: Record> = { Wheat, Leaf, Circle, Apple, Grape, Cherry, } interface CropSelectorProps { selectedCrop: string | null onSelectCrop: (cropId: string, cropName: string) => void onNext: () => void } export function CropSelector({ selectedCrop, onSelectCrop, onNext }: CropSelectorProps) { const selectedCropData = crops.find(c => c.id === selectedCrop) return (

{/* Header */}

开始之前

选择你要研究的农作物

不同的农作物有不同的生长需求和管理挑战，请先选择一种你想研究的作物

{/* Crop Grid */}

{crops.map((crop) => { const Icon = iconMap[crop.icon] || Leaf const isSelected = selectedCrop === crop.id return ( onSelectCrop(crop.id, crop.name)} >

{crop.name}

{crop.desc}

{isSelected && ( )} ) })}

{/* Selected Crop Features */} {selectedCropData && (

{selectedCropData.name}的生长特点

{selectedCropData.features}

)} {/* Next Button */} {selectedCrop && (

)}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" "use client" import { useState } from "react" import { CropSelector } from "@/components/crop-selector" import { ProblemWall } from "@/components/problem-wall" import { ThinkingFocus } from "@/components/thinking-focus" import { SolutionGenerator } from "@/components/solution-generator" import { StepIndicator } from "@/components/step-indicator" import { Sprout, Brain, Cpu } from "lucide-react" export default function AgricultureAIGenerator() { const [currentStep, setCurrentStep] = useState(0) // State for selected items const [selectedCrop, setSelectedCrop] = useState<{ id: string; name: string } | null>(null) const [selectedProblem, setSelectedProblem] = useState<{ id: string title: string category: string } | null>(null) const [selectedData, setSelectedData] = useState([]) const [selectedAlgorithm, setSelectedAlgorithm] = useState(null) const [selectedSensors, setSelectedSensors] = useState([]) const [selectedActuators, setSelectedActuators] = useState([]) const handleSelectCrop = (id: string, name: string) => { setSelectedCrop({ id, name }) } const handleSelectProblem = (id: string, title: string, category: string) => { setSelectedProblem({ id, title, category }) } const handleReset = () => { setCurrentStep(0) setSelectedCrop(null) setSelectedProblem(null) setSelectedData([]) setSelectedAlgorithm(null) setSelectedSensors([]) setSelectedActuators([]) } return (

{/* Header */}

农业AI方案生成器

智慧农业学习工具 - 八年级专用

物联网

人工智能

{/* Step Indicator */}

{/* Main Content */}

{currentStep === 0 && ( setCurrentStep(1)} /> )} {currentStep === 1 && ( setCurrentStep(2)} onBack={() => setCurrentStep(0)} /> )} {currentStep === 2 && ( setCurrentStep(3)} onBack={() => setCurrentStep(1)} /> )} {currentStep === 3 && ( setCurrentStep(2)} onReset={handleReset} /> )}

{/* Footer */}

) } [V0_FILE]typescriptreact:file="components/thinking-focus.tsx" isMerged="true" "use client" import React from "react" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { monitoringData, algorithms, sensors, actuators, algorithmGuide } from "@/lib/agriculture-data" import { Droplet, Thermometer, FlaskConical, CloudRain, Sun, Wind, Camera, ScanEye, ToggleLeft, Droplets, Fan, PanelTop, Flame, Bell, Lightbulb, ChevronRight, ChevronLeft, CheckCircle2, Brain, Database, Cpu, Cog, SprayCan, Leaf, Zap, Palette, Maximize, ArrowUpDown, Gauge, Info, BookOpen, Target } from "lucide-react" const iconMap: Record> = { Droplet, Thermometer, FlaskConical, CloudRain, Sun, Wind, Camera, ScanEye, ToggleLeft, Droplets, Fan, PanelTop, Flame, Bell, Lightbulb, SprayCan, Leaf, Zap, Palette, Maximize, ArrowUpDown, Gauge } interface ThinkingFocusProps { selectedProblem: { id: string; title: string; category: string } | null selectedData: string[] selectedAlgorithm: string | null selectedSensors: string[] selectedActuators: string[] onSelectData: (dataIds: string[]) => void onSelectAlgorithm: (algorithmId: string) => void onSelectSensors: (sensorIds: string[]) => void onSelectActuators: (actuatorIds: string[]) => void onNext: () => void onBack: () => void } export function ThinkingFocus({ selectedProblem, selectedData, selectedAlgorithm, selectedSensors, selectedActuators, onSelectData, onSelectAlgorithm, onSelectSensors, onSelectActuators, onNext, onBack, }: ThinkingFocusProps) { const [activeSection, setActiveSection] = useState<"data" | "algorithm" | "sensor" | "actuator">("data") const toggleData = (id: string) => { if (selectedData.includes(id)) { onSelectData(selectedData.filter((d) => d !== id)) } else { onSelectData([...selectedData, id]) } } const toggleSensor = (id: string) => { if (selectedSensors.includes(id)) { onSelectSensors(selectedSensors.filter((s) => s !== id)) } else { onSelectSensors([...selectedSensors, id]) } } const toggleActuator = (id: string) => { if (selectedActuators.includes(id)) { onSelectActuators(selectedActuators.filter((a) => a !== id)) } else { onSelectActuators([...selectedActuators, id]) } } const canProceed = selectedData.length > 0 && selectedAlgorithm && selectedSensors.length > 0 && selectedActuators.length > 0 const getDifficultyColor = (difficulty: string) => { switch (difficulty) { case "入门": return "bg-emerald-100 text-emerald-700 border-emerald-200" case "中级": return "bg-amber-100 text-amber-700 border-amber-200" case "高级": return "bg-rose-100 text-rose-700 border-rose-200" default: return "bg-muted text-muted-foreground" } } const sections = [ { id: "data" as const, label: "监测数据", icon: Database, count: selectedData.length, desc: "需要哪些数据？" }, { id: "algorithm" as const, label: "AI算法", icon: Brain, count: selectedAlgorithm ? 1 : 0, desc: "用什么算法分析？" }, { id: "sensor" as const, label: "传感器", icon: Cpu, count: selectedSensors.length, desc: "用什么采集数据？" }, { id: "actuator" as const, label: "执行器", icon: Cog, count: selectedActuators.length, desc: "用什么执行操作？" }, ] return (

{/* Header */}

第二步 - 思维聚焦

选择解决方案的核心要素

针对「{selectedProblem?.title}」问题，依次选择需要的监测数据、AI算法、传感器和执行器

{/* Main Content Area */}

{/* Content Section */}

{/* Data Section */} {activeSection === "data" && (

选择需要监测的数据类型

解决这个问题需要哪些数据支持？可多选

{monitoringData.map((data) => { const Icon = iconMap[data.icon] || Database const isSelected = selectedData.includes(data.id) return ( toggleData(data.id)} >

{data.name}

{data.desc}

{isSelected && } ) })}

)} {/* Algorithm Section */} {activeSection === "algorithm" && (

{/* Algorithm Selection Guide */} {algorithmGuide.title}

{algorithmGuide.tips.map((tip, index) => (

{tip.scenario}

{tip.recommended.map((algo, i) => ( {algo} ))}

{tip.reason}

))}

{/* Learning Note */}

学习提示

{algorithmGuide.note}

{/* Algorithm Selection */}

选择AI算法（选择最适合的一个）

根据上面的建议，选择适合解决你问题的算法

{/* Difficulty Legend */}

难度说明：

入门 - 概念简单易懂中级 - 需要一定基础高级 - 深入学习了解

{algorithms.map((algo) => { const isSelected = selectedAlgorithm === algo.id return ( onSelectAlgorithm(algo.id)} >

{algo.name}

{algo.difficulty}

{algo.desc}

应用示例： {algo.example}

{isSelected && (

已选择此算法

)} ) })}

{/* Deep Learning Note */}

想深入了解AI算法？

这里的算法只是入门介绍，真正的AI开发需要学习编程语言（如Python）、数学基础（统计和线性代数）以及机器学习框架。你可以在完成这个项目后，尝试学习一些在线编程课程来进一步探索AI的奥秘！

)} {/* Sensor Section */} {activeSection === "sensor" && (

选择收集数据所需的传感器

用什么设备来采集数据？可多选

{sensors.map((sensor) => { const Icon = iconMap[sensor.icon] || Cpu const isSelected = selectedSensors.includes(sensor.id) return ( toggleSensor(sensor.id)} >

{sensor.name}

{sensor.desc}

{isSelected && } ) })}

)} {/* Actuator Section */} {activeSection === "actuator" && (

选择决策执行的执行器

AI做出决策后，用什么设备执行操作？可多选

{actuators.map((actuator) => { const Icon = iconMap[actuator.icon] || Cog const isSelected = selectedActuators.includes(actuator.id) return ( toggleActuator(actuator.id)} >

{actuator.name}

{actuator.desc}

{actuator.action} {isSelected && } ) })}

)}

{/* Section Selector - Moved to Bottom */}

{sections.map((section) => { const Icon = section.icon const isActive = activeSection === section.id const hasSelection = section.count > 0 return ( ) })}

{/* Navigation */}

) } [V0_FILE]typescript:file="lib/agriculture-data.ts" isMerged="true" // 农作物类型 - 添加生长特点 export const crops = [ { id: "wheat", name: "小麦", icon: "Wheat", desc: "主要粮食作物", features: "喜凉耐寒，生长周期约8个月，需要充足阳光和适量水分，对土壤肥力要求较高" }, { id: "rice", name: "水稻", icon: "Leaf", desc: "需水量大的粮食作物", features: "喜温喜湿，生长期需保持水层，对温度和日照敏感，需要精细的水肥管理" }, { id: "watermelon", name: "西瓜", icon: "Circle", desc: "经济作物，需精细管理", features: "喜高温干燥，根系发达但怕涝，对光照要求高，果实膨大期需大量养分" }, { id: "tomato", name: "番茄", icon: "Apple", desc: "温室大棚常见作物", features: "喜温不耐寒，需要支架攀爬，开花坐果期对温度和湿度敏感，易发生病虫害" }, { id: "corn", name: "玉米", icon: "Wheat", desc: "粮食和饲料作物", features: "喜温喜光，根系强大，抽穗期需水量大，对氮肥需求高，生长速度快" }, { id: "grape", name: "葡萄", icon: "Grape", desc: "需要精细化水肥管理", features: "喜光喜温，需要搭建架式栽培，花期怕雨，果实成熟期需控制水分和糖分积累" }, { id: "strawberry", name: "草莓", icon: "Cherry", desc: "对环境敏感的经济作物", features: "喜凉爽气候，根系浅需频繁灌溉，对土壤通气性要求高，易受病虫害侵袭" }, { id: "cucumber", name: "黄瓜", icon: "Leaf", desc: "大棚蔬菜常见品种", features: "喜温暖湿润，生长迅速需及时采摘，对光照和温度要求高，需要搭架引蔓" }, ] // 农业痛点数据 - 删减后的精简版本 export const painPoints = { water: { icon: "Droplets", label: "水", color: "text-blue-600", bgColor: "bg-blue-50", borderColor: "border-blue-200", problems: [ { id: "w1", title: "灌溉不精准", desc: "浇水时机和水量难以把控，导致水分过多或不足" }, { id: "w2", title: "干旱预警滞后", desc: "土壤水分不足时未能及时发现和预警" }, { id: "w3", title: "水质监测难", desc: "难以及时发现灌溉水源的pH值或污染问题" }, ], }, fertilizer: { icon: "Leaf", label: "肥", color: "text-emerald-600", bgColor: "bg-emerald-50", borderColor: "border-emerald-200", problems: [ { id: "f1", title: "施肥量不精准", desc: "缺乏土壤养分数据支撑，施肥凭经验容易过量或不足" }, { id: "f2", title: "施肥时机不当", desc: "错过作物关键生长期的最佳施肥时间" }, { id: "f3", title: "肥料利用率低", desc: "施肥方式不科学导致养分流失浪费" }, ], }, labor: { icon: "Users", label: "人", color: "text-orange-600", bgColor: "bg-orange-50", borderColor: "border-orange-200", problems: [ { id: "l1", title: "巡田效率低", desc: "人工巡查大面积农田耗时耗力，难以全面覆盖" }, { id: "l2", title: "生长监测难", desc: "无法持续追踪作物每日生长状态的细微变化" }, { id: "l3", title: "产量预估难", desc: "难以提前准确预测产量进行销售和物流规划" }, ], }, environment: { icon: "CloudSun", label: "环境", color: "text-sky-600", bgColor: "bg-sky-50", borderColor: "border-sky-200", problems: [ { id: "e1", title: "恶劣天气应对", desc: "暴雨、冰雹等恶劣天气来临前缺乏有效预警和应对措施" }, { id: "e2", title: "生长环境管控", desc: "大棚内温湿度调节不及时，影响作物正常生长发育" }, { id: "e3", title: "虫害防治", desc: "病虫害识别不及时、防治时机难把握，容易造成作物损失" }, ], }, } // 监测数据类型 - 合并精简版 export const monitoringData = [ { id: "m1", name: "土壤温湿度", desc: "检测土壤温度和含水量", icon: "Thermometer", category: "soil" }, { id: "m2", name: "土壤养分", desc: "测量pH值、氮磷钾、电导率等", icon: "FlaskConical", category: "soil" }, { id: "m3", name: "空气温湿度", desc: "监测环境温度和湿度", icon: "CloudRain", category: "air" }, { id: "m4", name: "CO2浓度", desc: "监测二氧化碳水平", icon: "Wind", category: "air" }, { id: "m5", name: "实时图像画面", desc: "拍摄作物、虫害、叶片等图像", icon: "Camera", category: "visual" }, { id: "m6", name: "光照数值", desc: "测量光照和紫外线强度", icon: "Sun", category: "air" }, { id: "m7", name: "环境数值", desc: "监测气压、风速风向等", icon: "Wind", category: "weather" }, { id: "m8", name: "降雨量", desc: "测量雨水量大小", icon: "CloudRain", category: "weather" }, ] // AI算法 - 精简版（保留入门和关键算法） export const algorithms = [ { id: "a1", name: "线性回归", desc: "用于预测连续数值，找到数据之间的线性关系", example: "预测明天的土壤温度或作物产量", difficulty: "入门", }, { id: "a2", name: "决策树", desc: "像流程图一样层层判断，做出分类决策", example: "判断是否需要浇水：土壤湿度<30%→需要浇水", difficulty: "入门", }, { id: "a3", name: "K近邻(KNN)", desc: "找最相似的历史数据来做预测或分类", example: "根据相似天气条件判断病虫害风险", difficulty: "入门", }, { id: "a4", name: "聚类算法(K-Means)", desc: "自动将相似数据分组，发现隐藏规律", example: "将农田区域按土壤特性自动分区管理", difficulty: "中级", }, { id: "a5", name: "卷积神经网络(CNN)", desc: "专门处理图像的深度学习算法", example: "自动识别照片中的害虫种类和病害", difficulty: "高级", }, { id: "a6", name: "循环神经网络(RNN)", desc: "处理序列数据，具有记忆能力", example: "分析作物生长周期的连续变化规律", difficulty: "高级", }, { id: "a7", name: "梯度提升树(GBDT)", desc: "逐步改进的集成学习算法，精度高", example: "精准预测作物产量和品质等级", difficulty: "中级", }, ] // 传感器 - 精简版 export const sensors = [ { id: "s1", name: "土壤温湿度传感器", desc: "检测土壤温度和含水量", icon: "Thermometer", dataType: ["m1"] }, { id: "s2", name: "土壤养分传感器", desc: "测量pH、氮磷钾等养分", icon: "FlaskConical", dataType: ["m2"] }, { id: "s3", name: "温湿度传感器", desc: "测量空气温度和湿度", icon: "Thermometer", dataType: ["m3"] }, { id: "s4", name: "光照传感器", desc: "检测光照和紫外线强度", icon: "Sun", dataType: ["m6"] }, { id: "s5", name: "CO2传感器", desc: "监测二氧化碳浓度", icon: "Wind", dataType: ["m4"] }, { id: "s6", name: "高清摄像头", desc: "拍摄作物和虫害图像", icon: "Camera", dataType: ["m5"] }, { id: "s7", name: "雨量计", desc: "测量降雨量大小", icon: "CloudRain", dataType: ["m8"] }, { id: "s8", name: "气象站", desc: "综合监测气压风速等", icon: "Wind", dataType: ["m7"] }, ] // 执行器 - 精简版 export const actuators = [ { id: "e1", name: "水泵", desc: "抽取和输送灌溉水", icon: "Droplets", action: "供水系统" }, { id: "e2", name: "施肥机", desc: "自动定量施加肥料", icon: "Leaf", action: "养分供给" }, { id: "e3", name: "通风扇", desc: "调节大棚空气流通", icon: "Fan", action: "通风换气" }, { id: "e4", name: "卷帘机", desc: "控制大棚遮阳帘开合", icon: "PanelTop", action: "光照调节" }, { id: "e5", name: "LED补光灯", desc: "为植物补充光照", icon: "Lightbulb", action: "光照补充" }, { id: "e6", name: "加热器", desc: "提升大棚环境温度", icon: "Flame", action: "保温防冻" }, { id: "e7", name: "报警器", desc: "发出声光警报提示", icon: "Bell", action: "异常提醒" }, { id: "e8", name: "喷药机", desc: "自动喷洒农药防治", icon: "SprayCan", action: "病虫防治" }, { id: "e9", name: "智能开窗器", desc: "自动开关天窗通风", icon: "ToggleLeft", action: "自然通风" }, ] // POV模板 export const povTemplate = (crop: string, problem: string, data: string[], algorithm: string) => { return `作为一个智慧农业方案设计者，我发现在种植【${crop}】时，【${problem}】是农民面临的重要挑战。通过部署传感器收集【${data.join("、")}】等数据，利用【${algorithm}】算法进行智能分析和预测，可以实现自动化决策和精准控制，有效解决这个问题。` } // 后续思考参考问题 - 从方案到实际创作 export const thinkingPrompts = [ "你打算用什么材料来制作方案中的设备模型？", "传感器和执行器在模型中应该放置在什么位置？", "如何用简单的电路来模拟自动控制功能？", "你的方案模型需要哪些核心零件和工具？", "你所选择的算法是否适合解决本场景的问题？为什么？", "方案原型制作中可能遇到什么困难？如何解决？", "传感器采集的原始数据需要经过怎样的处理才能输入到AI算法中？", "AI算法输出的决策结果如何转化为执行器的具体动作指令？", ] // 算法选择建议 - 帮助学生理解如何选择算法 export const algorithmGuide = { title: "如何选择合适的AI算法？", tips: [ { scenario: "预测数值（如温度、产量）", recommended: ["线性回归", "梯度提升树"], reason: "这些算法擅长分析数据趋势，预测连续的数值结果" }, { scenario: "分类判断（如是否需要浇水）", recommended: ["决策树", "K近邻"], reason: "这些算法能根据条件做出\"是\"或\"否\"的判断" }, { scenario: "识别图像（如病虫害识别）", recommended: ["卷积神经网络(CNN)"], reason: "CNN专门用于处理图像，能识别照片中的特征" }, { scenario: "发现规律（如区域划分）", recommended: ["聚类算法(K-Means)"], reason: "聚类算法能自动将相似的数据分组" } ], note: "算法选择是AI领域的重要课题，同学们现在只需了解基本概念。如果对某个算法感兴趣，可以在课后通过网络资源或编程课程进一步学习！" } [V0_FILE]typescriptreact:file="components/problem-wall.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { painPoints } from "@/lib/agriculture-data" import { Droplets, Leaf, Users, CloudSun, CheckCircle2, ChevronRight, ChevronLeft } from "lucide-react" const iconMap = { Droplets, Leaf, Users, CloudSun, } interface ProblemWallProps { cropName: string selectedProblem: string | null onSelectProblem: (problemId: string, problemTitle: string, category: string) => void onNext: () => void onBack: () => void } export function ProblemWall({ cropName, selectedProblem, onSelectProblem, onNext, onBack }: ProblemWallProps) { const [activeCategory, setActiveCategory] = useState(null) const categories = Object.entries(painPoints) return (

{/* Header */}

第一步 - 发现问题

种植{cropName}时遇到的常见问题

农业问题可以归类为「水、肥、人、环境」四大类，选择一个你最想解决的问题

{/* Category Filter Tabs */}

{categories.map(([key, category]) => { const Icon = iconMap[category.icon as keyof typeof iconMap] const isActive = activeCategory === key return ( ) })}

{/* Problem Grid */}

{categories.map(([key, category]) => { const Icon = iconMap[category.icon as keyof typeof iconMap] const isVisible = activeCategory === null || activeCategory === key if (!isVisible) return null return (

{/* Category Header */}

{category.label}

{/* Problem Cards */}

{category.problems.map((problem) => { const isSelected = selectedProblem === problem.id return ( onSelectProblem(problem.id, problem.title, key)} >

{problem.title}

{problem.desc}

{isSelected && ( )}

) })}

{/* Navigation */}

{selectedProblem && ( )}

) } [V0_FILE]typescriptreact:file="components/solution-generator.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea" import { monitoringData, algorithms, sensors, actuators, povTemplate, thinkingPrompts, } from "@/lib/agriculture-data" import { ChevronLeft, ArrowRight, Download, RefreshCw, Lightbulb, Target, Workflow, FileText, Cpu, Brain, Cog, CheckCircle2, Sparkles, Network, PenTool, HelpCircle, Box, Smartphone, Cloud, Layers, Database, Zap, ArrowDown, } from "lucide-react" interface SolutionGeneratorProps { cropName: string selectedProblem: { id: string; title: string; category: string } | null selectedData: string[] selectedAlgorithm: string | null selectedSensors: string[] selectedActuators: string[] onBack: () => void onReset: () => void } export function SolutionGenerator({ cropName, selectedProblem, selectedData, selectedAlgorithm, selectedSensors, selectedActuators, onBack, onReset, }: SolutionGeneratorProps) { const [additionalThoughts, setAdditionalThoughts] = useState("") const [sketchNotes, setSketchNotes] = useState("") // Get selected items' details const selectedDataItems = monitoringData.filter((d) => selectedData.includes(d.id)) const selectedAlgo = algorithms.find((a) => a.id === selectedAlgorithm) const selectedSensorItems = sensors.filter((s) => selectedSensors.includes(s.id)) const selectedActuatorItems = actuators.filter((a) => selectedActuators.includes(a.id)) // Generate POV statement const povStatement = povTemplate( cropName, selectedProblem?.title || "", selectedDataItems.map((d) => d.name), selectedAlgo?.name || "" ) // Generate flow diagram data const flowSteps = [ { title: "数据采集", icon: Cpu, color: "text-blue-600", bgColor: "bg-blue-50", borderColor: "border-blue-200", items: selectedSensorItems.map((s) => s.name), }, { title: "数据处理", icon: Brain, color: "text-purple-600", bgColor: "bg-purple-50", borderColor: "border-purple-200", items: [selectedAlgo?.name || "AI算法"], }, { title: "智能决策", icon: Target, color: "text-emerald-600", bgColor: "bg-emerald-50", borderColor: "border-emerald-200", items: ["判断阈值", "生成指令"], }, { title: "自动执行", icon: Cog, color: "text-orange-600", bgColor: "bg-orange-50", borderColor: "border-orange-200", items: selectedActuatorItems.map((a) => a.name), }, ] const handleExport = () => { const content = ` 农业AI解决方案报告 ================== 目标作物：${cropName} 一、核心问题 ${selectedProblem?.title} 二、POV表达 ${povStatement} 三、监测数据 ${selectedDataItems.map((d) => `- ${d.name}：${d.desc}`).join("\n")} 四、AI算法 ${selectedAlgo?.name}：${selectedAlgo?.desc} 五、硬件设备传感器： ${selectedSensorItems.map((s) => `- ${s.name}：${s.desc}`).join("\n")} 执行器： ${selectedActuatorItems.map((a) => `- ${a.name}：${a.desc}`).join("\n")} 六、数据-决策-执行闭环 ${flowSteps.map((step, i) => `${i + 1}. ${step.title}: ${step.items.join(", ")}`).join("\n")} 七、方案草图构思 ${sketchNotes || "（待补充）"} 八、后续思考 ${additionalThoughts || "（待补充）"} 生成时间：${new Date().toLocaleString("zh-CN")} `.trim() const blob = new Blob([content], { type: "text/plain;charset=utf-8" }) const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = `农业AI方案_${cropName}_${selectedProblem?.title}.txt` document.body.appendChild(a) a.click() document.body.removeChild(a) URL.revokeObjectURL(url) } return (

{/* Header */}

第四步 - 方案生成

你的{cropName}智慧种植方案

基于你的选择，我们生成了以下完整的智慧农业解决方案

{/* POV Statement */} POV表达（问题视角陈述）

{povStatement}

{/* Mind Map - Enhanced with Solution Summary */} 方案思维导图

清晰展示你的方案核心内容和逻辑结构

{/* Center: Core Problem */}

{cropName} - {selectedProblem?.title}

智慧农业解决方案

{/* Four Branches */}

{/* Branch 1: Data Collection */}

1. 需要监测什么？

{selectedDataItems.slice(0, 4).map((item) => (

{item.name}

))} {selectedDataItems.length > 4 && ( +{selectedDataItems.length - 4} 更多 )}

{/* Branch 2: AI Algorithm */}

2. AI如何分析决策？

{selectedAlgo?.name}

{selectedAlgo?.desc}

{/* Branch 3: Hardware */}

3. 需要哪些设备？

传感器：

{selectedSensorItems.slice(0, 3).map((item) => ( {item.name} ))} {selectedSensorItems.length > 3 && ( +{selectedSensorItems.length - 3} )}

执行器：

{selectedActuatorItems.slice(0, 3).map((item) => ( {item.name} ))} {selectedActuatorItems.length > 3 && ( +{selectedActuatorItems.length - 3} )}

{/* Branch 4: Expected Result */}

4. 预期达成效果

实时监测生长环境

智能预警问题风险

自动化减少人工

{/* Flow Diagram */} 数据-决策-执行闭环图 {/* Mobile: Vertical Layout */}

{flowSteps.map((step, index) => { const Icon = step.icon return (

{step.title}

{step.items.slice(0, 3).map((item) => ( {item} ))} {step.items.length > 3 && ( +{step.items.length - 3} )}

{index < flowSteps.length - 1 && (

)}

) })}

{/* Desktop: Horizontal Layout */}

{flowSteps.map((step, index) => { const Icon = step.icon return (

{step.title}

{step.items.slice(0, 3).map((item) => (

{item}

))} {step.items.length > 3 && ( +{step.items.length - 3} 更多 )}

{index < flowSteps.length - 1 && (

)}

) })}

{/* Connection Description */}

闭环说明

{selectedSensorItems[0]?.name || "传感器"}检测到数据 → 通过{selectedAlgo?.name}算法分析 → 智能判断是否需要采取行动 → 自动控制{selectedActuatorItems[0]?.name || "执行器"}执行操作 → 持续监测形成闭环

{/* Solution Sketch with Reference Model */} 方案草图构思 {/* Reference Concept Model */}

参考创作模型概念图

{/* Model Diagram */}

{/* Layer 1: Perception */}

感知层（传感器）

部署位置建议：

土壤传感器 - 埋入土下10-20cm

空气传感器 - 作物顶部1m高度

摄像头 - 固定支架俯拍

{/* Layer 2: Processing */}

处理层（AI分析）

数据处理流程：

数据采集模块（单片机/树莓派）

无线传输（WiFi/LoRa）

云端AI分析服务器

{/* Layer 3: Control */}

控制层（用户交互）

用户交互方式：

手机App实时查看数据

微信小程序接收预警

一键远程控制执行器

{/* Data Flow Arrow */}

传感器采集 AI分析处理用户查看/控制执行器动作

{/* User Sketch Area */}

参考上面的概念模型，在下方描述你对这个方案的构想，可以包括：设备布置位置、数据流向、用户操作界面等

setSketchNotes(e.target.value)}
            />
          </div>
        </CardContent>
      </Card>

{/* Summary Cards */}
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-5 lg:gap-6">
        {/* Selected Data */}
        <Card className="shadow-lg border-2">
          <CardHeader className="pb-3 lg:pb-4">
            <CardTitle className="text-lg lg:text-xl flex items-center gap-3">
              <Target className="w-5 h-5 lg:w-6 lg:h-6 text-blue-600" />
              监测数据
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex flex-wrap gap-2 lg:gap-3">
              {selectedDataItems.map((item) => (
                <Badge key={item.id} className="bg-blue-50 text-blue-700 border-blue-200 px-3 py-1.5 lg:px-4 lg:py-2 text-base lg:text-lg">
                  {item.name}
                </Badge>
              ))}
            </div>
          </CardContent>
        </Card>

{/* Selected Algorithm */}
        <Card className="shadow-lg border-2">
          <CardHeader className="pb-3 lg:pb-4">
            <CardTitle className="text-lg lg:text-xl flex items-center gap-3">
              <Brain className="w-5 h-5 lg:w-6 lg:h-6 text-purple-600" />
              AI算法
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              <Badge className="bg-purple-50 text-purple-700 border-purple-200 px-3 py-1.5 lg:px-4 lg:py-2 text-base lg:text-lg">
                {selectedAlgo?.name}
              </Badge>
              <p className="text-base lg:text-lg text-muted-foreground">{selectedAlgo?.desc}</p>
            </div>
          </CardContent>
        </Card>

{/* Selected Sensors */}
        <Card className="shadow-lg border-2">
          <CardHeader className="pb-3 lg:pb-4">
            <CardTitle className="text-lg lg:text-xl flex items-center gap-3">
              <Cpu className="w-5 h-5 lg:w-6 lg:h-6 text-emerald-600" />
              传感器
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex flex-wrap gap-2 lg:gap-3">
              {selectedSensorItems.map((item) => (
                <Badge key={item.id} className="bg-emerald-50 text-emerald-700 border-emerald-200 px-3 py-1.5 lg:px-4 lg:py-2 text-base lg:text-lg">
                  {item.name}
                </Badge>
              ))}
            </div>
          </CardContent>
        </Card>

{/* Selected Actuators */}
        <Card className="shadow-lg border-2">
          <CardHeader className="pb-3 lg:pb-4">
            <CardTitle className="text-lg lg:text-xl flex items-center gap-3">
              <Cog className="w-5 h-5 lg:w-6 lg:h-6 text-orange-600" />
              执行器
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex flex-wrap gap-2 lg:gap-3">
              {selectedActuatorItems.map((item) => (
                <Badge key={item.id} className="bg-orange-50 text-orange-700 border-orange-200 px-3 py-1.5 lg:px-4 lg:py-2 text-base lg:text-lg">
                  {item.name}
                </Badge>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>

{/* Additional Thoughts */}
      <Card className="shadow-lg border-2">
        <CardHeader className="pb-4 lg:pb-5">
          <CardTitle className="flex items-center gap-4 text-xl lg:text-2xl">
            <FileText className="w-6 h-6 lg:w-7 lg:h-7 text-primary" />
            后续方案详细思考
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-5 lg:space-y-6">
          {/* Reference Questions */}
          <div className="bg-secondary/50 rounded-xl p-5 lg:p-6">
            <div className="flex items-center gap-3 mb-4 lg:mb-5">
              <HelpCircle className="w-5 h-5 lg:w-6 lg:h-6 text-primary" />
              <span className="font-bold text-foreground text-lg lg:text-xl">从方案到实际创作的参考问题</span>
            </div>
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-5">
              {thinkingPrompts.map((prompt, index) => (
                <div 
                  key={index} 
                  className="flex items-start gap-3 lg:gap-4 bg-white/50 rounded-lg p-4 lg:p-5"
                >
                  <span className="bg-primary/10 text-primary font-bold w-7 h-7 lg:w-8 lg:h-8 rounded-full flex items-center justify-center text-base lg:text-lg flex-shrink-0">
                    {index + 1}
                  </span>
                  <span className="text-foreground leading-relaxed text-base lg:text-lg">{prompt}</span>
                </div>
              ))}
            </div>
          </div>

<Textarea
            placeholder="请写下你对这个方案的进一步思考，可以针对上面的参考问题来回答..."
            className="min-h-[160px] lg:min-h-[180px] text-base lg:text-lg bg-secondary/30"
            value={additionalThoughts}
            onChange={(e) => setAdditionalThoughts(e.target.value)}
          />
          <p className="text-base lg:text-lg text-muted-foreground">
            写下你的思考可以帮助你更深入地理解这个问题和解决方案，为实际创作做好准备
          </p>
        </CardContent>
      </Card>

{/* Navigation */}
      <div className="flex flex-col sm:flex-row justify-between items-center gap-4 pt-6 lg:pt-8 px-4">
        <Button variant="outline" size="lg" onClick={onBack} className="gap-3 w-full sm:w-auto bg-card text-lg lg:text-xl px-8 py-6">
          <ChevronLeft className="w-6 h-6" />
          返回修改
        </Button>
        <div className="flex gap-4 lg:gap-5 w-full sm:w-auto">
          <Button variant="outline" size="lg" onClick={onReset} className="gap-3 flex-1 sm:flex-none bg-card text-lg lg:text-xl px-6 py-6">
            <RefreshCw className="w-5 h-5 lg:w-6 lg:h-6" />
            重新开始
          </Button>
          <Button size="lg" onClick={handleExport} className="gap-3 flex-1 sm:flex-none text-lg lg:text-xl px-6 py-6">
            <Download className="w-5 h-5 lg:w-6 lg:h-6" />
            导出方案
          </Button>
        </div>
      </div>
    </div>
  )
}</article></body></html>

选择你要研究的农作物

{crop.name}

{selectedCropData.name}的生长特点

选择解决方案的核心要素

{data.name}

{algo.name}

{sensor.name}

{actuator.name}

{section.label}

种植{cropName}时遇到的常见问题

{problem.title}

你的{cropName}智慧种植方案