Merge branch 'main' of http://123.132.248.154:10000/gitY/LinYeFangHuo

src/packages/components/Icons/Default/Icon/index.vue

@@ -67,24 +67,19 @@
     }
   }
   const clickBtn = () => {
-    console.log('单击');
     eventHandlerHook(chartEditStore.getComponentList, clickElementItem.value);
   };
   const dblclickBtn = () => {
-    console.log('双击');
     eventHandlerHook(chartEditStore.getComponentList, dbclickElementItem.value);
   };
   const rightclickBtn = (event) => {
-    console.log('右击');
     event.preventDefault(); // 阻止默认的右键菜单
     eventHandlerHook(chartEditStore.getComponentList, rightclickElementItem.value);
   };
   const mouseenterBtn = () => {
-    console.log('鼠标移入');
     eventHandlerHook(chartEditStore.getComponentList, mouseenterElementItem.value);
   };
   const mouseleaveBtn = () => {
-    console.log('鼠标移出');
     eventHandlerHook(chartEditStore.getComponentList, mouseleaveElementItem.value);
   };
 </script>

src/views/chart/ContentConfigurations/index.vue

@@ -37,7 +37,13 @@
         </n-tabs>
 
         <!-- 编辑 -->
-        <n-tabs v-if="selectTarget" v-model:value="tabsSelect" class="tabs-box" size="small" type="segment">
+        <n-tabs
+          v-if="selectTarget"
+          v-model:value="tabsSelect"
+          class="tabs-box"
+          size="small"
+          type="segment"
+        >
           <n-tab-pane
             v-for="item in selectTarget.isGroup ? chartsDefaultTabList : chartsTabList"
             :key="item.key"
@@ -62,111 +68,119 @@
 </template>
 
 <script setup lang="ts">
-import { ref, toRefs, watch, computed } from 'vue'
-import { icon } from '@/plugins'
-import { loadAsyncComponent ,acquiesceAsyncComponent} from '@/utils'
-import { ContentBox } from '../ContentBox/index'
-import { TabsEnum } from './index.d'
-import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
-import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+  import { ref, toRefs, watch, computed } from 'vue';
+  import { icon } from '@/plugins';
+  import { loadAsyncComponent, acquiesceAsyncComponent } from '@/utils';
+  import { ContentBox } from '../ContentBox/index';
+  import { TabsEnum } from './index.d';
+  import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore';
+  import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d';
+  import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
 
-const { getDetails } = toRefs(useChartLayoutStore())
-const { setItem } = useChartLayoutStore()
-const chartEditStore = useChartEditStore()
+  const { getDetails } = toRefs(useChartLayoutStore());
+  const { setItem } = useChartLayoutStore();
+  const chartEditStore = useChartEditStore();
 
-const { ConstructIcon, FlashIcon, DesktopOutlineIcon, LeafIcon, RocketIcon } = icon.ionicons5
+  const { ConstructIcon, FlashIcon, DesktopOutlineIcon, LeafIcon, RocketIcon } = icon.ionicons5;
 
-const ContentEdit = loadAsyncComponent(() => import('../ContentEdit/index.vue'))
-const CanvasPage = acquiesceAsyncComponent(() => import('./components/CanvasPage/index.vue'))
-const ChartSetting = loadAsyncComponent(() => import('./components/ChartSetting/index.vue'))
-const ChartData = loadAsyncComponent(() => import('./components/ChartData/index.vue'))
-const ChartEvent = loadAsyncComponent(() => import('./components/ChartEvent/index.vue'))
-const ChartAnimation = loadAsyncComponent(() => import('./components/ChartAnimation/index.vue'))
+  const ContentEdit = loadAsyncComponent(() => import('../ContentEdit/index.vue'));
+  const CanvasPage = acquiesceAsyncComponent(() => import('./components/CanvasPage/index.vue'));
+  const ChartSetting = loadAsyncComponent(() => import('./components/ChartSetting/index.vue'));
+  const ChartData = loadAsyncComponent(() => import('./components/ChartData/index.vue'));
+  const ChartEvent = loadAsyncComponent(() => import('./components/ChartEvent/index.vue'));
+  const ChartAnimation = loadAsyncComponent(() => import('./components/ChartAnimation/index.vue'));
 
-const collapsed = ref<boolean>(getDetails.value)
-const tabsSelect = ref<TabsEnum>(TabsEnum.CHART_SETTING)
+  const collapsed = ref<boolean>(getDetails.value);
+  const tabsSelect = ref<TabsEnum>(TabsEnum.CHART_SETTING);
 
-const collapsedHandle = () => {
-  collapsed.value = true
-  setItem(ChartLayoutStoreEnum.DETAILS, true)
-}
+  const collapsedHandle = () => {
+    collapsed.value = true;
+    setItem(ChartLayoutStoreEnum.DETAILS, true);
+  };
 
-const expandHandle = () => {
-  collapsed.value = false
-  setItem(ChartLayoutStoreEnum.DETAILS, false)
-}
+  const expandHandle = () => {
+    collapsed.value = false;
+    setItem(ChartLayoutStoreEnum.DETAILS, false);
+  };
 
-const selectTarget = computed(() => {
-  const selectId = chartEditStore.getTargetChart.selectId
-  // 排除多个
-  if (selectId.length !== 1) return undefined
-  const target = chartEditStore.componentList[chartEditStore.fetchTargetIndex()]
-  if (target?.isGroup) {
-    // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-    tabsSelect.value = TabsEnum.CHART_SETTING
-  }
-  return target
-})
+  const selectTarget = computed(() => {
+    const selectId = chartEditStore.getTargetChart.selectId;
+    // 排除多个
+    if (selectId.length !== 1) return undefined;
+    const target = chartEditStore.componentList[chartEditStore.fetchTargetIndex()];
+    if (target?.isGroup) {
+      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+      tabsSelect.value = TabsEnum.CHART_SETTING;
+    }
+    return target;
+  });
 
-watch(getDetails, newData => {
-  if (newData) {
-    collapsedHandle()
-  } else {
-    expandHandle()
-  }
-})
+  watch(getDetails, (newData) => {
+    if (newData) {
+      collapsedHandle();
+    } else {
+      expandHandle();
+    }
+  });
 
-// 页面设置
-const globalTabList = [
-  {
-    key: TabsEnum.PAGE_SETTING,
-    title: '页面配置',
-    icon: DesktopOutlineIcon,
-    render: CanvasPage
-  }
-]
+  // 页面设置
+  const globalTabList = [
+    {
+      key: TabsEnum.PAGE_SETTING,
+      title: '页面配置',
+      icon: DesktopOutlineIcon,
+      render: CanvasPage,
+    },
+  ];
+  const defaultTabList = [
+    {
+      key: TabsEnum.CHART_SETTING,
+      title: '定制',
+      icon: ConstructIcon,
+      render: ChartSetting,
+    },
+    {
+      key: TabsEnum.CHART_ANIMATION,
+      title: '动画',
+      icon: LeafIcon,
+      render: ChartAnimation,
+    },
+  ];
+  const chartsDefaultTabList = [
+    ...defaultTabList,
+    {
+      key: TabsEnum.CHART_EVENT,
+      title: '事件',
+      icon: RocketIcon,
+      render: ChartEvent,
+    },
+  ];
 
-const chartsDefaultTabList = [
-  {
-    key: TabsEnum.CHART_SETTING,
-    title: '定制',
-    icon: ConstructIcon,
-    render: ChartSetting
-  },
-  {
-    key: TabsEnum.CHART_ANIMATION,
-    title: '动画',
-    icon: LeafIcon,
-    render: ChartAnimation
-  }
-]
-
-const chartsTabList = [
-  ...chartsDefaultTabList,
-  {
-    key: TabsEnum.CHART_DATA,
-    title: '数据',
-    icon: FlashIcon,
-    render: ChartData
-  },
-  {
-    key: TabsEnum.CHART_EVENT,
-    title: '事件',
-    icon: RocketIcon,
-    render: ChartEvent
-  }
-]
+  const chartsTabList = [
+    ...defaultTabList,
+    {
+      key: TabsEnum.CHART_DATA,
+      title: '数据',
+      icon: FlashIcon,
+      render: ChartData,
+    },
+    {
+      key: TabsEnum.CHART_EVENT,
+      title: '事件',
+      icon: RocketIcon,
+      render: ChartEvent,
+    },
+  ];
 </script>
 
 <style lang="scss" scoped>
-@include go(content-configurations) {
-  overflow: hidden;
-  .tabs-box {
-    padding: 10px;
-    .icon-position {
-      padding-top: 2px;
+  @include go(content-configurations) {
+    overflow: hidden;
+    .tabs-box {
+      padding: 10px;
+      .icon-position {
+        padding-top: 2px;
+      }
     }
   }
-}
 </style>

src/views/chart/ContentEdit/components/EditGroup/index.vue

@@ -12,7 +12,7 @@
         ...useSizeStyle(groupData.attr),
         ...getFilterStyle(groupData.styles),
         ...getTransformStyle(groupData.styles),
-        ...getBlendModeStyle(groupData.styles) as any
+        ...(getBlendModeStyle(groupData.styles) as any),
       }"
       @click="mouseClickHandle($event, groupData)"
       @mousedown="mousedownHandle($event, groupData)"
@@ -29,7 +29,7 @@
         :item="item"
         :hiddenPoint="true"
         :style="{
-          ...useComponentStyle(item.attr, groupIndex)
+          ...useComponentStyle(item.attr, groupIndex),
         }"
       >
         <component
@@ -42,7 +42,7 @@
           :style="{
             ...useSizeStyle(item.attr),
             ...getFilterStyle(item.styles),
-            ...getTransformStyle(item.styles)
+            ...getTransformStyle(item.styles),
           }"
         ></component>
       </edit-shape-box>
@@ -51,79 +51,88 @@
 </template>
 
 <script setup lang="ts">
-import { computed, PropType } from 'vue'
-import { MenuEnum } from '@/enums/editPageEnum'
-import { chartColors } from '@/settings/chartThemes/index'
-import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
-import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d'
-import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle, colorCustomMerge } from '@/utils'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { useContextMenu, divider } from '@/views/chart/hooks/useContextMenu.hook'
-import { useMouseHandle } from '../../hooks/useDrag.hook'
-import { useComponentStyle, useSizeStyle } from '../../hooks/useStyle.hook'
-import { EditShapeBox } from '../../components/EditShapeBox'
+  import { computed, PropType } from 'vue';
+  import { MenuEnum } from '@/enums/editPageEnum';
+  import { chartColors } from '@/settings/chartThemes/index';
+  import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d';
+  import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d';
+  import {
+    animationsClass,
+    getFilterStyle,
+    getTransformStyle,
+    getBlendModeStyle,
+    colorCustomMerge,
+  } from '@/utils';
+  import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
+  import { useContextMenu, divider } from '@/views/chart/hooks/useContextMenu.hook';
+  import { useMouseHandle } from '../../hooks/useDrag.hook';
+  import { useComponentStyle, useSizeStyle } from '../../hooks/useStyle.hook';
+  import { EditShapeBox } from '../../components/EditShapeBox';
 
-const props = defineProps({
-  groupData: {
-    type: Object as PropType<CreateComponentGroupType>,
-    required: true
-  },
-  groupIndex: {
-    type: Number,
-    required: true
-  }
-})
+  const props = defineProps({
+    groupData: {
+      type: Object as PropType<CreateComponentGroupType>,
+      required: true,
+    },
+    groupIndex: {
+      type: Number,
+      required: true,
+    },
+  });
 
-const chartEditStore = useChartEditStore()
-const { handleContextMenu } = useContextMenu()
+  const chartEditStore = useChartEditStore();
+  const { handleContextMenu } = useContextMenu();
 
-// 点击事件
-const { mouseenterHandle, mouseleaveHandle, mousedownHandle, mouseClickHandle } = useMouseHandle()
+  // 点击事件
+  const { mouseenterHandle, mouseleaveHandle, mousedownHandle, mouseClickHandle } =
+    useMouseHandle();
 
-// 右键
-const optionsHandle = (
-  targetList: MenuOptionsItemType[],
-  allList: MenuOptionsItemType[],
-  targetInstance: CreateComponentType
-) => {
-  const filter = (menulist: MenuEnum[]) => {
-    return allList.filter(i => menulist.includes(i.key as MenuEnum))
-  }
+  // 右键
+  const optionsHandle = (
+    targetList: MenuOptionsItemType[],
+    allList: MenuOptionsItemType[],
+    targetInstance: CreateComponentType,
+  ) => {
+    const filter = (menulist: MenuEnum[]) => {
+      return allList.filter((i) => menulist.includes(i.key as MenuEnum));
+    };
 
-  // 多选处理
-  if (chartEditStore.getTargetChart.selectId.length > 1) {
-    return filter([MenuEnum.GROUP, MenuEnum.DELETE])
-  } else {
-    const statusMenuEnums: MenuEnum[] = []
-    if (targetInstance.status.lock) {
-      statusMenuEnums.push(MenuEnum.LOCK)
+    // 多选处理
+    if (chartEditStore.getTargetChart.selectId.length > 1) {
+      return filter([MenuEnum.GROUP, MenuEnum.DELETE]);
     } else {
-      statusMenuEnums.push(MenuEnum.UNLOCK)
+      const statusMenuEnums: MenuEnum[] = [];
+      if (targetInstance.status.lock) {
+        statusMenuEnums.push(MenuEnum.LOCK);
+      } else {
+        statusMenuEnums.push(MenuEnum.UNLOCK);
+      }
+      if (targetInstance.status.hide) {
+        statusMenuEnums.push(MenuEnum.HIDE);
+      } else {
+        statusMenuEnums.push(MenuEnum.SHOW);
+      }
+      // 单选
+      const singleMenuEnums = [MenuEnum.UN_GROUP];
+      return [
+        ...filter(singleMenuEnums),
+        divider(),
+        ...targetList.filter((i) => !statusMenuEnums.includes(i.key as MenuEnum)),
+      ];
     }
-    if (targetInstance.status.hide) {
-      statusMenuEnums.push(MenuEnum.HIDE)
-    } else {
-      statusMenuEnums.push(MenuEnum.SHOW)
-    }
-    // 单选
-    const singleMenuEnums = [MenuEnum.UN_GROUP]
-    return [
-      ...filter(singleMenuEnums),
-      divider(),
-      ...targetList.filter(i => !statusMenuEnums.includes(i.key as MenuEnum))
-    ]
-  }
-}
+  };
 
-// 配置项
-const themeColor = computed(() => {
-  const colorCustomMergeData = colorCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)
-  return colorCustomMergeData[chartEditStore.getEditCanvasConfig.chartThemeColor]
-})
+  // 配置项
+  const themeColor = computed(() => {
+    const colorCustomMergeData = colorCustomMerge(
+      chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo,
+    );
+    return colorCustomMergeData[chartEditStore.getEditCanvasConfig.chartThemeColor];
+  });
 
-// 主题色
-const themeSetting = computed(() => {
-  const chartThemeSetting = chartEditStore.getEditCanvasConfig.chartThemeSetting
-  return chartThemeSetting
-})
+  // 主题色
+  const themeSetting = computed(() => {
+    const chartThemeSetting = chartEditStore.getEditCanvasConfig.chartThemeSetting;
+    return chartThemeSetting;
+  });
 </script>

src/views/chart/ContentEdit/components/EditShapeBox/index.vue

@@ -21,149 +21,149 @@
 </template>
 
 <script setup lang="ts">
-import { computed, PropType } from 'vue'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
+  import { computed, PropType } from 'vue';
+  import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
+  import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d';
 
-import { useDesignStore } from '@/store/modules/designStore/designStore'
-import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
-import { useSizeStyle, usePointStyle } from '../../hooks/useStyle.hook'
-import { useMousePointHandle } from '../../hooks/useDrag.hook'
+  import { useDesignStore } from '@/store/modules/designStore/designStore';
+  import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d';
+  import { useSizeStyle, usePointStyle } from '../../hooks/useStyle.hook';
+  import { useMousePointHandle } from '../../hooks/useDrag.hook';
 
-const props = defineProps({
-  item: {
-    type: Object as PropType<CreateComponentType | CreateComponentGroupType>,
-    required: true
-  },
-  hiddenPoint: {
-    type: Boolean,
-    required: false
-  }
-})
+  const props = defineProps({
+    item: {
+      type: Object as PropType<CreateComponentType | CreateComponentGroupType>,
+      required: true,
+    },
+    hiddenPoint: {
+      type: Boolean,
+      required: false,
+    },
+  });
 
-const designStore = useDesignStore()
-const chartEditStore = useChartEditStore()
+  const designStore = useDesignStore();
+  const chartEditStore = useChartEditStore();
 
-// 锚点
-const pointList = ['t', 'r', 'b', 'l', 'lt', 'rt', 'lb', 'rb']
+  // 锚点
+  const pointList = ['t', 'r', 'b', 'l', 'lt', 'rt', 'lb', 'rb'];
 
-// 光标朝向
-const cursorResize = ['n', 'e', 's', 'w', 'nw', 'ne', 'sw', 'se']
+  // 光标朝向
+  const cursorResize = ['n', 'e', 's', 'w', 'nw', 'ne', 'sw', 'se'];
 
-// 颜色
-const themeColor = computed(() => {
-  return designStore.getAppTheme
-})
+  // 颜色
+  const themeColor = computed(() => {
+    return designStore.getAppTheme;
+  });
 
-// 计算当前选中目标
-const hover = computed(() => {
-  const isDrag = chartEditStore.getEditCanvas[EditCanvasTypeEnum.IS_DRAG]
-  if (isDrag) return false
+  // 计算当前选中目标
+  const hover = computed(() => {
+    const isDrag = chartEditStore.getEditCanvas[EditCanvasTypeEnum.IS_DRAG];
+    if (isDrag) return false;
 
-  if (props.item.status.lock) return false
-  return props.item.id === chartEditStore.getTargetChart.hoverId
-})
+    if (props.item.status.lock) return false;
+    return props.item.id === chartEditStore.getTargetChart.hoverId;
+  });
 
-// 兼容多值场景
-const select = computed(() => {
-  const id = props.item.id
-  if (props.item.status.lock) return false
-  return chartEditStore.getTargetChart.selectId.find((e: string) => e === id)
-})
+  // 兼容多值场景
+  const select = computed(() => {
+    const id = props.item.id;
+    if (props.item.status.lock) return false;
+    return chartEditStore.getTargetChart.selectId.find((e: string) => e === id);
+  });
 
-// 锁定
-const lock = computed(() => {
-  return props.item.status.lock
-})
+  // 锁定
+  const lock = computed(() => {
+    return props.item.status.lock;
+  });
 
-// 隐藏
-const hide = computed(() => {
-  return props.item.status.hide
-})
+  // 隐藏
+  const hide = computed(() => {
+    return props.item.status.hide;
+  });
 </script>
 
 <style lang="scss" scoped>
-@include go(shape-box) {
-  position: absolute;
-  cursor: move;
-
-  &.lock {
-    cursor: default !important;
-  }
-
-  &.hide {
-    display: none;
-  }
-
-  /* 锚点 */
-  .shape-point {
-    z-index: 1;
+  @include go(shape-box) {
     position: absolute;
-    width: 7px;
-    height: 7px;
-    border: 3px solid v-bind('themeColor');
-    border-radius: 5px;
-    background-color: #fff;
-    transform: translate(-40%, -30%);
-    &.t {
-      width: 30px;
-      transform: translate(-50%, -50%);
-    }
-    &.b {
-      width: 30px;
-      transform: translate(-50%, -30%);
-    }
-    &.l,
-    &.r {
-      height: 30px;
-    }
-    &.r {
-      transform: translate(-20%, -50%);
-    }
-    &.l {
-      transform: translate(-45%, -50%);
-    }
-    &.rt,
-    &.rb {
-      transform: translate(-30%, -30%);
-    }
-  }
-  /* 选中 */
-  .shape-modal {
-    position: absolute;
-    top: 0;
-    left: 0;
+    cursor: move;
 
-    .shape-modal-select,
-    .shape-modal-change {
+    &.lock {
+      cursor: default !important;
+    }
+
+    &.hide {
+      display: none;
+    }
+
+    /* 锚点 */
+    .shape-point {
+      z-index: 1;
       position: absolute;
-      width: 100%;
-      height: 100%;
-      border-radius: 4px;
+      width: 7px;
+      height: 7px;
+      border: 3px solid v-bind('themeColor');
+      border-radius: 5px;
+      background-color: #fff;
+      transform: translate(-40%, -30%);
+      &.t {
+        width: 30px;
+        transform: translate(-50%, -50%);
+      }
+      &.b {
+        width: 30px;
+        transform: translate(-50%, -30%);
+      }
+      &.l,
+      &.r {
+        height: 30px;
+      }
+      &.r {
+        transform: translate(-20%, -50%);
+      }
+      &.l {
+        transform: translate(-45%, -50%);
+      }
+      &.rt,
+      &.rb {
+        transform: translate(-30%, -30%);
+      }
     }
+    /* 选中 */
+    .shape-modal {
+      position: absolute;
+      top: 0;
+      left: 0;
 
-    .shape-modal-select {
-      opacity: 0.1;
-      top: 2px;
-      left: 2px;
-      &.active {
-        background-color: v-bind('themeColor');
+      .shape-modal-select,
+      .shape-modal-change {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        border-radius: 4px;
       }
-    }
-    .shape-modal-change {
-      border: 2px solid rgba(0, 0, 0, 0);
-      &.selectActive,
-      &.hoverActive {
-        border-color: v-bind('themeColor');
-        border-width: 2px;
+
+      .shape-modal-select {
+        opacity: 0.1;
+        top: 2px;
+        left: 2px;
+        &.active {
+          background-color: v-bind('themeColor');
+        }
       }
-      &.hoverActive {
-        border-style: dotted;
-      }
-      &.selectActive {
-        border-style: solid;
+      .shape-modal-change {
+        border: 2px solid rgba(0, 0, 0, 0);
+        &.selectActive,
+        &.hoverActive {
+          border-color: v-bind('themeColor');
+          border-width: 2px;
+        }
+        &.hoverActive {
+          border-style: dotted;
+        }
+        &.selectActive {
+          border-style: solid;
+        }
       }
     }
   }
-}
 </style>

src/views/preview/components/PreviewRenderGroup/index.vue

@@ -5,6 +5,11 @@
       ...getSizeStyle(groupData.attr),
       ...getFilterStyle(groupData.styles),
     }"
+    @click="clickBtn"
+    @dblclick="dblclickBtn"
+    @contextmenu="rightclickBtn"
+    @mouseenter="mouseenterBtn"
+    @mouseleave="mouseleaveBtn"
   >
     <div
       class="chart-item"
@@ -36,7 +41,7 @@
 </template>
 
 <script setup lang="ts">
-  import { PropType } from 'vue';
+  import { PropType, ref } from 'vue';
   import { CreateComponentGroupType } from '@/packages/index.d';
   import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils';
   import {
@@ -46,7 +51,10 @@
     getPreviewConfigStyle,
   } from '../../utils';
   import { useLifeHandler } from '@/hooks';
+  import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
+  import { eventHandlerHook } from '@/hooks/eventHandler.hook';
 
+  const chartEditStore = useChartEditStore();
   const props = defineProps({
     groupData: {
       type: Object as PropType<CreateComponentGroupType>,
@@ -65,6 +73,58 @@
       required: true,
     },
   });
+  console.log(props.groupData);
+  // 单击交互
+  const clickElementItem = ref([]);
+  // 双击交互
+  const dbclickElementItem = ref([]);
+  // 右击交互
+  const rightclickElementItem = ref([]);
+  // 鼠标移入交互
+  const mouseenterElementItem = ref([]);
+  // 鼠标移出交互
+  const mouseleaveElementItem = ref([]);
+
+  const list = props.groupData.events.interactConfigEvents;
+  for (let i = 0; i < list.length; i++) {
+    if (list[i].type == 'click') {
+      for (let j = 0; j < list[i].movementList.length; j++) {
+        clickElementItem.value.push(list[i].movementList[j]);
+      }
+    } else if (list[i].type == 'dblclick') {
+      for (let j = 0; j < list[i].movementList.length; j++) {
+        dbclickElementItem.value.push(list[i].movementList[j]);
+      }
+    } else if (list[i].type == 'rightclick') {
+      for (let j = 0; j < list[i].movementList.length; j++) {
+        rightclickElementItem.value.push(list[i].movementList[j]);
+      }
+    } else if (list[i].type == 'mousein') {
+      for (let j = 0; j < list[i].movementList.length; j++) {
+        mouseenterElementItem.value.push(list[i].movementList[j]);
+      }
+    } else if (list[i].type == 'mouseout') {
+      for (let j = 0; j < list[i].movementList.length; j++) {
+        mouseleaveElementItem.value.push(list[i].movementList[j]);
+      }
+    }
+  }
+  const clickBtn = () => {
+    eventHandlerHook(chartEditStore.getComponentList, clickElementItem.value);
+  };
+  const dblclickBtn = () => {
+    eventHandlerHook(chartEditStore.getComponentList, dbclickElementItem.value);
+  };
+  const rightclickBtn = (event) => {
+    event.preventDefault(); // 阻止默认的右键菜单
+    eventHandlerHook(chartEditStore.getComponentList, rightclickElementItem.value);
+  };
+  const mouseenterBtn = () => {
+    eventHandlerHook(chartEditStore.getComponentList, mouseenterElementItem.value);
+  };
+  const mouseleaveBtn = () => {
+    eventHandlerHook(chartEditStore.getComponentList, mouseleaveElementItem.value);
+  };
 </script>
 
 <style lang="scss" scoped>