refactor: layout

This commit is contained in:
yangsy
2025-08-24 02:04:32 +08:00
parent 5d131ee1df
commit fafd6cd29f

View File

@@ -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" />