From 9be10c98e4e57bf71fb9cb06bef0a7e86f48c527 Mon Sep 17 00:00:00 2001
From: helltab <helltab@163.com>
Date: Sun, 31 Mar 2024 10:59:02 +0800
Subject: [PATCH] feat(#238): Issue about incorporating custom components
 within a tab layout.

---
 ui-vue3/src/base/constants.ts                 | 20 ++++--
 ui-vue3/src/components/SearchTable.vue        |  1 -
 ui-vue3/src/layout/index.vue                  |  4 +-
 ui-vue3/src/layout/tab/layout_tab.vue         |  2 +-
 ui-vue3/src/router/RouterMeta.ts              |  2 +
 ui-vue3/src/router/defaultRoutes.ts           |  6 +-
 ui-vue3/src/views/home/index.vue              | 71 +++++++++++--------
 .../views/resources/applications/index.vue    |  2 +-
 .../applications/slots/AppTabHeaderSlot.vue   | 44 ++++++++++++
 9 files changed, 110 insertions(+), 42 deletions(-)
 create mode 100644 ui-vue3/src/views/resources/applications/slots/AppTabHeaderSlot.vue

diff --git a/ui-vue3/src/base/constants.ts b/ui-vue3/src/base/constants.ts
index 08aa943b2..5fbe6ffb5 100644
--- a/ui-vue3/src/base/constants.ts
+++ b/ui-vue3/src/base/constants.ts
@@ -15,8 +15,12 @@
  * limitations under the License.
  */
 
+import type { Component } from 'vue'
 import { computed, h, reactive, ref } from 'vue'
+import type { RouteRecordType } from '@/router/defaultRoutes'
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
 
+// 2aacb8
 export const PRIMARY_COLOR_DEFAULT = '#17b392'
 
 export const LOCAL_STORAGE_LOCALE = 'LOCAL_STORAGE_LOCALE'
@@ -31,13 +35,17 @@ export const INSTANCE_REGISTER_COLOR: { [key: string]: string } = {
   HEALTHY: 'green'
 }
 
-export const TAB_HEADER_TITLE_VNODE = reactive({
-  vnode: h('div', 'something')
-})
-export const TAB_HEADER_TITLE = {
+export const TAB_HEADER_TITLE: Component = {
   functional: true,
-  render: () => {
-    return TAB_HEADER_TITLE_VNODE.vnode
+  props: ['route'],
+  render: (
+    a: any,
+    b: any,
+    c: { [key: string]: RouteRecordType & RouteLocationNormalizedLoaded }
+  ) => {
+    let route = c.route
+    let header: any = route.meta?.slots?.header
+    return h(header) || h('div', route.params?.pathId)
     // console.log(h)
     // return h("div", "foo")
   }
diff --git a/ui-vue3/src/components/SearchTable.vue b/ui-vue3/src/components/SearchTable.vue
index db40551ba..1474754ea 100644
--- a/ui-vue3/src/components/SearchTable.vue
+++ b/ui-vue3/src/components/SearchTable.vue
@@ -151,7 +151,6 @@ searchDomain.table.columns.forEach((column: any) => {
   }
 })
 const pagination = computed(() => {
-  console.log(pagination)
   return {
     pageSize: searchDomain.paged.pageSize,
     current: searchDomain.paged.curPage,
diff --git a/ui-vue3/src/layout/index.vue b/ui-vue3/src/layout/index.vue
index 06f919955..82be7052a 100644
--- a/ui-vue3/src/layout/index.vue
+++ b/ui-vue3/src/layout/index.vue
@@ -70,10 +70,12 @@ router.beforeEach((to, from, next) => {
     transitionFlag.value = true
   }, 500)
 })
-TAB_HEADER_TITLE_VNODE.vnode = h('div', route.params?.pathId)
 </script>
 <style lang="less" scoped>
 .__container_layout_index {
+  :deep(.ant-layout-content) {
+    padding: 16px !important;
+  }
   .logo {
     height: 40px;
     width: auto;
diff --git a/ui-vue3/src/layout/tab/layout_tab.vue b/ui-vue3/src/layout/tab/layout_tab.vue
index 45f5e11ec..33bc6c0ad 100644
--- a/ui-vue3/src/layout/tab/layout_tab.vue
+++ b/ui-vue3/src/layout/tab/layout_tab.vue
@@ -95,7 +95,7 @@ router.beforeEach((to, from, next) => {
   }
 
   .back {
-    font-size: 20px;
+    font-size: 24px;
     margin-bottom: -2px;
     color: v-bind('PRIMARY_COLOR');
   }
diff --git a/ui-vue3/src/router/RouterMeta.ts b/ui-vue3/src/router/RouterMeta.ts
index f3a407b34..0950b87d2 100644
--- a/ui-vue3/src/router/RouterMeta.ts
+++ b/ui-vue3/src/router/RouterMeta.ts
@@ -16,6 +16,7 @@
  */
 import type { RouteMeta } from 'vue-router'
 import type { RouteRecordType } from '@/router/defaultRoutes'
+import type { Component } from 'vue'
 
 export interface RouterMeta extends RouteMeta {
   icon?: string
@@ -25,4 +26,5 @@ export interface RouterMeta extends RouteMeta {
   tab?: boolean
   _router_key?: string
   parent?: RouteRecordType
+  slots?: { [key: string]: Component }
 }
diff --git a/ui-vue3/src/router/defaultRoutes.ts b/ui-vue3/src/router/defaultRoutes.ts
index 361d7ef5d..dd5b97dc7 100644
--- a/ui-vue3/src/router/defaultRoutes.ts
+++ b/ui-vue3/src/router/defaultRoutes.ts
@@ -19,6 +19,7 @@ import type { RouterMeta } from '@/router/RouterMeta'
 import type { RouteRecordRaw } from 'vue-router'
 import LayoutTab from '../layout/tab/layout_tab.vue'
 import _ from 'lodash'
+import AppTabHeaderSlot from '@/views/resources/applications/slots/AppTabHeaderSlot.vue'
 
 export declare type RouteRecordType = RouteRecordRaw & {
   key?: string
@@ -58,7 +59,10 @@ export const routes: Readonly<RouteRecordType[]> = [
             component: LayoutTab,
             redirect: 'index',
             meta: {
-              tab_parent: true
+              tab_parent: true,
+              slots: {
+                header: AppTabHeaderSlot
+              }
             },
             children: [
               {
diff --git a/ui-vue3/src/views/home/index.vue b/ui-vue3/src/views/home/index.vue
index 54d0a2384..189861054 100644
--- a/ui-vue3/src/views/home/index.vue
+++ b/ui-vue3/src/views/home/index.vue
@@ -32,37 +32,43 @@
         </a-flex>
       </a-card>
     </a-flex>
-    <a-descriptions
-      title=" "
-      bordered
-      :column="{ xxl: 2, xl: 2, lg: 2, md: 2, sm: 1, xs: 1 }"
-      layout="horizontal"
-    >
-      <a-descriptions-item label="versions">
-        <a-tag :color="PRIMARY_COLOR" v-for="v in metricsMetadata.info.versions">{{ v }}</a-tag>
-      </a-descriptions-item>
-      <a-descriptions-item label="protocols">
-        <a-tag :color="PRIMARY_COLOR" v-for="v in metricsMetadata.info.protocols">{{ v }}</a-tag>
-      </a-descriptions-item>
-      <a-descriptions-item label="configCenter">{{
-        metricsMetadata.info.configCenter
-      }}</a-descriptions-item>
-      <a-descriptions-item label="registry">{{
-        metricsMetadata.info.registry
-      }}</a-descriptions-item>
-      <a-descriptions-item label="metadataCenter">{{
-        metricsMetadata.info.metadataCenter
-      }}</a-descriptions-item>
-      <a-descriptions-item label="grafana">{{ metricsMetadata.info.grafana }}</a-descriptions-item>
-      <a-descriptions-item label="prometheus">{{
-        metricsMetadata.info.prometheus
-      }}</a-descriptions-item>
-      <a-descriptions-item label="Remark">empty</a-descriptions-item>
-      <a-descriptions-item label="rules">
-        <a-tag :color="PRIMARY_COLOR" v-for="v in metricsMetadata.info.rules">{{ v }}</a-tag>
-      </a-descriptions-item>
-    </a-descriptions>
-    <div id="report_container"></div>
+    <a-card class="card">
+      <a-descriptions
+        title=" "
+        bordered
+        :column="{ xxl: 2, xl: 2, lg: 2, md: 2, sm: 1, xs: 1 }"
+        layout="horizontal"
+      >
+        <a-descriptions-item label="versions">
+          <a-tag :color="PRIMARY_COLOR" v-for="v in metricsMetadata.info.versions">{{ v }}</a-tag>
+        </a-descriptions-item>
+        <a-descriptions-item label="protocols">
+          <a-tag :color="PRIMARY_COLOR" v-for="v in metricsMetadata.info.protocols">{{ v }}</a-tag>
+        </a-descriptions-item>
+        <a-descriptions-item label="configCenter">{{
+          metricsMetadata.info.configCenter
+        }}</a-descriptions-item>
+        <a-descriptions-item label="registry">{{
+          metricsMetadata.info.registry
+        }}</a-descriptions-item>
+        <a-descriptions-item label="metadataCenter">{{
+          metricsMetadata.info.metadataCenter
+        }}</a-descriptions-item>
+        <a-descriptions-item label="grafana">{{
+          metricsMetadata.info.grafana
+        }}</a-descriptions-item>
+        <a-descriptions-item label="prometheus">{{
+          metricsMetadata.info.prometheus
+        }}</a-descriptions-item>
+        <a-descriptions-item label="Remark">empty</a-descriptions-item>
+        <a-descriptions-item label="rules">
+          <a-tag :color="PRIMARY_COLOR" v-for="v in metricsMetadata.info.rules">{{ v }}</a-tag>
+        </a-descriptions-item>
+      </a-descriptions>
+    </a-card>
+    <a-card class="card">
+      <div id="report_container"></div>
+    </a-card>
   </div>
 </template>
 
@@ -165,5 +171,8 @@ onMounted(async () => {
     font-size: 20px;
     color: white;
   }
+  .card {
+    margin-top: 10px;
+  }
 }
 </style>
diff --git a/ui-vue3/src/views/resources/applications/index.vue b/ui-vue3/src/views/resources/applications/index.vue
index a0f3808d7..e23b0d927 100644
--- a/ui-vue3/src/views/resources/applications/index.vue
+++ b/ui-vue3/src/views/resources/applications/index.vue
@@ -19,7 +19,7 @@
     <search-table :search-domain="searchDomain">
       <template #bodyCell="{ text, record, index, column }">
         <template v-if="column.dataIndex === 'registerClusters'">
-          <a-tag v-for="t in text" color="grey">
+          <a-tag v-for="t in text">
             {{ t }}
           </a-tag>
         </template>
diff --git a/ui-vue3/src/views/resources/applications/slots/AppTabHeaderSlot.vue b/ui-vue3/src/views/resources/applications/slots/AppTabHeaderSlot.vue
new file mode 100644
index 000000000..8c92eebfe
--- /dev/null
+++ b/ui-vue3/src/views/resources/applications/slots/AppTabHeaderSlot.vue
@@ -0,0 +1,44 @@
+<!--
+  ~ 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.
+-->
+<template>
+  <!--      example like blow-->
+  <div class="__container_AppTabHeaderSlot">
+    <a-row>
+      <a-col :span="12">
+        <span class="header-desc"
+          >{{ $t('applicationDomain.name') }}: {{ route.params?.pathId }}</span
+        >
+      </a-col>
+      <!--      <a-col :span="12">-->
+      <!--       <a-button>custom function</a-button>-->
+      <!--      </a-col>-->
+    </a-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+const route = useRoute()
+</script>
+<style lang="less" scoped>
+.__container_AppTabHeaderSlot {
+  .header-desc {
+    line-height: 30px;
+    vertical-align: center;
+  }
+}
+</style>