mirror of https://github.com/QwenLM/qwen-code.git synced 2025-12-20 08:47:44 +00:00

Files

yiliang114 732220e651 wip(vscode-ide-companion): 实现 quick win 功能

- 将 WebView 调整到编辑器右侧
- 添加 ChatHeader 组件，实现会话下拉菜单
- 替换模态框为紧凑型下拉菜单
- 更新会话切换逻辑，显示当前标题
- 清理旧的会话选择器样式
基于 Claude Code v2.0.43 UI 分析实现。

2025-11-19 00:16:45 +08:00

5.9 KiB

Raw Blame History

Claude Code UI 还原实现

概述

本文档记录了如何将 Claude Code VSCode 扩展的 Webview UI 设计还原到我们的 Qwen Code VSCode IDE Companion 项目中。

分析的源 HTML 结构

从 Claude Code VSCode 扩展的 webview HTML 中，我们识别出以下关键组件：

1. 顶部导航栏 (`.he`)

Past Conversations 按钮 (.E) - 带下拉箭头的会话列表按钮
New Session 按钮 (.j) - 创建新会话的加号按钮
使用了 ghost button 风格，hover 时有背景色变化

2. 中间内容区域

空状态界面 - 当没有消息时显示
- Qwen Logo (SVG)
- 欢迎文本："What to do first? Ask about this codebase or we can start writing code."
- 横幅提示："Prefer the Terminal experience? Switch back in Settings."

3. 底部输入区域 (`.u`)

可编辑的 contenteditable div - 替代传统的 textarea
- placeholder: "Ask Claude to edit…"
- 支持多行输入
操作按钮行 (.ri)
- "Ask before edits" 按钮 (.l) - 编辑模式选择
- Thinking 开关按钮 (.H.ni)
- 命令菜单按钮
- 发送按钮 (.r)

实现的组件

1. EmptyState 组件

文件: src/webview/components/EmptyState.tsx, EmptyState.css

功能:

显示 Qwen Logo (使用现有的 SVG)
显示欢迎文本
显示横幅提示（可关闭）
响应式布局

关键样式:

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 40px 20px;
}

2. 更新的 Header

改动: src/webview/App.tsx, App.css

变更:

将 select 下拉框改为 "Past Conversations" 按钮
按钮样式遵循 Claude Code 的 ghost button 设计
使用 flex 布局，左对齐按钮，右侧 spacer，最右侧新建按钮

类名:

.header-conversations-button - 会话列表按钮
.header-spacer - flex spacer
.new-session-header-button - 新建会话按钮

3. 重新设计的输入表单

改动: src/webview/App.tsx, App.css

变更:

使用 contenteditable div 替代 <input> 或 <textarea>
添加操作按钮行：
- Edit Mode 按钮
- Thinking 开关
- 命令菜单按钮
- 发送按钮
使用分隔线分隔按钮组

类名:

.input-wrapper - 输入区域容器
.input-field-editable - contenteditable div
.input-actions - 操作按钮行
.action-button - 带文本的按钮
.action-icon-button - 只有图标的按钮
.action-divider - 分隔线
.send-button-icon - 发送按钮

4. 更新的 CSS 变量

在 App.css 中添加/更新的变量：

--app-transparent-inner-border: rgba(255, 255, 255, 0.1);
--app-ghost-button-hover-background: var(--vscode-toolbar-hoverBackground);

关键设计决策

1. Logo 选择

使用 Qwen 现有的像素风格 logo SVG
颜色: #D97757 (橙色)
保持了品牌一致性

2. 输入框实现

选用 contenteditable="plaintext-only" 而不是 textarea
- 更好的控制样式
- 支持动态高度
- 与 Claude Code 一致的体验

3. 按钮风格

全部使用 ghost button 风格
hover 时使用 VSCode 的 toolbar-hoverBackground 颜色
保持了 VSCode 原生的视觉感受

4. 空状态显示逻辑

const hasContent =
  messages.length > 0 ||
  isStreaming ||
  toolCalls.size > 0 ||
  permissionRequest !== null;

只有在没有任何内容时才显示空状态界面。

文件变更清单

新增文件

src/webview/components/EmptyState.tsx - 空状态组件
src/webview/components/EmptyState.css - 空状态样式
docs-tmp/CLAUDE_CODE_UI_IMPLEMENTATION.md - 本文档

修改文件

src/webview/App.tsx
- 导入 EmptyState 组件
- 重构 header 为 Claude Code 风格
- 重构输入表单为 contenteditable + 操作按钮
- 添加 hasContent 逻辑判断
src/webview/App.css
- 添加 header 按钮样式
- 添加 contenteditable 输入框样式
- 添加操作按钮样式
- 更新 CSS 变量

样式映射表

Claude Code 类名	我们的类名	用途
`.he`	`.chat-header`	顶部导航栏
`.E`	`.header-conversations-button`	会话列表按钮
`.j`	`.new-session-header-button`	新建会话按钮
`.Q`	`.messages-container`	消息容器
`.u`	`.input-form`	输入表单
`.fo`	`.input-wrapper`	输入框包装器
`.d`	`.input-field-editable`	可编辑输入框
`.ri`	`.input-actions`	操作按钮行
`.l`	`.action-button`	带文本的操作按钮
`.H`	`.action-icon-button`	图标按钮
`.r`	`.send-button-icon`	发送按钮

未来改进

Banner 关闭功能 - 实现横幅的可关闭逻辑并保存状态
Edit Mode 切换 - 实现编辑模式切换功能
Thinking 开关 - 实现 thinking 显示开关
命令菜单 - 实现斜杠命令菜单
响应式优化 - 针对更小的窗口尺寸优化布局

构建验证

npm run build

构建成功，没有 TypeScript 或 ESLint 错误。

截图对比

(建议添加截图展示还原前后的对比)

总结

成功将 Claude Code 的 webview UI 设计还原到 Qwen Code VSCode IDE Companion 项目中，主要改进包括：

✅ 更现代的空状态界面
✅ 更直观的 header 导航
✅ 更强大的输入框体验
✅ 更清晰的操作按钮布局
✅ 保持了 VSCode 原生风格

整体 UI 更加专业、现代，用户体验得到显著提升。

5.9 KiB Raw Blame History Unescape Escape