improved the design

2025-04-23 09:54:17 -04:00 · 2025-04-23 09:54:17 -04:00 · bbbcd932ad
parent 6fd5d1aed2
commit bbbcd932ad
6 changed files with 107 additions and 57 deletions
--- a/src/App.jsx
+++ b/src/App.jsx
@ -121,12 +121,11 @@ function App() {
                    overflow: "hidden",
                    bgcolor: "background.default"
                }}>
-                    <Dashboard user={authState.user} onLogout={handleLogout} />
-                    
-                    <Switch
-                        checked={isDarkMode}
-                        onChange={() => setIsDarkMode(!isDarkMode)}
-                        sx={{ position: "absolute", top: 10, right: 10 }}
+                    <Dashboard
+                        user={authState.user}
+                        onLogout={handleLogout}
+                        isDarkMode={isDarkMode}
+                        setIsDarkMode={setIsDarkMode}
                    />
                </Box>
            )}
--- a/src/Components/Layout/Dashboard.jsx
+++ b/src/Components/Layout/Dashboard.jsx
@ -41,22 +41,20 @@ const MainContent = styled(Box)(({ theme }) => ({
  flexGrow: 1,
  display: 'flex',
  flexDirection: 'column',
-  padding: theme.spacing(2.5), // 20px
+  padding: theme.spacing(2.5),
  overflow: 'auto',
  backgroundColor: theme.palette.background.default,
 }));

 const Content = styled(Box)(({ theme }) => ({
  backgroundColor: theme.palette.custom.modalBackground,
-  //padding: theme.spacing(2.5),
  borderRadius: '10px',
-  //boxShadow: theme.shadows[2],
  maxWidth: '100%',
  overflow: 'auto',
  color: theme.palette.custom.modalText,
 }));

-const Dashboard = () => {
+const Dashboard = ({ isDarkMode, setIsDarkMode }) => {
  const { tabs, activeTab, handleOpenTab, handleCloseTab, setActiveTab } = useTabs("Главная");
  const { sidebarWidth, startResizing } = useSidebarResize(290);
  const [tabContent, setTabContent] = useState({});
@ -112,31 +110,49 @@ const Dashboard = () => {
          startResizing={startResizing}
          collapsed={collapsed}
          setCollapsed={setCollapsed}
+          isDarkMode={isDarkMode}
+          setIsDarkMode={setIsDarkMode}
        />
        <SidebarResizer onMouseDown={startResizing} />
      </SidebarWrapper>

      {/* Основной контент */}
-      <MainContent>
-        {/* Вкладки */}
-        <CustomTabs
-          tabs={tabs}
-          activeTab={activeTab}
-          onTabClick={setActiveTab}
-          onCloseTab={handleCloseTab}
-        />
-
-        {/* Контент вкладки */}
-        <Content>
-          <TabContent
+      <Box sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        flexGrow: 1,
+        overflow: 'hidden'
+      }}>
+        {/* Вкладки*/}
+        <Box sx={{
+          borderBottom: 1,
+          borderColor: 'divider',
+          backgroundColor: 'background.default',
+          zIndex: 1,
+          transform: 'translateY(3px)'
+        }}>
+          <CustomTabs
+            tabs={tabs}
            activeTab={activeTab}
-            statusHistories={statusHistories}
-            treeData1={treeData1}
-            tabContent={tabContent}
-            handleOpenTab={handleOpenTab}
+            onTabClick={setActiveTab}
+            onCloseTab={handleCloseTab}
          />
-        </Content>
-      </MainContent>
+        </Box>
+
+        {/* Остальной контент */}
+        <MainContent>
+          {/* Контент вкладки */}
+          <Content>
+            <TabContent
+              activeTab={activeTab}
+              statusHistories={statusHistories}
+              treeData1={treeData1}
+              tabContent={tabContent}
+              handleOpenTab={handleOpenTab}
+            />
+          </Content>
+        </MainContent>
+      </Box>
    </DashboardContainer>
  );
 };
--- a/src/Components/Layout/SidebarMenu.jsx
+++ b/src/Components/Layout/SidebarMenu.jsx
@ -17,6 +17,7 @@ import MenuItem from "./SidebarMenuComponents/MenuItem";
 import SidebarFooter from "./SidebarMenuComponents/SidebarFooter";
 import { statusManager1 } from "../TreeChart/dataUtils";

+
 const SidebarResizer = styled('div')(({ theme }) => ({
    width: "5px",
    cursor: "ew-resize",
@ -32,10 +33,10 @@ const SidebarResizer = styled('div')(({ theme }) => ({
    zIndex: 2
 }));

-const SidebarMenu = ({ data, onOpenTab, sidebarWidth, startResizing, collapsed, setCollapsed }) => {
+const SidebarMenu = ({ data, onOpenTab, sidebarWidth, startResizing, collapsed, setCollapsed, isDarkMode, setIsDarkMode }) => {
    const [hovered, setHovered] = useState(false);
    const [menuData, setMenuData] = useState(data);
-    const contentCache = useRef({}); 
+    const contentCache = useRef({});

    useEffect(() => {
        if (data) {
@ -51,14 +52,14 @@ const SidebarMenu = ({ data, onOpenTab, sidebarWidth, startResizing, collapsed,

    const handleSelectItem = (id, title, children) => {
        onOpenTab(id, title);
-        
+
        contentCache.current = tabContent({ items: children }, contentCache.current);
        if (contentCache.current[id]) {
            onOpenTab(id, title, contentCache.current[id].content);
        }
    };

-    
+

    const drawerWidth = collapsed ? 64 : sidebarWidth;

@ -149,9 +150,13 @@ const SidebarMenu = ({ data, onOpenTab, sidebarWidth, startResizing, collapsed,
                    </List>

                    {/* Футер */}
-                    {!collapsed && (
-                        <SidebarFooter />
-                    )}
+
+                    <SidebarFooter
+                        collapsed={collapsed}
+                        isDarkMode={isDarkMode}
+                        setIsDarkMode={setIsDarkMode}
+                    />
+
                </Box>

                {/* Ресайзер */}
--- a/src/Components/Layout/SidebarMenuComponents/SidebarFooter.jsx
+++ b/src/Components/Layout/SidebarMenuComponents/SidebarFooter.jsx
@ -1,9 +1,13 @@
 import React from "react";
+import { Brightness4, Brightness7 } from "@mui/icons-material";
+import { IconButton, Tooltip } from "@mui/material";
 import {
    List,
    ListItem,
    ListItemText,
-    styled
+    styled,
+    Switch,
+    Box
 } from "@mui/material";

 const FooterList = styled(List)(({ theme }) => ({
@ -18,31 +22,57 @@ const FooterListItem = styled(ListItem)(({ theme }) => ({
        backgroundColor: theme.palette.custom.sidebarHover,
    },
    padding: theme.spacing(1, 2),
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center'
 }));

-const SidebarFooter = () => {
+const SidebarFooter = ({ collapsed, isDarkMode, setIsDarkMode }) => {
    return (
        <FooterList>
-            <FooterListItem button>
-                <ListItemText
-                    primary="Помощь"
-                    primaryTypographyProps={{
-                        color: 'custom.sidebarText',
-                        variant: 'body2'
-                    }}
-                />
-            </FooterListItem>
-            <FooterListItem button>
-                <ListItemText
-                    primary="Настройка"
-                    primaryTypographyProps={{
-                        color: 'custom.sidebarText',
-                        variant: 'body2'
-                    }}
-                />
+            {!collapsed && (
+                <FooterListItem button>
+                    <ListItemText
+                        primary="Помощь"
+                        primaryTypographyProps={{
+                            color: 'custom.sidebarText',
+                            variant: 'body2'
+                        }}
+                    />
+                </FooterListItem>
+            )}
+            <FooterListItem>
+                {!collapsed && (
+                    <ListItemText
+                        primary="Настройка"
+                        primaryTypographyProps={{
+                            color: 'custom.sidebarText',
+                            variant: 'body2'
+                        }}
+                    />
+                )}
+
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    <Tooltip title="Переключить тему">
+                        <IconButton
+                            size="small"
+                            onClick={() => setIsDarkMode(!isDarkMode)}
+                            sx={{ color: 'custom.sidebarText' }}
+                        >
+                            {isDarkMode ? <Brightness4 /> : <Brightness7 />}
+                        </IconButton>
+                    </Tooltip>
+                    {!collapsed && (
+                        <Switch
+                            checked={isDarkMode}
+                            onChange={() => setIsDarkMode(!isDarkMode)}
+                            size="small"
+                        />
+                    )}
+                </Box>
            </FooterListItem>
        </FooterList>
    );
 };

-export default SidebarFooter;
+export default SidebarFooter;
--- a/src/Components/UI/MUItabs.jsx
+++ b/src/Components/UI/MUItabs.jsx
@ -16,7 +16,7 @@ const StyledTab = styled(Tab)(({ theme }) => ({

 const CustomTabs = ({ tabs, activeTab, onTabClick, onCloseTab }) => {
    const handleMouseDown = (e, id) => {
-        if (e.button === 1) { // Middle mouse button
+        if (e.button === 1) {
            e.preventDefault();
            onCloseTab(id);
        }
--- a/src/Components/hooks/TabContent.jsx
+++ b/src/Components/hooks/TabContent.jsx
@ -6,7 +6,7 @@ const TabContent = ({ activeTab, statusHistories, treeData1, tabContent, handleO
    if (activeTab === "Главная") {
        return (
            <div>
-                <h2>Общий мониторинг состояния системы</h2>
+                <h2 style={{ textAlign: 'center' }}>Общий мониторинг состояния системы</h2>
                <div>
                    <div style={{ display: 'inline-block', width: '48%', marginRight: '2%' }}>
                        <label>Надежность системы</label>