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>
@@ -19,4 +22,4 @@ const { darkThemeEnabled } = storeToRefs(themeStore);
   </NSwitch>
 </template>
 
-<style scoped></style>
+<style scoped></style>