Skip to content

fix(ui): prompt input styling optimization #1665

@Bernardxu123

Description

@Bernardxu123

问题描述

1. 主题系统冗余

当前有 7 个主题,其中存在重复:

  • default 等同于 github-dark
  • github-dark 和 dark 非常相似
  • github-light 和 light 非常相似

2. 输入文字颜色不跟随主题切换

renderSegment 函数中,文字片段没有指定颜色,使用终端默认色,主题切换时颜色不变化。

3. 输入历史无视觉区分

使用上下箭头查看历史输入时,没有视觉提示区分新输入 vs 历史召回。


解决方案

1. 主题精简(7 → 5)

保留:dark, light, midnight(原 tokyo-night), deep-blue(新增), high-contrast
移除:default, github-dark, github-light

2. 新增 deep-blue 主题

  • 主题色:#0153e5
  • 输入框背景:#1e1e1e
  • 整体背景:#0a0a0a

3. 修复输入文字颜色

添加 color={FG.body} 到 renderSegment

4. 添加历史模式指示器

useInputRecall 添加 isHistoryMode 状态
PromptInput 显示 ↑ history 提示


文件变更

  • src/cli/ui/theme/tokens.ts
  • src/cli/ui/PromptInput.tsx
  • src/cli/ui/hooks/useInputRecall.ts
  • src/cli/ui/ComposerArea.tsx
  • src/cli/ui/App.tsx
  • tests/ (6 个测试文件更新)

测试结果

  • Lint: 通过
  • Typecheck: 通过
  • Tests: 3596 通过

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions