Skip to content

fix(terminal): 修复浅色模式下连接服务器时底部命令输入框深色闪烁的问题 - #303

Merged
wmwlwmwl merged 1 commit into
wmwlwmwl:mainfrom
bamboostrip:fix/light-theme-command-bar-flash
Aug 31, 2026
Merged

fix(terminal): 修复浅色模式下连接服务器时底部命令输入框深色闪烁的问题#303
wmwlwmwl merged 1 commit into
wmwlwmwl:mainfrom
bamboostrip:fix/light-theme-command-bar-flash

Conversation

@bamboostrip

@bamboostrip bamboostrip commented Aug 31, 2026

Copy link
Copy Markdown
Collaborator

问题背景与原因

在浅色模式下新建连接并进入终端时,底部的命令输入框及相关容器元素会在连接初期闪现深色样式,随后才变为浅色:

  1. CSS 变量兜底缺失浅色规则xterm.css 中仅在 :root 定义了深色主题的 --term-* 默认值,缺少 body.theme-light 对应的浅色变量兜底。
  2. 异步 useEffect 引起首帧延迟useTerminalTheme 中通过 useEffect 在组件挂载后异步向 wrapperRef 注入 CSS 变量,导致浏览器在首帧绘制时回退到了 :root 的深色变量,随后变量更新触发过渡动画造成明显闪烁。
  3. 全局主题变量同步缺失终端变量applyStoredThemePackage 未向 document.body 注入终端相关的全局 CSS 变量。

修复方案

  1. 补全浅色主题 CSS 变量兜底:在 xterm.css 中补充 body.theme-light 作用域下的 --term-* 变量。
  2. 同步注入容器样式:在 useTerminalTheme 中通过 useMemo 计算 terminalContainerStyle,并在 Terminal.tsx 根容器直接绑定 style={terminalContainerStyle},确保挂载首帧即带有正确的主题变量。
  3. 全局主题同步支持:在 theme.tsapplyComponentThemeVariablesTHEME_COMPONENT_CSS_VARS 中同步管理终端容器变量。

Summary by CodeRabbit

  • 新功能
    • 优化终端主题样式,支持背景、状态栏、输入区、按钮、菜单、边框、阴影及滚动条等区域的动态配色。
    • 新增浅色主题下的终端配色与输入占位符样式。
    • 终端容器可根据当前主题即时应用样式,减少初始显示时的主题闪烁。

@coderabbitai

coderabbitai Bot commented Aug 31, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: d7c5460f-34d5-4948-8cee-64fa4e730fee

📥 Commits

Reviewing files that changed from the base of the PR and between 79fad77 and 7fa3d21.

📒 Files selected for processing (4)
  • frontend/src/components/Terminal.tsx
  • frontend/src/components/terminal/useTerminalTheme.ts
  • frontend/src/styles/vendor/xterm.css
  • frontend/src/utils/theme.ts

Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review.


📝 Walkthrough

Walkthrough

终端主题 Hook 新增容器样式对象。主题配置会映射为 CSS 变量,并应用到终端最外层容器。xterm 样式新增默认变量和浅色主题覆盖。

Changes

终端主题

Layer / File(s) Summary
终端 CSS 变量与主题映射
frontend/src/utils/theme.ts, frontend/src/styles/vendor/xterm.css
新增终端容器、状态栏、输入区域、按钮、分隔线、上下文菜单和滚动条相关变量。缺失值使用默认回退。
终端容器样式应用
frontend/src/components/terminal/useTerminalTheme.ts, frontend/src/components/Terminal.tsx
useTerminalTheme 返回基于 T.container 的 memoized 样式对象。Terminal 将该对象应用到最外层容器。

Estimated code review effort: 2 (Simple) | ~10 minutes

Merge Risk: ⚪ Minimal · up to 7fa3d

This localized theme-rendering fix has no actionable merge-blocking risk remaining and is merge-ready after normal checks and review.

Suggested reviewers: wmwlwmwl

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 66.67% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 3 functions across 3 files. (1 skipped: 1… Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 标题准确概括了主要变更:修复浅色模式下连接服务器时底部命令输入框短暂显示深色样式的问题。
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Full details: Docstring Coverage

Explanation

Docstring coverage is 66.67% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 3 functions across 3 files. (1 skipped: 1 unsupported.)

  • ❌ Autofix failed (check again to retry)
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Comment @coderabbitai help to get the list of available commands.

@coderabbitai

coderabbitai Bot commented Aug 31, 2026

Copy link
Copy Markdown

An unexpected error occurred while generating fixes: Not Found - https://docs.github.com/rest/git/refs#get-a-reference

@wmwlwmwl
wmwlwmwl merged commit c636e16 into wmwlwmwl:main Aug 31, 2026
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants