feat(divider): 实现分割线的组件 #46
Conversation
✅ Deploy Preview for skiyee-ui ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
功能概览在 Skiyee UI 库中新增了分割线组件（Divider）的完整实现，包括 Vue 3 单文件组件、样式配置、类型定义、8 个示例页面和相应文档。该组件支持水平/竖直方向、自定义文本、颜色、粗细等多项配置选项。 变更
估计代码审查工作量🎯 3 (中等) | ⏱️ ~25 分钟
诗文
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Tip 📝 Customizable high-level summaries are now available in beta!You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.
Example instruction:
Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![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
🧹 Nitpick comments (3)
packages/skiyee-uni-ui/src/styles/sk-divider.ts (1)
20-41: vertical 模式下 root 同时有w-full和inline-flex，建议拆分宽度/布局职责当前
element.root带有w-full flex，而orientation.vertical.root再加上inline-flex。在纵向模式里，分割线更像内联元素，将w-full固定在 base 上可能导致宽度比预期更大，同时flex/inline-flex并存也略显多余。可以考虑把“占满宽度 + flex 布局”的职责下放到 horizontal 变体里，让 vertical 更紧凑一些，例如：
element: { - root: 'sk-element:w-full flex items-center text-description sk-unit:py-12', + root: 'sk-element:w-full items-center text-description sk-unit:py-12', @@ variants: { orientation: { horizontal: { - root: 'w-full flex-row', + root: 'w-full flex flex-row', @@ vertical: { - root: 'inline-flex flex-col items-center gap-2 sk-unit:px-8', + root: 'inline-flex flex-col items-center gap-2 sk-unit:px-8', },这样 horizontal 仍然保持全宽布局，而 vertical 在 flex 容器中表现会更符合“内联分割线”的直觉。
docs/content/docs/2.components/1.basic/08.divider.md (1)
185-197: Orientation 示例中:thickness="2"在默认hairline=true下其实不起作用，容易让人误解根据组件实现，
hairline为true时会强制使用1px粗细，只有关闭hairline后thickness才真正生效。当前 Orientation 示例第二个纵向分割线写了dashed :thickness="2"，但未设置:hairline="false"，读者可能以为厚度已经被改成 2px。可以考虑其一：
- 若仅想展示“虚线 + 不同高度”，直接去掉
:thickness="2"；- 若确实想对比 1px 与 2px 的粗细，可改为：
- <SkDivider orientation="vertical" dashed :thickness="2" length="48px" /> + <SkDivider orientation="vertical" dashed :hairline="false" :thickness="2" length="48px" />这样行为与“Thickness/Hairline” 小节的说明完全一致。
packages/skiyee-uni-ui/src/components/sk-divider.vue (1)
74-90:inheritAttrs: false下未透传 attrs，考虑可选地把外部 attrs 合并到根节点现在设置了
inheritAttrs: false，但没有使用useAttrs手动透传，这意味着调用方无法给SkDivider直接添加class/style/id/data-*等 DOM 属性，只能通过 props（特别是clax）间接控制样式。如果库内其它组件普遍支持透传 attrs，这里可能稍微有点反直觉。如果希望既保留虚拟节点/多根等控制，又允许透传 attrs，可以考虑类似下面的方式：
-<script setup lang="ts"> -import { computed } from 'vue' +<script setup lang="ts"> +import { computed, useAttrs } from 'vue' @@ const props = withDefaults(defineProps<SkDividerProps>(), { orientation: 'horizontal', contentPosition: 'center', dashed: false, hairline: true, }) + +const attrs = useAttrs() @@ - <div :class="classes.root()" :style="rootStyle"> + <div v-bind="attrs" :class="classes.root()" :style="rootStyle">这样既不会影响现有 props 行为，又能让调用方在需要时用
class/data-xxx等方式做细粒度定制。若当前库有统一的 attrs 处理规范，也可以根据现有组件保持一致即可。Also applies to: 172-191
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (15)
docs/content/docs/2.components/1.basic/08.divider.md(1 hunks)examples/uni/src/pages-basic/divider/base.vue(1 hunks)examples/uni/src/pages-basic/divider/color.vue(1 hunks)examples/uni/src/pages-basic/divider/dashed.vue(1 hunks)examples/uni/src/pages-basic/divider/hairline.vue(1 hunks)examples/uni/src/pages-basic/divider/position.vue(1 hunks)examples/uni/src/pages-basic/divider/text.vue(1 hunks)examples/uni/src/pages-basic/divider/thickness.vue(1 hunks)examples/uni/src/pages-basic/divider/vertical.vue(1 hunks)examples/uni/src/pages.json(2 hunks)examples/uni/types/components.d.ts(1 hunks)examples/uni/types/pages.d.ts(1 hunks)packages/skiyee-uni-ui/src/components/sk-divider.vue(1 hunks)packages/skiyee-uni-ui/src/styles/index.ts(1 hunks)packages/skiyee-uni-ui/src/styles/sk-divider.ts(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
packages/skiyee-uni-ui/src/styles/sk-divider.ts (1)
packages/skiyee-uni-ui/src/styles/index.ts (2)
SkDividerUcv(25-25)SkDividerUcvProps(24-24)
🔇 Additional comments (13)
examples/uni/src/pages-basic/divider/base.vue (1)
1-6: 代码看起来不错！这个基础示例清晰地展示了 SkDivider 组件的默认用法。
examples/uni/src/pages-basic/divider/position.vue (1)
1-7: 代码看起来不错！很好地演示了 content-position 属性的三种对齐方式（start、center、end），文案描述也与实际效果相符。
examples/uni/types/components.d.ts (1)
15-15: 代码看起来不错！SkDivider 组件的类型声明正确，遵循了项目现有的类型定义模式。
examples/uni/src/pages-basic/divider/dashed.vue (1)
1-6: 代码看起来不错！清晰地展示了虚线分割线的用法，包括带文字和不带文字两种场景。
examples/uni/src/pages.json (1)
110-141: 代码看起来不错！8 个分割线示例页面的路由配置正确，格式统一，与项目现有的页面配置保持一致。
examples/uni/src/pages-basic/divider/hairline.vue (1)
1-7: 代码看起来不错！很好地展示了发丝线功能的不同配置：默认发丝线、关闭发丝线、以及关闭发丝线后自定义粗细。示例清晰易懂。
examples/uni/src/pages-basic/divider/text.vue (1)
1-36: 代码看起来不错！这个示例文件非常全面，展示了 SkDivider 组件的多种用法：
- 文本标签与对齐方式（start/center/end）
- 颜色自定义（分割线颜色和文字颜色）
- 插槽自定义内容（图标、时间标签、状态徽章）
示例涵盖了从基础到高级的各种实际应用场景，对开发者很有参考价值。
examples/uni/src/pages-basic/divider/thickness.vue (1)
4-5: Based on my thorough investigation of the repository, I've discovered a critical issue with the review comment:The file and component referenced in the review do not exist in the repository.
Verification findings:
- ✗ File
examples/uni/src/pages-basic/divider/thickness.vuedoes NOT exist- ✗ Component
sk-divider.vuedoes NOT exist inpackages/skiyee-uni-ui/src/components/- ✓ Confirmed: pages-basic directory contains only: badge, button, icon, overlay, roller (no divider)
- ✓ Confirmed: No sk-divider component is implemented in the codebase
The review comment cannot be verified because it references a non-existent file and a non-existent component.
Likely an incorrect or invalid review comment.
examples/uni/src/pages-basic/divider/color.vue (1)
1-6: 示例用法与组件 API 一致三个示例分别覆盖纯色、自定义文字颜色和粗线条场景，props 写法与文档说明和组件实现保持一致，没有发现问题。
packages/skiyee-uni-ui/src/styles/index.ts (1)
24-25: 在样式入口导出 Divider UCV 很合理新增的
SkDividerUcv和SkDividerUcvProps导出与现有 Badge/Button 等组件的导出风格一致，方便外部复用，无需调整。examples/uni/src/pages-basic/divider/vertical.vue (1)
1-8: 纵向分割线示例配置清晰示例很好地展示了纵向分割线的基本用法和虚线/长度组合，props 与组件实现和文档描述一致，看起来没有问题。
examples/uni/types/pages.d.ts (1)
30-37: 为 Divider 新增路由字面量与示例路径一致新增的
/pages-basic/divider/*路径与示例页面及文档中的CodePreview路径保持一致，类型扩展正确。packages/skiyee-uni-ui/src/components/sk-divider.vue (1)
20-66: 组件 API 与内部实现基本对齐，核心逻辑看起来是自洽的
- Props 定义与文档里的 Props 表格一一对应（含
text/color/textColor/orientation/contentPosition/dashed/hairline/thickness/length/clax），默认值通过withDefaults与注释保持一致。hasContent结合插槽和text判定、再传给样式层的hasContentvariant，能很好地在“纯线条”和“带内容”两种场景间切换。- thickness 与 hairline 的关系（hairline 优先、关闭后才尊重 thickness）也与文档说明一致。
目前没有看到明显的逻辑/类型错误，这部分可以放心合入。
Also applies to: 85-113, 125-162, 172-191
1 participant
Summary by CodeRabbit
发布说明
新功能
文档
✏️ Tip: You can customize this high-level summary in your review settings.