perf: 优化iframe

src/packages/components/Informations/Mores/Iframe/config.ts

@@ -1,11 +1,12 @@
 import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
 import { IframeConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 
 export const option = {
   // 网站路径
-  dataset: "https://www.bilibili.com/",
+  dataset: "http://www.mtruning.club:81/",
   // 圆角
   borderRadius: 10
 }
@@ -13,6 +14,7 @@ export const option = {
 export default class Config extends PublicConfigClass implements CreateComponentType
 {
   public key = IframeConfig.key
+  public attr = { ...chartInitConfig, w: 800, h: 800, zIndex: -1 }
   public chartConfig = cloneDeep(IframeConfig)
   public option = cloneDeep(option)
 }

src/packages/components/Informations/Mores/Iframe/index.ts

@@ -1,4 +1,4 @@
-import image from '@/assets/images/chart/informations/photo.png'
+import image from '@/assets/images/chart/informations/iframe.png'
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
@@ -6,7 +6,7 @@ export const IframeConfig: ConfigType = {
   key: 'Iframe',
   chartKey: 'VIframe',
   conKey: 'VCIframe',
-  title: 'Iframe',
+  title: '远程网页',
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.INFORMATIONS,

src/packages/components/Informations/Mores/Iframe/index.vue

@@ -1,50 +1,49 @@
 <template>
   <div :style="getStyle(borderRadius)">
-    <iframe :src="option.dataset" :width="w" :height="h"></iframe>
+    <iframe :src="option.dataset" :width="w" :height="h" style="border-width: 0"></iframe>
   </div>
 </template>
 
 <script setup lang="ts">
-import { PropType, shallowReactive, watch, toRefs } from "vue";
-import { useChartDataFetch } from "@/hooks";
-import { CreateComponentType } from "@/packages/index.d";
-import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore";
+import { PropType, shallowReactive, watch, toRefs } from 'vue'
+import { useChartDataFetch } from '@/hooks'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 
 const props = defineProps({
   chartConfig: {
     type: Object as PropType<CreateComponentType>,
-    required: true,
-  },
-});
+    required: true
+  }
+})
 
-const { w, h } = toRefs(props.chartConfig.attr);
-const { dataset, borderRadius } = toRefs(props.chartConfig.option);
+const { w, h } = toRefs(props.chartConfig.attr)
+const { borderRadius } = toRefs(props.chartConfig.option)
 
 const option = shallowReactive({
-  dataset: "",
-});
+  dataset: ''
+})
 
 const getStyle = (radius: number) => {
   return {
     borderRadius: `${radius}px`,
-    overflow: "hidden",
-  };
-};
+    overflow: 'hidden'
+  }
+}
 
 // 编辑更新
 watch(
   () => props.chartConfig.option.dataset,
-  (newData: any) => {
-    option.dataset = newData;
+  (newData: string) => {
+    option.dataset = newData
   },
   {
-    immediate: true,
-    deep: false,
+    immediate: true
   }
-);
+)
 
 // 预览更新
-useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
-  option.dataset = newData;
-});
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
+  option.dataset = newData
+})
 </script>

src/packages/components/Informations/Mores/Image/index.vue

@@ -46,8 +46,7 @@ watch(
     option.dataset = newData
   },
   {
-    immediate: true,
-    deep: false
+    immediate: true
   }
 )
 

src/packages/components/Informations/Mores/Video/index.ts

@@ -10,6 +10,6 @@ export const VideoConfig: ConfigType = {
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.INFORMATIONS,
-  chartFrame: ChartFrameEnum.ECHARTS,
+  chartFrame: ChartFrameEnum.COMMON,
   image
 }

src/packages/components/Informations/Mores/index.ts

@@ -3,4 +3,4 @@ import { IframeConfig } from './Iframe/index'
 import { VideoConfig } from './Video/index'
 import { WordCloudConfig } from './WordCloud/index'
 
-export default [ImageConfig, VideoConfig, WordCloudConfig,IframeConfig]
+export default [WordCloudConfig, ImageConfig, VideoConfig, IframeConfig]