评分组件中间有空隙, 点击不生效, 违反直觉

[gme-gpl]

描述错误

点击评分组件星星的中间, 会出现没点上的情况

查看前端样式, 发现组件库是设置了margin-left: 6px来分隔, 建议使用padding

复现步骤

1. 打开官网评分组件: https://www.naiveui.com/zh-CN/light/components/rate
2. 调整鼠标位置, 点击星星中间的部分
3. 移开鼠标, 发现没有点成功

最小复现链接

官网评分组件: https://www.naiveui.com/zh-CN/light/components/rate

系统信息

与环境无关

使用的包管理器

npm

验证

• [X] 阅读 贡献指南。
• [X] 阅读 文档。
• [X] 检查是否已经存在相同问题的问题，以避免创建重复的问题。
• [X] 确保这是一个具体的 bug。有关问题和答案，请打开 GitHub 讨论。
• [X] 提供的复现是最小可复现的示例。

[jahnli]

没复现，能否录个视频

[gme-gpl]

没复现，能否录个视频

视频不好展示鼠标点击效果，我截图说明。

鼠标点击下图箭头所指的区域时，相邻的两个星星都没有被选中。 （鼠标从下到上进入该区域，这种情况更明显，此时没有星星被高亮，点击也是无效的）

在填写表单时，用户点击到该区域，以为选中了，然后去填下一个表单项，等到提交表单时，才提示有表单项未填写。这会影响用户的体验，所以我觉得是有必要修复的。目前我是通过覆盖样式将 .n-rate .n-rate__item:not(:first-child){ margin-left: 6px; } 改成 .n-rate .n-rate__item:not(:first-child){ margin-left: 0px !important; padding-left: 6px; } 来解决的。希望官方库可以解决，谢谢。