feat(dialog): 优化全屏交互体验，实现全屏状态可控，并增大全屏按钮热区#660
Conversation
- 实现了对话框的全屏和非全屏状态切换 - 支持 v-model 受控 - 优化全屏切换按钮交互体检
|
Thanks for opening this pull request! Please check out our contributing guidelines. 感谢您开启此拉取请求！请查看我们的 贡献者指南。 |
📝 WalkthroughWalkthrough对话框组件的全屏状态由内部响应式布尔值改为使用 Changes
Estimated code review effort1 (~5分钟) Poem
📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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
Documentation and Community
|
dosubot
Bot
added
size:S
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🔭 Outside diff range comments (1)
web/src/components/ma-dialog/index.vue (1)
106-106: 模板绑定需要更新为统一状态模板中仍然绑定的是
fullscreen而不是统一的isFullscreen计算属性，这使得重构不完整，对话框的实际全屏状态不会反映统一的状态管理逻辑。需要修改为：
- :fullscreen="fullscreen" + :fullscreen="isFullscreen"
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
web/src/components/ma-dialog/index.vue(2 hunks)
🔇 Additional comments (2)
web/src/components/ma-dialog/index.vue (2)
54-55: v-model 声明正确fullscreen 的 v-model 声明语法正确，默认值设置为 false 是合理的。
123-128: 模板优化很好，增强了用户体验使用
el-link包装全屏图标是很好的改进：
- 增大了点击热区，提升移动端体验
- 保持了原有的视觉效果
- 正确使用了
isFullscreen进行状态切换和图标显示注意：这部分代码的正确性依赖于修复
isFullscreen计算属性的相关问题。
dosubot
Bot
added
size:XS
- 将全屏状态从本地 ref 变量转换为 defineModel 实现双向绑定 - 将点击事件处理从 SVG 图标移至父级 el-link 元素 - 通过向父组件暴露全屏状态提高组件可复用性 - 扩大全屏切换的点击区域，提升用户体验
TAYUN
changed the title
There was a problem hiding this comment.
Pull Request Overview
This PR optimizes the fullscreen interaction experience in a dialog component by making the fullscreen state controllable and expanding the clickable area of the fullscreen button. The changes improve component reusability by exposing the fullscreen state as a two-way bindable model property and enhance user experience by moving the click handler to a larger parent element.
- Convert local fullscreen ref to a defineModel for two-way binding
- Move click event handler from SVG icon to parent el-link element
- Expand the clickable area for better user interaction
|
Awesome work, congrats on your first merged pull request! 祝贺你的第一个拉取请求被合并！ |
优化内容：
对比
全屏状态管理改进：
旧代码：使用本地 ref 变量 fullscreen 管理全屏状态
新代码：使用
defineModel<boolean>('fullscreen', { default: false })将全屏状态暴露为可双向绑定的 prop，使父组件可以控制和响应对话框的全屏状态点击事件处理优化：
旧代码：全屏切换点击事件绑定在 SVG 图标上
@click="() => fullscreen = !fullscreen"新代码：点击事件移到了父元素 el-link 上，使点击区域更大，提高了用户体验
这些变更主要提高了组件的可复用性和灵活性，通过将全屏状态作为可双向绑定的 model 暴露出来，使父组件能够更好地控制对话框的行为。同时，点击区域的优化也提升了用户体验。
优化前：
default.mp4
优化后
default.mp4
Summary by CodeRabbit
新功能
重构