tabs 新增 prop - shrink, 实现左侧收缩布局 #1357

GreatAuk · 2025-11-06T06:13:16Z

🤔 这个 PR 的性质是？(至少选择一个)

🔗 相关 Issue

💡 需求背景和解决方案

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项。⚠️

文档已补充或无须补充
代码演示已提供或无须提供
TypeScript 定义已补充或无须补充

Summary by CodeRabbit

发布说明

新功能
- 为标签页组件添加了收缩布局功能，提供左侧对齐的折叠布局选项。
文档
- 更新了标签页组件文档，增加了收缩布局的说明和使用示例。
- 添加了中英文本地化支持。
测试
- 新增收缩布局功能的测试用例。

vercel · 2025-11-06T06:13:21Z

@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.

coderabbitai · 2025-11-06T06:13:26Z

Walkthrough

为tabs组件引入shrink布局特性，支持左侧收缩布局。包含文档更新、国际化翻译、SCSS样式变量、组件类型定义、Vue组件实现和测试覆盖。

Changes

Cohort / File(s)	Summary
文档更新 `docs/component/tabs.md`, `docs/en-US/component/tabs.md`	新增shrink布局特性的文档说明，包括属性描述和使用示例
国际化翻译 `src/locale/en-US.json`, `src/locale/zh-CN.json`	添加"shou-suo-bu-ju"国际化翻译条目，分别对应"shrink layout"和"收缩布局"
SCSS样式变量 `src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss`	新增两个SCSS变量：`$-tabs-nav-item-padding`和`$-tabs-nav-horizontal-padding`，用于shrink布局的间距控制
组件类型定义 `src/uni_modules/wot-design-uni/components/wd-tabs/types.ts`	在tabsProps中添加shrink布尔属性，默认值为false
组件样式实现 `src/uni_modules/wot-design-uni/components/wd-tabs/index.scss`	添加shrink状态下的padding和flex样式规则
组件Vue实现 `src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue`	添加shrink条件样式绑定和is-shrink类注入逻辑
演示示例 `src/subPages/tabs/Index.vue`	新增demo-block展示shrink布局特性，添加tab11响应式状态
单元测试 `tests/components/wd-tabs.test.ts`	新增shrink功能测试用例，验证nav--shrink和is-shrink类的正确应用

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

需要重点关注的区域：
- src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue中shrink类的注入逻辑确保正确传播到所有tab项
- tests/components/wd-tabs.test.ts中存在重复的测试块，需要确认是否为意图设计还是需要去重
- SCSS变量和样式应用的一致性，确保在sticky和非sticky场景下都正确应用

Suggested reviewers

Moonofweisheng

Poem

🐰 一只兔子来编织，
标签栏要收缩布局，
左侧靠齐显优雅，
国际化翻译妙，
shrink特性上线啦！✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR标题准确反映了主要变更内容——为tabs组件新增shrink属性以实现左侧收缩布局，与代码变更完全对应。

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1c315a9 and 3cf4f9d.

📒 Files selected for processing (10)

docs/component/tabs.md (2 hunks)
docs/en-US/component/tabs.md (1 hunks)
src/locale/en-US.json (1 hunks)
src/locale/zh-CN.json (1 hunks)
src/subPages/tabs/Index.vue (2 hunks)
src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss (1 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 (1 hunks)
src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue (2 hunks)
tests/components/wd-tabs.test.ts (1 hunks)

🧰 Additional context used

🧠 Learnings (3)

📓 Common 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` 的优化不太容易实现，需谨慎处理。

📚 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:

src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue
docs/component/tabs.md
src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss
tests/components/wd-tabs.test.ts
src/subPages/tabs/Index.vue
src/uni_modules/wot-design-uni/components/wd-tabs/index.scss
docs/en-US/component/tabs.md

📚 Learning: 2024-11-26T02:35:53.123Z

Learnt from: Moonofweisheng
Repo: Moonofweisheng/wot-design-uni PR: 737
File: src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue:25-25
Timestamp: 2024-11-26T02:35:53.123Z
Learning: 在 `wd-divider.vue` 文件（路径：`src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue`）中，`props.customStyle` 是字符串类型，用于传递自定义的样式字符串。

Applied to files:

src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue

⏰ 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). (5)

GitHub Check: Test Components (common)
GitHub Check: Test Components (wd-tabs)
GitHub Check: Redirect rules - wot-design-uni
GitHub Check: Header rules - wot-design-uni
GitHub Check: Pages changed - wot-design-uni

🔇 Additional comments (15)

src/uni_modules/wot-design-uni/components/wd-tabs/types.ts (1)

84-87: shrink 属性定义正确

新增的 shrink 属性定义合理，默认值为 false，注释格式与其他属性保持一致。实现符合预期。

src/locale/en-US.json (1)

1078-1078: 国际化翻译添加正确

英文翻译 "shrink layout" 准确且简洁，翻译键与中文版本保持一致。

src/locale/zh-CN.json (1)

1078-1078: 中文翻译添加正确

"收缩布局" 的翻译准确清晰，与英文版本的翻译键保持一致。

docs/en-US/component/tabs.md (1)

190-202: 文档说明清晰完整

Shrink Layout 功能的英文文档说明清晰，代码示例完整，章节位置安排合理。

src/subPages/tabs/Index.vue (2)

141-149: 示例实现正确

新增的收缩布局示例代码结构完整，使用 shrink 属性演示功能，与文件中其他示例保持一致的风格。

205-205: 状态变量定义正确

tab11 状态变量初始化为 0，类型标注正确，用于绑定收缩布局示例的 v-model。
docs/component/tabs.md (2)
190-202: 文档说明清晰完整

收缩布局功能的中文文档说明清晰，代码示例完整，与英文文档保持一致。

277-277: 需要替换版本占位符

文档中的 $LOWEST_VERSION$ 是版本号占位符，需要替换为实际的最低版本号（如 1.4.0 或其他具体版本）。

建议修改：
-| shrink       | 是否开启左侧收缩布局                                                                        | boolean         | -        | false  | $LOWEST_VERSION$       |
+| shrink       | 是否开启左侧收缩布局                                                                        | boolean         | -        | false  | 1.4.1       |
注：请根据实际发布版本填写正确的版本号。
⛔ Skipped due to learnings
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.
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.
tests/components/wd-tabs.test.ts (1)

431-464: 测试用例完整且正确

收缩布局功能的测试用例覆盖了关键场景：

验证导航容器应用 wd-tabs__nav--shrink 类

验证所有导航项应用 is-shrink 类

测试实现遵循了文件中的现有模式，断言准确清晰。
src/uni_modules/wot-design-uni/components/wd-tabs/index.scss (2)
113-116: SCSS 变量已正确定义

变量 $-tabs-nav-item-padding 已在 src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss 第 602 行定义：
$-tabs-nav-item-padding: var(--wot-tabs-nav-item-padding, 8px) !default;
代码中的使用方式正确，无需修改。

82-84: 验证已完成，所有 SCSS 变量均已正确定义

已确认两个变量均在 src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss 中定义：

$-tabs-nav-horizontal-padding（第 607 行）：用于 shrink 布局时的 tab nav 左右间距

$-tabs-nav-item-padding（第 602 行）：用于 shrink 布局时的 nav-item 左右 padding

代码正确使用了这些变量，无需修改。
src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue (2)

9-9: 实现正确，逻辑清晰。

sticky 模式下的 shrink 布局类绑定实现正确：

wd-tabs__nav--shrink 类正确应用于导航容器

is-shrink 类正确应用于导航项

代码与非 sticky 分支保持一致，符合预期。

Also applies to: 17-19

81-81: 实现正确，与 sticky 分支保持一致。

非 sticky 模式下的实现与 sticky 模式完全对称，确保了两种模式下的行为一致性。类绑定逻辑正确，符合设计预期。

Also applies to: 89-91

src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss (2)

602-602: 变量定义正确，命名清晰。

新增的 $-tabs-nav-item-padding 变量命名准确，默认值 8px 合理，符合现有的变量定义规范。注释清楚说明了其在 shrink 布局中的用途。

607-607: 变量定义正确，默认值合理。

新增的 $-tabs-nav-horizontal-padding 变量定义符合规范，12px 的默认值大于 nav-item 的 8px padding，这种层级差异是合理的设计。注释准确描述了变量的用途。

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

netlify · 2025-11-06T06:14:26Z

✅ Deploy Preview for wot-design-uni ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`3cf4f9d`
🔍 Latest deploy log	https://app.netlify.com/projects/wot-design-uni/deploys/690c3c7e3df5b1000870a150
😎 Deploy Preview	https://deploy-preview-1357--wot-design-uni.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

GreatAuk · 2025-11-13T05:45:42Z

@Moonofweisheng 不接受 pr ?

GreatAuk added 3 commits November 6, 2025 13:49

feat(tabs): 新增 prop shrink, 实现左侧收缩布局

79ef98c

docs(tabs): 新增关于 prop-shrink 的文档

da5a84d

test(tabs): 新增关于 prop-shrink 的 uni test

3cf4f9d

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

tabs 新增 prop - shrink, 实现左侧收缩布局 #1357

tabs 新增 prop - shrink, 实现左侧收缩布局 #1357

Uh oh!

GreatAuk commented Nov 6, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

vercel bot commented Nov 6, 2025

Uh oh!

coderabbitai bot commented Nov 6, 2025 •

edited

Loading

Uh oh!

netlify bot commented Nov 6, 2025 •

edited

Loading

Uh oh!

GreatAuk commented Nov 13, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

tabs 新增 prop - shrink, 实现左侧收缩布局 #1357

Are you sure you want to change the base?

tabs 新增 prop - shrink, 实现左侧收缩布局 #1357

Uh oh!

Conversation

GreatAuk commented Nov 6, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🤔 这个 PR 的性质是？(至少选择一个)

🔗 相关 Issue

💡 需求背景和解决方案

☑️ 请求合并前的自查清单

Summary by CodeRabbit

发布说明

Uh oh!

vercel bot commented Nov 6, 2025

Uh oh!

coderabbitai bot commented Nov 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Suggested reviewers

Poem

Pre-merge checks and finishing touches

Uh oh!

netlify bot commented Nov 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for wot-design-uni ready!

Uh oh!

GreatAuk commented Nov 13, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

GreatAuk commented Nov 6, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Nov 6, 2025 •

edited

Loading

netlify bot commented Nov 6, 2025 •

edited

Loading