生产管理系统前端-上边栏搭建与侧边栏搭建

2025-10-20 10:07:45 +08:00
parent ec58562661
commit b63716d002
39 changed files with 9097 additions and 6668 deletions
--- a/crop-x/components.json
+++ b/crop-x/components.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}
--- a/crop-x/package-lock.json
+++ b/crop-x/package-lock.json
--- a/crop-x/package.json
+++ b/crop-x/package.json
@@ -17,34 +17,35 @@
        "scripts:disable": "node scripts/setup-dev-tools.js --disable"
    },
    "dependencies": {
-        "@radix-ui/react-accordion": "^1.2.3",
+        "@radix-ui/react-accordion": "^1.2.12",
        "@radix-ui/react-alert-dialog": "^1.1.6",
        "@radix-ui/react-aspect-ratio": "^1.1.2",
        "@radix-ui/react-avatar": "^1.1.3",
        "@radix-ui/react-checkbox": "^1.1.4",
-        "@radix-ui/react-collapsible": "^1.1.3",
+        "@radix-ui/react-collapsible": "^1.1.12",
        "@radix-ui/react-context-menu": "^2.2.6",
-        "@radix-ui/react-dialog": "^1.1.6",
-        "@radix-ui/react-dropdown-menu": "^2.1.6",
+        "@radix-ui/react-dialog": "^1.1.15",
+        "@radix-ui/react-dropdown-menu": "^2.1.16",
        "@radix-ui/react-hover-card": "^1.1.6",
-        "@radix-ui/react-label": "^2.1.2",
+        "@radix-ui/react-label": "^2.1.7",
        "@radix-ui/react-menubar": "^1.1.6",
-        "@radix-ui/react-navigation-menu": "^1.2.5",
+        "@radix-ui/react-navigation-menu": "^1.2.14",
        "@radix-ui/react-popover": "^1.1.6",
        "@radix-ui/react-progress": "^1.1.2",
        "@radix-ui/react-radio-group": "^1.2.3",
        "@radix-ui/react-scroll-area": "^1.2.3",
        "@radix-ui/react-select": "^2.1.6",
-        "@radix-ui/react-separator": "^1.1.2",
+        "@radix-ui/react-separator": "^1.1.7",
        "@radix-ui/react-slider": "^1.2.3",
-        "@radix-ui/react-slot": "^1.1.2",
+        "@radix-ui/react-slot": "^1.2.3",
        "@radix-ui/react-switch": "^1.1.3",
        "@radix-ui/react-tabs": "^1.1.3",
        "@radix-ui/react-toggle": "^1.1.2",
        "@radix-ui/react-toggle-group": "^1.1.2",
-        "@radix-ui/react-tooltip": "^1.1.8",
+        "@radix-ui/react-tooltip": "^1.2.8",
+        "@tailwindcss/postcss": "^4.1.14",
        "class-variance-authority": "^0.7.1",
-        "clsx": "*",
+        "clsx": "^2.1.1",
        "cmdk": "^1.1.1",
        "date-fns": "*",
        "embla-carousel-react": "^8.6.0",
@@ -59,10 +60,12 @@
        "react-resizable-panels": "^2.1.7",
        "recharts": "^2.15.2",
        "sonner": "^2.0.3",
-        "tailwind-merge": "*",
+        "tailwind-merge": "^3.3.1",
+        "tailwindcss-animate": "^1.0.7",
        "vaul": "^1.1.2"
    },
    "devDependencies": {
+        "@tailwindcss/vite": "^4.1.14",
        "@types/node": "^20.10.0",
        "@types/react": "^18.3.11",
        "@types/react-dom": "^18.3.1",
@@ -74,11 +77,13 @@
        "eslint-plugin-react-hooks": "^5.1.0-rc.0",
        "eslint-plugin-react-refresh": "^0.4.12",
        "husky": "^9.1.6",
+        "install": "^0.13.0",
        "lint-staged": "^15.2.10",
+        "npm": "^11.6.2",
        "postcss": "^8.4.47",
        "prettier": "^3.3.3",
-        "tailwindcss": "^3.4.13",
+        "tailwindcss": "^4.1.14",
        "typescript": "^5.6.2",
        "vite": "6.3.5"
    }
-}
+}
--- a/crop-x/postcss.config.js
+++ b/crop-x/postcss.config.js
@@ -1,6 +1,6 @@
 export default {
  plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
    autoprefixer: {},
  },
 }
--- a/crop-x/src/App.tsx
+++ b/crop-x/src/App.tsx
@@ -1,243 +1,11 @@
 import React from 'react'
 import { useTheme } from '@/hooks/useTheme'
-
+import Main from '@/components/layouts/Main.tsx'
 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>
+      <div>
+        <Main></Main>
+      </div>
  )
 }

--- a/crop-x/src/components/app-sidebar.tsx
+++ b/crop-x/src/components/app-sidebar.tsx
@@ -0,0 +1,215 @@
+import * as React from "react"
+import { ChevronRight } from "lucide-react"
+
+import { SearchForm } from "@/components/search-form"
+import { VersionSwitcher } from "@/components/version-switcher"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+} from "@/components/ui/sidebar"
+
+// This is sample data.
+const data = {
+  versions: ["1.0.1", "1.1.0-alpha", "2.0.0-beta1"],
+  navMain: [
+    {
+      title: "Getting Started",
+      url: "#",
+      items: [
+        {
+          title: "Installation",
+          url: "#",
+        },
+        {
+          title: "Project Structure",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Building Your Application",
+      url: "#",
+      items: [
+        {
+          title: "Routing",
+          url: "#",
+        },
+        {
+          title: "Data Fetching",
+          url: "#",
+          isActive: true,
+        },
+        {
+          title: "Rendering",
+          url: "#",
+        },
+        {
+          title: "Caching",
+          url: "#",
+        },
+        {
+          title: "Styling",
+          url: "#",
+        },
+        {
+          title: "Optimizing",
+          url: "#",
+        },
+        {
+          title: "Configuring",
+          url: "#",
+        },
+        {
+          title: "Testing",
+          url: "#",
+        },
+        {
+          title: "Authentication",
+          url: "#",
+        },
+        {
+          title: "Deploying",
+          url: "#",
+        },
+        {
+          title: "Upgrading",
+          url: "#",
+        },
+        {
+          title: "Examples",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "API Reference",
+      url: "#",
+      items: [
+        {
+          title: "Components",
+          url: "#",
+        },
+        {
+          title: "File Conventions",
+          url: "#",
+        },
+        {
+          title: "Functions",
+          url: "#",
+        },
+        {
+          title: "next.config.js Options",
+          url: "#",
+        },
+        {
+          title: "CLI",
+          url: "#",
+        },
+        {
+          title: "Edge Runtime",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Architecture",
+      url: "#",
+      items: [
+        {
+          title: "Accessibility",
+          url: "#",
+        },
+        {
+          title: "Fast Refresh",
+          url: "#",
+        },
+        {
+          title: "Next.js Compiler",
+          url: "#",
+        },
+        {
+          title: "Supported Browsers",
+          url: "#",
+        },
+        {
+          title: "Turbopack",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Community",
+      url: "#",
+      items: [
+        {
+          title: "Contribution Guide",
+          url: "#",
+        },
+      ],
+    },
+  ],
+}
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar {...props}>
+      <SidebarHeader>
+        <VersionSwitcher
+          versions={data.versions}
+          defaultVersion={data.versions[0]}
+        />
+        <SearchForm />
+      </SidebarHeader>
+      <SidebarContent className="gap-0">
+        {/* We create a collapsible SidebarGroup for each parent. */}
+        {data.navMain.map((item) => (
+          <Collapsible
+            key={item.title}
+            title={item.title}
+            defaultOpen
+            className="group/collapsible"
+          >
+            <SidebarGroup>
+              <SidebarGroupLabel
+                asChild
+                className="group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+              >
+                <CollapsibleTrigger>
+                  {item.title}{" "}
+                  <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                </CollapsibleTrigger>
+              </SidebarGroupLabel>
+              <CollapsibleContent>
+                <SidebarGroupContent>
+                  <SidebarMenu>
+                    {item.items.map((item) => (
+                      <SidebarMenuItem key={item.title}>
+                        <SidebarMenuButton asChild isActive={item.isActive}>
+                          <a href={item.url}>{item.title}</a>
+                        </SidebarMenuButton>
+                      </SidebarMenuItem>
+                    ))}
+                  </SidebarMenu>
+                </SidebarGroupContent>
+              </CollapsibleContent>
+            </SidebarGroup>
+          </Collapsible>
+        ))}
+      </SidebarContent>
+      <SidebarRail />
+    </Sidebar>
+  )
+}
--- a/crop-x/src/components/layouts/Main.tsx
+++ b/crop-x/src/components/layouts/Main.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { useTheme } from '@/hooks/useTheme'
+import {Navbar1} from '@/components/layouts/Navbar.tsx'
+import  Page  from './SideBar/SideBar'
+import './index.css'
+function Main() {
+  return (
+      <div className = "parent-flex">
+        <Navbar1></Navbar1>
+        <div>
+        <Page></Page>
+        </div>
+      </div>
+  )
+}
+
+export default Main
--- a/crop-x/src/components/layouts/Navbar.tsx
+++ b/crop-x/src/components/layouts/Navbar.tsx
@@ -0,0 +1,299 @@
+import { Book, Menu, Sunset, Trees, Zap } from "lucide-react";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Button } from "@/components/ui/button";
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+} from "@/components/ui/navigation-menu";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+
+interface MenuItem {
+  title: string;
+  url: string;
+  description?: string;
+  icon?: React.ReactNode;
+  items?: MenuItem[];
+}
+
+interface Navbar1Props {
+  logo?: {
+    url: string;
+    src: string;
+    alt: string;
+    title: string;
+  };
+  menu?: MenuItem[];
+  auth?: {
+    login: {
+      title: string;
+      url: string;
+    };
+    signup: {
+      title: string;
+      url: string;
+    };
+  };
+}
+
+const Navbar1 = ({
+  logo = {
+    url: "https://www.shadcnblocks.com",
+    src: "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/logos/shadcnblockscom-icon.svg",
+    alt: "logo",
+    title: "Shadcnblocks.com",
+  },
+  menu = [
+    { title: "Home", url: "#" },
+    {
+      title: "Products",
+      url: "#",
+      items: [
+        {
+          title: "Blog",
+          description: "The latest industry news, updates, and info",
+          icon: <Book className="size-5 shrink-0" />,
+          url: "#",
+        },
+        {
+          title: "Company",
+          description: "Our mission is to innovate and empower the world",
+          icon: <Trees className="size-5 shrink-0" />,
+          url: "#",
+        },
+        {
+          title: "Careers",
+          description: "Browse job listing and discover our workspace",
+          icon: <Sunset className="size-5 shrink-0" />,
+          url: "#",
+        },
+        {
+          title: "Support",
+          description:
+            "Get in touch with our support team or visit our community forums",
+          icon: <Zap className="size-5 shrink-0" />,
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Resources",
+      url: "#",
+      items: [
+        {
+          title: "Help Center",
+          description: "Get all the answers you need right here",
+          icon: <Zap className="size-5 shrink-0" />,
+          url: "#",
+        },
+        {
+          title: "Contact Us",
+          description: "We are here to help you with any questions you have",
+          icon: <Sunset className="size-5 shrink-0" />,
+          url: "#",
+        },
+        {
+          title: "Status",
+          description: "Check the current status of our services and APIs",
+          icon: <Trees className="size-5 shrink-0" />,
+          url: "#",
+        },
+        {
+          title: "Terms of Service",
+          description: "Our terms and conditions for using our services",
+          icon: <Book className="size-5 shrink-0" />,
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Pricing",
+      url: "#",
+    },
+    {
+      title: "Blog",
+      url: "#",
+    },
+  ],
+  auth = {
+    login: { title: "Login", url: "#" },
+    signup: { title: "Sign up", url: "#" },
+  },
+}: Navbar1Props) => {
+  return (
+    <section className="py-4">
+      <div className="container">
+        {/* Desktop Menu */}
+        <nav className="hidden justify-between lg:flex">
+          <div className="flex items-center gap-6">
+            {/* Logo */}
+            <a href={logo.url} className="flex items-center gap-2">
+              <img
+                src={logo.src}
+                className="max-h-8 dark:invert"
+                alt={logo.alt}
+              />
+              <span className="text-lg font-semibold tracking-tighter">
+                {logo.title}
+              </span>
+            </a>
+            <div className="flex items-center">
+              <NavigationMenu>
+                <NavigationMenuList>
+                  {menu.map((item) => renderMenuItem(item))}
+                </NavigationMenuList>
+              </NavigationMenu>
+            </div>
+          </div>
+          <div className="flex gap-2">
+            <Button asChild variant="outline" size="sm">
+              <a href={auth.login.url}>{auth.login.title}</a>
+            </Button>
+            <Button asChild size="sm">
+              <a href={auth.signup.url}>{auth.signup.title}</a>
+            </Button>
+          </div>
+        </nav>
+
+        {/* Mobile Menu */}
+        <div className="block lg:hidden">
+          <div className="flex items-center justify-between">
+            {/* Logo */}
+            <a href={logo.url} className="flex items-center gap-2">
+              <img
+                src={logo.src}
+                className="max-h-8 dark:invert"
+                alt={logo.alt}
+              />
+            </a>
+            <Sheet>
+              <SheetTrigger asChild>
+                <Button variant="outline" size="icon">
+                  <Menu className="size-4" />
+                </Button>
+              </SheetTrigger>
+              <SheetContent className="overflow-y-auto">
+                <SheetHeader>
+                  <SheetTitle>
+                    <a href={logo.url} className="flex items-center gap-2">
+                      <img
+                        src={logo.src}
+                        className="max-h-8 dark:invert"
+                        alt={logo.alt}
+                      />
+                    </a>
+                  </SheetTitle>
+                </SheetHeader>
+                <div className="flex flex-col gap-6 p-4">
+                  <Accordion
+                    type="single"
+                    collapsible
+                    className="flex w-full flex-col gap-4"
+                  >
+                    {menu.map((item) => renderMobileMenuItem(item))}
+                  </Accordion>
+
+                  <div className="flex flex-col gap-3">
+                    <Button asChild variant="outline">
+                      <a href={auth.login.url}>{auth.login.title}</a>
+                    </Button>
+                    <Button asChild>
+                      <a href={auth.signup.url}>{auth.signup.title}</a>
+                    </Button>
+                  </div>
+                </div>
+              </SheetContent>
+            </Sheet>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const renderMenuItem = (item: MenuItem) => {
+  if (item.items) {
+    return (
+      <NavigationMenuItem key={item.title}>
+        <NavigationMenuTrigger>{item.title}</NavigationMenuTrigger>
+        <NavigationMenuContent className="bg-popover text-popover-foreground">
+          {item.items.map((subItem) => (
+            <NavigationMenuLink asChild key={subItem.title} className="w-80">
+              <SubMenuLink item={subItem} />
+            </NavigationMenuLink>
+          ))}
+        </NavigationMenuContent>
+      </NavigationMenuItem>
+    );
+  }
+
+  return (
+    <NavigationMenuItem key={item.title}>
+      <NavigationMenuLink
+        href={item.url}
+        className="bg-background hover:bg-muted hover:text-accent-foreground group inline-flex h-10 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors"
+      >
+        {item.title}
+      </NavigationMenuLink>
+    </NavigationMenuItem>
+  );
+};
+
+const renderMobileMenuItem = (item: MenuItem) => {
+  if (item.items) {
+    return (
+      <AccordionItem key={item.title} value={item.title} className="border-b-0">
+        <AccordionTrigger className="text-md py-0 font-semibold hover:no-underline">
+          {item.title}
+        </AccordionTrigger>
+        <AccordionContent className="mt-2">
+          {item.items.map((subItem) => (
+            <SubMenuLink key={subItem.title} item={subItem} />
+          ))}
+        </AccordionContent>
+      </AccordionItem>
+    );
+  }
+
+  return (
+    <a key={item.title} href={item.url} className="text-md font-semibold">
+      {item.title}
+    </a>
+  );
+};
+
+const SubMenuLink = ({ item }: { item: MenuItem }) => {
+  return (
+    <a
+      className="hover:bg-muted hover:text-accent-foreground flex min-w-80 select-none flex-row gap-4 rounded-md p-3 leading-none no-underline outline-none transition-colors"
+      href={item.url}
+    >
+      <div className="text-foreground">{item.icon}</div>
+      <div>
+        <div className="text-sm font-semibold">{item.title}</div>
+        {item.description && (
+          <p className="text-muted-foreground text-sm leading-snug">
+            {item.description}
+          </p>
+        )}
+      </div>
+    </a>
+  );
+};
+
+export  {Navbar1} ;
--- a/crop-x/src/components/layouts/SideBar/SideBar.tsx
+++ b/crop-x/src/components/layouts/SideBar/SideBar.tsx
@@ -0,0 +1,50 @@
+import { AppSidebar } from "@/components/app-sidebar"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb"
+import { Separator } from "@/components/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/components/ui/sidebar"
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbLink href="#">
+                  Building Your Application
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator className="hidden md:block" />
+              <BreadcrumbItem>
+                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          {Array.from({ length: 24 }).map((_, index) => (
+            <div
+              key={index}
+              className="aspect-video h-12 w-full rounded-lg bg-muted/50"
+            />
+          ))}
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
--- a/crop-x/src/components/layouts/index.css
+++ b/crop-x/src/components/layouts/index.css
@@ -0,0 +1,6 @@
+.parent-flex {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem; /* 控制子元素间距 */
+  width: 100%; /* 默认宽度 */
+}
--- a/crop-x/src/components/search-form.tsx
+++ b/crop-x/src/components/search-form.tsx
@@ -0,0 +1,28 @@
+import { Search } from "lucide-react"
+
+import { Label } from "@/components/ui/label"
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarInput,
+} from "@/components/ui/sidebar"
+
+export function SearchForm({ ...props }: React.ComponentProps<"form">) {
+  return (
+    <form {...props}>
+      <SidebarGroup className="py-0">
+        <SidebarGroupContent className="relative">
+          <Label htmlFor="search" className="sr-only">
+            Search
+          </Label>
+          <SidebarInput
+            id="search"
+            placeholder="Search the docs..."
+            className="pl-8"
+          />
+          <Search className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </form>
+  )
+}
--- a/crop-x/src/components/ui/accordion.tsx
+++ b/crop-x/src/components/ui/accordion.tsx
@@ -0,0 +1,56 @@
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
--- a/crop-x/src/components/ui/breadcrumb.tsx
+++ b/crop-x/src/components/ui/breadcrumb.tsx
@@ -0,0 +1,109 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("hover:text-foreground transition-colors", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("text-foreground font-normal", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}
--- a/crop-x/src/components/ui/button.tsx
+++ b/crop-x/src/components/ui/button.tsx
@@ -0,0 +1,60 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
--- a/crop-x/src/components/ui/collapsible.tsx
+++ b/crop-x/src/components/ui/collapsible.tsx
@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
--- a/crop-x/src/components/ui/dropdown-menu.tsx
+++ b/crop-x/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,255 @@
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}
--- a/crop-x/src/components/ui/input.tsx
+++ b/crop-x/src/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
--- a/crop-x/src/components/ui/label.tsx
+++ b/crop-x/src/components/ui/label.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
--- a/crop-x/src/components/ui/navigation-menu.tsx
+++ b/crop-x/src/components/ui/navigation-menu.tsx
@@ -0,0 +1,128 @@
+import * as React from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { cva } from "class-variance-authority"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const NavigationMenu = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative z-10 flex max-w-max flex-1 items-center justify-center",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <NavigationMenuViewport />
+  </NavigationMenuPrimitive.Root>
+))
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+
+const NavigationMenuList = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn(
+      "group flex flex-1 list-none items-center justify-center space-x-1",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent"
+)
+
+const NavigationMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger
+    ref={ref}
+    className={cn(navigationMenuTriggerStyle(), "group", className)}
+    {...props}
+  >
+    {children}{" "}
+    <ChevronDown
+      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuPrimitive.Trigger>
+))
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
+
+const NavigationMenuContent = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Content
+    ref={ref}
+    className={cn(
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link
+
+const NavigationMenuViewport = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+>(({ className, ...props }, ref) => (
+  <div className={cn("absolute left-0 top-full flex justify-center")}>
+    <NavigationMenuPrimitive.Viewport
+      className={cn(
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  </div>
+))
+NavigationMenuViewport.displayName =
+  NavigationMenuPrimitive.Viewport.displayName
+
+const NavigationMenuIndicator = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Indicator
+    ref={ref}
+    className={cn(
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      className
+    )}
+    {...props}
+  >
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuPrimitive.Indicator>
+))
+NavigationMenuIndicator.displayName =
+  NavigationMenuPrimitive.Indicator.displayName
+
+export {
+  navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+}
--- a/crop-x/src/components/ui/separator.tsx
+++ b/crop-x/src/components/ui/separator.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }
--- a/crop-x/src/components/ui/sheet.tsx
+++ b/crop-x/src/components/ui/sheet.tsx
@@ -0,0 +1,139 @@
+"use client"
+
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left"
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" &&
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" &&
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" &&
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" &&
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}
--- a/crop-x/src/components/ui/sidebar.tsx
+++ b/crop-x/src/components/ui/sidebar.tsx
@@ -0,0 +1,726 @@
+"use client"
+
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import { PanelLeftIcon } from "lucide-react"
+
+import { useIsMobile } from "@/hooks/use-mobile"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Separator } from "@/components/ui/separator"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import { Skeleton } from "@/components/ui/skeleton"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state"
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+
+type SidebarContextProps = {
+  state: "expanded" | "collapsed"
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.")
+  }
+
+  return context
+}
+
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}) {
+  const isMobile = useIsMobile()
+  const [openMobile, setOpenMobile] = React.useState(false)
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen)
+  const open = openProp ?? _open
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === "function" ? value(open) : value
+      if (setOpenProp) {
+        setOpenProp(openState)
+      } else {
+        _setOpen(openState)
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+    },
+    [setOpenProp, open]
+  )
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
+  }, [isMobile, setOpen, setOpenMobile])
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault()
+        toggleSidebar()
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [toggleSidebar])
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? "expanded" : "collapsed"
+
+  const contextValue = React.useMemo<SidebarContextProps>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+  )
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <TooltipProvider delayDuration={0}>
+        <div
+          data-slot="sidebar-wrapper"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH,
+              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+              ...style,
+            } as React.CSSProperties
+          }
+          className={cn(
+            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </TooltipProvider>
+    </SidebarContext.Provider>
+  )
+}
+
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  side?: "left" | "right"
+  variant?: "sidebar" | "floating" | "inset"
+  collapsible?: "offcanvas" | "icon" | "none"
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+  if (collapsible === "none") {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    )
+  }
+
+  return (
+    <div
+      className="group peer text-sidebar-foreground hidden md:block"
+      data-state={state}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        data-slot="sidebar-gap"
+        className={cn(
+          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+        )}
+      />
+      <div
+        data-slot="sidebar-container"
+        className={cn(
+          "relative inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+          side === "left"
+            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+          // Adjust the padding for floating and inset variants.
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+          className
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon"
+      className={cn("size-7", className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <PanelLeftIcon />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn(
+        "bg-background relative flex w-full flex-1 flex-col",
+        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn("bg-background h-8 w-full shadow-none", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn("bg-sidebar-border mx-2 w-auto", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "div"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-label"
+      data-sidebar="group-label"
+      className={cn(
+        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-action"
+      data-sidebar="group-action"
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn("w-full text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn("group/menu-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+  isActive?: boolean
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>
+} & VariantProps<typeof sidebarMenuButtonVariants>) {
+  const Comp = asChild ? Slot : "button"
+  const { isMobile, state } = useSidebar()
+
+  const button = (
+    <Comp
+      data-slot="sidebar-menu-button"
+      data-sidebar="menu-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+      {...props}
+    />
+  )
+
+  if (!tooltip) {
+    return button
+  }
+
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip,
+    }
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={state !== "collapsed" || isMobile}
+        {...tooltip}
+      />
+    </Tooltip>
+  )
+}
+
+function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+  showOnHover?: boolean
+}) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-action"
+      data-sidebar="menu-action"
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuBadge({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
+        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showIcon?: boolean
+}) {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  }, [])
+
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  )
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn(
+        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubItem({
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn("group/menu-sub-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubButton({
+  asChild = false,
+  size = "md",
+  isActive = false,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+  size?: "sm" | "md"
+  isActive?: boolean
+}) {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-sub-button"
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+}
--- a/crop-x/src/components/ui/skeleton.tsx
+++ b/crop-x/src/components/ui/skeleton.tsx
@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
--- a/crop-x/src/components/ui/tooltip.tsx
+++ b/crop-x/src/components/ui/tooltip.tsx
@@ -0,0 +1,59 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
--- a/crop-x/src/components/version-switcher.tsx
+++ b/crop-x/src/components/version-switcher.tsx
@@ -0,0 +1,62 @@
+import * as React from "react"
+import { Check, ChevronsUpDown, GalleryVerticalEnd } from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/components/ui/sidebar"
+
+export function VersionSwitcher({
+  versions,
+  defaultVersion,
+}: {
+  versions: string[]
+  defaultVersion: string
+}) {
+  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                <GalleryVerticalEnd className="size-4" />
+              </div>
+              <div className="flex flex-col gap-0.5 leading-none">
+                <span className="font-semibold">Documentation</span>
+                <span className="">v{selectedVersion}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-[--radix-dropdown-menu-trigger-width]"
+            align="start"
+          >
+            {versions.map((version) => (
+              <DropdownMenuItem
+                key={version}
+                onSelect={() => setSelectedVersion(version)}
+              >
+                v{version}{" "}
+                {version === selectedVersion && <Check className="ml-auto" />}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
--- a/crop-x/src/hooks/use-mobile.ts
+++ b/crop-x/src/hooks/use-mobile.ts
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}
--- a/crop-x/src/lib/utils.ts
+++ b/crop-x/src/lib/utils.ts
@@ -1,218 +1,6 @@
-import { type ClassValue, clsx } from "clsx"
+import { clsx, type ClassValue } from "clsx"
 import { twMerge } from "tailwind-merge"

-// 合并 Tailwind CSS 类名的工具函数
 export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
 }
-
-// 格式化日期
-export function formatDate(date: Date | string | number): string {
-  const d = new Date(date)
-  return d.toLocaleDateString('zh-CN', {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-  })
-}
-
-// 格式化时间
-export function formatTime(date: Date | string | number): string {
-  const d = new Date(date)
-  return d.toLocaleTimeString('zh-CN', {
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit',
-  })
-}
-
-// 格式化日期时间
-export function formatDateTime(date: Date | string | number): string {
-  return `${formatDate(date)} ${formatTime(date)}`
-}
-
-// 相对时间格式化
-export function formatRelativeTime(date: Date | string | number): string {
-  const now = new Date()
-  const target = new Date(date)
-  const diffMs = now.getTime() - target.getTime()
-  const diffSecs = Math.floor(diffMs / 1000)
-  const diffMins = Math.floor(diffSecs / 60)
-  const diffHours = Math.floor(diffMins / 60)
-  const diffDays = Math.floor(diffHours / 24)
-
-  if (diffSecs < 60) {
-    return '刚刚'
-  } else if (diffMins < 60) {
-    return `${diffMins}分钟前`
-  } else if (diffHours < 24) {
-    return `${diffHours}小时前`
-  } else if (diffDays < 7) {
-    return `${diffDays}天前`
-  } else {
-    return formatDate(date)
-  }
-}
-
-// 数字格式化
-export function formatNumber(num: number, precision = 2): string {
-  return num.toLocaleString('zh-CN', {
-    minimumFractionDigits: precision,
-    maximumFractionDigits: precision,
-  })
-}
-
-// 货币格式化
-export function formatCurrency(amount: number): string {
-  return new Intl.NumberFormat('zh-CN', {
-    style: 'currency',
-    currency: 'CNY',
-  }).format(amount)
-}
-
-// 百分比格式化
-export function formatPercentage(value: number, precision = 1): string {
-  return `${(value * 100).toFixed(precision)}%`
-}
-
-// 文件大小格式化
-export function formatFileSize(bytes: number): string {
-  const units = ['B', 'KB', 'MB', 'GB', 'TB']
-  let size = bytes
-  let unitIndex = 0
-
-  while (size >= 1024 && unitIndex < units.length - 1) {
-    size /= 1024
-    unitIndex++
-  }
-
-  return `${formatNumber(size, unitIndex === 0 ? 0 : 2)} ${units[unitIndex]}`
-}
-
-// 农机状态映射
-export const machineryStatusMap = {
-  running: { label: '运行中', color: 'status-running' },
-  idle: { label: '空闲中', color: 'status-idle' },
-  maintenance: { label: '维护中', color: 'status-maintenance' },
-  error: { label: '故障中', color: 'status-error' },
-  offline: { label: '离线', color: 'status-offline' },
-} as const
-
-// 获取农机状态信息
-export function getMachineryStatus(status: keyof typeof machineryStatusMap) {
-  return machineryStatusMap[status] || { label: '未知', color: 'status-idle' }
-}
-
-// 农作物类型映射
-export const cropTypeMap = {
-  rice: { label: '水稻', icon: '🌾' },
-  wheat: { label: '小麦', icon: '🌾' },
-  corn: { label: '玉米', icon: '🌽' },
-  soybean: { label: '大豆', icon: '🫘' },
-  vegetable: { label: '蔬菜', icon: '🥬' },
-  fruit: { label: '水果', icon: '🍎' },
-} as const
-
-// 获取农作物信息
-export function getCropInfo(type: keyof typeof cropTypeMap) {
-  return cropTypeMap[type] || { label: '未知', icon: '🌱' }
-}
-
-// 防抖函数
-export function debounce<T extends (...args: any[]) => any>(
-  func: T,
-  wait: number
-): (...args: Parameters<T>) => void {
-  let timeout: NodeJS.Timeout | null = null
-
-  return (...args: Parameters<T>) => {
-    if (timeout !== null) {
-      clearTimeout(timeout)
-    }
-    timeout = setTimeout(() => func(...args), wait)
-  }
-}
-
-// 节流函数
-export function throttle<T extends (...args: any[]) => any>(
-  func: T,
-  limit: number
-): (...args: Parameters<T>) => void {
-  let inThrottle: boolean = false
-
-  return (...args: Parameters<T>) => {
-    if (!inThrottle) {
-      func(...args)
-      inThrottle = true
-      setTimeout(() => (inThrottle = false), limit)
-    }
-  }
-}
-
-// 深拷贝
-export function deepClone<T>(obj: T): T {
-  if (obj === null || typeof obj !== 'object') {
-    return obj
-  }
-
-  if (obj instanceof Date) {
-    return new Date(obj.getTime()) as T
-  }
-
-  if (obj instanceof Array) {
-    return obj.map(item => deepClone(item)) as T
-  }
-
-  if (typeof obj === 'object') {
-    const clonedObj = {} as T
-    for (const key in obj) {
-      if (obj.hasOwnProperty(key)) {
-        clonedObj[key] = deepClone(obj[key])
-      }
-    }
-    return clonedObj
-  }
-
-  return obj
-}
-
-// 生成随机ID
-export function generateId(length = 8): string {
-  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
-  let result = ''
-  for (let i = 0; i < length; i++) {
-    result += chars.charAt(Math.floor(Math.random() * chars.length))
-  }
-  return result
-}
-
-// 验证邮箱
-export function isValidEmail(email: string): boolean {
-  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
-  return emailRegex.test(email)
-}
-
-// 验证手机号
-export function isValidPhone(phone: string): boolean {
-  const phoneRegex = /^1[3-9]\d{9}$/
-  return phoneRegex.test(phone)
-}
-
-// 计算两个日期之间的天数差
-export function daysBetween(date1: Date | string, date2: Date | string): number {
-  const d1 = new Date(date1)
-  const d2 = new Date(date2)
-  const diffTime = Math.abs(d2.getTime() - d1.getTime())
-  return Math.ceil(diffTime / (1000 * 60 * 60 * 24))
-}
-
-// 获取季节
-export function getSeason(date: Date | string = new Date()): string {
-  const d = new Date(date)
-  const month = d.getMonth() + 1
-
-  if (month >= 3 && month <= 5) return '春季'
-  if (month >= 6 && month <= 8) return '夏季'
-  if (month >= 9 && month <= 11) return '秋季'
-  return '冬季'
-}
--- a/crop-x/src/styles/globals.css
+++ b/crop-x/src/styles/globals.css
@@ -1,6 +1,8 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+
+@import "tailwindcss";
+
+@custom-variant dark (&:is(.dark *));
+@config "../../tailwind.config.js";

 /* CSS变量定义 - 农业管理系统主题 */
 :root {
@@ -59,6 +61,14 @@
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
+  --sidebar: hsl(0 0% 98%);
+  --sidebar-foreground: hsl(240 5.3% 26.1%);
+  --sidebar-primary: hsl(240 5.9% 10%);
+  --sidebar-primary-foreground: hsl(0 0% 98%);
+  --sidebar-accent: hsl(240 4.8% 95.9%);
+  --sidebar-accent-foreground: hsl(240 5.9% 10%);
+  --sidebar-border: hsl(220 13% 91%);
+  --sidebar-ring: hsl(217.2 91.2% 59.8%);
 }

 .dark {
@@ -81,6 +91,14 @@
  --border: 240 3% 15%;
  --input: 240 3% 15%;
  --ring: 142 70% 45%;
+  --sidebar: hsl(240 5.9% 10%);
+  --sidebar-foreground: hsl(240 4.8% 95.9%);
+  --sidebar-primary: hsl(224.3 76.3% 48%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(240 3.7% 15.9%);
+  --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
+  --sidebar-border: hsl(240 3.7% 15.9%);
+  --sidebar-ring: hsl(217.2 91.2% 59.8%);
 }

 /* 基础样式 */
@@ -92,6 +110,59 @@
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
 }

 /* 组件样式 */
@@ -207,4 +278,24 @@
  .card-agriculture {
    @apply shadow-none border border-gray-300;
  }
+}
+
+@theme inline {
+  --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;
+  }
 }
--- a/crop-x/tailwind.config.js
+++ b/crop-x/tailwind.config.js
@@ -9,69 +9,102 @@ export default {
  ],
  prefix: "",
  theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
-    extend: {
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-      keyframes: {
-        "accordion-down": {
-          from: { height: "0" },
-          to: { height: "var(--radix-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: "0" },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-      },
-    },
+  	container: {
+  		center: true,
+  		padding: '2rem',
+  		screens: {
+  			'2xl': '1400px'
+  		}
+  	},
+  	extend: {
+  		colors: {
+  			border: 'hsl(var(--border))',
+  			input: 'hsl(var(--input))',
+  			ring: 'hsl(var(--ring))',
+  			background: 'hsl(var(--background))',
+  			foreground: 'hsl(var(--foreground))',
+  			primary: {
+  				DEFAULT: 'hsl(var(--primary))',
+  				foreground: 'hsl(var(--primary-foreground))'
+  			},
+  			secondary: {
+  				DEFAULT: 'hsl(var(--secondary))',
+  				foreground: 'hsl(var(--secondary-foreground))'
+  			},
+  			destructive: {
+  				DEFAULT: 'hsl(var(--destructive))',
+  				foreground: 'hsl(var(--destructive-foreground))'
+  			},
+  			muted: {
+  				DEFAULT: 'hsl(var(--muted))',
+  				foreground: 'hsl(var(--muted-foreground))'
+  			},
+  			accent: {
+  				DEFAULT: 'hsl(var(--accent))',
+  				foreground: 'hsl(var(--accent-foreground))'
+  			},
+  			popover: {
+  				DEFAULT: 'hsl(var(--popover))',
+  				foreground: 'hsl(var(--popover-foreground))'
+  			},
+  			card: {
+  				DEFAULT: 'hsl(var(--card))',
+  				foreground: 'hsl(var(--card-foreground))'
+  			},
+  			chart: {
+  				'1': 'hsl(var(--chart-1))',
+  				'2': 'hsl(var(--chart-2))',
+  				'3': 'hsl(var(--chart-3))',
+  				'4': 'hsl(var(--chart-4))',
+  				'5': 'hsl(var(--chart-5))'
+  			}
+  		},
+  		borderRadius: {
+  			lg: 'var(--radius)',
+  			md: 'calc(var(--radius) - 2px)',
+  			sm: 'calc(var(--radius) - 4px)'
+  		},
+  		keyframes: {
+  			'accordion-down': {
+  				from: {
+  					height: '0'
+  				},
+  				to: {
+  					height: 'var(--radix-accordion-content-height)'
+  				}
+  			},
+  			'accordion-up': {
+  				from: {
+  					height: 'var(--radix-accordion-content-height)'
+  				},
+  				to: {
+  					height: '0'
+  				}
+  			},
+  			'accordion-down': {
+  				from: {
+  					height: '0'
+  				},
+  				to: {
+  					height: 'var(--radix-accordion-content-height)'
+  				}
+  			},
+  			'accordion-up': {
+  				from: {
+  					height: 'var(--radix-accordion-content-height)'
+  				},
+  				to: {
+  					height: '0'
+  				}
+  			}
+  		},
+  		animation: {
+  			'accordion-down': 'accordion-down 0.2s ease-out',
+  			'accordion-up': 'accordion-up 0.2s ease-out',
+  			'accordion-down': 'accordion-down 0.2s ease-out',
+  			'accordion-up': 'accordion-up 0.2s ease-out'
+  		}
+  	}
  },
-  plugins: [],
+  plugins: [require("tailwindcss-animate")],
 }
--- a/crop-x/tsconfig.json
+++ b/crop-x/tsconfig.json
@@ -36,5 +36,10 @@
    }
  },
  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "references": [{ "path": "./tsconfig.node.json" }],
+  "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
 }
--- a/crop-x/vite.config.ts
+++ b/crop-x/vite.config.ts
@@ -1,10 +1,10 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react-swc'
 import path from 'path'
-
+import tailwindcss from "@tailwindcss/vite"
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
--- a/docs/Pages目录结构与开发规范.md
+++ b/docs/Pages目录结构与开发规范.md
--- a/docs/stories/story-1-9-三级菜单实现.md
+++ b/docs/stories/story-1-9-三级菜单实现.md
@@ -0,0 +1,135 @@
+# 用户故事：多级菜单布局系统重构
+
+## 故事标题
+**多级菜单布局系统重构 - Brownfield Addition**
+
+## 用户故事
+作为系统用户，
+我需要一个新的多级菜单布局系统，
+以便更好地组织和访问系统的各个功能模块。
+
+## 故事上下文
+
+### 现有系统集成
+- **集成与**: 现有 `Navigation.tsx` 和 `Sidebar.tsx` 组件
+- **技术**: React + TypeScript + Tailwind CSS
+- **遵循模式**: 现有 shadcn/ui 组件库和项目架构
+- **接触点**: `src/App.tsx`, 路由系统, 菜单配置
+
+## 验收标准
+
+### 功能需求
+
+#### 1. 顶部菜单栏 (占15%视口高度)
+- **左侧**: Logo + "智慧农业生产管理系统"标题
+  - 显示绿色拖拉机图标和系统名称
+  - 包含英文副标题 "Smart Agriculture Management System"
+- **中间**: 7大子系统菜单项与图标
+  - 智能农机管理系统 (Tractor图标)
+  - 地块信息管理系统 (Map图标)
+  - 农事操作管理系统 (Clipboard图标)
+  - 农业资产管理系统 (Package图标)
+  - AI作物模型精准决策系统 (Brain图标)
+  - 水肥一体化控制系统 (Droplets图标)
+  - 中心配置管理系统 (Settings图标)
+- **右侧**: 用户功能区域
+  - 消息铃铛图标（显示未读消息数量）
+  - 系统管理员用户信息（头像+用户名）
+  - 用户下拉菜单（个人中心、退出登录等选项）
+
+#### 2. 左侧二级菜单
+- 根据选中的一级菜单动态显示对应的二级菜单项
+- 支持多级展开/折叠功能
+- 当前选中页面高亮显示（绿色背景）
+- 菜单项层次清晰，缩进合理
+
+#### 3. 右侧内容区域
+- 根据路由对应显示具体页面内容
+- 无路由对应时显示空页面状态
+- 内容区域自适应高度和宽度
+- 保持现有页面组件的功能不变
+
+### 集成需求
+4. **现有导航功能继续正常工作**: 保持与 `src/App.tsx` 中现有路由逻辑的兼容性
+5. **新布局遵循现有的设计模式和样式**: 使用 shadcn/ui 组件库，保持绿色主题
+6. **与现有认证系统和路由系统无缝集成**: 保持 `AuthContext` 和路径状态管理
+
+### 质量需求
+7. **响应式设计**: 适配不同屏幕尺寸（桌面、平板、移动端）
+8. **保持现有功能不回退**: 所有现有页面和功能必须正常工作
+9. **代码符合现有项目规范**: 遵循 TypeScript 严格模式，使用现有工具函数
+
+## 技术说明
+
+### 集成方法
+- **目录结构**: 在 `src/components/layouts/` 目录创建新的布局组件系统
+- **文件组织**:
+  - `MainLayout.tsx` - 主布局容器
+  - `TopNavigation.tsx` - 顶部导航栏
+  - `SideNavigation.tsx` - 侧边栏导航
+  - `ContentArea.tsx` - 内容区域组件
+
+### 现有模式参考
+- **组件样式**: 参考现有的 `Navigation.tsx` 实现模式
+- **菜单数据处理**: 保持与 `types/navigation.ts` 中菜单结构的一致性
+- **状态管理**: 使用现有的 `useState` 和路径状态管理模式
+- **UI组件**: 使用现有的 shadcn/ui 组件（Button, Popover, Badge等）
+
+### 关键约束
+- **保持现有菜单结构**: 7个子系统的菜单配置和层级结构不能改变
+- **保持路由逻辑**: 现有的路径导航和页面渲染逻辑必须保持兼容
+- **保持认证集成**: 用户认证状态和权限控制逻辑保持不变
+- **保持主题风格**: 绿色主题和整体视觉风格保持一致
+
+## 风险和兼容性检查
+
+### 最小风险评估
+- **主要风险**: 布局重构可能影响现有页面的显示和交互
+- **缓解措施**: 渐进式重构，保持现有组件接口不变
+- **回滚方案**: 可快速回退到现有的 Navigation + Sidebar 布局
+
+### 兼容性验证
+- [x] 无对现有API的破坏性更改
+- [x] 无数据库变更（纯前端重构）
+- [x] UI更改遵循现有设计模式
+- [x] 对性能的影响可忽略不计
+
+## 验证清单
+
+### 范围验证
+- [x] 故事可在一次开发会话内完成（预计2-4小时）
+- [x] 集成方法直接明了
+- [x] 完全遵循现有模式
+- [x] 无需设计或架构工作
+
+### 清晰度检查
+- [x] 故事要求明确无误
+- [x] 集成点明确指定
+- [x] 成功标准可测试
+- [x] 回滚计划简单
+
+## 完成标准
+
+- [ ] 顶部菜单栏正确显示，占15%视口高度
+- [ ] 7大子系统菜单项正确显示并可点击
+- [ ] 消息铃铛和用户下拉菜单功能正常
+- [ ] 左侧二级菜单根据一级菜单选择动态更新
+- [ ] 右侧内容区域正确显示对应页面内容
+- [ ] 响应式设计在不同屏幕尺寸下正常工作
+- [ ] 现有功能回归测试通过
+- [ ] 代码遵循现有模式和标准
+- [ ] 与现有认证系统正常集成
+- [ ] 无浏览器控制台错误或警告
+
+## 重要的注意事项
+
+- 这个故事主要涉及UI结构调整，不需要复杂的后端集成
+- 重构过程中应保持所有现有页面的功能和数据流
+- 重点关注用户体验的一致性和导航的流畅性
+- 如果复杂度超出预期，考虑拆分为多个较小的故事
+- 预计开发时间：2-4小时的专注开发工作
+
+---
+**故事创建时间**: 2025-10-17
+**创建人**: PM Agent (John)
+**预计工作量**: 0.5 story points (小型重构任务)
--- a/docs/项目架构设计文档.md
+++ b/docs/项目架构设计文档.md
@@ -218,7 +218,9 @@ interface User {
 - ✅ React Hook Form + Zod

 #### 新增核心技术
- 🆕 **React Router v6**: 专业路由管理
+- 🆕 **Next.js 14**: 现代化 React 全栈框架，支持动态路由和SSR
+- 🆕 **Next.js App Router**: 基于文件系统的动态路由
+- 🆕 **React Server Components**: 服务端组件渲染优化
 - 🆕 **Zustand**: 轻量级状态管理
 - 🆕 **TanStack Query**: 服务端状态管理
 - 🆕 **MSW**: Mock Service Worker
@@ -231,8 +233,48 @@ interface User {
 crop-x/
 ├── public/                     # 静态资源
 │   ├── favicon.ico
-│   └── index.html
+│   └── next-env.d.ts         # Next.js 类型声明
 ├── src/
+│   ├── app/                   # Next.js App Router 目录
+│   │   ├── layout.tsx         # 根布局
+│   │   ├── page.tsx           # 首页
+│   │   ├── globals.css        # 全局样式
+│   │   ├── (auth)/            # 认证相关路由组
+│   │   │   ├── login/
+│   │   │   │   └── page.tsx
+│   │   │   └── register/
+│   │   │       └── page.tsx
+│   │   ├── machinery/         # 农机管理动态路由
+│   │   │   ├── layout.tsx     # 农机模块布局
+│   │   │   ├── page.tsx       # 农机默认页面
+│   │   │   ├── archive/
+│   │   │   │   ├── entry/
+│   │   │   │   │   └── page.tsx
+│   │   │   │   └── [id]/
+│   │   │   │       └── page.tsx # 动态路由详情页
+│   │   │   ├── driver/
+│   │   │   │   └── page.tsx
+│   │   │   └── monitoring/
+│   │   │       └── realtime/
+│   │   │           └── page.tsx
+│   │   ├── field/             # 地块管理动态路由
+│   │   │   ├── layout.tsx
+│   │   │   ├── page.tsx
+│   │   │   └── [category]/
+│   │   │       └── page.tsx
+│   │   ├── operation/         # 农事操作动态路由
+│   │   ├── asset/             # 资产管理动态路由
+│   │   ├── ai-model/          # AI模型动态路由
+│   │   ├── irrigation/        # 灌溉控制动态路由
+│   │   ├── config/            # 配置管理动态路由
+│   │   │   ├── layout.tsx
+│   │   │   ├── page.tsx
+│   │   │   └── tenant/
+│   │   │       ├── enterprise-audit/
+│   │   │       │   └── page.tsx
+│   │   │       └── [enterpriseId]/
+│   │   │           └── page.tsx # 企业详情动态路由
+│   │   └── loading.tsx        # 全局加载组件
 │   ├── components/             # 可复用组件
 │   │   ├── ui/                # shadcn/ui 基础组件
 │   │   │   ├── button/
@@ -247,178 +289,307 @@ crop-x/
 │   │       ├── Header/
 │   │       ├── Sidebar/
 │   │       └── Layout/
-│   ├── pages/                 # 页面组件（按业务模块）
-│   │   ├── auth/              # 认证相关页面
-│   │   │   ├── LoginPage.tsx
-│   │   │   └── RegisterPage.tsx
-│   │   ├── machinery/         # 农机管理页面
-│   │   │   ├── MachineryListPage.tsx
-│   │   │   ├── MachineryDetailPage.tsx
-│   │   │   ├── DriverListPage.tsx
+│   ├── lib/                   # Next.js 库目录
+│   │   ├── stores/            # Zustand 状态管理
+│   │   │   ├── authStore.ts
+│   │   │   ├── machineryStore.ts
 │   │   │   └── ...
-│   │   ├── field/             # 地块管理页面
-│   │   ├── operation/         # 农事操作页面
-│   │   ├── asset/             # 资产管理页面
-│   │   ├── ai-model/          # AI模型页面
-│   │   ├── irrigation/        # 灌溉控制页面
-│   │   └── config/            # 配置管理页面
-│   ├── stores/                # Zustand 状态管理
-│   │   ├── authStore.ts       # 认证状态
-│   │   ├── machineryStore.ts  # 农机状态
-│   │   ├── fieldStore.ts      # 地块状态
-│   │   ├── operationStore.ts  # 农事状态
-│   │   ├── assetStore.ts      # 资产状态
-│   │   ├── aiModelStore.ts    # AI模型状态
-│   │   ├── irrigationStore.ts # 灌溉状态
-│   │   └── configStore.ts     # 配置状态
-│   ├── services/              # API 服务层
-│   │   ├── api/               # API 配置和请求
-│   │   │   ├── client.ts      # Axios 配置
-│   │   │   ├── machineryApi.ts
-│   │   │   ├── fieldApi.ts
-│   │   │   └── ...
-│   │   ├── mock/              # Mock 数据管理
-│   │   │   ├── handlers/      # MSW 处理器
-│   │   │   ├── data/          # Mock 数据
-│   │   │   └── browser.ts     # MSW 配置
-│   │   └── types/             # API 类型定义
-│   │       ├── machinery.ts
-│   │       ├── field.ts
-│   │       └── ...
-│   ├── hooks/                 # 自定义 Hooks
-│   │   ├── useAuth.ts
-│   │   ├── useMachinery.ts
-│   │   └── ...
-│   ├── utils/                 # 工具函数
-│   │   ├── date.ts
-│   │   ├── format.ts
-│   │   └── ...
-│   ├── constants/             # 常量定义
-│   │   ├── routes.ts
-│   │   ├── permissions.ts
-│   │   └── ...
-│   ├── router/                # 路由配置
-│   │   ├── index.ts           # 路由器配置
-│   │   ├── authRoutes.ts      # 认证路由
-│   │   ├── machineryRoutes.ts # 农机路由
-│   │   └── ...
-│   ├── styles/                # 样式文件
-│   │   ├── globals.css
-│   │   └── components.css
+│   │   ├── services/          # API 服务层
+│   │   │   ├── api/           # API 配置和请求
+│   │   │   │   ├── client.ts
+│   │   │   │   ├── machineryApi.ts
+│   │   │   │   └── ...
+│   │   │   ├── mock/          # Mock 数据管理
+│   │   │   │   ├── handlers/
+│   │   │   │   ├── data/
+│   │   │   │   └── browser.ts
+│   │   │   └── types/
+│   │   │       ├── machinery.ts
+│   │   │       └── ...
+│   │   ├── hooks/             # 自定义 Hooks
+│   │   │   ├── useAuth.ts
+│   │   │   └── useMachinery.ts
+│   │   ├── utils/             # 工具函数
+│   │   │   ├── date.ts
+│   │   │   └── format.ts
+│   │   └── constants/         # 常量定义
+│   │       ├── routes.ts
+│   │       └── permissions.ts
 │   ├── types/                 # 全局类型定义
 │   │   ├── auth.ts
 │   │   ├── machinery.ts
-│   │   ├── navigation.ts
-│   │   └── ...
-│   ├── App.tsx                # 根组件
-│   └── main.tsx               # 应用入口
+│   │   └── navigation.ts
+│   └── styles/                # 样式文件
+│       └── globals.css
 ├── tests/                     # 测试文件
-│   ├── __mocks__/             # 全局 Mock
-│   ├── fixtures/              # 测试数据
-│   ├── unit/                  # 单元测试
-│   ├── integration/           # 集成测试
-│   └── setup.ts               # 测试配置
+│   ├── __mocks__/
+│   ├── fixtures/
+│   ├── unit/
+│   ├── integration/
+│   └── setup.ts
 ├── docs/                      # 项目文档
 ├── .eslintrc.js               # ESLint 配置
 ├── .prettierrc                # Prettier 配置
+├── next.config.js             # Next.js 配置
 ├── package.json
-├── vite.config.ts
 ├── tsconfig.json
 ├── tailwind.config.js
 └── README.md
 ```

-### 路由系统重设计
+### Next.js 动态路由系统设计
+
+#### App Router 架构
+Next.js App Router 提供了基于文件系统的路由，支持动态路由、嵌套路由和路由组。

-#### 路由架构
 ```typescript
-// router/index.ts
-import { createBrowserRouter, RouterProvider } from 'react-router-dom'
-import { ProtectedRoute } from '../components/ProtectedRoute'
-import { Layout } from '../components/layout/Layout'
-import { authRoutes } from './authRoutes'
-import { machineryRoutes } from './machineryRoutes'
-// ... 其他路由
+// src/app/layout.tsx - 根布局
+import { AuthProvider } from '@/lib/providers/AuthProvider'
+import { ThemeProvider } from '@/lib/providers/ThemeProvider'
+import './globals.css'

-export const router = createBrowserRouter([
-  // 公开路由
-  ...authRoutes,
-
-  // 受保护的主路由
-  {
-    path: '/',
-    element: (
-      <ProtectedRoute>
-        <Layout />
-      </ProtectedRoute>
-    ),
-    children: [
-      // 7大业务系统路由
-      ...machineryRoutes,
-      ...fieldRoutes,
-      ...operationRoutes,
-      ...assetRoutes,
-      ...aiModelRoutes,
-      ...irrigationRoutes,
-      ...configRoutes,
-
-      // 默认路由
-      {
-        index: true,
-        element: <Navigate to="/machinery/archive/entry" replace />
-      }
-    ]
-  },
-
-  // 404页面
-  { path: '*', element: <NotFoundPage /> }
-])
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="zh-CN">
+      <body>
+        <ThemeProvider>
+          <AuthProvider>
+            {children}
+          </AuthProvider>
+        </ThemeProvider>
+      </body>
+    </html>
+  )
+}
 ```

-#### 业务路由示例
+#### 动态路由示例
+
+##### 1. 农机管理模块路由结构
+```
+src/app/machinery/
+├── layout.tsx              # 农机模块专属布局
+├── page.tsx               # /machinery - 农机管理首页
+├── archive/
+│   ├── page.tsx           # /machinery/archive - 档案管理
+│   ├── entry/
+│   │   └── page.tsx       # /machinery/archive/entry - 档案录入
+│   └── [id]/
+│       └── page.tsx       # /machinery/archive/[id] - 动态详情页
+├── driver/
+│   ├── page.tsx           # /machinery/driver - 驾驶员管理
+│   └── [driverId]/
+│       └── page.tsx       # /machinery/driver/[driverId] - 驾驶员详情
+└── monitoring/
+    └── realtime/
+        └── page.tsx       # /machinery/monitoring/realtime - 实时监控
+```
+
+##### 2. 动态路由组件实现
 ```typescript
-// router/machineryRoutes.ts
-import { lazy } from 'react'
+// src/app/machinery/archive/[id]/page.tsx
+import { notFound } from 'next/navigation'
+import { MachineryDetailPage } from '@/components/pages/machinery/MachineryDetailPage'
+import { getMachineryById } from '@/lib/services/api/machineryApi'

-// 懒加载页面组件
-const MachineryListPage = lazy(() => import('../pages/machinery/MachineryListPage'))
-const MachineryDetailPage = lazy(() => import('../pages/machinery/MachineryDetailPage'))
-const DriverListPage = lazy(() => import('../pages/machinery/DriverListPage'))
+interface Props {
+  params: { id: string }
+}

-export const machineryRoutes = [
-  {
-    path: 'machinery/*',
-    children: [
-      // 农机档案管理
-      {
-        path: 'archive/entry',
-        element: <MachineryListPage />
-      },
-      {
-        path: 'archive/detail/:id',
-        element: <MachineryDetailPage />
-      },
+export default async function MachineryDetail({ params }: Props) {
+  const machinery = await getMachineryById(params.id)

-      // 驾驶员管理
-      {
-        path: 'driver/list',
-        element: <DriverListPage />
-      },
-
-      // 实时监控
-      {
-        path: 'monitoring/realtime',
-        element: lazy(() => import('../pages/machinery/MonitoringPage'))
-      },
-
-      // 任务调度
-      {
-        path: 'scheduling/task',
-        element: lazy(() => import('../pages/machinery/SchedulingPage'))
-      }
-    ]
+  if (!machinery) {
+    notFound()
  }
-]
+
+  return (
+    <div className="container mx-auto p-6">
+      <MachineryDetailPage machinery={machinery} />
+    </div>
+  )
+}
+
+// 生成静态路径（可选，用于SSG）
+export async function generateStaticParams() {
+  // 预生成一些常见的农机详情页
+  return [
+    { id: 'machinery-001' },
+    { id: 'machinery-002' },
+    { id: 'machinery-003' },
+  ]
+}
+```
+
+##### 3. 路由组的使用
+```
+src/app/
+├── (auth)/                  # 路由组：不影响URL路径
+│   ├── layout.tsx          # 认证页面专属布局
+│   ├── login/
+│   │   └── page.tsx       # /login
+│   └── register/
+│       └── page.tsx       # /register
+├── (dashboard)/            # 路由组：受保护的管理区域
+│   ├── layout.tsx          # 仪表板布局
+│   ├── machinery/
+│   ├── field/
+│   └── config/
+```
+
+##### 4. 路由布局系统
+```typescript
+// src/app/(dashboard)/layout.tsx
+import { SidebarProvider } from '@/lib/providers/SidebarProvider'
+import { MainLayout } from '@/components/layout/MainLayout'
+import { auth } from '@/lib/auth'
+
+export default async function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  // 服务端认证检查
+  const session = await auth()
+
+  if (!session) {
+    redirect('/login')
+  }
+
+  return (
+    <SidebarProvider>
+      <MainLayout>
+        {children}
+      </MainLayout>
+    </SidebarProvider>
+  )
+}
+```
+
+#### 动态路由特性
+
+##### 1. 路由参数处理
+```typescript
+// src/app/config/tenant/[enterpriseId]/page.tsx
+interface PageProps {
+  params: { enterpriseId: string }
+  searchParams: { [key: string]: string | string[] | undefined }
+}
+
+export default async function EnterpriseDetail({
+  params,
+  searchParams,
+}: PageProps) {
+  const enterpriseId = params.enterpriseId
+  const tab = searchParams.tab as string || 'basic'
+
+  // 根据查询参数显示不同tab
+  return (
+    <div>
+      <h1>企业详情：{enterpriseId}</h1>
+      <EnterpriseDetailTab activeTab={tab} enterpriseId={enterpriseId} />
+    </div>
+  )
+}
+```
+
+##### 2. 平行路由和插槽
+```typescript
+// src/app/machinery/layout.tsx
+export default function MachineryLayout({
+  children,
+  analytics,
+  monitoring, // 插槽
+}: {
+  children: React.ReactNode
+  analytics?: React.ReactNode
+  monitoring?: React.ReactNode
+}) {
+  return (
+    <div className="flex h-full">
+      <div className="flex-1">{children}</div>
+      {analytics && (
+        <div className="w-80 border-l">{analytics}</div>
+      )}
+      {monitoring && (
+        <div className="w-80 border-l">{monitoring}</div>
+      )}
+    </div>
+  )
+}
+```
+
+##### 3. 路由中间件
+```typescript
+// middleware.ts
+import { NextResponse } from 'next/server'
+import type { NextRequest } from 'next/server'
+import { auth } from './lib/auth'
+
+export async function middleware(request: NextRequest) {
+  const session = await auth()
+  const { pathname } = request.nextUrl
+
+  // 未登录用户重定向到登录页
+  if (!session && pathname.startsWith('/dashboard')) {
+    return NextResponse.redirect(new URL('/login', request.url))
+  }
+
+  // 已登录用户访问登录页重定向到仪表板
+  if (session && pathname === '/login') {
+    return NextResponse.redirect(new URL('/dashboard', request.url))
+  }
+
+  return NextResponse.next()
+}
+
+export const config = {
+  matcher: ['/dashboard/:path*', '/login', '/register']
+}
+```
+
+#### 服务端组件优势
+
+##### 1. 数据获取
+```typescript
+// src/app/machinery/page.tsx - 服务端组件
+import { getMachineryList } from '@/lib/services/api/machineryApi'
+import { MachineryGrid } from '@/components/business/machinery/MachineryGrid'
+
+export default async function MachineryPage() {
+  // 服务端直接获取数据
+  const machineryData = await getMachineryList()
+
+  return (
+    <div>
+      <h1>农机管理系统</h1>
+      <MachineryGrid initialData={machineryData} />
+    </div>
+  )
+}
+```
+
+##### 2. 缓存和重新验证
+```typescript
+// src/lib/services/api/machineryApi.ts
+export async function getMachineryList() {
+  const res = await fetch('/api/machinery', {
+    next: {
+      tags: ['machinery'], // 缓存标签
+      revalidate: 60,      // 60秒重新验证
+    }
+  })
+
+  if (!res.ok) {
+    throw new Error('Failed to fetch machinery data')
+  }
+
+  return res.json()
+}
 ```

 ### 状态管理架构
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,61 +1,60 @@
-
-  {
+{
      "name": "智慧农业生产管理系统",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
-          "@radix-ui/react-accordion": "^1.2.3",
-          "@radix-ui/react-alert-dialog": "^1.1.6",
-          "@radix-ui/react-aspect-ratio": "^1.1.2",
-          "@radix-ui/react-avatar": "^1.1.3",
-          "@radix-ui/react-checkbox": "^1.1.4",
-          "@radix-ui/react-collapsible": "^1.1.3",
-          "@radix-ui/react-context-menu": "^2.2.6",
-          "@radix-ui/react-dialog": "^1.1.6",
-          "@radix-ui/react-dropdown-menu": "^2.1.6",
-          "@radix-ui/react-hover-card": "^1.1.6",
-          "@radix-ui/react-label": "^2.1.2",
-          "@radix-ui/react-menubar": "^1.1.6",
-          "@radix-ui/react-navigation-menu": "^1.2.5",
-          "@radix-ui/react-popover": "^1.1.6",
-          "@radix-ui/react-progress": "^1.1.2",
-          "@radix-ui/react-radio-group": "^1.2.3",
-          "@radix-ui/react-scroll-area": "^1.2.3",
-          "@radix-ui/react-select": "^2.1.6",
-          "@radix-ui/react-separator": "^1.1.2",
-          "@radix-ui/react-slider": "^1.2.3",
-          "@radix-ui/react-slot": "^1.1.2",
-          "@radix-ui/react-switch": "^1.1.3",
-          "@radix-ui/react-tabs": "^1.1.3",
-          "@radix-ui/react-toggle": "^1.1.2",
-          "@radix-ui/react-toggle-group": "^1.1.2",
-          "@radix-ui/react-tooltip": "^1.1.8",
-          "class-variance-authority": "^0.7.1",
-          "clsx": "*",
-          "cmdk": "^1.1.1",
-          "date-fns": "*",
-          "embla-carousel-react": "^8.6.0",
-          "input-otp": "^1.4.2",
-          "lucide-react": "^0.487.0",
-          "next-themes": "^0.4.6",
-          "qrcode": "*",
-          "react": "^18.3.1",
-          "react-day-picker": "^8.10.1",
-          "react-dom": "^18.3.1",
-          "react-hook-form": "^7.55.0",
-          "react-resizable-panels": "^2.1.7",
-          "recharts": "^2.15.2",
-          "sonner": "^2.0.3",
-          "tailwind-merge": "*",
-          "vaul": "^1.1.2"
+            "@radix-ui/react-accordion": "^1.2.3",
+            "@radix-ui/react-alert-dialog": "^1.1.6",
+            "@radix-ui/react-aspect-ratio": "^1.1.2",
+            "@radix-ui/react-avatar": "^1.1.3",
+            "@radix-ui/react-checkbox": "^1.1.4",
+            "@radix-ui/react-collapsible": "^1.1.3",
+            "@radix-ui/react-context-menu": "^2tw.2.6",
+            "@radix-ui/react-dialog": "^1.1.6",
+            "@radix-ui/react-dropdown-menu": "^2.1.6",
+            "@radix-ui/react-hover-card": "^1.1.6",
+            "@radix-ui/react-label": "^2.1.2",
+            "@radix-ui/react-menubar": "^1.1.6",
+            "@radix-ui/react-navigation-menu": "^1.2.5",
+            "@radix-ui/react-popover": "^1.1.6",
+            "@radix-ui/react-progress": "^1.1.2",
+            "@radix-ui/react-radio-group": "^1.2.3",
+            "@radix-ui/react-scroll-area": "^1.2.3",
+            "@radix-ui/react-select": "^2.1.6",
+            "@radix-ui/react-separator": "^1.1.2",
+            "@radix-ui/react-slider": "^1.2.3",
+            "@radix-ui/react-slot": "^1.1.2",
+            "@radix-ui/react-switch": "^1.1.3",
+            "@radix-ui/react-tabs": "^1.1.3",
+            "@radix-ui/react-toggle": "^1.1.2",
+            "@radix-ui/react-toggle-group": "^1.1.2",
+            "@radix-ui/react-tooltip": "^1.1.8",
+            "class-variance-authority": "^0.7.1",
+            "clsx": "*",
+            "cmdk": "^1.1.1",
+            "date-fns": "*",
+            "embla-carousel-react": "^8.6.0",
+            "input-otp": "^1.4.2",
+            "lucide-react": "^0.487.0",
+            "next-themes": "^0.4.6",
+            "qrcode": "*",
+            "react": "^18.3.1",
+            "react-day-picker": "^8.10.1",
+            "react-dom": "^18.3.1",
+            "react-hook-form": "^7.55.0",
+            "react-resizable-panels": "^2.1.7",
+            "recharts": "^2.15.2",
+            "sonner": "^2.0.3",
+            "tailwind-merge": "*",
+            "vaul": "^1.1.2"
      },
      "devDependencies": {
-          "@types/node": "^20.10.0",
-          "@vitejs/plugin-react-swc": "^3.10.2",
-          "vite": "6.3.5"
+            "@types/node": "^20.10.0",
+            "@vitejs/plugin-react-swc": "^3.10.2",
+            "vite": "6.3.5"
      },
      "scripts": {
-          "dev": "vite",
-          "build": "vite build"
+            "dev": "vite",
+            "build": "vite build"
      }
-  }
+}
--- a/src/index.css
+++ b/src/index.css
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,7 +1,7 @@

  import { createRoot } from "react-dom/client";
  import App from "./App.tsx";
-  import "./index.css";
+  import "./styles/globals.css";

  createRoot(document.getElementById("root")!).render(<App />);
  
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,4 +1,175 @@
-@custom-variant dark (&:is(.dark *));
+@import 'tailwindcss';
+
+/* 自定义变量和农业主题色彩 */
+:root {
+  /* 基础字体大小 */
+  --font-size: 16px;
+
+  /* 绿色农业主题色系 */
+  --color-green-50: #f0fdf4;
+  --color-green-100: #dcfce7;
+  --color-green-200: #bbf7d0;
+  --color-green-300: #86efac;
+  --color-green-400: #4ade80;
+  --color-green-500: #22c55e;
+  --color-green-600: #16a34a;
+  --color-green-700: #15803d;
+  --color-green-800: #166534;
+  --color-green-900: #14532d;
+  --color-green-950: #052e16;
+
+  /* 农业相关色彩 */
+  --color-earth-50: #fef7ee;
+  --color-earth-100: #fdecd1;
+  --color-earth-200: #fad7bc;
+  --color-earth-300: #f6c4a0;
+  --color-earth-400: #f0aa7c;
+  --color-earth-500: #ea8e5e;
+  --color-earth-600: #d4734d;
+  --color-earth-700: #b35a3b;
+  --color-earth-800: #8e4332;
+  --color-earth-900: #723528;
+
+  --color-water-50: #ecfeff;
+  --color-water-100: #cffafe;
+  --color-water-200: #a5f3fc;
+  --color-water-300: #67e8f9;
+  --color-water-400: #22d3ee;
+  --color-water-500: #06b6d4;
+  --color-water-600: #0891b2;
+  --color-water-700: #0e7490;
+  --color-water-800: #155e75;
+  --color-water-900: #164e63;
+
+  --color-crop-wheat: #fbbf24;
+  --color-crop-rice: #34d399;
+  --color-crop-corn: #f59e0b;
+  --color-crop-soy: #8b5cf6;
+  --color-crop-vegetable: #10b981;
+  --color-crop-fruit: #ef4444;
+
+  /* 现有的基础色彩系统 */
+  --background: #ffffff;
+  --foreground: oklch(0.145 0 0);
+  --card: #ffffff;
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: #16a34a; /* 使用绿色作为主色 */
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.95 0.0058 264.53);
+  --secondary-foreground: #030213;
+  --muted: #ececf0;
+  --muted-foreground: #717182;
+  --accent: #e9ebef;
+  --accent-foreground: #030213;
+  --destructive: #d4183d;
+  --destructive-foreground: #ffffff;
+  --border: rgba(0, 0, 0, 0.1);
+  --input: transparent;
+  --input-background: #f3f3f5;
+  --switch-background: #cbced4;
+  --font-weight-medium: 500;
+  --font-weight-normal: 400;
+  --ring: oklch(0.708 0 0);
+  --chart-1: var(--color-green-600);
+  --chart-2: var(--color-water-600);
+  --chart-3: var(--color-earth-600);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: var(--color-green-600);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+
+  /* 动画缓动 */
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: var(--color-green-500);
+  --primary-foreground: oklch(0.145 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+  --font-weight-medium: 500;
+  --font-weight-normal: 400;
+  --chart-1: var(--color-green-400);
+  --chart-2: var(--color-water-400);
+  --chart-3: var(--color-earth-400);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: var(--color-green-400);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+@theme inline {
+  --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-input-background: var(--input-background);
+  --color-switch-background: var(--switch-background);
+  --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);
+}

 :root {
  --font-size: 16px;
@@ -192,13 +363,543 @@ html {
  font-size: var(--font-size);
 }

-/* Field value styling for forms and detail views */
-@layer components {
-  .field-value {
-    @apply mt-2 text-base text-foreground px-3 py-2 bg-gray-50 rounded-md min-h-[2.5rem] flex items-center;
+/* 自定义基础样式 */
+@layer base {
+  /* 自定义滚动条 */
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
  }
-  
+
+  ::-webkit-scrollbar-track {
+    @apply bg-gray-100;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply bg-gray-300 rounded-full;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-gray-400;
+  }
+
+  /* Firefox 滚动条 */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: rgb(209 213 219) rgb(243 244 246);
+  }
+
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* 自定义组件样式 - 农业主题 */
+@layer components {
+  /* 农业状态指示器 */
+  .status-running {
+    @apply bg-green-100 text-green-800 px-3 py-1 rounded-full text-xs font-medium;
+  }
+
+  .status-idle {
+    @apply bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-xs font-medium;
+  }
+
+  .status-maintenance {
+    @apply bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-xs font-medium;
+  }
+
+  .status-scrapped {
+    @apply bg-red-100 text-red-800 px-3 py-1 rounded-full text-xs font-medium;
+  }
+
+  /* 农作物类型徽章 */
+  .crop-wheat {
+    @apply bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-xs font-medium;
+  }
+
+  .crop-rice {
+    @apply bg-emerald-100 text-emerald-800 px-2 py-1 rounded text-xs font-medium;
+  }
+
+  .crop-corn {
+    @apply bg-orange-100 text-orange-800 px-2 py-1 rounded text-xs font-medium;
+  }
+
+  .crop-soy {
+    @apply bg-purple-100 text-purple-800 px-2 py-1 rounded text-xs font-medium;
+  }
+
+  .crop-vegetable {
+    @apply bg-green-100 text-green-800 px-2 py-1 rounded text-xs font-medium;
+  }
+
+  .crop-fruit {
+    @apply bg-red-100 text-red-800 px-2 py-1 rounded text-xs font-medium;
+  }
+
+  /* 表格边框样式 */
+  .table-row-border {
+    border-bottom: 1px solid theme('colors.border');
+  }
+
+  /* 卡片阴影效果 */
+  .card-shadow {
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  }
+
+  /* 输入框聚焦效果 */
+  .input-focus {
+    @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent;
+  }
+
+  /* 按钮过渡效果 */
+  .btn-transition {
+    @apply transition-all duration-200 ease-in-out;
+  }
+
+  /* 文字省略 */
+  .text-ellipsis-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .text-ellipsis-3 {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  /* 按钮组件 */
+  .btn {
+    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-md btn-transition focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
+  }
+
+  .btn-primary {
+    @apply bg-primary text-primary-foreground hover:bg-primary/90 focus:ring-primary-500;
+  }
+
+  .btn-secondary {
+    @apply bg-secondary text-secondary-foreground hover:bg-secondary/80 focus:ring-secondary-500;
+  }
+
+  .btn-outline {
+    @apply border border-border bg-background text-foreground hover:bg-accent hover:text-accent-foreground focus:ring-primary-500;
+  }
+
+  .btn-ghost {
+    @apply text-muted-foreground hover:bg-accent hover:text-accent-foreground focus:ring-accent-foreground;
+  }
+
+  .btn-sm {
+    @apply px-3 py-1.5 text-xs;
+  }
+
+  .btn-lg {
+    @apply px-6 py-3 text-base;
+  }
+
+  /* 输入框组件 */
+  .input {
+    @apply block w-full px-3 py-2 border border-input bg-background rounded-md placeholder:text-muted-foreground input-focus;
+  }
+
+  .input-error {
+    @apply border-destructive focus:ring-destructive;
+  }
+
+  /* 卡片组件 */
+  .card {
+    @apply bg-card rounded-lg shadow-sm border border-border p-6;
+  }
+
+  .card-header {
+    @apply border-b border-border pb-4 mb-4;
+  }
+
+  .card-title {
+    @apply text-lg font-semibold text-card-foreground;
+  }
+
+  .card-description {
+    @apply text-sm text-muted-foreground mt-1;
+  }
+
+  /* 徽章组件 */
+  .badge {
+    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
+  }
+
+  .badge-primary {
+    @apply bg-primary/10 text-primary border border-primary/20;
+  }
+
+  .badge-secondary {
+    @apply bg-secondary text-secondary-foreground;
+  }
+
+  .badge-success {
+    @apply bg-green-100 text-green-800 border border-green-200;
+  }
+
+  .badge-warning {
+    @apply bg-yellow-100 text-yellow-800 border border-yellow-200;
+  }
+
+  .badge-error {
+    @apply bg-destructive text-destructive-foreground;
+  }
+
+  /* 加载状态 */
+  .loading-spinner {
+    @apply inline-block w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin;
+  }
+
+  /* 表格样式 */
+  .table {
+    @apply w-full border-collapse;
+  }
+
+  .table th {
+    @apply px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider bg-muted/50;
+  }
+
+  .table td {
+    @apply px-4 py-3 text-sm table-row-border;
+  }
+
+  /* 页面布局 */
+  .page-container {
+    @apply container mx-auto px-4 py-6 max-w-7xl;
+  }
+
+  .page-header {
+    @apply mb-6;
+  }
+
+  .page-title {
+    @apply text-2xl font-bold text-foreground mb-2;
+  }
+
+  .page-description {
+    @apply text-muted-foreground;
+  }
+
+  /* 表单样式 */
+  .form-group {
+    @apply space-y-2;
+  }
+
+  .form-label {
+    @apply block text-sm font-medium text-foreground;
+  }
+
+  .form-error {
+    @apply text-sm text-destructive mt-1;
+  }
+
+  .form-help {
+    @apply text-sm text-muted-foreground mt-1;
+  }
+
+  /* 导航样式 */
+  .nav-item {
+    @apply flex items-center px-3 py-2 text-sm font-medium rounded-md btn-transition;
+  }
+
+  .nav-item-active {
+    @apply bg-primary/10 text-primary border border-primary/20;
+  }
+
+  .nav-item-inactive {
+    @apply text-muted-foreground hover:text-foreground hover:bg-accent;
+  }
+
+  /* 工具提示 */
+  .tooltip {
+    @apply absolute z-50 px-3 py-2 text-sm text-popover-foreground bg-popover rounded-md shadow-lg opacity-0 pointer-events-none transition-opacity duration-200;
+  }
+
+  .tooltip-visible {
+    @apply opacity-100 pointer-events-auto;
+  }
+
+  /* 模态框样式 */
+  .modal-overlay {
+    @apply fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4;
+  }
+
+  .modal-content {
+    @apply bg-card rounded-lg shadow-xl max-w-lg w-full max-h-screen overflow-y-auto;
+  }
+
+  .modal-header {
+    @apply px-6 py-4 border-b border-border;
+  }
+
+  .modal-title {
+    @apply text-lg font-semibold text-card-foreground;
+  }
+
+  .modal-body {
+    @apply px-6 py-4;
+  }
+
+  .modal-footer {
+    @apply px-6 py-4 border-t border-border flex justify-end space-x-3;
+  }
+
+  /* Field value styling for forms and detail views */
+  .field-value {
+    @apply mt-2 text-base text-foreground px-3 py-2 bg-muted/50 rounded-md min-h-[2.5rem] flex items-center;
+  }
+
  .field-value-inline {
    @apply mt-2 text-base text-foreground;
  }
 }
+
+/* 自定义工具类 */
+@layer utilities {
+  /* 安全区域 */
+  .safe-top {
+    padding-top: env(safe-area-inset-top);
+  }
+
+  .safe-bottom {
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+
+  .safe-left {
+    padding-left: env(safe-area-inset-left);
+  }
+
+  .safe-right {
+    padding-right: env(safe-area-inset-right);
+  }
+
+  /* 隐藏滚动条 */
+  .scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* 文本选择 */
+  .select-none {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+
+  /* 玻璃效果 */
+  .glass {
+    background: rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+  }
+
+  .glass-dark {
+    background: rgba(0, 0, 0, 0.8);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+  }
+
+  /* 渐变背景 */
+  .gradient-primary {
+    background: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 85%) 100%);
+  }
+
+  .gradient-success {
+    background: linear-gradient(135deg, var(--color-green-500) 0%, color-mix(in srgb, var(--color-green-500) 85%) 100%);
+  }
+
+  /* 网格布局 */
+  .grid-auto-fit {
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  }
+
+  .grid-auto-fill {
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  }
+
+  /* 响应式网格 */
+  .grid-responsive {
+    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4;
+  }
+
+  /* 响应式文本 */
+  .text-responsive {
+    @apply text-sm sm:text-base lg:text-lg;
+  }
+
+  .text-responsive-xl {
+    @apply text-base sm:text-lg lg:text-xl xl:text-2xl;
+  }
+
+  /* 动画延迟 */
+  .animate-delay-100 {
+    animation-delay: 100ms;
+  }
+
+  .animate-delay-200 {
+    animation-delay: 200ms;
+  }
+
+  .animate-delay-300 {
+    animation-delay: 300ms;
+  }
+
+  .animate-delay-500 {
+    animation-delay: 500ms;
+  }
+
+  /* 悬停提升效果 */
+  .hover-lift {
+    @apply transition-transform duration-200 hover:scale-105 hover:-translate-y-1;
+  }
+
+  /* 渐入动画 */
+  .fade-in-up {
+    animation: fadeInUp 0.6s ease-out;
+  }
+
+  .fade-in-down {
+    animation: fadeInDown 0.6s ease-out;
+  }
+
+  .fade-in-left {
+    animation: fadeInLeft 0.6s ease-out;
+  }
+
+  .fade-in-right {
+    animation: fadeInRight 0.6s ease-out;
+  }
+
+  /* 自定义动画关键帧 */
+  @keyframes fadeInUp {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes fadeInDown {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes fadeInLeft {
+    from {
+      opacity: 0;
+      transform: translateX(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes fadeInRight {
+    from {
+      opacity: 0;
+      transform: translateX(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slideIn {
+    from {
+      transform: translateX(-100%);
+      opacity: 0;
+    }
+    to {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes slideUp {
+    from {
+      transform: translateY(20px);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes bounce {
+    0%, 20%, 53%, 80%, 100% {
+      transform: translateY(0);
+    }
+    40%, 43% {
+      transform: translateY(-8px);
+    }
+    70% {
+      transform: translateY(-4px);
+    }
+    90% {
+      transform: translateY(-2px);
+    }
+  }
+}
+
+/* 响应式断点样式 */
+@media (max-width: 640px) {
+  .mobile-hidden {
+    @apply hidden;
+  }
+
+  .mobile-full {
+    @apply w-full;
+  }
+
+  .mobile-center {
+    @apply text-center;
+  }
+
+  .mobile-stack {
+    @apply flex-col space-y-4;
+  }
+}
+
+/* 打印样式 */
+@media print {
+  .print-hidden {
+    @apply hidden;
+  }
+
+  .print-only {
+    @apply block;
+  }
+
+  * {
+    @apply text-foreground bg-background;
+  }
+}