feat: ✨ 新增Curtain 幕帘属性，支持使用其他图标 #648
Conversation
修复wd-button 在hairline时active没有圆角问题
新增Curtain 幕帘属性，支持使用其他图标
|
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: 2
🧹 Outside diff range and nitpick comments (9)
src/uni_modules/wot-design-uni/components/wd-curtain/types.ts (2)
41-44: 建议改进closeIconSize属性定义新增的
closeIconSize属性允许自定义关闭图标的大小，这符合 PR 的目标。然而，为了保持一致性，建议使用makeStringProp函数来定义此属性，并可能添加一个默认值。例如：
closeIconSize: makeStringProp(''),这样可以保持与其他属性定义的一致性，并可能提供更好的类型推断。
45-48: 建议改进closeIconColor属性定义新增的
closeIconColor属性允许自定义关闭图标的颜色，这符合 PR 的目标。然而，为了保持一致性，建议使用makeStringProp函数来定义此属性，并可能添加一个默认值。例如：
closeIconColor: makeStringProp(''),这样可以保持与其他属性定义的一致性，并可能提供更好的类型推断。
src/uni_modules/wot-design-uni/components/wd-curtain/wd-curtain.vue (2)
22-28: 关闭图标的自定义性得到了增强，很好的改进！这些更改允许更灵活地自定义关闭图标，这与PR的目标相符。动态属性的使用使得组件更加可配置。
建议：
- 考虑为新添加的属性提供默认值，以确保向后兼容性。
- 可以考虑在组件的文档中添加这些新属性的使用示例，以帮助其他开发者理解如何使用这些新功能。
Line range hint
31-184: 脚本部分需要更新以支持新的属性虽然模板中添加了新的属性，但是在脚本部分没有看到相应的更新。建议进行以下改进：
- 在
curtainProps对象中定义新的属性closeIconName、closeIconSize和closeIconColor。- 考虑完全迁移到 Composition API，以提高代码的一致性和可维护性。
- 为新属性添加适当的类型定义和默认值。
示例：
import { curtainProps } from './types' // 在 types.ts 文件中更新 curtainProps export const curtainProps = { // ... 现有的属性 closeIconName: { type: String, default: 'close' }, closeIconSize: { type: [String, Number], default: 20 }, closeIconColor: { type: String, default: '#fff' } }docs/component/curtain.md (1)
111-111: 新属性close-icon-name添加得很好这个新属性很好地实现了PR的目标，允许用户自定义关闭按钮的图标。描述清晰，可选值明确。
建议稍微调整一下格式，使用制表符代替空格来对齐列，以保持与其他行的一致性。例如：
| close-icon-name | 关闭按钮图标 | string | close-outline / close | close-outline | - |src/pages/curtain/Index.vue (3)
21-23: 新增的演示块看起来不错！新增的"自定义图标"演示块很好地展示了新功能。为了进一步提高可读性，建议考虑在按钮文本中更明确地说明自定义内容。
建议将按钮文本从"关闭图标自定义"修改为更具体的描述，例如：
- <wd-button @click="handleClick9">关闭图标自定义</wd-button> + <wd-button @click="handleClick9">自定义关闭图标（颜色/大小）</wd-button>这样可以更清楚地表明用户可以自定义的具体内容。
41-50: 新的 wd-curtain 组件实现看起来很好！新增的
wd-curtain组件很好地实现了自定义图标的功能。props 的命名遵循了 Vue 的最佳实践，这很棒。为了更好地展示新功能的灵活性，建议考虑使用动态值而不是硬编码值。例如：
:value="value9" :src="img" :to="link" - closeIconName="close" - closeIconSize="20" - closeIconColor="red" + :closeIconName="customIconName" + :closeIconSize="customIconSize" + :closeIconColor="customIconColor" @close="handleClose9" :width="280"然后在 script 部分添加这些响应式变量：
const customIconName = ref('close') const customIconSize = ref(20) const customIconColor = ref('red')这样可以更容易地在演示中动态更改这些值，展示组件的灵活性。
64-64: 新增的响应式变量和方法实现正确！新增的
value9响应式变量以及handleClick9和handleClose9方法的实现与文件中现有的模式保持一致，这很好。为了保持与 TypeScript 最佳实践的一致性，建议为新增的函数添加返回类型注解。例如：
-function handleClick9() { +function handleClick9(): void { value9.value = true } -function handleClose9() { +function handleClose9(): void { value9.value = false }这样可以提高代码的可读性和类型安全性。
Also applies to: 116-121
src/uni_modules/wot-design-uni/components/wd-button/index.scss (1)
85-85: 考虑使用变量来定义border-radius值新增的
border-radius: 6px;属性增强了按钮激活状态的视觉效果，这是一个很好的改进。然而，为了保持样式的一致性和可维护性，建议使用一个SCSS变量来定义这个值，而不是直接使用硬编码的像素值。建议修改如下：
- border-radius: 6px; + border-radius: $-button-active-radius;然后在文件顶部或相应的变量文件中定义这个变量：
$-button-active-radius: 6px;这样做可以让样式更容易在整个组件库中保持一致，并且在需要调整时更方便修改。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (5)
- docs/component/curtain.md (1 hunks)
- src/pages/curtain/Index.vue (4 hunks)
- src/uni_modules/wot-design-uni/components/wd-button/index.scss (1 hunks)
- src/uni_modules/wot-design-uni/components/wd-curtain/types.ts (2 hunks)
- src/uni_modules/wot-design-uni/components/wd-curtain/wd-curtain.vue (1 hunks)
🧰 Additional context used
🪛 Markdownlint
docs/component/curtain.md
112-112: Column: 39
Hard tabs(MD010, no-hard-tabs)
112-112: Column: 43
Hard tabs(MD010, no-hard-tabs)
113-113: Column: 40
Hard tabs(MD010, no-hard-tabs)
113-113: Column: 44
Hard tabs(MD010, no-hard-tabs)
🔇 Additional comments (7)
src/uni_modules/wot-design-uni/components/wd-curtain/types.ts (3)
5-5: 新类型CloseIconName添加正确新增的
CloseIconName类型定义符合 PR 的目标，允许为关闭按钮使用替代图标。类型定义清晰，并且正确导出，可以在其他文件中使用。
36-40: 新属性closeIconName添加正确新增的
closeIconName属性正确使用了新定义的CloseIconName类型，并设置了默认值 'close-outline'，保持了向后兼容性。使用makeStringProp的方式与文件中其他属性保持一致。
Line range hint
1-48: 总体评价此文件的更改很好地实现了 PR 的目标，为 Curtain 组件引入了自定义关闭图标的新属性。新增的
CloseIconName类型和closeIconName属性的实现都很完善。对于closeIconSize和closeIconColor属性，建议使用makeStringProp来保持一致性。总的来说，这些更改增强了组件的灵活性和可定制性，符合预期目标。src/uni_modules/wot-design-uni/components/wd-curtain/wd-curtain.vue (1)
Line range hint
1-187: 总体评估：改进了组件的灵活性，但需要完善实现这些更改增强了
wd-curtain组件的自定义能力，特别是在关闭图标的样式上。这与PR的目标相符，可以解决在不同背景下图标可见性的问题。主要亮点：
- 模板中新增的动态属性提高了组件的可配置性。
- 更改符合PR的目标，增加了使用替代图标的能力。
需要改进的地方：
- 脚本部分需要更新以支持新添加的属性。
- 考虑统一使用 Composition API 来提高代码一致性。
- 确保新属性在组件文档中得到充分说明。
建议在合并这个PR之前，先完善脚本部分的实现，以确保新功能能够正常工作。
为了验证新属性的使用情况，请运行以下脚本：
✅ Verification successful
验证通过：
wd-curtain组件的新属性已在多个地方正确使用，符合 PR 的目标。
- 在
src/pages/curtain/Index.vue中，多个实例传递了新属性如:custom-class、:custom-style和close-position，确保了组件的灵活性和可配置性。🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # 描述：检查 wd-curtain 组件的使用情况，特别是新属性的使用 # 测试：搜索 wd-curtain 组件的使用，预期会看到新属性的使用示例 rg --type vue 'wd-curtain' -A 10 -g '!*/wd-curtain/*'Length of output: 81
Script:
#!/bin/bash # 描述：重新检查 wd-curtain 组件的使用情况，修正文件类型识别错误 # 测试：搜索 wd-curtain 组件的使用，预期会看到新属性的使用示例 rg 'wd-curtain' -A 10 -g '*.vue' -g '!*/wd-curtain/*'Length of output: 5443
docs/component/curtain.md (1)
111-113: 总体评价：文档更新符合PR目标，增强了组件功能新增的三个属性（
close-icon-name、close-icon-size和close-icon-color）很好地实现了PR的目标，允许用户自定义关闭按钮的图标、大小和颜色。这些更改增强了组件的灵活性和可用性。建议采取以下后续步骤：
- 修复已指出的格式问题，确保使用空格而不是硬标签来对齐表格列。
- 考虑添加一个使用这些新属性的示例代码，以帮助用户更好地理解如何使用这些新功能。
- 确保组件的实现代码已更新以支持这些新属性。
- 更新相关的单元测试以覆盖这些新属性。
请运行以下脚本来验证组件实现是否已更新：
🧰 Tools
🪛 Markdownlint
112-112: Column: 39
Hard tabs(MD010, no-hard-tabs)
112-112: Column: 43
Hard tabs(MD010, no-hard-tabs)
113-113: Column: 40
Hard tabs(MD010, no-hard-tabs)
113-113: Column: 44
Hard tabs(MD010, no-hard-tabs)
src/pages/curtain/Index.vue (1)
Line range hint
1-138: 总体实现很棒，新功能集成得很好！整体来看，新增的自定义图标功能实现得很好，与现有代码结构保持了一致性。主要亮点包括：
- 新增的演示块清晰地展示了新功能。
wd-curtain组件的新属性正确实现了自定义图标的功能。- 新增的响应式变量和方法与现有模式保持一致。
建议的小改进主要集中在增强代码的可读性和灵活性上，这些小改动可以进一步提升代码质量。
src/uni_modules/wot-design-uni/components/wd-button/index.scss (1)
Line range hint
1-424: 总体评价：代码改动合理，提升了用户体验这次的改动虽然很小，但是通过为按钮的激活状态添加圆角，提升了用户交互的视觉反馈。这个改动与组件的整体设计风格保持一致，有助于改善用户体验。
除了之前提到的使用变量来定义border-radius值的建议外，没有发现其他需要修改的地方。整个文件的结构良好，样式定义清晰，遵循了组件库的设计规范。
| @@ -108,6 +108,9 @@ function handleClose() { | |||
| | close-position | 关闭按钮位置 | string | inset / top / bottom / top-left / top-right / bottom-left / bottom-right | inset | - | | |||
| | close-on-click-modal | 点击遮罩是否关闭 | boolean | - | false | - | | |||
| | hide-when-close | 是否当关闭时将弹出层隐藏（display: none) | boolean | - | true | - | | |||
| | close-icon-name | 关闭按钮图标 | string | close-outline / close | close-outline | - | | |||
| | close-icon-size | 图标的字体大小 | string | - | inherit | - | | |||
There was a problem hiding this comment.
新属性 close-icon-size 是个很好的补充
这个属性很好地补充了 close-icon-name，为用户提供了更多的自定义选项。描述简洁明了。
但是，这一行存在格式问题。请修复硬标签（hard tabs）的使用，改用空格来保持一致性。例如：
| close-icon-size | 图标的字体大小 | string | - | inherit | - |🧰 Tools
🪛 Markdownlint
112-112: Column: 39
Hard tabs(MD010, no-hard-tabs)
112-112: Column: 43
Hard tabs(MD010, no-hard-tabs)
| @@ -108,6 +108,9 @@ function handleClose() { | |||
| | close-position | 关闭按钮位置 | string | inset / top / bottom / top-left / top-right / bottom-left / bottom-right | inset | - | | |||
| | close-on-click-modal | 点击遮罩是否关闭 | boolean | - | false | - | | |||
| | hide-when-close | 是否当关闭时将弹出层隐藏（display: none) | boolean | - | true | - | | |||
| | close-icon-name | 关闭按钮图标 | string | close-outline / close | close-outline | - | | |||
| | close-icon-size | 图标的字体大小 | string | - | inherit | - | | |||
| | close-icon-color | 图标的字体颜色 | string | - | inherit | - | | |||
There was a problem hiding this comment.
新属性 close-icon-color 进一步增强了自定义选项
这个属性很好地补充了之前的两个新属性，为用户提供了全面的关闭图标自定义选项。描述简洁明了。
但是，这一行也存在格式问题。请修复硬标签（hard tabs）的使用，改用空格来保持一致性。例如：
| close-icon-color | 图标的字体颜色 | string | - | inherit | - |为了更好地展示这些新属性的使用，我建议在文档中添加一个示例。您需要我为您生成一个使用这些新属性的示例代码吗？
🧰 Tools
🪛 Markdownlint
113-113: Column: 40
Hard tabs(MD010, no-hard-tabs)
113-113: Column: 44
Hard tabs(MD010, no-hard-tabs)
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
💡 需求背景和解决方案
某些情况下幕帘不使用环状关闭图标且颜色需要自定义，存在背景为白色的情况，关闭按钮无法查看情况
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
wd-curtain组件的文档，增加了新属性和现有功能的说明。close-icon-name、close-icon-size和close-icon-color属性，允许用户自定义关闭按钮的图标、大小和颜色。样式