Tui

<template>
  <div class="menu-basic-demo">
    <div class="menu-basic-block">
      <div class="menu-basic-title">受控：v-model</div>
      <TsMenu v-model="activeBasePath" :menus="iMenus" @change="handleControlledChange" :ssg="false" />
    </div>

    <div class="menu-basic-block">
      <div class="menu-basic-title">非受控：value + change</div>
      <TsMenu :value="activeUncontrolledPath" :menus="iMenus" @change="handleUncontrolledChange" :ssg="false" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import type { MenuItem } from 'tui/components/base/TsMenuBase.vue';

const activeBasePath = ref('/path1');
const activeUncontrolledPath = ref('/path2');

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

const handleControlledChange = (item: MenuItem) => {
  console.log('受控模式选中菜单路径：', item.path);
};

const handleUncontrolledChange = (item: MenuItem) => {
  activeUncontrolledPath.value = item.path;
};
</script>

<style scoped>
.menu-basic-demo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.menu-basic-block {
  max-width: 300px;
}

.menu-basic-title {
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--ts-text-color-secondary);
}

@media (max-width: 720px) {
  .menu-basic-demo {
    grid-template-columns: 1fr;
  }
}
</style>

<template>
  <div class="menu-layout-demo">
    <div class="menu-layout-col">
      <div class="menu-layout-title">默认样式（itemHeight=42，itemColumnGap=6）</div>
      <TsMenu v-model="defaultActivePath" :menus="menus" :ssg="false" />
    </div>

    <div class="menu-layout-col">
      <div class="menu-layout-title">自定义样式（itemHeight=50，itemColumnGap=12）</div>
      <TsMenu v-model="customActivePath" :menus="menus" :itemHeight="50" :itemColumnGap="12" :ssg="false" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const defaultActivePath = ref('/overview');
const customActivePath = ref('/overview');

const menus = [
  { path: '/overview', name: '概览', children: [] },
  { path: '/analysis', name: '分析页', children: [] },
  { path: '/users', name: '用户管理', children: [] },
  { path: '/settings', name: '系统设置', children: [] },
];
</script>

<style scoped>
.menu-layout-demo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.menu-layout-col {
  width: 100%;
  max-width: 320px;
}

.menu-layout-title {
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--ts-text-color-secondary);
}

@media (max-width: 720px) {
  .menu-layout-demo {
    grid-template-columns: 1fr;
  }
}
</style>

<template>
  <div class="menu-horizontal-demo">
    <div class="menu-horizontal-title">一个示例同时演示：一级菜单 + 二级下拉菜单</div>
    <div class="menu-horizontal-bar">
      <TsMenu v-model="activePath" :menus="mixedMenus" direction="horizontal" :ssg="false" />
    </div>
    <div class="menu-horizontal-tip">
      当前选中路径：
      <span>{{ activePath }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TsMenu } from 'tui';

const mixedMenus = [
  { path: '/overview', name: '概览' },
  { path: '/dashboard', name: '看板' },
  {
    path: '/project',
    name: '项目管理',
    children: [
      { path: '/project/list', name: '项目列表' },
      { path: '/project/member', name: '成员管理' },
      { path: '/project/release', name: '发布记录' },
    ],
  },
  { path: '/message', name: '消息中心' },
  {
    path: '/setting-group',
    name: '系统设置',
    children: [
      { path: '/setting/profile', name: '个人设置' },
      { path: '/setting/safe', name: '安全策略' },
    ],
  },
];

const activePath = ref('/project/list');
</script>

<style scoped>
.menu-horizontal-demo {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.menu-horizontal-title {
  font-size: 13px;
  color: var(--ts-text-color-secondary);
}

.menu-horizontal-bar {
  padding: 8px 10px;
  border: 1px dashed var(--ts-border-color-header);
  border-radius: var(--ts-radius);
}

.menu-horizontal-tip {
  font-size: 12px;
  color: var(--ts-text-color-secondary);
}

.menu-horizontal-tip span {
  color: var(--ts-color-blue);
}
</style>

<template>
  <div style="width: 300px">
    <TsMenu v-model="activePath" :menus="nestedMenus" :ssg="false" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const activePath = 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>
  <div style="width: 300px">
    <TsMenuGroup v-model="groupPath" :ssg="false">
      <TsMenu :menus="iMenus" />
      <TsMenu :menus="tMenus" />
    </TsMenuGroup>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';

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: [] },
];
</script>

<template>
  <div class="component-card-demo-wrap" style="margin-bottom: 24px">
    <TsButton @click="activePath3 = '/home'">changeTo: '/home'</TsButton>
    <TsButton @click="activePath3 = '/setting/menu'">changeTo: '/setting/menu'</TsButton>
    <TsButton @click="handleExpandPath()">expand: 'v-model value'</TsButton>
    <TsButton @click="handleExpandPath('/editor/index')">expand: '/editor/index'</TsButton>
  </div>
  <div style="width: 300px">
    <TsMenu ref="expandMenuRef" v-model="activePath3" :menus="adaptationMenus" :ssg="false">
      <template #content-prefix="{ item }">
        <BussinessViconsIcon icon="HomeRound" v-if="item.meta.icon" />
        <div style="margin-left: 28px" v-else></div>
      </template>
    </TsMenu>
  </div>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue';
import type { TsMenuInstance } from 'tui/components/menu';
import BussinessViconsIcon from '@/components/BussinessViconsIcon.vue';


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 activePath3 = ref('/setting/menu');
const expandMenuRef = ref<TsMenuInstance>();

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 handleExpandPath = (path?: string) => {
  expandMenuRef.value?.expandByPath(path);
};
</script>

<template>
  <div class="menu-prefix-suffix-demo">
    <TsMenu v-model="activePath" :menus="menus" :ssg="false">
      <template #content-prefix="{ item }">
        <span class="menu-prefix-dot" :style="{ backgroundColor: item.dotColor }" />
      </template>
      <template #content-suffix="{ item }">
        <span v-if="item.badge" class="menu-suffix-badge">{{ item.badge }}</span>
        <span v-else-if="item.statusText" class="menu-suffix-status">{{ item.statusText }}</span>
      </template>
    </TsMenu>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const activePath = ref('/dashboard');
const menus = [
  { path: '/dashboard', name: '仪表盘', dotColor: '#0d8ef7', badge: '12' },
  { path: '/message', name: '消息中心', dotColor: '#ff7d00', badge: '5' },
  { path: '/deploy', name: '发布记录', dotColor: '#23c343', statusText: 'online' },
  { path: '/archive', name: '归档中心', dotColor: '#909399' },
];
</script>

<style scoped>
.menu-prefix-suffix-demo {
  width: 320px;
}

.menu-prefix-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.menu-suffix-badge {
  min-width: 18px;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
  color: #fff;
  margin-left: 6px;
  background: var(--ts-color-blue);
}

.menu-suffix-status {
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 10px;
  line-height: 1.2;
  color: #0b7a2e;
  margin-left: 6px;
  background: rgba(35, 195, 67, 0.14);
}
</style>