✨ [Feature]: tree-menu支持分割线进行分组

[kagol]

What problem does this feature solve

希望支持类似以下效果：

本来尝试使用 default 插槽实现，但是 default 插槽包裹了很多外层dom节点，导致效果不好。

const menus = [
  { id: 'inbox', label: 'Inbox' },
  { id: 'drafts', label: 'Drafts' },
  { id: 'sent', label: 'Sent' },
  { id: 'junk', label: 'Junk' },
  { id: 'trash', label: 'Trash' },
  { id: 'archive', label: 'Archive' },
  { type: 'split' },
  { id: 'social', label: 'Social' },
  { id: 'updates', label: 'Updates' },
  { id: 'forums', label: 'Forums' },
  { id: 'shopping', label: 'Shopping' },
  { id: 'promotions', label: 'Promotions' },
]

<tiny-tree-menu :data="menus" :show-filter="false" style="width: 100%; padding: 0 0.5rem;">
  <template #default="{ node, data }">
    <tiny-divider v-if="data.type === 'split'" style="width: 100%;"></tiny-divider>
    <span v-else>{{ data.label }}</span>
  </template>
</tiny-tree-menu>

实现出来的效果如下：

这不是我希望的效果。

What does the proposed API look like

可以设置一个特殊的 option: { type: 'split' }，用来实现分组。

大致用法如下：

const menus = [
  { id: 'inbox', label: 'Inbox' },
  { id: 'drafts', label: 'Drafts' },
  { id: 'sent', label: 'Sent' },
  { id: 'junk', label: 'Junk' },
  { id: 'trash', label: 'Trash' },
  { id: 'archive', label: 'Archive' },
  { type: 'split' },
  { id: 'social', label: 'Social' },
  { id: 'updates', label: 'Updates' },
  { id: 'forums', label: 'Forums' },
  { id: 'shopping', label: 'Shopping' },
  { id: 'promotions', label: 'Promotions' },
]

<tiny-tree-menu :data="menus" :show-filter="false">
</tiny-tree-menu>

What is your project name

邮箱应用

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

Title: ✨ [Feature]: tree-menu supports dividing lines for grouping

[gweesin]

这样的 api 会不会好一点

const menus = [
  { id: 'inbox', label: 'Inbox' },
  { id: 'drafts', label: 'Drafts' },
  { id: 'sent', label: 'Sent' },
  { id: 'junk', label: 'Junk' },
  { id: 'trash', label: 'Trash' },
  { id: 'archive', label: 'Archive', split: true },
  { id: 'social', label: 'Social' },
  { id: 'updates', label: 'Updates' },
  { id: 'forums', label: 'Forums' },
  { id: 'shopping', label: 'Shopping' },
  { id: 'promotions', label: 'Promotions' },
]

<tiny-tree-menu :data="menus" :show-filter="false">
</tiny-tree-menu>