feat: SettingsDrawer

src/layouts/app-layout.vue

@@ -6,12 +6,12 @@ function renderIcon(icon: Component): () => VNode {
 
 <script setup lang="ts">
 import type { NdmDeviceAlarmLogResultVO } from '@/apis/models';
-import ThemeSwitch from '@/components/global/theme-switch.vue';
+import SettingsDrawer from '@/components/global/settings-drawer.vue';
 import { useStationListQuery } from '@/composables/query';
 import { useCurrentAlarmsStore } from '@/stores/current-alarms';
 import { useUserStore } from '@/stores/user';
 import { Client as StompClient } from '@stomp/stompjs';
-import { AlertFilled, /* AreaChartOutlined, */ FileTextFilled, HomeFilled, LogoutOutlined, VideoCameraFilled } from '@vicons/antd';
+import { AlertFilled, /* AreaChartOutlined, */ FileTextFilled, HomeFilled, LogoutOutlined, SettingOutlined, VideoCameraFilled } from '@vicons/antd';
 import { ChevronDown, Debug } from '@vicons/carbon';
 import type { AxiosError } from 'axios';
 import { destr } from 'destr';
@@ -146,6 +146,11 @@ const toAlarmPage = () => {
     router.push('/alarm');
   }
 };
+
+const settingsDrawerShow = ref(false);
+const openSettingsDrawer = () => {
+  settingsDrawerShow.value = true;
+};
 </script>
 
 <template>
@@ -158,10 +163,10 @@ const toAlarmPage = () => {
         <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; cursor: pointer" @click="toDashboardPage">网络设备管理平台</span>
-            <NFlex align="center" :size="8">
-              <ThemeSwitch />
+            <NFlex align="center" :size="0" style="height: 100%">
+              <!-- <ThemeSwitch /> -->
               <NDropdown trigger="hover" show-arrow :options="dropdownOptions" @select="selectDropdownOption">
-                <NButton secondary icon-placement="right" style="margin-right: 8px">
+                <NButton :focusable="false" quaternary icon-placement="right" style="height: 100%">
                   <template #default>
                     <span>{{ userInfo?.nickName ?? '' }}</span>
                   </template>
@@ -170,6 +175,13 @@ const toAlarmPage = () => {
                   </template>
                 </NButton>
               </NDropdown>
+              <NButton :focusable="false" quaternary @click="openSettingsDrawer" style="height: 100%">
+                <template #icon>
+                  <NIcon>
+                    <SettingOutlined />
+                  </NIcon>
+                </template>
+              </NButton>
             </NFlex>
           </NFlex>
         </NLayoutHeader>
@@ -192,6 +204,7 @@ const toAlarmPage = () => {
       </NLayout>
     </NLayout>
   </NScrollbar>
+  <SettingsDrawer v-model:show="settingsDrawerShow" />
 </template>
 
 <style scoped lang="scss">