From 7df27ba4df4636d017ce8c30c362acf9f552f4cd Mon Sep 17 00:00:00 2001
From: wangshaoping <wspsc@163.com>
Date: Sun, 4 Feb 2024 09:39:31 +0800
Subject: [PATCH] update

---
 io.sc.platform.core.frontend/package.json     |   2 +-
 .../components-ext/formater/I18nFormater.ts   |  10 +
 .../formater/ReplaceFormater.ts               |  24 +++
 .../formater/SimpleClassNameFormater.ts       |  16 ++
 .../components-ext/formater/SplitFormater.ts  |  33 ++++
 .../platform/components-ext/formater/index.ts |  20 ++
 .../src/platform/components/grid/WGrid.vue    |  11 +-
 .../src/views/TreeGrid.vue                    | 174 ++++++++++++------
 .../template-project/package.json             |   4 +-
 .../template-project/src/views/TreeGrid.vue   | 174 ++++++++++++------
 10 files changed, 347 insertions(+), 121 deletions(-)
 create mode 100644 io.sc.platform.core.frontend/src/platform/components-ext/formater/I18nFormater.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components-ext/formater/ReplaceFormater.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components-ext/formater/SimpleClassNameFormater.ts
 create mode 100644 io.sc.platform.core.frontend/src/platform/components-ext/formater/SplitFormater.ts

diff --git a/io.sc.platform.core.frontend/package.json b/io.sc.platform.core.frontend/package.json
index 48d03c24..6dab7555 100644
--- a/io.sc.platform.core.frontend/package.json
+++ b/io.sc.platform.core.frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "platform-core",
-  "version": "8.1.100",
+  "version": "8.1.110",
   "description": "前端核心包,用于快速构建前端的脚手架",
   "//main": "库的主文件",
   "main": "dist/platform-core.js",
diff --git a/io.sc.platform.core.frontend/src/platform/components-ext/formater/I18nFormater.ts b/io.sc.platform.core.frontend/src/platform/components-ext/formater/I18nFormater.ts
new file mode 100644
index 00000000..4eaebbc3
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components-ext/formater/I18nFormater.ts
@@ -0,0 +1,10 @@
+import { i18n } from '@/platform/plugin';
+
+const i18nFormater = (value) => {
+  if (value) {
+    return i18n.global.t(value);
+  }
+  return i18n.global.t(value);
+};
+
+export { i18nFormater };
diff --git a/io.sc.platform.core.frontend/src/platform/components-ext/formater/ReplaceFormater.ts b/io.sc.platform.core.frontend/src/platform/components-ext/formater/ReplaceFormater.ts
new file mode 100644
index 00000000..4901c47a
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components-ext/formater/ReplaceFormater.ts
@@ -0,0 +1,24 @@
+import { Tools } from '@/platform/utils';
+
+class ReplaceFormater {
+  #token;
+  #replacer;
+
+  constructor(token: string, replacer: string) {
+    this.#token = token;
+    this.#replacer = replacer;
+  }
+
+  public formater() {
+    const token = this.#token;
+    const replacer = this.#replacer;
+    return (value) => {
+      if (Tools.isUndefinedOrNull(value)) {
+        return null;
+      }
+      return value.replaceAll(token, replacer);
+    };
+  }
+}
+
+export { ReplaceFormater };
diff --git a/io.sc.platform.core.frontend/src/platform/components-ext/formater/SimpleClassNameFormater.ts b/io.sc.platform.core.frontend/src/platform/components-ext/formater/SimpleClassNameFormater.ts
new file mode 100644
index 00000000..0ab08c99
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components-ext/formater/SimpleClassNameFormater.ts
@@ -0,0 +1,16 @@
+const simpleClassNameFormater = (value) => {
+  if (value) {
+    let result = '';
+    const splits = value.split('.');
+    if (splits) {
+      for (let i = 0; i < splits.length - 1; i++) {
+        result += splits[i].substring(0, 1) + '.';
+      }
+      result += splits[splits.length - 1];
+      return result;
+    }
+  }
+  return '';
+};
+
+export { simpleClassNameFormater };
diff --git a/io.sc.platform.core.frontend/src/platform/components-ext/formater/SplitFormater.ts b/io.sc.platform.core.frontend/src/platform/components-ext/formater/SplitFormater.ts
new file mode 100644
index 00000000..3971f398
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components-ext/formater/SplitFormater.ts
@@ -0,0 +1,33 @@
+import { Tools } from '@/platform/utils';
+
+class SplitFormater {
+  #spliter;
+  #replacer;
+
+  constructor(spliter: string, replacer: string) {
+    this.#spliter = spliter;
+    this.#replacer = replacer;
+  }
+
+  public formater() {
+    const spliter = this.#spliter;
+    const replacer = this.#replacer;
+    return (value) => {
+      if (Tools.isUndefinedOrNull(value)) {
+        return null;
+      }
+      let result = '';
+      const splits = value.split(spliter);
+      if (splits && splits.length > 0) {
+        for (let i = 0; i < splits.length - 1; i++) {
+          result += splits[i] + replacer;
+        }
+        result += splits[splits.length - 1];
+        return result;
+      }
+      return value;
+    };
+  }
+}
+
+export { SplitFormater };
diff --git a/io.sc.platform.core.frontend/src/platform/components-ext/formater/index.ts b/io.sc.platform.core.frontend/src/platform/components-ext/formater/index.ts
index 72690456..c468ad94 100644
--- a/io.sc.platform.core.frontend/src/platform/components-ext/formater/index.ts
+++ b/io.sc.platform.core.frontend/src/platform/components-ext/formater/index.ts
@@ -3,6 +3,10 @@ import { yesNoFormater, trueFalseFormater, enableTagFormater, successFailedTagFo
 import { dateOnlyFormater } from './DatetimeFormater';
 import { menuTypeFormater } from './MenuTypeFormater';
 import { EnumFormater } from './EnumFormater';
+import { simpleClassNameFormater } from './SimpleClassNameFormater';
+import { SplitFormater } from './SplitFormater';
+import { ReplaceFormater } from './ReplaceFormater';
+import { i18nFormater } from './I18nFormater';
 
 class Formater {
   static #enumFormaterMap = {};
@@ -37,6 +41,22 @@ class Formater {
     return menuTypeFormater;
   }
 
+  public static simpleClassName() {
+    return simpleClassNameFormater;
+  }
+
+  public static split(spliter: string = ',', replacer: string = '<br/>') {
+    return new SplitFormater(spliter, replacer).formater();
+  }
+
+  public static replaceAll(token: string = '\n', replacer: string = '<br/>') {
+    return new ReplaceFormater(token, replacer).formater();
+  }
+
+  public static i18n() {
+    return i18nFormater;
+  }
+
   public static enum(enumType: EnumType) {
     if (enumType) {
       let enumFormater = Formater.#enumFormaterMap[enumType.name];
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue b/io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue
index 82ead27a..3687dbd4 100644
--- a/io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue
@@ -128,7 +128,7 @@
                 <component :is="col.value.componentType" v-bind="col.value.attrs"></component>
               </template>
               <template v-else>
-                <span v-dompurify-html="col.value || ''"></span>
+                <span v-dompurify-html="Tools.isUndefinedOrNull(col.value) ? '' : col.value"></span>
               </template>
             </q-td>
           </template>
@@ -146,7 +146,7 @@
                 <component :is="col.value.componentType" v-bind="col.value.attrs"></component>
               </template>
               <template v-else>
-                <span v-dompurify-html="col.value || ''"></span>
+                <span v-dompurify-html="Tools.isUndefinedOrNull(col.value) ? '' : col.value"></span>
               </template>
             </q-td>
           </template>
@@ -459,6 +459,7 @@ enum ButtonEnum {
   addTop = 'addTop', // 新增顶级节点
   addChild = 'addChild', // 新增子节点
   expand = 'expand', // 展开?收起 所有节点
+  resetDefaultValues = 'resetDefaultValues', // 恢复默认值
 }
 /**
  * 内置按钮
@@ -685,6 +686,12 @@ const buttonObj = {
       table.treeExpand = !table.treeExpand;
     },
   },
+  resetDefaultValues: {
+    name: ButtonEnum.resetDefaultValues,
+    icon: 'bi-copy',
+    label: '恢复默认值',
+    click: (selected, context) => {},
+  },
 };
 const expandFun = (arr, treeExpand) => {
   arr.forEach((item) => {
diff --git a/io.sc.platform.core.frontend/src/views/TreeGrid.vue b/io.sc.platform.core.frontend/src/views/TreeGrid.vue
index 0ab8ba85..a8313c2a 100644
--- a/io.sc.platform.core.frontend/src/views/TreeGrid.vue
+++ b/io.sc.platform.core.frontend/src/views/TreeGrid.vue
@@ -1,62 +1,120 @@
 <template>
-  <w-grid
-    :tree="true"
-    :title="$t('system.corporation.grid.title')"
-    :data-url="Environment.apiContextPath('/api/system/corporation')"
-    selection="multiple"
-    :checkbox-selection="false"
-    :pageable="false"
-    :full-screen-button="false"
-    :tree-icon="
-      (row) => {
-        return { name: 'folder', color: 'amber' };
-      }
-    "
-    :toolbar-configure="{ noIcon: false }"
-    :toolbar-actions="['refresh', 'separator', ['addTop', 'addChild'], 'edit', 'remove', 'separator', 'view']"
-    :columns="[
-      { width: 100, name: 'name', label: $t('name') },
-      { width: '100%', name: 'code', label: $t('code') },
-      { width: 90, name: 'dataComeFrom', label: $t('dataComeFrom'), format: Formater.enum(DataComeFromEnum) },
-      { width: 100, name: 'lastModifier', label: $t('lastModifier') },
-      { width: 110, name: 'lastModifyDate', label: $t('lastModifyDate'), format: Formater.dateOnly() },
-      { width: 80, name: 'enable', label: $t('status'), format: Formater.enableTag() },
-    ]"
-    :editor="{
-      dialog: {
-        width: '600px',
-        height: '300px',
-      },
-      form: {
-        colsNum: 1,
-        fields: [
-          { name: 'code', label: $t('code'), type: 'text', required: true },
-          { name: 'name', label: $t('name'), type: 'text', required: true },
-          { name: 'description', label: $t('description'), type: 'textarea', rows: 1 },
-          { name: 'enable', label: $t('enable'), type: 'checkbox', defaultValue: true },
-        ],
-      },
-    }"
-    :viewer="{
-      panel: {
-        columnNum: 1,
-        fields: [
-          { name: 'id', label: $t('id') },
-          { name: 'code', label: $t('code') },
-          { name: 'name', label: $t('name') },
-          { name: 'description', label: $t('description') },
-          { name: 'enable', label: $t('enable'), format: (value) => value },
-          { name: 'dataComeFrom', label: $t('dataComeFrom'), format: (value) => value },
-          { name: 'creator', label: $t('creator') },
-          { name: 'createDate', label: $t('createDate') },
-          { name: 'lastModifier', label: $t('lastModifier') },
-          { name: 'lastModifyDate', label: $t('lastModifyDate'), format: (value) => value },
-        ],
-      },
-    }"
-  ></w-grid>
+  <div>
+    <q-tabs v-model="selectedTabRef" inline-label align="left" :breakpoint="0" no-caps>
+      <q-tab name="dispatcherServlets" icon="bi-people" :label="$t('Dispatcher Servlets')" />
+      <q-tab name="servletFilters" icon="bi-diagram-3" :label="$t('Servlet Filters')" />
+      <q-tab name="servlets" icon="bi-diagram-3" :label="$t('Servlets')" />
+    </q-tabs>
+    <q-tab-panels v-model="selectedTabRef" animated swipeable keep-alive>
+      <q-tab-panel name="dispatcherServlets" class="px-0">
+        <w-grid
+          :title="$t('menu.developer.springboot.mapping')"
+          :checkbox-selection="false"
+          :fetch-data-url="Environment.apiContextPath('/api/developer/springboot/mappings/dispatcherServletMappingDescriptions')"
+          :pageable="false"
+          :toolbar-actions="['refresh', 'separator', 'view', 'export']"
+          :columns="[
+            {
+              width: 100,
+              name: 'httpMethods',
+              label: $t('httpMethod'),
+            },
+            {
+              width: 400,
+              name: 'patterns',
+              label: $t('pattern'),
+              format: (value) => {
+                return value;
+              },
+            },
+            {
+              width: 300,
+              name: 'className',
+              label: $t('className'),
+              format: Formater.simpleClassName(),
+            },
+            {
+              width: 200,
+              name: 'methodName',
+              label: $t('methodName'),
+              format: (value) => {
+                return value;
+              },
+            },
+            { name: 'consumes', label: $t('consume'), format: Formater.split() },
+          ]"
+          :viewer="{
+            panel: {
+              columnNum: 1,
+              fields: [
+                { name: 'httpMethods', label: $t('httpMethod') },
+                { name: 'patterns', label: $t('pattern') },
+                { name: 'className', label: $t('className'), format: Formater.none() },
+                { name: 'methodName', label: $t('methodName') },
+                { name: 'methodDescriptor', label: $t('methodDescriptor') },
+                { name: 'consumes', label: $t('consume'), format: Formater.split() },
+                { name: 'produces', label: $t('produce'), format: Formater.split() },
+                { name: 'headers', label: $t('header'), format: Formater.split() },
+                { name: 'params', label: $t('parameter'), format: Formater.split() },
+              ],
+            },
+          }"
+        ></w-grid>
+      </q-tab-panel>
+      <q-tab-panel name="servletFilters" class="px-0">
+        <w-grid
+          :title="$t('menu.developer.springboot.bean')"
+          :toolbar-actions="['refresh', 'separator', 'view', 'export']"
+          :fetch-data-url="Environment.apiContextPath('/api/developer/springboot/mappings/filterRegistrationMappingDescriptions')"
+          :checkbox-selection="false"
+          :pageable="true"
+          :columns="[
+            { width: 300, name: 'name', label: $t('name'), sortable: false },
+            { width: '100%', name: 'urlPatternMappings', label: $t('pattern'), sortable: false },
+            { width: 400, name: 'className', label: $t('className'), sortable: false, format: Formater.simpleClassName() },
+          ]"
+          :viewer="{
+            panel: {
+              columnNum: 1,
+              fields: [
+                { name: 'name', label: $t('name') },
+                { name: 'urlPatternMappings', label: $t('pattern') },
+                { name: 'className', label: $t('className'), format: Formater.none() },
+              ],
+            },
+          }"
+        ></w-grid>
+      </q-tab-panel>
+      <q-tab-panel name="servlets" class="px-0">
+        <w-grid
+          :title="$t('menu.developer.springboot.bean')"
+          :checkbox-selection="false"
+          :fetch-data-url="Environment.apiContextPath('/api/developer/springboot/mappings/servletRegistrationMappingDescriptions')"
+          :pageable="true"
+          :toolbar-actions="['refresh', 'separator', 'view', 'separator', 'export']"
+          :columns="[
+            { width: 300, name: 'name', label: $t('name'), sortable: false },
+            { width: '100%', name: 'mappings', label: $t('pattern'), sortable: false },
+            { width: 400, name: 'className', label: $t('className'), sortable: false, format: Formater.simpleClassName() },
+          ]"
+          :viewer="{
+            panel: {
+              columnNum: 1,
+              fields: [
+                { name: 'name', label: $t('name') },
+                { name: 'mappings', label: $t('pattern') },
+                { name: 'className', label: $t('className'), format: Formater.none() },
+              ],
+            },
+          }"
+        ></w-grid>
+      </q-tab-panel>
+    </q-tab-panels>
+  </div>
 </template>
-
 <script setup lang="ts">
-import { Environment, Formater, Options } from '@/platform';
+import { ref } from 'vue';
+import { Environment, Formater } from '@/platform';
+
+const selectedTabRef = ref('dispatcherServlets');
 </script>
diff --git a/io.sc.platform.core.frontend/template-project/package.json b/io.sc.platform.core.frontend/template-project/package.json
index ce1bddfe..36769a7b 100644
--- a/io.sc.platform.core.frontend/template-project/package.json
+++ b/io.sc.platform.core.frontend/template-project/package.json
@@ -1,6 +1,6 @@
 {
   "name": "platform-core",
-  "version": "8.1.100",
+  "version": "8.1.110",
   "description": "前端核心包,用于快速构建前端的脚手架",
   "private": false,
   "keywords": [],
@@ -92,7 +92,7 @@
     "luckyexcel": "1.0.1",
     "mockjs": "1.1.0",
     "pinia": "2.1.7",
-    "platform-core": "8.1.100",
+    "platform-core": "8.1.110",
     "quasar": "2.14.2",
     "tailwindcss": "3.4.0",
     "vue": "3.4.3",
diff --git a/io.sc.platform.core.frontend/template-project/src/views/TreeGrid.vue b/io.sc.platform.core.frontend/template-project/src/views/TreeGrid.vue
index 0ab8ba85..a8313c2a 100644
--- a/io.sc.platform.core.frontend/template-project/src/views/TreeGrid.vue
+++ b/io.sc.platform.core.frontend/template-project/src/views/TreeGrid.vue
@@ -1,62 +1,120 @@
 <template>
-  <w-grid
-    :tree="true"
-    :title="$t('system.corporation.grid.title')"
-    :data-url="Environment.apiContextPath('/api/system/corporation')"
-    selection="multiple"
-    :checkbox-selection="false"
-    :pageable="false"
-    :full-screen-button="false"
-    :tree-icon="
-      (row) => {
-        return { name: 'folder', color: 'amber' };
-      }
-    "
-    :toolbar-configure="{ noIcon: false }"
-    :toolbar-actions="['refresh', 'separator', ['addTop', 'addChild'], 'edit', 'remove', 'separator', 'view']"
-    :columns="[
-      { width: 100, name: 'name', label: $t('name') },
-      { width: '100%', name: 'code', label: $t('code') },
-      { width: 90, name: 'dataComeFrom', label: $t('dataComeFrom'), format: Formater.enum(DataComeFromEnum) },
-      { width: 100, name: 'lastModifier', label: $t('lastModifier') },
-      { width: 110, name: 'lastModifyDate', label: $t('lastModifyDate'), format: Formater.dateOnly() },
-      { width: 80, name: 'enable', label: $t('status'), format: Formater.enableTag() },
-    ]"
-    :editor="{
-      dialog: {
-        width: '600px',
-        height: '300px',
-      },
-      form: {
-        colsNum: 1,
-        fields: [
-          { name: 'code', label: $t('code'), type: 'text', required: true },
-          { name: 'name', label: $t('name'), type: 'text', required: true },
-          { name: 'description', label: $t('description'), type: 'textarea', rows: 1 },
-          { name: 'enable', label: $t('enable'), type: 'checkbox', defaultValue: true },
-        ],
-      },
-    }"
-    :viewer="{
-      panel: {
-        columnNum: 1,
-        fields: [
-          { name: 'id', label: $t('id') },
-          { name: 'code', label: $t('code') },
-          { name: 'name', label: $t('name') },
-          { name: 'description', label: $t('description') },
-          { name: 'enable', label: $t('enable'), format: (value) => value },
-          { name: 'dataComeFrom', label: $t('dataComeFrom'), format: (value) => value },
-          { name: 'creator', label: $t('creator') },
-          { name: 'createDate', label: $t('createDate') },
-          { name: 'lastModifier', label: $t('lastModifier') },
-          { name: 'lastModifyDate', label: $t('lastModifyDate'), format: (value) => value },
-        ],
-      },
-    }"
-  ></w-grid>
+  <div>
+    <q-tabs v-model="selectedTabRef" inline-label align="left" :breakpoint="0" no-caps>
+      <q-tab name="dispatcherServlets" icon="bi-people" :label="$t('Dispatcher Servlets')" />
+      <q-tab name="servletFilters" icon="bi-diagram-3" :label="$t('Servlet Filters')" />
+      <q-tab name="servlets" icon="bi-diagram-3" :label="$t('Servlets')" />
+    </q-tabs>
+    <q-tab-panels v-model="selectedTabRef" animated swipeable keep-alive>
+      <q-tab-panel name="dispatcherServlets" class="px-0">
+        <w-grid
+          :title="$t('menu.developer.springboot.mapping')"
+          :checkbox-selection="false"
+          :fetch-data-url="Environment.apiContextPath('/api/developer/springboot/mappings/dispatcherServletMappingDescriptions')"
+          :pageable="false"
+          :toolbar-actions="['refresh', 'separator', 'view', 'export']"
+          :columns="[
+            {
+              width: 100,
+              name: 'httpMethods',
+              label: $t('httpMethod'),
+            },
+            {
+              width: 400,
+              name: 'patterns',
+              label: $t('pattern'),
+              format: (value) => {
+                return value;
+              },
+            },
+            {
+              width: 300,
+              name: 'className',
+              label: $t('className'),
+              format: Formater.simpleClassName(),
+            },
+            {
+              width: 200,
+              name: 'methodName',
+              label: $t('methodName'),
+              format: (value) => {
+                return value;
+              },
+            },
+            { name: 'consumes', label: $t('consume'), format: Formater.split() },
+          ]"
+          :viewer="{
+            panel: {
+              columnNum: 1,
+              fields: [
+                { name: 'httpMethods', label: $t('httpMethod') },
+                { name: 'patterns', label: $t('pattern') },
+                { name: 'className', label: $t('className'), format: Formater.none() },
+                { name: 'methodName', label: $t('methodName') },
+                { name: 'methodDescriptor', label: $t('methodDescriptor') },
+                { name: 'consumes', label: $t('consume'), format: Formater.split() },
+                { name: 'produces', label: $t('produce'), format: Formater.split() },
+                { name: 'headers', label: $t('header'), format: Formater.split() },
+                { name: 'params', label: $t('parameter'), format: Formater.split() },
+              ],
+            },
+          }"
+        ></w-grid>
+      </q-tab-panel>
+      <q-tab-panel name="servletFilters" class="px-0">
+        <w-grid
+          :title="$t('menu.developer.springboot.bean')"
+          :toolbar-actions="['refresh', 'separator', 'view', 'export']"
+          :fetch-data-url="Environment.apiContextPath('/api/developer/springboot/mappings/filterRegistrationMappingDescriptions')"
+          :checkbox-selection="false"
+          :pageable="true"
+          :columns="[
+            { width: 300, name: 'name', label: $t('name'), sortable: false },
+            { width: '100%', name: 'urlPatternMappings', label: $t('pattern'), sortable: false },
+            { width: 400, name: 'className', label: $t('className'), sortable: false, format: Formater.simpleClassName() },
+          ]"
+          :viewer="{
+            panel: {
+              columnNum: 1,
+              fields: [
+                { name: 'name', label: $t('name') },
+                { name: 'urlPatternMappings', label: $t('pattern') },
+                { name: 'className', label: $t('className'), format: Formater.none() },
+              ],
+            },
+          }"
+        ></w-grid>
+      </q-tab-panel>
+      <q-tab-panel name="servlets" class="px-0">
+        <w-grid
+          :title="$t('menu.developer.springboot.bean')"
+          :checkbox-selection="false"
+          :fetch-data-url="Environment.apiContextPath('/api/developer/springboot/mappings/servletRegistrationMappingDescriptions')"
+          :pageable="true"
+          :toolbar-actions="['refresh', 'separator', 'view', 'separator', 'export']"
+          :columns="[
+            { width: 300, name: 'name', label: $t('name'), sortable: false },
+            { width: '100%', name: 'mappings', label: $t('pattern'), sortable: false },
+            { width: 400, name: 'className', label: $t('className'), sortable: false, format: Formater.simpleClassName() },
+          ]"
+          :viewer="{
+            panel: {
+              columnNum: 1,
+              fields: [
+                { name: 'name', label: $t('name') },
+                { name: 'mappings', label: $t('pattern') },
+                { name: 'className', label: $t('className'), format: Formater.none() },
+              ],
+            },
+          }"
+        ></w-grid>
+      </q-tab-panel>
+    </q-tab-panels>
+  </div>
 </template>
-
 <script setup lang="ts">
-import { Environment, Formater, Options } from '@/platform';
+import { ref } from 'vue';
+import { Environment, Formater } from '@/platform';
+
+const selectedTabRef = ref('dispatcherServlets');
 </script>