上下文菜單和快速操作

1）目的和範圍

• 對對象的本地操作（卡，表行，系數）。
• 分配上的批處理操作。
• 隱藏但不關鍵選項（次要選項）。
• 規則：關鍵和主要動作不要只隱藏在上下文菜單中。

2）觸發器和選項

右點擊/Shift+F10/菜單密鑰是經典的上下文。
Icon button（kebab '⋮'，meatballs'……'，context）是通用的tach/desktop。
Long-press（400-600 ms）是相當於right click的移動設備。
Command palette （⇧⌘P/Ctrl+K）-全球快速搜索命令。
Swipe-reveal （iOS/Android列表）-打開一系列快速短褲。

建議：至少提供兩種調用方式（圖標+上下文點擊/鍵）。

3）內容和優先級

前1-3點-頻繁行動；然後是分隔符；接下來-較少使用。
破壞性的-在結尾，標有顏色/圖標（通常通過確認/undo標記）。
措辭是動詞+賓語（「添加到收藏夾」，「復制ID」）。
標簽僅≠圖標：圖標是放大器，不是文本替換。

4）分組和狀態

Состояния: `disabled`, `checked` (`menuitemcheckbox`/`menuitemradio`), `destructive`.

邏輯塊的分隔符（查看、編輯、管理、危險）。
如果混淆，我們不會顯示角色無法訪問；或者-我們顯示為帶有原因提示的「失衡」。

5）可用性（A11y）

容器：'role='menu'，元素：'role='menuitem'/'menuitemcheckbox'/'menuitemradio'。
Roving tabindex：當前元素上的單個"tabindex="0"，其余的"-1"。
↑↓箭頭-移動,→/←箭頭-從子菜單登錄/退出。Enter/Space-激活,Esc-關閉。
Typeahead：打印第一個字母將焦點轉移到點。
焦環可見；AA ≥文本和圖標的對比。
對於按鈕圖標，請使用"aria-haspopup="menu"和"aria-expanded"。

html
<button id="more" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-1">Еще</button>
<ul id="menu-1" role="menu" aria-labelledby="more" hidden>
<li role="menuitem" tabindex="0">Открыть</li>
<li role="menuitem">Скопировать ссылку</li>
<li role="menuitemcheckbox" aria-checked="true">В избранном</li>
<li role="menuitem" data-danger="true">Удалить</li>
</ul>

js const menu = document.getElementById('menu-1');
menu.addEventListener('keydown', e=>{
const items=[...menu.querySelectorAll('[role^="menuitem"]')];
let i=items.findIndex(n=>n.tabIndex===0);
if(e.key==='ArrowDown'){ items[i].tabIndex=-1; items[(i+1)%items.length].tabIndex=0; items[(i+1)%items.length].focus(); e.preventDefault(); }
if(e.key==='ArrowUp'){ items[i].tabIndex=-1; items[(i-1+items.length)%items.length].tabIndex=0; items[(i-1+items.length)%items.length].focus(); e.preventDefault(); }
if(e.key==='Escape'){ menu.hidden=true; document.getElementById('more').focus(); }
});

6）定位和表演

從源位置打開菜單（點擊點/圖標）,移位4-8 px；觀察屏幕邊緣（flip/shift）。
門戶/層頂部（「z-index」）與點擊捕捉關閉。
懶惰地渲染，在長菜單中回收列表（不需要虛擬化，但要避免數百個項目）。
動畫僅為「opacity/transform」，持續時間為140-200毫秒（超出：100-160毫秒）。
在「ArrowRight」上打開子菜單並以80-120毫秒的延遲（反閃光燈）旋轉。

7）移動模式

帶有觸覺的長新聞；450 ± 100毫秒的時間。
底部表作為上下文菜單的一種形式（thumb-reachable）。
清單中的Swipe操作：左側為「存檔/選中」，右側為「刪除」（確認/undo）。
點擊區域≥ 44 × 44，簽名簡短，圖標為20-24 px。

8）確認、undo和安全

破壞性活動：第二次確認（modal/confirm模式）或undo 5-10 s。
財務/風險-通過具有後果背景的顯式匹配。
顯示「Disabled」的原因（「不夠正確」，「達到極限」）。

9）快速行動沒有菜單

行中的直線短褲（圖標「」，「，」，「⋯」）。
Hover-reveal（桌面）：在懸停時顯示動作,但也留下明顯的觸發器。
Command palette：按動作搜索，線索中的熱鍵（「⌘S」，「Ctrl+Enter」）。

10）文案寫作和圖標

動詞+賓語，2-3個單詞。
從動作（「刪除條目……」）開始，不從名詞（「刪除條目」）開始。
來自單個集合的圖標；使用相同的圖標在整個產品中執行相同的操作。
模棱兩可的句子的解釋提示（「標題」/tooltip）。

11）遙測與實驗

點的CTR，從打開到點擊的時間中位數，取消頻率/undo。
不合時宜的數量（破壞性→取消）。
A/B：項目的順序和分組，名單上有快速短褲。
「隱形」項目的邏輯（沒有人使用）是刪除/轉移的候選人。

12）設計系統令牌（示例）

json
{
"menu": {
"minWidth": 208,
"itemHeight": 36,
"gap": 4,
"padding": 8,
"radius": 12,
"elev": 8,
"anim": { "inMs": 180, "outMs": 120, "ease": "cubic-bezier(0.2,0,0.2,1)" }
},
"swipe": { "revealThresholdPx": 56, "confirmDestructive": true }
}

css
.menu{min-width:208px;padding:8px;border-radius:12px;box-shadow:var(--elev-3);background:var(--bg-elevated)}
.menu [role^="menuitem"]{height:36px;padding:0 12px;display:flex;gap:8px;align-items:center;border-radius:10px}
.menu [role^="menuitem"]:hover,
.menu [role^="menuitem"][tabindex="0"]{background:var(--bg-hover)}
.menu [data-danger="true"]{color:var(--role-danger)}

13）按組件分列的模式

卡/瓷磚：右上角的「⋯」圖標；在hover-顯示，在tach-始終可見。
表中的行：最後一欄中的「⋯」；多重突出顯示-頂部/底部批處理操作面板。
聊天/通知列表：帶有undo的swipe-actions（存檔/閱讀/刪除）。
媒體畫廊：長時間脫落→多重選擇模式+底部動作面板。

14） iGaming的細節

快速投註（quick bet）：在因子快捷菜單中,「放置X」（預建）、「添加到優惠券」、「訂閱更改因子」。確認/undo是強制性的。
選擇/訂閱：「添加提供商/遊戲到收藏夾」，「訂閱錦標賽」。
高速緩存：具有在線確認和當前總和；僅在市場狀態下可用。
節制/記者：「抱怨」，「阻止聊天」-安全，通過角色可見。
負責任的遊戲：「設置限制」，「24小時暫停」-沒有侵略性的顏色，並清楚地描述了後果。

15）反模式

關鍵操作僅隱藏在上下文菜單中。
沒有文本的項目（一些圖標），尤其是在列表中。
在切換到子菜單時意外關閉遊標離開（沒有延遲/走廊）。
菜單與源項重疊或離開屏幕（無flip/shift）。
沒有確認的破壞性/undo。
非明顯權利（該條款在沒有解釋的情況下失蹤）。

16） QA支票清單

可用性

• 'role=「menu」/「menuitem」是正確的，roving tabindex和箭頭工作。
• Esc關閉菜單,焦點返回到源。
• 對比度和焦環對應於AA。

行為行為

• 項目的順序應反映頻率和風險；破壞性的。
• 定位考慮邊緣（flip/shift）；快速動畫（≤ 200毫秒）。
• 子菜單在ArrowRight上打開,不發抖（hover-intent 80-120 ms）。

移動設備

• 具有觸覺的長新聞；bottom-sheet用拇指舒適。
• Swipe-actions具有undo；集團區域≥ 44 × 44。

安全性

• 危險行為的確認/放棄；無法解決的原因是可以理解的。
• 線索/標簽中沒有泄露的私人數據。

度量標準

• 由CTR/點擊前的時間拍攝；misclick/undo監控。

17）實現： 開放/關閉和點擊關閉

js const btn=document.getElementById('more'), menu=document.getElementById('menu-1');
const open=()=>{ menu.hidden=false; btn.setAttribute('aria-expanded','true'); menu.querySelector('[role^="menuitem"]').focus(); };
const close=()=>{ menu.hidden=true; btn.setAttribute('aria-expanded','false'); btn.focus(); };
btn.addEventListener('click', e=>{ menu.hidden?open():close(); });
document.addEventListener('pointerdown', e=>{ if(!menu.hidden &&!menu.contains(e.target) && e.target!==btn) close(); });
window.addEventListener('blur', close);

18）設計系統中的文檔

Компоненты: `ContextMenu`, `MenuItem`, `Submenu`, `BottomSheet`, `SwipeAction`, `CommandPalette`.

行大小/高度/半徑/動畫令牌。
Gaids可用性（ARIA，鍵盤，typeahead）。
帶有分組，定位和確認示例的「Do/Do n't」。

簡短的摘要

上下文菜單和快速操作可在可預測，可訪問且安全的情況下加快操作：兩個通話路徑，帶有圖標的清晰標簽，合理的分組，風險確認/undo，正確的鍵盤導航和清晰的定位。在設計系統中記錄令牌和模式-用戶將迅速采取行動,而不必擔心錯誤。