生产管理系统前端 - 农事操作管理页面搭建&白天晚上切换

This commit is contained in:
2025-10-28 17:20:41 +08:00
parent 0b6ae9fc5c
commit 3fc8f883cf
37 changed files with 841 additions and 52 deletions

View File

@@ -0,0 +1,18 @@
'use client';
import { Card } from '@/components/ui/card';
export default function AggregationPage() {
return (
<div className="space-y-6">
<Card className="p-6">
<h2 className="text-xl font-semibold"></h2>
<div className="p-3 bg-muted rounded-lg mt-3">
<p className="text-sm">
<strong></strong> /farming-operation/archive/aggregation
</p>
</div>
</Card>
</div>
);
}

View File

@@ -0,0 +1,18 @@
'use client';
import { Card } from '@/components/ui/card';
export default function ArchivePage() {
return (
<div className="space-y-6">
<Card className="p-6">
<h2 className="text-xl font-semibold"></h2>
<div className="p-3 bg-muted rounded-lg mt-3">
<p className="text-sm">
<strong></strong> /farming-operation/archive
</p>
</div>
</Card>
</div>
);
}

View File

@@ -0,0 +1,18 @@
'use client';
import { Card } from '@/components/ui/card';
export default function TracePage() {
return (
<div className="space-y-6">
<Card className="p-6">
<h2 className="text-xl font-semibold"></h2>
<div className="p-3 bg-muted rounded-lg mt-3">
<p className="text-sm">
<strong></strong> /farming-operation/archive/trace
</p>
</div>
</Card>
</div>
);
}

View File

@@ -0,0 +1,18 @@
'use client';
import { Card } from '@/components/ui/card';
export default function ArchiveViewPage() {
return (
<div className="space-y-6">
<Card className="p-6">
<h2 className="text-xl font-semibold"></h2>
<div className="p-3 bg-muted rounded-lg mt-3">
<p className="text-sm">
<strong></strong> /farming-operation/archive/view
</p>
</div>
</Card>
</div>
);
}

View File

@@ -0,0 +1,18 @@
'use client';
import { Card } from '@/components/ui/card';
export default function GanttPage() {
return (
<div className="space-y-6">
<Card className="p-6">
<h2 className="text-xl font-semibold"></h2>
<div className="p-3 bg-muted rounded-lg mt-3">
<p className="text-sm">
<strong></strong> /farming-operation/calendar/gantt
</p>
</div>
</Card>
</div>
);
}

View File

@@ -0,0 +1,18 @@
'use client';
import { Card } from '@/components/ui/card';
export default function CalendarPage() {
return (
<div className="space-y-6">
<Card className="p-6">
<h2 className="text-xl font-semibold"></h2>
<div className="p-3 bg-muted rounded-lg mt-3">
<p className="text-sm">
<strong></strong> /farming-operation/calendar
</p>
</div>
</Card>
</div>
);
}

View File

@@ -0,0 +1,18 @@
'use client';
import { Card } from '@/components/ui/card';
export default function CalendarProgressPage() {
return (
<div className="space-y-6">
<Card className="p-6">
<h2 className="text-xl font-semibold"></h2>
<div className="p-3 bg-muted rounded-lg mt-3">
<p className="text-sm">
<strong></strong> /farming-operation/calendar/progress
</p>
</div>
</Card>
</div>
);
}

View File

@@ -0,0 +1,18 @@
'use client';
import { Card } from '@/components/ui/card';
export default function ViewPage() {
return (
<div className="space-y-6">
<Card className="p-6">
<h2 className="text-xl font-semibold"></h2>
<div className="p-3 bg-muted rounded-lg mt-3">
<p className="text-sm">
<strong></strong> /farming-operation/calendar/view
</p>
</div>
</Card>
</div>
);
}

View File

@@ -0,0 +1,18 @@
'use client';
import { Card } from '@/components/ui/card';
export default function LogPage() {
return (
<div className="space-y-6">
<Card className="p-6">
<h2 className="text-xl font-semibold"></h2>
<div className="p-3 bg-muted rounded-lg mt-3">
<p className="text-sm">
<strong></strong> /farming-operation/execution/log
</p>
</div>
</Card>
</div>
);
}

View File

@@ -0,0 +1,18 @@
'use client';
import { Card } from '@/components/ui/card';
export default function ExecutionPage() {
return (
<div className="space-y-6">
<Card className="p-6">
<h2 className="text-xl font-semibold"></h2>
<div className="p-3 bg-muted rounded-lg mt-3">
<p className="text-sm">
<strong></strong> /farming-operation/execution
</p>
</div>
</Card>
</div>
);
}

View File

@@ -0,0 +1,18 @@
'use client';
import { Card } from '@/components/ui/card';
export default function RecordPage() {
return (
<div className="space-y-6">
<Card className="p-6">
<h2 className="text-xl font-semibold"></h2>
<div className="p-3 bg-muted rounded-lg mt-3">
<p className="text-sm">
<strong></strong> /farming-operation/execution/record
</p>
</div>
</Card>
</div>
);
}

View File

@@ -0,0 +1,18 @@
'use client';
import { Card } from '@/components/ui/card';
export default function TypePage() {
return (
<div className="space-y-6">
<Card className="p-6">
<h2 className="text-xl font-semibold"></h2>
<div className="p-3 bg-muted rounded-lg mt-3">
<p className="text-sm">
<strong></strong> /farming-operation/execution/type
</p>
</div>
</Card>
</div>
);
}

View File

@@ -0,0 +1,18 @@
'use client';
import { Card } from '@/components/ui/card';
export default function AssignPage() {
return (
<div className="space-y-6">
<Card className="p-6">
<h2 className="text-xl font-semibold"></h2>
<div className="p-3 bg-muted rounded-lg mt-3">
<p className="text-sm">
<strong></strong> /farming-operation/issue/assign
</p>
</div>
</Card>
</div>
);
}

View File

@@ -0,0 +1,18 @@
'use client';
import { Card } from '@/components/ui/card';
export default function CollaboratePage() {
return (
<div className="space-y-6">
<Card className="p-6">
<h2 className="text-xl font-semibold"></h2>
<div className="p-3 bg-muted rounded-lg mt-3">
<p className="text-sm">
<strong></strong> /farming-operation/issue/collaborate
</p>
</div>
</Card>
</div>
);
}

View File

@@ -0,0 +1,18 @@
'use client';
import { Card } from '@/components/ui/card';
export default function IssuePage() {
return (
<div className="space-y-6">
<Card className="p-6">
<h2 className="text-xl font-semibold"></h2>
<div className="p-3 bg-muted rounded-lg mt-3">
<p className="text-sm">
<strong></strong> /farming-operation/issue
</p>
</div>
</Card>
</div>
);
}

View File

@@ -0,0 +1,18 @@
'use client';
import { Card } from '@/components/ui/card';
export default function ReportPage() {
return (
<div className="space-y-6">
<Card className="p-6">
<h2 className="text-xl font-semibold"></h2>
<div className="p-3 bg-muted rounded-lg mt-3">
<p className="text-sm">
<strong></strong> /farming-operation/issue/report
</p>
</div>
</Card>
</div>
);
}

View File

@@ -0,0 +1,18 @@
'use client';
import { Card } from '@/components/ui/card';
export default function CategoryPage() {
return (
<div className="space-y-6">
<Card className="p-6">
<h2 className="text-xl font-semibold"></h2>
<div className="p-3 bg-muted rounded-lg mt-3">
<p className="text-sm">
<strong></strong> /farming-operation/knowledge/category
</p>
</div>
</Card>
</div>
);
}

View File

@@ -0,0 +1,18 @@
'use client';
import { Card } from '@/components/ui/card';
export default function KnowledgeManagementPage() {
return (
<div className="space-y-6">
<Card className="p-6">
<h2 className="text-xl font-semibold"></h2>
<div className="p-3 bg-muted rounded-lg mt-3">
<p className="text-sm">
<strong></strong> /farming-operation/knowledge/management
</p>
</div>
</Card>
</div>
);
}

View File

@@ -0,0 +1,18 @@
'use client';
import { Card } from '@/components/ui/card';
export default function KnowledgePage() {
return (
<div className="space-y-6">
<Card className="p-6">
<h2 className="text-xl font-semibold"></h2>
<div className="p-3 bg-muted rounded-lg mt-3">
<p className="text-sm">
<strong></strong> /farming-operation/knowledge
</p>
</div>
</Card>
</div>
);
}

View File

@@ -0,0 +1,18 @@
'use client';
import { Card } from '@/components/ui/card';
export default function SearchPage() {
return (
<div className="space-y-6">
<Card className="p-6">
<h2 className="text-xl font-semibold"></h2>
<div className="p-3 bg-muted rounded-lg mt-3">
<p className="text-sm">
<strong></strong> /farming-operation/knowledge/search
</p>
</div>
</Card>
</div>
);
}

View File

@@ -19,98 +19,98 @@ export default function FarmingOperationPage() {
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<Link <Link
href="/farming-operation/farm-planning" href="/farming-operation/planning"
className="block p-4 bg-green-50 rounded-lg hover:bg-green-100 transition-colors" className="block p-4 bg-green-50 rounded-lg hover:bg-green-100 transition-colors"
> >
<h3 className="font-semibold text-green-900 mb-2"> <h3 className="font-semibold text-green-900 mb-2">
📅 📅
</h3> </h3>
<p className="text-green-700 text-sm"> <p className="text-green-700 text-sm">
</p> </p>
</Link> </Link>
<Link <Link
href="/farming-operation/task-management" href="/farming-operation/task"
className="block p-4 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors" className="block p-4 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors"
> >
<h3 className="font-semibold text-blue-900 mb-2"> <h3 className="font-semibold text-blue-900 mb-2">
</h3> </h3>
<p className="text-blue-700 text-sm"> <p className="text-blue-700 text-sm">
</p> </p>
</Link> </Link>
<Link <Link
href="/farming-operation/operation-execution" href="/farming-operation/execution"
className="block p-4 bg-purple-50 rounded-lg hover:bg-purple-100 transition-colors" className="block p-4 bg-purple-50 rounded-lg hover:bg-purple-100 transition-colors"
> >
<h3 className="font-semibold text-purple-900 mb-2"> <h3 className="font-semibold text-purple-900 mb-2">
🚜 🚜
</h3> </h3>
<p className="text-purple-700 text-sm"> <p className="text-purple-700 text-sm">
</p> </p>
</Link> </Link>
<Link <Link
href="/farming-operation/farming-calendar" href="/farming-operation/calendar"
className="block p-4 bg-orange-50 rounded-lg hover:bg-orange-100 transition-colors" className="block p-4 bg-orange-50 rounded-lg hover:bg-orange-100 transition-colors"
> >
<h3 className="font-semibold text-orange-900 mb-2"> <h3 className="font-semibold text-orange-900 mb-2">
📆 📆
</h3> </h3>
<p className="text-orange-700 text-sm"> <p className="text-orange-700 text-sm">
</p> </p>
</Link> </Link>
<Link <Link
href="/farming-operation/operation-archive" href="/farming-operation/archive"
className="block p-4 bg-teal-50 rounded-lg hover:bg-teal-100 transition-colors" className="block p-4 bg-teal-50 rounded-lg hover:bg-teal-100 transition-colors"
> >
<h3 className="font-semibold text-teal-900 mb-2"> <h3 className="font-semibold text-teal-900 mb-2">
📁 📁
</h3> </h3>
<p className="text-teal-700 text-sm"> <p className="text-teal-700 text-sm">
</p> </p>
</Link> </Link>
<Link <Link
href="/farming-operation/knowledge-base" href="/farming-operation/knowledge"
className="block p-4 bg-indigo-50 rounded-lg hover:bg-indigo-100 transition-colors" className="block p-4 bg-indigo-50 rounded-lg hover:bg-indigo-100 transition-colors"
> >
<h3 className="font-semibold text-indigo-900 mb-2"> <h3 className="font-semibold text-indigo-900 mb-2">
📚 📚
</h3> </h3>
<p className="text-indigo-700 text-sm"> <p className="text-indigo-700 text-sm">
</p> </p>
</Link> </Link>
<Link <Link
href="/farming-operation/performance-management" href="/farming-operation/performance"
className="block p-4 bg-pink-50 rounded-lg hover:bg-pink-100 transition-colors" className="block p-4 bg-pink-50 rounded-lg hover:bg-pink-100 transition-colors"
> >
<h3 className="font-semibold text-pink-900 mb-2"> <h3 className="font-semibold text-pink-900 mb-2">
📊 📊
</h3> </h3>
<p className="text-pink-700 text-sm"> <p className="text-pink-700 text-sm">
</p> </p>
</Link> </Link>
<Link <Link
href="/farming-operation/issue-collaboration" href="/farming-operation/issue"
className="block p-4 bg-red-50 rounded-lg hover:bg-red-100 transition-colors" className="block p-4 bg-red-50 rounded-lg hover:bg-red-100 transition-colors"
> >
<h3 className="font-semibold text-red-900 mb-2"> <h3 className="font-semibold text-red-900 mb-2">
🤝 🤝
</h3> </h3>
<p className="text-red-700 text-sm"> <p className="text-red-700 text-sm">
线
</p> </p>
</Link> </Link>
</div> </div>

View File

@@ -0,0 +1,18 @@
'use client';
import { Card } from '@/components/ui/card';
export default function HoursPage() {
return (
<div className="space-y-6">
<Card className="p-6">
<h2 className="text-xl font-semibold"></h2>
<div className="p-3 bg-muted rounded-lg mt-3">
<p className="text-sm">
<strong></strong> /farming-operation/performance/hours
</p>
</div>
</Card>
</div>
);
}

View File

@@ -0,0 +1,18 @@
'use client';
import { Card } from '@/components/ui/card';
export default function PerformancePage() {
return (
<div className="space-y-6">
<Card className="p-6">
<h2 className="text-xl font-semibold"></h2>
<div className="p-3 bg-muted rounded-lg mt-3">
<p className="text-sm">
<strong></strong> /farming-operation/performance
</p>
</div>
</Card>
</div>
);
}

View File

@@ -0,0 +1,18 @@
'use client';
import { Card } from '@/components/ui/card';
export default function SchedulePage() {
return (
<div className="space-y-6">
<Card className="p-6">
<h2 className="text-xl font-semibold"></h2>
<div className="p-3 bg-muted rounded-lg mt-3">
<p className="text-sm">
<strong></strong> /farming-operation/performance/schedule
</p>
</div>
</Card>
</div>
);
}

View File

@@ -0,0 +1,18 @@
'use client';
import { Card } from '@/components/ui/card';
export default function StaffPage() {
return (
<div className="space-y-6">
<Card className="p-6">
<h2 className="text-xl font-semibold"></h2>
<div className="p-3 bg-muted rounded-lg mt-3">
<p className="text-sm">
<strong></strong> /farming-operation/performance/staff
</p>
</div>
</Card>
</div>
);
}

View File

@@ -0,0 +1,18 @@
'use client';
import { Card } from '@/components/ui/card';
export default function PerformanceStatisticsPage() {
return (
<div className="space-y-6">
<Card className="p-6">
<h2 className="text-xl font-semibold"></h2>
<div className="p-3 bg-muted rounded-lg mt-3">
<p className="text-sm">
<strong></strong> /farming-operation/performance/statistics
</p>
</div>
</Card>
</div>
);
}

View File

@@ -0,0 +1,18 @@
'use client';
import { Card } from '@/components/ui/card';
export default function AllocationPage() {
return (
<div className="space-y-6">
<Card className="p-6">
<h2 className="text-xl font-semibold"></h2>
<div className="p-3 bg-muted rounded-lg mt-3">
<p className="text-sm">
<strong></strong> /farming-operation/planning/allocation
</p>
</div>
</Card>
</div>
);
}

View File

@@ -0,0 +1,18 @@
'use client';
import { Card } from '@/components/ui/card';
export default function CreationPage() {
return (
<div className="space-y-6">
<Card className="p-6">
<h2 className="text-xl font-semibold"></h2>
<div className="p-3 bg-muted rounded-lg mt-3">
<p className="text-sm">
<strong></strong> /farming-operation/planning/creation
</p>
</div>
</Card>
</div>
);
}

View File

@@ -0,0 +1,18 @@
'use client';
import { Card } from '@/components/ui/card';
export default function PlanningPage() {
return (
<div className="space-y-6">
<Card className="p-6">
<h2 className="text-xl font-semibold"></h2>
<div className="p-3 bg-muted rounded-lg mt-3">
<p className="text-sm">
<strong></strong> /farming-operation/planning
</p>
</div>
</Card>
</div>
);
}

View File

@@ -0,0 +1,18 @@
'use client';
import { Card } from '@/components/ui/card';
export default function ProgressPage() {
return (
<div className="space-y-6">
<Card className="p-6">
<h2 className="text-xl font-semibold"></h2>
<div className="p-3 bg-muted rounded-lg mt-3">
<p className="text-sm">
<strong></strong> /farming-operation/planning/progress
</p>
</div>
</Card>
</div>
);
}

View File

@@ -0,0 +1,18 @@
'use client';
import { Card } from '@/components/ui/card';
export default function AssignmentPage() {
return (
<div className="space-y-6">
<Card className="p-6">
<h2 className="text-xl font-semibold"></h2>
<div className="p-3 bg-muted rounded-lg mt-3">
<p className="text-sm">
<strong></strong> /farming-operation/task/assignment
</p>
</div>
</Card>
</div>
);
}

View File

@@ -0,0 +1,18 @@
'use client';
import { Card } from '@/components/ui/card';
export default function ManagementPage() {
return (
<div className="space-y-6">
<Card className="p-6">
<h2 className="text-xl font-semibold"></h2>
<div className="p-3 bg-muted rounded-lg mt-3">
<p className="text-sm">
<strong></strong> /farming-operation/task/management
</p>
</div>
</Card>
</div>
);
}

View File

@@ -0,0 +1,18 @@
'use client';
import { Card } from '@/components/ui/card';
export default function MonitoringPage() {
return (
<div className="space-y-6">
<Card className="p-6">
<h2 className="text-xl font-semibold"></h2>
<div className="p-3 bg-muted rounded-lg mt-3">
<p className="text-sm">
<strong></strong> /farming-operation/task/monitoring
</p>
</div>
</Card>
</div>
);
}

View File

@@ -0,0 +1,18 @@
'use client';
import { Card } from '@/components/ui/card';
export default function TaskPage() {
return (
<div className="space-y-6">
<Card className="p-6">
<h2 className="text-xl font-semibold"></h2>
<div className="p-3 bg-muted rounded-lg mt-3">
<p className="text-sm">
<strong></strong> /farming-operation/task
</p>
</div>
</Card>
</div>
);
}

View File

@@ -0,0 +1,18 @@
'use client';
import { Card } from '@/components/ui/card';
export default function StatisticsPage() {
return (
<div className="space-y-6">
<Card className="p-6">
<h2 className="text-xl font-semibold"></h2>
<div className="p-3 bg-muted rounded-lg mt-3">
<p className="text-sm">
<strong></strong> /farming-operation/task/statistics
</p>
</div>
</Card>
</div>
);
}

View File

@@ -5,7 +5,7 @@ import {SideBarOld} from '@/components/layouts/SideBar/SideBarOld'
import '@/styles/globals.css' import '@/styles/globals.css'
import { ThemeProvider } from 'next-themes' import { ThemeProvider } from 'next-themes'
import { usePathname } from 'next/navigation' import { usePathname } from 'next/navigation'
import { Building2, Users, Cog, Activity, Mail, UserCircle, Database, Map, BarChart3, Cloud, TrendingUp, GitCompare, AlertTriangle, FileText, MapPin, Settings, User, Package, Navigation, Zap, Target, PieChart, Calendar, Shield, Tractor, Clipboard, Brain, Droplets } from 'lucide-react' import { Building2, Users, Cog, Activity, Mail, UserCircle, Database, Map, BarChart3, Cloud, TrendingUp, GitCompare, AlertTriangle, FileText, MapPin, Settings, User, Package, Navigation, Zap, Target, PieChart, Calendar, Shield, Tractor, Clipboard, Brain, Droplets, Book } from 'lucide-react'
const navbarData = { const navbarData = {
logo: { logo: {
@@ -584,6 +584,198 @@ const machineryManagement = {
] ]
} }
// 农事操作管理系统
const farmingOperation = {
navMain: [
{
title: "农事计划",
url: "/farming-operation/planning",
icon: <Calendar className="w-4 h-4" />,
items: [
{
title: "农事计划创建",
url: "/farming-operation/planning/creation",
isActive: false
},
{
title: "农事计划分配",
url: "/farming-operation/planning/allocation",
isActive: false
},
{
title: "农事计划进度",
url: "/farming-operation/planning/progress",
isActive: false
}
]
},
{
title: "农事任务",
url: "/farming-operation/task",
icon: <FileText className="w-4 h-4" />,
items: [
{
title: "任务管理",
url: "/farming-operation/task/management",
isActive: false
},
{
title: "任务分配",
url: "/farming-operation/task/assignment",
isActive: false
},
{
title: "任务监控",
url: "/farming-operation/task/monitoring",
isActive: false
},
{
title: "任务统计",
url: "/farming-operation/task/statistics",
isActive: false
}
]
},
{
title: "农事执行",
url: "/farming-operation/execution",
icon: <Zap className="w-4 h-4" />,
items: [
{
title: "执行类型",
url: "/farming-operation/execution/type",
isActive: false
},
{
title: "执行记录",
url: "/farming-operation/execution/record",
isActive: false
},
{
title: "执行日志",
url: "/farming-operation/execution/log",
isActive: false
}
]
},
{
title: "农事日历",
url: "/farming-operation/calendar",
icon: <Calendar className="w-4 h-4" />,
items: [
{
title: "日历视图",
url: "/farming-operation/calendar/view",
isActive: false
},
{
title: "甘特图",
url: "/farming-operation/calendar/gantt",
isActive: false
},
{
title: "进度跟踪",
url: "/farming-operation/calendar/progress",
isActive: false
}
]
},
{
title: "农事档案",
url: "/farming-operation/archive",
icon: <Database className="w-4 h-4" />,
items: [
{
title: "档案聚合",
url: "/farming-operation/archive/aggregation",
isActive: false
},
{
title: "档案查看",
url: "/farming-operation/archive/view",
isActive: false
},
{
title: "档案追溯",
url: "/farming-operation/archive/trace",
isActive: false
}
]
},
{
title: "农事知识库",
url: "/farming-operation/knowledge",
icon: <Book className="w-4 h-4" />,
items: [
{
title: "知识管理",
url: "/farming-operation/knowledge/management",
isActive: false
},
{
title: "知识分类",
url: "/farming-operation/knowledge/category",
isActive: false
},
{
title: "知识搜索",
url: "/farming-operation/knowledge/search",
isActive: false
}
]
},
{
title: "绩效管理",
url: "/farming-operation/performance",
icon: <BarChart3 className="w-4 h-4" />,
items: [
{
title: "员工绩效",
url: "/farming-operation/performance/staff",
isActive: false
},
{
title: "工时统计",
url: "/farming-operation/performance/hours",
isActive: false
},
{
title: "绩效统计",
url: "/farming-operation/performance/statistics",
isActive: false
},
{
title: "绩效调度",
url: "/farming-operation/performance/schedule",
isActive: false
}
]
},
{
title: "农事问题协同",
url: "/farming-operation/issue",
icon: <Users className="w-4 h-4" />,
items: [
{
title: "问题上报",
url: "/farming-operation/issue/report",
isActive: false
},
{
title: "问题分配",
url: "/farming-operation/issue/assign",
isActive: false
},
{
title: "问题协同",
url: "/farming-operation/issue/collaborate",
isActive: false
}
]
}
]
}
function RootLayoutContent({ function RootLayoutContent({
children, children,
}: { }: {
@@ -601,6 +793,8 @@ function RootLayoutContent({
return machineryManagement; return machineryManagement;
case '/land-information': case '/land-information':
return fieldMessageManagement; return fieldMessageManagement;
case '/farming-operation':
return farmingOperation;
case '/central-config': case '/central-config':
return centralConfigData; return centralConfigData;
default: default:

View File

@@ -1,44 +1,27 @@
'use client';
import * as React from 'react';
import { Moon, Sun } from 'lucide-react'; import { Moon, Sun } from 'lucide-react';
import { useTheme } from 'next-themes'; import { useTheme } from '../../hooks/useTheme';
import { Button } from '../ui/button';
import { Button } from '@/components/ui/button';
export function ThemeToggle() { export function ThemeToggle() {
const { theme, setTheme } = useTheme(); const { theme, setTheme } = useTheme();
const [mounted, setMounted] = React.useState(false);
React.useEffect(() => {
setMounted(true);
}, []);
if (!mounted) {
return (
<Button variant="outline" size="icon" className="relative overflow-hidden transition-all duration-300 hover:scale-110">
<Sun className="h-[1.2rem] w-[1.2rem]" />
<span className="sr-only"></span>
</Button>
);
}
const isDark = theme === 'dark';
const toggleTheme = () => { const toggleTheme = () => {
setTheme(isDark ? 'light' : 'dark'); setTheme(theme === 'light' ? 'dark' : 'light');
}; };
return ( return (
<Button <Button
variant="outline" variant="ghost"
size="icon" size="icon"
onClick={toggleTheme} onClick={toggleTheme}
className="relative overflow-hidden transition-all duration-300 hover:scale-110" title={theme === 'light' ? '切换到深色模式' : '切换到浅色模式'}
className="transition-colors"
> >
<Sun className={`h-[1.2rem] w-[1.2rem] transition-all duration-300 ${isDark ? 'rotate-90 scale-0' : 'rotate-0 scale-100'}`} /> {theme === 'light' ? (
<Moon className={`absolute h-[1.2rem] w-[1.2rem] transition-all duration-300 ${isDark ? 'rotate-0 scale-100' : '-rotate-90 scale-0'}`} /> <Moon className="w-5 h-5" />
<span className="sr-only"></span> ) : (
<Sun className="w-5 h-5" />
)}
</Button> </Button>
); );
} }