feat(projects): 添加判断是否是移动端的hooks

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
 };

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
+  };
+}

src/interface/theme.ts

@@ -72,8 +72,6 @@ interface MenuStyle {
   mixWidth: number;
   /** 混合菜单折叠时的宽度 */
   mixCollapsedWidth: number;
-  /** 分割菜单 */
-  splitMenu: boolean;
   /** 水平模式的菜单的位置 */
   horizontalPosition: HorizontalMenuPosition;
   /** 水平模式的菜单的位置列表 */

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>

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';

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"

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();

src/plugins/assets.ts

@@ -0,0 +1,5 @@
+import 'virtual:windi.css';
+import '../styles/css/global.css';
+
+/** 引入静态资源 */
+export default function setupAssets() {}

src/plugins/dark-mode.ts

@@ -7,16 +7,20 @@ export default function setupWindicssDarkMode() {
   const DARK_CLASS = 'dark';
 
   function getHtmlElement() {
-    return document.querySelector('html')!;
+    return document.querySelector('html');
   }
   function addDarkClass() {
     const html = getHtmlElement();
+    if (html) {
       html.classList.add(DARK_CLASS);
     }
+  }
   function removeDarkClass() {
     const html = getHtmlElement();
+    if (html) {
       html.classList.remove(DARK_CLASS);
     }
+  }
 
   watch(
     () => theme.darkMode,
@@ -26,6 +30,7 @@ export default function setupWindicssDarkMode() {
       } else {
         removeDarkClass();
       }
-    }
+    },
+    { immediate: true }
   );
 }

src/plugins/index.ts

@@ -1,3 +1,4 @@
+import setupAssets from './assets';
 import setupWindicssDarkMode from './dark-mode';
 
-export { setupWindicssDarkMode };
+export { setupAssets, setupWindicssDarkMode };

src/settings/theme.json

@@ -36,7 +36,6 @@
 		"collapsedWidth": 64,
 		"mixWidth": 80,
 		"mixCollapsedWidth": 48,
-		"splitMenu": false,
 		"horizontalPosition": "flex-start",
 		"horizontalPositionList": [
 			{

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'] },

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) {