perf: 优化按钮点击切换

@@ -10,12 +10,13 @@ export const useChartInteract = (
   chartConfig: CreateComponentType,
   useChartEditStore: ChartEditStoreType,
   param: { [T: string]: any },
-  interactEventOn: string
+  interactEventOn: string,
+  status: boolean
 ) => {
   const chartEditStore = useChartEditStore()
   const { interactEvents } = chartConfig.events
-  const { selectCurrentItems } = chartConfig.option
   const { selectTargetItems } = chartConfig.option
+  const { data } = param
   const fnOnEvent = interactEvents.filter(item => {
     return item.interactOn === interactEventOn
   })
@@ -32,19 +33,24 @@ export const useChartInteract = (
         Header.value[key] = param[item.interactFn[key]]
       }
     })
-    setJump(selectCurrentItems, selectTargetItems)
+    setJump(selectTargetItems)
   })
-  function setJump(selectCurrentItems: string[], selectTargetItems: string[]) {
+  function setJump(selectTargetItems: string[]) {
+    console.log('当前选择的关联项', selectTargetItems)
     try {
+      console.log('当前页面所有的组件列表', chartEditStore.componentList)
       //优化循环性能
       for (let i = 0, len = chartEditStore.componentList.length; i < len; i++) {
         const compId = chartEditStore.componentList[i].id
         const compItem = chartEditStore.componentList[i]
-        if (selectCurrentItems.includes(compId)) {
-          compItem.status.hide = true
-        }
-        if (selectTargetItems.includes(compId)) {
-          compItem.status.hide = false
+        if (status) {
+          if (compItem.key !== 'Button') {
+            if (selectTargetItems.includes(compId)) {
+              compItem.status.hide = false
+            } else {
+              compItem.status.hide = true
+            }
+          }
         }
       }
     } finally {

@@ -18,7 +18,6 @@ export const option = {
   buttonColor: '',
   buttonTextColor: 'white',
   buttonTextSize: '16',
-  selectCurrentItems: [],
   selectTargetItems: []
 }
 

@@ -44,17 +44,6 @@
         <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.selectCurrentItems"
-          :options="selectCurrentItemOptions"
-        />
-      </setting-item>
-    </setting-item-box>
     <setting-item-box name="目标项">
       <setting-item name="目标项" :alone="true">
         <n-select
@@ -120,8 +109,6 @@ const buttonTypeOptions = [
   }
 ]
 
-const selectCurrentItemOptions = ref<{ label: string; value: string }[]>([])
-
 const selectTargetItemOptions = ref<{ label: string; value: string }[]>([])
 
 onMounted(() => {
@@ -129,7 +116,6 @@ onMounted(() => {
     label: item.chartConfig?.title,
     value: item.id
   }))
-  selectCurrentItemOptions.value = componentList
   selectTargetItemOptions.value = componentList
 })
 </script>

@@ -5,7 +5,7 @@
     :dashed="buttonDashed"
     :ghost="buttonGhost"
     :color="buttonColor"
-    @click="onClick(option.value.dataset)"
+    @click="onClick(option.value.selectTargetItems, true)"
   >
     <span class="button-text-color">{{ dataset }}</span>
   </n-button>
@@ -35,17 +35,18 @@ const option = shallowReactive({
   value: cloneDeep(props.chartConfig.option)
 })
 
-const onClick = (v: any) => {
+const onClick = (v: any, status: boolean) => {
   useChartInteract(
     props.chartConfig,
     useChartEditStore,
     { [ComponentInteractParamsEnum.DATA]: v },
-    InteractEventOn.CHANGE
+    InteractEventOn.CHANGE,
+    status
   )
 }
 
 onMounted(() => {
-  onClick(option.value.dataset)
+  onClick(option.value.selectTargetItems, false)
 })
 
 // 手动更新