fix: switch selected component event name list still show the origin one

packages/settings/events/src/components/BindEvents.vue

@@ -28,12 +28,12 @@
         </template>
         <ul class="bind-event-list">
           <li
-            v-for="(event, name) in state.componentEvents"
+            v-for="(event, name) in renderEventList"
             :key="name"
             :class="['bind-event-list-item', { 'bind-event-list-item-notallow': state.bindActions[name] }]"
             @click="openActionDialog({ eventName: name }, true)"
           >
-            <div>{{ name }}&nbsp;&nbsp;{{ event?.label?.zh_CN || name }}</div>
+            <div>{{ name }}&nbsp;&nbsp;{{ event?.label?.[locale] || name }}</div>
           </li>
         </ul>
       </tiny-popover>
@@ -43,7 +43,7 @@
         <div class="action-item bind-action-item">
           <div class="binding-name" @click="openActionDialog(action)">
             <div>
-              {{ action.eventName }}<span>{{ state.componentEvents[action.eventName].label.zh_CN }}</span>
+              {{ action.eventName }}<span>{{ renderEventList[action.eventName]?.label?.[locale] }}</span>
             </div>
             <div :class="{ linked: action.linked }">{{ action.linkedEventName }}</div>
             <span class="event-bind">{{ action.ref }}</span>
@@ -78,7 +78,7 @@
   <bind-events-dialog :eventBinding="state.eventBinding"></bind-events-dialog>
   <add-events-dialog
     :visible="state.showBindEventDialog"
-    :componentEvents="state.componentEvents"
+    :componentEvents="renderEventList"
     @closeDialog="handleToggleAddEventDialog(false)"
     @addEvent="handleAddEvent"
   ></add-events-dialog>
@@ -88,6 +88,7 @@
 import { computed, reactive, watchEffect } from 'vue'
 import { Popover, Button } from '@opentiny/vue'
 import { useCanvas, useModal, useLayout, useBlock, useResource } from '@opentiny/tiny-engine-controller'
+import i18n from '@opentiny/tiny-engine-controller/js/i18n'
 import { BlockLinkEvent, SvgButton } from '@opentiny/tiny-engine-common'
 import { iconHelpQuery, iconChevronDown } from '@opentiny/vue-icon'
 import BindEventsDialog, { open as openDialog } from './BindEventsDialog.vue'
@@ -112,32 +113,33 @@ export default {
     const { getBlockEvents, getCurrentBlock, removeEventLink } = useBlock()
     const { getMaterial } = useResource()
     const { confirm } = useModal()
+    const locale = i18n.global.locale.value
 
     const { highlightMethod } = getPluginApi(PLUGIN_NAME.PageController)
 
     const state = reactive({
       eventName: '', // 事件名称
       eventBinding: null, // 事件绑定的处理方法对象
       componentEvent: {},
-      componentEvents: commonEvents,
+      customEvents: commonEvents,
       bindActions: {},
       showBindEventDialog: false
     })
 
     const isBlock = computed(() => Boolean(pageState.isBlock))
     const isEmpty = computed(() => Object.keys(state.bindActions).length === 0)
+    const renderEventList = computed(() => ({ ...state.componentEvent, ...state.customEvents }))
 
     watchEffect(() => {
       const componentName = pageState?.currentSchema?.componentName
       const componentSchema = getMaterial(componentName)
       state.componentEvent = componentSchema?.content?.schema?.events || componentSchema?.schema?.events || {}
-      Object.assign(state.componentEvents, state.componentEvent)
       const props = pageState?.currentSchema?.props || {}
       const keys = Object.keys(props)
       state.bindActions = {}
 
       // 遍历组件事件元数据
-      Object.entries(state.componentEvents).forEach(([eventName, componentEvent]) => {
+      Object.entries(renderEventList.value).forEach(([eventName, componentEvent]) => {
         // 查找组件已添加的事件
         if (keys.indexOf(eventName) > -1) {
           const event = props[eventName]
@@ -225,7 +227,7 @@ export default {
     const handleAddEvent = (params) => {
       const { eventName, eventDescription } = params
 
-      Object.assign(state.componentEvents, {
+      Object.assign(state.customEvents, {
         [eventName]: {
           label: {
             zh_CN: eventDescription
@@ -253,7 +255,9 @@ export default {
       openCodePanel,
       openActionDialog,
       handleAddEvent,
-      handleToggleAddEventDialog
+      handleToggleAddEventDialog,
+      renderEventList,
+      locale
     }
   }
 }