feat: SettingsDrawer

src/components/global/settings-drawer.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { NDivider, NDrawer, NDrawerContent, NFlex } from 'naive-ui';
+import ThemeSwitch from './theme-switch.vue';
+
+const show = defineModel<boolean>('show');
+</script>
+
+<template>
+  <NDrawer v-model:show="show" :width="330">
+    <NDrawerContent closable title="系统设置" :native-scrollbar="false">
+      <NFlex vertical justify="center">
+        <NDivider>主题</NDivider>
+        <ThemeSwitch />
+      </NFlex>
+    </NDrawerContent>
+  </NDrawer>
+</template>
+
+<style scoped lang="scss"></style>

src/components/global/theme-switch.vue

@@ -3,13 +3,16 @@ import { useThemeStore } from '@/stores/theme';
 import { MoonOutline, SunnyOutline } from '@vicons/ionicons5';
 import { NIcon, NSwitch } from 'naive-ui';
 import { storeToRefs } from 'pinia';
+import type { ComponentInstance } from 'vue';
 
 const themeStore = useThemeStore();
 const { darkThemeEnabled } = storeToRefs(themeStore);
+
+defineExpose({} as ComponentInstance<typeof NSwitch>);
 </script>
 
 <template>
-  <NSwitch v-model:value="darkThemeEnabled" size="small">
+  <NSwitch v-model:value="darkThemeEnabled">
     <template #unchecked-icon>
       <NIcon :component="SunnyOutline" />
     </template>

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