From 0a9fba90b5e51fd2d39c47490f49dac7599a9742 Mon Sep 17 00:00:00 2001
From: Soybean <honghuangdc@gmail.com>
Date: Sun, 14 Nov 2021 22:16:44 +0800
Subject: [PATCH] =?UTF-8?q?feat(projects):=20=E6=B7=BB=E5=8A=A0=E5=88=A4?=
 =?UTF-8?q?=E6=96=AD=E6=98=AF=E5=90=A6=E6=98=AF=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
 =?UTF-8?q?=E7=9A=84hooks?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/common/index.ts                     |  4 +++-
 src/hooks/common/useIsMobile.ts               | 11 ++++++++++
 src/interface/theme.ts                        |  2 --
 .../components/GlobalContent/index.vue        |  2 +-
 .../components/PageFunc/index.vue             |  9 ++------
 src/layouts/BlankLayout/index.vue             |  2 +-
 src/main.ts                                   | 15 ++++++++-----
 src/plugins/assets.ts                         |  5 +++++
 src/plugins/dark-mode.ts                      | 13 +++++++----
 src/plugins/index.ts                          |  3 ++-
 src/settings/theme.json                       |  1 -
 src/settings/theme.ts                         |  1 -
 src/store/modules/theme/index.ts              | 22 +++++++++++--------
 13 files changed, 56 insertions(+), 34 deletions(-)
 create mode 100644 src/hooks/common/useIsMobile.ts
 create mode 100644 src/plugins/assets.ts

diff --git a/src/hooks/common/index.ts b/src/hooks/common/index.ts
index c997d079..4a651d40 100644
--- a/src/hooks/common/index.ts
+++ b/src/hooks/common/index.ts
@@ -7,6 +7,7 @@ import useRouteProps from './useRouteProps';
 import useBoolean from './useBoolean';
 import useLoading from './useLoading';
 import useScrollBehavior from './useScrollBehavior';
+import useIsMobile from './useIsMobile';
 
 export {
   useAppTitle,
@@ -17,5 +18,6 @@ export {
   useRouteProps,
   useBoolean,
   useLoading,
-  useScrollBehavior
+  useScrollBehavior,
+  useIsMobile
 };
diff --git a/src/hooks/common/useIsMobile.ts b/src/hooks/common/useIsMobile.ts
new file mode 100644
index 00000000..f2860f31
--- /dev/null
+++ b/src/hooks/common/useIsMobile.ts
@@ -0,0 +1,11 @@
+import { useBreakpoints, breakpointsTailwind } from '@vueuse/core';
+
+/** 是否是移动端 */
+export default function useIsMobile() {
+  const breakpoints = useBreakpoints(breakpointsTailwind);
+  const isMobile = breakpoints.smaller('lg');
+
+  return {
+    isMobile
+  };
+}
diff --git a/src/interface/theme.ts b/src/interface/theme.ts
index d5a533a7..1644685d 100644
--- a/src/interface/theme.ts
+++ b/src/interface/theme.ts
@@ -72,8 +72,6 @@ interface MenuStyle {
   mixWidth: number;
   /** 混合菜单折叠时的宽度 */
   mixCollapsedWidth: number;
-  /** 分割菜单 */
-  splitMenu: boolean;
   /** 水平模式的菜单的位置 */
   horizontalPosition: HorizontalMenuPosition;
   /** 水平模式的菜单的位置列表 */
diff --git a/src/layouts/BasicLayout/components/GlobalContent/index.vue b/src/layouts/BasicLayout/components/GlobalContent/index.vue
index dc156f98..e4848b69 100644
--- a/src/layouts/BasicLayout/components/GlobalContent/index.vue
+++ b/src/layouts/BasicLayout/components/GlobalContent/index.vue
@@ -4,7 +4,7 @@
     :class="{ 'overflow-hidden': routeProps.fullPage }"
   >
     <router-view v-slot="{ Component, route }">
-      <transition :name="theme.pageStyle.animateType" mode="out-in" appear>
+      <transition :name="theme.pageAnimateType" mode="out-in" appear>
         <keep-alive :include="cacheRoutes">
           <component :is="Component" v-if="reload" :key="route.fullPath" class="flex-1" />
         </keep-alive>
diff --git a/src/layouts/BasicLayout/components/SettingDrawer/components/PageFunc/index.vue b/src/layouts/BasicLayout/components/SettingDrawer/components/PageFunc/index.vue
index b13e8707..2860f27a 100644
--- a/src/layouts/BasicLayout/components/SettingDrawer/components/PageFunc/index.vue
+++ b/src/layouts/BasicLayout/components/SettingDrawer/components/PageFunc/index.vue
@@ -1,9 +1,6 @@
 <template>
   <n-divider title-placement="center">界面功能</n-divider>
   <n-space vertical size="large">
-    <setting-menu-item label="分割菜单">
-      <n-switch :value="theme.menuStyle.splitMenu" @update:value="handleSplitMenu" />
-    </setting-menu-item>
     <setting-menu-item label="顶部菜单位置">
       <n-select
         class="w-120px"
@@ -34,7 +31,7 @@
       />
     </setting-menu-item>
     <setting-menu-item label="固定头部和多页签">
-      <n-switch :value="splitMenu" :disabled="disabledSplitMenu" @update:value="handleFixedHeaderAndTab" />
+      <n-switch :value="theme.fixedHeaderAndTab" :disabled="isHorizontalMix" @update:value="handleFixedHeaderAndTab" />
     </setting-menu-item>
     <setting-menu-item label="头部高度">
       <n-input-number
@@ -65,7 +62,6 @@ import { SettingMenuItem } from '../common';
 
 const theme = useThemeStore();
 const {
-  handleSplitMenu,
   handleHorizontalMenuPosition,
   handleFixedHeaderAndTab,
   handleHeaderHeight,
@@ -74,8 +70,7 @@ const {
   handleMixMenuWidth
 } = useThemeStore();
 
-const disabledSplitMenu = computed(() => theme.navStyle.mode === 'horizontal-mix');
-const splitMenu = computed(() => theme.fixedHeaderAndTab || disabledSplitMenu.value);
+const isHorizontalMix = computed(() => theme.navStyle.mode === 'horizontal-mix');
 const disabledMenuWidth = computed(() => {
   const { mode } = theme.navStyle;
   return mode !== 'vertical' && mode !== 'horizontal-mix';
diff --git a/src/layouts/BlankLayout/index.vue b/src/layouts/BlankLayout/index.vue
index 97e1a602..eac3a583 100644
--- a/src/layouts/BlankLayout/index.vue
+++ b/src/layouts/BlankLayout/index.vue
@@ -2,7 +2,7 @@
   <n-scrollbar ref="scrollbar" class="h-full" :x-scrollable="true" :content-class="routeProps.fullPage ? 'h-full' : ''">
     <div class="inline-block wh-full bg-[#F6F9F8]">
       <router-view v-slot="{ Component, route: itemRoute }">
-        <transition :name="theme.pageStyle.animateType" mode="out-in" appear>
+        <transition :name="theme.pageAnimateType" mode="out-in" appear>
           <keep-alive :include="cacheRoutes">
             <component
               :is="Component"
diff --git a/src/main.ts b/src/main.ts
index 237bc1a4..cbf8ac24 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,9 +3,14 @@ import App from './App.vue';
 import AppProvider from './AppProvider.vue';
 import { setupStore } from './store';
 import { setupRouter } from './router';
-import { setupWindicssDarkMode } from './plugins';
-import 'virtual:windi.css';
-import './styles/css/global.css';
+import { setupAssets, setupWindicssDarkMode } from './plugins';
+
+function setupPlugins() {
+  /** 引入静态资源 */
+  setupAssets();
+  // 配置windicss暗黑主题
+  setupWindicssDarkMode();
+}
 
 async function setupApp() {
   const appProvider = createApp(AppProvider);
@@ -22,9 +27,7 @@ async function setupApp() {
 
   // 路由准备就绪后挂载APP实例
   app.mount('#app', true);
-
-  // 配置windicss暗黑主题
-  setupWindicssDarkMode();
 }
 
+setupPlugins();
 setupApp();
diff --git a/src/plugins/assets.ts b/src/plugins/assets.ts
new file mode 100644
index 00000000..0198650a
--- /dev/null
+++ b/src/plugins/assets.ts
@@ -0,0 +1,5 @@
+import 'virtual:windi.css';
+import '../styles/css/global.css';
+
+/** 引入静态资源 */
+export default function setupAssets() {}
diff --git a/src/plugins/dark-mode.ts b/src/plugins/dark-mode.ts
index caab9f83..55a02b53 100644
--- a/src/plugins/dark-mode.ts
+++ b/src/plugins/dark-mode.ts
@@ -7,15 +7,19 @@ export default function setupWindicssDarkMode() {
   const DARK_CLASS = 'dark';
 
   function getHtmlElement() {
-    return document.querySelector('html')!;
+    return document.querySelector('html');
   }
   function addDarkClass() {
     const html = getHtmlElement();
-    html.classList.add(DARK_CLASS);
+    if (html) {
+      html.classList.add(DARK_CLASS);
+    }
   }
   function removeDarkClass() {
     const html = getHtmlElement();
-    html.classList.remove(DARK_CLASS);
+    if (html) {
+      html.classList.remove(DARK_CLASS);
+    }
   }
 
   watch(
@@ -26,6 +30,7 @@ export default function setupWindicssDarkMode() {
       } else {
         removeDarkClass();
       }
-    }
+    },
+    { immediate: true }
   );
 }
diff --git a/src/plugins/index.ts b/src/plugins/index.ts
index 1bfd8ff0..6e883421 100644
--- a/src/plugins/index.ts
+++ b/src/plugins/index.ts
@@ -1,3 +1,4 @@
+import setupAssets from './assets';
 import setupWindicssDarkMode from './dark-mode';
 
-export { setupWindicssDarkMode };
+export { setupAssets, setupWindicssDarkMode };
diff --git a/src/settings/theme.json b/src/settings/theme.json
index 2da5ab57..302eb7fa 100644
--- a/src/settings/theme.json
+++ b/src/settings/theme.json
@@ -36,7 +36,6 @@
 		"collapsedWidth": 64,
 		"mixWidth": 80,
 		"mixCollapsedWidth": 48,
-		"splitMenu": false,
 		"horizontalPosition": "flex-start",
 		"horizontalPositionList": [
 			{
diff --git a/src/settings/theme.ts b/src/settings/theme.ts
index 63aa9c85..51ba28ae 100644
--- a/src/settings/theme.ts
+++ b/src/settings/theme.ts
@@ -42,7 +42,6 @@ const defaultThemeSettings: ThemeSettings = {
     collapsedWidth: 64,
     mixWidth: 80,
     mixCollapsedWidth: 48,
-    splitMenu: false,
     horizontalPosition: 'flex-start',
     horizontalPositionList: [
       { value: 'flex-start', label: EnumHorizontalMenuPosition['flex-start'] },
diff --git a/src/store/modules/theme/index.ts b/src/store/modules/theme/index.ts
index 17fe1d8a..4ee8caf8 100644
--- a/src/store/modules/theme/index.ts
+++ b/src/store/modules/theme/index.ts
@@ -33,6 +33,11 @@ const themeStore = defineStore({
       const { hover: warningColorHover, pressed: warningColorPressed } = getHoverAndPressedColor(warningColor);
       const { hover: errorColorHover, pressed: errorColorPressed } = getHoverAndPressedColor(errorColor);
 
+      const primaryColorSuppl = primaryColor;
+      const infoColorSuppl = infoColor;
+      const successColorSuppl = infoColor;
+      const warningColorSuppl = warningColor;
+      const errorColorSuppl = errorColor;
       const colorLoading = primaryColor;
 
       return {
@@ -40,23 +45,23 @@ const themeStore = defineStore({
           primaryColor,
           primaryColorHover,
           primaryColorPressed,
-          primaryColorSuppl: primaryColor,
+          primaryColorSuppl,
           infoColor,
           infoColorHover,
           infoColorPressed,
-          infoColorSuppl: infoColor,
+          infoColorSuppl,
           successColor,
           successColorHover,
           successColorPressed,
-          successColorSuppl: infoColor,
+          successColorSuppl,
           warningColor,
           warningColorHover,
           warningColorPressed,
-          warningColorSuppl: warningColor,
+          warningColorSuppl,
           errorColor,
           errorColorHover,
           errorColorPressed,
-          errorColorSuppl: errorColor
+          errorColorSuppl
         },
         LoadingBar: {
           colorLoading
@@ -73,6 +78,9 @@ const themeStore = defineStore({
     isVerticalNav(): boolean {
       const { mode } = this.navStyle;
       return mode === 'vertical' || mode === 'vertical-mix';
+    },
+    pageAnimateType(): AnimateType | '' {
+      return this.pageStyle.animate ? this.pageStyle.animateType : '';
     }
   },
   actions: {
@@ -92,10 +100,6 @@ const themeStore = defineStore({
     setNavMode(mode: NavMode) {
       this.navStyle.mode = mode;
     },
-    /** 切割菜单(顶部混合模式horizontal-mix) */
-    handleSplitMenu(isSplit: boolean) {
-      this.menuStyle.splitMenu = isSplit;
-    },
     /** 更改菜单展开的宽度 */
     handleMenuWidth(width: number | null) {
       if (width !== null) {