Umi-plugin-cmdk

一个通过快捷键打开搜索面板的插件, 搜索面板默认可以搜索菜单，也可以定制其他的链接。

Install

Npm

npm install umi-plugin-cmdk

Yarn

yarn add umi-plugin-cmdk

Pnpm

pnpm add umi-plugin-cmdk

Usage

Configure in .umirc.ts,

export default {
  plugins: ["umi-plugin-cmdk"],
};

Options

可以通过配置文件 config/config. Ts 中的 layout 属性开启插件。

import { defineConfig } from 'umi';

export default defineConfig({
  cmdk: {
    keyFilter: 'meta.k',
    searchPlaceholder: '搜索菜单',
    empty: '找不到搜索结果',
    suggestionKeys: [],
    groups: []
  }
});

keyFilter

• Type: KeyFilter
• Default: meta.k

定义打开弹框的快捷键, 具体用法可见 ahooks 的 useKeyPress

searchPlaceholder

• Type: string
• Default: 寻找你想去的地方...

弹框搜索框的 Placeholder

Empty

• Type: string
• Default: 迷路了! ! !

搜索结果为空的时候展示效果

suggestionKeys

• Type: string[]
• Default: 无

用于配置哪些菜单需要置顶，置顶之后会放到 suggestion 组内，同时在 menu 组下面就会隐藏。

groups

• Type: Group
• Default： 无

出了菜单以外，还想配置更多的跳转链接，可以用这个属性进行扩展更多的分组。

类型如下：

interface Item {
  key: string;
  title: string;
  action?: () => void;
}

interface Group {
  groupName: string;
  items: Item[];
}

TODO

• [ ] 更多的主题切换
• [ ] 增加一个静态站点演示，或者整一个每个属性配置的 gif

LICENSE

MIT