feat(packages/external): 重写远程网页，新增全屏按钮

+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 :style="getStyle(borderRadius)">
+    <div v-show="isShowSvg" @click="handleFullScreen" class="fullscreen-button">
+      <svg
+        focusable="false"
+        class=""
+        data-icon="fullscreen"
+        width="1em"
+        height="1em"
+        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="iframe-content"
+      :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('iframe-content') 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>
+.fullscreen-button {
+  cursor: pointer;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+</style>

@@ -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'
@@ -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)