feat(projects): 四种基本布局完成

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

@@ -0,0 +1,10 @@
+<template>
+  <n-layout-footer>
+    <h3 class="flex-center h-48px text-18px text-error">页脚</h3>
+  </n-layout-footer>
+</template>
+
+<script lang="ts" setup>
+import { NLayoutFooter } from 'naive-ui';
+</script>
+<style scoped></style>

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

@@ -1,25 +1,68 @@
 <template>
-  <div class="global-header flex-y-center justify-end">
-    <header-item class="w-40px h-full" @click="toggle">
-      <icon-gridicons-fullscreen-exit v-if="isFullscreen" class="text-16px" />
-      <icon-gridicons-fullscreen v-else class="text-16px" />
-    </header-item>
-    <header-item class="w-40px h-full" @click="openSettingDrawer">
-      <icon-mdi-light-cog class="text-16px" />
-    </header-item>
-  </div>
+  <header v-if="fixedHeader && theme.navStyle.mode !== 'horizontal-mix'" class="w-full header-height"></header>
+  <n-layout-header :inverted="headerInverted" :position="position" :style="{ zIndex }">
+    <div class="global-header header-height flex-y-center w-full">
+      <div v-if="!theme.isVerticalNav" class="menu-width h-full">
+        <global-logo />
+      </div>
+      <div class="flex-1 flex justify-end h-full">
+        <header-item class="w-40px h-full" @click="toggle">
+          <icon-gridicons-fullscreen-exit v-if="isFullscreen" class="text-16px" />
+          <icon-gridicons-fullscreen v-else class="text-16px" />
+        </header-item>
+        <header-item class="w-40px h-full" @click="openSettingDrawer">
+          <icon-mdi-light-cog class="text-16px" />
+        </header-item>
+      </div>
+    </div>
+  </n-layout-header>
 </template>
 
 <script lang="ts" setup>
+import { computed } from 'vue';
+import { NLayoutHeader } from 'naive-ui';
 import { useFullscreen } from '@vueuse/core';
-import { useAppStore } from '@/store';
+import { useAppStore, useThemeStore } from '@/store';
 import { HeaderItem } from './components';
+import { GlobalLogo } from '../common';
+
+defineProps({
+  zIndex: {
+    type: Number,
+    default: 0
+  }
+});
 
 const { openSettingDrawer } = useAppStore();
+const theme = useThemeStore();
 const { isFullscreen, toggle } = useFullscreen();
+
+const inverted = computed(() => {
+  return theme.navStyle.theme !== 'light';
+});
+const fixedHeader = computed(() => theme.headerStyle.fixed || theme.navStyle.mode === 'horizontal-mix');
+const position = computed(() => (fixedHeader.value ? 'absolute' : 'static'));
+const headerInverted = computed(() => {
+  return theme.navStyle.theme !== 'dark' ? inverted.value : !inverted.value;
+});
+const headerHeight = computed(() => {
+  const { height } = theme.headerStyle;
+  return `${height}px`;
+});
+const menuWidth = computed(() => {
+  const { width } = theme.menuStyle;
+
+  return `${width}px`;
+});
 </script>
 <style scoped>
 .global-header {
   box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
 }
+.header-height {
+  height: v-bind(headerHeight);
+}
+.menu-width {
+  width: v-bind(menuWidth);
+}
 </style>

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

@@ -0,0 +1,52 @@
+<template>
+  <n-layout-sider
+    class="sider-shadow h-full"
+    :style="{ zIndex }"
+    :native-scrollbar="false"
+    :inverted="inverted"
+    collapse-mode="width"
+    :collapsed="app.menu.collapsed"
+    :collapsed-width="theme.menuStyle.collapsedWidth"
+    :width="menuWidth"
+    @collapse="handleMenuCollapse(true)"
+    @expand="handleMenuCollapse(false)"
+  >
+    <global-logo v-if="theme.isVerticalNav" />
+    <global-menu />
+  </n-layout-sider>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { NLayoutSider } from 'naive-ui';
+import { useThemeStore, useAppStore } from '@/store';
+import { GlobalLogo, GlobalMenu } from '../common';
+
+defineProps({
+  zIndex: {
+    type: Number,
+    default: 0
+  }
+});
+
+const theme = useThemeStore();
+const app = useAppStore();
+const { handleMenuCollapse } = useAppStore();
+
+const inverted = computed(() => {
+  return theme.navStyle.theme !== 'light';
+});
+
+const menuWidth = computed(() => {
+  const { collapsed } = app.menu;
+  const { mode } = theme.navStyle;
+  const { collapsedWidth, width, mixWidth } = theme.menuStyle;
+  const modeWidth = mode === 'vertical-mix' ? mixWidth : width;
+  return collapsed ? collapsedWidth : modeWidth;
+});
+</script>
+<style scoped>
+.sider-shadow {
+  box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
+}
+</style>

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

@@ -5,7 +5,7 @@
       <n-switch :value="theme.menuStyle.splitMenu" @update:value="handleSplitMenu" />
     </setting-menu-item>
     <setting-menu-item label="固定头部">
-      <n-switch :value="theme.headerStyle.fixed" @update:value="handleFixedHeader" />
+      <n-switch :value="splitMenu" :disabled="disabledSplitMenu" @update:value="handleFixedHeader" />
     </setting-menu-item>
     <setting-menu-item label="头部高度">
       <n-input-number
@@ -21,19 +21,40 @@
         class="w-120px"
         size="small"
         :value="theme.menuStyle.width"
+        :disabled="disabledMenuWidth"
         :step="10"
         @update:value="handleMenuWidth"
       />
     </setting-menu-item>
+    <setting-menu-item label="左侧混合菜单展开宽度">
+      <n-input-number
+        class="w-120px"
+        size="small"
+        :value="theme.menuStyle.mixWidth"
+        :disabled="disabledMixMenuWidth"
+        :step="5"
+        @update:value="handleMixMenuWidth"
+      />
+    </setting-menu-item>
   </n-space>
 </template>
 
 <script lang="ts" setup>
+import { computed } from 'vue';
 import { NDivider, NSpace, NSwitch, NInputNumber } from 'naive-ui';
 import { useThemeStore } from '@/store';
 import { SettingMenuItem } from '../common';
 
 const theme = useThemeStore();
-const { handleSplitMenu, handleFixedHeader, handleHeaderHeight, handleMenuWidth } = useThemeStore();
+const { handleSplitMenu, handleFixedHeader, handleHeaderHeight, handleMenuWidth, handleMixMenuWidth } = useThemeStore();
+
+const disabledSplitMenu = computed(() => theme.navStyle.mode === 'horizontal-mix');
+const splitMenu = computed(() => theme.headerStyle.fixed || disabledSplitMenu.value);
+const disabledMenuWidth = computed(() => {
+  const { mode } = theme.navStyle;
+  return mode !== 'vertical' && mode !== 'horizontal-mix';
+});
+
+const disabledMixMenuWidth = computed(() => theme.navStyle.mode !== 'vertical-mix');
 </script>
 <style scoped></style>

src/layouts/BasicLayout/components/common/GlobalLogo.vue

@@ -7,10 +7,11 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import { useAppStore } from '@/store';
+import { useAppStore, useThemeStore } from '@/store';
 
 const app = useAppStore();
-const showTitle = computed(() => !app.menu.collapsed);
+const theme = useThemeStore();
+const showTitle = computed(() => !app.menu.collapsed && theme.navStyle.mode !== 'vertical-mix');
 const title = import.meta.env.VITE_APP_TITLE as string;
 </script>
 <style scoped></style>

src/layouts/BasicLayout/components/common/GlobalMenu.vue

@@ -1,5 +1,7 @@
 <template>
-  <div></div>
+  <div>
+    <h3 class="text-center text-18px text-error">菜单</h3>
+  </div>
 </template>
 
 <script lang="ts" setup></script>

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

@@ -0,0 +1,4 @@
+import GlobalLogo from './GlobalLogo.vue';
+import GlobalMenu from './GlobalMenu.vue';
+
+export { GlobalLogo, GlobalMenu };

src/layouts/BasicLayout/components/index.ts

@@ -1,6 +1,6 @@
+import GlobalSider from './GlobalSider/index.vue';
 import GlobalHeader from './GlobalHeader/index.vue';
-import GlobalLogo from './GlobalLogo/index.vue';
-import GlobalMenu from './GlobalMenu/index.vue';
+import GlobalFooter from './GlobalFooter/index.vue';
 import SettingDrawer from './SettingDrawer/index.vue';
 
-export { GlobalHeader, GlobalLogo, GlobalMenu, SettingDrawer };
+export { GlobalSider, GlobalHeader, GlobalFooter, SettingDrawer };

src/layouts/BasicLayout/index.vue

@@ -1,67 +1,44 @@
 <template>
-  <n-layout has-sider :position="position">
-    <n-layout-sider
-      class="layout-sider min-h-100vh z-11"
-      :native-scrollbar="false"
-      :inverted="inverted"
-      collapse-mode="width"
-      :collapsed="app.menu.collapsed"
-      :collapsed-width="theme.menuStyle.collapsedWidth"
-      :width="menuWidth"
-      @collapse="handleMenuCollapse(true)"
-      @expand="handleMenuCollapse(false)"
-    >
-      <global-logo />
-      <global-menu />
-    </n-layout-sider>
-    <n-layout :inverted="inverted">
-      <n-layout-header :position="position" :inverted="headerInverted" class="z-10">
-        <global-header class="header-height" />
-      </n-layout-header>
-      <n-layout-content class="main-padding flex-auto min-h-100vh">
-        <router-view />
-      </n-layout-content>
-      <n-layout-footer></n-layout-footer>
-    </n-layout>
+  <n-layout class="h-full" has-sider>
+    <global-sider v-if="theme.isVerticalNav" :z-index="2" />
+    <global-header v-if="isHorizontalMix" :z-index="2" />
+    <div class="flex-1-hidden flex h-full">
+      <global-sider v-if="isHorizontalMix" class="sider-margin" :z-index="1" />
+      <n-scrollbar class="h-full" :x-scrollable="true">
+        <div class="inline-flex-col-stretch w-full min-h-100vh" :class="{ 'content-padding': isHorizontalMix }">
+          <global-header v-if="!isHorizontalMix" :z-index="1" />
+          <n-layout-content class="flex-auto" :class="{ 'bg-[#f5f7f9]': !theme.darkMode }">
+            <router-view />
+          </n-layout-content>
+          <global-footer />
+        </div>
+      </n-scrollbar>
+    </div>
     <setting-drawer />
   </n-layout>
 </template>
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import { NLayout, NLayoutSider, NLayoutHeader, NLayoutContent, NLayoutFooter } from 'naive-ui';
-import { useThemeStore, useAppStore } from '@/store';
-import { GlobalHeader, GlobalLogo, GlobalMenu, SettingDrawer } from './components';
+import { NLayout, NScrollbar, NLayoutContent } from 'naive-ui';
+import { useThemeStore } from '@/store';
+import { GlobalSider, GlobalHeader, GlobalFooter, SettingDrawer } from './components';
 
 const theme = useThemeStore();
-const app = useAppStore();
-const { handleMenuCollapse } = useAppStore();
-
-const position = computed(() => (theme.headerStyle.fixed ? 'absolute' : 'static'));
-const menuWidth = computed(() => {
-  const { collapsed } = app.menu;
-  const { collapsedWidth, width } = theme.menuStyle;
-  return collapsed ? collapsedWidth : width;
-});
-const inverted = computed(() => {
-  return theme.navStyle.theme !== 'light';
-});
-const headerInverted = computed(() => {
-  return theme.navStyle.theme !== 'dark' ? inverted.value : !inverted.value;
-});
+const isHorizontalMix = computed(() => theme.navStyle.mode === 'horizontal-mix');
 const headerHeight = computed(() => {
   const { height } = theme.headerStyle;
   return `${height}px`;
 });
 </script>
 <style scoped>
-.layout-sider {
-  box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
+:deep(.n-scrollbar-rail) {
+  z-index: 11;
 }
-.header-height {
-  height: v-bind(headerHeight);
+.sider-margin {
+  margin-top: v-bind(headerHeight);
 }
-.main-padding {
+.content-padding {
   padding-top: v-bind(headerHeight);
 }
 </style>