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 {
position: absolute;
z-index: 1000;

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

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

58
src/pages/ToolsFramework.tsx
View File

@@ -6,13 +6,32 @@ import { toolsJsonObjects } from '@/router/tools.tsx'
import HideScrollbar from '@/components/common/HideScrollbar.tsx'
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 (
<>
<FitFullScreen className={'flex-horizontal'}>
<div className={'left-panel'}>
<div className={'title'}>氮工具</div>
<div style={{ marginTop: '0' }} className={'separate'} />
<HideScrollbar isShowVerticalScrollbar={true} isShowHorizontalScrollbar={true}>
<div className={'content'}>
<ul>
<li className={'item'}>
@@ -30,9 +49,7 @@ const ToolsFramework: React.FC = () => {
component={toolsJsonObjects[0].icon}
/>
</div>
<span className={'text'}>
{toolsJsonObjects[0].name}
</span>
<span className={'text'}>{toolsJsonObjects[0].name}</span>
</NavLink>
</div>
</li>
@@ -50,21 +67,30 @@ const ToolsFramework: React.FC = () => {
component={toolsJsonObjects[1].icon}
/>
</div>
<span className={'text'}>
{toolsJsonObjects[1].name}
</span>
<span className={'text'}>{toolsJsonObjects[1].name}</span>
</NavLink>
</div>
</li>
<li>
<div className={'separate'} />
</li>
</ul>
<div className={'toolsMenu'}>
<HideScrollbar
isShowVerticalScrollbar={true}
isShowHorizontalScrollbar={true}
scrollbarWidth={2}
>
<ul>
{toolsJsonObjects.map((tool) => {
return tool.menu &&
tool.id !== 'tools' &&
tool.id !== 'tools-all' ? (
<li className={'item'} key={tool.id}>
<div className={'menu-bt'}>
<div
className={'menu-bt'}
onMouseEnter={showSubmenu}
>
<NavLink
to={tool.path}
className={({ isActive, isPending }) =>
@@ -87,7 +113,13 @@ const ToolsFramework: React.FC = () => {
</NavLink>
</div>
{tool.children ? (
<ul className={'submenu'}>
<ul
className={'submenu'}
style={{
top: submenuTop,
left: submenuLeft
}}
>
<div className={'content'}>
{tool.children.map((subTool) => {
return subTool.menu ? (
@@ -108,7 +140,9 @@ const ToolsFramework: React.FC = () => {
: ''
}
>
<span className={'text'}>
<span
className={'text'}
>
{subTool.name}
</span>
</NavLink>
@@ -122,9 +156,9 @@ const ToolsFramework: React.FC = () => {
) : undefined
})}
</ul>
</div>
</HideScrollbar>
</div>
</div>
<div className={'title'}>氮工具</div>
</div>
<div className={'right-panel'}></div>

16
src/router/tools.tsx
View File

@@ -259,7 +259,23 @@ export const toolsJsonObjects: ToolsJsonObject[] = [
name: '翻译--10-',
icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
menu: true,
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
}
]
}
]