cavin/smart-crop-ui
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

生产管理系统前端 暗色切换调试按钮

Browse Source
This commit is contained in:
peng
2025-10-23 11:37:12 +08:00
parent 28229ce795
commit f93f9e4d88
3 changed files with 66 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
crop-x/src/app/layout.tsx
View File

@@ -1,6 +1,7 @@
import {Navbar1} from "@/components/layouts/Navbar"
import {SideBarOld} from '@/components/layouts/SideBar/SideBarOld'
import '@/styles/globals.css'
import { ThemeProvider } from 'next-themes'
const centralConfigData = {
navMain: [
@@ -138,16 +139,23 @@ export default function RootLayout({
children: React.ReactNode
}) {
return (
<html lang="zh-CN">
<body>
<div className="bodyFlexUpDown">
<Navbar1 />
<div className="bodySon2">
<SideBarOld data={centralConfigData}>
{children}
</SideBarOld>
<html lang="zh-CN" suppressHydrationWarning>
<body suppressHydrationWarning>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
<div className="bodyFlexUpDown">
<Navbar1 />
<div className="bodySon2">
<SideBarOld data={centralConfigData}>
{children}
</SideBarOld>
</div>
</div>
</div>
</ThemeProvider>
</body>
</html>
)

5
crop-x/src/components/layouts/Navbar.tsx
View File

@@ -4,6 +4,7 @@ import { Book, Menu, Sunset, Trees, Zap } from "lucide-react";
import { Tractor, Map, Clipboard, Package, Brain, Droplets, Settings } from 'lucide-react';
import { MessageBell } from './components/MessageBell';
import { UserProfile } from './components/UserProfile';
import { ThemeToggle } from './ThemeToggle';
import { AuthProvider } from './components/auth/AuthContext';
import { useElementHeight } from '@/hooks/useElementHeight';
import { useViewHeight } from '@/hooks/useViewHeight';
@@ -197,6 +198,7 @@ const Navbar1 = () => {
</div>
</div>
<div className="flex gap-2" style = {{alignItems:"center"}}>
<ThemeToggle />
<MessageBell onMessageClick={handleMessageClick} />
<UserProfile onProfileClick={handleProfileClick} />
</div>
@@ -241,6 +243,9 @@ const Navbar1 = () => {
</Accordion>
<div className="flex flex-col gap-3">
<div className="flex justify-center">
<ThemeToggle />
</div>
<div className="flex justify-center">
<MessageBell onMessageClick={handleMessageClick} />
</div>

44
crop-x/src/components/layouts/ThemeToggle.tsx Normal file
View File

@@ -0,0 +1,44 @@
'use client';
import * as React from 'react';
import { Moon, Sun } from 'lucide-react';
import { useTheme } from 'next-themes';
import { Button } from '@/components/ui/button';
export function ThemeToggle() {
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 = () => {
setTheme(isDark ? 'light' : 'dark');
};
return (
<Button
variant="outline"
size="icon"
onClick={toggleTheme}
className="relative overflow-hidden transition-all duration-300 hover:scale-110"
>
<Sun className={`h-[1.2rem] w-[1.2rem] transition-all duration-300 ${isDark ? 'rotate-90 scale-0' : 'rotate-0 scale-100'}`} />
<Moon className={`absolute h-[1.2rem] w-[1.2rem] transition-all duration-300 ${isDark ? 'rotate-0 scale-100' : '-rotate-90 scale-0'}`} />
<span className="sr-only">切换主题</span>
</Button>
);
}