feat: 优化交互组件

src/enums/eventEnum.ts

@@ -10,6 +10,26 @@ export enum BaseEvent {
   ON_MOUSE_LEAVE = 'mouseleave'
 }
 
+// 组件交互回调事件
+export enum InteractEvents {
+  INTERACT_ON = 'interactOn',
+  INTERACT_COMPONENTS = 'interactComponents',
+  INTERACT_FN = 'interactFn'
+}
+
+// 组件交互回调事件触发的类型
+export enum InteractEventOn {
+  CLICK = 'click',
+  CHANGE = 'change'
+}
+
+// 交互式组件的触发配置
+export type InteractActionType = {
+  interactType: InteractEventOn
+  interactName: string
+  componentEmitEvents: { [T: string]: any[] }
+}
+
 // vue3 生命周期事件
 export enum EventLife {
   // 渲染之后

src/hooks/events.hook.ts

@@ -1,28 +0,0 @@
-import { computed, toRefs } from 'vue'
-import { CreateComponentType } from '@/packages/index.d'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-
-// 获取类型
-type ChartEditStoreType = typeof useChartEditStore
-
-// Params 参数修改触发api更新图表请求
-export const eventsCreate = (chartConfig: CreateComponentType, useChartEditStore: ChartEditStoreType, param: { [name: string]: string }, onEvevnt: string) => {
-  const chartEditStore = useChartEditStore()
-  const { eventsFn } = chartConfig.events
-  const fnOnEvevnt = eventsFn.filter((item) => {
-    return item.on === onEvevnt
-  }) || []
-  if (fnOnEvevnt.length === 0) return
-  fnOnEvevnt.forEach((item) => {
-    const index = chartEditStore.fetchTargetIndex(item.components)
-    const { Params, Header } = toRefs(chartEditStore.componentList[index].request.requestParams)
-    Object.keys(item.fn).forEach((key) => {
-      if (Params.value[key]) {
-        Params.value[key] = param[item.fn[key]]
-      }
-      if (Header.value[key]) {
-        Header.value[key] = param[item.fn[key]]
-      }
-    })
-  })
-}

src/hooks/index.ts

@@ -5,4 +5,4 @@ export * from '@/hooks/useChartDataFetch.hook'
 export * from '@/hooks/useChartDataPondFetch.hook'
 export * from '@/hooks/useLifeHandler.hook'
 export * from '@/hooks/useLang.hook'
-export * from '@/hooks/events.hook'
+export * from '@/hooks/useChartInteract.hook'

src/hooks/useChartDataFetch.hook.ts

@@ -90,12 +90,17 @@ export const useChartDataFetch = (
         // 立即调用
         fetchFn()
 
+        // 组件交互处理监听
+        watch(
+          () => targetComponent.request,
+          () => {
+            fetchFn()
+          },
+          {
+            deep: true
+          }
+        )
 
-        watch(() => targetComponent.request, () => {
-          fetchFn()
-        }, {
-          deep: true
-        })
         // 定时时间
         const time = targetInterval && targetInterval.value ? targetInterval.value : globalRequestInterval.value
         // 单位

src/hooks/useChartInteract.hook.ts

@@ -0,0 +1,35 @@
+import { toRefs } 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: { [name: string]: string },
+  onEvent: string
+) => {
+  const chartEditStore = useChartEditStore()
+  const { interactEvents } = chartConfig.events
+
+  const fnOnEvent = interactEvents.filter(item => {
+    return item.interactOn === onEvent
+  })
+
+  fnOnEvent.forEach(item => {
+    const index = chartEditStore.fetchTargetIndex(item.interactComponents)
+    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]]
+      }
+    })
+  })
+}

src/packages/components/Decorates/Inputs/InputsDate/config.ts

@@ -0,0 +1,56 @@
+import { NDatePicker } from 'naive-ui'
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { InputsDateConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+import { chartInitConfig } from '@/settings/designSetting'
+import { InteractEventOn, InteractActionType } from '@/enums/eventEnum'
+
+// 时间组件类型
+enum ComponentInteractEvent {
+  DATE = 'date',
+  DATERANGE = 'daterange'
+}
+
+export const option = {
+  dataset: {
+    count: 0,
+    // 时间组件展示类型 daterange & date
+    type: ComponentInteractEvent.DATE,
+    range: undefined
+  }
+}
+
+// 定义组件触发回调事件
+const interactActions: InteractActionType[] = [
+  {
+    interactType: InteractEventOn.CHANGE,
+    interactName: '完成后的回调',
+    componentEmitEvents: {
+      [ComponentInteractEvent.DATE]: [
+        {
+          value: 'date',
+          label: '日期'
+        }
+      ],
+      [ComponentInteractEvent.DATERANGE]: [
+        {
+          value: 'dateStart',
+          label: '开始时间'
+        },
+        {
+          value: 'dateEnd',
+          label: '结束时间'
+        }
+      ]
+    }
+  }
+]
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = InputsDateConfig.key
+  public attr = { ...chartInitConfig, w: 260, h: 32, zIndex: -1 }
+  public chartConfig = cloneDeep(InputsDateConfig)
+  public interactActions = interactActions
+  public option = cloneDeep(option)
+}

src/packages/components/Decorates/Inputs/InputsDate/config.vue

@@ -41,9 +41,9 @@
 
 <script lang="ts" setup>
 import { PropType } from 'vue'
-import { option } from './config'
 import { icon } from '@/plugins'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
 
 const { HelpOutlineIcon } = icon.ionicons5
 

src/packages/components/Decorates/Inputs/InputsDate/index.ts

@@ -0,0 +1,13 @@
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const InputsDateConfig: ConfigType = {
+  key: 'InputsDate',
+  chartKey: 'VInputsDate',
+  conKey: 'VCInputsDate',
+  title: '时间选择器',
+  category: ChatCategoryEnum.INPUTS,
+  categoryName: ChatCategoryEnumName.INPUTS,
+  package: PackagesCategoryEnum.DECORATES,
+  image: 'inputs_date.png'
+}

src/packages/components/Decorates/Inputs/InputsDate/index.vue

@@ -1,18 +1,18 @@
 <template>
   <div class="mill-date-box">
-    <div :style="`width:${w}px;height:${h}px;`">
+    <div :style="`width:${w}px; height:${h}px;`">
       <n-date-picker v-model:value="rangeDate" :type="option.dataset.type" @update:value="onChange" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { PropType, toRefs, ref, shallowReactive, watch, computed } from 'vue'
+import { PropType, toRefs, ref, shallowReactive, watch } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { option as configOption } from './config'
-import { eventsCreate } from '@/hooks'
+import { useChartInteract } from '@/hooks'
 import dayjs from 'dayjs'
 
 const props = defineProps({
@@ -28,14 +28,15 @@ const rangeDate = ref()
 const option = shallowReactive({
   dataset: configOption.dataset
 })
+
 const onChange = (v: number | number[]) => {
   if (v instanceof Array) {
     const data1 = dayjs(v[0]).format('YYYY-MM-DD')
     const data2 = dayjs(v[1]).format('YYYY-MM-DD')
-    eventsCreate(props.chartConfig, useChartEditStore, { data1, data2 }, 'change')
+    useChartInteract(props.chartConfig, useChartEditStore, { data1, data2 }, 'change')
   } else {
     const data1 = dayjs(v).format('YYYY-MM-DD')
-    eventsCreate(props.chartConfig, useChartEditStore, { data1 }, 'change')
+    useChartInteract(props.chartConfig, useChartEditStore, { data1 }, 'change')
   }
 }
 
@@ -63,7 +64,7 @@ watch(
   }
 )
 
-// // 预览更新
+// 预览更新
 useChartDataFetch(props.chartConfig, useChartEditStore)
 </script>
 

src/packages/components/Decorates/Inputs/index.ts

@@ -0,0 +1,3 @@
+import { InputsDateConfig } from './InputsDate/index'
+
+export default [InputsDateConfig]

src/packages/components/Decorates/Pickers/Date/config.ts

@@ -1,42 +0,0 @@
-import { PublicConfigClass } from '@/packages/public'
-import { CreateComponentType } from '@/packages/index.d'
-import { DataConfig } from './index'
-import cloneDeep from 'lodash/cloneDeep'
-import { chartInitConfig } from '@/settings/designSetting'
-
-export const option = {
-  eventsApi: [
-    {
-      value: 'change',
-      label: '完成后的回调',
-      date: [
-        {
-          value: 'data1',
-          label: '日期',
-        },
-      ],
-      daterange: [
-        {
-          value: 'data1',
-          label: '开始时间',
-        },
-        {
-          value: 'data2',
-          label: '结束时间',
-        }
-      ]
-    }
-  ],
-  dataset: {
-    count: 0,
-    type: 'date', //'daterange', // date
-    range: undefined
-  }
-}
-
-export default class Config extends PublicConfigClass implements CreateComponentType {
-  public key = DataConfig.key
-  public attr = { ...chartInitConfig, w: 260, h: 32, zIndex: -1 }
-  public chartConfig = cloneDeep(DataConfig)
-  public option = cloneDeep(option)
-}

src/packages/components/Decorates/Pickers/Date/index.ts

@@ -1,14 +0,0 @@
-import image from '@/assets/images/chart/informations/text_static.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
-import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
-
-export const DataConfig: ConfigType = {
-  key: 'Date',
-  chartKey: 'VDate',
-  conKey: 'VCDate',
-  title: '时间',
-  category: ChatCategoryEnum.PICKERS,
-  categoryName: ChatCategoryEnumName.PICKERS,
-  package: PackagesCategoryEnum.DECORATES,
-  image
-}

src/packages/components/Decorates/Pickers/index.ts

@@ -1,2 +0,0 @@
-import { DataConfig } from './Date/index'
-export default [DataConfig]

src/packages/components/Decorates/index.d.ts

@@ -2,7 +2,7 @@ export enum ChatCategoryEnum {
   BORDER = 'Borders',
   DECORATE = 'Decorates',
   THREE = 'Three',
-  PICKERS = 'Pickers',
+  INPUTS = 'Inputs',
   MORE = 'Mores'
 }
 
@@ -10,6 +10,7 @@ export enum ChatCategoryEnumName {
   BORDER = '边框',
   DECORATE = '装饰',
   THREE = '三维',
-  PICKERS = '控件',
+  // 控件 => 数据录入
+  INPUTS = '控件',
   MORE = '更多'
 }

src/packages/components/Decorates/index.ts

@@ -1,7 +1,7 @@
 import Borders from './Borders'
 import Decorates from './Decorates'
 import Three from './Three'
-import Pickers from './Pickers'
+import Inputs from './Inputs'
 import Mores from './Mores'
 
-export const DecorateList = [...Borders, ...Decorates, ...Three, ...Pickers, ...Mores]
+export const DecorateList = [...Borders, ...Decorates, ...Three, ...Inputs, ...Mores]

src/packages/index.d.ts

@@ -1,4 +1,4 @@
-import { BaseEvent, EventLife } from '@/enums/eventEnum'
+import { BaseEvent, EventLife, InteractEvents, InteractEventOn, InteractActionType } from '@/enums/eventEnum'
 import type { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 import type { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
 
@@ -120,25 +120,26 @@ export interface PublicConfigType {
   }
   filter?: string
   status: StatusType
+  interactActions?: InteractActionType[],
   events: {
     baseEvent: {
       [K in BaseEvent]?: string
-    },
+    }
     advancedEvents: {
       [K in EventLife]?: string
-    },
+    }
-    eventsFn: {
+    interactEvents: {
-      on: 'change' | 'click' | undefined
+      [InteractEvents.INTERACT_ON]: InteractEventOn.CHANGE | InteractEventOn.CLICK | undefined
-      components: string | undefined
+      [InteractEvents.INTERACT_COMPONENTS]: string | undefined
-      fn: { [name: string]: string }
+      [InteractEvents.INTERACT_FN]: { [name: string]: string }
-    }[],
+    }[]
   }
 }
 
 export interface CreateComponentType extends PublicConfigType, requestConfig {
   key: string
   chartConfig: ConfigType
-  option: GlobalThemeJsonType,
+  option: GlobalThemeJsonType
 }
 
 // 组件成组实例类

src/packages/public/publicConfig.ts

@@ -103,7 +103,7 @@ export class PublicConfigClass implements PublicConfigType {
       [EventLife.VNODE_MOUNTED]: undefined,
       [EventLife.VNODE_BEFORE_MOUNT]: undefined
     },
-    eventsFn: []
+    interactEvents: []
   }
 }
 

src/plugins/icon.ts

@@ -100,8 +100,7 @@ import {
   Carbon3DSoftware as Carbon3DSoftwareIcon,
   Filter as FilterIcon,
   FilterEdit as FilterEditIcon,
-  Laptop as LaptopIcon,
+  Laptop as LaptopIcon
-  RowDelete as RowDeleteIcon
 } from '@vicons/carbon'
 
 const ionicons5 = {
@@ -295,9 +294,7 @@ const carbon = {
   FilterIcon,
   FilterEditIcon,
   // 图层
-  LaptopIcon,
+  LaptopIcon
-  // 删除组件
-  RowDeleteIcon
 }
 
 // https://www.xicons.org/#/ 还有很多

src/settings/designSetting.ts

@@ -44,7 +44,7 @@ export const asideCollapsedWidth = 60
 export const maskClosable = false
 
 // 全局边框圆角
-export const borderRadius = '6px'
+export const borderRadius = '4px'
 
 // 轮播间隔
 export const carouselInterval = 4000

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue

@@ -135,8 +135,9 @@ const sendHandle = async () => {
       showMatching.value = true
       return
     }
-    window['$message'].warning('数据异常，请检查参数！')
+    window['$message'].warning('没有拿到返回值，请检查接口！')
   } catch (error) {
+    console.error(error);
     loading.value = false
     window['$message'].warning('数据异常，请检查参数！')
   }

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue

@@ -132,8 +132,9 @@ const fetchTargetData = async () => {
       sourceData.value = res
       return
     }
-    window['$message'].warning('数据异常，请检查参数！')
+    window['$message'].warning('没有拿到返回值，请检查接口！')
   } catch (error) {
+    console.error(error);
     window['$message'].warning('数据异常，请检查参数！')
   }
 }

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/index.vue

@@ -114,10 +114,6 @@ const sendHandle = async () => {
   }
   loading.value = true
   try {
-    // const res = await customizeHttp(
-    //   toRaw(pondData.value?.dataPondRequestConfig),
-    //   toRaw(chartEditStore.getRequestGlobalConfig)
-    // )
     const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.getRequestGlobalConfig))
     loading.value = false
     if (res) {
@@ -126,8 +122,9 @@ const sendHandle = async () => {
       showMatching.value = true
       return
     }
-    window['$message'].warning('数据异常，请检查参数！')
+    window['$message'].warning('没有拿到返回值，请检查接口！')
   } catch (error) {
+    console.error(error);
     loading.value = false
     window['$message'].warning('数据异常，请检查参数！')
   }

src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEvebtInteraction/index.ts

@@ -1,3 +0,0 @@
-import ChartEvebtInteraction from './index.vue'
-
-export { ChartEvebtInteraction }

src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEvebtInteraction/index.vue

@@ -1,168 +0,0 @@
-<template>
-  <n-card v-for="(item, indexs) in targetData.events.eventsFn" :key="indexs" class="n-card-shallow">
-    <RowDeleteIcon class="edit-text" @click="evDeleteEventsFn(indexs)" />
-    <setting-item-box name="触发事件" :alone="true">
-      <n-input-group v-if="option.eventsApi">
-        <n-select class="select-type-options" v-model:value="item.on" :options="option.eventsApi" />
-      </n-input-group>
-    </setting-item-box>
-
-    <n-table striped>
-      <thead>
-        <tr>
-          <th v-for="item in ['参数', '说明']" :key="item">{{ item }}</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="(cItem, index) in fnDimensionsAndSource(item.on)" :key="index">
-          <td>{{ cItem.value }}</td>
-          <td>{{ cItem.label }}</td>
-        </tr>
-      </tbody>
-    </n-table>
-
-    <setting-item-box name="绑定组件" :alone="true">
-      <n-input-group>
-        <n-select
-          class="select-type-options"
-          value-field="id"
-          label-field="key"
-          v-model:value="item.components"
-          :render-label="renderLabel"
-          :options="fnEventsOptions()"
-        />
-      </n-input-group>
-    </setting-item-box>
-
-    <CollapseItem name="请求数据绑定" :expanded="false">
-      <SettingItemBox name="Params">
-        <SettingItem
-          v-for="(ovlValue, ovlKey, index) in fnGetRequest(item.components, 'Params')"
-          :key="ovlKey"
-          :name="`${ovlKey}`"
-        >
-          <n-select size="small" v-model:value="item.fn[ovlKey]" :options="fnDimensionsAndSource(item.on)"></n-select>
-        </SettingItem>
-      </SettingItemBox>
-      <SettingItemBox name="Header">
-        <SettingItem
-          v-for="(ovlValue, ovlKey, index) in fnGetRequest(item.components, 'Header')"
-          :key="ovlKey"
-          :name="`${ovlKey}`"
-        >
-          <n-select size="small" v-model:value="item.fn[ovlKey]" :options="fnDimensionsAndSource(item.on)"></n-select>
-        </SettingItem>
-      </SettingItemBox>
-    </CollapseItem>
-  </n-card>
-  <n-button v-if="option.eventsApi" class="add-events" ghost @click="ev_addEventsFn"> 添加交互 </n-button>
-</template>
-
-<script lang="ts" setup>
-import { ref, VNodeChild, h, computed, watch, toRefs, toRaw, onMounted } from 'vue'
-import { SelectOption, SelectGroupOption } from 'naive-ui'
-import { SettingItemBox, SettingItem, CollapseItem } from '@/components/Pages/ChartItemSetting'
-
-import { useDesignStore } from '@/store/modules/designStore/designStore'
-import { useTargetData } from '../../../hooks/useTargetData.hook'
-import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
-
-import { icon } from '@/plugins'
-const { RowDeleteIcon } = icon.carbon
-
-const designStore = useDesignStore()
-const { targetData, chartEditStore } = useTargetData()
-const { componentList } = toRefs(chartEditStore)
-
-//computed： 获取组件eventsApi
-const option = computed(() => {
-  return chartEditStore.componentList[chartEditStore.fetchTargetIndex()].option
-})
-// 绑定组件数据request
-const fnGetRequest = (id: string | undefined, key: 'Params' | 'Header') => {
-  if (!id) return {}
-  return chartEditStore.componentList[chartEditStore.fetchTargetIndex(id)]?.request.requestParams[key]
-}
-
-const fnDimensionsAndSource = (on: any) => {
-  if (!on || !option.value.eventsApi) return []
-  const tableData = option.value.eventsApi.find((item: { value: string }) => {
-    return item.value === on
-  })
-
-  return tableData[option.value.dataset.type]
-}
-
-const renderLabel = (option: CreateComponentType | CreateComponentGroupType): VNodeChild => {
-  return option.chartConfig.title
-}
-
-const fnEventsOptions = (): Array<SelectOption | SelectGroupOption> => {
-  return chartEditStore.componentList.filter(item => {
-    return item.id !== targetData.value.id
-  })
-}
-
-const ev_addEventsFn = () => {
-  targetData.value.events.eventsFn.push({
-    on: undefined,
-    components: undefined,
-    fn: {}
-  })
-}
-
-const evDeleteEventsFn = (index: number) => {
-  targetData.value.events.eventsFn.splice(index, 1)
-}
-
-// 颜色
-const themeColor = computed(() => {
-  return designStore.getAppTheme
-})
-</script>
-
-<style lang="scss" scoped>
-.n-card-shallow {
-  margin-top: 1rem;
-  .edit-text {
-    width: 18px;
-    height: 18px;
-    position: absolute;
-    top: 5px;
-    right: 5px;
-    &:hover {
-      cursor: pointer;
-      color: v-bind('themeColor');
-    }
-  }
-  &.n-card {
-    // .mill-background-filter();
-    :deep(.n-card__content) {
-      padding: 10px;
-    }
-  }
-  &:hover {
-    border-color: v-bind('themeColor');
-    .edit-text {
-      opacity: 1;
-    }
-  }
-}
-.mill-chart-target-data {
-  :deep(pre) {
-    white-space: pre-wrap;
-    word-wrap: break-word;
-  }
-}
-.add-events {
-  width: 100%;
-  height: 32px;
-  margin-top: 1rem;
-}
-.n-input-group {
-  height: 30px;
-}
-:deep(.n-base-selection .n-base-selection-label) {
-  height: 32px;
-}
-</style>

src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventAdvancedHandle/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-collapse-item title="高级事件配置" name="2">
+  <n-collapse-item title="高级事件配置" name="3">
     <template #header-extra>
       <n-button type="primary" tertiary size="small" @click.stop="showModal = true">
         <template #icon>

src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventBaseHandle/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-collapse-item title="基础事件配置" name="1">
+  <n-collapse-item title="基础事件配置" name="2">
     <template #header-extra>
       <n-button type="primary" tertiary size="small" @click.stop="showModal = true">
         <template #icon>

src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventInteraction/index.ts

@@ -0,0 +1,3 @@
+import ChartEventInteraction from './index.vue'
+
+export { ChartEventInteraction }

src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventInteraction/index.vue

@@ -0,0 +1,211 @@
+<template>
+  <n-collapse-item title="组件交互" name="1" v-if="interactActions.length">
+    <template #header-extra>
+      <n-button type="primary" tertiary size="small" @click.stop="evAddEventsFn">
+        <template #icon>
+          <n-icon>
+            <add-icon />
+          </n-icon>
+        </template>
+        新增
+      </n-button>
+    </template>
+
+    <!-- 无数据 -->
+    <div v-if="!targetData.events.interactEvents.length" class="no-data go-flex-center">
+      <img :src="noData" alt="暂无数据" />
+      <n-text :depth="3">暂无内容</n-text>
+    </div>
+
+    <n-card
+      v-for="(item, cardIndex) in targetData.events.interactEvents"
+      :key="cardIndex"
+      class="n-card-shallow"
+      size="small"
+    >
+      <n-space justify="space-between">
+        <n-text>关联组件 - {{ cardIndex + 1 }}</n-text>
+        <n-button type="error" secondary size="small" @click="evDeleteEventsFn(cardIndex)">
+          <template #icon>
+            <n-icon>
+              <close-icon />
+            </n-icon>
+          </template>
+        </n-button>
+      </n-space>
+
+      <n-divider style="margin: 10px 0" />
+
+      <n-tag :bordered="false" type="success"> 选择目标组件 </n-tag>
+
+      <setting-item-box name="触发事件" :alone="true">
+        <n-input-group v-if="interactActions">
+          <n-select
+            class="select-type-options"
+            v-model:value="item.interactOn"
+            size="tiny"
+            :options="interactActions"
+          />
+        </n-input-group>
+      </setting-item-box>
+
+      <setting-item-box name="绑定组件" :alone="true">
+        <n-input-group>
+          <n-select
+            class="select-type-options"
+            value-field="id"
+            label-field="key"
+            size="tiny"
+            filterable
+            v-model:value="item.interactComponents"
+            :render-label="renderLabel"
+            :options="fnEventsOptions()"
+          />
+        </n-input-group>
+      </setting-item-box>
+
+      <n-table v-if="fnDimensionsAndSource(item.interactOn).length" size="small" striped>
+        <thead>
+          <tr>
+            <th v-for="item in ['参数', '说明']" :key="item">{{ item }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(cItem, index) in fnDimensionsAndSource(item.interactOn)" :key="index">
+            <td>{{ cItem.value }}</td>
+            <td>{{ cItem.label }}</td>
+          </tr>
+        </tbody>
+      </n-table>
+
+      <n-tag class="go-mt-3" :bordered="false" type="info"> 关联目标组件请求参数 </n-tag>
+
+      <setting-item-box
+        :name="requestParamsItem"
+        v-for="requestParamsItem in requestParamsTypeList"
+        :key="requestParamsItem"
+      >
+        <setting-item
+          v-for="(ovlValue, ovlKey, index) in fnGetRequest(item.interactComponents, requestParamsItem)"
+          :key="index"
+          :name="`${ovlKey}`"
+        >
+          <n-select
+            size="tiny"
+            v-model:value="item.interactFn[ovlKey]"
+            :options="fnDimensionsAndSource(item.interactOn)"
+          ></n-select>
+        </setting-item>
+        <n-text
+          v-show="JSON.stringify(fnGetRequest(item.interactComponents, requestParamsItem)) === '{}'"
+          class="go-pt-1"
+          depth="3"
+        >
+          暂无数据
+        </n-text>
+      </setting-item-box>
+    </n-card>
+  </n-collapse-item>
+</template>
+
+<script lang="ts" setup>
+import { VNodeChild, computed } from 'vue'
+import { SelectOption, SelectGroupOption } from 'naive-ui'
+import { SettingItemBox, SettingItem, CollapseItem } from '@/components/Pages/ChartItemSetting'
+import { useDesignStore } from '@/store/modules/designStore/designStore'
+import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
+import { RequestParamsTypeEnum } from '@/enums/httpEnum'
+import { InteractEventOn } from '@/enums/eventEnum'
+import { icon } from '@/plugins'
+import { useTargetData } from '../../../hooks/useTargetData.hook'
+import noData from '@/assets/images/canvas/noData.png'
+
+const { CloseIcon, AddIcon } = icon.ionicons5
+
+const designStore = useDesignStore()
+const { targetData, chartEditStore } = useTargetData()
+
+const requestParamsTypeList = [RequestParamsTypeEnum.PARAMS, RequestParamsTypeEnum.HEADER]
+
+// 获取组件交互事件列表
+const interactActions = computed(() => {
+  const interactActions = targetData.value.interactActions
+  if (!interactActions) return []
+  return interactActions.map(value => ({
+    label: value.interactName,
+    value: value.interactType
+  }))
+})
+
+// 获取组件事件
+const option = computed(() => {
+  return targetData.value.option
+})
+
+// 绑定组件数据request
+const fnGetRequest = (id: string | undefined, key: RequestParamsTypeEnum) => {
+  if (!id) return {}
+  return chartEditStore.componentList[chartEditStore.fetchTargetIndex(id)]?.request.requestParams[key]
+}
+
+const fnDimensionsAndSource = (interactOn: InteractEventOn | undefined) => {
+  if (!interactOn || !targetData.value.interactActions) return []
+  const tableData = targetData.value.interactActions.find(item => {
+    return item.interactType === interactOn
+  })
+
+  return tableData?.componentEmitEvents[option.value.dataset.type] || []
+}
+
+const renderLabel = (option: CreateComponentType | CreateComponentGroupType): VNodeChild => {
+  return option.chartConfig.title
+}
+
+const fnEventsOptions = (): Array<SelectOption | SelectGroupOption> => {
+  return chartEditStore.componentList.filter(item => {
+    return item.id !== targetData.value.id
+  })
+}
+
+const evAddEventsFn = () => {
+  targetData.value.events.interactEvents.push({
+    interactOn: undefined,
+    interactComponents: undefined,
+    interactFn: {}
+  })
+}
+
+const evDeleteEventsFn = (index: number) => {
+  targetData.value.events.interactEvents.splice(index, 1)
+}
+
+// 颜色
+const themeColor = computed(() => {
+  return designStore.getAppTheme
+})
+</script>
+
+<style lang="scss" scoped>
+.mill-chart-target-data {
+  :deep(pre) {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+  }
+}
+
+.n-input-group {
+  height: 30px;
+}
+
+.no-data {
+  flex-direction: column;
+  width: 100%;
+  img {
+    width: 120px;
+  }
+}
+
+:deep(.n-base-selection .n-base-selection-label) {
+  height: 32px;
+}
+</style>

src/views/chart/ContentConfigurations/components/ChartEvent/index.vue

@@ -5,7 +5,7 @@
       组件 id：
       <n-text>{{ targetData.id }}</n-text>
     </n-text>
-    <ChartEvebtInteraction></ChartEvebtInteraction>
+    <chart-event-interaction></chart-event-interaction>
     <chart-event-base-handle></chart-event-base-handle>
     <chart-event-advanced-handle></chart-event-advanced-handle>
   </n-collapse>
@@ -13,7 +13,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { ChartEvebtInteraction } from './components/ChartEvebtInteraction'
+import { ChartEventInteraction } from './components/ChartEventInteraction'
 import { ChartEventAdvancedHandle } from './components/ChartEventAdvancedHandle'
 import { ChartEventBaseHandle } from './components/ChartEventBaseHandle'
 import { useTargetData } from '../hooks/useTargetData.hook'

src/views/chart/hooks/useSync.hook.ts

@@ -49,7 +49,7 @@ const componentVersionUpdatePolyfill = (newObject: any, sources: any) => {
             [EventLife.VNODE_MOUNTED]: undefined,
             [EventLife.VNODE_BEFORE_MOUNT]: undefined
           },
-          eventsFn: []
+          interactEvents: []
         }
       }
       return newObject

src/views/preview/utils/storage.ts

@@ -4,6 +4,7 @@ import { ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 
 const chartEditStore = useChartEditStore()
+
 export interface ChartEditStorageType extends ChartEditStorage {
   id: string
 }
@@ -25,6 +26,7 @@ export const getSessionStorageInfo = () => {
         chartEditStore.editCanvasConfig = editCanvasConfig
         chartEditStore.requestGlobalConfig = requestGlobalConfig
         chartEditStore.componentList = componentList
+        return storageList[i]
       }
     }
   }