diff --git a/client/public/icons/sider/more.svg b/client/public/icons/sider/more.svg new file mode 100644 index 0000000..c1efe35 --- /dev/null +++ b/client/public/icons/sider/more.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/src/App.tsx b/client/src/App.tsx index a413c05..7fc96c3 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -6,14 +6,12 @@ import ProtectedRoute from './pages/ProtectedRoute'; function App() { return (
-
- - login
} /> - }> - }> - - -
+ + login} /> + }> + }> + + ); } diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx new file mode 100644 index 0000000..18a3b7b --- /dev/null +++ b/client/src/components/Header.tsx @@ -0,0 +1,56 @@ +import Title from 'antd/es/typography/Title'; + +interface HeaderProps { + title: string; +} + +export default function Header({ title }: HeaderProps) { + return ( +
+ + {title} + +
+ more +
+ user +
+
+
+ ); +} diff --git a/client/src/components/SiderMenu.tsx b/client/src/components/SiderMenu.tsx index ea0d238..a80bced 100644 --- a/client/src/components/SiderMenu.tsx +++ b/client/src/components/SiderMenu.tsx @@ -1,61 +1,96 @@ -import { Menu, MenuProps } from 'antd'; - -type MenuItem = Required['items'][number]; - -function getItem( - label: React.ReactNode, - key: React.Key, - icon?: React.ReactNode, - children?: MenuItem[] -): MenuItem { - return { - key, - icon, - children, - label, - } as MenuItem; -} - -const sidebarItems: MenuItem[] = [ - getItem('VORKOUT', '0', toggle), - getItem( - 'Схемы процессов', - '1', - process diagram - ), - getItem( - 'Запущенные процессы', - '2', - running processes - ), - getItem( - 'Настройки', - 'sub1', - settings, - [ - getItem('Учетные записи', '3'), - getItem('Справичник событий', '4'), - getItem('Конфигурация', '5'), - ] - ), -]; +import { Divider, Menu } from 'antd'; +import React from 'react'; interface SiderMenuProps { + collapsed: boolean; selectedKey: string; hangleMenuClick: (e: any) => void; } export default function SiderMenu({ + collapsed, selectedKey, hangleMenuClick, }: SiderMenuProps) { + const menuItems = ( + + + } + style={{ fontSize: '20px' }} + > + VORKOUT + + + + } + > + Схемы процессов + + + + } + > + Запущенные процессы + + + {!collapsed && } + + } + title="Настройки" + expandIcon={false} + > + + Учетные записи + + + Справочник событий + + + Конфигурация + + + + ); + return ( + defaultOpenKeys={['sub1']} + > + {menuItems} + ); } diff --git a/client/src/config/customTheme.ts b/client/src/config/customTheme.ts new file mode 100644 index 0000000..b79c59a --- /dev/null +++ b/client/src/config/customTheme.ts @@ -0,0 +1,14 @@ +export const theme = { + token: { + fontFamily: 'Roboto, sans-serif', + colorPrimary: '#548d10', + Menu: { + itemColor: 'f2f2f2', + itemBg: '#f2f2f2', + subMenuItemBg: '#f2f2f2', + }, + Layout: { + bodyBg: '#f2f2f2', + }, + }, +}; diff --git a/client/src/index.css b/client/src/index.css index ec2585e..ee20a4e 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -11,3 +11,17 @@ code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } + +.ant-menu-inline .ant-menu-submenu-selected { + border: none; +} + +.ant-menu-inline .ant-menu-submenu-selected > .ant-menu-submenu-title { + color: #548d10; +} + +.ant-menu-inline .ant-menu-item-selected { + background-color: transparent; + border: none; + color: #548d10; +} diff --git a/client/src/index.tsx b/client/src/index.tsx index 7087bbe..cceac43 100644 --- a/client/src/index.tsx +++ b/client/src/index.tsx @@ -3,12 +3,17 @@ import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import { BrowserRouter } from 'react-router-dom'; +import { ConfigProvider } from 'antd'; +import { theme } from './config/customTheme'; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); + root.render( - - - + + + + + ); diff --git a/client/src/pages/AccountsPage.tsx b/client/src/pages/AccountsPage.tsx new file mode 100644 index 0000000..979f796 --- /dev/null +++ b/client/src/pages/AccountsPage.tsx @@ -0,0 +1,9 @@ +import Header from '../components/Header'; + +export default function AccountsPage() { + return ( + <> +
+ + ); +} diff --git a/client/src/pages/ConfigurationPage.tsx b/client/src/pages/ConfigurationPage.tsx new file mode 100644 index 0000000..186a170 --- /dev/null +++ b/client/src/pages/ConfigurationPage.tsx @@ -0,0 +1,9 @@ +import Header from '../components/Header'; + +export default function ConfigurationPage() { + return ( + <> +
+ + ); +} diff --git a/client/src/pages/EventsListPage.tsx b/client/src/pages/EventsListPage.tsx new file mode 100644 index 0000000..453381a --- /dev/null +++ b/client/src/pages/EventsListPage.tsx @@ -0,0 +1,9 @@ +import Header from '../components/Header'; + +export default function EventsListPage() { + return ( + <> +
+ + ); +} diff --git a/client/src/pages/MainLayout.tsx b/client/src/pages/MainLayout.tsx index 1641576..604e343 100644 --- a/client/src/pages/MainLayout.tsx +++ b/client/src/pages/MainLayout.tsx @@ -1,19 +1,40 @@ -import React, { useState } from 'react'; +/* eslint-disable react-hooks/exhaustive-deps */ +import React, { useEffect, useState } from 'react'; import { Layout } from 'antd'; import Sider from 'antd/es/layout/Sider'; import SiderMenu from '../components/SiderMenu'; +import { Route, Routes, useLocation, useNavigate } from 'react-router-dom'; +import ProcessDiagramPage from './ProcessDiagramPage'; +import RunningProcessesPage from './RunningProcessesPage'; +import AccountsPage from './AccountsPage'; +import EventsListPage from './EventsListPage'; +import ConfigurationPage from './ConfigurationPage'; export default function MainLayout() { + const navigate = useNavigate(); + const location = useLocation(); const [collapsed, setCollapsed] = useState(false); const [selectedKey, setSelectedKey] = useState('1'); + useEffect(() => { + if (location.pathname === '/') { + navigate('/process-diagram'); + } + }, [location.pathname]); + + useEffect(() => { + setSelectedKey(location.pathname); + }); + function hangleMenuClick(e: any) { - if (e.key === '0') { - setCollapsed((prev) => !prev); + const key = e.key; + if (key === '0') { + setCollapsed(!collapsed); return; } - setSelectedKey(e.key); + setSelectedKey(key); + navigate(key); } return ( @@ -26,14 +47,23 @@ export default function MainLayout() { width={'15%'} collapsedWidth={'3.8%'} trigger={null} + style={{ backgroundColor: '#f2f2f2' }} > -
Main layout
+ + } /> + } /> + } /> + } /> + } /> + 404 Not Found} /> + ); diff --git a/client/src/pages/ProcessDiagramPage.tsx b/client/src/pages/ProcessDiagramPage.tsx new file mode 100644 index 0000000..5f8d212 --- /dev/null +++ b/client/src/pages/ProcessDiagramPage.tsx @@ -0,0 +1,9 @@ +import Header from '../components/Header'; + +export default function ProcessDiagramPage() { + return ( + <> +
+ + ); +} diff --git a/client/src/pages/RunningProcessesPage.tsx b/client/src/pages/RunningProcessesPage.tsx new file mode 100644 index 0000000..9063283 --- /dev/null +++ b/client/src/pages/RunningProcessesPage.tsx @@ -0,0 +1,9 @@ +import Header from '../components/Header'; + +export default function RunningProcessesPage() { + return ( + <> +
+ + ); +}