perf: remove unless code

package.json

@@ -14,7 +14,8 @@
     "clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite",
     "clean:lib": "npx rimraf node_modules",
     "typecheck": "vuedx-typecheck .",
-    "lint:eslint": "eslint \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
+    "lint:eslint": "eslint \"{src,mock}/**/*.{vue,ts,tsx}\" ",
+    "lint:eslint:fix": "eslint \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
     "lint:prettier": "prettier --write --loglevel warn \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
     "lint:stylelint": "stylelint --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
     "lint:ls-lint": "ls-lint",

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 type { Menu } from '/@/router/types';
+
 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 { 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;

src/components/Authority/index.ts

@@ -1,7 +1,3 @@
-import { withInstall } from '../util';
-
 import Authority from './src/index.vue';
 
-withInstall(Authority);
-
 export { Authority };

src/components/Basic/src/BasicArrow.vue

@@ -10,9 +10,11 @@
 <script lang="ts">
   import { defineComponent, computed } from 'vue';
   import { RightOutlined } from '@ant-design/icons-vue';
-  import { propTypes } from '/@/utils/propTypes';
+
   import { useDesign } from '/@/hooks/web/useDesign';
 
+  import { propTypes } from '/@/utils/propTypes';
+
   export default defineComponent({
     name: 'BasicArrow',
     components: { RightOutlined },

src/components/Basic/src/BasicHelp.vue

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="tsx">
   import type { CSSProperties, PropType } from 'vue';
   import { defineComponent, computed, unref, h } from 'vue';
 
@@ -9,7 +9,9 @@
   import { isString, isArray } from '/@/utils/is';
   import { getSlot } from '/@/utils/helper/tsxHelper';
   import { propTypes } from '/@/utils/propTypes';
+
   import { useDesign } from '/@/hooks/web/useDesign';
+
   export default defineComponent({
     name: 'BasicHelp',
     components: { Tooltip },
@@ -40,7 +42,7 @@
     setup(props, { slots }) {
       const { prefixCls } = useDesign('basic-help');
 
-      const getOverlayStyleRef = computed(
+      const getOverlayStyle = computed(
         (): CSSProperties => {
           return {
             maxWidth: props.maxWidth,
@@ -48,7 +50,7 @@
         }
       );
 
-      const getWrapStyleRef = computed(
+      const getWrapStyle = computed(
         (): CSSProperties => {
           return {
             color: props.color,
@@ -65,12 +67,19 @@
         const list = props.text;
 
         if (isString(list)) {
-          return h('p', list);
+          return <p>{list}</p>;
         }
 
         if (isArray(list)) {
           return list.map((item, index) => {
-            return h('p', { key: item }, [props.showIndex ? `${index + 1}. ` : '', item]);
+            return (
+              <p key={item}>
+                <>
+                  {props.showIndex ? `${index + 1}. ` : ''}
+                  {item}
+                </>
+              </p>
+            );
           });
         }
 
@@ -78,34 +87,19 @@
       };
 
       return () => {
-        return h(
-          // @ts-ignores
-          Tooltip,
-          {
-            title: h(
-              'div',
-              {
-                style: unref(getWrapStyleRef),
-              },
-              [renderTitle()]
-            ),
-            overlayClassName: `${prefixCls}__wrap`,
-            autoAdjustOverflow: true,
-            overlayStyle: unref(getOverlayStyleRef),
-            placement: props.placement,
-            getPopupContainer: () => getPopupContainer(),
-          },
-          {
-            default: () =>
-              h(
-                'span',
-                {
-                  class: prefixCls,
-                  style: unref(getMainStyleRef),
-                },
-                getSlot(slots) || h(InfoCircleOutlined)
-              ),
-          }
+        return (
+          <Tooltip
+            title={<div style={unref(getWrapStyle)}>{renderTitle()}</div>}
+            overlayClassName={`${prefixCls}__wrap`}
+            autoAdjustOverflow={true}
+            overlayStyle={unref(getOverlayStyle)}
+            placement={props.placement as 'left'}
+            getPopupContainer={() => getPopupContainer()}
+          >
+            <span class={prefixCls} style={unref(getMainStyleRef)}>
+              {getSlot(slots) || <InfoCircleOutlined />}
+            </span>
+          </Tooltip>
         );
       };
     },

src/components/Basic/src/BasicTitle.vue

@@ -8,11 +8,12 @@
   import type { PropType } from 'vue';
 
   import { defineComponent } from 'vue';
-
   import BasicHelp from './BasicHelp.vue';
-  import { propTypes } from '/@/utils/propTypes';
+
   import { useDesign } from '/@/hooks/web/useDesign';
 
+  import { propTypes } from '/@/utils/propTypes';
+
   export default defineComponent({
     name: 'BasicTitle',
     components: { BasicHelp },

src/components/Button/index.ts

@@ -1,6 +1,4 @@
 import Button from './src/BasicButton.vue';
 import PopConfirmButton from './src/PopConfirmButton.vue';
-import { withInstall } from '../util';
 
-withInstall(Button, PopConfirmButton);
 export { Button, PopConfirmButton };

src/components/Button/src/BasicButton.vue

@@ -12,6 +12,7 @@
 
   import { Button } from 'ant-design-vue';
   import Icon from '/@/components/Icon';
+
   import { propTypes } from '/@/utils/propTypes';
 
   export default defineComponent({

src/components/Button/src/PopConfirmButton.vue

@@ -2,12 +2,15 @@
   import { defineComponent, h, unref, computed } from 'vue';
 
   import { Popconfirm } from 'ant-design-vue';
+
   import BasicButton from './BasicButton.vue';
+
   import { propTypes } from '/@/utils/propTypes';
-  import { useI18n } from '/@/hooks/web/useI18n';
   import { extendSlots } from '/@/utils/helper/tsxHelper';
   import { omit } from 'lodash-es';
+
   import { useAttrs } from '/@/hooks/core/useAttrs';
+  import { useI18n } from '/@/hooks/web/useI18n';
 
   export default defineComponent({
     name: 'PopButton',

src/components/ClickOutSide/index.ts

@@ -1,7 +1,3 @@
-import { withInstall } from '../util';
-
 import ClickOutSide from './src/index.vue';
 
-withInstall(ClickOutSide);
-
 export { ClickOutSide };

src/components/Container/index.ts

@@ -1,8 +1,6 @@
-import { withInstall } from '../util';
 import CollapseContainer from './src/collapse/CollapseContainer.vue';
 import ScrollContainer from './src/ScrollContainer.vue';
 import LazyContainer from './src/LazyContainer.vue';
 
-withInstall(ScrollContainer, CollapseContainer, LazyContainer);
 export { CollapseContainer, ScrollContainer, LazyContainer };
 export * from './src/types';

src/components/Drawer/index.ts

@@ -1,9 +1,5 @@
-import { withInstall } from '../util';
-
 import BasicDrawer from './src/BasicDrawer.vue';
 
 export { BasicDrawer };
 export * from './src/types';
 export { useDrawer, useDrawerInner } from './src/useDrawer';
-
-withInstall(BasicDrawer);

src/components/Dropdown/index.ts

@@ -1,7 +1,4 @@
-import { withInstall } from '../util';
-
 import Dropdown from './src/Dropdown.vue';
 
-withInstall(Dropdown);
 export * from './src/types';
 export { Dropdown };

src/components/Form/index.ts

@@ -1,7 +1,4 @@
 import BasicForm from './src/BasicForm.vue';
-import { withInstall } from '../util';
-
-withInstall(BasicForm);
 
 export * from './src/types/form';
 export * from './src/types/formItem';

src/components/Icon/index.ts

@@ -1,7 +1,4 @@
-import { withInstall } from '../util';
 import Icon from './src/index.vue';
 
-withInstall(Icon);
-
 export { Icon };
 export default Icon;

src/components/Modal/index.ts

@@ -1,9 +1,6 @@
 import './src/index.less';
-import { withInstall } from '../util';
 import BasicModal from './src/BasicModal.vue';
 
-withInstall(BasicModal);
-
 export { BasicModal };
 export { useModalContext } from './src/hooks/useModalContext';
 export { useModal, useModalInner } from './src/hooks/useModal';

src/components/Scrollbar/index.ts

@@ -2,10 +2,7 @@
  * copy from element-ui
  */
 
-import { withInstall } from '../util';
 import Scrollbar from './src/index.vue';
 
-withInstall(Scrollbar);
-
 export { Scrollbar };
 export type { ScrollbarType } from './src/types';

src/components/util.tsx

@@ -1,13 +1,4 @@
 import type { VNodeChild } from 'vue';
-import type { App } from 'vue';
-
-export function withInstall(...components: any[]) {
-  components.forEach((comp) => {
-    comp.install = (app: App) => {
-      app.component(comp.displayName || comp.name, comp);
-    };
-  });
-}
 
 export function convertToUnit(
   str: string | number | null | undefined,

src/design/ant/btn.less

@@ -1,4 +1,4 @@
-// button重置
+// button reset
 .ant-btn {
   // display: inline-flex;
   // justify-content: center;

src/design/ant/index.less

@@ -29,17 +29,6 @@
 }
 
 // =================================
-// ==============descriptions=======
-// =================================
-// .ant-descriptions-bordered .ant-descriptions-item-label {
-//   background-color: @background-color-light;
-// }
-
-// .ant-descriptions .ant-descriptions-item-content {
-//   color: @text-color-call-out;
-// }
-
-// =================================
 // ==============modal message======
 // =================================
 .modal-icon-warning {
@@ -57,18 +46,3 @@
 .modal-icon-info {
   color: @primary-color !important;
 }
-
-// =================================
-// ==============empty==============
-// =================================
-.ant-empty-image {
-  max-height: 144px;
-  min-height: 60px;
-}
-
-.ant-empty-description {
-  margin-top: 16px;
-  font-size: 14px;
-  line-height: 24px;
-  color: @text-color-call-out;
-}

src/directives/ripple/index.ts

@@ -1,4 +1,4 @@
-import { Directive } from 'vue';
+import type { Directive } from 'vue';
 import './index.less';
 export interface RippleOptions {
   event: string;

src/settings/designSetting.ts

@@ -2,7 +2,7 @@ export default {
   prefixCls: 'vben',
 };
 
-// header preset color
+// app theme preset color
 export const APP_PRESET_COLOR_LIST: string[] = [
   '#0084f4',
   '#009688',

src/utils/env.ts

@@ -1,22 +1,25 @@
 import type { GlobEnvConfig } from '/@/types/config';
 
+/**
+ * Get the global configuration (the configuration will be extracted independently when packaging)
+ */
 export function getGlobEnvConfig(): GlobEnvConfig {
   const env = import.meta.env;
   return (env as unknown) as GlobEnvConfig;
 }
 
 /**
- * @description: 开发模式
+ * @description: Development model
  */
 export const devMode = 'development';
 
 /**
- * @description: 生产模式
+ * @description: Production mode
  */
 export const prodMode = 'production';
 
 /**
- * @description: 获取环境变量
+ * @description: Get environment variables
  * @returns:
  * @example:
  */
@@ -25,7 +28,7 @@ export function getEnv(): string {
 }
 
 /**
- * @description: 是否是开发模式
+ * @description: Is it a development mode
  * @returns:
  * @example:
  */
@@ -34,7 +37,7 @@ export function isDevMode(): boolean {
 }
 
 /**
- * @description: 是否是生产模式模式
+ * @description: Is it a production mode
  * @returns:
  * @example:
  */
@@ -43,7 +46,7 @@ export function isProdMode(): boolean {
 }
 
 /**
- * @description: 是否开启mock
+ * @description: Whether to open mock
  * @returns:
  * @example:
  */

src/utils/uuid.ts

@@ -2,6 +2,7 @@ const hexList: string[] = [];
 for (let i = 0; i <= 15; i++) {
   hexList[i] = i.toString(16);
 }
+
 export function buildUUID(): string {
   let uuid = '';
   for (let i = 1; i <= 36; i++) {