From b1a387a939d36e7eb836dcd14d61dcbea254360b Mon Sep 17 00:00:00 2001 From: RotPublic <63988781+xiaoyixin-cmd@users.noreply.github.com> Date: Tue, 22 Nov 2022 14:45:05 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E8=B7=AF=E7=94=B1=E8=B7=B3?= =?UTF-8?q?=E8=BD=ACbug=20(#1163)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fileNames * fixgoutebug * fixgoutebug2 * fixtype --- .../packages/core/src/components/Navbar.tsx | 56 +++++++++++++------ frontend/packages/core/src/routes/index.ts | 4 +- .../packages/mock/data/app/component_tabs.js | 34 +++++------ 3 files changed, 59 insertions(+), 35 deletions(-) diff --git a/frontend/packages/core/src/components/Navbar.tsx b/frontend/packages/core/src/components/Navbar.tsx index c3cf7a0b..e9309a0a 100644 --- a/frontend/packages/core/src/components/Navbar.tsx +++ b/frontend/packages/core/src/components/Navbar.tsx @@ -37,6 +37,7 @@ import useComponents from '~/hooks/useComponents'; import {useTranslation} from 'react-i18next'; import {fetcher} from '~/utils/fetch'; import {Child} from './ProfilerPage/OperatorView/type'; +import {isArray} from 'lodash'; const BASE_URI: string = import.meta.env.SNOWPACK_PUBLIC_BASE_URI; const PUBLIC_PATH: string = import.meta.env.SNOWPACK_PUBLIC_PATH; @@ -297,7 +298,8 @@ const Navbar: FunctionComponent = () => { const currentPath = useMemo(() => pathname.replace(BASE_URI, ''), [pathname]); const [components] = useComponents(); - const routePush = (route: any, Components: any[]) => { + const routePush = (route: any, component: any) => { + const Components = isArray(component) ? [...component] : [...component.values()]; if (navList.includes(routeEm[route.id])) { // debugger; @@ -311,34 +313,49 @@ const Navbar: FunctionComponent = () => { } }; const newcomponents = useMemo(() => { - const Components = []; + const Components = new Map(); + const parent: any[] = []; if (navList.length > 0) { for (const item of components) { - // debugger; // const Id: any = item.id; if (navList.includes(routeEm[item.id])) { - Components.push(item); + // Components.push(item); + Components.set(item.id, item); } if (item.children) { for (const Route of item.children) { const flag = routePush(Route, Components); if (flag && !parent.includes(item.id)) { parent.push(item.id); - Components.push(item); + const newItems = { + ...item, + children: [Route] + }; + Components.set(item.id, newItems); + } else if (flag && parent.includes(item.id)) { + // debugger; + const newItem = Components.get(item.id); + const newItems = { + ...newItem, + children: [...newItem.children, Route] + }; + Components.set(item.id, newItems); } } } } } - return Components; + console.log('Components', [...Components], Components); + // debugger; + return [...Components.values()]; }, [components, navList]); const componentsInNavbar = useMemo(() => newcomponents.slice(0, MAX_ITEM_COUNT_IN_NAVBAR), [newcomponents]); const flattenMoreComponents = useMemo( () => flatten(newcomponents.slice(MAX_ITEM_COUNT_IN_NAVBAR)), [newcomponents] ); - const componentsInMoreMenu = useMemo( + const componentsInMoreMenu: any = useMemo( () => flattenMoreComponents.map(item => ({ ...item, @@ -347,18 +364,25 @@ const Navbar: FunctionComponent = () => { [currentPath, flattenMoreComponents] ); const [navItemsInNavbar, setNavItemsInNavbar] = useState([]); - const routesChange = (route: any) => { + const routesChange = (route: any, parentPath?: any) => { + // debugger; if (navList.includes(routeEm[route.id])) { // debugger; - history.push(`/${route.id}`); - return true; + if (parentPath) { + history.push(`${parentPath}/${route.id}`); + return true; + } else { + history.push(`/${route.id}`); + return true; + } // setDefaultRoute(route.id); } - if (route.Children) { - for (const Route of route.Children) { - routesChange(Route); + if (route.children) { + for (const Route of route.children) { + routesChange(Route, `/${route.id}`); } } + // return false; }; useEffect(() => { // setLoading(true); @@ -380,12 +404,12 @@ const Navbar: FunctionComponent = () => { useEffect(() => { setNavItemsInNavbar(oldItems => componentsInNavbar.map(item => { - const children = item.children?.map(child => ({ + const children = item.children?.map((child: any) => ({ ...child, active: child.path === currentPath })); if (item.children && !item.path) { - const child = item.children.find(child => child.path === currentPath); + const child = item.children.find((child: any) => child.path === currentPath); if (child) { return { ...item, @@ -401,7 +425,7 @@ const Navbar: FunctionComponent = () => { return { ...item, ...oldItem, - name: item.children?.find(c => c.id === oldItem.cid)?.name ?? item.name, + name: item.children?.find((c: any) => c.id === oldItem.cid)?.name ?? item.name, active: false, children }; diff --git a/frontend/packages/core/src/routes/index.ts b/frontend/packages/core/src/routes/index.ts index 5ecb50b4..7eda071d 100644 --- a/frontend/packages/core/src/routes/index.ts +++ b/frontend/packages/core/src/routes/index.ts @@ -81,12 +81,12 @@ const routes: Route[] = [ children: [ { id: 'graphDynamic', - path: '/graphDynamic', + path: '/graph/graphDynamic', component: React.lazy(() => import('~/pages/graphDynamic')) }, { id: 'graphStatic', - path: '/graphStatic', + path: '/graph/graphStatic', component: React.lazy(() => import('~/pages/graphStatic')) } ] diff --git a/frontend/packages/mock/data/app/component_tabs.js b/frontend/packages/mock/data/app/component_tabs.js index 47850b9b..14f8dd06 100644 --- a/frontend/packages/mock/data/app/component_tabs.js +++ b/frontend/packages/mock/data/app/component_tabs.js @@ -14,20 +14,20 @@ * limitations under the License. */ -// export default [ -// 'scalar', -// 'image', -// 'text', -// 'embeddings', -// 'audio', -// 'histogram', -// 'hyper_parameters', -// 'static_graph', -// 'dynamic_graph', -// 'pr_curve', -// 'roc_curve', -// 'profiler', -// 'x2paddle', -// 'fastdeploy_server' -// ]; -export default ['x2paddle']; +export default [ + 'scalar', + 'image', + // 'text', + 'embeddings', + 'audio', + 'histogram', + 'hyper_parameters', + 'static_graph', + 'dynamic_graph', + 'pr_curve', + 'roc_curve', + 'profiler', + 'x2paddle', + 'fastdeploy_server' +]; +// export default ['dynamic_graph']; -- GitLab