feat: 事件系统支持自定义事件

src/packages/components/Informations/Texts/TextCommon/enum.ts

@@ -1,17 +1,25 @@
 import { OptionsType } from '@/packages/index.d';
 import { mapToOptions } from '@/utils';
 
+// 内置方法
 export enum TextCommonEventEnum {
-  TEST = 'test'
+  FOO = 'foo',
+  BAR = 'bar'
 }
 
+//内置事件
+
+export const methodList = mapToOptions(new Map([
+  [TextCommonEventEnum.FOO, '内置方法'],
+])) as Array<OptionsType>
+
 export const eventList = mapToOptions(new Map([
-  [TextCommonEventEnum.TEST, '测试内置方法'],
+  [TextCommonEventEnum.BAR, 'setup'],
 ])) as Array<OptionsType>
 
 export const TextConfig = {
   key: 'TextCommon',
   title: '文字',
-  eventList
+  methodList
 } 
 

src/packages/components/Informations/Texts/TextCommon/index.ts

@@ -2,7 +2,7 @@ import { getComponentConfig } from '@/utils';
 import image from '@/assets/images/chart/informations/text_static.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
-import { TextConfig, eventList } from './enum'
+import { TextConfig, methodList, eventList } from './enum'
 
 export const TextCommonConfig: ConfigType = getComponentConfig({
   key: TextConfig.key,
@@ -10,6 +10,7 @@ export const TextCommonConfig: ConfigType = getComponentConfig({
   category: ChatCategoryEnum.TEXT,
   categoryName: ChatCategoryEnumName.TEXT,
   package: PackagesCategoryEnum.INFORMATIONS,
+  methodList,
   eventList,
   image
 })

src/packages/components/Informations/Texts/TextCommon/index.vue

@@ -34,10 +34,14 @@ const props = defineProps({
   }
 })
 
+const emits = defineEmits([TextCommonEventEnum.BAR])
+
+emits(TextCommonEventEnum.BAR, 'setup event')
+
 const listeners = convertEventBusListeners({
   on: {
-    [TextCommonEventEnum.TEST]: () => {
+    [TextCommonEventEnum.FOO]: () => {
-      alert('这是我的内置方法')
+      alert('触发方法')
     }
   }
 }, props.chartConfig.id)

src/packages/index.d.ts

@@ -31,12 +31,13 @@ export type ConfigType = {
   categoryName: string
   package: string
   chartFrame?: ChartFrameEnum
+  methodList?: Array<OptionsType>
   eventList?: Array<OptionsType>
   image: string | (() => Promise<typeof import('*.png')>)
 }
 
 
-export type EventList = Array<{
+export type MethodList = Array<{
   name: string,
   event: string,
   type: string,
@@ -48,7 +49,7 @@ export type EventList = Array<{
 
 export type EventConfigValue = Record<string, {
   title: string,
-  eventList: EventList
+  methodList: MethodList
 }>
 
 export type EventConfig = {
@@ -119,6 +120,7 @@ export interface CreateComponentType extends PublicConfigType {
   chartConfig: ConfigType
   option: GlobalThemeJsonType
   eventList: Array<OptionsType>
+  methodList: Array<OptionsType>
   eventConfig: EventConfig
 }
 

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

@@ -12,14 +12,14 @@
         </n-icon>
       </template>
       <n-empty
-        v-if="!item.eventList.length"
+        v-if="!item.methodList.length"
         :show-icon="false">
       </n-empty>
       <template v-else>
         <n-data-table
           :row-key="(rowData:any) => rowData.uid"
           :columns="columns"
-          :data="item.eventList"
+          :data="item.methodList"
         />
       </template>
     </n-collapse-item>
@@ -68,7 +68,7 @@
         <n-form-item label="自定义js" path="code">
           <n-space vertical :style="{width: '100%'}">
             <n-tag type="info">
-              <span class="func-keyword">function</span>&nbsp;&nbsp;()&nbsp;&nbsp;{
+              <span class="func-keyword">function</span>&nbsp;&nbsp;(data)&nbsp;&nbsp;{
             </n-tag>
             <monaco-editor v-model:modelValue="model.code" language="javascript" height="500px"/>
             <n-tag type="info">}</n-tag>
@@ -112,11 +112,21 @@ watch(targetData, (newVal) => {
   if(!eventConfig.value){
     newVal.eventConfig = reactive({})
   }
+  //原生事件
   Object.keys(EventTypeTitle).forEach((key: string) => {
     if(!(key in eventConfig.value)){
       (newVal.eventConfig as any)[key] = {
         title: EventTypeTitle[key as EventType],
-        eventList: []
+        methodList: []
+      }
+    }
+  })
+  // 组件内置事件
+  newVal.chartConfig.eventList?.map((item: OptionsType) => {
+    if(!(item.value in eventConfig.value)){
+      (newVal.eventConfig as any)[item.value] = {
+        title: item.label,
+        methodList: []
       }
     }
   })
@@ -164,12 +174,12 @@ const selectedComponent = computed((): CreateComponentType | void => {
   return chartEditStore.componentList.find(item => Object.is(item.id, model.value.componentId))
 })
 
-const commEventList = mapToOptions(CommonEventMap)
+const commMethodList = mapToOptions(CommonEventMap)
 
 const componentMethodOptions = computed(() => {
   return [
-    ...commEventList,
+    ...commMethodList,
-    ...(selectedComponent.value ? (selectedComponent.value.chartConfig.eventList as Array<OptionsType>) : [])
+    ...(selectedComponent.value ? (selectedComponent.value.chartConfig.methodList as Array<OptionsType>) : [])
   ]
 })
 
@@ -223,7 +233,7 @@ const columns = [
             ...columnIconAttr,
             title: '删除',
             onClick(){
-              ((eventConfig.value[rowData.eventType as keyof EventConfig]) as EventConfigValue[string]).eventList.splice(rowIndex, 1)
+              ((eventConfig.value[rowData.eventType as keyof EventConfig]) as EventConfigValue[string]).methodList.splice(rowIndex, 1)
             }
           }, () => h(icon.ionicons5.RemoveIcon))
         ]
@@ -237,13 +247,13 @@ const onSubmit = () => {
     formRef.value?.validate((errors) => {
       if (!errors && operateCollapse) {
         if(model.value.uid){
-          const index = operateCollapse.eventList
+          const index = operateCollapse.methodList
                           .findIndex((item:any) => item.uid === model.value.uid)
           if(index > -1){
-            operateCollapse.eventList[index] = {...model.value}
+            operateCollapse.methodList[index] = {...model.value}
           }
         }else{
-          operateCollapse.eventList.push({
+          operateCollapse.methodList.push({
             ...model.value,
             eventType,
             uid: getUUID(),

src/views/preview/components/PreviewRenderList/PreViewRenderItem.vue

@@ -50,10 +50,10 @@ const bus = useEventBus()
  * }
  */
 const getEventList = (eventConfig: EventConfig) => {
-  const res = Object.keys(omit(eventConfig, EventType.OTHER)) // 剔除other字段
+  const res = Object.keys(eventConfig) // 剔除other字段
     .reduce((previousValue: EventConfig, currentValue: string) => {
       // @ts-ignore
-      previousValue[currentValue] = eventConfig[currentValue].eventList.map((item: any) => {
+      previousValue[currentValue] = eventConfig[currentValue].methodList.map((item: any) => {
         if(item.type === EventTriggerType.JAVASCRIPT){
           return (config: CreateComponentType) => {
             try {