Fix menu bar status bug (#8118)

2022-01-19 15:34:08 +08:00 · 2022-01-19 15:34:08 +08:00 · ee00f5beab
parent d6e1d95511
commit ee00f5beab
12 changed files with 91 additions and 31 deletions
--- a/dolphinscheduler-ui-next/src/layouts/content/components/navbar/index.tsx
+++ b/dolphinscheduler-ui-next/src/layouts/content/components/navbar/index.tsx
@ -53,7 +53,7 @@ const Navbar = defineComponent({
        <Logo />
        <div class={styles.nav}>
          <NMenu
-            default-value={this.menuStore.getMenuKey}
+            value={this.menuStore.getMenuKey}
            mode='horizontal'
            options={this.headerMenuOptions}
            onUpdateValue={this.handleMenuClick}
--- a/dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.tsx
+++ b/dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.tsx
@ -18,6 +18,7 @@
 import { defineComponent, ref, PropType } from 'vue'
 import { NLayoutSider, NMenu } from 'naive-ui'
 import { useMenuClick } from './use-menuClick'
+import { useMenuStore } from '@/store/menu/menu'

 const Sidebar = defineComponent({
  name: 'Sidebar',
@ -28,6 +29,7 @@ const Sidebar = defineComponent({
    }
  },
  setup() {
+    const menuStore = useMenuStore()
    const collapsedRef = ref(false)
    const defaultExpandedKeys = [
      'workflow',
@ -38,7 +40,7 @@ const Sidebar = defineComponent({

    const { handleMenuClick } = useMenuClick()

-    return { collapsedRef, defaultExpandedKeys, handleMenuClick }
+    return { collapsedRef, defaultExpandedKeys, handleMenuClick, menuStore }
  },
  render() {
    return (
@ -52,7 +54,7 @@ const Sidebar = defineComponent({
        onExpand={() => (this.collapsedRef = false)}
      >
        <NMenu
-          default-value={this.sideMenuOptions[0].key}
+          value={this.menuStore.getSideMenuKey}
          options={this.sideMenuOptions}
          defaultExpandedKeys={this.defaultExpandedKeys}
          onUpdateValue={this.handleMenuClick}
--- a/dolphinscheduler-ui-next/src/layouts/content/components/sidebar/use-menuClick.ts
+++ b/dolphinscheduler-ui-next/src/layouts/content/components/sidebar/use-menuClick.ts
@ -26,6 +26,7 @@ export function useMenuClick() {

  const handleMenuClick = (key: string, item: MenuOption) => {
    // console.log(key, item)
+    menuStore.setSideMenuKey(key)
    router.push({ path: `/${menuStore.getMenuKey}/${key}` })
  }

--- a/dolphinscheduler-ui-next/src/layouts/content/index.tsx
+++ b/dolphinscheduler-ui-next/src/layouts/content/index.tsx
@ -23,12 +23,14 @@ import { useDataList } from './use-dataList'
 import { useMenuStore } from '@/store/menu/menu'
 import { useLocalesStore } from '@/store/locales/locales'
 import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'

 const Content = defineComponent({
  name: 'Content',
  setup() {
    window.$message = useMessage()

+    const route = useRoute()
    const menuStore = useMenuStore()
    const { locale } = useI18n()
    const localesStore = useLocalesStore()
@ -55,14 +57,21 @@ const Content = defineComponent({
      changeUserDropdown(state)
    })

+    watch(
+      () => route.path,
+      (path) => {
+        state.isShowSide = menuStore.getShowSideStatus
+        const regex = new RegExp('[^/]+$', 'g')
+        menuStore.setSideMenuKey((path.match(regex) as RegExpMatchArray)[0])
+      }
+    )
+
    const genSideMenu = (state: any) => {
      const key = menuStore.getMenuKey
      state.sideMenuOptions =
        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
+      state.isShowSide = menuStore.getShowSideStatus
    }

    const getSideMenuOptions = (item: any) => {
--- a/dolphinscheduler-ui-next/src/router/index.ts
+++ b/dolphinscheduler-ui-next/src/router/index.ts
@ -23,6 +23,8 @@ import {
 } from 'vue-router'
 import routes from './routes'

+import { useMenuStore } from '@/store/menu/menu'
+
 // NProgress
 import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'
@ -32,6 +34,11 @@ const router = createRouter({
  routes
 })

+interface metaData {
+  title?: string
+  showSide?: boolean
+}
+
 /**
 * Routing to intercept
 */
@ -42,6 +49,9 @@ router.beforeEach(
    next: NavigationGuardNext
  ) => {
    NProgress.start()
+    const menuStore = useMenuStore()
+    const metaData:metaData = to.meta
+    menuStore.setShowSideStatus(metaData.showSide || false)
    next()
    NProgress.done()
  }
--- a/dolphinscheduler-ui-next/src/router/modules/datasource.ts
+++ b/dolphinscheduler-ui-next/src/router/modules/datasource.ts
@ -34,7 +34,8 @@ export default {
      name: 'datasource-list',
      component: components['datasource-list'],
      meta: {
-        title: '数据源中心'
+        title: '数据源中心',
+        showSide: false
      }
    }
  ]
--- a/dolphinscheduler-ui-next/src/router/modules/monitor.ts
+++ b/dolphinscheduler-ui-next/src/router/modules/monitor.ts
@ -34,7 +34,8 @@ export default {
      name: 'servers-master',
      component: components['master'],
      meta: {
-        title: '服务管理-Master'
+        title: '服务管理-Master',
+        showSide: true
      }
    },
    {
@ -42,7 +43,8 @@ export default {
      name: 'servers-worker',
      component: components['worker'],
      meta: {
-        title: '服务管理-Worker'
+        title: '服务管理-Worker',
+        showSide: true
      }
    },
    {
@ -50,7 +52,8 @@ export default {
      name: 'servers-db',
      component: components['db'],
      meta: {
-        title: '服务管理-DB'
+        title: '服务管理-DB',
+        showSide: true
      }
    },
    {
@ -58,7 +61,8 @@ export default {
      name: 'statistics-statistics',
      component: components['statistics'],
      meta: {
-        title: '统计管理-Statistics'
+        title: '统计管理-Statistics',
+        showSide: true
      }
    }
  ]
--- a/dolphinscheduler-ui-next/src/router/modules/projects.ts
+++ b/dolphinscheduler-ui-next/src/router/modules/projects.ts
@ -34,7 +34,8 @@ export default {
      name: 'projects-list',
      component: components['list'],
      meta: {
-        title: '项目'
+        title: '项目',
+        showSide: false
      }
    },
    {
@ -42,7 +43,8 @@ export default {
      name: 'workflow-monitor',
      component: components['workflow-monitor'],
      meta: {
-        title: '工作流监控'
+        title: '工作流监控',
+        showSide: true
      }
    }
  ]
--- a/dolphinscheduler-ui-next/src/router/modules/resources.ts
+++ b/dolphinscheduler-ui-next/src/router/modules/resources.ts
@ -34,7 +34,8 @@ export default {
      name: 'file-manage',
      component: components['file'],
      meta: {
-        title: '文件管理'
+        title: '文件管理',
+        showSide: true
      }
    },
    {
@ -42,7 +43,8 @@ export default {
      name: 'resource-file-create',
      component: components['resource-file-create'],
      meta: {
-        title: '文件创建'
+        title: '文件创建',
+        showSide: true
      }
    },
    {
@ -50,7 +52,8 @@ export default {
      name: 'resource-file-edit',
      component: components['resource-file-edit'],
      meta: {
-        title: '文件编辑'
+        title: '文件编辑',
+        showSide: true
      }
    },
    {
@ -58,7 +61,8 @@ export default {
      name: 'resource-file-subdirectory',
      component: components['file'],
      meta: {
-        title: '文件管理'
+        title: '文件管理',
+        showSide: true
      }
    },
    {
@ -66,7 +70,8 @@ export default {
      name: 'resource-file-list',
      component: components['resource-file-edit'],
      meta: {
-        title: '文件详情'
+        title: '文件详情',
+        showSide: true
      }
    },
    {
@ -74,7 +79,8 @@ export default {
      name: 'resource-subfile-create',
      component: components['resource-file-create'],
      meta: {
-        title: '文件创建'
+        title: '文件创建',
+        showSide: true
      }
    },
    {
@ -82,7 +88,8 @@ export default {
      name: 'resource-manage',
      component: components['resource'],
      meta: {
-        title: '资源管理'
+        title: '资源管理',
+        showSide: true
      }
    },
    {
@ -90,7 +97,8 @@ export default {
      name: 'resource-sub-manage',
      component: components['resource'],
      meta: {
-        title: '资源管理'
+        title: '资源管理',
+        showSide: true
      }
    },
    {
--- a/dolphinscheduler-ui-next/src/router/modules/security.ts
+++ b/dolphinscheduler-ui-next/src/router/modules/security.ts
@ -34,7 +34,8 @@ export default {
      name: 'tenant-manage',
      component: components['tenant-manage'],
      meta: {
-        title: '租户管理'
+        title: '租户管理',
+        showSide: true
      }
    },
    {
@ -42,7 +43,8 @@ export default {
      name: 'users-manage',
      component: components['home'],
      meta: {
-        title: '用户管理'
+        title: '用户管理',
+        showSide: true
      }
    },
    {
@ -50,7 +52,8 @@ export default {
      name: 'alarm-group-manage',
      component: components['alarm-group-manage'],
      meta: {
-        title: '告警组管理'
+        title: '告警组管理',
+        showSide: true
      }
    },
    {
@ -58,7 +61,8 @@ export default {
      name: 'worker-group-manage',
      component: components['worker-group-manage'],
      meta: {
-        title: 'Worker分组管理'
+        title: 'Worker分组管理',
+        showSide: true
      }
    },
    {
@ -66,7 +70,8 @@ export default {
      name: 'yarn-queue-manage',
      component: components['yarn-queue-manage'],
      meta: {
-        title: 'Yarn队列管理'
+        title: 'Yarn队列管理',
+        showSide: true
      }
    },
    {
@ -74,7 +79,8 @@ export default {
      name: 'environment-manage',
      component: components['environment-manage'],
      meta: {
-        title: '环境管理'
+        title: '环境管理',
+        showSide: true
      }
    },
    {
@ -82,7 +88,8 @@ export default {
      name: 'token-manage',
      component: components['token-manage'],
      meta: {
-        title: '令牌管理管理'
+        title: '令牌管理管理',
+        showSide: true
      }
    }
  ]
--- a/dolphinscheduler-ui-next/src/store/menu/menu.ts
+++ b/dolphinscheduler-ui-next/src/store/menu/menu.ts
@ -21,17 +21,31 @@ import MenuState from './types'
 export const useMenuStore = defineStore({
  id: 'menu',
  state: (): MenuState => ({
-    menuKey: 'home'
+    menuKey: 'home',
+    isShowSide: false,
+    sideMenuKey: ''
  }),
  persist: true,
  getters: {
    getMenuKey(): string {
      return this.menuKey || 'home'
+    },
+    getShowSideStatus(): boolean {
+      return this.isShowSide || false
+    },
+    getSideMenuKey(): string {
+      return this.sideMenuKey || ''
    }
  },
  actions: {
    setMenuKey(menuKey: string): void {
      this.menuKey = menuKey
-    }
+    },
+    setShowSideStatus(isShowSide: boolean): void {
+      this.isShowSide = isShowSide
+    },
+    setSideMenuKey(sideMenuKey: string): void {
+      this.sideMenuKey = sideMenuKey
+    },
  }
 })
--- a/dolphinscheduler-ui-next/src/store/menu/types.ts
+++ b/dolphinscheduler-ui-next/src/store/menu/types.ts
@ -16,7 +16,9 @@
 */

 interface MenuState {
-  menuKey: string
+  menuKey: string,
+  isShowSide: boolean,
+  sideMenuKey: string
 }

 export default MenuState