wip(menu): perf menu

src/components/Application/index.ts

@@ -2,9 +2,7 @@ import { withInstall } from '../util';
 import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
 import AppLogo from './src/AppLogo.vue';
 
-export const AppLocalePicker = createAsyncComponent(() => import('./src/AppLocalePicker.vue'), {
-  loading: true,
-});
+export const AppLocalePicker = createAsyncComponent(() => import('./src/AppLocalePicker.vue'));
 export const AppProvider = createAsyncComponent(() => import('./src/AppProvider.vue'));
 export const AppSearch = createAsyncComponent(() => import('./src/search/AppSearch.vue'), {
   loading: true,

src/components/Application/src/AppLocalePicker.vue

@@ -11,8 +11,8 @@
     :overlayClassName="`${prefixCls}-overlay`"
   >
     <span :class="prefixCls">
-      <GlobalOutlined :class="`${prefixCls}__icon`" />
-      <span v-if="showText">{{ getLangText }}</span>
+      <Icon icon="cil:language" />
+      <span v-if="showText" :class="`${prefixCls}__text`">{{ getLangText }}</span>
     </span>
   </Dropdown>
 </template>
@@ -30,9 +30,10 @@
   import { propTypes } from '/@/utils/propTypes';
   import { useDesign } from '/@/hooks/web/useDesign';
 
+  import Icon from '/@/components/Icon';
   export default defineComponent({
     name: 'AppLocalPicker',
-    components: { GlobalOutlined, Dropdown },
+    components: { GlobalOutlined, Dropdown, Icon },
     props: {
       // Whether to display text
       showText: propTypes.bool.def(true),
@@ -88,8 +89,8 @@
     align-items: center;
     cursor: pointer;
 
-    &__icon {
-      margin-right: 4px;
+    &__text {
+      margin-left: 6px;
     }
   }
 </style>

src/components/Application/src/AppLogo.vue

@@ -87,7 +87,7 @@
     }
 
     &__title {
-      font-size: 18px;
+      font-size: 16px;
       font-weight: 700;
       opacity: 0;
       transition: all 0.5s;

src/components/Application/src/AppProvider.vue

@@ -3,11 +3,13 @@
 </template>
 <script lang="ts">
   import type { PropType } from 'vue';
-  import { defineComponent, toRefs } from 'vue';
+  import { defineComponent, toRefs, ref } from 'vue';
 
   import { createAppProviderContext } from './useAppContext';
 
   import designSetting from '/@/settings/designSetting';
+  import { createBreakpointListen } from '/@/hooks/event/useBreakpoint';
+
   export default defineComponent({
     name: 'AppProvider',
     inheritAttrs: false,
@@ -18,8 +20,17 @@
       },
     },
     setup(props) {
+      const isMobileRef = ref(false);
+
+      createBreakpointListen(({ screenMap, sizeEnum, width }) => {
+        const lgWidth = screenMap.get(sizeEnum.LG);
+        if (lgWidth) {
+          isMobileRef.value = width.value - 1 < lgWidth;
+        }
+      });
+
       const { prefixCls } = toRefs(props);
-      createAppProviderContext({ prefixCls });
+      createAppProviderContext({ prefixCls, isMobile: isMobileRef });
       return {};
     },
   });

src/components/Application/src/search/AppSearch.vue

@@ -50,6 +50,6 @@
   @prefix-cls: ~'@{namespace}-app-search';
 
   .@{prefix-cls} {
-    padding: 0 10px;
+    padding: 2px;
   }
 </style>

src/components/Application/src/useAppContext.ts

@@ -3,6 +3,8 @@ import { createContext, useContext } from '/@/hooks/core/useContext';
 
 export interface AppProviderContextProps {
   prefixCls: Ref<string>;
+
+  isMobile: Ref<boolean>;
 }
 
 const key: InjectionKey<AppProviderContextProps> = Symbol();