前端 路由选项卡模块代码

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} />
                                     ))}
@@ -141,7 +138,13 @@ const App: FunctionComponent = () => {
                         </ErrorBoundary>
                     </Router>
                 </Main>
-                <ToastContainer />
+
+                <ToastContainer
+                    autoClose={100000}
+                    style={{wordBreak: 'break-all'}}
+                    draggable={false}
+                    closeOnClick={false}
+                />
             </SWRConfig>
         </div>
     );

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,15 @@ 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';
 
 const BASE_URI: string = import.meta.env.SNOWPACK_PUBLIC_BASE_URI;
 const PUBLIC_PATH: string = import.meta.env.SNOWPACK_PUBLIC_PATH;
@@ -261,9 +264,10 @@ 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');
@@ -276,8 +280,20 @@ const Navbar: FunctionComponent = () => {
 
     const [components] = useComponents();
 
-    const componentsInNavbar = useMemo(() => components.slice(0, MAX_ITEM_COUNT_IN_NAVBAR), [components]);
-    const flattenMoreComponents = useMemo(() => flatten(components.slice(MAX_ITEM_COUNT_IN_NAVBAR)), [components]);
+    const newcomponents = useMemo(() => {
+        const Components = [];
+        for (const item of components) {
+            if (navList.includes(item.id)) {
+                Components.push(item);
+            }
+        }
+        return Components;
+    }, [navList, components]);
+    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 +303,25 @@ const Navbar: FunctionComponent = () => {
         [currentPath, flattenMoreComponents]
     );
     const [navItemsInNavbar, setNavItemsInNavbar] = useState<NavbarItemType[]>([]);
+    useEffect(() => {
+        // setLoading(true);
+        fetcher('/component_tabs').then((res: any) => {
+            setNavlist(res);
+        });
+    }, []);
+    useEffect(() => {
+        // const defaultRoute = routes;
+        if (navList.length > 0) {
+            for (const route of routes) {
+                // debugger;
+                if (navList.includes(route.id)) {
+                    // debugger;
+                    history.push(`/${route.id}`);
+                    // setDefaultRoute(route.id);
+                }
+            }
+        }
+    }, [navList, history]);
     useEffect(() => {
         setNavItemsInNavbar(oldItems =>
             componentsInNavbar.map(item => {
@@ -325,7 +360,7 @@ const Navbar: FunctionComponent = () => {
                 };
             })
         );
-    }, [componentsInNavbar, currentPath]);
+    }, [componentsInNavbar, currentPath, navList]);
 
     return (
         <Nav>

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

@@ -0,0 +1,17 @@
+/**
+ * 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', 'fastdeploy_server'];