feat: ✨ Tabs 支持设置徽标#724
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
✅ Deploy Preview for wot-design-uni ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Walkthrough此拉取请求对 Changes
Assessment against linked issues
Possibly related PRs
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 (
|
Deploying wot-design-uni with
|
| Latest commit: |
6a75501
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://075f3aea.wot-design-uni.pages.dev |
| Branch Preview URL: | https://feature-tabs-badge.wot-design-uni.pages.dev |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (15)
src/uni_modules/wot-design-uni/components/wd-tab/types.ts (1)
24-27: 徽标属性定义合理，建议补充示例类型定义正确使用了 Partial，使所有徽标属性成为可选项。建议在注释中添加一个简单的使用示例，以帮助开发者更好地理解。
建议将注释扩展为：
/** * 徽标属性，透传给 Badge 组件 + * @example + * { + * value: '99+', + * type: 'primary', + * isDot: false + * } */src/uni_modules/wot-design-uni/components/wd-badge/types.ts (1)
20-20: 建议增加属性值的验证逻辑使用 numericProp 统一了数值类型的处理，这是一个很好的改进。不过，考虑到 top 和 right 属性的实际用途，建议添加以下改进：
- 增加对负值的处理逻辑
- 考虑添加默认值
建议参考以下修改：
/** * 为正时，角标向下偏移对应的像素 */ - top: numericProp, + top: { + ...numericProp, + validator: (val: number) => val >= 0, + default: 0 + }, /** * 为正时，角标向左偏移对应的像素 */ - right: numericProp, + right: { + ...numericProp, + validator: (val: number) => val >= 0, + default: 0 + }Also applies to: 43-43, 47-47
src/uni_modules/wot-design-uni/components/wd-badge/index.scss (1)
34-35: 建议考虑使用CSS变量来控制徽标位置当前的固定位置设置是合理的，但为了提供更好的自定义性，建议考虑将top和right值改为CSS变量。
建议按照以下方式修改：
- top: 0px; - right: 0px; + top: var(--badge-top, 0px); + right: var(--badge-right, 0px);这样可以让使用者更容易调整徽标的具体位置，同时保持默认行为不变。
src/uni_modules/wot-design-uni/components/wd-badge/wd-badge.vue (2)
29-37: 建议增加输入验证！当前的实现很好地处理了最大值，但建议添加以下改进：
- 对负数值的处理
- 对小数的处理策略
建议添加如下验证：
const content = computed(() => { const { modelValue, max, isDot } = props if (isDot) return '' let value = modelValue + // 处理负数和小数 + if (isNumber(value)) { + if (value < 0) value = 0 + if (!Number.isInteger(value)) value = Math.floor(value) + } if (value && max && isNumber(value) && !Number.isNaN(value) && !Number.isNaN(max)) { value = max < value ? `${max}+` : value } return value })
39-53: 建议增加样式值的验证！当前样式计算的实现很好，但建议添加以下安全检查：
- 颜色值的格式验证
- 位置值的范围检查
建议添加如下验证：
const contentStyle = computed(() => { const style: CSSProperties = {} if (isDef(props.bgColor)) { + // 验证颜色值格式 + const isValidColor = /^#([0-9A-Fa-f]{3}){1,2}$|^rgb|rgba/.test(props.bgColor) + if (isValidColor) { style.backgroundColor = props.bgColor + } } if (isDef(props.top)) { + // 确保位置值在合理范围内 + const topValue = parseFloat(props.top as string) + if (!Number.isNaN(topValue) && topValue >= -100 && topValue <= 100) { style.top = addUnit(props.top) + } } if (isDef(props.right)) { + // 确保位置值在合理范围内 + const rightValue = parseFloat(props.right as string) + if (!Number.isNaN(rightValue) && rightValue >= -100 && rightValue <= 100) { style.right = addUnit(props.right) + } } return objToStyle(style) })src/pages/tabs/Index.vue (2)
133-157: 建议优化示例代码的结构和类型定义当前实现有以下几点可以改进：
- 重复的样式属性
right: '-8px'可以抽取为常量- 建议为
badgeProps添加显式的类型定义- 可以为每个示例添加注释，说明其用途和配置说明
建议按如下方式重构：
+interface BadgeProps { + modelValue?: number + max?: number + isDot?: boolean + right?: string + showZero?: boolean +} +const BADGE_OFFSET = '-8px' const tabsWithBadge = ref([ { title: '普通数值', + // 展示具体数值的徽标 badgeProps: { modelValue: 10, - right: '-8px' + right: BADGE_OFFSET } as BadgeProps }, { title: '最大值', + // 展示带有最大值限制的徽标 badgeProps: { modelValue: 100, max: 99, - right: '-8px' + right: BADGE_OFFSET } as BadgeProps }, { title: '点状', + // 展示点状徽标 badgeProps: { isDot: true, - right: '-8px', + right: BADGE_OFFSET, showZero: true } as BadgeProps } ])
131-132: 建议添加变量说明注释为了提高代码可维护性，建议为
tabWithBadge添加注释说明其用途和类型。建议修改如下：
+// 当前选中的徽标示例索引 const tabWithBadge = ref(0)src/uni_modules/wot-design-uni/components/wd-tabs/index.scss (2)
118-124: 建议：优化徽标容器样式徽标容器的样式实现基本合理，但建议考虑以下优化：
@include edeep(nav-item-badge){ display: flex; align-items: center; justify-content: center; max-width: 100%; min-width: 0; + margin-left: 4px; + flex-shrink: 0; }添加左边距可以确保徽标与文本之间有适当的间隔，
flex-shrink: 0可以防止徽标在空间不足时被压缩。
Line range hint
36-40: 暗黑模式下禁用状态样式优化在暗黑模式下为禁用状态添加边框颜色是合理的，但建议考虑使用变量而不是硬编码的颜色值。
@include when(disabled) { color: $-dark-color-gray; - border-color: #f4f4f4; + border-color: $-dark-border-color; }docs/component/tabs.md (3)
60-63: 建议补充徽标功能的使用场景说明当前描述较为简单，建议补充以下内容：
- 徽标功能的典型使用场景（如：未读消息提醒、状态标记等）
- 与 Badge 组件的关系说明
- 不同类型徽标的应用建议
64-99: 建议扩充示例代码的覆盖范围当前示例展示了基础用法，建议补充以下场景：
- 动态更新徽标内容的示例
- 自定义徽标样式（颜色、位置等）的示例
- 处理特殊值（0、undefined、null等）的示例
建议添加如下示例代码：
const dynamicBadge = ref({ title: '动态徽标', badgeProps: { modelValue: 0, right: '-8px', color: '#ff0000', showZero: true } }) const updateBadge = () => { dynamicBadge.value.badgeProps.modelValue++ }
210-227: 建议完善属性表格的类型说明关于属性表格的改进建议：
badge-props的类型说明可以更详细，建议列出具体的类型定义- 可以添加更多示例值，帮助用户理解属性的使用方法
- 建议补充与徽标相关的注意事项说明
建议在文档中添加以下类型说明：
interface BadgeProps { modelValue?: string | number max?: number isDot?: boolean hidden?: boolean color?: string right?: string showZero?: boolean }Also applies to: 231-236
src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue (3)
22-25: 建议提取徽标逻辑到独立组件当前徽标实现在粘性和非粘性模板中重复出现，且样式类名不一致。建议：
- 将徽标逻辑提取到单独的组件中
- 统一使用相同的样式类名
建议重构为:
+ <!-- 新建文件: wd-tab-badge.vue --> + <template> + <wd-badge v-if="badgeProps" v-bind="badgeProps" :custom-class="customClass"> + <text class="wd-tabs__nav-item-text"><slot /></text> + </wd-badge> + <text v-else class="wd-tabs__nav-item-text"><slot /></text> + </template>然后在两处统一使用:
- <wd-badge v-if="item.badgeProps" v-bind="item.badgeProps"> - <text class="wd-tabs__nav-item-text">{{ item.title }}</text> - </wd-badge> - <text v-else class="wd-tabs__nav-item-text">{{ item.title }}</text> + <wd-tab-badge :badge-props="item.badgeProps" custom-class="wd-tabs__nav-item-badge"> + {{ item.title }} + </wd-tab-badge>Also applies to: 98-101
216-218: 建议增强类型安全性
getTabName函数的参数类型可以更具体，建议使用接口定义 tab 的结构。+ interface Tab { + name?: string | number; + disabled?: boolean; + badgeProps?: Record<string, any>; + } - const getTabName = (tab: ComponentInstance<any>, index: number) => { + const getTabName = (tab: ComponentInstance<Tab>, index: number) => {
453-462: 建议改进错误消息的可读性当前的错误消息不够清晰，建议提供更详细的信息来帮助开发者快速定位问题。
if (isNumber(value) && value >= children.length) { - console.error('[wot design] warning(wd-tabs): the type of tabs\' value is Number shouldn\'t be less than its children') + console.error( + `[wot design] warning(wd-tabs): 选项卡索引值 (${value}) 超出范围。最大允许值为 ${children.length - 1}。已自动设置为 0。` + ) value = 0 }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (8)
docs/component/tabs.md(2 hunks)src/pages/tabs/Index.vue(2 hunks)src/uni_modules/wot-design-uni/components/wd-badge/index.scss(1 hunks)src/uni_modules/wot-design-uni/components/wd-badge/types.ts(3 hunks)src/uni_modules/wot-design-uni/components/wd-badge/wd-badge.vue(2 hunks)src/uni_modules/wot-design-uni/components/wd-tab/types.ts(2 hunks)src/uni_modules/wot-design-uni/components/wd-tabs/index.scss(4 hunks)src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue(14 hunks)
🔇 Additional comments (11)
src/uni_modules/wot-design-uni/components/wd-tab/types.ts (1)
1-1: 导入语句看起来不错！
类型导入正确，使用 PropType 和 BadgeProps 类型可以确保类型安全性。
Also applies to: 3-3
src/uni_modules/wot-design-uni/components/wd-badge/types.ts (2)
4-4: 文件头注释更新正确！
文件头注释包含了必要的更新时间和文件路径信息，符合项目规范。
Also applies to: 7-7
11-11: 导入语句更新合理，建议验证使用情况
从 common/props 导入 numericProp 是正确的做法，这有助于保持类型定义的一致性。
✅ Verification successful
导入和使用 numericProp 的变更是合理的
从搜索结果可以看到，numericProp 在 badge 组件中被正确使用于以下属性：
- modelValue：用于显示值
- top：用于控制角标向下偏移
- right：用于控制角标向左偏移
这种用法与组件库中其他组件（如 wd-tabs、wd-img、wd-switch 等）的使用模式保持一致，符合代码库的最佳实践。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查 numericProp 在其他组件中的使用情况
ast-grep --pattern 'import { $$$, numericProp, $$$ } from "../common/props"'
Length of output: 78
Script:
#!/bin/bash
# 检查 numericProp 的导入和使用情况，使用更宽松的搜索模式
rg "numericProp" --type ts -A 2 -B 2
# 检查 badge 组件中的具体使用
rg "numericProp" "src/uni_modules/wot-design-uni/components/wd-badge/" --type ts
Length of output: 9880
src/uni_modules/wot-design-uni/components/wd-badge/index.scss (1)
34-35: 验证徽标在不同场景下的定位效果
固定定位的改动需要确保在各种场景下都能正确显示，特别是在选项卡组件中。
✅ Verification successful
徽标定位修改验证完成，确认安全
经过代码验证，此次修改是安全的，原因如下：
- 徽标组件（wd-badge）采用相对定位的父容器和绝对定位的内容实现，定位值的修改不会影响整体布局结构。
- 在选项卡（wd-tabs）等复杂组件中的使用场景，徽标都是通过
badgeProps正确传递样式，不受默认定位值影响。 - 组件的样式隔离设置为
shared，确保样式修改不会影响到其他组件。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查是否有其他组件使用了固定定位的徽标
rg -l "badge.*fixed" --type vue
# 检查是否存在自定义徽标位置的用例
rg "badge-props.*top|badge-props.*right" --type vue
Length of output: 143
Script:
#!/bin/bash
# 检查徽标组件的使用和定位相关代码
rg -l "badge" --type-add 'vue:*.vue'
# 检查徽标组件的样式定义
fd -e scss -e css | xargs rg "badge.*position|badge.*top|badge.*right"
# 检查徽标组件的文档和示例
fd "README" | xargs rg "badge"
Length of output: 1914
Script:
#!/bin/bash
# 检查徽标组件的具体实现和使用场景
cat src/uni_modules/wot-design-uni/components/wd-badge/wd-badge.vue
# 检查徽标在选项卡中的使用
cat src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue
# 检查徽标组件的样式定义
cat src/uni_modules/wot-design-uni/components/wd-badge/index.scss
Length of output: 18635
src/uni_modules/wot-design-uni/components/wd-badge/wd-badge.vue (3)
5-8: 命名更改提高了可读性！
将 isBadgeShow 重命名为 shouldShowBadge 使得条件渲染的意图更加清晰。
24-28: 类型导入和工具函数的使用很合理！
- 导入
CSSProperties类型增强了类型安全性 - 使用通用工具函数提高了代码复用性和可维护性
55-56: 徽标显示逻辑清晰完善！
显示逻辑考虑了所有情况：
- hidden 属性控制整体显示
- 处理了 0 值的特殊情况
- 支持圆点模式
这很好地支持了在标签页中使用徽标的需求。
src/pages/tabs/Index.vue (1)
26-32: 代码实现规范，展示完整！
新增的徽标演示区块实现清晰，很好地展示了不同类型的徽标用法。
src/uni_modules/wot-design-uni/components/wd-tabs/index.scss (3)
95-97: 布局优化：导航项采用 flex 布局
使用 flex 布局可以更好地支持徽标显示，同时确保内容垂直居中对齐。这是一个很好的改进。
114-116: 文本溢出处理优化
使用 lineEllipsis mixin 处理文本溢出是个好做法，可以确保长文本在有徽标的情况下也能正确显示。
136-139: 内部定位线条优化
使用百分比和 transform 进行居中定位是一个好的实践，可以确保线条位置的准确性。
Moonofweisheng
force-pushed
the
feature/tabs-badge
branch
from
6d866ea to
6a75501
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (3)
src/pages/tabs/Index.vue (1)
131-132: 建议添加类型声明为了提高代码的可维护性和类型安全性，建议为
tabWithBadge添加明确的类型声明。-const tabWithBadge = ref(0) +const tabWithBadge = ref<number>(0)docs/component/tabs.md (2)
64-99: 建议优化示例代码的可读性示例代码展示了三种不同的徽标使用场景（普通数值、最大值限制、点状徽标），建议添加注释说明每种场景的具体用途和配置要点。
建议添加如下注释：
const tabsWithBadge = ref([ { + // 展示具体数值的徽标 title: '普通数值', badgeProps: { modelValue: 10, right: '-8px' } }, { + // 展示超过最大值的徽标，超过99显示99+ title: '最大值', badgeProps: { modelValue: 100, max: 99, right: '-8px' } }, { + // 展示小红点样式的徽标 title: '点状', badgeProps: { isDot: true, right: '-8px', showZero: true } } ])
210-227: 建议完善属性表格的类型说明属性表格的格式统一，版本信息完整。但建议对
badge-props的类型说明做以下改进：
- 建议在文档中详细说明
BadgeProps类型的具体属性，或提供类型定义的链接- 可以添加示例值，帮助用户更快理解配置方式
Also applies to: 231-236
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (8)
docs/component/tabs.md(2 hunks)src/pages/tabs/Index.vue(2 hunks)src/uni_modules/wot-design-uni/components/wd-badge/index.scss(1 hunks)src/uni_modules/wot-design-uni/components/wd-badge/types.ts(3 hunks)src/uni_modules/wot-design-uni/components/wd-badge/wd-badge.vue(2 hunks)src/uni_modules/wot-design-uni/components/wd-tab/types.ts(2 hunks)src/uni_modules/wot-design-uni/components/wd-tabs/index.scss(4 hunks)src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue(11 hunks)
🚧 Files skipped from review as they are similar to previous changes (6)
- src/uni_modules/wot-design-uni/components/wd-badge/index.scss
- src/uni_modules/wot-design-uni/components/wd-badge/types.ts
- src/uni_modules/wot-design-uni/components/wd-badge/wd-badge.vue
- src/uni_modules/wot-design-uni/components/wd-tab/types.ts
- src/uni_modules/wot-design-uni/components/wd-tabs/index.scss
- src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue
🔇 Additional comments (3)
src/pages/tabs/Index.vue (2)
26-32: 代码实现规范，结构清晰！
新增的徽标演示区块实现合理，与其他演示保持一致的代码风格。
28-28: 验证徽标属性的类型定义
建议确认 wd-tab 组件中是否已正确定义 badge-props 的类型。
✅ Verification successful
badge-props 属性已正确定义
wd-tab 组件中的 badge-props 属性已经正确定义，它的类型是 BadgeProps 的部分属性集合，支持以下配置：
modelValue: 显示的数值showZero: 当数值为 0 时是否展示徽标bgColor: 自定义背景色max: 最大值isDot: 是否为红点模式hidden: 是否隐藏徽标type: 徽标类型，可选 primary/success/warning/danger/infotop: 向下的偏移量right: 向左的偏移量
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查 wd-tab 组件的类型定义
ast-grep --pattern 'interface $interface {
$$$
badgeProps?: $_
$$$
}'
Length of output: 77
Script:
#!/bin/bash
# 搜索 wd-tab 组件的定义和类型声明
rg -A 10 "wd-tab" --type vue --type typescript
# 搜索包含 badgeProps 的文件
rg "badgeProps" --type vue --type typescript
Length of output: 147
Script:
#!/bin/bash
# 搜索 wd-tab 组件的定义和类型声明
rg -A 10 "wd-tab"
# 搜索包含 badgeProps 的文件
rg "badgeProps"
# 查找可能的类型定义文件
fd -e ts -e d.ts
Length of output: 101614
Script:
#!/bin/bash
# 搜索 wd-tab 组件的类型定义文件
cat src/uni_modules/wot-design-uni/components/wd-tab/types.ts
# 搜索 badgeProps 相关的类型定义
cat src/uni_modules/wot-design-uni/components/wd-badge/types.ts
Length of output: 1838
docs/component/tabs.md (1)
60-62: 文档格式和链接正确
版本标签格式统一，Badge组件的引用链接正确。
1 participant
✅ Closes: #689,#672
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
#689,#672
💡 需求背景和解决方案
使用badge组件为tabs添加徽标
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
wd-tabs组件文档更新，新增“使用徽标”部分，介绍如何使用badge-props属性设置标签的徽标属性。Index.vue中新增示例，展示带徽标的标签。wd-badge组件增强徽标内容和样式管理。wd-tabs组件支持徽标属性，提升视觉表现。样式
wd-tabs和wd-badge组件的样式，以改善暗黑主题下的布局和响应性。