feat(components): 添加主题配置抽屉，添加暗黑主题

src/layouts/BasicLayout/components/GlobalHeader/components/HeaderItemContainer.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="flex-center cursor-pointer hover:bg-[#f6f6f6] dark:hover:bg-[#333]">
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup></script>
+<style scoped></style>

src/layouts/BasicLayout/components/GlobalHeader/components/index.ts

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

src/layouts/BasicLayout/components/GlobalHeader/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="global-header flex-y-center justify-between">
+    <h2>123</h2>
+    <header-item-container class="w-40px h-full" @click="openSettingDrawer">
+      <icon-mdi-light-cog class="text-16px" />
+    </header-item-container>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useAppStore } from '@/store';
+import { HeaderItemContainer } from './components';
+
+const { openSettingDrawer } = useAppStore();
+</script>
+<style scoped>
+.global-header {
+  box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
+}
+</style>