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

Add ToolsFramework #32

Merged
FatttSnake merged 26 commits from FatttSnake into dev 2023-10-14 18:36:50 +08:00
Conversation 0 Commits 26 Files Changed 37 +187 -124
4 changed files with 187 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit dc667faa0b - Show all commits

4
src/assets/css/components/common/hide-scrollbar.scss
View File

@@ -18,6 +18,10 @@
} }
} }
::-webkit-scrollbar {
display: none;
}
.scrollbar { .scrollbar {
position: absolute; position: absolute;
z-index: 1000; z-index: 1000;

35
src/assets/css/pages/tools-framework.scss
View File

@@ -12,10 +12,6 @@ body {
background-color: constants.$origin-color; background-color: constants.$origin-color;
user-select: none; user-select: none;
.hide-scrollbar-selection {
height: 100% !important;
}
.title { .title {
font-size: 2em; font-size: 2em;
text-align: center; text-align: center;
@@ -26,9 +22,20 @@ body {
} }
.content { .content {
> ul { display: flex;
> li { min-height: 0;
flex-direction: column;
.toolsMenu {
min-height: 0;
.hide-scrollbar-mask {
flex: 1;
}
}
ul {
> li {
&.item { &.item {
position: relative; position: relative;
margin: 4px 14px; margin: 4px 14px;
@@ -61,17 +68,16 @@ body {
&.active { &.active {
color: constants.$origin-color; color: constants.$origin-color;
background-color: constants.$main-color; background-color: constants.$main-color !important;
} }
} }
} }
.submenu { .submenu {
display: block; display: none;
position: absolute; position: fixed;
padding-left: 20px; padding-left: 20px;
left: 100%; z-index: 10000;
top: 0;
.content { .content {
display: flex; display: flex;
@@ -105,8 +111,10 @@ body {
} }
&:hover { &:hover {
a { .menu-bt {
background-color: constants.$background-color; a {
background-color: constants.$background-color;
}
} }
.submenu { .submenu {
@@ -130,6 +138,7 @@ body {
} }
} }
} }
.separate { .separate {
height: 0; height: 0;
margin: 10px 5px; margin: 10px 5px;

254
src/pages/ToolsFramework.tsx
View File

@@ -6,125 +6,159 @@ import { toolsJsonObjects } from '@/router/tools.tsx'
import HideScrollbar from '@/components/common/HideScrollbar.tsx' import HideScrollbar from '@/components/common/HideScrollbar.tsx'
const ToolsFramework: React.FC = () => { const ToolsFramework: React.FC = () => {
const [submenuTop, setSubmenuTop] = useState(0)
const [submenuLeft, setSubmenuLeft] = useState(0)
const showSubmenu = (e: React.MouseEvent) => {
const parentElement = e.currentTarget.parentElement
if (parentElement && parentElement.childElementCount === 2) {
const parentClientRect = parentElement.getBoundingClientRect()
if (parentClientRect.top <= screen.height / 2) {
setSubmenuTop(parentClientRect.top)
} else {
setSubmenuTop(
parentClientRect.top -
(parentElement.lastElementChild?.clientHeight ?? 0) +
e.currentTarget.clientHeight
)
}
setSubmenuLeft(parentClientRect.right)
}
}
return ( return (
<> <>
<FitFullScreen className={'flex-horizontal'}> <FitFullScreen className={'flex-horizontal'}>
<div className={'left-panel'}> <div className={'left-panel'}>
<div className={'title'}>氮工具</div> <div className={'title'}>氮工具</div>
<div style={{ marginTop: '0' }} className={'separate'} /> <div style={{ marginTop: '0' }} className={'separate'} />
<HideScrollbar isShowVerticalScrollbar={true} isShowHorizontalScrollbar={true}> <div className={'content'}>
<div className={'content'}> <ul>
<ul> <li className={'item'}>
<li className={'item'}> <div className={'menu-bt'}>
<div className={'menu-bt'}> <NavLink
<NavLink to={''}
to={''} end
end className={({ isActive, isPending }) =>
className={({ isActive, isPending }) => isPending ? 'pending' : isActive ? 'active' : ''
isPending ? 'pending' : isActive ? 'active' : '' }
} >
> <div className={'icon-box'}>
<div className={'icon-box'}> <Icon
<Icon className={'icon'}
className={'icon'} component={toolsJsonObjects[0].icon}
component={toolsJsonObjects[0].icon} />
/> </div>
</div> <span className={'text'}>{toolsJsonObjects[0].name}</span>
<span className={'text'}> </NavLink>
{toolsJsonObjects[0].name} </div>
</span> </li>
</NavLink> <li className={'item'}>
</div> <div className={'menu-bt'}>
</li> <NavLink
<li className={'item'}> to={'all'}
<div className={'menu-bt'}> className={({ isActive, isPending }) =>
<NavLink isPending ? ' pending' : isActive ? ' active' : ''
to={'all'} }
className={({ isActive, isPending }) => >
isPending ? ' pending' : isActive ? ' active' : '' <div className={'icon-box'}>
} <Icon
> className={'icon'}
<div className={'icon-box'}> component={toolsJsonObjects[1].icon}
<Icon />
className={'icon'} </div>
component={toolsJsonObjects[1].icon} <span className={'text'}>{toolsJsonObjects[1].name}</span>
/> </NavLink>
</div> </div>
<span className={'text'}> </li>
{toolsJsonObjects[1].name} <li>
</span> <div className={'separate'} />
</NavLink> </li>
</div> </ul>
</li> <div className={'toolsMenu'}>
<li> <HideScrollbar
<div className={'separate'} /> isShowVerticalScrollbar={true}
</li> isShowHorizontalScrollbar={true}
{toolsJsonObjects.map((tool) => { scrollbarWidth={2}
return tool.menu && >
tool.id !== 'tools' && <ul>
tool.id !== 'tools-all' ? ( {toolsJsonObjects.map((tool) => {
<li className={'item'} key={tool.id}> return tool.menu &&
<div className={'menu-bt'}> tool.id !== 'tools' &&
<NavLink tool.id !== 'tools-all' ? (
to={tool.path} <li className={'item'} key={tool.id}>
className={({ isActive, isPending }) => <div
isPending className={'menu-bt'}
? 'pending' onMouseEnter={showSubmenu}
: isActive
? 'active'
: ''
}
> >
<div className={'icon-box'}> <NavLink
{tool.icon ? ( to={tool.path}
<Icon className={({ isActive, isPending }) =>
className={'icon'} isPending
component={tool.icon} ? 'pending'
/> : isActive
) : undefined} ? 'active'
</div> : ''
<span className={'text'}>{tool.name}</span> }
</NavLink> >
</div> <div className={'icon-box'}>
{tool.children ? ( {tool.icon ? (
<ul className={'submenu'}> <Icon
<div className={'content'}> className={'icon'}
{tool.children.map((subTool) => { component={tool.icon}
return subTool.menu ? ( />
<li ) : undefined}
className={'item'} </div>
key={subTool.id} <span className={'text'}>{tool.name}</span>
> </NavLink>
<NavLink </div>
to={`${tool.path}/${subTool.path}`} {tool.children ? (
className={({ <ul
isActive, className={'submenu'}
isPending style={{
}) => top: submenuTop,
isPending left: submenuLeft
? 'pending' }}
: isActive >
? 'active' <div className={'content'}>
: '' {tool.children.map((subTool) => {
} return subTool.menu ? (
<li
className={'item'}
key={subTool.id}
> >
<span className={'text'}> <NavLink
{subTool.name} to={`${tool.path}/${subTool.path}`}
</span> className={({
</NavLink> isActive,
</li> isPending
) : undefined }) =>
})} isPending
</div> ? 'pending'
</ul> : isActive
) : undefined} ? 'active'
</li> : ''
) : undefined }
})} >
</ul> <span
className={'text'}
>
{subTool.name}
</span>
</NavLink>
</li>
) : undefined
})}
</div>
</ul>
) : undefined}
</li>
) : undefined
})}
</ul>
</HideScrollbar>
</div> </div>
</HideScrollbar> </div>
<div className={'title'}>氮工具</div> <div className={'title'}>氮工具</div>
</div> </div>
<div className={'right-panel'}></div> <div className={'right-panel'}></div>

18
src/router/tools.tsx
View File

@@ -259,7 +259,23 @@ export const toolsJsonObjects: ToolsJsonObject[] = [
name: '翻译--10-', name: '翻译--10-',
icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')), icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
menu: true, menu: true,
auth: false auth: false,
children: [
{
path: '1-1',
id: '1-1',
name: '翻译1-',
menu: true,
auth: false
},
{
path: '2-1',
id: '2-1',
name: '翻译2-',
menu: true,
auth: false
}
]
} }
] ]