perf(external/Composes): 小组件下新增天气

-<script lang="ts" setup>
+<script lang="ts" setup name="SelectCity">
 import { onMounted, reactive } from 'vue'
 import { getAreaList } from '@/api/external/common/index'
 import { areaEnum } from '../config'

-<script lang="ts" setup>
+<script lang="ts" setup name="WeatherContent">
 import { toRefs } from 'vue'
 import SelectCity from './SelectCity.vue'
-import { weatherTextMapImg } from '../config'
+import { useUtils } from '../hooks/useUtils'
 
 const props = defineProps({
   data: {
@@ -11,19 +11,13 @@ const props = defineProps({
 
 const emits = defineEmits(['submit'])
 
+const { loadWeatherImg, loadWeatherLevel } = useUtils()
+
 const { casts } = toRefs(props.data[0])
 
 const onHandleSelectValues = (values: any) => {
   emits('submit', values)
 }
-
-//根据返回的文字加载不同天气图片
-const loadWeatherImg = (text: string) => {
-  return (
-    weatherTextMapImg.find((item: any) => item.text === text)?.img ||
-    '/large-designer/src/assets/external/weather/clearDay.png'
-  )
-}
 </script>
 
 <template>
@@ -59,16 +53,18 @@ const loadWeatherImg = (text: string) => {
         <div class="content-weather-air">
           <div>{{ casts[0]?.dayweather }}</div>
           <div>{{ casts[0]?.daywind }}</div>
+          <div>{{ loadWeatherLevel(casts[0]?.daypower) }}</div>
         </div>
       </div>
       <template #footer>
-        <div v-for="(item, index) in casts?.slice(0, 3)" :key="index" class="footer-content">
-          <div>{{ index === 0 ? '今天' : index === 1 ? '明天' : '后天' }}</div>
+        <div v-for="(item, index) in casts" :key="index" class="footer-content">
+          <div>{{ index === 0 ? '今天' : index === 1 ? '明天' : index === 2 ? '后天' : '外天' }}</div>
           <div>
             <img :src="loadWeatherImg(item?.dayweather)" />
           </div>
           <div>{{ item?.daytemp }}/{{ item?.nighttemp }}</div>
           <div>{{ item?.daywind }}</div>
+          <div>{{ loadWeatherLevel(item?.daypower) }}</div>
         </div>
       </template>
     </n-card>
@@ -92,7 +88,6 @@ const loadWeatherImg = (text: string) => {
     }
   }
   .card-content {
-    width: 100%;
     @extend %flex-style;
     .content-weather {
       @extend %flex-style;
@@ -108,12 +103,12 @@ const loadWeatherImg = (text: string) => {
     }
   }
   .footer-content {
-    width: 100%;
     @extend %flex-style;
-    gap: 30px;
-    margin-left: 5px;
+    gap: 10px;
+    margin-left: 10px;
     div {
       flex: 1;
+      text-align: left;
       img {
         width: 24px;
         height: 24px;

@@ -4,9 +4,13 @@ import { WeatherConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 import { chartInitConfig } from '@/settings/designSetting'
 
-//第三方 高德天气接口key值和api配置
-export const thirdPartyWeatherKey = `0551a87b45e0363ae6c7a2242e8ac944`
-export const thirdPartyWeatherApi = `https://restapi.amap.com/v3/weather/weatherInfo`
+//第三方 天气接口key值和api配置(高德)
+export class ThirdPartyWeather {
+  static ak = '0551a87b45e0363ae6c7a2242e8ac944'
+  static api = 'https://restapi.amap.com/v3/weather/weatherInfo'
+  // ((all,预报天气),(base,实况天气))
+  static extensions = 'all'
+}
 
 //省市区枚举
 export const enum areaEnum {
@@ -35,6 +39,62 @@ export const weatherTextMapImg = [
   }
 ]
 
+//风力等级文字映射
+export const weatherSpeedMapText = [
+  {
+    level: (value: number) => value >= 0.0 && value <= 0.2,
+    text: '无风'
+  },
+  {
+    level: (value: number) => value >= 0.3 && value <= 1.5,
+    text: '软风'
+  },
+  {
+    level: (value: number) => value >= 1.6 && value <= 3.3,
+    text: '轻风'
+  },
+  {
+    level: (value: number) => value >= 3.4 && value <= 5.4,
+    text: '微风'
+  },
+  {
+    level: (value: number) => value >= 5.5 && value <= 7.9,
+    text: '和风'
+  },
+  {
+    level: (value: number) => value >= 8.0 && value <= 10.7,
+    text: '劲风'
+  },
+  {
+    level: (value: number) => value >= 10.8 && value <= 13.8,
+    text: '强风'
+  },
+  {
+    level: (value: number) => value >= 13.9 || value <= 17.1,
+    text: '疾风'
+  },
+  {
+    level: (value: number) => value >= 17.2 && value <= 20.7,
+    text: '大风'
+  },
+  {
+    level: (value: number) => value >= 20.8 && value <= 24.4,
+    text: '烈风'
+  },
+  {
+    level: (value: number) => value >= 24.5 && value <= 28.4,
+    text: '狂风'
+  },
+  {
+    level: (value: number) => value >= 28.5 && value <= 32.6,
+    text: '暴风'
+  },
+  {
+    level: (value: number) => value >= 32.7 && value <= 36.9,
+    text: '飓风'
+  }
+]
+
 export const option = {
   dataset: {
     provinceValue: null,
@@ -50,6 +110,8 @@ export const option = {
     weatherIconSizeHeight: '24',
     airSpeedTextSize: '16',
     airSpeedTextColor: '#000000',
+    airSpeedLevelTextSize: '16',
+    airSpeedLevelTextColor: '#000000',
     backgroundColor: 'transparent',
     borderRadius: '5'
   }
@@ -57,7 +119,7 @@ export const option = {
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = WeatherConfig.key
-  public attr = { ...chartInitConfig, zIndex: 1, w: 181, h: 44 }
+  public attr = { ...chartInitConfig, zIndex: 1, w: 300, h: 60 }
   public chartConfig = cloneDeep(WeatherConfig)
   public option = cloneDeep(option)
 }

 <template>
   <CollapseItem name="天气配置" :expanded="true">
-    <SettingItemBox name="区域选择">
-      <SelectCity @submit="onHandleSelectValues" />
-    </SettingItemBox>
+    <SettingItemBox name="区域选择"> </SettingItemBox>
+    <SelectCity @submit="onHandleSelectValues" />
     <SettingItemBox name="背景">
       <SettingItem name="颜色">
         <n-color-picker v-model:value="optionData.weatherCss.backgroundColor" />
@@ -55,6 +54,19 @@
         <n-button size="small" @click="optionData.weatherCss.airSpeedTextColor = '#000000'"> 恢复默认颜色 </n-button>
       </SettingItem>
     </SettingItemBox>
+    <SettingItemBox name="风速等级">
+      <SettingItem name="大小">
+        <n-input v-model:value="optionData.weatherCss.airSpeedLevelTextSize" />
+      </SettingItem>
+      <SettingItem name="颜色">
+        <n-color-picker v-model:value="optionData.weatherCss.airSpeedLevelTextColor" />
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.weatherCss.airSpeedLevelTextColor = '#000000'">
+          恢复默认颜色
+        </n-button>
+      </SettingItem>
+    </SettingItemBox>
   </CollapseItem>
 </template>
 

+import { weatherSpeedMapText, weatherTextMapImg } from '../config'
+
+export const useUtils = () => {
+  const loadWeatherImg = (text: string) => {
+    return (
+      weatherTextMapImg.find((item: any) => item.text === text)?.img ||
+      '/large-designer/src/assets/external/weather/clearDay.png'
+    )
+  }
+
+  //风力等级 ≤3 3
+  const loadWeatherLevel = (speed: string) => {
+    let handleSpeed = ''
+    if (speed?.startsWith('≤')) {
+      handleSpeed = speed.slice(1)
+    } else {
+      handleSpeed = speed
+    }
+    return weatherSpeedMapText.find((item: any) => item.level(Number(handleSpeed)))?.text
+  }
+  return {
+    loadWeatherImg,
+    loadWeatherLevel
+  }
+}

-<script lang="ts" setup>
+<script lang="ts" setup name="Weather">
 import { PropType, toRefs, onMounted, reactive, watch } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
-import { option, thirdPartyWeatherKey, thirdPartyWeatherApi, weatherTextMapImg } from './config'
+import { option, ThirdPartyWeather } from './config'
 import axios from 'axios'
 import WeatherContent from './componnets/WeatherContent.vue'
+import { useUtils } from './hooks/useUtils'
 
 const props = defineProps({
   chartConfig: {
@@ -12,6 +13,8 @@ const props = defineProps({
   }
 })
 
+const { loadWeatherImg, loadWeatherLevel } = useUtils()
+
 const { w, h } = toRefs(props.chartConfig.attr)
 
 const {
@@ -23,6 +26,8 @@ const {
   weatherIconSizeHeight,
   airSpeedTextSize,
   airSpeedTextColor,
+  airSpeedLevelTextSize,
+  airSpeedLevelTextColor,
   backgroundColor,
   borderRadius
 } = toRefs(props.chartConfig.option.weatherCss)
@@ -31,17 +36,16 @@ const weatherInfoValues: any = reactive({
   weatherInfo: []
 })
 
-//获取第三方服务（高德天气）
-const getWeatherInfos = async (cityObj: any, extensions = 'all') => {
+const getWeatherInfos = async (cityObj: any) => {
   const { cityValue, countyValue } = cityObj || props.chartConfig.option.dataset
   const params = {
-    key: thirdPartyWeatherKey,
+    key: ThirdPartyWeather.ak,
     city: !countyValue ? cityValue : countyValue,
-    extensions
+    extensions: ThirdPartyWeather.extensions
   } as any
   const {
     data: { forecasts }
-  } = await axios.get(thirdPartyWeatherApi, { params })
+  } = await axios.get(ThirdPartyWeather.api, { params })
   if (!forecasts) return
   weatherInfoValues.weatherInfo = forecasts
 }
@@ -64,45 +68,23 @@ watch(
 const onHandleSelectValues = (values: any) => {
   getWeatherInfos(values)
 }
-
-//根据返回的文字加载不同天气图片
-const loadWeatherImg = (text: string) => {
-  return (
-    weatherTextMapImg.find((item: any) => item.text === text)?.img ||
-    '/large-designer/src/assets/external/weather/clearDay.png'
-  )
-}
 </script>
 
 <template>
   <div>
     <n-popover placement="bottom" trigger="hover" raw :show-arrow="false">
       <template #trigger>
-        <n-card
-          class="card"
-          :bordered="false"
-          :style="`background-color:${backgroundColor};border-radius:${borderRadius}px;`"
-        >
+        <n-card class="card" :bordered="false">
           <div class="card-content" v-for="(item, index) in weatherInfoValues.weatherInfo" :key="index">
-            <div :style="`font-size:${temperatureTextSize}px;color:${temperatureTextColor};`">
-              {{ item?.casts[0]?.daytemp }}°C
-            </div>
-            <div class="card-content-city-text" :style="`font-size:${cityTextSize}px;color:${cityTextColor};`">
-              {{ item?.city }}
-            </div>
-            <div>
-              <img
-                :style="`width:${weatherIconSizeWidth}px;height:${weatherIconSizeHeight}px;`"
-                :src="loadWeatherImg(item?.casts[0]?.dayweather)"
-              />
-            </div>
-            <div :style="`font-size:${airSpeedTextSize}px;color:${airSpeedTextColor};`">
-              {{ item?.casts[0]?.daywind }}
-            </div>
+            <div class="weather-temp">{{ item?.casts[0]?.daytemp }}°C</div>
+            <div class="weather-city">{{ item?.city }}</div>
+            <div><img class="weather-img" :src="loadWeatherImg(item?.casts[0]?.dayweather)" /></div>
+            <div class="weather-speed">{{ item?.casts[0]?.daywind }}</div>
+            <div class="weather-speed-level">{{ loadWeatherLevel(item?.casts[0]?.daypower) }}</div>
           </div>
         </n-card>
       </template>
-      <div :style="`width:${300}px;height:${300}px;`">
+      <div class="popup-content">
         <WeatherContent :data="weatherInfoValues.weatherInfo" @submit="onHandleSelectValues" />
       </div>
     </n-popover>
@@ -110,22 +92,45 @@ const loadWeatherImg = (text: string) => {
 </template>
 
 <style lang="scss" scoped>
+.popup-content {
+  width: 300px;
+  height: 300px;
+}
 .card {
   width: v-bind('w+"px"');
   height: v-bind('h+"px"');
+  background-color: v-bind('backgroundColor');
+  border-radius: v-bind('`${borderRadius}px`');
   .card-content {
-    width: 100%;
     display: flex;
     justify-content: space-between;
-    img {
-      width: 24px;
-      height: 24px;
+    .weather-temp {
+      font-size: v-bind('`${temperatureTextSize}px`');
+      color: v-bind('temperatureTextColor');
     }
-    .card-content-city-text {
+    .weather-city {
       text-overflow: ellipsis;
       overflow: hidden;
       word-break: break-all;
       white-space: nowrap;
+      font-size: v-bind('`${cityTextSize}px`');
+      color: v-bind('cityTextColor');
+    }
+    .weather-img {
+      width: v-bind('`${weatherIconSizeWidth}px`');
+      height: v-bind('`${weatherIconSizeHeight}px`');
+    }
+    .weather-speed {
+      font-size: v-bind('`${airSpeedTextSize}px`');
+      color: v-bind('airSpeedTextColor');
+    }
+    .weather-speed-level {
+      font-size: v-bind('`${airSpeedLevelTextSize}px`');
+      color: v-bind('airSpeedLevelTextColor');
+    }
+    img {
+      width: 24px;
+      height: 24px;
     }
   }
 }

-import cloneDeep from 'lodash/cloneDeep'
-import { PublicConfigClass } from '@/packages/public'
-import { CreateComponentType } from '@/packages/index.d'
-import { chartInitConfig } from '@/settings/designSetting'
-import { COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum'
-import { interactActions, ComponentInteractEventEnum } from './interact'
-import { OverrideInputsTabConfig } from './index'
-
-export const option = {
-  // 时间组件展示类型，必须和 interactActions 中定义的数据一致
-  [COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATA,
-  // 默认值
-  tabLabel: '选项1',
-  // 样式
-  tabType: 'segment',
-  // 暴露配置内容给用户
-  dataset: [
-    {
-      label: '选项1',
-      value: '1'
-    },
-    {
-      label: '选项2',
-      value: '2'
-    },
-    {
-      label: '选项3',
-      value: '3'
-    }
-  ],
-  customTabCss: {
-    labelTextSize: '16',
-    labelDefaultColor: 'black',
-    labelActiveColor: 'green',
-    tabBottomBarColor: 'green',
-    segmentationBgColor: 'white',
-    segmentationActiveBgColor: '#C0C0C0'
-  }
-}
-
-export default class Config extends PublicConfigClass implements CreateComponentType {
-  public key = OverrideInputsTabConfig.key
-  public attr = { ...chartInitConfig, w: 460, h: 32, zIndex: -1 }
-  public chartConfig = cloneDeep(OverrideInputsTabConfig)
-  public interactActions = interactActions
-  public option = cloneDeep(option)
-}

-<template>
-  <collapse-item name="标签页配置" :expanded="true">
-    <setting-item-box name="默认值" :alone="true">
-      <n-select size="small" v-model:value="optionData.tabType" :options="tabTypeOptions" @change="onHandleSelect" />
-    </setting-item-box>
-    <setting-item-box name="默认文字" :alone="true">
-      <SettingItem name="大小">
-        <n-input v-model:value="optionData.customTabCss.labelTextSize" />
-      </SettingItem>
-      <SettingItem name="颜色">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="optionData.customTabCss.labelDefaultColor"
-        ></n-color-picker>
-      </SettingItem>
-      <SettingItem>
-        <n-button size="small" @click="optionData.customTabCss.labelDefaultColor = 'black'"> 恢复默认 </n-button>
-      </SettingItem>
-    </setting-item-box>
-    <setting-item-box name="激活文字" :alone="true">
-      <SettingItem name="颜色">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="optionData.customTabCss.labelActiveColor"
-        ></n-color-picker>
-      </SettingItem>
-      <SettingItem>
-        <n-button size="small" @click="optionData.customTabCss.labelActiveColor = 'green'"> 恢复默认 </n-button>
-      </SettingItem>
-    </setting-item-box>
-    <setting-item-box name="底部条颜色" :alone="true">
-      <SettingItem name="颜色">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="optionData.customTabCss.tabBottomBarColor"
-        ></n-color-picker>
-      </SettingItem>
-      <SettingItem>
-        <n-button size="small" @click="optionData.customTabCss.tabBottomBarColor = 'green'"> 恢复默认 </n-button>
-      </SettingItem>
-    </setting-item-box>
-    <setting-item-box v-if="optionData.tabType === 'segment'" name="分段背景色" :alone="true">
-      <SettingItem name="颜色">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="optionData.customTabCss.segmentationBgColor"
-        ></n-color-picker>
-      </SettingItem>
-      <SettingItem>
-        <n-button size="small" @click="optionData.customTabCss.segmentationBgColor = 'white'"> 恢复默认 </n-button>
-      </SettingItem>
-    </setting-item-box>
-    <setting-item-box v-if="optionData.tabType === 'segment'" name="分段激活色" :alone="true">
-      <SettingItem name="颜色">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="optionData.customTabCss.segmentationActiveBgColor"
-        ></n-color-picker>
-      </SettingItem>
-      <SettingItem>
-        <n-button size="small" @click="optionData.customTabCss.segmentationActiveBgColor = '#C0C0C0'">
-          恢复默认
-        </n-button>
-      </SettingItem>
-    </setting-item-box>
-  </collapse-item>
-</template>
-
-<script lang="ts" setup>
-import { PropType } from 'vue'
-import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
-import { option } from './config'
-
-const props = defineProps({
-  optionData: {
-    type: Object as PropType<typeof option>,
-    required: true
-  }
-})
-
-const tabTypeOptions = [
-  {
-    label: '线条',
-    value: 'bar'
-  },
-  {
-    label: '分段',
-    value: 'segment'
-  }
-]
-const onHandleSelect = (value: string) => {
-  if (value === 'bar') {
-    props.optionData.customTabCss.segmentationBgColor = ''
-    props.optionData.customTabCss.segmentationActiveBgColor = ''
-
-  }
-}
-</script>

-
-
-import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
-import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Informations/index.d'
-import { useWidgetKey } from '@/packages/external/useWidgetKey'
-
-const { key, conKey, chartKey } = useWidgetKey('OverrideInputsTab', true)
-
-export const OverrideInputsTabConfig: ConfigType = {
-  key,
-  chartKey,
-  conKey,
-  title: '自定义标签选择器',
-  category: ChatCategoryEnum.MORE,
-  categoryName: ChatCategoryEnumName.MORE,
-  package: PackagesCategoryEnum.INFORMATIONS,
-  chartFrame: ChartFrameEnum.COMMON,        
-  image: 'inputs_tab.png'
-}

-<template>
-  <n-tabs class="override-n-tabs" :type="option.value.tabType" @update:value="onChange">
-    <n-tab v-for="(item, index) in option.value.dataset" :name="item.label" :key="index"> {{ item.label }} </n-tab>
-  </n-tabs>
-</template>
-
-<script setup lang="ts">
-import { PropType, toRefs, shallowReactive, watch } from 'vue'
-import cloneDeep from 'lodash/cloneDeep'
-import { CreateComponentType } from '@/packages/index.d'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { useChartInteract } from '@/hooks'
-import { InteractEventOn } from '@/enums/eventEnum'
-import { ComponentInteractParamsEnum } from './interact'
-
-const props = defineProps({
-  chartConfig: {
-    type: Object as PropType<CreateComponentType>,
-    required: true
-  }
-})
-
-const { w, h } = toRefs(props.chartConfig.attr)
-
-const {
-  labelTextSize,
-  labelDefaultColor,
-  labelActiveColor,
-  tabBottomBarColor,
-  segmentationBgColor,
-  segmentationActiveBgColor
-} = toRefs(props.chartConfig.option.customTabCss)
-
-const option = shallowReactive({
-  value: cloneDeep(props.chartConfig.option)
-})
-
-// 监听事件改变
-const onChange = (v: string) => {
-  if (v === undefined) return
-  const selectItem = option.value.dataset.find((item: { label: string; value: any }) => item.label === v)
-  // 存储到联动数据
-  useChartInteract(
-    props.chartConfig,
-    useChartEditStore,
-    { [ComponentInteractParamsEnum.DATA]: selectItem.value },
-    InteractEventOn.CHANGE
-  )
-}
-
-// 手动更新
-watch(
-  () => props.chartConfig.option,
-  (newData: any) => {
-    option.value = newData
-    onChange(newData.tabValue)
-  },
-  {
-    immediate: true,
-    deep: true
-  }
-)
-</script>
-
-<style lang="scss" scoped>
-@include deep() {
-  .n-tabs-tab {
-    font-size: v-bind('labelTextSize+"px"') !important;
-    color: v-bind('labelDefaultColor') !important;
-  }
-  .n-tabs-tab--active {
-    color: v-bind('labelActiveColor') !important;
-    background-color: v-bind('segmentationActiveBgColor') !important;
-  }
-  .n-tabs-bar {
-    background-color: v-bind('tabBottomBarColor') !important;
-  }
-  .n-tabs-rail {
-    background-color: v-bind('segmentationBgColor') !important;
-  }
-}
-</style>

-import { InteractEventOn, InteractActionsType } from '@/enums/eventEnum'
-
-// 时间组件类型
-export enum ComponentInteractEventEnum {
-  DATA = 'data'
-}
-
-// 联动参数
-export enum ComponentInteractParamsEnum {
-  DATA = 'data'
-}
-
-// 定义组件触发回调事件
-export const interactActions: InteractActionsType[] = [
-  {
-    interactType: InteractEventOn.CHANGE,
-    interactName: '选择完成',
-    componentEmitEvents: {
-      [ComponentInteractEventEnum.DATA]: [
-        {
-          value: ComponentInteractParamsEnum.DATA,
-          label: '选择项'
-        }
-      ]
-    }
-  }
-]

@@ -86,7 +86,7 @@
 
 <script lang="ts" setup>
 import { PropType } from 'vue'
-import { CollapseItem, SettingItemBox } from '@/components/Pages/ChartItemSetting'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { option } from './config'
 
 defineProps({

@@ -7,7 +7,6 @@ import { OverrideImageConfig } from '@/packages/components/external/Informations
 import { OverrideCarouselConfig } from '@/packages/components/external/Informations/Mores/OverrideCarousel'
 import { OverrideSelectConfig } from '@/packages/components/external/Informations/Mores/OverrideSelect'
 import { OverrideInputsDateConfig } from '@/packages/components/external/Informations/Mores/OverrideInputsDate'
-import { OverrideInputsTabConfig } from '@/packages/components/external/Informations/Mores/OverrideInputsTab'
 
 export function useInjectLib(packagesList: EPackagesType) {
 
@@ -19,7 +18,6 @@ export function useInjectLib(packagesList: EPackagesType) {
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideCarouselConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideSelectConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideInputsDateConfig)
-  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideInputsTabConfig)
 }
 
 /**