[fix-13504] Display the current project name on the left corner of the page (#13572)

Co-authored-by: xiecao <haolong.zhl@alibaba-inc.com>

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

@@ -15,16 +15,18 @@
  * limitations under the License.
  */
 
-import { useRouter } from 'vue-router'
+import {LocationQueryRaw, useRouter} from 'vue-router'
 import type { Router } from 'vue-router'
 import { MenuOption } from 'naive-ui'
 
 export function useMenuClick() {
   const router: Router = useRouter()
 
-  const handleMenuClick = (key: string, unused: MenuOption) => {
+  const handleMenuClick = (key: string, menuOption: MenuOption) => {
-    // console.log(key, item)
+    router.push({
-    router.push({ path: `${key}` })
+      path: `${key}`,
+      query: menuOption.payload? menuOption.payload as LocationQueryRaw: {}
+    })
   }
 
   return {

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

@@ -77,7 +77,6 @@ const Content = defineComponent({
           }
 
           getSideMenu(state)
-
           const currentSide = (
             route.meta.activeSide
               ? route.meta.activeSide

dolphinscheduler-ui/src/layouts/content/use-dataList.ts

@@ -89,6 +89,7 @@ export function useDataList() {
 
   const changeMenuOption = (state: any) => {
     const projectCode = route.params.projectCode || ''
+    const projectName = route.query.projectName || ''
     state.menuOptions = [
       {
         label: () => h(NEllipsis, null, { default: () => t('menu.home') }),
@@ -101,9 +102,10 @@ export function useDataList() {
         icon: renderIcon(ProfileOutlined),
         children: [
           {
-            label: t('menu.project_overview'),
+            label: t('menu.project_overview') + (projectName? `[${projectName}]` : ''),
             key: `/projects/${projectCode}`,
-            icon: renderIcon(FundProjectionScreenOutlined)
+            icon: renderIcon(FundProjectionScreenOutlined),
+            payload: {projectName:projectName}
           },
           {
             label: t('menu.workflow'),
@@ -112,15 +114,18 @@ export function useDataList() {
             children: [
               {
                 label: t('menu.workflow_relation'),
-                key: `/projects/${projectCode}/workflow/relation`
+                key: `/projects/${projectCode}/workflow/relation`,
+                payload: {projectName:projectName}
               },
               {
                 label: t('menu.workflow_definition'),
-                key: `/projects/${projectCode}/workflow-definition`
+                key: `/projects/${projectCode}/workflow-definition`,
+                payload: {projectName:projectName}
               },
               {
                 label: t('menu.workflow_instance'),
-                key: `/projects/${projectCode}/workflow/instances`
+                key: `/projects/${projectCode}/workflow/instances`,
+                payload: {projectName:projectName}
               }
             ]
           },
@@ -131,11 +136,13 @@ export function useDataList() {
             children: [
               {
                 label: t('menu.task_definition'),
-                key: `/projects/${projectCode}/task/definitions`
+                key: `/projects/${projectCode}/task/definitions`,
+                payload: {projectName:projectName}
               },
               {
                 label: t('menu.task_instance'),
-                key: `/projects/${projectCode}/task/instances`
+                key: `/projects/${projectCode}/task/instances`,
+                payload: {projectName:projectName}
               }
             ]
           }

dolphinscheduler-ui/src/views/projects/list/use-table.ts

@@ -82,7 +82,10 @@ export function useTable() {
             ButtonLink,
             {
               onClick: () => {
-                router.push({ path: `/projects/${row.code}` })
+                router.push({
+                  path: `/projects/${row.code}`,
+                  query: {projectName: row.name}
+                })
               }
             },
             {