子仓库提交

src/styles/body.css

@@ -0,0 +1,43 @@
+.bodyFlexUpDown{
+    overflow-x:hidden;
+    overflow-y: hidden;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.bodySon2{
+    flex: 1;
+    min-height: 0;
+    /* 移除整体滚动，让子元素独立滚动 */
+}
+
+.sidebarScroll{
+    height: 100%;
+    overflow-y: auto;
+    overflow-x:hidden;
+}
+.sidebarScroll>div{
+    height: 100%;
+}
+
+.contentScroll{
+    height: 100%;
+    min-height: 0;
+    overflow-y: auto;
+}
+
+/* 内容容器底部间距 */
+.content-container::after {
+    content: '';
+    display: block;
+    height: 2rem; /* 5rem 底部间距 */
+    width: 100%;
+    flex-shrink: 0;
+}
+
+/* 滚动条颜色变量 */
+:root {
+  --scrollbar-color: #d1d5db;
+  --scrollbar-hover: #9ca3af;
+}

src/styles/globals.css

@@ -0,0 +1,289 @@
+
+@import "tailwindcss";
+
+@custom-variant dark (&:is(.dark *));
+@config "../../tailwind.config.js";
+@import "./body.css";
+
+/* CSS变量定义 - 农业管理系统主题 */
+:root {
+  /* 基础色彩系统 */
+  --input-background: #f3f3f5;
+  --background: 240 10% 98%;
+  --foreground: 240 10% 10%;
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 10%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 10%;
+  --primary: 142 76% 36%;
+  --primary-foreground: 355 100% 97%;
+  --secondary: 217 91% 60%;
+  --secondary-foreground: 240 10% 98%;
+  --muted: 240 4% 96%;
+  --muted-foreground: 240 4% 46%;
+  --accent: 240 4% 96%;
+  --accent-foreground: 240 10% 10%;
+  --destructive: 0 84% 60%;
+  --destructive-foreground: 240 10% 98%;
+  --border: rgba(0, 0, 0, 0.1);
+  --input: 240 4% 90%;
+  --ring: 142 76% 36%;
+  --radius: 0.5rem;
+
+  /* 农业管理系统特定颜色 */
+  --agriculture-green: 142 76% 36%;
+  --agriculture-green-50: 138 100% 97%;
+  --agriculture-green-600: 142 76% 36%;
+  --agriculture-green-700: 142 74% 31%;
+  --agriculture-green-900: 142 72% 23%;
+  --agriculture-blue: 217 91% 60%;
+  --agriculture-blue-50: 217 100% 97%;
+  --agriculture-amber: 38 92% 50%;
+  --agriculture-amber-50: 38 100% 97%;
+  --agriculture-brown: 27 48% 34%;
+  --agriculture-brown-50: 27 48% 95%;
+
+  /* 状态颜色 */
+  --status-running: 142 76% 36%;
+  --status-idle: 220 9% 90%;
+  --status-maintenance: 38 92% 50%;
+  --status-error: 0 84% 60%;
+  --status-offline: 220 9% 75%;
+
+  /* 间距系统 */
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 16px;
+  --spacing-lg: 24px;
+  --spacing-xl: 32px;
+  --spacing-2xl: 48px;
+
+  /* 圆角系统 */
+  --radius-sm: 4px;
+  --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 {
+  --input-background:240 10% 98%;
+  --background: 240 10% 3.9%;
+  --foreground: 240 10% 98%;
+  --card: 240 10% 3.9%;
+  --card-foreground: 240 10% 98%;
+  --popover: 240 10% 3.9%;
+  --popover-foreground: 240 10% 98%;
+  --primary: 142 70% 45%;
+  --primary-foreground: 144 61% 20%;
+  --secondary: 217 33% 17%;
+  --secondary-foreground: 210 40% 98%;
+  --muted: 240 3% 15%;
+  --muted-foreground: 240 5% 65%;
+  --accent: 240 3% 15%;
+  --accent-foreground: 240 10% 98%;
+  --destructive: 0 63% 31%;
+  --destructive-foreground: 240 10% 98%;
+  --border: rgba(255, 255, 255, 0.1);
+  --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%);
+}
+
+/* 基础样式 */
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+}
+
+/* 组件样式 */
+@layer components {
+  /* 状态标签样式 */
+  .status-running {
+    @apply bg-green-100 text-green-800 border-green-200;
+  }
+  .status-idle {
+    @apply bg-gray-100 text-gray-800 border-gray-200;
+  }
+  .status-maintenance {
+    @apply bg-yellow-100 text-yellow-800 border-yellow-200;
+  }
+  .status-error {
+    @apply bg-red-100 text-red-800 border-red-200;
+  }
+  .status-offline {
+    @apply bg-gray-100 text-gray-600 border-gray-200;
+  }
+
+  /* 农业主题按钮 */
+  .btn-agriculture {
+    @apply bg-green-600 hover:bg-green-700 text-white;
+  }
+
+  .btn-agriculture-secondary {
+    @apply bg-blue-600 hover:bg-blue-700 text-white;
+  }
+
+  /* 卡片样式 */
+  .card-agriculture {
+    @apply bg-white border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition-shadow;
+  }
+
+  /* 导航样式 */
+  .nav-agriculture {
+    @apply bg-green-600 text-white;
+  }
+}
+
+/* 工具类 */
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+
+  /* 农业色彩工具类 */
+  .text-agriculture-green {
+    color: rgb(var(--agriculture-green));
+  }
+
+  .bg-agriculture-green {
+    background-color: rgb(var(--agriculture-green));
+  }
+
+  .border-agriculture-green {
+    border-color: rgb(var(--agriculture-green));
+  }
+
+  /* 响应式容器 */
+  .container-agriculture {
+    @apply container mx-auto px-4 sm:px-6 lg:px-8;
+  }
+
+  /* 农业网格系统 */
+  .grid-agriculture {
+    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6;
+  }
+}
+
+/* 滚动条样式 */
+::-webkit-scrollbar {
+  width: 5px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: hsl(var(--muted-foreground));
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--muted-foreground));
+}
+
+/* 动画 */
+@keyframes agriculture-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.agriculture-fade-in {
+  animation: agriculture-fade-in 0.3s ease-out;
+}
+
+/* 打印样式 */
+@media print {
+  .no-print {
+    display: none !important;
+  }
+
+  .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);
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+  --color-input-background: var(--input-background);
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  h2 {
+      font-size: var(--text-xl);
+      font-weight: var(--font-weight-medium);
+      line-height: 1.5;
+    }
+  
+}
+
+@layer utilities {
+  .\@container\/card-header {
+    container: card-header / inline-size;
+  }
+  .bg-input-background {
+    background-color: var(--input-background);
+  }
+  .focus-visible\:ring-ring\/50:focus-visible {
+    --tw-ring-color: var(--ring);
+  }
+}