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