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

src/AppProvider.vue

@@ -1,5 +1,11 @@
 <template>
-  <n-config-provider :locale="zhCN" :date-locale="dateZhCN" :theme="dark" :theme-overrides="theme.themeOverrids">
+  <n-config-provider
+    class="h-full"
+    :locale="zhCN"
+    :date-locale="dateZhCN"
+    :theme="dark"
+    :theme-overrides="theme.themeOverrids"
+  >
     <n-loading-bar-provider>
       <n-dialog-provider>
         <n-notification-provider>

src/interface/theme.ts

@@ -59,6 +59,8 @@ interface HeaderStyle {
 interface MenuStyle {
   /** 菜单宽度 */
   width: number;
+  /** 混合菜单的宽度 */
+  mixWidth: number;
   /** 菜单折叠时的宽度 */
   collapsedWidth: number;
   /** 固定菜单 */

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>

src/service/request/config.ts

@@ -1,2 +0,0 @@
-/** 请求超时时间 */
-export const REQUEST_TIMEOUT = 15 * 1000;

src/service/request/index.ts

@@ -1,7 +1,5 @@
 import { createRequest } from './request';
-import { REQUEST_TIMEOUT } from './config';
 
 export const adminRequest = createRequest({
-  baseURL: import.meta.env.VITE_HTTP_URL_EMOSS_ADMIN as string,
-  timeout: REQUEST_TIMEOUT
+  baseURL: import.meta.env.VITE_HTTP_URL_EMOSS_ADMIN as string
 });

src/service/utils/index.ts

@@ -28,6 +28,8 @@ export function handleResponse<T>(handleFunc: HandleFunc<T>, ...requests: Reques
 
 /**
  * 接口为上传文件的类型时数据转换
+ * @param file - 单文件或多文件
+ * @param key - 文件的属性名
  */
 export async function transformFile(file: File[] | File, key: string) {
   const formData = new FormData();

src/settings/theme.ts

@@ -1,5 +1,5 @@
-import type { ThemeSettings } from '../../interface';
-import { EnumAnimate } from '../../enum';
+import type { ThemeSettings } from '../interface';
+import { EnumAnimate } from '../enum';
 
 const themeColorList = [
   '#409EFF',
@@ -38,6 +38,7 @@ const themeSettings: ThemeSettings = {
   },
   menuStyle: {
     width: 200,
+    mixWidth: 80,
     collapsedWidth: 64,
     fixed: true,
     splitMenu: false

src/store/modules/theme/index.ts

@@ -50,6 +50,10 @@ const themeStore = defineStore({
           colorLoading
         }
       };
+    },
+    isVerticalNav(): boolean {
+      const { mode } = this.navStyle;
+      return mode === 'vertical' || mode === 'vertical-mix';
     }
   },
   actions: {
@@ -75,6 +79,12 @@ const themeStore = defineStore({
         this.menuStyle.width = width;
       }
     },
+    /** 更改混合菜单展开的宽度 */
+    handleMixMenuWidth(width: number | null) {
+      if (width !== null) {
+        this.menuStyle.mixWidth = width;
+      }
+    },
     /** 更改头部的高度(不包含tab标签) */
     handleHeaderHeight(height: number | null) {
       if (height !== null) {

src/styles/css/global.css

@@ -7,8 +7,6 @@ body,
   height: 100%;
 }
 html {
-  min-width: 1320px;
-  min-height: 650px;
   font-size: 16px;
 }
 #app {

src/views/home/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="min-h-500px">
     <n-space>
       <n-button v-for="item in actions" :key="item.key" type="primary" @click="handleClick(item.key)">
         {{ item.label }}
@@ -21,6 +21,7 @@
       <span class="text-warning">warning</span>
       <span class="text-error">error</span>
     </div>
+    <p v-for="i in 100" :key="i">{{ i }}</p>
   </div>
 </template>