feat(projects): 新增主题配置：页面功能

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

@@ -1,7 +1,7 @@
 <template>
   <n-divider title-placement="center">深色主题</n-divider>
   <div class="flex-center">
-    <n-switch v-model:value="app.themeSettings.darkMode">
+    <n-switch :value="app.themeSettings.darkMode" @update:value="handleDarkMode">
       <template #checked>
         <icon-mdi-white-balance-sunny class="text-14px text-primary" />
       </template>
@@ -17,6 +17,7 @@ import { NDivider, NSwitch } from 'naive-ui';
 import { useAppStore } from '@/store';
 
 const app = useAppStore();
+const { handleDarkMode } = useAppStore();
 </script>
 <style scoped>
 :deep(.n-switch__rail) {

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

@@ -0,0 +1,22 @@
+<template>
+  <n-divider title-placement="center">界面功能</n-divider>
+  <n-space vertical size="large">
+    <div class="flex-y-center justify-between">
+      <span>分割菜单</span>
+      <n-switch :value="app.themeSettings.menuStyle.splitMenu" @update:value="handleSplitMenu" />
+    </div>
+    <div class="flex-y-center justify-between">
+      <span>固定头部</span>
+      <n-switch :value="app.themeSettings.headerStyle.fixed" @update:value="handleFixedHeader" />
+    </div>
+  </n-space>
+</template>
+
+<script lang="ts" setup>
+import { NDivider, NSpace, NSwitch } from 'naive-ui';
+import { useAppStore } from '@/store';
+
+const app = useAppStore();
+const { handleSplitMenu, handleFixedHeader } = useAppStore();
+</script>
+<style scoped></style>

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

@@ -0,0 +1,8 @@
+<template>
+  <n-divider title-placement="center">界面显示</n-divider>
+</template>
+
+<script lang="ts" setup>
+import { NDivider } from 'naive-ui';
+</script>
+<style scoped></style>

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

@@ -1,5 +1,7 @@
 import DarkMode from './DarkMode/index.vue';
 import NavMode from './NavMode/index.vue';
 import SystemTheme from './SystemTheme/index.vue';
+import PageFunc from './PageFunc/index.vue';
+import PageView from './PageView/index.vue';
 
-export { DarkMode, NavMode, SystemTheme };
+export { DarkMode, NavMode, SystemTheme, PageFunc, PageView };

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

@@ -4,6 +4,8 @@
       <dark-mode />
       <nav-mode />
       <system-theme />
+      <page-func />
+      <page-view />
     </n-drawer-content>
   </n-drawer>
 </template>
@@ -11,7 +13,7 @@
 <script lang="ts" setup>
 import { NDrawer, NDrawerContent } from 'naive-ui';
 import { useAppStore } from '@/store';
-import { DarkMode, NavMode, SystemTheme } from './components';
+import { DarkMode, NavMode, SystemTheme, PageFunc, PageView } from './components';
 
 const app = useAppStore();
 </script>