fix(Table): 给个默认背景色，解决在小程序中固定列与滚动内列混合 #2789
Conversation
Walkthrough此次更改主要集中在 Changes
Possibly related PRs
Suggested labels
Suggested reviewers
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 (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## next #2789 +/- ##
=======================================
Coverage 84.07% 84.07%
=======================================
Files 217 217
Lines 17830 17830
Branches 2609 2609
=======================================
Hits 14991 14991
Misses 2834 2834
Partials 5 5 ☔ View full report in Codecov by Sentry. |
![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 (3)
src/packages/table/table.scss (3)
77-77: 背景色设置符合需求！添加白色背景色确实能解决固定列与内部可滚动列的视觉混淆问题。不过建议考虑使用 SCSS 变量来定义这个背景色值，以便于后续主题定制。
建议将背景色改为使用变量：
- background-color: #fff; + background-color: $table-fixed-column-bg-color;然后在变量文件中定义：
$table-fixed-column-bg-color: #fff !default;
77-77: 建议增加暗黑模式支持当前的白色背景在暗黑模式下可能会显得突兀，建议添加对应的暗黑模式样式。
建议在暗黑模式的样式文件中添加：
.nut-theme-dark { .nut-table-main-head-tr-th { &.nut-table-fixed-left, &.nut-table-fixed-right { background-color: $dark-background-color; } } }
76-78: 建议优化 z-index 管理当前固定列的 z-index 值是硬编码的。为了更好的维护性，建议将所有 z-index 值统一使用 SCSS 变量管理。
建议创建以下变量：
// z-index hierarchy $table-fixed-column-z-index: 4; $table-sticky-shadow-z-index: 3; $table-fixed-cell-z-index: 2;然后更新相应的样式：
- z-index: 4; + z-index: $table-fixed-column-z-index;
🤔 这个变动的性质是？
🔗 相关 Issue
#2763
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
.nut-table-main-head类中固定左侧和右侧表头单元格的背景颜色。