用途:排查 shadcn Command 原语(命令面板、Combobox、搜索列表、模糊过滤、多选下拉)在 cmdk 版本漂移后出现的过滤失效、无法点击或崩溃问题。
主要能力:文档记录六类漂移症状及修复路径。1)filter 签名漂移:cmdk 1.0.0 起签名为 (value, search, keywords) => number,旧两参形式仍能通过类型检查但会静默忽略 keywords,需改写为三参。2)自定义过滤大小写:默认 command-score 内部会 toLowerCase,自定义 filter 收到原始大小写值,需自行统一大小写。3)Vaul Drawer 内输入框首次按键失焦:Vaul 焦点陷阱与 cmdk 自动聚焦冲突,给 DrawerContent 传 onOpenAutoFocus={(e) => e.preventDefault()};Radix Dialog 内同理。4)shouldFilter={false} 会在每次按键显示全部条目,需在父级自行过滤并配合防抖。5)CommandLoading 未被 shadcn 包装器再导出,需从 cmdk 直接导入。6)cmdk 升级后条目不可点击或抛 TypeError,因 cmdk 1.0.0 要求 CommandItem 必须位于 CommandList 内。
检测方式:使用 pnpm ls cmdk(或 npm/yarn 对应命令)查看已装版本,用 curl 拉取注册表 command.json 比对期望依赖,用 grep -E "CommandLoading|keywords=" components/ui/command.tsx 检查包装器引用。
修复策略:三选一。A:在 package.json 中精确固定 cmdk 版本(不要用 ^ 或 ~);B:运行 pnpm dlx shadcn@latest add command --diff 查看差异后加 --overwrite 并 pnpm install,会丢失本地定制;C:升级 cmdk 并重写所有自定义 filter 为三参形式。
适用场景:使用 shadcn 复制式 Command 包装器且 package.json 自带 cmdk 依赖的 React 项目,尤其升级 cmdk 后。限制:仅针对该组件与 cmdk 的版本契约,不覆盖其他 UI 问题;版本兼容结论需对照 cmdk CHANGELOG;本地包装器定制与 --overwrite 存在冲突。