From d487cd8b0248954f02d75c5ece8d4a2f41b3c950 Mon Sep 17 00:00:00 2001
From: Shiwen Cheng <chengshiwen0103@gmail.com>
Date: Mon, 2 Aug 2021 11:33:45 +0800
Subject: [PATCH] [1.3.7-prepare][Improvement-5567][UI] Add project id in web
 ui url for sharing and project name in project page #5568 (#5913)

---
 .../js/conf/home/pages/dag/_source/dag.vue    |  4 +-
 .../pages/dag/_source/formModel/formModel.vue |  4 +-
 .../conf/home/pages/dag/definitionDetails.vue |  3 +-
 .../src/js/conf/home/pages/dag/index.vue      |  3 +-
 .../conf/home/pages/dag/instanceDetails.vue   |  3 +-
 .../pages/_source/taskRecordList/index.vue    |  6 ++-
 .../definition/pages/list/_source/list.vue    | 10 ++--
 .../pages/definition/pages/list/index.vue     |  8 +++-
 .../pages/definition/pages/tree/index.vue     |  9 +++-
 .../pages/definition/timing/_source/list.vue  |  7 ++-
 .../pages/index/_source/defineUserCount.vue   |  6 ++-
 .../pages/index/_source/processStateCount.vue |  7 ++-
 .../pages/index/_source/taskCtatusCount.vue   |  7 ++-
 .../home/pages/projects/pages/index/index.vue | 10 ++--
 .../pages/instance/pages/gantt/index.vue      |  2 +
 .../instance/pages/list/_source/list.vue      |  8 ++--
 .../pages/instance/pages/list/index.vue       |  5 ++
 .../projects/pages/list/_source/list.vue      |  9 ++--
 .../pages/taskInstance/_source/list.vue       |  4 +-
 .../projects/pages/taskInstance/index.vue     | 10 ++--
 .../src/js/conf/home/router/index.js          | 46 ++++++++++---------
 .../src/js/conf/home/store/dag/mutations.js   |  3 ++
 .../src/js/conf/home/store/dag/state.js       |  7 ++-
 .../js/conf/home/store/projects/actions.js    | 12 +++++
 .../secondaryMenu/secondaryMenu.vue           |  9 +++-
 .../src/js/module/mixin/switchProject.js      | 33 +++++++++++++
 .../src/js/module/project/router.js           | 38 +++++++++++++++
 27 files changed, 214 insertions(+), 59 deletions(-)
 create mode 100644 dolphinscheduler-ui/src/js/module/mixin/switchProject.js
 create mode 100644 dolphinscheduler-ui/src/js/module/project/router.js

diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue
index dbba0b0ff4..d1cc0372de 100755
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue
@@ -366,7 +366,7 @@
                   // source @/conf/home/pages/dag/_source/editAffirmModel/index.js
                   if (sourceType !== 'affirm') {
                     // Jump process definition
-                    this.$router.push({ name: 'projects-definition-list' })
+                    this.$router.push({ name: 'projects-definition-list', params: { projectId: this.projectId } })
                   }
                   resolve()
                 }).catch(e => {
@@ -652,7 +652,7 @@
       }
     },
     computed: {
-      ...mapState('dag', ['tasks', 'locations', 'connects', 'isEditDag', 'name'])
+      ...mapState('dag', ['projectId', 'tasks', 'locations', 'connects', 'isEditDag', 'name'])
     },
     components: {}
   }
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue
index 24a910a751..c7377596ec 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue
@@ -268,7 +268,7 @@
 </template>
 <script>
   import _ from 'lodash'
-  import { mapActions } from 'vuex'
+  import { mapActions, mapState } from 'vuex'
   import mLog from './log'
   import mMr from './tasks/mr'
   import mSql from './tasks/sql'
@@ -394,6 +394,7 @@
       _seeHistory () {
         this.self.$router.push({
           name: 'task-instance',
+          params: { projectId: this.projectId },
           query: {
             processInstanceId: this.self.$route.params.id,
             taskName: this.backfillItem.name
@@ -686,6 +687,7 @@
     destroyed () {
     },
     computed: {
+      ...mapState('dag', ['projectId']),
       /**
        * Child workflow entry show/hide
        */
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/definitionDetails.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/definitionDetails.vue
index 42c6b12234..dd5e0d51cd 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/definitionDetails.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/definitionDetails.vue
@@ -25,6 +25,7 @@
   import mSpin from '@/module/components/spin/spin'
   import Affirm from './_source/jumpAffirm'
   import disabledState from '@/module/mixin/disabledState'
+  import switchProject from '@/module/mixin/switchProject'
   import { mapActions, mapMutations } from 'vuex'
 
   export default {
@@ -37,7 +38,7 @@
         releaseState: ''
       }
     },
-    mixins: [disabledState],
+    mixins: [disabledState, switchProject],
     props: {},
     methods: {
       ...mapMutations('dag', ['resetParams', 'setIsDetails']),
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/index.vue
index 078c5e695c..e2f950bb20 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/index.vue
@@ -26,6 +26,7 @@
   import mSpin from '@/module/components/spin/spin'
   import Affirm from './_source/jumpAffirm'
   import disabledState from '@/module/mixin/disabledState'
+  import switchProject from '@/module/mixin/switchProject'
 
   export default {
     name: 'create-index',
@@ -36,7 +37,7 @@
       }
     },
     // mixins
-    mixins: [disabledState],
+    mixins: [disabledState, switchProject],
     props: {},
     methods: {
       ...mapMutations('dag', ['resetParams']),
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/instanceDetails.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/instanceDetails.vue
index f82cea414a..046079694d 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/instanceDetails.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/instanceDetails.vue
@@ -30,6 +30,7 @@
   import mStartingParam from './_source/startingParam'
   import Affirm from './_source/jumpAffirm'
   import disabledState from '@/module/mixin/disabledState'
+  import switchProject from '@/module/mixin/switchProject'
 
   export default {
     name: 'instance-details',
@@ -39,7 +40,7 @@
         isLoading: true
       }
     },
-    mixins: [disabledState],
+    mixins: [disabledState, switchProject],
     props: {},
     methods: {
       ...mapMutations('dag', ['setIsDetails', 'resetParams']),
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/index.vue
index 08a964ff55..2c22eeb7f4 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/index.vue
@@ -42,6 +42,7 @@
   import mSpin from '@/module/components/spin/spin'
   import mNoData from '@/module/components/noData/noData'
   import listUrlParamHandle from '@/module/mixin/listUrlParamHandle'
+  import switchProject from '@/module/mixin/switchProject'
   import mSecondaryMenu from '@/module/components/secondaryMenu/secondaryMenu'
   import mListConstruction from '@/module/components/listConstruction/listConstruction'
 
@@ -66,7 +67,7 @@
         }
       }
     },
-    mixins: [listUrlParamHandle],
+    mixins: [listUrlParamHandle, switchProject],
     props: {
       config: String
     },
@@ -94,6 +95,9 @@
       },
       _onUpdate () {
         this._debounceGET()
+      },
+      _updateProject () {
+        this._debounceGET()
       }
     },
     watch: {
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue
index 7bc400a3f2..2792e183ad 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue
@@ -59,7 +59,7 @@
           </td>
           <td style="min-width: 200px;max-width: 300px;padding-right: 10px;">
             <span class="ellipsis">
-              <router-link :to="{ path: '/projects/definition/list/' + item.id}" tag="a" class="links" :title="item.name">
+              <router-link :to="{ path: `/projects/${projectId}/definition/list/${item.id}` }" tag="a" class="links" :title="item.name">
                 {{item.name}}
               </router-link>
             </span>
@@ -148,6 +148,7 @@
   import mTiming from './timing'
   import { mapActions } from 'vuex'
   import { publishStatus } from '@/conf/home/pages/dag/_source/config'
+  import switchProject from '@/module/mixin/switchProject'
 
   export default {
     name: 'definition-list',
@@ -163,6 +164,7 @@
       pageNo: Number,
       pageSize: Number
     },
+    mixins: [switchProject],
     methods: {
       ...mapActions('dag', ['editProcessState', 'getStartCheck', 'getReceiver', 'deleteDefinition', 'batchDeleteDefinition','exportDefinition','copyProcess']),
       ...mapActions('security', ['getWorkerGroupsAll']),
@@ -170,7 +172,7 @@
         return _.filter(publishStatus, v => v.code === code)[0].desc
       },
       _treeView (item) {
-        this.$router.push({ path: `/projects/definition/tree/${item.id}` })
+        this.$router.push({ path: `/projects/${this.projectId}/definition/tree/${item.id}` })
       },
       /**
        * Start
@@ -257,7 +259,7 @@
        * Timing manage
        */
       _timingManage (item) {
-        this.$router.push({ path: `/projects/definition/list/timing/${item.id}` })
+        this.$router.push({ path: `/projects/${this.projectId}/definition/list/timing/${item.id}` })
       },
       /**
        * Close the delete layer
@@ -296,7 +298,7 @@
        * edit
        */
       _edit (item) {
-        this.$router.push({ path: `/projects/definition/list/${item.id}` })
+        this.$router.push({ path: `/projects/${this.projectId}/definition/list/${item.id}` })
       },
       /**
        * Offline
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/index.vue
index eb5d3352df..491735b633 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/index.vue
@@ -20,7 +20,7 @@
       <template slot="conditions">
         <m-conditions @on-conditions="_onConditions">
           <template slot="button-group">
-            <x-button type="ghost" size="small"  @click="() => this.$router.push({name: 'definition-create'})">{{$t('Create process')}}</x-button>
+            <x-button type="ghost" size="small"  @click="() => this.$router.push({name: 'definition-create', params: { projectId }})">{{$t('Create process')}}</x-button>
             <x-button type="ghost" size="small"  @click="_uploading">{{$t('Import process')}}</x-button>
           </template>
         </m-conditions>
@@ -48,6 +48,7 @@
   import localStore from '@/module/util/localStorage'
   import mNoData from '@/module/components/noData/noData'
   import listUrlParamHandle from '@/module/mixin/listUrlParamHandle'
+  import switchProject from '@/module/mixin/switchProject'
   import mConditions from '@/module/components/conditions/conditions'
   import mSecondaryMenu from '@/module/components/secondaryMenu/secondaryMenu'
   import mListConstruction from '@/module/components/listConstruction/listConstruction'
@@ -69,7 +70,7 @@
         isLeft: true
       }
     },
-    mixins: [listUrlParamHandle],
+    mixins: [listUrlParamHandle, switchProject],
     props: {
     },
     methods: {
@@ -126,6 +127,9 @@
         this.searchParams.pageNo = 1
         this.searchParams.searchVal = ''
         this._debounceGET()
+      },
+      _updateProject () {
+        this._debounceGET()
       }
     },
     watch: {
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/tree/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/tree/index.vue
index 4bc102dc24..d723716008 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/tree/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/tree/index.vue
@@ -79,6 +79,7 @@
   import { tasksType, tasksState } from '@/conf/home/pages/dag/_source/config'
   import mSecondaryMenu from '@/module/components/secondaryMenu/secondaryMenu'
   import mListConstruction from '@/module/components/listConstruction/listConstruction'
+  import switchProject from '@/module/mixin/switchProject'
 
   export default {
     name: 'tree-view-index-index',
@@ -99,6 +100,7 @@
       }
     },
     props: {},
+    mixins: [switchProject],
     methods: {
       ...mapActions('dag', ['getViewTree']),
       /**
@@ -162,7 +164,7 @@
         if (id !== idsArr[0]) {
           query = { subProcessIds: ids.join(',') }
         }
-        this.$router.push({ path: `/projects/definition/tree/${id}`, query: query })
+        this.$router.push({ path: `/projects/${this.projectId}/definition/tree/${id}`, query: query })
       },
       /**
        * Subprocess processing
@@ -178,11 +180,14 @@
         } else {
           subProcessIds.push(this.$route.params.id)
         }
-        this.$router.push({ path: `/projects/definition/tree/${subProcessId}`, query: { subProcessIds: subProcessIds.join(',') } })
+        this.$router.push({ path: `/projects/${this.projectId}/definition/tree/${subProcessId}`, query: { subProcessIds: subProcessIds.join(',') } })
       },
       _onChangeSelect (o) {
         this.limit = o.value
         this._getViewTree()
+      },
+      _updateProject () {
+        this._getViewTree()
       }
     },
     watch: {
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/timing/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/timing/_source/list.vue
index 7b0b2c3062..3cbded1cb8 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/timing/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/timing/_source/list.vue
@@ -156,6 +156,7 @@
   import mSpin from '@/module/components/spin/spin'
   import mTiming from '../../pages/list/_source/timing'
   import mNoData from '@/module/components/noData/noData'
+  import switchProject from '@/module/mixin/switchProject'
   import { publishStatus } from '@/conf/home/pages/dag/_source/config'
 
   export default {
@@ -171,6 +172,7 @@
     },
     props: {
     },
+    mixins: [switchProject],
     methods: {
       ...mapActions('dag', ['getScheduleList', 'scheduleOffline', 'scheduleOnline', 'getReceiver','deleteTiming']),
       /**
@@ -182,7 +184,7 @@
         }).then(res => {
           this.$refs[`poptip-delete-${i}`][0].doClose()
           this.$message.success(res.msg)
-          this.$router.push({ name: 'projects-definition-list' })
+          this.$router.push({ name: 'projects-definition-list', params: { projectId: this.projectId } })
         }).catch(e => {
           this.$refs[`poptip-delete-${i}`][0].doClose()
           this.$message.error(e.msg || '')
@@ -211,6 +213,9 @@
         this.pageSize = val
         this._getScheduleList()
       },
+      _updateProject () {
+        this._getScheduleList()
+      },
       /**
        * Inquire list
        */
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/defineUserCount.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/defineUserCount.vue
index d509d50cf4..df8924aab9 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/defineUserCount.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/defineUserCount.vue
@@ -28,7 +28,7 @@
 </template>
 <script>
   import _ from 'lodash'
-  import { mapActions } from 'vuex'
+  import { mapActions, mapState } from 'vuex'
   import { bar } from './chartConfig'
   import Chart from '@/module/ana-charts'
   import mNoData from '@/module/components/noData/noData'
@@ -61,6 +61,7 @@
           myChart.echart.on('click', e => {
             this.$router.push({
               name: 'projects-definition-list',
+              params: { projectId: this.projectId },
               query: {
                 userId: e.name.split(',')[1]
               }
@@ -83,6 +84,9 @@
     },
     mounted () {
     },
+    computed: {
+      ...mapState('dag', ['projectId'])
+    },
     components: { mNoData }
   }
 </script>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/processStateCount.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/processStateCount.vue
index 974d57ff95..b8736137eb 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/processStateCount.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/processStateCount.vue
@@ -49,7 +49,7 @@
 </template>
 <script>
   import _ from 'lodash'
-  import { mapActions } from 'vuex'
+  import { mapActions, mapState } from 'vuex'
   import { pie } from './chartConfig'
   import Chart from '@/module/ana-charts'
   import echarts from 'echarts'
@@ -74,6 +74,7 @@
       _goProcess (name) {
         this.$router.push({
           name: 'projects-instance-list',
+          params: { projectId: this.projectId },
           query: {
             stateType: _.find(stateType, ['label', name])['code'],
             startDate: this.searchParams.startDate,
@@ -136,7 +137,9 @@
     },
     destroyed () {
     },
-    computed: {},
+    computed: {
+      ...mapState('dag', ['projectId'])
+    },
     components: { mNoData }
   }
 </script>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/taskCtatusCount.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/taskCtatusCount.vue
index 60e9413b2e..9d4f5282ef 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/taskCtatusCount.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/taskCtatusCount.vue
@@ -51,7 +51,7 @@
 </template>
 <script>
   import _ from 'lodash'
-  import { mapActions } from 'vuex'
+  import { mapActions, mapState } from 'vuex'
   import { pie } from './chartConfig'
   import Chart from '@/module/ana-charts'
   import echarts from 'echarts'
@@ -77,6 +77,7 @@
       _goTask (name) {
         this.$router.push({
           name: 'task-instance',
+          params: { projectId: this.projectId },
           query: {
             stateType: _.find(stateType, ['label', name])['code'],
             startDate: this.searchParams.startDate,
@@ -141,7 +142,9 @@
     },
     destroyed () {
     },
-    computed: {},
+    computed: {
+      ...mapState('dag', ['projectId'])
+    },
     components: { mNoData }
   }
 </script>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/index/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/index/index.vue
index 2b5cbbc017..b3dc68bd8b 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/index/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/index/index.vue
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 <template>
-  <m-list-construction :title="searchParams.projectId ? $t('Project Home') : $t('Home')">
+  <m-list-construction :title="searchParams.projectId ? `${$t('Project Home')} - ${projectName}` : $t('Home')">
     <template slot="content">
       <div class="perject-home-content">
         <div class="time-model">
@@ -71,7 +71,7 @@
   import mTaskCtatusCount from './_source/taskCtatusCount'
   import mProcessStateCount from './_source/processStateCount'
   import mQueueCount from './_source/queueCount'
-  import localStore from '@/module/util/localStorage'
+  import switchProject from '@/module/mixin/switchProject'
   import mSecondaryMenu from '@/module/components/secondaryMenu/secondaryMenu'
   import mListConstruction from '@/module/components/listConstruction/listConstruction'
 
@@ -89,14 +89,18 @@
     props: {
       id: Number
     },
+    mixins: [switchProject],
     methods: {
       _datepicker (val) {
         this.searchParams.startDate = val[0]
         this.searchParams.endDate = val[1]
+      },
+      _updateProject () {
+        this.searchParams.projectId = this.id === 0 ? 0 : this.projectId
       }
     },
     created () {
-      this.searchParams.projectId = this.id === 0 ? 0 : localStore.getItem('projectId')
+      this.searchParams.projectId = this.id === 0 ? 0 : this.projectId
       this.searchParams.startDate = dayjs().format('YYYY-MM-DD 00:00:00')
       this.searchParams.endDate = dayjs().format('YYYY-MM-DD HH:mm:ss')
     },
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/gantt/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/gantt/index.vue
index e2e7d9b000..a18a3ab190 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/gantt/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/gantt/index.vue
@@ -50,6 +50,7 @@
   import mConditions from '@/module/components/conditions/conditions'
   import mSecondaryMenu from '@/module/components/secondaryMenu/secondaryMenu'
   import mListConstruction from '@/module/components/listConstruction/listConstruction'
+  import switchProject from '@/module/mixin/switchProject'
 
   export default {
     name: 'instance-gantt-index',
@@ -68,6 +69,7 @@
       }
     },
     props: {},
+    mixins: [switchProject],
     methods: {
       ...mapActions('dag', ['getViewGantt']),
       /**
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/list.vue
index 3dab95e476..87ee5cbe75 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/list.vue
@@ -68,7 +68,7 @@
             <span>{{parseInt(pageNo === 1 ? ($index + 1) : (($index + 1) + (pageSize * (pageNo - 1))))}}</span>
           </td>
           <td style="min-width: 200px;max-width: 300px;padding-right: 10px;">
-            <span class="ellipsis" style="padding-left: 4px;"><router-link :to="{ path: '/projects/instance/list/' + item.id , query:{id: item.processDefinitionId}}" tag="a" class="links" :title="item.name">{{item.name}}</router-link></span>
+            <span class="ellipsis" style="padding-left: 4px;"><router-link :to="{ path: `/projects/${projectId}/instance/list/${item.id}` , query:{id: item.processDefinitionId}}" tag="a" class="links" :title="item.name">{{item.name}}</router-link></span>
           </td>
           <td>
             <span v-html="_rtState(item.state)" style="cursor: pointer;"></span>
@@ -302,6 +302,7 @@
   import _ from 'lodash'
   import { mapActions } from 'vuex'
   import { tasksState, runningType } from '@/conf/home/pages/dag/_source/config'
+  import switchProject from '@/module/mixin/switchProject'
 
   export default {
     name: 'list',
@@ -320,6 +321,7 @@
       pageNo: Number,
       pageSize: Number
     },
+    mixins: [switchProject],
     methods: {
       ...mapActions('dag', ['editExecutorsState', 'deleteInstance', 'batchDeleteInstance']),
       /**
@@ -372,7 +374,7 @@
        * edit
        */
       _reEdit (item) {
-        this.$router.push({ path: `/projects/instance/list/${item.id}` })
+        this.$router.push({ path: `/projects/${this.projectId}/instance/list/${item.id}` })
       },
       /**
        * Rerun
@@ -513,7 +515,7 @@
         }
       },
       _gantt (item) {
-        this.$router.push({ path: `/projects/instance/gantt/${item.id}` })
+        this.$router.push({ path: `/projects/${this.projectId}/instance/gantt/${item.id}` })
       },
 
       _topCheckBoxClick (is) {
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/index.vue
index be80c3b002..0c9b028073 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/index.vue
@@ -43,6 +43,7 @@
   import mSpin from '@/module/components/spin/spin'
   import localStore from '@/module/util/localStorage'
   import { setUrlParams } from '@/module/util/routerUtil'
+  import switchProject from '@/module/mixin/switchProject'
   import mNoData from '@/module/components/noData/noData'
   import mSecondaryMenu from '@/module/components/secondaryMenu/secondaryMenu'
   import mListConstruction from '@/module/components/listConstruction/listConstruction'
@@ -81,6 +82,7 @@
       }
     },
     props: {},
+    mixins: [switchProject],
     methods: {
       ...mapActions('dag', ['getProcessInstance']),
       /**
@@ -129,6 +131,9 @@
       _onUpdate () {
         this._debounceGET()
       },
+      _updateProject () {
+        this._debounceGET()
+      },
       /**
        * Routing changes
        */
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/list.vue
index 8acee8e453..5947eb7319 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/list.vue
@@ -132,12 +132,13 @@
     },
     methods: {
       ...mapActions('projects', ['deleteProjects']),
-      ...mapMutations('dag', ['setProjectName']),
+      ...mapMutations('dag', ['setProjectId', 'setProjectName']),
       _switchProjects (item) {
+        this.setProjectId(item.id)
         this.setProjectName(item.name)
-        localStore.setItem('projectName', `${item.name}`)
-        localStore.setItem('projectId', `${item.id}`)
-        this.$router.push({ path: `/projects/index` })
+        localStore.setItem('projectId', item.id)
+        localStore.setItem('projectName', item.name)
+        this.$router.push({ path: `/projects/${item.id}/index` })
       },
       _closeDelete (i) {
         this.$refs[`poptip-${i}`][0].doClose()
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/_source/list.vue
index 60dd068ad9..86416df257 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/_source/list.vue
@@ -111,6 +111,7 @@
   import Permissions from '@/module/permissions'
   import mLog from '@/conf/home/pages/dag/_source/formModel/log'
   import { tasksState } from '@/conf/home/pages/dag/_source/config'
+  import switchProject from '@/module/mixin/switchProject'
 
   export default {
     name: 'list',
@@ -126,6 +127,7 @@
       pageNo: Number,
       pageSize: Number
     },
+    mixins: [switchProject],
     methods: {
       _rtState (code) {
         let o = tasksState[code]
@@ -158,7 +160,7 @@
         })
       },
       _go (item) {
-        this.$router.push({ path: `/projects/instance/list/${item.processInstanceId}` })
+        this.$router.push({ path: `/projects/${this.projectId}/instance/list/${item.processInstanceId}` })
       },
     },
     watch: {
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/index.vue
index 2c07918d4d..f3a88c8cf9 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/index.vue
@@ -43,6 +43,7 @@
   import mSpin from '@/module/components/spin/spin'
   import mNoData from '@/module/components/noData/noData'
   import listUrlParamHandle from '@/module/mixin/listUrlParamHandle'
+  import switchProject from '@/module/mixin/switchProject'
   import mSecondaryMenu from '@/module/components/secondaryMenu/secondaryMenu'
   import mListConstruction from '@/module/components/listConstruction/listConstruction'
   import mInstanceConditions from '@/conf/home/pages/projects/pages/_source/instanceConditions'
@@ -77,7 +78,7 @@
         isLeft: true
       }
     },
-    mixins: [listUrlParamHandle],
+    mixins: [listUrlParamHandle, switchProject],
     props: {},
     methods: {
       ...mapActions('dag', ['getTaskInstanceList']),
@@ -104,7 +105,7 @@
       _getList (flag) {
         this.isLoading = !flag
         if(this.searchParams.pageNo == undefined) {
-          this.$router.push({ path: `/projects/index` })
+          this.$router.push({ path: `/projects/${this.projectId}/index` })
           return false
         }
         this.getTaskInstanceList(this.searchParams).then(res => {
@@ -130,7 +131,10 @@
       }, 100, {
         'leading': false,
         'trailing': true
-      })
+      }),
+      _updateProject () {
+        this._debounceGET()
+      }
     },
     watch: {
       // router
diff --git a/dolphinscheduler-ui/src/js/conf/home/router/index.js b/dolphinscheduler-ui/src/js/conf/home/router/index.js
index b4236f3685..e7196fd505 100644
--- a/dolphinscheduler-ui/src/js/conf/home/router/index.js
+++ b/dolphinscheduler-ui/src/js/conf/home/router/index.js
@@ -17,6 +17,7 @@
 
 import Vue from 'vue'
 import i18n from '@/module/i18n/index.js'
+import { beforeProjectRoute } from '@/module/project/router'
 import Router from 'vue-router'
 
 Vue.use(Router)
@@ -48,15 +49,10 @@ const router = new Router({
       redirect: {
         name: 'projects-list'
       },
+      beforeEnter: (to, from, next) => {
+        beforeProjectRoute(to, from, next)
+      },
       children: [
-        {
-          path: '/projects/index',
-          name: 'projects-index',
-          component: resolve => require(['../pages/projects/pages/index/index'], resolve),
-          meta: {
-            title: `${i18n.$t('Project Home')}`
-          }
-        },
         {
           path: '/projects/list',
           name: 'projects-list',
@@ -66,7 +62,15 @@ const router = new Router({
           }
         },
         {
-          path: '/projects/definition',
+          path: '/projects/:projectId/index',
+          name: 'projects-index',
+          component: resolve => require(['../pages/projects/pages/index/index'], resolve),
+          meta: {
+            title: `${i18n.$t('Project Home')}`
+          }
+        },
+        {
+          path: '/projects/:projectId/definition',
           name: 'definition',
           component: resolve => require(['../pages/projects/pages/definition/index'], resolve),
           meta: {
@@ -77,7 +81,7 @@ const router = new Router({
           },
           children: [
             {
-              path: '/projects/definition/list',
+              path: '/projects/:projectId/definition/list',
               name: 'projects-definition-list',
               component: resolve => require(['../pages/projects/pages/definition/pages/list/index'], resolve),
               meta: {
@@ -85,7 +89,7 @@ const router = new Router({
               }
             },
             {
-              path: '/projects/definition/list/:id',
+              path: '/projects/:projectId/definition/list/:id',
               name: 'projects-definition-details',
               component: resolve => require(['../pages/projects/pages/definition/pages/details/index'], resolve),
               meta: {
@@ -93,7 +97,7 @@ const router = new Router({
               }
             },
             {
-              path: '/projects/definition/create',
+              path: '/projects/:projectId/definition/create',
               name: 'definition-create',
               component: resolve => require(['../pages/projects/pages/definition/pages/create/index'], resolve),
               meta: {
@@ -101,7 +105,7 @@ const router = new Router({
               }
             },
             {
-              path: '/projects/definition/tree/:id',
+              path: '/projects/:projectId/definition/tree/:id',
               name: 'definition-tree-view-index',
               component: resolve => require(['../pages/projects/pages/definition/pages/tree/index'], resolve),
               meta: {
@@ -109,7 +113,7 @@ const router = new Router({
               }
             },
             {
-              path: '/projects/definition/list/timing/:id',
+              path: '/projects/:projectId/definition/list/timing/:id',
               name: 'definition-timing-details',
               component: resolve => require(['../pages/projects/pages/definition/timing/index'], resolve),
               meta: {
@@ -119,7 +123,7 @@ const router = new Router({
           ]
         },
         {
-          path: '/projects/instance',
+          path: '/projects/:projectId/instance',
           name: 'instance',
           component: resolve => require(['../pages/projects/pages/instance/index'], resolve),
           meta: {
@@ -130,7 +134,7 @@ const router = new Router({
           },
           children: [
             {
-              path: '/projects/instance/list',
+              path: '/projects/:projectId/instance/list',
               name: 'projects-instance-list',
               component: resolve => require(['../pages/projects/pages/instance/pages/list/index'], resolve),
               meta: {
@@ -138,7 +142,7 @@ const router = new Router({
               }
             },
             {
-              path: '/projects/instance/list/:id',
+              path: '/projects/:projectId/instance/list/:id',
               name: 'projects-instance-details',
               component: resolve => require(['../pages/projects/pages/instance/pages/details/index'], resolve),
               meta: {
@@ -146,7 +150,7 @@ const router = new Router({
               }
             },
             {
-              path: '/projects/instance/gantt/:id',
+              path: '/projects/:projectId/instance/gantt/:id',
               name: 'instance-gantt-index',
               component: resolve => require(['../pages/projects/pages/instance/pages/gantt/index'], resolve),
               meta: {
@@ -156,7 +160,7 @@ const router = new Router({
           ]
         },
         {
-          path: '/projects/task-instance',
+          path: '/projects/:projectId/task-instance',
           name: 'task-instance',
           component: resolve => require(['../pages/projects/pages/taskInstance'], resolve),
           meta: {
@@ -165,7 +169,7 @@ const router = new Router({
 
         },
         {
-          path: '/projects/task-record',
+          path: '/projects/:projectId/task-record',
           name: 'task-record',
           component: resolve => require(['../pages/projects/pages/taskRecord'], resolve),
           meta: {
@@ -173,7 +177,7 @@ const router = new Router({
           }
         },
         {
-          path: '/projects/history-task-record',
+          path: '/projects/:projectId/history-task-record',
           name: 'history-task-record',
           component: resolve => require(['../pages/projects/pages/historyTaskRecord'], resolve),
           meta: {
diff --git a/dolphinscheduler-ui/src/js/conf/home/store/dag/mutations.js b/dolphinscheduler-ui/src/js/conf/home/store/dag/mutations.js
index 02d466870a..2fda618e47 100755
--- a/dolphinscheduler-ui/src/js/conf/home/store/dag/mutations.js
+++ b/dolphinscheduler-ui/src/js/conf/home/store/dag/mutations.js
@@ -18,6 +18,9 @@
 import _ from 'lodash'
 
 export default {
+  setProjectId (state, payload) {
+    state.projectId = payload
+  },
   setProjectName (state, payload) {
     state.projectName = payload
   },
diff --git a/dolphinscheduler-ui/src/js/conf/home/store/dag/state.js b/dolphinscheduler-ui/src/js/conf/home/store/dag/state.js
index b2aad5ec3a..04599531ce 100644
--- a/dolphinscheduler-ui/src/js/conf/home/store/dag/state.js
+++ b/dolphinscheduler-ui/src/js/conf/home/store/dag/state.js
@@ -17,7 +17,8 @@
 
 import localStore from '@/module/util/localStorage'
 
-// Get the name of the item currently clicked
+// Get the project currently clicked
+const projectId = localStore.getItem('projectId')
 const projectName = localStore.getItem('projectName')
 
 export default {
@@ -43,7 +44,9 @@ export default {
   runFlag: '',
   // Whether to edit
   isEditDag: false,
-  // Current project
+  // Current project id
+  projectId: projectId,
+  // Current project name
   projectName: projectName || '',
   // Whether to update the process definition
   syncDefine: true,
diff --git a/dolphinscheduler-ui/src/js/conf/home/store/projects/actions.js b/dolphinscheduler-ui/src/js/conf/home/store/projects/actions.js
index 43273de9e2..659506878a 100644
--- a/dolphinscheduler-ui/src/js/conf/home/store/projects/actions.js
+++ b/dolphinscheduler-ui/src/js/conf/home/store/projects/actions.js
@@ -30,6 +30,18 @@ export default {
       })
     })
   },
+  /**
+   * Get project by id
+   */
+  getProjectById ({ state }, payload) {
+    return new Promise((resolve, reject) => {
+      io.get('projects/query-by-id', payload, res => {
+        resolve(res.data)
+      }).catch(e => {
+        reject(e)
+      })
+    })
+  },
   /**
    * Create project
    */
diff --git a/dolphinscheduler-ui/src/js/module/components/secondaryMenu/secondaryMenu.vue b/dolphinscheduler-ui/src/js/module/components/secondaryMenu/secondaryMenu.vue
index 36050bb79d..b75019e350 100644
--- a/dolphinscheduler-ui/src/js/module/components/secondaryMenu/secondaryMenu.vue
+++ b/dolphinscheduler-ui/src/js/module/components/secondaryMenu/secondaryMenu.vue
@@ -27,7 +27,7 @@
             <div class="name" @click="_toggleSubMenu(item)">
               <a href="javascript:">
                 <em class="fa icon" :class="item.icon"></em>
-                <span>{{item.name}}</span>
+                <span>{{item.name}}{{ item.path === 'projects-index' ? ` - ${projectName}` : '' }}</span>
                 <em class="fa angle" :class="item.isOpen ? 'ans-icon-arrow-down' : 'ans-icon-arrow-right'" v-if="item.children.length"></em>
               </a>
             </div>
@@ -54,6 +54,7 @@
   </div>
 </template>
 <script>
+  import { mapState } from 'vuex'
   import menu from './_source/menu'
   import store from '@/conf/home/store'
   export default {
@@ -93,6 +94,9 @@
       }
     },
     mounted () {
+    },
+    computed: {
+      ...mapState('dag', ['projectName'])
     }
   }
 </script>
@@ -142,6 +146,9 @@
           display: block;
           position: relative;
           padding-left: 10px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
           >.icon {
             vertical-align: middle;
             font-size: 15px;
diff --git a/dolphinscheduler-ui/src/js/module/mixin/switchProject.js b/dolphinscheduler-ui/src/js/module/mixin/switchProject.js
new file mode 100644
index 0000000000..9e476af2aa
--- /dev/null
+++ b/dolphinscheduler-ui/src/js/module/mixin/switchProject.js
@@ -0,0 +1,33 @@
+/*
+ * 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.
+ */
+
+import { mapState } from 'vuex'
+import { beforeProjectRoute } from '@/module/project/router'
+
+export default {
+  computed: {
+    ...mapState('dag', ['projectId', 'projectName'])
+  },
+  watch: {
+    projectId () {
+      typeof this._updateProject === 'function' && this._updateProject()
+    }
+  },
+  beforeRouteUpdate (to, from, next) {
+    beforeProjectRoute(to, from, next)
+  }
+}
diff --git a/dolphinscheduler-ui/src/js/module/project/router.js b/dolphinscheduler-ui/src/js/module/project/router.js
new file mode 100644
index 0000000000..333d386cf6
--- /dev/null
+++ b/dolphinscheduler-ui/src/js/module/project/router.js
@@ -0,0 +1,38 @@
+/*
+ * 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.
+ */
+
+import store from '@/conf/home/store'
+import localStore from '@/module/util/localStorage'
+
+export function beforeProjectRoute (to, from, next) {
+  const blacklist = ['projects', 'projects-list']
+  if (!blacklist.includes(to.name) && to.params.projectId && to.params.projectId !== localStore.getItem('projectId')) {
+    store.dispatch('projects/getProjectById', {
+      projectId: to.params.projectId
+    }).then(res => {
+      store.commit('dag/setProjectId', res.id)
+      store.commit('dag/setProjectName', res.name)
+      localStore.setItem('projectId', res.id)
+      localStore.setItem('projectName', res.name)
+      next()
+    }).catch(e => {
+      next({ name: 'projects-list' })
+    })
+  } else {
+    next()
+  }
+}