为 tabs 新增 slot nav-left & nav-right#1358
Open
GreatAuk wants to merge 3 commits intoMoonofweisheng:masterfrom
Open
为 tabs 新增 slot nav-left & nav-right#1358GreatAuk wants to merge 3 commits intoMoonofweisheng:masterfrom
GreatAuk wants to merge 3 commits intoMoonofweisheng:masterfrom
Conversation
✅ Deploy Preview for wot-design-uni ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
@GreatAuk is attempting to deploy a commit to the weisheng's projects Team on Vercel. A member of the Team first needs to authorize it. |
概览此改动向 Tabs 组件添加了 改动
时序图sequenceDiagram
participant User as 用户
participant Tabs as Tabs 组件
participant Slot as 插槽（nav-left/right）
User->>Tabs: 点击标签项
Tabs->>Tabs: 计算新的下划线位置<br/>previousItemsWidth + firstItemLeft<br/>+ 当前项宽度/2
Tabs->>Tabs: 更新下划线平移距离
Note over Tabs: 新增：导航左/右插槽<br/>支持自定义内容
Slot-->>Tabs: 渲染自定义导航区域
Tabs-->>User: 显示新位置的下划线<br/>与自定义导航区
代码审查工作量估计🎯 3 (中等复杂度) | ⏱️ ~25 分钟 需要重点关注的区域：
可能相关的 PR
建议审查者
诗歌
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ 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 (1)
tests/components/wd-tabs.test.ts (1)
71-134: 建议增加更全面的测试覆盖当前测试验证了插槽内容能够正确渲染，这是很好的基础测试。建议补充以下测试用例以提高覆盖率：
- 下划线在使用插槽时的位置是否正确
- 使用插槽时的滚动行为是否正常
- sticky 模式下插槽是否正常工作
- 切换标签时插槽内容保持不变
示例测试用例：
test('使用插槽时下划线位置正确', async () => { const wrapper = mount( { template: ` <wd-tabs v-model="activeTab"> <template #nav-left> <view style="width: 50px;">左侧</view> </template> <wd-tab title="标签1">内容1</wd-tab> <wd-tab title="标签2">内容2</wd-tab> </wd-tabs> `, data() { return { activeTab: 0 } } }, { global: { components: globalComponents } } ) await nextTick() // 验证下划线样式包含 transform 属性 const line = wrapper.find('.wd-tabs__line') expect(line.attributes('style')).toContain('transform') })
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
docs/component/tabs.md(2 hunks)src/locale/en-US.json(1 hunks)src/locale/zh-CN.json(1 hunks)src/subPages/tabs/Index.vue(3 hunks)src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue(5 hunks)tests/components/wd-tabs.test.ts(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2024-11-24T06:12:44.418Z
Learnt from: Moonofweisheng
Repo: Moonofweisheng/wot-design-uni PR: 733
File: src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue:327-327
Timestamp: 2024-11-24T06:12:44.418Z
Learning: 在 `src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue` 中，由于 `title` 可能会发生变化，涉及到 `title` 的优化不太容易实现，需谨慎处理。
Applied to files:
tests/components/wd-tabs.test.tssrc/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vuedocs/component/tabs.mdsrc/subPages/tabs/Index.vue
🪛 markdownlint-cli2 (0.18.1)
docs/component/tabs.md
338-338: Tables should be surrounded by blank lines
(MD058, blanks-around-tables)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Generate Test Summary
🔇 Additional comments (8)
src/locale/en-US.json (1)
212-212: LGTM!新增的国际化翻译条目格式正确，翻译准确，符合项目规范。
src/locale/zh-CN.json (1)
211-211: LGTM!中文翻译准确，与英文翻译键一致。
src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue (2)
13-13: 插槽位置需确认
nav-left插槽被放置在scroll-view内部，这意味着当标签数量较多需要滚动时，左侧插槽内容也会随之滚动。请确认这是否为预期行为：
- 如果左侧内容应该始终可见（如筛选按钮），建议将插槽移到
scroll-view外部- 如果左侧内容应该随标签一起滚动，则当前实现正确
相同的问题也适用于第 28 行（sticky 模式）、第 85 行和第 99 行（非 sticky 模式）的
nav-right插槽。
333-337: 验证下划线位置计算在插槽场景中的表现代码逻辑本身正确。新的计算方式通过
rects[0]?.left自动适配导航插槽：当 nav-left 插槽存在时，第一个标签的 left 值会自动包含插槽宽度；当无插槽时为 0。但是，当前测试用例缺乏下划线位置相关的验证，建议在以下场景中手动验证下划线位置准确性：
- 没有使用插槽时
- 只使用 nav-left 插槽时
- 只使用 nav-right 插槽时
- 同时使用两个插槽时
特别注意：在 title 或插槽内容动态变化时，确保
updateLineStyle正确更新位置。docs/component/tabs.md (2)
204-237: LGTM!插槽演示文档清晰完整，示例代码易于理解，SCSS 样式也包含在内，便于开发者参考使用。
337-342: 需要替换版本占位符并修复格式问题存在两个需要修复的问题：
版本占位符：第 340-341 行使用了
$LOWEST_VERSION$占位符，需要替换为实际的版本号（如1.4.1或其他合适的版本号）Markdown 格式：根据 markdownlint 提示，表格前后需要空行。建议在第 337 行之前和第 342 行之后各添加一个空行。
应用以下修改：
+ ## Tabs Slots | name | 说明 | 参数 | 最低版本 | | ------ | -------------------- | ----------------------- | -------- | -| nav-left | 标签栏左侧内容 | - | $LOWEST_VERSION$ | -| nav-right | 标签栏右侧内容 | - | $LOWEST_VERSION$ | +| nav-left | 标签栏左侧内容 | - | 1.4.1 | +| nav-right | 标签栏右侧内容 | - | 1.4.1 | +⛔ Skipped due to learnings
Learnt from: Moonofweisheng Repo: Moonofweisheng/wot-design-uni PR: 733 File: src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue:327-327 Timestamp: 2024-11-24T06:12:44.418Z Learning: 在 `src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue` 中，由于 `title` 可能会发生变化，涉及到 `title` 的优化不太容易实现，需谨慎处理。Learnt from: chen-ziwen Repo: Moonofweisheng/wot-design-uni PR: 910 File: docs/component/input-number.md:155-155 Timestamp: 2025-02-20T13:33:37.038Z Learning: Documentation files in wot-design-uni use `$LOWEST_VERSION$` as a placeholder that gets automatically replaced with the actual version number during the release process. These placeholders should not be flagged as issues.Learnt from: chen-ziwen Repo: Moonofweisheng/wot-design-uni PR: 909 File: docs/component/input-number.md:155-155 Timestamp: 2025-02-20T05:58:07.379Z Learning: In documentation files, `$LOWEST_VERSION$` placeholder is automatically replaced with the actual version number during the release process, and should not be manually updated.src/subPages/tabs/Index.vue (2)
126-144: LGTM!插槽演示实现清晰，使用了有意义的图标（筛选和添加），能够很好地展示导航插槽的实际应用场景。与其他演示的集成也很流畅。
261-268: LGTM!
.tab-nav-slot样式实现合理：
- 使用
align-self: stretch使插槽区域垂直填充flex-shrink: 0防止插槽内容被压缩inline-flex和居中对齐确保图标正确显示样式设计考虑周到。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
发布说明
New Features
nav-left和nav-right插槽，支持在导航区域左右两侧自定义内容。Documentation
Tests