perf(src/packages): 优化自定义按钮点击切换

@@ -16,7 +16,6 @@ export const useChartInteract = (
   const chartEditStore = useChartEditStore()
   const { interactEvents } = chartConfig.events
   const { selectTargetItems } = chartConfig.option
-  const { data } = param
   const fnOnEvent = interactEvents.filter(item => {
     return item.interactOn === interactEventOn
   })
@@ -33,21 +32,32 @@ export const useChartInteract = (
         Header.value[key] = param[item.interactFn[key]]
       }
     })
-    setJump(selectTargetItems)
+    setTabJump(selectTargetItems)
   })
-  function setJump(selectTargetItems: string[]) {
-    console.log('当前选择的关联项', selectTargetItems)
+  function setTabJump(selectTargetItems: string[]) {
+    /**
+     * 逻辑
+     * 排除按钮组件
+     * 先遍历图表数组，只要是目标项，则认为是联动绑定，新增一个属性是否是联动组件设置为true
+     * 在遍历图表数组，只要是目标项并且是联动组件则显示，否则隐藏
+     */
     try {
-      console.log('当前页面所有的组件列表', chartEditStore.componentList)
+      chartEditStore.componentList.forEach((item: any) => {
+        if (item.key !== 'Button') {
+          if (selectTargetItems.includes(item.id)) {
+            item.isInteractComponent = true
+          }
+        }
+      })
       //优化循环性能
       for (let i = 0, len = chartEditStore.componentList.length; i < len; i++) {
         const compId = chartEditStore.componentList[i].id
-        const compItem = chartEditStore.componentList[i]
+        const compItem = chartEditStore.componentList[i] as any
         if (status) {
           if (compItem.key !== 'Button') {
-            if (selectTargetItems.includes(compId)) {
+            if (selectTargetItems.includes(compId) && compItem.isInteractComponent) {
               compItem.status.hide = false
-            } else {
+            } else if (!selectTargetItems.includes(compId) && compItem.isInteractComponent) {
               compItem.status.hide = true
             }
           }

@@ -29,31 +29,29 @@
       </setting-item>
     </setting-item-box>
     <setting-item-box :alone="true">
+      <setting-item name="按钮文字" :alone="true">
+        <n-input v-model:value="optionData.dataset" size="small" placeholder="按钮文字"></n-input>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box :alone="true">
       <template #name>
-        <n-text>跳转</n-text>
+        <n-text>目标</n-text>
         <n-tooltip trigger="hover">
           <template #trigger>
             <n-icon size="21" :depth="3">
               <help-outline-icon></help-outline-icon>
             </n-icon>
           </template>
-          <span class="help-span">{{ threeFileHelpMessgae }}</span>
+          <span class="help-span">{{ targetHelpMessgae }}</span>
         </n-tooltip>
       </template>
-      <setting-item name="按钮文字" :alone="true">
-        <n-input v-model:value="optionData.dataset" size="small" placeholder="按钮文字"></n-input>
-      </setting-item>
-    </setting-item-box>
-    <setting-item-box name="目标项">
-      <setting-item name="目标项" :alone="true">
-        <n-select
-          placeholder="请选择目标项"
-          multiple
-          size="small"
-          v-model:value="optionData.selectTargetItems"
-          :options="selectTargetItemOptions"
-        />
-      </setting-item>
+      <n-select
+        style="width: 13.5vw"
+        placeholder="请选择目标项"
+        multiple
+        v-model:value="optionData.selectTargetItems"
+        :options="selectTargetItemOptions"
+      />
     </setting-item-box>
   </collapse-item>
 </template>
@@ -76,7 +74,7 @@ const chartEditStore = useChartEditStore()
 
 const { HelpOutlineIcon } = icon.ionicons5
 
-const threeFileHelpMessgae = ref(`勾选当前项和跳转的目标项`)
+const targetHelpMessgae = ref(`勾选目标项,支持多个`)
 
 const buttonTypeOptions = [
   {

@@ -28,9 +28,11 @@ const props = defineProps({
 })
 
 const { w, h } = toRefs(props.chartConfig.attr)
+
 const { buttonType, buttonDashed, buttonGhost, buttonColor, buttonTextColor, buttonTextSize, dataset } = toRefs(
   props.chartConfig.option
 )
+
 const option = shallowReactive({
   value: cloneDeep(props.chartConfig.option)
 })