feat(projects): 新增导航模式配置

src/layouts/BasicLayout/components/SettingDrawer/components/NavMode.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/SystemTheme.vue

@@ -1,21 +1,20 @@
 <template>
   <n-divider title-placement="center">系统主题</n-divider>
   <div class="flex flex-wrap justify-between">
-    <div
+    <color-block
       v-for="color in app.themeSettings.themeColorList"
       :key="color"
-      class="flex-center w-20px h-20px mx-6px mb-8px cursor-pointer rounded-2px"
-      :style="{ backgroundColor: color }"
+      :color="color"
+      :checked="color === app.themeSettings.themeColor"
       @click="setThemeColor(color)"
-    >
-      <icon-ic-outline-check v-if="color === app.themeSettings.themeColor" class="text-14px text-white" />
-    </div>
+    />
   </div>
 </template>
 
 <script lang="ts" setup>
 import { NDivider } from 'naive-ui';
 import { useAppStore } from '@/store';
+import { ColorBlock } from '@/components';
 
 const app = useAppStore();
 const { setThemeColor } = useAppStore();

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

@@ -1,4 +1,5 @@
 import DarkMode from './DarkMode.vue';
+import NavMode from './NavMode.vue';
 import SystemTheme from './SystemTheme.vue';
 
-export { DarkMode, SystemTheme };
+export { DarkMode, NavMode, SystemTheme };

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

@@ -1,7 +1,8 @@
 <template>
   <n-drawer v-model:show="app.settingDrawer.visible">
-    <n-drawer-content title="主题配置">
+    <n-drawer-content title="主题配置" :native-scrollbar="false">
       <dark-mode />
+      <nav-mode />
       <system-theme />
     </n-drawer-content>
   </n-drawer>
@@ -10,7 +11,7 @@
 <script lang="ts" setup>
 import { NDrawer, NDrawerContent } from 'naive-ui';
 import { useAppStore } from '@/store';
-import { DarkMode, SystemTheme } from './components';
+import { DarkMode, NavMode, SystemTheme } from './components';
 
 const app = useAppStore();
 </script>