feat: Implement adding controls in Tabs (#21)

src/components/Icon.vue

@@ -21,7 +21,7 @@ limitations under the License. -->
       lg: size === 'lg',
       xl: size === 'xl',
       logo: size === 'logo',
-      loading: loading,
+      loading,
     }"
   >
     <use :xlink:href="`#${iconName}`"></use>
@@ -73,4 +73,15 @@ defineProps({
     width: 30px;
   }
 }
+@keyframes loading {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  to {
+    -webkit-transform: rotate(1turn);
+    transform: rotate(1turn);
+  }
+}
 </style>

src/locales/lang/en.ts

@@ -95,6 +95,7 @@ const msg = {
   topChildren: "Top 5 of children",
   taskList: "Task List",
   sampledTraces: "Sampled Traces",
+  editTab: "Enable editing tab names",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",
   secondTip: "Select Second",

src/locales/lang/zh.ts

@@ -95,6 +95,7 @@ const msg = {
   showDepth: "展示深度选择器",
   taskList: "任务列表",
   sampledTraces: "采样的追踪",
+  editTab: "开启编辑Tab的名称",
   hourTip: "选择小时",
   minuteTip: "选择分钟",
   secondTip: "选择秒数",

src/router/index.ts

@@ -26,7 +26,6 @@ import { routesEvent } from "./event";
 import { routesAlert } from "./alert";
 import { routesSetting } from "./setting";
 import { routesAlarm } from "./alarm";
-import { useTimeoutFn } from "@/hooks/useTimeout";
 
 const routes: Array<RouteRecordRaw> = [
   ...routesGen,
@@ -52,7 +51,7 @@ router.beforeEach((to, from, next) => {
   // const token = window.localStorage.getItem("skywalking-authority");
   if ((window as any).axiosCancel.length !== 0) {
     for (const func of (window as any).axiosCancel) {
-      useTimeoutFn(func(), 0);
+      setTimeout(func(), 0);
     }
     (window as any).axiosCancel = [];
   }

src/store/modules/dashboard.ts

@@ -43,6 +43,7 @@ interface DashboardState {
   durationTime: Duration;
   selectorStore: any;
   showTopology: boolean;
+  currentTabItems: LayoutConfig[];
 }
 
 export const dashboardStore = defineStore({
@@ -57,6 +58,7 @@ export const dashboardStore = defineStore({
     durationTime: useAppStoreWithOut().durationTime,
     selectorStore: useSelectorStore(),
     showTopology: false,
+    currentTabItems: [],
   }),
   actions: {
     setLayout(data: LayoutConfig[]) {
@@ -71,7 +73,8 @@ export const dashboardStore = defineStore({
         metrics: [""],
       };
       if (type === "Tab") {
-        newItem.h = 24;
+        newItem.h = 36;
+        newItem.activedTabIndex = 0;
         newItem.children = [
           {
             name: "Tab1",
@@ -96,14 +99,15 @@ export const dashboardStore = defineStore({
         };
       }
       if (type === "Trace" || type === "Profile") {
-        newItem.h = 36;
+        newItem.h = 24;
       }
+      this.activedGridItem = newItem.i;
+      this.selectedGrid = newItem;
       this.layout = this.layout.map((d: LayoutConfig) => {
         d.y = d.y + newItem.h;
         return d;
       });
       this.layout.push(newItem);
-      this.activedGridItem = newItem.i;
     },
     addTabItem(item: LayoutConfig) {
       const idx = this.layout.findIndex((d: LayoutConfig) => d.i === item.i);
@@ -117,7 +121,7 @@ export const dashboardStore = defineStore({
       };
       this.layout[idx].children?.push(i);
     },
-    addTabWidget(tabIndex: number) {
+    addTabControls(type: string) {
       const activedGridItem = this.activedGridItem.split("-")[0];
       const idx = this.layout.findIndex(
         (d: LayoutConfig) => d.i === activedGridItem
@@ -125,37 +129,91 @@ export const dashboardStore = defineStore({
       if (idx < 0) {
         return;
       }
+      const tabIndex = this.layout[idx].activedTabIndex;
       const { children } = this.layout[idx].children[tabIndex];
-      const newWidget = {
-        x: 0,
-        y: 0,
-        w: 24,
-        h: 12,
+      const newItem: LayoutConfig = {
+        ...NewControl,
         i: String(children.length),
-        type: "Widget",
-        widget: {
-          title: "Title",
-        },
-        graph: {},
-        standard: {},
+        type,
+        metricTypes: [""],
+        metrics: [""],
       };
+      if (type === "Topology") {
+        newItem.w = 4;
+        newItem.h = 6;
+        newItem.graph = {
+          fontColor: "white",
+          backgroundColor: "green",
+          iconTheme: true,
+          content: "Topology",
+          fontSize: 18,
+          showDepth: true,
+        };
+      }
+      if (type === "Trace" || type === "Profile") {
+        newItem.h = 24;
+      }
       if (this.layout[idx].children) {
         const items = children.map((d: LayoutConfig) => {
-          d.y = d.y + newWidget.h;
+          d.y = d.y + newItem.h;
           return d;
         });
-        items.push(newWidget);
+        items.push(newItem);
         this.layout[idx].children[tabIndex].children = items;
+        this.currentTabItems = items;
       }
     },
     activeGridItem(index: string) {
       this.activedGridItem = index;
     },
+    setActiveTabIndex(index: number) {
+      const idx = this.layout.findIndex(
+        (d: LayoutConfig) => d.i === this.activedGridItem
+      );
+      if (idx < 0) {
+        return;
+      }
+      this.layout[idx].activedTabIndex = index;
+    },
+    setCurrentTabItems(items: LayoutConfig[]) {
+      this.currentTabItems = items;
+    },
+    removeTab(item: LayoutConfig) {
+      if (this.selectedGrid && this.selectedGrid.i === item.i) {
+        this.selectedGrid = null;
+      }
+      this.layout = this.layout.filter((d: LayoutConfig) => d.i !== item.i);
+    },
     removeControls(item: LayoutConfig) {
+      const actived = this.activedGridItem.split("-");
+      const index = this.layout.findIndex(
+        (d: LayoutConfig) => actived[0] === d.i
+      );
+
+      if (this.selectedGrid && this.selectedGrid.i === item.i) {
+        this.selectedGrid = null;
+      }
+      if (actived.length === 3) {
+        const tabIndex = Number(actived[1]);
+        const itemIndex = this.layout[index].children[
+          tabIndex
+        ].children.findIndex((d: LayoutConfig) => actived[2] === d.i);
+
+        this.layout[index].children[tabIndex].children.splice(itemIndex, 1);
+        this.setCurrentTabItems(this.layout[index].children[tabIndex].children);
+        return;
+      }
       this.layout = this.layout.filter((d: LayoutConfig) => d.i !== item.i);
     },
     removeTabItem(item: LayoutConfig, index: number) {
       const idx = this.layout.findIndex((d: LayoutConfig) => d.i === item.i);
+      if (this.selectedGrid) {
+        for (const item of this.layout[idx].children[index].children) {
+          if (this.selectedGrid.i === item.i) {
+            this.selectedGrid = null;
+          }
+        }
+      }
       if (this.layout[idx].children) {
         this.layout[idx].children?.splice(index, 1);
       }
@@ -204,11 +262,18 @@ export const dashboardStore = defineStore({
       );
 
       if (actived.length === 3) {
-        this.layout[index].children[actived[1]].children[actived[2]] = {
-          ...this.layout[index],
+        const tabIndex = Number(actived[1]);
+        const itemIndex = this.layout[index].children[
+          tabIndex
+        ].children.findIndex((d: LayoutConfig) => actived[2] === d.i);
+
+        this.layout[index].children[tabIndex].children[itemIndex] = {
+          ...this.layout[index].children[tabIndex].children[itemIndex],
           ...param,
         };
-        this.selectedGrid = this.layout[index];
+        this.selectedGrid =
+          this.layout[index].children[tabIndex].children[itemIndex];
+        this.setCurrentTabItems(this.layout[index].children[tabIndex].children);
         return;
       }
       this.layout[index] = {

src/types/dashboard.ts

@@ -27,6 +27,7 @@ export interface LayoutConfig {
   type: string;
   metricTypes: string[];
   children?: any;
+  activedTabIndex?: number;
 }
 
 export interface WidgetConfig {

src/views/dashboard/Edit.vue

@@ -75,6 +75,7 @@ function handleClick(e: any) {
   e.stopPropagation();
   if (e.target.className === "ds-main") {
     dashboardStore.activeGridItem("");
+    dashboardStore.selectWidget(null);
   }
 }
 </script>

src/views/dashboard/controls/Tab.vue

@@ -33,38 +33,62 @@ limitations under the License. -->
           v-show="activeTabIndex === idx"
           size="sm"
           iconName="cancel"
-          @click="deleteTabItem(idx)"
+          @click="deleteTabItem($event, idx)"
         />
       </span>
       <span class="tab-icons">
-        <el-tooltip effect="dark" content="Add tab items" placement="bottom">
+        <el-tooltip content="Add tab items" placement="bottom">
           <i @click="addTabItem">
             <Icon size="middle" iconName="add" />
           </i>
         </el-tooltip>
-        <el-tooltip effect="dark" content="Add widgets" placement="bottom">
-          <i @click="addTabWidget">
-            <Icon size="middle" iconName="playlist_add" />
-          </i>
-        </el-tooltip>
       </span>
     </div>
     <div class="operations">
-      <Icon size="sm" iconName="clearclose" @click="removeTab" />
+      <el-popover
+        placement="bottom"
+        trigger="click"
+        :width="200"
+        v-model:visible="showTools"
+      >
+        <template #reference>
+          <span>
+            <Icon
+              iconName="ellipsis_v"
+              size="middle"
+              class="operation"
+              @click="showTools = true"
+            />
+          </span>
+        </template>
+        <div
+          class="tools"
+          @click="
+            canEditTabName = true;
+            showTools = false;
+          "
+        >
+          <span class="edit-tab">{{ t("editTab") }}</span>
+        </div>
+        <div class="tools" @click="removeTab">
+          <span>{{ t("delete") }}</span>
+        </div>
+      </el-popover>
     </div>
   </div>
-  <div class="tab-layout">
+  <div class="tab-layout" @click="handleClick">
     <grid-layout
-      v-if="state.layout.length"
-      v-model:layout="state.layout"
+      v-if="dashboardStore.currentTabItems.length"
+      v-model:layout="dashboardStore.currentTabItems"
       :col-num="24"
       :row-height="10"
       :is-draggable="true"
       :is-resizable="true"
+      :responsive="true"
       @layout-updated="layoutUpdatedEvent"
     >
       <grid-item
-        v-for="item in state.layout"
+        v-for="item in dashboardStore.currentTabItems"
         :x="item.x"
         :y="item.y"
         :w="item.w"
@@ -74,95 +98,118 @@ limitations under the License. -->
         @click="clickTabGrid($event, item)"
         :class="{ active: activeTabWidget === item.i }"
       >
-        <Widget
+        <component
+          :is="item.type"
           :data="item"
           :activeIndex="`${data.i}-${activeTabIndex}-${item.i}`"
+          :needQuery="needQuery"
         />
       </grid-item>
     </grid-layout>
     <div class="no-data-tips" v-else>Please add widgets.</div>
   </div>
 </template>
-<script lang="ts" setup>
-import { ref, watch, reactive } from "vue";
+<script lang="ts">
+import { ref, watch, defineComponent, toRefs } from "vue";
+import { useI18n } from "vue-i18n";
 import type { PropType } from "vue";
-import Widget from "./Widget.vue";
 import { LayoutConfig } from "@/types/dashboard";
 import { useDashboardStore } from "@/store/modules/dashboard";
-/*global defineProps */
-const props = defineProps({
+import Topology from "./Topology.vue";
+import Widget from "./Widget.vue";
+import Trace from "./Trace.vue";
+import Profile from "./Profile.vue";
+
+const props = {
   data: {
     type: Object as PropType<LayoutConfig>,
     default: () => ({ children: [] }),
   },
   active: { type: Boolean, default: false },
-});
-const dashboardStore = useDashboardStore();
-const activeTabIndex = ref<number>(0);
-const activeTabWidget = ref<string>("0");
-const editTabIndex = ref<number>(NaN); // edit tab item name
-const state = reactive<{
-  layout: LayoutConfig[];
-}>({
-  layout:
-    dashboardStore.layout[props.data.i].children[activeTabIndex.value].children,
-});
+};
+export default defineComponent({
+  name: "Tab",
+  components: { Topology, Widget, Trace, Profile },
+  props,
+  setup(props) {
+    const { t } = useI18n();
+    const dashboardStore = useDashboardStore();
+    const activeTabIndex = ref<number>(0);
+    const activeTabWidget = ref<string>("");
+    const editTabIndex = ref<number>(NaN); // edit tab item name
+    const canEditTabName = ref<boolean>(false);
+    const needQuery = ref<boolean>(false);
+    const showTools = ref<boolean>(false);
+    const l = dashboardStore.layout.findIndex(
+      (d: LayoutConfig) => d.i === props.data.i
+    );
+    dashboardStore.setCurrentTabItems(
+      dashboardStore.layout[l].children[activeTabIndex.value].children
+    );
 
-function layoutUpdatedEvent(newLayout: LayoutConfig[]) {
-  state.layout = newLayout;
-}
-function clickTabs(e: Event, idx: number) {
+    function clickTabs(e: Event, idx: number) {
       e.stopPropagation();
       activeTabIndex.value = idx;
-}
-function removeTab() {
-  dashboardStore.removeControls(props.data);
-}
-function deleteTabItem(idx: number) {
+      dashboardStore.activeGridItem(props.data.i);
+      dashboardStore.selectWidget(props.data);
+      dashboardStore.setActiveTabIndex(idx);
+      const l = dashboardStore.layout.findIndex(
+        (d: LayoutConfig) => d.i === props.data.i
+      );
+      dashboardStore.setCurrentTabItems(
+        dashboardStore.layout[l].children[activeTabIndex.value].children
+      );
+      needQuery.value = true;
+    }
+    function removeTab(e: Event) {
+      e.stopPropagation();
+      dashboardStore.removeTab(props.data);
+    }
+    function deleteTabItem(e: Event, idx: number) {
+      e.stopPropagation();
       dashboardStore.removeTabItem(props.data, idx);
-}
-function addTabItem() {
+    }
+    function addTabItem() {
       dashboardStore.addTabItem(props.data);
-}
-function editTabName(el: Event, index: number) {
-  el.stopPropagation();
-  editTabIndex.value = index;
-}
-function handleClick(el: any) {
-  if (el.target.className === "tab-name") {
+    }
+    function editTabName(el: Event, index: number) {
+      if (!canEditTabName.value) {
+        editTabIndex.value = NaN;
         return;
       }
+      editTabIndex.value = index;
+    }
+    function handleClick(el: any) {
+      if (["tab-name", "edit-tab"].includes(el.target.className)) {
+        return;
+      }
+      canEditTabName.value = false;
       editTabIndex.value = NaN;
-}
-function addTabWidget(e: Event) {
-  e.stopPropagation();
-  activeTabWidget.value = String(state.layout.length);
-  dashboardStore.addTabWidget(activeTabIndex.value);
-  dashboardStore.activeGridItem(
-    `${props.data.i}-${activeTabIndex.value}-${activeTabWidget.value}`
-  );
-}
-function clickTabGrid(e: Event, item: LayoutConfig) {
+    }
+    function clickTabGrid(e: Event, item: LayoutConfig) {
       e.stopPropagation();
       activeTabWidget.value = item.i;
       dashboardStore.activeGridItem(
         `${props.data.i}-${activeTabIndex.value}-${item.i}`
       );
-}
-document.body.addEventListener("click", handleClick, false);
-
-const children = ref(
-  dashboardStore.layout[props.data.i].children[activeTabIndex.value].children
-);
-watch(
-  () => children.value,
-  (data) => {
-    state.layout = data;
+      handleClick(e);
     }
-);
-watch(
+    function layoutUpdatedEvent() {
+      const l = dashboardStore.layout.findIndex(
+        (d: LayoutConfig) => d.i === props.data.i
+      );
+      dashboardStore.setCurrentTabItems(
+        dashboardStore.layout[l].children[activeTabIndex.value].children
+      );
+    }
+    document.body.addEventListener("click", handleClick, false);
+    watch(
       () => dashboardStore.activedGridItem,
       (data) => {
+        if (!data) {
+          activeTabWidget.value = "";
+          return;
+        }
         const i = data.split("-");
         if (i[0] === props.data.i && activeTabIndex.value === Number(i[1])) {
           activeTabWidget.value = i[2];
@@ -170,7 +217,28 @@ watch(
           activeTabWidget.value = "";
         }
       }
-);
+    );
+    return {
+      handleClick,
+      layoutUpdatedEvent,
+      clickTabGrid,
+      editTabName,
+      addTabItem,
+      deleteTabItem,
+      removeTab,
+      clickTabs,
+      ...toRefs(props),
+      activeTabWidget,
+      dashboardStore,
+      activeTabIndex,
+      editTabIndex,
+      needQuery,
+      canEditTabName,
+      showTools,
+      t,
+    };
+  },
+});
 </script>
 <style lang="scss" scoped>
 .tabs {
@@ -218,10 +286,6 @@ watch(
   }
 }
 
-.el-input__inner {
-  border: none !important;
-}
-
 .operations {
   color: #aaa;
   cursor: pointer;
@@ -263,4 +327,17 @@ watch(
   padding-top: 30px;
   color: #888;
 }
+
+.tools {
+  padding: 5px 0;
+  color: #999;
+  cursor: pointer;
+  position: relative;
+  text-align: center;
+
+  &:hover {
+    color: #409eff;
+    background-color: #eee;
+  }
+}
 </style>

src/views/dashboard/controls/Widget.vue

@@ -77,6 +77,7 @@ const props = {
     default: () => ({ widget: {} }),
   },
   activeIndex: { type: String, default: "" },
+  needQuery: { type: Boolean, default: false },
 };
 export default defineComponent({
   name: "Widget",
@@ -93,7 +94,7 @@ export default defineComponent({
     const dashboardStore = useDashboardStore();
     const selectorStore = useSelectorStore();
 
-    if (dashboardStore.entity === EntityType[1].value) {
+    if (dashboardStore.entity === EntityType[1].value || props.needQuery) {
       queryMetrics();
     }
 
@@ -128,7 +129,10 @@ export default defineComponent({
     watch(
       () => [props.data.metricTypes, props.data.metrics],
       () => {
-        if (props.data.i !== dashboardStore.selectedGrid.i) {
+        if (
+          dashboardStore.selectedGrid &&
+          props.data.i !== dashboardStore.selectedGrid.i
+        ) {
           return;
         }
         if (TableChartTypes.includes(dashboardStore.selectedGrid.graph.type)) {

src/views/dashboard/data.ts

@@ -165,9 +165,9 @@ export const SortOrder = [
 export const ToolIcons = [
   { name: "playlist_add", content: "Add Widget", id: "addWidget" },
   { name: "all_inbox", content: "Add Tab", id: "addTab" },
-  { name: "device_hub", content: "Add Topology", id: "topology" },
-  { name: "merge", content: "Add Trace", id: "trace" },
-  { name: "timeline", content: "Add Profile", id: "profile" },
+  { name: "device_hub", content: "Add Topology", id: "addTopology" },
+  { name: "merge", content: "Add Trace", id: "addTrace" },
+  { name: "timeline", content: "Add Profile", id: "addProfile" },
   // { name: "save_alt", content: "Export", id: "export" },
   // { name: "folder_open", content: "Import", id: "import" },
   // { name: "settings", content: "Settings", id: "settings" },

src/views/dashboard/panel/Layout.vue

@@ -53,6 +53,7 @@ export default defineComponent({
     }
     function clickGrid(item: LayoutConfig) {
       dashboardStore.activeGridItem(item.i);
+      dashboardStore.selectWidget(item);
     }
     return {
       dashboardStore,

src/views/dashboard/panel/Tool.vue

@@ -107,7 +107,6 @@ import { EntityType, ToolIcons, hasTopology, TraceEntitys } from "../data";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { ElMessage } from "element-plus";
 import { Option } from "@/types/app";
-import { Service } from "@/types/selector";
 
 const dashboardStore = useDashboardStore();
 const selectorStore = useSelectorStore();
@@ -260,7 +259,7 @@ async function getServices() {
   }
 }
 
-async function changeService(service: Service[]) {
+async function changeService(service: any) {
   if (service[0]) {
     states.currentService = service[0].value;
     selectorStore.setCurrentService(service[0]);
@@ -270,7 +269,7 @@ async function changeService(service: Service[]) {
   }
 }
 
-function changeDestService(service: Service[]) {
+function changeDestService(service: any) {
   if (service[0]) {
     states.currentDestService = service[0].value;
     selectorStore.setCurrentDestService(service[0]);
@@ -279,7 +278,7 @@ function changeDestService(service: Service[]) {
   }
 }
 
-function changePods(pod: Option[]) {
+function changePods(pod: any) {
   if (pod[0]) {
     selectorStore.setCurrentPod(pod[0]);
   } else {
@@ -288,20 +287,55 @@ function changePods(pod: Option[]) {
 }
 
 function clickIcons(t: { id: string; content: string; name: string }) {
-  switch (t.id) {
+  if (
+    dashboardStore.selectedGrid &&
+    dashboardStore.selectedGrid.type === "Tab"
+  ) {
+    setTabControls(t.id);
+    return;
+  }
+  if (dashboardStore.activedGridItem.split("-").length === 3) {
+    setTabControls(t.id);
+    return;
+  }
+  setControls(t.id);
+}
+
+function setTabControls(id: string) {
+  switch (id) {
+    case "addWidget":
+      dashboardStore.addTabControls("Widget");
+      break;
+    case "addTrace":
+      dashboardStore.addTabControls("Trace");
+      break;
+    case "addProfile":
+      dashboardStore.addTabControls("Profile");
+      break;
+    case "addTopology":
+      dashboardStore.addTabControls("Topology");
+      break;
+    default:
+      ElMessage.info("Don't support this control");
+      break;
+  }
+}
+
+function setControls(id: string) {
+  switch (id) {
     case "addWidget":
       dashboardStore.addControl("Widget");
       break;
     case "addTab":
       dashboardStore.addControl("Tab");
       break;
-    case "trace":
+    case "addTrace":
       dashboardStore.addControl("Trace");
       break;
-    case "profile":
+    case "addProfile":
       dashboardStore.addControl("Profile");
       break;
-    case "topology":
+    case "addTopology":
       dashboardStore.addControl("Topology");
       break;
     case "settings":

src/views/dashboard/related/profile/Content.vue

@@ -65,19 +65,16 @@ function loadTrees(l: boolean) {
 }
 
 .thread-stack {
-  padding: 5px 12px;
-  height: calc(50% - 50px);
+  padding: 5px;
+  height: calc(50% - 20px);
   overflow: auto;
   width: 100%;
 }
 
 .t-loading {
   text-align: center;
-  position: absolute;
   width: 100%;
-  height: 70px;
-  margin-top: 40px;
-  line-height: 88px;
   overflow: hidden;
+  height: calc(50% - 20px);
 }
 </style>

src/views/dashboard/related/profile/components/SpanTree.vue

@@ -35,6 +35,7 @@ limitations under the License. -->
         {{ t("analyze") }}
       </el-button>
     </div>
+    <div class="profile-table">
       <Table
         :data="profileStore.segmentSpans"
         :traceId="
@@ -46,6 +47,7 @@ limitations under the License. -->
         @select="selectSpan"
       />
     </div>
+  </div>
 </template>
 <script lang="ts" setup>
 import { ref, computed } from "vue";
@@ -158,10 +160,14 @@ function updateTimeRange() {
   padding: 5px;
   flex-shrink: 0;
   height: 50%;
-  overflow: auto;
   width: 100%;
 }
 
+.profile-table {
+  height: calc(100% - 30px);
+  overflow: auto;
+}
+
 .profile-trace-detail-wrapper {
   padding: 5px 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);

src/views/dashboard/related/trace/components/Table/TableItem.vue

@@ -136,7 +136,7 @@ limitations under the License. -->
 <script lang="ts">
 import dayjs from "dayjs";
 import { useI18n } from "vue-i18n";
-import { ref, watch, computed, defineComponent } from "vue";
+import { ref, computed, defineComponent } from "vue";
 import type { PropType } from "vue";
 import SpanDetail from "../D3Graph/SpanDetail.vue";
 
@@ -152,7 +152,6 @@ export default defineComponent({
   emits: ["select"],
   components: { SpanDetail },
   setup(props, { emit }) {
-    /* global Nullable */
     const displayChildren = ref<boolean>(true);
     const showDetail = ref<boolean>(false);
     const { t } = useI18n();