FatttSnake/oxygen-ui
1
0
Fork 0
Code Pull Requests Activity

Add tools menu and submenu. Add Add multiple environments. #28

Merged
FatttSnake merged 4 commits from FatttSnake into dev 2023-10-10 01:35:59 +08:00
Conversation 0 Commits 4 Files Changed 12 +105 -5
6 changed files with 105 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 9d74dce8b1 - Show all commits

33
src/assets/css/pages/header.scss
View File

@@ -50,6 +50,7 @@
.item { .item {
display: inline-block; display: inline-block;
position: relative;
font-size: 1.5em; font-size: 1.5em;
transition: { transition: {
property: all; property: all;
@@ -72,9 +73,37 @@
}; };
} }
:hover { .item:hover {
transform: translateY(-5px); transform: translateY(-5px);
} }
.item:hover .submenu {
display: block;
}
.submenu {
display: none;
position: absolute;
width: 100%;
text-align: center;
background-color: white;
transform: translateY(4px);
border: {
width: 1px;
color: constants.$border-color;
style: solid;
};
.item {
display: block;
padding: 10px;
font-size: 0.8em;
}
.item:hover {
transform: none;
}
}
} }
.dropdown-menu-button { .dropdown-menu-button {
@@ -144,7 +173,7 @@
} }
} }
@media screen and (max-width: 900px){ @media screen and (max-width: 900px) {
.dropdown-menu-content.show { .dropdown-menu-content.show {
display: block; display: block;
} }

2
src/components/home/index.tsx → src/pages/Home.tsx
View File

@@ -4,7 +4,7 @@ import FitFullScreen from '@/components/common/FitFullScreen'
import { MainFrameworkContext } from '@/pages/MainFramework' import { MainFrameworkContext } from '@/pages/MainFramework'
import Slogan from '@/components/home/Slogan' import Slogan from '@/components/home/Slogan'
import OxygenToolbox from '@/components/home/OxygenToolbox' import OxygenToolbox from '@/components/home/OxygenToolbox'
import Indicator from '@/components/common/Indicator.tsx' import Indicator from '@/components/common/Indicator'
import Footer from '@/components/home/Footer' import Footer from '@/components/home/Footer'
const Home: React.FC = () => { const Home: React.FC = () => {

27
src/pages/MainFramework.tsx
View File

@@ -90,7 +90,7 @@ const MainFramework: React.FC = () => {
<nav> <nav>
<ul className={'menu'}> <ul className={'menu'}>
{routeChildren?.map((route) => { {routeChildren?.map((route) => {
return ( return (route.handle as RouteHandle).menu ? (
<li className={'item'} key={route.id}> <li className={'item'} key={route.id}>
<NavLink <NavLink
to={route.path ?? ''} to={route.path ?? ''}
@@ -104,7 +104,32 @@ const MainFramework: React.FC = () => {
> >
{(route.handle as RouteHandle).name} {(route.handle as RouteHandle).name}
</NavLink> </NavLink>
{route.children ? (
<ul className={'submenu'}>
{route.children.map((subRoute) => {
return (subRoute.handle as RouteHandle)
.menu ? (
<li
className={'item'}
key={subRoute.id}
>
{
(
subRoute.handle as RouteHandle
).name
}
</li>
) : (
<></>
)
})}
</ul>
) : (
<></>
)}
</li> </li>
) : (
<></>
) )
})} })}
</ul> </ul>

7
src/pages/Tools.tsx Normal file
View File

@@ -0,0 +1,7 @@
import React from 'react'
const Tools: React.FC = () => {
return <></>
}
export default Tools

7
src/pages/tools/Translation.tsx Normal file
View File

@@ -0,0 +1,7 @@
import React from 'react'
const Translation: React.FC = () => {
return <></>
}
export default Translation

34
src/router/index.tsx
View File

@@ -23,7 +23,7 @@ const routes: RouteObject[] = [
{ {
path: '', path: '',
id: 'home', id: 'home',
Component: React.lazy(() => import('@/components/home')), Component: React.lazy(() => import('@/pages/Home')),
handle: { handle: {
name: '主页', name: '主页',
menu: true, menu: true,
@@ -38,6 +38,38 @@ const routes: RouteObject[] = [
menu: true, menu: true,
auth: false auth: false
} }
},
{
path: 'tools',
id: 'tools',
Component: React.lazy(() => import('@/pages/Tools')),
children: [
{
path: 'translation',
id: 'tools-translation',
Component: React.lazy(() => import('@/pages/tools/Translation')),
handle: {
name: '翻译',
menu: true,
auth: false
}
},
{
path: 'translation',
id: 'tools-translationa',
Component: React.lazy(() => import('@/pages/tools/Translation')),
handle: {
name: '翻译',
menu: true,
auth: false
}
}
],
handle: {
name: '工具',
menu: true,
auth: false
}
} }
] ]
}, },