feat: ✨ 优化 Divider 分割线功能支持虚线、垂直等功能 #737
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Caution Review failedThe pull request is closed. Walkthrough本次更改主要集中在 Changes
Possibly related PRs
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!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Deploying wot-design-uni with
|
| Latest commit: |
c256364
|
| Status: | ⚡️ Build in progress... |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Outside diff range and nitpick comments (13)
src/uni_modules/wot-design-uni/components/wd-divider/types.ts (2)
10-16: 建议完善颜色属性的文档说明color 属性的文档可以更详细一些，建议补充：
- 支持的颜色格式（如：HEX、RGB等）
- 默认值说明
- 使用示例
17-32: 属性定义完善，建议增加单位说明新增的属性定义清晰，类型和默认值设置合理。建议在 hairline 属性的文档中补充说明：
- 0.5px 在不同设备上的实际显示效果可能有差异
- 建议添加兼容性说明
src/pages/divider/Index.vue (3)
11-15: 建议增加图标的无障碍支持虽然自定义内容的示例展示得很好，但建议为图标添加
aria-label属性以提升无障碍性。- <wd-icon name="arrow-down" size="20" /> + <wd-icon name="arrow-down" size="20" aria-label="向下箭头" />
31-43: 建议优化垂直分割线的间距垂直分割线的示例展示了多种样式变体，但建议调整文本与分割线之间的间距以提升视觉体验。
.content { padding: 12rpx 15px; + display: flex; + align-items: center; + gap: 8px; }
47-51: 样式定义可以更完善建议添加更多样式变量，使示例更易于维护和定制。
<style lang="scss" scoped> +$content-padding-v: 12rpx; +$content-padding-h: 15px; + .content { - padding: 12rpx 15px; + padding: $content-padding-v $content-padding-h; } </style>docs/component/divider.md (6)
5-7: 版本兼容性提示需要明确具体版本号建议将
$LOWEST_VERSION$替换为具体的版本号，以便开发者更清晰地了解功能支持情况。
11-15: 建议补充基础用法示例的效果说明为了帮助开发者更好地理解，建议在示例代码下方补充渲染效果的说明文字。
默认渲染一条水平分割线。 <wd-divider></wd-divider> + +渲染效果：将会显示一条简单的水平分割线，不包含任何文本内容。
29-33: 建议补充自定义内容的样式说明示例中使用了图标，建议补充说明如何调整图标的样式和位置。
<wd-divider> <wd-icon name="arrow-down" size="20" color="#1989fa" /> </wd-divider> + +注意：可以通过调整图标的 size 和 color 属性来自定义图标的大小和颜色。图标将会自动居中显示在分割线中间。
65-77: 建议优化垂直分割线的示例代码结构当前示例代码的结构可以更清晰，建议添加注释说明每种用法的效果。
<view class="content"> + <!-- 默认垂直分割线 --> 文本 <wd-divider vertical /> + <!-- 虚线效果 --> 文本 <wd-divider vertical dashed /> + <!-- 无细线效果 --> 文本 <wd-divider vertical :hairline="false" /> + <!-- 自定义颜色 --> 文本 <wd-divider vertical color="#1989fa" /> 文本 </view>
87-93: 建议完善属性表格的说明属性表格中的一些说明可以更详细：
hairline属性的默认值影响说明content-position在垂直模式下的行为说明| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | | ---------------- | ------------------------------ | ------- | ----------------------- | -------- | ---------------- | | color | 自定义颜色，支持所有颜色的写法 | string | - | - | - | -| hairline | 是否显示边框 | boolean | - | true | $LOWEST_VERSION$ | +| hairline | 是否显示细边框，为 false 时显示粗边框 | boolean | - | true | $LOWEST_VERSION$ | | dashed | 是否显示为虚线 | boolean | - | false | $LOWEST_VERSION$ | -| content-position | 内容位置 | string | `left`/`center`/`right` | `center` | $LOWEST_VERSION$ | +| content-position | 内容位置，仅在非垂直模式下生效 | string | `left`/`center`/`right` | `center` | $LOWEST_VERSION$ | | vertical | 是否显示为垂直分割线 | boolean | - | false | $LOWEST_VERSION$ |
97-99: 建议补充插槽内容的使用限制说明默认插槽的说明可以更详细，帮助开发者理解在垂直模式下的行为。
| name | 说明 | 最低版本 | | ------- | ---- | -------- | -| default | 内容，仅在 `vertical` 为 `false` 时生效 | - | +| default | 分割线中间的内容。注意：当 `vertical` 为 `true` 时，该插槽内容将不会显示，仅支持水平分割线模式 | - |src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss (1)
280-282: 支持垂直分割线的样式变量新增了垂直分割线所需的关键变量：
- 垂直分割线高度
- 垂直分割线内容间距
- 垂直分割线宽度
建议在组件文档中添加这些新变量的使用示例。
src/uni_modules/wot-design-uni/components/wd-divider/index.scss (1)
23-30: 建议抽象重复的样式为混入以提高可维护性在
::before和::after伪元素中多次定义了重复的样式属性，考虑将这些样式抽象为一个 SCSS 混入（mixin），以减少代码重复，提升可维护性。示例：
@mixin divider-line-styles { flex: 1; display: block; box-sizing: border-box; border-style: solid; border-color: $-divider-line-color; border-width: $-divider-line-height 0 0; } &::after, &::before { @include divider-line-styles; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (6)
docs/component/divider.md(2 hunks)src/pages/divider/Index.vue(1 hunks)src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss(1 hunks)src/uni_modules/wot-design-uni/components/wd-divider/index.scss(1 hunks)src/uni_modules/wot-design-uni/components/wd-divider/types.ts(1 hunks)src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue(2 hunks)
🔇 Additional comments (19)
src/uni_modules/wot-design-uni/components/wd-divider/types.ts (2)
1-5: 类型定义清晰且符合需求！
类型定义明确地限制了分割线的位置和方向选项，有助于提供良好的类型安全性和开发体验。
34-34: 类型导出实现正确！
使用 ExtractPropTypes 导出类型是 Vue 3 的最佳实践。
src/pages/divider/Index.vue (4)
4-4: 基础用法展示清晰简洁！
空的分割线示例很好地展示了组件的基本用法。
7-9: 文本展示示例清晰！
展示了如何在分割线中添加文本内容，示例简单明了。
17-21: 内容位置示例展示完整！
很好地展示了所有可用的位置选项，示例排列符合逻辑。
23-25: 虚线样式展示恰当！
清晰地展示了虚线样式的效果。
src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss (3)
271-273: 使用 currentColor 优化分割线颜色继承
将分割线颜色从固定的 RGBA 值更改为 currentColor 是一个很好的改进，这样分割线可以自动继承文本颜色，提高了组件的灵活性和可定制性。
274-274: 新增线条高度变量提升可配置性
添加 $-divider-line-height 变量可以控制分割线的粗细，这对于水平和垂直方向的分割线都很有用。
276-279: 完善内容布局相关变量
新增了以下变量来精确控制内容的布局：
- 左侧内容宽度和边距
- 右侧内容宽度和边距
这些变量的添加使得分割线组件的内容布局更加灵活。
src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue (2)
2-3: 模板结构正确
模板中对于 vertical 属性的处理符合预期，slot 渲染逻辑正确。
28-47: 组件类名和样式计算逻辑清晰
rootClass 计算属性能够根据 props 和 slots 动态生成正确的类名，逻辑清晰且易于维护。
src/uni_modules/wot-design-uni/components/wd-divider/index.scss (8)
18-18: 正确添加了 margin 属性
第18行正确地为分割线添加了 margin 属性，符合样式需求。
23-30: 伪元素 ::before 和 ::after 的样式定义正确
第23-30行为伪元素 ::before 和 ::after 设置了正确的样式，确保分割线的显示效果。
33-34: 正确添加了 content 属性至 ::before
::before 伪元素添加了空内容，确保其能够正常显示。
48-52: 左对齐样式正确实现
为左对齐状态正确设置了最大宽度，保证样式效果。
54-58: 右对齐样式正确实现
为右对齐状态正确设置了最大宽度，保证样式效果。
60-66: 正确实现了 hairline 细线效果
通过 transform: scaleY(0.5) 实现了细线样式，符合设计要求。
68-74: 正确实现了虚线样式
通过设置 border-style: dashed，成功实现了虚线分割线。
76-98: 垂直分割线样式实现正确
成功为垂直分割线添加了样式，包括尺寸、对齐方式和细线效果。
src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue
Outdated
Show resolved
Hide resolved
src/uni_modules/wot-design-uni/components/wd-divider/index.scss
Outdated
Show resolved
Hide resolved
Moonofweisheng
force-pushed
the
feature/divider-dashed
branch
from
64b1ef0
to
cf65ab8
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (9)
src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue (1)
28-47: 建议优化类名计算逻辑当前的类名计算逻辑可以通过提取公共部分来简化。
建议按照以下方式重构：
const rootClass = computed(() => { const prefixCls = 'wd-divider' + const baseClasses = { + [prefixCls]: true, + ['is-dashed']: props.dashed, + ['is-hairline']: props.hairline + } + if (!props.vertical) { - return { - [prefixCls]: true, - [`${prefixCls}--center`]: slots.default && slots.default().length > 0, - [`${prefixCls}--left`]: props.contentPosition === 'left', - [`${prefixCls}--right`]: props.contentPosition === 'right', - ['is-dashed']: props.dashed, - ['is-hairline']: props.hairline - } + return { + ...baseClasses, + [`${prefixCls}--center`]: slots.default && slots.default().length > 0, + [`${prefixCls}--left`]: props.contentPosition === 'left', + [`${prefixCls}--right`]: props.contentPosition === 'right' + } } else { - return { - [prefixCls]: true, - [`${prefixCls}--vertical`]: true, - ['is-dashed']: props.dashed, - ['is-hairline']: props.hairline - } + return { + ...baseClasses, + [`${prefixCls}--vertical`]: true + } } })这样可以：
- 减少代码重复
- 提高可维护性
- 使逻辑更清晰
src/uni_modules/wot-design-uni/components/wd-divider/index.scss (3)
23-34: 建议优化伪元素性能当前实现使用伪元素创建分割线是个不错的方案，但可以通过添加
will-change属性来优化渲染性能，特别是在有动画效果的场景下。建议添加以下样式：
&::after, &::before { flex: 1; display: block; box-sizing: border-box; border-style: solid; border-color: $-divider-line-color; border-width: $-divider-line-height 0 0; + will-change: transform; }
60-66: 建议增强浏览器兼容性当前的 hairline 实现可能在某些浏览器中出现渲染问题。建议添加浏览器前缀和备用方案。
建议修改为：
@include when(hairline) { &::before, &::after { + -webkit-transform: scaleY(0.5); transform: scaleY(0.5); + @media (-webkit-min-device-pixel-ratio: 2) { + transform: scaleY(0.5); + } } }
76-98: 建议优化垂直分割线的高度处理垂直模式的实现很完整，但建议为容器高度添加最小值限制，以确保在内容较少时仍能保持良好的展示效果。
建议添加以下样式：
@include m(vertical) { display: inline-block; width: $-divider-vertical-line-width; height: $-divider-vertical-height; + min-height: 1em; margin: $-divider-vertical-content-margin; padding: 0; vertical-align: middle; }docs/component/divider.md (3)
5-7: 建议完善版本兼容性说明建议在警告信息中补充以下内容：
- 明确说明旧版本的具体行为
- 如果使用新属性可能带来的影响
建议调整为：
:::danger 请注意 -`hairline`、`dashed`、`content-position`、`vertical`属性为 $LOWEST_VERSION$ 版本新增支持，在此之前仅支持默认插槽显示文本和自定义`color`。 +`hairline`、`dashed`、`content-position`、`vertical`属性为 $LOWEST_VERSION$ 版本新增支持。在此之前的版本： +- 仅支持默认插槽显示文本和自定义`color` +- 使用新属性可能会导致组件无法正常渲染 +- 建议先升级到 $LOWEST_VERSION$ 或更高版本 :::
11-15: 建议补充默认样式说明为了帮助开发者更好地理解组件的默认外观，建议补充以下内容：
- 默认分割线的样式特征（粗细、颜色等）
- 在不同容器中的表现
建议在示例前补充：
默认渲染一条水平分割线。 +分割线默认为1px粗细的实线，颜色为浅灰色，会自动适应父容器宽度。 <wd-divider></wd-divider>
87-105: 建议优化API文档结构当前的API文档可以通过以下方式提升可读性：
- 按照重要性对属性进行分组
- 补充每个属性的使用示例
- 明确属性之间的互斥关系
建议调整属性表格的结构：
## Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | | ---------------- | ------------------------------ | ------- | ----------------------- | -------- | ---------------- | +# 基础属性 | color | 自定义颜色，支持所有颜色的写法 | string | - | - | - | | hairline | 是否显示边框 | boolean | - | true | $LOWEST_VERSION$ | +# 样式属性 | dashed | 是否显示为虚线 | boolean | - | false | $LOWEST_VERSION$ | | vertical | 是否显示为垂直分割线 | boolean | - | false | $LOWEST_VERSION$ | +# 内容相关 | content-position | 内容位置 | string | `left`/`center`/`right` | `center` | $LOWEST_VERSION$ | + +> 注意：`content-position` 属性在 `vertical` 为 `true` 时无效src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss (2)
276-279: 建议补充变量说明注释这些变量用于控制分割线内容的定位，建议添加注释说明各个变量的具体用途：
-$-divider-content-left-width: var(--wot-divider-content-left-width, 10%) !default; +// 分割线左侧内容的宽度，影响内容的布局空间 +$-divider-content-left-width: var(--wot-divider-content-left-width, 10%) !default;
283-285: 保持一致的空行风格建议保持与文件其他部分一致的空行数量，删除多余的空行：
$-divider-vertical-line-width: var(--wot-divider-vertical-line-width, 1px) !default; - - +
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (6)
docs/component/divider.md(2 hunks)src/pages/divider/Index.vue(1 hunks)src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss(1 hunks)src/uni_modules/wot-design-uni/components/wd-divider/index.scss(1 hunks)src/uni_modules/wot-design-uni/components/wd-divider/types.ts(1 hunks)src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- src/pages/divider/Index.vue
- src/uni_modules/wot-design-uni/components/wd-divider/types.ts
🧰 Additional context used
📓 Learnings (1)
src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue (1)
Learnt from: Moonofweisheng
PR: Moonofweisheng/wot-design-uni#737
File: src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue:25-25
Timestamp: 2024-11-26T02:35:53.123Z
Learning: 在 `wd-divider.vue` 文件（路径：`src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue`）中，`props.customStyle` 是字符串类型，用于传递自定义的样式字符串。
🔇 Additional comments (6)
src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue (2)
2-3: 模板结构优化得当！
模板结构简洁明了，通过计算属性控制样式和类名，并正确处理了垂直模式下的插槽渲染。
18-22: 脚本设置正确实现！
- 正确使用了
useSlots()替代defineSlots() - Props 定义清晰规范
src/uni_modules/wot-design-uni/components/wd-divider/index.scss (2)
18-18: 代码实现正确！
使用变量控制间距是一个很好的做法，保持了样式的一致性和可维护性。
Line range hint 1-100: 整体实现非常出色！ 👏
代码完整地实现了分割线组件的所有预期功能：
- ✅ 支持虚线样式
- ✅ 支持垂直布局
- ✅ 良好的样式封装
- ✅ 统一的变量管理
代码结构清晰，命名规范，充分考虑了不同使用场景。
src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss (2)
271-271: 变量定义合理且灵活！
使用 currentColor 替代固定的 rgba 值是一个很好的改进：
- 允许分割线继承当前文本颜色，提升主题适配能力
- 新增的 margin 和 line-height 变量提供了更细粒度的样式控制
Also applies to: 273-274
280-282: 请验证垂直分割线的默认值
垂直分割线的相关变量值需要确认：
- 高度(16px)是否足够常见场景使用
- 内容间距(0 8px)是否符合设计规范
- 线条宽度(1px)是否足够清晰
建议提供使用示例说明这些默认值的适用场景。
Moonofweisheng
force-pushed
the
feature/divider-dashed
branch
from
cf65ab8
to
c256364
Compare
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
💡 需求背景和解决方案
优化 Divider 分割线功能支持虚线、垂直等功能
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新特性
wd-divider组件的文档，增加了使用示例和新属性说明，提升了可用性。wd-divider组件的功能，支持文本显示、自定义渲染、不同内容位置和虚线样式。文档
wd-divider组件的文档，增加了多个新部分和示例，改善了可读性和一致性。样式
wd-divider组件的样式和布局，增强了灵活性和可定制性。