fix：Optimize JS page style #1081
Conversation
WalkthroughThe pull request introduces changes to two Vue components: Changes
Possibly related PRs
Suggested labels
Suggested reviewers
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 using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
packages/common/component/SvgButton.vue (2)
37-47: Well-structured implementation following Vue 3 best practices.The changes demonstrate good practices:
- Proper emit type declaration
- Correct composition API usage
- Clean event handling with focus management
Consider adding a comment explaining why the blur is necessary to help future maintainers understand the focus management requirement.
const handleClick = (event) => { + // Explicitly remove focus to prevent focus persistence after navigation event.target.blur() emit('click', event) }
Line range hint
3-7: Consider enhancing tooltip control for better navigation handling.To address the floating tooltip issue mentioned in the PR objectives, consider adding props to control tooltip visibility or implementing an explicit hide method. This would provide more control over tooltip behavior during navigation.
<tiny-tooltip effect="dark" :content="tips" + :visible="isTooltipVisible" :placement="placement">props: { + isTooltipVisible: { + type: Boolean, + default: true + }, tips: { type: String, default: '' },
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/common/component/SvgButton.vue(2 hunks)packages/plugins/script/src/Main.vue(2 hunks)
✅ Files skipped from review due to trivial changes (1)
- packages/plugins/script/src/Main.vue
🔇 Additional comments (1)
packages/common/component/SvgButton.vue (1)
2-2: Improved button focus management.The change to use
handleClickwith explicit blur handling is a good improvement for accessibility and user experience.However, given the PR objectives mentioning issues with floating tooltips persisting after navigation, we should verify the tooltip cleanup.
✅ Verification successful
Tooltip cleanup is handled automatically by @opentiny/vue
The TinyTooltip component from @opentiny/vue handles its own cleanup during component unmounting. The added
handleClickwith blur handling provides additional cleanup assurance.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for tooltip cleanup handling in navigation-related code rg -l "tooltip" | xargs rg -A 5 "(beforeRouteLeave|destroyed|unmounted|cleanup)"Length of output: 2143
Script:
#!/bin/bash # Search for TinyTooltip imports and usage rg -A 3 "@opentiny/vue.*Tooltip" # Search for tooltip-related cleanup in component lifecycle hooks ast-grep --pattern 'onBeforeUnmount() { $$$ }' # Search for tooltip-related DOM cleanup rg -A 3 "tooltip.*remove|remove.*tooltip"Length of output: 129
Script:
#!/bin/bash # Search for any tooltip-related imports rg "import.*tooltip|tooltip.*from" -i # Search for tooltip in component definitions rg "tooltip" -A 5 "\.vue$" # Search for various lifecycle hooks ast-grep --pattern 'setup() { $$$ onUnmounted($$$) $$$ }'Length of output: 3770
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?
点击帮助按钮跳转页面，返回界面时悬浮提示信息一直存在
Page JS 页面的 placeholder 代码字体较大，存在多余空格
Issue Number: N/A
What is the new behavior?
点击帮助按钮跳转页面，返回界面时悬浮提示消息消失
字体大小调整、删除多余空格，效果如下
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
New Features
SvgButtoncomponentMain.vueStyle