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

src/components/common/ColorBlock/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="flex-center w-20px h-20px mx-6px mb-8px cursor-pointer rounded-2px" :style="{ backgroundColor: color }">
+    <icon-ic-outline-check
+      v-if="checked"
+      class="text-14px text-white"
+      :class="[isWhite ? 'text-gray-700' : 'text-white']"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  color: {
+    type: String,
+    required: true
+  },
+  checked: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const whiteColors = ['#ffffff', '#fff', 'rgb(255,255,255)'];
+const isWhite = computed(() => whiteColors.includes(props.color));
+</script>
+<style scoped></style>

src/components/common/index.ts

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

src/components/index.ts

@@ -1 +1 @@
-export { AppProviderContent } from './common';
+export { AppProviderContent, ColorBlock } from './common';

src/enum/theme.ts

@@ -2,6 +2,7 @@
 export enum EnumNavMode {
   'vertical' = '左侧菜单模式',
   'horizontal' = '顶部菜单模式',
+  'vertical-mix' = '左侧菜单混合模式',
   'horizontal-mix' = '顶部菜单混合模式'
 }
 

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"
+      :color="color"
-      :style="{ backgroundColor: 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>