feature: 新导航

Tencent · Oct 11, 2021 · eedca1a · eedca1a
1 parent 0345482
commit eedca1a
Show file tree

Hide file tree

Showing 27 changed files with 571 additions and 307 deletions.
diff --git a/bcs-app/frontend/build/config.js b/bcs-app/frontend/build/config.js
@@ -36,12 +36,12 @@ module.exports = {
         assetsPublicPath: '/',
         proxyTable: {
             '/api': {
-                target: 'http://dev.bcs.devops.oa.com/backend', // 接口域名
+                target: '', // 接口域名
                 changeOrigin: true, // 是否跨域
                 secure: false,
                 toProxy: true,
                 headers: {
-                  referer: 'http://dev.bcs.devops.oa.com'
+                  referer: ''
                 }
             },
         },

diff --git a/bcs-app/frontend/package.json b/bcs-app/frontend/package.json
@@ -64,6 +64,7 @@
     }
   },
   "dependencies": {
+    "@blueking/paas-login": "0.0.9",
     "@icon-cool/bk-icon-bk-bcs": "0.0.5",
     "@vue/composition-api": "1.1.5",
     "axios": "~0.19.0",

diff --git a/bcs-app/frontend/src/App.vue b/bcs-app/frontend/src/App.vue
@@ -8,15 +8,17 @@
         <!-- 权限弹窗 -->
         <app-apply-perm ref="bkApplyPerm"></app-apply-perm>
         <!-- 登录弹窗 -->
+        <BkPaaSLogin ref="login"></BkPaaSLogin>
     </div>
 </template>
 <script>
     import Navigation from '@/views/navigation.vue'
     import ProjectCreate from '@/views/project/project-create.vue'
+    import BkPaaSLogin from '@blueking/paas-login'
 
     export default {
         name: 'app',
-        components: { Navigation, ProjectCreate },
+        components: { Navigation, ProjectCreate, BkPaaSLogin },
         data () {
             return {
                 isLoading: false,
@@ -30,14 +32,16 @@
                 return this.$store.state.isEn ? `${cls} english` : cls
             },
             routerKey () {
-                return this.$route.params.projectCode
+                const { projectCode = '' } = this.$route.params
+                return `${projectCode}-${this.$route.meta.isDashboard}`
             }
         },
         created () {
             this.initBcsBaseData()
         },
         mounted () {
             document.title = this.$t('容器服务')
+            window.$loginModal = this.$refs.login
         },
         methods: {
             // 初始化BCS基本数据
@@ -46,7 +50,7 @@
                 await Promise.all([
                     this.$store.dispatch('userInfo'),
                     this.$store.dispatch('getProjectList')
-                ])
+                ]).catch((err) => console.log(err))
                 this.isLoading = false
             },
             handleCreateProject () {

diff --git a/bcs-app/frontend/src/api/index.js b/bcs-app/frontend/src/api/index.js
@@ -181,7 +181,11 @@ function handleReject (error, config) {
         const { status, data, code, request_id } = error.response
         let message = error?.message
         if (status === 401) {
-            window.loginModal && window.loginModal.show()
+            // 登录弹窗
+            // eslint-disable-next-line camelcase
+            window.$loginModal.loginUrl = data.data.login_url.simple
+            window.$loginModal && window.$loginModal.show()
+            return
         } else if (status === 500) {
             message = window.i18n.t('系统出现异常')
         } else if (status === 403) {

diff --git a/bcs-app/frontend/src/components/cluster-selector/index.vue b/bcs-app/frontend/src/components/cluster-selector/index.vue
@@ -78,7 +78,10 @@
                 return isEmpty(this.searchValue) ? this.curClusterList : this.curClusterList.filter(item => item.name.includes(this.searchValue))
             },
             curViewType () {
-                return this.$route.path.indexOf('dashboard') > -1 ? 'dashboard' : 'cluster'
+                return this.$route.meta.isDashboard ? 'dashboard' : 'cluster'
+            },
+            curClusterId () {
+                return this.$store.state.curClusterId
             }
         },
         watch: {
@@ -124,6 +127,7 @@
              * @param {Object} cluster 集群信息
              */
             handleToggleCluster (cluster) {
+                if (this.curClusterId === cluster.cluster_id) return
                 this.activeClusterId = cluster.cluster_id
                 this.handleSaveClusterInfo(cluster)
                 this.handleHideClusterSelector()

diff --git a/bcs-app/frontend/src/i18n/lang.js b/bcs-app/frontend/src/i18n/lang.js
@@ -22,7 +22,7 @@ export default {
     '当前账号没有管理员权限，不可编辑，': ['Current account has no administrator rights and cannot be edited. '],
     '请': ['Please'],
     '点击申请权限': [' Apply permission'],
-    '该项目下已有集群信息，如需更改编排类型和绑定业务信息，请先删除已有集群': ['Cluster information is available under this project. If you need to change the arrange type and bind the service information, delete the existing cluster first.'],
+    '该项目下已有集群信息，如需更改绑定业务信息，请先删除已有集群': ['Cluster information is available under this project. If you need to change bind service information, delete the existing cluster first.'],
     '当前账号在蓝鲸配置平台无业务，请联系运维在蓝鲸配置平台关联业务，': ['Current account has no business on the CMDB. Please contact Operations Engineer on the CMDB to associate business. '],
     '点击查看业务和运维信息': ['View Business and Operations information'],
     '当前账号在蓝鲸CMDB无业务运维权限，请联系要关联的CMDB业务的运维开启容器服务': ['Current account has no business on the CMDB. Please contact Operations Engineer on the CMDB to open BCS Service.'],
@@ -1971,7 +1971,9 @@ export default {
     '本页全选': [''],
     '跨页全选': [''],
     '成功复制IP {number} 个': [''],
-    '查无数据': ['']
+    '查无数据': [''],
+    '集群网络': [''],
+    '加载中': ['']
     // 变量的使用 $t('test', { vari1: 1, vari2: 2 })
     // // 变量的使用 $t('test', { vari1: 1, vari2: 2 })
     // 'test': ['{vari1} ---english--- {vari2}'],

diff --git a/bcs-app/frontend/src/router/app.js b/bcs-app/frontend/src/router/app.js
@@ -18,25 +18,40 @@ const childRoutes = [
                     // k8s deployments 应用里的实例详情页面
                     {
                         path: ':instanceId',
-                        name: 'deploymentsInstanceDetail'
+                        name: 'deploymentsInstanceDetail',
+                        meta: {
+                            menuId: 'deployments'
+                        }
                     },
                     {
                         path: ':instanceName/:instanceNamespace/:instanceCategory',
-                        name: 'deploymentsInstanceDetail2'
+                        name: 'deploymentsInstanceDetail2',
+                        meta: {
+                            menuId: 'deployments'
+                        }
                     },
                     // k8s deployments 应用里的容器详情页面
                     {
                         path: ':instanceId/taskgroups/:taskgroupName/containers/:containerId',
-                        name: 'deploymentsContainerDetail'
+                        name: 'deploymentsContainerDetail',
+                        meta: {
+                            menuId: 'deployments'
+                        }
                     },
                     {
                         path: ':instanceName/:instanceNamespace/:instanceCategory/taskgroups/:taskgroupName/containers/:containerId',
-                        name: 'deploymentsContainerDetail2'
+                        name: 'deploymentsContainerDetail2',
+                        meta: {
+                            menuId: 'deployments'
+                        }
                     },
                     // k8s deployments 应用里的应用实例化页面
                     {
                         path: ':templateId/instantiation/:category/:tmplAppName/:tmplAppId',
-                        name: 'deploymentsInstantiation'
+                        name: 'deploymentsInstantiation',
+                        meta: {
+                            menuId: 'deployments'
+                        }
                     }
                 ]
             },
@@ -48,25 +63,40 @@ const childRoutes = [
                     // k8s daemonset 应用里的实例详情页面
                     {
                         path: ':instanceId',
-                        name: 'daemonsetInstanceDetail'
+                        name: 'daemonsetInstanceDetail',
+                        meta: {
+                            menuId: 'daemonset'
+                        }
                     },
                     {
                         path: ':instanceName/:instanceNamespace/:instanceCategory',
-                        name: 'daemonsetInstanceDetail2'
+                        name: 'daemonsetInstanceDetail2',
+                        meta: {
+                            menuId: 'daemonset'
+                        }
                     },
                     // k8s daemonset 应用里的容器详情页面
                     {
                         path: ':instanceId/taskgroups/:taskgroupName/containers/:containerId',
-                        name: 'daemonsetContainerDetail'
+                        name: 'daemonsetContainerDetail',
+                        meta: {
+                            menuId: 'daemonset'
+                        }
                     },
                     {
                         path: ':instanceName/:instanceNamespace/:instanceCategory/taskgroups/:taskgroupName/containers/:containerId',
-                        name: 'daemonsetContainerDetail2'
+                        name: 'daemonsetContainerDetail2',
+                        meta: {
+                            menuId: 'daemonset'
+                        }
                     },
                     // k8s daemonset 应用里的应用实例化页面
                     {
                         path: ':templateId/instantiation/:category/:tmplAppName/:tmplAppId',
-                        name: 'daemonsetInstantiation'
+                        name: 'daemonsetInstantiation',
+                        meta: {
+                            menuId: 'daemonset'
+                        }
                     }
                 ]
             },
@@ -78,25 +108,40 @@ const childRoutes = [
                     // k8s job 应用里的实例详情页面
                     {
                         path: ':instanceId',
-                        name: 'jobInstanceDetail'
+                        name: 'jobInstanceDetail',
+                        meta: {
+                            menuId: 'job'
+                        }
                     },
                     {
                         path: ':instanceName/:instanceNamespace/:instanceCategory',
-                        name: 'jobInstanceDetail2'
+                        name: 'jobInstanceDetail2',
+                        meta: {
+                            menuId: 'job'
+                        }
                     },
                     // k8s job 应用里的容器详情页面
                     {
                         path: ':instanceId/taskgroups/:taskgroupName/containers/:containerId',
-                        name: 'jobContainerDetail'
+                        name: 'jobContainerDetail',
+                        meta: {
+                            menuId: 'job'
+                        }
                     },
                     {
                         path: ':instanceName/:instanceNamespace/:instanceCategory/taskgroups/:taskgroupName/containers/:containerId',
-                        name: 'jobContainerDetail2'
+                        name: 'jobContainerDetail2',
+                        meta: {
+                            menuId: 'job'
+                        }
                     },
                     // k8s job 应用里的应用实例化页面
                     {
                         path: ':templateId/instantiation/:category/:tmplAppName/:tmplAppId',
-                        name: 'jobInstantiation'
+                        name: 'jobInstantiation',
+                        meta: {
+                            menuId: 'job'
+                        }
                     }
                 ]
             },
@@ -108,25 +153,40 @@ const childRoutes = [
                     // k8s statefulset 应用里的实例详情页面
                     {
                         path: ':instanceId',
-                        name: 'statefulsetInstanceDetail'
+                        name: 'statefulsetInstanceDetail',
+                        meta: {
+                            menuId: 'statefulset'
+                        }
                     },
                     {
                         path: ':instanceName/:instanceNamespace/:instanceCategory',
-                        name: 'statefulsetInstanceDetail2'
+                        name: 'statefulsetInstanceDetail2',
+                        meta: {
+                            menuId: 'statefulset'
+                        }
                     },
                     // k8s statefulset 应用里的容器详情页面
                     {
                         path: ':instanceId/taskgroups/:taskgroupName/containers/:containerId',
-                        name: 'statefulsetContainerDetail'
+                        name: 'statefulsetContainerDetail',
+                        meta: {
+                            menuId: 'statefulset'
+                        }
                     },
                     {
                         path: ':instanceName/:instanceNamespace/:instanceCategory/taskgroups/:taskgroupName/containers/:containerId',
-                        name: 'statefulsetContainerDetail2'
+                        name: 'statefulsetContainerDetail2',
+                        meta: {
+                            menuId: 'statefulset'
+                        }
                     },
                     // k8s statefulset 应用里的应用实例化页面
                     {
                         path: ':templateId/instantiation/:category/:tmplAppName/:tmplAppId',
-                        name: 'statefulsetInstantiation'
+                        name: 'statefulsetInstantiation',
+                        meta: {
+                            menuId: 'statefulset'
+                        }
                     }
                 ]
             },

diff --git a/bcs-app/frontend/src/router/cluster.js b/bcs-app/frontend/src/router/cluster.js
@@ -41,7 +41,10 @@ const childRoutes = [
     {
         path: ':projectCode/cluster/create',
         name: 'clusterCreate',
-        component: global.REGION === 'ieod' ? ClusterCreate : ClusterCreateExternal
+        component: global.REGION === 'ieod' ? ClusterCreate : ClusterCreateExternal,
+        meta: {
+            menuId: 'CLUSTER'
+        }
     },
     // 集群总览
     {
@@ -54,25 +57,37 @@ const childRoutes = [
     {
         path: ':projectCode/cluster/:clusterId/node',
         name: 'clusterNode',
-        component: ClusterNode
+        component: ClusterNode,
+        meta: {
+            menuId: 'OVERVIEW'
+        }
     },
     // 集群里的集群信息
     {
         path: ':projectCode/cluster/:clusterId/info',
         name: 'clusterInfo',
-        component: ClusterInfo
+        component: ClusterInfo,
+        meta: {
+            menuId: 'OVERVIEW'
+        }
     },
     // 集群里的具体节点
     {
         path: ':projectCode/cluster/:clusterId/node/:nodeId',
         name: 'clusterNodeOverview',
-        component: ClusterNodeOverview
+        component: ClusterNodeOverview,
+        meta: {
+            menuId: 'OVERVIEW'
+        }
     },
     // 节点详情页面跳转的容器详情页面
     {
         path: ':projectCode/cluster/:clusterId/node/:nodeId/container/:containerId',
         name: 'containerDetailForNode',
-        component: ContainerDetailForNode
+        component: ContainerDetailForNode,
+        meta: {
+            menuId: 'OVERVIEW'
+        }
     }
 ]
 

diff --git a/bcs-app/frontend/src/router/configuration.js b/bcs-app/frontend/src/router/configuration.js
@@ -70,7 +70,10 @@ const childRoutes = [
             {
                 path: 'templateset/:templateId/instantiation',
                 name: 'instantiation',
-                component: Instantiation
+                component: Instantiation,
+                meta: {
+                    menuId: "TEMPLATESET"
+                }
             },
             {
                 path: 'k8s',
@@ -80,7 +83,10 @@ const childRoutes = [
                     {
                         path: 'templateset/deployment/:templateId',
                         name: 'k8sTemplatesetDeployment',
-                        component: K8sCreateDeployment
+                        component: K8sCreateDeployment,
+                        meta: {
+                            menuId: "TEMPLATESET"
+                        }
                     },
                     {
                         path: 'templateset/service/:templateId',
@@ -125,7 +131,10 @@ const childRoutes = [
                     {
                         path: 'yaml-templateset/:templateId',
                         name: 'K8sYamlTemplateset',
-                        component: K8sYamlTemplateset
+                        component: K8sYamlTemplateset,
+                        meta: {
+                            menuId: "TEMPLATESET"
+                        }
                     }
                 ]
             },