feat(projects): 导航栏模式配置：界面实现及主题配置布局调整

src/interface/app.ts

@@ -34,7 +34,7 @@ interface OtherColor {
   error: string;
 }
 
-type NavMode = keyof typeof EnumNavMode;
+export type NavMode = keyof typeof EnumNavMode;
 type NavTheme = keyof typeof EnumNavTheme;
 
 interface NavStyle {

src/interface/index.ts

@@ -1,2 +1,2 @@
 export { UserInfo } from './business';
-export { ThemeSettings } from './app';
+export { ThemeSettings, NavMode } from './app';

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

@@ -1,8 +0,0 @@
-<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/NavMode/components/NavType.vue

@@ -0,0 +1,49 @@
+<template>
+  <div
+    class="border-2px rounded-6px cursor-pointer hover:border-primary"
+    :class="[checked ? 'border-primary' : 'border-transparent']"
+  >
+    <n-tooltip :placement="activeConfig.placement" trigger="hover">
+      <template #trigger>
+        <div class="nav-type relative w-56px h-48px bg-[#fff] rounded-4px overflow-hidden">
+          <div class="absolute-lt bg-[#273352]" :class="`${activeConfig.menuClass}`"></div>
+          <div class="absolute-rb bg-[#f0f2f5]" :class="`${activeConfig.mainClass}`"></div>
+        </div>
+      </template>
+      <span>{{ EnumNavMode[mode] }}</span>
+    </n-tooltip>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { NTooltip } from 'naive-ui';
+import type { PropType } from 'vue';
+import { EnumNavMode } from '@/enum';
+import type { NavMode } from '@/interface';
+
+const props = defineProps({
+  mode: {
+    type: String as PropType<NavMode>,
+    default: 'vertical'
+  },
+  checked: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const config = new Map<NavMode, { placement: any; menuClass: string; mainClass: string }>([
+  ['vertical', { placement: 'bottom-start', menuClass: 'w-1/3 h-full', mainClass: 'w-2/3 h-3/4' }],
+  ['vertical-mix', { placement: 'bottom', menuClass: 'w-1/4 h-full', mainClass: 'w-2/3 h-3/4' }],
+  ['horizontal', { placement: 'bottom', menuClass: 'w-full h-1/4', mainClass: 'w-full h-3/4' }],
+  ['horizontal-mix', { placement: 'bottom-end', menuClass: 'w-full h-1/4', mainClass: 'w-2/3 h-3/4' }]
+]);
+
+const activeConfig = computed(() => config.get(props.mode)!);
+</script>
+<style scoped>
+.nav-type {
+  box-shadow: 0 1px 2.5px rgba(0, 0, 0, 0.18);
+}
+</style>

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

@@ -0,0 +1,3 @@
+import NavType from './NavType.vue';
+
+export { NavType };

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

@@ -0,0 +1,36 @@
+<template>
+  <n-divider title-placement="center">导航栏模式</n-divider>
+  <n-space justify="space-between">
+    <nav-type
+      v-for="item in modeList"
+      :key="item.mode"
+      :mode="item.mode"
+      :checked="app.themeSettings.navStyle.mode === item.mode"
+      @click="setNavMode(item.mode)"
+    />
+  </n-space>
+</template>
+
+<script lang="ts" setup>
+import { NDivider, NSpace } from 'naive-ui';
+import { EnumNavMode } from '@/enum';
+import type { NavMode } from '@/interface';
+import { NavType } from './components';
+import { useAppStore } from '@/store';
+
+interface ModeList {
+  mode: NavMode;
+  label: string;
+}
+
+const app = useAppStore();
+const { setNavMode } = useAppStore();
+
+const modeList: ModeList[] = [
+  { mode: 'vertical', label: EnumNavMode.vertical },
+  { mode: 'vertical-mix', label: EnumNavMode['vertical-mix'] },
+  { mode: 'horizontal', label: EnumNavMode.horizontal },
+  { mode: 'horizontal-mix', label: EnumNavMode['horizontal-mix'] }
+];
+</script>
+<style scoped></style>

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

@@ -1,22 +0,0 @@
-<template>
-  <n-divider title-placement="center">系统主题</n-divider>
-  <div class="flex flex-wrap justify-between">
-    <color-block
-      v-for="color in app.themeSettings.themeColorList"
-      :key="color"
-      :color="color"
-      :checked="color === app.themeSettings.themeColor"
-      @click="setThemeColor(color)"
-    />
-  </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();
-</script>
-<style scoped></style>

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

@@ -0,0 +1,18 @@
+<template>
+  <n-divider title-placement="center">系统主题</n-divider>
+  <n-grid :cols="8">
+    <n-grid-item v-for="color in app.themeSettings.themeColorList" :key="color">
+      <color-block :color="color" :checked="color === app.themeSettings.themeColor" @click="setThemeColor(color)" />
+    </n-grid-item>
+  </n-grid>
+</template>
+
+<script lang="ts" setup>
+import { NDivider, NGrid, NGridItem } from 'naive-ui';
+import { useAppStore } from '@/store';
+import { ColorBlock } from '@/components';
+
+const app = useAppStore();
+const { setThemeColor } = useAppStore();
+</script>
+<style scoped></style>

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

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

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

@@ -1,5 +1,5 @@
 <template>
-  <n-drawer v-model:show="app.settingDrawer.visible">
+  <n-drawer v-model:show="app.settingDrawer.visible" :width="330">
     <n-drawer-content title="主题配置" :native-scrollbar="false">
       <dark-mode />
       <nav-mode />

src/store/modules/app/index.ts

@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia';
 import type { GlobalThemeOverrides } from 'naive-ui';
 import { themeSettings } from '@/settings';
-import type { ThemeSettings } from '@/interface';
+import type { ThemeSettings, NavMode } from '@/interface';
 import { store } from '../../index';
 import { getHoverAndPressedColor } from './helpers';
 
@@ -84,6 +84,10 @@ const appStore = defineStore({
     /** 设置系统主题颜色 */
     setThemeColor(color: string) {
       this.themeSettings.themeColor = color;
+    },
+    /** 设置导航栏模式 */
+    setNavMode(mode: NavMode) {
+      this.themeSettings.navStyle.mode = mode;
     }
   }
 });