feat(projects): theme store完成

src/layouts/common/GlobalFooter/index.vue

@@ -0,0 +1,10 @@
+<template>
+  <dark-mode-container class="flex-center h-full">
+    <span>Copyright ©2021 Soybean Admin</span>
+  </dark-mode-container>
+</template>
+
+<script setup lang="ts">
+import { DarkModeContainer } from '@/components';
+</script>
+<style scoped></style>

src/layouts/common/GlobalHeader/index.vue

@@ -0,0 +1,12 @@
+<template>
+  <dark-mode-container class="global-header flex-y-center h-full"></dark-mode-container>
+</template>
+
+<script setup lang="ts">
+import { DarkModeContainer } from '@/components';
+</script>
+<style scoped>
+.global-header {
+  box-shadow: 0 1px 2px rgb(0 21 41 / 8%);
+}
+</style>

src/layouts/common/GlobalSider/index.vue

@@ -0,0 +1,12 @@
+<template>
+  <dark-mode-container class="global-sider flex-y-center h-full"></dark-mode-container>
+</template>
+
+<script setup lang="ts">
+import { DarkModeContainer } from '@/components';
+</script>
+<style scoped>
+.global-sider {
+  box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
+}
+</style>

src/layouts/common/GlobalTab/index.vue

@@ -0,0 +1,12 @@
+<template>
+  <dark-mode-container class="global-tab flex-y-center h-full"></dark-mode-container>
+</template>
+
+<script setup lang="ts">
+import { DarkModeContainer } from '@/components';
+</script>
+<style scoped>
+.global-tab {
+  box-shadow: 0 1px 2px rgb(0 21 41 / 8%);
+}
+</style>

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

@@ -1,10 +1,12 @@
 <template>
   <n-button
-    class="fixed top-240px right-14px z-10000"
-    :class="{ '!right-330px': app.settingDrawerVisible }"
+    type="primary"
+    :class="[{ '!right-330px': app.settingDrawerVisible }, app.settingDrawerVisible ? 'ease-out' : 'ease-in']"
+    class="fixed top-240px right-14px z-10000 w-42px h-42px !p-0 transition-all duration-300"
     @click="toggleSettingdrawerVisible"
   >
-    点击
+    <icon-ant-design:close-outlined v-if="app.settingDrawerVisible" class="text-24px" />
+    <icon-ant-design:setting-outlined v-else class="text-24px" />
   </n-button>
 </template>
 

src/layouts/common/index.ts

@@ -1,4 +1,8 @@
 import SettingDrawer from './SettingDrawer/index.vue';
+import GlobalHeader from './GlobalHeader/index.vue';
+import GlobalTab from './GlobalTab/index.vue';
+import GlobalSider from './GlobalSider/index.vue';
 import GlobalContent from './GlobalContent/index.vue';
+import GlobalFooter from './GlobalFooter/index.vue';
 
-export { SettingDrawer, GlobalContent };
+export { SettingDrawer, GlobalHeader, GlobalTab, GlobalSider, GlobalContent, GlobalFooter };