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>

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

@@ -0,0 +1,16 @@
+<template>
+  <router-link to="/" class="nowrap-hidden flex-center h-64px">
+    <img src="@/assets/img/common/logo.png" alt="" class="w-32px h-32px" />
+    <h2 v-show="showTitle" class="pl-8px text-16px text-primary font-bold">{{ title }}</h2>
+  </router-link>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useAppStore } from '@/store';
+
+const app = useAppStore();
+const showTitle = computed(() => !app.themeSettings.menuStyle.collapsed);
+const title = import.meta.env.VITE_APP_TITLE as string;
+</script>
+<style scoped></style>

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

@@ -0,0 +1,6 @@
+<template>
+  <div>菜单</div>
+</template>
+
+<script lang="ts" setup></script>
+<style scoped></style>

src/layouts/BasicLayout/components/SettingDrawer/components/DarkMode.vue

@@ -0,0 +1,25 @@
+<template>
+  <n-divider title-placement="center">深色主题</n-divider>
+  <div class="flex-center">
+    <n-switch v-model:value="app.themeSettings.darkMode">
+      <template #checked>
+        <icon-mdi-white-balance-sunny class="text-14px text-primary" />
+      </template>
+      <template #unchecked>
+        <icon-mdi-moon-waning-crescent class="text-14px text-primary" />
+      </template>
+    </n-switch>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { NDivider, NSwitch } from 'naive-ui';
+import { useAppStore } from '@/store';
+
+const app = useAppStore();
+</script>
+<style scoped>
+:deep(.n-switch__rail) {
+  background-color: #000e1c !important;
+}
+</style>

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

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

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

@@ -0,0 +1,16 @@
+<template>
+  <n-drawer v-model:show="app.settingDrawer.visible">
+    <n-drawer-content title="主题配置">
+      <dark-mode />
+    </n-drawer-content>
+  </n-drawer>
+</template>
+
+<script lang="ts" setup>
+import { NDrawer, NDrawerContent } from 'naive-ui';
+import { useAppStore } from '@/store';
+import { DarkMode } from './components';
+
+const app = useAppStore();
+</script>
+<style scoped></style>

src/layouts/BasicLayout/components/index.ts

@@ -0,0 +1,6 @@
+import GlobalHeader from './GlobalHeader/index.vue';
+import GlobalLogo from './GlobalLogo/index.vue';
+import GlobalMenu from './GlobalMenu/index.vue';
+import SettingDrawer from './SettingDrawer/index.vue';
+
+export { GlobalHeader, GlobalLogo, GlobalMenu, SettingDrawer };