由页面以纯 HTML 打开并书写内容。 ========================================================================= -->

Overlay / 06

命令面板 · CmdK

键盘优先的全局入口：按下 ⌘K / Ctrl+K 或点击顶栏搜索框即可唤起，支持实时过滤、方向键选择、回车执行、Esc 退出。适合页面跳转、快捷操作与外观切换。

三种唤起方式

shortcut / topbar / button

快捷键

⌘+K / Ctrl+K

Mac 与 Windows 都支持，无需聚焦输入框，任意位置按下即可唤起。

在本页按下试试，面板会立刻浮出。

顶栏搜索框

⌘K

顶栏的搜索框本身就是一个唤起入口，点击后会打开本页的命令面板。

普通按钮

在空状态、错误页或引导流程中，用按钮显式提供入口，配合 kbd 提示提升可发现性。

面板能力与键盘操作

filter · navigate · execute

四类命令

页面导航

跳转到任意组件页，右侧显示所属分组。

快捷操作

新建页面、导入素材、复制链接等高频动作。

外观设置

深浅色切换、紧凑模式、动效开关等偏好项。

帮助支持

文档、快捷键说明、反馈入口，随时可退。

静态结构示例

<div class="ov" id="ovCmdk">
  <div class="cmdk" role="dialog" aria-modal="true">
    <div class="cmdk-top">
      <svg class="search-ic">…</svg>
      <input id="cmdkInput" placeholder="搜索页面、组件或命令…">
      <kbd>Esc</kbd>
    </div>
    <div class="cmdk-list">
      <div class="cmdk-g">页面导航</div>
      <button class="cmdk-i">
        <span class="cmdk-ic">…</span>
        <span class="cmdk-t">Modal 弹窗 · 大中小</span>
        <span class="cmdk-k">浮层弹窗</span>
      </button>
    </div>
    <div class="cmdk-foot">…</div>
  </div>
</div>

按键	行为
`⌘K` / `Ctrl`+`K`	唤起 / 收起命令面板
`↑` `↓`	在结果之间移动高亮
`Enter`	执行当前高亮项并关闭面板
`Esc`	关闭面板，保留上次搜索词
输入文字	按名称实时过滤，无结果时显示空提示

高亮首次打开默认选中第一项，鼠标悬停会同步更新高亮位置，键盘与鼠标可混用。

命令命名建议

使用「动词 + 对象」，例如「新建页面」「导出明细」；页面跳转直接使用页面标题，方便按记忆搜索。

不要放破坏性命令

删除、清空等不可逆操作不应出现在命令面板中，误触发成本太高。

可搜索的命令清单

18 commands

页面导航

Modal 弹窗 · 大中小Drawer 四向抽屉卡片体系轮播 Carousel产品相册

快捷操作

新建页面导入素材复制链接导出明细

外观设置

切换深色模式切换浅色模式紧凑模式关闭动效

帮助支持

打开开发者文档查看快捷键提交反馈联系客服