feat: ✨ 新增Curtain 幕帘属性，支持使用其他图标 #646
Conversation
修复wd-button 在hairline时active没有圆角问题
新增Curtain 幕帘属性，支持使用其他图标
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Caution Review failedThe pull request is closed. Walkthrough本次更改主要集中在 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Curtain
participant Button
User->>Button: 点击自定义图标按钮
Button->>Curtain: 触发 handleClick9()
Curtain->>Curtain: 更新 value9 为 true
Curtain->>User: 显示 wd-curtain 组件
User->>Curtain: 点击关闭图标
Curtain->>Button: 触发 handleClose9()
Curtain->>Curtain: 更新 value9 为 false
Curtain->>User: 隐藏 wd-curtain 组件
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: 2
🧹 Outside diff range and nitpick comments (8)
src/uni_modules/wot-design-uni/components/wd-curtain/types.ts (1)
36-48: 新增属性很好地支持了关闭图标的自定义新增的
closeIconName、closeIconSize和closeIconColor属性很好地支持了关闭图标的自定义需求。使用新定义的CloseIconName类型和默认值 'close-outline' 保证了向后兼容性。每个新属性都有清晰的注释说明其用途。建议：
为了提高代码的类型安全性，建议为closeIconSize和closeIconColor添加具体的类型注解，例如：closeIconSize: String as PropType<string>, closeIconColor: String as PropType<string>这样可以更明确地指定这些属性期望的类型。
src/uni_modules/wot-design-uni/components/wd-curtain/wd-curtain.vue (2)
22-28: 关闭图标的自定义选项得到了改进，很好！新增的
closeIconName、closeIconSize和closeIconColor属性增强了组件的灵活性，使其能够适应不同的设计需求。这些更改与PR的目标完全一致。为了进一步提高可读性，建议将
custom-class属性移到新的一行：<wd-icon :name="closeIconName" :size="closeIconSize" :color="closeIconColor" :custom-class="`wd-curtain__content-close ${closePosition}`" @click="close" />这样可以使每个属性都在单独的一行上，提高代码的清晰度。
Line range hint
1-224: 总体而言，这些更改很好地实现了PR的目标
- 成功实现了自定义关闭图标的功能，解决了原有圆形关闭图标在白色背景下不易见的问题。
- 新增的属性（
closeIconName、closeIconSize、closeIconColor）提高了组件的灵活性和可定制性。- 核心功能保持不变，确保了向后兼容性。
- 新导入的工具函数和Vue特性为未来的优化铺平了道路。
建议考虑以下几点来进一步完善组件：
- 利用新导入的
computed函数创建计算属性，可能可以优化一些现有的逻辑。- 使用
addUnit和objToStyle函数来增强样式处理，特别是在computeImgStyle函数中。- 考虑为新增的属性添加默认值，以提高组件的易用性。
这些建议可以在未来的迭代中逐步实施，进一步提升组件的性能和开发体验。
docs/component/curtain.md (4)
111-111: 新属性close-icon-name添加正确，但需要更新版本号新增的
close-icon-name属性很好地支持了自定义关闭按钮图标的功能。这与PR的目标相符，增强了组件的灵活性。请将
$LOWEST_VERSION$替换为实际的最低支持版本号。这将帮助用户了解从哪个版本开始可以使用这个新特性。
112-112: 新属性close-icon-size添加正确，但存在格式问题新增的
close-icon-size属性很好地支持了自定义关闭图标大小的功能，这与PR的目标相符，进一步增强了组件的可定制性。请将该行中的硬标签（Tab）替换为空格，以保持文档格式的一致性。建议使用4个空格进行缩进。例如：
| 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)
113-113: 新属性close-icon-color添加正确，但存在格式问题新增的
close-icon-color属性很好地支持了自定义关闭图标颜色的功能，这与PR的目标相符，进一步增强了组件的可定制性。请将该行中的硬标签（Tab）替换为空格，以保持文档格式的一致性。建议使用4个空格进行缩进。例如：
| 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)
111-113: 总体评价：新属性添加有效，文档更新清晰新增的三个属性
close-icon-name、close-icon-size和close-icon-color很好地实现了PR的目标，允许用户自定义关闭图标的样式。文档的更新清晰明了，与现有格式保持一致。为进一步提高文档质量，建议：
- 统一使用空格而非硬标签（Tab）进行缩进。
- 为
close-icon-name属性指定具体的最低支持版本号，替换$LOWEST_VERSION$占位符。- 考虑在文档的"基本用法"或"修改关闭按钮位置"部分添加一个使用这些新属性的示例，以帮助用户更好地理解如何使用这些新功能。
这些小改进将使文档更加完善和用户友好。
🧰 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/uni_modules/wot-design-uni/components/wd-button/index.scss (1)
85-85: 考虑使用变量来定义border-radius值这个改动为按钮的活动状态添加了圆角效果，提升了视觉体验。然而，我有以下建议和疑问：
为了提高可维护性，建议使用一个SCSS变量来定义border-radius值，而不是直接使用硬编码的6px。这样可以在未来更容易地统一修改所有相关的圆角值。
这个改动似乎与PR的主要目标（Curtain组件和自定义图标）没有直接关系。能否解释一下这个改动与PR整体目标的关联性？
建议将代码修改为：
$button-active-border-radius: 6px; &:active::before { opacity: 0.15; border-radius: $button-active-border-radius; }这样可以在文件顶部或相关的变量文件中定义
$button-active-border-radius，使得样式更易于管理和调整。
📜 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 (2 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 (3)
src/uni_modules/wot-design-uni/components/wd-curtain/types.ts (1)
5-5: 新增 CloseIconName 类型定义符合需求新增的
CloseIconName类型定义很好地支持了使用其他图标的需求。类型导出正确，命名约定与现有的ClosePosition类型保持一致。src/pages/curtain/Index.vue (2)
21-23: 新增的自定义图标功能实现正确新增的演示块和
wd-curtain组件的实现符合预期，正确地展示了自定义关闭图标的功能。代码结构清晰，与现有代码风格一致。Also applies to: 41-50
64-64: 脚本部分的更改正确实现了新功能新增的响应式引用
value9和方法handleClick9、handleClose9正确实现了自定义图标功能的状态管理，与现有代码结构保持一致。Also applies to: 116-121
| import { addUnit, objToStyle } from '../common/util' | ||
| import { computed, ref, watch, type CSSProperties } from 'vue' |
There was a problem hiding this comment.
💡 Codebase verification
新导入的内容未在组件中使用，请检查是否需要这些导入。如果不需要，请移除它们以优化代码。
🔗 Analysis chain
导入的更新增强了组件的功能，很好！
新增的 addUnit 和 objToStyle 工具函数以及 CSSProperties 类型的导入表明了对样式处理的改进。同时，导入 computed 函数暗示可能会使用计算属性来优化组件逻辑。
为了确保这些新导入的充分利用，请确认：
addUnit和objToStyle函数在组件中的使用位置。CSSProperties类型是否用于类型注解。- 是否计划添加新的计算属性。
可以运行以下脚本来验证这些导入的使用情况：
请运行以下脚本以验证新导入的内容在组件中的实际使用情况：
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查新导入的使用情况
echo "Checking usage of new imports:"
rg "addUnit|objToStyle|CSSProperties|computed" src/uni_modules/wot-design-uni/components/wd-curtain/wd-curtain.vue
Length of output: 354
Script:
# 检查 `addUnit` 和 `objToStyle` 的使用情况
rg 'addUnit\(|objToStyle\(' src/uni_modules/wot-design-uni/components/wd-curtain/wd-curtain.vue
# 检查 `CSSProperties` 类型的使用情况，排除导入语句
rg 'CSSProperties' src/uni_modules/wot-design-uni/components/wd-curtain/wd-curtain.vue | grep -v 'import'
# 检查 `computed` 的使用情况，排除导入语句
rg 'computed\(' src/uni_modules/wot-design-uni/components/wd-curtain/wd-curtain.vue | grep -v 'import'
Length of output: 304
| @@ -48,6 +61,7 @@ const value5 = ref<boolean>(false) | |||
| const value6 = ref<boolean>(false) | |||
| const value7 = ref<boolean>(false) | |||
| const value8 = ref<boolean>(false) | |||
| const value9 = ref<boolean>(false) | |||
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议重构重复代码
当前实现中，每个 curtain 实例都有独立的 value、handleClick 和 handleClose 方法，导致了大量重复代码。建议考虑重构，使用一个通用的状态管理方法来处理所有 curtain 实例，这样可以显著减少代码重复并提高可维护性。
例如，可以考虑使用一个对象来管理所有 curtain 的状态，并使用一个通用的方法来处理打开和关闭操作。
以下是一个可能的重构方案：
interface CurtainState {
[key: string]: boolean;
}
const curtainStates = reactive<CurtainState>({
curtain1: false,
curtain2: false,
// ... 其他 curtain
curtain9: false
});
function handleCurtainToggle(curtainKey: string) {
curtainStates[curtainKey] = !curtainStates[curtainKey];
}然后在模板中可以这样使用：
<wd-button @click="handleCurtainToggle('curtain9')">关闭图标自定义</wd-button>
<wd-curtain
:value="curtainStates.curtain9"
:src="img"
:to="link"
closeIconName="close"
closeIconSize="20"
closeIconColor="red"
@close="handleCurtainToggle('curtain9')"
:width="280"
></wd-curtain>这种方法可以大大减少重复代码，使得添加新的 curtain 实例变得更加简单和一致。
Also applies to: 116-121
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
💡 需求背景和解决方案
某些情况下幕帘不使用环状关闭图标且颜色需要自定义，存在背景为白色的情况，关闭按钮无法查看情况
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
wd-curtain组件文档，添加了新属性close-icon-name、close-icon-size和close-icon-color，并澄清了hide-when-close属性的默认值。Index.vue中增加了一个新的演示块，允许自定义关闭图标。样式
文档