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

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

@@ -50,6 +50,7 @@
.item {
display: inline-block;
position: relative;
font-size: 1.5em;
transition: {
property: all;
@@ -72,9 +73,37 @@
};
}
:hover {
.item:hover {
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 {

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 Slogan from '@/components/home/Slogan'
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'
const Home: React.FC = () => {

27
src/pages/MainFramework.tsx
View File

@@ -90,7 +90,7 @@ const MainFramework: React.FC = () => {
<nav>
<ul className={'menu'}>
{routeChildren?.map((route) => {
return (
return (route.handle as RouteHandle).menu ? (
<li className={'item'} key={route.id}>
<NavLink
to={route.path ?? ''}
@@ -104,7 +104,32 @@ const MainFramework: React.FC = () => {
>
{(route.handle as RouteHandle).name}
</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>
) : (
<></>
)
})}
</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: '',
id: 'home',
Component: React.lazy(() => import('@/components/home')),
Component: React.lazy(() => import('@/pages/Home')),
handle: {
name: '主页',
menu: true,
@@ -38,6 +38,38 @@ const routes: RouteObject[] = [
menu: true,
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
}
}
]
},