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

Optimize submenu in ToolsFramework

Browse Source
This commit is contained in:
Fat Snake
2023-10-12 18:34:14 +08:00
parent 6a7cae8319
commit ac3c1dbc2c
6 changed files with 367 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -14,7 +14,6 @@
.hide-scrollbar-content {
display: inline-block;
width: 100%;
min-width: 900px;
}
}

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

@@ -1,4 +1,5 @@
@use "@/assets/css/constants" as constants;
@use "@/assets/css/mixins" as mixins;
body {
background-color: constants.$background-color;
@@ -21,16 +22,24 @@ body {
.content {
> ul {
> li {
margin: 4px 14px;
&.item {
position: relative;
margin: 4px 14px;
font-size: 1.4em;
border-radius: 8px;
overflow: hidden;
.menu-bt {
.icon {
margin-right: 16px;
border-radius: 8px;
overflow: hidden;
.icon-box {
cursor: pointer;
width: 26px;
height: 26px;
.icon {
margin-right: 16px;
}
}
a {
@@ -38,6 +47,7 @@ body {
padding: 8px 16px;
height: 100%;
width: 100%;
transition: all 0.2s;
.text {
flex: 1;
@@ -50,54 +60,60 @@ body {
}
}
.submenu {
display: none;
position: fixed;
padding-left: 20px;
left: 100%;
top: 0;
.content {
display: flex;
flex-direction: column;
gap: 2px;
padding: 10px 10px;
background-color: constants.$origin-color;
border-radius: 8px;
.item {
border-radius: 8px;
white-space: nowrap;
overflow: hidden;
a {
display: block;
padding: 8px 16px;
transition: all 0.2s;
&.active {
color: constants.$origin-color;
background-color: constants.$main-color !important;
}
}
&:hover a {
background-color: constants.$background-color;
}
}
}
}
&:hover {
background-color: constants.$background-color;
}
}
&.multiple-item {
font-size: 1.4em;
border-radius: 8px;
overflow: hidden;
.menu-bt {
display: flex;
.icon-box {
cursor: pointer;
padding: 8px 16px;
.icon {
transition: all 0.3s ease;
transform: rotate(180deg);
}
}
a {
display: flex;
padding: {
top: 8px;
bottom: 8px;
right: 16px;
};
height: 100%;
width: 100%;
.text {
flex: 1;
}
}
}
.submenu {
}
&.show {
.menu-bt {
.icon-box {
.icon {
transform: rotate(360deg);
.submenu {
display: block;
animation: 0.3s ease;
@include mixins.unique-keyframes {
0% {
display: block;
transform: translateX(-10px);
opacity: 0;
}
100% {
display: block;
transform: translateX(0);
opacity: 1;
}
}
}
@@ -106,7 +122,7 @@ body {
.separate {
height: 0;
margin: 10px 0;
margin: 10px 5px;
border: {
width: 1px;
color: constants.$font-secondary-color;

9
src/components/common/HideScrollbar.tsx
View File

@@ -10,6 +10,7 @@ interface HideScrollbarProps
isHiddenVerticalScrollbarWhenFull?: boolean
isShowHorizontalScrollbar?: boolean
isHiddenHorizontalScrollbarWhenFull?: boolean
minWidth?: string | number
}
export interface HideScrollbarElement {
@@ -138,7 +139,6 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
const lastScrollbarClickPositionRef = useRef({ x: -1, y: -1 })
const lastScrollbarTouchPositionRef = useRef({ x: -1, y: -1 })
const lastTouchPositionRef = useRef({ x: -1, y: -1 })
const [verticalScrollbarWidth, setVerticalScrollbarWidth] = useState(0)
const [verticalScrollbarLength, setVerticalScrollbarLength] = useState(100)
const [verticalScrollbarPosition, setVerticalScrollbarPosition] = useState(0)
const [verticalScrollbarOnClick, setVerticalScrollbarOnClick] = useState(false)
@@ -157,6 +157,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
isHiddenVerticalScrollbarWhenFull,
isShowHorizontalScrollbar,
isHiddenHorizontalScrollbarWhenFull,
minWidth,
..._props
} = props
@@ -365,9 +366,6 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
useEffect(() => {
const windowResizeListener = () => {
setVerticalScrollbarWidth(
(rootRef.current?.offsetWidth ?? 0) - (rootRef.current?.clientWidth ?? 0)
)
setHorizontalScrollbarWidth(
(rootRef.current?.offsetHeight ?? 0) - (rootRef.current?.clientHeight ?? 0)
)
@@ -457,7 +455,6 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
className={'hide-scrollbar-selection'}
tabIndex={0}
style={{
width: `calc(100vw + ${verticalScrollbarWidth}px)`,
height: `calc(100vh + ${horizontalScrollbarWidth}px)`,
touchAction: isPreventAnyScroll ? 'none' : '',
msTouchAction: isPreventAnyScroll ? 'none' : ''
@@ -469,7 +466,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
onTouchMove={isPreventAnyScroll ? handleDefaultTouchmove : undefined}
onScroll={handleDefaultScroll}
>
<div className={'hide-scrollbar-content'} ref={contentRef}>
<div className={'hide-scrollbar-content'} ref={contentRef} style={{ minWidth }}>
{props.children}
</div>
</div>

1
src/pages/HomeFramework.tsx
View File

@@ -81,6 +81,7 @@ const HomeFramework: React.FC = () => {
ref={hideScrollbarRef}
isPreventVerticalScroll={preventScroll}
isShowHorizontalScrollbar={true}
minWidth={'900px'}
>
<div className={'body'}>
<div>

267
src/pages/ToolsFramework.tsx
View File

@@ -3,166 +3,129 @@ import FitFullScreen from '@/components/common/FitFullScreen'
import '@/assets/css/pages/tools-framework.scss'
import Icon from '@ant-design/icons'
import { toolsJsonObjects } from '@/router/tools.tsx'
import _ from 'lodash'
import HideScrollbar from '@/components/common/HideScrollbar.tsx'
const ToolsFramework: React.FC = () => {
const location = useLocation()
const [multipleMenuShown, setMultipleMenuShown] = useState(
toolsJsonObjects.map((value) => ({
id: value.id,
path: value.path,
shown: `${location.pathname}/`.startsWith(`/tools/${value.path}/`)
}))
)
useEffect(() => {
const temp = _.clone(multipleMenuShown)
temp.forEach((value) => {
value.shown = `${location.pathname}/`.startsWith(`/tools/${value.path}/`)
})
setMultipleMenuShown(temp)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [location])
const switchSubmenu = (menuId: string) => {
return () => {
const temp = _.clone(multipleMenuShown)
const menu = temp.find(({ id }) => id === menuId)
menu && (menu.shown = !menu.shown)
setMultipleMenuShown(temp)
}
}
return (
<>
<FitFullScreen className={'flex-horizontal'}>
<div className={'left-panel'}>
<div className={'title'}>氮工具</div>
<div className={'content'}>
<ul>
<li>
<div style={{ marginTop: '0' }} className={'separate'} />
</li>
<li className={'item'}>
<div className={'menu-bt'}>
<NavLink
to={''}
end
className={({ isActive, isPending }) =>
isPending ? 'pending' : isActive ? 'active' : ''
}
>
<Icon
className={'icon'}
component={toolsJsonObjects[0].icon}
/>
<span className={'text'}>{toolsJsonObjects[0].name}</span>
</NavLink>
</div>
</li>
<li className={'item'}>
<div className={'menu-bt'}>
<NavLink
to={'all'}
className={({ isActive, isPending }) =>
isPending ? ' pending' : isActive ? ' active' : ''
}
>
<Icon
className={'icon'}
component={toolsJsonObjects[1].icon}
/>
<span className={'text'}>{toolsJsonObjects[1].name}</span>
</NavLink>
</div>
</li>
<li>
<div className={'separate'} />
</li>
{toolsJsonObjects.map((tool) => {
return tool.menu &&
tool.id !== 'tools' &&
tool.id !== 'tools-all' ? (
<li
className={
tool.children
? `multiple-item${
multipleMenuShown.find(
({ id }) => id === tool.id
)?.shown ?? false
? ' show'
: ''
}`
: 'item'
}
key={tool.id}
>
<div className={'menu-bt'}>
{tool.children ? (
<div
className={'icon-box'}
onClick={switchSubmenu(tool.id)}
<HideScrollbar>
<div className={'title'}>氮工具</div>
<div className={'content'}>
<ul>
<li>
<div style={{ marginTop: '0' }} className={'separate'} />
</li>
<li className={'item'}>
<div className={'menu-bt'}>
<NavLink
to={''}
end
className={({ isActive, isPending }) =>
isPending ? 'pending' : isActive ? 'active' : ''
}
>
<div className={'icon-box'}>
<Icon
className={'icon'}
component={toolsJsonObjects[0].icon}
/>
</div>
<span className={'text'}>
{toolsJsonObjects[0].name}
</span>
</NavLink>
</div>
</li>
<li className={'item'}>
<div className={'menu-bt'}>
<NavLink
to={'all'}
className={({ isActive, isPending }) =>
isPending ? ' pending' : isActive ? ' active' : ''
}
>
<div className={'icon-box'}>
<Icon
className={'icon'}
component={toolsJsonObjects[1].icon}
/>
</div>
<span className={'text'}>
{toolsJsonObjects[1].name}
</span>
</NavLink>
</div>
</li>
<li>
<div className={'separate'} />
</li>
{toolsJsonObjects.map((tool) => {
return tool.menu &&
tool.id !== 'tools' &&
tool.id !== 'tools-all' ? (
<li className={'item'} key={tool.id}>
<div className={'menu-bt'}>
<NavLink
to={tool.path}
className={({ isActive, isPending }) =>
isPending
? 'pending'
: isActive
? 'active'
: ''
}
>
<Icon
className={'icon'}
component={IconFatwebDown}
/>
</div>
<div className={'icon-box'}>
{tool.icon ? (
<Icon
className={'icon'}
component={tool.icon}
/>
) : undefined}
</div>
<span className={'text'}>{tool.name}</span>
</NavLink>
</div>
{tool.children ? (
<ul className={'submenu'}>
<div className={'content'}>
{tool.children.map((subTool) => {
return subTool.menu ? (
<li
className={'item'}
key={subTool.id}
>
<NavLink
to={`${tool.path}/${subTool.path}`}
className={({
isActive,
isPending
}) =>
isPending
? 'pending'
: isActive
? 'active'
: ''
}
>
<span className={'text'}>
{subTool.name}
</span>
</NavLink>
</li>
) : undefined
})}
</div>
</ul>
) : undefined}
<NavLink
to={tool.path}
className={({ isActive, isPending }) =>
isPending ? 'pending' : isActive ? 'active' : ''
}
>
{tool.children ? undefined : tool.icon ? (
<Icon
className={'icon'}
component={tool.icon}
/>
) : undefined}
<span className={'text'}>{tool.name}</span>
</NavLink>
</div>
{tool.children ? (
<ul className={'submenu'}>
{tool.children.map((subTool) => {
return subTool.menu ? (
<li className={'item'} key={subTool.id}>
<NavLink
to={`${tool.path}/${subTool.path}`}
className={({
isActive,
isPending
}) =>
isPending
? 'pending'
: isActive
? 'active'
: ''
}
>
{subTool.icon ? (
<Icon
className={'icon'}
component={subTool.icon}
/>
) : undefined}
<span className={'text'}>
{subTool.name}
</span>
</NavLink>
</li>
) : undefined
})}
</ul>
) : undefined}
</li>
) : undefined
})}
</ul>
</div>
</li>
) : undefined
})}
</ul>
</div>
</HideScrollbar>
</div>
<div className={'right-panel'}></div>
</FitFullScreen>

182
src/router/tools.tsx
View File

@@ -8,7 +8,6 @@ export const toolsJsonObjects: ToolsJsonObject[] = [
id: 'tools',
component: React.lazy(() => import('@/pages/tools')),
name: '主页',
icon: React.lazy(() => import('~icons/fatweb/logo.jsx')),
menu: true,
auth: false
},
@@ -35,6 +34,7 @@ export const toolsJsonObjects: ToolsJsonObject[] = [
path: '1',
id: '1',
name: '翻译1',
icon: React.lazy(() => import('~icons/fatweb/logo.jsx')),
menu: true,
auth: false
},
@@ -80,6 +80,186 @@ export const toolsJsonObjects: ToolsJsonObject[] = [
icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
menu: true,
auth: false
},
{
path: 'translation--1',
id: 'tools-translation--1',
component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译--1',
icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
menu: true,
auth: false
},
{
path: 'translation--2',
id: 'tools-translation--2',
component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译--2',
icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
menu: true,
auth: false
},
{
path: 'translation--3',
id: 'tools-translation--3',
component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译--3',
icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
menu: true,
auth: false
},
{
path: 'translation--4',
id: 'tools-translation--4',
component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译--4',
icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
menu: true,
auth: false
},
{
path: 'translation--5',
id: 'tools-translation--5',
component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译--5',
icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
menu: true,
auth: false
},
{
path: 'translation--6',
id: 'tools-translation--6',
component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译--6',
icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
menu: true,
auth: false
},
{
path: 'translation--7',
id: 'tools-translation--7',
component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译--7',
icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
menu: true,
auth: false
},
{
path: 'translation--8',
id: 'tools-translation--8',
component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译--8',
icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
menu: true,
auth: false
},
{
path: 'translation--9',
id: 'tools-translation--9',
component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译--9',
icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
menu: true,
auth: false
},
{
path: 'translation--10',
id: 'tools-translation--10',
component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译--10',
icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
menu: true,
auth: false
},
{
path: 'translation--1-',
id: 'tools-translation--1-',
component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译--1-',
icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
menu: true,
auth: false
},
{
path: 'translation--2-',
id: 'tools-translation--2-',
component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译--2-',
icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
menu: true,
auth: false
},
{
path: 'translation--3-',
id: 'tools-translation--3-',
component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译--3-',
icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
menu: true,
auth: false
},
{
path: 'translation--4-',
id: 'tools-translation--4-',
component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译--4-',
icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
menu: true,
auth: false
},
{
path: 'translation--5-',
id: 'tools-translation--5-',
component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译--5-',
icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
menu: true,
auth: false
},
{
path: 'translation--6-',
id: 'tools-translation--6-',
component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译--6-',
icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
menu: true,
auth: false
},
{
path: 'translation--7-',
id: 'tools-translation--7-',
component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译--7-',
icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
menu: true,
auth: false
},
{
path: 'translation--8-',
id: 'tools-translation--8-',
component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译--8-',
icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
menu: true,
auth: false
},
{
path: 'translation--9-',
id: 'tools-translation--9-',
component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译--9-',
icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
menu: true,
auth: false
},
{
path: 'translation--10-',
id: 'tools-translation--10-',
component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译--10-',
icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
menu: true,
auth: false
}
]