diff --git a/src/assets/css/components/common/hide-scrollbar.scss b/src/assets/css/components/common/hide-scrollbar.scss index 799a993..5a9f7c9 100644 --- a/src/assets/css/components/common/hide-scrollbar.scss +++ b/src/assets/css/components/common/hide-scrollbar.scss @@ -14,7 +14,6 @@ .hide-scrollbar-content { display: inline-block; width: 100%; - min-width: 900px; } } diff --git a/src/assets/css/pages/tools-framework.scss b/src/assets/css/pages/tools-framework.scss index 4534112..e9a54d0 100644 --- a/src/assets/css/pages/tools-framework.scss +++ b/src/assets/css/pages/tools-framework.scss @@ -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; diff --git a/src/components/common/HideScrollbar.tsx b/src/components/common/HideScrollbar.tsx index de3a10a..ab6d9cf 100644 --- a/src/components/common/HideScrollbar.tsx +++ b/src/components/common/HideScrollbar.tsx @@ -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((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((prop isHiddenVerticalScrollbarWhenFull, isShowHorizontalScrollbar, isHiddenHorizontalScrollbarWhenFull, + minWidth, ..._props } = props @@ -365,9 +366,6 @@ const HideScrollbar = forwardRef((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((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((prop onTouchMove={isPreventAnyScroll ? handleDefaultTouchmove : undefined} onScroll={handleDefaultScroll} > -
+
{props.children}
diff --git a/src/pages/HomeFramework.tsx b/src/pages/HomeFramework.tsx index d63978e..56993c1 100644 --- a/src/pages/HomeFramework.tsx +++ b/src/pages/HomeFramework.tsx @@ -81,6 +81,7 @@ const HomeFramework: React.FC = () => { ref={hideScrollbarRef} isPreventVerticalScroll={preventScroll} isShowHorizontalScrollbar={true} + minWidth={'900px'} >
diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx index a0dff56..941d44d 100644 --- a/src/pages/ToolsFramework.tsx +++ b/src/pages/ToolsFramework.tsx @@ -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 ( <>
-
氮工具
-
-
    -
  • -
    -
    • -
  • -
    - - isPending ? 'pending' : isActive ? 'active' : '' - } - > - - {toolsJsonObjects[0].name} - -
    -
    • -
  • -
    - - isPending ? ' pending' : isActive ? ' active' : '' - } - > - - {toolsJsonObjects[1].name} - -
    -
    • -
  • -
    -
    • - {toolsJsonObjects.map((tool) => { - return tool.menu && - tool.id !== 'tools' && - tool.id !== 'tools-all' ? ( -
  • id === tool.id - )?.shown ?? false - ? ' show' - : '' - }` - : 'item' - } - key={tool.id} - > -
    - {tool.children ? ( -
    +
    氮工具
    +
    +
      +
    • +
      +
      • +
    • +
      + + isPending ? 'pending' : isActive ? 'active' : '' + } + > +
      + +
      + + {toolsJsonObjects[0].name} + +       +
      +
      • +
    • +
      + + isPending ? ' pending' : isActive ? ' active' : '' + } + > +
      + +
      + + {toolsJsonObjects[1].name} + +       +
      +
      • +
    • +
      +
      • + {toolsJsonObjects.map((tool) => { + return tool.menu && + tool.id !== 'tools' && + tool.id !== 'tools-all' ? ( +
    • +
      + + isPending + ? 'pending' + : isActive + ? 'active' + : '' + } > - -
      +
      + {tool.icon ? ( + + ) : undefined} +
      + {tool.name} + +
    + {tool.children ? ( +
      +
      + {tool.children.map((subTool) => { + return subTool.menu ? ( +
    • + + isPending + ? 'pending' + : isActive + ? 'active' + : '' + } + > + + {subTool.name} + + +
      • + ) : undefined + })} +
      +
    ) : undefined} - - isPending ? 'pending' : isActive ? 'active' : '' - } - > - {tool.children ? undefined : tool.icon ? ( - - ) : undefined} - {tool.name} - -
    - {tool.children ? ( -
      - {tool.children.map((subTool) => { - return subTool.menu ? ( -
    • - - isPending - ? 'pending' - : isActive - ? 'active' - : '' - } - > - {subTool.icon ? ( - - ) : undefined} - - {subTool.name} - - -
      • - ) : undefined - })} -
    - ) : undefined} -
    • - ) : undefined - })} -
-
+ + ) : undefined + })} + +
+
diff --git a/src/router/tools.tsx b/src/router/tools.tsx index 5c675d2..e87043f 100644 --- a/src/router/tools.tsx +++ b/src/router/tools.tsx @@ -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 } ]