feat(projects): 主题配置：页面功能和页面显示

src/interface/index.ts

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

src/interface/theme.ts

@@ -81,11 +81,18 @@ interface CrumbsStyle {
   showIcon: boolean;
 }
 
-type AnimateType = keyof typeof EnumAnimate;
+export type AnimateType = keyof typeof EnumAnimate;
+
+interface AnimateTypeList {
+  value: AnimateType;
+  label: EnumAnimate;
+}
 
 interface PageStyle {
   /** 页面是否开启动画 */
   animate: boolean;
   /** 动画类型 */
   animateType: AnimateType;
+  /** 动画类型列表 */
+  animateTypeList: AnimateTypeList[];
 }

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

@@ -1,22 +1,39 @@
 <template>
   <n-divider title-placement="center">界面功能</n-divider>
   <n-space vertical size="large">
-    <div class="flex-y-center justify-between">
+    <setting-menu-item label="分割菜单">
-      <span>分割菜单</span>
       <n-switch :value="theme.menuStyle.splitMenu" @update:value="handleSplitMenu" />
-    </div>
+    </setting-menu-item>
-    <div class="flex-y-center justify-between">
+    <setting-menu-item label="固定头部">
-      <span>固定头部</span>
       <n-switch :value="theme.headerStyle.fixed" @update:value="handleFixedHeader" />
-    </div>
+    </setting-menu-item>
+    <setting-menu-item label="头部高度">
+      <n-input-number
+        class="w-120px"
+        size="small"
+        :value="theme.headerStyle.height"
+        :step="1"
+        @update:value="handleHeaderHeight"
+      />
+    </setting-menu-item>
+    <setting-menu-item label="菜单展开宽度">
+      <n-input-number
+        class="w-120px"
+        size="small"
+        :value="theme.menuStyle.width"
+        :step="10"
+        @update:value="handleMenuWidth"
+      />
+    </setting-menu-item>
   </n-space>
 </template>
 
 <script lang="ts" setup>
-import { NDivider, NSpace, NSwitch } from 'naive-ui';
+import { NDivider, NSpace, NSwitch, NInputNumber } from 'naive-ui';
 import { useThemeStore } from '@/store';
+import { SettingMenuItem } from '../common';
 
 const theme = useThemeStore();
-const { handleSplitMenu, handleFixedHeader } = useThemeStore();
+const { handleSplitMenu, handleFixedHeader, handleHeaderHeight, handleMenuWidth } = useThemeStore();
 </script>
 <style scoped></style>

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

@@ -1,8 +1,42 @@
 <template>
   <n-divider title-placement="center">界面显示</n-divider>
+  <n-space vertical size="large">
+    <setting-menu-item label="面包屑">
+      <n-switch :value="theme.crumbsStyle.visible" @update:value="handleCrumbsVisible" />
+    </setting-menu-item>
+    <setting-menu-item label="面包屑图标">
+      <n-switch :value="theme.crumbsStyle.showIcon" @update:value="handleCrumbsIconVisible" />
+    </setting-menu-item>
+    <setting-menu-item label="多标签">
+      <n-switch :value="theme.multiTabStyle.visible" @update:value="handleMultiTabVisible" />
+    </setting-menu-item>
+    <setting-menu-item label="页面切换动画">
+      <n-switch :value="theme.pageStyle.animate" @update:value="handlePageAnimate" />
+    </setting-menu-item>
+    <setting-menu-item label="页面切换动画类型">
+      <n-select
+        class="w-120px"
+        size="small"
+        :value="theme.pageStyle.animateType"
+        :options="theme.pageStyle.animateTypeList"
+        @update:value="handlePageAnimateType"
+      />
+    </setting-menu-item>
+  </n-space>
 </template>
 
 <script lang="ts" setup>
-import { NDivider } from 'naive-ui';
+import { NDivider, NSpace, NSwitch, NSelect } from 'naive-ui';
+import { useThemeStore } from '@/store';
+import { SettingMenuItem } from '../common';
+
+const theme = useThemeStore();
+const {
+  handleCrumbsVisible,
+  handleCrumbsIconVisible,
+  handleMultiTabVisible,
+  handlePageAnimate,
+  handlePageAnimateType
+} = useThemeStore();
 </script>
 <style scoped></style>

src/layouts/BasicLayout/components/SettingDrawer/components/common/SettingMenuItem.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="flex-y-center justify-between">
+    <span>{{ label }}</span>
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  label: {
+    type: String,
+    default: ''
+  }
+});
+</script>
+<style scoped></style>

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

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

src/plugins/index.ts

@@ -1,5 +1,4 @@
 import setupSmoothScroll from './smooth-scroll';
-import setupNaive from './naive';
 import setupWindicssDarkMode from './dark-mode';
 
-export { setupSmoothScroll, setupNaive, setupWindicssDarkMode };
+export { setupSmoothScroll, setupWindicssDarkMode };

src/plugins/naive.ts

@@ -1,30 +0,0 @@
-import {
-  create,
-  NLayout,
-  NLayoutSider,
-  NLayoutHeader,
-  NLayoutContent,
-  NLayoutFooter,
-  NSpace,
-  NButton,
-  NDatePicker,
-  NInput
-} from 'naive-ui';
-import type { App } from 'vue';
-
-export default function setupNaive(app: App) {
-  const naive = create({
-    components: [
-      NLayout,
-      NLayoutSider,
-      NLayoutHeader,
-      NLayoutContent,
-      NLayoutFooter,
-      NSpace,
-      NButton,
-      NDatePicker,
-      NInput
-    ]
-  });
-  app.use(naive);
-}

src/settings/theme/index.ts

@@ -1,4 +1,5 @@
 import type { ThemeSettings } from '@/interface';
+import { EnumAnimate } from '@/enum';
 
 const themeColorList = [
   '#409EFF',
@@ -36,7 +37,6 @@ const themeSettings: ThemeSettings = {
     theme: 'light'
   },
   menuStyle: {
-    collapsed: false,
     width: 200,
     collapsedWidth: 64,
     fixed: true,
@@ -58,7 +58,15 @@ const themeSettings: ThemeSettings = {
   },
   pageStyle: {
     animate: true,
-    animateType: 'zoom-fade'
+    animateType: 'zoom-fade',
+    animateTypeList: [
+      { value: 'zoom-fade', label: EnumAnimate['zoom-fade'] },
+      { value: 'zoom-out', label: EnumAnimate['zoom-out'] },
+      { value: 'fade-slide', label: EnumAnimate['fade-slide'] },
+      { value: 'fade', label: EnumAnimate.fade },
+      { value: 'fade-bottom', label: EnumAnimate['fade-bottom'] },
+      { value: 'fade-scale', label: EnumAnimate['fade-scale'] }
+    ]
   }
 };
 

src/store/modules/theme/index.ts

@@ -2,7 +2,7 @@ import { defineStore } from 'pinia';
 import type { GlobalThemeOverrides } from 'naive-ui';
 import { themeSettings } from '@/settings';
 import { store } from '@/store';
-import type { ThemeSettings, NavMode } from '@/interface';
+import type { ThemeSettings, NavMode, AnimateType } from '@/interface';
 import { getHoverAndPressedColor } from './helpers';
 
 type ThemeState = ThemeSettings;
@@ -69,9 +69,39 @@ const themeStore = defineStore({
     handleSplitMenu(isSplit: boolean) {
       this.menuStyle.splitMenu = isSplit;
     },
+    /** 更改菜单展开的宽度 */
+    handleMenuWidth(width: number) {
+      this.menuStyle.width = width;
+    },
+    /** 更改头部的高度(不包含tab标签) */
+    handleHeaderHeight(height: number) {
+      this.headerStyle.height = height;
+    },
     /** 固定头部 */
     handleFixedHeader(isFixed: boolean) {
       this.headerStyle.fixed = isFixed;
+    },
+    /** 设置多标签的显示 */
+    handleMultiTabVisible(visible: boolean) {
+      this.multiTabStyle.visible = visible;
+    },
+    /** 设置面包屑的显示 */
+    handleCrumbsVisible(visible: boolean) {
+      this.crumbsStyle.visible = visible;
+    },
+    /** 设置面包屑图标的显示 */
+    handleCrumbsIconVisible(visible: boolean) {
+      this.crumbsStyle.showIcon = visible;
+    },
+    /** 开启页面切换动画 */
+    handlePageAnimate(animate: boolean) {
+      this.pageStyle.animate = animate;
+    },
+    /** 设置页面切换动画类型 */
+    handlePageAnimateType(animateType: AnimateType) {
+      if (this.pageStyle.animate) {
+        this.pageStyle.animateType = animateType;
+      }
     }
   }
 });