skycurtain/ndm-web-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: fold/expand menu

Browse Source
This commit is contained in:
yangsy
2025-11-28 00:13:05 +08:00
parent 7f9d868643
commit fb7657f99c
3 changed files with 39 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/layouts/app-layout.vue
View File

@@ -9,9 +9,20 @@ import { SettingsDrawer } from '@/components';
import { useStompClient } from '@/composables';
import { useLineStationsQuery } from '@/composables';
import { LINE_STATIONS_QUERY_KEY, LINE_DEVICES_QUERY_KEY, LINE_ALARMS_QUERY_KEY } from '@/constants';
import { useAlarmStore, useUserStore } from '@/stores';
import { useAlarmStore, useSettingStore, useUserStore } from '@/stores';
import { useIsFetching } from '@tanstack/vue-query';
import { AlertFilled, BugFilled, CaretDownFilled, EnvironmentFilled, /* AreaChartOutlined, */ FileTextFilled, HddFilled, LogoutOutlined, SettingOutlined } from '@vicons/antd';
import {
AlertFilled,
BugFilled,
CaretDownFilled,
DoubleLeftOutlined,
DoubleRightOutlined,
EnvironmentFilled,
/* AreaChartOutlined, */ FileTextFilled,
HddFilled,
LogoutOutlined,
SettingOutlined,
} from '@vicons/antd';
import type { AxiosError } from 'axios';
import { NBadge, NButton, NDropdown, NFlex, NIcon, NLayout, NLayoutContent, NLayoutFooter, NLayoutHeader, NLayoutSider, NMenu, NScrollbar, type DropdownOption, type MenuOption } from 'naive-ui';
import { storeToRefs } from 'pinia';
@@ -26,6 +37,13 @@ const { userInfo } = storeToRefs(userStore);
const alarmStore = useAlarmStore();
const { unreadAlarmCount } = storeToRefs(alarmStore);
const settingStore = useSettingStore();
const { menuCollpased } = storeToRefs(settingStore);
const onToggleMenuCollapsed = () => {
menuCollpased.value = !menuCollpased.value;
};
const { error: stationListQueryError } = useLineStationsQuery();
watch(stationListQueryError, (newStationListQueryError) => {
@@ -134,8 +152,15 @@ const openSettingsDrawer = () => {
<template>
<NScrollbar x-scrollable style="width: 100vw; height: 100vh">
<NLayout has-sider :content-style="{ 'min-width': '1400px' }">
<NLayoutSider bordered collapsed collapse-mode="width" :collapsed-width="64">
<NMenu collapsed :collapsed-width="64" :collapsed-icon-size="20" :value="route.path" :options="menuOptions" />
<NLayoutSider bordered :collapsed="menuCollpased" collapse-mode="width" :collapsed-width="64" @update:collapsed="onToggleMenuCollapsed">
<NFlex vertical justify="space-between" :size="0" style="height: 100%">
<NMenu :collapsed="menuCollpased" :collapsed-width="64" :collapsed-icon-size="20" :value="route.path" :options="menuOptions" />
<NButton block quaternary :focusable="false" @click="onToggleMenuCollapsed">
<template #icon>
<NIcon :component="menuCollpased ? DoubleRightOutlined : DoubleLeftOutlined" />
</template>
</NButton>
</NFlex>
</NLayoutSider>
<NLayout :native-scrollbar="false">
<NLayoutHeader bordered class="app-layout-header">
@@ -145,7 +170,6 @@ const openSettingsDrawer = () => {
<NButton text size="tiny" :loading="fetchingCount > 0" />
</NFlex>
<NFlex align="center" :size="0" style="height: 100%">
<!-- <ThemeSwitch /> -->
<NDropdown trigger="hover" show-arrow :options="dropdownOptions" @select="selectDropdownOption">
<NButton :focusable="false" quaternary icon-placement="right" style="height: 100%">
<template #default>