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,105 +68,113 @@
 </template>
 
 <script setup lang="ts">
-import { ref, toRefs, watch, computed } from 'vue'
+  import { ref, toRefs, watch, computed } from 'vue';
-import { icon } from '@/plugins'
+  import { icon } from '@/plugins';
-import { loadAsyncComponent ,acquiesceAsyncComponent} from '@/utils'
+  import { loadAsyncComponent, acquiesceAsyncComponent } from '@/utils';
-import { ContentBox } from '../ContentBox/index'
+  import { ContentBox } from '../ContentBox/index';
-import { TabsEnum } from './index.d'
+  import { TabsEnum } from './index.d';
-import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
+  import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore';
-import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
+  import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d';
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+  import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
 
-const { getDetails } = toRefs(useChartLayoutStore())
+  const { getDetails } = toRefs(useChartLayoutStore());
-const { setItem } = useChartLayoutStore()
+  const { setItem } = useChartLayoutStore();
-const chartEditStore = useChartEditStore()
+  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 ContentEdit = loadAsyncComponent(() => import('../ContentEdit/index.vue'));
-const CanvasPage = acquiesceAsyncComponent(() => import('./components/CanvasPage/index.vue'))
+  const CanvasPage = acquiesceAsyncComponent(() => import('./components/CanvasPage/index.vue'));
-const ChartSetting = loadAsyncComponent(() => import('./components/ChartSetting/index.vue'))
+  const ChartSetting = loadAsyncComponent(() => import('./components/ChartSetting/index.vue'));
-const ChartData = loadAsyncComponent(() => import('./components/ChartData/index.vue'))
+  const ChartData = loadAsyncComponent(() => import('./components/ChartData/index.vue'));
-const ChartEvent = loadAsyncComponent(() => import('./components/ChartEvent/index.vue'))
+  const ChartEvent = loadAsyncComponent(() => import('./components/ChartEvent/index.vue'));
-const ChartAnimation = loadAsyncComponent(() => import('./components/ChartAnimation/index.vue'))
+  const ChartAnimation = loadAsyncComponent(() => import('./components/ChartAnimation/index.vue'));
 
-const collapsed = ref<boolean>(getDetails.value)
+  const collapsed = ref<boolean>(getDetails.value);
-const tabsSelect = ref<TabsEnum>(TabsEnum.CHART_SETTING)
+  const tabsSelect = ref<TabsEnum>(TabsEnum.CHART_SETTING);
 
-const collapsedHandle = () => {
+  const collapsedHandle = () => {
-  collapsed.value = true
+    collapsed.value = true;
-  setItem(ChartLayoutStoreEnum.DETAILS, true)
+    setItem(ChartLayoutStoreEnum.DETAILS, true);
-}
+  };
 
-const expandHandle = () => {
+  const expandHandle = () => {
-  collapsed.value = false
+    collapsed.value = false;
-  setItem(ChartLayoutStoreEnum.DETAILS, false)
+    setItem(ChartLayoutStoreEnum.DETAILS, false);
-}
+  };
 
-const selectTarget = computed(() => {
+  const selectTarget = computed(() => {
-  const selectId = chartEditStore.getTargetChart.selectId
+    const selectId = chartEditStore.getTargetChart.selectId;
     // 排除多个
-  if (selectId.length !== 1) return undefined
+    if (selectId.length !== 1) return undefined;
-  const target = chartEditStore.componentList[chartEditStore.fetchTargetIndex()]
+    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
+      tabsSelect.value = TabsEnum.CHART_SETTING;
     }
-  return target
+    return target;
-})
+  });
 
-watch(getDetails, newData => {
+  watch(getDetails, (newData) => {
     if (newData) {
-    collapsedHandle()
+      collapsedHandle();
     } else {
-    expandHandle()
+      expandHandle();
     }
-})
+  });
 
-// 页面设置
+  // 页面设置
-const globalTabList = [
+  const globalTabList = [
     {
       key: TabsEnum.PAGE_SETTING,
       title: '页面配置',
       icon: DesktopOutlineIcon,
-    render: CanvasPage
+      render: CanvasPage,
-  }
+    },
-]
+  ];
-
+  const defaultTabList = [
-const chartsDefaultTabList = [
     {
       key: TabsEnum.CHART_SETTING,
       title: '定制',
       icon: ConstructIcon,
-    render: ChartSetting
+      render: ChartSetting,
     },
     {
       key: TabsEnum.CHART_ANIMATION,
       title: '动画',
       icon: LeafIcon,
-    render: ChartAnimation
+      render: ChartAnimation,
-  }
+    },
-]
+  ];
+  const chartsDefaultTabList = [
+    ...defaultTabList,
+    {
+      key: TabsEnum.CHART_EVENT,
+      title: '事件',
+      icon: RocketIcon,
+      render: ChartEvent,
+    },
+  ];
 
-const chartsTabList = [
+  const chartsTabList = [
-  ...chartsDefaultTabList,
+    ...defaultTabList,
     {
       key: TabsEnum.CHART_DATA,
       title: '数据',
       icon: FlashIcon,
-    render: ChartData
+      render: ChartData,
     },
     {
       key: TabsEnum.CHART_EVENT,
       title: '事件',
       icon: RocketIcon,
-    render: ChartEvent
+      render: ChartEvent,
-  }
+    },
-]
+  ];
 </script>
 
 <style lang="scss" scoped>
-@include go(content-configurations) {
+  @include go(content-configurations) {
     overflow: hidden;
     .tabs-box {
       padding: 10px;
@@ -168,5 +182,5 @@ const chartsTabList = [
         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 { computed, PropType } from 'vue';
-import { MenuEnum } from '@/enums/editPageEnum'
+  import { MenuEnum } from '@/enums/editPageEnum';
-import { chartColors } from '@/settings/chartThemes/index'
+  import { chartColors } from '@/settings/chartThemes/index';
-import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
+  import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d';
-import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d'
+  import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d';
-import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle, colorCustomMerge } from '@/utils'
+  import {
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+    animationsClass,
-import { useContextMenu, divider } from '@/views/chart/hooks/useContextMenu.hook'
+    getFilterStyle,
-import { useMouseHandle } from '../../hooks/useDrag.hook'
+    getTransformStyle,
-import { useComponentStyle, useSizeStyle } from '../../hooks/useStyle.hook'
+    getBlendModeStyle,
-import { EditShapeBox } from '../../components/EditShapeBox'
+    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({
+  const props = defineProps({
     groupData: {
       type: Object as PropType<CreateComponentGroupType>,
-    required: true
+      required: true,
     },
     groupIndex: {
       type: Number,
-    required: true
+      required: true,
-  }
+    },
-})
+  });
 
-const chartEditStore = useChartEditStore()
+  const chartEditStore = useChartEditStore();
-const { handleContextMenu } = useContextMenu()
+  const { handleContextMenu } = useContextMenu();
 
-// 点击事件
+  // 点击事件
-const { mouseenterHandle, mouseleaveHandle, mousedownHandle, mouseClickHandle } = useMouseHandle()
+  const { mouseenterHandle, mouseleaveHandle, mousedownHandle, mouseClickHandle } =
+    useMouseHandle();
 
-// 右键
+  // 右键
-const optionsHandle = (
+  const optionsHandle = (
     targetList: MenuOptionsItemType[],
     allList: MenuOptionsItemType[],
-  targetInstance: CreateComponentType
+    targetInstance: CreateComponentType,
-) => {
+  ) => {
     const filter = (menulist: MenuEnum[]) => {
-    return allList.filter(i => menulist.includes(i.key as MenuEnum))
+      return allList.filter((i) => menulist.includes(i.key as MenuEnum));
-  }
+    };
 
     // 多选处理
     if (chartEditStore.getTargetChart.selectId.length > 1) {
-    return filter([MenuEnum.GROUP, MenuEnum.DELETE])
+      return filter([MenuEnum.GROUP, MenuEnum.DELETE]);
     } else {
-    const statusMenuEnums: MenuEnum[] = []
+      const statusMenuEnums: MenuEnum[] = [];
       if (targetInstance.status.lock) {
-      statusMenuEnums.push(MenuEnum.LOCK)
+        statusMenuEnums.push(MenuEnum.LOCK);
       } else {
-      statusMenuEnums.push(MenuEnum.UNLOCK)
+        statusMenuEnums.push(MenuEnum.UNLOCK);
       }
       if (targetInstance.status.hide) {
-      statusMenuEnums.push(MenuEnum.HIDE)
+        statusMenuEnums.push(MenuEnum.HIDE);
       } else {
-      statusMenuEnums.push(MenuEnum.SHOW)
+        statusMenuEnums.push(MenuEnum.SHOW);
       }
       // 单选
-    const singleMenuEnums = [MenuEnum.UN_GROUP]
+      const singleMenuEnums = [MenuEnum.UN_GROUP];
       return [
         ...filter(singleMenuEnums),
         divider(),
-      ...targetList.filter(i => !statusMenuEnums.includes(i.key as MenuEnum))
+        ...targetList.filter((i) => !statusMenuEnums.includes(i.key as MenuEnum)),
-    ]
+      ];
     }
-}
+  };
 
-// 配置项
+  // 配置项
-const themeColor = computed(() => {
+  const themeColor = computed(() => {
-  const colorCustomMergeData = colorCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)
+    const colorCustomMergeData = colorCustomMerge(
-  return colorCustomMergeData[chartEditStore.getEditCanvasConfig.chartThemeColor]
+      chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo,
-})
+    );
+    return colorCustomMergeData[chartEditStore.getEditCanvasConfig.chartThemeColor];
+  });
 
-// 主题色
+  // 主题色
-const themeSetting = computed(() => {
+  const themeSetting = computed(() => {
-  const chartThemeSetting = chartEditStore.getEditCanvasConfig.chartThemeSetting
+    const chartThemeSetting = chartEditStore.getEditCanvasConfig.chartThemeSetting;
-  return chartThemeSetting
+    return chartThemeSetting;
-})
+  });
 </script>

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

@@ -21,69 +21,69 @@
 </template>
 
 <script setup lang="ts">
-import { computed, PropType } from 'vue'
+  import { computed, PropType } from 'vue';
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+  import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
-import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
+  import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d';
 
-import { useDesignStore } from '@/store/modules/designStore/designStore'
+  import { useDesignStore } from '@/store/modules/designStore/designStore';
-import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
+  import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d';
-import { useSizeStyle, usePointStyle } from '../../hooks/useStyle.hook'
+  import { useSizeStyle, usePointStyle } from '../../hooks/useStyle.hook';
-import { useMousePointHandle } from '../../hooks/useDrag.hook'
+  import { useMousePointHandle } from '../../hooks/useDrag.hook';
 
-const props = defineProps({
+  const props = defineProps({
     item: {
       type: Object as PropType<CreateComponentType | CreateComponentGroupType>,
-    required: true
+      required: true,
     },
     hiddenPoint: {
       type: Boolean,
-    required: false
+      required: false,
-  }
+    },
-})
+  });
 
-const designStore = useDesignStore()
+  const designStore = useDesignStore();
-const chartEditStore = useChartEditStore()
+  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(() => {
+  const themeColor = computed(() => {
-  return designStore.getAppTheme
+    return designStore.getAppTheme;
-})
+  });
 
-// 计算当前选中目标
+  // 计算当前选中目标
-const hover = computed(() => {
+  const hover = computed(() => {
-  const isDrag = chartEditStore.getEditCanvas[EditCanvasTypeEnum.IS_DRAG]
+    const isDrag = chartEditStore.getEditCanvas[EditCanvasTypeEnum.IS_DRAG];
-  if (isDrag) return false
+    if (isDrag) return false;
 
-  if (props.item.status.lock) return false
+    if (props.item.status.lock) return false;
-  return props.item.id === chartEditStore.getTargetChart.hoverId
+    return props.item.id === chartEditStore.getTargetChart.hoverId;
-})
+  });
 
-// 兼容多值场景
+  // 兼容多值场景
-const select = computed(() => {
+  const select = computed(() => {
-  const id = props.item.id
+    const id = props.item.id;
-  if (props.item.status.lock) return false
+    if (props.item.status.lock) return false;
-  return chartEditStore.getTargetChart.selectId.find((e: string) => e === id)
+    return chartEditStore.getTargetChart.selectId.find((e: string) => e === id);
-})
+  });
 
-// 锁定
+  // 锁定
-const lock = computed(() => {
+  const lock = computed(() => {
-  return props.item.status.lock
+    return props.item.status.lock;
-})
+  });
 
-// 隐藏
+  // 隐藏
-const hide = computed(() => {
+  const hide = computed(() => {
-  return props.item.status.hide
+    return props.item.status.hide;
-})
+  });
 </script>
 
 <style lang="scss" scoped>
-@include go(shape-box) {
+  @include go(shape-box) {
     position: absolute;
     cursor: move;
 
@@ -165,5 +165,5 @@ const hide = computed(() => {
         }
       }
     }
-}
+  }
 </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>