feat: keybar function captions + Ctrl+R/L/D, plus ⌨ shortcut cheat-sheet
keybar: - add Ctrl+R (搜历史/\x12), Ctrl+L (重绘/\x0c), Ctrl+D (退出/\x04) - each key now shows a short function caption under the glyph (self-documenting on touch where tooltips don't appear); 17 keys total - test/keybar.test.ts updated to 17 keys cheat-sheet (new public/shortcuts.ts): - ⌨ toolbar button opens a grouped reference of common Claude Code shortcuts (general / editing / multiline / macOS / prefixes), each labeled with what it does; keys also on the bottom bar are tagged 键栏 - Esc / click-outside to close; styled card with sticky header + accent tags 216 tests green; tsc + build clean.
This commit is contained in:
142
public/shortcuts.ts
Normal file
142
public/shortcuts.ts
Normal file
@@ -0,0 +1,142 @@
|
||||
/**
|
||||
* public/shortcuts.ts — Claude Code keyboard cheat-sheet (⌨ toolbar button).
|
||||
*
|
||||
* Opens an overlay listing the common Claude Code shortcuts grouped by purpose,
|
||||
* each labeled with what it does. Keys also present on the bottom touch key bar
|
||||
* are tagged "键栏". Source: official Claude Code interactive-mode docs.
|
||||
*/
|
||||
|
||||
interface Shortcut {
|
||||
keys: string
|
||||
desc: string
|
||||
onBar?: boolean // also available on the bottom key bar
|
||||
}
|
||||
|
||||
interface ShortcutGroup {
|
||||
title: string
|
||||
items: Shortcut[]
|
||||
}
|
||||
|
||||
const GROUPS: ShortcutGroup[] = [
|
||||
{
|
||||
title: '常用 General',
|
||||
items: [
|
||||
{ keys: 'Esc', desc: '打断 Claude / 关闭弹窗', onBar: true },
|
||||
{ keys: 'Esc Esc', desc: '有输入→清空存草稿;空→打开回溯菜单', onBar: true },
|
||||
{ keys: 'Ctrl+C', desc: '中断运行;无运行时清空,再按退出', onBar: true },
|
||||
{ keys: 'Ctrl+D', desc: '退出会话 (EOF)', onBar: true },
|
||||
{ keys: 'Shift+Tab', desc: '循环权限模式 (default/acceptEdits/plan…)', onBar: true },
|
||||
{ keys: 'Ctrl+R', desc: '反向搜索命令历史', onBar: true },
|
||||
{ keys: 'Ctrl+O', desc: '切换 transcript(详细工具调用)视图', onBar: true },
|
||||
{ keys: 'Ctrl+L', desc: '重绘屏幕(显示错乱时救场)', onBar: true },
|
||||
{ keys: 'Ctrl+T', desc: '切换任务列表', onBar: true },
|
||||
{ keys: 'Ctrl+B', desc: '把命令/agent 转到后台(tmux 按两次)', onBar: true },
|
||||
{ keys: '↑ / ↓', desc: '移动光标 / 翻命令历史', onBar: true },
|
||||
{ keys: 'Tab', desc: '补全建议 / 接受提示', onBar: true },
|
||||
{ keys: '/', desc: '命令与 skill 启动器', onBar: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '行内编辑 Editing',
|
||||
items: [
|
||||
{ keys: 'Ctrl+A', desc: '光标到行首' },
|
||||
{ keys: 'Ctrl+E', desc: '光标到行尾' },
|
||||
{ keys: 'Ctrl+K', desc: '删除到行尾' },
|
||||
{ keys: 'Ctrl+U', desc: '删除到行首' },
|
||||
{ keys: 'Ctrl+W', desc: '删除前一个词' },
|
||||
{ keys: 'Ctrl+Y', desc: '粘回被删除的内容' },
|
||||
{ keys: 'Alt+B / Alt+F', desc: '按词左移 / 右移' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '多行输入 Multiline',
|
||||
items: [
|
||||
{ keys: '\\ + Enter', desc: '换行(任何终端都行)' },
|
||||
{ keys: 'Shift+Enter', desc: '换行(iTerm2/WezTerm/Kitty… 原生)' },
|
||||
{ keys: 'Ctrl+J', desc: '换行(无需配置,任何终端)' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'macOS(需 Option 当 Meta)',
|
||||
items: [
|
||||
{ keys: 'Option+P', desc: '切换模型' },
|
||||
{ keys: 'Option+T', desc: '开关 extended thinking' },
|
||||
{ keys: 'Option+O', desc: '开关 fast mode' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '前缀 Prefixes',
|
||||
items: [
|
||||
{ keys: '! 开头', desc: 'shell 模式,直接跑命令并入上下文' },
|
||||
{ keys: '@', desc: '文件路径补全' },
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
export function mountShortcuts(toolbar: HTMLElement): void {
|
||||
const overlay = document.createElement('div')
|
||||
overlay.id = 'shortcutsmodal'
|
||||
overlay.style.display = 'none'
|
||||
const card = document.createElement('div')
|
||||
card.className = 'sc-card'
|
||||
overlay.appendChild(card)
|
||||
document.body.appendChild(overlay)
|
||||
|
||||
const hide = (): void => {
|
||||
overlay.style.display = 'none'
|
||||
}
|
||||
overlay.addEventListener('click', (e) => {
|
||||
if (e.target === overlay) hide()
|
||||
})
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && overlay.style.display !== 'none') hide()
|
||||
})
|
||||
|
||||
const build = (): void => {
|
||||
card.replaceChildren()
|
||||
const title = document.createElement('div')
|
||||
title.className = 'sc-title'
|
||||
title.textContent = 'Claude Code 快捷键'
|
||||
card.appendChild(title)
|
||||
|
||||
for (const group of GROUPS) {
|
||||
const gh = document.createElement('div')
|
||||
gh.className = 'sc-group'
|
||||
gh.textContent = group.title
|
||||
card.appendChild(gh)
|
||||
|
||||
for (const sc of group.items) {
|
||||
const row = document.createElement('div')
|
||||
row.className = 'sc-row'
|
||||
|
||||
const key = document.createElement('span')
|
||||
key.className = 'sc-key'
|
||||
key.textContent = sc.keys
|
||||
|
||||
const desc = document.createElement('span')
|
||||
desc.className = 'sc-desc'
|
||||
desc.textContent = sc.desc
|
||||
|
||||
row.append(key, desc)
|
||||
if (sc.onBar) {
|
||||
const tag = document.createElement('span')
|
||||
tag.className = 'sc-tag'
|
||||
tag.textContent = '键栏'
|
||||
row.appendChild(tag)
|
||||
}
|
||||
card.appendChild(row)
|
||||
}
|
||||
}
|
||||
}
|
||||
build()
|
||||
|
||||
const toggle = document.createElement('button')
|
||||
toggle.className = 'toolbtn'
|
||||
toggle.textContent = '⌨'
|
||||
toggle.title = 'Claude Code 快捷键速查'
|
||||
toggle.setAttribute('aria-label', 'Keyboard shortcuts')
|
||||
toggle.addEventListener('click', () => {
|
||||
overlay.style.display = overlay.style.display === 'none' ? 'flex' : 'none'
|
||||
})
|
||||
toolbar.appendChild(toggle)
|
||||
}
|
||||
Reference in New Issue
Block a user