From c4fcb4b516d4765176fa656bc75d92318fd9aa8f Mon Sep 17 00:00:00 2001
From: wuyuting1 <wuyuting1@gt.cn>
Date: Fri, 28 Oct 2022 11:38:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0iframe=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Informations/Mores/Iframe/config.ts       | 18 +++++++
 .../Informations/Mores/Iframe/config.vue      | 36 +++++++++++++
 .../Informations/Mores/Iframe/index.ts        | 15 ++++++
 .../Informations/Mores/Iframe/index.vue       | 50 +++++++++++++++++++
 .../components/Informations/Mores/index.ts    |  3 +-
 5 files changed, 121 insertions(+), 1 deletion(-)
 create mode 100644 src/packages/components/Informations/Mores/Iframe/config.ts
 create mode 100644 src/packages/components/Informations/Mores/Iframe/config.vue
 create mode 100644 src/packages/components/Informations/Mores/Iframe/index.ts
 create mode 100644 src/packages/components/Informations/Mores/Iframe/index.vue

diff --git a/src/packages/components/Informations/Mores/Iframe/config.ts b/src/packages/components/Informations/Mores/Iframe/config.ts
new file mode 100644
index 00000000..67e50c92
--- /dev/null
+++ b/src/packages/components/Informations/Mores/Iframe/config.ts
@@ -0,0 +1,18 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { IframeConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  // 网站路径
+  dataset: "https://www.bilibili.com/",
+  // 圆角
+  borderRadius: 10
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType
+{
+  public key = IframeConfig.key
+  public chartConfig = cloneDeep(IframeConfig)
+  public option = cloneDeep(option)
+}
diff --git a/src/packages/components/Informations/Mores/Iframe/config.vue b/src/packages/components/Informations/Mores/Iframe/config.vue
new file mode 100644
index 00000000..cb9562fd
--- /dev/null
+++ b/src/packages/components/Informations/Mores/Iframe/config.vue
@@ -0,0 +1,36 @@
+<template>
+  <collapse-item name="属性" :expanded="true">
+    <setting-item-box name="路径" :alone="true">
+      <setting-item>
+        <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>
diff --git a/src/packages/components/Informations/Mores/Iframe/index.ts b/src/packages/components/Informations/Mores/Iframe/index.ts
new file mode 100644
index 00000000..1f7d2817
--- /dev/null
+++ b/src/packages/components/Informations/Mores/Iframe/index.ts
@@ -0,0 +1,15 @@
+import image from '@/assets/images/chart/informations/photo.png'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
+
+export const IframeConfig: ConfigType = {
+  key: 'Iframe',
+  chartKey: 'VIframe',
+  conKey: 'VCIframe',
+  title: 'Iframe',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.COMMON,
+  image
+}
diff --git a/src/packages/components/Informations/Mores/Iframe/index.vue b/src/packages/components/Informations/Mores/Iframe/index.vue
new file mode 100644
index 00000000..4fb79275
--- /dev/null
+++ b/src/packages/components/Informations/Mores/Iframe/index.vue
@@ -0,0 +1,50 @@
+<template>
+  <div :style="getStyle(borderRadius)">
+    <iframe :src="option.dataset" :width="w" :height="h"></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";
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true,
+  },
+});
+
+const { w, h } = toRefs(props.chartConfig.attr);
+const { dataset, 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: any) => {
+    option.dataset = newData;
+  },
+  {
+    immediate: true,
+    deep: false,
+  }
+);
+
+// 预览更新
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  option.dataset = newData;
+});
+</script>
diff --git a/src/packages/components/Informations/Mores/index.ts b/src/packages/components/Informations/Mores/index.ts
index deddc1ac..e4c6d988 100644
--- a/src/packages/components/Informations/Mores/index.ts
+++ b/src/packages/components/Informations/Mores/index.ts
@@ -1,5 +1,6 @@
 import { ImageConfig } from './Image/index'
+import { IframeConfig } from './Iframe/index'
 import { VideoConfig } from './Video/index'
 import { WordCloudConfig } from './WordCloud/index'
 
-export default [ImageConfig, VideoConfig, WordCloudConfig]
+export default [ImageConfig, VideoConfig, WordCloudConfig,IframeConfig]