feat: ✨ cell组件border属性以props为最高优先级 #656
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough本次更改主要集中在 Changes
Possibly related PRs
Suggested reviewers
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 (
|
✅ Deploy Preview for wot-design-uni ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
![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
🧹 Outside diff range and nitpick comments (4)
src/uni_modules/wot-design-uni/components/wd-cell/wd-cell.vue (1)
Line range hint
89-98: 改进了isRequired计算属性的实现，提高了准确性这个改动显著提高了
isRequired计算属性的准确性和鲁棒性。新的实现不仅考虑了组件自身的required属性和rules，还检查了表单上下文中的验证规则。这种方法能更全面地判断一个单元格是否为必填，提升了组件在表单中的使用体验。建议考虑以下优化：
- for (const key in rules) { - if (Object.prototype.hasOwnProperty.call(rules, key) && key === props.prop && Array.isArray(rules[key])) { - formRequired = rules[key].some((rule) => rule.required) - } - } + const propRules = rules[props.prop] + if (Array.isArray(propRules)) { + formRequired = propRules.some((rule) => rule.required) + }这个优化可以减少循环，直接访问特定属性的规则，从而略微提高性能。
src/pages/cell/Index.vue (1)
40-40: 新增的 Cell 组件很好地展示了边框控制功能。这个新增的
wd-cell组件很好地演示了如何通过 props 控制单个 Cell 的边框显示，与 PR 的目标相符。这为用户提供了更灵活的自定义选项。建议：考虑调整演示顺序，将这个无边框的 Cell 放在最后，以更清晰地展示边框差异。
您可以考虑按以下方式重新排序 Cell：
<wd-cell-group title="交易管理" border> <wd-cell title="标题文字" value="内容" /> <wd-cell title="标题文字" label="描述信息" value="内容"></wd-cell> <wd-cell :border="false" title="标题文字" label="这一个cell不想要边框" value="内容" /> </wd-cell-group>这样可以更直观地展示边框控制的效果。
docs/component/cell.md (2)
72-73: 新增的边框控制示例很有用这个新增的示例很好地展示了如何在单个Cell中控制边框的显示。这对于需要自定义布局的用户来说非常有帮助。
建议：考虑在示例旁边添加一个简短的说明，解释为什么这个特定的Cell没有边框，以便用户更好地理解这个属性的用途。
Line range hint
1-24: 文档整体质量显著提升整个Cell组件的文档已经进行了全面的更新和改进：
- 新增了多个属性的说明和示例，如
border、center、required等。- 增加了更多详细的使用场景和代码示例。
- 属性表格更新，包含了新增的属性和更详细的说明。
- 新增了表单验证相关的属性和说明。
这些改进使得文档更加全面和易于理解，对开发者使用Cell组件很有帮助。
建议：
- 考虑为新增的属性添加一些视觉示例或截图，以便更直观地展示效果。
- 可以考虑添加一个"最佳实践"部分，提供一些常见用例的推荐用法。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (4)
- docs/component/cell.md (1 hunks)
- src/pages/cell/Index.vue (1 hunks)
- src/uni_modules/wot-design-uni/components/wd-cell/types.ts (1 hunks)
- src/uni_modules/wot-design-uni/components/wd-cell/wd-cell.vue (1 hunks)
🧰 Additional context used
🔇 Additional comments (3)
src/uni_modules/wot-design-uni/components/wd-cell/types.ts (1)
47-47: 更改看起来不错，提高了组件的灵活性。将
border属性从Boolean更改为makeBooleanProp(void 0)是一个很好的改进。这个更改允许border属性有三种可能的状态：true、false 和 undefined。这增加了组件的灵活性，使得可以更容易地根据不同的场景来控制边框的显示。这个改变与 PR 的目标一致，即根据 props 来优先处理 border 属性。它还保持了与组件库中其他属性定义的一致性，这有助于代码的可维护性。
src/uni_modules/wot-design-uni/components/wd-cell/wd-cell.vue (1)
73-73: 简化和优化了isBorder计算属性的实现这个改动很好地简化了
isBorder计算属性的实现。新的实现更加简洁明了，同时正确地优先使用props.border的值，如果未定义则回退到cell.border.value。这种方式不仅提高了代码的可读性，还确保了 props 的优先级，符合 PR 的目标。src/pages/cell/Index.vue (1)
40-40: 总体评价：新功能实现得当，demo 展示清晰。这个变更很好地实现了 PR 的目标，即允许通过 props 控制单个 Cell 的边框显示。新增的 demo cell 清晰地展示了这一功能，使得用户可以直观理解如何使用这个新特性。
整体而言，这个改动简洁有效，增强了 Cell 组件的灵活性和可定制性，同时保持了代码的整洁和一致性。
Moonofweisheng
left a comment
Moonofweisheng
left a comment
There was a problem hiding this comment.
支付宝小程序大概率是不支持??运算符的，需要调整一下
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
src/uni_modules/wot-design-uni/components/common/util.ts (1)
361-363: 新增的isNone函数看起来不错，但可以稍作改进。这个新函数很好地补充了现有的类型检查工具集。它使用类型谓词来缩小类型范围，这在TypeScript中非常有用。然而，我们可以稍微优化一下实现：
export function isNone(value: any): value is null | undefined { - return value === null || value === void 0 + return value == null }使用
value == null可以同时检查null和undefined，这是一种更简洁的写法。这种方式在JavaScript中是一种常见的惯用法，可以减少代码量并提高可读性。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
- src/uni_modules/wot-design-uni/components/common/util.ts (1 hunks)
- src/uni_modules/wot-design-uni/components/wd-cell/wd-cell.vue (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/uni_modules/wot-design-uni/components/wd-cell/wd-cell.vue
🧰 Additional context used
2 participants
🤔 这个 PR 的性质是？(至少选择一个)
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新特性
Cell组件的文档，增加了新属性和示例，提升了功能说明的清晰度。border、center、required、vertical、title-width和icon等属性的使用示例。文档
Cell组件的使用说明进行了全面增强，包含了多个示例和属性说明。