refactor: layout
This commit is contained in:
@@ -5,16 +5,16 @@ function renderIcon(icon: Component): () => VNode {
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ChevronDown } from '@vicons/ionicons5';
|
||||
import ThemeSwitch from '@/components/theme-switch.vue';
|
||||
import { useStationListQuery } from '@/composables/query/use-station-list-query';
|
||||
import { useStationStore } from '@/stores/station';
|
||||
import { useUserStore } from '@/stores/user';
|
||||
import { AlertFilled, AreaChartOutlined, FileTextFilled, HomeFilled, LogoutOutlined, VideoCameraFilled } from '@vicons/antd';
|
||||
import { ChevronDown } from '@vicons/carbon';
|
||||
import { NButton, NDropdown, NFlex, NIcon, NLayout, NLayoutContent, NLayoutFooter, NLayoutHeader, NLayoutSider, NMenu, NScrollbar, type DropdownOption, type MenuOption } from 'naive-ui';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { h, onBeforeMount, onBeforeUnmount, ref, type Component, type VNode } from 'vue';
|
||||
import { RouterLink, useRoute, useRouter } from 'vue-router';
|
||||
import ThemeSwitch from '@/components/theme-switch.vue';
|
||||
import { useUserStore } from '@/stores/user';
|
||||
import { useStationStore } from '@/stores/station';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useStationListQuery } from '@/composables/query/use-station-list-query';
|
||||
|
||||
const userStore = useUserStore();
|
||||
const { userInfo } = storeToRefs(userStore);
|
||||
@@ -51,15 +51,21 @@ const menuOptions = ref<MenuOption[]>([
|
||||
key: '/alarm',
|
||||
icon: renderIcon(AlertFilled),
|
||||
},
|
||||
// {
|
||||
// label: () => h(RouterLink, { to: '/statistics' }, { default: () => '设备性能统计' }),
|
||||
// key: '/statistics',
|
||||
// icon: renderIcon(AreaChartOutlined),
|
||||
// },
|
||||
{
|
||||
label: () => h(RouterLink, { to: '/statistics' }, { default: () => '设备性能统计' }),
|
||||
key: '/statistics',
|
||||
icon: renderIcon(AreaChartOutlined),
|
||||
},
|
||||
{
|
||||
label: () => h(RouterLink, { to: '/log' }, { default: () => '系统日志记录' }),
|
||||
key: '/log',
|
||||
label: () => h(RouterLink, { to: '/log/vimp-log' }, { default: () => '视频平台日志' }), // '系统日志记录'
|
||||
key: '/log/vimp-log',
|
||||
icon: renderIcon(FileTextFilled),
|
||||
// children: [
|
||||
// {
|
||||
// label: () => h(RouterLink, { to: '/log/vimp-log' }, { default: () => '视频平台日志' }),
|
||||
// key: '/log/vimp-log',
|
||||
// },
|
||||
// ],
|
||||
},
|
||||
]);
|
||||
|
||||
@@ -80,6 +86,8 @@ const selectDropdownOption = (key: string, option: DropdownOption) => {
|
||||
option['onClick']();
|
||||
}
|
||||
};
|
||||
|
||||
const toDashboardPage = () => router.push('/');
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -91,13 +99,13 @@ const selectDropdownOption = (key: string, option: DropdownOption) => {
|
||||
<NLayout :native-scrollbar="false">
|
||||
<NLayoutHeader bordered class="app-layout-header">
|
||||
<NFlex justify="space-between" align="center" :size="8" style="width: 100%; height: 100%">
|
||||
<span style="font-size: 16px; font-weight: 500; margin-left: 16px">网络设备管理平台</span>
|
||||
<span style="font-size: 16px; font-weight: 500; margin-left: 16px; cursor: pointer" @click="toDashboardPage">网络设备管理平台</span>
|
||||
<NFlex align="center" :size="8">
|
||||
<ThemeSwitch />
|
||||
<NDropdown trigger="hover" show-arrow :options="dropdownOptions" @select="selectDropdownOption">
|
||||
<NButton secondary icon-placement="right" style="margin-right: 8px">
|
||||
<template #default>
|
||||
<span>你好,{{ userInfo?.nickName ?? '' }}</span>
|
||||
<span>{{ userInfo?.nickName ?? '' }}</span>
|
||||
</template>
|
||||
<template #icon>
|
||||
<NIcon :component="ChevronDown" />
|
||||
|
||||
Reference in New Issue
Block a user