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

…one (#757)

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

修复画布切换选择组件后，高级面板事件列表仍然显示原组件事件列表的bug
close #747

* fix: handle potential undefined values in renderEventList

* fix: use locale instead of zh_CN attr

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

@@ -17,12 +17,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>
@@ -39,7 +39,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>
@@ -73,7 +73,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>
@@ -92,6 +92,7 @@ import {
   getMetaApi,
   META_APP
 } from '@opentiny/tiny-engine-meta-register'
+import i18n from '@opentiny/tiny-engine-controller/js/i18n'
 import { BlockLinkEvent, SvgButton } from '@opentiny/tiny-engine-common'
 import { iconChevronDown } from '@opentiny/vue-icon'
 import BindEventsDialog, { open as openDialog } from './BindEventsDialog.vue'
@@ -114,33 +115,32 @@ export default {
     const { getBlockEvents, getCurrentBlock, removeEventLink } = useBlock()
     const { getMaterial } = useMaterial()
     const { confirm } = useModal()
-
+    const locale = i18n.global.locale.value
     const { highlightMethod } = getMetaApi(META_APP.Page)
-
     const { commonEvents = {} } = getMergeMeta('engine.setting.event').options
 
     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 || {}
-      state.componentEvents = { ...commonEvents, ...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]
@@ -228,7 +228,7 @@ export default {
     const handleAddEvent = (params) => {
       const { eventName, eventDescription } = params
 
-      Object.assign(state.componentEvents, {
+      Object.assign(state.customEvents, {
         [eventName]: {
           label: {
             zh_CN: eventDescription
@@ -256,7 +256,9 @@ export default {
       openCodePanel,
       openActionDialog,
       handleAddEvent,
-      handleToggleAddEventDialog
+      handleToggleAddEventDialog,
+      renderEventList,
+      locale
     }
   }
 }