web/src/pages/index.vue

<template>
  <n-layout has-sider>
    <n-layout-sider
      v-model:collapsed="isTrigger"
      bordered
      show-trigger
      collapse-mode="width"
      width="216"
      :native-scrollbar="false"
    >
      <n-menu
        v-model:value="selectedKey"
        accordion
        :collapsed-icon-size="24"
        :options="menuOptions"
      />
    </n-layout-sider>
    <n-layout>
      <router-view />
    </n-layout>
  </n-layout>
</template>
<script setup lang="ts">
import {
  h, onMounted, onUnmounted, ref
} from 'vue'
import Icon from '@/components/icon.vue'
import { RouterLink, useRoute } from 'vue-router'

const isTrigger = ref(false)
const menuOptions = [
  {
    label: () => h('img', {
      src: new URL('@/assets/icons/1.svg', import.meta.url).href,
      width: '100%',
      height: '100%'
    }),
    icon: () => h(Icon, {
      name: '2',
      size: 24
    }),
    disabled: true,
    key: ''
  },
  {
    icon: () => h('img', {
      src: new URL('@/assets/icons/3.svg', import.meta.url).href,
      width: (isTrigger.value ? '24px' : '60px'),
      height: (isTrigger.value ? '24px' : '60px'),
      style: {
        transition: '0.2s'
      }
    }),
    label: () => h('div', {
      style: {
        margin: '0 0 0 15px'
      }
    }, [
      h('p', {
        style: {
          margin: 0
        }
      }, { default: () => '欢迎回家' }),
      h('p', {
        style: {
          margin: 0
        }
      }, { default: () => '捷克' })
    ]),
    disabled: true,
    key: ''
  },
  {
    label: () => h(RouterLink, { to: { path: '/room' } }, { default: () => '房间' }),
    key: 'room',
    icon: () => h(Icon, { name: '4', size: 24 })
  },
  {
    label: () => h(RouterLink, { to: { path: '/device' } }, { default: () => '设备' }),
    key: 'device',
    icon: () => h(Icon, { name: '5', size: 24 })
  },
  {
    label: () => h(RouterLink, { to: { path: '/person' } }, { default: () => '成员' }),
    key: 'person',
    icon: () => h(Icon, { name: '6', size: 24 })
  },
  {
    label: () => h(RouterLink, { to: { path: '/static' } }, { default: () => '统计' }),
    key: 'static',
    icon: () => h(Icon, { name: '7', size: 24 })
  },
  {
    label: () => h(RouterLink, { to: { path: '/seting' } }, { default: () => '设置' }),
    key: 'seting',
    icon: () => h(Icon, { name: '8', size: 24 })
  },
  {
    label: () => h(RouterLink, { to: { path: '/' } }, { default: () => '退出' }),
    key: 'logout',
    icon: () => h(Icon, { name: '9', size: 24 })
  }
]
const route = useRoute()
const selectedKey = ref(route.name)

function changeTrigger() {
  isTrigger.value = document.documentElement.clientWidth < 550
}
window.addEventListener('resize', changeTrigger, false)
onMounted(() => changeTrigger())
onUnmounted(() => window.removeEventListener('resize', changeTrigger, false))
</script>
<style lang="scss" scoped>
:deep(.n-menu) {
  --n-item-height: 55px;
  height: 100%;
  padding: 0;

  .n-menu-item-content {
    padding-right: 32px;
  }

  &>div {
    &:first-child {
      margin: 0;
      --n-item-height: 80px;

      &>div {
        height: 80px;
        position: relative;
        opacity: 1;

        &::after {
          content: '';
          width: 80%;
          height: 2px;
          background: var(--n-border-color);
          position: absolute;
          left: 50%;
          transform: translate(-50%, 0);
          bottom: 0;
        }
      }
    }

    &:nth-child(2) {
      --n-item-height: 80px;
      margin: 20px 0 60px 0;

      &>div {
        opacity: 1;
      }
    }

  }

}
</style>