fix: switch selected component event name list still show the origin one #757
Conversation
修复画布切换选择组件后，高级面板事件列表仍然显示原组件事件列表的bug close opentiny#747
WalkthroughThe changes in the codebase include the renaming of a state variable to Changes
Assessment against linked issues
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://github.com/avatars/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- packages/settings/events/src/components/BindEvents.vue (5 hunks)
Additional comments not posted (3)
packages/settings/events/src/components/BindEvents.vue (3)
129-129: Ensure the computed propertyrenderEventListcorrectly merges event data.The computed property
renderEventListmergesstate.componentEventandstate.componentEvents. Ensure that the merging logic is correct and does not introduce any conflicts or data loss.Verify the merging logic of
renderEventListby checking the computed property implementation.Verification successful
Merging logic of
renderEventListis standard. The computed propertyrenderEventListcorrectly mergesstate.componentEventandstate.componentEventsusing the spread operator. This logic will overwrite any overlapping keys fromstate.componentEventwith those fromstate.componentEvents, which is typical behavior for object merging in JavaScript. If this is the intended behavior, no changes are necessary.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the merging logic of `renderEventList`. # Test: Search for the computed property implementation. Expect: Correct merging logic. rg --type vue 'const renderEventList = computed'Length of output: 78
Script:
#!/bin/bash # Locate the BindEvents.vue file and search for the renderEventList computed property. fd 'BindEvents.vue' | xargs rg 'const renderEventList = computed'Length of output: 165
31-34: Ensure the computed propertyrenderEventListis reactive.The computed property
renderEventListis used correctly to iterate over the event list. Ensure thatrenderEventListis reactive and updates as expected whenstate.componentEventorstate.componentEventschange.Verify the reactivity of
renderEventListby checking the computed property implementation and its dependencies.Verification successful
The
renderEventListcomputed property is reactive.The
renderEventListcomputed property combinesstate.componentEventandstate.componentEvents, ensuring it updates reactively when these dependencies change. This confirms that the computed property will reflect changes in the underlying state.
renderEventListis defined ascomputed(() => ({ ...state.componentEvent, ...state.componentEvents })), ensuring reactivity.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the reactivity of `renderEventList`. # Test: Search for the computed property implementation. Expect: Correct implementation of reactivity. rg --type vue 'const renderEventList = computed'Length of output: 78
Script:
#!/bin/bash # Description: Verify the reactivity of `renderEventList` in Vue files using ast-grep. # Test: Search for the computed property implementation of `renderEventList`. ast-grep --lang vue --pattern 'const renderEventList = computed($_)'Length of output: 177
Script:
#!/bin/bash # Description: Search for the `computed` keyword in the `BindEvents.vue` file to find the `renderEventList` implementation. # Test: Search for the `computed` keyword in the `BindEvents.vue` file. rg 'computed' packages/settings/events/src/components/BindEvents.vue -A 5Length of output: 1006
81-84: EnsurerenderEventListis reactive inAddEventsDialog.The computed property
renderEventListis passed as a prop toAddEventsDialog. Ensure thatrenderEventListis reactive and updates as expected whenstate.componentEventorstate.componentEventschange.Verify the reactivity of
renderEventListby checking the computed property implementation and its dependencies.Verification successful
renderEventListis Reactive inAddEventsDialog. The computed propertyrenderEventListis reactive as it depends onstate.componentEventandstate.componentEvents, which are updated within awatchEffect. This ensures that any changes to these states will trigger the recomputation ofrenderEventList.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the reactivity of `renderEventList`. # Test: Search for the computed property implementation. Expect: Correct implementation of reactivity. rg --type vue 'const renderEventList = computed'Length of output: 78
Script:
#!/bin/bash # Use ast-grep to find the implementation of the computed property `renderEventList` in Vue files. ast-grep --lang javascript --pattern 'const renderEventList = computed($_)'Length of output: 166
Script:
#!/bin/bash # Use rg to search for the definition of `renderEventList` in .vue files. rg 'renderEventList' --glob '*.vue' -A 5Length of output: 3595
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- packages/settings/events/src/components/BindEvents.vue (5 hunks)
Files skipped from review as they are similar to previous changes (1)
- packages/settings/events/src/components/BindEvents.vue
| @@ -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?.zh_CN }}</span> | |||
There was a problem hiding this comment.
zh_CN建议改用locale，label?.[locale]
| @@ -126,18 +126,18 @@ export default { | |||
|
|
|||
| const isBlock = computed(() => Boolean(pageState.isBlock)) | |||
| const isEmpty = computed(() => Object.keys(state.bindActions).length === 0) | |||
| const renderEventList = computed(() => ({ ...state.componentEvent, ...state.componentEvents })) | |||
There was a problem hiding this comment.
这两个变量能否换一个名字，难区分容易弄错，并且state.componentEvent看起来也并不是单个事件的意思
English | 简体中文
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
Background and solution
What is the current behavior?
修复画布切换选择组件后，高级面板事件列表仍然显示原组件事件列表的bug
Issue Number: close #747
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
New Features
renderEventList, for improved data handling.Bug Fixes
Refactor
state.componentEventstorenderEventListfor clarity and efficiency.