feat(packages/external): 优化自定义按钮跳转

-import { toRefs, ref } from 'vue'
+import { toRefs } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 
@@ -14,6 +14,8 @@ export const useChartInteract = (
 ) => {
   const chartEditStore = useChartEditStore()
   const { interactEvents } = chartConfig.events
+  const { selectCurrentItems } = chartConfig.option
+  const { selectTargetItems } = chartConfig.option
   const fnOnEvent = interactEvents.filter(item => {
     return item.interactOn === interactEventOn
   })
@@ -30,26 +32,21 @@ export const useChartInteract = (
         Header.value[key] = param[item.interactFn[key]]
       }
     })
-    setJump(chartConfig)
+    setJump(selectCurrentItems, selectTargetItems)
   })
-  function setJump(chart: CreateComponentType) {
-    /**
-     * 通过页面显示隐藏来模拟页面跳转
-     * 当前点击对象和绑定的联动组件（分组或单个）内容隐藏，目标对象和绑定的联动组件（分组或单个）内容显示
-     */
+  function setJump(selectCurrentItems: string[], selectTargetItems: string[]) {
     try {
-      const targetId = chart.option.dataset[0].target
-      const currentId = chart.option.dataset[0].current
-      const targetButtonId = chart.option.dataset[0].targetButton
-      const currentButtonId = chart.option.dataset[0].currentButton
-      const targetIndex = chartEditStore.fetchTargetIndex(targetId)
-      const currentIndex = chartEditStore.fetchTargetIndex(currentId)
-      const targetButtonIndex = chartEditStore.fetchTargetIndex(targetButtonId)
-      const currentButtonIndex = chartEditStore.fetchTargetIndex(currentButtonId)
-      chartEditStore.componentList[targetIndex].status.hide = false
-      chartEditStore.componentList[currentIndex].status.hide = true
-      chartEditStore.componentList[targetButtonIndex].status.hide = false
-      chartEditStore.componentList[currentButtonIndex].status.hide = true
+      //优化循环性能
+      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
+        }
+      }
     } finally {
       console.log()
     }

@@ -6,25 +6,20 @@ import { COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum'
 import { interactActions, ComponentInteractEventEnum } from './interact'
 import { ButtonConfig } from './index'
 
+
 export const option = {
   // 时间组件展示类型，必须和 interactActions 中定义的数据一致
   [COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATA,
   // 暴露配置内容给用户
-  dataset: [
-    {
-      label: '',
-      current: '',
-      target: '',
-      currentButton: '',
-      targetButton: ''
-    }
-  ],
+  dataset: '第1页',
   buttonType: 'primary',
   buttonGhost: false,
   buttonDashed: false,
   buttonColor: '',
   buttonTextColor: 'white',
   buttonTextSize: '16',
+  selectCurrentItems: [],
+  selectTargetItems: []
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -40,27 +40,41 @@
           <span class="help-span">{{ threeFileHelpMessgae }}</span>
         </n-tooltip>
       </template>
-      <setting-item v-for="(item, index) in optionData.dataset" :key="index">
-        <n-input v-model:value="item.label" size="small" placeholder="按钮文字"></n-input>
-        <div style="height: 5px"></div>
-        <n-input v-model:value="item.currentButton" size="small" placeholder="填写当前按钮id（事件里面）"></n-input>
-        <div style="height: 5px"></div>
-        <n-input v-model:value="item.targetButton" size="small" placeholder="填写目标按钮id（事件里面）"></n-input>
-        <div style="height: 5px"></div>
-        <n-input v-model:value="item.current" size="small" placeholder="填写当前页面id（事件里面）"></n-input>
-        <div style="height: 5px"></div>
-        <n-input v-model:value="item.target" size="small" placeholder="填写目标页面id（事件里面）"></n-input>
-        <div style="height: 5px"></div>
+      <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.selectCurrentItems"
+          :options="selectCurrentItemOptions"
+        />
+      </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>
     </setting-item-box>
   </collapse-item>
 </template>
 
 <script lang="ts" setup>
-import { PropType, ref } from 'vue'
+import { PropType, ref, onMounted } from 'vue'
 import { CollapseItem, SettingItemBox } from '@/components/Pages/ChartItemSetting'
 import { option } from './config'
 import { icon } from '@/plugins'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 
 defineProps({
   optionData: {
@@ -69,11 +83,11 @@ defineProps({
   }
 })
 
+const chartEditStore = useChartEditStore()
+
 const { HelpOutlineIcon } = icon.ionicons5
 
-const threeFileHelpMessgae = ref(`
-在事件里面复制对应组件id，填写你要跳转的目标，相当于一个按钮就绑定了一个页面（分组），然后跳转到另一个页面，其实就是点击当前页隐藏，目标页显示
-`)
+const threeFileHelpMessgae = ref(`勾选当前项和跳转的目标项`)
 
 const buttonTypeOptions = [
   {
@@ -105,6 +119,19 @@ const buttonTypeOptions = [
     value: 'error'
   }
 ]
+
+const selectCurrentItemOptions = ref<{ label: string; value: string }[]>([])
+
+const selectTargetItemOptions = ref<{ label: string; value: string }[]>([])
+
+onMounted(() => {
+  const componentList = chartEditStore.componentList.map(item => ({
+    label: item.chartConfig?.title,
+    value: item.id
+  }))
+  selectCurrentItemOptions.value = componentList
+  selectTargetItemOptions.value = componentList
+})
 </script>
 <style lang="scss" scoped>
 .help-span {

@@ -5,9 +5,9 @@
     :dashed="buttonDashed"
     :ghost="buttonGhost"
     :color="buttonColor"
-    @click="onClick(option.value.dataset[0])"
+    @click="onClick(option.value.dataset)"
   >
-    <span class="button-text-color">{{ option.value.dataset[0].label }}</span>
+    <span class="button-text-color">{{ dataset }}</span>
   </n-button>
 </template>
 
@@ -28,7 +28,7 @@ const props = defineProps({
 })
 
 const { w, h } = toRefs(props.chartConfig.attr)
-const { buttonType, buttonDashed, buttonGhost, buttonColor, buttonTextColor, buttonTextSize } = toRefs(
+const { buttonType, buttonDashed, buttonGhost, buttonColor, buttonTextColor, buttonTextSize, dataset } = toRefs(
   props.chartConfig.option
 )
 const option = shallowReactive({
@@ -39,13 +39,13 @@ const onClick = (v: any) => {
   useChartInteract(
     props.chartConfig,
     useChartEditStore,
-    { [ComponentInteractParamsEnum.DATA]: v?.current },
-    InteractEventOn.CHANGE,
+    { [ComponentInteractParamsEnum.DATA]: v },
+    InteractEventOn.CHANGE
   )
 }
 
 onMounted(() => {
-  onClick(option.value.dataset[0])
+  onClick(option.value.dataset)
 })
 
 // 手动更新