前端 路由选项卡模块代码 (#1159)

* routeChange

* 11-17

* 11-17 02

* 11-17 04

* routechange2

* 11-18

* 11-18 2

* 112

* x2paddle

* x2paddle

* x2paddles

* x2paddles

frontend/packages/core/src/App.tsx

@@ -16,13 +16,12 @@
 
 // cSpell:words pageview inited
 import 'antd/dist/antd.css';
-import React, {FunctionComponent, Suspense, useCallback, useEffect, useMemo} from 'react';
-import {Redirect, Route, BrowserRouter as Router, Switch, useLocation} from 'react-router-dom';
+import React, {FunctionComponent, Suspense, useCallback, useEffect, useMemo, useState} from 'react';
+import {Redirect, Route, BrowserRouter as Router, Switch, useLocation, useHistory} from 'react-router-dom';
 import {THEME, matchMedia} from '~/utils/theme';
 import {actions, selectors} from '~/store';
 import {headerHeight, position, size, zIndexes, setRem} from '~/utils/style';
 import {useDispatch, useSelector} from 'react-redux';
-
 import ErrorBoundary from '~/components/ErrorBoundary';
 import ErrorPage from '~/pages/error';
 import {Helmet} from 'react-helmet';
@@ -33,7 +32,7 @@ import {ToastContainer} from 'react-toastify';
 import {fetcher} from '~/utils/fetch';
 import routes from '~/routes';
 import styled from 'styled-components';
-import {useTranslation} from 'react-i18next';
+import {setDefaults, useTranslation} from 'react-i18next';
 
 const BASE_URI: string = import.meta.env.SNOWPACK_PUBLIC_BASE_URI;
 
@@ -48,7 +47,6 @@ const Header = styled.header`
     ${position('fixed', 0, 0, null, 0)}
 `;
 
-const defaultRoute = routes.find(route => route.default);
 const routers = routes.reduce<Omit<typeof routes[number], 'children'>[]>((m, route) => {
     if (route.children) {
         m.push(...route.children);
@@ -79,7 +77,7 @@ const Telemetry: FunctionComponent = () => {
 
 const App: FunctionComponent = () => {
     const {t, i18n} = useTranslation('errors');
-
+    const [defaultRoute, setDefaultRoute] = useState('');
     const dir = useMemo(() => (i18n.language ? i18n.dir(i18n.language) : ''), [i18n]);
 
     const dispatch = useDispatch();
@@ -107,7 +105,6 @@ const App: FunctionComponent = () => {
             };
         }
     }, [toggleTheme]);
-
     return (
         <div className="app">
             <Helmet defaultTitle="VisualDL" titleTemplate="%s - VisualDL">
@@ -129,7 +126,7 @@ const App: FunctionComponent = () => {
                         <ErrorBoundary fallback={<ErrorPage />}>
                             <Suspense fallback={<Progress />}>
                                 <Switch>
-                                    <Redirect exact from="/" to={defaultRoute?.path ?? '/index'} />
+                                    <Redirect exact from="/" to={defaultRoute ?? '/index'} />
                                     {routers.map(route => (
                                         <Route key={route.id} path={route.path} component={route.component} />
                                     ))}

frontend/packages/core/src/components/Navbar.tsx

@@ -17,6 +17,7 @@
 // cspell:words cimode
 
 import {Link, LinkProps, useLocation} from 'react-router-dom';
+import {useHistory} from 'react-router-dom';
 import React, {FunctionComponent, useCallback, useEffect, useMemo, useState} from 'react';
 import {border, borderRadius, rem, size, transitionProps, triangle} from '~/utils/style';
 
@@ -26,13 +27,16 @@ import type {Route} from '~/routes';
 import ThemeToggle from '~/components/ThemeToggle';
 import Tippy from '@tippyjs/react';
 import ee from '~/utils/event';
+import routes from '~/routes';
 import {getApiToken} from '~/utils/fetch';
 import logo from '~/assets/images/logo.svg';
 import queryString from 'query-string';
 import styled from 'styled-components';
 import useClassNames from '~/hooks/useClassNames';
 import useComponents from '~/hooks/useComponents';
 import {useTranslation} from 'react-i18next';
+import {fetcher} from '~/utils/fetch';
+import {Child} from './ProfilerPage/OperatorView/type';
 
 const BASE_URI: string = import.meta.env.SNOWPACK_PUBLIC_BASE_URI;
 const PUBLIC_PATH: string = import.meta.env.SNOWPACK_PUBLIC_PATH;
@@ -261,23 +265,79 @@ const SubNav: FunctionComponent<{
 );
 
 const Navbar: FunctionComponent = () => {
+    const history = useHistory();
     const {t, i18n} = useTranslation('common');
     const {pathname} = useLocation();
-
+    const [navList, setNavlist] = useState<string[]>([]);
     const changeLanguage = useCallback(() => {
         const language = i18n.language;
         const allLanguages = (i18n.options.supportedLngs || []).filter(lng => lng !== 'cimode');
         const index = allLanguages.indexOf(language);
         const nextLanguage = index < 0 || index >= allLanguages.length - 1 ? allLanguages[0] : allLanguages[index + 1];
         i18n.changeLanguage(nextLanguage);
     }, [i18n]);
-
+    const routeEm: any = useMemo(() => {
+        return {
+            scalar: 'scalar',
+            histogram: 'histogram',
+            image: 'image',
+            audio: 'audio',
+            text: 'text',
+            graphStatic: 'dynamic_graph',
+            graphDynamic: 'dynamic_graph',
+            'high-dimensional': 'embeddings',
+            'pr-curve': 'pr_curve',
+            'roc-curve': 'roc_curve',
+            profiler: 'profiler',
+            'hyper-parameter': 'hyper_parameters',
+            x2paddle: 'x2paddle',
+            fastdeploy_server: 'fastdeploy_server'
+        };
+    }, []);
     const currentPath = useMemo(() => pathname.replace(BASE_URI, ''), [pathname]);
 
     const [components] = useComponents();
+    const routePush = (route: any, Components: any[]) => {
+        if (navList.includes(routeEm[route.id])) {
+            // debugger;
 
-    const componentsInNavbar = useMemo(() => components.slice(0, MAX_ITEM_COUNT_IN_NAVBAR), [components]);
-    const flattenMoreComponents = useMemo(() => flatten(components.slice(MAX_ITEM_COUNT_IN_NAVBAR)), [components]);
+            return true;
+            // setDefaultRoute(route.id);
+        }
+        if (route.children) {
+            for (const Route of route.children) {
+                routePush(Route, Components);
+            }
+        }
+    };
+    const newcomponents = useMemo(() => {
+        const Components = [];
+        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);
+                }
+                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);
+                        }
+                    }
+                }
+            }
+        }
+        return Components;
+    }, [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(
         () =>
             flattenMoreComponents.map(item => ({
@@ -287,6 +347,36 @@ const Navbar: FunctionComponent = () => {
         [currentPath, flattenMoreComponents]
     );
     const [navItemsInNavbar, setNavItemsInNavbar] = useState<NavbarItemType[]>([]);
+    const routesChange = (route: any) => {
+        if (navList.includes(routeEm[route.id])) {
+            // debugger;
+            history.push(`/${route.id}`);
+            return true;
+            // setDefaultRoute(route.id);
+        }
+        if (route.Children) {
+            for (const Route of route.Children) {
+                routesChange(Route);
+            }
+        }
+    };
+    useEffect(() => {
+        // setLoading(true);
+        fetcher('/component_tabs').then((res: any) => {
+            setNavlist(res);
+        });
+    }, []);
+    useEffect(() => {
+        // const defaultRoute = routes;
+        if (navList.length > 0) {
+            for (const route of routes) {
+                const flag = routesChange(route);
+                if (flag) {
+                    return;
+                }
+            }
+        }
+    }, [navList]);
     useEffect(() => {
         setNavItemsInNavbar(oldItems =>
             componentsInNavbar.map(item => {
@@ -325,7 +415,8 @@ const Navbar: FunctionComponent = () => {
                 };
             })
         );
-    }, [componentsInNavbar, currentPath]);
+    }, [componentsInNavbar, currentPath, navList]);
+    console.log('componentsInNavbar', componentsInNavbar);
 
     return (
         <Nav>

frontend/packages/core/src/routes/index.ts

@@ -25,7 +25,7 @@ export enum Pages {
     Audio = 'audio',
     Text = 'text',
     Graph = 'graph',
-    ToggleGraph = 'ToggleGraph',
+    x2paddle = 'x2paddle',
     HighDimensional = 'high-dimensional',
     PRCurve = 'pr-curve',
     ROCCurve = 'roc-curve',
@@ -92,7 +92,7 @@ const routes: Route[] = [
         ]
     },
     {
-        id: Pages.ToggleGraph,
+        id: Pages.x2paddle,
         path: '/x2paddle',
         component: React.lazy(() => import('~/pages/x2paddle'))
     },

frontend/packages/mock/data/app/component_tabs.js

@@ -0,0 +1,33 @@
+/**
+ * Copyright 2020 Baidu Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * 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'];