feat: ✨ Tabs 新增 autoLineWidth 设置底部条宽度自动同步文本内容'
#679
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
Poem
Warning Rate limit exceeded@Moonofweisheng has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 8 minutes and 10 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 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: 0
🧹 Outside diff range and nitpick comments (5)
src/pages/tabs/Index.vue (1)
113-114: 建议添加类型注解以提升代码的类型安全性为了更好的类型安全性和代码可维护性，建议为新增的响应式变量添加明确的类型注解。
建议修改如下：
-const autoLineWidthTabs = ref(['Wot', 'Design', 'Uni']) -const autoLineWidthTab = ref('Design') +const autoLineWidthTabs = ref<string[]>(['Wot', 'Design', 'Uni']) +const autoLineWidthTab = ref<string>('Design')docs/component/tabs.md (2)
60-78: 建议完善示例代码和文档说明建议进行以下改进：
- 内容区域的模板变量应该保持一致性：
- <view class="content">内容{{ tab }}</view> + <view class="content">内容{{ item }}</view>
建议补充以下说明：
- 当设置了
lineWidth属性时，auto-line-width将不生效- 文本内容过长时的处理方式
- 与其他属性（如
sticky）组合使用的效果示例代码中移除未使用的
@change事件处理器：-<wd-tabs v-model="tab" @change="handleChange" auto-line-width> +<wd-tabs v-model="tab" auto-line-width>
163-163: 建议完善属性表格说明建议扩展
autoLineWidth属性的说明，使其更加完整：-| autoLineWidth | 自动调整底部条宽度 | boolean | - | false | - | +| autoLineWidth | 自动调整底部条宽度，当设置了 lineWidth 属性时此配置无效。底部条宽度将自动适配文本内容的宽度。 | boolean | - | false | - |src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue (2)
Line range hint
312-341: 异步处理和错误处理实现良好，建议优化错误信息！代码实现了良好的异步处理和基本的错误处理，但建议做以下改进：
- 错误信息可以更具体，帮助定位问题
- 建议增加边缘情况的处理
建议按如下方式优化错误处理：
async function updateLineStyle(animation: boolean = true) { if (!state.inited) return const { autoLineWidth, lineWidth, lineHeight } = props try { const rects = await getRect($item, true, proxy) + if (!rects || !rects.length) { + throw new Error('未能获取到标签元素') + } const lineStyle: CSSProperties = {} if (isDef(lineWidth)) { lineStyle.width = addUnit(lineWidth) } else { if (autoLineWidth) { const textRects = await getRect($itemText, true, proxy) + if (!textRects || !textRects[state.activeIndex]) { + throw new Error('未能获取到活动标签的文本元素') + } const textWidth = Number(textRects[state.activeIndex].width) lineStyle.width = addUnit(textWidth) } } // ... rest of the function } catch (error) { - console.error('[wot design] error(wd-tabs): update line style failed', error) + console.error('[wot design] error(wd-tabs): 更新底部条样式失败', { + 原因: error.message, + 活动标签索引: state.activeIndex, + 自动宽度模式: autoLineWidth + }) } }
312-326: 建议优化频繁更新场景的性能！当标签频繁切换时，每次都需要重新计算文本宽度，可能会影响性能。建议考虑以下优化方案：
- 缓存文本宽度计算结果
- 使用 ResizeObserver 监听文本变化
export default { setup() { + // 缓存文本宽度 + const textWidthCache = new Map() + async function updateLineStyle(animation: boolean = true) { // ... if (autoLineWidth) { + // 检查缓存 + const cachedWidth = textWidthCache.get(state.activeIndex) + if (cachedWidth) { + lineStyle.width = addUnit(cachedWidth) + } else { const textRects = await getRect($itemText, true, proxy) const textWidth = Number(textRects[state.activeIndex].width) + // 存入缓存 + textWidthCache.set(state.activeIndex, textWidth) lineStyle.width = addUnit(textWidth) + } } // ... } } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (4)
- docs/component/tabs.md (2 hunks)
- src/pages/tabs/Index.vue (2 hunks)
- src/uni_modules/wot-design-uni/components/wd-tabs/types.ts (1 hunks)
- src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue (5 hunks)
🧰 Additional context used
🔇 Additional comments (4)
src/uni_modules/wot-design-uni/components/wd-tabs/types.ts (1)
38-41: 属性定义和文档说明清晰完整！新增的
autoLineWidth属性定义合理，文档注释详细说明了使用限制，有助于开发者理解和使用该功能。src/pages/tabs/Index.vue (1)
26-34: 示例代码结构清晰，实现合理！新增的自动调整底部条宽度示例遵循了组件文档的一致性原则，代码组织结构完整。
src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue (2)
22-22: 文本包装元素添加正确！为了支持自动宽度功能，将标签文本用
<text>元素包装是一个很好的实现方式。这样可以准确测量文本宽度，并且在粘性和非粘性模板中保持了一致性。Also applies to: 93-93
155-155: 选择器常量定义合理！新增的
$itemText常量与现有的选择器常量风格保持一致，便于维护和使用。
2 participants
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
wd-tabs组件中添加了auto-line-width属性，允许底部线条宽度根据文本内容自动调整。auto-line-width属性。文档
wd-tabs组件的文档，包含新属性autoLineWidth的说明。改进
wd-tabs组件的渲染方式，使用<text>组件替代纯文本。updateLineStyle函数以支持异步操作，增强错误处理能力。