From fc1442bfbf64dd3c61a0c4ed06e98ac343d2a108 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E5=A6=8D?= <1455167345@qq.com>
Date: Mon, 3 Mar 2025 10:53:17 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=87=E6=9C=AC=E7=BB=84=E4=BB=B6=E3=80=81?=
 =?UTF-8?q?=E5=BC=B9=E5=B9=95=E6=96=87=E5=AD=97=E3=80=81=E6=B8=90=E5=8F=98?=
 =?UTF-8?q?=E6=96=87=E5=AD=97=E3=80=81=E5=9B=BE=E7=89=87=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E5=90=84=E7=A7=8D=E4=BA=8B=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Informations/Mores/Image/index.vue        | 135 ++++++++---
 .../Informations/Texts/TextBarrage/index.vue  | 221 ++++++++++++------
 .../Informations/Texts/TextCommon/index.vue   | 203 ++++++++++------
 .../Informations/Texts/TextGradient/index.vue | 136 ++++++++---
 .../components/PreviewRenderList/index.vue    |   4 +-
 5 files changed, 478 insertions(+), 221 deletions(-)

diff --git a/src/packages/components/Informations/Mores/Image/index.vue b/src/packages/components/Informations/Mores/Image/index.vue
index db15b56..9841be5 100644
--- a/src/packages/components/Informations/Mores/Image/index.vue
+++ b/src/packages/components/Informations/Mores/Image/index.vue
@@ -1,5 +1,12 @@
 <template>
-  <div :style="getStyle(borderRadius)">
+  <div
+    :style="getStyle(borderRadius)"
+    @click="clickBtn"
+    @dblclick="dblclickBtn"
+    @contextmenu="rightclickBtn"
+    @mouseenter="mouseenterBtn"
+    @mouseleave="mouseleaveBtn"
+  >
     <n-image
       :object-fit="fit"
       preview-disabled
@@ -13,46 +20,100 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, shallowReactive, watch, toRefs } from 'vue'
-import { requireErrorImg } from '@/utils'
-import { useChartDataFetch } from '@/hooks'
-import { CreateComponentType } from '@/packages/index.d'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+  import { PropType, shallowReactive, watch, toRefs, onMounted } from 'vue';
+  import { requireErrorImg } from '@/utils';
+  import { useChartDataFetch } from '@/hooks';
+  import { CreateComponentType } from '@/packages/index.d';
+  import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
+  import { eventHandlerHook } from '@/hooks/eventHandler.hook';
+  import { EventBus } from '@/utils/eventBus';
 
-const props = defineProps({
-  chartConfig: {
-    type: Object as PropType<CreateComponentType>,
-    required: true
-  }
-})
+  const chartEditStore = useChartEditStore();
+  const props = defineProps({
+    chartConfig: {
+      type: Object as PropType<CreateComponentType>,
+      required: true,
+    },
+  });
 
-const { w, h } = toRefs(props.chartConfig.attr)
-const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option)
+  const { w, h } = toRefs(props.chartConfig.attr);
+  const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option);
 
-const option = shallowReactive({
-  dataset: ''
-})
+  const option = shallowReactive({
+    dataset: '',
+  });
 
-const getStyle = (radius: number) => {
-  return {
-    borderRadius: `${radius}px`,
-    overflow: 'hidden'
-  }
-}
+  const getStyle = (radius: number) => {
+    return {
+      borderRadius: `${radius}px`,
+      overflow: 'hidden',
+      cursor: 'pointer',
+    };
+  };
 
-// 编辑更新
-watch(
-  () => props.chartConfig.option.dataset,
-  (newData: any) => {
-    option.dataset = newData
-  },
-  {
-    immediate: true
-  }
-)
+  // 编辑更新
+  watch(
+    () => props.chartConfig.option.dataset,
+    (newData: any) => {
+      option.dataset = newData;
+    },
+    {
+      immediate: true,
+    },
+  );
 
-// 预览更新
-useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
-  option.dataset = newData
-})
+  // 预览更新
+  useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+    option.dataset = newData;
+  });
+  const clickBtn = (val) => {
+    eventHandlerHook(
+      chartEditStore.getComponentList,
+      props.chartConfig.events.interactConfigEvents,
+      'click',
+      val,
+    );
+  };
+  const dblclickBtn = (val) => {
+    eventHandlerHook(
+      chartEditStore.getComponentList,
+      props.chartConfig.events.interactConfigEvents,
+      'dblclick',
+      val,
+    );
+  };
+  const rightclickBtn = (event) => {
+    event.preventDefault(); // 阻止默认的右键菜单
+    eventHandlerHook(
+      chartEditStore.getComponentList,
+      props.chartConfig.events.interactConfigEvents,
+      'rightclick',
+    );
+  };
+  const mouseenterBtn = (val) => {
+    eventHandlerHook(
+      chartEditStore.getComponentList,
+      props.chartConfig.events.interactConfigEvents,
+      'mousein',
+      val,
+    );
+  };
+  const mouseleaveBtn = (val) => {
+    eventHandlerHook(
+      chartEditStore.getComponentList,
+      props.chartConfig.events.interactConfigEvents,
+      'mouseout',
+      val,
+    );
+  };
+  onMounted(() => {
+    // 获取eventBus传过来的值
+    EventBus.on(props.chartConfig.id + 'dataupdate', (data) => {
+      console.log('data', data);
+    });
+    // websocket传过来的值
+    EventBus.on(props.chartConfig.id + 'websocket', (data) => {
+      console.log('data', data);
+    });
+  });
 </script>
diff --git a/src/packages/components/Informations/Texts/TextBarrage/index.vue b/src/packages/components/Informations/Texts/TextBarrage/index.vue
index 54e9df2..b9fc275 100644
--- a/src/packages/components/Informations/Texts/TextBarrage/index.vue
+++ b/src/packages/components/Informations/Texts/TextBarrage/index.vue
@@ -1,6 +1,13 @@
 <template>
   <div class="go-text-box">
-    <div class="content">
+    <div
+      class="content"
+      @click="clickBtn"
+      @dblclick="dblclickBtn"
+      @contextmenu="rightclickBtn"
+      @mouseenter="mouseenterBtn"
+      @mouseleave="mouseleaveBtn"
+    >
       <span>
         {{ option.dataset }}
       </span>
@@ -9,94 +16,156 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, toRefs, shallowReactive, watch, computed, ref } from 'vue'
-import { CreateComponentType } from '@/packages/index.d'
-import { useChartDataFetch } from '@/hooks'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { option as configOption } from './config'
-import { values } from 'lodash'
+  import { PropType, toRefs, shallowReactive, watch, computed, ref, onMounted } from 'vue';
+  import { CreateComponentType } from '@/packages/index.d';
+  import { useChartDataFetch } from '@/hooks';
+  import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
+  import { option as configOption } from './config';
+  import { values } from 'lodash';
+  import { eventHandlerHook } from '@/hooks/eventHandler.hook';
+  import { EventBus } from '@/utils/eventBus';
 
-const props = defineProps({
-  chartConfig: {
-    type: Object as PropType<CreateComponentType & typeof option>,
-    required: true
-  }
-})
+  const chartEditStore = useChartEditStore();
+  const props = defineProps({
+    chartConfig: {
+      type: Object as PropType<CreateComponentType & typeof option>,
+      required: true,
+    },
+  });
 
-const { w } = toRefs(props.chartConfig.attr)
+  const { w } = toRefs(props.chartConfig.attr);
 
-const { fontColor, fontSize, letterSpacing, fontWeight, animationTime, animationSpeed, boxShadow } = toRefs(
-  props.chartConfig.option
-)
+  const {
+    fontColor,
+    fontSize,
+    letterSpacing,
+    fontWeight,
+    animationTime,
+    animationSpeed,
+    boxShadow,
+  } = toRefs(props.chartConfig.option);
 
-const option = shallowReactive({
-  dataset: configOption.dataset
-})
+  const option = shallowReactive({
+    dataset: configOption.dataset,
+  });
 
-// 手动更新
-watch(
-  () => props.chartConfig.option.dataset,
-  (newData: any) => {
-    option.dataset = newData
-  },
-  {
-    immediate: true,
-    deep: false
-  }
-)
+  // 手动更新
+  watch(
+    () => props.chartConfig.option.dataset,
+    (newData: any) => {
+      option.dataset = newData;
+    },
+    {
+      immediate: true,
+      deep: false,
+    },
+  );
 
-//阴影
-watch(
-  props.chartConfig.option,
-  () => {
-    try {
-      if (props.chartConfig.option.showShadow) {
-        boxShadow.value = `${props.chartConfig.option.hShadow}px ${props.chartConfig.option.vShadow}px ${props.chartConfig.option.blurShadow}px ${props.chartConfig.option.colorShadow}`
-      } else {
-        boxShadow.value = 'none'
+  //阴影
+  watch(
+    props.chartConfig.option,
+    () => {
+      try {
+        if (props.chartConfig.option.showShadow) {
+          boxShadow.value = `${props.chartConfig.option.hShadow}px ${props.chartConfig.option.vShadow}px ${props.chartConfig.option.blurShadow}px ${props.chartConfig.option.colorShadow}`;
+        } else {
+          boxShadow.value = 'none';
+        }
+      } catch (error) {
+        console.log(error);
       }
-    } catch (error) {
-      console.log(error)
-    }
-  },
-  {
-    immediate: true
-  }
-)
+    },
+    {
+      immediate: true,
+    },
+  );
 
-const transitionDuration = computed(() => {
-  return Math.floor((w.value as any) / (animationSpeed.value as any))
-})
+  const transitionDuration = computed(() => {
+    return Math.floor((w.value as any) / (animationSpeed.value as any));
+  });
 
-// 预览更新
-useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
-  option.dataset = newData
-})
+  // 预览更新
+  useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
+    option.dataset = newData;
+  });
+
+  const clickBtn = (val) => {
+    eventHandlerHook(
+      chartEditStore.getComponentList,
+      props.chartConfig.events.interactConfigEvents,
+      'click',
+      val,
+    );
+  };
+  const dblclickBtn = (val) => {
+    eventHandlerHook(
+      chartEditStore.getComponentList,
+      props.chartConfig.events.interactConfigEvents,
+      'dblclick',
+      val,
+    );
+  };
+  const rightclickBtn = (event) => {
+    event.preventDefault(); // 阻止默认的右键菜单
+    eventHandlerHook(
+      chartEditStore.getComponentList,
+      props.chartConfig.events.interactConfigEvents,
+      'rightclick',
+    );
+  };
+  const mouseenterBtn = (val) => {
+    eventHandlerHook(
+      chartEditStore.getComponentList,
+      props.chartConfig.events.interactConfigEvents,
+      'mousein',
+      val,
+    );
+  };
+  const mouseleaveBtn = (val) => {
+    eventHandlerHook(
+      chartEditStore.getComponentList,
+      props.chartConfig.events.interactConfigEvents,
+      'mouseout',
+      val,
+    );
+  };
+  onMounted(() => {
+    // 获取eventBus传过来的值
+    EventBus.on(props.chartConfig.id + 'dataupdate', (data) => {
+      console.log('data', data);
+    });
+    // websocket传过来的值
+    EventBus.on(props.chartConfig.id + 'websocket', (data) => {
+      console.log('data', data);
+    });
+  });
 </script>
 
 <style lang="scss" scoped>
-@include go('text-box') {
-  display: flex;
-  align-items: center;
-  .content {
-    width: 100%;
-    color: v-bind('fontColor');
-    font-size: v-bind('fontSize + "px"');
-    letter-spacing: v-bind('letterSpacing + "px"');
-    font-weight: v-bind('fontWeight');
-    text-shadow: v-bind('boxShadow');
-    position: absolute;
-    animation: barrage v-bind('transitionDuration + "s"') linear v-bind('animationTime + "s"') infinite;
-  }
-  @keyframes barrage {
-    from {
-      left: 100%;
-      transform: translateX(0);
+  @include go('text-box') {
+    display: flex;
+    align-items: center;
+    .content {
+      cursor: pointer;
+      width: 100%;
+      color: v-bind('fontColor');
+      font-size: v-bind('fontSize + "px"');
+      letter-spacing: v-bind('letterSpacing + "px"');
+      font-weight: v-bind('fontWeight');
+      text-shadow: v-bind('boxShadow');
+      position: absolute;
+      animation: barrage v-bind('transitionDuration + "s"') linear v-bind('animationTime + "s"')
+        infinite;
     }
-    to {
-      left: 0;
-      transform: translateX(-100%);
+    @keyframes barrage {
+      from {
+        left: 100%;
+        transform: translateX(0);
+      }
+      to {
+        left: 0;
+        transform: translateX(-100%);
+      }
     }
   }
-}
 </style>
diff --git a/src/packages/components/Informations/Texts/TextCommon/index.vue b/src/packages/components/Informations/Texts/TextCommon/index.vue
index 70c31f3..28af03e 100644
--- a/src/packages/components/Informations/Texts/TextCommon/index.vue
+++ b/src/packages/components/Informations/Texts/TextCommon/index.vue
@@ -1,90 +1,155 @@
 <template>
   <div class="go-text-box">
     <div class="content">
-      <span style="cursor: pointer; white-space: pre-wrap" v-if="link" @click="click">{{ option.dataset }}</span>
-      <span style="white-space: pre-wrap" v-else>{{ option.dataset }}</span>
+      <span style="cursor: pointer; white-space: pre-wrap" v-if="link" @click="click">{{
+        option.dataset
+      }}</span>
+      <span
+        style="white-space: pre-wrap; cursor: pointer"
+        v-else
+        @click="clickBtn"
+        @dblclick="dblclickBtn"
+        @contextmenu="rightclickBtn"
+        @mouseenter="mouseenterBtn"
+        @mouseleave="mouseleaveBtn"
+        >{{ option.dataset }}</span
+      >
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { PropType, toRefs, shallowReactive, watch } from 'vue'
-import { CreateComponentType } from '@/packages/index.d'
-import { useChartDataFetch } from '@/hooks'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { option as configOption } from './config'
+  import { PropType, toRefs, shallowReactive, watch, onMounted } from 'vue';
+  import { CreateComponentType } from '@/packages/index.d';
+  import { useChartDataFetch } from '@/hooks';
+  import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
+  import { option as configOption } from './config';
+  import { eventHandlerHook } from '@/hooks/eventHandler.hook';
+  import { EventBus } from '@/utils/eventBus';
 
-const props = defineProps({
-  chartConfig: {
-    type: Object as PropType<CreateComponentType & typeof option>,
-    required: true
-  }
-})
+  const chartEditStore = useChartEditStore();
+  const props = defineProps({
+    chartConfig: {
+      type: Object as PropType<CreateComponentType & typeof option>,
+      required: true,
+    },
+  });
 
-const {
-  linkHead,
-  link,
-  fontColor,
-  fontSize,
-  letterSpacing,
-  paddingY,
-  paddingX,
-  textAlign,
-  borderWidth,
-  borderColor,
-  borderRadius,
-  writingMode,
-  backgroundColor,
-  fontWeight
-} = toRefs(props.chartConfig.option)
+  const {
+    linkHead,
+    link,
+    fontColor,
+    fontSize,
+    letterSpacing,
+    paddingY,
+    paddingX,
+    textAlign,
+    borderWidth,
+    borderColor,
+    borderRadius,
+    writingMode,
+    backgroundColor,
+    fontWeight,
+  } = toRefs(props.chartConfig.option);
 
-const option = shallowReactive({
-  dataset: configOption.dataset
-})
+  const option = shallowReactive({
+    dataset: configOption.dataset,
+  });
 
-// 手动更新
-watch(
-  () => props.chartConfig.option.dataset,
-  (newData: any) => {
-    option.dataset = newData
-  },
-  {
-    immediate: true,
-    deep: false
-  }
-)
+  // 手动更新
+  watch(
+    () => props.chartConfig.option.dataset,
+    (newData: any) => {
+      option.dataset = newData;
+    },
+    {
+      immediate: true,
+      deep: false,
+    },
+  );
 
-// 预览更新
-useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
-  option.dataset = newData
-})
+  // 预览更新
+  useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
+    option.dataset = newData;
+  });
 
-//打开链接
-const click = () => {
-  window.open(linkHead.value + link.value)
-}
+  //打开链接
+  const click = () => {
+    window.open(linkHead.value + link.value);
+  };
+
+  const clickBtn = (val) => {
+    eventHandlerHook(
+      chartEditStore.getComponentList,
+      props.chartConfig.events.interactConfigEvents,
+      'click',
+      val,
+    );
+  };
+  const dblclickBtn = (val) => {
+    eventHandlerHook(
+      chartEditStore.getComponentList,
+      props.chartConfig.events.interactConfigEvents,
+      'dblclick',
+      val,
+    );
+  };
+  const rightclickBtn = (event) => {
+    event.preventDefault(); // 阻止默认的右键菜单
+    eventHandlerHook(
+      chartEditStore.getComponentList,
+      props.chartConfig.events.interactConfigEvents,
+      'rightclick',
+    );
+  };
+  const mouseenterBtn = (val) => {
+    eventHandlerHook(
+      chartEditStore.getComponentList,
+      props.chartConfig.events.interactConfigEvents,
+      'mousein',
+      val,
+    );
+  };
+  const mouseleaveBtn = (val) => {
+    eventHandlerHook(
+      chartEditStore.getComponentList,
+      props.chartConfig.events.interactConfigEvents,
+      'mouseout',
+      val,
+    );
+  };
+  onMounted(() => {
+    // 获取eventBus传过来的值
+    EventBus.on(props.chartConfig.id + 'dataupdate', (data) => {
+      console.log('data', data);
+    });
+    // websocket传过来的值
+    EventBus.on(props.chartConfig.id + 'websocket', (data) => {
+      console.log('data', data);
+    });
+  });
 </script>
 
 <style lang="scss" scoped>
-@include go('text-box') {
-  display: flex;
-  align-items: center;
-  justify-content: v-bind('textAlign');
-  overflow: hidden;
+  @include go('text-box') {
+    display: flex;
+    align-items: center;
+    justify-content: v-bind('textAlign');
+    overflow: hidden;
 
-  .content {
-    color: v-bind('fontColor');
-    padding: v-bind('`${paddingY}px ${paddingX}px`');
-    font-size: v-bind('fontSize + "px"');
-    letter-spacing: v-bind('letterSpacing + "px"');
-    writing-mode: v-bind('writingMode');
-    font-weight: v-bind('fontWeight');
-    border-style: solid;
-    border-width: v-bind('borderWidth + "px"');
-    border-radius: v-bind('borderRadius + "px"');
-    border-color: v-bind('borderColor');
+    .content {
+      color: v-bind('fontColor');
+      padding: v-bind('`${paddingY}px ${paddingX}px`');
+      font-size: v-bind('fontSize + "px"');
+      letter-spacing: v-bind('letterSpacing + "px"');
+      writing-mode: v-bind('writingMode');
+      font-weight: v-bind('fontWeight');
+      border-style: solid;
+      border-width: v-bind('borderWidth + "px"');
+      border-radius: v-bind('borderRadius + "px"');
+      border-color: v-bind('borderColor');
 
-    background-color: v-bind('backgroundColor');
+      background-color: v-bind('backgroundColor');
+    }
   }
-}
 </style>
diff --git a/src/packages/components/Informations/Texts/TextGradient/index.vue b/src/packages/components/Informations/Texts/TextGradient/index.vue
index 3145090..0b1d481 100644
--- a/src/packages/components/Informations/Texts/TextGradient/index.vue
+++ b/src/packages/components/Informations/Texts/TextGradient/index.vue
@@ -1,54 +1,116 @@
 <template>
-  <div class="go-text-box">
+  <div
+    class="go-text-box"
+    @click="clickBtn"
+    @dblclick="dblclickBtn"
+    @contextmenu="rightclickBtn"
+    @mouseenter="mouseenterBtn"
+    @mouseleave="mouseleaveBtn"
+  >
     <n-gradient-text :size="size" :gradient="gradient">
       {{ option.dataset }}
     </n-gradient-text>
   </div>
 </template>
 <script setup lang="ts">
-import { PropType, toRefs, shallowReactive, watch } from 'vue'
-import { CreateComponentType } from '@/packages/index.d'
-import { useChartDataFetch } from '@/hooks'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { option as configOption } from './config'
+  import { PropType, toRefs, shallowReactive, watch, onMounted } from 'vue';
+  import { CreateComponentType } from '@/packages/index.d';
+  import { useChartDataFetch } from '@/hooks';
+  import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
+  import { option as configOption } from './config';
+  import { eventHandlerHook } from '@/hooks/eventHandler.hook';
+  import { EventBus } from '@/utils/eventBus';
 
-const props = defineProps({
-  chartConfig: {
-    type: Object as PropType<CreateComponentType>,
-    required: true
-  }
-})
+  const chartEditStore = useChartEditStore();
+  const props = defineProps({
+    chartConfig: {
+      type: Object as PropType<CreateComponentType>,
+      required: true,
+    },
+  });
 
-const option = shallowReactive({
-  dataset: configOption.dataset
-})
+  const option = shallowReactive({
+    dataset: configOption.dataset,
+  });
 
-const { w, h } = toRefs(props.chartConfig.attr)
-const { size, gradient } = toRefs(props.chartConfig.option)
+  const { w, h } = toRefs(props.chartConfig.attr);
+  const { size, gradient } = toRefs(props.chartConfig.option);
 
-watch(
-  () => props.chartConfig.option.dataset,
-  (newData: any) => {
-    option.dataset = newData
-  },
-  {
-    immediate: true,
-    deep: false
-  }
-)
+  watch(
+    () => props.chartConfig.option.dataset,
+    (newData: any) => {
+      option.dataset = newData;
+    },
+    {
+      immediate: true,
+      deep: false,
+    },
+  );
 
-useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
-  option.dataset = newData
-})
+  useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+    option.dataset = newData;
+  });
+
+  const clickBtn = (val) => {
+    eventHandlerHook(
+      chartEditStore.getComponentList,
+      props.chartConfig.events.interactConfigEvents,
+      'click',
+      val,
+    );
+  };
+  const dblclickBtn = (val) => {
+    eventHandlerHook(
+      chartEditStore.getComponentList,
+      props.chartConfig.events.interactConfigEvents,
+      'dblclick',
+      val,
+    );
+  };
+  const rightclickBtn = (event) => {
+    event.preventDefault(); // 阻止默认的右键菜单
+    eventHandlerHook(
+      chartEditStore.getComponentList,
+      props.chartConfig.events.interactConfigEvents,
+      'rightclick',
+    );
+  };
+  const mouseenterBtn = (val) => {
+    eventHandlerHook(
+      chartEditStore.getComponentList,
+      props.chartConfig.events.interactConfigEvents,
+      'mousein',
+      val,
+    );
+  };
+  const mouseleaveBtn = (val) => {
+    eventHandlerHook(
+      chartEditStore.getComponentList,
+      props.chartConfig.events.interactConfigEvents,
+      'mouseout',
+      val,
+    );
+  };
+  onMounted(() => {
+    // 获取eventBus传过来的值
+    EventBus.on(props.chartConfig.id + 'dataupdate', (data) => {
+      console.log('data', data);
+    });
+    // websocket传过来的值
+    EventBus.on(props.chartConfig.id + 'websocket', (data) => {
+      console.log('data', data);
+    });
+  });
 </script>
 
 <style lang="scss" scoped>
-@include go('text-box') {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  .n-gradient-text {
-    white-space: initial;
+  @include go('text-box') {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    .n-gradient-text {
+      white-space: initial;
+    }
   }
-}
 </style>
diff --git a/src/views/preview/components/PreviewRenderList/index.vue b/src/views/preview/components/PreviewRenderList/index.vue
index 9006e25..e262fae 100644
--- a/src/views/preview/components/PreviewRenderList/index.vue
+++ b/src/views/preview/components/PreviewRenderList/index.vue
@@ -12,7 +12,7 @@
       ...getPreviewConfigStyle(item.preview),
       ...(getBlendModeStyle(item.styles) as any),
       ...getSizeStyle(item.attr),
-      ...setMouseEventClose(item.option)
+      ...setMouseEventClose(item.option),
     }"
   >
     <!-- 分组 -->
@@ -24,7 +24,7 @@
       :themeColor="themeColor"
     />
 
-    <!-- 单组件 -->
+    <!-- 单组件 preview-->
     <component
       v-else
       :is="item.chartConfig.chartKey"