refactor: ♻️ 优化 wd-sort-button 组件排序图标 #652
Conversation
优化排序图标显示,更符合直觉 添加排序图标的插槽(sort-icon),方便用户扩展
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough此次更改涉及三个文件，主要更新了与排序按钮组件相关的样式和逻辑。在 Changes
Possibly related PRs
Suggested reviewers
Poem
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 (5)
src/uni_modules/wot-design-uni/components/wd-sort-button/wd-sort-button.vue (2)
7-18: 优化了排序按钮的实现，增加了自定义图标的灵活性。这些更改显著提高了组件的可定制性和可维护性：
- 使用动态类绑定简化了不同排序状态的显示逻辑。
- 新增的插槽允许轻松自定义排序图标。
- 如果没有使用自定义图标，仍然提供了默认图标。
这是一个很好的改进。
建议考虑使用更具描述性的图标名称。例如，可以将 "arrow-up" 和 "arrow-down" 改为 "sort-ascending" 和 "sort-descending"，以更好地表达它们的用途：
- <wd-icon name="arrow-up" custom-class="wd-sort-button__icon ascending wd-sort-button__icon-up" /> - <wd-icon name="arrow-down" custom-class="wd-sort-button__icon descending wd-sort-button__icon-down" /> + <wd-icon name="sort-ascending" custom-class="wd-sort-button__icon ascending wd-sort-button__icon-up" /> + <wd-icon name="sort-descending" custom-class="wd-sort-button__icon descending wd-sort-button__icon-down" />这样可以使代码更加自解释，提高可读性。
Line range hint
22-78: 脚本部分可以进一步优化虽然模板部分的更改很好，但脚本部分还有改进的空间：
handleClick函数较长，可以考虑重构以提高可读性：function getNextSortValue(currentValue: number, allowReset: boolean, descFirst: boolean): number { if (descFirst) { return currentValue === 0 ? -1 : currentValue === -1 ? 1 : allowReset ? 0 : -1; } else { return currentValue === 0 ? 1 : currentValue === 1 ? -1 : allowReset ? 0 : 1; } } function handleClick() { const nextValue = getNextSortValue(props.modelValue, props.allowReset, props.descFirst); emit('update:modelValue', nextValue); emit('change', { value: nextValue }); }
- 考虑使用更具描述性的名称替代
modelValue，例如sortOrder：- const props = defineProps(sortButtonProps) + const props = defineProps({ + ...sortButtonProps, + sortOrder: { + type: Number, + default: 0 + } + }) - emit('update:modelValue', nextValue) + emit('update:sortOrder', nextValue)这些更改可以提高代码的可读性和可维护性。
您觉得这些建议如何？是否需要我为这些更改创建一个新的 GitHub issue？
src/uni_modules/wot-design-uni/components/wd-sort-button/index.scss (2)
71-73: 优化了排序按钮的活动状态样式这些更改很好地提高了选择器的特异性，并使用变量来设置活动图标的颜色。这提高了代码的可维护性和灵活性。
建议：考虑为上升和下降状态使用单独的变量，以便将来可能需要不同的颜色。
&.ascending :deep(.wd-sort-button__icon.ascending) { color: $-sort-button-icon-active-ascending-color; } &.descending :deep(.wd-sort-button__icon.descending) { color: $-sort-button-icon-active-descending-color; }
89-89: 下降图标颜色与上升图标保持一致使用相同的
$-sort-button-icon-color变量来设置下降图标的颜色是正确的，这确保了上升和下降图标的颜色一致性。建议：如果将来需要区分上升和下降图标的颜色，可以考虑使用两个不同的变量：
@include edeep(icon-up) { color: $-sort-button-icon-up-color; } @include edeep(icon-down) { color: $-sort-button-icon-down-color; }这样可以在保持当前一致性的同时，为未来的定制提供更大的灵活性。
src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss (1)
566-567: 新增的排序按钮图标颜色变量看起来不错！这些新增的变量很好地符合了文件中的命名约定，并且使用了CSS自定义属性语法，这有利于主题定制。默认值的选择也很合理。
为了保持一致性，建议考虑添加一个注释来解释这些变量的用途，类似于文件中其他变量的做法。例如：
// 排序按钮图标颜色 $-sort-button-icon-color: var(--wot-sort-button-icon-color, rgba(0, 0, 0, 0.45)) !default; $-sort-button-icon-active-color: var(--wot-sort-button-icon-active-color, $-color-theme) !default;这样可以提高代码的可读性和可维护性。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (3)
- src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss (1 hunks)
- src/uni_modules/wot-design-uni/components/wd-sort-button/index.scss (2 hunks)
- src/uni_modules/wot-design-uni/components/wd-sort-button/wd-sort-button.vue (1 hunks)
🧰 Additional context used
🔇 Additional comments (2)
src/uni_modules/wot-design-uni/components/wd-sort-button/wd-sort-button.vue (1)
Line range hint
1-82: 总体评估：改进了组件的灵活性和可用性这次更改主要集中在模板部分，通过引入动态类绑定和自定义图标插槽，显著提高了组件的灵活性和可定制性。这些更改是积极的，使得组件更易于使用和扩展。
虽然脚本部分没有直接更改，但我们提出了一些建议来进一步优化代码结构和可读性。这些建议包括重构
handleClick函数和使用更具描述性的prop名称。样式部分没有变化，这表明现有的样式仍然适用于更新后的组件结构。
总的来说，这些更改改进了
wd-sort-button组件，使其更加灵活和易于使用。建议的进一步优化可以在未来的迭代中考虑实施。src/uni_modules/wot-design-uni/components/wd-sort-button/index.scss (1)
82-82: 图标颜色使用变量使用
$-sort-button-icon-color变量来设置上升图标的颜色是一个很好的做法。这提高了样式的一致性和可维护性。
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (2)
src/uni_modules/wot-design-uni/components/wd-sort-button/wd-sort-button.vue (2)
7-14: 优化：使用动态类绑定提高了代码可维护性通过使用动态类绑定来控制排序按钮的状态，代码变得更加清晰和易于维护。
:class对象语法的使用使得状态与样式的对应关系一目了然。建议考虑将类名常量提取到组件的常量配置中，以便于后续维护：
+const STATE_CLASSES = { + 'is-active': 'modelValue !== 0', + ascending: 'modelValue === 1', + descending: 'modelValue === -1' +}
15-18: 新功能：新增排序图标插槽，提升组件灵活性通过添加
sort-icon插槽并传入当前排序状态，使得组件更具扩展性。默认图标的实现也符合用户体验最佳实践。建议在组件文档中添加以下使用示例：
<!-- 自定义排序图标 --> <wd-sort-button v-model="value"> <template #sort-icon="{ sort }"> <view class="custom-icon">{{ sort === 1 ? '↑' : '↓' }}</view> </template> </wd-sort-button>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss(1 hunks)src/uni_modules/wot-design-uni/components/wd-sort-button/wd-sort-button.vue(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss
优化排序图标显示,更符合直觉
添加排序图标的插槽(sort-icon),方便用户扩展
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit