<script setup lang="ts">
import { ref } from 'vue'
import { AppContainerBox } from '@/components/AppContainerBox'
import { AppSubMenuTitle } from '@/components/AppSubMenuTitle'
import { AppSubMenuList } from '@/components/AppSubMenuList'
import type { SubMenuItem } from '@/components/AppSubMenuList/index.d'

const subMenuActive = ref(0)
const subMenuList = ref<SubMenuItem[]>([
  {
    title: '新对话1',
    content: '这是一个新的对话哦；啦啦啦',
    id: '1',
  },
  {
    title: '新对话2',
    content: '这是一个新的对话哦',
    id: '2',
  },
])
</script>

<template>
  <AppContainerBox>
    <template #subMenu>
      <AppSubMenuTitle></AppSubMenuTitle>
      <AppSubMenuList :list="subMenuList" :active-index="subMenuActive"></AppSubMenuList>
      我是子菜单
    </template>
    <template #content>
      我是内容区
    </template>
  </AppContainerBox>
</template>

<style scoped></style>
