Business components based on vue3 and Element Plus

Using npm:

npm i @devotee/layout
yarn add @devotee/layout
pnpm install @devotee/layout

Quick Start

import TriLayout from '@devotee/layout'
import '@devotee/layout/dist/css/style.css' // 样式

template

<template>
  <tri-layout
    :logo="logo"
    :theme="theme"
    :badge="badgeData"
    :active="active"
    :layout="overview"
    :collapse="collapse"
    :breadcrumb="breadcrumbList"
    :class="submenus ? 'has-submenu' : ''"
    @modify="onModify"
    @layout="onLayout"
    @update="onUpdate"
    @update1="onUpdate1"
    @logout="onLogout"
    @logout1="onLogout1"
    @password="onPassword"
    @navigate="onNavigate"
    @password1="onPassword1"
    @collapse="onCollapse as any"
  >
    <div>dsfsdf</div>
    <template #footer>footer</template>
    <template #server> <aside-server :logo="logo" name="巨旦科技" desc="巨旦科技" /></template>
    <template #submenu v-if="submenus"><submenu-list :data="submenus" :active="active" /></template>
  </tri-layout>
</template>

<script lang="ts" setup>
import logo from '@/assets/logo.svg'
import menus from './data/menus'
import layout from './data/layout'
import TriLayout from '@packages/index'
import AsideServer from './components/AsideServer.vue'
import SubmenuList from './components/SubmenuList.vue'
import { provide, computed, ref } from 'vue'
import { Setting, ChatLineSquare } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
import { traverseMatched } from '@/utils/utils'

const theme = ref()
const route = useRoute()
const active = computed<any>(() => route.name)
const collapse = ref()
const overview = ref(horizontal(collapse.value))
const badgeData = { about: 60 }
const menuList = computed(() => menus.map((item: any) => ({ path: item.path, name: item.name, meta: item.meta })))
const submenus = computed<any>(() => traverseMatched(menus, route.matched)?.[0])
const onUpdate = (data: any) => console.log('onUpdate', data)
const onUpdate1 = (data: any) => console.log('onUpdate1', data)
const onModify = (data: any) => ((theme.value = data), console.log(data))
const onLayout = (data: any) => (overview.value = layout[data](collapse.value))
const onLogout = (data: any) => console.log('onLogout', data)
const onLogout1 = (data: any) => console.log('onLogout1', data)
const onPassword = (data: any) => console.log('onPassword', data)
const onNavigate = (data: any) => console.log('navigate', data)
const onPassword1 = (data: any) => console.log('onPassword1', data)
const breadcrumbList = computed(() => route.matched as any)

const actions = [
  { emit: 'navigate', label: '通知', icon: ChatLineSquare, badge: 'about' },
  { emit: 'navigate', label: '设置', icon: Setting },
  {
    label: '设置',
    icon: Setting,
    dropdown: [
      { emit: 'update1', label: '用户信息', icon: Setting },
      { emit: 'password1', label: '修改密码', icon: Setting, divided: true },
      { emit: 'logout1', label: '退出登录', icon: Setting, divided: true },
    ],
  },
]

const dropdown = [
  { emit: 'update', label: '用户信息' },
  { emit: 'password', label: '修改密码', divided: true },
  { emit: 'logout', label: '退出登录', divided: true },
]

function onCollapse(data: boolean) {
  collapse.value = data
  overview.value = layout.horizontal(data)
}

provide('menus', menuList.value) // 侧边菜单
provide('account', {}) // 用户信息
provide('separator', null) // 面包屑导航分割符
provide('direction', 'horizontal') // 布局放心 vertical
provide('menuOption', { iconType: 'component' })
provide('themeOption', {})
provide('cachedViews', []) // 缓存路由
provide('unfoldStyle', {}) // 导航操作
provide('unfoldButton', null) // 导航操作
provide('headerActions', actions) // 导航操作
provide('headerDropdown', dropdown) // 用户项目菜单
</script>

<style lang="scss" scoped></style>

layout

function horizontal(collapse: boolean) {
  return {
    name: 'viewport',
    class: 'tri-horizontal tri-layout',
    direction: 'row',
    children: [
      {
        name: 'sidebar',
        class: 'tri-sidebar',
        width: collapse ? 'var(--tri-sidebar-collapse-width)' : 'var(--tri-sidebar-width)',
        direction: 'column',
        children: [{ name: 'logo' }, { name: 'menus' }, { name: 'server' }, { name: 'submenu' }],
      },
      {
        tag: 'section',
        name: 'container',
        class: 'tri-container',
        direction: 'column',
        children: [
          {
            tag: 'header',
            name: 'header',
            class: 'tri-header',
            children: [
              { name: 'left', class: 'tri-header__left', children: [{ name: 'unfold' }, { name: 'breadcrumb' }] },
              { name: 'right', class: 'tri-header__right', children: [{ name: 'actions' }, { name: 'theme' }, { name: 'account' }] },
            ],
          },
          { name: 'content', class: 'tri-content' },
          { name: 'digital' },
        ],
      },
    ],
  }
}