feat(projects): 主题配置：页面功能和页面显示

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

@@ -1,22 +1,39 @@
 <template>
   <n-divider title-placement="center">界面功能</n-divider>
   <n-space vertical size="large">
-    <div class="flex-y-center justify-between">
-      <span>分割菜单</span>
+    <setting-menu-item label="分割菜单">
       <n-switch :value="theme.menuStyle.splitMenu" @update:value="handleSplitMenu" />
-    </div>
-    <div class="flex-y-center justify-between">
-      <span>固定头部</span>
+    </setting-menu-item>
+    <setting-menu-item label="固定头部">
       <n-switch :value="theme.headerStyle.fixed" @update:value="handleFixedHeader" />
-    </div>
+    </setting-menu-item>
+    <setting-menu-item label="头部高度">
+      <n-input-number
+        class="w-120px"
+        size="small"
+        :value="theme.headerStyle.height"
+        :step="1"
+        @update:value="handleHeaderHeight"
+      />
+    </setting-menu-item>
+    <setting-menu-item label="菜单展开宽度">
+      <n-input-number
+        class="w-120px"
+        size="small"
+        :value="theme.menuStyle.width"
+        :step="10"
+        @update:value="handleMenuWidth"
+      />
+    </setting-menu-item>
   </n-space>
 </template>
 
 <script lang="ts" setup>
-import { NDivider, NSpace, NSwitch } from 'naive-ui';
+import { NDivider, NSpace, NSwitch, NInputNumber } from 'naive-ui';
 import { useThemeStore } from '@/store';
+import { SettingMenuItem } from '../common';
 
 const theme = useThemeStore();
-const { handleSplitMenu, handleFixedHeader } = useThemeStore();
+const { handleSplitMenu, handleFixedHeader, handleHeaderHeight, handleMenuWidth } = useThemeStore();
 </script>
 <style scoped></style>

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

@@ -1,8 +1,42 @@
 <template>
   <n-divider title-placement="center">界面显示</n-divider>
+  <n-space vertical size="large">
+    <setting-menu-item label="面包屑">
+      <n-switch :value="theme.crumbsStyle.visible" @update:value="handleCrumbsVisible" />
+    </setting-menu-item>
+    <setting-menu-item label="面包屑图标">
+      <n-switch :value="theme.crumbsStyle.showIcon" @update:value="handleCrumbsIconVisible" />
+    </setting-menu-item>
+    <setting-menu-item label="多标签">
+      <n-switch :value="theme.multiTabStyle.visible" @update:value="handleMultiTabVisible" />
+    </setting-menu-item>
+    <setting-menu-item label="页面切换动画">
+      <n-switch :value="theme.pageStyle.animate" @update:value="handlePageAnimate" />
+    </setting-menu-item>
+    <setting-menu-item label="页面切换动画类型">
+      <n-select
+        class="w-120px"
+        size="small"
+        :value="theme.pageStyle.animateType"
+        :options="theme.pageStyle.animateTypeList"
+        @update:value="handlePageAnimateType"
+      />
+    </setting-menu-item>
+  </n-space>
 </template>
 
 <script lang="ts" setup>
-import { NDivider } from 'naive-ui';
+import { NDivider, NSpace, NSwitch, NSelect } from 'naive-ui';
+import { useThemeStore } from '@/store';
+import { SettingMenuItem } from '../common';
+
+const theme = useThemeStore();
+const {
+  handleCrumbsVisible,
+  handleCrumbsIconVisible,
+  handleMultiTabVisible,
+  handlePageAnimate,
+  handlePageAnimateType
+} = useThemeStore();
 </script>
 <style scoped></style>

src/layouts/BasicLayout/components/SettingDrawer/components/common/SettingMenuItem.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="flex-y-center justify-between">
+    <span>{{ label }}</span>
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  label: {
+    type: String,
+    default: ''
+  }
+});
+</script>
+<style scoped></style>

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

@@ -1,3 +1,4 @@
 import ColorBlock from './ColorBlock.vue';
+import SettingMenuItem from './SettingMenuItem.vue';
 
-export { ColorBlock };
+export { ColorBlock, SettingMenuItem };