Merge pull request apache#215 from ikun-Lg/master

add TabTitle
Helltab · Mar 13, 2024 · 6bbae26 · 6bbae26
2 parents c250151 + b22a681
commit 6bbae26
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 12 deletions.
diff --git a/ui-vue3/src/layout/index.vue b/ui-vue3/src/layout/index.vue
@@ -36,7 +36,13 @@
         <a-layout-content class="layout-content">
           <router-view v-slot="{ Component }">
             <transition name="slide-fade">
-              <component :is="Component" />
+              <component :is="Component">
+                <template v-slot:tabTitle>
+                  <h1>
+                    {{ route.params && Object.values(route.params)[0] }}
+                  </h1>
+                </template>
+              </component>
             </transition>
           </router-view>
         </a-layout-content>
@@ -91,13 +97,15 @@ router.beforeEach((to, from, next) => {
       margin-right: 5px;
     }
   }
+
   .layout-content {
     margin: 16px;
     padding: 16px 16px 24px;
     background: #fff;
     overflow-y: auto;
     max-height: 88vh;
   }
+
   .layout-footer {
     height: 40px;
   }

diff --git a/ui-vue3/src/layout/tab/layout_tab.vue b/ui-vue3/src/layout/tab/layout_tab.vue
@@ -17,6 +17,7 @@
 <template>
   <div class="__container_router_tab_index">
     <div :key="key">
+      <slot name="tabTitle"></slot>
       <a-tabs
         v-if="tabRoute.meta.tab"
         @change="router.push({ name: activeKey || '' })"
@@ -46,6 +47,7 @@ import _ from 'lodash'
 
 const router = useRouter()
 const tabRoute = useRoute()
+
 let meta: any = tabRoute.meta
 const tabRouters = computed(() => {
   let meta: any = tabRoute.meta
@@ -55,6 +57,7 @@ let activeKey = ref(tabRoute.name)
 let transitionFlag = ref(false)
 let key = _.uniqueId('__tab_page')
 router.beforeEach((to, from, next) => {
+  console.log(tabRoute)
   key = _.uniqueId('__tab_page')
   transitionFlag.value = true
   activeKey.value = <string>to.name

diff --git a/ui-vue3/src/router/defaultRoutes.ts b/ui-vue3/src/router/defaultRoutes.ts
@@ -152,7 +152,7 @@ export const routes: Readonly<RouteRecordType[]> = [
                 }
               },
               {
-                path: '/detail/:instance',
+                path: '/detail/:pathId',
                 name: 'instanceDomain.details',
                 component: () => import('../views/resources/instances/tabs/details.vue'),
                 meta: {
@@ -161,7 +161,7 @@ export const routes: Readonly<RouteRecordType[]> = [
                 }
               },
               {
-                path: '/monitor/:instance',
+                path: '/monitor/:pathId',
                 name: 'instanceDomain.monitor',
                 component: () => import('../views/resources/instances/tabs/monitor.vue'),
                 meta: {
@@ -170,7 +170,7 @@ export const routes: Readonly<RouteRecordType[]> = [
                 }
               },
               {
-                path: '/linktracking/:instance',
+                path: '/linktracking/:pathId',
                 name: 'instanceDomain.linkTracking',
                 component: () => import('../views/resources/instances/tabs/linkTracking.vue'),
                 meta: {
@@ -179,7 +179,7 @@ export const routes: Readonly<RouteRecordType[]> = [
                 }
               },
               {
-                path: '/configuration/:instance',
+                path: '/configuration/:pathId',
                 name: 'instanceDomain.configuration',
                 component: () => import('../views/resources/instances/tabs/configuration.vue'),
                 meta: {
@@ -188,7 +188,7 @@ export const routes: Readonly<RouteRecordType[]> = [
                 }
               },
               {
-                path: '/event/:instance',
+                path: '/event/:pathId',
                 name: 'instanceDomain.event',
                 component: () => import('../views/resources/instances/tabs/event.vue'),
                 meta: {

diff --git a/ui-vue3/src/views/resources/instances/index.vue b/ui-vue3/src/views/resources/instances/index.vue
@@ -66,22 +66,22 @@ let columns = [
     title: 'instanceDomain.instanceIP',
     key: 'ip',
     dataIndex: 'ip',
-    sorter: (a: any, b: any) => sortString(a.instanceIP, b.instanceIP),
+    sorter: (a: any, b: any) => sortString(a.ip, b.ip),
     width: 140
   },
   {
     title: 'instanceDomain.instanceName',
     key: 'name',
     dataIndex: 'name',
-    sorter: (a: any, b: any) => sortString(a.instanceName, b.instanceName),
+    sorter: (a: any, b: any) => sortString(a.name, b.name),
     width: 140
   },
   {
     title: 'instanceDomain.deployState',
     key: 'deployState',
     dataIndex: 'deployState',
     width: 120,
-    sorter: (a: any, b: any) => sortString(a.instanceNum, b.instanceNum)
+    sorter: (a: any, b: any) => sortString(a.deployState, b.deployState)
   },
 
   {
@@ -102,14 +102,14 @@ let columns = [
     title: 'instanceDomain.registerCluster',
     key: 'registerClusters',
     dataIndex: 'registerClusters',
-    sorter: (a: any, b: any) => sortString(a.registerCluster, b.registerCluster),
+    sorter: (a: any, b: any) => sortString(a.registerClusters, b.registerClusters),
     width: 140
   },
   {
     title: 'instanceDomain.CPU',
     key: 'cpu',
     dataIndex: 'cpu',
-    sorter: (a: any, b: any) => sortString(a.CPU, b.CPU),
+    sorter: (a: any, b: any) => sortString(a.cpu, b.cpu),
     width: 140
   },
   {
@@ -123,7 +123,7 @@ let columns = [
     title: 'instanceDomain.startTime_k8s',
     key: 'startTime_k8s',
     dataIndex: 'startTime',
-    sorter: (a: any, b: any) => sortString(a.startTime_k8s, b.startTime_k8s),
+    sorter: (a: any, b: any) => sortString(a.startTime, b.startTime),
     width: 200
   },
   {