Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Conversation

erha19
Copy link
Member

@erha19 erha19 commented May 14, 2025

Types

  • 💄 Style Changes

Background or solution

After:
image

Changelog

improve terminal tab style

Summary by CodeRabbit

  • 样式
    • 优化了设计项和选中标签的样式,移除部分边框和伪元素,新增渐变装饰效果,并调整最小宽度和边距,使界面更美观。
    • 调整了滚动条装饰的位置属性,提升视觉表现一致性。
  • 性能优化
    • 提升了标签页分组渲染性能,减少不必要的重复计算。

Copy link
Contributor

coderabbitai bot commented May 14, 2025

## 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

  • style: fix editor tabbar style #3967: 该 PR 也修改了 design.module.less 文件中与 tab 样式相关的部分,但主要是移除 top 属性,和本 PR 一样关注于 tab 样式调整,具体实现细节不同。

Suggested reviewers

  • Ricbet
  • hacke2

<!-- walkthrough_end -->
<!-- This is an auto-generated comment: all tool run failures by coderabbit.ai -->

> [!WARNING]
> There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.
> 
> <details>
> <summary>🔧 ESLint</summary>
> 
> > If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.
> 
> yarn install v1.22.22
> [1/4] Resolving packages...
> warning [email protected]: This version is no longer supported. Please see https://eslint.org/version-support for other options.
> warning eslint > @humanwhocodes/[email protected]: Use @eslint/config-array instead
> warning eslint > @humanwhocodes/config-array > @humanwhocodes/[email protected]: Use @eslint/object-schema instead
> warning eslint > file-entry-cache > flat-cache > [email protected]: Rimraf versions prior to v4 are no longer supported
> warning eslint > file-entry-cache > flat-cache > rimraf > [email protected]: Glob versions prior to v9 are no longer supported
> warning eslint > file-entry-cache > flat-cache > rimraf > glob > [email protected]: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
> warning eslint-import-resolver-typescript > [email protected]: Glob versions prior to v9 are no longer supported
> error Couldn't find any versions for "@opensumi/ide-dev-tool" that matches "workspace:*"
> info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
> 
> 
> 
> </details>

<!-- end of auto-generated comment: all tool run failures by coderabbit.ai -->

<!-- announcements_start -->

> [!TIP]
> <details>
> <summary>⚡️ Faster reviews with caching</summary>
> 
> - CodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure `Review - Disable Cache` at either the organization or repository level. If you prefer to disable all data retention across your organization, simply turn off the `Data Retention` setting under your Organization Settings.
> 
> Enjoy the performance boost—your workflow just got faster.
> 
> </details>

<!-- announcements_end -->

---

<details>
<summary>📜 Recent review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 5acf704980b866f4072f113a101e8e5aac6b34e6 and 7da75530f3b7e728d99902979a24e3538f1da6fc.

</details>

<details>
<summary>📒 Files selected for processing (3)</summary>

* `packages/components/src/scrollbars/styles.less` (2 hunks)
* `packages/design/src/browser/style/design.module.less` (2 hunks)
* `packages/terminal-next/src/browser/component/tab.view.tsx` (3 hunks)

</details>

<details>
<summary>✅ Files skipped from review due to trivial changes (1)</summary>

* packages/components/src/scrollbars/styles.less

</details>

<details>
<summary>🚧 Files skipped from review as they are similar to previous changes (2)</summary>

* packages/terminal-next/src/browser/component/tab.view.tsx
* packages/design/src/browser/style/design.module.less

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (8)</summary>

* GitHub Check: unittest (ubuntu-latest, 18.x, node)
* GitHub Check: unittest (macos-latest, 18.x, jsdom)
* GitHub Check: unittest (ubuntu-latest, 18.x, jsdom)
* GitHub Check: unittest (macos-latest, 18.x, node)
* GitHub Check: ubuntu-latest, Node.js 20.x
* GitHub Check: build (macos-latest, 20.x)
* GitHub Check: build (ubuntu-latest, 20.x)
* GitHub Check: build-windows

</details>

</details>
<!-- internal state start -->


<!-- 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 -->

<!-- internal state end -->
<!-- finishing_touch_checkbox_start -->

<details open="true">
<summary>✨ Finishing Touches</summary>

- [ ] <!-- {"checkboxId": "7962f53c-55bc-4827-bfbf-6a18da830691"} --> 📝 Generate Docstrings

</details>

<!-- finishing_touch_checkbox_end -->
<!-- tips_start -->

---

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.

<details>
<summary>❤️ Share</summary>

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai)
- [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai)
- [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai)
- [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

</details>

<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=opensumi/core&utm_content=4551):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Explain this complex logic.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai explain this code block.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and explain its main purpose.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

### Support

Need help? Create a ticket on our [support page](https://www.coderabbit.ai/contact-us/support) 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)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai generate sequence diagram` to generate a sequence diagram of the changes in this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### CodeRabbit Configuration File (`.coderabbit.yaml`)

- You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository.
- Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json`

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->

Copy link

codecov bot commented May 14, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 52.88%. Comparing base (0d8a0cd) to head (87aab7d).
Report is 2 commits behind head on main.

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     
Flag Coverage Δ
jsdom 48.39% <ø> (+<0.01%) ⬆️
node 12.06% <ø> (+<0.01%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@erha19
Copy link
Member Author

erha19 commented May 15, 2025

/next

@opensumi
Copy link
Contributor

opensumi bot commented May 15, 2025

🎉 PR Next publish successful!

3.8.3-next-1747273183.0

@Aaaaash Aaaaash merged commit 30a6932 into main May 15, 2025
12 checks passed
@Aaaaash Aaaaash deleted the style/improve-design-terminal-style branch May 15, 2025 02:06
@erha19 erha19 mentioned this pull request May 20, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants