feat(projects): 添加抽屉

src/layouts/Layout/index.vue

@@ -38,6 +38,7 @@
       </div>
     </template>
   </soybean-layout>
+  <setting-drawer />
 </template>
 
 <script setup lang="ts">
@@ -46,7 +47,7 @@ import { NSpace, NButton, NSwitch, NRadioGroup, NRadio } from 'naive-ui';
 import { useElementSize } from '@vueuse/core';
 import { useBoolean } from '@/hooks';
 import { SoybeanLayout } from '@/package';
-import { GlobalContent } from '../common';
+import { SettingDrawer, GlobalContent } from '../common';
 
 type LayoutMode = 'vertical' | 'horizontal';
 

src/layouts/common/SettingDrawer/components/DrawerButton/index.vue

@@ -0,0 +1,18 @@
+<template>
+  <n-button
+    class="fixed top-240px right-14px z-10000"
+    :class="{ '!right-330px': app.settingDrawerVisible }"
+    @click="toggleSettingdrawerVisible"
+  >
+    点击
+  </n-button>
+</template>
+
+<script setup lang="ts">
+import { NButton } from 'naive-ui';
+import { useAppStore } from '@/store';
+
+const app = useAppStore();
+const { toggleSettingdrawerVisible } = useAppStore();
+</script>
+<style scoped></style>

src/layouts/common/SettingDrawer/components/index.ts

@@ -0,0 +1,3 @@
+import DrawerButton from './DrawerButton/index.vue';
+
+export { DrawerButton };

src/layouts/common/SettingDrawer/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <n-drawer :show="app.settingDrawerVisible" display-directive="show" :width="330" @mask-click="app.closeSettingDrawer">
+    <n-drawer-content title="主题配置" :native-scrollbar="false"></n-drawer-content>
+  </n-drawer>
+  <drawer-button />
+</template>
+
+<script setup lang="ts">
+import { NDrawer, NDrawerContent } from 'naive-ui';
+import { useAppStore } from '@/store';
+import { DrawerButton } from './components';
+
+const app = useAppStore();
+</script>
+<style scoped></style>

src/layouts/common/index.ts

@@ -1,3 +1,4 @@
+import SettingDrawer from './SettingDrawer/index.vue';
 import GlobalContent from './GlobalContent/index.vue';
 
-export { GlobalContent };
+export { SettingDrawer, GlobalContent };