如何实现类macOS设置应用的Modal组件

以下是参考示例：

我已经梳理出了预期的组件结构示例，但不清楚如何实现它。

结构示例如下：

<Modal ref="modal" @close="close()">
  <!-- 
    一级Tab的名称会自动生成侧边栏，结构如下：
    <div class="sidebar">
      <span> tab1 </span>
      <span> tab2 </span>
      ...
    <div> 
    侧边栏中的这些Tab由Modal组件基于<ModalTab name="tabName">的名称自动创建
    点击span可跳转到对应名称的Tab（例如modal.goto('tab1')）
  -->

  <ModalTab name="tab1">
    <template #content>
      tab1 content

      <button @click="modal.goto('childTab1')">跳转到childTab1</button>
      <button @click="modal.goto('childTab2')">跳转到childTab2</button>
    </template>

    <ModalTab name="childTab1" @goback="doSome()"> <!-- 点击返回箭头时触发"goback"事件，返回"tab1"，可修改Modal内的数据 -->
      <template #content>
        子Tab内容
      </template>

      <template #footer>
        <button @click="saveInnerData(), modal.goto('tab1')">保存内部数据并返回</button>
      </template>
    </ModalTab>

    <ModalTab name="childTab2" @goback="doSome()"> <!-- 点击返回箭头时触发"goback"事件，返回"tab1"，可修改Modal内的数据 -->
      <template #content>
        子Tab内容
      </template>
      
      <!-- 子Tab激活时显示的子页脚 -->
      <template #footer>
        <button @click="saveInnerData(), modal.goto('tab1')">保存内部数据并返回</button>
      </template>
    </ModalTab>
  </ModalTab>

  <ModalTab name="tab2">
    <template #content>
      tab2内容
    </template>
  </ModalTab>
  
  <!-- 一级Tab激活时显示的主页脚 -->
  <template #footer>
    <button @click="saveAndClose()">保存并关闭</button>
  </template>
</Modal>

如你所见，这里包含两个核心组件：Modal和ModalTab。当子Tab激活时，ModalTab会显示返回箭头；同时主Tab的内容不会渲染。我认为可以通过自定义组件插件实现，支持一次性导入多个组件，例如import {Modal, ModalTab} from 'myCustomModal'，甚至可以全局注册这两个组件。

内容的提问来源于stack exchange，提问作者Your lovely monka