feat(tag): 实现 Tag 通用标签组件 #41
Conversation
✅ Deploy Preview for skiyee-ui ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
总体概览新增 SkTag 标签组件及其八个示例页面。在主包中实现了完整的 SkTag 组件，包括 props、events、slots 定义和样式系统。在示例项目中添加了基础、可关闭、自定义、图标、圆角、尺寸、类型和变体等多个演示页面，并更新了页面配置文件。 变更清单
代码审查工作量评估🎯 3 (中等) | ⏱️ ~25 分钟 需要额外关注的区域：
诗歌
Pre-merge checks and finishing touches✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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 (2)
packages/skiyee-uni-ui/src/components/sk-tag.vue (2)
71-71: 建议改进事件类型定义click 事件的参数类型使用了
any，建议改为更具体的类型以提供更好的类型安全。可以考虑修改为：
- (name: 'click', event: any): void; + (name: 'click', event: MouseEvent): void;或者如果是 uni-app 的事件对象：
- (name: 'click', event: any): void; + (name: 'click', event: Event): void;
129-129: 硬编码透明度值需要说明使用硬编码的
1A（十六进制 26，约 10% 透明度）来实现浅色变体。建议添加注释说明该值的选择原因，或考虑将其提取为常量以便统一管理。可以考虑：
+// 浅色变体的透明度：10% (1A in hex = 26/255 ≈ 10%) +const LIGHT_VARIANT_OPACITY = '1A' + else if (props.variant === 'light') { - style.backgroundColor = `${props.color}1A` // 10% opacity + style.backgroundColor = `${props.color}${LIGHT_VARIANT_OPACITY}` style.color = props.color }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (12)
examples/uni/src/pages-basic/tag/base.vue(1 hunks)examples/uni/src/pages-basic/tag/closable.vue(1 hunks)examples/uni/src/pages-basic/tag/custom.vue(1 hunks)examples/uni/src/pages-basic/tag/icon.vue(1 hunks)examples/uni/src/pages-basic/tag/radius.vue(1 hunks)examples/uni/src/pages-basic/tag/size.vue(1 hunks)examples/uni/src/pages-basic/tag/type.vue(1 hunks)examples/uni/src/pages-basic/tag/variant.vue(1 hunks)examples/uni/src/pages.json(2 hunks)packages/skiyee-uni-ui/src/components/sk-tag.vue(1 hunks)packages/skiyee-uni-ui/src/styles/index.ts(1 hunks)packages/skiyee-uni-ui/src/styles/sk-tag.ts(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
packages/skiyee-uni-ui/src/styles/sk-tag.ts (1)
packages/skiyee-uni-ui/src/styles/index.ts (2)
SkTagUcv(58-58)SkTagUcvProps(57-57)
🔇 Additional comments (15)
packages/skiyee-uni-ui/src/styles/sk-tag.ts (1)
21-193: 变体映射覆盖充分类型、外观、尺寸与圆角的组合都给出了明确样式，利于组件在不同场景下保持一致表现。
examples/uni/src/pages-basic/tag/radius.vue (1)
3-17: 示例覆盖全部圆角选项五种圆角枚举一目了然，便于肉眼对照验收组件效果。
examples/uni/src/pages-basic/tag/size.vue (1)
3-11: 尺寸示例清晰小中大三个尺寸并列展示，便于确认字号与高度的差异。
packages/skiyee-uni-ui/src/styles/index.ts (1)
57-58: 导出保持一致性新增导出与既有模式保持一致，便于外部按需引用。
examples/uni/src/pages-basic/tag/custom.vue (1)
7-67: 自定义颜色示例全面实心、描边、浅色与文字色案例齐备，覆盖主要定制需求。
examples/uni/src/pages-basic/tag/closable.vue (1)
1-29: 实现正确，代码清晰！可关闭标签的示例实现正确：
- 使用响应式数组管理标签列表
- 关闭处理函数通过
filter正确移除指定标签- 模板绑定和事件处理恰当
examples/uni/src/pages-basic/tag/base.vue (1)
1-17: 基础标签示例清晰明了！模板展示了五种标签类型（default、primary、success、warning、error），结构简洁，易于理解。
examples/uni/src/pages.json (1)
193-225: 页面配置正确添加！新增的 8 个标签示例页面（base、type、variant、size、radius、closable、icon、custom）已正确注册到 pages-basic 子包中，配置格式统一规范。
examples/uni/src/pages-basic/tag/type.vue (1)
1-66: 类型演示全面完整！示例完整展示了三种变体（实心、描边、浅色）下的五种标签类型，结构清晰，有助于用户理解不同组合的视觉效果。
examples/uni/src/pages-basic/tag/variant.vue (1)
1-48: 变体演示清晰规范！示例展示了三种变体（solid、outline、light）与不同标签类型的组合效果，布局合理，标注准确。
examples/uni/src/pages-basic/tag/icon.vue (1)
1-51: 图标用法示例完善！示例全面展示了标签组件的图标功能：
- 前置图标与不同类型的组合
- 图标与可关闭功能的结合
- 自定义图标插槽的使用方式
结构清晰，涵盖了图标功能的主要使用场景。
packages/skiyee-uni-ui/src/components/sk-tag.vue (4)
1-84: 类型定义完整规范！组件接口定义清晰：
- SkTagProps：涵盖了类型、变体、尺寸、圆角、可关闭等关键属性
- SkTagEmits：定义了 close 和 click 事件
- SkTagSlots：支持默认内容和自定义图标插槽
文档注释完善，有助于 IDE 提示和开发者理解。
117-139: 自定义样式逻辑实现正确！customStyle 的计算逻辑处理了三种变体的颜色覆盖：
- solid：设置背景色
- outline：设置边框色和文字色
- light：使用带透明度的背景色和文字色
逻辑清晰，符合设计预期。
141-150: 事件处理实现正确！handleClose 和 handleClick 的实现恰当：
- handleClose 正确阻止了事件冒泡，避免触发标签的 click 事件
- handleClick 正确传递了事件对象
153-181: 模板结构清晰合理！模板实现要点：
- 根元素绑定动态样式和点击事件
- 内容区域支持图标插槽和默认插槽
- 可选的关闭按钮独立处理点击事件
结构层次分明，插槽使用灵活，符合组件设计规范。
#32
Summary by CodeRabbit
发布说明