From b22a6813d9f622d0cce4b0fca7ddecf9708bf114 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8A=B3=E8=B5=84=E8=9C=80=E9=81=93=E5=B1=B1?=
 <1493170339@qq.com>
Date: Mon, 11 Mar 2024 14:18:18 +0800
Subject: [PATCH] add TabTitle

---
 ui-vue3/src/layout/index.vue                    | 10 +++++++++-
 ui-vue3/src/layout/tab/layout_tab.vue           |  3 +++
 ui-vue3/src/router/defaultRoutes.ts             | 10 +++++-----
 ui-vue3/src/views/resources/instances/index.vue | 12 ++++++------
 4 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/ui-vue3/src/layout/index.vue b/ui-vue3/src/layout/index.vue
index 2c9a67164..4a43cd69a 100644
--- 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,6 +97,7 @@ router.beforeEach((to, from, next) => {
       margin-right: 5px;
     }
   }
+
   .layout-content {
     margin: 16px;
     padding: 16px 16px 24px;
@@ -98,6 +105,7 @@ router.beforeEach((to, from, next) => {
     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
index 0d68b4bfc..2836ef2ad 100644
--- 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
index 2427f39d1..361d7ef5d 100644
--- 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
index 3e3f04614..cf6e2011a 100644
--- a/ui-vue3/src/views/resources/instances/index.vue
+++ b/ui-vue3/src/views/resources/instances/index.vue
@@ -66,14 +66,14 @@ 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
   },
   {
@@ -81,7 +81,7 @@ let columns = [
     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
   },
   {