-
Notifications
You must be signed in to change notification settings - Fork 433
style: improve terminal tab style #4551
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
+49
−29
Conversation
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
## Walkthrough
本次变更主要涉及对设计模块的样式调整和终端组件中列表过滤逻辑的优化。设计样式部分调整了容器和选中标签的装饰性伪元素及边框,终端组件部分通过 useMemo 优化了 groups 的过滤操作,避免重复计算。此外,滚动条装饰样式的定位方式也由 fixed 改为 absolute。
## Changes
| 文件/文件组 | 变更摘要 |
|----------------------------------------------------------------------------|------------------------------------------------------------------|
| packages/design/src/browser/style/design.module.less | 移除了 `.design-item_container` 的边框和伪元素样式,调整了最小宽度;大幅重构 `.design-tab_item_selected` 的伪元素装饰,新增渐变背景,调整圆角和布局;修改 `.design-tab_contents` 下首个子项的左边框。|
| packages/terminal-next/src/browser/component/tab.view.tsx | 引入 useMemo,对 groups 进行缓存过滤,优化渲染性能,避免每次渲染重复过滤;tabs 容器样式引用改为新的样式钩子。|
| packages/components/src/scrollbars/styles.less | 修改滚动条装饰 `.scrollbar-decoration-vertical` 和 `.scrollbar-decoration-horizontal` 定位方式由 fixed 改为 absolute,调整垂直装饰的定位从 top 变为 bottom。|
## Sequence Diagram(s)
```mermaid
sequenceDiagram
participant ReactComponent as TabView (终端组件)
participant React as React
ReactComponent->>React: useMemo 过滤 groups
React-->>ReactComponent: 返回 visibleGroups
ReactComponent->>ReactComponent: 渲染 visibleGroups Possibly related PRs
Suggested reviewers
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #4551 +/- ##
=======================================
Coverage 52.87% 52.88%
=======================================
Files 1677 1677
Lines 103356 103358 +2
Branches 22390 22390
=======================================
+ Hits 54654 54665 +11
+ Misses 40520 40512 -8
+ Partials 8182 8181 -1
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:
|
/next |
🎉 PR Next publish successful! 3.8.3-next-1747273183.0 |
Aaaaash
approved these changes
May 15, 2025
Ricbet
approved these changes
May 15, 2025
Ricbet
approved these changes
May 15, 2025
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Types
Background or solution
After:

Changelog
improve terminal tab style
Summary by CodeRabbit