From 7bc1591ef08356cc3791f863b76780e83431e984 Mon Sep 17 00:00:00 2001 From: labbomb <739955946@qq.com> Date: Mon, 10 Jan 2022 11:06:11 +0800 Subject: [PATCH] Enabling Route Forwarding (#7909) --- .../layouts/content/components/navbar/index.tsx | 6 ++++-- .../content/components/navbar/use-menuClick.ts | 4 ++-- .../content/components/sidebar/index.module.scss | 16 ---------------- .../layouts/content/components/sidebar/index.tsx | 7 ++++--- .../content/components/sidebar/use-menuClick.ts | 6 ++++-- .../src/layouts/content/index.tsx | 9 +++++---- dolphinscheduler-ui-next/src/store/menu/menu.ts | 1 + .../src/store/theme/theme.ts | 1 + 8 files changed, 21 insertions(+), 29 deletions(-) delete mode 100644 dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.module.scss diff --git a/dolphinscheduler-ui-next/src/layouts/content/components/navbar/index.tsx b/dolphinscheduler-ui-next/src/layouts/content/components/navbar/index.tsx index 1ccd6c38fb..60e496b3ae 100644 --- a/dolphinscheduler-ui-next/src/layouts/content/components/navbar/index.tsx +++ b/dolphinscheduler-ui-next/src/layouts/content/components/navbar/index.tsx @@ -23,6 +23,7 @@ import Locales from '../locales' import User from '../user' import Theme from '../theme' import { useMenuClick } from './use-menuClick' +import { useMenuStore } from '@/store/menu/menu' const Navbar = defineComponent({ name: 'Navbar', @@ -43,7 +44,8 @@ const Navbar = defineComponent({ }, setup(props, ctx) { const { handleMenuClick } = useMenuClick(ctx) - return { handleMenuClick } + const menuStore = useMenuStore() + return { handleMenuClick, menuStore } }, render() { return ( @@ -51,7 +53,7 @@ const Navbar = defineComponent({
) { const router: Router = useRouter() const handleMenuClick = (key: string, item: MenuOption) => { - console.log(key, item) + // console.log(key, item) ctx.emit('handleMenuClick', item) - // router.push({ path: 'home' }) + router.push({ path: `/${key}` }) } return { diff --git a/dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.module.scss b/dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.module.scss deleted file mode 100644 index 3e7c6c26f5..0000000000 --- a/dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.module.scss +++ /dev/null @@ -1,16 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You 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. - */ diff --git a/dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.tsx b/dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.tsx index 353f8051a1..e33d67ca92 100644 --- a/dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.tsx +++ b/dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.tsx @@ -15,9 +15,8 @@ * limitations under the License. */ -import { defineComponent, ref, watch, PropType } from 'vue' -import styles from './index.module.scss' -import { MenuOption, NLayoutSider, NMenu } from 'naive-ui' +import { defineComponent, ref, PropType } from 'vue' +import { NLayoutSider, NMenu } from 'naive-ui' import { useMenuClick } from './use-menuClick' const Sidebar = defineComponent({ @@ -39,6 +38,7 @@ const Sidebar = defineComponent({ const { handleMenuClick } = useMenuClick() + return { collapsedRef, defaultExpandedKeys, handleMenuClick } }, render() { @@ -53,6 +53,7 @@ const Sidebar = defineComponent({ onExpand={() => (this.collapsedRef = false)} > { - console.log(key, item) - // router.push({ path: 'home' }) + // console.log(key, item) + router.push({ path: `/${menuStore.getMenuKey}/${key}` }) } return { diff --git a/dolphinscheduler-ui-next/src/layouts/content/index.tsx b/dolphinscheduler-ui-next/src/layouts/content/index.tsx index b75b139836..b6fbced0f4 100644 --- a/dolphinscheduler-ui-next/src/layouts/content/index.tsx +++ b/dolphinscheduler-ui-next/src/layouts/content/index.tsx @@ -40,7 +40,6 @@ const Content = defineComponent({ locale.value = localesStore.getLocales onMounted(() => { - menuStore.setMenuKey('home') changeMenuOption(state) changeHeaderMenuOptions(state) genSideMenu(state) @@ -57,14 +56,16 @@ const Content = defineComponent({ const genSideMenu = (state: any) => { const key = menuStore.getMenuKey state.sideMenuOptions = - state.menuOptions.filter((menu: { key: string }) => menu.key === key)[0] - .children || [] + state.menuOptions.filter((menu: { key: string }) => menu.key === key)[0] + .children || [] + state.isShowSide = + state.menuOptions.filter((menu: { key: string }) => menu.key === key)[0] + .isShowSide || false } const getSideMenuOptions = (item: any) => { menuStore.setMenuKey(item.key) genSideMenu(state) - state.isShowSide = item.isShowSide } return { diff --git a/dolphinscheduler-ui-next/src/store/menu/menu.ts b/dolphinscheduler-ui-next/src/store/menu/menu.ts index 370d23fc1c..bdb86950b1 100644 --- a/dolphinscheduler-ui-next/src/store/menu/menu.ts +++ b/dolphinscheduler-ui-next/src/store/menu/menu.ts @@ -23,6 +23,7 @@ export const useMenuStore = defineStore({ state: (): MenuState => ({ menuKey: '', }), + persist: true, getters: { getMenuKey(): string { return this.menuKey diff --git a/dolphinscheduler-ui-next/src/store/theme/theme.ts b/dolphinscheduler-ui-next/src/store/theme/theme.ts index eb8364e3a7..8d5facd865 100644 --- a/dolphinscheduler-ui-next/src/store/theme/theme.ts +++ b/dolphinscheduler-ui-next/src/store/theme/theme.ts @@ -23,6 +23,7 @@ export const useThemeStore = defineStore({ state: (): ThemeState => ({ darkTheme: false, }), + persist: true, getters: { getTheme(): boolean { return this.darkTheme