feat(packages/external): 新增自定义按钮,点击跳转

+import { toRefs, ref } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+
+// 获取类型
+type ChartEditStoreType = typeof useChartEditStore
+
+// Params 参数修改触发 api 更新图表请求
+export const useChartInteract = (
+  chartConfig: CreateComponentType,
+  useChartEditStore: ChartEditStoreType,
+  param: { [T: string]: any },
+  interactEventOn: string,
+  target: string,
+  status: boolean
+) => {
+  const chartEditStore = useChartEditStore()
+  const { interactEvents } = chartConfig.events
+  const fnOnEvent = interactEvents.filter(item => {
+    return item.interactOn === interactEventOn
+  })
+  if (fnOnEvent.length === 0) return
+  fnOnEvent.forEach(item => {
+    const index = chartEditStore.fetchTargetIndex(item.interactComponentId)
+    if (index === -1) return
+    const { Params, Header } = toRefs(chartEditStore.componentList[index].request.requestParams)
+    Object.keys(item.interactFn).forEach(key => {
+      if (Params.value[key]) {
+        Params.value[key] = param[item.interactFn[key]]
+      }
+      if (Header.value[key]) {
+        Header.value[key] = param[item.interactFn[key]]
+      }
+    })
+    updateIndex(chartConfig)
+  })
+
+  function updateIndex(chart: any) {
+    try {
+      const targetId = chart.option.dataset[0].target
+      const currentId = chart.option.dataset[0].current
+      const currentButtonId = chart.option.dataset[0].currentButton
+      const targetButtonId = chart.option.dataset[0].targetButton
+      const targetIndex = chartEditStore.fetchTargetIndex(targetId)
+      const currentIndex = chartEditStore.fetchTargetIndex(currentId)
+      const currentButtonIndex = chartEditStore.fetchTargetIndex(currentButtonId)
+      const targetButtonIndex = chartEditStore.fetchTargetIndex(targetButtonId)
+      chartEditStore.componentList[targetIndex].status.hide = false
+      chartEditStore.componentList[currentIndex].status.hide = true
+      chartEditStore.componentList[currentButtonIndex].status.hide = true
+      chartEditStore.componentList[targetButtonIndex].status.hide = false
+    } catch (e) {
+      console.error(e)
+    }
+  }
+}
+
+// 联动事件触发的 type 变更时，清除当前绑定内容
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+export const clearInteractEvent = (chartConfig: CreateComponentType) => {}

@@ -18,7 +18,8 @@ export const option = {
       currentButton: '',
       targetButton: ''
     }
-  ]
+  ],
+  buttonType:'primary'
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

 <template>
   <collapse-item name="按钮配置" :expanded="true">
-    <setting-item-box name="配置项" :alone="true">
+    <setting-item-box name="默认值" :alone="true">
+      <n-select size="small" v-model:value="optionData.buttonType" :options="buttonTypeOptions" />
+    </setting-item-box>
+    <setting-item-box name="跳转配置项" :alone="true">
       <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>
@@ -28,4 +31,35 @@ defineProps({
     required: true
   }
 })
+
+const buttonTypeOptions = [
+  {
+    label: 'default',
+    value: 'default'
+  },
+  {
+    label: 'primary',
+    value: 'primary'
+  },
+  {
+    label: 'tertiary',
+    value: 'tertiary'
+  },
+  {
+    label: 'info',
+    value: 'info'
+  },
+  {
+    label: 'success',
+    value: 'success'
+  },
+  {
+    label: 'warning',
+    value: 'warning'
+  },
+  {
+    label: 'error',
+    value: 'error'
+  }
+]
 </script>

 <template>
-  <n-button :style="{ width: `${w}px`, height: `${h}px` }" type="primary" @click="onClick(option.value.dataset[0])">{{
-    option.value.dataset[0].label
-  }}</n-button>
+  <n-button
+    :style="{ width: `${w}px`, height: `${h}px` }"
+    :type="buttonType"
+    @click="onClick(option.value.dataset[0],true)"
+    >{{ option.value.dataset[0].label }}</n-button
+  >
 </template>
 
 <script setup lang="ts">
@@ -9,7 +12,7 @@ import { PropType, toRefs, shallowReactive, watch, onMounted } from 'vue'
 import cloneDeep from 'lodash/cloneDeep'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { useChartInteract } from '@/hooks'
+import { useChartInteract } from '@/hooks/external/useButtonInteract.hook'
 import { InteractEventOn } from '@/enums/eventEnum'
 import { ComponentInteractParamsEnum } from './interact'
 
@@ -21,21 +24,24 @@ const props = defineProps({
 })
 
 const { w, h } = toRefs(props.chartConfig.attr)
+const { buttonType } = toRefs(props.chartConfig.option)
 const option = shallowReactive({
   value: cloneDeep(props.chartConfig.option)
 })
 
-const onClick = (v: any) => {
+const onClick = (v: any, s: boolean) => {
   useChartInteract(
     props.chartConfig,
     useChartEditStore,
     { [ComponentInteractParamsEnum.DATA]: v?.current },
-    InteractEventOn.CHANGE
+    InteractEventOn.CHANGE,
+    v?.target,
+    s
   )
 }
 
 onMounted(() => {
-  // onClick(option.value.dataset[0], false)
+  onClick(option.value.dataset[0], false)
 })
 
 // 手动更新