[Feature][UI Next] Remove sidekey, resolve the sidebar route jump issue (#8200)

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

@@ -15,10 +15,11 @@
  * limitations under the License.
  */
 
-import { defineComponent, ref, PropType } from 'vue'
+import { defineComponent, ref, PropType, watch } from 'vue'
 import { NLayoutSider, NMenu } from 'naive-ui'
 import { useMenuClick } from './use-menuClick'
 import { useMenuStore } from '@/store/menu/menu'
+import { useRoute } from 'vue-router'
 
 const Sidebar = defineComponent({
   name: 'Sidebar',
@@ -26,9 +27,14 @@ const Sidebar = defineComponent({
     sideMenuOptions: {
       type: Array as PropType<any>,
       default: []
+    },
+    sideKey: {
+      type: String as PropType<string>,
+      default: ''
     }
   },
   setup() {
+    const route = useRoute()
     const menuStore = useMenuStore()
     const collapsedRef = ref(false)
     const defaultExpandedKeys = [
@@ -54,7 +60,7 @@ const Sidebar = defineComponent({
         onExpand={() => (this.collapsedRef = false)}
       >
         <NMenu
-          value={this.menuStore.getSideMenuKey}
+          value={this.sideKey}
           options={this.sideMenuOptions}
           defaultExpandedKeys={this.defaultExpandedKeys}
           onUpdateValue={this.handleMenuClick}

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

@@ -18,15 +18,12 @@
 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)
-    menuStore.setSideMenuKey(`${key}`)
+    // console.log(key, item)
     router.push({ path: `${key}` })
   }
 

dolphinscheduler-ui-next/src/layouts/content/index.tsx

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, onMounted, watch, toRefs } from 'vue'
+import { defineComponent, onMounted, watch, toRefs, ref } from 'vue'
 import { NLayout, NLayoutContent, NLayoutHeader, useMessage } from 'naive-ui'
 import NavBar from './components/navbar'
 import SideBar from './components/sidebar'
@@ -40,6 +40,7 @@ const Content = defineComponent({
       changeHeaderMenuOptions,
       changeUserDropdown
     } = useDataList()
+    const sideKey = ref()
 
     locale.value = localesStore.getLocales
 
@@ -59,10 +60,11 @@ const Content = defineComponent({
 
     watch(
       () => route.path,
-      (path) => {
+      () => {
         state.isShowSide = menuStore.getShowSideStatus
-        menuStore.setSideMenuKey(path)
-      }
+        sideKey.value = route.matched[1]?.path
+      },
+      {immediate: true}
     )
 
     const getSideMenu = (state: any) => {
@@ -82,7 +84,8 @@ const Content = defineComponent({
       ...toRefs(state),
       menuStore,
       changeMenuOption,
-      getSideMenuOptions
+      getSideMenuOptions,
+      sideKey
     }
   },
   render() {
@@ -98,7 +101,7 @@ const Content = defineComponent({
         </NLayoutHeader>
         <NLayout has-sider position='absolute' style='top: 65px'>
           {this.isShowSide && (
-            <SideBar sideMenuOptions={this.sideMenuOptions} />
+            <SideBar sideMenuOptions={this.sideMenuOptions} sideKey={this.sideKey} />
           )}
           <NLayoutContent native-scrollbar={false} style='padding: 16px 22px'>
             <router-view key={this.$route.fullPath} />

dolphinscheduler-ui-next/src/store/menu/menu.ts

@@ -23,7 +23,6 @@ export const useMenuStore = defineStore({
   state: (): MenuState => ({
     menuKey: 'home',
     isShowSide: false,
-    sideMenuKey: '',
     projectCode: ''
   }),
   persist: true,
@@ -34,9 +33,6 @@ export const useMenuStore = defineStore({
     getShowSideStatus(): boolean {
       return this.isShowSide || false
     },
-    getSideMenuKey(): string {
-      return this.sideMenuKey || ''
-    },
     getProjectCode(): string {
       return this.projectCode || ''
     }
@@ -48,9 +44,6 @@ export const useMenuStore = defineStore({
     setShowSideStatus(isShowSide: boolean): void {
       this.isShowSide = isShowSide
     },
-    setSideMenuKey(sideMenuKey: string): void {
-      this.sideMenuKey = sideMenuKey
-    },
     setProjectCode(projectCode: string): void {
       this.projectCode = projectCode
     }

dolphinscheduler-ui-next/src/store/menu/types.ts

@@ -18,7 +18,6 @@
 interface MenuState {
   menuKey: string
   isShowSide: boolean
-  sideMenuKey: string
   projectCode: string
 }