Merge branch 'ft' into 'main_dev'

fix(packages/external): 修复小组件下图标配置显示不出来问题，原因（更新版本新增图标和此图标命名冲突）

See merge request yunteng/thingskit-view!74

@@ -10,7 +10,7 @@ export const useChartInteract = (
   chartConfig: CreateComponentType,
   useChartEditStore: ChartEditStoreType,
   param: { [T: string]: any },
-  interactEventOn: string,
+  interactEventOn: string
 ) => {
   const chartEditStore = useChartEditStore()
   const { interactEvents } = chartConfig.events
@@ -30,25 +30,28 @@ export const useChartInteract = (
         Header.value[key] = param[item.interactFn[key]]
       }
     })
-    updateIndex(chartConfig)
+    setJump(chartConfig)
   })
-
-  function updateIndex(chart: any) {
+  function setJump(chart: CreateComponentType) {
+    /**
+     * 通过页面显示隐藏来模拟页面跳转
+     * 当前点击对象和绑定的联动组件（分组或单个）内容隐藏，目标对象和绑定的联动组件（分组或单个）内容显示
+     */
     try {
       const targetId = chart.option.dataset[0].target
       const currentId = chart.option.dataset[0].current
-      const currentButtonId = chart.option.dataset[0].currentButton
       const targetButtonId = chart.option.dataset[0].targetButton
+      const currentButtonId = chart.option.dataset[0].currentButton
       const targetIndex = chartEditStore.fetchTargetIndex(targetId)
       const currentIndex = chartEditStore.fetchTargetIndex(currentId)
-      const currentButtonIndex = chartEditStore.fetchTargetIndex(currentButtonId)
       const targetButtonIndex = chartEditStore.fetchTargetIndex(targetButtonId)
+      const currentButtonIndex = chartEditStore.fetchTargetIndex(currentButtonId)
       chartEditStore.componentList[targetIndex].status.hide = false
       chartEditStore.componentList[currentIndex].status.hide = true
-      chartEditStore.componentList[currentButtonIndex].status.hide = true
       chartEditStore.componentList[targetButtonIndex].status.hide = false
-    } catch (e) {
-      console.error(e)
+      chartEditStore.componentList[currentButtonIndex].status.hide = true
+    } finally {
+      console.log()
     }
   }
 }

 import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
-import { ClockConfig } from './index'
+import { PickIconConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 import { IconBorderEnum, IconBorderStyleEnum, IconDynamicEffectEnum } from '../../../types'
 import { chartInitConfig } from '@/settings/designSetting'
@@ -32,8 +32,8 @@ export const option: IconOptions = {
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
-  public key = ClockConfig.key
+  public key = PickIconConfig.key
   public attr = { ...chartInitConfig, zIndex: 1, w: 50, h: 50 }
-  public chartConfig = cloneDeep(ClockConfig)
+  public chartConfig = cloneDeep(PickIconConfig)
   public option = cloneDeep(option)
 }

@@ -2,9 +2,9 @@ import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/ind
 import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Decorates/index.d'
 import { useWidgetKey } from '@/packages/external/useWidgetKey'
 
-const { key, conKey, chartKey } = useWidgetKey('Icon', true)
+const { key, conKey, chartKey } = useWidgetKey('PickIcon', true)
 
-export const ClockConfig: ConfigType = {
+export const PickIconConfig: ConfigType = {
   key,
   chartKey,
   conKey,
@@ -13,5 +13,5 @@ export const ClockConfig: ConfigType = {
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.DECORATES,
   chartFrame: ChartFrameEnum.STATIC,
-  image: 'clock1.png'
+  image: 'pickIcon.png'
 }

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { OverrideIframeConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  // 网站路径
+  dataset: "https://www.thingskit.com/",
+  // 圆角
+  borderRadius: 10
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType
+{
+  public key = OverrideIframeConfig.key
+  public attr = { ...chartInitConfig, w: 1200, h: 800, zIndex: -1 }
+  public chartConfig = cloneDeep(OverrideIframeConfig)
+  public option = cloneDeep(option)
+}

+<template>
+  <collapse-item name="属性" :expanded="true">
+    <setting-item-box name="路径" :alone="true">
+      <setting-item name="请填写 https 协议的网址">
+        <n-input v-model:value="optionData.dataset" size="small"></n-input>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="样式">
+      <setting-item name="圆角">
+        <n-input-number
+          v-model:value="optionData.borderRadius"
+          size="small"
+          :min="0"
+          placeholder="圆角"
+        ></n-input-number>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType } from "vue";
+import { option } from "./config";
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem,
+} from "@/components/Pages/ChartItemSetting";
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true,
+  },
+});
+</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('OverrideIframe', true)
+
+export const OverrideIframeConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '自定义远程网页',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.COMMON,        
+  image: 'iframe.png'
+}

+<template>
+  <div class="iframe-content" :style="getStyle(borderRadius)">
+    <div v-show="isShowSvg" @click="handleFullScreen" class="fullscreen-button">
+      <svg
+        focusable="false"
+        class=""
+        data-icon="fullscreen"
+        width="2.1vw"
+        height="2.1vh"
+        fill="currentColor"
+        aria-hidden="true"
+        viewBox="64 64 896 896"
+      >
+        <path
+          d="M290 236.4l43.9-43.9a8.01 8.01 0 00-4.7-13.6L169 160c-5.1-.6-9.5 3.7-8.9 8.9L179 329.1c.8 6.6 8.9 9.4 13.6 4.7l43.7-43.7L370 423.7c3.1 3.1 8.2 3.1 11.3 0l42.4-42.3c3.1-3.1 3.1-8.2 0-11.3L290 236.4zm352.7 187.3c3.1 3.1 8.2 3.1 11.3 0l133.7-133.6 43.7 43.7a8.01 8.01 0 0013.6-4.7L863.9 169c.6-5.1-3.7-9.5-8.9-8.9L694.8 179c-6.6.8-9.4 8.9-4.7 13.6l43.9 43.9L600.3 370a8.03 8.03 0 000 11.3l42.4 42.4zM845 694.9c-.8-6.6-8.9-9.4-13.6-4.7l-43.7 43.7L654 600.3a8.03 8.03 0 00-11.3 0l-42.4 42.3a8.03 8.03 0 000 11.3L734 787.6l-43.9 43.9a8.01 8.01 0 004.7 13.6L855 864c5.1.6 9.5-3.7 8.9-8.9L845 694.9zm-463.7-94.6a8.03 8.03 0 00-11.3 0L236.3 733.9l-43.7-43.7a8.01 8.01 0 00-13.6 4.7L160.1 855c-.6 5.1 3.7 9.5 8.9 8.9L329.2 845c6.6-.8 9.4-8.9 4.7-13.6L290 787.6 423.7 654c3.1-3.1 3.1-8.2 0-11.3l-42.4-42.4z"
+        ></path>
+      </svg>
+    </div>
+    <iframe
+      @mouseenter="handleMouseenter"
+      @mouseleave="handleMouseleave"
+      id="iframeContent"
+      :src="option.dataset"
+      :width="w"
+      :height="h"
+      style="border-width: 0"
+    ></iframe>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, shallowReactive, watch, toRefs, ref } from 'vue'
+import { useChartDataFetch } from '@/hooks'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useFullScreen } from '@/packages/components/external/Charts/utls/fullScreen'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const isShowSvg = ref(false)
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const { borderRadius } = toRefs(props.chartConfig.option)
+
+const option = shallowReactive({
+  dataset: ''
+})
+
+const getStyle = (radius: number) => {
+  return {
+    borderRadius: `${radius}px`,
+    overflow: 'hidden'
+  }
+}
+
+// 编辑更新
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: string) => {
+    option.dataset = newData
+  },
+  {
+    immediate: true
+  }
+)
+
+// 预览更新
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
+  option.dataset = newData
+})
+
+const handleFullScreen = () => {
+  const domName = document.getElementById('iframeContent') as HTMLElement
+  const htmlName = document.querySelector('html') as HTMLHtmlElement
+  useFullScreen(domName, htmlName)
+}
+
+const handleMouseenter = () => (isShowSvg.value = true)
+const handleMouseleave = () => (isShowSvg.value = false)
+</script>
+
+<style lang="scss" scoped>
+.iframe-content {
+  position: relative;
+  .fullscreen-button {
+    cursor: pointer;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+}
+</style>

@@ -32,10 +32,10 @@ export const option = {
   tabStyleOptions: {
     textColor: 'green',
     textActiveColor: 'black',
-    textBackgroundColor: '#ffffff',
+    textBackgroundColor: '#FFFFFF',
     tabBarColor: 'green',
-    segmentBackgroundColor: 'grey',
-    segmentActiveColor: 'white'
+    segmentBackgroundColor: '#F7F7FA',
+    segmentActiveColor: '#FFFFFF'
   }
 }
 

 import { EPackagesCategoryEnum, EPackagesType } from '@/packages/components/external/types'
 import { ComposesList } from '@/packages/components/external/Composes'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
-import { ClockConfig } from '@/packages/components/external/Decorates/Mores/Icon'
+import { PickIconConfig } from '@/packages/components/external/Decorates/Mores/PickIcon'
 import { WeatherConfig } from '@/packages/components/external/Decorates/Mores/Weather'
 import { OverrideImageConfig } from '@/packages/components/external/Informations/Mores/OverrideImage'
 import { OverrideCarouselConfig } from '@/packages/components/external/Informations/Mores/OverrideCarousel'
@@ -9,6 +9,7 @@ import { OverrideSelectConfig } from '@/packages/components/external/Information
 import { OverrideInputsDateConfig } from '@/packages/components/external/Informations/Mores/OverrideInputsDate'
 import { OverrideInputsTabConfig } from '@/packages/components/external/Informations/Mores/OverrideInputsTab'
 import { OverrideTextCommonConfig } from '@/packages/components/external/Informations/Mores/OverrideTextCommon'
+import { OverrideIframeConfig } from '@/packages/components/external/Informations/Mores/OverrideIframe'
 import { ButtonConfig } from '@/packages/components/external/Informations/Mores/Button'
 import { OverrideBarCommonConfig } from '@/packages/components/external/Charts/Bars/OverrideBarCommon'
 import { OverrideLineCommonConfig } from '@/packages/components/external/Charts/Lines/OverrideLineCommon'
@@ -18,7 +19,7 @@ export function useInjectLib(packagesList: EPackagesType) {
 
   packagesList[EPackagesCategoryEnum.COMPOSES] = ComposesList
 
-  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, ClockConfig)
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, PickIconConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, WeatherConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideImageConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideCarouselConfig)
@@ -27,6 +28,7 @@ export function useInjectLib(packagesList: EPackagesType) {
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideInputsTabConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideTextCommonConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, ButtonConfig)
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideIframeConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideBarCommonConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideLineCommonConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideLineGradientsConfig)

@@ -113,6 +113,19 @@ const setDynamicFormValue = (request: ExtraRequestConfigType) => {
   if (unref(bodyContentEl)) {
     unref(bodyContentEl)?.setConfigurationData(unref(getSelectedInterfaceBody), Body)
   }
+  /**
+   * ft 优化动态表单包含有entityType，则自动回填DEVICE
+   */
+  if(typeof request.requestParams ==='string' && request.requestParams) {
+     const DEVICE='DEVICE'
+     const {Params:includeEntityTypeByParams}=JSON.parse(request.requestParams as unknown as string) 
+     const findEntityType = includeEntityTypeByParams.find((item:Record<string,string>)=>item.key==='scope' && item.value==='entityType')
+     if(!findEntityType) return
+     if (unref(paramsDynamicFormEl)) unref(paramsDynamicFormEl)?.setConfigurationData({
+       [findEntityType?.value]:DEVICE
+     })
+  }
+  //ft
 }
 
 const getDynamicFormValue = (): Recordable => {