refactor: layout
This commit is contained in:
@@ -5,16 +5,16 @@ function renderIcon(icon: Component): () => VNode {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<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 { 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 { 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 { h, onBeforeMount, onBeforeUnmount, ref, type Component, type VNode } from 'vue';
|
||||||
import { RouterLink, useRoute, useRouter } from 'vue-router';
|
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 userStore = useUserStore();
|
||||||
const { userInfo } = storeToRefs(userStore);
|
const { userInfo } = storeToRefs(userStore);
|
||||||
@@ -51,15 +51,21 @@ const menuOptions = ref<MenuOption[]>([
|
|||||||
key: '/alarm',
|
key: '/alarm',
|
||||||
icon: renderIcon(AlertFilled),
|
icon: renderIcon(AlertFilled),
|
||||||
},
|
},
|
||||||
|
// {
|
||||||
|
// label: () => h(RouterLink, { to: '/statistics' }, { default: () => '设备性能统计' }),
|
||||||
|
// key: '/statistics',
|
||||||
|
// icon: renderIcon(AreaChartOutlined),
|
||||||
|
// },
|
||||||
{
|
{
|
||||||
label: () => h(RouterLink, { to: '/statistics' }, { default: () => '设备性能统计' }),
|
label: () => h(RouterLink, { to: '/log/vimp-log' }, { default: () => '视频平台日志' }), // '系统日志记录'
|
||||||
key: '/statistics',
|
key: '/log/vimp-log',
|
||||||
icon: renderIcon(AreaChartOutlined),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: () => h(RouterLink, { to: '/log' }, { default: () => '系统日志记录' }),
|
|
||||||
key: '/log',
|
|
||||||
icon: renderIcon(FileTextFilled),
|
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']();
|
option['onClick']();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const toDashboardPage = () => router.push('/');
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@@ -91,13 +99,13 @@ const selectDropdownOption = (key: string, option: DropdownOption) => {
|
|||||||
<NLayout :native-scrollbar="false">
|
<NLayout :native-scrollbar="false">
|
||||||
<NLayoutHeader bordered class="app-layout-header">
|
<NLayoutHeader bordered class="app-layout-header">
|
||||||
<NFlex justify="space-between" align="center" :size="8" style="width: 100%; height: 100%">
|
<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">
|
<NFlex align="center" :size="8">
|
||||||
<ThemeSwitch />
|
<ThemeSwitch />
|
||||||
<NDropdown trigger="hover" show-arrow :options="dropdownOptions" @select="selectDropdownOption">
|
<NDropdown trigger="hover" show-arrow :options="dropdownOptions" @select="selectDropdownOption">
|
||||||
<NButton secondary icon-placement="right" style="margin-right: 8px">
|
<NButton secondary icon-placement="right" style="margin-right: 8px">
|
||||||
<template #default>
|
<template #default>
|
||||||
<span>你好,{{ userInfo?.nickName ?? '' }}</span>
|
<span>{{ userInfo?.nickName ?? '' }}</span>
|
||||||
</template>
|
</template>
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<NIcon :component="ChevronDown" />
|
<NIcon :component="ChevronDown" />
|
||||||
|
|||||||
Reference in New Issue
Block a user