html原生右键菜单无法添加图标，必须用javascript模拟：监听contextmenu事件、preventdefault()阻止默认菜单，再用绝对定位div动态创建带图标（iconfont/img/background）的自定义菜单，并处理滚动偏移、边界检测与焦点管理。
右键菜单里加图标，HTML 本身做不到
HTML 标签（比如 <menu></menu>、<menuitem></menuitem>）在现代浏览器中基本被废弃或无实际渲染能力，contextmenu 事件触发的原生右键菜单完全由浏览器控制，无法插入图标、自定义样式或快捷键。想实现带图标的右键菜单，必须用 JavaScript 模拟——监听 contextmenu 事件，阻止默认行为，再动态创建一个绝对定位的 <div> 菜单。
<h3>用 <code>document.addEventListener('contextmenu', ...) 拦截并定位菜单
关键不是“怎么画图标”，而是“怎么让菜单出现在鼠标位置且不消失”。常见错误是直接用 event.clientX/clientY 设置 top/left，但没考虑页面滚动偏移或缩放，导致菜单飘走。
- 必须用
event.pageX和event.pageY（它们已自动包含滚动偏移） - 菜单
position: absolute，父容器不能是transform或perspective元素，否则定位会错乱 - 务必调用
event.preventDefault()，否则原生菜单和自定义菜单会同时出现 - 建议加
document.addEventListener('click', hideMenu)实现点击其他区域收起菜单
图标用 <img>、background-image 还是 iconfont？
没有统一最优解，取决于资源类型和维护成本：
-
<img src="cut.svg" style="max-width:90%">：适合少量固定图标，注意设置vertical-align: middle对齐文字 - CSS
background-image+padding-left：适合图标尺寸统一、需换主题色的场景，但 SVG 作为 background 时颜色不易动态修改 -
iconfont（如<i class="icon-cut"></i>）：体积小、可缩放、颜色可控，但需额外引入字体文件或内联@font-face - 避免用
<svg></svg>内联写死在 HTML 中——每个菜单项都复制一遍，冗余且难维护
快捷键提示（比如 “Ctrl+X”）要手动加，浏览器不自动显示
右键菜单里的快捷键只是视觉提示，和真实键盘行为无关。你得自己监听 keydown 事件，并做组合键判断：
- 快捷键文本建议放在菜单项右侧，用
<span class="shortcut">Ctrl+X</span>，CSS 控制margin-left: auto或flex: 1推到最右 - 监听全局
keydown时，检查event.ctrlKey && event.key === 'x'，再手动触发对应菜单操作 - 注意：Mac 用户用
metaKey而非ctrlKey，生产环境应兼容event.metaKey || event.ctrlKey - 不要依赖
accesskey属性——它只适用于焦点元素，对右键菜单无效
真正麻烦的从来不是“怎么加图标”，而是菜单的边界检测（靠近窗口边缘时自动翻转方向）、焦点管理（键盘 Tab 和 Arrow 导航）、以及与第三方 UI 库（如 React 组件、Shadow DOM）的样式隔离。这些细节不处理，菜单在真实项目里大概率点不准、关不掉、或者根本看不见图标。
