iter: d25 menu 条目支持快捷键提示

packages/skin/ui/src/menu.ts

@@ -24,7 +24,8 @@ export function menu(props: MenuProps): HTMLElement {
         disabled: item.disabled ? true : undefined,
         onClick: () => pick(item),
       },
-      item.label,
+      h('span', { class: 'ua-menu-label' }, item.label),
+      item.shortcut ? h('kbd', { class: 'ua-menu-key' }, item.shortcut) : null, // 快捷键只做提示，不拦截按键
     ) as HTMLButtonElement;
     if (!item.disabled) focusables.push(btn); // 禁用项不参与导航
     return btn;

packages/skin/ui/src/types.ts

@@ -103,6 +103,7 @@ export interface MenuItem {
   label: string;      // 条目文案
   disabled?: boolean; // 禁用该条目：置灰且不参与键盘导航
   danger?: boolean;   // 危险操作条目：文案取 danger 语义色
+  shortcut?: string;  // 右侧快捷键提示（仅展示，不绑定按键），如 '⌘K'
   divider?: boolean;  // 该条目渲染为分隔线（忽略 value / label）
 }
 

packages/skin/ui/ua.manifest.json

@@ -388,7 +388,7 @@
             "n": "items",
             "t": "MenuItem[]",
             "r": 1,
-            "d": "菜单条目：{ value, label, disabled?, danger?, divider? }"
+            "d": "菜单条目：{ value, label, disabled?, danger?, divider?, shortcut? }"
           },
           {
             "n": "variant",
@@ -414,6 +414,7 @@
           "准备 items 数组：value 是回调标识、label 是展示文案，插一条 { divider: true } 即可分出条目组",
           "传 label 决定触发器文案；默认 ghost 轻量样式，主操作用 variant: 'primary'",
           "点触发器展开弹层，点条目收起并触发 onSelect；点外部或按 Esc 也会收起（Esc 后焦点回到触发器）",
+          "条目要给快捷键提示时传 shortcut（如 '⌘K'）：右侧灰字展示，组件不绑定按键，实际快捷键由调用方在全局监听",
           "键盘：Tab 聚焦触发器，↑↓ 展开并在可用条目间环形移动，Enter / Space 选中；disabled 项自动跳过",
           "靠右对齐避免溢出时传 align: 'end'；危险操作给条目加 danger: true"
         ]

packages/skin/ui/ui.css

@@ -360,8 +360,11 @@
   visibility: visible;
 }
 .ua-menu-item {
-  display: block;
+  display: flex;
   width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ua-space-4);
   text-align: left;
   padding: 6px 10px;
   border: none;
@@ -381,6 +384,20 @@
 .ua-menu-item.is-danger:hover:not(:disabled) {
   background: color-mix(in srgb, var(--ua-color-danger) 10%, transparent);
 }
+.ua-menu-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ua-menu-key {
+  flex: none;
+  color: var(--ua-color-text-muted);
+  font-family: inherit;
+  font-size: var(--ua-font-size-sm);
+  opacity: 0.8;
+}
 .ua-menu-item:disabled {
   opacity: 0.45;
   cursor: not-allowed;