feat(projects): 新增主题配置：页面功能

src/enum/common.ts

@@ -4,3 +4,18 @@ export enum ContentType {
   formUrlencoded = 'application/x-www-form-urlencoded',
   formData = 'multipart/form-data'
 }
+
+/** 数据类型 */
+export enum EnumDataType {
+  number = '[object Number]',
+  string = '[object String]',
+  boolean = '[object Object]',
+  null = '[object Null]',
+  undefined = '[object Undefined]',
+  object = '[object Object]',
+  array = '[object Array]',
+  date = '[object Date]',
+  regexp = '[object RegExp]',
+  set = '[object Set]',
+  map = '[object Map]'
+}

src/enum/index.ts

@@ -1,3 +1,3 @@
-export { ContentType } from './common';
+export { ContentType, EnumDataType } from './common';
 export { EnumAnimate } from './animate';
 export { EnumNavMode, EnumNavTheme } from './theme';

src/interface/app.ts

@@ -11,10 +11,10 @@ export interface ThemeSettings {
   otherColor: OtherColor;
   /** 导航样式 */
   navStyle: NavStyle;
-  /** 头部样式 */
-  headerStyle: HeaderStyle;
   /** 菜单样式 */
   menuStyle: MenuStyle;
+  /** 头部样式 */
+  headerStyle: HeaderStyle;
   /** 多标签样式 */
   multiTabStyle: MultiTabStyle;
   /** 面包屑样式 */
@@ -73,8 +73,6 @@ interface MultiTabStyle {
   visible: boolean;
   /** 背景颜色 */
   bgColor: string;
-  /** 固定标签页 */
-  fixed: boolean;
 }
 
 interface CrumbsStyle {

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

@@ -1,7 +1,7 @@
 <template>
   <n-divider title-placement="center">深色主题</n-divider>
   <div class="flex-center">
-    <n-switch v-model:value="app.themeSettings.darkMode">
+    <n-switch :value="app.themeSettings.darkMode" @update:value="handleDarkMode">
       <template #checked>
         <icon-mdi-white-balance-sunny class="text-14px text-primary" />
       </template>
@@ -17,6 +17,7 @@ import { NDivider, NSwitch } from 'naive-ui';
 import { useAppStore } from '@/store';
 
 const app = useAppStore();
+const { handleDarkMode } = useAppStore();
 </script>
 <style scoped>
 :deep(.n-switch__rail) {

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

@@ -0,0 +1,22 @@
+<template>
+  <n-divider title-placement="center">界面功能</n-divider>
+  <n-space vertical size="large">
+    <div class="flex-y-center justify-between">
+      <span>分割菜单</span>
+      <n-switch :value="app.themeSettings.menuStyle.splitMenu" @update:value="handleSplitMenu" />
+    </div>
+    <div class="flex-y-center justify-between">
+      <span>固定头部</span>
+      <n-switch :value="app.themeSettings.headerStyle.fixed" @update:value="handleFixedHeader" />
+    </div>
+  </n-space>
+</template>
+
+<script lang="ts" setup>
+import { NDivider, NSpace, NSwitch } from 'naive-ui';
+import { useAppStore } from '@/store';
+
+const app = useAppStore();
+const { handleSplitMenu, handleFixedHeader } = useAppStore();
+</script>
+<style scoped></style>

src/layouts/BasicLayout/components/SettingDrawer/components/PageView/index.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/index.ts

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

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

@@ -4,6 +4,8 @@
       <dark-mode />
       <nav-mode />
       <system-theme />
+      <page-func />
+      <page-view />
     </n-drawer-content>
   </n-drawer>
 </template>
@@ -11,7 +13,7 @@
 <script lang="ts" setup>
 import { NDrawer, NDrawerContent } from 'naive-ui';
 import { useAppStore } from '@/store';
-import { DarkMode, NavMode, SystemTheme } from './components';
+import { DarkMode, NavMode, SystemTheme, PageFunc, PageView } from './components';
 
 const app = useAppStore();
 </script>

src/settings/theme/index.ts

@@ -35,12 +35,6 @@ const themeSettings: ThemeSettings = {
     mode: 'vertical',
     theme: 'light'
   },
-  headerStyle: {
-    height: 64,
-    bgColor: '#fff',
-    fixed: true,
-    showReload: true
-  },
   menuStyle: {
     collapsed: false,
     width: 200,
@@ -48,10 +42,15 @@ const themeSettings: ThemeSettings = {
     fixed: true,
     splitMenu: false
   },
+  headerStyle: {
+    height: 64,
+    bgColor: '#fff',
+    fixed: true,
+    showReload: true
+  },
   multiTabStyle: {
     visible: true,
-    bgColor: '#fff',
-    fixed: true
+    bgColor: '#fff'
   },
   crumbsStyle: {
     visible: true,

src/store/modules/app/index.ts

@@ -1,8 +1,8 @@
 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 { store } from '../../index';
 import { getHoverAndPressedColor } from './helpers';
 
 interface AppState {
@@ -81,6 +81,10 @@ const appStore = defineStore({
     closeSettingDrawer() {
       this.settingDrawer.visible = false;
     },
+    /** 设置暗黑模式 */
+    handleDarkMode(isDark: boolean) {
+      this.themeSettings.darkMode = isDark;
+    },
     /** 设置系统主题颜色 */
     setThemeColor(color: string) {
       this.themeSettings.themeColor = color;
@@ -88,6 +92,14 @@ const appStore = defineStore({
     /** 设置导航栏模式 */
     setNavMode(mode: NavMode) {
       this.themeSettings.navStyle.mode = mode;
+    },
+    /** 折叠菜单 */
+    handleSplitMenu(isSplit: boolean) {
+      this.themeSettings.menuStyle.splitMenu = isSplit;
+    },
+    /** 固定头部 */
+    handleFixedHeader(isFixed: boolean) {
+      this.themeSettings.headerStyle.fixed = isFixed;
     }
   }
 });

src/store/modules/auth/index.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
+import { store } from '@/store';
 import type { UserInfo } from '@/interface';
-import { store } from '../../index';
 
 interface AuthState {
   /** 用户token */

src/utils/common/typeof.ts

@@ -1,47 +1,35 @@
-enum DataType {
-  number = '[object Number]',
-  string = '[object String]',
-  boolean = '[object Object]',
-  null = '[object Null]',
-  undefined = '[object Undefined]',
-  object = '[object Object]',
-  array = '[object Array]',
-  date = '[object Date]',
-  regexp = '[object RegExp]',
-  set = '[object Set]',
-  map = '[object Map]'
-}
+import { EnumDataType } from '@/enum';
 
 export function isNumber(data: any) {
-  return Object.prototype.toString.call(data) === DataType.number;
+  return Object.prototype.toString.call(data) === EnumDataType.number;
 }
 export function isString(data: any) {
-  return Object.prototype.toString.call(data) === DataType.string;
+  return Object.prototype.toString.call(data) === EnumDataType.string;
 }
 export function isBoolean(data: any) {
-  return Object.prototype.toString.call(data) === DataType.boolean;
+  return Object.prototype.toString.call(data) === EnumDataType.boolean;
 }
 export function isNull(data: any) {
-  return Object.prototype.toString.call(data) === DataType.null;
+  return Object.prototype.toString.call(data) === EnumDataType.null;
 }
 export function isUndefined(data: any) {
-  return Object.prototype.toString.call(data) === DataType.undefined;
+  return Object.prototype.toString.call(data) === EnumDataType.undefined;
 }
 export function isObject(data: any) {
-  return Object.prototype.toString.call(data) === DataType.object;
+  return Object.prototype.toString.call(data) === EnumDataType.object;
 }
 export function isArray(data: any) {
-  return Object.prototype.toString.call(data) === DataType.array;
+  return Object.prototype.toString.call(data) === EnumDataType.array;
 }
 export function isDate(data: any) {
-  return Object.prototype.toString.call(data) === DataType.date;
+  return Object.prototype.toString.call(data) === EnumDataType.date;
 }
 export function isRegExp(data: any) {
-  return Object.prototype.toString.call(data) === DataType.regexp;
+  return Object.prototype.toString.call(data) === EnumDataType.regexp;
 }
 export function isSet(data: any) {
-  return Object.prototype.toString.call(data) === DataType.set;
+  return Object.prototype.toString.call(data) === EnumDataType.set;
 }
 export function isMap(data: any) {
-  return Object.prototype.toString.call(data) === DataType.map;
+  return Object.prototype.toString.call(data) === EnumDataType.map;
 }

src/views/system/index.vue

@@ -5,10 +5,21 @@
       <router-link to="/home">home</router-link>
     </n-button>
     <n-switch :value="true" />
+    <n-button @click="showModal = true">来吧</n-button>
+    <n-modal v-model:show="showModal">
+      <n-card style="width: 600px" title="模态框" :bordered="false" size="huge">
+        <template #header-extra>噢！</template>
+        内容
+        <template #footer>尾部</template>
+      </n-card>
+    </n-modal>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { NButton, NSwitch } from 'naive-ui';
+import { ref } from 'vue';
+import { NButton, NSwitch, NModal, NCard } from 'naive-ui';
+
+const showModal = ref(false);
 </script>
 <style scoped></style>