开发预览更新于 2026-05-10

MenuBar 菜单栏

应用顶部菜单栏（File / Edit / View 风格），支持快捷键、分隔符、危险项。

基础用法

点击菜单触发 / 切换；hover 在不同顶级菜单间快速切换；点击外部 / 选择条目自动关闭。

背景视口

src/App.vue

<script setup lang="ts">
import { CfMenuBar } from '@chufix-design/vue';
const menus = [
  {
    id: 'file', label: 'File',
    items: [
      { id: 'new', label: '新建', shortcut: '⌘N' },
      { id: 'open', label: '打开…', shortcut: '⌘O' },
      { separator: true },
      { id: 'save', label: '保存', shortcut: '⌘S' },
      { id: 'saveas', label: '另存为…', shortcut: '⌘⇧S' },
    ],
  },
  {
    id: 'edit', label: 'Edit',
    items: [
      { id: 'undo', label: '撤销', shortcut: '⌘Z' },
      { id: 'redo', label: '重做', shortcut: '⌘⇧Z' },
      { separator: true },
      { id: 'cut', label: '剪切', shortcut: '⌘X' },
      { id: 'copy', label: '复制', shortcut: '⌘C' },
      { id: 'paste', label: '粘贴', shortcut: '⌘V' },
    ],
  },
  {
    id: 'view', label: 'View',
    items: [
      { id: 'sidebar', label: '切换侧边栏', shortcut: '⌘B' },
      { id: 'palette', label: '命令面板…', shortcut: '⌘K' },
    ],
  },
];
</script>
<template>
  <div style="border: 1px solid var(--line-1); border-radius: var(--r-6); overflow: visible;">
    <CfMenuBar :menus="menus" @select="(menuId, itemId) => alert(`${menuId} → ${itemId}`)" />
  </div>
</template>

<script setup>
import { CfMenuBar } from '@chufix-design/vue';
const menus = [
  {
    id: 'file', label: 'File',
    items: [
      { id: 'new', label: '新建', shortcut: '⌘N' },
      { id: 'open', label: '打开…', shortcut: '⌘O' },
      { separator: true },
      { id: 'save', label: '保存', shortcut: '⌘S' },
      { id: 'saveas', label: '另存为…', shortcut: '⌘⇧S' },
    ],
  },
  {
    id: 'edit', label: 'Edit',
    items: [
      { id: 'undo', label: '撤销', shortcut: '⌘Z' },
      { id: 'redo', label: '重做', shortcut: '⌘⇧Z' },
      { separator: true },
      { id: 'cut', label: '剪切', shortcut: '⌘X' },
      { id: 'copy', label: '复制', shortcut: '⌘C' },
      { id: 'paste', label: '粘贴', shortcut: '⌘V' },
    ],
  },
  {
    id: 'view', label: 'View',
    items: [
      { id: 'sidebar', label: '切换侧边栏', shortcut: '⌘B' },
      { id: 'palette', label: '命令面板…', shortcut: '⌘K' },
    ],
  },
];
</script>
<template>
  <div style="border: 1px solid var(--line-1); border-radius: var(--r-6); overflow: visible;">
    <CfMenuBar :menus="menus" @select="(menuId, itemId) => alert(`${menuId} → ${itemId}`)" />
  </div>
</template>

import { CfMenuBar } from '@chufix-design/react';

export default function Demo() {
  const menus = [
    {
      id: 'file', label: 'File',
      items: [
        { id: 'new', label: '新建', shortcut: '⌘N' },
        { id: 'open', label: '打开…', shortcut: '⌘O' },
        { separator: true },
        { id: 'save', label: '保存', shortcut: '⌘S' },
        { id: 'saveas', label: '另存为…', shortcut: '⌘⇧S' },
      ],
    },
    {
      id: 'edit', label: 'Edit',
      items: [
        { id: 'undo', label: '撤销', shortcut: '⌘Z' },
        { id: 'redo', label: '重做', shortcut: '⌘⇧Z' },
        { separator: true },
        { id: 'cut', label: '剪切', shortcut: '⌘X' },
        { id: 'copy', label: '复制', shortcut: '⌘C' },
        { id: 'paste', label: '粘贴', shortcut: '⌘V' },
      ],
    },
    {
      id: 'view', label: 'View',
      items: [
        { id: 'sidebar', label: '切换侧边栏', shortcut: '⌘B' },
        { id: 'palette', label: '命令面板…', shortcut: '⌘K' },
      ],
    },
  ];
  return (
    <>
      <div style={{ border: "1px solid var(--line-1)", borderRadius: "var(--r-6)", overflow: "visible" }}>
          <CfMenuBar menus={menus} onSelect={(menuId, itemId) => alert(`${menuId} → ${itemId}`)} />
        </div>
    </>
  );
}

import { CfMenuBar } from '@chufix-design/react';

export default function Demo() {
  const menus = [
    {
      id: 'file', label: 'File',
      items: [
        { id: 'new', label: '新建', shortcut: '⌘N' },
        { id: 'open', label: '打开…', shortcut: '⌘O' },
        { separator: true },
        { id: 'save', label: '保存', shortcut: '⌘S' },
        { id: 'saveas', label: '另存为…', shortcut: '⌘⇧S' },
      ],
    },
    {
      id: 'edit', label: 'Edit',
      items: [
        { id: 'undo', label: '撤销', shortcut: '⌘Z' },
        { id: 'redo', label: '重做', shortcut: '⌘⇧Z' },
        { separator: true },
        { id: 'cut', label: '剪切', shortcut: '⌘X' },
        { id: 'copy', label: '复制', shortcut: '⌘C' },
        { id: 'paste', label: '粘贴', shortcut: '⌘V' },
      ],
    },
    {
      id: 'view', label: 'View',
      items: [
        { id: 'sidebar', label: '切换侧边栏', shortcut: '⌘B' },
        { id: 'palette', label: '命令面板…', shortcut: '⌘K' },
      ],
    },
  ];
  return (
    <>
      <div style={{ border: "1px solid var(--line-1)", borderRadius: "var(--r-6)", overflow: "visible" }}>
          <CfMenuBar menus={menus} onSelect={(menuId, itemId) => alert(`${menuId} → ${itemId}`)} />
        </div>
    </>
  );
}

API

menus: MenuBarMenu[] —— { id, label, items: MenuBarItem[] }

MenuBarItem：{ id, label, shortcut?, disabled?, danger?, separator? }

事件：select(menuId, itemId, item)。