默认收起组件分组

通过配置 collapseMenu，可指定设计器左侧组件面板中哪些分组在初始状态下为折叠，从而缩短列表、让常用分组更突出。与 hiddenMenu（整组不显示）不同，分组仍显示标题，用户可随时点击展开。

数据结构

type MenuName = 'main' | 'aide' | 'layout' | 'subform' | 'template' | 'container' | 'chart' | string;
// props.config
collapseMenu?: MenuName[];

• collapseMenu： 需要默认折叠的菜单 name 列表，与内置分组和组件及扩展组件分组中的 name 一致。自定义分组传入扩展时填写的 name 即可。

内置分组 name 对应关系：template 模板、main 基础、subform 子表单、container 容器、chart 图表、aide 辅助、layout 布局。

基本示例

进入设计器时，将「基础」「图表」两个分组默认折叠：

<template>
    <fc-designer :config="config" />
</template>

<script setup>
    const config = {
        collapseMenu: ['main', '图表'],
    };
</script>

与隐藏菜单的区别

• hiddenMenu： 对应分组在左侧面板不渲染，需要彻底不展示时使用。
• collapseMenu： 分组标题仍在，仅默认收起内容区，需要保留入口但减少首屏占用时使用。

需要同时隐藏某类菜单、又对其余菜单做默认折叠时，可两项一起配置，互不冲突（未隐藏的才会参与折叠展示）。

与自定义左侧菜单

若通过扩展组件分组为 menu 传递了 MenuList，collapseMenu 中的 name 与各项菜单的 name 一致即可，用于折叠自定义分组。

<template>
    <fc-designer :config="config" :menu="menu" />
</template>

<script setup>
    const menu = [
        { name: 'biz', title: '业务组件', list: [/* ... */] },
    ];
    const config = {
        collapseMenu: ['biz'],
    };
</script>