Enabling Route Forwarding (#7909)

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({
         <Logo />
         <div class={styles.nav}>
           <NMenu
-            default-value='home'
+            default-value={this.menuStore.getMenuKey}
             mode='horizontal'
             options={this.headerMenuOptions}
             onUpdateValue={this.handleMenuClick}

dolphinscheduler-ui-next/src/layouts/content/components/navbar/use-menuClick.ts

@@ -24,9 +24,9 @@ export function useMenuClick(ctx: SetupContext<'handleMenuClick'[]>) {
   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 {

dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.module.scss

@@ -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.
- */

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)}
       >
         <NMenu
+          default-value={this.sideMenuOptions[0].key}
           options={this.sideMenuOptions}
           defaultExpandedKeys={this.defaultExpandedKeys}
           onUpdateValue={this.handleMenuClick}

dolphinscheduler-ui-next/src/layouts/content/components/sidebar/use-menuClick.ts

@@ -18,13 +18,15 @@
 import { useRouter } from 'vue-router'
 import type { Router } from 'vue-router'
 import { MenuOption } from 'naive-ui'
+import { useMenuStore } from '@/store/menu/menu'
 
 export function useMenuClick() {
   const router: Router = useRouter()
+  const menuStore = useMenuStore()
 
   const handleMenuClick = (key: string, item: MenuOption) => {
-    console.log(key, item)
-    // router.push({ path: 'home' })
+    // console.log(key, item)
+    router.push({ path: `/${menuStore.getMenuKey}/${key}` })
   }
 
   return {

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 {

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

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