ICEN UI 设计系统
搜索组件… ⌘K

右键菜单

全局单例：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

一行引入该组件（CSS 与 behavior 自动带上，无需关心内部 CSS 文件名）：

import { initContextMenu } from '@icen.ai/ui/kit/context-menu';initContextMenu();

也可以用脚手架直接打印引入行：

bunx --bun @icen.ai/ui add context-menu

Astro 项目注意：kit 入口里的 CSS import 在页面 <script> 里会被 Astro 的 client bundle 摇掉——请改在布局 frontmatter 里引 CSS（import '@icen.ai/ui/components/menu.css';），JS 行为仍可走 kit。Vite SPA / webpack 项目无此问题。

用法

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();