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 };

src/layouts/BasicLayout/index.vue

@@ -1,15 +1,67 @@
 <template>
-  <n-layout has-sider>
-    <n-layout-sider />
-    <n-layout>
-      <n-layout-header></n-layout-header>
-      <n-layout-content>
+  <n-layout has-sider :position="position">
+    <n-layout-sider
+      class="layout-sider min-h-100vh"
+      :native-scrollbar="false"
+      :inverted="inverted"
+      collapse-mode="width"
+      :collapsed="app.themeSettings.menuStyle.collapsed"
+      :collapsed-width="app.themeSettings.menuStyle.collapsedWidth"
+      :width="menuWidth"
+      @collapse="handleMenuCollapse(true)"
+      @expand="handleMenuCollapse(false)"
+    >
+      <global-logo />
+      <global-menu />
+    </n-layout-sider>
+    <n-layout :inverted="inverted">
+      <n-layout-header :position="position" :inverted="headerInverted" class="z-10">
+        <global-header class="header-height" />
+      </n-layout-header>
+      <n-layout-content class="main-padding flex-auto min-h-100vh">
         <router-view />
       </n-layout-content>
       <n-layout-footer></n-layout-footer>
     </n-layout>
+    <setting-drawer />
   </n-layout>
 </template>
 
-<script lang="ts" setup></script>
-<style scoped></style>
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { NLayout, NLayoutSider, NLayoutHeader, NLayoutContent, NLayoutFooter } from 'naive-ui';
+import { useAppStore } from '@/store';
+import { GlobalHeader, GlobalLogo, GlobalMenu, SettingDrawer } from './components';
+
+const app = useAppStore();
+const { handleMenuCollapse } = useAppStore();
+
+const position = computed(() => (app.themeSettings.headerStyle.fixed ? 'absolute' : 'static'));
+const menuWidth = computed(() => {
+  const { collapsed, collapsedWidth, width } = app.themeSettings.menuStyle;
+  return collapsed ? collapsedWidth : width;
+});
+const inverted = computed(() => {
+  const { theme } = app.themeSettings.navStyle;
+  return theme !== 'light';
+});
+const headerInverted = computed(() => {
+  const { theme } = app.themeSettings.navStyle;
+  return theme !== 'dark' ? inverted.value : !inverted.value;
+});
+const headerHeight = computed(() => {
+  const { height } = app.themeSettings.headerStyle;
+  return `${height}px`;
+});
+</script>
+<style scoped>
+.layout-sider {
+  box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
+}
+.header-height {
+  height: v-bind(headerHeight);
+}
+.main-padding {
+  padding-top: v-bind(headerHeight);
+}
+</style>