feat: intput v15 #2889
feat: intput v15 #2889
Conversation
概述遍历本次拉取请求主要关注 NutUI React 从 2.x 版本到 3.x 版本的迁移过程。变更涉及组件属性重命名、样式调整、新增属性（如 变更
可能相关的 PR
建议标签
建议审阅者
诗歌
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 (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #2889 +/- ##
==========================================
Coverage 85.84% 85.84%
==========================================
Files 271 271
Lines 18427 18434 +7
Branches 2726 2728 +2
==========================================
+ Hits 15818 15825 +7
Misses 2604 2604
Partials 5 5 ☔ View full report in Codecov by Sentry. |
![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 (11)
src/packages/input/demos/taro/demo11.tsx (1)
6-9: 使用 Space 组件加强布局可读性。
将多个 Input 包裹在 Space 中，更加符合分块布局的思路，增强了可读性和维护性。建议后续可根据需求自定义更多 Space 属性（如 size）以丰富布局。src/packages/input/demos/h5/demo6.tsx (1)
7-10: 替换 Fragment 为 Space，增强视觉排版。
通过方向设为 vertical 并增加底部外边距，使多输入框的排版更有层次感，利于用户查看与交互。若后续需要针对不同场景，可动态调整 Space 的间距或方向。src/packages/input/demos/taro/demo6.tsx (1)
7-10: 利用 Space 组件进行垂直分布。
将多个可清除 Input 垂直排列，有效提升界面友好度；其中 style 属性也符合预期，建议在后期统一样式管理以避免内联样式过度分散。src/packages/input/demos/h5/demo4.tsx (1)
6-11: 通过 Spaces 垂直排列多类型 Input。
原先可能使用简单的包裹元素，现在用 Space 更好地管理各行间距，并突出演示清晰度。可进一步结合样式方案做更细微的间距或主题适配。src/packages/input/demos/h5/demo10.tsx (1)
7-14: **用 Space 包裹 Input 组件 **使用
Space垂直排列并设置marginBottom能有效简化布局逻辑。但建议在父级容器（或根布局）保持整体的样式管理，尽量减少内联样式，提高可维护性。src/packages/input/demos/taro/demo10.tsx (1)
7-14: **在 Taro 环境下使用 Space 组件 **在
Taro中同样可以使用Space优化布局。若有样式覆盖需求，建议使用外部样式类或全局变量，尽量减少内联样式方便后期维护。src/packages/input/demos/h5/demo9.tsx (2)
8-15: 布局结构优化使用 flex 布局和适当的内边距改善了输入框的视觉呈现，结构更加清晰。建议考虑以下优化：
- 可以将样式抽取为独立的样式类，避免内联样式
- 背景色建议使用设计系统变量而不是直接使用 '#fff'
- <div - style={{ - display: 'flex', - alignItems: 'center', - background: '#fff', - padding: '0 10px', - }} - > + <div className="password-input-container">同时在样式文件中添加：
.password-input-container { display: flex; align-items: center; background: var(--nutui-color-background); padding: 0 10px; }
21-25: 图标交互区域优化建议图标的颜色使用设计系统变量是很好的实践。不过，建议优化以下几点：
- 为图标点击区域添加最小尺寸，提升可点击性
- 考虑添加鼠标悬停效果
<div className="right" + style={{ + minWidth: '24px', + minHeight: '24px', + display: 'flex', + alignItems: 'center', + cursor: 'pointer', + }} onClick={() => setInputType(inputType === 'text' ? 'password' : 'text')} >src/packages/input/demos/taro/demo13.tsx (1)
9-17: 建议优化布局结构当前的 flex 布局实现较为复杂，建议：
- 将样式抽取为独立的样式类
- 使用 Taro 的样式方案而不是内联样式
- <View - style={{ - display: 'flex', - flexWrap: 'nowrap', - alignItems: 'center', - flexDirection: 'row', - backgroundColor: '#ffffff', - }} - > + <View className="verification-input-container">src/packages/input/input.scss (2)
12-16: 建议统一图标尺寸变量图标相关的尺寸值建议使用变量管理：
- 将 14px 的尺寸提取为设计系统变量
- 确保图标尺寸在不同场景下保持一致
.nut-icon { color: $color-text-disabled; - width: 14px; - height: 14px; - font-size: 14px; + width: $nut-icon-size-sm; + height: $nut-icon-size-sm; + font-size: $nut-icon-size-sm; }
17-22: 新增容器样式结构合理
.nut-input-container的样式结构清晰，建议：
- 考虑添加 CSS 变量以支持自定义高度
- 使用 CSS 变量替代直接的像素值
&-container { - height: 38px; + height: var(--nutui-input-container-height, 38px); padding: $input-padding; background-color: $input-background-color; border-radius: $input-border-radius; border-bottom: $input-border-bottom-width solid $input-border-bottom; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (31)
migrate-from-v2.md(1 hunks)src/config.json(1 hunks)src/packages/formitem/formitem.scss(1 hunks)src/packages/input/demos/h5/demo1.tsx(1 hunks)src/packages/input/demos/h5/demo10.tsx(1 hunks)src/packages/input/demos/h5/demo11.tsx(1 hunks)src/packages/input/demos/h5/demo13.tsx(1 hunks)src/packages/input/demos/h5/demo4.tsx(1 hunks)src/packages/input/demos/h5/demo5.tsx(1 hunks)src/packages/input/demos/h5/demo6.tsx(1 hunks)src/packages/input/demos/h5/demo7.tsx(1 hunks)src/packages/input/demos/h5/demo8.tsx(1 hunks)src/packages/input/demos/h5/demo9.tsx(1 hunks)src/packages/input/demos/taro/demo1.tsx(1 hunks)src/packages/input/demos/taro/demo10.tsx(1 hunks)src/packages/input/demos/taro/demo11.tsx(1 hunks)src/packages/input/demos/taro/demo12.tsx(1 hunks)src/packages/input/demos/taro/demo13.tsx(1 hunks)src/packages/input/demos/taro/demo14.tsx(0 hunks)src/packages/input/demos/taro/demo2.tsx(1 hunks)src/packages/input/demos/taro/demo3.tsx(0 hunks)src/packages/input/demos/taro/demo4.tsx(1 hunks)src/packages/input/demos/taro/demo5.tsx(1 hunks)src/packages/input/demos/taro/demo6.tsx(1 hunks)src/packages/input/demos/taro/demo7.tsx(1 hunks)src/packages/input/demos/taro/demo8.tsx(1 hunks)src/packages/input/demos/taro/demo9.tsx(1 hunks)src/packages/input/input.scss(2 hunks)src/packages/input/input.taro.tsx(4 hunks)src/packages/input/input.tsx(4 hunks)src/styles/variables.scss(1 hunks)
💤 Files with no reviewable changes (2)
- src/packages/input/demos/taro/demo3.tsx
- src/packages/input/demos/taro/demo14.tsx
✅ Files skipped from review due to trivial changes (5)
- src/packages/input/demos/taro/demo12.tsx
- src/packages/input/demos/taro/demo2.tsx
- src/packages/input/demos/h5/demo8.tsx
- src/packages/input/demos/h5/demo13.tsx
- src/packages/input/demos/h5/demo7.tsx
🔇 Additional comments (46)
src/packages/input/demos/taro/demo7.tsx (1)
18-18: 已删除 placeholderTextColor 的简化实现
移除了不必要的 placeholderTextColor 属性后，Input 组件参数更精简，核心功能保持不变，可维护性也更高。
src/packages/input/demos/h5/demo1.tsx (4)
2-2: 导入 Divider 组件可增强组件分割的灵活性
该行新增了对 Divider 组件的引用，为页面布局和内容分割提供了更便捷的手段。此处实现合理且清晰。
7-7: 优化占位文本以提升可读性
占位文字“请输入文本：容器型”精准地描述了输入期望，有助于用户快速理解输入内容。
8-8: Divider 组件能够有效区隔页面元素
在输入区域与下方元素之间增加 Divider，可以提高页面结构的层次感和交互体验。
9-9: 使用 plain 属性简化样式
此处在 Input 中添加 plain 属性，使输入框呈现纯文本风格，与常规输入框形成鲜明对比，满足多样化场景需求。实现方法合理。
src/packages/input/demos/taro/demo1.tsx (4)
2-2: 组件导入保持与 H5 版本一致
从 @nutui/nutui-react-taro 引入 Divider、Input，与之前 H5 版本的处理思路统一，便于多端复用与维护。
7-7: 占位文字提升输入可视化指引
“请输入文本：容器型”描述简明易懂，为用户提供了良好的交互提示。
8-8: 使用 Divider 使界面层次分明
通过 Divider 分割输入区域可以改善视觉体验并突出不同功能区域。
9-9: 新增 plain 属性以展现纯文本风格
给输入框添加 plain 属性能够满足不同风格需求，便于与容器型输入框区分。
src/packages/input/demos/h5/demo5.tsx (4)
2-2: 引入 Space 组件为布局提供更优雅的排版
新增对 Space 组件的引用，便于垂直或水平分布多个组件时保持一致的间距布局。
6-6: 在 Space 中使用垂直布局
通过 direction="vertical" 属性实现纵向排列，style={{ marginBottom: 10 }} 着重突出了空间分隔，UI 更加清晰。
7-7: 只读模式下为用户提供固定显示内容
设置 readOnly 并配合 value 使用，可明确向用户展示内容而避免误编辑，符合只读场景需求。
9-9: 布局结束标识
Space 组件在此处闭合，整体结构形成较好的纵向排布，可读性较高。
src/packages/input/demos/taro/demo5.tsx (5)
2-2: 引入 Taro 版 Space 组件
与 H5 版本保持一致的调用方式，便于多端统一管理和使用。
6-6: 纵向排列组件以提升排版可读性
在 Space 中使用 direction="vertical" 布局，并设置恰当的 marginBottom，有效提升模块间的视觉区隔度。
7-7: 只读输入框便于显示但禁止编辑
通过 readOnly 并设置 value，可让用户直接查看固定内容，避免误修改。
8-8: 禁用输入框提示不可修改状态
使用 disabled 属性的输入框，可明显告知用户该栏位暂不支持编辑。占位符的描述也很直观。
9-9: 完善布局的闭合
Space 组件至此闭合，排版结构清晰。
src/packages/input/demos/taro/demo11.tsx (1)
2-2: 引入 Space 组件的改动已确认。
此更改可以使布局更加灵活，整体实现无冲突。当前看起来完全可行。
src/packages/input/demos/h5/demo6.tsx (1)
2-2: 新增对 Space 组件的导入。
引入方式正确，满足组件的使用需求，无需额外改动。
src/packages/input/demos/taro/demo6.tsx (1)
2-2: 导入 Space 组件以实现更优布局。
此处导入语句与 @nutui/nutui-react-taro 库保持一致，便于统一管理并利于 Taro 环境的兼容。
src/packages/input/demos/h5/demo4.tsx (1)
2-2: 新增 Space 组件导入以改善布局控制。
此改动在 Demo4 中引入了与其他组件一致的布局管理方式，提高了代码的一致性。
src/packages/input/demos/h5/demo10.tsx (1)
2-2: **引入 Space 组件以增强布局灵活性 **
此处新增导入 Space 组件可以让多个 Input 组件在竖直方向更好地排布，提升可读性和布局一致性。
src/packages/input/demos/taro/demo10.tsx (1)
2-2: **引入 Space 组件以优化间距 **
此处使用 Space 将多个 Input 组件在垂直方向分隔，简洁明了，布局清晰。
src/packages/input/demos/taro/demo8.tsx (1)
9-37: **替换 Fragment 为 View 容器并调整样式 **
通过添加 display: 'flex'、alignItems: 'center' 等样式实现更直观的布局方式。整体实现逻辑合理，Input 与计数展示分离清晰，有助于后续扩展。若需扩展更多 UI 交互，可考虑将样式抽离到单独的样式文件（或使用全局样式变量）以保持组件清爽。
src/packages/input/demos/taro/demo9.tsx (1)
10-35: **转换为 View 布局并实现密码可见性切换 **
切换成带样式的 View，结合图标点击事件动态变更 type，功能直观且可读性好。若需进一步扩展，可考虑将切换逻辑抽象为自定义 Hook 或与业务逻辑解耦，提升复用性与维护性。
src/packages/input/input.tsx (4)
36-36: 添加了 plain 属性
此更改为组件的样式控制提供了更高的灵活性，当前实现没有明显问题。
60-60: 在 defaultProps 中设置 plain: false 默认值
这样可以确保在未对 plain 明确设值时，组件仍保持原有样式。
94-94: 在组件中解构 plain 属性
通过此处获取到的 plain 值，可灵活控制输入框的样式，逻辑清晰。
133-138: 根据 plain 切换样式
通过三元运算符选择不同的类名，既简洁又直观，便于统一管理样式。
src/packages/input/input.taro.tsx (4)
41-41: 添加了 plain 属性
为 Taro 端输入组件提供了同样的样式扩展能力，与其他端口保持一致。
65-65: 在 defaultProps 中设置 plain: false
为不启用简洁样式的情形提供可靠的默认值，与常规输入外观保持一致。
95-95: 在组件中解构 plain 属性
保留设置并可直接用于样式或逻辑判断，确保与 H5 端的行为一致。
138-143: 通过 plain 切换 Taro 端样式
与 H5 端类似，使用三元判断来切换 plain 或默认容器样式，实现统一的跨端体验。
src/packages/input/demos/h5/demo11.tsx (2)
2-2: 新增引用 Space 组件
通过从 @nutui/nutui-react 导入 Space，可使示例布局更简洁。
6-9: 使用 Space 提供垂直间距
在多个 Input 之间加上合适的留白，使演示展示更加整洁美观。
src/packages/input/demos/taro/demo4.tsx (2)
2-2: 引入 Space 组件
在 Taro 端示例中同样使用了 Space，保持风格一致性。
6-11: 用 Space 包裹多个 Input
通过垂直排列并设置留白，示例展示更直观，易于区分不同类型的输入方式。
src/packages/input/demos/taro/demo13.tsx (1)
31-35: 按钮文字大小可能影响可用性
当前验证码按钮的文字大小为 12px，在移动端可能较小：
- 建议适当增加文字大小，提升可读性
- 考虑增加按钮的最小点击区域
src/packages/input/input.scss (1)
44-48: 只读状态样式实现合理
新增的只读状态样式实现清晰，使用了正确的设计系统颜色变量。
src/packages/formitem/formitem.scss (1)
3-4: 布局调整合理！
新增的垂直居中对齐和内边距设置有助于改善表单项的视觉效果和布局规范性。
migrate-from-v2.md (1)
420-423: 文档更新清晰完整！
对Input组件的改动说明详尽：
- 新增plain属性，区分纯文本和容器两种形态
- 优化了readonly和disabled的样式区分
- 简化了样式变量，提高了维护性
src/config.json (1)
541-541: 配置更新正确！
Input组件的配置更新符合v15版本的要求：
- 正确添加了v15标记
- 更新了作者信息
src/styles/variables.scss (3)
555-556: 改进：边框圆角现在更加统一
使用 $radius-s 变量作为输入框的边框圆角值是个很好的改进：
- 与设计系统的其他组件保持一致
- 便于统一管理和维护圆角样式
550-553: 注意：请确认移除的颜色变量不会影响现有功能
注释掉的 $input-disabled-color 和 $input-color 变量可能会影响依赖这些变量的组件样式。建议在移除之前：
- 检查是否有组件直接使用这些变量
- 确保有适当的 CSS 自定义属性作为替代
✅ Verification successful
移除这些变量是安全的
经过仔细验证，注释掉的 $input-disabled-color 和 $input-color SCSS 变量在代码库中没有被使用。这表明：
- 这些变量可能已经被 CSS 自定义属性（CSS Custom Properties）所替代
- 移除这些变量不会对现有功能造成任何影响
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查是否有其他文件使用了这些变量
rg "\$input-disabled-color|\$input-color" --type scss
Length of output: 82
Script:
#!/bin/bash
# Using ripgrep to search for the variables without file type restriction
rg "\$input-disabled-color|\$input-color"
# Also search with ast-grep to catch any SCSS/CSS related patterns
ast-grep --pattern '$input-disabled-color'
ast-grep --pattern '$input-color'
# Search for files with .scss extension to verify file type
fd "\.scss$"
Length of output: 5723
Script:
#!/bin/bash
# 检查 input 组件和其他相关组件中的使用情况
rg "\$input-disabled-color|\$input-color" src/packages/input/
rg "\$input-disabled-color|\$input-color" src/packages/form/
rg "\$input-disabled-color|\$input-color" src/packages/textarea/
Length of output: 187
561-561: 注意：内边距变更可能影响布局
将内边距从 10px 25px 改为统一的 12px 值：
- 简化了样式值
- 可能会影响输入框的视觉平衡和内容布局
- 需要确认这个改动在各种使用场景下都适用
建议：
- 在不同尺寸的输入框中验证新的内边距
- 确保与表单中的其他元素对齐正常
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
plain属性到Input组件，允许根据样式需求进行布尔值设置。Space组件以改善输入框之间的垂直间距。文档
样式