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 {Navbar1} from "@/components/layouts/Navbar"
import {SideBarOld} from '@/components/layouts/SideBar/SideBarOld' import {SideBarOld} from '@/components/layouts/SideBar/SideBarOld'
import '@/styles/globals.css' import '@/styles/globals.css'
import { ThemeProvider } from 'next-themes'
const centralConfigData = { const centralConfigData = {
navMain: [ navMain: [
@@ -138,16 +139,23 @@ export default function RootLayout({
children: React.ReactNode children: React.ReactNode
}) { }) {
return ( return (
<html lang="zh-CN"> <html lang="zh-CN" suppressHydrationWarning>
<body> <body suppressHydrationWarning>
<div className="bodyFlexUpDown"> <ThemeProvider
<Navbar1 /> attribute="class"
<div className="bodySon2"> defaultTheme="system"
<SideBarOld data={centralConfigData}> enableSystem
{children} disableTransitionOnChange
</SideBarOld> >
<div className="bodyFlexUpDown">
<Navbar1 />
<div className="bodySon2">
<SideBarOld data={centralConfigData}>
{children}
</SideBarOld>
</div>
</div> </div>
</div> </ThemeProvider>
</body> </body>
</html> </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 { Tractor, Map, Clipboard, Package, Brain, Droplets, Settings } from 'lucide-react';
import { MessageBell } from './components/MessageBell'; import { MessageBell } from './components/MessageBell';
import { UserProfile } from './components/UserProfile'; import { UserProfile } from './components/UserProfile';
import { ThemeToggle } from './ThemeToggle';
import { AuthProvider } from './components/auth/AuthContext'; import { AuthProvider } from './components/auth/AuthContext';
import { useElementHeight } from '@/hooks/useElementHeight'; import { useElementHeight } from '@/hooks/useElementHeight';
import { useViewHeight } from '@/hooks/useViewHeight'; import { useViewHeight } from '@/hooks/useViewHeight';
@@ -197,6 +198,7 @@ const Navbar1 = () => {
</div> </div>
</div> </div>
<div className="flex gap-2" style = {{alignItems:"center"}}> <div className="flex gap-2" style = {{alignItems:"center"}}>
<ThemeToggle />
<MessageBell onMessageClick={handleMessageClick} /> <MessageBell onMessageClick={handleMessageClick} />
<UserProfile onProfileClick={handleProfileClick} /> <UserProfile onProfileClick={handleProfileClick} />
</div> </div>
@@ -241,6 +243,9 @@ const Navbar1 = () => {
</Accordion> </Accordion>
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
<div className="flex justify-center">
<ThemeToggle />
</div>
<div className="flex justify-center"> <div className="flex justify-center">
<MessageBell onMessageClick={handleMessageClick} /> <MessageBell onMessageClick={handleMessageClick} />
</div> </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>
);
}