fix(terminal): 修复浅色模式下连接服务器时底部命令输入框深色闪烁的问题 - #303
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Plus Run ID: 📒 Files selected for processing (4)
Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review. 📝 WalkthroughWalkthrough终端主题 Hook 新增容器样式对象。主题配置会映射为 CSS 变量,并应用到终端最外层容器。xterm 样式新增默认变量和浅色主题覆盖。 Changes终端主题
Estimated code review effort: 2 (Simple) | ~10 minutes Merge Risk: ⚪ Minimal · up to This localized theme-rendering fix has no actionable merge-blocking risk remaining and is merge-ready after normal checks and review. Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
Full details: Docstring CoverageExplanation 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.)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
|
An unexpected error occurred while generating fixes: Not Found - https://docs.github.com/rest/git/refs#get-a-reference |
问题背景与原因
在浅色模式下新建连接并进入终端时,底部的命令输入框及相关容器元素会在连接初期闪现深色样式,随后才变为浅色:
xterm.css中仅在:root定义了深色主题的--term-*默认值,缺少body.theme-light对应的浅色变量兜底。useEffect引起首帧延迟:useTerminalTheme中通过useEffect在组件挂载后异步向wrapperRef注入 CSS 变量,导致浏览器在首帧绘制时回退到了:root的深色变量,随后变量更新触发过渡动画造成明显闪烁。applyStoredThemePackage未向document.body注入终端相关的全局 CSS 变量。修复方案
xterm.css中补充body.theme-light作用域下的--term-*变量。useTerminalTheme中通过useMemo计算terminalContainerStyle,并在Terminal.tsx根容器直接绑定style={terminalContainerStyle},确保挂载首帧即带有正确的主题变量。theme.ts的applyComponentThemeVariables与THEME_COMPONENT_CSS_VARS中同步管理终端容器变量。Summary by CodeRabbit