<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Kole UI · ShortcutPanel</title>
  <link rel="stylesheet" href="../.design_library/kole-ui/colors_and_type.css" />
  <link rel="stylesheet" href="./ShortcutPanel.css" />
</head>
<body>
  <div class="kole-page">
    <h2 class="kole-h2">ShortcutPanel 快捷键面板</h2>
    <p class="kole-desc">展示全部快捷键，支持搜索过滤。</p>

    <div class="kole-demo">
      <div class="kole-shortcut" role="region">
        <input class="kole-shortcut-search" role="region" id="search" placeholder="搜索快捷键…" />
        <div class="kole-shortcut-list" role="region" id="list"></div>
      </div>
    </div>
  </div>

  <script>
    var items = [
      { name: '保存', key: 'Ctrl + S' },
      { name: '搜索', key: 'Ctrl + K' },
      { name: '新建', key: 'Ctrl + N' },
      { name: '刷新', key: 'F5' },
      { name: '关闭页签', key: 'Ctrl + W' },
      { name: '全屏', key: 'F11' },
      { name: '帮助', key: '?' },
      { name: '命令面板', key: 'Ctrl + P' }
    ];
    var list = document.getElementById('list');
    var search = document.getElementById('search');

    function render() {
      var q = search.value.trim().toLowerCase();
      var filtered = items.filter(function (it) { return !q || it.name.toLowerCase().indexOf(q) >= 0 || it.key.toLowerCase().indexOf(q) >= 0; });
      if (!filtered.length) { list.innerHTML = '<div class="kole-shortcut-empty" role="region">无匹配快捷键</div>'; return; }
      list.innerHTML = filtered.map(function (it) {
        return '<div class="kole-shortcut-item" role="region"><span>' + it.name + '</span><span class="kole-shortcut-key" role="region">' + it.key + '</span></div>';
      }).join('');
    }
    search.addEventListener('input', render);
    render();
  </script>
</body>
</html>
