TUI

<template>
  <TsMenu v-model="activePath" :menus="iMenus" @change="handleMenuChange" :ssg="false"/>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  const activePath = ref('/path1');

  const iMenus = [
    { path: '/path1', name: '菜单1',  children: [] },
    { path: '/path2', name: '菜单2',  children: [] },
    { path: '/path3', name: '菜单3',  children: [] },
  ];

  const handleMenuChange = (path: string) => {
    console.log('选中菜单路径：', path);
  };
</script>

<template>
  <div style="width: 300px">
    <TsMenu v-model="activePath" :menus="iconMenus" @change="handleMenuChange" :ssg="false">
      <template #prefix="{ data }">
        <BussinessViconsIcon :icon="data.icon" />
      </template>
    </TsMenu>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  const activePath = ref('/path1');
  const iconMenus = [
    { path: '/path1', name: '菜单1', icon: 'HomeRound', children: [] },
    { path: '/path2', name: '菜单2', icon: 'AdminPanelSettingsFilled', children: [] },
    { path: '/path3', name: '菜单3', icon: 'DynamicFormSharp', children: [] },
  ];

  const handleMenuChange = (path: string) => {
    console.log('选中菜单路径：', path);
  };
</script>

<template>
  <TsMenu v-model="activePath2" :menus="nestedMenus" @change="handleMenuChange" :ssg="false"/>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue';
  const activePath2 = ref('/nested/path1');

  const nestedMenus = [
    {
      path: '/nested',
      name: '多级菜单',
      children: [
        { path: '/nested/path1', name: '子菜单 1',  children: [] },
        {
          path: '/nested/group',
          name: '子菜单组',
          children: [
            { path: '/nested/group/item1', name: '分组项 1',  children: [] },
            { path: '/nested/group/item2', name: '分组项 2',  children: [] },
          ],
        },
      ],
    },
  ];
</script>

<template>
  <TsMenuGroup v-model="groupPath" @change="handleMenuChange" :ssg="false">
    <TsMenu :menus="iMenus" />
    <TsMenu :menus="tMenus" />
  </TsMenuGroup>
</template>

<script setup lang="ts">
  const groupPath = ref('/path2');

  const iMenus = [
    { path: '/path1', name: '菜单1',  children: [] },
    { path: '/path2', name: '菜单2',  children: [] },
    { path: '/path3', name: '菜单3',  children: [] },
  ];

  const tMenus = [
    { path: '/path5', name: '菜单5',  children: [] },
    { path: '/path6', name: '菜单6',  children: [] },
    { path: '/path7', name: '菜单7',  children: [] },
  ];

  const handleMenuChange = (path: string) => {
    console.log('选中菜单路径：', path);
  };
</script>

<template>
  <div style="display: flex; column-gap: 12px; margin-bottom: 24px">
    <TsButton @click="activePath3 = '/home'">changeTo: '/home'</TsButton>
    <TsButton @click="activePath3 = '/setting/menu'">changeTo: '/setting/menu'</TsButton>
    <TsButton @click="handleExpandPath('/setting/menu')">expand: '/setting/menu'</TsButton>
  </div>
  <div style="width: 300px">
    <TsMenu ref="expandMenuRef" v-model="activePath3" :menus="adaptationMenus" @change="handleMenuChange" :ssg="false">
      <template #prefix="{ data }">
        <BussinessViconsIcon icon="HomeRound" v-if="data.meta.icon" />
        <div style="margin-left: 28px" v-else></div>
      </template>
    </TsMenu>
  </div>
</template>

<script setup lang="ts">
  const expandMenuRef = ref<InstanceType<typeof TsMenu> | null>(null);
  const activePath = ref('/setting/user');

  const handleExpandPath = (path: string) => {
    expandMenuRef.value?.expandByPath(path);
  };

  const menuRouteData = [
    { path: '/home', name: 'home', meta: { title: '首页', icon: 'House' }, children: [] },
    {
      path: '/setting',
      component: null,
      meta: { title: '权限管理', icon: 'Setting' },
      children: [
        { path: '/setting/user', name: 'user', meta: { title: '用户管理' } },
        { path: '/setting/menu', name: 'menu', meta: { title: '菜单管理' } },
      ],
    },
    {
      path: '/editor',
      component: null,
      meta: { title: '编辑器', icon: 'ChatDotRound' },
      children: [{ path: '/editor/index', meta: { title: '编辑器' } }],
    },
    {
      path: '/img',
      component: null,
      meta: { title: '图片裁剪', icon: 'PictureFilled' },
      children: [{ path: '/img/index', meta: { title: '图片裁剪' } }],
    },
    {
      path: '/code',
      component: null,
      meta: { title: '代码管理', icon: 'NoSmoking' },
      children: [{ path: '/code/index', meta: { title: '代码管理' } }],
    },
  ];

  const adaptationMenus = computed(() => {
    return menuRouteData.map((item: any) => {
      item.name = item.meta.title;
      item.children.map((child: any) => {
        child.name = child.meta.title;
        return child;
      });
      return item;
    });
  });

  const handleMenuChange = (path: string) => {
    console.log('选中菜单路径：', path);
  };
</script>

<template>
  <TsMenu :value="activeUncontrolledPath" :menus="iMenus" @change="handleUncontrolledPath" :ssg="false" />
</template>

<script setup lang="ts">
  const activeUncontrolledPath = ref('/path1');

  const iMenus = [
    { path: '/path1', name: '菜单1',  children: [] },
    { path: '/path2', name: '菜单2',  children: [] },
    { path: '/path3', name: '菜单3',  children: [] },
  ];

  const handleUncontrolledPath = (path: string) => {
    activeUncontrolledPath.value = path;
  };
</script>