You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dolphinscheduler.apache.org by ke...@apache.org on 2022/01/19 07:34:53 UTC
[dolphinscheduler] branch dev updated: Fix menu bar status bug (#8118)
This is an automated email from the ASF dual-hosted git repository.
kezhenxu94 pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git
The following commit(s) were added to refs/heads/dev by this push:
new ee00f5b Fix menu bar status bug (#8118)
ee00f5b is described below
commit ee00f5beab4131324e420693e4f1bdce080dde4d
Author: labbomb <73...@qq.com>
AuthorDate: Wed Jan 19 15:34:08 2022 +0800
Fix menu bar status bug (#8118)
---
.../layouts/content/components/navbar/index.tsx | 2 +-
.../layouts/content/components/sidebar/index.tsx | 6 ++++--
.../content/components/sidebar/use-menuClick.ts | 1 +
.../src/layouts/content/index.tsx | 15 +++++++++++---
dolphinscheduler-ui-next/src/router/index.ts | 10 +++++++++
.../src/router/modules/datasource.ts | 3 ++-
.../src/router/modules/monitor.ts | 12 +++++++----
.../src/router/modules/projects.ts | 6 ++++--
.../src/router/modules/resources.ts | 24 ++++++++++++++--------
.../src/router/modules/security.ts | 21 ++++++++++++-------
dolphinscheduler-ui-next/src/store/menu/menu.ts | 18 ++++++++++++++--
dolphinscheduler-ui-next/src/store/menu/types.ts | 4 +++-
12 files changed, 91 insertions(+), 31 deletions(-)
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 860a134..f15e50c 100644
--- 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}
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 9d934e3..e6bd8cc 100644
--- 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}
diff --git a/dolphinscheduler-ui-next/src/layouts/content/components/sidebar/use-menuClick.ts b/dolphinscheduler-ui-next/src/layouts/content/components/sidebar/use-menuClick.ts
index a08fccb..a6dbcfb 100644
--- 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}` })
}
diff --git a/dolphinscheduler-ui-next/src/layouts/content/index.tsx b/dolphinscheduler-ui-next/src/layouts/content/index.tsx
index 88a7402..d6a0b65 100644
--- 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) => {
diff --git a/dolphinscheduler-ui-next/src/router/index.ts b/dolphinscheduler-ui-next/src/router/index.ts
index a992d26..1c36fd1 100644
--- 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()
}
diff --git a/dolphinscheduler-ui-next/src/router/modules/datasource.ts b/dolphinscheduler-ui-next/src/router/modules/datasource.ts
index 2c88482..656a77d 100644
--- 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
}
}
]
diff --git a/dolphinscheduler-ui-next/src/router/modules/monitor.ts b/dolphinscheduler-ui-next/src/router/modules/monitor.ts
index 64db6ea..d42998c 100644
--- 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
}
}
]
diff --git a/dolphinscheduler-ui-next/src/router/modules/projects.ts b/dolphinscheduler-ui-next/src/router/modules/projects.ts
index 1e2155f..5fcbba2 100644
--- 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
}
}
]
diff --git a/dolphinscheduler-ui-next/src/router/modules/resources.ts b/dolphinscheduler-ui-next/src/router/modules/resources.ts
index 38147ad..6fab2c2 100644
--- 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
}
},
{
diff --git a/dolphinscheduler-ui-next/src/router/modules/security.ts b/dolphinscheduler-ui-next/src/router/modules/security.ts
index 359e932..99fc6ae 100644
--- 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
}
}
]
diff --git a/dolphinscheduler-ui-next/src/store/menu/menu.ts b/dolphinscheduler-ui-next/src/store/menu/menu.ts
index 3f5e4cc..e1beed3 100644
--- 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
+ },
}
})
diff --git a/dolphinscheduler-ui-next/src/store/menu/types.ts b/dolphinscheduler-ui-next/src/store/menu/types.ts
index 48cad64..0bc12cd 100644
--- 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