feat: ✨ 将 Tabbar 和 Badge 设置为标准盒子模型#1036
Conversation
Deploying wot-design-uni with
|
| Latest commit: |
2f53145
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://75f4f1ae.wot-design-uni.pages.dev |
| Branch Preview URL: | https://fix-tabbar-box-model.wot-design-uni.pages.dev |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough本次变更主要涉及前端项目的代码风格和样式优化。更新了 ESLint 配置以强制类型导入一致性，移除了部分开发依赖，调整了部分 TypeScript 类型导入语法，并在若干 SCSS 文件中为特定元素添加了 Changes
Poem
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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. |
Walkthrough此PR将Tabbar和Badge组件设置为标准盒子模型，调整了相关样式以确保一致性。此外，更新了TypeScript的导入方式以提高代码一致性。 Changes
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
|
|
||
| @include e(content) { | ||
| display: inline-block; | ||
| box-sizing: content-box; |
There was a problem hiding this comment.
Ensure that setting box-sizing: content-box; does not break existing layout expectations, as this change can affect the sizing of elements.
| height: $-tabbar-height; | ||
|
|
||
| @include e(placeholder) { | ||
| box-sizing: content-box; |
There was a problem hiding this comment.
Ensure that setting box-sizing: content-box; does not break existing layout expectations, as this change can affect the sizing of elements.
|
|
||
| @include when(fixed) { | ||
| @include when(safe) { | ||
| box-sizing: content-box; |
There was a problem hiding this comment.
Ensure that setting box-sizing: content-box; does not break existing layout expectations, as this change can affect the sizing of elements.
![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 (4)
.eslintrc.js (1)
40-40: 确认禁用多单词组件名称规则
已将vue/multi-word-component-names全局关闭。若仅在部分目录需要关闭，建议使用注释或覆盖配置以免影响整个项目。src/uni_modules/wot-design-uni/components/wd-badge/index.scss (1)
20-20: 建议添加注释说明此处覆写 box-sizing
box-sizing: content-box是浏览器的默认值，仅当全局样式将盒模型统一设为border-box时才需要显式覆盖。建议在此处添加注释，说明为什么要强制将盒模型设置为content-box，以便后续维护时能快速理解此处覆写的原因。src/uni_modules/wot-design-uni/components/wd-tabbar/index.scss (2)
19-19: 建议添加注释说明此处覆写 box-sizing在
.tabbar__placeholder中显式设置box-sizing: content-box目的是覆盖项目全局可能的border-box配置。请在此处补充注释，说明为何要覆写盒模型，以提升样式可读性和可维护性。
43-43: 建议添加注释说明此处覆写 box-sizing在
.tabbar--default的fixed + safe情况下再次覆写box-sizing，建议补充注释解释此处覆盖的必要性，避免后续修改时误删该声明。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (6)
.eslintrc.js(2 hunks)package.json(0 hunks)src/env.d.ts(1 hunks)src/pages/configProvider/Index.vue(1 hunks)src/uni_modules/wot-design-uni/components/wd-badge/index.scss(1 hunks)src/uni_modules/wot-design-uni/components/wd-tabbar/index.scss(2 hunks)
💤 Files with no reviewable changes (1)
- package.json
⏰ Context from checks skipped due to timeout of 90000ms (5)
- GitHub Check: Redirect rules - wot-design-uni
- GitHub Check: Header rules - wot-design-uni
- GitHub Check: Pages changed - wot-design-uni
- GitHub Check: ESLint Check
- GitHub Check: Cloudflare Pages
🔇 Additional comments (4)
.eslintrc.js (2)
4-7: 此处仅为头部注释更新，无需更改。
41-48: 启用一致的类型导入
新增的@typescript-eslint/consistent-type-imports规则可显著提高类型导入的一致性，并结合inline-type-imports便于自动修复。src/pages/configProvider/Index.vue (1)
124-124: 使用type关键字进行类型导入
已将Action标记为类型导入，符合新的 ESLint 配置，建议同步更新其余纯类型导入至该风格以保持一致。src/env.d.ts (1)
13-13: 统一类型导入DefineComponent
将DefineComponent改为类型导入语法，确保与 ESLintconsistent-type-imports规则一致，提升可读性和维护性。
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
❗ Your organization needs to install the Codecov GitHub app to enable full functionality. Additional details and impacted files@@ Coverage Diff @@
## master #1036 +/- ##
==========================================
+ Coverage 84.83% 91.05% +6.21%
==========================================
Files 215 10 -205
Lines 17277 380 -16897
Branches 2747 61 -2686
==========================================
- Hits 14657 346 -14311
+ Misses 2620 34 -2586 Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
组件测试摘要 (H5 平台)测试时间: Tue May 6 14:08:29 UTC 2025测试结果
|
2 participants
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
#705 #536
💡 需求背景和解决方案
将 Tabbar 和 Badge 设置为标准盒子模型
☑️ 请求合并前的自查清单
Summary by CodeRabbit
样式
杂项