命令面板设计与实现

命令面板（Command Palette）是现代代码编辑器的标配功能，本文将详细介绍其设计思路与实现方案。

命令面板的核心要素

一个完整的命令面板需要具备以下功能：

• 快捷键触发 - 通常是 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS）
• 模糊搜索 - 用户输入关键字后能快速匹配相关命令
• 分类展示 - 命令可以按类别分组显示
• 快捷键提示 - 显示每个命令的快捷键（如果有）
• 最近使用 - 记住最近使用的命令优先展示

命令注册系统

首先需要建立统一的命令注册机制：

// 命令注册表
const commands = new Map();

function registerCommand(id, handler, options = {}) {
    commands.set(id, {
        id,
        handler,
        label: options.label || id,
        category: options.category || 'General',
        keybinding: options.keybinding || null,
        when: options.when || true
    });
}

// 注册示例
registerCommand('editor.formatDocument', () => {
    /* 格式化文档逻辑 */
}, {
    label: 'Format Document',
    category: 'Editor',
    keybinding: 'Shift+Alt+F'
});

registerCommand('file.save', () => {
    /* 保存文件逻辑 */
}, {
    label: 'Save',
    category: 'File',
    keybinding: 'Ctrl+S'
});

模糊搜索算法

高效的模糊匹配是用户体验的关键：

// 模糊匹配算法
function fuzzyMatch(pattern, text) {
    let patternIdx = 0;
    let textIdx = 0;
    const matches = [];

    while (patternIdx < pattern.length && textIdx < text.length) {
        if (pattern[patternIdx].toLowerCase() === text[textIdx].toLowerCase()) {
            matches.push(textIdx);
            patternIdx++;
        }
        textIdx++;
    }

    if (patternIdx !== pattern.length) return null;

    // 计算匹配得分
    let score = 0;
    const bonus = 10;  // 连续匹配奖励

    for (let i = 1; i < matches.length; i++) {
        if (matches[i] === matches[i-1] + 1) {
            score += bonus;
        }
    }

    return { matches, score };
}

// 搜索命令
function searchCommands(query) {
    const results = [];
    for (const cmd of commands.values()) {
        const match = fuzzyMatch(query, cmd.label);
        if (match) {
            results.push({ ...cmd, ...match });
        }
    }
    // 按得分排序
    results.sort((a, b) => b.score - a.score);
    return results;
}

UI 实现

使用纯 CSS 实现命令面板的浮层效果：

/* 命令面板容器 */
.command-palette {
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    max-width: 90vw;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    overflow: hidden;
    z-index: 1000;
}

/* 搜索输入框 */
.command-palette input {
    width: 100%;
    padding: 16px 20px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-size: 1.1rem;
    outline: none;
}

/* 命令列表 */
.command-list {
    max-height: 400px;
    overflow-y: auto;
}

.command-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    cursor: pointer;
}

.command-item.selected {
    background: rgba(52, 211, 153, 0.1);
}

.command-key {
    font-size: 0.85rem;
    color: var(--muted);
    background: var(--card);
    padding: 4px 8px;
    border-radius: 4px;
}

键盘导航

命令面板需要支持完整的键盘操作：

// 命令面板键盘处理
class CommandPaletteController {
    constructor() {
        this.selectedIndex = 0;
        this.results = [];
    }

    handleKeyDown(e) {
        switch(e.key) {
            case 'ArrowDown':
                e.preventDefault();
                this.selectedIndex = (this.selectedIndex + 1) % this.results.length;
                this.updateSelection();
                break;
            case 'ArrowUp':
                e.preventDefault();
                this.selectedIndex = (this.selectedIndex - 1 + this.results.length) % this.results.length;
                this.updateSelection();
                break;
            case 'Enter':
                e.preventDefault();
                this.executeSelected();
                break;
            case 'Escape':
                this.close();
                break;
        }
    }

    executeSelected() {
        const cmd = this.results[this.selectedIndex];
        if (cmd) {
            cmd.handler();
            this.close();
        }
    }
}

总结

命令面板是提升编辑器效率的关键功能。核心在于命令注册系统的设计、模糊匹配算法的效率，以及流畅的键盘交互体验。