Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough此次变更涉及对 Changes
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!
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: 1
🧹 Outside diff range and nitpick comments (13)
src/uni_modules/wot-design-uni/components/wd-tabs/types.ts (3)
16-16: 建议添加类型说明文档为了提高代码可读性和可维护性，建议为
TabsSlidable类型添加 JSDoc 注释，说明每个可选值的用途。建议添加如下注释：
+/** + * 滚动导航类型 + * @property 'auto' - 超过阈值时自动开启滚动 + * @property 'always' - 始终开启滚动 + */ export type TabsSlidable = 'auto' | 'always'
70-75: 建议完善属性文档属性文档已经包含了基本说明，但建议添加使用示例，以便开发者更好地理解如何使用该属性。
建议扩展注释如下：
/** * 是否开启滚动导航 * 可选值：'auto' | 'always' * @default auto + * @example + * // 始终开启滚动导航 + * <wd-tabs slidable="always"> + * // 自动判断是否开启滚动导航 + * <wd-tabs slidable="auto"> */
78-84: 建议增强方法参数说明虽然方法注释清晰，但建议为参数添加更详细的类型说明和用途说明。
建议修改如下：
export type TabsExpose = { - // 修改选中的tab Index + /** + * 修改选中的tab Index + * @param value - 目标tab的索引或值 + * @param init - 是否为初始化调用 + * @param setScroll - 是否需要滚动到选中位置 + */ setActive: (value: number | string, init: boolean, setScroll: boolean) => void - // scroll-view滑动到active的tab_nav + /** + * scroll-view滑动到active的tab_nav + */ scrollIntoView: () => void - // 更新底部条样式 + /** + * 更新底部条样式 + * @param animation - 是否启用动画效果 + */ updateLineStyle: (animation: boolean) => void }src/uni_modules/wot-design-uni/components/wd-tab/wd-tab.vue (2)
19-20: 建议：优化导入语句的组织建议将导入语句按照以下顺序组织：
- Vue 核心模块
- 工具函数
- 组件相关的类型和常量
这样可以提高代码的可读性和可维护性。
-import { getCurrentInstance, ref, watch, type CSSProperties } from 'vue' -import { isDef, isNumber, isString, objToStyle } from '../common/util' +// Vue 核心模块 +import { getCurrentInstance, ref, watch, computed, type CSSProperties } from 'vue' + +// 工具函数 +import { isDef, isNumber, isString, objToStyle } from '../common/util'
38-44: 建议：增强计算属性的类型安全性和可读性当前实现可以通过以下几点来改进：
- 添加注释说明计算属性的用途
- 增强对
tabs对象的空值检查- 明确返回类型定义
+/** + * 计算标签页主体的样式 + * @returns {CSSProperties} 样式对象 + */ -const tabBodyStyle = computed(() => { +const tabBodyStyle = computed((): CSSProperties => { const style: CSSProperties = {} - if (!isShow.value && (!isDef(tabs) || !tabs.props.animated)) { + if (!isShow.value && (!isDef(tabs) || !tabs?.props?.animated)) { style.display = 'none' } return objToStyle(style) })src/pages/tabs/Index.vue (1)
86-94: 新增左对齐滚动功能实现正确新增的左对齐滚动演示区块实现合理，但建议：
- 考虑添加更多的标签来更好地展示滚动效果
- 为了更好的用户体验，可以考虑添加滚动指示器
建议调整示例代码如下：
- <block v-for="item in 5" :key="item"> + <block v-for="item in 8" :key="item"> <wd-tab :title="`超大标签${item}`"> <view class="content">内容{{ tab9 + 1 }}</view> </wd-tab> </block>docs/component/tabs.md (3)
130-143: 建议补充更多使用场景示例建议在示例中展示更多实际应用场景，比如：
- 标签数量较多时的滚动效果
- 不同标签宽度混合时的对齐效果
- 与其他属性（如
sticky）组合使用的效果这将帮助用户更好地理解和使用该功能。
147-147: 建议优化文档结构，提高可读性当前描述段落包含了多个重要概念（滑动阈值、导航地图、左对齐特性），建议：
- 将内容分成多个小段落
- 使用项目符号列表来分别说明不同的功能特性
- 为每个特性添加对应的示例链接
这样的结构将使文档更容易阅读和理解。
Line range hint
154-165: 建议完善属性文档说明关于
slidable和slidable-num属性的说明建议补充：
- 两个属性之间的关系和使用场景
always和auto模式的具体行为差异- 添加示例代码链接，方便用户快速查看使用方法
这些补充信息将帮助用户更好地理解和正确使用这些属性。
src/uni_modules/wot-design-uni/components/wd-tabs/index.scss (1)
124-127: 指示器居中定位实现合理使用transform进行居中定位是一个很好的实现方式：
- 性能更好（触发合成而不是重排）
- 确保指示器在任何宽度的标签下都能正确居中
建议添加一个注释说明这个修饰符的用途。
@include m(inner){ + // 确保指示器在标签内居中显示 left: 50%; transform: translateX(-50%) }src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue (3)
5-5: 模板绑定逻辑优化通过引入
innerSlidable和useInnerLine改进了滑动行为和激活标识的显示逻辑，增强了组件的可用性。建议考虑以下优化：
- 为内部激活线添加过渡动画，提升用户体验
- 考虑在
useInnerLine为 true 时隐藏外部下划线，避免视觉干扰<view class="wd-tabs__line wd-tabs__line--inner" - v-if="state.activeIndex === index && state.useInnerLine"> + v-if="state.activeIndex === index && state.useInnerLine" + :style="{ transition: 'opacity 0.3s' }"> </view>Also applies to: 12-12, 23-23, 80-80, 84-84, 95-95
205-224: 更新激活项方法实现完善，建议小幅优化
updateActive方法实现了完整的激活项更新逻辑，包括初始化、滚动行为和状态更新。建议添加以下优化：
- 添加参数类型验证
- 考虑添加错误处理机制
const updateActive = (value: number | string = 0, init: boolean = false, setScroll: boolean = true) => { + // 验证参数类型 + if (!isNumber(value) && !isString(value)) { + console.warn('[wot-design] warning: value should be number or string') + return + } if (items.value.length === 0) return value = getActiveIndex(value) if (items.value[value].disabled) return + try { state.activeIndex = value if (setScroll) { updateLineStyle(init === false) scrollIntoView() } setActiveTab() + } catch (error) { + console.error('[wot-design] error: failed to update active tab', error) + } }
Line range hint
319-344: 建议优化下划线样式更新的性能
updateLineStyle方法的实现逻辑正确，但在频繁切换标签时可能会导致性能问题。建议考虑以下优化：
- 使用
requestAnimationFrame优化动画性能- 添加防抖处理避免频繁计算
-function updateLineStyle(animation: boolean = true) { +const updateLineStyle = debounce((animation: boolean = true) => { if (!state.inited) return const { lineWidth, lineHeight } = props getRect($item, true, proxy).then((rects) => { // ... existing code ... if (left) { - lineStyle.transform = `translateX(${left}px) translateX(-50%)` + requestAnimationFrame(() => { + lineStyle.transform = `translateX(${left}px) translateX(-50%)` + if (animation) { + lineStyle.transition = 'width 300ms ease, transform 300ms ease' + } + state.useInnerLine = false + state.lineStyle = objToStyle(lineStyle) + }) } }) -} +}, 16)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (6)
docs/component/tabs.md(2 hunks)src/pages/tabs/Index.vue(3 hunks)src/uni_modules/wot-design-uni/components/wd-tab/wd-tab.vue(3 hunks)src/uni_modules/wot-design-uni/components/wd-tabs/index.scss(2 hunks)src/uni_modules/wot-design-uni/components/wd-tabs/types.ts(2 hunks)src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue(10 hunks)
🔇 Additional comments (7)
src/uni_modules/wot-design-uni/components/wd-tabs/types.ts (1)
7-11: 状态属性定义清晰完整！
新增的状态属性定义合理，每个属性都有清晰的类型声明和注释说明，有助于代码的可维护性。
src/uni_modules/wot-design-uni/components/wd-tab/wd-tab.vue (1)
3-3: 代码优化：将内联样式迁移到计算属性中
将样式逻辑从模板移到计算属性中是一个很好的改进，这样可以提高代码的可维护性和可读性。
src/pages/tabs/Index.vue (2)
121-122: 新增状态变量定义合理
tab9 的定义遵循了组件中其他 tab 变量的命名和类型规范，实现正确。
Line range hint 77-85: 移除了 lazy-render 属性的影响
移除 lazy-render 属性可能会影响标签页的性能表现，特别是在标签数量较多的情况下。建议确认：
- 是否是有意识地移除该属性
- 对性能的潜在影响是否可接受
运行以下脚本检查其他文件中是否还在使用 lazy-render 属性：
src/uni_modules/wot-design-uni/components/wd-tabs/index.scss (1)
94-94: 添加相对定位属性以支持标签对齐功能
为nav-item添加相对定位是合理的，这样可以确保子元素（如指示器）能够正确定位。
src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue (2)
182-184: 计算属性实现正确
innerSlidable 计算属性的实现逻辑清晰，正确处理了 slidable 属性的 'always' 模式和基于 slidableNum 的条件判断。
295-296: 生命周期钩子实现正确
在 onMounted 钩子中正确初始化了 updateActive 和 useInnerLine 状态，实现逻辑合理。
1 participant
✅ Closes: #380
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
#380
💡 需求背景和解决方案
支持tabs选项左对齐，同时在开启动画时默认不对隐藏tabs项添加
display:none☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
wd-tabs组件文档，新增左对齐滚动标签功能。slidable属性，支持标签在超出可用空间时滚动。文档
slidable-num属性的描述，以明确其在slidable设置为auto时的有效性。wd-tabs组件的各种功能和用法示例。样式
wd-tabs组件的样式，以增强暗黑主题和默认主题的视觉一致性。