右键菜单

context-menu

全局单例：registerContextMenu(id, items) 注册，[data-context-menu="id"] 命中；支持 header / separator / danger / disabled，触屏长按触发。

示例

右键我（触屏长按 520ms）—— 自定义菜单

区域外右键则是默认菜单：后退 / 前进 / 刷新 / 复制页面链接。

<div class="ctx-zone" data-context-menu="demo-file">
  右键我（触屏长按 520ms）—— 自定义菜单
</div>
<p class="dim" style="margin:8px 0 0">区域外右键则是默认菜单：后退 / 前进 / 刷新 / 复制页面链接。</p>

安装

bun add @icen.ai/ui
import '@icen.ai/ui/components/menu.css';

用法

import { initContextMenu, registerContextMenu } from '@icen.ai/ui/behaviors/context-menu';

registerContextMenu('demo-file', [
  { type: 'header', label: 'report-2026.qmd', description: '文档 · 2.4 MB' },
  { label: '重命名', shortcut: 'F2', onClick: () => toast.ok('重命名') },
  { label: '复制链接', onClick: () => toast.ok('已复制链接') },
  { type: 'separator' },
  { label: '移到回收站', danger: true, shortcut: '⌫', onClick: () => toast.warn('已移到回收站') },
  { label: '高级操作（不可用）', disabled: true },
]);
initContextMenu();