feat(form): 多端适配 #2595
feat(form): 多端适配 #2595
Conversation
Walkthrough本次变更涉及多个文件的更新，主要包括在 Changes
Possibly related PRs
Suggested labels
Poem
Tip OpenAI O1 model for chat
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: 2
Outside diff range and nitpick comments (3)
src/packages/formitem/formitem.scss (1)
68-68: 建议移除不必要的空行第 68 行的空行是不必要的，建议移除以提高代码的简洁性。
-src/packages/formitem/formitem.taro.tsx (2)
61-62: 类型更新很好，但请尝试解决潜在的类型问题。将
context属性声明更新为使用React.ContextType<typeof Context>，提供了更好的类型信息。但是，需要使用@ts-ignore注释来抑制 TypeScript 错误，这表明代码库中可能存在类型不匹配或过时的类型定义。建议调查并解决潜在的类型问题，以消除对忽略注释的需要，提高代码的类型安全性。
268-268: 请删除调试代码。这行 console log 语句似乎是遗留的调试代码，应该删除。
-console.log('testtest', child)
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (1)
packages/nutui-taro-demo/yarn.lockis excluded by!**/yarn.lock,!**/*.lock
Files selected for processing (15)
- packages/nutui-taro-demo/package.json (2 hunks)
- scripts/rn/copy-file.js (1 hunks)
- src/config.json (2 hunks)
- src/packages/form/demo.taro.tsx (3 hunks)
- src/packages/form/demos/taro/demo1.tsx (3 hunks)
- src/packages/form/demos/taro/demo2.tsx (2 hunks)
- src/packages/form/demos/taro/demo4.tsx (2 hunks)
- src/packages/form/form.harmony.css (1 hunks)
- src/packages/form/form.scss (0 hunks)
- src/packages/form/form.taro.tsx (3 hunks)
- src/packages/form/form.tsx (1 hunks)
- src/packages/formitem/formitem.harmony.css (3 hunks)
- src/packages/formitem/formitem.scss (4 hunks)
- src/packages/formitem/formitem.taro.tsx (9 hunks)
- src/packages/formitem/formitem.tsx (7 hunks)
Files not reviewed due to no reviewable changes (1)
- src/packages/form/form.scss
Additional context used
Biome
src/packages/formitem/formitem.tsx
[error] 236-238: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
src/packages/formitem/formitem.taro.tsx
[error] 240-242: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
Additional comments not posted (71)
src/packages/form/demos/taro/demo1.tsx (2)
50-54: 看起来不错！为
TextArea组件添加内联样式以调整其内边距的方式是合理的。这有助于改善文本区域的视觉呈现。
Line range hint
1-60: 请确认是否有意删除InputNumber组件。
InputNumber组件已从表单中完全删除。虽然这简化了表单结构，但不清楚该删除是否符合表单的要求和 PR 的目标。请验证删除
InputNumber组件是否是有意的，并确保它与表单的整体要求保持一致。如果删除是无意的，请考虑恢复该组件。scripts/rn/copy-file.js (1)
35-35: 看起来不错！将
'formitem'添加到childAdaptedArray数组中是合理的，这表明formitem组件现在被视为一个子组件。这个改动很小，不会引入任何问题。src/packages/form/demos/taro/demo4.tsx (3)
10-10: 看起来不错！导入
pxTransform工具函数的语句写法正确。这个函数可能用于将像素值转换为响应式格式，有助于提高布局的适应性。
45-45: 很好的改进！将容器的
flexDirection样式显式设置为 'row'，可以确保按钮水平对齐。这个改动增强了表单组件的布局一致性。
52-52: 非常棒的优化！将重置按钮的
marginLeft样式中硬编码的 '20px' 像素值替换为由pxTransform(20)生成的动态值，使布局更具响应性。这个改动提高了表单组件在不同屏幕尺寸下的适应性。src/packages/form/demo.taro.tsx (6)
3-3: 导入正确从
@tarojs/components导入Text组件是正确且必要的，以便在文件后面使用Text组件。
13-13: 导入正确从
@/utils/platform-taro导入harmonyAndRn工具函数是正确且必要的，以便在文件后面根据平台有条件地渲染某些组件。
41-43: 改进文本处理将翻译后的文本用
Text组件包裹可以改进文本处理，是一个很好的实践。类名 "h2" 适合用于标题。
47-52: 根据平台有条件地渲染通过
harmonyAndRn函数判断当前环境是否为 Harmony 或 React Native，有条件地渲染Demo3组件，可以确保Demo3组件只在适当的环境中显示。这增强了组件对不同平台的适应性。
55-60: 根据平台有条件地渲染与前面的代码段类似，通过
harmonyAndRn函数判断当前环境是否为 Harmony 或 React Native，有条件地渲染Demo5组件，可以确保Demo5组件只在适当的环境中显示。这增强了组件对不同平台的适应性。
64-69: 根据平台有条件地渲染与前面的代码段类似，通过
harmonyAndRn函数判断当前环境是否为 Harmony 或 React Native，有条件地渲染Demo7组件，可以确保Demo7组件只在适当的环境中显示。这增强了组件对不同平台的适应性。src/packages/form/demos/taro/demo2.tsx (3)
3-3: 修改合理将
<div>元素替换为 Taro 框架中的<View>组件是合适的，因为在 Taro 中，<View>是推荐用于布局的组件。
10-10: 引入工具函数从
@/utils/px-transform导入pxTransform工具函数的语句写法正确。pxTransform函数可能用于将像素转换为响应式单位，这是响应式设计的良好实践。
43-57: 优化表单页脚的布局和样式这部分的修改优化了表单页脚的布局和样式：
- 将
<div>元素替换为 Taro 框架中的<View>组件，更适合 Taro 的渲染上下文。- 在页脚中添加了
flexDirection: 'row'样式，确保按钮水平排列。- 使用
pxTransform工具函数调整重置按钮的marginLeft样式，以实现一致的像素到 rpx 的转换，提高了不同屏幕尺寸下的响应性。这些修改改善了组件的视觉结构和可维护性，而没有改变其核心功能。
src/packages/form/form.tsx (1)
99-101: 代码修改没有问题！将
labelPosition添加到Context.Provider的 value 中，可以让子组件通过 context 访问到标签的位置信息。这增强了Form组件的灵活性，使子组件能够根据标签位置来调整渲染或行为。src/packages/form/form.taro.tsx (5)
2-2: 使用 Taro 特定的Form组件从
@tarojs/components导入Form组件并将其重命名为TForm，以使用 Taro 特定的Form组件而不是标准的 HTML<form>元素。这一改变增强了与 Taro 框架的兼容性，有助于构建跨平台应用。
81-81: 使用 Taro 特定的<TForm>组件将标准的 HTML
<form>元素替换为 Taro 特定的<TForm>组件，这与第 2 行的导入更改一致。使用 Taro 特定的<TForm>组件可以增强与 Taro 框架的兼容性。
100-100: 为Context.Provider提供额外的上下文修改提供给
Context.Provider的上下文，以包含formInstance和labelPosition。这一改变允许使用该上下文的子组件访问表单实例和标签位置。提供额外的上下文可以根据表单内标签的位置实现更动态的行为或样式。
101-102: 使用更新后的Context.Provider包装children属性将
children属性用更新后的Context.Provider包装起来。这一改变是为了向子组件提供更新后的上下文。包装children属性可以确保任何子组件都能从上下文中访问到formInstance和labelPosition。
107-107: 关闭<TForm>组件关闭
<TForm>组件以匹配第 81 行的开始标签。关闭<TForm>组件可以确保 JSX 的正确语法和结构。src/packages/formitem/formitem.scss (11)
5-11: 代码没问题！使用 flexbox 来控制表单项标签的布局是正确的做法。代码修改看起来没有问题。
16-19: 新增的必填标签样式 LGTM！
.nut-form-item-label-required类正确设置了必填标签的颜色和右边距。代码修改没有问题。
20-23: 请说明.nut-form-item-labeltxt类的用途新增的
.nut-form-item-labeltxt类设置了非常小的字体大小（12px）和高度（10px），可能会影响可读性。请说明一下这个类的具体用途，以及为什么要设置这么小的尺寸。
26-27: 代码没问题！使用 flexbox 并将 flex-direction 设置为 column，可以正确控制表单项主体的纵向布局。代码修改看起来没有问题。
53-53: 为什么要移除 textarea 的 padding？将
.nut-textarea的 padding 设置为 0 可能会影响其视觉效果和可用性。请说明一下移除 padding 的具体原因。
102-109: 新增的右对齐标签样式 LGTM！
.nut-form-item-label-right类正确使用了 flexbox 的 justify-content 属性和 padding-right 将标签靠右对齐。代码修改没有问题。
111-115: 新增的左对齐标签样式 LGTM！
.nut-form-item-label-left类正确使用了 relative 定位和 padding-left 将标签靠左对齐。代码修改没有问题。
117-122: 新增的左对齐必填标记样式 LGTM！
.nut-form-item-label-left-required类正确使用了 absolute 定位将必填标记定位在左对齐标签的左侧。代码修改没有问题。
124-128: 新增的垂直布局样式 LGTM！
.nut-form-item-top类正确使用了 flexbox 的 flex-direction 和 align-items 属性将标签和主体垂直堆叠。代码修改没有问题。
130-134: 新增的顶部对齐标签样式 LGTM！
.nut-form-item-label-top类正确设置了 display、padding-bottom 和 padding-right 属性来样式化顶部对齐的标签。代码修改没有问题。
136-139: 新增的顶部对齐主体样式 LGTM！
.nut-form-item-body-top类正确重置了 margin-left 为 0 并将 width 设置为 100%，以适应顶部对齐的表单项主体。代码修改没有问题。src/packages/formitem/formitem.harmony.css (14)
5-6: 代码看起来不错！使用 flexbox 布局和 row 方向可以改善标签的布局行为。
11-11: 代码看起来不错！将 flex 属性设置为
0 0 auto，可以防止标签增大或缩小，同时允许它采用其固有宽度。这改善了标签的布局行为。
13-13: 代码看起来不错！将文本对齐方式设置为左对齐，可以提高多方向布局的一致性。
15-18: 代码看起来不错！为必填标签引入专门的样式类，可以简化结构并增强可读性。
19-22: 代码看起来不错！为标签文本设置字体大小和高度，可以改善标签文本的视觉层次结构和对齐方式。
25-27: 代码看起来不错！使用 flexbox 布局和 column 方向可以改善表单项主体的布局行为。
29-29: 代码看起来不错！将表单项主体插槽的文本对齐方式设置为左对齐，可以提高多方向布局的一致性。
37-38: 代码看起来不错！将输入文本的对齐方式设置为左对齐，并设置颜色，可以提高多方向布局的一致性和视觉层次结构。
49-49: 代码看起来不错！为文本区域删除内边距，可以改善表单项主体插槽内文本区域的布局一致性。
53-53: 代码看起来不错！将文本区域的文本对齐方式设置为左对齐，可以提高多方向布局的一致性。
56-58: 代码看起来不错！将表单项主体提示的文本对齐方式设置为左对齐，并设置颜色，可以提高多方向布局的一致性和错误状态的视觉层次结构。
62-65: 代码看起来不错！为从右到左 (RTL) 布局中的表单项标签调整文本对齐方式和边距，可以确保标签在 RTL 上下文中正确对齐。
68-71: 代码看起来不错！使用
.nut-rtl类为从右到左 (RTL) 布局中的表单项标签调整文本对齐方式和边距，可以确保标签在 RTL 上下文中正确对齐。
80-168: 代码看起来不错！引入新的布局类来支持不同的标签放置方式和 RTL 布局，可以增强表单项组件对各种布局要求的灵活性和适应性。
packages/nutui-taro-demo/package.json (2)
78-78: 依赖添加没有问题！添加
async-validator依赖是一个有效的改动，版本指定也允许在主版本号 4 的基础上进行次版本号和修订号的更新，没有引入任何问题。
115-115: 格式更新，没有功能影响。
sass依赖解析的改动只是格式上的调整，并没有修改版本号，因此不会产生任何功能上的影响。src/packages/form/form.harmony.css (4)
1-27: 代码看起来不错！新增的
.nut-cell-group、.nut-cell-group-title、.nut-cell-group-description和.nut-cell-group-wrap类的样式定义合理，为单元格组元素提供了一致的样式。
57-143: 单元格组件的样式定义全面且合理。新增的
.nut-cell、.nut-cell-group-item、.nut-cell-left、.nut-cell-title、.nut-cell-description、.nut-cell-extra、.nut-cell-clickable和.nut-cell-divider类的样式定义全面，确保了单元格组件的一致性和视觉吸引力。样式结构良好，涵盖了单元格组件的各个方面。
145-245: 表单项组件的样式定义结构良好且全面。新增的
.nut-form-item、.nut-form-item-label、.nut-form-item-label-required、.nut-form-item-body、.nut-form-item-body-slots和.nut-form-item-body-tips类的样式定义结构清晰，为表单项组件提供了全面的样式。这些样式确保了表单项在不同方向（LTR 和 RTL）下的一致布局和外观。
Line range hint
248-314: 表单项标签定位的样式定义灵活且全面。新增的
.nut-form-item-label-right、.nut-form-item-label-left、.nut-form-item-label-left-required、.nut-form-item-top、.nut-form-item-label-top和.nut-form-item-body-top类的样式定义提供了灵活且全面的表单项标签定位方式。这些样式涵盖了各种标签位置（右、左和顶部），并确保了正确的对齐和间距。每个位置的 RTL 支持也得到了正确处理。src/packages/formitem/formitem.tsx (11)
60-60: 变更看起来不错！使用明确赋值断言表明
context会在使用前被赋值，这在语法上是正确的。请确保在使用context之前，它确实已经被赋值，以避免运行时错误。
78-79: 看起来很棒！从
this.context.formInstance.getInternal(SECRET)中解构store和setInitialValues属性，与更新后的上下文结构保持一致。为store设置默认值{}是一个很好的做法，可以处理store可能为 undefined 的情况。
91-92: 变更看起来不错！从
this.context.formInstance.getInternal(SECRET)中获取registerField和registerUpdate方法，与更新后的上下文结构保持一致。这个变更没有引入任何新逻辑或改变现有行为。
109-110: 看起来很棒！直接从
this.context.formInstance获取setFieldsValue和getFieldValue方法，同时从this.context.formInstance.getInternal(SECRET)获取dispatch方法，与更新后的上下文结构保持一致。将setFieldsValue和getFieldValue直接从this.context.formInstance访问，似乎是一个有意的改变，可能是因为这些方法现在直接在formInstance上公开。
184-184: 变更看起来不错！直接从
this.context.formInstance访问errors属性，与更新后的上下文结构保持一致。将errors直接从this.context.formInstance访问，似乎是一个有意的改变，可能是因为这个属性现在直接在formInstance上公开。
191-196: 新增的方法看起来很棒！
getClassNameWithDirection方法根据表单上下文中配置的labelPosition，生成相应的类名。它通过考虑标签位置来增强组件的样式功能。这个方法的逻辑很简单，不会引入任何潜在问题。
214-214: 看起来很棒！直接从
this.context.formInstance访问errors属性，与更新后的上下文结构保持一致。将errors直接从this.context.formInstance访问，似乎是一个有意的改变，可能是因为这个属性现在直接在formInstance上公开。
216-218: 变更看起来不错！直接从
this.context.formInstance访问starPosition属性，与更新后的上下文结构保持一致。将starPosition直接从this.context.formInstance访问，似乎是一个有意的改变，可能是因为这个属性现在直接在formInstance上公开。根据required属性或是否存在required规则来渲染星号元素的逻辑很简单，不会引入任何潜在问题。
223-223: 看起来很棒！这个变更渲染了一个具有
nut-form-item-labeltxt类的 span 元素，并将label属性作为其内容。它没有引入任何新逻辑或改变现有行为，只是对渲染的标签元素进行了小幅更新。
229-245: 变更看起来不错！这个变更利用新引入的
getClassNameWithDirection方法，根据labelPosition生成nut-form-item、nut-form-item-label和nut-form-item-body元素的类名。它通过考虑标签位置来增强组件的样式功能。getClassNameWithDirection在相关元素中的使用是一致的。Tools
Biome
[error] 236-238: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
270-270: 看起来很棒！这个变更将
this.context.formInstance作为参数调用children函数，与更新后的上下文结构保持一致。将this.context.formInstance传递给children函数，允许子组件直接访问表单实例。src/packages/formitem/formitem.taro.tsx (6)
59-59: 修改看起来不错！将
contextType静态属性更新为直接使用Context，提高了类型安全性。
80-81: 很好的重构！将上下文访问更新为使用
formInstance，封装了内部方法和属性。这提高了可维护性，减少了与上下文结构的直接耦合。变更是一致的，没有引入任何问题。
Also applies to: 93-94
111-112: 很好的改进！对
getControlled和onStoreChange方法的更改与使用formInstance的更新上下文访问模式一致。新的
getClassNameWithDirection方法根据上下文中的labelPosition调整布局，提高了组件的灵活性。这些更改增强了组件与表单上下文的集成，没有引入任何问题。
Also applies to: 122-122, 188-188, 195-200
218-218: 渲染逻辑的改进很好！使用
getClassNameWithDirection方法根据上下文动态调整类名，提高了组件布局的适应性。引入
Text组件增强了必填指示器的语义结构。对
renderLayout方法的重构是合理的，没有引入任何问题。Also applies to: 220-222, 227-227, 233-233, 241-243, 247-249
276-276: 条件渲染看起来不错。基于
shouldUpdate属性的条件渲染似乎是合理的，没有引起任何问题。
240-242: 可以跳过静态分析提示。当前的代码检查
label是否为真值，然后有条件地渲染标签内容。这是安全的，不需要可选链。在这种情况下，静态分析提示是一个误报。
Tools
Biome
[error] 240-242: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
src/config.json (2)
495-495: 重大版本更新：请验证文档和用法是否已更新。"Form"组件的版本已从"2.0.0"更改为"3.0.0"，这表示该组件进行了重大更新。
请确保：
- "Form"组件的文档已更新，以反映新版本中的更改。
- 代码库中"Form"组件的用法已更新，以匹配新版本。
506-506: 重大版本更新：请验证文档和用法是否已更新。"FormItem"组件的版本已从"2.0.0"更改为"3.0.0"，这表示该组件进行了重大更新。
请确保：
- "FormItem"组件的文档已更新，以反映新版本中的更改。
- 代码库中"FormItem"组件的用法已更新，以匹配新版本。
| @@ -27,7 +21,7 @@ const Demo1 = () => { | |||
| label="字段A" | |||
| name="username" | |||
| rules={[ | |||
| { max: 5, message: '字段A不能超过5个字' }, | |||
| { max: 7, message: '字段A不能超过5个字' }, | |||
There was a problem hiding this comment.
更新错误消息以匹配新的字符限制。
验证规则已更新为最多允许7个字符，但错误消息仍然提到旧的5个字符的限制。请更新错误消息以保持一致性。
将错误消息更改为：
-{ max: 7, message: '字段A不能超过5个字' },
+{ max: 7, message: '字段A不能超过7个字' },Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| { max: 7, message: '字段A不能超过5个字' }, | |
| { max: 7, message: '字段A不能超过7个字' }, |
| .nut-cell-group { | ||
| display: block; | ||
| } | ||
| .nut-cell-group-title { | ||
| display: inherit; | ||
| padding: 0 10px; | ||
| color: #1a1a1a; | ||
| font-size: 14px; | ||
| line-height: 20px; | ||
| margin-top: 30px; | ||
| margin-bottom: 10px; | ||
| } | ||
| .nut-cell-group-description { | ||
| display: inherit; | ||
| padding: 0 10px; | ||
| color: #505259; | ||
| font-size: 12px; | ||
| line-height: 16px; | ||
| margin-top: 10px; | ||
| margin-bottom: 10px; | ||
| } | ||
| .nut-cell-group-wrap { | ||
| border-radius: 6px; | ||
| overflow: hidden; | ||
| background-color: #ffffff; | ||
| margin-bottom: 10px; | ||
| } |
There was a problem hiding this comment.
删除重复的代码段。
这部分代码与之前的代码段（第1-27行）完全相同。应该删除重复的代码，以避免冗余并保持代码库的整洁。
建议应用以下更改：
-.nut-cell-group {
- display: block;
-}
-.nut-cell-group-title {
- display: inherit;
- padding: 0 10px;
- color: #1a1a1a;
- font-size: 14px;
- line-height: 20px;
- margin-top: 30px;
- margin-bottom: 10px;
-}
-.nut-cell-group-description {
- display: inherit;
- padding: 0 10px;
- color: #505259;
- font-size: 12px;
- line-height: 16px;
- margin-top: 10px;
- margin-bottom: 10px;
-}
-.nut-cell-group-wrap {
- border-radius: 6px;
- overflow: hidden;
- background-color: #ffffff;
- margin-bottom: 10px;
-}Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .nut-cell-group { | |
| display: block; | |
| } | |
| .nut-cell-group-title { | |
| display: inherit; | |
| padding: 0 10px; | |
| color: #1a1a1a; | |
| font-size: 14px; | |
| line-height: 20px; | |
| margin-top: 30px; | |
| margin-bottom: 10px; | |
| } | |
| .nut-cell-group-description { | |
| display: inherit; | |
| padding: 0 10px; | |
| color: #505259; | |
| font-size: 12px; | |
| line-height: 16px; | |
| margin-top: 10px; | |
| margin-bottom: 10px; | |
| } | |
| .nut-cell-group-wrap { | |
| border-radius: 6px; | |
| overflow: hidden; | |
| background-color: #ffffff; | |
| margin-bottom: 10px; | |
| } |
由于 RN 和 鸿蒙的选择器只能支持 类选择、多类选择器和伪元素选择器，所以无法实现通过 form 控制 input textarea 等的样式，需要从视觉层面来进行一些组件样式的修复。这样可以确保放到 form 中样式表现良好。
Summary by CodeRabbit
新特性
async-validator依赖，提升了应用的验证功能。Demo1组件中，输入字段的最大字符限制从 5 增加到 7。Bug 修复
文档