perf: mobile style adjustment

src/layouts/default/header/LayoutHeader.tsx

@@ -45,6 +45,7 @@ import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
 import { AppLocalePicker } from '/@/components/Application';
 import { useI18n } from '/@/hooks/web/useI18n';
 import { propTypes } from '/@/utils/propTypes';
+import { useLayoutContext } from '../useLayoutContext';
 
 interface TooltipItemProps {
   title: string;
@@ -71,6 +72,9 @@ export default defineComponent({
 
     // const logoWidthRef = ref(200);
     const logoRef = ref<ComponentRef>(null);
+
+    const injectValue = useLayoutContext();
+
     const { refreshPage } = useTabs();
     const { t } = useI18n();
 
@@ -116,6 +120,10 @@ export default defineComponent({
       return theme ? `layout-header__header--${theme}` : '';
     });
 
+    const isPc = computed(() => {
+      return !unref(injectValue.isMobile);
+    });
+
     const getSplitType = computed(() => {
       return unref(getSplit) ? MenuSplitTyeEnum.TOP : MenuSplitTyeEnum.NONE;
     });
@@ -147,11 +155,13 @@ export default defineComponent({
               {unref(getShowHeaderTrigger) && (
                 <LayoutTrigger theme={unref(getHeaderTheme)} sider={false} />
               )}
-              {unref(getShowBread) && <LayoutBreadcrumb showIcon={unref(getShowBreadCrumbIcon)} />}
+              {unref(getShowBread) && unref(isPc) && (
+                <LayoutBreadcrumb showIcon={unref(getShowBreadCrumbIcon)} />
+              )}
             </div>
           )}
 
-          {unref(getShowTopMenu) && (
+          {unref(getShowTopMenu) && unref(isPc) && (
             // <div class={[`layout-header__menu `]} style={{ width: `calc(100% - ${width}px)` }}>
             <div class={[`layout-header__menu `]}>
               <LayoutMenu
@@ -179,7 +189,7 @@ export default defineComponent({
     function renderAction() {
       return (
         <div class={`layout-header__action`}>
-          {unref(getUseErrorHandle) && (
+          {unref(getUseErrorHandle) && unref(isPc) && (
             <TooltipItem title={t('layout.header.tooltipErrorLog')}>
               {() => (
                 <Badge
@@ -194,25 +204,25 @@ export default defineComponent({
             </TooltipItem>
           )}
 
-          {unref(getUseLockPage) && (
+          {unref(getUseLockPage) && unref(isPc) && (
             <TooltipItem title={t('layout.header.tooltipLock')}>
               {() => renderActionDefault(LockOutlined, handleLockPage)}
             </TooltipItem>
           )}
 
-          {unref(getShowNotice) && (
+          {unref(getShowNotice) && unref(isPc) && (
             <TooltipItem title={t('layout.header.tooltipNotify')}>
               {() => <NoticeAction />}
             </TooltipItem>
           )}
 
-          {unref(getShowRedo) && (
+          {unref(getShowRedo) && unref(isPc) && (
             <TooltipItem title={t('layout.header.tooltipRedo')}>
               {() => renderActionDefault(RedoOutlined, refreshPage)}
             </TooltipItem>
           )}
 
-          {unref(getShowFullScreen) && (
+          {unref(getShowFullScreen) && unref(isPc) && (
             <TooltipItem
               title={
                 unref(isFullscreenRef)

src/layouts/default/header/LayoutMultipleHeader.tsx

@@ -56,7 +56,7 @@ export default defineComponent({
       (): CSSProperties => {
         const style: CSSProperties = {};
         if (unref(getFixed)) {
-          style.width = unref(getCalcContentWidth);
+          style.width = unref(injectValue.isMobile) ? '100%' : unref(getCalcContentWidth);
         }
         if (unref(getShowFullHeaderRef)) {
           style.top = `${unref(fullHeaderHeightRef)}px`;
@@ -81,7 +81,7 @@ export default defineComponent({
         nextTick(() => {
           const headerEl = unref(headerElRef)?.$el;
           const tabEl = unref(tabElRef)?.$el;
-          const fullHeaderEl = unref(injectValue.fullHeaderRef)?.$el;
+          const fullHeaderEl = unref(injectValue.fullHeader)?.$el;
 
           let height = 0;
           if (headerEl && !unref(getShowFullHeaderRef)) {

src/layouts/default/index.tsx

@@ -21,14 +21,20 @@ import { useRootSetting } from '/@/hooks/setting/useRootSetting';
 import { createLayoutContext } from './useLayoutContext';
 
 import { registerGlobComp } from '/@/components/registerGlobComp';
-
+import { createBreakpointListen } from '/@/hooks/event/useBreakpoint';
+import { isMobile } from '/@/utils/is';
 export default defineComponent({
   name: 'DefaultLayout',
   setup() {
     const { currentRoute } = useRouter();
     const headerRef = ref<ComponentRef>(null);
+    const isMobileRef = ref(false);
 
-    createLayoutContext({ fullHeaderRef: headerRef });
+    createLayoutContext({ fullHeader: headerRef, isMobile: isMobileRef });
+
+    createBreakpointListen(() => {
+      isMobileRef.value = isMobile();
+    });
 
     // ! Only register global components here
     // ! Can reduce the size of the first screen code

src/layouts/default/sider/index.tsx

@@ -81,7 +81,7 @@ export default defineComponent({
         topRef.value = 0;
         if (unref(getUnFixedAndFull)) return;
         nextTick(() => {
-          const fullHeaderEl = unref(injectValue.fullHeaderRef)?.$el;
+          const fullHeaderEl = unref(injectValue.fullHeader)?.$el;
           if (!fullHeaderEl) return;
           topRef.value = fullHeaderEl.offsetHeight;
         });
@@ -121,10 +121,9 @@ export default defineComponent({
     return () => {
       return (
         <>
-          {unref(getMenuFixed) && (
+          {unref(getMenuFixed) && !unref(injectValue.isMobile) && (
             <div style={unref(getHiddenDomStyle)} class={{ hidden: !unref(showClassSideBarRef) }} />
           )}
-
           <Layout.Sider
             ref={sideRef}
             breakpoint="md"

src/layouts/default/useLayoutContext.ts

@@ -2,7 +2,8 @@ import { InjectionKey, Ref } from 'vue';
 import { createContext, useContext } from '/@/hooks/core/useContext';
 
 export interface LayoutContextProps {
-  fullHeaderRef: Ref<ComponentRef>;
+  fullHeader: Ref<ComponentRef>;
+  isMobile: Ref<boolean>;
 }
 
 const layoutContextInjectKey: InjectionKey<LayoutContextProps> = Symbol();