perf: remove unless code

src/components/Application/index.ts

@@ -1,7 +1,6 @@
 import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
 import AppLogo from './src/AppLogo.vue';
 import AppProvider from './src/AppProvider.vue';
-import { withInstall } from '../util';
 
 export const AppLocalePicker = createAsyncComponent(() => import('./src/AppLocalePicker.vue'));
 export const AppSearch = createAsyncComponent(() => import('./src/search/AppSearch.vue'), {
@@ -10,5 +9,3 @@ export const AppSearch = createAsyncComponent(() => import('./src/search/AppSear
 
 export { useAppProviderContext } from './src/useAppContext';
 export { AppLogo, AppProvider };
-
-withInstall(AppLogo, AppProvider);

src/components/Application/src/AppLocalePicker.vue

@@ -17,19 +17,18 @@
   </Dropdown>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, watchEffect, unref, computed } from 'vue';
+  import type { LocaleType } from '/@/locales/types';
+  import type { DropMenu } from '/@/components/Dropdown';
 
-  import { Dropdown, DropMenu } from '/@/components/Dropdown';
+  import { defineComponent, ref, watchEffect, unref, computed } from 'vue';
+  import { Dropdown } from '/@/components/Dropdown';
+  import Icon from '/@/components/Icon';
 
   import { useLocale } from '/@/locales/useLocale';
   import { useLocaleSetting } from '/@/hooks/setting/useLocaleSetting';
-
-  import { LocaleType } from '/@/locales/types';
-
-  import { propTypes } from '/@/utils/propTypes';
   import { useDesign } from '/@/hooks/web/useDesign';
+  import { propTypes } from '/@/utils/propTypes';
 
-  import Icon from '/@/components/Icon';
   export default defineComponent({
     name: 'AppLocalPicker',
     components: { Dropdown, Icon },

src/components/Application/src/AppLogo.vue

@@ -20,13 +20,11 @@
   import { useGlobSetting } from '/@/hooks/setting';
   import { useGo } from '/@/hooks/web/usePage';
   import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+  import { useDesign } from '/@/hooks/web/useDesign';
 
   import { PageEnum } from '/@/enums/pageEnum';
-
   import { propTypes } from '/@/utils/propTypes';
 
-  import { useDesign } from '/@/hooks/web/useDesign';
-
   export default defineComponent({
     name: 'AppLogo',
     props: {

src/components/Application/src/AppProvider.vue

@@ -1,6 +1,3 @@
-<template>
-  <slot></slot>
-</template>
 <script lang="ts">
   import type { PropType } from 'vue';
   import { defineComponent, toRefs, ref } from 'vue';
@@ -19,7 +16,7 @@
         default: designSetting.prefixCls,
       },
     },
-    setup(props) {
+    setup(props, { slots }) {
       const isMobileRef = ref(false);
 
       createBreakpointListen(({ screenMap, sizeEnum, width }) => {
@@ -31,7 +28,7 @@
 
       const { prefixCls } = toRefs(props);
       createAppProviderContext({ prefixCls, isMobile: isMobileRef });
-      return {};
+      return () => slots.default?.();
     },
   });
 </script>

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

@@ -1,23 +1,11 @@
-<template>
-  <div :class="prefixCls" v-if="getShowSearch" @click.stop="handleSearch">
-    <Tooltip>
-      <template #title>
-        {{ t('common.searchText') }}
-      </template>
-      <SearchOutlined />
-    </Tooltip>
-
-    <AppSearchModal @close="handleClose" :visible="showModal" />
-  </div>
-</template>
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
+<script lang="tsx">
+  import { defineComponent, ref, unref } from 'vue';
   import { Tooltip } from 'ant-design-vue';
+  import { SearchOutlined } from '@ant-design/icons-vue';
+  import AppSearchModal from './AppSearchModal.vue';
 
   import { useDesign } from '/@/hooks/web/useDesign';
-  import AppSearchModal from './AppSearchModal.vue';
   import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
-  import { SearchOutlined } from '@ant-design/icons-vue';
   import { useI18n } from '/@/hooks/web/useI18n';
 
   export default defineComponent({
@@ -32,15 +20,26 @@
       function handleSearch() {
         showModal.value = true;
       }
-      return {
-        t,
-        prefixCls,
-        showModal,
-        getShowSearch,
-        handleClose: () => {
-          showModal.value = false;
-        },
-        handleSearch,
+
+      function handleClose() {
+        showModal.value = false;
+      }
+
+      return () => {
+        if (!getShowSearch.value) {
+          return null;
+        }
+        return (
+          <div class={prefixCls} onClick={handleSearch}>
+            <Tooltip>
+              {{
+                title: () => t('common.searchText'),
+                default: () => <SearchOutlined />,
+              }}
+            </Tooltip>
+            <AppSearchModal onClose={handleClose} visible={unref(showModal)} />
+          </div>
+        );
       };
     },
   });

src/components/Application/src/search/AppSearchFooter.vue

@@ -18,12 +18,13 @@
     <span>{{ t('common.closeText') }}</span>
   </div>
 </template>
+
 <script lang="ts">
   import { defineComponent } from 'vue';
+  import Icon from '/@/components/Icon';
 
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useI18n } from '/@/hooks/web/useI18n';
-  import Icon from '/@/components/Icon';
   export default defineComponent({
     name: 'AppSearchFooter',
     components: { Icon },

src/components/Application/src/search/AppSearchModal.vue

@@ -56,17 +56,18 @@
 </template>
 <script lang="ts">
   import { defineComponent, computed, unref, ref } from 'vue';
+  import { SearchOutlined } from '@ant-design/icons-vue';
+  import { Input } from 'ant-design-vue';
+  import AppSearchFooter from './AppSearchFooter.vue';
+  import Icon from '/@/components/Icon';
+
+  import clickOutside from '/@/directives/clickOutside';
 
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useRefs } from '/@/hooks/core/useRefs';
   import { useMenuSearch } from './useMenuSearch';
-  import { SearchOutlined } from '@ant-design/icons-vue';
-  import AppSearchFooter from './AppSearchFooter.vue';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useAppInject } from '/@/hooks/web/useAppInject';
-  import clickOutside from '/@/directives/clickOutside';
-  import { Input } from 'ant-design-vue';
-  import Icon from '/@/components/Icon';
 
   export default defineComponent({
     name: 'AppSearchModal',
@@ -108,6 +109,11 @@
         ];
       });
 
+      function handleClose() {
+        searchResult.value = [];
+        emit('close');
+      }
+
       return {
         t,
         prefixCls,
@@ -120,10 +126,7 @@
         setRefs,
         scrollWrap,
         handleMouseenter,
-        handleClose: () => {
-          searchResult.value = [];
-          emit('close');
-        },
+        handleClose,
       };
     },
   });

src/components/Application/src/search/useMenuSearch.ts

@@ -1,13 +1,17 @@
-import { cloneDeep } from 'lodash-es';
-import { ref, onBeforeMount, unref, Ref, nextTick } from 'vue';
-import { useI18n } from '/@/hooks/web/useI18n';
-import { getMenus } from '/@/router/menus';
 import type { Menu } from '/@/router/types';
+
+import { ref, onBeforeMount, unref, Ref, nextTick } from 'vue';
+
+import { getMenus } from '/@/router/menus';
+
+import { cloneDeep } from 'lodash-es';
 import { filter, forEach } from '/@/utils/helper/treeHelper';
+
 import { useDebounce } from '/@/hooks/core/useDebounce';
 import { useGo } from '/@/hooks/web/usePage';
 import { useScrollTo } from '/@/hooks/event/useScrollTo';
 import { useKeyPress } from '/@/hooks/event/useKeyPress';
+import { useI18n } from '/@/hooks/web/useI18n';
 
 export interface SearchResult {
   name: string;